@airtable/blocks 0.0.0-experimental-20e3506bd-20250428

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

@@ -0,0 +1,126 @@
+"use strict";
+
+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.__injectSdkIntoInitializeBlock = __injectSdkIntoInitializeBlock;
+exports.__resetHasBeenInitialized = __resetHasBeenInitialized;
+exports.initializeBlock = initializeBlock;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _error_utils = require("../../shared/error_utils");
+var _airtable_interface = _interopRequireDefault(require("../../injected/airtable_interface"));
+var _airtable_interface2 = require("../types/airtable_interface");
+var _block_wrapper = _interopRequireDefault(require("./block_wrapper"));
+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; }
+/** @module @airtable/blocks/ui: initializeBlock */ /** */
+
+var hasBeenInitialized = false;
+
+/** */
+
+/** @hidden */
+
+/** @hidden */
+
+/** @hidden */
+
+/**
+ * `initializeBlock` takes the top-level React component in your tree and renders it. It is conceptually similar to `ReactDOM.render`, but takes care of some Extensions-specific things.
+ *
+ * @param getEntryElement A function that returns your React Node.
+ *
+ * @example
+ * ```js
+ * import {initializeBlock} from '@airtable/blocks/ui';
+ * import React from 'react';
+ *
+ * function App() {
+ *     return (
+ *         <div>Hello world 🚀</div>
+ *     );
+ * }
+ *
+ * initializeBlock(() => <App />);
+ * ```
+ * @docsPath UI/utils/initializeBlock
+ */
+function initializeBlock(getEntryElement) {
+  var _airtableInterface$sd;
+  var entryPoints = typeof getEntryElement === 'function' ? {
+    dashboard: getEntryElement
+  } : getEntryElement;
+  var body = typeof document !== 'undefined' ? document.body : null;
+  if (!body) {
+    throw (0, _error_utils.spawnError)('initializeBlock should only be called from browser environments');
+  }
+  if (hasBeenInitialized) {
+    throw (0, _error_utils.spawnError)('initializeBlock should only be called once');
+  }
+  hasBeenInitialized = true;
+  var airtableInterface = (0, _airtable_interface.default)();
+  var entryElement;
+  // runContext can be undefined if running from an old version client version (before 01/2021)
+  // TODO (SeanKeenan): Remove nullish coelescing once old clients are no longer a concern
+  var runContext = (_airtableInterface$sd = airtableInterface.sdkInitData.runContext) !== null && _airtableInterface$sd !== void 0 ? _airtableInterface$sd : {
+    type: _airtable_interface2.BlockRunContextType.DASHBOARD_APP
+  };
+  switch (runContext.type) {
+    case _airtable_interface2.BlockRunContextType.DASHBOARD_APP:
+      {
+        if (entryPoints.dashboard === undefined) {
+          throw (0, _error_utils.spawnError)('If running an extension within the dashboard, it must have a dashboard initialization function');
+        }
+        if (typeof entryPoints.dashboard !== 'function') {
+          throw (0, _error_utils.spawnError)('initializeBlock must contain a dashboard function that returns a React element');
+        }
+        entryElement = entryPoints.dashboard();
+        break;
+      }
+    case _airtable_interface2.BlockRunContextType.VIEW:
+      {
+        if (entryPoints.view === undefined) {
+          throw (0, _error_utils.spawnError)('If running an extension within a view, it must have a view initialization function');
+        }
+        if (typeof entryPoints.view !== 'function') {
+          throw (0, _error_utils.spawnError)('initializeBlock must contain a view function that returns a React element');
+        }
+        var table = sdk.base.getTableById(runContext.tableId);
+        var view = table.getViewById(runContext.viewId);
+        entryElement = entryPoints.view({
+          table,
+          view
+        });
+        break;
+      }
+    default:
+      throw (0, _error_utils.spawnError)('Invalid context to run ');
+  }
+  if (! /*#__PURE__*/React.isValidElement(entryElement)) {
+    throw (0, _error_utils.spawnError)("The first argument to initializeBlock didn't return a valid React element");
+  }
+  sdk.__setBatchedUpdatesFn(_reactDom.default.unstable_batchedUpdates);
+  var container = document.createElement('div');
+  body.appendChild(container);
+  _reactDom.default.render( /*#__PURE__*/React.createElement(_block_wrapper.default, {
+    sdk: sdk
+  }, entryElement), container);
+}
+var sdk;
+
+// The application-level Sdk instance must be injected dynamically to avoid
+// circular dependencies at the time of module resolution.
+function __injectSdkIntoInitializeBlock(_sdk) {
+  sdk = _sdk;
+}
+
+// Exclusively for tests
+function __resetHasBeenInitialized() {
+  hasBeenInitialized = false;
+}

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

