react-jupiter 5.12.0 → 6.0.0-beta.1

package/dist/components/form-v7/text-input/index.js

@@ -0,0 +1,132 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = require("styled-components");
+var _reactHookForm = require("react-hook-form");
+var _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _theme = _interopRequireDefault(require("../theme"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _label = _interopRequireDefault(require("../label"));
+var _index = require("./index.style");
+
+
+
+
+var _index2 = require("../index.style");
+var _numbers = require("../../utils/numbers");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}function _defineProperty(e, r, t) {return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e;}function _toPropertyKey(t) {var i = _toPrimitive(t, "string");return "symbol" == typeof i ? i : i + "";}function _toPrimitive(t, r) {if ("object" != typeof t || !t) return t;var e = t[Symbol.toPrimitive];if (void 0 !== e) {var i = e.call(t, r || "default");if ("object" != typeof i) return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return ("string" === r ? String : Number)(t);}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class TextInput extends _react.Component {
+  constructor(props) {
+    super(props);_defineProperty(this, "togglePasswordVisibility",
+
+
+
+
+
+    () => {
+      this.setState((prevState) => ({ showPassword: !prevState.showPassword }));
+    });_defineProperty(this, "handleFocus",
+
+    (e) => {
+      e.target.setSelectionRange(0, 0);
+    });this.state = { showPassword: false };}
+
+  render() {
+    const {
+      type = 'text',
+      label = null,
+      htmlElementName,
+      id = null,
+      placeholder = null,
+      disabled = false,
+      description = null,
+      required = false,
+      number = null,
+      rtl = true,
+      onFocus = () => {},
+      readOnly = false,
+      register,
+      control
+    } = this.props;
+
+    const { showPassword } = this.state;
+
+    return (/*#__PURE__*/
+      _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+      _react.default.createElement(_index2.Fieldset, null, /*#__PURE__*/
+      _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+      _react.default.createElement(_label.default, {
+        htmlFor: id || `${type}-${htmlElementName.split(' ').join('')}`,
+        label: label,
+        number: number,
+        required: required }
+      ),
+      description && /*#__PURE__*/
+      _react.default.createElement(_index.DescriptionContainer, { size: 10, color: "gray", "data-test": "text-input-description" },
+      description
+      ), /*#__PURE__*/
+
+      _react.default.createElement(_reactHookForm.Controller, {
+        name: htmlElementName,
+        control: control,
+        rules: { required: required ? 'این فیلد اجباری است' : false },
+        render: (_ref) => {let { field: { value }, fieldState } = _ref;return (/*#__PURE__*/
+            _react.default.createElement("div", { style: { position: 'relative' } },
+            type === 'password' && /*#__PURE__*/
+            _react.default.createElement(_index.PasswordIcon, {
+              name: showPassword ? 'visibility-off' : 'visibility',
+              color: "gray",
+              onClick: this.togglePasswordVisibility,
+              style: {
+                cursor: 'pointer', position: 'absolute', top: '50%', left: '10px', transform: 'translateY(-50%)'
+              } }
+            ), /*#__PURE__*/
+
+            _react.default.createElement(_index.Input, _extends({
+              id: id || `${type}-${htmlElementName.split(' ').join('')}`,
+              name: htmlElementName,
+              type: showPassword ? 'text' : type,
+              placeholder: placeholder,
+              defaultValue: value,
+              rtl: rtl },
+            register(htmlElementName, {
+              onFocus: this.handleFocus,
+              disabled,
+              onChange: (e) => (0, _numbers.fixNumbers)(e)
+            }), {
+              onFocus: onFocus,
+              readOnly: readOnly })
+            ), /*#__PURE__*/
+            _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+            ));} }
+
+      )
+      )
+      ));
+
+  }
+}var _default = exports.default =
+
+TextInput;

package/dist/components/form-v7/text-input/index.stories.js

@@ -0,0 +1,96 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.Password = exports.LTR = exports.FullOptions = exports.Disabled = void 0;var _react = _interopRequireDefault(require("react"));
+var _reactHookForm = require("react-hook-form");
+
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}var _default = exports.default =
+
+{
+  title: 'Form-V7/Text Input',
+  component: _index.default,
+
+  argTypes: {
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'text-name-02'
+    },
+    label: {
+      control: 'text',
+      defaultValue: 'این لیبل است'
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: 'متن پیشفرض'
+    },
+    disabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    description: {
+      control: 'text',
+      defaultValue: 'توضیحات اضافه'
+    },
+    errorMessage: {
+      control: 'text',
+      defaultValue: 'ارور زیبا'
+    },
+    type: {
+      control: 'select',
+      options: ['text', 'password'],
+      defaultValue: 'text'
+    },
+    rtl: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    number: {
+      control: 'number',
+      defaultValue: 23
+    }
+  }
+};
+
+const Template = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({}, args, { register: register, control: control }));
+};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  htmlElementName: 'text-name-02',
+  required: true,
+  label: 'این لیبل است',
+  number: 23,
+  placeholder: 'متن پیشفرض',
+  disabled: false,
+  description: 'توضیحات اضافه',
+  errorMessage: 'ارور زیبا',
+  type: 'text',
+  rtl: true
+};
+
+const LTR = exports.LTR = Template.bind({});
+LTR.args = {
+  ...FullOptions.args,
+  rtl: false
+};
+
+const Password = exports.Password = Template.bind({});
+Password.args = {
+  ...FullOptions.args,
+  type: 'password'
+};
+
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  disabled: true
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا این فیلد را پر کنید'
+};

