@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-3e47d4d04-20250909

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

@@ -1,36 +1,27 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ValidInputType = exports.SupportedInputType = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _private_utils = require("../../shared/private_utils");
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _use_form_field = _interopRequireDefault(require("./use_form_field"));
-var _system = require("./system");
-var _control_sizes = require("./control_sizes");
-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; }
 /** @module @airtable/blocks/ui: Input */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import useTheme from './theme/use_theme';
+import useStyledSystem from './use_styled_system';
+import useFormField from './use_form_field';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
+import { ControlSize, useInputSize } from './control_sizes';
 
 /** @internal */
 
-const InputVariant = (0, _private_utils.createEnum)('default');
+const InputVariant = createEnum('default');
 
 /** @internal */
 function useInputVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : InputVariant.default;
   const {
     inputVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return inputVariants[variant];
 }
-const ValidInputType = exports.ValidInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+export const ValidInputType = createEnum('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
 /** */
 
 /**
@@ -45,7 +36,7 @@ const ValidInputType = exports.ValidInputType = (0, _private_utils.createEnum)('
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(maxWidth, minWidth, width, flexItemSet, positionSet, margin);
 
 /**
  * Props shared between the {@link Input} and {@link InputSynced} components.
@@ -53,7 +44,7 @@ const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _syst
  * @noInheritDoc
  */
 
-const SupportedInputType = exports.SupportedInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+export const SupportedInputType = createEnum('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
 /**
  * Supported types for the {@link Input} component. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) for more information.
  */
@@ -75,7 +66,7 @@ const SupportedInputType = exports.SupportedInputType = (0, _private_utils.creat
  */
 const Input = (props, ref) => {
   const {
-    size = _control_sizes.ControlSize.default,
+    size = ControlSize.default,
     type = SupportedInputType.text,
     value,
     placeholder,
@@ -111,14 +102,14 @@ const Input = (props, ref) => {
     'aria-describedby': ariaDescribedByProp,
     ...styleProps
   } = props;
-  const formFieldContextValue = (0, _use_form_field.default)();
+  const formFieldContextValue = useFormField();
   const controlId = formFieldContextValue ? formFieldContextValue.controlId : undefined;
   const descriptionId = formFieldContextValue ? formFieldContextValue.descriptionId : undefined;
   const ariaDescribedBy = [ariaDescribedByProp, descriptionId].filter(Boolean).join(' ') || undefined;
   // There is only a single default variant.
   const classNameForInputVariant = useInputVariant();
-  const classNameForInputSize = (0, _control_sizes.useInputSize)(size);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForInputSize = useInputSize(size);
+  const classNameForStyleProps = useStyledSystem({
     width: '100%',
     ...styleProps
   }, styleParser);
@@ -151,11 +142,11 @@ const Input = (props, ref) => {
     onMouseLeave: onMouseLeave,
     onClick: onClick,
     style: style,
-    className: (0, _emotion.cx)(classNameForInputSize, classNameForInputVariant, classNameForStyleProps, className),
+    className: cx(classNameForInputSize, classNameForInputVariant, classNameForStyleProps, className),
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
   });
 };
 const ForwardedRefInput = /*#__PURE__*/React.forwardRef(Input);
 ForwardedRefInput.displayName = 'Input';
-var _default = exports.default = ForwardedRefInput;
+export default ForwardedRefInput;

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

@@ -0,0 +1,59 @@
+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: Input */ /** */
+import * as React from 'react';
+import { spawnError } from '../../shared/error_utils';
+import useSynced from '../../shared/ui/use_synced';
+import Input, { SupportedInputType } from './input';
+
+/**
+ * Props for the {@link InputSynced} component. Also accepts:
+ * * {@link InputStyleProps}
+ *
+ * @docsPath UI/components/InputSynced
+ * @groupPath UI/components/Input
+ */
+
+/**
+ * A wrapper around the {@link Input} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="input--example-synced" title="Synced input example" ]]
+ *
+ * @docsPath UI/components/InputSynced
+ * @groupPath UI/components/Input
+ * @component
+ */
+const InputSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    type = SupportedInputType.text,
+    disabled,
+    onChange,
+    ...restOfProps
+  } = props;
+  const [value, setValue, canSetValue] = useSynced(globalConfigKey);
+  let inputValue;
+  if (value === null || value === undefined) {
+    // If an input gets null or undefined for value, React treats it as uncontrolled
+    // and will throw warnings when it becomes controlled.
+    inputValue = '';
+  } else if (typeof value === 'string') {
+    inputValue = value;
+  } else {
+    throw spawnError('InputSynced only works with a global config value that is a string, null or undefined.');
+  }
+  return /*#__PURE__*/React.createElement(Input, _extends({}, restOfProps, {
+    ref: ref,
+    disabled: disabled || !canSetValue,
+    onChange: e => {
+      setValue(e.target.value);
+      if (onChange) {
+        onChange(e);
+      }
+    },
+    value: inputValue,
+    type: type
+  }));
+};
+const ForwardedRefInputSynced = /*#__PURE__*/React.forwardRef(InputSynced);
+ForwardedRefInputSynced.displayName = 'InputSynced';
+export default ForwardedRefInputSynced;

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

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.KeyCodes = void 0;
-exports.isCommandModifierKeyEvent = isCommandModifierKeyEvent;
 /**
  * @internal
  */
-const KeyCodes = exports.KeyCodes = Object.freeze({
+export const KeyCodes = Object.freeze({
   BACKSPACE: 8,
   TAB: 9,
   ENTER: 13,
@@ -63,7 +56,7 @@ const KeyCodes = exports.KeyCodes = Object.freeze({
  * @internal
  * OS-aware check for command/ctrl key.
  */
-function isCommandModifierKeyEvent(e) {
+export function isCommandModifierKeyEvent(e) {
   const isMac = window.navigator.platform.toLowerCase().indexOf('mac') !== -1;
   if (isMac) {
     return e.metaKey;

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

@@ -1,18 +1,11 @@
-"use strict";
+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: Label */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import useStyledSystem from './use_styled_system';
+import { allStylesParser } from './system/index';
+import { TextSize, useTextStyle } from './text';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _emotion = require("emotion");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _index = require("./system/index");
-var _text = require("./text");
-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); } /** @module @airtable/blocks/ui: Label */ /** */
 /**
  * Props for the {@link Label} component. Also accepts:
  * * {@link AllStylesProps}
@@ -32,7 +25,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */
 const Label = (props, ref) => {
   const {
-    size = _text.TextSize.default,
+    size = TextSize.default,
     htmlFor,
     id,
     children,
@@ -50,19 +43,19 @@ const Label = (props, ref) => {
     'aria-live': ariaLive,
     ...styleProps
   } = props;
-  const classNameForTextStyle = (0, _text.useTextStyle)(size);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForTextStyle = useTextStyle(size);
+  const classNameForStyleProps = useStyledSystem({
     display: 'inline-block',
     textColor: 'light',
     fontWeight: 'strong',
     marginBottom: '6px',
     ...styleProps
-  }, _index.allStylesParser);
+  }, allStylesParser);
   return /*#__PURE__*/React.createElement("label", _extends({
     ref: ref,
     htmlFor: htmlFor,
     id: id,
-    className: (0, _emotion.cx)(classNameForTextStyle, classNameForStyleProps, className),
+    className: cx(classNameForTextStyle, classNameForStyleProps, className),
     style: style,
     role: role,
     "aria-label": ariaLabel,
@@ -77,4 +70,4 @@ const Label = (props, ref) => {
 };
 const ForwardedRefLabel = /*#__PURE__*/React.forwardRef(Label);
 ForwardedRefLabel.displayName = 'Label';
-var _default = exports.default = ForwardedRefLabel;
+export default ForwardedRefLabel;

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

@@ -1,22 +1,15 @@
-"use strict";
+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 */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import { compose } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+import useTheme from './theme/use_theme';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, fontWeight, spacingSet, display } from './system';
+import { useTextStyle, TextSize } from './text';
+import Icon from './icon';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _system = require("./system");
-var _text = require("./text");
-var _icon = _interopRequireDefault(require("./icon"));
-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); } /** @module @airtable/blocks/ui: Link */ /** */
 /**
  * Style props for the {@link Link} component. Also accepts:
  * * {@link FlexItemSetProps}
@@ -30,7 +23,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.fontWeight, _system.spacingSet);
+const styleParser = compose(display, maxWidth, minWidth, width, flexItemSet, positionSet, fontWeight, spacingSet);
 
 /**
  * Variants for the {@link Link} component:
@@ -48,14 +41,14 @@ const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _syste
  * Light gray text.
  */
 
-const LinkVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
+const LinkVariant = createEnum('default', 'dark', 'light');
 
 /** @internal */
 function useLinkVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LinkVariant.default;
   const {
     linkVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return linkVariants[variant];
 }
 
@@ -115,7 +108,7 @@ function _getSanitizedHref(href) {
  */
 const Link = (props, ref) => {
   const {
-    size = _text.TextSize.default,
+    size = TextSize.default,
     variant = LinkVariant.default,
     underline = false,
     icon,
@@ -145,12 +138,12 @@ const Link = (props, ref) => {
     'aria-live': ariaLive,
     ...styleProps
   } = props;
-  const classNameForTextStyle = (0, _text.useTextStyle)(size);
+  const classNameForTextStyle = useTextStyle(size);
   const classNameForLinkVariant = useLinkVariant(variant);
-  const classNameForUnderline = (0, _use_styled_system.default)({
+  const classNameForUnderline = useStyledSystem({
     textDecoration: underline ? 'underline' : 'none'
   });
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     display: 'inline-flex',
     // Use a negative margin to undo the padding.
     padding: '0 0.1em',
@@ -174,7 +167,7 @@ const Link = (props, ref) => {
     onMouseLeave: onMouseLeave,
     onClick: onClick,
     tabIndex: tabIndex,
-    className: (0, _emotion.cx)(classNameForTextStyle, classNameForLinkVariant, classNameForUnderline, classNameForStyleProps, className),
+    className: cx(classNameForTextStyle, classNameForLinkVariant, classNameForUnderline, classNameForStyleProps, className),
     style: style,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -184,7 +177,7 @@ const Link = (props, ref) => {
     "aria-haspopup": ariaHasPopup,
     "aria-hidden": ariaHidden,
     "aria-live": ariaLive
-  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(_icon.default, {
+  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
     size: "1em",
     flex: "none",
@@ -193,4 +186,4 @@ const Link = (props, ref) => {
 };
 const ForwardedRefLink = /*#__PURE__*/React.forwardRef(Link);
 ForwardedRefLink.displayName = 'Link';
-var _default = exports.default = ForwardedRefLink;
+export default ForwardedRefLink;

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

@@ -0,0 +1,52 @@
+/** @module @airtable/blocks/ui: Loader */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import LoaderCore from '../../shared/ui/loader';
+import { baymax } from './baymax_utils';
+import useStyledSystem from './use_styled_system';
+import { flexItemSet, positionSet, margin } from './system';
+
+/**
+ * Style props for the {@link Loader} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link PositionSetProps}
+ */
+
+const styleParser = compose(flexItemSet, positionSet, margin);
+
+/**
+ * Props for the {@link Loader} component. Also accepts:
+ * * {@link LoaderStyleProps}
+ *
+ * @docsPath UI/components/Loader
+ * @noInheritDoc
+ */
+
+// Override the default props and then just proxy through to our loader.
+/**
+ * A loading spinner component.
+ *
+ * [[ Story id="loader--example" title="Loader example" ]]
+ *
+ * @docsPath UI/components/Loader
+ * @component
+ */
+const Loader = _ref => {
+  let {
+    fillColor = '#888',
+    scale = 0.3,
+    className,
+    style,
+    ...styleProps
+  } = _ref;
+  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
+  return /*#__PURE__*/React.createElement(LoaderCore, {
+    fillColor: fillColor,
+    scale: scale,
+    className: cx(baymax('animate-spin-scale animate-infinite'), classNameForStyleProps, className),
+    style: style
+  });
+};
+export default Loader;

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

@@ -1,21 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Modal = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _core = require("@styled-system/core");
-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 _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 */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { compose } from '@styled-system/core';
+import { invariant } from '../../shared/error_utils';
+import { baymax } from './baymax_utils';
+import withStyledSystem from './with_styled_system';
+import { dimensionsSet, display, flexContainerSet, spacingSet } from './system';
 
 /**
  * Props for the {@link Modal} component. Also accepts:
@@ -36,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.display, _system.flexContainerSet, _system.spacingSet);
+const styleParser = compose(dimensionsSet, display, flexContainerSet, spacingSet);
 
 /**
  * Generic modal component with minimal styling.
@@ -44,7 +35,7 @@ const styleParser = (0, _core.compose)(_system.dimensionsSet, _system.display, _
  * @hidden
  */
 // TODO (stephen): refactor so Modal only includes the background element and renders the dialog via children
-class Modal extends React.Component {
+export class Modal extends React.Component {
   /** @internal */
 
   /** @internal */
@@ -72,7 +63,7 @@ class Modal extends React.Component {
     // 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');
+    invariant(document.body, 'no document body');
     document.body.appendChild(container);
 
     // If the frame is focused, move focus to the modal's container.
@@ -86,7 +77,7 @@ class Modal extends React.Component {
   }
   /** @hidden */
   componentWillUnmount() {
-    (0, _error_utils.invariant)(document.body, 'no document body');
+    invariant(document.body, 'no document body');
     document.body.removeChild(this._container);
     if (this._originalActiveElement !== null) {
       this._originalActiveElement.focus();
@@ -118,22 +109,21 @@ class Modal extends React.Component {
       backgroundStyle,
       children
     } = this.props;
-    return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/ReactDOM.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),
+      className: cx(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),
+      className: cx(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,
+export default withStyledSystem(Modal, styleParser,
 // TODO (stephen): move these to Dialog
 {
   display: 'block',

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

@@ -0,0 +1,50 @@
+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); }
+/** @hidden */ /** */
+import * as React from 'react';
+import { invariant } from '../../shared/error_utils';
+import useWatchable from '../../shared/ui/use_watchable';
+import Select from './select';
+
+// Private component used by TablePicker, ViewPicker, FieldPicker.
+
+function ModelPickerSelect(props, ref) {
+  const {
+    models,
+    modelKeysToWatch,
+    selectedModelId,
+    shouldAllowPickingNone,
+    shouldAllowPickingModelFn,
+    placeholder,
+    // Destructure `onChange` to prevent it from being passed to `Select`.
+    onChange,
+    ...restOfProps
+  } = props;
+
+  // useWatchable has stricter typing than createDataContainer which it replaced, so we can't
+  // know that model and modelKeysToWatch are exactly compatible here:
+  useWatchable(models, modelKeysToWatch);
+  function _onChange(value) {
+    invariant(value === null || typeof value === 'string', 'value must be null or model id');
+    onChange(value);
+  }
+  const options = [{
+    value: null,
+    label: placeholder,
+    disabled: !shouldAllowPickingNone
+  }, ...models.map(model => {
+    return {
+      value: model.id,
+      label: model.name,
+      disabled: shouldAllowPickingModelFn && !shouldAllowPickingModelFn(model)
+    };
+  })];
+  return /*#__PURE__*/React.createElement(Select, _extends({}, restOfProps, {
+    ref: ref,
+    value: selectedModelId,
+    onChange: _onChange,
+    options: options
+  }));
+}
+const ForwardedRefModelPickerSelect = /*#__PURE__*/React.forwardRef(ModelPickerSelect);
+ForwardedRefModelPickerSelect.displayName = 'ModelPickerSelect';
+export default ForwardedRefModelPickerSelect;