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

package/dist/esm/base/ui/system/index.js

@@ -0,0 +1,96 @@
+/** @ignore */ /** */
+// All contents in this file are ordered alphabetically.
+
+// Appearance Set
+
+export { appearanceSet } from './appearance/appearance_set';
+// -- Individual properties
+
+export { backgroundColor } from './appearance/background_color';
+export { borderRadius } from './appearance/border_radius';
+export { border } from './appearance/border';
+export { boxShadow } from './appearance/box_shadow';
+export { opacity } from './appearance/opacity';
+
+// Dimensions Set
+
+export { dimensionsSet } from './dimensions/dimensions_set';
+// -- Individual properties
+
+export { height } from './dimensions/height';
+export { maxHeight } from './dimensions/max_height';
+export { maxWidth } from './dimensions/max_width';
+export { minHeight } from './dimensions/min_height';
+export { minWidth } from './dimensions/min_width';
+export { width } from './dimensions/width';
+
+// Flex Container Set
+
+export { flexContainerSet } from './flex_container/flex_container_set';
+// -- Individual properties
+
+export { alignContent } from './flex_container/align_content';
+export { alignItems } from './flex_container/align_items';
+export { flexDirection } from './flex_container/flex_direction';
+export { flexWrap } from './flex_container/flex_wrap';
+export { justifyContent } from './flex_container/justify_content';
+export { justifyItems } from './flex_container/justify_items';
+
+// Flex Item Set
+
+export { flexItemSet } from './flex_item/flex_item_set';
+// -- Individual properties
+
+export { alignSelf } from './flex_item/align_self';
+export { flexBasis } from './flex_item/flex_basis';
+export { flexGrow } from './flex_item/flex_grow';
+export { flexShrink } from './flex_item/flex_shrink';
+export { flex } from './flex_item/flex';
+export { justifySelf } from './flex_item/justify_self';
+export { order } from './flex_item/order';
+
+// Position Set
+
+export { positionSet } from './position/position_set';
+// -- Individual properties
+
+export { bottom } from './position/bottom';
+export { left } from './position/left';
+export { position } from './position/position';
+export { right } from './position/right';
+export { top } from './position/top';
+export { zIndex } from './position/z_index';
+
+// Spacing
+
+export { spacingSet } from './spacing/spacing_set';
+// -- Individual properties
+
+export { margin } from './spacing/margin';
+export { padding } from './spacing/padding';
+
+// Typography Set
+
+export { typographySet } from './typography/typography_set';
+// -- Individual properties
+
+export { fontFamily } from './typography/font_family';
+export { fontSize } from './typography/font_size';
+export { fontStyle } from './typography/font_style';
+export { fontWeight } from './typography/font_weight';
+export { letterSpacing } from './typography/letter_spacing';
+export { lineHeight } from './typography/line_height';
+export { textAlign } from './typography/text_align';
+export { textColor } from './typography/text_color';
+export { textDecoration } from './typography/text_decoration';
+export { textTransform } from './typography/text_transform';
+
+// Standalone
+
+export { display } from './display';
+export { overflow } from './overflow';
+
+// All Styles
+// It's important this is at the bottom of the file.
+
+export { allStylesParser } from './all_styles_set';

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

@@ -1,11 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.overflow = void 0;
-var _core = require("@styled-system/core");
 /** @module @airtable/blocks/ui/system: Overflow */ /** */
+import { system } from '@styled-system/core';
 
 /**
  * Style props for the overflow behavior of an element.
@@ -18,4 +12,4 @@ const config = {
   overflowY: true,
   overflowX: true
 };
-const overflow = exports.overflow = (0, _core.system)(config);
+export const overflow = system(config);

package/dist/esm/base/ui/system/position/bottom.js

@@ -0,0 +1,17 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
+
+/** */
+
+export const config = {
+  bottom: {
+    property: 'bottom',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'bottom',
+      shouldAllowNegativeNumbers: true
+    })
+  }
+};
+export const bottom = system(config);

package/dist/esm/base/ui/system/position/left.js

