1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | var react = require('react');
|
6 |
|
7 | function createNullCache() {
|
8 | return {
|
9 | get: function get() {
|
10 | return undefined;
|
11 | },
|
12 | set: function set(_, value) {
|
13 | return value;
|
14 | }
|
15 | };
|
16 | }
|
17 |
|
18 | function createSimpleCache() {
|
19 | var recs = {};
|
20 | return {
|
21 | get: function get(name) {
|
22 | return recs[name];
|
23 | },
|
24 | set: function set(name, value) {
|
25 | recs[name] = value;
|
26 | return value;
|
27 | }
|
28 | };
|
29 | }
|
30 |
|
31 | function _typeof(obj) {
|
32 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
33 | _typeof = function (obj) {
|
34 | return typeof obj;
|
35 | };
|
36 | } else {
|
37 | _typeof = function (obj) {
|
38 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
39 | };
|
40 | }
|
41 |
|
42 | return _typeof(obj);
|
43 | }
|
44 |
|
45 | function _defineProperty(obj, key, value) {
|
46 | if (key in obj) {
|
47 | Object.defineProperty(obj, key, {
|
48 | value: value,
|
49 | enumerable: true,
|
50 | configurable: true,
|
51 | writable: true
|
52 | });
|
53 | } else {
|
54 | obj[key] = value;
|
55 | }
|
56 |
|
57 | return obj;
|
58 | }
|
59 |
|
60 | function _objectSpread(target) {
|
61 | for (var i = 1; i < arguments.length; i++) {
|
62 | var source = arguments[i] != null ? arguments[i] : {};
|
63 | var ownKeys = Object.keys(source);
|
64 |
|
65 | if (typeof Object.getOwnPropertySymbols === 'function') {
|
66 | ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
|
67 | return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
68 | }));
|
69 | }
|
70 |
|
71 | ownKeys.forEach(function (key) {
|
72 | _defineProperty(target, key, source[key]);
|
73 | });
|
74 | }
|
75 |
|
76 | return target;
|
77 | }
|
78 |
|
79 | function _objectWithoutPropertiesLoose(source, excluded) {
|
80 | if (source == null) return {};
|
81 | var target = {};
|
82 | var sourceKeys = Object.keys(source);
|
83 | var key, i;
|
84 |
|
85 | for (i = 0; i < sourceKeys.length; i++) {
|
86 | key = sourceKeys[i];
|
87 | if (excluded.indexOf(key) >= 0) continue;
|
88 | target[key] = source[key];
|
89 | }
|
90 |
|
91 | return target;
|
92 | }
|
93 |
|
94 | function _objectWithoutProperties(source, excluded) {
|
95 | if (source == null) return {};
|
96 |
|
97 | var target = _objectWithoutPropertiesLoose(source, excluded);
|
98 |
|
99 | var key, i;
|
100 |
|
101 | if (Object.getOwnPropertySymbols) {
|
102 | var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
103 |
|
104 | for (i = 0; i < sourceSymbolKeys.length; i++) {
|
105 | key = sourceSymbolKeys[i];
|
106 | if (excluded.indexOf(key) >= 0) continue;
|
107 | if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
108 | target[key] = source[key];
|
109 | }
|
110 | }
|
111 |
|
112 | return target;
|
113 | }
|
114 |
|
115 | function _slicedToArray(arr, i) {
|
116 | return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
|
117 | }
|
118 |
|
119 | function _toConsumableArray(arr) {
|
120 | return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
|
121 | }
|
122 |
|
123 | function _arrayWithoutHoles(arr) {
|
124 | if (Array.isArray(arr)) {
|
125 | for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
126 |
|
127 | return arr2;
|
128 | }
|
129 | }
|
130 |
|
131 | function _arrayWithHoles(arr) {
|
132 | if (Array.isArray(arr)) return arr;
|
133 | }
|
134 |
|
135 | function _iterableToArray(iter) {
|
136 | if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
|
137 | }
|
138 |
|
139 | function _iterableToArrayLimit(arr, i) {
|
140 | var _arr = [];
|
141 | var _n = true;
|
142 | var _d = false;
|
143 | var _e = undefined;
|
144 |
|
145 | try {
|
146 | for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
147 | _arr.push(_s.value);
|
148 |
|
149 | if (i && _arr.length === i) break;
|
150 | }
|
151 | } catch (err) {
|
152 | _d = true;
|
153 | _e = err;
|
154 | } finally {
|
155 | try {
|
156 | if (!_n && _i["return"] != null) _i["return"]();
|
157 | } finally {
|
158 | if (_d) throw _e;
|
159 | }
|
160 | }
|
161 |
|
162 | return _arr;
|
163 | }
|
164 |
|
165 | function _nonIterableSpread() {
|
166 | throw new TypeError("Invalid attempt to spread non-iterable instance");
|
167 | }
|
168 |
|
169 | function _nonIterableRest() {
|
170 | throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
171 | }
|
172 |
|
173 | var DesignSystemContext = react.createContext({});
|
174 |
|
175 | function useDesignSystem() {
|
176 | return react.useContext(DesignSystemContext);
|
177 | }
|
178 |
|
179 | function useStyle(componentName, props, options) {
|
180 | var ds = useDesignSystem();
|
181 | return ds.applyStyles(componentName, props, options);
|
182 | }
|
183 |
|
184 | function arrayize(val) {
|
185 | if (Array.isArray(val)) {
|
186 | return val;
|
187 | }
|
188 |
|
189 | return [val];
|
190 | }
|
191 |
|
192 | function cleanProps(props, blacklist) {
|
193 | return Object.keys(props).reduce(function (result, propName) {
|
194 | if (blacklist.includes(propName)) {
|
195 | return result;
|
196 | }
|
197 |
|
198 | return _objectSpread({}, result, _defineProperty({}, propName, props[propName]));
|
199 | }, {});
|
200 | }
|
201 |
|
202 | function convertUnit(unit) {
|
203 | var multiplier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
204 | var unitType = arguments.length > 2 ? arguments[2] : undefined;
|
205 | var num = Number(unit);
|
206 |
|
207 | if (Number.isNaN(num)) {
|
208 | return unit.replace(/^(-?\d+(?:\.\d+)?)(?:\s*([a-zA-Z%]+))?$/, function (_, parsedNumber, parsedUnit) {
|
209 | return convertUnit(parsedNumber, multiplier, parsedUnit);
|
210 | });
|
211 | }
|
212 |
|
213 | var isInt = Number.isInteger(num);
|
214 |
|
215 | if (isInt) {
|
216 | return "".concat(num * multiplier).concat(unitType || 'px');
|
217 | } else if (unitType != null) {
|
218 | return "".concat(num * multiplier).concat(unitType);
|
219 | }
|
220 |
|
221 | return "".concat(num * multiplier * 100, "%");
|
222 | }
|
223 |
|
224 | function getResponsiveValue(breakpoint, value, defaultValue) {
|
225 | var defaultLength = Array.isArray(defaultValue) ? defaultValue.length : defaultValue !== undefined ? 1 : 0;
|
226 | var valueLength = value.length;
|
227 | var maxLength = Math.max(valueLength, defaultLength);
|
228 | var currentValue;
|
229 | var currentDefault;
|
230 |
|
231 | if (value[breakpoint] === null) {
|
232 | return null;
|
233 | }
|
234 |
|
235 | if (defaultValue === undefined) {
|
236 | for (var i = 0; i < valueLength; i++) {
|
237 | currentValue = value[i] === undefined ? currentValue : value[i];
|
238 |
|
239 | if (i === breakpoint) {
|
240 | break;
|
241 | }
|
242 | }
|
243 |
|
244 | return currentValue === undefined ? null : currentValue;
|
245 | }
|
246 |
|
247 | var defaultValues = Array.isArray(defaultValue) ? defaultValue : Array(maxLength).fill(defaultValue);
|
248 |
|
249 | for (var _i = 0; _i < maxLength; _i++) {
|
250 | currentDefault = defaultValues[_i] === undefined ? currentDefault : defaultValues[_i];
|
251 | currentValue = value[_i] === null ? null : value[_i] === undefined ? currentDefault : value[_i];
|
252 |
|
253 | if (_i === breakpoint) {
|
254 | break;
|
255 | }
|
256 | }
|
257 |
|
258 | return currentValue === undefined ? null : currentValue;
|
259 | }
|
260 |
|
261 | function createComponentFactory(_ref) {
|
262 | var createStyle = _ref.createStyle;
|
263 | return function createComponent(componentName, component) {
|
264 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
265 | var _options$cacheProps = options.cacheProps,
|
266 | cacheProps = _options$cacheProps === void 0 ? [] : _options$cacheProps,
|
267 | _options$stripProps = options.stripProps,
|
268 | stripProps = _options$stripProps === void 0 ? [] : _options$stripProps,
|
269 | style = options.style,
|
270 | _options$styles = options.styles,
|
271 | styles = _options$styles === void 0 ? [] : _options$styles;
|
272 | var opts = {
|
273 | cacheProps: cacheProps,
|
274 | stripProps: stripProps,
|
275 | styles: styles
|
276 | };
|
277 |
|
278 | if (style) {
|
279 | opts.styles = [createStyle(cacheProps, style, stripProps)].concat(_toConsumableArray(styles));
|
280 | }
|
281 |
|
282 | if (styles) {
|
283 | styles.forEach(function (styler) {
|
284 | var _opts$cacheProps, _opts$stripProps;
|
285 |
|
286 | (_opts$cacheProps = opts.cacheProps).push.apply(_opts$cacheProps, _toConsumableArray(styler.propNames));
|
287 |
|
288 | (_opts$stripProps = opts.stripProps).push.apply(_opts$stripProps, _toConsumableArray(styler.stripProps));
|
289 | });
|
290 | }
|
291 |
|
292 | var factory = react.forwardRef(function (_ref2, ref) {
|
293 | var _ref2$as = _ref2.as,
|
294 | as = _ref2$as === void 0 ? component : _ref2$as,
|
295 | restProps = _objectWithoutProperties(_ref2, ["as"]);
|
296 |
|
297 | var isDsComp = typeof as !== 'string' && as.$$nprdds;
|
298 | var props = useStyle(componentName, restProps, _objectSpread({}, opts, {
|
299 | passthrough: isDsComp
|
300 | }));
|
301 | return react.createElement(as, _objectSpread({}, isDsComp ? props : cleanProps(props, props.stripProps), {
|
302 | ref: ref
|
303 | }));
|
304 | });
|
305 | factory.displayName = componentName;
|
306 | factory.$$nprdds = true;
|
307 | return factory;
|
308 | };
|
309 | }
|
310 |
|
311 | function formatStyleResult(value, cssAttributes, formatter) {
|
312 | if (value == null) {
|
313 | return {};
|
314 | }
|
315 |
|
316 | var formattedValue = formatter(value);
|
317 |
|
318 | if (cssAttributes.length === 1) {
|
319 | return _defineProperty({}, cssAttributes[0], formattedValue);
|
320 | }
|
321 |
|
322 | return cssAttributes.reduce(function (res, attrName) {
|
323 | return _objectSpread({}, res, _defineProperty({}, attrName, formattedValue));
|
324 | }, {});
|
325 | }
|
326 |
|
327 | function createSimpleStyle(propName, cssAttribute, formatter, defaultValue) {
|
328 | var cssAttributes = Array.isArray(cssAttribute) ? cssAttribute : [cssAttribute];
|
329 | return {
|
330 | apply: function apply(props, _ref) {
|
331 | var bp = _ref.viewport;
|
332 | var propValue = arrayize(props[propName]);
|
333 | var bpValue = getResponsiveValue(bp, propValue, defaultValue);
|
334 | return formatStyleResult(bpValue, cssAttributes, formatter);
|
335 | },
|
336 | propNames: [propName],
|
337 | stripProps: [propName]
|
338 | };
|
339 | }
|
340 | function createNumericStyle(propName, cssAttribute, defaultValue) {
|
341 | return createSimpleStyle(propName, cssAttribute, convertUnit, defaultValue);
|
342 | }
|
343 | function createStringStyle(propName, cssAttribute, defaultValue) {
|
344 | return createSimpleStyle(propName, cssAttribute, function (val) {
|
345 | return val;
|
346 | }, defaultValue);
|
347 | }
|
348 |
|
349 | function createSystemStyle(propName, cssAttribute, systemName, formatter, defaultValue) {
|
350 | var cssAttributes = arrayize(cssAttribute);
|
351 | return {
|
352 | apply: function apply(props, _ref) {
|
353 | var theme = _ref.theme,
|
354 | bp = _ref.viewport;
|
355 | var propValue = arrayize(props[propName]);
|
356 | var systemValue = theme.get(systemName);
|
357 | var bpValue = getResponsiveValue(bp, propValue, defaultValue);
|
358 |
|
359 | if (bpValue == null) {
|
360 | return formatStyleResult(null, cssAttributes, formatter);
|
361 | }
|
362 |
|
363 | var bpValueNum = Number(bpValue);
|
364 | var isNegativeInt = !Number.isNaN(bpValueNum) && Number.isInteger(bpValueNum) && bpValueNum < 0;
|
365 | var systemBpValue = systemValue[isNegativeInt ? -bpValue : bpValue] || bpValue;
|
366 | return formatStyleResult(isNegativeInt ? -Number(systemBpValue) : systemBpValue, cssAttributes, formatter);
|
367 | },
|
368 | propNames: [propName],
|
369 | stripProps: [propName]
|
370 | };
|
371 | }
|
372 | function createNumericSystemStyle(propName, cssAttribute, systemName, defaultValue) {
|
373 | return createSystemStyle(propName, cssAttribute, systemName, convertUnit, defaultValue);
|
374 | }
|
375 | function createStringSystemStyle(propName, cssAttribute, systemName, defaultValue) {
|
376 | return createSystemStyle(propName, cssAttribute, systemName, function (val) {
|
377 | return val;
|
378 | }, defaultValue);
|
379 | }
|
380 | function createScaledFontSizeSystemStyle(propName, defaultValue) {
|
381 | return {
|
382 | apply: function apply(props, _ref2) {
|
383 | var theme = _ref2.theme,
|
384 | bp = _ref2.viewport;
|
385 | var sizeIndex = getResponsiveValue(bp, arrayize(props.fontSize), 0);
|
386 | var size = theme.get('fontSizes')[sizeIndex || 0] || sizeIndex;
|
387 | var value = getResponsiveValue(bp, arrayize(props[propName]), theme.get(propName) || defaultValue);
|
388 |
|
389 | if (Number.isNaN(Number(value))) {
|
390 | return _defineProperty({}, propName, value.replace(/^(-?\d+(?:\.\d+)?)(?:\s*([a-zA-Z%]+))?$/, function (_, parsedNumber, parsedUnit) {
|
391 | return convertUnit(parsedUnit === '%' ? size : parsedNumber, parsedUnit === '%' ? parsedNumber / 100 : 1);
|
392 | }));
|
393 | }
|
394 |
|
395 | return _defineProperty({}, propName, convertUnit(size, Number(value)));
|
396 | },
|
397 | propNames: [propName],
|
398 | stripProps: [propName]
|
399 | };
|
400 | }
|
401 |
|
402 | var bgColor = createStringSystemStyle('bgColor', 'backgroundColor', 'colors');
|
403 | var borderColor = createStringSystemStyle('borderColor', 'borderColor', 'colors');
|
404 | var color = createStringSystemStyle('color', 'color', 'colors');
|
405 | var opacity = createStringStyle('opacity', 'opacity');
|
406 | var shadow = createStringStyle('shadow', 'boxShadow');
|
407 |
|
408 | var borderRadius = createNumericSystemStyle('borderRadius', 'borderRadius', 'borderRadiuses');
|
409 | var borderRadiusTopLeft = createNumericSystemStyle('borderRadiusTopLeft', 'borderTopLeftRadius', 'borderRadiuses');
|
410 | var borderRadiusTopRight = createNumericSystemStyle('borderRadiusTopRight', 'borderTopRightRadius', 'borderRadiuses');
|
411 | var borderRadiusBottomLeft = createNumericSystemStyle('borderRadiusBottomLeft', 'borderBottomLeftRadius', 'borderRadiuses');
|
412 | var borderRadiusBottomRight = createNumericSystemStyle('borderRadiusBottomRight', 'borderBottomRightRadius', 'borderRadiuses');
|
413 | var borderStyle = createStringStyle('borderStyle', 'borderStyle');
|
414 | var borderWidth = createNumericStyle('borderWidth', 'borderWidth');
|
415 | var display = createStringStyle('display', 'display');
|
416 | var height = createNumericStyle('height', 'height');
|
417 | var minHeight = createNumericStyle('minHeight', 'minHeight');
|
418 | var minWidth = createNumericStyle('minWidth', 'minWidth');
|
419 | var maxHeight = createNumericStyle('maxHeight', 'maxHeight');
|
420 | var maxWidth = createNumericSystemStyle('maxWidth', 'maxWidth', 'containerSizes');
|
421 | var width = createNumericStyle('width', 'width');
|
422 |
|
423 | var alignContent = createStringStyle('alignContent', 'alignContent');
|
424 | var alignItems = createStringStyle('alignItems', 'alignItems');
|
425 | var alignSelf = createStringStyle('alignSelf', 'alignSelf');
|
426 | var flex = createStringStyle('flex', 'flex');
|
427 | var flexBasis = createNumericStyle('flexBasis', 'flexBasis');
|
428 | var flexDirection = createStringStyle('flexDirection', 'flexDirection');
|
429 | var flexGrow = createStringStyle('flexGrow', 'flexGrow');
|
430 | var flexOrder = createStringStyle('flexOrder', 'order');
|
431 | var flexShrink = createStringStyle('flexShrink', 'flexShrink');
|
432 | var flexWrap = createStringStyle('flexWrap', 'flexWrap');
|
433 | var justifyContent = createStringStyle('justifyContent', 'justifyContent');
|
434 |
|
435 | var overflow = createStringStyle('overflow', 'overflow');
|
436 | var overflowX = createStringStyle('overflowX', 'overflowX');
|
437 | var overflowY = createStringStyle('overflowY', 'overflowY');
|
438 | var transition = createStringStyle('transition', 'transition');
|
439 |
|
440 | var cursor = createStringStyle('cursor', 'cursor', null);
|
441 | var pointerEvents = createStringStyle('pointerEvents', 'pointerEvents', null);
|
442 |
|
443 | var bottom = createNumericStyle('bottom', 'bottom');
|
444 | var left = createNumericStyle('left', 'left');
|
445 | var right = createNumericStyle('right', 'right');
|
446 | var position = createStringStyle('position', 'position');
|
447 | var top = createNumericStyle('top', 'top');
|
448 | var zIndex = createStringStyle('zIndex', 'zIndex');
|
449 |
|
450 | var m = createNumericSystemStyle('m', 'margin', 'spacing');
|
451 | var mb = createNumericSystemStyle('mb', 'marginBottom', 'spacing');
|
452 | var ml = createNumericSystemStyle('ml', 'marginLeft', 'spacing');
|
453 | var mr = createNumericSystemStyle('mr', 'marginRight', 'spacing');
|
454 | var mt = createNumericSystemStyle('mt', 'marginTop', 'spacing');
|
455 | var mx = createNumericSystemStyle('mx', ['marginLeft', 'marginRight'], 'spacing');
|
456 | var my = createNumericSystemStyle('my', ['marginTop', 'marginBottom'], 'spacing');
|
457 | var p = createNumericSystemStyle('p', 'padding', 'spacing');
|
458 | var pb = createNumericSystemStyle('pb', 'paddingBottom', 'spacing');
|
459 | var pl = createNumericSystemStyle('pl', 'paddingLeft', 'spacing');
|
460 | var pr = createNumericSystemStyle('pr', 'paddingRight', 'spacing');
|
461 | var pt = createNumericSystemStyle('pt', 'paddingTop', 'spacing');
|
462 | var px = createNumericSystemStyle('px', ['paddingLeft', 'paddingRight'], 'spacing');
|
463 | var py = createNumericSystemStyle('py', ['paddingTop', 'paddingBottom'], 'spacing');
|
464 |
|
465 | var fontFamily = createStringSystemStyle('fontFamily', 'fontFamily', 'fontFamilies', 'default');
|
466 | var fontSize = createNumericSystemStyle('fontSize', 'fontSize', 'fontSizes', 0);
|
467 | var fontWeight = createStringStyle('fontWeight', 'fontWeight');
|
468 | var lineHeight = createScaledFontSizeSystemStyle('lineHeight');
|
469 | var textAlign = createStringStyle('textAlign', 'textAlign');
|
470 | var textOverflow = createStringStyle('textOverflow', 'textOverflow');
|
471 | var textTransform = createStringStyle('textTransform', 'textTransform');
|
472 | var whiteSpace = createStringStyle('whiteSpace', 'whiteSpace');
|
473 |
|
474 |
|
475 |
|
476 | var index = Object.freeze({
|
477 | bgColor: bgColor,
|
478 | borderColor: borderColor,
|
479 | color: color,
|
480 | opacity: opacity,
|
481 | shadow: shadow,
|
482 | borderRadius: borderRadius,
|
483 | borderRadiusTopLeft: borderRadiusTopLeft,
|
484 | borderRadiusTopRight: borderRadiusTopRight,
|
485 | borderRadiusBottomLeft: borderRadiusBottomLeft,
|
486 | borderRadiusBottomRight: borderRadiusBottomRight,
|
487 | borderStyle: borderStyle,
|
488 | borderWidth: borderWidth,
|
489 | display: display,
|
490 | height: height,
|
491 | minHeight: minHeight,
|
492 | minWidth: minWidth,
|
493 | maxHeight: maxHeight,
|
494 | maxWidth: maxWidth,
|
495 | width: width,
|
496 | alignContent: alignContent,
|
497 | alignItems: alignItems,
|
498 | alignSelf: alignSelf,
|
499 | flex: flex,
|
500 | flexBasis: flexBasis,
|
501 | flexDirection: flexDirection,
|
502 | flexGrow: flexGrow,
|
503 | flexOrder: flexOrder,
|
504 | flexShrink: flexShrink,
|
505 | flexWrap: flexWrap,
|
506 | justifyContent: justifyContent,
|
507 | overflow: overflow,
|
508 | overflowX: overflowX,
|
509 | overflowY: overflowY,
|
510 | transition: transition,
|
511 | cursor: cursor,
|
512 | pointerEvents: pointerEvents,
|
513 | bottom: bottom,
|
514 | left: left,
|
515 | right: right,
|
516 | position: position,
|
517 | top: top,
|
518 | zIndex: zIndex,
|
519 | m: m,
|
520 | mb: mb,
|
521 | ml: ml,
|
522 | mr: mr,
|
523 | mt: mt,
|
524 | mx: mx,
|
525 | my: my,
|
526 | p: p,
|
527 | pb: pb,
|
528 | pl: pl,
|
529 | pr: pr,
|
530 | pt: pt,
|
531 | px: px,
|
532 | py: py,
|
533 | fontFamily: fontFamily,
|
534 | fontSize: fontSize,
|
535 | fontWeight: fontWeight,
|
536 | lineHeight: lineHeight,
|
537 | textAlign: textAlign,
|
538 | textOverflow: textOverflow,
|
539 | textTransform: textTransform,
|
540 | whiteSpace: whiteSpace
|
541 | });
|
542 |
|
543 | var styleList = [alignContent, alignItems, alignSelf, bgColor, borderColor, borderRadius, borderStyle, borderWidth, borderRadiusBottomLeft, borderRadiusBottomRight, borderRadiusTopLeft, borderRadiusTopRight, bottom, color, cursor, display, flex, flexBasis, flexDirection, flexGrow, flexOrder, flexShrink, flexWrap, fontFamily, fontSize, fontWeight, height, justifyContent, left, lineHeight, m, mx, my, mb, ml, mr, mt, minHeight, minWidth, maxHeight, maxWidth, opacity, overflow, overflowX, overflowY, p, px, py, pt, pb, pl, pr, pointerEvents, position, right, shadow, transition, textAlign, textOverflow, textTransform, top, width, whiteSpace, zIndex];
|
544 |
|
545 | function createSystem(_ref) {
|
546 | var cache = _ref.cache,
|
547 | _ref$componentStyles = _ref.componentStyles,
|
548 | componentStyles = _ref$componentStyles === void 0 ? {} : _ref$componentStyles,
|
549 | _ref$globalStyles = _ref.globalStyles,
|
550 | globalStyles = _ref$globalStyles === void 0 ? [] : _ref$globalStyles,
|
551 | styleApplicatorFactory = _ref.styleApplicatorFactory,
|
552 | theme = _ref.theme,
|
553 | _ref$viewport = _ref.viewport,
|
554 | viewport = _ref$viewport === void 0 ? 0 : _ref$viewport;
|
555 |
|
556 | var _useState = react.useState(viewport),
|
557 | _useState2 = _slicedToArray(_useState, 2),
|
558 | currentViewport = _useState2[0],
|
559 | setViewport = _useState2[1];
|
560 |
|
561 | var styleApplicator = react.useMemo(function () {
|
562 | return styleApplicatorFactory({
|
563 | cache: cache,
|
564 | componentStyles: componentStyles,
|
565 | globalStyles: globalStyles
|
566 | });
|
567 | }, [cache, componentStyles, globalStyles]);
|
568 | var applyStyles = react.useMemo(function () {
|
569 | return function (componentName, props) {
|
570 | var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
571 | return styleApplicator.apply(componentName, props, {
|
572 | theme: theme,
|
573 | viewport: currentViewport
|
574 | }, options);
|
575 | };
|
576 | }, [currentViewport, theme]);
|
577 | return {
|
578 | applyStyles: applyStyles,
|
579 | setViewport: setViewport,
|
580 | theme: theme,
|
581 | viewport: currentViewport
|
582 | };
|
583 | }
|
584 |
|
585 | function createTheme(settings) {
|
586 | return {
|
587 | color: function color(valueOrName, defaultValueOrName) {
|
588 | var color = settings.colors[valueOrName];
|
589 |
|
590 | if (color == null) {
|
591 | if (defaultValueOrName != null) {
|
592 | return settings.colors[defaultValueOrName] || defaultValueOrName;
|
593 | }
|
594 |
|
595 | return valueOrName;
|
596 | }
|
597 |
|
598 | return color;
|
599 | },
|
600 | get: function get(attributeName, defaultValue) {
|
601 | var attributeValues = settings[attributeName];
|
602 |
|
603 | if (attributeValues == null) {
|
604 | if (defaultValue == null) {
|
605 | throw new Error("There is no ".concat(attributeName, " defined in theme"));
|
606 | } else {
|
607 | return defaultValue;
|
608 | }
|
609 | } else if (_typeof(attributeValues) === 'object' && !Array.isArray(attributeValues) && defaultValue != null) {
|
610 | return attributeValues[defaultValue] || defaultValue;
|
611 | }
|
612 |
|
613 | return attributeValues;
|
614 | }
|
615 | };
|
616 | }
|
617 |
|
618 | var MOBILE_BP = "only screen";
|
619 | var TABLET_BP = "screen and (min-width: ".concat(641 / 16, "em)");
|
620 | var DESKTOP_BP = "screen and (min-width: ".concat(1025 / 16, "em)");
|
621 | var L_DESKTOP_BP = "screen and (min-width: ".concat(1280 / 16, "em)");
|
622 | var XL_DESKTOP_BP = "screen and (min-width: ".concat(1441 / 16, "em)");
|
623 | var XXL_DESKTOP_BP = "screen and (min-width: ".concat(1921 / 16, "em)");
|
624 | var colors = {
|
625 | blue: '#3B5998',
|
626 | green: '#3CD048',
|
627 | greenDarker: '#54BC5D',
|
628 | grey: '#A8A8A8',
|
629 | greyDark: '#4A4A4A',
|
630 | greyDarkest: '#303030',
|
631 | greyLight: '#E7E7E7',
|
632 | greyLighter: '#F7F7F7',
|
633 | greyLightest: '#FFFFFF',
|
634 | lightBlue: '#4B6EB9',
|
635 | lightTransparent: 'rgba(255,255,255, 0.9)',
|
636 | lighterTransparent: 'rgba(255,255,255, 0.8)',
|
637 | orange: '#FD7400',
|
638 | pinkDark: '#AA2554',
|
639 | primary: '#D03C70',
|
640 | primaryLight: '#FA4B88',
|
641 | red: '#EA2E49',
|
642 | turqoise: '#1E839D',
|
643 | turqoiseDark: '#197187',
|
644 | turqoiseLight: '#26A8C9',
|
645 | twitter: '#1B95E0',
|
646 | twitterLight: '#1B95E0',
|
647 | white: '#FFFFFF',
|
648 | yellow: '#FFE11A'
|
649 | };
|
650 | var defaultTheme = createTheme({
|
651 | borderRadiuses: ['5px', '15px', '30px', '99999px'],
|
652 | breakpoints: [MOBILE_BP, TABLET_BP, DESKTOP_BP, L_DESKTOP_BP, XL_DESKTOP_BP, XXL_DESKTOP_BP],
|
653 | colors: colors,
|
654 | containerSizes: ['100%', '100%', '968px', '1240px', '1400px'],
|
655 | fontFamilies: {
|
656 | default: '"Palanquin", "Helvetica", sans-serif'
|
657 | },
|
658 | fontSizes: [16, 20, 24, 32, 48, 64, 72],
|
659 | gutters: [12, 12, 12],
|
660 | importFonts: ["@import url('https://fonts.googleapis.com/css?family=Palanquin:400,500,600&subset=latin-ext')"],
|
661 | lineHeight: 'normal',
|
662 | spacing: [0, 4, 8, 16, 32, 64, 128, 256, 512]
|
663 | });
|
664 |
|
665 | var IfViewport = function IfViewport(_ref) {
|
666 | var children = _ref.children,
|
667 | gt = _ref.gt,
|
668 | gte = _ref.gte,
|
669 | is = _ref.is,
|
670 | lt = _ref.lt,
|
671 | lte = _ref.lte;
|
672 |
|
673 | var _useDesignSystem = useDesignSystem(),
|
674 | viewport = _useDesignSystem.viewport;
|
675 |
|
676 | if (is != null) {
|
677 | if (Array.isArray(is) && is.includes(viewport)) {
|
678 | return children();
|
679 | }
|
680 |
|
681 | if (is === viewport) {
|
682 | return children();
|
683 | }
|
684 | }
|
685 |
|
686 | if (gt != null && viewport > gt || lt != null && viewport < lt || gte != null && viewport >= gte || lte != null && viewport <= lte) {
|
687 | return children();
|
688 | }
|
689 |
|
690 | if (lt != null && viewport < lt) {
|
691 | return children();
|
692 | }
|
693 |
|
694 | return null;
|
695 | };
|
696 |
|
697 | IfViewport.displayName = 'IfViewport';
|
698 |
|
699 | exports.defaultTheme = defaultTheme;
|
700 | exports.DesignSystemContext = DesignSystemContext;
|
701 | exports.IfViewport = IfViewport;
|
702 | exports.createComponentFactory = createComponentFactory;
|
703 | exports.createNullCache = createNullCache;
|
704 | exports.createSimpleCache = createSimpleCache;
|
705 | exports.useDesignSystem = useDesignSystem;
|
706 | exports.useStyle = useStyle;
|
707 | exports.styles = index;
|
708 | exports.styleList = styleList;
|
709 | exports.createSimpleStyle = createSimpleStyle;
|
710 | exports.createNumericStyle = createNumericStyle;
|
711 | exports.createStringStyle = createStringStyle;
|
712 | exports.createSystemStyle = createSystemStyle;
|
713 | exports.createNumericSystemStyle = createNumericSystemStyle;
|
714 | exports.createStringSystemStyle = createStringSystemStyle;
|
715 | exports.createScaledFontSizeSystemStyle = createScaledFontSizeSystemStyle;
|
716 | exports.createSystem = createSystem;
|
717 | exports.createTheme = createTheme;
|
718 | exports.arrayize = arrayize;
|
719 | exports.cleanProps = cleanProps;
|
720 | exports.convertUnit = convertUnit;
|
721 | exports.getResponsiveValue = getResponsiveValue;
|