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

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

@@ -1,16 +1,9 @@
-"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: Box */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import useStyledSystem from './use_styled_system';
 
-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"));
-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: Box */ /** */
 /**
  * Props for the Box component. Also accepts:
  * * {@link AllStylesProps}
@@ -56,11 +49,11 @@ const Box = (props, ref) => {
     'aria-live': ariaLive,
     ...styleProps
   } = props;
-  const classNameForStyleProps = (0, _use_styled_system.default)(styleProps);
+  const classNameForStyleProps = useStyledSystem(styleProps);
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     id: id,
-    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    className: cx(classNameForStyleProps, className),
     style: style,
     tabIndex: tabIndex,
     role: role
@@ -81,4 +74,4 @@ const Box = (props, ref) => {
 };
 const ForwardedRefBox = /*#__PURE__*/React.forwardRef(Box);
 ForwardedRefBox.displayName = 'Box';
-var _default = exports.default = ForwardedRefBox;
+export default ForwardedRefBox;

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

@@ -1,24 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _system = require("./system");
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _control_sizes = require("./control_sizes");
-var _icon = _interopRequireDefault(require("./icon"));
-var _css_helpers = _interopRequireDefault(require("./css_helpers"));
-var _box = _interopRequireDefault(require("./box"));
-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: Button */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, margin, display } from './system';
+import useTheme from './theme/use_theme';
+import { ControlSize, useButtonSize } from './control_sizes';
+import Icon from './icon';
+import cssHelpers from './css_helpers';
+import Box from './box';
 
 /**
  * Style props for the {@link Button} component. Also accepts:
@@ -32,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(display, maxWidth, minWidth, width, flexItemSet, positionSet, margin);
 
 /**
  * Variants for the {@link Button} component:
@@ -54,14 +45,14 @@ const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _syste
  * Red button that replaces primary buttons for dangerous or otherwise difficult-to-reverse actions like record deletion.
  */
 
-const ButtonVariant = (0, _private_utils.createEnum)('default', 'primary', 'secondary', 'danger');
+const ButtonVariant = createEnum('default', 'primary', 'secondary', 'danger');
 
 /** @internal */
 function useButtonVariant() {
   let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ButtonVariant.default;
   const {
     buttonVariants
-  } = (0, _use_theme.default)();
+  } = useTheme();
   return buttonVariants[variant];
 }
 
