@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-e625869e5-20251002

package/dist/cjs/base/ui/select_buttons.js

@@ -1,159 +0,0 @@
-"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 _error_utils = require("../../shared/error_utils");
-var _private_utils = require("../../shared/private_utils");
-var _select_and_select_buttons_helpers = require("./select_and_select_buttons_helpers");
-var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
-var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
-var _css_helpers = _interopRequireDefault(require("./css_helpers"));
-var _system = require("./system");
-var _control_sizes = require("./control_sizes");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @module @airtable/blocks/ui: SelectButtons */ /** */
-
-/** @internal */
-
-const SelectButtonsVariant = (0, _private_utils.createEnum)('default');
-
-/** @internal */
-function useSelectButtonsVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectButtonsVariant.default;
-  const {
-    selectButtonsVariants
-  } = (0, _use_theme.default)();
-  return selectButtonsVariants[variant];
-}
-
-/**
- * Style props shared between the {@link SelectButtons} and {@link SelectButtonsSynced} components. Accepts:
- * * {@link FlexItemSetProps}
- * * {@link MarginProps}
- * * {@link MaxWidthProps}
- * * {@link MinWidthProps}
- * * {@link PositionSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
-
-/**
- * Props shared between the {@link SelectButtons} and {@link SelectButtonsSynced} components.
- *
- * @noInheritDoc
- */
-
-/**
- * Props for the {@link SelectButtons} component. Also accepts:
- * * {@link SelectButtonsStyleProps}
- *
- * @docsPath UI/components/SelectButtons
- */
-
-/**
- * A segmented control for selecting one value from a set of options.
- *
- * [[ Story id="selectbuttons--example" title="Select buttons example" ]]
- *
- * @docsPath UI/components/SelectButtons
- * @component
- */
-const SelectButtons = (props, ref) => {
-  const {
-    className,
-    style,
-    options,
-    disabled,
-    value,
-    size = _control_sizes.ControlSize.default,
-    onChange,
-    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,
-    'aria-describedby': ariaDescribedBy,
-    'aria-labelledby': ariaLabelledBy,
-    ...styleProps
-  } = props;
-  // There is only a single default variant.
-  const {
-    containerClassNameForVariant,
-    optionClassNameForVariant
-  } = useSelectButtonsVariant();
-  const containerClassNameForSize = (0, _control_sizes.useSelectButtonsSize)(size);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  const [generatedId] = (0, _react.useState)((0, _private_utils.getLocallyUniqueId)('sb-'));
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    // Check options here for a cleaner stack trace.
-    // Also, even though options are required, still check if it's set because
-    // the error is really ugly and covers up the prop type check.
-    const validationResult = (0, _select_and_select_buttons_helpers.validateOptions)(options);
-    if (!validationResult.isValid) {
-      throw (0, _error_utils.spawnError)('<SelectButtons> %s', validationResult.reason);
-    }
-  }, [options]);
-  function _onChange(newValue) {
-    if (onChange) {
-      if (newValue !== value) {
-        onChange(newValue);
-      }
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    // TODO (stephen): remove tooltip anchor props
-    ref: ref,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: onClick,
-    onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false),
-    className: (0, _emotion.cx)(containerClassNameForSize, containerClassNameForVariant, classNameForStyleProps, className),
-    style: style,
-    "data-disabled": disabled,
-    "data-focused": isFocused,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, options.map((option, index) => {
-    const isSelected = option.value === value;
-    const isOptionDisabled = disabled || option.disabled;
-    const radioId = `${generatedId}-${index}`;
-    const valueJson = (0, _select_and_select_buttons_helpers.optionValueToString)(option.value);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: `${valueJson}-${option.label}-${index}`,
-      className: optionClassNameForVariant
-    }, /*#__PURE__*/_react.default.createElement("input", {
-      type: "radio",
-      onChange: isOptionDisabled ? undefined : () => _onChange(option.value),
-      disabled: !!isOptionDisabled,
-      checked: isSelected,
-      className: _css_helpers.default.VISUALLY_HIDDEN,
-      id: radioId,
-      name: generatedId
-    }), /*#__PURE__*/_react.default.createElement("label", {
-      htmlFor: radioId
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _css_helpers.default.TRUNCATE
-    }, option.label)));
-  }));
-};
-const ForwardedRefSelectButtons = /*#__PURE__*/_react.default.forwardRef(SelectButtons);
-ForwardedRefSelectButtons.displayName = 'SelectButtons';
-var _default = exports.default = ForwardedRefSelectButtons;

