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

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

@@ -0,0 +1,228 @@
+"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.textButtonStylePropTypes = exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _aria_props = require("./types/aria_props");
+var _create_responsive_prop_type = _interopRequireDefault(require("./system/utils/create_responsive_prop_type"));
+var _system = require("./system");
+var _text = require("./text");
+var _icon_config = require("./icon_config");
+var _icon = _interopRequireDefault(require("./icon"));
+var _tooltip_anchor_props = require("./types/tooltip_anchor_props");
+var _css_helpers = _interopRequireDefault(require("./css_helpers"));
+var _box = _interopRequireDefault(require("./box"));
+var _enum_prop_type_utils = require("./system/utils/enum_prop_type_utils");
+var _excluded = ["size", "variant", "icon", "children", "disabled", "id", "tabIndex", "dataAttributes", "onClick", "className", "style", "onMouseEnter", "onMouseLeave", "hasOnClick", "aria-selected", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-live"];
+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: TextButton */ /** */
+/**
+ * Style props for the {@link TextButton} component. Also accepts:
+ * * {@link FlexItemSetProps}
+ * * {@link MaxWidthProps}
+ * * {@link MinWidthProps}
+ * * {@link PositionSetProps}
+ * * {@link SpacingSetProps}
+ * * {@link WidthProps}
+ *
+ * @noInheritDoc
+ */
+
+var styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+var textButtonStylePropTypes = exports.textButtonStylePropTypes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  display: (0, _create_responsive_prop_type.default)(_propTypes.default.oneOf(['inline-flex', 'flex', 'none']))
+}, _system.maxWidthPropTypes), _system.minWidthPropTypes), _system.widthPropTypes), _system.flexItemSetPropTypes), _system.positionSetPropTypes), _system.spacingSetPropTypes);
+
+/**
+ * Variants for the {@link TextButton} component:
+ *
+ * • **default**
+ *
+ * Blue text.
+ *
+ * • **dark**
+ *
+ * Dark gray text.
+ *
+ * • **light**
+ *
+ * Light gray text.
+ */
+
+var TextButtonVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
+var textButtonVariantPropType = (0, _enum_prop_type_utils.createPropTypeFromEnum)(TextButtonVariant);
+
+/** @internal */
+function useTextButtonVariant() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : TextButtonVariant.default;
+  var _useTheme = (0, _use_theme.default)(),
+    textButtonVariants = _useTheme.textButtonVariants;
+  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
+ */
+var TextButton = (props, ref) => {
+  var _props$size = props.size,
+    size = _props$size === void 0 ? _text.TextSize.default : _props$size,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? TextButtonVariant.default : _props$variant,
+    icon = props.icon,
+    children = props.children,
+    disabled = props.disabled,
+    id = props.id,
+    _props$tabIndex = props.tabIndex,
+    tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+    dataAttributes = props.dataAttributes,
+    onClick = props.onClick,
+    className = props.className,
+    style = props.style,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    hasOnClick = props.hasOnClick,
+    ariaSelected = props['aria-selected'],
+    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 classNameForTextButtonVariant = useTextButtonVariant(variant);
+  var classNameForStyleProps = (0, _use_styled_system.default)(_objectSpread({
+    display: 'inline-flex',
+    // Use a negative margin to undo the padding.
+    padding: '0 0.1em',
+    margin: '0 -0.1em',
+    maxWidth: '100%'
+  }, styleProps), styleParser);
+  var hasIcon = icon !== undefined;
+  var 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", (0, _extends2.default)({
+    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));
+};
+var ForwardedRefTextButton = /*#__PURE__*/React.forwardRef(TextButton);
+ForwardedRefTextButton.propTypes = _objectSpread(_objectSpread(_objectSpread({
+  size: _text.textSizePropType,
+  variant: textButtonVariantPropType,
+  icon: _propTypes.default.oneOfType([_icon_config.iconNamePropType, _propTypes.default.element]),
+  disabled: _propTypes.default.bool,
+  children: _propTypes.default.node,
+  id: _propTypes.default.string,
+  tabIndex: _propTypes.default.number,
+  dataAttributes: _propTypes.default.any,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object,
+  'aria-selected': _propTypes.default.bool
+}, textButtonStylePropTypes), _aria_props.ariaPropTypes), _tooltip_anchor_props.tooltipAnchorPropTypes);
+ForwardedRefTextButton.displayName = 'TextButton';
+var _default = exports.default = ForwardedRefTextButton;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+var 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 ".concat(_tokens.colors.darken3)
+    }
+  },
+  '&:disabled': {
+    cursor: 'default',
+    opacity: _tokens.opacities.quieter
+  }
+});
+var 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

