@coinbase/cds-mcp-server 8.21.8 → 8.22.2

package/mcp-docs/web/components/Point.txt

@@ -10,33 +10,74 @@ import { Point } from '@coinbase/cds-web-visualization'
 
 ## Examples
 
-### Basic Example
+### Basics
 
 Points are visual markers that highlight specific data values on a chart. They can be used to emphasize important data points, show discrete values, or provide interactive elements.
 
+You can add points using `points` on Line or [LineChart](/components/graphs/LineChart).
+
 ```jsx live
 <LineChart
   enableScrubbing
+  showArea
+  showYAxis
   height={{ base: 150, tablet: 200, desktop: 250 }}
+  points
   series={[
     {
       id: 'prices',
       data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
     },
   ]}
-  curve="monotone"
-  showYAxis
-  showArea
+  xAxis={{
+    /* This prevents points close to the right edge from awkward cutoff when scrubbing */
+    range: ({ min, max }) => ({ min, max: max - 8 }),
+  }}
   yAxis={{
     showGrid: true,
   }}
-  renderPoints={() => true}
 >
   <Scrubber />
 </LineChart>
 ```
 
-### Conditional Points
+You can also add Points directly to a chart.
+
+```jsx live
+function MyChart() {
+  const prices = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  return (
+    <CartesianChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: prices,
+        },
+      ]}
+      inset={{
+        // Overriding the right offset gives us more space to place this
+        right: 32,
+      }}
+    >
+      <YAxis showGrid position="left" tickLabelFormatter={(value) => `$${value}`} />
+      {prices.map((price, index) => (
+        <Point
+          seriesId="prices"
+          key={index}
+          dataX={index}
+          dataY={price}
+          label={`$${price}`}
+          labelPosition="right"
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
+#### Conditional
 
 You can conditionally render points to highlight specific values in your data, such as maximum/minimum values or outliers.
 
@@ -56,55 +97,44 @@ function AssetPriceWithMinMax() {
 
   return (
     <LineChart
-      series={[
-        {
-          id: 'btc',
-          data: data,
-          color: assets.btc.color,
-        },
-      ]}
       showArea
       areaType="dotted"
       height={{ base: 150, tablet: 200, desktop: 250 }}
-      style={{ outlineColor: assets.btc.color }}
-      renderPoints={({ dataX, dataY }) => {
+      points={({ dataX, dataY }: PointBaseProps) => {
         const isMin = dataY === minPrice;
         const isMax = dataY === maxPrice;
 
         if (isMin) {
-          return { label: formatPrice(dataY), labelProps: {  dy: 6, verticalAlignment: 'top' } };
+          return { label: formatPrice(dataY), labelPosition: 'bottom' };
         }
 
         if (isMax) {
-          return { label: formatPrice(dataY), labelProps: { dy: -6, verticalAlignment: 'bottom' } };
+          return { label: formatPrice(dataY), labelPosition: 'top' };
         }
       }}
+      series={[
+        {
+          id: 'btc',
+          data: data,
+          color: assets.btc.color,
+        },
+      ]}
+      style={{ outlineColor: assets.btc.color }}
     />
   );
 };
 ```
 
-### Interactive Points
+### Interaction
 
 Points can be made interactive by adding click handlers, allowing users to explore data in more detail.
 
 ```jsx live
 <LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'sales',
-      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
   showArea
-  yAxis={{
-    showGrid: true,
-    label: 'Sales (units)',
-  }}
-  renderPoints={({ dataX, dataY }) => {
+  showYAxis
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  points={({ dataX, dataY }) => {
     const months = [
       'Jan',
       'Feb',
@@ -125,30 +155,29 @@ Points can be made interactive by adding click handlers, allowing users to explo
       accessibilityLabel: `${months[dataX]} sales: ${dataY} units`,
     };
   }}
+  series={[
+    {
+      id: 'sales',
+      data: [120, 132, 101, 134, 90, 230, 210, 120, 180, 190, 210, 176],
+    },
+  ]}
+  yAxis={{
+    showGrid: true,
+    label: 'Sales (units)',
+  }}
 />
 ```
 
-### Customization
+### Styling
 
