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

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

@@ -1,211 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.textColorsByBackgroundColor = exports.textColors = exports.space = exports.radii = exports.opacities = exports.fontWeights = exports.fontSizes = exports.fontFamilies = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
-const colors = exports.colors = {
-  // neutrals
-  white: 'hsl(0, 0%, 100%)',
-  dark: 'hsl(0, 0%, 20%)',
-  // light is the lightest text color possible.
-  light: 'hsl(0, 0%, 46%)',
-  // Light grays are solid colors used for backgrounds primarily.
-  lightGray1: 'hsl(0, 0%, 98%)',
-  lightGray2: 'hsl(0, 0%, 95%)',
-  lightGray3: 'hsl(0, 0%, 91%)',
-  lightGray4: 'hsl(0, 0%, 88%)',
-  lighten1: 'hsla(0, 0%, 100%, 0.05)',
-  lighten2: 'hsla(0, 0%, 100%, 0.1)',
-  lighten3: 'hsla(0, 0%, 100%, 0.25)',
-  lighten4: 'hsla(0, 0%, 100%, 0.5)',
-  darken1: 'hsla(0, 0%, 0%, 0.05)',
-  darken2: 'hsla(0, 0%, 0%, 0.1)',
-  darken3: 'hsla(0, 0%, 0%, 0.25)',
-  darken4: 'hsla(0, 0%, 0%, 0.5)',
-  // blue
-  blueBright: 'rgb(45, 127, 249)',
-  blue: 'rgb(18, 131, 218)',
-  blueDark1: 'rgb(39, 80, 174)',
-  blueLight1: 'rgb(156, 199, 255)',
-  blueLight2: 'rgb(207, 223, 255)',
-  // cyan
-  cyanBright: 'rgb(24, 191, 255)',
-  cyan: 'rgb(1, 169, 219)',
-  cyanDark1: 'rgb(11, 118, 183)',
-  cyanLight1: 'rgb(119, 209, 243)',
-  cyanLight2: 'rgb(208, 240, 253)',
-  // gray
-  grayBright: 'rgb(102, 102, 102)',
-  gray: 'rgb(102, 102, 102)',
-  grayDark1: 'rgb(68, 68, 68)',
-  grayLight1: 'rgb(204, 204, 204)',
-  grayLight2: 'rgb(238, 238, 238)',
-  // green
-  greenBright: 'rgb(32, 201, 51)',
-  green: 'rgb(17, 175, 34)',
-  greenDark1: 'rgb(51, 138, 23)',
-  greenLight1: 'rgb(147, 224, 136)',
-  greenLight2: 'rgb(209, 247, 196)',
-  // orange
-  orangeBright: 'rgb(255, 111, 44)',
-  orange: 'rgb(247, 101, 59)',
-  orangeDark1: 'rgb(215, 77, 38)',
-  orangeLight1: 'rgb(255, 169, 129)',
-  orangeLight2: 'rgb(254, 226, 213)',
-  // pink
-  pinkBright: 'rgb(255, 8, 194)',
-  pink: 'rgb(233, 41, 186)',
-  pinkDark1: 'rgb(178, 21, 139)',
-  pinkLight1: 'rgb(249, 157, 226)',
-  pinkLight2: 'rgb(255, 218, 246)',
-  // purple
-  purpleBright: 'rgb(139, 70, 255)',
-  purple: 'rgb(124, 57, 237)',
-  purpleDark1: 'rgb(107, 28, 176)',
-  purpleLight1: 'rgb(205, 176, 255)',
-  purpleLight2: 'rgb(237, 226, 254)',
-  // red
-  redBright: 'rgb(248, 43, 96)',
-  red: 'rgb(229, 46, 77)',
-  redDark1: 'rgb(186, 30, 69)',
-  redLight1: 'rgb(255, 158, 183)',
-  redLight2: 'rgb(255, 220, 229)',
-  // teal
-  tealBright: 'rgb(32, 217, 210)',
-  teal: 'rgb(2, 170, 164)',
-  tealDark1: 'rgb(6, 160, 155)',
-  tealLight1: 'rgb(114, 221, 195)',
-  tealLight2: 'rgb(194, 245, 233)',
-  // yellow
-  yellowBright: 'rgb(252, 180, 0)',
-  yellow: 'rgb(224, 141, 0)',
-  yellowDark1: 'rgb(184, 117, 3)',
-  yellowLight1: 'rgb(255, 214, 110)',
-  yellowLight2: 'rgb(255, 234, 182)'
-};
-const textColorsByBackgroundColor = exports.textColorsByBackgroundColor = {
-  // blue bg
-  blueBright: 'white',
-  blue: 'white',
-  blueDark1: 'rgb(207, 223, 255)',
-  blueLight1: 'rgb(0, 0, 60)',
-  blueLight2: 'rgb(0, 0, 60)',
-  // cyan bg
-  cyanBright: 'white',
-  cyan: 'white',
-  cyanDark1: 'rgb(208, 240, 253)',
-  cyanLight1: 'rgb(0, 17, 68)',
-  cyanLight2: 'rgb(0, 17, 68)',
-  // gray bg
-  grayBright: 'white',
-  gray: 'white',
-  grayDark1: 'rgb(238, 238, 238)',
-  grayLight1: 'rgb(0, 0, 0)',
-  grayLight2: 'rgb(0, 0, 0)',
-  // green bg
-  greenBright: 'white',
-  green: 'white',
-  greenDark1: 'rgb(209, 247, 196)',
-  greenLight1: 'rgb(0, 34, 0)',
-  greenLight2: 'rgb(0, 34, 0)',
-  // orange bg
-  orangeBright: 'white',
-  orange: 'white',
-  orangeDark1: 'rgb(254, 226, 213)',
-  orangeLight1: 'rgb(83, 0, 0)',
-  orangeLight2: 'rgb(83, 0, 0)',
-  // pink bg
-  pinkBright: 'white',
-  pink: 'white',
-  pinkDark1: 'rgb(255, 218, 246)',
-  pinkLight1: 'rgb(58, 0, 33)',
-  pinkLight2: 'rgb(58, 0, 33)',
-  // purple bg
-  purpleBright: 'white',
-  purple: 'white',
-  purpleDark1: 'rgb(237, 226, 254)',
-  purpleLight1: 'rgb(12, 0, 62)',
-  purpleLight2: 'rgb(12, 0, 62)',
-  // red bg
-  redBright: 'white',
-  red: 'white',
-  redDark1: 'rgb(255, 220, 229)',
-  redLight1: 'rgb(64, 0, 0)',
-  redLight2: 'rgb(64, 0, 0)',
-  // teal bg
-  tealBright: 'white',
-  teal: 'white',
-  tealDark1: 'rgb(194, 245, 233)',
-  tealLight1: 'rgb(0, 47, 46)',
-  tealLight2: 'rgb(0, 47, 46)',
-  // yellow bg
-  yellowBright: 'white',
-  yellow: 'white',
-  yellowDark1: 'rgb(255, 234, 182)',
-  yellowLight1: 'rgb(66, 10, 0)',
-  yellowLight2: 'rgb(66, 10, 0)'
-};
-const textColors = exports.textColors = {
-  dark: colors.dark,
-  default: colors.dark,
-  light: colors.light
-};
-const breakpoints = exports.breakpoints = {
-  xsmallViewport: '480px',
-  smallViewport: '640px',
-  mediumViewport: '832px',
-  largeViewport: '1152px'
-};
-const borderWidths = exports.borderWidths = {
-  default: '1px',
-  thick: '2px'
-};
-const borders = exports.borders = {
-  default: `1px solid ${colors.darken2}`,
-  thick: `2px solid ${colors.darken2}`
-};
-const fontFamilies = exports.fontFamilies = {
-  default: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-  monospace: ' Menlo, Courier, monospace'
-};
-
-// On Mac OS X when `-apple-system` is used, two different fonts are rendered at different font sizes.
-// SF Pro Text is used under 21px (0-5) and SF Pro Display is used from 21px and up (6-9).
-// SF Pro Text visually looks slightly bigger than SF Pro Display.
-const fontSizes = exports.fontSizes = ['9px',
-// 0
-'11px',
-// 1
-'13px',
-// 2
-'15px',
-// 3
-'17px',
-// 4
-'19px',
-// 5
-'21px',
-// 6
-'23px',
-// 7
-'27px',
-// 8
-'35px' // 9
-];
-const fontWeights = exports.fontWeights = {
-  strong: 500
-};
-const opacities = exports.opacities = {
-  normal: 1,
-  quiet: 0.75,
-  quieter: 0.5,
-  quietest: 0.25,
-  invisible: 0
-};
-const radii = exports.radii = {
-  default: 3,
-  large: 6,
-  circle: 9999
-};
-const space = exports.space = [0, 4, 8, 16, 32, 64, 128];