@@ -0,0 +1,17 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
+
+/** */
+
+export const config = {
+  left: {
+    property: 'left',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'left',
+      shouldAllowNegativeNumbers: true
+    })
+  }
+};
+export const left = system(config);

package/dist/esm/base/ui/system/position/position.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  position: true
+};
+export const position = system(config);

package/dist/esm/base/ui/system/position/position_set.js

@@ -0,0 +1,23 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+import { config as positionConfig } from './position';
+import { config as topConfig } from './top';
+import { config as rightConfig } from './right';
+import { config as bottomConfig } from './bottom';
+import { config as leftConfig } from './left';
+import { config as zIndexConfig } from './z_index';
+
+/**
+ * Style props for the position of an element.
+ *
+ * @docsPath UI/Style System/Position
+ */
+
+export const positionSet = system({
+  ...positionConfig,
+  ...topConfig,
+  ...rightConfig,
+  ...bottomConfig,
+  ...leftConfig,
+  ...zIndexConfig
+});

package/dist/esm/base/ui/system/position/right.js

@@ -0,0 +1,17 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
+
+/** */
+
+export const config = {
+  right: {
+    property: 'right',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'right',
+      shouldAllowNegativeNumbers: true
+    })
+  }
+};
+export const right = system(config);

package/dist/esm/base/ui/system/position/top.js

@@ -0,0 +1,17 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
+
+/** */
+
+export const config = {
+  top: {
+    property: 'top',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'top',
+      shouldAllowNegativeNumbers: true
+    })
+  }
+};
+export const top = system(config);

package/dist/esm/base/ui/system/position/z_index.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Position */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  zIndex: {
+    property: 'zIndex',
+    scale: 'zIndices'
+  }
+};
+export const zIndex = system(config);

package/dist/{cjs → esm}/base/ui/system/spacing/margin.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.margin = exports.config = void 0;
-var _core = require("@styled-system/core");
-var _ensure_numbers_are_within_scale = _interopRequireDefault(require("../utils/ensure_numbers_are_within_scale"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /** @module @airtable/blocks/ui/system: Spacing */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
 
 /** */
 
-const config = exports.config = {
+export const config = {
   margin: {
     property: 'margin',
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'margin',
       shouldAllowNegativeNumbers: true
     })
@@ -23,7 +16,7 @@ const config = exports.config = {
   marginTop: {
     property: 'marginTop',
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginTop',
       shouldAllowNegativeNumbers: true
     })
@@ -31,7 +24,7 @@ const config = exports.config = {
   marginRight: {
     property: 'marginRight',
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginRight',
       shouldAllowNegativeNumbers: true
     })
@@ -39,7 +32,7 @@ const config = exports.config = {
   marginBottom: {
     property: 'marginBottom',
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginBottom',
       shouldAllowNegativeNumbers: true
     })
@@ -47,7 +40,7 @@ const config = exports.config = {
   marginLeft: {
     property: 'marginLeft',
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginLeft',
       shouldAllowNegativeNumbers: true
     })
@@ -55,7 +48,7 @@ const config = exports.config = {
   marginX: {
     properties: ['marginLeft', 'marginRight'],
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginX',
       shouldAllowNegativeNumbers: true
     })
@@ -63,10 +56,10 @@ const config = exports.config = {
   marginY: {
     properties: ['marginTop', 'marginBottom'],
     scale: 'space',
-    transform: (0, _ensure_numbers_are_within_scale.default)({
+    transform: ensureNumbersAreWithinScale({
       propertyName: 'marginY',
       shouldAllowNegativeNumbers: true
     })
   }
 };
-const margin = exports.margin = (0, _core.system)(config);
+export const margin = system(config);

package/dist/esm/base/ui/system/spacing/padding.js

@@ -0,0 +1,58 @@
+/** @module @airtable/blocks/ui/system: Spacing */ /** */
+import { system } from '@styled-system/core';
+import ensureNumbersAreWithinScale from '../utils/ensure_numbers_are_within_scale';
+
+/** */
+
+export const config = {
+  padding: {
+    property: 'padding',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'padding'
+    })
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingTop'
+    })
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingRight'
+    })
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingBottom'
+    })
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingLeft'
+    })
+  },
+  paddingX: {
+    properties: ['paddingLeft', 'paddingRight'],
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingX'
+    })
+  },
+  paddingY: {
+    properties: ['paddingTop', 'paddingBottom'],
+    scale: 'space',
+    transform: ensureNumbersAreWithinScale({
+      propertyName: 'paddingY'
+    })
+  }
+};
+export const padding = system(config);

