@airtable/blocks 1.18.1 → 1.19.0

package/dist/cjs/ui/switch.js

@@ -1,74 +1,69 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.filter");
-
-require("core-js/modules/es.array.includes");
-
-require("core-js/modules/es.object.get-own-property-descriptors");
-
-require("core-js/modules/web.dom-collections.for-each");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.sharedSwitchPropTypes = exports.switchStylePropTypes = void 0;
-
+exports.switchStylePropTypes = exports.sharedSwitchPropTypes = exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _emotion = require("emotion");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _core = require("@styled-system/core");
-
 var _private_utils = require("../private_utils");
-
 var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-
 var _system = require("./system");
-
 var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
-
 var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-
 var _control_sizes = require("./control_sizes");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _excluded = ["disabled", "id", "label", "tabIndex", "variant", "size", "value", "onClick", "onChange", "onMouseEnter", "onMouseLeave", "className", "style", "aria-label", "aria-describedby", "aria-labelledby"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui: Switch */ /** */
+/**
+ * Variants for the {@link Switch} component:
+ *
+ * • **default**
+ *
+ * Green switch for toggling a setting or other boolean property.
+ *
+ * • **danger**
+ *
+ * Red switch for toggling a dangerous or infrequently-used setting.
+ */
 
 var SwitchVariant = (0, _private_utils.createEnum)('default', 'danger');
 var switchVariantPropType = (0, _private_utils.createPropTypeFromEnum)(SwitchVariant);
-/** @internal */
 
+/** @internal */
 function useSwitchVariant() {
   var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SwitchVariant.default;
-
   var _useTheme = (0, _use_theme.default)(),
-      switchVariants = _useTheme.switchVariants;
-
+    switchVariants = _useTheme.switchVariants;
   return switchVariants[variant];
 }
+
 /**
  * Props shared between the {@link Switch} and {@link SwitchSynced} components.
  *
  * @noInheritDoc
  */
 
+/**
+ * Props for the {@link Switch} component. Also accepts:
+ * * {@link SwitchStyleProps}
+ *
+ * @docsPath UI/components/Switch
+ */
 
-var switchStylePropTypes = _objectSpread({}, _system.maxWidthPropTypes, {}, _system.minWidthPropTypes, {}, _system.widthPropTypes, {}, _system.flexItemSetPropTypes, {}, _system.positionSetPropTypes, {}, _system.spacingSetPropTypes, {}, _system.backgroundColorPropTypes, {}, _system.displayPropTypes);
-
-exports.switchStylePropTypes = switchStylePropTypes;
-
-var sharedSwitchPropTypes = _objectSpread({
+var switchStylePropTypes = exports.switchStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.spacingSetPropTypes), _system.backgroundColorPropTypes), _system.displayPropTypes);
+var sharedSwitchPropTypes = exports.sharedSwitchPropTypes = _objectSpread(_objectSpread({
   disabled: _propTypes.default.bool,
   id: _propTypes.default.string,
   label: _propTypes.default.node,
@@ -80,7 +75,8 @@ var sharedSwitchPropTypes = _objectSpread({
   'aria-label': _propTypes.default.string,
   'aria-labelledby': _propTypes.default.string,
   'aria-describedby': _propTypes.default.string
-}, _tooltip_anchor_props.tooltipAnchorPropTypes, {}, switchStylePropTypes);
+}, _tooltip_anchor_props.tooltipAnchorPropTypes), switchStylePropTypes);
+
 /**
  * Style props for the {@link Switch} component. Also accepts:
  * * {@link BackgroundColorProps}
@@ -94,9 +90,8 @@ var sharedSwitchPropTypes = _objectSpread({
  * @noInheritDoc
  */
 
-
-exports.sharedSwitchPropTypes = sharedSwitchPropTypes;
 var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet, _system.display, _system.backgroundColor);
+
 /**
  * A toggle switch for controlling boolean values. Similar to a checkbox.
  *
@@ -110,75 +105,65 @@ var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system
  * @docsPath UI/components/Switch
  * @component
  */