-Points support extensive customization through various properties including colors, sizes, animations, and labels.
+Points support customization through various properties including colors, sizes, and labels.
 
 ```jsx live
 <LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'performance',
-      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
-    },
-  ]}
-  curve="monotone"
-  showYAxis
   showArea
-  yAxis={{
-    showGrid: true,
-    label: 'Performance Score',
-  }}
-  renderPoints={({ dataX, dataY }) => {
+  showYAxis
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  points={({ dataX, dataY }) => {
     const isHighPerformance = dataY >= 90;
     const isLowPerformance = dataY < 75;
 
@@ -162,35 +191,159 @@ Points support extensive customization through various properties including colo
       strokeWidth: 2,
       stroke: 'var(--color-bg)',
       label: isHighPerformance || isLowPerformance ? `${dataY}%` : undefined,
-      labelProps: {
-        verticalAlignment: isHighPerformance ? 'bottom' : 'top',
-        dy: isHighPerformance ? -10 : 10,
-        color: isHighPerformance
-          ? 'var(--color-fgPositive)'
-          : isLowPerformance
-            ? 'var(--color-fgNegative)'
-            : undefined,
-      },
+      labelPosition: isHighPerformance ? 'top' : 'bottom',
     };
   }}
+  series={[
+    {
+      id: 'performance',
+      data: [65, 70, 72, 85, 88, 92, 78, 82, 90, 95, 91, 94],
+    },
+  ]}
+  xAxis={{
+    range: ({ min, max }) => ({ min, max: max - 8 }),
+  }}
+  yAxis={{
+    showGrid: true,
+    label: 'Performance Score',
+  }}
 />
 ```
 
