@airtable/blocks 0.0.0-experimental-c4b2228f4-20250630 → 0.0.0-experimental-3649c7162-20250904

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _model_picker_select = _interopRequireDefault(require("./model_picker_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: TablePicker */ /** */
+/**
+ * Props shared between the {@link TablePicker} and {@link TablePickerSynced} components.
+ */
+
+/**
+ * Props for the {@link TablePicker} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/TablePicker
+ */
+
+/**
+ * Dropdown menu component for selecting tables.
+ *
+ * [[ Story id="modelpickers--tablepicker-example" title="Table picker example" ]]
+ *
+ * @docsPath UI/components/TablePicker
+ * @component
+ */
+const TablePicker = (props, ref) => {
+  const {
+    table,
+    shouldAllowPickingNone,
+    placeholder,
+    onChange,
+    ...restOfProps
+  } = props;
+  const selectedTable = table && !table.isDeleted ? table : null;
+  const sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  function _onChange(tableId) {
+    if (onChange) {
+      const newTable = tableId ? sdk.base.getTableByIdIfExists(tableId) : null;
+      onChange(newTable);
+    }
+  }
+  let placeholderToUse;
+  if (placeholder === undefined) {
+    // Let's set a good default value for the placeholder, depending
+    // on the shouldAllowPickingNone flag.
+    placeholderToUse = shouldAllowPickingNone ? 'None' : 'Pick a table...';
+  } else {
+    placeholderToUse = placeholder;
+  }
+  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+    ref: ref,
+    models: sdk.base.tables,
+    selectedModelId: selectedTable ? selectedTable.id : null,
+    modelKeysToWatch: ['name'],
+    shouldAllowPickingNone: shouldAllowPickingNone,
+    placeholder: placeholderToUse,
+    onChange: _onChange
+  }));
+};
+const ForwardedRefTablePicker = /*#__PURE__*/React.forwardRef(TablePicker);
+ForwardedRefTablePicker.displayName = 'TablePicker';
+var _default = exports.default = ForwardedRefTablePicker;

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