-
 var Switch = (props, ref) => {
   var disabled = props.disabled,
-      id = props.id,
-      label = props.label,
-      _props$tabIndex = props.tabIndex,
-      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? SwitchVariant.default : _props$variant,
-      _props$size = props.size,
-      size = _props$size === void 0 ? _control_sizes.ControlSize.default : _props$size,
-      value = props.value,
-      onClick = props.onClick,
-      onChange = props.onChange,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave,
-      className = props.className,
-      style = props.style,
-      ariaLabel = props['aria-label'],
-      ariaDescribedBy = props['aria-describedby'],
-      ariaLabelledBy = props['aria-labelledby'],
-      styleProps = (0, _objectWithoutProperties2.default)(props, ["disabled", "id", "label", "tabIndex", "variant", "size", "value", "onClick", "onChange", "onMouseEnter", "onMouseLeave", "className", "style", "aria-label", "aria-describedby", "aria-labelledby"]);
+    id = props.id,
+    label = props.label,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? SwitchVariant.default : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? _control_sizes.ControlSize.default : _props$size,
+    value = props.value,
+    onClick = props.onClick,
+    onChange = props.onChange,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    className = props.className,
+    style = props.style,
+    ariaLabel = props['aria-label'],
+    ariaDescribedBy = props['aria-describedby'],
+    ariaLabelledBy = props['aria-labelledby'],
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
     display: 'flex',
     width: '100%'
   }, styleProps), styleParser);
-
   var _useSwitchVariant = useSwitchVariant(variant),
-      classNameForVariant = _useSwitchVariant.baseClassName,
-      switchContainerClassName = _useSwitchVariant.switchContainerClassName,
-      switchClassName = _useSwitchVariant.switchClassName,
-      switchLabelClassName = _useSwitchVariant.switchLabelClassName;
-
+    classNameForVariant = _useSwitchVariant.baseClassName,
+    switchContainerClassName = _useSwitchVariant.switchContainerClassName,
+    switchClassName = _useSwitchVariant.switchClassName,
+    switchLabelClassName = _useSwitchVariant.switchLabelClassName;
   var classNameForSize = (0, _control_sizes.useSwitchSize)(size);
-
   if (!label && !ariaLabelledBy && !ariaLabel) {
     // eslint-disable-next-line no-console
     console.warn('<Switch> should be labeled using either the `label`, `ariaLabel`, or `ariaLabelledBy` prop');
   }
-
   function _onClick(e) {
     // onClick should only be defined in the case of a tooltip
     if (onClick) {
       onClick(e);
     }
-
     _toggleValue();
   }
-
   function _onKeyDown(e) {
     if (e.ctrlKey || e.altKey || e.metaKey) {
       return;
     }
-
     if (['Enter', ' '].includes(e.key)) {
       e.preventDefault();
-
       _toggleValue();
     }
   }
-
   function _toggleValue() {
     if (onChange) {
       onChange(!value);
     }
   }
-
-  return _react.default.createElement("div", {
-    ref: ref // TODO (stephen): remove tooltip anchor props
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+    // TODO (stephen): remove tooltip anchor props
     ,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
@@ -194,20 +179,17 @@ var Switch = (props, ref) => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: switchContainerClassName
-  }, _react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: switchClassName
-  })), label && _react.default.createElement("label", {
+  })), label && /*#__PURE__*/_react.default.createElement("label", {
     className: switchLabelClassName
   }, label));
 };
-
-var ForwardedRefSwitch = _react.default.forwardRef(Switch);
-
+var ForwardedRefSwitch = /*#__PURE__*/_react.default.forwardRef(Switch);
 ForwardedRefSwitch.propTypes = _objectSpread({
   value: _propTypes.default.bool.isRequired
 }, sharedSwitchPropTypes);
 ForwardedRefSwitch.displayName = 'Switch';
-var _default = ForwardedRefSwitch;
-exports.default = _default;
+var _default = exports.default = ForwardedRefSwitch;

package/dist/cjs/ui/switch_synced.js

@@ -1,41 +1,40 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.filter");
-
-require("core-js/modules/es.object.get-own-property-descriptors");
-
-require("core-js/modules/web.dom-collections.for-each");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _switch = _interopRequireWildcard(require("./switch"));
-
 var _use_synced = _interopRequireDefault(require("./use_synced"));
