@airtable/blocks 0.0.0-experimental-c4b2228f4-20250630 → 0.0.0-experimental-3649c7162-20250904

package/dist/{cjs → esm}/base/types/mutations.js

@@ -1,28 +1,22 @@
 "use strict";
 
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.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/web.dom-collections.for-each.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MutationTypes = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _mutations_core = require("../../shared/types/mutations_core");
-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: mutations */ /** */
+/** @module @airtable/blocks: mutations */ /** */
+
 /** @hidden */
-var MutationTypes = exports.MutationTypes = Object.freeze(_objectSpread(_objectSpread({}, _mutations_core.MutationTypesCore), {}, {
+const MutationTypes = exports.MutationTypes = Object.freeze({
+  ..._mutations_core.MutationTypesCore,
   CREATE_SINGLE_FIELD: 'createSingleField',
   UPDATE_SINGLE_FIELD_CONFIG: 'updateSingleFieldConfig',
   UPDATE_SINGLE_FIELD_DESCRIPTION: 'updateSingleFieldDescription',
   UPDATE_SINGLE_FIELD_NAME: 'updateSingleFieldName',
   CREATE_SINGLE_TABLE: 'createSingleTable',
   UPDATE_VIEW_METADATA: 'updateViewMetadata'
-}));
+});
 
 /** @hidden */
 