@@ -0,0 +1,62 @@
+"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 _use_watchable = _interopRequireDefault(require("../../shared/ui/use_watchable"));
+var _sdk_context = require("../../shared/ui/sdk_context");
+var _table_picker = _interopRequireDefault(require("./table_picker"));
+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: TablePicker */ /** */
+/**
+ * Props for the {@link TablePickerSynced} component. Also accepts:
+ * * {@link SelectStyleProps}
+ *
+ * @docsPath UI/components/TablePickerSynced
+ * @groupPath UI/components/TablePicker
+ */
+
+/** @hidden */
+function _getTableFromGlobalConfigValue(sdk, tableId) {
+  return typeof tableId === 'string' ? sdk.base.getTableByIdIfExists(tableId) : null;
+}
+
+/**
+ * A wrapper around the {@link TablePicker} component that syncs with {@link GlobalConfig}.
+ *
+ * [[ Story id="modelpickers--tablepickersynced-example" title="Synced table picker example" ]]
+ *
+ * @docsPath UI/components/TablePickerSynced
+ * @groupPath UI/components/TablePicker
+ * @component
+ */
+const TablePickerSynced = (props, ref) => {
+  const {
+    globalConfigKey,
+    onChange,
+    disabled,
+    ...restOfProps
+  } = props;
+  const [tableId, setTableId, canSetTableId] = (0, _use_synced.default)(globalConfigKey);
+  const sdk = (0, _sdk_context.useSdk)();
+  (0, _use_watchable.default)(sdk.base, ['tables']);
+  return /*#__PURE__*/React.createElement(_table_picker.default, _extends({}, restOfProps, {
+    ref: ref,
+    table: _getTableFromGlobalConfigValue(sdk, tableId),
+    onChange: table => {
+      setTableId(table ? table.id : null);
+      if (onChange) {
+        onChange(table);
+      }
+    },
+    disabled: disabled || !canSetTableId
+  }));
+};
+const ForwardedRefTablePickerSynced = /*#__PURE__*/React.forwardRef(TablePickerSynced);
+ForwardedRefTablePickerSynced.displayName = 'TablePickerSynced';
+var _default = exports.default = ForwardedRefTablePickerSynced;

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TextVariant = exports.TextSize = void 0;
+exports.useTextStyle = useTextStyle;
+var React = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _private_utils = require("../../shared/private_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _get_style_props_for_responsive_prop = _interopRequireDefault(require("./system/utils/get_style_props_for_responsive_prop"));
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+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: Text */ /** */
+/**
+ * Variants for the {@link Text} component:
+ *
+ * • **default**
+ *
+ * Single-line text.
+ *
+ * • **paragraph**
+ *
+ * Multi-line text such as body copy.
+ */
+
+const TextVariant = exports.TextVariant = (0, _private_utils.createEnum)('default', 'paragraph');
+
+/**
+ * Sizes for the {@link Text} component.
+ */
+
+const TextSize = exports.TextSize = (0, _private_utils.createEnum)('small', 'default', 'large', 'xlarge');
+/** */
+
+/** @internal */
+function useTextStyle(textSizeProp) {
+  let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TextVariant.default;
+  const {
+    textStyles
+  } = (0, _use_theme.default)();
+  const textSizesForVariant = textStyles[variant];
+  let styleProps;
+  if (typeof textSizeProp === 'string') {
+    styleProps = textSizesForVariant[textSizeProp];
+  } else {
+    styleProps = (0, _get_style_props_for_responsive_prop.default)(textSizeProp, textSizesForVariant);
+  }
+  return (0, _use_styled_system.default)(styleProps);
+}
+
+/**
+ * Props for the {@link Text} component. Also supports:
+ * * {@link AriaProps}
+ * * {@link AllStylesProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/Text
+ */
+
+/**
+ * A text component with sizes and variants.
+ *
+ * [[ Story id="text--example" title="Text example" ]]
+ *
+ * @docsPath UI/components/Text
+ * @component
+ */
+const Text = (props, ref) => {
+  const {
+    as: Component = 'p',
+    size = TextSize.default,
+    variant = TextVariant.default,
+    children,
+    id,
+    role,
+    dataAttributes,
+    className,
+    style,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
+    'aria-hidden': ariaHidden,
+    'aria-live': ariaLive,
+    ...styleProps
+  } = props;
+  const classNameForTextStyle = useTextStyle(size, variant);
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    textColor: 'default',
+    fontFamily: 'default',
+    ...styleProps
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    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);
+};
+const ForwardedRefText = /*#__PURE__*/React.forwardRef(Text);
+ForwardedRefText.displayName = 'Text';
+var _default = exports.default = ForwardedRefText;

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

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _emotion = require("emotion");
+var _core = require("@styled-system/core");
+var _private_utils = require("../../shared/private_utils");
+var _use_styled_system = _interopRequireDefault(require("./use_styled_system"));
+var _use_theme = _interopRequireDefault(require("./theme/use_theme"));
+var _system = require("./system");
+var _text = require("./text");
+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; }
+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: TextButton */ /** */
+/**
+ * Style props for the {@link TextButton} component. Also accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+
+/**
+ * Variants for the {@link TextButton} component:
+ *
+ * • **default**
+ *
+ * Blue text.
+ *
+ * • **dark**
+ *
+ * Dark gray text.
+ *
+ * • **light**
+ *
+ * Light gray text.
+ */
+
+const TextButtonVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
+
+/** @internal */
+function useTextButtonVariant() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : TextButtonVariant.default;
+  const {
+    textButtonVariants
+  } = (0, _use_theme.default)();
+  return textButtonVariants[variant];
+}
+
+/**
+ * Props for the {@link TextButton} component. Also supports:
+ * * {@link AriaProps}
+ * * {@link TextButtonStyleProps}
+ *
+ * @noInheritDoc
+ * @docsPath UI/components/TextButton
+ */
+
+/**
+ * A text button component with sizes and variants.
+ *
+ * [[ Story id="textbutton--example" title="Text button example" ]]
+ *
+ * @docsPath UI/components/TextButton
+ * @component
+ */
+const TextButton = (props, ref) => {
+  const {
+    size = _text.TextSize.default,
+    variant = TextButtonVariant.default,
+    icon,
+    children,
+    disabled,
+    id,
+    tabIndex = 0,
+    dataAttributes,
+    onClick,
+    className,
+    style,
+    onMouseEnter,
+    onMouseLeave,
+    // 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-selected': ariaSelected,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-haspopup': ariaHasPopup,
+    'aria-hidden': ariaHidden,
+    'aria-live': ariaLive,
+    ...styleProps
+  } = props;
+  const classNameForTextStyle = (0, _text.useTextStyle)(size);
+  const classNameForTextButtonVariant = useTextButtonVariant(variant);
+  const classNameForStyleProps = (0, _use_styled_system.default)({
+    display: 'inline-flex',
+    // Use a negative margin to undo the padding.
+    padding: '0 0.1em',
+    margin: '0 -0.1em',
+    maxWidth: '100%',
+    ...styleProps
+  }, styleParser);
+  const hasIcon = icon !== undefined;
+  const hasChildren = !!children;
+  if (!hasChildren && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.error('<TextButton> without a text label should include an explicit aria-label prop.');
+  }
+
+  /** @internal */
+  function _onKeyDown(e) {
+    if (e.ctrlKey || e.metaKey || e.shiftKey) {
+      return;
+    }
+
+    //  Use `Spacebar` to support FF <= 37, IE 9-11.
+    if ([' ', 'Spacebar', 'Enter'].includes(e.key)) {
+      // Prevent scrolling when pressing `Spacebar`.
+      e.preventDefault();
+      if (onClick) {
+        onClick(e);
+      }
+    }
+  }
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref,
+    id: id
+    // Don't set `tabIndex` if `disabled`. We do set it though even if
+    // `onClick` is not provided so that it mimics the behavior of a native
+    // `button`. We also prevent the user from passing in their own
+    // `tabIndex` in the case that it is disabled. This is better than a
+    // `-1` because `-1` will make the element focusable but not reachable
+    // via keyboard navigation.
+    ,
+    tabIndex: !disabled ? tabIndex : undefined
+    // Only fire these events if the `disabled` prop is not true.
+    ,
+    onClick: !disabled ? onClick : undefined,
+    onKeyDown: !disabled ? _onKeyDown : undefined,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    className: (0, _emotion.cx)(classNameForTextStyle,
+    // TextButton goes 2nd because it overrides `fontWeight`.
+    classNameForTextButtonVariant, classNameForStyleProps, className),
+    style: style
+    // Always have `role="button"`, even if it is disabled. Combined with
+    // `aria-disabled`, screen readers will announce this the same as
+    // a native `button` element.
+    ,
+    role: "button"
+    // Announce to screen readers that the `TextButton` is disabled.
+    ,
+    "aria-disabled": disabled ? 'true' : undefined,
+    "aria-selected": ariaSelected,
+    "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), typeof icon === 'string' ? /*#__PURE__*/React.createElement(_icon.default, {
+    name: icon,
+    flex: "none",
+    size: "1em"
+  }) : icon, hasChildren && /*#__PURE__*/React.createElement(_box.default, {
+    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
+  }, children));
+};
+const ForwardedRefTextButton = /*#__PURE__*/React.forwardRef(TextButton);
+ForwardedRefTextButton.displayName = 'TextButton';
+var _default = exports.default = ForwardedRefTextButton;