@@ -0,0 +1,96 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.switchSizes = exports.selectSizes = exports.selectButtonsSizes = exports.inputSizes = exports.buttonSizes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+var 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'
+  }
+};
+var buttonSizes = exports.buttonSizes = {
+  small: _objectSpread(_objectSpread({}, sharedControlSizes.small), {}, {
+    paddingX: '10px'
+  }),
+  default: _objectSpread(_objectSpread({}, sharedControlSizes.default), {}, {
+    paddingX: '12px'
+  }),
+  large: _objectSpread(_objectSpread({}, sharedControlSizes.large), {}, {
+    paddingX: '14px'
+  })
+};
+var selectSizes = exports.selectSizes = {
+  small: _objectSpread(_objectSpread({}, sharedControlSizes.small), {}, {
+    paddingLeft: '8px',
+    paddingRight: '24px',
+    backgroundPosition: 'calc(100% - 8px)'
+  }),
+  default: _objectSpread(_objectSpread({}, sharedControlSizes.default), {}, {
+    paddingLeft: '10px',
+    paddingRight: '26px',
+    backgroundPosition: 'calc(100% - 10px)'
+  }),
+  large: _objectSpread(_objectSpread({}, sharedControlSizes.large), {}, {
+    paddingLeft: '12px',
+    paddingRight: '28px',
+    backgroundPosition: 'calc(100% - 12px)'
+  })
+};
+var inputSizes = exports.inputSizes = {
+  small: _objectSpread(_objectSpread({}, sharedControlSizes.small), {}, {
+    paddingX: '8px'
+  }),
+  default: _objectSpread(_objectSpread({}, sharedControlSizes.default), {}, {
+    paddingX: '10px'
+  }),
+  large: _objectSpread(_objectSpread({}, sharedControlSizes.large), {}, {
+    paddingX: '12px'
+  })
+};
+var selectButtonsSizes = exports.selectButtonsSizes = {
+  small: _objectSpread(_objectSpread({}, sharedControlSizes.small), {}, {
+    padding: 1
+  }),
+  default: _objectSpread(_objectSpread({}, sharedControlSizes.default), {}, {
+    padding: 1
+  }),
+  large: _objectSpread(_objectSpread({}, sharedControlSizes.large), {}, {
+    padding: 1
+  })
+};
+var switchSizes = exports.switchSizes = {
+  small: _objectSpread(_objectSpread({}, sharedControlSizes.small), {}, {
+    paddingX: '8px'
+  }),
+  default: _objectSpread(_objectSpread({}, sharedControlSizes.default), {}, {
+    paddingX: '10px'
+  }),
+  large: _objectSpread(_objectSpread({}, sharedControlSizes.large), {}, {
+    paddingX: '12px'
+  })
+};

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/** @hidden */
+
+/** @hidden */
+
+var headingStyles = {
+  default: {
+    xsmall: {
+      fontSize: 3,
+      fontWeight: 700,
+      lineHeight: '22px',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 1
+    },
+    small: {
+      fontSize: 4,
+      fontWeight: 600,
+      lineHeight: '24px',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 1
+    },
+    // We skip fontSize 5, because font sizes below 6 (21px) the font will render SF Pro Text instead of SF Pro Display.
+    // SF Pro Text visually looks slightly bigger than SF Pro Display and 5 and 6 would look very similar.
+    default: {
+      fontSize: 6,
+      fontWeight: 500,
+      lineHeight: '26px',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 2
+    },
+    large: {
+      fontSize: 7,
+      fontWeight: 500,
+      lineHeight: '29px',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 2
+    },
+    xlarge: {
+      fontSize: 8,
+      fontWeight: 500,
+      lineHeight: '34px',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 3
+    },
+    xxlarge: {
+      fontSize: 9,
+      fontWeight: 500,
+      lineHeight: '44px',
+      letterSpacing: '-0.01em',
+      textColor: 'default',
+      marginTop: 0,
+      marginBottom: 3
+    }
+  },
+  caps: {
+    xsmall: {
+      fontSize: 1,
+      fontWeight: 700,
+      lineHeight: '16px',
+      letterSpacing: '0.05em',
+      textTransform: 'uppercase',
+      textColor: 'light',
+      marginTop: 0,
+      marginBottom: 2
+    },
+    small: {
+      fontSize: 2,
+      fontWeight: 600,
+      lineHeight: '16px',
+      letterSpacing: '0.05em',
+      textTransform: 'uppercase',
+      textColor: 'light',
+      marginTop: 0,
+      marginBottom: 2
+    },
+    default: {
+      fontSize: 3,
+      fontWeight: 500,
+      lineHeight: '20px',
+      letterSpacing: '0.05em',
+      textTransform: 'uppercase',
+      textColor: 'light',
+      marginTop: 0,
+      marginBottom: 3
+    }
+    // Bigger all caps heading sizes are are omitted since they are not desirable.
+  }
+};
+var _default = exports.default = headingStyles;

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