package/dist/cjs/base/ui/theme/theme_context.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _default_theme = _interopRequireDefault(require("./default_theme"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** @hidden */
-
-const ThemeContext = /*#__PURE__*/(0, _react.createContext)(_default_theme.default);
-var _default = exports.default = ThemeContext;

package/dist/cjs/base/ui/theme/use_theme.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _theme_context = _interopRequireDefault(require("./theme_context"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const useTheme = () => (0, _react.useContext)(_theme_context.default);
-var _default = exports.default = useTheme;

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

@@ -1,175 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _emotion = require("emotion");
-var React = _interopRequireWildcard(require("react"));
-var _baymax_utils = require("./baymax_utils");
-var _popover = _interopRequireDefault(require("./popover"));
-var _text = _interopRequireDefault(require("./text"));
-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; }
-/** @module @airtable/blocks/ui: Tooltip */ /** */
-
-const FADE_IN_ANIMATION_DURATION = 150;
-
-/**
- * Props for the {@link Tooltip} component.
- *
- * @docsPath UI/components/Tooltip
- */
-
-/** @hidden */
-
-/**
- * A component that renders a tooltip on hover. Wraps its children.
- *
- * [[ Story id="tooltip--example" title="Tooltip example" ]]
- *
- * @docsPath UI/components/Tooltip
- * @component
- */
-class Tooltip extends React.Component {
-  /** @hidden */
-  static placements = _popover.default.placements;
-  /** @hidden */
-  static fitInWindowModes = _popover.default.fitInWindowModes;
-
-  /** @hidden */
-  static defaultProps = {
-    placementX: _popover.default.placements.RIGHT,
-    placementY: _popover.default.placements.CENTER,
-    placementOffsetX: 8,
-    placementOffsetY: 8,
-    fitInWindowMode: _popover.default.fitInWindowModes.FLIP
-  };
-  /** @hidden */
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowingTooltip: false
-    };
-    this._onMouseEnter = this._onMouseEnter.bind(this);
-    this._onMouseLeave = this._onMouseLeave.bind(this);
-    this._onClick = this._onClick.bind(this);
-    this._showTooltip = this._showTooltip.bind(this);
-    this._hideTooltip = this._hideTooltip.bind(this);
-    this._renderTooltipContent = this._renderTooltipContent.bind(this);
-  }
-  /** @internal */
-  _onMouseEnter(e) {
-    this._showTooltip();
-    const originalOnMouseEnter = this.props.children.props.onMouseEnter;
-    if (originalOnMouseEnter) {
-      originalOnMouseEnter(e);
-    }
-  }
-  /** @internal */
-  _onMouseLeave(e) {
-    this._hideTooltip();
-    const originalOnMouseLeave = this.props.children.props.onMouseLeave;
-    if (originalOnMouseLeave) {
-      originalOnMouseLeave(e);
-    }
-  }
-  /** @internal */
-  _onClick(e) {
-    const {
-      shouldHideTooltipOnClick,
-      children
-    } = this.props;
-    if (shouldHideTooltipOnClick) {
-      this._hideTooltip();
-    }
-    const originalOnClick = children.props.onClick;
-    if (originalOnClick) {
-      originalOnClick(e);
-    }
-  }
-  /** @internal */
-  _showTooltip() {
-    this.setState({
-      isShowingTooltip: true
-    });
-  }
-  /** @internal */
-  _hideTooltip() {
-    this.setState({
-      isShowingTooltip: false
-    });
-  }
-  /** @internal */
-  _renderTooltipContent() {
-    const {
-      content,
-      className,
-      style
-    } = this.props;
-    let renderedContent;
-    let isContentAFunction;
-    if (typeof content === 'function') {
-      renderedContent = content();
-      isContentAFunction = true;
-    } else {
-      renderedContent = content;
-      isContentAFunction = false;
-    }
-    return /*#__PURE__*/React.createElement(_text.default, {
-      className: (0, _emotion.cx)((0, _baymax_utils.baymax)('nowrap'), className),
-      style: style,
-      position: "relative"
-      // Add padding only when using content.
-      ,
-      padding: isContentAFunction ? null : 2,
-      backgroundColor: "dark",
-      textColor: "white",
-      borderRadius: "default",
-      overflow: "hidden"
-    }, renderedContent);
-  }
-  /** @hidden */
-  render() {
-    const {
-      children,
-      content,
-      disabled
-    } = this.props;
-    if (disabled || !content) {
-      // The tooltip will never show, so just return the children.
-      return children;
-    }
-    const popoverAnchor = /*#__PURE__*/React.cloneElement(React.Children.only(children), {
-      onMouseEnter: this._onMouseEnter,
-      onMouseLeave: this._onMouseLeave,
-      onClick: this._onClick,
-      // Specifically for RecordCard, which needs to know if onClick is defined.
-      hasOnClick: children.props.onClick !== undefined
-    });
-    return /*#__PURE__*/React.createElement(_popover.default, {
-      renderContent: this._renderTooltipContent,
-      placementX: this.props.placementX,
-      placementY: this.props.placementY,
-      placementOffsetX: this.props.placementOffsetX,
-      placementOffsetY: this.props.placementOffsetY,
-      fitInWindowMode: this.props.fitInWindowMode,
-      isOpen: this.state.isShowingTooltip,
-      backgroundStyle: {
-        // Override the background style of the popover so that it doesn't
-        // take up any space. If we don't do this, the mouseEnter and mouseLeave
-        // handlers won't work, since showing the Popover would place a div over
-        // the content that we care about.
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-        animationName: 'opacityFadeIn',
-        animationDuration: `${FADE_IN_ANIMATION_DURATION}ms`,
-        animationTimingFunction: 'ease-out'
-      }
-    }, popoverAnchor);
-  }
-}
-var _default = exports.default = Tooltip;

package/dist/cjs/base/ui/types/aria_props.js

@@ -1 +0,0 @@
-"use strict";

package/dist/cjs/base/ui/types/data_attributes_prop.js

@@ -1 +0,0 @@
-"use strict";

package/dist/cjs/base/ui/types/tooltip_anchor_props.js

@@ -1 +0,0 @@
-"use strict";