@@ -0,0 +1,200 @@
+"use strict";
+
+require("core-js/modules/es.symbol.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.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");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sharedInputPropTypes = exports.inputStylePropTypes = exports.default = exports.ValidInputType = exports.SupportedInputType = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.to-string.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 = _interopRequireWildcard(require("react"));
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _use_form_field = _interopRequireDefault(require("./use_form_field"));
+var _system = require("./system");
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+var _control_sizes = require("./control_sizes");
+var _enum_prop_type_utils = require("./system/utils/enum_prop_type_utils");
+var _excluded = ["size", "type", "value", "placeholder", "onMouseEnter", "onMouseLeave", "onClick", "hasOnClick", "onChange", "onBlur", "onFocus", "style", "className", "disabled", "required", "spellCheck", "tabIndex", "id", "name", "autoFocus", "max", "maxLength", "min", "minLength", "step", "pattern", "readOnly", "autoComplete", "aria-labelledby", "aria-describedby"];
+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; } /** @module @airtable/blocks/ui: Input */ /** */
+/** @internal */
+
+var InputVariant = (0, _private_utils.createEnum)('default');
+
+/** @internal */
+function useInputVariant() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : InputVariant.default;
+  var _useTheme = (0, _use_theme.default)(),
+    inputVariants = _useTheme.inputVariants;
+  return inputVariants[variant];
+}
+var ValidInputType = exports.ValidInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+/** */
+
+/**
+ * Style props shared between the {@link Input} and {@link InputSynced} components. Accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MarginProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.margin);
+var inputStylePropTypes = exports.inputStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.marginPropTypes);
+
+/**
+ * Props shared between the {@link Input} and {@link InputSynced} components.
+ *
+ * @noInheritDoc
+ */
+
+var SupportedInputType = exports.SupportedInputType = (0, _private_utils.createEnum)('date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week');
+/**
+ * Supported types for the {@link Input} component. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types) for more information.
+ */
+
+// Shared with `Input` and `InputSynced`.
+var sharedInputPropTypes = exports.sharedInputPropTypes = _objectSpread(_objectSpread({
+  size: _control_sizes.controlSizePropType,
+  type: (0, _enum_prop_type_utils.createPropTypeFromEnum)(SupportedInputType),
+  placeholder: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  spellCheck: _propTypes.default.bool,
+  tabIndex: _propTypes.default.oneOfType([_propTypes.default.number]),
+  autoFocus: _propTypes.default.bool,
+  max: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  maxLength: _propTypes.default.number,
+  min: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  minLength: _propTypes.default.number,
+  step: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  pattern: _propTypes.default.string,
+  readOnly: _propTypes.default.bool,
+  autoComplete: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  'aria-labelledby': _propTypes.default.string,
+  'aria-describedby': _propTypes.default.string
+}, inputStylePropTypes), _tooltip_anchor_props.tooltipAnchorPropTypes);
+
+/**
+ * Props for the {@link Input} component. Also accepts:
+ * * {@link InputStyleProps}
+ *
+ * @docsPath UI/components/Input
+ */
+
+/**
+ * An input component. A wrapper around `<input>` that fits in with Airtable's user interface.
+ *
+ * [[ Story id="input--example" title="Input example" ]]
+ *
+ * @docsPath UI/components/Input
+ * @component
+ */
+var Input = (props, ref) => {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? _control_sizes.ControlSize.default : _props$size,
+    _props$type = props.type,
+    type = _props$type === void 0 ? SupportedInputType.text : _props$type,
+    value = props.value,
+    placeholder = props.placeholder,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    onClick = props.onClick,
+    hasOnClick = props.hasOnClick,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    style = props.style,
+    className = props.className,
+    disabled = props.disabled,
+    required = props.required,
+    spellCheck = props.spellCheck,
+    tabIndex = props.tabIndex,
+    id = props.id,
+    name = props.name,
+    autoFocus = props.autoFocus,
+    max = props.max,
+    maxLength = props.maxLength,
+    min = props.min,
+    minLength = props.minLength,
+    step = props.step,
+    pattern = props.pattern,
+    readOnly = props.readOnly,
+    autoComplete = props.autoComplete,
+    ariaLabelledBy = props['aria-labelledby'],
+    ariaDescribedByProp = props['aria-describedby'],
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var formFieldContextValue = (0, _use_form_field.default)();
+  var controlId = formFieldContextValue ? formFieldContextValue.controlId : undefined;
+  var descriptionId = formFieldContextValue ? formFieldContextValue.descriptionId : undefined;
+  var ariaDescribedBy = [ariaDescribedByProp, descriptionId].filter(Boolean).join(' ') || undefined;
+  // There is only a single default variant.
+  var classNameForInputVariant = useInputVariant();
+  var classNameForInputSize = (0, _control_sizes.useInputSize)(size);
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    width: '100%'
+  }, styleProps), styleParser);
+  return /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    value: value,
+    type: type,
+    placeholder: placeholder,
+    disabled: disabled,
+    required: required,
+    spellCheck: spellCheck,
+    tabIndex: tabIndex,
+    id: id || controlId,
+    name: name,
+    autoFocus: autoFocus,
+    max: max,
+    maxLength: maxLength,
+    min: min,
+    minLength: minLength,
+    step: step,
+    pattern: pattern,
+    readOnly: readOnly,
+    autoComplete: autoComplete,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus
+    // TODO (stephen): remove tooltip anchor props
+    ,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onClick: onClick,
+    style: style,
+    className: (0, _emotion.cx)(classNameForInputSize, classNameForInputVariant, classNameForStyleProps, className),
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  });
+};
+var ForwardedRefInput = /*#__PURE__*/React.forwardRef(Input);
+ForwardedRefInput.propTypes = _objectSpread({
+  value: _propTypes.default.string.isRequired
+}, sharedInputPropTypes);
+ForwardedRefInput.displayName = 'Input';
+var _default = exports.default = ForwardedRefInput;

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