-
 var _global_config_synced_component_helpers = _interopRequireDefault(require("./global_config_synced_component_helpers"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _excluded = ["disabled", "globalConfigKey", "onChange"];
+/** @module @airtable/blocks/ui: Switch */
+/** */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Props for the {@link SwitchSynced} component. Also accepts:
+ * * {@link SwitchStyleProps}
+ *
+ * @docsPath UI/components/SwitchSynced
+ * @groupPath UI/components/Switch
+ */
 
 /**
  * A toggleable switch for controlling boolean values, synced with {@link GlobalConfig}. Similar to a checkbox.
@@ -48,22 +47,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var SwitchSynced = (props, ref) => {
   var disabled = props.disabled,
-      globalConfigKey = props.globalConfigKey,
-      _onChange = props.onChange,
-      restOfProps = (0, _objectWithoutProperties2.default)(props, ["disabled", "globalConfigKey", "onChange"]);
-
+    globalConfigKey = props.globalConfigKey,
+    _onChange = props.onChange,
+    restOfProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useSynced = (0, _use_synced.default)(globalConfigKey),
-      _useSynced2 = (0, _slicedToArray2.default)(_useSynced, 3),
-      value = _useSynced2[0],
-      setValue = _useSynced2[1],
-      canSetValue = _useSynced2[2];
-
-  return React.createElement(_switch.default, (0, _extends2.default)({}, restOfProps, {
+    _useSynced2 = (0, _slicedToArray2.default)(_useSynced, 3),
+    value = _useSynced2[0],
+    setValue = _useSynced2[1],
+    canSetValue = _useSynced2[2];
+  return /*#__PURE__*/React.createElement(_switch.default, (0, _extends2.default)({}, restOfProps, {
     ref: ref,
     value: !!value,
     onChange: newValue => {
       setValue(newValue);
-
       if (_onChange) {
         _onChange(newValue);
       }
@@ -71,11 +67,9 @@ var SwitchSynced = (props, ref) => {
     disabled: disabled || !canSetValue
   }));
 };
-
-var ForwardedRefSwitchSynced = React.forwardRef(SwitchSynced);
+var ForwardedRefSwitchSynced = /*#__PURE__*/React.forwardRef(SwitchSynced);
 ForwardedRefSwitchSynced.propTypes = _objectSpread({
   globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType
 }, _switch.sharedSwitchPropTypes);
 ForwardedRefSwitchSynced.displayName = 'SwitchSynced';
-var _default = ForwardedRefSwitchSynced;
-exports.default = _default;
+var _default = exports.default = ForwardedRefSwitchSynced;

package/dist/cjs/ui/synced.js

@@ -1,69 +1,48 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Synced = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _global_config_synced_component_helpers = _interopRequireDefault(require("./global_config_synced_component_helpers"));
-
 var _with_hooks = _interopRequireDefault(require("./with_hooks"));
-
 var _sdk_context = require("./sdk_context");
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @hidden */ /** */
 /** @hidden */
-
-/** */
-
 /** @hidden */
-var Synced =
-/*#__PURE__*/
-function (_React$Component) {
-  (0, _inherits2.default)(Synced, _React$Component);
-
-  /** @hidden */
-
+var Synced = exports.Synced = /*#__PURE__*/function (_React$Component) {
   /** @hidden */
   function Synced(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, Synced);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Synced).call(this, props));
-    _this._setValue = _this._setValue.bind((0, _assertThisInitialized2.default)(_this));
+    _this = _callSuper(this, Synced, [props]);
+    _this._setValue = _this._setValue.bind(_this);
     return _this;
   }
   /** @internal */
-
-
-  (0, _createClass2.default)(Synced, [{
+  (0, _inherits2.default)(Synced, _React$Component);
+  return (0, _createClass2.default)(Synced, [{
     key: "_setValue",
     value: function _setValue(newValue) {
       this.props.sdk.globalConfig.setAsync(this.props.globalConfigKey, newValue);
     }
     /** @hidden */
-
   }, {
     key: "render",
     value: function render() {
@@ -77,21 +56,15 @@ function (_React$Component) {
       });
     }
   }]);
-  return Synced;
 }(React.Component);
-
-exports.Synced = Synced;
+/** @hidden */
 (0, _defineProperty2.default)(Synced, "propTypes", {
   globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType,
   render: _propTypes.default.func.isRequired
 });
-
-var _default = (0, _with_hooks.default)(Synced, props => {
+var _default = exports.default = (0, _with_hooks.default)(Synced, props => {
   _global_config_synced_component_helpers.default.useDefaultWatchesForSyncedComponent(props.globalConfigKey);
-
   return {
     sdk: (0, _sdk_context.useSdk)()
   };
-});
-
-exports.default = _default;
+});

package/dist/cjs/ui/system/all_styles_set.js

@@ -1,33 +1,100 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.filter");
-
-require("core-js/modules/es.object.get-own-property-descriptors");
-
-require("core-js/modules/web.dom-collections.for-each");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.allStylesPropTypes = exports.allStylesParser = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _core = require("@styled-system/core");
-
 var _index = require("./index");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @module @airtable/blocks/ui/system: All style props */ /** */
+/**
+ * In the Blocks SDK, UI components can be styled via a set of supported style props.
+ * These style props (e.g. `width`, `margin`, `backgroundColor`) take a subset of
+ * supported CSS properties and expose them as explicit React component props.
+ *
+ * Here is an example that uses the {@link Box} layout primitive:
+ *
+ * ```
+ * <Box
+ *     display="flex"
+ *     alignItems="center"
+ *     justifyContent="center"
+ *     width="200px"
+ *     height="200px"
+ * >
+ *     Hello world
+ * </Box>
+ * ```
+ *
+ * This is equivalent to the following:
+ *
+ * ```
+ * <div style={{
+ *     display: 'flex',
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *     width: '200px',
+ *     height: '200px',
+ * }}>
+ *     Hello world
+ * </div>
+ * ```
+ *
+ * Style props also provide access to Airtable's design tokens, including our color
+ * palette, typographic scale, and spacing scale. This allows developers to quickly
+ * build UIs that adhere to the Airtable design system. As an example, numbers passed
+ * to the `margin` or `padding` props are converted to our spacing scale, based on
+ * powers of two.
+ *
+ * ```
+ * <Box margin={0} /> // margin: 0;
+ * <Box margin={1} /> // margin: 4px;
+ * <Box margin={2} /> // margin: 8px;
+ * <Box margin={3} /> // margin: 16px;
+ *
+ * // Negative margins are also supported
+ * <Box margin={-1} /> // margin: -4px;
+ * <Box margin={-2} /> // margin: -8px;
+ * <Box margin={-3} /> // margin: -16px;
+ * ```
+ *
+ * To override this behavior and use a specific pixel value (or other units, like percentages
+ * or ems/rems), you may pass a string like `200px`. However, this is generally discouraged,
+ * as these values don't adhere to the same grid/vertical rhythm as the rest of our components.
+ *
+ * As another example, style props like `backgroundColor` and `textColor` accept
+ * {@link Colors|color names} that ensure visual consistency with the Airtable styleguide.
+ * Like the spacing scale, you can always opt out by passing in hex/rgb/hsl strings directly.
+ *
+ * ```
+ * <Box backgroundColor="blue" textColor="white" />
+ * ```
+ *
+ * Each component in our UI library exposes a particular subset of style props, documented as
+ * style prop interfaces. For more information, refer to the API reference for the specific
+ * component that you're trying to use.
+ *
+ * All supported style props:
+ * * {@link AppearanceSetProps|Appearance}
+ * * {@link DimensionsSetProps|Dimensions}
+ * * {@link FlexContainerSetProps|Flex container}
+ * * {@link FlexItemSetProps|Flex item}
+ * * {@link PositionSetProps|Position}
+ * * {@link SpacingSetProps|Spacing}
+ * * {@link TypographySetProps|Typography}
+ * * {@link DisplayProps|Display}
+ * * {@link OverflowProps|Overflow}
+ *
+ * @docsPath UI/Style System/All styles
+ */
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var allStylesParser = (0, _core.compose)(_index.appearanceSet, _index.dimensionsSet, _index.flexContainerSet, _index.flexItemSet, _index.positionSet, _index.spacingSet, _index.typographySet, _index.display, _index.overflow);
-exports.allStylesParser = allStylesParser;
-
-var allStylesPropTypes = _objectSpread({}, _index.appearanceSetPropTypes, {}, _index.dimensionsSetPropTypes, {}, _index.flexContainerSetPropTypes, {}, _index.flexItemSetPropTypes, {}, _index.positionSetPropTypes, {}, _index.spacingSetPropTypes, {}, _index.typographySetPropTypes, {}, _index.displayPropTypes, {}, _index.overflowPropTypes);
-
-exports.allStylesPropTypes = allStylesPropTypes;
+var allStylesParser = exports.allStylesParser = (0, _core.compose)(_index.appearanceSet, _index.dimensionsSet, _index.flexContainerSet, _index.flexItemSet, _index.positionSet, _index.spacingSet, _index.typographySet, _index.display, _index.overflow);
+var allStylesPropTypes = exports.allStylesPropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _index.appearanceSetPropTypes), _index.dimensionsSetPropTypes), _index.flexContainerSetPropTypes), _index.flexItemSetPropTypes), _index.positionSetPropTypes), _index.spacingSetPropTypes), _index.typographySetPropTypes), _index.displayPropTypes), _index.overflowPropTypes);