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

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

@@ -1,30 +1,22 @@
-"use strict";
+/** @module @airtable/blocks/ui: Popover */ /** */
+import { cx } from 'emotion';
+import { createRoot } from 'react-dom/client';
+import * as React from 'react';
+import { invariant } from '../../shared/error_utils';
+import { baymax } from './baymax_utils';
+import createDetectElementResize from './create_detect_element_resize';
+import * as Geometry from './geometry/geometry';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.PopoverPlacements = exports.FitInWindowModes = void 0;
-var _emotion = require("emotion");
-var _client = require("react-dom/client");
-var React = _interopRequireWildcard(require("react"));
-var _error_utils = require("../../shared/error_utils");
-var _baymax_utils = require("./baymax_utils");
-var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
-var Geometry = _interopRequireWildcard(require("./geometry/geometry"));
-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: Popover */
-/** */
 // NOTE(evanhahn) I wasn't figure out a better way to document these enums
 // with JSDoc. The @memberof directive doesn't seem to work when the token
 // contains a period (as Popover.placements does).
+
 /**
  * Dictates how a {@link Tooltip} component should be positioned relative
  * to the anchor element. Accessed via `Tooltip.placements`.
  */
 // TODO (stephen): convert to createEnum
-let PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (PopoverPlacements) {
+export let PopoverPlacements = /*#__PURE__*/function (PopoverPlacements) {
   PopoverPlacements["TOP"] = "top";
   PopoverPlacements["BOTTOM"] = "bottom";
   PopoverPlacements["CENTER"] = "center";
@@ -35,27 +27,32 @@ let PopoverPlacements = exports.PopoverPlacements = /*#__PURE__*/function (Popov
 /**
  * Any of the supported {@link PopoverPlacements} for horizontal positioning.
  */
+
 /**
  * Any of the supported {@link PopoverPlacements} for vertical positioning.
  */
+
 /**
  * Dictates how a {@link Popover} or {@link Tooltip} component should be kept within the viewport. Accessed via `Popover.fitInWindowModes` or `Tooltip.fitInWindowModes`.
  */
 // TODO (stephen): convert to createEnum
-let FitInWindowModes = exports.FitInWindowModes = /*#__PURE__*/function (FitInWindowModes) {
+export let FitInWindowModes = /*#__PURE__*/function (FitInWindowModes) {
   FitInWindowModes["NONE"] = "none";
   FitInWindowModes["FLIP"] = "flip";
   FitInWindowModes["NUDGE"] = "nudge";
   return FitInWindowModes;
 }({});
+
 /**
  * Any of the supported {@link FitInWindowModes}.
  */
+
 /**
  * Props for the {@link Popover} component.
  *
  * @hidden
  */
+
 /**
  * A popover component, which is used to "float" some content above some other content.
  *
@@ -138,11 +135,11 @@ class Popover extends React.Component {
     container.setAttribute('tabIndex', '0');
     container.style.zIndex = '99999';
     container.style.position = 'relative';
-    (0, _error_utils.invariant)(document.body, 'no document body');
+    invariant(document.body, 'no document body');
     document.body.appendChild(container);
-    this._reactRoot = (0, _client.createRoot)(container);
+    this._reactRoot = createRoot(container);
     window.addEventListener('scroll', this._refreshContainerAsync);
-    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._detectElementResize = createDetectElementResize();
     this._detectElementResize.addResizeListener(this._anchor, this._refreshContainerAsync);
   }
   /** @internal */
@@ -165,7 +162,7 @@ class Popover extends React.Component {
       return;
     }
     const anchor = this._anchor;
-    (0, _error_utils.invariant)(anchor instanceof Element, 'No anchor');
+    invariant(anchor instanceof Element, 'No anchor');
     const anchorBoundingClientRect = anchor.getBoundingClientRect();
     const anchorRect = new Geometry.Rect(anchorBoundingClientRect.left, anchorBoundingClientRect.top, anchorBoundingClientRect.width, anchorBoundingClientRect.height);
     const viewportRect = new Geometry.Rect(0, 0, window.innerWidth, window.innerHeight);
@@ -267,13 +264,13 @@ class Popover extends React.Component {
         left
       }
     });
-    const backgroundClassName = (0, _emotion.cx)((0, _baymax_utils.baymax)('fixed all-0'), this.props.backgroundClassName);
+    const backgroundClassName = cx(baymax('fixed all-0'), this.props.backgroundClassName);
     const backgroundStyle = this.props.backgroundStyle;
     return new Promise(resolve => {
       const container = this._container;
-      (0, _error_utils.invariant)(container, 'container must exist');
+      invariant(container, 'container must exist');
       const root = this._reactRoot;
-      (0, _error_utils.invariant)(root, 'root must exist');
+      invariant(root, 'root must exist');
       root.render( /*#__PURE__*/React.createElement("div", {
         ref: el => {
           this._background = el;
@@ -312,4 +309,4 @@ class Popover extends React.Component {
     }, this.props.children);
   }
 }
-var _default = exports.default = Popover;
+export default Popover;

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

@@ -0,0 +1,106 @@
+/** @module @airtable/blocks/ui: ProgressBar */ /** */
+import { cx, css } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { clamp } from '../../shared/private_utils';
+import colors from '../../shared/colors';
+import { baymax } from './baymax_utils';
+import useStyledSystem from './use_styled_system';
+import { backgroundColor, maxWidth, minWidth, width, height, flexItemSet, positionSet, margin, display } from './system';
+import Box from './box';
+import theme from './theme/default_theme';
+
+/**
+ * Style props for the {@link ProgressBar} component. Also accepts:
+ * * {@link BackgroundColorProps}
+ * * {@link FlexItemSetProps}
+ * * {@link HeightProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = compose(backgroundColor, maxWidth, minWidth, width, height, flexItemSet, positionSet, margin, display);
+
+/**
+ * Props for the {@link ProgressBar} component. Also accepts:
+ * * {@link ProgressBarStyleProps}
+ *
+ * @docsPath UI/components/ProgressBar
+ * @noInheritDoc
+ */
+
+// TODO (jay): We can't use Box yet, because `aria-valuenow` is not yet available on `AriaProps`.
+const progressBarClassName = css({
+  position: 'relative',
+  borderRadius: theme.radii.circle,
+  overflow: 'hidden'
+});
+
+/**
+ * A progress bar.
+ *
+ * @example
+ * ```js
+ * import {ProgressBar} from '@airtable/blocks/base/ui';
+ *
+ * function MyComponent() {
+ *     return (
+ *         <ProgressBar
+ *             progress={0.6}
+ *             barColor='#ff9900'
+ *         />
+ *     );
+ * }
+ * ```
+ * @docsPath UI/components/ProgressBar
+ * @component
+ */
+const ProgressBar = _ref => {
+  let {
+    barColor = colors.BLUE_BRIGHT,
+    progress,
+    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.
+    hasOnClick,
+    className,
+    style,
+    backgroundColor = colors.GRAY_LIGHT_1,
+    width = '100%',
+    height = 4,
+    ...props
+  } = _ref;
+  const styleProps = {
+    backgroundColor,
+    width,
+    height,
+    ...props
+  };
+  const clampedProgressValue = clamp(progress, 0, 1) * 100;
+  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
+  return /*#__PURE__*/React.createElement("div", {
+    role: "progressbar",
+    "aria-valuenow": clampedProgressValue
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    className: cx(progressBarClassName, classNameForStyleProps, className),
+    style: style
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: baymax('animate'),
+    width: `${clampedProgressValue}%`,
+    height: "100%",
+    backgroundColor: barColor
+  }));
+};
+export default ProgressBar;

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

@@ -1,33 +1,26 @@
-"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: RecordCard */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { isNullOrUndefinedOrEmpty, keyBy, uniqBy, has } from '../../shared/private_utils';
+import { invariant, spawnError } from '../../shared/error_utils';
+import { FieldType } from '../../shared/types/field_core';
+import Record from '../models/record';
+import useWatchable from '../../shared/ui/use_watchable';
+import withHooks from '../../shared/ui/with_hooks';
+import { useSdk } from '../../shared/ui/sdk_context';
+import colorUtils from '../../shared/color_utils';
+import { baymax } from './baymax_utils';
+import Box from './box';
+import { isCommandModifierKeyEvent } from './key_codes';
+import useStyledSystem from './use_styled_system';
+import { flexItemSet, positionSet, margin } from './system';
+import { splitStyleProps } from './with_styled_system';
+import useViewMetadata from './use_view_metadata';
+import CellRenderer from './cell_renderer';
+import expandRecord from './expand_record';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RecordCard = 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 _error_utils = require("../../shared/error_utils");
-var _field_core = require("../../shared/types/field_core");
-var _record = _interopRequireDefault(require("../models/record"));
-var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
-var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
-var _baymax_utils = require("./baymax_utils");
-var _box = _interopRequireDefault(require("./box"));
-var _key_codes = require("./key_codes");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _system = require("./system");
-var _with_styled_system = require("./with_styled_system");
-var _use_view_metadata = _interopRequireDefault(require("./use_view_metadata"));
-var _cell_renderer = _interopRequireDefault(require("./cell_renderer"));
-var _expand_record = _interopRequireDefault(require("./expand_record"));
-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: RecordCard */ /** */
 // Mirrored from client_server_shared_config_settings
 const FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
 
@@ -40,7 +33,7 @@ const FALLBACK_RECORD_NAME_FOR_DISPLAY = 'Unnamed record';
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(flexItemSet, positionSet, margin);
 const CARD_PADDING = 12;
 
 /** @hidden */
@@ -53,8 +46,8 @@ const CellValueAndFieldLabel = _ref => {
     width,
     renderInvalidCellValue
   } = _ref;
-  (0, _use_watchable.default)(field, ['name', 'type', 'options']);
-  return /*#__PURE__*/React.createElement(_box.default, {
+  useWatchable(field, ['name', 'type', 'options']);
+  return /*#__PURE__*/React.createElement(Box, {
     style: {
       verticalAlign: 'top'
     },
@@ -63,12 +56,12 @@ const CellValueAndFieldLabel = _ref => {
     margin: 0,
     paddingRight: 2,
     width: width
-  }, /*#__PURE__*/React.createElement(_box.default, {
-    className: (0, _baymax_utils.baymax)('caps truncate'),
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: baymax('caps truncate'),
     fontSize: "11px",
     lineHeight: "13px",
     textColor: "#898989"
-  }, field.name), /*#__PURE__*/React.createElement(_cell_renderer.default, {
+  }, field.name), /*#__PURE__*/React.createElement(CellRenderer, {
     record: record,
     cellValue: cellValue,
     field: field,
@@ -92,27 +85,27 @@ const CellValueAndFieldLabel = _ref => {
 
 // TODO(jb): move this stuff into the field model when we decide on an api for it.
 const FormulaicFieldTypes = {
-  [_field_core.FieldType.FORMULA]: true,
-  [_field_core.FieldType.ROLLUP]: true,
-  [_field_core.FieldType.MULTIPLE_LOOKUP_VALUES]: true
+  [FieldType.FORMULA]: true,
+  [FieldType.ROLLUP]: true,
+  [FieldType.MULTIPLE_LOOKUP_VALUES]: true
 };
 const isFieldFormulaic = field => {
-  return (0, _private_utils.has)(FormulaicFieldTypes, field.type);
+  return has(FormulaicFieldTypes, field.type);
 };
 const getFieldResultType = field => {
-  if (field.type === _field_core.FieldType.COUNT) {
-    return _field_core.FieldType.NUMBER;
+  if (field.type === FieldType.COUNT) {
+    return FieldType.NUMBER;
   }
   if (isFieldFormulaic(field)) {
-    (0, _error_utils.invariant)(field.options, 'options');
+    invariant(field.options, 'options');
     const result = field.options.result;
     if (typeof result === 'object' && result) {
       const resultType = result.type;
-      (0, _error_utils.invariant)(typeof resultType === 'string', 'resultType must be string');
+      invariant(typeof resultType === 'string', 'resultType must be string');
       return resultType;
     } else {
       // Formula is misconfigured.
-      return _field_core.FieldType.SINGLE_LINE_TEXT;
+      return FieldType.SINGLE_LINE_TEXT;
     }
   } else {
     return field.type;
@@ -157,7 +150,7 @@ const calculateAttachmentDimensionsAndMargin = (attachment, containerSize) => {
  * @docsPath UI/components/RecordCard
  * @component
  */
-class RecordCard extends React.Component {
+export class RecordCard extends React.Component {
   /** @hidden */
   static defaultProps = {
     width: 568,
@@ -184,27 +177,27 @@ class RecordCard extends React.Component {
       fields,
       attachmentCoverField
     } = props;
-    if (record && record instanceof _record.default && record.isDeleted) {
-      throw (0, _error_utils.spawnError)('Record %s is deleted', record.id);
+    if (record && record instanceof Record && record.isDeleted) {
+      throw spawnError('Record %s is deleted', record.id);
     }
     if (!record) {
-      throw (0, _error_utils.spawnError)('Must provide record');
+      throw spawnError('Must provide record');
     }
-    if (record && record instanceof _record.default && attachmentCoverField) {
+    if (record && record instanceof Record && attachmentCoverField) {
       if (attachmentCoverField.parentTable.id !== record.parentTable.id) {
-        throw (0, _error_utils.spawnError)('Attachment cover field %s must have the same parent table as record (record ID %s, table ID %s)', attachmentCoverField.id, record.id, record.parentTable.id);
+        throw spawnError('Attachment cover field %s must have the same parent table as record (record ID %s, table ID %s)', attachmentCoverField.id, record.id, record.parentTable.id);
       }
     }
-    if (record && record instanceof _record.default && fields) {
+    if (record && record instanceof Record && fields) {
       for (const field of fields) {
         if (!field.isDeleted && field.parentTable.id !== record.parentTable.id) {
-          throw (0, _error_utils.spawnError)('Field %s must have the same parent table as record (record ID %s, table ID %s)', field.id, record.id, record.parentTable.id);
+          throw spawnError('Field %s must have the same parent table as record (record ID %s, table ID %s)', field.id, record.id, record.parentTable.id);
         }
       }
     }
-    if (record && record instanceof _record.default && view && !view.isDeleted) {
+    if (record && record instanceof Record && view && !view.isDeleted) {
       if (view.parentTable.id !== record.parentTable.id) {
-        throw (0, _error_utils.spawnError)('View %s must have the same parent table as record (record ID %s, table ID %s)', view.id, record.id, record.parentTable.id);
+        throw spawnError('View %s must have the same parent table as record (record ID %s, table ID %s)', view.id, record.id, record.parentTable.id);
       }
     }
   }
@@ -224,14 +217,14 @@ class RecordCard extends React.Component {
       const {
         record
       } = this.props;
-      const recordModel = record && record instanceof _record.default ? record : null;
+      const recordModel = record && record instanceof Record ? record : null;
       if (recordModel) {
-        if ((0, _key_codes.isCommandModifierKeyEvent)(e) || e.shiftKey) {
+        if (isCommandModifierKeyEvent(e) || e.shiftKey) {
           // No-op, let the <a> tag handle opening in new tab or window.
         } else {
           e.preventDefault();
           const opts = this.props.expandRecordOptions || {};
-          (0, _expand_record.default)(recordModel, opts);
+          expandRecord(recordModel, opts);
         }
       }
     }
@@ -267,14 +260,14 @@ class RecordCard extends React.Component {
   }
   /** @internal */
   _isAttachment(field) {
-    return getFieldResultType(field) === _field_core.FieldType.MULTIPLE_ATTACHMENTS;
+    return getFieldResultType(field) === FieldType.MULTIPLE_ATTACHMENTS;
   }
   /** @internal */
   _getCellValue(field) {
     const {
       record
     } = this.props;
-    if (record && record instanceof _record.default) {
+    if (record && record instanceof Record) {
       return record.getCellValue(field.id);
     } else {
       const cellValue = record[field.id];
@@ -288,7 +281,7 @@ class RecordCard extends React.Component {
         const appInterface = this.props.sdk.__appInterface;
         const validationResult = airtableInterface.fieldTypeProvider.validateCellValueForUpdate(appInterface, cellValue, null, field._data);
         if (!validationResult.isValid) {
-          throw (0, _error_utils.spawnError)(validationResult.reason);
+          throw spawnError(validationResult.reason);
         }
       }
       return cellValue;
@@ -297,7 +290,7 @@ class RecordCard extends React.Component {
   /** @internal */
   _getFirstAttachmentInField(attachmentField) {
     let attachmentsInField;
-    if (attachmentField.type === _field_core.FieldType.MULTIPLE_LOOKUP_VALUES) {
+    if (attachmentField.type === FieldType.MULTIPLE_LOOKUP_VALUES) {
       const cellValue = this._getCellValue(attachmentField);
       attachmentsInField = cellValue ? cellValue.map(cv => cv.value) : [];
     } else {
@@ -317,14 +310,14 @@ class RecordCard extends React.Component {
       fieldsToUse = fields.filter(field => !field.isDeleted);
     } else if (viewMetadata && !viewMetadata.isDeleted) {
       fieldsToUse = viewMetadata.visibleFields;
-    } else if (record && record instanceof _record.default && !record.isDeleted) {
+    } else if (record && record instanceof Record && !record.isDeleted) {
       const parentTable = record.parentTable;
       fieldsToUse = parentTable.fields;
     } else {
       console.warn('RecordCard: no fields, view, or record, so rendering an empty card'); // eslint-disable-line no-console
       fieldsToUse = [];
     }
-    return (0, _private_utils.uniqBy)(fieldsToUse, field => field.id);
+    return uniqBy(fieldsToUse, field => field.id);
   }
   /** @internal */
   _getPossibleFieldsForCard() {
@@ -374,7 +367,7 @@ class RecordCard extends React.Component {
     const {
       record
     } = this.props;
-    if (record && record instanceof _record.default) {
+    if (record && record instanceof Record) {
       return record;
     } else {
       return null;
@@ -387,10 +380,10 @@ class RecordCard extends React.Component {
       width,
       renderInvalidCellValue
     } = this.props;
-    (0, _error_utils.invariant)(typeof width === 'number', 'width in defaultProps');
+    invariant(typeof width === 'number', 'width in defaultProps');
     const cellContainerWidth = width - CARD_PADDING - attachmentSize;
     const widthAndFieldIdArray = this._getWidthAndFieldIdArray(cellContainerWidth, fieldsToUse);
-    const fieldsById = (0, _private_utils.keyBy)(fieldsToUse, o => o.id);
+    const fieldsById = keyBy(fieldsToUse, o => o.id);
     return widthAndFieldIdArray.map(widthAndFieldId => {
       const field = fieldsById[widthAndFieldId.fieldId];
       return /*#__PURE__*/React.createElement(CellValueAndFieldLabel, _extends({
@@ -398,7 +391,7 @@ class RecordCard extends React.Component {
         field: field,
         width: widthAndFieldId.width,
         renderInvalidCellValue: renderInvalidCellValue
-      }, record instanceof _record.default ? {
+      }, record instanceof Record ? {
         record
       } : {
         cellValue: record[field.id]
@@ -418,7 +411,7 @@ class RecordCard extends React.Component {
       className,
       style
     } = this.props;
-    if (record && record instanceof _record.default && record.isDeleted) {
+    if (record && record instanceof Record && record.isDeleted) {
       return null;
     }
     const allFields = this._getFields();
@@ -426,20 +419,20 @@ class RecordCard extends React.Component {
     const attachmentObjIfAvailable = this._getAttachmentCover(fieldsToUse);
     const hasAttachment = !!attachmentObjIfAvailable;
     const hasOnClick = !!onClick || !!this._getRecord();
-    const containerClasses = (0, _emotion.cx)((0, _baymax_utils.baymax)('white rounded relative block overflow-hidden'), {
-      [(0, _baymax_utils.baymax)('pointer cardBoxShadow')]: hasOnClick,
-      [(0, _baymax_utils.baymax)('stroked1')]: !hasOnClick
+    const containerClasses = cx(baymax('white rounded relative block overflow-hidden'), {
+      [baymax('pointer cardBoxShadow')]: hasOnClick,
+      [baymax('stroked1')]: !hasOnClick
     }, className);
 
     // use height as size in order to get square attachment
-    (0, _error_utils.invariant)(typeof height === 'number', 'height in defaultProps');
+    invariant(typeof height === 'number', 'height in defaultProps');
     const attachmentSize = hasAttachment ? height : 0;
     let primaryValue;
     let isUnnamed;
     let recordName;
     let recordUrl;
     let recordColor;
-    if (record instanceof _record.default) {
+    if (record instanceof Record) {
       recordUrl = record.url;
       recordName = record.name;
       if (view) {
@@ -450,7 +443,7 @@ class RecordCard extends React.Component {
       const primaryCellValue = primaryField ? record[primaryField.id] : null;
       recordName = primaryCellValue === null || primaryCellValue === undefined ? null : String(primaryCellValue);
     }
-    if ((0, _private_utils.isNullOrUndefinedOrEmpty)(recordName)) {
+    if (isNullOrUndefinedOrEmpty(recordName)) {
       primaryValue = FALLBACK_RECORD_NAME_FOR_DISPLAY;
       isUnnamed = true;
     } else {
@@ -469,7 +462,7 @@ class RecordCard extends React.Component {
       onClick: this._onClick,
       onMouseEnter: onMouseEnter || undefined,
       onMouseLeave: onMouseLeave || undefined
-    }, /*#__PURE__*/React.createElement(_box.default, {
+    }, /*#__PURE__*/React.createElement(Box, {
       right: `${attachmentSize}px`,
       backgroundColor: "transparent",
       padding: `${CARD_PADDING}px`,
@@ -478,8 +471,8 @@ class RecordCard extends React.Component {
       bottom: 0,
       left: 0,
       textColor: "dark"
-    }, /*#__PURE__*/React.createElement(_box.default, {
-      className: (0, _emotion.cx)({
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: cx({
         unnamed: isUnnamed
       }),
       fontWeight: 500,
@@ -490,22 +483,22 @@ class RecordCard extends React.Component {
       lineHeight: 1.5,
       height: "18px",
       fontSize: "14px"
-    }, recordColor && /*#__PURE__*/React.createElement(_box.default, {
+    }, recordColor && /*#__PURE__*/React.createElement(Box, {
       width: "6px",
       height: "20px",
       flex: "none",
       marginRight: 1,
       borderRadius: "circle",
-      backgroundColor: _color_utils.default.getHexForColor(recordColor)
-    }), /*#__PURE__*/React.createElement(_box.default, {
-      className: (0, _baymax_utils.baymax)('truncate'),
+      backgroundColor: colorUtils.getHexForColor(recordColor)
+    }), /*#__PURE__*/React.createElement(Box, {
+      className: baymax('truncate'),
       flex: "auto"
-    }, primaryValue)), /*#__PURE__*/React.createElement(_box.default, {
+    }, primaryValue)), /*#__PURE__*/React.createElement(Box, {
       textColor: "#555555",
       position: "absolute",
       marginTop: "3px"
-    }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(_box.default, {
-      className: (0, _baymax_utils.baymax)('noevents'),
+    }, this._renderCellsAndFieldLabels(attachmentSize, fieldsToUse))), attachmentObjIfAvailable && attachmentObjIfAvailable.thumbnails && attachmentObjIfAvailable.thumbnails.large && /*#__PURE__*/React.createElement(Box, {
+      className: baymax('noevents'),
       style: {
         borderTopRightRadius: 2,
         borderBottomRightRadius: 2
@@ -527,20 +520,19 @@ class RecordCard extends React.Component {
     })));
   }
 }
-exports.RecordCard = RecordCard;
-var _default = exports.default = (0, _with_hooks.default)(RecordCard, props => {
+export default withHooks(RecordCard, props => {
   const {
     styleProps,
     nonStyleProps
-  } = (0, _with_styled_system.splitStyleProps)(props, styleParser.propNames);
+  } = splitStyleProps(props, styleParser.propNames);
   const {
     record,
     fields,
     view,
     className
   } = nonStyleProps;
-  const classNameForStyledProps = (0, _use_styled_system.default)(styleProps, styleParser);
-  const recordModel = record && record instanceof _record.default ? record : null;
+  const classNameForStyledProps = useStyledSystem(styleProps, styleParser);
+  const recordModel = record && record instanceof Record ? record : null;
   let parentTable = null;
   if (recordModel) {
     parentTable = recordModel.parentTable;
@@ -549,16 +541,16 @@ var _default = exports.default = (0, _with_hooks.default)(RecordCard, props => {
   } else if (view) {
     parentTable = view.parentTable;
   }
-  (0, _use_watchable.default)(recordModel, ['name', view ? `colorInView:${view.id}` : null]);
+  useWatchable(recordModel, ['name', view ? `colorInView:${view.id}` : null]);
   // It's safe to watch the record's parentTable since a record's parent table never changes.
-  (0, _use_watchable.default)(parentTable, ['fields']);
+  useWatchable(parentTable, ['fields']);
 
   // if a view is supplied, we need to load the field order to use it for rendering the card
-  const viewMetadata = (0, _use_view_metadata.default)(view);
-  const sdk = (0, _sdk_context.useSdk)();
+  const viewMetadata = useViewMetadata(view);
+  const sdk = useSdk();
   return {
     viewMetadata,
-    className: (0, _emotion.cx)(classNameForStyledProps, className),
+    className: cx(classNameForStyledProps, className),
     sdk
   };
 });