@@ -0,0 +1,89 @@
+"use strict";
+
+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");
+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 _error_utils = require("../../shared/error_utils");
+var _use_synced = _interopRequireDefault(require("../../shared/ui/use_synced"));
+var _global_config_synced_component_helpers = _interopRequireDefault(require("../../shared/ui/global_config_synced_component_helpers"));
+var _input = _interopRequireWildcard(require("./input"));
+var _excluded = ["globalConfigKey", "type", "disabled", "onChange"];
+/** @module @airtable/blocks/ui: Input */
+/** */
+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 InputSynced} component. Also accepts:
+ * * {@link InputStyleProps}
+ *
+ * @docsPath UI/components/InputSynced
+ * @groupPath UI/components/Input
+ */
+
+/**
+ * A wrapper around the {@link Input} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="input--example-synced" title="Synced input example" ]]
+ *
+ * @docsPath UI/components/InputSynced
+ * @groupPath UI/components/Input
+ * @component
+ */
+var InputSynced = (props, ref) => {
+  var globalConfigKey = props.globalConfigKey,
+    _props$type = props.type,
+    type = _props$type === void 0 ? _input.SupportedInputType.text : _props$type,
+    disabled = props.disabled,
+    _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];
+  var inputValue;
+  if (value === null || value === undefined) {
+    // If an input gets null or undefined for value, React treats it as uncontrolled
+    // and will throw warnings when it becomes controlled.
+    inputValue = '';
+  } else if (typeof value === 'string') {
+    inputValue = value;
+  } else {
+    throw (0, _error_utils.spawnError)('InputSynced only works with a global config value that is a string, null or undefined.');
+  }
+  return /*#__PURE__*/React.createElement(_input.default, (0, _extends2.default)({}, restOfProps, {
+    ref: ref,
+    disabled: disabled || !canSetValue,
+    onChange: e => {
+      setValue(e.target.value);
+      if (_onChange) {
+        _onChange(e);
+      }
+    },
+    value: inputValue,
+    type: type
+  }));
+};
+var ForwardedRefInputSynced = /*#__PURE__*/React.forwardRef(InputSynced);
+ForwardedRefInputSynced.propTypes = _objectSpread({
+  globalConfigKey: _global_config_synced_component_helpers.default.globalConfigKeyPropType
+}, _input.sharedInputPropTypes);
+ForwardedRefInputSynced.displayName = 'InputSynced';
+var _default = exports.default = ForwardedRefInputSynced;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyCodes = void 0;
+exports.isCommandModifierKeyEvent = isCommandModifierKeyEvent;
+require("core-js/modules/es.array.index-of.js");
+/**
+ * @internal
+ */
+var KeyCodes = exports.KeyCodes = Object.freeze({
+  BACKSPACE: 8,
+  TAB: 9,
+  ENTER: 13,
+  ALT: 18,
+  ESCAPE: 27,
+  SPACE: 32,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+  END: 35,
+  HOME: 36,
+  LEFT: 37,
+  UP: 38,
+  RIGHT: 39,
+  DOWN: 40,
+  DELETE: 46,
+  A: 65,
+  B: 66,
+  C: 67,
+  D: 68,
+  E: 69,
+  F: 70,
+  G: 71,
+  H: 72,
+  I: 73,
+  J: 74,
+  K: 75,
+  L: 76,
+  M: 77,
+  N: 78,
+  O: 79,
+  P: 80,
+  Q: 81,
+  R: 82,
+  S: 83,
+  T: 84,
+  U: 85,
+  V: 86,
+  W: 87,
+  X: 88,
+  Y: 89,
+  Z: 90,
+  F2: 113,
+  F3: 114,
+  COMMA: 188,
+  PERIOD: 190,
+  FORWARD_SLASH: 191,
+  BACKTICK: 192,
+  BACK_SLASH: 220
+});
+
+/**
+ * @internal
+ * OS-aware check for command/ctrl key.
+ */
+function isCommandModifierKeyEvent(e) {
+  var isMac = window.navigator.platform.toLowerCase().indexOf('mac') !== -1;
+  if (isMac) {
+    return e.metaKey;
+  } else {
+    return e.ctrlKey;
+  }
+}

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

