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

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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogCloseButton = DialogCloseButton;
+exports.default = void 0;
+var _emotion = require("emotion");
+var React = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _baymax_utils = require("./baymax_utils");
+var _with_styled_system = _interopRequireDefault(require("./with_styled_system"));
+var _system = require("./system");
+var _icon = _interopRequireDefault(require("./icon"));
+var _dialog = require("./dialog");
+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: Dialog */ /** */
+
+/**
+ * Props for the {@link DialogCloseButton} component. Also accepts:
+ * * {@link DialogCloseButtonStyleProps}
+ *
+ * @noInheritDoc
+ */
+
+/**
+ * Style props for the {@link DialogCloseButton} component. Accepts:
+ * * {@link BorderRadiusProps}
+ * * {@link DimensionsSetProps}
+ * * {@link DisplayProps}
+ * * {@link FlexContainerSetProps}
+ * * {@link FlexItemSetProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.borderRadius, _system.dimensionsSet, _system.display, _system.flexContainerSet, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+
+/**
+ * A button that closes {@link Dialog}. Accessed via `Dialog.CloseButton`.
+ */
+// TODO (stephen): can we alias this as Dialog.CloseButton in typedoc?
+// TODO (stephen): convert into a prop in Dialog
+function DialogCloseButton(props) {
+  const {
+    onDialogClose
+  } = (0, _dialog.useDialogContext)();
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    className,
+    style,
+    tabIndex,
+    onClick,
+    children
+  } = props;
+  const _onClick = e => {
+    // onClick should only be defined in the case of a tooltip.
+    if (onClick) {
+      onClick(e);
+    }
+    onDialogClose?.();
+  };
+  const _onKeyDown = e => {
+    if (e.ctrlKey || e.altKey || e.metaKey) {
+      return;
+    }
+    if (['Enter', ' '].includes(e.key)) {
+      e.preventDefault();
+      onDialogClose?.();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // TODO (stephen): remove tooltip anchor props
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: _onClick,
+    onKeyDown: _onKeyDown,
+    className: (0, _emotion.cx)((0, _baymax_utils.baymax)('darken1-hover darken1-focus no-outline pointer'), className),
+    style: style,
+    tabIndex: tabIndex || 0,
+    role: "button",
+    "aria-label": "Close dialog"
+  }, children ? children : /*#__PURE__*/React.createElement(_icon.default, {
+    name: "x",
+    size: 12,
+    className: (0, _baymax_utils.baymax)('quieter')
+  }));
+}
+var _default = exports.default = (0, _with_styled_system.default)(DialogCloseButton, styleParser, {
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  marginTop: 2,
+  marginRight: 2,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  borderRadius: 'circle'
+});

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.array.map.js");
 /** @module @airtable/blocks/ui: expandRecord */ /** */
 
 /**
@@ -31,7 +30,7 @@ function expandRecord(record, opts) {
   // tableId and recordId are both valid, but the recordId does not
   // exist in the table.
 
-  var recordIds = null;
+  let recordIds = null;
   if (opts && opts.records) {
     recordIds = opts.records.map(r => r.id);
   }

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.array.map.js");
 var _error_utils = require("../../shared/error_utils");
 /** @module @airtable/blocks/ui: expandRecordList */ /** */
 