package/dist/{cjs → esm}/base/ui/theme/default_theme/button_variants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _emotion = require("emotion");
 var _tokens = require("./tokens");
-var baseStyles = (0, _emotion.css)({
+const baseStyles = (0, _emotion.css)({
   fontFamily: _tokens.fontFamilies.default,
   borderRadius: _tokens.radii.default,
   justifyContent: 'center',
@@ -27,7 +27,7 @@ var baseStyles = (0, _emotion.css)({
       opacity: 1
     },
     '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
     }
   },
   '&:disabled': {
@@ -35,7 +35,7 @@ var baseStyles = (0, _emotion.css)({
     opacity: _tokens.opacities.quieter
   }
 });
-var buttonVariants = {
+const buttonVariants = {
   default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
     color: _tokens.colors.dark,
     backgroundColor: _tokens.colors.lightGray2

package/dist/esm/base/ui/theme/default_theme/control_sizes.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchSizes = exports.selectSizes = exports.selectButtonsSizes = exports.inputSizes = exports.buttonSizes = void 0;
+const sharedControlSizes = {
+  small: {
+    fontSize: 2,
+    // 13px
+    height: '28px',
+    lineHeight: '19px'
+  },
+  default: {
+    fontSize: 2,
+    // 13px
+    height: '32px',
+    lineHeight: '21px'
+  },
+  large: {
+    fontSize: 3,
+    // 15px
+    height: '36px',
+    lineHeight: '21px'
+  }
+};
+const buttonSizes = exports.buttonSizes = {
+  small: {
+    ...sharedControlSizes.small,
+    paddingX: '10px'
+  },
+  default: {
+    ...sharedControlSizes.default,
+    paddingX: '12px'
+  },
+  large: {
+    ...sharedControlSizes.large,
+    paddingX: '14px'
+  }
+};
+const selectSizes = exports.selectSizes = {
+  small: {
+    ...sharedControlSizes.small,
+    paddingLeft: '8px',
+    paddingRight: '24px',
+    backgroundPosition: 'calc(100% - 8px)'
+  },
+  default: {
+    ...sharedControlSizes.default,
+    paddingLeft: '10px',
+    paddingRight: '26px',
+    backgroundPosition: 'calc(100% - 10px)'
+  },
+  large: {
+    ...sharedControlSizes.large,
+    paddingLeft: '12px',
+    paddingRight: '28px',
+    backgroundPosition: 'calc(100% - 12px)'
+  }
+};
+const inputSizes = exports.inputSizes = {
+  small: {
+    ...sharedControlSizes.small,
+    paddingX: '8px'
+  },
+  default: {
+    ...sharedControlSizes.default,
+    paddingX: '10px'
+  },
+  large: {
+    ...sharedControlSizes.large,
+    paddingX: '12px'
+  }
+};
+const selectButtonsSizes = exports.selectButtonsSizes = {
+  small: {
+    ...sharedControlSizes.small,
+    padding: 1
+  },
+  default: {
+    ...sharedControlSizes.default,
+    padding: 1
+  },
+  large: {
+    ...sharedControlSizes.large,
+    padding: 1
+  }
+};
+const switchSizes = exports.switchSizes = {
+  small: {
+    ...sharedControlSizes.small,
+    paddingX: '8px'
+  },
+  default: {
+    ...sharedControlSizes.default,
+    paddingX: '10px'
+  },
+  large: {
+    ...sharedControlSizes.large,
+    paddingX: '12px'
+  }
+};

package/dist/{cjs → esm}/base/ui/theme/default_theme/heading_styles.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 
 /** @hidden */
 
-var headingStyles = {
+const headingStyles = {
   default: {
     xsmall: {
       fontSize: 3,

package/dist/{cjs → esm}/base/ui/theme/default_theme/index.js

@@ -1,19 +1,9 @@
 "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 tokens = _interopRequireWildcard(require("./tokens"));
 var controlSizes = _interopRequireWildcard(require("./control_sizes"));
 var _text_styles = _interopRequireDefault(require("./text_styles"));
@@ -25,12 +15,16 @@ var _switch_variants = _interopRequireDefault(require("./switch_variants"));
 var _select_variants = _interopRequireDefault(require("./select_variants"));
 var _select_buttons_variants = _interopRequireDefault(require("./select_buttons_variants"));
 var _text_button_variants = _interopRequireDefault(require("./text_button_variants"));
-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 _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 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; } // Typography sizes and variants
+// Typography sizes and variants
+
 // Component variants
-var theme = _objectSpread(_objectSpread(_objectSpread({}, tokens), controlSizes), {}, {
+
+const theme = {
+  ...tokens,
+  ...controlSizes,
   textStyles: _text_styles.default,
   headingStyles: _heading_styles.default,
   // We create CSS class names for variants when the UI kit gets loaded.
@@ -44,5 +38,5 @@ var theme = _objectSpread(_objectSpread(_objectSpread({}, tokens), controlSizes)
   selectButtonsVariants: _select_buttons_variants.default,
   switchVariants: _switch_variants.default,
   textButtonVariants: _text_button_variants.default
-});
+};
 var _default = exports.default = theme;

package/dist/{cjs → esm}/base/ui/theme/default_theme/input_variants.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _emotion = require("emotion");
 var _tokens = require("./tokens");
-var baseInputStyles = (0, _emotion.css)({
+const baseInputStyles = (0, _emotion.css)({
   borderRadius: _tokens.radii.default,
   boxSizing: 'border-box',
   fontFamily: _tokens.fontFamilies.default,
@@ -22,14 +22,14 @@ var baseInputStyles = (0, _emotion.css)({
       opacity: 1
     },
     '&:focus': {
-      boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
     }
   },
   '&:disabled': {
     opacity: _tokens.opacities.quieter
   }
 });
-var inputVariants = {
+const inputVariants = {
   default: (0, _emotion.cx)(baseInputStyles, (0, _emotion.css)({
     color: _tokens.colors.dark,
     backgroundColor: _tokens.colors.lightGray2