package/dist/cjs/base/ui/select_buttons_synced.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _error_utils = require("../../shared/error_utils");
-var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
-var _select_buttons = _interopRequireDefault(require("./select_buttons"));
-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: SelectButtons */ /** */
-/**
- * Props for the {@link SelectButtonsSynced} component. Also accepts:
- * * {@link SelectButtonsStyleProps}
- *
- * @docsPath UI/components/SelectButtonsSynced
- * @groupPath UI/components/SelectButtons
- */
-
-/**
- *  A wrapper around the {@link SelectButtons} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="selectbuttons--synced-example" title="SelectButtonsSynced example" ]]
- *
- * @docsPath UI/components/SelectButtonsSynced
- * @groupPath UI/components/SelectButtons
- * @component
- */
-const SelectButtonsSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    onChange,
-    disabled,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = (0, _use_synced.default)(globalConfigKey);
-  let selectValue;
-  if (value === null || value === undefined) {
-    selectValue = null;
-  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-    selectValue = value;
-  } else {
-    throw (0, _error_utils.spawnError)('SelectButtonsSynced only works with a global config value that is a string, number, boolean, null or undefined.');
-  }
-  return /*#__PURE__*/React.createElement(_select_buttons.default, _extends({}, restOfProps, {
-    ref: ref,
-    value: selectValue,
-    onChange: newValue => {
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSelectButtonsSynced = /*#__PURE__*/React.forwardRef(SelectButtonsSynced);
-ForwardedRefSelectButtonsSynced.displayName = 'SelectButtonsSynced';
-var _default = exports.default = ForwardedRefSelectButtonsSynced;

package/dist/cjs/base/ui/select_synced.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _error_utils = require("../../shared/error_utils");
-var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
-var _select = _interopRequireDefault(require("./select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /** @module @airtable/blocks/ui: Select */ /** */
-/**
- * Props for the {@link SelectSynced} component. Also accepts:
- * * {@link SelectStyleProps}
- *
- * @docsPath UI/components/SelectSynced
- * @groupPath UI/components/Select
- */
-
-/**
- * A wrapper around the {@link Select} component that syncs with {@link GlobalConfig}.
- *
- * [[ Story id="select--synced-example" title="Synced select example" ]]
- *
- * @docsPath UI/components/SelectSynced
- * @groupPath UI/components/Select
- * @component
- */
-const SelectSynced = (props, ref) => {
-  const {
-    globalConfigKey,
-    disabled,
-    onChange,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = (0, _use_synced.default)(globalConfigKey);
-  let selectValue;
-  if (value === null || value === undefined) {
-    selectValue = null;
-  } else if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-    selectValue = value;
-  } else {
-    throw (0, _error_utils.spawnError)('SelectSynced only works with a global config value that is a string, number, boolean, null or undefined.');
-  }
-  return /*#__PURE__*/React.createElement(_select.default, _extends({}, restOfProps, {
-    ref: ref,
-    value: selectValue,
-    onChange: newValue => {
-      if (newValue === undefined) {
-        newValue = null;
-      }
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSelectSynced = /*#__PURE__*/React.forwardRef(SelectSynced);
-ForwardedRefSelectSynced.displayName = 'SelectSynced';
-var _default = exports.default = ForwardedRefSelectSynced;

package/dist/cjs/base/ui/switch.js

@@ -1,167 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _react = _interopRequireDefault(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");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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.
- */
-
-const SwitchVariant = (0, _private_utils.createEnum)('default', 'danger');
-
-/** @internal */
-function useSwitchVariant() {
-  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SwitchVariant.default;
-  const {
-    switchVariants
-  } = (0, _use_theme.default)();
-  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
- */
-
-/**
- * Style props for the {@link Switch} component. Also accepts:
- * * {@link BackgroundColorProps}
- * * {@link FlexItemSetProps}
- * * {@link MinWidthProps}
- * * {@link MaxWidthProps}
- * * {@link PositionSetProps}
- * * {@link SpacingSetProps}
- * * {@link WidthProps}
- *
- * @noInheritDoc
- */
-
-const 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.
- *
- * [[ Story id="switch--example" title="Switch example" ]]
- *
- * By default, the Switch component is styled to be full-width (`width="100%"`) with a gray
- * background to match other controls like Select, SelectButtons, Input, etc. This behavior can be
- * overridden using style props. For example, you can set `backgroundColor="transparent"` on the
- * Switch for a transparent background.
- *
- * @docsPath UI/components/Switch
- * @component
- */
-const Switch = (props, ref) => {
-  const {
-    disabled,
-    id,
-    label,
-    tabIndex = 0,
-    variant = SwitchVariant.default,
-    size = _control_sizes.ControlSize.default,
-    value,
-    onClick,
-    onChange,
-    onMouseEnter,
-    onMouseLeave,
-    className,
-    style,
-    'aria-label': ariaLabel,
-    'aria-describedby': ariaDescribedBy,
-    'aria-labelledby': ariaLabelledBy,
-    ...styleProps
-  } = props;
-  const classNameForStyleProps = (0, _use_styled_system.default)({
-    display: 'flex',
-    width: '100%',
-    ...styleProps
-  }, styleParser);
-  const {
-    baseClassName: classNameForVariant,
-    switchContainerClassName,
-    switchClassName,
-    switchLabelClassName
-  } = useSwitchVariant(variant);
-  const 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 /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref
-    // TODO (stephen): remove tooltip anchor props
-    ,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onClick: disabled ? undefined : _onClick,
-    onKeyDown: disabled ? undefined : _onKeyDown,
-    id: id,
-    className: (0, _emotion.cx)(classNameForVariant, classNameForSize, classNameForStyleProps, className),
-    style: style,
-    tabIndex: disabled ? undefined : tabIndex,
-    role: "checkbox",
-    "aria-disabled": disabled,
-    "aria-checked": !!value,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: switchContainerClassName
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: switchClassName
-  })), label && /*#__PURE__*/_react.default.createElement("label", {
-    className: switchLabelClassName
-  }, label));
-};
-const ForwardedRefSwitch = /*#__PURE__*/_react.default.forwardRef(Switch);
-ForwardedRefSwitch.displayName = 'Switch';
-var _default = exports.default = ForwardedRefSwitch;

package/dist/cjs/base/ui/switch_synced.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
-var _switch = _interopRequireDefault(require("./switch"));
-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: Switch */ /** */
-/**
- * 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.
- *
- * [[ Story id="switch--example-synced" title="Synced switch example" ]]
- *
- * @docsPath UI/components/SwitchSynced
- * @groupPath UI/components/Switch
- * @component
- */
-const SwitchSynced = (props, ref) => {
-  const {
-    disabled,
-    globalConfigKey,
-    onChange,
-    ...restOfProps
-  } = props;
-  const [value, setValue, canSetValue] = (0, _use_synced.default)(globalConfigKey);
-  return /*#__PURE__*/React.createElement(_switch.default, _extends({}, restOfProps, {
-    ref: ref,
-    value: !!value,
-    onChange: newValue => {
-      setValue(newValue);
-      if (onChange) {
-        onChange(newValue);
-      }
-    },
-    disabled: disabled || !canSetValue
-  }));
-};
-const ForwardedRefSwitchSynced = /*#__PURE__*/React.forwardRef(SwitchSynced);
-ForwardedRefSwitchSynced.displayName = 'SwitchSynced';
-var _default = exports.default = ForwardedRefSwitchSynced;

package/dist/cjs/base/ui/synced.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Synced = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _with_hooks = _interopRequireDefault(require("../../shared/ui/with_hooks"));
-var _sdk_context = require("../../shared/ui/sdk_context");
-var _global_config_synced_component_helpers = _interopRequireDefault(require("../../shared/ui/global_config_synced_component_helpers"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @hidden */ /** */
-
-/** @hidden */
-
-/** @hidden */
-class Synced extends React.Component {
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this._setValue = this._setValue.bind(this);
-  }
-  /** @internal */
-  _setValue(newValue) {
-    this.props.sdk.globalConfig.setAsync(this.props.globalConfigKey, newValue);
-  }
-  /** @hidden */
-  render() {
-    const {
-      globalConfig
-    } = this.props.sdk;
-    const value = globalConfig.get(this.props.globalConfigKey);
-    const canSetValue = globalConfig.hasPermissionToSet(this.props.globalConfigKey);
-    return this.props.render({
-      value,
-      canSetValue,
-      setValue: this._setValue
-    });
-  }
-}
-exports.Synced = Synced;
-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)()
-  };
-});

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

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.allStylesParser = void 0;
-var _core = require("@styled-system/core");
-var _index = require("./index");
-/** @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
- */
-
-const allStylesParser = exports.allStylesParser = (0, _core.compose)(_index.appearanceSet, _index.dimensionsSet, _index.flexContainerSet, _index.flexItemSet, _index.positionSet, _index.spacingSet, _index.typographySet, _index.display, _index.overflow);

package/dist/cjs/base/ui/system/appearance/appearance_set.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.appearanceSet = void 0;
-var _core = require("@styled-system/core");
-var _background_color = require("./background_color");
-var _border = require("./border");
-var _border_radius = require("./border_radius");
-var _box_shadow = require("./box_shadow");
-var _opacity = require("./opacity");
-/** @module @airtable/blocks/ui/system: Appearance */ /** */
-
-/**
- * Style props for the visual appearance of an element.
- *
- * @docsPath UI/Style System/Appearance
- */
-
-const appearanceSet = exports.appearanceSet = (0, _core.system)({
-  ..._background_color.config,
-  ..._border_radius.config,
-  ..._border.config,
-  ..._box_shadow.config,
-  ..._opacity.config
-});