@@ -33,12 +32,12 @@ function expandRecordList(records, opts) {
   if (records.length === 0) {
     return;
   }
-  var tableId = records[0].parentTable.id;
-  var recordIds = records.map(record => {
+  const tableId = records[0].parentTable.id;
+  const recordIds = records.map(record => {
     (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
     return record.id;
   });
-  var fieldIds = opts && opts.fields ? opts.fields.map(field => {
+  const fieldIds = opts && opts.fields ? opts.fields.map(field => {
     (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
     return field.id;
   }) : null;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _error_utils = require("../../shared/error_utils");
+/** @module @airtable/blocks/ui: expandRecordPickerAsync */ /** */
+
+/**
+ * Options object for expanding a record picker.
+ */
+
+/**
+ * Expands a list of records in the Airtable UI, and prompts the user to pick
+ * one. The selected record is returned to the extension, and the modal is
+ * automatically closed.
+ *
+ * If the user dismisses the modal, or another one is opened before this one
+ * has been closed, it will return null.
+ *
+ * Returns a promise that resolves to the record chosen by the user, or null.
+ *
+ * @param records the records the user can pick from. Duplicate records will be removed.
+ * @param opts An optional options object.
+ * @example
+ * ```js
+ * import {expandRecordPickerAsync} from '@airtable/blocks/base/ui';
+ *
+ * async function pickRecordsAsync() {
+ *     const recordA = await expandRecordPickerAsync([record1, record2, record3]);
+ *     if (recordA !== null) {
+ *         alert(recordA.name);
+ *     } else {
+ *         alert('no record picked');
+ *     }
+ *
+ *     const recordB = await expandRecordPickerAsync([record1, record2], {
+ *         fields: [field1, field2],
+ *     });
+ * }
+ * ```
+ * @docsPath UI/utils/expandRecordPickerAsync
+ */
+async function expandRecordPickerAsync(records, opts) {
+  if (records.length === 0) {
+    return null;
+  }
+  const tableId = records[0].parentTable.id;
+  const sdk = records[0].parentTable.parentBase.__sdk;
+  const recordIds = records.map(record => {
+    (0, _error_utils.invariant)(record.parentTable.id === tableId, 'all records must belong to the same table');
+    return record.id;
+  });
+  const fieldIds = opts && opts.fields ? opts.fields.map(field => {
+    (0, _error_utils.invariant)(field.parentTable.id === tableId, 'all fields must belong to the same table');
+    return field.id;
+  }) : null;
+  const shouldAllowCreatingRecord = !!opts && !!opts.shouldAllowCreatingRecord;
+  const chosenRecordId = await sdk.__airtableInterface.expandRecordPickerAsync(tableId, recordIds, fieldIds, shouldAllowCreatingRecord);
+  if (!chosenRecordId) {
+    return null;
+  }
+  const table = sdk.base.getTableByIdIfExists(tableId);
+  if (!table) {
+    // table has probably been deleted
+    return null;
+  }
+  return sdk.base.__getRecordStore(table.id).getRecordByIdIfExists(chosenRecordId);
+}
+var _default = exports.default = expandRecordPickerAsync;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+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: FieldIcon */ /** */
+/**
+ * Props for the {@link FieldIcon} component. Also accepts:
+ * * {@link IconStyleProps}
+ *
+ * @docsPath UI/components/FieldIcon
+ */
+// TODO (stephen): inherit shared props without inheriting style props
+
+/**
+ * A vector icon for a field’s type.
+ *
+ * [[ Story id="fieldicon--example" title="FieldIcon example" ]]
+ *
+ * @docsPath UI/components/FieldIcon
+ * @component
+ */
+const FieldIcon = props => {
+  const {
+    field,
+    ...restOfProps
+  } = props;
+  const sdk = (0, _sdk_context.useSdk)();
+  const airtableInterface = sdk.__airtableInterface;
+  const appInterface = sdk.__appInterface;
+  const uiConfig = airtableInterface.fieldTypeProvider.getUiConfig(appInterface, field._data);
+  const name = uiConfig.iconName;
+  return /*#__PURE__*/React.createElement(_icon.default, _extends({
+    name: name
+  }, restOfProps));
+};
+var _default = exports.default = FieldIcon;

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

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _private_utils = require("../../shared/private_utils");
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _model_picker_select = _interopRequireDefault(require("./model_picker_select"));
+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: FieldPicker */ /** */
+/**
+ * Props shared between the {@link FieldPicker} and {@link FieldPickerSynced} components.
+ */
+
+/**
+ * Props for the {@link FieldPicker} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/FieldPicker
+ */
+
+/**
+ * Dropdown menu component for selecting fields.
+ *
+ * [[ Story id="modelpickers--fieldpicker-example" title="Field picker example" ]]
+ *
+ * @docsPath UI/components/FieldPicker
+ * @component
+ */
+const FieldPicker = (props, ref) => {
+  const {
+    table,
+    field: selectedField,
+    shouldAllowPickingNone,
+    allowedTypes,
+    placeholder,
+    // Destructure `onChange` to prevent it from being passed to `ModelPickerSelect`.
+    onChange,
+    ...restOfProps
+  } = props;
+  const sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  (0, _use_watchable.default)(table, ['fields']);
+  if (!table || table.isDeleted) {
+    return null;
+  }
+  function _onChange(fieldId) {
+    if (onChange) {
+      const field = table && !table.isDeleted && fieldId ? table.getFieldByIdIfExists(fieldId) : null;
+      onChange(field);
+    }
+  }
+  let placeholderToUse;
+  if (placeholder === undefined) {
+    // Let's set a good default value for the placeholder, depending
+    // on the shouldAllowPickingNone flag.
+    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a field...';
+  } else {
+    placeholderToUse = placeholder;
+  }
+  const allowedTypesSet = {};
+  if (allowedTypes) {
+    for (const allowedType of allowedTypes) {
+      allowedTypesSet[allowedType] = true;
+    }
+  }
+  const shouldAllowPickingFieldFn = field => {
+    return !allowedTypes || (0, _private_utils.has)(allowedTypesSet, field.type);
+  };
+
+  // Fields are only ordered within a view, and views' column orders aren't
+  // loaded by default. So we'll always list the primary field first, followed
+  // by the rest of the fields in alphabetical order.
+  const models = table.fields.filter(field => field !== table.primaryField).sort((a, b) => {
+    return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+  });
+  models.unshift(table.primaryField);
+  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+    ref: ref,
+    models: models
+    // `shouldAllowPickingModelFn` is typed as `AnyModel`. Cast to any since we only expect `Field`.
+    ,
+    shouldAllowPickingModelFn: shouldAllowPickingFieldFn,
+    selectedModelId: selectedField && !selectedField.isDeleted ? selectedField.id : null,
+    modelKeysToWatch: ['name', 'type', 'options'],
+    shouldAllowPickingNone: shouldAllowPickingNone,
+    placeholder: placeholderToUse,
+    onChange: _onChange
+  }));
+};
+const ForwardedRefFieldPicker = /*#__PURE__*/React.forwardRef(FieldPicker);
+ForwardedRefFieldPicker.displayName = 'FieldPicker';
+var _default = exports.default = ForwardedRefFieldPicker;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _field_picker = _interopRequireDefault(require("./field_picker"));
+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: FieldPicker */ /** */
+/**
+ * Props for the {@link FieldPickerSynced} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/FieldPickerSynced
+ * @groupPath UI/components/FieldPicker
+ */
+
+/**
+ * A wrapper around the {@link FieldPicker} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="modelpickers--fieldpickersynced-example" title="Synced field picker example" ]]
+ *
+ * @docsPath UI/components/FieldPickerSynced
+ * @groupPath UI/components/FieldPicker
+ * @component
+ */
+const FieldPickerSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    onChange,
+    disabled,
+    table,
+    ...restOfProps
+  } = props;
+  const [fieldId, setFieldId, canSetFieldId] = (0, _use_synced.default)(globalConfigKey);
+  const sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  (0, _use_watchable.default)(table, ['fields']);
+  function _getFieldFromGlobalConfigValue() {
+    if (!table || table.isDeleted) {
+      return null;
+    }
+    return typeof fieldId === 'string' && table ? table.getFieldByIdIfExists(fieldId) : null;
+  }
+  return /*#__PURE__*/React.createElement(_field_picker.default, _extends({}, restOfProps, {
+    ref: ref,
+    table: table,
+    field: _getFieldFromGlobalConfigValue(),
+    onChange: field => {
+      setFieldId(field ? field.id : null);
+      if (onChange) {
+        onChange(field);
+      }
+    },
+    disabled: disabled || !canSetFieldId
+  }));
+};
+const ForwardedRefFieldPickerSynced = /*#__PURE__*/React.forwardRef(FieldPickerSynced);
+ForwardedRefFieldPickerSynced.displayName = 'FieldPickerSynced';
+var _default = exports.default = ForwardedRefFieldPickerSynced;

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

@@ -0,0 +1,109 @@
+"use strict";
+
+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 _box = _interopRequireDefault(require("./box"));
+var _text = _interopRequireWildcard(require("./text"));
+var _label = _interopRequireDefault(require("./label"));
+var _use_form_field = require("./use_form_field");
+var _use_styled_system = _interopRequireDefault(require("./use_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; }
+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: FormField */ /** */
+/**
+ * Style props for the {@link FormField} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+
+/**
+ * Props for the {@link FormField} component. Also accepts:
+ * * {@link FormFieldStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/FormField
+ */
+
+/**
+ * A form field component that wraps any control field, supplying a provided label and optional
+ * description.
+ *
+ * [[ Story id="formfield--example" title="Form field example" ]]
+ *
+ * This component will automatically set up the `for` attribute on the outputted label with the `id` attribute
+ * on the wrapped control field for the following UI components: Label, Select, FieldPicker,
+ * ModelPicker, and ViewPicker. If you'd like to manually override this behavior, you can provide an
+ * `htmlFor` prop to this component and manually set the `id` attribute on your wrapped control to
+ * the same value.
+ *
+ * @docsPath UI/components/FormField
+ * @component
+ */
+const FormField = (props, ref) => {
+  const {
+    id,
+    className,
+    style,
+    label = _text.TextSize.default,
+    htmlFor,
+    description,
+    children,
+    ...styleProps
+  } = props;
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    width: '100%',
+    ...styleProps
+  }, styleParser);
+  const [generatedId] = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('form-field-'));
+  const controlId = htmlFor || generatedId;
+  const [generatedDescriptionId] = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('input-description-'));
+  const descriptionId = description ? generatedDescriptionId : '';
+  let optionalLabelProps;
+  if (description) {
+    optionalLabelProps = {
+      marginBottom: 1
+    };
+  }
+  return /*#__PURE__*/_react.default.createElement(_box.default, {
+    ref: ref,
+    id: id,
+    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    style: style,
+    display: "flex",
+    flexDirection: "column",
+    marginBottom: 3
+  }, /*#__PURE__*/_react.default.createElement(_label.default, _extends({
+    htmlFor: controlId,
+    size: "default"
+  }, optionalLabelProps), label), description && /*#__PURE__*/_react.default.createElement(_text.default, {
+    variant: "paragraph",
+    id: descriptionId,
+    size: "default",
+    textColor: "light",
+    marginBottom: "6px"
+  }, description), /*#__PURE__*/_react.default.createElement(_use_form_field.FormFieldContext.Provider, {
+    value: {
+      controlId,
+      descriptionId
+    }
+  }, children));
+};
+const ForwardedRefFormField = /*#__PURE__*/_react.default.forwardRef(FormField);
+ForwardedRefFormField.displayName = 'FormField';
+var _default = exports.default = ForwardedRefFormField;

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