package/dist/components/form-v7/text-input/index.style.js

@@ -0,0 +1,49 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.PasswordIcon = exports.Input = exports.DescriptionContainer = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = require("../../typography");
+var _icon = _interopRequireDefault(require("../../icon"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const Input = exports.Input = _styledComponents.default.input`
+  font-family: 'IranSharp';
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: ${(_ref) => {let { theme } = _ref;return `${theme.borderRadius}px`;}};
+  border: solid 1px ${(_ref2) => {let { theme } = _ref2;return theme.borderColor.normal;}};
+  padding: 6px;
+  box-sizing: border-box;
+  width: 100%;
+  direction: ${(_ref3) => {let { rtl } = _ref3;return rtl ? 'rtl' : 'ltr';}};
+
+  &[disabled=""]{
+    background-color: ${(_ref4) => {let { theme } = _ref4;return theme.disabled.background;}};
+    color: ${(_ref5) => {let { theme } = _ref5;return theme.disabled.color;}};
+    border-color: transparent;
+
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
+  &:hover {
+    border-color: ${(_ref6) => {let { theme } = _ref6;return theme.borderColor.hover;}};
+  }
+
+  &:focus {
+    border-color: ${(_ref7) => {let { theme } = _ref7;return theme.borderColor.focus;}};
+  }
+`;
+
+const DescriptionContainer = exports.DescriptionContainer = (0, _styledComponents.default)(_typography.Text)`
+  display: block;
+  margin-bottom: 4px;
+`;
+
+const PasswordIcon = exports.PasswordIcon = (0, _styledComponents.default)(_icon.default)`
+  position: absolute;
+  left: 0;
+  bottom: 3px;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;

package/dist/components/form-v7/text-input/index.test.js

@@ -0,0 +1,63 @@
+"use strict";var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _test = _interopRequireDefault(require("../../utils/test"));
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+describe('text input tests', () => {
+  it('render simple text input', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.length).toBe(1);
+  });
+
+  it('render text input with placeholder', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
+  });
+
+  it('test text input id without id props', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('id')).toBe('text-engname');
+  });
+
+  it('render text input - full props', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", placeholder: "hi guys", type: "text", id: "hiiii-id" }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('id')).toBe('hiiii-id');
+    expect(textInput.find('input').prop('type')).toBe('text');
+    expect(textInput.find('input').prop('placeholder')).toBe('hi guys');
+    expect(textInput.find('input').prop('name')).toBe('eng name');
+    expect(textInput.length).not.toBe(0);
+  });
+
+  it('render disabled input', () => {
+    const component = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "eng name", disabled: true }));
+    const textInput = (0, _test.default)(component, 'text-input');
+
+    expect(textInput.find('input').prop('disabled')).toBe(true);
+  });
+
+  it('render with or without text-input-description', () => {
+    const componentWithDesc = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "with desc", description: "hiiiiii" }));
+    const componentWithoutDesc = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "without desc" }));
+    const textInputDescription01 = (0, _test.default)(componentWithDesc, 'text-input-description');
+    const textInputDescription02 = (0, _test.default)(componentWithoutDesc, 'text-input-description');
+
+    expect(textInputDescription01.length).toBe(1);
+    expect(textInputDescription02.length).toBe(0);
+  });
+
+  it('render with or err msg', () => {
+    const component = (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_index.default, { label: "this is label", htmlElementName: "with desc", description: "hiiiiii", errorMessage: "this is a good err" }));
+    const textInputErrorMessage = (0, _test.default)(component, 'error-message');
+
+    expect(textInputErrorMessage.length).toBe(1);
+    expect(textInputErrorMessage.children().text()).toBe('this is a good err');
+  });
+});

package/dist/components/form-v7/textarea/index.js

@@ -0,0 +1,71 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactHookForm = require("react-hook-form");
+var _styledComponents = require("styled-components");
+var _globalStyle = _interopRequireDefault(require("../../globalStyle"));
+var _theme = _interopRequireDefault(require("../theme"));
+var _errorMsg = _interopRequireDefault(require("../errorMsg"));
+var _label = _interopRequireDefault(require("../label"));
+var _index = _interopRequireDefault(require("./index.style"));
+var _index2 = require("../index.style");function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Textarea = (_ref) => {let {
+    htmlElementName = 'textarea-element',
+    label = '',
+    isDisabled = false,
+    defaultValue = '',
+    placeholder = '',
+    resize = 'none',
+    minHeight = 120,
+    handleChange = () => {},
+    required = false,
+    number = null,
+    register,
+    control
+  } = _ref;return (/*#__PURE__*/
+    _react.default.createElement(_styledComponents.ThemeProvider, { theme: _theme.default }, /*#__PURE__*/
+    _react.default.createElement(_index2.Fieldset, null, /*#__PURE__*/
+    _react.default.createElement(_globalStyle.default, null), /*#__PURE__*/
+    _react.default.createElement(_label.default, { htmlFor: htmlElementName, label: label, number: number, required: required }), /*#__PURE__*/
+
+    _react.default.createElement(_reactHookForm.Controller, {
+      name: htmlElementName,
+      control: control,
+      rules: { required: required ? 'این فیلد اجباری است' : false },
+      render: (_ref2) => {let { fieldState } = _ref2;return (/*#__PURE__*/
+          _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+          _react.default.createElement(_index.default, _extends({
+            name: htmlElementName,
+            placeholder: placeholder,
+            resize: resize,
+            defaultValue: defaultValue,
+            minHeight: minHeight },
+          register(htmlElementName, {
+            onChange: handleChange,
+            disabled: isDisabled
+          }))
+          ), /*#__PURE__*/
+          _react.default.createElement(_errorMsg.default, { errorMessage: fieldState && fieldState.error?.message })
+          ));} }
+
+    )
+    )
+    ));};var _default = exports.default =
+
+
+Textarea;

package/dist/components/form-v7/textarea/index.stories.js

@@ -0,0 +1,91 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = exports.WithError = exports.NoResize = exports.Minimal = exports.HorizontalResize = exports.FullOptions = exports.Disabled = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+var _reactHookForm = require("react-hook-form");
+var _index = _interopRequireDefault(require("./index"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}function _extends() {return _extends = Object.assign ? Object.assign.bind() : function (n) {for (var e = 1; e < arguments.length; e++) {var t = arguments[e];for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);}return n;}, _extends.apply(null, arguments);}var _default = exports.default =
+
+{
+  title: 'Form-V7/Textarea',
+  component: _index.default,
+
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'توضیجات'
+    },
+    htmlElementName: {
+      control: 'text',
+      defaultValue: 'html-element-name'
+    },
+    placeholder: {
+      control: 'text',
+      defaultValue: 'این پلیس هولدر است'
+    },
+    minHeight: {
+      control: 'text',
+      defaultValue: '120'
+    },
+    isDisabled: {
+      control: 'boolean',
+      defaultValue: false
+    },
+    required: {
+      control: 'boolean',
+      defaultValue: true
+    },
+    resize: {
+      control: 'select',
+      options: ['both', 'horizontal', 'vertical', 'none'],
+      defaultValue: 'both'
+    },
+    defaultValue: {
+      control: 'text',
+      defaultValue: 'این یک باکس متنی می‌باشد'
+    }
+  }
+};
+
+const Template = (args) => {
+  const { register, control } = (0, _reactHookForm.useForm)();
+  return /*#__PURE__*/_react.default.createElement(_index.default, _extends({}, args, { register: register, control: control }));
+};
+
+const Minimal = exports.Minimal = Template.bind({});
+Minimal.args = {};
+
+const FullOptions = exports.FullOptions = Template.bind({});
+FullOptions.args = {
+  label: 'توضیجات',
+  htmlElementName: 'html-element-name',
+  placeholder: 'این پلیس هولدر است',
+  minHeight: '120',
+  isDisabled: false,
+  required: true,
+  resize: 'both',
+  handleChange: (0, _addonActions.action)('trigger what you want to do in onChange function'),
+  defaultValue: 'این یک باکس متنی می‌باشد'
+};
+
+const Disabled = exports.Disabled = Template.bind({});
+Disabled.args = {
+  ...FullOptions.args,
+  isDisabled: true
+};
+
+const NoResize = exports.NoResize = Template.bind({});
+NoResize.args = {
+  ...FullOptions.args,
+  resize: 'none'
+};
+
+const HorizontalResize = exports.HorizontalResize = Template.bind({});
+HorizontalResize.args = {
+  ...FullOptions.args,
+  resize: 'horizontal'
+};
+
+const WithError = exports.WithError = Template.bind({});
+WithError.args = {
+  ...FullOptions.args,
+  errorMessage: 'لطفا متن را وارد کنید'
+};

package/dist/components/form-v7/textarea/index.style.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _styledComponents = _interopRequireDefault(require("styled-components"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const StyledTextarea = _styledComponents.default.textarea`
+  font-family: 'IranSharp';
+  font-size: 14px;
+
+  resize: ${(_ref) => {let { resize } = _ref;return resize;}};
+  min-height: ${(_ref2) => {let { minHeight } = _ref2;return `${minHeight}px`;}};
+  width: 100%;
+  padding: 8px 16px;
+  box-sizing: border-box;
+  
+  border-radius: ${(_ref3) => {let { theme } = _ref3;return `${theme.borderRadius}px`;}};
+  border: 1px solid ${(_ref4) => {let { disabled, theme } = _ref4;return disabled ? theme.disabled.color : theme.borderColor.normal;}};
+  background: ${(_ref5) => {let { disabled, theme } = _ref5;return disabled ? theme.disabled.background : 'white';}};
+
+  &:hover {
+    border-color: ${(_ref6) => {let { disabled, theme } = _ref6;return disabled ? theme.disabled.color : theme.borderColor.hover;}};
+  }
+  &:focus {
+    border-color: ${(_ref7) => {let { theme } = _ref7;return theme.borderColor.focus;}};
+  }
+`;var _default = exports.default =
+
+StyledTextarea;

package/dist/components/form-v7/theme.js

@@ -0,0 +1,20 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _themes = _interopRequireDefault(require("../themes"));function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const theme = {
+  borderRadius: _themes.default.borderRadius.high,
+  borderColor: {
+    normal: _themes.default.colors.gray600,
+    hover: _themes.default.colors.blue400,
+    focus: _themes.default.colors.blue600
+  },
+  disabled: {
+    background: _themes.default.colors.gray200,
+    color: _themes.default.colors.gray800
+  },
+  colors: {
+    red: _themes.default.colors.red600,
+    blue: _themes.default.colors.blue600
+  }
+};var _default = exports.default =
+
+theme;

package/dist/components/globalStyle.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _styledComponents = require("styled-components");
+
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  h1, h2, h3, h4, h5, h6, p, ol, ul {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+  }
+
+  ol, ul {
+    list-style: none;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+    outline: none;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;var _default = exports.default =
+
+GlobalStyle;

package/dist/components/grid/index.js

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.default = void 0;var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));function _getRequireWildcardCache(e) {if ("function" != typeof WeakMap) return null;var r = new WeakMap(),t = new WeakMap();return (_getRequireWildcardCache = function (e) {return e ? t : r;})(e);}function _interopRequireWildcard(e, r) {if (!r && e && e.__esModule) return e;if (null === e || "object" != typeof e && "function" != typeof e) return { default: e };var t = _getRequireWildcardCache(r);if (t && t.has(e)) return t.get(e);var n = { __proto__: null },a = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) {var i = a ? Object.getOwnPropertyDescriptor(e, u) : null;i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u];}return n.default = e, t && t.set(e, n), n;}function _interopRequireDefault(e) {return e && e.__esModule ? e : { default: e };}
+
+const getResponsiveValue = (value, theme) => {
+  if (typeof value === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024
+    };
+
+    return Object.entries(value).
+    map((_ref) => {let [breakpoint, val] = _ref;
+      const minWidth = breakpoints[breakpoint];
+      return minWidth ?
+      `@media (min-width: ${minWidth}px) { width: ${val * 100}%; }` :
+      '';
+    }).
+    join('\n');
+  }
+  return `width: ${value * 100}%;`;
+};
+
+const getResponsiveVisibility = (visible, theme) => {
+  if (typeof visible === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024
+    };
+
+    return Object.entries(visible).
+    map((_ref2) => {let [breakpoint, val] = _ref2;
+      const minWidth = breakpoints[breakpoint];
+      return minWidth ?
+      `@media (min-width: ${minWidth}px) { display: ${val ? 'block' : 'none'}; }` :
+      '';
+    }).
+    join('\n');
+  }
+  return `display: ${visible ? 'block' : 'none'};`;
+};
+
+const getResponsiveAlignment = (align, theme) => {
+  if (typeof align === 'object') {
+    const breakpoints = theme.breakpoints || {
+      mobile: 0,
+      tablet: 768,
+      desktop: 1024
+    };
+
+    return Object.entries(align).
+    map((_ref3) => {let [breakpoint, val] = _ref3;
+      const minWidth = breakpoints[breakpoint];
+      return minWidth ? `@media (min-width: ${minWidth}px) { justify-content: ${val}; }` : '';
+    }).
+    join('\n');
+  }
+  return `justify-content: ${align};`;
+};
+
+const GridContainer = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: ${(_ref4) => {let { wrap } = _ref4;return wrap ? 'wrap' : 'nowrap';}};
+  flex-direction: ${(_ref5) => {let { reverse } = _ref5;return reverse ? 'row-reverse' : 'row';}};
+  ${(_ref6) => {let { horizontalAlign, theme } = _ref6;return getResponsiveAlignment(horizontalAlign || 'left', theme);}}
+  ${(_ref7) => {let { verticalAlign } = _ref7;return `align-items: ${verticalAlign || 'stretch'};`;}}
+`;
+
+const GridUnit = _styledComponents.default.div`
+  ${(_ref8) => {let { size, theme } = _ref8;return getResponsiveValue(size, theme);}}
+  ${(_ref9) => {let { visible, theme } = _ref9;return getResponsiveVisibility(visible, theme);}}
+`;
+
+const Grid = (_ref10) => {let { children, ...props } = _ref10;return (/*#__PURE__*/
+    _react.default.createElement(GridContainer, props,
+    children
+    ));};
+
+
+Grid.Unit = GridUnit;var _default = exports.default =
+
+Grid;