package/dist/{cjs → esm}/base/types/undo_redo.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UndoRedoModes = void 0;
-var UndoRedoModes = exports.UndoRedoModes = Object.freeze({
+const UndoRedoModes = exports.UndoRedoModes = Object.freeze({
   NONE: 'none',
   AUTO: 'auto'
 });

package/dist/{cjs → esm}/base/types/view.js

@@ -17,7 +17,7 @@ exports.ViewType = void 0;
  * ));
  * ```
  */
-var ViewType = exports.ViewType = /*#__PURE__*/function (ViewType) {
+let ViewType = exports.ViewType = /*#__PURE__*/function (ViewType) {
   ViewType["GRID"] = "grid";
   ViewType["FORM"] = "form";
   ViewType["CALENDAR"] = "calendar";

package/dist/{cjs → esm}/base/ui/base_provider.js

@@ -1,16 +1,12 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.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.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _sdk_context = require("../../shared/ui/sdk_context");
-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 _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; }
 /**
  * Props for the {@link BaseProvider} component.
@@ -40,9 +36,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @component
  */
 function BaseProvider(props) {
-  var value = props.value,
-    children = props.children;
-  var sdk = value.__sdk;
+  const {
+    value,
+    children
+  } = props;
+  const sdk = value.__sdk;
   return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
     value: sdk
   }, children);

package/dist/esm/base/ui/baymax_utils.js

@@ -0,0 +1,461 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.baymax = baymax;
+var _emotion = require("emotion");
+var _private_utils = require("../../shared/private_utils");
+var _error_utils = require("../../shared/error_utils");
+const bounceIn = (0, _emotion.keyframes)`
+    from, 50%, to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    }
+    0% {
+        opacity: 0.9;
+        -webkit-transform: scale3d(.98, .98, .98);
+        transform: scale3d(.98, .98, .98);
+    }
+    70% {
+        opacity: 1;
+        -webkit-transform: scale3d(1.01, 1.01, 1.01);
+        transform: scale3d(1.01, 1.01, 1.01);
+    }
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+`;
+const spinScale = (0, _emotion.keyframes)`
+    0% {
+        transform: rotate(0) scale(1);
+    }
+    50% {
+        transform: rotate(360deg) scale(0.9);
+    }
+    100% {
+        transform: rotate(720deg) scale(1);
+    }
+`;
+
+// TODO (stephen): import values from theme object?
+const emotionClassNameByBaymaxClassName = {
+  absolute: (0, _emotion.css)`
+        position: absolute;
+    `,
+  'align-top': (0, _emotion.css)`
+        vertical-align: top;
+    `,
+  'all-0': (0, _emotion.css)`
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    `,
+  animate: (0, _emotion.css)`
+        transition: 0.085s all ease-in;
+    `,
+  'animate-bounce-in': (0, _emotion.css)`
+        animation-name: ${bounceIn};
+        animation-duration: 240ms;
+    `,
+  'animate-infinite': (0, _emotion.css)`
+        animation-iteration-count: infinite;
+    `,
+  'animate-spin-scale': (0, _emotion.css)`
+        animation-name: ${spinScale};
+        animation-duration: 1800ms;
+        animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    `,
+  appFontColorLight: (0, _emotion.css)`
+        color: hsl(0, 0%, 33%);
+    `,
+  'background-center': (0, _emotion.css)`
+        background-position: center center;
+    `,
+  'background-cover': (0, _emotion.css)`
+        background-size: cover;
+    `,
+  'background-transparent': (0, _emotion.css)`
+        background-color: transparent;
+    `,
+  big: (0, _emotion.css)`
+        font-size: 0.9rem;
+    `,
+  block: (0, _emotion.css)`
+        display: block;
+    `,
+  blue: (0, _emotion.css)`
+        background-color: rgb(45, 127, 249);
+    `,
+  'border-box': (0, _emotion.css)`
+        box-sizing: border-box;
+    `,
+  'bottom-0': (0, _emotion.css)`
+        bottom: 0;
+    `,
+  caps: (0, _emotion.css)`
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+    `,
+  cardBoxShadow: (0, _emotion.css)`
+        box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.1);
+        transition-property: box-shadow;
+        -webkit-transition-property: box-shadow;
+        -moz-transition-property: box-shadow;
+        transition-duration: 0.15s;
+        -webkit-transition-duration: 0.15s;
+        -moz-transition-duration: 0.15s;
+        transition-timing-function: ease-out;
+        -webkit-transition-timing-function: ease-out;
+        -moz-transition-timing-function: ease-out;
+        &:hover {
+            box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.25);
+        }
+    `,
+  center: (0, _emotion.css)`
+        text-align: center;
+    `,
+  circle: (0, _emotion.css)`
+        border-radius: 50%;
+    `,
+  dark: (0, _emotion.css)`
+        background-color: hsl(0, 0%, 20%);
+    `,
+  darken1: (0, _emotion.css)`
+        background-color: hsla(0, 0%, 0%, 0.05);
+    `,
+  'darken1-focus': (0, _emotion.css)`
+        &:focus {
+            background-color: hsla(0, 0%, 0%, 0.05);
+        }
+    `,
+  'darken1-hover': (0, _emotion.css)`
+        &:hover {
+            background-color: hsla(0, 0%, 0%, 0.05);
+        }
+    `,
+  darken2: (0, _emotion.css)`
+        background-color: hsla(0, 0%, 0%, 0.1);
+    `,
+  darken3: (0, _emotion.css)`
+        background-color: hsla(0, 0%, 0%, 0.25);
+    `,
+  darken4: (0, _emotion.css)`
+        background-color: hsla(0, 0%, 0%, 0.5);
+    `,
+  fixed: (0, _emotion.css)`
+        position: fixed;
+    `,
+  flex: (0, _emotion.css)`
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+    `,
+  'flex-auto': (0, _emotion.css)`
+        -webkit-box-flex: 1;
+        -webkit-flex: 1 1 auto;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto;
+        min-width: 0;
+        min-height: 0;
+    `,
+  'flex-inline': (0, _emotion.css)`
+        display: -webkit-inline-flex;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+    `,
+  'flex-none': (0, _emotion.css)`
+        -webkit-box-flex: 0;
+        -webkit-flex: none;
+        -ms-flex: none;
+        flex: none;
+    `,
+  'flex-reverse': (0, _emotion.css)`
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+    `,
+  'flex-wrap': (0, _emotion.css)`
+        -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+    `,
+  focusable: (0, _emotion.css)`
+        &:focus {
+            outline: 0;
+            box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+        }
+    `,
+  gray: (0, _emotion.css)`
+        background-color: rgb(102, 102, 102);
+    `,
+  grayLight2: (0, _emotion.css)`
+        background-color: rgb(238, 238, 238);
+    `,
+  green: (0, _emotion.css)`
+        background-color: rgb(32, 201, 51);
+    `,
+  'height-full': (0, _emotion.css)`
+        height: 100%;
+    `,
+  inline: (0, _emotion.css)`
+        display: inline;
+    `,
+  'inline-block': (0, _emotion.css)`
+        display: inline-block;
+    `,
+  'items-center': (0, _emotion.css)`
+        -webkit-box-align: center;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        -ms-grid-row-align: center;
+        align-items: center;
+    `,
+  'justify-center': (0, _emotion.css)`
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+    `,
+  'justify-end': (0, _emotion.css)`
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+    `,
+  'justify-start': (0, _emotion.css)`
+        -webkit-box-pack: start;
+        -webkit-justify-content: flex-start;
+        -ms-flex-pack: start;
+        justify-content: flex-start;
+    `,
+  'left-0': (0, _emotion.css)`
+        left: 0;
+    `,
+  'light-scrollbar': (0, _emotion.css)`
+        &::-webkit-scrollbar {
+            width: 12px;
+            height: 12px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+        &::-webkit-scrollbar-button {
+            display: none;
+            height: 0;
+            width: 0;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: hsla(0, 0%, 0%, 0.35);
+            background-clip: padding-box;
+            border: 3px solid rgba(0, 0, 0, 0);
+            border-radius: 6px;
+            min-height: 36px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: hsla(0, 0%, 0%, 0.4);
+        }
+    `,
+  'line-height-4': (0, _emotion.css)`
+        line-height: 1.5;
+    `,
+  'link-quiet': (0, _emotion.css)`
+        &:hover {
+            opacity: 0.85;
+        }
+    `,
+  'link-unquiet': (0, _emotion.css)`
+        &:hover {
+            opacity: 1;
+        }
+    `,
+  'link-unquiet-focusable': (0, _emotion.css)`
+        &:hover {
+            opacity: 1;
+        }
+        &:focus {
+            opacity: 1;
+        }
+    `,
+  m0: (0, _emotion.css)`
+        margin: 0;
+    `,
+  m2: (0, _emotion.css)`
+        margin: 1rem;
+    `,
+  mb1: (0, _emotion.css)`
+        margin-bottom: 0.5rem;
+    `,
+  ml1: (0, _emotion.css)`
+        margin-left: 0.5rem;
+    `,
+  'mr-half': (0, _emotion.css)`
+        margin-right: 0.25rem;
+    `,
+  mr1: (0, _emotion.css)`
+        margin-right: 0.5rem;
+    `,
+  mt0: (0, _emotion.css)`
+        margin-top: 0;
+    `,
+  mt1: (0, _emotion.css)`
+        margin-top: 0.5rem;
+    `,
+  mt2: (0, _emotion.css)`
+        margin-top: 1rem;
+    `,
+  'no-outline': (0, _emotion.css)`
+        outline: 0;
+    `,
+  'no-user-select': (0, _emotion.css)`
+        user-select: none;
+        -webkit-user-select: none;
+    `,
+  noevents: (0, _emotion.css)`
+        pointer-events: none;
+    `,
+  normal: (0, _emotion.css)`
+        font-size: 0.8rem;
+    `,
+  nowrap: (0, _emotion.css)`
+        white-space: nowrap;
+    `,
+  'overflow-auto': (0, _emotion.css)`
+        overflow: auto;
+    `,
+  'overflow-hidden': (0, _emotion.css)`
+        overflow: hidden;
+    `,
+  'p-half': (0, _emotion.css)`
+        padding: 0.25rem;
+    `,
+  p1: (0, _emotion.css)`
+        padding: 0.5rem;
+    `,
+  p2: (0, _emotion.css)`
+        padding: 1rem;
+    `,
+  pill: (0, _emotion.css)`
+        border-radius: 9999px;
+    `,
+  pointer: (0, _emotion.css)`
+        cursor: pointer;
+    `,
+  pr1: (0, _emotion.css)`
+        padding-right: 0.5rem;
+    `,
+  'print-color-exact': (0, _emotion.css)`
+        -webkit-print-color-adjust: exact;
+    `,
+  px1: (0, _emotion.css)`
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    `,
+  quiet: (0, _emotion.css)`
+        opacity: 0.75;
+    `,
+  quieter: (0, _emotion.css)`
+        opacity: 0.5;
+    `,
+  red: (0, _emotion.css)`
+        background-color: rgb(248, 43, 96);
+    `,
+  relative: (0, _emotion.css)`
+        position: relative;
+    `,
+  'right-0': (0, _emotion.css)`
+        right: 0;
+    `,
+  rounded: (0, _emotion.css)`
+        border-radius: 3px;
+    `,
+  'rounded-big': (0, _emotion.css)`
+        border-radius: 6px;
+    `,
+  'self-end': (0, _emotion.css)`
+        -webkit-align-self: flex-end;
+        -ms-flex-item-align: end;
+        align-self: flex-end;
+    `,
+  small: (0, _emotion.css)`
+        font-size: 11px;
+    `,
+  stroked1: (0, _emotion.css)`
+        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    `,
+  strong: (0, _emotion.css)`
+        font-weight: 500;
+    `,
+  'styled-input': (0, _emotion.css)`
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        border-style: solid;
+        border-width: 2px;
+        border-color: transparent;
+        outline: none;
+        &:active {
+            border-color: hsla(0, 0%, 0%, 0.25);
+        }
+        &:focus {
+            border-color: hsla(0, 0%, 0%, 0.25);
+        }
+    `,
+  'text-blue': (0, _emotion.css)`
+        color: rgb(45, 127, 249);
+        fill: rgb(45, 127, 249);
+    `,
+  'text-blue-focus': (0, _emotion.css)`
+        &:focus {
+            color: rgb(45, 127, 249);
+            fill: rgb(45, 127, 249);
+        }
+    `,
+  'text-dark': (0, _emotion.css)`
+        color: hsl(0, 0%, 20%);
+        fill: hsl(0, 0%, 20%);
+    `,
+  'text-white': (0, _emotion.css)`
+        color: hsl(0, 0%, 100%);
+        fill: hsl(0, 0%, 100%);
+    `,
+  'top-0': (0, _emotion.css)`
+        top: 0;
+    `,
+  truncate: (0, _emotion.css)`
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    `,
+  understroke: (0, _emotion.css)`
+        padding-bottom: 0.14rem;
+        border-bottom: 2px solid hsla(0, 0%, 0%, 0.1);
+    `,
+  white: (0, _emotion.css)`
+        background-color: hsl(0, 0%, 100%);
+    `,
+  'width-full': (0, _emotion.css)`
+        width: 100%;
+    `,
+  yellow: (0, _emotion.css)`
+        background-color: rgb(252, 180, 0);
+    `
+};
+
+/**
+ * @internal
+ */
+function baymax(baymaxClassNames) {
+  return baymaxClassNames.split(/\s+/).filter(Boolean).map(baymaxClassName => {
+    if ((0, _private_utils.has)(emotionClassNameByBaymaxClassName, baymaxClassName)) {
+      return emotionClassNameByBaymaxClassName[baymaxClassName];
+    } else {
+      throw (0, _error_utils.spawnError)('Baymax class not found: %s. If required, add the definition to baymax_utils.js.`', baymaxClassName);
+    }
+  }).join(' ');
+}

