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

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

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/** @hidden */
-
-/** @hidden */
-
-const 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

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 _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; }
-// Typography sizes and variants
-
-// Component variants
-
-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.
-  // 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

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

@@ -1,35 +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)({
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: _tokens.radii.default,
-  outline: 'none',
-  '&:hover': {
-    opacity: _tokens.opacities.quiet
-  },
-  '&:active': {
-    opacity: 1
-  },
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${_tokens.colors.darken3}`
-  }
-});
-const 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

@@ -1,72 +0,0 @@
-"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,
-  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 ${_tokens.colors.darken3}`
-  },
-  '&[data-disabled="true"]': {
-    opacity: _tokens.opacities.quieter,
-    cursor: 'default'
-  }
-});
-const 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
-  }
-});
-const selectButtonsVariants = {
-  default: {
-    containerClassNameForVariant: baseContainerStyles,
-    optionClassNameForVariant: baseOptionStyles
-  }
-};
-var _default = exports.default = selectButtonsVariants;

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

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _tokens = require("./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,
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingTop: 0,
-  paddingBottom: 0,
-  fontWeight: 400,
-  outline: 'none',
-  appearance: 'none',
-  border: 'none',
-  ...styleForChevron,
-  '&: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 selectVariants = {
-  default: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-    color: _tokens.colors.dark,
-    backgroundColor: _tokens.colors.lightGray2
-  }))
-};
-var _default = exports.default = selectVariants;

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

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _css_helpers = _interopRequireDefault(require("../../css_helpers"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SWITCH_WIDTH = 20;
-const SWITCH_HEIGHT = 12;
-const SWITCH_PADDING = 2;
-const CIRCLE_SIZE = SWITCH_HEIGHT - 2 * SWITCH_PADDING;
-const switchClassName = (0, _emotion.css)({
-  width: CIRCLE_SIZE,
-  height: CIRCLE_SIZE,
-  transition: '0.085s all ease-in',
-  borderRadius: _tokens.radii.circle,
-  backgroundColor: _tokens.colors.white
-});
-const switchContainerClassName = (0, _emotion.css)({
-  flex: 'none',
-  width: SWITCH_WIDTH,
-  height: SWITCH_HEIGHT,
-  padding: SWITCH_PADDING,
-  transition: '0.085s all ease-in',
-  boxSizing: 'border-box',
-  borderRadius: _tokens.radii.circle,
-  backgroundColor: _tokens.colors.darken2
-});
-const switchLabelClassName = (0, _emotion.css)({
-  cursor: 'inherit',
-  userSelect: 'none',
-  marginLeft: _tokens.space[2],
-  color: _tokens.colors.dark,
-  flex: 'auto'
-});
-const baseStyles = (0, _emotion.css)({
-  alignItems: 'center',
-  borderRadius: _tokens.radii.default,
-  boxSizing: 'border-box',
-  outline: 'none',
-  fontFamily: _tokens.fontFamilies.default,
-  backgroundColor: _tokens.colors.lightGray2,
-  '&[aria-disabled="true"]': {
-    opacity: _tokens.opacities.quieter
-  },
-  '&:not([aria-disabled="true"])': {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: _tokens.opacities.quiet
-    },
-    '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${_tokens.colors.darken3}`
-    }
-  },
-  [`&[aria-checked="true"] .${switchClassName}`]: {
-    transform: 'translateX(100%)'
-  }
-});
-const subcomponentClassNames = {
-  switchClassName,
-  switchContainerClassName,
-  switchLabelClassName: (0, _emotion.cx)(switchLabelClassName, _css_helpers.default.TRUNCATE)
-};
-const switchVariants = {
-  default: {
-    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
-        backgroundColor: _tokens.colors.greenBright
-      }
-    })),
-    ...subcomponentClassNames
-  },
-  danger: {
-    baseClassName: (0, _emotion.cx)(baseStyles, (0, _emotion.css)({
-      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
-        backgroundColor: _tokens.colors.redBright
-      }
-    })),
-    ...subcomponentClassNames
-  }
-};
-var _default = exports.default = switchVariants;

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

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var _tokens = require("./tokens");
-const NOT_DISABLED = '&:not([aria-disabled="true"])';
-const DISABLED = '&[aria-disabled="true"]';
-const baseStyles = (0, _emotion.css)({
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: _tokens.radii.default,
-  outline: 'none',
-  fontWeight: _tokens.fontWeights.strong,
-  [NOT_DISABLED]: {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: _tokens.opacities.quiet
-    },
-    '&:active': {
-      opacity: 1
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${_tokens.colors.darken3}`
-    }
-  },
-  [DISABLED]: {
-    opacity: _tokens.opacities.quieter
-  }
-});
-const textButtonVariants = {
-  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 = textButtonVariants;

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

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-const textStyles = {
-  default: {
-    small: {
-      fontSize: 1,
-      lineHeight: '14px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    default: {
-      fontSize: 2,
-      lineHeight: '16px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    large: {
-      fontSize: 3,
-      lineHeight: '20px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    xlarge: {
-      fontSize: 4,
-      lineHeight: '24px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    }
-  },
-  paragraph: {
-    small: {
-      fontSize: 1,
-      lineHeight: '16px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    default: {
-      fontSize: 2,
-      lineHeight: '20px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    large: {
-      fontSize: 3,
-      lineHeight: '22px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    xlarge: {
-      fontSize: 4,
-      lineHeight: '26px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    }
-  }
-};
-var _default = exports.default = textStyles;