@airtable/blocks 0.0.0-experimental-f52bc4e5e-20250709 → 0.0.0-experimental-75d011284-20250904

package/dist/cjs/base/ui/link.js

@@ -1,44 +1,22 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.linkStylePropTypes = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-require("core-js/modules/es.array.index-of.js");
-require("core-js/modules/es.regexp.exec.js");
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _emotion = require("emotion");
 var _core = require("@styled-system/core");
 var _private_utils = require("../../shared/private_utils");
 var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
 var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _aria_props = require("./types/aria_props");
-var _data_attributes_prop = require("./types/data_attributes_prop");
-var _create_responsive_prop_type = _interopRequireDefault(require("./system/utils/create_responsive_prop_type"));
 var _system = require("./system");
-var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
 var _text = require("./text");
-var _icon_config = require("./icon_config");
 var _icon = _interopRequireDefault(require("./icon"));
-var _enum_prop_type_utils = require("./system/utils/enum_prop_type_utils");
-var _excluded = ["size", "variant", "underline", "icon", "href", "id", "target", "onMouseEnter", "onMouseLeave", "onClick", "hasOnClick", "tabIndex", "className", "style", "children", "dataAttributes", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-live"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 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) { (0, _defineProperty2.default)(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; } /** @module @airtable/blocks/ui: Link */ /** */
+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); } /** @module @airtable/blocks/ui: Link */ /** */
 /**
  * Style props for the {@link Link} component. Also accepts:
  * * {@link FlexItemSetProps}
@@ -52,10 +30,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @noInheritDoc
  */
 
-var styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.fontWeight, _system.spacingSet);
-var linkStylePropTypes = exports.linkStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-  display: (0, _create_responsive_prop_type.default)(_propTypes.default.oneOf(['inline-flex', 'flex', 'none']))
-}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.fontWeightPropTypes), _system.spacingSetPropTypes);
+const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.fontWeight, _system.spacingSet);
 
 /**
  * Variants for the {@link Link} component:
@@ -73,14 +48,14 @@ var linkStylePropTypes = exports.linkStylePropTypes = _objectSpread(_objectSprea
  * Light gray text.
  */
 
-var LinkVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
-var linkVariantPropType = (0, _enum_prop_type_utils.createPropTypeFromEnum)(LinkVariant);
+const LinkVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
 
 /** @internal */
 function useLinkVariant() {
-  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LinkVariant.default;
-  var _useTheme = (0, _use_theme.default)(),
-    linkVariants = _useTheme.linkVariants;
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LinkVariant.default;
+  const {
+    linkVariants
+  } = (0, _use_theme.default)();
   return linkVariants[variant];
 }
 