@@ -1,27 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Point", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _point.default;
   }
 });
 Object.defineProperty(exports, "Rect", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _rect.default;
   }
 });
 Object.defineProperty(exports, "Size", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _size.default;
   }
 });
 var _rect = _interopRequireDefault(require("./rect"));
 var _size = _interopRequireDefault(require("./size"));
-var _point = _interopRequireDefault(require("./point"));
+var _point = _interopRequireDefault(require("./point"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/esm/base/ui/geometry/point.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/** @internal */
+class Point {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+exports.default = Point;

package/dist/esm/base/ui/geometry/rect.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _point = _interopRequireDefault(require("./point"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/** @internal */
+class Rect {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+  constructor(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  /** @internal */
+  growBy(amount) {
+    return new Rect(this.x - amount, this.y - amount, this.width + 2 * amount, this.height + 2 * amount);
+  }
+  /** @internal */
+  top() {
+    return this.y;
+  }
+  /** @internal */
+  left() {
+    return this.x;
+  }
+  /** @internal */
+  right() {
+    return this.x + this.width;
+  }
+  /** @internal */
+  bottom() {
+    return this.y + this.height;
+  }
+  /** @internal */
+  centerPoint() {
+    return new _point.default(this.x + this.width / 2, this.y + this.height / 2);
+  }
+}
+exports.default = Rect;

package/dist/esm/base/ui/geometry/size.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/** @internal */
+class Size {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+}
+exports.default = Size;