@flodesk/grain 8.2.0 → 8.4.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.
- package/es/components/box.js +10 -4
- package/es/components/flex.js +49 -0
- package/es/components/index.js +2 -1
- package/es/types.js +18 -3
- package/package.json +1 -1
package/es/components/box.js
CHANGED
|
@@ -2,7 +2,7 @@ import "core-js/modules/es.object.keys.js";
|
|
|
2
2
|
import "core-js/modules/es.array.index-of.js";
|
|
3
3
|
import "core-js/modules/es.symbol.js";
|
|
4
4
|
import "core-js/modules/es.object.assign.js";
|
|
5
|
-
var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex", "tag", "opacity"];
|
|
5
|
+
var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex", "tag", "opacity", "order", "alignSelf", "flex"];
|
|
6
6
|
|
|
7
7
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
8
8
|
|
|
@@ -10,7 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
10
10
|
|
|
11
11
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
12
|
|
|
13
|
-
import { getBorder, getColor, getRadius, getResponsiveSpace, getShadow, getResponsiveDimension } from '../utilities';
|
|
13
|
+
import { getBorder, getColor, getRadius, getResponsiveSpace, getShadow, getResponsiveDimension, getResponsiveOneOf } from '../utilities';
|
|
14
14
|
import React, { forwardRef } from 'react';
|
|
15
15
|
import { css } from '@emotion/react';
|
|
16
16
|
import { types } from '../types';
|
|
@@ -58,12 +58,15 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
58
58
|
_ref$tag = _ref.tag,
|
|
59
59
|
tag = _ref$tag === void 0 ? 'div' : _ref$tag,
|
|
60
60
|
opacity = _ref.opacity,
|
|
61
|
+
order = _ref.order,
|
|
62
|
+
alignSelf = _ref.alignSelf,
|
|
63
|
+
flex = _ref.flex,
|
|
61
64
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
62
65
|
|
|
63
66
|
var Tag = tag;
|
|
64
67
|
return ___EmotionJSX(Tag, _extends({
|
|
65
68
|
ref: ref,
|
|
66
|
-
css: /*#__PURE__*/css(getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";overflow:", overflow, ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
69
|
+
css: /*#__PURE__*/css(getBorder(borderSide, borderWidth, borderColor), ";", getResponsiveSpace('padding', padding), ";", getResponsiveSpace('padding-top', paddingTop || paddingY), ";", getResponsiveSpace('padding-bottom', paddingBottom || paddingY), ";", getResponsiveSpace('padding-left', paddingLeft || paddingX), ";", getResponsiveSpace('padding-right', paddingRight || paddingX), ";", getResponsiveSpace('margin', margin), ";", getResponsiveSpace('margin-top', marginTop || marginY), ";", getResponsiveSpace('margin-bottom', marginBottom || marginY), ";", getResponsiveSpace('margin-left', marginLeft || marginX), ";", getResponsiveSpace('margin-right', marginRight || marginX), ";", getResponsiveSpace('top', top), ";", getResponsiveSpace('bottom', bottom), ";", getResponsiveSpace('left', left), ";", getResponsiveSpace('right', right), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('min-width', minWidth), ";", getResponsiveDimension('max-width', maxWidth), ";", getResponsiveDimension('height', height), ";", getResponsiveDimension('min-height', minHeight), ";", getResponsiveDimension('max-height', maxHeight), ";color:", getColor(color), ";background-color:", getColor(backgroundColor), ";position:", position, ";border-radius:", getRadius(radius), ";box-shadow:", getShadow(shadow), ";overflow:", overflow, ";aspect-ratio:", aspectRatio, ";z-index:", zIndex, ";", Boolean(opacity) && "opacity: ".concat(opacity), ";order:", order, ";flex:", flex, ";", getResponsiveOneOf('align-self', alignSelf), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Box;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JveC5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUVnQiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9ib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgZ2V0Qm9yZGVyLFxuICBnZXRDb2xvcixcbiAgZ2V0UmFkaXVzLFxuICBnZXRSZXNwb25zaXZlU3BhY2UsXG4gIGdldFNoYWRvdyxcbiAgZ2V0UmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgZ2V0UmVzcG9uc2l2ZU9uZU9mLFxufSBmcm9tICcuLi91dGlsaXRpZXMnO1xuXG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcblxuZXhwb3J0IGNvbnN0IEJveCA9IGZvcndhcmRSZWYoXG4gIChcbiAgICB7XG4gICAgICBjaGlsZHJlbixcbiAgICAgIGNvbG9yLFxuICAgICAgYmFja2dyb3VuZENvbG9yLFxuICAgICAgYm9yZGVyQ29sb3IgPSAnYm9yZGVyJyxcbiAgICAgIGJvcmRlcldpZHRoID0gJzFweCcsXG4gICAgICBib3JkZXJTaWRlLFxuICAgICAgd2lkdGgsXG4gICAgICBtaW5XaWR0aCxcbiAgICAgIG1heFdpZHRoLFxuICAgICAgaGVpZ2h0LFxuICAgICAgbWluSGVpZ2h0LFxuICAgICAgbWF4SGVpZ2h0LFxuICAgICAgcmFkaXVzLFxuICAgICAgcGFkZGluZyxcbiAgICAgIHBhZGRpbmdUb3AsXG4gICAgICBwYWRkaW5nQm90dG9tLFxuICAgICAgcGFkZGluZ0xlZnQsXG4gICAgICBwYWRkaW5nUmlnaHQsXG4gICAgICBwYWRkaW5nWCxcbiAgICAgIHBhZGRpbmdZLFxuICAgICAgbWFyZ2luLFxuICAgICAgbWFyZ2luVG9wLFxuICAgICAgbWFyZ2luQm90dG9tLFxuICAgICAgbWFyZ2luTGVmdCxcbiAgICAgIG1hcmdpblJpZ2h0LFxuICAgICAgbWFyZ2luWCxcbiAgICAgIG1hcmdpblksXG4gICAgICBwb3NpdGlvbixcbiAgICAgIHRvcCxcbiAgICAgIGJvdHRvbSxcbiAgICAgIGxlZnQsXG4gICAgICByaWdodCxcbiAgICAgIHNoYWRvdyxcbiAgICAgIG92ZXJmbG93LFxuICAgICAgYXNwZWN0UmF0aW8sXG4gICAgICB6SW5kZXgsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIG9wYWNpdHksXG4gICAgICBvcmRlcixcbiAgICAgIGFsaWduU2VsZixcbiAgICAgIGZsZXgsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBUYWcgPSB0YWc7XG4gICAgcmV0dXJuIChcbiAgICAgIDxUYWdcbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgICR7Z2V0Qm9yZGVyKGJvcmRlclNpZGUsIGJvcmRlcldpZHRoLCBib3JkZXJDb2xvcil9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmcnLCBwYWRkaW5nKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3BhZGRpbmctdG9wJywgcGFkZGluZ1RvcCB8fCBwYWRkaW5nWSl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdwYWRkaW5nLWJvdHRvbScsIHBhZGRpbmdCb3R0b20gfHwgcGFkZGluZ1kpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1sZWZ0JywgcGFkZGluZ0xlZnQgfHwgcGFkZGluZ1gpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgncGFkZGluZy1yaWdodCcsIHBhZGRpbmdSaWdodCB8fCBwYWRkaW5nWCl9O1xuXG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbicsIG1hcmdpbil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdtYXJnaW4tdG9wJywgbWFyZ2luVG9wIHx8IG1hcmdpblkpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnbWFyZ2luLWJvdHRvbScsIG1hcmdpbkJvdHRvbSB8fCBtYXJnaW5ZKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1sZWZ0JywgbWFyZ2luTGVmdCB8fCBtYXJnaW5YKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ21hcmdpbi1yaWdodCcsIG1hcmdpblJpZ2h0IHx8IG1hcmdpblgpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCd0b3AnLCB0b3ApfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVTcGFjZSgnYm90dG9tJywgYm90dG9tKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2xlZnQnLCBsZWZ0KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3JpZ2h0JywgcmlnaHQpfTtcblxuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignd2lkdGgnLCB3aWR0aCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZURpbWVuc2lvbignbWluLXdpZHRoJywgbWluV2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC13aWR0aCcsIG1heFdpZHRoKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlRGltZW5zaW9uKCdoZWlnaHQnLCBoZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21pbi1oZWlnaHQnLCBtaW5IZWlnaHQpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ21heC1oZWlnaHQnLCBtYXhIZWlnaHQpfTtcblxuICAgICAgICAgIGNvbG9yOiAke2dldENvbG9yKGNvbG9yKX07XG4gICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvcihiYWNrZ3JvdW5kQ29sb3IpfTtcbiAgICAgICAgICBwb3NpdGlvbjogJHtwb3NpdGlvbn07XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMocmFkaXVzKX07XG4gICAgICAgICAgYm94LXNoYWRvdzogJHtnZXRTaGFkb3coc2hhZG93KX07XG4gICAgICAgICAgb3ZlcmZsb3c6ICR7b3ZlcmZsb3d9O1xuICAgICAgICAgIGFzcGVjdC1yYXRpbzogJHthc3BlY3RSYXRpb307XG4gICAgICAgICAgei1pbmRleDogJHt6SW5kZXh9O1xuICAgICAgICAgICR7Qm9vbGVhbihvcGFjaXR5KSAmJiBgb3BhY2l0eTogJHtvcGFjaXR5fWB9O1xuICAgICAgICAgIG9yZGVyOiAke29yZGVyfTtcbiAgICAgICAgICBmbGV4OiAke2ZsZXh9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1zZWxmJywgYWxpZ25TZWxmKX07XG4gICAgICAgIGB9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9UYWc+XG4gICAgKTtcbiAgfSxcbik7XG5cbkJveC5wcm9wVHlwZXMgPSB7XG4gIGNvbG9yOiB0eXBlcy5jb2xvcixcbiAgYmFja2dyb3VuZENvbG9yOiB0eXBlcy5jb2xvcixcbiAgYm9yZGVyU2lkZTogdHlwZXMuc2lkZSxcbiAgYm9yZGVyV2lkdGg6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5udW1iZXIsIFByb3BUeXBlcy5zdHJpbmddKSxcbiAgYm9yZGVyQ29sb3I6IHR5cGVzLmNvbG9yLFxuICB3aWR0aDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgbWluV2lkdGg6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1heFdpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBoZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIG1pbkhlaWdodDogdHlwZXMucmVzcG9uc2l2ZURpbWVuc2lvbixcbiAgbWF4SGVpZ2h0OiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICByYWRpdXM6IHR5cGVzLnJhZGl1cyxcbiAgc2hhZG93OiB0eXBlcy5zaGFkb3csXG4gIHBhZGRpbmc6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcGFkZGluZ1RvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nQm90dG9tOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdMZWZ0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHBhZGRpbmdSaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nWDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwYWRkaW5nWTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW46IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luVG9wOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpbkJvdHRvbTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBtYXJnaW5MZWZ0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblJpZ2h0OiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIG1hcmdpblg6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbWFyZ2luWTogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBwb3NpdGlvbjogdHlwZXMucG9zaXRpb24sXG4gIHRvcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBib3R0b206IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgbGVmdDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICByaWdodDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBvdmVyZmxvdzogdHlwZXMub3ZlcmZsb3csXG4gIGFzcGVjdFJhdGlvOiBQcm9wVHlwZXMuc3RyaW5nLFxuICB6SW5kZXg6IHR5cGVzLnpJbmRleCxcbiAgdGFnOiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcGFjaXR5OiBQcm9wVHlwZXMuc3RyaW5nLFxuICBvcmRlcjogUHJvcFR5cGVzLm51bWJlcixcbiAgYWxpZ25TZWxmOiB0eXBlcy5hbGlnblNlbGYsXG4gIGZsZXg6IFByb3BUeXBlcy5zdHJpbmcsXG59O1xuIl19 */")
|
|
67
70
|
}, props), children);
|
|
68
71
|
});
|
|
69
72
|
Box.propTypes = {
|
|
@@ -103,5 +106,8 @@ Box.propTypes = {
|
|
|
103
106
|
aspectRatio: PropTypes.string,
|
|
104
107
|
zIndex: types.zIndex,
|
|
105
108
|
tag: PropTypes.string,
|
|
106
|
-
opacity: PropTypes.string
|
|
109
|
+
opacity: PropTypes.string,
|
|
110
|
+
order: PropTypes.number,
|
|
111
|
+
alignSelf: types.alignSelf,
|
|
112
|
+
flex: PropTypes.string
|
|
107
113
|
};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import "core-js/modules/es.object.assign.js";
|
|
2
|
+
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
|
|
5
|
+
import React, { forwardRef } from 'react';
|
|
6
|
+
import PropTypes from 'prop-types';
|
|
7
|
+
import { types } from '../types';
|
|
8
|
+
import { css } from '@emotion/react';
|
|
9
|
+
import { getResponsiveDimension, getResponsiveOneOf, getResponsiveSpace } from '../utilities';
|
|
10
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
11
|
+
export var Flex = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
12
|
+
var _ref$direction = _ref.direction,
|
|
13
|
+
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
14
|
+
_ref$wrap = _ref.wrap,
|
|
15
|
+
wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
|
|
16
|
+
_ref$justifyContent = _ref.justifyContent,
|
|
17
|
+
justifyContent = _ref$justifyContent === void 0 ? 'start' : _ref$justifyContent,
|
|
18
|
+
_ref$alignItems = _ref.alignItems,
|
|
19
|
+
alignItems = _ref$alignItems === void 0 ? 'start' : _ref$alignItems,
|
|
20
|
+
_ref$alignContent = _ref.alignContent,
|
|
21
|
+
alignContent = _ref$alignContent === void 0 ? 'start' : _ref$alignContent,
|
|
22
|
+
gap = _ref.gap,
|
|
23
|
+
columnGap = _ref.columnGap,
|
|
24
|
+
rowGap = _ref.rowGap,
|
|
25
|
+
width = _ref.width,
|
|
26
|
+
height = _ref.height,
|
|
27
|
+
_ref$tag = _ref.tag,
|
|
28
|
+
tag = _ref$tag === void 0 ? 'div' : _ref$tag,
|
|
29
|
+
children = _ref.children,
|
|
30
|
+
props = _ref.props;
|
|
31
|
+
var Tag = tag;
|
|
32
|
+
return ___EmotionJSX(Tag, _extends({
|
|
33
|
+
css: /*#__PURE__*/css("display:flex;", getResponsiveOneOf('flex-direction', direction), ";", getResponsiveOneOf('flex-wrap', wrap), ";", getResponsiveOneOf('justify-content', justifyContent), ";", getResponsiveOneOf('align-items', alignItems), ";", getResponsiveOneOf('align-content', alignContent), ";", getResponsiveSpace('gap', gap), ";", getResponsiveSpace('column-gap', columnGap), ";", getResponsiveSpace('row-gap', rowGap), ";", getResponsiveDimension('width', width), ";", getResponsiveDimension('height', height), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Flex;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ZsZXguanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCZ0IiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvZmxleC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGdldFJlc3BvbnNpdmVEaW1lbnNpb24sIGdldFJlc3BvbnNpdmVPbmVPZiwgZ2V0UmVzcG9uc2l2ZVNwYWNlIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcblxuZXhwb3J0IGNvbnN0IEZsZXggPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgZGlyZWN0aW9uID0gJ3JvdycsXG4gICAgICB3cmFwID0gJ3dyYXAnLFxuICAgICAganVzdGlmeUNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgYWxpZ25JdGVtcyA9ICdzdGFydCcsXG4gICAgICBhbGlnbkNvbnRlbnQgPSAnc3RhcnQnLFxuICAgICAgZ2FwLFxuICAgICAgY29sdW1uR2FwLFxuICAgICAgcm93R2FwLFxuICAgICAgd2lkdGgsXG4gICAgICBoZWlnaHQsXG4gICAgICB0YWcgPSAnZGl2JyxcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgcHJvcHMsXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IFRhZyA9IHRhZztcbiAgICByZXR1cm4gKFxuICAgICAgPFRhZ1xuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4LWRpcmVjdGlvbicsIGRpcmVjdGlvbil9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdmbGV4LXdyYXAnLCB3cmFwKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2p1c3RpZnktY29udGVudCcsIGp1c3RpZnlDb250ZW50KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlT25lT2YoJ2FsaWduLWl0ZW1zJywgYWxpZ25JdGVtcyl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZU9uZU9mKCdhbGlnbi1jb250ZW50JywgYWxpZ25Db250ZW50KX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ2dhcCcsIGdhcCl9O1xuICAgICAgICAgICR7Z2V0UmVzcG9uc2l2ZVNwYWNlKCdjb2x1bW4tZ2FwJywgY29sdW1uR2FwKX07XG4gICAgICAgICAgJHtnZXRSZXNwb25zaXZlU3BhY2UoJ3Jvdy1nYXAnLCByb3dHYXApfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ3dpZHRoJywgd2lkdGgpfTtcbiAgICAgICAgICAke2dldFJlc3BvbnNpdmVEaW1lbnNpb24oJ2hlaWdodCcsIGhlaWdodCl9O1xuICAgICAgICBgfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1RhZz5cbiAgICApO1xuICB9LFxuKTtcblxuRmxleC5wcm9wVHlwZXMgPSB7XG4gIGRpcmVjdGlvbjogdHlwZXMuZmxleERpcmVjdGlvbixcbiAgd3JhcDogdHlwZXMuZmxleFdyYXAsXG4gIGp1c3RpZnlDb250ZW50OiB0eXBlcy5mbGV4SnVzdGlmeUNvbnRlbnQsXG4gIGFsaWduSXRlbXM6IHR5cGVzLmZsZXhBbGlnbkl0ZW1zLFxuICBhbGlnbkNvbnRlbnQ6IHR5cGVzLmZsZXhBbGlnbkNvbnRlbnQsXG4gIGdhcDogdHlwZXMucmVzcG9uc2l2ZVNwYWNlLFxuICBjb2x1bW5HYXA6IHR5cGVzLnJlc3BvbnNpdmVTcGFjZSxcbiAgcm93R2FwOiB0eXBlcy5yZXNwb25zaXZlU3BhY2UsXG4gIHdpZHRoOiB0eXBlcy5yZXNwb25zaXZlRGltZW5zaW9uLFxuICBoZWlnaHQ6IHR5cGVzLnJlc3BvbnNpdmVEaW1lbnNpb24sXG4gIHRhZzogUHJvcFR5cGVzLnN0cmluZyxcbn07XG4iXX0= */"),
|
|
34
|
+
ref: ref
|
|
35
|
+
}, props), children);
|
|
36
|
+
});
|
|
37
|
+
Flex.propTypes = {
|
|
38
|
+
direction: types.flexDirection,
|
|
39
|
+
wrap: types.flexWrap,
|
|
40
|
+
justifyContent: types.flexJustifyContent,
|
|
41
|
+
alignItems: types.flexAlignItems,
|
|
42
|
+
alignContent: types.flexAlignContent,
|
|
43
|
+
gap: types.responsiveSpace,
|
|
44
|
+
columnGap: types.responsiveSpace,
|
|
45
|
+
rowGap: types.responsiveSpace,
|
|
46
|
+
width: types.responsiveDimension,
|
|
47
|
+
height: types.responsiveDimension,
|
|
48
|
+
tag: PropTypes.string
|
|
49
|
+
};
|
package/es/components/index.js
CHANGED
|
@@ -25,4 +25,5 @@ export { Tooltip } from './tooltip';
|
|
|
25
25
|
export { Progress } from './progress';
|
|
26
26
|
export { Textarea } from './textarea';
|
|
27
27
|
export { Pagination } from './pagination';
|
|
28
|
-
export { Nav, NavItem } from './nav';
|
|
28
|
+
export { Nav, NavItem } from './nav';
|
|
29
|
+
export { Flex } from './flex';
|
package/es/types.js
CHANGED
|
@@ -5,9 +5,18 @@ import { vars } from './variables';
|
|
|
5
5
|
export var yPlacements = ['top', 'topStart', 'topEnd', 'bottom', 'bottomStart', 'bottomEnd'];
|
|
6
6
|
export var xPlacements = ['right', 'rightStart', 'rightEnd', 'left', 'leftStart', 'leftEnd'];
|
|
7
7
|
export var placements = [].concat(yPlacements, xPlacements);
|
|
8
|
-
export var
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
export var directions = ['row', 'column'];
|
|
9
|
+
var axisAlignments = ['start', 'end', 'center', 'stretch'];
|
|
10
|
+
var distributions = ['space-around', 'space-between', 'space-evenly'];
|
|
11
|
+
export var gridContentPositions = [].concat(axisAlignments, distributions);
|
|
12
|
+
export var gridItemsAlignments = axisAlignments;
|
|
13
|
+
export var flexJustifyContents = [].concat(axisAlignments, distributions);
|
|
14
|
+
export var flexAlignItems = [].concat(axisAlignments, ['baseline']);
|
|
15
|
+
export var flexAlignContents = [].concat(axisAlignments, distributions, ['baseline']);
|
|
16
|
+
export var autoFlows = directions;
|
|
17
|
+
export var flexDirections = directions;
|
|
18
|
+
export var alignSelfs = [].concat(axisAlignments, ['baseline']);
|
|
19
|
+
export var flexWraps = ['nowrap', 'wrap', 'wrap-reverse'];
|
|
11
20
|
export var types = {
|
|
12
21
|
color: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.colors)), PropTypes.string]),
|
|
13
22
|
responsiveSpace: PropTypes.oneOfType([PropTypes.oneOf(Object.keys(vars.spaces)), PropTypes.number, PropTypes.string, PropTypes.object]),
|
|
@@ -29,6 +38,12 @@ export var types = {
|
|
|
29
38
|
autoFlow: PropTypes.oneOfType([PropTypes.oneOf(autoFlows), PropTypes.string, PropTypes.object]),
|
|
30
39
|
gridItemsAlignment: PropTypes.oneOfType([PropTypes.oneOf(gridItemsAlignments), PropTypes.object]),
|
|
31
40
|
gridContentPosition: PropTypes.oneOfType([PropTypes.oneOf(gridContentPositions), PropTypes.object]),
|
|
41
|
+
flexJustifyContent: PropTypes.oneOfType([PropTypes.oneOf(flexJustifyContents), PropTypes.object]),
|
|
42
|
+
flexAlignItems: PropTypes.oneOfType([PropTypes.oneOf(flexAlignItems), PropTypes.object]),
|
|
43
|
+
flexAlignContent: PropTypes.oneOfType([PropTypes.oneOf(flexAlignContents), PropTypes.object]),
|
|
44
|
+
flexDirection: PropTypes.oneOfType([PropTypes.oneOf(flexDirections), PropTypes.object]),
|
|
45
|
+
flexWrap: PropTypes.oneOfType([PropTypes.oneOf(flexWraps), PropTypes.object]),
|
|
46
|
+
alignSelf: PropTypes.oneOfType([PropTypes.oneOf(alignSelfs), PropTypes.object]),
|
|
32
47
|
icon: PropTypes.node,
|
|
33
48
|
zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
34
49
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|