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

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

@@ -1,71 +0,0 @@
-"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/cjs/base/ui/table_picker_synced.js

@@ -1,62 +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 _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/cjs/base/ui/text.js

@@ -1,117 +0,0 @@
-"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/cjs/base/ui/text_button.js

@@ -1,196 +0,0 @@
-"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/base/ui/theme/default_theme/button_variants.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _tokens = require("./tokens");
-const baseStyles = (0, _emotion.css)({
-  fontFamily: _tokens.fontFamilies.default,
-  borderRadius: _tokens.radii.default,
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingTop: 0,
-  paddingBottom: 0,
-  fontWeight: 500,
-  userSelect: 'none',
-  outline: 'none',
-  appearance: 'none',
-  border: 'none',
-  '&:not(:disabled)': {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: _tokens.opacities.quiet
-    },
-    '&:active': {
-      opacity: 1
-    },
-    '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
-    }
-  },
-  '&:disabled': {
-    cursor: 'default',
-    opacity: _tokens.opacities.quieter
-  }
-});
-const buttonVariants = {
-  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.dark,
-    backgroundColor: _tokens.colors.lightGray2
-  })),
-  primary: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.white,
-    backgroundColor: _tokens.colors.blueBright
-  })),
-  secondary: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.dark,
-    backgroundColor: 'transparent',
-    '&:hover': {
-      backgroundColor: _tokens.colors.lightGray2
-    }
-  })),
-  danger: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.white,
-    backgroundColor: _tokens.colors.redBright
-  }))
-};
-var _default = exports.default = buttonVariants;

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

@@ -1,102 +0,0 @@
-"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'
-  }
-};