package/dist/esm/base/ui/block_wrapper.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _error_utils = require("../../shared/error_utils");
+var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _baymax_utils = require("./baymax_utils");
+var _modal = _interopRequireDefault(require("./modal"));
+var _loader = _interopRequireDefault(require("./loader"));
+var _ui = require("./ui");
+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; }
+/** @hidden */ /** */
+
+class BlockWrapper extends React.Component {
+  /** @internal */
+  _minSizeBeforeRender = null;
+  /** @hidden */
+  constructor(props) {
+    super(props);
+
+    // We watch globalAlert in constructor, instead of using createDataContainer,
+    // because createDataContainer starts watching after the component is mounted.
+    // If we used createDataContainer and some child component in its constructor or
+    // componentDidMount called globalAlert.showReloadPrompt, this component
+    // would not update.
+    // TODO(kasra): maybe change createDataContainer to handle this case
+    // without having to special case it.
+    _ui.globalAlert.watch('__alertInfo', () => this.forceUpdate());
+  }
+  /** @hidden */
+  UNSAFE_componentWillMount() {
+    this._snapshotMinSizeBeforeRender();
+  }
+  /** @hidden */
+  componentDidMount() {
+    this._checkMinSizeConstraintUnchangedAfterRender();
+  }
+  /** @hidden */
+  UNSAFE_componentWillUpdate() {
+    this._snapshotMinSizeBeforeRender();
+  }
+  /** @hidden */
+  componentDidUpdate() {
+    this._checkMinSizeConstraintUnchangedAfterRender();
+  }
+  // usually createDataContainer handles re-rendering when watchable values
+  // change. As minSize can be changed by child components though, it can
+  // change before createDataContainer has a chance to set up watches. To get
+  // around this, we take a snapshot of the minSize before render and call
+  // .forceUpdate() if its changed after render
+  /** @internal */
+  _snapshotMinSizeBeforeRender() {
+    this._minSizeBeforeRender = this.props.sdk.viewport.minSize;
+  }
+  /** @internal */
+  _checkMinSizeConstraintUnchangedAfterRender() {
+    const prevMinSize = this._minSizeBeforeRender;
+    (0, _error_utils.invariant)(prevMinSize, 'prevMinSize must be set');
+    const currentMinSize = this.props.sdk.viewport.minSize;
+    if (currentMinSize.width !== prevMinSize.width || currentMinSize.height !== prevMinSize.height) {
+      this.forceUpdate();
+    }
+  }
+  /** @hidden */
+  render() {
+    const {
+      viewport
+    } = this.props.sdk;
+    const globalAlertInfo = _ui.globalAlert.__alertInfo;
+    if (globalAlertInfo) {
+      return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
+        value: this.props.sdk
+      }, /*#__PURE__*/React.createElement(_modal.default, {
+        className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center p2'),
+        style: {
+          animation: 'none',
+          maxWidth: undefined,
+          maxHeight: undefined,
+          borderRadius: 0,
+          boxShadow: 'none'
+        }
+      }, globalAlertInfo.content));
+    }
+    return /*#__PURE__*/React.createElement(_sdk_context.SdkContext.Provider, {
+      value: this.props.sdk
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement("div", {
+        className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center')
+      }, /*#__PURE__*/React.createElement(_loader.default, null))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: viewport.isSmallerThanMinSize ? (0, _baymax_utils.baymax)('absolute all-0 overflow-hidden') : ''
+    }, this.props.children)), viewport.isSmallerThanMinSize && /*#__PURE__*/React.createElement("div", {
+      className: (0, _baymax_utils.baymax)('absolute all-0 flex items-center justify-center p2 white'),
+      style: {
+        zIndex: 2147483647 // largest 32-bit signed integer (maximum z-index)
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: (0, _baymax_utils.baymax)('center line-height-4 quiet strong')
+    }, /*#__PURE__*/React.createElement("span", null, "Please make this extension bigger or "), /*#__PURE__*/React.createElement("span", {
+      className: (0, _baymax_utils.baymax)('pointer understroke link-unquiet'),
+      onClick: () => viewport.enterFullscreenIfPossible()
+    }, "fullscreen"))));
+  }
+}
+var _default = exports.default = (0, _with_hooks.default)(BlockWrapper, _ref => {
+  let {
+    sdk
+  } = _ref;
+  (0, _use_watchable.default)(sdk.viewport, ['size', 'minSize']);
+  return {};
+});