@@ -98,14 +73,14 @@ function useLinkVariant() {
 // scheme is not "javascript://" to avoid XSS. Otherwise, "javascript" may be encoded
 // as "&#106avascript://" or any other permutation of escaped characters.
 // Ref: https://tools.ietf.org/html/rfc3986#section-3.1
-var reasonableUrlSchemeRegex = /^[a-z0-9]+:\/\//i;
+const reasonableUrlSchemeRegex = /^[a-z0-9]+:\/\//i;
 
 /** @internal */
 function _getSanitizedHref(href) {
   if (!href) {
     return undefined;
   }
-  var hasScheme = href.indexOf('://') !== -1;
+  const hasScheme = href.indexOf('://') !== -1;
   if (!hasScheme) {
     // If it's a relative URL (like '/foo'), leave it alone.
     return href;
@@ -138,52 +113,56 @@ function _getSanitizedHref(href) {
  * @docsPath UI/components/Link
  * @component
  */
-var Link = (props, ref) => {
-  var _props$size = props.size,
-    size = _props$size === void 0 ? _text.TextSize.default : _props$size,
-    _props$variant = props.variant,
-    variant = _props$variant === void 0 ? LinkVariant.default : _props$variant,
-    _props$underline = props.underline,
-    underline = _props$underline === void 0 ? false : _props$underline,
-    icon = props.icon,
-    href = props.href,
-    id = props.id,
-    target = props.target,
-    onMouseEnter = props.onMouseEnter,
-    onMouseLeave = props.onMouseLeave,
-    onClick = props.onClick,
-    hasOnClick = props.hasOnClick,
-    tabIndex = props.tabIndex,
-    className = props.className,
-    style = props.style,
-    children = props.children,
-    dataAttributes = props.dataAttributes,
-    ariaLabel = props['aria-label'],
-    ariaLabelledBy = props['aria-labelledby'],
-    ariaDescribedBy = props['aria-describedby'],
-    ariaControls = props['aria-controls'],
-    ariaExpanded = props['aria-expanded'],
-    ariaHasPopup = props['aria-haspopup'],
-    ariaHidden = props['aria-hidden'],
-    ariaLive = props['aria-live'],
-    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var classNameForTextStyle = (0, _text.useTextStyle)(size);
-  var classNameForLinkVariant = useLinkVariant(variant);
-  var classNameForUnderline = (0, _use_styled_system.default)({
+const Link = (props, ref) => {
+  const {
+    size = _text.TextSize.default,
+    variant = LinkVariant.default,
+    underline = false,
+    icon,
+    href,
+    id,
+    target,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    // This hasOnClick prop is set by the Tooltip wrapper. Destructure it here just to get it out of `props`.
+    // See 7a80fefd0a0bc871c31e0c063662c6100b0ca77d
+    // TODO(stephen): clean this up.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasOnClick,
+    tabIndex,
+    className,
+    style,
+    children,
+    dataAttributes,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
+    'aria-hidden': ariaHidden,
+    'aria-live': ariaLive,
+    ...styleProps
+  } = props;
+  const classNameForTextStyle = (0, _text.useTextStyle)(size);
+  const classNameForLinkVariant = useLinkVariant(variant);
+  const classNameForUnderline = (0, _use_styled_system.default)({
     textDecoration: underline ? 'underline' : 'none'
   });
-  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+  const classNameForStyleProps = (0, _use_styled_system.default)({
     display: 'inline-flex',
     // Use a negative margin to undo the padding.
     padding: '0 0.1em',
     margin: '0 -0.1em',
-    maxWidth: '100%'
-  }, styleProps), styleParser);
+    maxWidth: '100%',
+    ...styleProps
+  }, styleParser);
 
   // Set rel="noopener noreferrer" to avoid reverse tabnabbing.
   // https://www.owasp.org/index.php/Reverse_Tabnabbing
-  var rel = target ? 'noopener noreferrer' : undefined;
-  return /*#__PURE__*/React.createElement("a", (0, _extends2.default)({
+  const rel = target ? 'noopener noreferrer' : undefined;
+  return /*#__PURE__*/React.createElement("a", _extends({
     ref: ref,
     href: _getSanitizedHref(href),
     target: target,
@@ -212,18 +191,6 @@ var Link = (props, ref) => {
     marginRight: "0.5em"
   }) : icon, children);
 };
-var ForwardedRefLink = /*#__PURE__*/React.forwardRef(Link);
-ForwardedRefLink.propTypes = _objectSpread(_objectSpread(_objectSpread({
-  size: _text.textSizePropType,
-  variant: linkVariantPropType,
-  icon: _propTypes.default.oneOfType([_icon_config.iconNamePropType, _propTypes.default.element]),
-  href: _propTypes.default.string.isRequired,
-  target: _propTypes.default.string,
-  tabIndex: _propTypes.default.number,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  children: _propTypes.default.node,
-  dataAttributes: _data_attributes_prop.dataAttributesPropType
-}, _tooltip_anchor_props.tooltipAnchorPropTypes), linkStylePropTypes), _aria_props.ariaPropTypes);
+const ForwardedRefLink = /*#__PURE__*/React.forwardRef(Link);
 ForwardedRefLink.displayName = 'Link';
 var _default = exports.default = ForwardedRefLink;

package/dist/cjs/base/ui/loader.js

@@ -1,21 +1,9 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.loaderStylePropTypes = exports.default = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = void 0;
 var _emotion = require("emotion");
 var React = _interopRequireWildcard(require("react"));
 var _core = require("@styled-system/core");
@@ -23,11 +11,11 @@ var _loader = _interopRequireDefault(require("../../shared/ui/loader"));
 var _baymax_utils = require("./baymax_utils");
 var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
 var _system = require("./system");
-var _excluded = ["fillColor", "scale", "className", "style"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 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) { (0, _defineProperty2.default)(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; } /** @module @airtable/blocks/ui: Loader */ /** */
+/** @module @airtable/blocks/ui: Loader */ /** */
+
 /**
  * Style props for the {@link Loader} component. Accepts:
  * * {@link FlexItemSetProps}
@@ -35,8 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * * {@link PositionSetProps}
  */
 
-var styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
-var loaderStylePropTypes = exports.loaderStylePropTypes = _objectSpread(_objectSpread(_objectSpread({}, _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
 
 /**
  * Props for the {@link Loader} component. Also accepts:
@@ -55,13 +42,15 @@ var loaderStylePropTypes = exports.loaderStylePropTypes = _objectSpread(_objectS
  * @docsPath UI/components/Loader
  * @component
  */
-var Loader = props => {
-  var fillColor = props.fillColor,
-    scale = props.scale,
-    className = props.className,
-    style = props.style,
-    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var classNameForStyleProps = (0, _use_styled_system.default)(styleProps, styleParser);
+const Loader = _ref => {
+  let {
+    fillColor = '#888',
+    scale = 0.3,
+    className,
+    style,
+    ...styleProps
+  } = _ref;
+  const classNameForStyleProps = (0, _use_styled_system.default)(styleProps, styleParser);
   return /*#__PURE__*/React.createElement(_loader.default, {
     fillColor: fillColor,
     scale: scale,
@@ -69,14 +58,4 @@ var Loader = props => {
     style: style
   });
 };
-Loader.propTypes = _objectSpread({
-  fillColor: _propTypes.default.string.isRequired,
-  scale: _propTypes.default.number.isRequired,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object
-}, loaderStylePropTypes);
-Loader.defaultProps = {
-  fillColor: '#888',
-  scale: 0.3
-};
 var _default = exports.default = Loader;

package/dist/cjs/base/ui/modal.js

@@ -1,25 +1,9 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.array.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.weak-map.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/web.dom-collections.iterator.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modalStylePropTypes = exports.default = exports.Modal = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+exports.default = exports.Modal = void 0;
 var _emotion = require("emotion");
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -28,12 +12,11 @@ var _error_utils = require("../../shared/error_utils");
 var _baymax_utils = require("./baymax_utils");
 var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
 var _system = require("./system");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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) { (0, _defineProperty2.default)(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; } /** @hidden */ /** */
+/** @hidden */ /** */
+
 /**
  * Props for the {@link Modal} component. Also accepts:
  * * {@link ModalStyleProps}
@@ -53,8 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @noInheritDoc
  */
 
-var styleParser = (0, _core.compose)(_system.dimensionsSet, _system.display, _system.flexContainerSet, _system.spacingSet);
-var modalStylePropTypes = exports.modalStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.dimensionsSetPropTypes), _system.displayPropTypes), _system.flexContainerSetPropTypes), _system.spacingSetPropTypes);
+const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.display, _system.flexContainerSet, _system.spacingSet);
 
 /**
  * Generic modal component with minimal styling.
@@ -62,117 +44,96 @@ var modalStylePropTypes = exports.modalStylePropTypes = _objectSpread(_objectSpr
  * @hidden
  */
 // TODO (stephen): refactor so Modal only includes the background element and renders the dialog via children
-var Modal = exports.Modal = /*#__PURE__*/function (_React$Component) {
+class Modal extends React.Component {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
   /** @hidden */
-  function Modal(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, Modal);
-    _this = _callSuper(this, Modal, [props]);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_background", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_container", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_originalActiveElement", void 0);
-    /** @internal */
-    (0, _defineProperty2.default)(_this, "_mouseDownOutsideModal", void 0);
-    _this._background = null;
-    _this._container = document.createElement('div');
-    _this._originalActiveElement = null;
-    _this._mouseDownOutsideModal = false;
-    _this._onMouseDown = _this._onMouseDown.bind(_this);
-    _this._onMouseUp = _this._onMouseUp.bind(_this);
-    return _this;
+  constructor(props) {
+    super(props);
+    this._background = null;
+    this._container = document.createElement('div');
+    this._originalActiveElement = null;
+    this._mouseDownOutsideModal = false;
+    this._onMouseDown = this._onMouseDown.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
   }
   /** @hidden */
-  (0, _inherits2.default)(Modal, _React$Component);
-  return (0, _createClass2.default)(Modal, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var container = this._container;
-      container.setAttribute('tabIndex', '0');
-      container.style.zIndex = '99999';
-      // If we don't set `position: fixed`, the outline and box-shadow
-      // of elements that are in theory underneath this element will cover
-      // up the modal.
-      container.style.position = 'fixed';
-      (0, _error_utils.invariant)(document.body, 'no document body');
-      document.body.appendChild(container);
+  componentDidMount() {
+    const container = this._container;
+    container.setAttribute('tabIndex', '0');
+    container.style.zIndex = '99999';
+    // If we don't set `position: fixed`, the outline and box-shadow
+    // of elements that are in theory underneath this element will cover
+    // up the modal.
+    container.style.position = 'fixed';
+    (0, _error_utils.invariant)(document.body, 'no document body');
+    document.body.appendChild(container);
 
-      // If the frame is focused, move focus to the modal's container.
-      // Next time the user presses tab, it will focus the first focusable element in the modal.
-      // We only do this if the document is focused to avoid the frame becoming
-      // programmatically focused if a modal is displayed without user interaction.
-      if (document.hasFocus()) {
-        this._originalActiveElement = document.activeElement;
-        container.focus();
-      }
-    }
-    /** @hidden */
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      (0, _error_utils.invariant)(document.body, 'no document body');
-      document.body.removeChild(this._container);
-      if (this._originalActiveElement !== null) {
-        this._originalActiveElement.focus();
-      }
+    // If the frame is focused, move focus to the modal's container.
+    // Next time the user presses tab, it will focus the first focusable element in the modal.
+    // We only do this if the document is focused to avoid the frame becoming
+    // programmatically focused if a modal is displayed without user interaction.
+    if (document.hasFocus()) {
+      this._originalActiveElement = document.activeElement;
+      container.focus();
     }
-    /** @internal */
-  }, {
-    key: "_onMouseDown",
-    value: function _onMouseDown(e) {
-      if (this._shouldClickingOnElementCloseModal(e.target)) {
-        this._mouseDownOutsideModal = true;
-      }
-    }
-    /** @internal */
-  }, {
-    key: "_onMouseUp",
-    value: function _onMouseUp(e) {
-      if (this._mouseDownOutsideModal && this.props.onClose && this._shouldClickingOnElementCloseModal(e.target)) {
-        this.props.onClose();
-      }
-      this._mouseDownOutsideModal = false;
+  }
+  /** @hidden */
+  componentWillUnmount() {
+    (0, _error_utils.invariant)(document.body, 'no document body');
+    document.body.removeChild(this._container);
+    if (this._originalActiveElement !== null) {
+      this._originalActiveElement.focus();
     }
-    /** @internal */
-  }, {
-    key: "_shouldClickingOnElementCloseModal",
-    value: function _shouldClickingOnElementCloseModal(el) {
-      return el === this._background;
+  }
+  /** @internal */
+  _onMouseDown(e) {
+    if (this._shouldClickingOnElementCloseModal(e.target)) {
+      this._mouseDownOutsideModal = true;
     }
-    /** @hidden */
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        className = _this$props.className,
-        style = _this$props.style,
-        backgroundClassName = _this$props.backgroundClassName,
-        backgroundStyle = _this$props.backgroundStyle,
-        children = _this$props.children;
-      return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/React.createElement("div", {
-        ref: el => this._background = el,
-        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0 darken3 flex items-center justify-center'), backgroundClassName),
-        style: backgroundStyle,
-        onMouseDown: this._onMouseDown,
-        onMouseUp: this._onMouseUp
-      }, /*#__PURE__*/React.createElement("div", {
-        className: (0, _emotion.cx)((0, _baymax_utils.baymax)('relative overflow-auto light-scrollbar white stroked1 rounded-big animate-bounce-in'), className),
-        style: style
-      }, children)), this._container);
+  }
+  /** @internal */
+  _onMouseUp(e) {
+    if (this._mouseDownOutsideModal && this.props.onClose && this._shouldClickingOnElementCloseModal(e.target)) {
+      this.props.onClose();
     }
-  }]);
-}(React.Component);
-/** @hidden */
-(0, _defineProperty2.default)(Modal, "propTypes", {
-  onClose: _propTypes.default.func,
-  className: _propTypes.default.string,
-  style: _propTypes.default.object,
-  backgroundClassName: _propTypes.default.string,
-  backgroundStyle: _propTypes.default.object
-});
-var _default = exports.default = (0, _with_styled_system.default)(Modal, styleParser, modalStylePropTypes,
+    this._mouseDownOutsideModal = false;
+  }
+  /** @internal */
+  _shouldClickingOnElementCloseModal(el) {
+    return el === this._background;
+  }
+  /** @hidden */
+  render() {
+    const {
+      className,
+      style,
+      backgroundClassName,
+      backgroundStyle,
+      children
+    } = this.props;
+    return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/React.createElement("div", {
+      ref: el => {
+        this._background = el;
+      },
+      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0 darken3 flex items-center justify-center'), backgroundClassName),
+      style: backgroundStyle,
+      onMouseDown: this._onMouseDown,
+      onMouseUp: this._onMouseUp
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('relative overflow-auto light-scrollbar white stroked1 rounded-big animate-bounce-in'), className),
+      style: style
+    }, children)), this._container);
+  }
+}
+exports.Modal = Modal;
+var _default = exports.default = (0, _with_styled_system.default)(Modal, styleParser,
 // TODO (stephen): move these to Dialog
 {
   display: 'block',