@@ -0,0 +1,105 @@
+"use strict";
+
+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");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _emotion = require("emotion");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _index = require("./system/index");
+var _aria_props = require("./types/aria_props");
+var _text = require("./text");
+var _data_attributes_prop = require("./types/data_attributes_prop");
+var _excluded = ["size", "htmlFor", "id", "children", "className", "style", "dataAttributes", "role", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-live"];
+/** @module @airtable/blocks/ui: Label */
+/** */
+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 Label} component. Also accepts:
+ * * {@link AllStylesProps}
+ * * {@link AriaProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/Label
+ */
+
+/**
+ * A label component.
+ *
+ * [[ Story id="label--example" title="Label example" ]]
+ *
+ * @docsPath UI/components/Label
+ * @component
+ */
+var Label = (props, ref) => {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? _text.TextSize.default : _props$size,
+    htmlFor = props.htmlFor,
+    id = props.id,
+    children = props.children,
+    className = props.className,
+    style = props.style,
+    dataAttributes = props.dataAttributes,
+    role = props.role,
+    ariaLabel = props['aria-label'],
+    ariaLabelledBy = props['aria-labelledby'],
+    ariaDescribedBy = props['aria-describedby'],
+    ariaControls = props['aria-controls'],
+    ariaExpanded = props['aria-expanded'],
+    ariaHasPopup = props['aria-haspopup'],
+    ariaHidden = props['aria-hidden'],
+    ariaLive = props['aria-live'],
+    styleProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var classNameForTextStyle = (0, _text.useTextStyle)(size);
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    display: 'inline-block',
+    textColor: 'light',
+    fontWeight: 'strong',
+    marginBottom: '6px'
+  }, styleProps));
+  return /*#__PURE__*/React.createElement("label", (0, _extends2.default)({
+    ref: ref,
+    htmlFor: htmlFor,
+    id: id,
+    className: (0, _emotion.cx)(classNameForTextStyle, classNameForStyleProps, className),
+    style: style,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-hidden": ariaHidden,
+    "aria-live": ariaLive
+  }, dataAttributes), children);
+};
+var ForwardedRefLabel = /*#__PURE__*/React.forwardRef(Label);
+ForwardedRefLabel.propTypes = _objectSpread(_objectSpread({
+  size: _text.textSizePropType,
+  htmlFor: _propTypes.default.string,
+  id: _propTypes.default.string,
+  dataAttributes: _data_attributes_prop.dataAttributesPropType,
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+}, _index.allStylesPropTypes), _aria_props.ariaPropTypes);
+ForwardedRefLabel.displayName = 'Label';
+var _default = exports.default = ForwardedRefLabel;