package/dist/esm/base/ui/system/spacing/spacing_set.js

@@ -0,0 +1,15 @@
+/** @module @airtable/blocks/ui/system: Spacing */ /** */
+import { system } from '@styled-system/core';
+import { config as marginConfig } from './margin';
+import { config as paddingConfig } from './padding';
+
+/**
+ * Style props for the spacing of an element.
+ *
+ * @docsPath UI/Style System/Spacing
+ */
+
+export const spacingSet = system({
+  ...marginConfig,
+  ...paddingConfig
+});

package/dist/esm/base/ui/system/typography/font_family.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  fontFamily: {
+    property: 'fontFamily',
+    scale: 'fontFamilies'
+  }
+};
+export const fontFamily = system(config);

package/dist/esm/base/ui/system/typography/font_size.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  fontSize: {
+    property: 'fontSize',
+    scale: 'fontSizes'
+  }
+};
+export const fontSize = system(config);

package/dist/esm/base/ui/system/typography/font_style.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  fontStyle: true
+};
+export const fontStyle = system(config);

package/dist/esm/base/ui/system/typography/font_weight.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  fontWeight: {
+    property: 'fontWeight',
+    scale: 'fontWeights'
+  }
+};
+export const fontWeight = system(config);

package/dist/esm/base/ui/system/typography/letter_spacing.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  letterSpacing: {
+    property: 'letterSpacing',
+    scale: 'letterSpacing'
+  }
+};
+export const letterSpacing = system(config);

package/dist/esm/base/ui/system/typography/line_height.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  lineHeight: true
+};
+export const lineHeight = system(config);

package/dist/esm/base/ui/system/typography/text_align.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  textAlign: true
+};
+export const textAlign = system(config);

package/dist/esm/base/ui/system/typography/text_color.js

@@ -0,0 +1,12 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  textColor: {
+    property: 'color',
+    scale: 'textColors'
+  }
+};
+export const textColor = system(config);

package/dist/esm/base/ui/system/typography/text_decoration.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  textDecoration: true
+};
+export const textDecoration = system(config);

package/dist/esm/base/ui/system/typography/text_transform.js

@@ -0,0 +1,9 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+
+/** */
+
+export const config = {
+  textTransform: true
+};
+export const textTransform = system(config);

package/dist/esm/base/ui/system/typography/typography_set.js

@@ -0,0 +1,31 @@
+/** @module @airtable/blocks/ui/system: Typography */ /** */
+import { system } from '@styled-system/core';
+import { config as fontFamilyConfig } from './font_family';
+import { config as fontSizeConfig } from './font_size';
+import { config as fontStyleConfig } from './font_style';
+import { config as fontWeightConfig } from './font_weight';
+import { config as letterSpacingConfig } from './letter_spacing';
+import { config as lineHeightConfig } from './line_height';
+import { config as textAlignConfig } from './text_align';
+import { config as textColorConfig } from './text_color';
+import { config as textDecorationConfig } from './text_decoration';
+import { config as textTransformConfig } from './text_transform';
+
+/**
+ * Style props for the typography of an element.
+ *
+ * @docsPath UI/Style System/Typography
+ */
+
+export const typographySet = system({
+  ...fontFamilyConfig,
+  ...fontSizeConfig,
+  ...fontStyleConfig,
+  ...fontWeightConfig,
+  ...letterSpacingConfig,
+  ...lineHeightConfig,
+  ...textAlignConfig,
+  ...textColorConfig,
+  ...textDecorationConfig,
+  ...textTransformConfig
+});

package/dist/esm/base/ui/system/utils/csstype.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/base/ui/system/utils/ensure_numbers_are_within_scale.js

