@airtable/blocks 0.0.0-experimental-e5ab33b68-20250905 → 0.0.0-experimental-3e47d4d04-20250909

package/dist/{cjs → esm}/base/ui/table_picker.js

@@ -1,17 +1,10 @@
-"use strict";
+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 */ /** */
+import * as React from 'react';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import ModelPickerSelect from './model_picker_select';
 
-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.
  */
@@ -40,8 +33,8 @@ const TablePicker = (props, ref) => {
     ...restOfProps
   } = props;
   const selectedTable = table && !table.isDeleted ? table : null;
-  const sdk = (0, _sdk_context.useSdk)();
-  (0, _use_watchable.default)(sdk.base, ['tables']);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
   function _onChange(tableId) {
     if (onChange) {
       const newTable = tableId ? sdk.base.getTableByIdIfExists(tableId) : null;
@@ -56,7 +49,7 @@ const TablePicker = (props, ref) => {
   } else {
     placeholderToUse = placeholder;
   }
-  return /*#__PURE__*/React.createElement(_model_picker_select.default, _extends({}, restOfProps, {
+  return /*#__PURE__*/React.createElement(ModelPickerSelect, _extends({}, restOfProps, {
     ref: ref,
     models: sdk.base.tables,
     selectedModelId: selectedTable ? selectedTable.id : null,
@@ -68,4 +61,4 @@ const TablePicker = (props, ref) => {
 };
 const ForwardedRefTablePicker = /*#__PURE__*/React.forwardRef(TablePicker);
 ForwardedRefTablePicker.displayName = 'TablePicker';
-var _default = exports.default = ForwardedRefTablePicker;
+export default ForwardedRefTablePicker;

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

@@ -0,0 +1,55 @@
+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 */ /** */
+import * as React from 'react';
+import useSynced from '../../shared/ui/use_synced';
+import useWatchable from '../../shared/ui/use_watchable';
+import { useSdk } from '../../shared/ui/sdk_context';
+import TablePicker from './table_picker';
+
+/**
+ * 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] = useSynced(globalConfigKey);
+  const sdk = useSdk();
+  useWatchable(sdk.base, ['tables']);
+  return /*#__PURE__*/React.createElement(TablePicker, _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';
+export default ForwardedRefTablePickerSynced;

package/dist/{cjs → esm}/base/ui/text.js

@@ -1,20 +1,12 @@
-"use strict";
+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 */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import { createEnum } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+import getStylePropsForResponsiveProp from './system/utils/get_style_props_for_responsive_prop';
+import useTheme from './theme/use_theme';
 
-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:
  *
@@ -27,29 +19,29 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * Multi-line text such as body copy.
  */
 
-const TextVariant = exports.TextVariant = (0, _private_utils.createEnum)('default', 'paragraph');
+export const TextVariant = createEnum('default', 'paragraph');
 
 /**
  * Sizes for the {@link Text} component.
  */
 
-const TextSize = exports.TextSize = (0, _private_utils.createEnum)('small', 'default', 'large', 'xlarge');
+export const TextSize = createEnum('small', 'default', 'large', 'xlarge');
 /** */
 
 /** @internal */
-function useTextStyle(textSizeProp) {
+export function useTextStyle(textSizeProp) {
   let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TextVariant.default;
   const {
     textStyles
-  } = (0, _use_theme.default)();
+  } = useTheme();
   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);
+    styleProps = getStylePropsForResponsiveProp(textSizeProp, textSizesForVariant);
   }
-  return (0, _use_styled_system.default)(styleProps);
+  return useStyledSystem(styleProps);
 }
 
 /**
@@ -91,7 +83,7 @@ const Text = (props, ref) => {
     ...styleProps
   } = props;
   const classNameForTextStyle = useTextStyle(size, variant);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     textColor: 'default',
     fontFamily: 'default',
     ...styleProps
@@ -99,7 +91,7 @@ const Text = (props, ref) => {
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
     id: id,
-    className: (0, _emotion.cx)(classNameForTextStyle, classNameForStyleProps, className),
+    className: cx(classNameForTextStyle, classNameForStyleProps, className),
     style: style,
     role: role,
     "aria-label": ariaLabel,
@@ -114,4 +106,4 @@ const Text = (props, ref) => {
 };
 const ForwardedRefText = /*#__PURE__*/React.forwardRef(Text);
 ForwardedRefText.displayName = 'Text';
-var _default = exports.default = ForwardedRefText;
+export default ForwardedRefText;

package/dist/{cjs → esm}/base/ui/text_button.js

@@ -1,24 +1,17 @@
-"use strict";
+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 */ /** */
+import * as React from 'react';
+import { cx } from 'emotion';
+import { compose } from '@styled-system/core';
+import { createEnum } from '../../shared/private_utils';
+import useStyledSystem from './use_styled_system';
+import useTheme from './theme/use_theme';
+import { maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet, display } from './system';
+import { useTextStyle, TextSize } from './text';
+import Icon from './icon';
+import cssHelpers from './css_helpers';
+import Box from './box';
 
-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}
@@ -31,7 +24,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * @noInheritDoc
  */
 
-const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _system.minWidth, _system.width, _system.flexItemSet, _system.positionSet, _system.spacingSet);
+const styleParser = compose(display, maxWidth, minWidth, width, flexItemSet, positionSet, spacingSet);
 
 /**
  * Variants for the {@link TextButton} component:
@@ -49,14 +42,14 @@ const styleParser = (0, _core.compose)(_system.display, _system.maxWidth, _syste
  * Light gray text.
  */
 
-const TextButtonVariant = (0, _private_utils.createEnum)('default', 'dark', 'light');
+const TextButtonVariant = 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)();
+  } = useTheme();
   return textButtonVariants[variant];
 }
 
@@ -79,7 +72,7 @@ function useTextButtonVariant() {
  */
 const TextButton = (props, ref) => {
   const {
-    size = _text.TextSize.default,
+    size = TextSize.default,
     variant = TextButtonVariant.default,
     icon,
     children,
@@ -108,9 +101,9 @@ const TextButton = (props, ref) => {
     'aria-live': ariaLive,
     ...styleProps
   } = props;
-  const classNameForTextStyle = (0, _text.useTextStyle)(size);
+  const classNameForTextStyle = useTextStyle(size);
   const classNameForTextButtonVariant = useTextButtonVariant(variant);
-  const classNameForStyleProps = (0, _use_styled_system.default)({
+  const classNameForStyleProps = useStyledSystem({
     display: 'inline-flex',
     // Use a negative margin to undo the padding.
     padding: '0 0.1em',
@@ -157,7 +150,7 @@ const TextButton = (props, ref) => {
     onKeyDown: !disabled ? _onKeyDown : undefined,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
-    className: (0, _emotion.cx)(classNameForTextStyle,
+    className: cx(classNameForTextStyle,
     // TextButton goes 2nd because it overrides `fontWeight`.
     classNameForTextButtonVariant, classNameForStyleProps, className),
     style: style
@@ -178,19 +171,19 @@ const TextButton = (props, ref) => {
     "aria-haspopup": ariaHasPopup,
     "aria-hidden": ariaHidden,
     "aria-live": ariaLive
-  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(_icon.default, {
+  }, dataAttributes), typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     name: icon,
     flex: "none",
     size: "1em"
-  }) : icon, hasChildren && /*#__PURE__*/React.createElement(_box.default, {
+  }) : icon, hasChildren && /*#__PURE__*/React.createElement(Box, {
     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
+    className: cssHelpers.TRUNCATE
   }, children));
 };
 const ForwardedRefTextButton = /*#__PURE__*/React.forwardRef(TextButton);
 ForwardedRefTextButton.displayName = 'TextButton';
-var _default = exports.default = ForwardedRefTextButton;
+export default ForwardedRefTextButton;

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

@@ -0,0 +1,53 @@
+import { cx, css } from 'emotion';
+import { fontFamilies, colors, radii, opacities } from './tokens';
+const baseStyles = css({
+  fontFamily: fontFamilies.default,
+  borderRadius: 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: opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
+    }
+  },
+  '&:disabled': {
+    cursor: 'default',
+    opacity: opacities.quieter
+  }
+});
+const buttonVariants = {
+  default: cx(baseStyles, css({
+    color: colors.dark,
+    backgroundColor: colors.lightGray2
+  })),
+  primary: cx(baseStyles, css({
+    color: colors.white,
+    backgroundColor: colors.blueBright
+  })),
+  secondary: cx(baseStyles, css({
+    color: colors.dark,
+    backgroundColor: 'transparent',
+    '&:hover': {
+      backgroundColor: colors.lightGray2
+    }
+  })),
+  danger: cx(baseStyles, css({
+    color: colors.white,
+    backgroundColor: colors.redBright
+  }))
+};
+export default buttonVariants;

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

@@ -1,9 +1,3 @@
-"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,
@@ -24,7 +18,7 @@ const sharedControlSizes = {
     lineHeight: '21px'
   }
 };
-const buttonSizes = exports.buttonSizes = {
+export const buttonSizes = {
   small: {
     ...sharedControlSizes.small,
     paddingX: '10px'
@@ -38,7 +32,7 @@ const buttonSizes = exports.buttonSizes = {
     paddingX: '14px'
   }
 };
-const selectSizes = exports.selectSizes = {
+export const selectSizes = {
   small: {
     ...sharedControlSizes.small,
     paddingLeft: '8px',
@@ -58,7 +52,7 @@ const selectSizes = exports.selectSizes = {
     backgroundPosition: 'calc(100% - 12px)'
   }
 };
-const inputSizes = exports.inputSizes = {
+export const inputSizes = {
   small: {
     ...sharedControlSizes.small,
     paddingX: '8px'
@@ -72,7 +66,7 @@ const inputSizes = exports.inputSizes = {
     paddingX: '12px'
   }
 };
-const selectButtonsSizes = exports.selectButtonsSizes = {
+export const selectButtonsSizes = {
   small: {
     ...sharedControlSizes.small,
     padding: 1
@@ -86,7 +80,7 @@ const selectButtonsSizes = exports.selectButtonsSizes = {
     padding: 1
   }
 };
-const switchSizes = exports.switchSizes = {
+export const switchSizes = {
   small: {
     ...sharedControlSizes.small,
     paddingX: '8px'

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /** @hidden */
 
 /** @hidden */
@@ -96,4 +90,4 @@ const headingStyles = {
     // Bigger all caps heading sizes are are omitted since they are not desirable.
   }
 };
-var _default = exports.default = headingStyles;
+export default headingStyles;

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

@@ -0,0 +1,31 @@
+import * as tokens from './tokens';
+import * as controlSizes from './control_sizes';
+// Typography sizes and variants
+import textStyles from './text_styles';
+import headingStyles from './heading_styles';
+// Component variants
+import buttonVariants from './button_variants';
+import linkVariants from './link_variants';
+import inputVariants from './input_variants';
+import switchVariants from './switch_variants';
+import selectVariants from './select_variants';
+import selectButtonsVariants from './select_buttons_variants';
+import textButtonVariants from './text_button_variants';
+const theme = {
+  ...tokens,
+  ...controlSizes,
+  textStyles,
+  headingStyles,
+  // 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,
+  linkVariants,
+  inputVariants,
+  selectVariants,
+  selectButtonsVariants,
+  switchVariants,
+  textButtonVariants
+};
+export default theme;

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

@@ -0,0 +1,32 @@
+import { cx, css } from 'emotion';
+import { fontFamilies, colors, radii, opacities } from './tokens';
+const baseInputStyles = css({
+  borderRadius: radii.default,
+  boxSizing: 'border-box',
+  fontFamily: fontFamilies.default,
+  fontWeight: 400,
+  appearance: 'none',
+  outline: 'none',
+  border: 'none',
+  '&:not(:disabled)': {
+    '&:hover': {
+      opacity: opacities.quiet
+    },
+    '&:active': {
+      opacity: 1
+    },
+    '&:focus': {
+      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
+    }
+  },
+  '&:disabled': {
+    opacity: opacities.quieter
+  }
+});
+const inputVariants = {
+  default: cx(baseInputStyles, css({
+    color: colors.dark,
+    backgroundColor: colors.lightGray2
+  }))
+};
+export default inputVariants;

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

@@ -0,0 +1,29 @@
+import { css, cx } from 'emotion';
+import { colors, radii, opacities } from './tokens';
+const baseStyles = css({
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: radii.default,
+  outline: 'none',
+  '&:hover': {
+    opacity: opacities.quiet
+  },
+  '&:active': {
+    opacity: 1
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${colors.darken3}`
+  }
+});
+const linkVariants = {
+  default: cx(baseStyles, css({
+    color: colors.blueBright
+  })),
+  dark: cx(baseStyles, css({
+    color: colors.dark
+  })),
+  light: cx(baseStyles, css({
+    color: colors.light
+  }))
+};
+export default linkVariants;

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

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

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

@@ -1,20 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _tokens = require("./tokens");
+import { cx, css } from 'emotion';
+import { fontFamilies, colors, radii, opacities } from './tokens';
 const styleForChevron = {
   // https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
   // You can use https://www.npmjs.com/package/mini-svg-data-uri to generate the `background-image` from a svg.
   backgroundImage: `url("data:image/svg+xml,%3csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.601.8h4.8a.6.6 0 01.48.96l-2.4 3.2a.6.6 0 01-.96 0l-2.4-3.2A.6.6 0 01.601.8z' fill='rgba(0%2c 0%2c 0%2c 0.5)'/%3e%3c/svg%3e")`,
   backgroundRepeat: 'no-repeat'
 };
-const baseStyles = (0, _emotion.css)({
-  fontFamily: _tokens.fontFamilies.default,
-  borderRadius: _tokens.radii.default,
+const baseStyles = css({
+  fontFamily: fontFamilies.default,
+  borderRadius: radii.default,
   justifyContent: 'center',
   alignItems: 'center',
   paddingTop: 0,
@@ -27,24 +21,24 @@ const baseStyles = (0, _emotion.css)({
   '&:not(:disabled)': {
     cursor: 'pointer',
     '&:hover': {
-      opacity: _tokens.opacities.quiet
+      opacity: opacities.quiet
     },
     '&:active': {
       opacity: 1
     },
     '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
+      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
     }
   },
   '&:disabled': {
     cursor: 'default',
-    opacity: _tokens.opacities.quieter
+    opacity: opacities.quieter
   }
 });
 const selectVariants = {
-  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.dark,
-    backgroundColor: _tokens.colors.lightGray2
+  default: cx(baseStyles, css({
+    color: colors.dark,
+    backgroundColor: colors.lightGray2
   }))
 };
-var _default = exports.default = selectVariants;
+export default selectVariants;