@@ -0,0 +1,48 @@
+"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"));
+var _heading_styles = _interopRequireDefault(require("./heading_styles"));
+var _button_variants = _interopRequireDefault(require("./button_variants"));
+var _link_variants = _interopRequireDefault(require("./link_variants"));
+var _input_variants = _interopRequireDefault(require("./input_variants"));
+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 _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
+// Component variants
+var theme = _objectSpread(_objectSpread(_objectSpread({}, tokens), controlSizes), {}, {
+  textStyles: _text_styles.default,
+  headingStyles: _heading_styles.default,
+  // We create CSS class names for variants when the UI kit gets loaded.
+  // This means `textButtonVariants.default` is just a CSS class name.
+  // This has the benefit over exporting a style object
+  // of not having to create a class name manually in the render function.
+  buttonVariants: _button_variants.default,
+  linkVariants: _link_variants.default,
+  inputVariants: _input_variants.default,
+  selectVariants: _select_variants.default,
+  selectButtonsVariants: _select_buttons_variants.default,
+  switchVariants: _switch_variants.default,
+  textButtonVariants: _text_button_variants.default
+});
+var _default = exports.default = theme;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+var baseInputStyles = (0, _emotion.css)({
+  borderRadius: _tokens.radii.default,
+  boxSizing: 'border-box',
+  fontFamily: _tokens.fontFamilies.default,
+  fontWeight: 400,
+  appearance: 'none',
+  outline: 'none',
+  border: 'none',
+  '&:not(:disabled)': {
+    '&:hover': {
+      opacity: _tokens.opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+    }
+  },
+  '&:disabled': {
+    opacity: _tokens.opacities.quieter
+  }
+});
+var inputVariants = {
+  default: (0, _emotion.cx)(baseInputStyles, (0, _emotion.css)({
+    color: _tokens.colors.dark,
+    backgroundColor: _tokens.colors.lightGray2
+  }))
+};
+var _default = exports.default = inputVariants;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+var baseStyles = (0, _emotion.css)({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: _tokens.radii.default,
+  outline: 'none',
+  '&:hover': {
+    opacity: _tokens.opacities.quiet
+  },
+  '&:active': {
+    opacity: 1
+  },
+  '&:focus': {
+    boxShadow: "0 0 0 2px ".concat(_tokens.colors.darken3)
+  }
+});
+var linkVariants = {
+  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.blueBright
+  })),
+  dark: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.dark
+  })),
+  light: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
+    color: _tokens.colors.light
+  }))
+};
+var _default = exports.default = linkVariants;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _emotion = require("emotion");
+var _tokens = require("./tokens");
+var baseContainerStyles = (0, _emotion.css)({
+  borderRadius: _tokens.radii.default,
+  backgroundColor: _tokens.colors.lightGray2,
+  boxSizing: 'border-box',
+  fontFamily: _tokens.fontFamilies.default,
+  overflow: 'hidden',
+  display: 'flex',
+  userSelect: 'none',
+  fontWeight: 400,
+  '&:active, &[data-focused="true"]': {
+    boxShadow: "inset 0 0 0 2px ".concat(_tokens.colors.darken3)
+  },
+  '&[data-disabled="true"]': {
+    opacity: _tokens.opacities.quieter,
+    cursor: 'default'
+  }
+});
+var baseOptionStyles = (0, _emotion.css)({
+  position: 'relative',
+  display: 'flex',
+  flex: 'auto',
+  flexBasis: 0,
+  justifyContent: 'center',
+  alignItems: 'center',
+  overflow: 'hidden',
+  '> label': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    borderRadius: _tokens.radii.default,
+    outline: 0,
+    paddingRight: '4px',
+    paddingLeft: '4px',
+    '&:active': {
+      opacity: 1
+    }
+  },
+  '> input:disabled + label': {
+    cursor: 'default',
+    opacity: _tokens.opacities.quieter
+  },
+  '> input:not(:disabled) + label': {
+    cursor: 'pointer'
+  },
+  '> input:checked + label': {
+    backgroundColor: _tokens.colors.darken4,
+    color: _tokens.colors.white
+  },
+  '> input:not(:checked) + label': {
+    color: _tokens.colors.dark
+  },
+  '> input:not(:checked):not(:disabled) + label:hover': {
+    opacity: _tokens.opacities.quiet
+  }
+});
+var selectButtonsVariants = {
+  default: {
+    containerClassNameForVariant: baseContainerStyles,
+    optionClassNameForVariant: baseOptionStyles
+  }
+};
+var _default = exports.default = selectButtonsVariants;