@@ -0,0 +1,36 @@
+import { get } from '@styled-system/core';
+import { spawnError } from '../../../../shared/error_utils';
+
+/** @internal */
+// Old eslint rule doesn't understand type guards
+// eslint-disable-next-line airtable/is-returns-boolean
+function isNumber(n) {
+  return typeof n === 'number' && !isNaN(n);
+}
+
+/** @internal */
+export default function ensureNumbersAreWithinScale(params) {
+  return (value, scale) => {
+    if (!Array.isArray(scale)) {
+      throw spawnError('The scale for "%s" should be an Array', params.propertyName);
+    }
+    if (!isNumber(value)) {
+      // Not a number, so simply return the value.
+      // We still use `get` if we are dealing with responsive values.
+      return get(scale, value, value);
+    }
+    if (!Number.isInteger(value)) {
+      throw spawnError('The number you passed for "%s" is not supported. To use a pixel value, pass the string "%spx" instead.', params.propertyName, value);
+    }
+    const isValueNegative = value < 0;
+    if (isValueNegative && !params.shouldAllowNegativeNumbers) {
+      throw spawnError('The scale for the "%s" property does not support negative values. To use a pixel value, pass the string "%spx" instead.', params.propertyName, value);
+    }
+    const absoluteValue = Math.abs(value);
+    if (absoluteValue >= scale.length) {
+      throw spawnError('The number you passed for "%s" falls out the scale. To use a pixel value, pass the string "%spx" instead.', params.propertyName, value);
+    }
+    const valueFromScale = Number(scale[absoluteValue]);
+    return valueFromScale * (isValueNegative ? -1 : 1);
+  };
+}

package/dist/{cjs → esm}/base/ui/system/utils/get_style_props_for_responsive_prop.js

@@ -1,26 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getStylePropsForResponsiveProp;
-var _error_utils = require("../../../../shared/error_utils");
-var _private_utils = require("../../../../shared/private_utils");
+import { invariant } from '../../../../shared/error_utils';
+import { values, has, keys } from '../../../../shared/private_utils';
 /**
  * Given a styled system scale, convert a responsive prop object into a style props object.
  * Typically used for variant APIs that compose multiple style props.
  *
  * @internal
  */
-function getStylePropsForResponsiveProp(responsivePropObject, scale) {
+export default function getStylePropsForResponsiveProp(responsivePropObject, scale) {
   const responsiveStyleProps = {};
-  for (const viewportKey of (0, _private_utils.keys)(responsivePropObject)) {
+  for (const viewportKey of keys(responsivePropObject)) {
     const scaleValueForViewport = responsivePropObject[viewportKey];
-    (0, _error_utils.invariant)(scaleValueForViewport, 'scaleValueForViewport');
+    invariant(scaleValueForViewport, 'scaleValueForViewport');
     const propsForViewport = scale[scaleValueForViewport];
-    (0, _error_utils.invariant)(propsForViewport !== undefined && propsForViewport !== null, 'propsForViewport');
-    for (const propForViewportKey of (0, _private_utils.keys)(propsForViewport)) {
-      if (!(0, _private_utils.has)(responsiveStyleProps, propForViewportKey)) {
+    invariant(propsForViewport !== undefined && propsForViewport !== null, 'propsForViewport');
+    for (const propForViewportKey of keys(propsForViewport)) {
+      if (!has(responsiveStyleProps, propForViewportKey)) {
         responsiveStyleProps[propForViewportKey] = {};
       }
       responsiveStyleProps[propForViewportKey][viewportKey] = propsForViewport[propForViewportKey];
@@ -57,7 +51,7 @@ function getStylePropsForResponsiveProp(responsivePropObject, scale) {
   for (const stylePropKey of Object.keys(responsiveStyleProps)) {
     let shouldConsolidateValue = true;
     let prevValue;
-    for (const value of (0, _private_utils.values)(responsiveStyleProps[stylePropKey])) {
+    for (const value of values(responsiveStyleProps[stylePropKey])) {
       if (prevValue === undefined) {
         prevValue = value;
       } else if (prevValue !== value) {

package/dist/esm/base/ui/system/utils/types.js

@@ -0,0 +1 @@
+export {};