@@ -84,7 +75,7 @@ function useButtonVariant() {
  */
 const Button = (props, ref) => {
   const {
-    size = _control_sizes.ControlSize.default,
+    size = ControlSize.default,
     variant = ButtonVariant.default,
     icon,
     id,
@@ -106,9 +97,9 @@ const Button = (props, ref) => {
     'aria-selected': ariaSelected,
     ...styleProps
   } = props;
-  const classNameForButtonSize = (0, _control_sizes.useButtonSize)(size);
+  const classNameForButtonSize = useButtonSize(size);
   const classNameForButtonVariant = useButtonVariant(variant);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     display: 'inline-flex',
     ...styleProps
   }, styleParser);
@@ -121,7 +112,7 @@ const Button = (props, ref) => {
   return /*#__PURE__*/React.createElement("button", {
     ref: ref,
     id: id,
-    className: (0, _emotion.cx)(classNameForButtonVariant, classNameForButtonSize, classNameForStyleProps, className),
+    className: cx(classNameForButtonVariant, classNameForButtonSize, classNameForStyleProps, className),
     style: style
     // TODO (stephen): remove tooltip anchor props
     ,
@@ -133,20 +124,20 @@ const Button = (props, ref) => {
     tabIndex: tabIndex,
     "aria-label": ariaLabel,
     "aria-selected": ariaSelected
-  }, typeof icon === 'string' ? /*#__PURE__*/React.createElement(_icon.default, {
+  }, typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
     size: "1em",
     fillColor: "currentColor",
     flex: "none"
-  }) : icon, hasChildren && /*#__PURE__*/React.createElement(_box.default, {
+  }) : icon, hasChildren && /*#__PURE__*/React.createElement(Box, {
     as: "span"
     // The margin is on the span, and not on the icon because it would mean that when using a custom icon
     // the consumer would manually need to figure out what the margin is supposed to be.
     ,
     marginLeft: hasIcon ? '0.5em' : undefined,
-    className: _css_helpers.default.TRUNCATE
+    className: cssHelpers.TRUNCATE
   }, children));
 };
 const ForwardedRefButton = /*#__PURE__*/React.forwardRef(Button);
 ForwardedRefButton.displayName = 'Button';
-var _default = exports.default = ForwardedRefButton;
+export default ForwardedRefButton;

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

@@ -1,24 +1,17 @@
-"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: CellRenderer */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { spawnError } from '../../shared/error_utils';
+import { FieldType } from '../../shared/types/field_core';
+import withHooks from '../../shared/ui/with_hooks';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import { display, maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
+import useStyledSystem from './use_styled_system';
+import { splitStyleProps } from './with_styled_system';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CellRenderer = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _error_utils = require("../../shared/error_utils");
-var _field_core = require("../../shared/types/field_core");
-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 _system = require("./system");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _with_styled_system = require("./with_styled_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: CellRenderer */ /** */
 /**
  * Style props for the {@link CellRenderer} component. Also accepts:
  * * {@link FlexItemSetProps}
@@ -31,7 +24,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.display, _system.flexItemSet, _system.margin, _system.maxWidth, _system.minWidth, _system.positionSet, _system.width);
+const styleParser = compose(display, flexItemSet, margin, maxWidth, minWidth, positionSet, width);
 
 /**
  * Props for the {@link CellRenderer} component. Also accepts:
@@ -49,7 +42,7 @@ const styleParser = (0, _core.compose)(_system.display, _system.flexItemSet, _sy
  * @component
  * @docsPath UI/components/CellRenderer
  */
-class CellRenderer extends React.Component {
+export class CellRenderer extends React.Component {
   /** @hidden */
   static defaultProps = {
     shouldWrap: true
@@ -67,7 +60,7 @@ class CellRenderer extends React.Component {
   /** @internal */
   _validateProps(props) {
     if (props.record && !props.record.isDeleted && !props.field.isDeleted && props.record.parentTable.id !== props.field.parentTable.id) {
-      throw (0, _error_utils.spawnError)('CellRenderer: record %s and field %s do not have the same parent table', props.record.parentTable.id, props.field.parentTable.id);
+      throw spawnError('CellRenderer: record %s and field %s do not have the same parent table', props.record.parentTable.id, props.field.parentTable.id);
     }
   }
   /** @hidden */
@@ -126,7 +119,7 @@ class CellRenderer extends React.Component {
               style: style
             }, renderInvalidCellValue(cellValue, field));
           } else {
-            throw (0, _error_utils.spawnError)('Cannot render invalid cell value %s: %s', cellValue, validationResult.reason);
+            throw spawnError('Cannot render invalid cell value %s: %s', cellValue, validationResult.reason);
           }
         }
       }
@@ -137,7 +130,7 @@ class CellRenderer extends React.Component {
     // make it work with the cell renderer, we need to format it back the other way.
     // Note: we can't use _getRawCellValue here since we also need to handle formatting
     // these in the case where the user passed cellValue instead of a record.
-    if (cellValueToRender && field.type === _field_core.FieldType.MULTIPLE_LOOKUP_VALUES && !airtableInterface.sdkInitData.isUsingNewLookupCellValueFormat) {
+    if (cellValueToRender && field.type === FieldType.MULTIPLE_LOOKUP_VALUES && !airtableInterface.sdkInitData.isUsingNewLookupCellValueFormat) {
       const originalCellValue = cellValueToRender;
       const linkedRecordIdsSet = new Set();
       const valuesByLinkedRecordId = {};
@@ -165,10 +158,10 @@ class CellRenderer extends React.Component {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onClick: onClick,
-      className: (0, _emotion.cx)('baymax', className),
+      className: cx('baymax', className),
       style: style
     }, /*#__PURE__*/React.createElement("div", _extends({}, attributes, {
-      className: (0, _emotion.cx)('cell read', cellClassName),
+      className: cx('cell read', cellClassName),
       style: cellStyle,
       dangerouslySetInnerHTML: {
         __html: cellValueHtml
@@ -176,23 +169,22 @@ class CellRenderer extends React.Component {
     })));
   }
 }
-exports.CellRenderer = CellRenderer;
-var _default = exports.default = (0, _with_hooks.default)(CellRenderer, props => {
+export default withHooks(CellRenderer, props => {
   const {
     styleProps,
     nonStyleProps
-  } = (0, _with_styled_system.splitStyleProps)(props, styleParser.propNames, {
+  } = splitStyleProps(props, styleParser.propNames, {
     display: 'block'
   });
   const {
     className
   } = nonStyleProps;
-  const classNameForStyleProps = (0, _use_styled_system.default)(styleProps, styleParser);
-  const sdk = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(props.record, [`cellValueInField:${props.field.id}`]);
-  (0, _use_watchable.default)(props.field, ['type', 'options']);
+  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
+  const sdk = useSdk();
+  useWatchable(props.record, [`cellValueInField:${props.field.id}`]);
+  useWatchable(props.field, ['type', 'options']);
   return {
-    className: (0, _emotion.cx)(classNameForStyleProps, className),
+    className: cx(classNameForStyleProps, className),
     sdk
   };
 });

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

@@ -0,0 +1,84 @@
+/** @module @airtable/blocks/ui: ChoiceToken */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { baymax } from './baymax_utils';
+import Box from './box';
+import Text from './text';
+import useStyledSystem from './use_styled_system';
+import useTextColorForBackgroundColor from './use_text_color_for_background_color';
+import { flexItemSet, positionSet, margin } from './system';
+
+/**
+ * Style props for the {@link ChoiceToken} component. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link PositionSetProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = compose(flexItemSet, positionSet, margin);
+const DEFAULT_CHOICE_COLOR = 'gray';
+
+/** An option from a select field. You should not create these objects from scratch, but should instead grab them from base data. */
+
+/**
+ * Props for the {@link ChoiceToken} component. Also accepts:
+ * * {@link ChoiceTokenStyleProps}
+ *
+ * @docsPath UI/components/ChoiceToken
+ * @noInheritDoc
+ */
+
+/**
+ * A component that shows a single choice in a small token, to be displayed inline or in a list of choices.
+ *
+ * [[ Story id="choicetoken--example" title="Choice token example" ]]
+ *
+ * @component
+ * @docsPath UI/components/ChoiceToken
+ */
+const ChoiceToken = props => {
+  const {
+    choice,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    // This hasOnClick prop is set by the Tooltip wrapper. Destructure it here just to get it out of `props`.
+    // See 7a80fefd0a0bc871c31e0c063662c6100b0ca77d
+    // TODO(stephen): clean this up.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    hasOnClick,
+    className,
+    style,
+    ...styleProps
+  } = props;
+  const classNameForStyleProps = useStyledSystem(styleProps, styleParser);
+  const color = choice.color || DEFAULT_CHOICE_COLOR;
+  const textColor = useTextColorForBackgroundColor(color);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: cx(className, classNameForStyleProps),
+    style: style,
+    display: "inline-block"
+  }, /*#__PURE__*/React.createElement(Box
+  // TODO (stephen): remove tooltip anchor props
+  , {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    className: baymax('print-color-exact align-top border-box'),
+    backgroundColor: color,
+    minWidth: "18px",
+    height: "18px",
+    borderRadius: "circle",
+    paddingX: 2
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: baymax('truncate'),
+    textColor: textColor,
+    fontSize: "13px",
+    fontWeight: "400",
+    lineHeight: 1.5
+  }, choice.name)));
+};
+export default ChoiceToken;

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

@@ -1,22 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _use_base = _interopRequireDefault(require("../../shared/ui/use_base"));
-var _box = _interopRequireDefault(require("./box"));
-var _text = _interopRequireDefault(require("./text"));
-var _baymax_utils = require("./baymax_utils");
-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: CollaboratorToken */ /** */
+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: CollaboratorToken */ /** */
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import useBase from '../../shared/ui/use_base';
+import Box from './box';
+import Text from './text';
+import { baymax } from './baymax_utils';
+import useStyledSystem from './use_styled_system';
+import { flexItemSet, positionSet, margin } from './system';
 const UNKNOWN_PROFILE_PIC_URL = 'https://static.airtable.com/images/userIcons/user_icon_unknown.png';
 
 /**
@@ -28,7 +20,7 @@ const UNKNOWN_PROFILE_PIC_URL = 'https://static.airtable.com/images/userIcons/us
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.flexItemSet, _system.positionSet, _system.margin);
+const styleParser = compose(flexItemSet, positionSet, margin);
 
 /**
  * Props for the {@link CollaboratorToken} component. Also accepts:
@@ -59,22 +51,22 @@ const StaticCollaboratorToken = props => {
     style,
     ...styleProps
   } = props;
-  const classNameForStyledProps = (0, _use_styled_system.default)(styleProps, styleParser);
+  const classNameForStyledProps = useStyledSystem(styleProps, styleParser);
   const userName = collaborator.name || collaborator.email || 'Unknown';
   const profilePicUrl = collaborator.profilePicUrl || UNKNOWN_PROFILE_PIC_URL;
-  return /*#__PURE__*/React.createElement(_box.default
+  return /*#__PURE__*/React.createElement(Box
   // TODO (stephen): remove tooltip anchor props
   , {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     onClick: onClick,
-    className: (0, _emotion.cx)((0, _baymax_utils.baymax)('truncate print-color-exact'), classNameForStyledProps, className),
+    className: cx(baymax('truncate print-color-exact'), classNameForStyledProps, className),
     style: style,
     alignItems: "center",
     display: "inline-flex",
     opacity: isActive ? 1 : 0.5
-  }, profilePicUrl && /*#__PURE__*/React.createElement(_box.default, {
-    className: (0, _baymax_utils.baymax)('background-cover background-center'),
+  }, profilePicUrl && /*#__PURE__*/React.createElement(Box, {
+    className: baymax('background-cover background-center'),
     style: {
       backgroundImage: `url("${profilePicUrl}")`
     },
@@ -85,8 +77,8 @@ const StaticCollaboratorToken = props => {
     zIndex: 1,
     flex: "none",
     backgroundColor: "grayLight2"
-  }), /*#__PURE__*/React.createElement(_text.default, {
-    className: (0, _baymax_utils.baymax)('truncate'),
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: baymax('truncate'),
     paddingRight: 2,
     paddingLeft: 3,
     textColor: "dark",
@@ -110,7 +102,7 @@ const StaticCollaboratorToken = props => {
  */
 const CollaboratorToken = props => {
   // Re-render when collaborator info updates. This is to ensure isActive is accurate.
-  const base = (0, _use_base.default)();
+  const base = useBase();
   const activeCollaborators = base.activeCollaborators;
   const isActive = activeCollaborators.some(activeCollaborator => {
     return activeCollaborator.id === props.collaborator.id;
@@ -120,4 +112,4 @@ const CollaboratorToken = props => {
   }));
 };
 CollaboratorToken.Static = StaticCollaboratorToken;
-var _default = exports.default = CollaboratorToken;
+export default CollaboratorToken;

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

@@ -1,25 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ColorPalette = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _core = require("@styled-system/core");
-var _error_utils = require("../../shared/error_utils");
-var _color_utils = _interopRequireDefault(require("../../shared/color_utils"));
-var _baymax_utils = require("./baymax_utils");
-var _box = _interopRequireDefault(require("./box"));
-var _icon = _interopRequireDefault(require("./icon"));
-var _create_detect_element_resize = _interopRequireDefault(require("./create_detect_element_resize"));
-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; }
 /** @module @airtable/blocks/ui: ColorPalette */ /** */
-
+import { cx } from 'emotion';
+import * as React from 'react';
+import { compose } from '@styled-system/core';
+import { invariant } from '../../shared/error_utils';
+import colorUtils from '../../shared/color_utils';
+import { baymax } from './baymax_utils';
+import Box from './box';
+import Icon from './icon';
+import createDetectElementResize from './create_detect_element_resize';
+import withStyledSystem from './with_styled_system';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, margin } from './system';
 const MIN_COLOR_SQUARE_SIZE = 16;
 const DEFAULT_COLOR_SQUARE_SIZE = 24;
 const MAX_COLOR_SQUARE_SIZE = 32;
@@ -39,7 +29,7 @@ const MAX_COLOR_SQUARE_SIZE = 32;
  * @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 ColorPalette} and {@link ColorPaletteSynced} components.
@@ -63,7 +53,7 @@ const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _syst
  * @component
  * @docsPath UI/components/ColorPalette
  */
-class ColorPalette extends React.Component {
+export class ColorPalette extends React.Component {
   /** @hidden */
   static defaultProps = {
     squareMargin: 4,
@@ -77,7 +67,7 @@ class ColorPalette extends React.Component {
   /** @hidden */
   constructor(props) {
     super(props);
-    this._detectElementResize = (0, _create_detect_element_resize.default)();
+    this._detectElementResize = createDetectElementResize();
     this._colorPaletteContainerRef = /*#__PURE__*/React.createRef();
     this._setColorSquareSize = this._setColorSquareSize.bind(this);
     this.state = {
@@ -109,8 +99,8 @@ class ColorPalette extends React.Component {
     const {
       squareMargin
     } = this.props;
-    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    (0, _error_utils.invariant)(this._colorPaletteContainerRef.current, 'No container to set color square size');
+    invariant(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    invariant(this._colorPaletteContainerRef.current, 'No container to set color square size');
 
     // Calculates the size of each square required to fit `numSquares` squares on one line.
     const calculateSquareSize = numSquares => {
@@ -154,8 +144,8 @@ class ColorPalette extends React.Component {
     const {
       squareSize
     } = this.state;
-    (0, _error_utils.invariant)(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
-    return /*#__PURE__*/React.createElement(_box.default
+    invariant(squareMargin !== null && squareMargin !== undefined, 'colorPalette.squareMargin must be a number');
+    return /*#__PURE__*/React.createElement(Box
     // TODO (stephen): remove tooltip anchor props
     , {
       onMouseEnter: onMouseEnter,
@@ -164,7 +154,7 @@ class ColorPalette extends React.Component {
       className: className,
       style: style,
       overflow: "hidden"
-    }, /*#__PURE__*/React.createElement(_box.default, {
+    }, /*#__PURE__*/React.createElement(Box, {
       ref: this._colorPaletteContainerRef,
       display: "flex",
       flexWrap: "wrap"
@@ -176,21 +166,20 @@ class ColorPalette extends React.Component {
       key: allowedColor,
       onClick: disabled ? undefined : () => this._onChange(allowedColor),
       style: {
-        backgroundColor: _color_utils.default.getHexForColor(allowedColor) || undefined,
+        backgroundColor: colorUtils.getHexForColor(allowedColor) || undefined,
         height: squareSize,
         width: squareSize,
         margin: squareMargin
       },
-      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('rounded flex items-center justify-center'), {
-        [(0, _baymax_utils.baymax)('pointer link-quiet')]: !disabled,
-        [(0, _baymax_utils.baymax)('quieter')]: !!disabled
+      className: cx(baymax('rounded flex items-center justify-center'), {
+        [baymax('pointer link-quiet')]: !disabled,
+        [baymax('quieter')]: !!disabled
       })
-    }, allowedColor === color && /*#__PURE__*/React.createElement(_icon.default, {
+    }, allowedColor === color && /*#__PURE__*/React.createElement(Icon, {
       name: "check",
       size: squareSize,
-      className: (0, _baymax_utils.baymax)(_color_utils.default.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
+      className: baymax(colorUtils.shouldUseLightTextOnColor(allowedColor) ? 'text-white' : 'text-dark')
     })))));
   }
 }
-exports.ColorPalette = ColorPalette;
-var _default = exports.default = (0, _with_styled_system.default)(ColorPalette, styleParser, {});
+export default withStyledSystem(ColorPalette, styleParser, {});

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

@@ -0,0 +1,62 @@
+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: ColorPalette */ /** */
+import * as React from 'react';
+import { spawnError } from '../../shared/error_utils';
+import Synced from './synced';
+import ColorPalette from './color_palette';
+
+/**
+ * Props for the {@link ColorPaletteSynced} component. Also accepts:
+ * * {@link ColorPaletteStyleProps}
+ *
+ * @docsPath UI/components/ColorPaletteSynced
+ * @groupPath UI/components/ColorPalette
+ */
+
+/**
+ * A wrapper around the {@link ColorPalette} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="colorpalette--synced-example" title="Synced color palette example" ]]
+ *
+ * @component
+ * @docsPath UI/components/ColorPaletteSynced
+ * @groupPath UI/components/ColorPalette
+ */
+class ColorPaletteSynced extends React.Component {
+  /** @hidden */
+  render() {
+    const {
+      globalConfigKey,
+      disabled,
+      onChange,
+      ...restOfProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Synced, {
+      globalConfigKey: globalConfigKey,
+      render: _ref => {
+        let {
+          value,
+          canSetValue,
+          setValue
+        } = _ref;
+        let currentColor;
+        if (typeof value === 'string' || value === null || value === undefined) {
+          currentColor = value;
+        } else {
+          spawnError('ColorPaletteSynced only works with a global config value that is a string, null, or undefined');
+        }
+        return /*#__PURE__*/React.createElement(ColorPalette, _extends({}, restOfProps, {
+          color: currentColor,
+          onChange: newValue => {
+            setValue(newValue);
+            if (onChange) {
+              onChange(newValue);
+            }
+          },
+          disabled: disabled || !canSetValue
+        }));
+      }
+    });
+  }
+}
+export default ColorPaletteSynced;