@arcblock/ux 2.9.91 → 2.10.0

package/lib/CodeBlock/index.js

@@ -1,142 +1,127 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CodeBlock;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
-var _core = _interopRequireDefault(require("highlight.js/lib/core"));
-var _javascript = _interopRequireDefault(require("highlight.js/lib/languages/javascript"));
-var _typescript = _interopRequireDefault(require("highlight.js/lib/languages/typescript"));
-var _json = _interopRequireDefault(require("highlight.js/lib/languages/json"));
-var _elixir = _interopRequireDefault(require("highlight.js/lib/languages/elixir"));
-var _java = _interopRequireDefault(require("highlight.js/lib/languages/java"));
-var _swift = _interopRequireDefault(require("highlight.js/lib/languages/swift"));
-var _objectivec = _interopRequireDefault(require("highlight.js/lib/languages/objectivec"));
-var _kotlin = _interopRequireDefault(require("highlight.js/lib/languages/kotlin"));
-var _protobuf = _interopRequireDefault(require("highlight.js/lib/languages/protobuf"));
-var _python = _interopRequireDefault(require("highlight.js/lib/languages/python"));
-var _yaml = _interopRequireDefault(require("highlight.js/lib/languages/yaml"));
-var _shell = _interopRequireDefault(require("highlight.js/lib/languages/shell"));
-var _diff = _interopRequireDefault(require("highlight.js/lib/languages/diff"));
-var _plaintext = _interopRequireDefault(require("highlight.js/lib/languages/plaintext"));
-var _markdown = _interopRequireDefault(require("highlight.js/lib/languages/markdown"));
-require("highlight.js/styles/atom-one-dark.css");
-var _FileCopy = _interopRequireDefault(require("@mui/icons-material/FileCopy"));
-var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
-var _Colors = _interopRequireDefault(require("../Colors"));
-var _Theme = require("../Theme");
-var _LightBox = _interopRequireDefault(require("./LightBox"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-const _excluded = ["code", "language", "children", "dark"];
 /* eslint-disable react/no-danger */
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-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; }
-_core.default.registerLanguage('javascript', _javascript.default);
-_core.default.registerLanguage('js', _javascript.default);
-_core.default.registerLanguage('jsx', _javascript.default);
-_core.default.registerLanguage('typescript', _typescript.default);
-_core.default.registerLanguage('ts', _typescript.default);
-_core.default.registerLanguage('tsx', _typescript.default);
-_core.default.registerLanguage('json', _json.default);
-_core.default.registerLanguage('elixir', _elixir.default);
-_core.default.registerLanguage('java', _java.default);
-_core.default.registerLanguage('kotlin', _kotlin.default);
-_core.default.registerLanguage('kt', _kotlin.default);
-_core.default.registerLanguage('protobuf', _protobuf.default);
-_core.default.registerLanguage('protobuffer', _protobuf.default);
-_core.default.registerLanguage('python', _python.default);
-_core.default.registerLanguage('py', _python.default);
-_core.default.registerLanguage('yaml', _yaml.default);
-_core.default.registerLanguage('yml', _yaml.default);
-_core.default.registerLanguage('shell', _shell.default);
-_core.default.registerLanguage('sh', _shell.default);
-_core.default.registerLanguage('plaintext', _plaintext.default);
-_core.default.registerLanguage('text', _plaintext.default);
-_core.default.registerLanguage('patch', _diff.default);
-_core.default.registerLanguage('diff', _diff.default);
-_core.default.registerLanguage('swift', _swift.default);
-_core.default.registerLanguage('objectivec', _objectivec.default);
-_core.default.registerLanguage('oc', _objectivec.default);
-_core.default.registerLanguage('markdown', _markdown.default);
-function CodeBlock(_ref) {
-  let {
-      code,
-      language,
-      children,
-      dark
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const [copied, setCopied] = (0, _react.useState)(false);
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Copy from 'copy-to-clipboard';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import elixir from 'highlight.js/lib/languages/elixir';
+import java from 'highlight.js/lib/languages/java';
+import swift from 'highlight.js/lib/languages/swift';
+import objectivec from 'highlight.js/lib/languages/objectivec';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import protobuf from 'highlight.js/lib/languages/protobuf';
+import python from 'highlight.js/lib/languages/python';
+import yaml from 'highlight.js/lib/languages/yaml';
+import shell from 'highlight.js/lib/languages/shell';
+import diff from 'highlight.js/lib/languages/diff';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import markdown from 'highlight.js/lib/languages/markdown';
+import 'highlight.js/styles/atom-one-dark.css';
+import CopyIcon from '@mui/icons-material/FileCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import colors from '../Colors';
+import { styled } from '../Theme';
+import LightBox from './LightBox';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('jsx', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('tsx', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('elixir', elixir);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('kt', kotlin);
+hljs.registerLanguage('protobuf', protobuf);
+hljs.registerLanguage('protobuffer', protobuf);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('py', python);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('sh', shell);
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('text', plaintext);
+hljs.registerLanguage('patch', diff);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('objectivec', objectivec);
+hljs.registerLanguage('oc', objectivec);
+hljs.registerLanguage('markdown', markdown);
+export default function CodeBlock({
+  code,
+  language,
+  children,
+  dark,
+  ...rest
+}) {
+  const [copied, setCopied] = useState(false);
   const source = code || children;
   const onCopy = () => {
     if (copied) {
       return;
     }
-    (0, _copyToClipboard.default)(source);
+    Copy(source);
     setCopied(true);
     // 恢复 copied 状态
     setTimeout(() => {
       setCopied(false);
     }, 1500);
   };
-  const originEl = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Pre, _objectSpread(_objectSpread({}, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  const originEl = /*#__PURE__*/_jsxs(Pre, {
+    ...rest,
+    children: [/*#__PURE__*/_jsx("span", {
       className: "codeblock__inner",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
-        className: "hljs ".concat(language),
+      children: /*#__PURE__*/_jsx("code", {
+        className: `hljs ${language}`,
         dangerouslySetInnerHTML: {
-          __html: _core.default.highlightAuto(source, [language]).value
+          __html: hljs.highlightAuto(source, [language]).value
         }
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), /*#__PURE__*/_jsxs("div", {
       className: "copy-button",
       onClick: onCopy,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: [/*#__PURE__*/_jsx("span", {
         className: "default-text",
         children: language
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      }), /*#__PURE__*/_jsx("span", {
         className: "hover-text",
-        children: !copied ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FileCopy.default, {
+        children: !copied ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CopyIcon, {
             className: "copy-icon"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), /*#__PURE__*/_jsx("span", {
             className: "button-lang-text",
             children: "copy"
           })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Check.default, {
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(CheckIcon, {
             className: "copy-icon"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          }), /*#__PURE__*/_jsx("span", {
             className: "button-lang-text",
             children: "copied"
           })]
         })
       })]
     })]
-  }));
+  });
   if (!dark) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LightBox.default, {
+    return /*#__PURE__*/_jsx(LightBox, {
       children: originEl
     });
   }
   return originEl;
 }
 CodeBlock.propTypes = {
-  code: _propTypes.default.string,
-  language: _propTypes.default.string,
-  children: _propTypes.default.any,
-  dark: _propTypes.default.bool
+  code: PropTypes.string,
+  language: PropTypes.string,
+  children: PropTypes.any,
+  dark: PropTypes.bool
 };
 CodeBlock.defaultProps = {
   code: '',
@@ -145,4 +130,93 @@ CodeBlock.defaultProps = {
   dark: true
 };
 const fontFamily = 'source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace !important';
-const Pre = (0, _Theme.styled)('pre')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  display: block;\n  font-size: 14px;\n  line-height: 1.42857143;\n  margin: 0 0 32px;\n  word-break: break-word;\n  word-wrap: break-word;\n  text-align: left;\n  border-radius: 5px;\n  border: 1px solid #dedede;\n  background: #222;\n  color: ", ";\n  position: relative;\n\n  .codeblock__inner {\n    display: block;\n    width: 100%;\n    max-height: 46.25rem;\n    overflow: scroll;\n  }\n\n  .copy-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 8px;\n    right: 24px;\n    padding: 4px;\n    min-width: 72px;\n    height: 24px;\n    border-radius: 4px;\n    background: transparent;\n    cursor: pointer;\n    transition: all ease 0.2s;\n\n    .copy-icon {\n      font-size: 16px;\n      color: ", ";\n    }\n\n    .hover-text {\n      display: none;\n    }\n    .default-text {\n      font-size: 12px;\n      color: ", ";\n    }\n  }\n\n  &:hover {\n    .copy-button {\n      display: flex;\n      background: ", ";\n\n      .hover-text {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        color: ", ";\n      }\n      .default-text {\n        display: none;\n        font-size: 12px;\n      }\n    }\n  }\n\n  .button-lang-text {\n    margin-left: 4px;\n    font-size: 12px;\n    color: ", ";\n  }\n\n  code {\n    counter-reset: line;\n    counter-increment: line;\n    padding: 16px;\n    font-family: ", ";\n    color: ", ";\n    * {\n      font-family: ", ";\n    }\n  }\n\n  .hljs * {\n    white-space: normal; // autowrap\n  }\n"])), fontFamily, _Colors.default.common.white, _Colors.default.common.white, _Colors.default.common.white, _Colors.default.primary.main, _Colors.default.common.white, _Colors.default.common.white, fontFamily, _Colors.default.common.white, fontFamily);
+const Pre = styled('pre')`
+  font-family: ${fontFamily};
+  display: block;
+  font-size: 14px;
+  line-height: 1.42857143;
+  margin: 0 0 32px;
+  word-break: break-word;
+  word-wrap: break-word;
+  text-align: left;
+  border-radius: 5px;
+  border: 1px solid #dedede;
+  background: #222;
+  color: ${colors.common.white};
+  position: relative;
+
+  .codeblock__inner {
+    display: block;
+    width: 100%;
+    max-height: 46.25rem;
+    overflow: scroll;
+  }
+
+  .copy-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 8px;
+    right: 24px;
+    padding: 4px;
+    min-width: 72px;
+    height: 24px;
+    border-radius: 4px;
+    background: transparent;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    .copy-icon {
+      font-size: 16px;
+      color: ${colors.common.white};
+    }
+
+    .hover-text {
+      display: none;
+    }
+    .default-text {
+      font-size: 12px;
+      color: ${colors.common.white};
+    }
+  }
+
+  &:hover {
+    .copy-button {
+      display: flex;
+      background: ${colors.primary.main};
+
+      .hover-text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: ${colors.common.white};
+      }
+      .default-text {
+        display: none;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .button-lang-text {
+    margin-left: 4px;
+    font-size: 12px;
+    color: ${colors.common.white};
+  }
+
+  code {
+    counter-reset: line;
+    counter-increment: line;
+    padding: 16px;
+    font-family: ${fontFamily};
+    color: ${colors.common.white};
+    * {
+      font-family: ${fontFamily};
+    }
+  }
+
+  .hljs * {
+    white-space: normal; // autowrap
+  }
+`;

package/lib/Colors/index.js

@@ -1,20 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _default.default;
-  }
-});
-Object.defineProperty(exports, "temp", {
-  enumerable: true,
-  get: function get() {
-    return _temp.default;
-  }
-});
-var _default = _interopRequireDefault(require("./themes/default"));
-var _temp = _interopRequireDefault(require("./themes/temp"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// eslint-disable-next-line no-restricted-exports
+export { default } from './themes/default';
+export { default as temp } from './themes/temp';

package/lib/Colors/themes/default.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /**
  * 默认 colors, ABT 系列
  *
@@ -80,4 +74,4 @@ const colors = {
   }
   // TODO: 等设计规范稳定后, 考虑扩展 trade 相关的常用颜色 (send/receive/exchange/transfer)
 };
-var _default = exports.default = colors;
+export default colors;

package/lib/Colors/themes/temp.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const colors = {
   textMuted: 'rgba(18, 22, 24, 0.36)',
   textSubtitle: 'rgba(18, 22, 24, 0.6)',
@@ -44,4 +38,4 @@ const colors = {
   buttonsButtonDanger: 'rgba(225, 29, 72, 1)',
   red: '#FF6369'
 };
-var _default = exports.default = colors;
+export default colors;

package/lib/ContactForm/index.js

@@ -1,33 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.submitContactForm = submitContactForm;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _axios = _interopRequireDefault(require("axios"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _Util = require("../Util");
-var _deprecate = require("../Util/deprecate");
-var _Button = _interopRequireDefault(require("../Button"));
-var _Theme = require("../Theme");
-var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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); } /* eslint-disable react/no-unused-prop-types */ /* eslint-disable react/static-property-placement */
-function submitContactForm(_ref, fields, context) {
-  let {
-    formId,
-    portalId
-  } = _ref;
-  const url = "https://api.hsforms.com/submissions/v3/integration/submit/".concat(portalId, "/").concat(formId);
-  return _axios.default.post(url, {
+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); }
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/static-property-placement */
+import React from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Typography from '@mui/material/Typography';
+import CircularProgress from '@mui/material/CircularProgress';
+import { mergeProps } from '../Util';
+import { warn as deprecatedWarn } from '../Util/deprecate';
+import Button from '../Button';
+import { styled } from '../Theme';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function submitContactForm({
+  formId,
+  portalId
+}, fields, context) {
+  const url = `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`;
+  return axios.post(url, {
     submittedAt: Date.now(),
     fields: Object.keys(fields).map(x => ({
       name: x.replace(/\s+/, '').toLowerCase(),
@@ -37,11 +29,9 @@ function submitContactForm(_ref, fields, context) {
     skipValidation: false
   }).then(res => res.data.inlineMessage).catch(res => res.data ? res.data.message : 'Form Submit Failed');
 }
-class ContactForm extends _react.default.Component {
+export default class ContactForm extends React.Component {
   constructor(props) {
-    var _this;
     super(props);
-    _this = this;
     _defineProperty(this, "onSubmit", async e => {
       e.preventDefault();
       this.setState({
@@ -69,13 +59,10 @@ class ContactForm extends _react.default.Component {
         });
       }
     });
-    _defineProperty(this, "getInputHandler", function (name) {
-      let state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      return e => {
-        _this.setState(Object.assign(state, {
-          [name]: e.target.value
-        }));
-      };
+    _defineProperty(this, "getInputHandler", (name, state = {}) => e => {
+      this.setState(Object.assign(state, {
+        [name]: e.target.value
+      }));
     });
     if (typeof props.fields === 'string') {
       this.fields = props.fields.split(',').map(x => x.trim());
@@ -90,10 +77,10 @@ class ContactForm extends _react.default.Component {
     this.fields.forEach(x => {
       this.state[x] = '';
     });
-    (0, _deprecate.warn)('ContactForm');
+    deprecatedWarn('ContactForm');
   }
   deriveProps() {
-    const newProps = (0, _Util.mergeProps)(this.props, ContactForm);
+    const newProps = mergeProps(this.props, ContactForm);
     if (typeof newProps.title === 'undefined') {
       newProps.title = 'Signup for our news letter';
     }
@@ -115,38 +102,38 @@ class ContactForm extends _react.default.Component {
       errorMessage,
       successMessage
     } = this.state;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Form, {
+    return /*#__PURE__*/_jsxs(Form, {
       onSubmit: this.onSubmit,
       className: className,
       style: style,
       layout: layout,
       fieldCount: this.fields.length,
       name: "subscribe",
-      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      children: [!!title && /*#__PURE__*/_jsx(Typography, {
         component: "p",
         className: "title",
         children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      }), /*#__PURE__*/_jsxs("div", {
         className: "form-controls",
-        children: [this.fields.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        children: [this.fields.map(x => /*#__PURE__*/_jsx("input", {
           required: true,
           type: "text",
           value: this.state[x],
           onChange: this.getInputHandler(x),
           className: "input",
           placeholder: x
-        }, x)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        }, x)), /*#__PURE__*/_jsx(Button, {
           variant: "outlined",
           type: "submit",
           color: "inherit",
           size: "large",
           disabled: loading,
           className: "subscribe-btn-empty",
-          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+          children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
             size: 28
           }) : button
         })]
-      }), !!errorMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), !!errorMessage && /*#__PURE__*/_jsx(Typography, {
         component: "p",
         variant: "body1",
         className: "error",
@@ -154,7 +141,7 @@ class ContactForm extends _react.default.Component {
         dangerouslySetInnerHTML: {
           __html: errorMessage
         }
-      }), !!successMessage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), !!successMessage && /*#__PURE__*/_jsx(Typography, {
         component: "p",
         variant: "body1",
         className: "success",
@@ -168,17 +155,16 @@ class ContactForm extends _react.default.Component {
 }
 
 // prettier-ignore
-exports.default = ContactForm;
 _defineProperty(ContactForm, "propTypes", {
-  style: _propTypes.default.object,
-  className: _propTypes.default.string,
-  portalId: _propTypes.default.string,
-  formId: _propTypes.default.string,
-  title: _propTypes.default.string,
-  button: _propTypes.default.string,
-  successMessage: _propTypes.default.string,
-  layout: _propTypes.default.oneOf(['horizontal', 'vertical']),
-  fields: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array])
+  style: PropTypes.object,
+  className: PropTypes.string,
+  portalId: PropTypes.string,
+  formId: PropTypes.string,
+  title: PropTypes.string,
+  button: PropTypes.string,
+  successMessage: PropTypes.string,
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  fields: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
 });
 _defineProperty(ContactForm, "defaultProps", {
   style: {},
@@ -191,5 +177,54 @@ _defineProperty(ContactForm, "defaultProps", {
   successMessage: 'Form Submit Success',
   fields: ['Email', 'First Name', 'Last Name']
 });
-const getInputWidth = props => props.layout === 'vertical' ? '100%' : "".concat(Math.max(95 / (props.fieldCount + 1), 20), "%");
-const Form = (0, _Theme.styled)('form')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: ", "px) {\n    width: 100% !important;\n  }\n  max-width: 800px;\n  margin: 0px auto;\n\n  .title {\n    font-size: 30px;\n    text-align: center;\n    color: ", ";\n  }\n\n  .form-controls {\n    width: 100%;\n    flex-direction: ", ";\n    justify-content: space-between;\n    align-items: center;\n\n    .input {\n      width: ", ";\n      height: 50px;\n      border: none;\n      border-bottom: 1px solid ", ";\n      font-size: 16px;\n      letter-spacing: 1.8px;\n      outline: none;\n      margin: ", ";\n      background: transparent;\n\n      &:first-of-type {\n        margin-top: 40px;\n      }\n    }\n\n    .subscribe-btn-empty {\n      margin-top: ", ";\n      width: ", ";\n    }\n  }\n\n  .error,\n  .success {\n    margin-top: 20px;\n  }\n"])), props => props.theme.breakpoints.values.sm, props => props.theme.typography.color.main, props => props.layout === 'vertical' ? 'column' : 'row', props => getInputWidth(props), props => props.theme.typography.color.main, props => props.layout === 'vertical' ? '12px 0' : '12px', props => props.layout === 'vertical' ? '40px' : '0', props => props.layout === 'vertical' ? '100%' : 'auto');
+const getInputWidth = props => props.layout === 'vertical' ? '100%' : `${Math.max(95 / (props.fieldCount + 1), 20)}%`;
+const Form = styled('form')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
+    width: 100% !important;
+  }
+  max-width: 800px;
+  margin: 0px auto;
+
+  .title {
+    font-size: 30px;
+    text-align: center;
+    color: ${props => props.theme.typography.color.main};
+  }
+
+  .form-controls {
+    width: 100%;
+    flex-direction: ${props => props.layout === 'vertical' ? 'column' : 'row'};
+    justify-content: space-between;
+    align-items: center;
+
+    .input {
+      width: ${props => getInputWidth(props)};
+      height: 50px;
+      border: none;
+      border-bottom: 1px solid ${props => props.theme.typography.color.main};
+      font-size: 16px;
+      letter-spacing: 1.8px;
+      outline: none;
+      margin: ${props => props.layout === 'vertical' ? '12px 0' : '12px'};
+      background: transparent;
+
+      &:first-of-type {
+        margin-top: 40px;
+      }
+    }
+
+    .subscribe-btn-empty {
+      margin-top: ${props => props.layout === 'vertical' ? '40px' : '0'};
+      width: ${props => props.layout === 'vertical' ? '100%' : 'auto'};
+    }
+  }
+
+  .error,
+  .success {
+    margin-top: 20px;
+  }
+`;