+#### Labels
+
+You can use `labelPosition`, `labelOffset`, and `labelFont` to adjust Point's label.
+
+```jsx live
+function Scatterplot() {
+  const dataPoints = [
+    { x: 20, y: 30, label: 'A' },
+    { x: 40, y: 65, label: 'B' },
+    { x: 60, y: 45, label: 'C' },
+    { x: 75, y: 80, label: 'D' },
+  ];
+
+  return (
+    <CartesianChart
+      height={250}
+      xAxis={{
+        domain: { min: 0, max: 100 },
+      }}
+      yAxis={{
+        domain: { min: 0, max: 100 },
+      }}
+    >
+      <XAxis showLine showTickMarks showGrid />
+      <YAxis position="left" showLine showTickMarks showGrid />
+      {dataPoints.map((point, index) => (
+        <Point
+          key={index}
+          dataX={point.x}
+          dataY={point.y}
+          label={point.label}
+          labelPosition="top"
+          labelOffset={6}
+          labelFont="title3"
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
+#### Custom Label Position
+
+You can also use `LabelComponent` to create custom label components.
+
+```jsx live
+function ScatterplotWithCustomLabels() {
+  const dataPoints = [
+    { x: 12, y: 34, label: 'A', color: 'var(--color-fgAccent)' },
+    { x: 28, y: 67, label: 'B', color: 'var(--color-fgAccent)' },
+    { x: 45, y: 23, label: 'C', color: 'var(--color-fgAccent)' },
+    { x: 67, y: 89, label: 'D', color: 'var(--color-bgPositive)' },
+    { x: 82, y: 76, label: 'E', color: 'var(--color-bgPositive)' },
+    { x: 34, y: 91, label: 'F', color: 'var(--color-bgPositive)' },
+    { x: 56, y: 45, label: 'G', color: 'var(--color-bgPositive)' },
+    { x: 19, y: 12, label: 'H', color: 'var(--color-fgWarning)' },
+    { x: 73, y: 28, label: 'I', color: 'var(--color-fgWarning)' },
+    { x: 91, y: 54, label: 'J', color: 'var(--color-fgWarning)' },
+    { x: 15, y: 58, label: 'K', color: 'var(--color-fgPrimary)' },
+    { x: 39, y: 72, label: 'L', color: 'var(--color-fgPrimary)' },
+    { x: 88, y: 15, label: 'M', color: 'var(--color-fgPrimary)' },
+    { x: 52, y: 82, label: 'N', color: 'var(--color-fgPrimary)' },
+  ];
+
+  // Calculate domain based on data
+  const xValues = dataPoints.map((p) => p.x);
+  const yValues = dataPoints.map((p) => p.y);
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+
+  // Custom label component that places labels to the top-right
+  const TopRightPointLabel = ({ x, y, offset = 0, children }) => {
+    return (
+      <ChartText
+        horizontalAlignment="left"
+        verticalAlignment="bottom"
+        x={x + offset}
+        y={y - offset}
+        font="label1"
+      >
+        {children}
+      </ChartText>
+    );
+  };
+
+  return (
+    <CartesianChart
+      height={300}
+      xAxis={{
+        domain: { min: xMin, max: xMax },
+        domainLimit: 'nice',
+      }}
+      yAxis={{
+        domain: { min: yMin, max: yMax },
+        domainLimit: 'nice',
+      }}
+    >
+      <XAxis showLine showTickMarks showGrid />
+      <YAxis position="left" showLine showTickMarks showGrid />
+      {dataPoints.map((point, index) => (
+        <Point
+          key={index}
+          dataX={point.x}
+          dataY={point.y}
+          label={point.label}
+          labelOffset={8}
+          fill={point.color}
+          radius={5}
+          LabelComponent={TopRightPointLabel}
+        />
+      ))}
+    </CartesianChart>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `dataX` | `number` | Yes | `-` | X coordinate in data space (not pixel coordinates). |
 | `dataY` | `number` | Yes | `-` | Y coordinate in data space (not pixel coordinates). |
+| `LabelComponent` | `ComponentClass<PointLabelProps, any> \| FunctionComponent<PointLabelProps>` | No | `DefaultPointLabel` | Custom component to render the label. |
 | `accentHeight` | `string \| number` | No | `-` | - |
 | `accessibilityLabel` | `string` | No | `-` | Accessibility label for screen readers to describe the point. If not provided, a default label will be generated using the data coordinates. |
 | `accumulate` | `none \| sum` | No | `-` | - |
-| `additive` | `sum \| replace` | No | `-` | - |
-| `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
-| `allowReorder` | `no \| yes` | No | `-` | - |
+| `additive` | `replace \| sum` | No | `-` | - |
+| `alignmentBaseline` | `inherit \| auto \| baseline \| middle \| after-edge \| alphabetic \| before-edge \| central \| hanging \| ideographic \| mathematical \| text-after-edge \| text-before-edge` | No | `-` | - |
+| `allowReorder` | `yes \| no` | No | `-` | - |
 | `alphabetic` | `string \| number` | No | `-` | - |
 | `amplitude` | `string \| number` | No | `-` | - |
-| `animate` | `boolean` | No | `-` | Override the charts animation setting for this specific point. When undefined, uses the chart contexts animation setting. |
+| `animate` | `boolean` | No | `-` | When set, overrides the charts animation setting for this specific point. |
 | `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
 | `ascent` | `string \| number` | No | `-` | - |
 | `attributeName` | `string` | No | `-` | - |
@@ -207,22 +360,20 @@ Points support extensive customization through various properties including colo
 | `calcMode` | `string \| number` | No | `-` | - |
 | `capHeight` | `string \| number` | No | `-` | - |
 | `className` | `string` | No | `-` | Custom class name for the point. |
-| `classNames` | `{ container?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
+| `classNames` | `{ root?: string; point?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
 | `clip` | `string \| number` | No | `-` | - |
 | `clipPath` | `string` | No | `-` | - |
 | `clipPathUnits` | `string \| number` | No | `-` | - |
 | `clipRule` | `string \| number` | No | `-` | - |
 | `color` | `string` | No | `-` | - |
 | `colorInterpolation` | `string \| number` | No | `-` | - |
-| `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
+| `colorInterpolationFilters` | `inherit \| auto \| linearRGB \| sRGB` | No | `-` | - |
 | `colorProfile` | `string \| number` | No | `-` | - |
 | `colorRendering` | `string \| number` | No | `-` | - |
 | `contentScriptType` | `string \| number` | No | `-` | - |
 | `contentStyleType` | `string \| number` | No | `-` | - |
 | `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
 | `cursor` | `string \| number` | No | `-` | - |
-| `cx` | `string \| number` | No | `-` | - |
-| `cy` | `string \| number` | No | `-` | - |
 | `d` | `string` | No | `-` | - |
 | `decelerate` | `string \| number` | No | `-` | - |
 | `descent` | `string \| number` | No | `-` | - |
@@ -240,9 +391,9 @@ Points support extensive customization through various properties including colo
 | `end` | `string \| number` | No | `-` | - |
 | `exponent` | `string \| number` | No | `-` | - |
 | `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
-| `fill` | `string` | No | `-` | The fill color of the point. |
+| `fill` | `string` | No | `'var(--color-fgPrimary)'` | The fill color of the point. |
 | `fillOpacity` | `string \| number` | No | `-` | - |
-| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
+| `fillRule` | `inherit \| evenodd \| nonzero` | No | `-` | - |
 | `filter` | `string` | No | `-` | - |
 | `filterRes` | `string \| number` | No | `-` | - |
 | `filterUnits` | `string \| number` | No | `-` | - |
@@ -292,8 +443,10 @@ Points support extensive customization through various properties including colo
 | `keyPoints` | `string \| number` | No | `-` | - |
 | `keySplines` | `string \| number` | No | `-` | - |
 | `keyTimes` | `string \| number` | No | `-` | - |
-| `label` | `null \| string \| number \| ReactElement<TSpanProps, TSpan> \| ReactElement<TextPathProps, TextPath> \| ValidChartTextChildElements[]` | No | `-` | Simple text label to display at the point position. If provided, a ChartText will be automatically rendered. |
-| `labelProps` | `Omit<ChartTextProps, x \| y \| children>` | No | `-` | Configuration for the automatically rendered label. Only used when label prop is provided. |
+| `label` | `string \| SkParagraph \| { value: string \| SkParagraph; }` | No | `-` | Simple text label to display at the point position. If provided, a label component will be automatically rendered. |
+| `labelFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font style for the label text. |
+| `labelOffset` | `number` | No | `2 * radius` | Distance in pixels to offset the label from the point. |
+| `labelPosition` | `top \| bottom \| left \| right \| center` | No | `'center'` | Position of the label relative to the point. |
 | `lang` | `string` | No | `-` | - |
 | `lengthAdjust` | `string \| number` | No | `-` | - |
 | `letterSpacing` | `string \| number` | No | `-` | - |
@@ -320,7 +473,6 @@ Points support extensive customization through various properties including colo
 | `offset` | `string \| number` | No | `-` | - |
 | `onChange` | `FormEventHandler<SVGCircleElement>` | No | `-` | - |
 | `onClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when the point is clicked. |
-| `onScrubberEnter` | `((point: { x: number; y: number; }) => void)` | No | `-` | Handler for when the scrubber enters this point. |
 | `opacity` | `number` | No | `-` | Opacity of the point. |
 | `operator` | `string \| number` | No | `-` | - |
 | `order` | `string \| number` | No | `-` | - |
@@ -337,7 +489,6 @@ Points support extensive customization through various properties including colo
 | `patternContentUnits` | `string` | No | `-` | - |
 | `patternTransform` | `string \| number` | No | `-` | - |
 | `patternUnits` | `string` | No | `-` | - |
-| `pixelCoordinates` | `{ x: number; y: number; }` | No | `-` | Coordinates in SVG pixel space. Overrides dataX and dataY for pixel coordinate calculation. |
 | `pointerEvents` | `string \| number` | No | `-` | - |
 | `points` | `string` | No | `-` | - |
 | `pointsAtX` | `string \| number` | No | `-` | - |
@@ -346,8 +497,7 @@ Points support extensive customization through various properties including colo
 | `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
 | `preserveAspectRatio` | `string` | No | `-` | - |
 | `primitiveUnits` | `string \| number` | No | `-` | - |
-| `r` | `string \| number` | No | `-` | - |
-| `radius` | `number` | No | `4` | Radius of the point. |
+| `radius` | `number` | No | `5` | Radius of the point. |
 | `ref` | `null \| string \| (instance: SVGCircleElement \| null) => void \| RefObject<SVGCircleElement>` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
 | `refX` | `string \| number` | No | `-` | - |
 | `refY` | `string \| number` | No | `-` | - |
@@ -358,7 +508,6 @@ Points support extensive customization through various properties including colo
 | `requiredFeatures` | `string \| number` | No | `-` | - |
 | `restart` | `string \| number` | No | `-` | - |
 | `result` | `string` | No | `-` | - |
-| `role` | `grid \| article \| button \| dialog \| figure \| form \| img \| link \| main \| menu \| menuitem \| option \| search \| table \| switch \| string & {} \| none \| row \| alert \| alertdialog \| application \| banner \| cell \| checkbox \| columnheader \| combobox \| complementary \| contentinfo \| definition \| directory \| document \| feed \| gridcell \| group \| heading \| list \| listbox \| listitem \| log \| marquee \| math \| menubar \| menuitemcheckbox \| menuitemradio \| navigation \| note \| presentation \| progressbar \| radio \| radiogroup \| region \| rowgroup \| rowheader \| scrollbar \| searchbox \| separator \| slider \| spinbutton \| status \| tab \| tablist \| tabpanel \| term \| textbox \| timer \| toolbar \| tooltip \| tree \| treegrid \| treeitem` | No | `-` | - |
 | `rotate` | `string \| number` | No | `-` | - |
 | `rx` | `string \| number` | No | `-` | - |
 | `ry` | `string \| number` | No | `-` | - |
@@ -384,17 +533,16 @@ Points support extensive customization through various properties including colo
 | `stroke` | `string` | No | `'var(--color-bg)'` | Color of the outer stroke around the point. |
 | `strokeDasharray` | `string \| number` | No | `-` | - |
 | `strokeDashoffset` | `string \| number` | No | `-` | - |
-| `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
-| `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
+| `strokeLinecap` | `inherit \| round \| butt \| square` | No | `-` | - |
+| `strokeLinejoin` | `inherit \| round \| bevel \| miter` | No | `-` | - |
 | `strokeMiterlimit` | `string \| number` | No | `-` | - |
 | `strokeOpacity` | `string \| number` | No | `-` | - |
 | `strokeWidth` | `number` | No | `2` | Outer stroke width of the point. Set to  0 to remove the stroke. |
 | `style` | `CSSProperties` | No | `-` | Custom styles for the point. |
-| `styles` | `{ container?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
+| `styles` | `{ root?: CSSProperties; point?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
 | `suppressHydrationWarning` | `boolean` | No | `-` | - |
 | `surfaceScale` | `string \| number` | No | `-` | - |
 | `systemLanguage` | `string \| number` | No | `-` | - |
-| `tabIndex` | `number` | No | `-` | - |
 | `tableValues` | `string \| number` | No | `-` | - |
 | `target` | `string` | No | `-` | - |
 | `targetX` | `string \| number` | No | `-` | - |
@@ -406,6 +554,7 @@ Points support extensive customization through various properties including colo
 | `textRendering` | `string \| number` | No | `-` | - |
 | `to` | `string \| number` | No | `-` | - |
 | `transform` | `string` | No | `-` | - |
+| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `defaultTransition` | Transition configuration for animation. |
 | `type` | `string` | No | `-` | - |
 | `u1` | `string \| number` | No | `-` | - |
 | `u2` | `string \| number` | No | `-` | - |
@@ -452,7 +601,7 @@ Points support extensive customization through various properties including colo
 | `y` | `string \| number` | No | `-` | - |
 | `y1` | `string \| number` | No | `-` | - |
 | `y2` | `string \| number` | No | `-` | - |
-| `yAxisId` | `string` | No | `-` | Optional Y-axis id to specify which axis to plot along. Defaults to the first y-axis |
+| `yAxisId` | `string` | No | `first y-axis defined in chart props.` | Optional Y-axis id to specify which axis to plot along. |
 | `yChannelSelector` | `string` | No | `-` | - |
 | `z` | `string \| number` | No | `-` | - |
 | `zoomAndPan` | `string` | No | `-` | - |

package/mcp-docs/web/components/Pressable.txt

@@ -87,8 +87,8 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
 | `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
 | `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
-| `as` | `symbol \| object \| style \| svg \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| div \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
-| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
+| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
 | `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
 | `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
@@ -113,35 +113,35 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
 | `className` | `string` | No | `-` | Apply class names to the outer container. |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
-| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
 | `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | - |
 | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
 | `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
-| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
-| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
 | `focusable` | `boolean` | No | `-` | - |
 | `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
 | `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
 | `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
 | `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
-| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
-| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
-| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
 | `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
-| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
-| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
-| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
 | `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
 | `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
@@ -161,33 +161,33 @@ On web, all [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Acces
 | `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
 | `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
 | `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
-| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
-| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `0` | - |
-| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
-| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `0` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
 | `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
 | `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
 | `ref` | `any` | No | `-` | - |
 | `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
-| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `CSSProperties` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
 | `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
 | `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
 | `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
 | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
-| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
 | `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
 | `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |