# PeriodSelector

A selector component for choosing time periods in charts.

## Import

```tsx
import { PeriodSelector } from '@coinbase/cds-web-visualization'
```

## Examples

### Basic Example

```jsx live
function BasicExample() {
  const tabs = [
    { id: '1H', label: '1H' },
    { id: '1D', label: '1D' },
    { id: '1W', label: '1W' },
    { id: '1M', label: '1M' },
    { id: '1Y', label: '1Y' },
    { id: 'YTD', label: 'YTD' },
    { id: 'All', label: 'All' },
  ];

  const [activeTab, setActiveTab] = useState(tabs[0]);

  return (
    <Box overflow="hidden" maxWidth="100%">
      <PeriodSelector activeTab={activeTab} onChange={setActiveTab} tabs={tabs} />
    </Box>
  );
}
```

### Minimum Width

You can set the `width` prop to `fit-content` to make the period selector as small as possible.

```jsx live
function MinimumWidthExample() {
  const tabs = [
    { id: '1W', label: '1W' },
    { id: '1M', label: '1M' },
    { id: 'YTD', label: 'YTD' },
  ];

  const [activeTab, setActiveTab] = useState(tabs[0]);

  return (
    <PeriodSelector
      activeTab={activeTab}
      onChange={setActiveTab}
      tabs={tabs}
      width="fit-content"
      gap={2}
    />
  );
}
```

### Many Periods with Overflow

```jsx live
function ManyPeriodsExample() {
  const tabs = useMemo(
    () => [
      { id: '1H', label: '1H' },
      { id: '1D', label: '1D' },
      { id: '1W', label: '1W' },
      { id: '1M', label: '1M' },
      { id: 'YTD', label: 'YTD' },
      { id: '1Y', label: '1Y' },
      { id: '5Y', label: '5Y' },
      { id: 'All', label: 'All' },
    ],
    [],
  );

  const [activeTab, setActiveTab] = useState(tabs[0]);
  const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);

  return (
    <HStack
      alignItems="center"
      justifyContent="space-between"
      maxWidth="100%"
      overflow="hidden"
      width="100%"
    >
      <Box flexGrow={1} overflow="hidden" position="relative">
        <style>{`
          .scrollContainer {
            scrollbar-width: none;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;

            &::-webkit-scrollbar {
              display: none;
            }
          }
        `}</style>
        <Box className="scrollContainer" paddingEnd={2}>
          <PeriodSelector
            activeTab={activeTab}
            gap={1}
            justifyContent="flex-start"
            onChange={setActiveTab}
            tabs={tabs}
            width="fit-content"
          />
        </Box>
        <Box
          position="absolute"
          style={{
            background: 'linear-gradient(to left, var(--color-bg), transparent 100%)',
            right: 0,
            bottom: 0,
            top: 0,
            width: 'var(--space-4)',
            pointerEvents: 'none',
          }}
        />
      </Box>
      <IconButton
        compact
        accessibilityLabel="Configure chart"
        flexShrink={0}
        height={36}
        name="filter"
        variant="secondary"
      />
    </HStack>
  );
}
```

### Live Indicator

```jsx live
function LiveExample() {
  const tabs = useMemo(
    () => [
      // LiveTabLabel is exported from PeriodSelector
      { id: '1H', label: <LiveTabLabel /> },
      { id: '1D', label: '1D' },
      { id: '1W', label: '1W' },
      { id: '1M', label: '1M' },
      { id: '1Y', label: '1Y' },
      { id: 'All', label: 'All' },
    ],
    [],
  );

  const [activeTab, setActiveTab] = useState(tabs[0]);
  const isLive = useMemo(() => activeTab?.id === '1H', [activeTab]);

  const activeBackground = useMemo(() => (isLive ? 'bgNegativeWash' : 'bgPrimaryWash'), [isLive]);

  return (
    <Box overflow="hidden" maxWidth="100%">
      <PeriodSelector
        activeBackground={activeBackground}
        activeTab={activeTab}
        onChange={setActiveTab}
        tabs={tabs}
      />
    </Box>
  );
}
```

### Customization

#### Custom Colors

```jsx live
function LiveExample() {
  const tabs = useMemo(
    () => [
      { id: '1H', label: '1H' },
      { id: '1D', label: '1D' },
      { id: '1W', label: '1W' },
      { id: '1M', label: '1M' },
      { id: '1Y', label: '1Y' },
      { id: 'All', label: 'All' },
    ],
    [],
  );

  const [activeTab, setActiveTab] = useState(tabs[0]);
  const isLive = useMemo(() => activeTab?.id === 'live', [activeTab]);

  const activeBackground = useMemo(() => (isLive ? 'bgNegativeWash' : 'bgPrimaryWash'), [isLive]);

  return (
    <Box overflow="hidden" maxWidth="100%">
      <PeriodSelector
        activeBackground={activeBackground}
        activeTab={activeTab}
        onChange={setActiveTab}
        tabs={tabs}
      />
    </Box>
  );
}
```

#### Color Shifting

```jsx live
function ColorShiftingExample() {
  const TabLabel = memo(({ label }) => (
    <Text font="label1" style={{ color: 'var(--chartActiveColor)' }}>
      {label}
    </Text>
  ));

  const tabs = useMemo(
    () => [
      {
        id: '1H',
        label: <TabLabel label="1H" />,
      },
      {
        id: '1D',
        label: <TabLabel label="1D" />,
      },
      {
        id: '1W',
        label: <TabLabel label="1W" />,
      },
      {
        id: '1M',
        label: <TabLabel label="1M" />,
      },
      {
        id: '1Y',
        label: <TabLabel label="1Y" />,
      },
      {
        id: 'All',
        label: <TabLabel label="All" />,
      },
    ],
    [],
  );

  const [activeTab, setActiveTab] = useState(tabs[0]);
  const [chartActiveColor, setChartActiveColor] = useState('positive');

  const toggleColor = useCallback(() => {
    setChartActiveColor((activeColor) => (activeColor === 'positive' ? 'negative' : 'positive'));
  }, []);

  const activeForegroundColor = useMemo(() => {
    return chartActiveColor === 'positive' ? 'var(--color-fgPositive)' : 'var(--color-fgNegative)';
  }, [chartActiveColor]);

  const activeBackground = useMemo(() => {
    return chartActiveColor === 'positive' ? 'bgPositiveWash' : 'bgNegativeWash';
  }, [chartActiveColor]);

  return (
    <VStack gap={2}>
      <m.div
        animate={{ '--chartActiveColor': activeForegroundColor }}
        style={{ '--chartActiveColor': activeForegroundColor }}
        transition={{ duration: 0.3 }}
        width="100%"
        overflow="hidden"
      >
        <PeriodSelector
          activeBackground={activeBackground}
          activeTab={activeTab}
          onChange={setActiveTab}
          tabs={tabs}
        />
      </m.div>
      <Button onClick={toggleColor}>Toggle Color</Button>
    </VStack>
  );
}
```

#### Asset Price Chart

You can use a PeriodSelector to control the time period of a LineChart, with a settings icon to enable extra customization for users.

```jsx live
function CustomizableAssetPriceExample() {
  const tabs = [
    { id: 'hour', label: '1H' },
    { id: 'day', label: '1D' },
    { id: 'week', label: '1W' },
    { id: 'month', label: '1M' },
    { id: 'year', label: '1Y' },
    { id: 'all', label: 'All' },
  ];

  const PeriodSelectorWrapper = memo(({ activeTab, setActiveTab, tabs, onClickSettings }) => (
    <HStack
      alignItems="center"
      justifyContent="space-between"
      maxWidth="100%"
      overflow="hidden"
      width="100%"
    >
      <Box flexGrow={1} overflow="hidden" position="relative">
        <style>{`
          .scrollContainer {
            scrollbar-width: none;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x;

            &::-webkit-scrollbar {
              display: none;
            }
          }
        `}</style>
        <Box className="scrollContainer" paddingEnd={2}>
          <PeriodSelector
            activeTab={activeTab}
            gap={1}
            justifyContent="flex-start"
            onChange={setActiveTab}
            tabs={tabs}
            width="fit-content"
          />
        </Box>
        <Box
          position="absolute"
          style={{
            background: 'linear-gradient(to left, var(--color-bg), transparent 100%)',
            right: 0,
            bottom: 0,
            top: 0,
            width: 'var(--space-4)',
            pointerEvents: 'none',
          }}
        />
      </Box>
      <IconButton
        compact
        accessibilityLabel="Chart settings"
        flexShrink={0}
        height={36}
        name="settings"
        variant="secondary"
        onClick={onClickSettings}
      />
    </HStack>
  ));

  const AssetPriceChart = memo(() => {
    const [activeTab, setActiveTab] = useState(tabs[0]);
    const [showSettings, setShowSettings] = useState(false);
    const [showYAxis, setShowYAxis] = useState(true);
    const [showXAxis, setShowXAxis] = useState(true);
    const [scrubIndex, setScrubIndex] = useState();
    const breakpoints = useBreakpoints();

    const formatPrice = useCallback((price: number) => {
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
      }).format(price);
    }, []);

    const formatYAxisPrice = useCallback((price: number) => {
      if (breakpoints.isPhone) {
        // Compact format for mobile: $45k, $1.2M, etc.
        if (price >= 1000000) {
          return `$${(price / 1000000).toFixed(1)}M`;
        } else if (price >= 1000) {
          return `$${(price / 1000).toFixed(0)}k`;
        }
        return `$${price.toFixed(0)}`;
      }
      return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
      }).format(price);
    }, [breakpoints.isPhone]);
    const toggleShowYAxis = useCallback(() => setShowYAxis((show) => !show), []);
    const toggleShowXAxis = useCallback(() => setShowXAxis((show) => !show), []);

    const data = useMemo(() => sparklineInteractiveData[activeTab.id], [activeTab.id]);
    const currentPrice = useMemo(() => sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value, []);
    const currentTimePrice = useMemo(() => {
      if (scrubIndex !== undefined) {
        return data[scrubIndex].value;
      }
      return currentPrice;
    }, [data, scrubIndex, currentPrice]);

    const formatDate = useCallback((date) => {
      const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'short' });
      const monthDay = date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
      });
      const time = date.toLocaleTimeString('en-US', {
        hour: 'numeric',
        minute: '2-digit',
        hour12: true,
      });
      return `${dayOfWeek}, ${monthDay}, ${time}`;
    }, []);

    const scrubberLabel = useMemo(() => {
      if (scrubIndex === undefined) return;
      return formatDate(data[scrubIndex].date);
    }, [scrubIndex, data, formatDate]);

    const accessibilityLabel = useMemo(() => {
      if (scrubIndex === undefined) return;
      const price = new Intl.NumberFormat('en-US', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      }).format(data[scrubIndex].value);
      const date = formatDate(data[scrubIndex].date);
      return `Asset price: ${price} USD on ${date}`;
    }, [scrubIndex, data, formatDate]);

    const onClickSettings = useCallback(() => setShowSettings(!showSettings), [showSettings]);

    const seriesData = useMemo(() => [{ id: 'price', data: data.map((d) => d.value) }], [data]);

    const getFormattingConfigForPeriod = useCallback((period) => {
      switch (period) {
        case 'hour':
        case 'day':
          return {
            hour: 'numeric',
            minute: 'numeric',
          };

        case 'week':
        case 'month':
          return {
            month: 'numeric',
            day: 'numeric',
          };

        case 'year':
        case 'all':
          return {
            month: 'numeric',
            year: 'numeric',
          };
      }
    }, []);

    const formatXAxisDate = useCallback((index) => {
      if (!data[index]) return '';
      const date = data[index].date;
      const formatConfig = getFormattingConfigForPeriod(activeTab.id);

      if (activeTab.id === 'hour' || activeTab.id === 'day') {
        return date.toLocaleTimeString('en-US', formatConfig);
      } else {
        return date.toLocaleDateString('en-US', formatConfig);
      }
    }, [data, activeTab.id, getFormattingConfigForPeriod]);

    const isMobile = breakpoints.isPhone || breakpoints.isTabletPortrait;

    return (
      <VStack gap={2}>
        <SectionHeader
          padding={0}
          title={<Text font="label1">Asset Price</Text>}
          balance={<RollingNumber format={{ style: 'currency', currency: 'USD' }} font="display3" color="fgMuted" value={currentTimePrice} />}
          end={isMobile ? undefined : (
            <HStack alignItems="center">
              <PeriodSelectorWrapper
                activeTab={activeTab}
                setActiveTab={setActiveTab}
                tabs={tabs}
                onClickSettings={onClickSettings}
              />
            </HStack>)
          }
        />
        <LineChart
          enableScrubbing
          height={{ base: 200, tablet: 250, desktop: 300 }}
          onScrubberPositionChange={setScrubIndex}
          series={seriesData}
          yAxis={{
            domainLimit: 'strict',
            showGrid: true,
            tickLabelFormatter: formatYAxisPrice,
            width: breakpoints.isPhone ? 50 : 80
          }}
          xAxis={{
            tickLabelFormatter: formatXAxisDate,
          }}
          showYAxis={showYAxis}
          showXAxis={showXAxis}
          accessibilityLabel={accessibilityLabel}
        >
          <Scrubber label={scrubberLabel} />
        </LineChart>
        {isMobile && (
          <HStack alignItems="center">
            <PeriodSelectorWrapper
              activeTab={activeTab}
              setActiveTab={setActiveTab}
              tabs={tabs}
              onClickSettings={onClickSettings}
            />
          </HStack>
        )}
        {showSettings && (
          <Tray title="Chart Settings" onCloseComplete={() => setShowSettings(false)}>
            {({ handleClose }) => (
              <VStack gap={2} paddingX={3} paddingBottom={3}>
                <HStack justifyContent="space-between" alignItems="center">
                  <Text font="label1">Show Y-Axis</Text>
                  <Switch checked={showYAxis} onChange={toggleShowYAxis} />
                </HStack>

                <HStack justifyContent="space-between" alignItems="center">
                  <Text font="label1">Show X-Axis</Text>
                  <Switch checked={showXAxis} onChange={toggleShowXAxis} />
                </HStack>
              </VStack>
            )}
          </Tray>
        )}
      </VStack>
    );
  }, []);

  return <AssetPriceChart />;
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `activeTabRect` | `Rect` | Yes | `-` | - |
| `_dragX` | `MotionValue<number>` | No | `-` | Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied. |
| `_dragY` | `MotionValue<number>` | No | `-` | Usually, dragging uses the layout project engine, and applies transforms to the underlying VisualElement. Passing MotionValues as _dragX and _dragY instead applies drag updates to these motion values. This allows you to manually control how updates from a drag gesture on an element is applied. |
| `alignContent` | `ResponsiveProp<center \| end \| normal \| start \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
| `alignItems` | `ResponsiveProp<center \| end \| normal \| start \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
| `alignSelf` | `ResponsiveProp<center \| end \| normal \| auto \| start \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
| `animate` | `boolean \| VariantLabels \| AnimationControls \| TargetAndTransition` | No | `-` | Values to animate to, variant label(s), or AnimationControls.  jsx // As values <motion.div animate={{ opacity: 1 }} />  // As variant <motion.div animate=visible variants={variants} />  // Multiple variants <motion.div animate={[visible, active]} variants={variants} />  // AnimationControls <motion.div animate={animation} />  |
| `as` | `div` | No | `-` | - |
| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | 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 | `-` | - |
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderColor` | `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 | `-` | - |
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
| `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 | `-` | - |
| `custom` | `any` | No | `-` | Custom data to use to resolve dynamic variants differently for each animating component.  jsx const variants = {   visible: (custom) => ({     opacity: 1,     transition: { delay: custom * 0.2 }   }) }  <motion.div custom={0} animate=visible variants={variants} /> <motion.div custom={1} animate=visible variants={variants} /> <motion.div custom={2} animate=visible variants={variants} />  |
| `dangerouslySetBackground` | `string` | No | `-` | - |
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
| `drag` | `boolean \| x \| y` | No | `-` | Enable dragging for this element. Set to false by default. Set true to drag in both directions. Set x or y to only drag in a specific direction.  jsx <motion.div drag=x />  |
| `dragConstraints` | `false \| Partial<BoundingBox> \| RefObject<Element>` | No | `-` | Applies constraints on the permitted draggable area.  It can accept an object of optional top, left, right, and bottom values, measured in pixels. This will define a distance the named edge of the draggable component.  Alternatively, it can accept a ref to another component created with Reacts useRef hook. This ref should be passed both to the draggable components dragConstraints prop, and the ref of the component you want to use as constraints.  jsx // In pixels <motion.div   drag=x   dragConstraints={{ left: 0, right: 300 }} />  // As a ref to another component const MyComponent = () => {   const constraintsRef = useRef(null)    return (      <motion.div ref={constraintsRef}>          <motion.div drag dragConstraints={constraintsRef} />      </motion.div>   ) }  |
| `dragControls` | `DragControls` | No | `-` | Usually, dragging is initiated by pressing down on a component and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate dragging from a different component than the draggable one.  By creating a dragControls using the useDragControls hook, we can pass this into the draggable components dragControls prop. It exposes a start method that can start dragging from pointer events on other components.  jsx const dragControls = useDragControls()  function startDrag(event) {   dragControls.start(event, { snapToCursor: true }) }  return (   <>     <div onPointerDown={startDrag} />     <motion.div drag=x dragControls={dragControls} />   </> )  |
| `dragDirectionLock` | `boolean` | No | `-` | If true, this will lock dragging to the initially-detected direction. Defaults to false.  jsx <motion.div drag dragDirectionLock />  |
| `dragElastic` | `number \| false \| true \| Partial<BoundingBox>` | No | `-` | The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.  Set to 0.5 by default. Can also be set as false to disable movement.  By passing an object of top/right/bottom/left, individual values can be set per constraint. Any missing values will be set to 0.  jsx <motion.div   drag   dragConstraints={{ left: 0, right: 300 }}   dragElastic={0.2} />  |
| `dragListener` | `boolean` | No | `-` | By default, if drag is defined on a component then an event listener will be attached to automatically initiate dragging when a user presses down on it.  By setting dragListener to false, this event listener will not be created.  jsx const dragControls = useDragControls()  function startDrag(event) {   dragControls.start(event, { snapToCursor: true }) }  return (   <>     <div onPointerDown={startDrag} />     <motion.div       drag=x       dragControls={dragControls}       dragListener={false}     />   </> )  |
| `dragMomentum` | `boolean` | No | `-` | Apply momentum from the pan gesture to the component when dragging finishes. Set to true by default.  jsx <motion.div   drag   dragConstraints={{ left: 0, right: 300 }}   dragMomentum={false} />  |
| `dragPropagation` | `boolean` | No | `-` | Allows drag gesture propagation to child components. Set to false by default.  jsx <motion.div drag=x dragPropagation />  |
| `dragSnapToOrigin` | `boolean` | No | `-` | If true, element will snap back to its origin when dragging ends.  Enabling this is the equivalent of setting all dragConstraints axes to 0 with dragElastic={1}, but when used together dragConstraints can define a wider draggable area and dragSnapToOrigin will ensure the element animates back to its origin on release. |
| `dragTransition` | `Partial<Omit<Inertia, type \| velocity>>` | No | `-` | Allows you to change dragging inertia parameters. When releasing a draggable Frame, an animation with type inertia starts. The animation is based on your dragging velocity. This property allows you to customize it. See {@link https://framer.com/api/animation/#inertia Inertia} for all properties you can use.  jsx <motion.div   drag   dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }} />  |
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
| `exit` | `VariantLabels \| TargetAndTransition` | No | `-` | A target to animate to when this component is removed from the tree.  This component **must** be the first animatable child of an AnimatePresence to enable this exit animation.  This limitation exists because React doesnt allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary.  jsx import { AnimatePresence, motion } from framer-motion  export const MyComponent = ({ isVisible }) => {   return (     <AnimatePresence>        {isVisible && (          <motion.div            initial={{ opacity: 0 }}            animate={{ opacity: 1 }}            exit={{ opacity: 0 }}          />        )}     </AnimatePresence>   ) }  |
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
| `flexDirection` | `ResponsiveProp<row \| row-reverse \| column \| column-reverse>` | No | `-` | - |
| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | 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 | `-` | - |
| `globalTapTarget` | `boolean` | No | `-` | If true, the tap gesture will attach its start listener to window.  Note: This is not supported publically. |
| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| 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 | `-` | - |
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
| `ignoreStrict` | `boolean` | No | `-` | - |
| `inherit` | `boolean` | No | `-` | - |
| `initial` | `boolean \| MakeCustomValueType<TargetProperties> \| VariantLabels` | No | `-` | Properties, variant label or array of variant labels to start in.  Set to false to initialise with the values in animate (disabling the mount animation)  jsx // As values <motion.div initial={{ opacity: 1 }} />  // As variant <motion.div initial=visible variants={variants} />  // Multiple variants <motion.div initial={[visible, active]} variants={variants} />  // As false (disable mount animation) <motion.div initial={false} animate={{ opacity: 0 }} />  |
| `justifyContent` | `ResponsiveProp<left \| right \| center \| end \| normal \| start \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
| `key` | `Key \| null` | No | `-` | - |
| `layout` | `boolean \| position \| size \| preserve-aspect` | No | `-` | If true, this component will automatically animate to its new position when its layout changes.  jsx <motion.div layout />   This will perform a layout animation using performant transforms. Part of this technique involved animating an elements scale. This can introduce visual distortions on children, boxShadow and borderRadius.  To correct distortion on immediate children, add layout to those too.  boxShadow and borderRadius will automatically be corrected if they are already being animated on this component. Otherwise, set them directly via the initial prop.  If layout is set to position, the size of the component will change instantly and only its position will animate. If layout is set to size, the position of the component will change instantly but its size will animate.  If layout is set to size, the position of the component will change instantly and only its size will animate.  If layout is set to preserve-aspect, the component will animate size & position if the aspect ratio remains the same between renders, and just position if the ratio changes. |
| `layoutDependency` | `any` | No | `-` | - |
| `layoutId` | `string` | No | `-` | Enable shared layout transitions between different components with the same layoutId.  When a component with a layoutId is removed from the React tree, and then added elsewhere, it will visually animate from the previous components bounding box and its latest animated values.  jsx   {items.map(item => (      <motion.li layout>         {item.name}         {item.isSelected && <motion.div layoutId=underline />}      </motion.li>   ))}   If the previous component remains in the tree it will crossfade with the new component. |
| `layoutRoot` | `boolean` | No | `-` | Whether an element should be considered a layout root, where all children will be forced to resolve relatively to it. Currently used for position: sticky elements in Framer. |
| `layoutScroll` | `boolean` | No | `-` | Whether a projection node should measure its scroll when it or its descendants update their layout. |
| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
| `onAnimationComplete` | `((definition: AnimationDefinition) => void)` | No | `-` | Callback when animation defined in animate is complete.  The provided callback will be called with the triggering animation definition. If this is a variant, itll be the variant name, and if a target object then itll be the target object.  This way, its possible to figure out which animation has completed.  jsx function onComplete() {   console.log(Animation completed) }  <motion.div   animate={{ x: 100 }}   onAnimationComplete={definition => {     console.log(Completed animating, definition)   }} />  |
| `onBeforeLayoutMeasure` | `((box: Box) => void)` | No | `-` | - |
| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
| `onDirectionLock` | `((axis: x \| y) => void)` | No | `-` | Callback function that fires a drag direction is determined.  jsx <motion.div   drag   dragDirectionLock   onDirectionLock={axis => console.log(axis)} />  |
| `onDragTransitionEnd` | `(() => void)` | No | `-` | Callback function that fires when drag momentum/bounce transition finishes.  jsx <motion.div   drag   onDragTransitionEnd={() => console.log(Drag transition complete)} />  |
| `onHoverEnd` | `((event: MouseEvent, info: EventInfo) => void)` | No | `-` | Callback function that fires when pointer stops hovering over the component.  jsx <motion.div onHoverEnd={() => console.log(Hover ends)} />  |
| `onHoverStart` | `((event: MouseEvent, info: EventInfo) => void)` | No | `-` | Callback function that fires when pointer starts hovering over the component.  jsx <motion.div onHoverStart={() => console.log(Hover starts)} />  |
| `onLayoutAnimationComplete` | `(() => void)` | No | `-` | A callback that will fire when a layout animation on this component completes. |
| `onLayoutAnimationStart` | `(() => void)` | No | `-` | A callback that will fire when a layout animation on this component starts. |
| `onLayoutMeasure` | `((box: Box, prevBox: Box) => void)` | No | `-` | - |
| `onMeasureDragConstraints` | `((constraints: BoundingBox) => void \| BoundingBox)` | No | `-` | If dragConstraints is set to a React ref, this callback will call with the measured drag constraints. |
| `onPan` | `((event: PointerEvent, info: PanInfo) => void)` | No | `-` | Callback function that fires when the pan gesture is recognised on this element.  **Note:** For pan gestures to work correctly with touch input, the element needs touch scrolling to be disabled on either x/y or both axis with the [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) CSS rule.  jsx function onPan(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onPan={onPan} />  |
| `onPanEnd` | `((event: PointerEvent, info: PanInfo) => void)` | No | `-` | Callback function that fires when the pan gesture ends on this element.  jsx function onPanEnd(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onPanEnd={onPanEnd} />  |
| `onPanSessionStart` | `((event: PointerEvent, info: EventInfo) => void)` | No | `-` | Callback function that fires when we begin detecting a pan gesture. This is analogous to onMouseStart or onTouchStart.  jsx function onPanSessionStart(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onPanSessionStart={onPanSessionStart} />  |
| `onPanStart` | `((event: PointerEvent, info: PanInfo) => void)` | No | `-` | Callback function that fires when the pan gesture begins on this element.  jsx function onPanStart(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onPanStart={onPanStart} />  |
| `onTap` | `((event: MouseEvent \| TouchEvent \| PointerEvent, info: TapInfo) => void)` | No | `-` | Callback when the tap gesture successfully ends on this element.  jsx function onTap(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onTap={onTap} />  |
| `onTapCancel` | `((event: MouseEvent \| TouchEvent \| PointerEvent, info: TapInfo) => void)` | No | `-` | Callback when the tap gesture ends outside this element.  jsx function onTapCancel(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onTapCancel={onTapCancel} />  |
| `onTapStart` | `((event: MouseEvent \| TouchEvent \| PointerEvent, info: TapInfo) => void)` | No | `-` | Callback when the tap gesture starts on this element.  jsx function onTapStart(event, info) {   console.log(info.point.x, info.point.y) }  <motion.div onTapStart={onTapStart} />  |
| `onUpdate` | `((latest: ResolvedValues) => void)` | No | `-` | Callback with latest motion values, fired max once per frame.  jsx function onUpdate(latest) {   console.log(latest.x, latest.opacity) }  <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />  |
| `onViewportEnter` | `ViewportEventHandler` | No | `-` | - |
| `onViewportLeave` | `ViewportEventHandler` | No | `-` | - |
| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
| `overflow` | `ResponsiveProp<clip \| auto \| visible \| hidden \| scroll>` | No | `-` | - |
| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
| `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 | `-` | - |
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
| `position` | `ResponsiveProp<static \| relative \| absolute \| fixed \| sticky>` | No | `-` | - |
| `ref` | `((instance: HTMLDivElement \| null) => void) \| RefObject<HTMLDivElement> \| null` | 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 | `-` | - |
| `style` | `(CSSProperties & MakeCustomValueType<{ color?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any>; background?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Background<string \| number> \| undefined; borderColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderColor \| undefined; borderWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderWidth<string \| number> \| undefined; borderTopWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopWidth<string \| number> \| undefined; borderBottomWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomWidth<string \| number> \| undefined; borderRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRadius<string \| number> \| undefined; borderTopLeftRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopLeftRadius<string \| number> \| undefined; borderTopRightRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopRightRadius<string \| number> \| undefined; borderBottomLeftRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomLeftRadius<string \| number> \| undefined; borderBottomRightRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomRightRadius<string \| number> \| undefined; fontFamily?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; fontSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSize<string \| number> \| undefined; fontWeight?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; lineHeight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineHeight<string \| number> \| undefined; textDecoration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecoration<string \| number> \| undefined; textTransform?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; userSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| UserSelect \| undefined; display?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Display \| undefined; overflow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Overflow \| undefined; gap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Gap<string \| number> \| undefined; columnGap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnGap<string \| number> \| undefined; rowGap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| RowGap<string \| number> \| undefined; justifyContent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| JustifyContent \| undefined; alignContent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignContent \| undefined; alignItems?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignItems \| undefined; alignSelf?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignSelf \| undefined; flexDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexDirection \| undefined; flexWrap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexWrap \| undefined; position?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Position \| undefined; padding?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Padding<string \| number> \| undefined; paddingTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingTop<string \| number> \| undefined; paddingBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingBottom<string \| number> \| undefined; margin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Margin<string \| number> \| undefined; marginTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginTop<string \| number> \| undefined; marginBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginBottom<string \| number> \| undefined; textAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextAlign \| undefined; visibility?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Visibility \| undefined; width?: Width<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; height?: Height<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; minWidth?: MinWidth<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; minHeight?: MinHeight<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; maxWidth?: MaxWidth<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; maxHeight?: MaxHeight<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; aspectRatio?: AspectRatio \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; top?: Top<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; bottom?: Bottom<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; left?: Left<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; right?: Right<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; transform?: Transform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; flexBasis?: FlexBasis<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; flexGrow?: FlexGrow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; flexShrink?: FlexShrink \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridTemplateColumns?: GridTemplateColumns<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridTemplateRows?: GridTemplateRows<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridTemplateAreas?: GridTemplateAreas \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridTemplate?: GridTemplate \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridAutoColumns?: GridAutoColumns<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridAutoRows?: GridAutoRows<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridAutoFlow?: GridAutoFlow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; grid?: Grid \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridRowStart?: GridRowStart \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridColumnStart?: GridColumnStart \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridRowEnd?: GridRowEnd \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridColumnEnd?: GridColumnEnd \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridRow?: GridRow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridColumn?: GridColumn \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; gridArea?: GridArea \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; opacity?: Opacity \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; zIndex?: ZIndex \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; font?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Font \| undefined; clipPath?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ClipPath \| undefined; filter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Filter \| undefined; marker?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Marker \| undefined; mask?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Mask<string \| number> \| undefined; alignmentBaseline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignmentBaseline \| undefined; azimuth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Azimuth \| undefined; baselineShift?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BaselineShift<string \| number> \| undefined; clip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Clip \| undefined; clipRule?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ClipRule \| undefined; colorInterpolation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColorInterpolation \| undefined; colorRendering?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColorRendering \| undefined; cursor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Cursor \| undefined; direction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Direction \| undefined; dominantBaseline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| DominantBaseline \| undefined; fill?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Fill \| undefined; fillOpacity?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FillOpacity \| undefined; fillRule?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FillRule \| undefined; floodColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FloodColor \| undefined; floodOpacity?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FloodOpacity \| undefined; fontSizeAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSizeAdjust \| undefined; fontStretch?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontStretch \| undefined; fontStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontStyle \| undefined; fontVariant?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariant \| undefined; glyphOrientationVertical?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| GlyphOrientationVertical \| undefined; imageRendering?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ImageRendering \| undefined; letterSpacing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LetterSpacing<string \| number> \| undefined; lightingColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LightingColor \| undefined; markerEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarkerEnd \| undefined; markerMid?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarkerMid \| undefined; markerStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarkerStart \| undefined; offset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Offset<string \| number> \| undefined; order?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Order \| undefined; paintOrder?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaintOrder \| undefined; pointerEvents?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PointerEvents \| undefined; shapeRendering?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ShapeRendering \| undefined; stopColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StopColor \| undefined; stopOpacity?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StopOpacity \| undefined; stroke?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Stroke \| undefined; strokeDasharray?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeDasharray<string \| number> \| undefined; strokeDashoffset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeDashoffset<string \| number> \| undefined; strokeLinecap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeLinecap \| undefined; strokeLinejoin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeLinejoin \| undefined; strokeMiterlimit?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeMiterlimit \| undefined; strokeOpacity?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeOpacity \| undefined; strokeWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| StrokeWidth<string \| number> \| undefined; textAnchor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextAnchor \| undefined; textRendering?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextRendering \| undefined; unicodeBidi?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| UnicodeBidi \| undefined; vectorEffect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| VectorEffect \| undefined; wordSpacing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WordSpacing<string \| number> \| undefined; writingMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WritingMode \| undefined; inset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Inset<string \| number> \| undefined; --color-currentColor?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fg?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgMuted?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgInverse?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgPrimary?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgWarning?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgPositive?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-fgNegative?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bg?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgAlternate?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgInverse?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgOverlay?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgElevation1?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgElevation2?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgPrimary?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgPrimaryWash?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgSecondary?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgTertiary?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgSecondaryWash?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgNegative?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgNegativeWash?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgPositive?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgPositiveWash?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgWarning?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgWarningWash?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgLine?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgLineHeavy?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgLineInverse?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgLinePrimary?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-bgLinePrimarySubtle?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtleRed?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldRed?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtleGreen?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldGreen?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtleBlue?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldBlue?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtlePurple?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldPurple?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtleYellow?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldYellow?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentSubtleGray?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-accentBoldGray?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --color-transparent?: Color \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-0?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-100?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-200?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-300?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-400?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderWidth-500?: BorderWidth<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-0?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-100?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-200?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-300?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-400?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-500?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-600?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-700?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-800?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-900?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --borderRadius-1000?: BorderRadius<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-body?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-caption?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-display1?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-display2?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-display3?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-title1?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-title2?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-title3?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-title4?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-headline?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-label1?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-label2?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontFamily-legal?: FontFamily \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-body?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-caption?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-display1?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-display2?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-display3?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-title1?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-title2?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-title3?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-title4?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-headline?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-label1?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-label2?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontSize-legal?: FontSize<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-body?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-caption?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-display1?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-display2?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-display3?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-title1?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-title2?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-title3?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-title4?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-headline?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-label1?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-label2?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --fontWeight-legal?: FontWeight \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-body?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-caption?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-display1?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-display2?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-display3?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-title1?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-title2?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-title3?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-title4?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-headline?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-label1?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-label2?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --lineHeight-legal?: LineHeight<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-body?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-caption?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-display1?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-display2?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-display3?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-title1?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-title2?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-title3?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-title4?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-headline?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-label1?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-label2?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --textTransform-legal?: TextTransform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --blue90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --green90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --orange90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --yellow90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --gray90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --indigo90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --pink90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --purple90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --red90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --teal90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse0?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse100?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse5?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse10?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse15?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse20?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse30?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse40?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse50?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse60?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse70?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse80?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --chartreuse90?: string \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-0?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-5?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-10?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-0.25?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-0.5?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-0.75?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-1?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-1.5?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-2?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-3?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-4?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-6?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-7?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-8?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --space-9?: Padding<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --iconSize-s?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --iconSize-xs?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --iconSize-m?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --iconSize-l?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-s?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-m?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-l?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-xl?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-xxl?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --avatarSize-xxxl?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --shadow-elevation1?: BoxShadow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --shadow-elevation2?: BoxShadow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-checkboxSize?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-radioSize?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-switchWidth?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-switchHeight?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-switchThumbSize?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; --controlSize-tileSize?: Width<0 \| (string & {})> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; all?: Globals \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; flex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Flex<string \| number> \| undefined; content?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Content \| undefined; page?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Page \| undefined; translate?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Translate<string \| number> \| undefined; accentColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AccentColor \| undefined; alignTracks?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignTracks \| undefined; animationComposition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationComposition \| undefined; animationDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDelay<string & {}> \| undefined; animationDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDirection \| undefined; animationDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDuration<string & {}> \| undefined; animationFillMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationFillMode \| undefined; animationIterationCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationIterationCount \| undefined; animationName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationName \| undefined; animationPlayState?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationPlayState \| undefined; animationRangeEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationRangeEnd<string \| number> \| undefined; animationRangeStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationRangeStart<string \| number> \| undefined; animationTimeline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationTimeline \| undefined; animationTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationTimingFunction \| undefined; appearance?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Appearance \| undefined; backdropFilter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackdropFilter \| undefined; backfaceVisibility?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackfaceVisibility \| undefined; backgroundAttachment?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundAttachment \| undefined; backgroundBlendMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundBlendMode \| undefined; backgroundClip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundClip \| undefined; backgroundColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundColor \| undefined; backgroundImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundImage \| undefined; backgroundOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundOrigin \| undefined; backgroundPositionX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundPositionX<string \| number> \| undefined; backgroundPositionY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundPositionY<string \| number> \| undefined; backgroundRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundRepeat \| undefined; backgroundSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundSize<string \| number> \| undefined; blockOverflow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BlockOverflow \| undefined; blockSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BlockSize<string \| number> \| undefined; borderBlockColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockColor \| undefined; borderBlockEndColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockEndColor \| undefined; borderBlockEndStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockEndStyle \| undefined; borderBlockEndWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockEndWidth<string \| number> \| undefined; borderBlockStartColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockStartColor \| undefined; borderBlockStartStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockStartStyle \| undefined; borderBlockStartWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockStartWidth<string \| number> \| undefined; borderBlockStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockStyle \| undefined; borderBlockWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockWidth<string \| number> \| undefined; borderBottomColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomColor \| undefined; borderBottomStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomStyle \| undefined; borderCollapse?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderCollapse \| undefined; borderEndEndRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderEndEndRadius<string \| number> \| undefined; borderEndStartRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderEndStartRadius<string \| number> \| undefined; borderImageOutset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageOutset<string \| number> \| undefined; borderImageRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageRepeat \| undefined; borderImageSlice?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageSlice \| undefined; borderImageSource?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageSource \| undefined; borderImageWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageWidth<string \| number> \| undefined; borderInlineColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineColor \| undefined; borderInlineEndColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndColor \| undefined; borderInlineEndStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndStyle \| undefined; borderInlineEndWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndWidth<string \| number> \| undefined; borderInlineStartColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStartColor \| undefined; borderInlineStartStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStartStyle \| undefined; borderInlineStartWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStartWidth<string \| number> \| undefined; borderInlineStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStyle \| undefined; borderInlineWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineWidth<string \| number> \| undefined; borderLeftColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderLeftColor \| undefined; borderLeftStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderLeftStyle \| undefined; borderLeftWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderLeftWidth<string \| number> \| undefined; borderRightColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRightColor \| undefined; borderRightStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRightStyle \| undefined; borderRightWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRightWidth<string \| number> \| undefined; borderSpacing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderSpacing<string \| number> \| undefined; borderStartEndRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderStartEndRadius<string \| number> \| undefined; borderStartStartRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderStartStartRadius<string \| number> \| undefined; borderTopColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopColor \| undefined; borderTopStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopStyle \| undefined; boxDecorationBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDecorationBreak \| undefined; boxShadow?: BoxShadow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; boxSizing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxSizing \| undefined; breakAfter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BreakAfter \| undefined; breakBefore?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BreakBefore \| undefined; breakInside?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BreakInside \| undefined; captionSide?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CaptionSide \| undefined; caretColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CaretColor \| undefined; caretShape?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CaretShape \| undefined; clear?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Clear \| undefined; colorAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PrintColorAdjust \| undefined; colorScheme?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColorScheme \| undefined; columnCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnCount \| undefined; columnFill?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnFill \| undefined; columnRuleColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleColor \| undefined; columnRuleStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleStyle \| undefined; columnRuleWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleWidth<string \| number> \| undefined; columnSpan?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnSpan \| undefined; columnWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnWidth<string \| number> \| undefined; contain?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Contain \| undefined; containIntrinsicBlockSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainIntrinsicBlockSize<string \| number> \| undefined; containIntrinsicHeight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainIntrinsicHeight<string \| number> \| undefined; containIntrinsicInlineSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainIntrinsicInlineSize<string \| number> \| undefined; containIntrinsicWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainIntrinsicWidth<string \| number> \| undefined; containerName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainerName \| undefined; containerType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainerType \| undefined; contentVisibility?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContentVisibility \| undefined; counterIncrement?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CounterIncrement \| undefined; counterReset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CounterReset \| undefined; counterSet?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| CounterSet \| undefined; emptyCells?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| EmptyCells \| undefined; float?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Float \| undefined; fontFeatureSettings?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontFeatureSettings \| undefined; fontKerning?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontKerning \| undefined; fontLanguageOverride?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontLanguageOverride \| undefined; fontOpticalSizing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontOpticalSizing \| undefined; fontPalette?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontPalette \| undefined; fontSmooth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSmooth<string \| number> \| undefined; fontSynthesis?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSynthesis \| undefined; fontSynthesisPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSynthesisPosition \| undefined; fontSynthesisSmallCaps?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSynthesisSmallCaps \| undefined; fontSynthesisStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSynthesisStyle \| undefined; fontSynthesisWeight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSynthesisWeight \| undefined; fontVariantAlternates?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantAlternates \| undefined; fontVariantCaps?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantCaps \| undefined; fontVariantEastAsian?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantEastAsian \| undefined; fontVariantEmoji?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantEmoji \| undefined; fontVariantLigatures?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantLigatures \| undefined; fontVariantNumeric?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantNumeric \| undefined; fontVariantPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantPosition \| undefined; fontVariationSettings?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariationSettings \| undefined; forcedColorAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ForcedColorAdjust \| undefined; hangingPunctuation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| HangingPunctuation \| undefined; hyphenateCharacter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| HyphenateCharacter \| undefined; hyphenateLimitChars?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| HyphenateLimitChars \| undefined; hyphens?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Hyphens \| undefined; imageOrientation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ImageOrientation \| undefined; imageResolution?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ImageResolution \| undefined; initialLetter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InitialLetter \| undefined; inlineSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InlineSize<string \| number> \| undefined; inputSecurity?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InputSecurity \| undefined; insetBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlockEnd<string \| number> \| undefined; insetBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlockStart<string \| number> \| undefined; insetInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInlineEnd<string \| number> \| undefined; insetInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInlineStart<string \| number> \| undefined; isolation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Isolation \| undefined; justifyItems?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| JustifyItems \| undefined; justifySelf?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| JustifySelf \| undefined; justifyTracks?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| JustifyTracks \| undefined; lineBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineBreak \| undefined; lineHeightStep?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineHeightStep<string \| number> \| undefined; listStyleImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ListStyleImage \| undefined; listStylePosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ListStylePosition \| undefined; listStyleType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ListStyleType \| undefined; marginBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginBlockEnd<string \| number> \| undefined; marginBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginBlockStart<string \| number> \| undefined; marginInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineEnd<string \| number> \| undefined; marginInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineStart<string \| number> \| undefined; marginLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginLeft<string \| number> \| undefined; marginRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginRight<string \| number> \| undefined; marginTrim?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginTrim \| undefined; maskBorderMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderMode \| undefined; maskBorderOutset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderOutset<string \| number> \| undefined; maskBorderRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderRepeat \| undefined; maskBorderSlice?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderSlice \| undefined; maskBorderSource?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderSource \| undefined; maskBorderWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderWidth<string \| number> \| undefined; maskClip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskClip \| undefined; maskComposite?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskComposite \| undefined; maskImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskImage \| undefined; maskMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskMode \| undefined; maskOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskOrigin \| undefined; maskPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskPosition<string \| number> \| undefined; maskRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskRepeat \| undefined; maskSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskSize<string \| number> \| undefined; maskType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskType \| undefined; masonryAutoFlow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MasonryAutoFlow \| undefined; mathDepth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MathDepth \| undefined; mathShift?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MathShift \| undefined; mathStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MathStyle \| undefined; maxBlockSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaxBlockSize<string \| number> \| undefined; maxInlineSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaxInlineSize<string \| number> \| undefined; maxLines?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaxLines \| undefined; minBlockSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MinBlockSize<string \| number> \| undefined; minInlineSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MinInlineSize<string \| number> \| undefined; mixBlendMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MixBlendMode \| undefined; motionDistance?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetDistance<string \| number> \| undefined; motionPath?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetPath \| undefined; motionRotation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetRotate \| undefined; objectFit?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ObjectFit \| undefined; objectPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ObjectPosition<string \| number> \| undefined; offsetAnchor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetAnchor<string \| number> \| undefined; offsetDistance?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetDistance<string \| number> \| undefined; offsetPath?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetPath \| undefined; offsetPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetPosition<string \| number> \| undefined; offsetRotate?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetRotate \| undefined; offsetRotation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OffsetRotate \| undefined; orphans?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Orphans \| undefined; outlineColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineColor \| undefined; outlineOffset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineOffset<string \| number> \| undefined; outlineStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineStyle \| undefined; outlineWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineWidth<string \| number> \| undefined; overflowAnchor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowAnchor \| undefined; overflowBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowBlock \| undefined; overflowClipBox?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowClipBox \| undefined; overflowClipMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowClipMargin<string \| number> \| undefined; overflowInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowInline \| undefined; overflowWrap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowWrap \| undefined; overflowX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowX \| undefined; overflowY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowY \| undefined; overlay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Overlay \| undefined; overscrollBehaviorBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverscrollBehaviorBlock \| undefined; overscrollBehaviorInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverscrollBehaviorInline \| undefined; overscrollBehaviorX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverscrollBehaviorX \| undefined; overscrollBehaviorY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverscrollBehaviorY \| undefined; paddingBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingBlockEnd<string \| number> \| undefined; paddingBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingBlockStart<string \| number> \| undefined; paddingInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineEnd<string \| number> \| undefined; paddingInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineStart<string \| number> \| undefined; paddingLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingLeft<string \| number> \| undefined; paddingRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingRight<string \| number> \| undefined; pageBreakAfter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PageBreakAfter \| undefined; pageBreakBefore?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PageBreakBefore \| undefined; pageBreakInside?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PageBreakInside \| undefined; perspectiveOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PerspectiveOrigin<string \| number> \| undefined; printColorAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PrintColorAdjust \| undefined; quotes?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Quotes \| undefined; resize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Resize \| undefined; rubyAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| RubyAlign \| undefined; rubyMerge?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| RubyMerge \| undefined; rubyPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| RubyPosition \| undefined; scrollBehavior?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollBehavior \| undefined; scrollMarginBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginBlockEnd<string \| number> \| undefined; scrollMarginBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginBlockStart<string \| number> \| undefined; scrollMarginBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginBottom<string \| number> \| undefined; scrollMarginInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginInlineEnd<string \| number> \| undefined; scrollMarginInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginInlineStart<string \| number> \| undefined; scrollMarginLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginLeft<string \| number> \| undefined; scrollMarginRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginRight<string \| number> \| undefined; scrollMarginTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginTop<string \| number> \| undefined; scrollPaddingBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingBlockEnd<string \| number> \| undefined; scrollPaddingBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingBlockStart<string \| number> \| undefined; scrollPaddingBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingBottom<string \| number> \| undefined; scrollPaddingInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingInlineEnd<string \| number> \| undefined; scrollPaddingInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingInlineStart<string \| number> \| undefined; scrollPaddingLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingLeft<string \| number> \| undefined; scrollPaddingRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingRight<string \| number> \| undefined; scrollPaddingTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingTop<string \| number> \| undefined; scrollSnapAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapAlign \| undefined; scrollSnapMarginBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginBottom<string \| number> \| undefined; scrollSnapMarginLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginLeft<string \| number> \| undefined; scrollSnapMarginRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginRight<string \| number> \| undefined; scrollSnapMarginTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginTop<string \| number> \| undefined; scrollSnapStop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapStop \| undefined; scrollSnapType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapType \| undefined; scrollTimelineAxis?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollTimelineAxis \| undefined; scrollTimelineName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollTimelineName \| undefined; scrollbarColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollbarColor \| undefined; scrollbarGutter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollbarGutter \| undefined; scrollbarWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollbarWidth \| undefined; shapeImageThreshold?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ShapeImageThreshold \| undefined; shapeMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ShapeMargin<string \| number> \| undefined; shapeOutside?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ShapeOutside \| undefined; tabSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TabSize<string \| number> \| undefined; tableLayout?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TableLayout \| undefined; textAlignLast?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextAlignLast \| undefined; textCombineUpright?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextCombineUpright \| undefined; textDecorationColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationColor \| undefined; textDecorationLine?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationLine \| undefined; textDecorationSkip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationSkip \| undefined; textDecorationSkipInk?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationSkipInk \| undefined; textDecorationStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationStyle \| undefined; textDecorationThickness?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationThickness<string \| number> \| undefined; textEmphasisColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisColor \| undefined; textEmphasisPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisPosition \| undefined; textEmphasisStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisStyle \| undefined; textIndent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextIndent<string \| number> \| undefined; textJustify?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextJustify \| undefined; textOrientation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextOrientation \| undefined; textOverflow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextOverflow \| undefined; textShadow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextShadow \| undefined; textSizeAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextSizeAdjust \| undefined; textUnderlineOffset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextUnderlineOffset<string \| number> \| undefined; textUnderlinePosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextUnderlinePosition \| undefined; textWrap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextWrap \| undefined; timelineScope?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TimelineScope \| undefined; touchAction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TouchAction \| undefined; transformBox?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformBox \| undefined; transformOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformOrigin<string \| number> \| undefined; transformStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformStyle \| undefined; transitionBehavior?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionBehavior \| undefined; transitionDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDelay<string & {}> \| undefined; transitionDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDuration<string & {}> \| undefined; transitionProperty?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionProperty \| undefined; transitionTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionTimingFunction \| undefined; verticalAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| VerticalAlign<string \| number> \| undefined; viewTimelineAxis?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ViewTimelineAxis \| undefined; viewTimelineInset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ViewTimelineInset<string \| number> \| undefined; viewTimelineName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ViewTimelineName \| undefined; viewTransitionName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ViewTransitionName \| undefined; whiteSpace?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WhiteSpace \| undefined; whiteSpaceCollapse?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WhiteSpaceCollapse \| undefined; whiteSpaceTrim?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WhiteSpaceTrim \| undefined; widows?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Widows \| undefined; willChange?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WillChange \| undefined; wordBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WordBreak \| undefined; wordWrap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WordWrap \| undefined; zoom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Zoom \| undefined; animation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Animation<string & {}> \| undefined; animationRange?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationRange<string \| number> \| undefined; backgroundPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundPosition<string \| number> \| undefined; border?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Border<string \| number> \| undefined; borderBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlock<string \| number> \| undefined; borderBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockEnd<string \| number> \| undefined; borderBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBlockStart<string \| number> \| undefined; borderBottom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottom<string \| number> \| undefined; borderImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImage \| undefined; borderInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInline<string \| number> \| undefined; borderInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEnd<string \| number> \| undefined; borderInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStart<string \| number> \| undefined; borderLeft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderLeft<string \| number> \| undefined; borderRight?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRight<string \| number> \| undefined; borderStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderStyle \| undefined; borderTop?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTop<string \| number> \| undefined; caret?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Caret \| undefined; columnRule?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRule<string \| number> \| undefined; columns?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Columns<string \| number> \| undefined; containIntrinsicSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ContainIntrinsicSize<string \| number> \| undefined; container?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Container \| undefined; flexFlow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexFlow \| undefined; insetBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlock<string \| number> \| undefined; insetInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInline<string \| number> \| undefined; lineClamp?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineClamp \| undefined; listStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ListStyle \| undefined; marginBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginBlock<string \| number> \| undefined; marginInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInline<string \| number> \| undefined; maskBorder?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorder \| undefined; motion?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Offset<string \| number> \| undefined; outline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Outline<string \| number> \| undefined; overscrollBehavior?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverscrollBehavior \| undefined; paddingBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingBlock<string \| number> \| undefined; paddingInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInline<string \| number> \| undefined; placeContent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PlaceContent \| undefined; placeItems?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PlaceItems \| undefined; placeSelf?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PlaceSelf \| undefined; scrollMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMargin<string \| number> \| undefined; scrollMarginBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginBlock<string \| number> \| undefined; scrollMarginInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMarginInline<string \| number> \| undefined; scrollPadding?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPadding<string \| number> \| undefined; scrollPaddingBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingBlock<string \| number> \| undefined; scrollPaddingInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollPaddingInline<string \| number> \| undefined; scrollSnapMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollMargin<string \| number> \| undefined; scrollTimeline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollTimeline \| undefined; textEmphasis?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasis \| undefined; transition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Transition<string & {}> \| undefined; viewTimeline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ViewTimeline \| undefined; MozAnimationDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDelay<string & {}> \| undefined; MozAnimationDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDirection \| undefined; MozAnimationDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDuration<string & {}> \| undefined; MozAnimationFillMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationFillMode \| undefined; MozAnimationIterationCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationIterationCount \| undefined; MozAnimationName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationName \| undefined; MozAnimationPlayState?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationPlayState \| undefined; MozAnimationTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationTimingFunction \| undefined; MozAppearance?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozAppearance \| undefined; MozBinding?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozBinding \| undefined; MozBorderBottomColors?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozBorderBottomColors \| undefined; MozBorderEndColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndColor \| undefined; MozBorderEndStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndStyle \| undefined; MozBorderEndWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineEndWidth<string \| number> \| undefined; MozBorderLeftColors?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozBorderLeftColors \| undefined; MozBorderRightColors?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozBorderRightColors \| undefined; MozBorderStartColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStartColor \| undefined; MozBorderStartStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderInlineStartStyle \| undefined; MozBorderTopColors?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozBorderTopColors \| undefined; MozBoxSizing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxSizing \| undefined; MozColumnCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnCount \| undefined; MozColumnFill?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnFill \| undefined; MozColumnRuleColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleColor \| undefined; MozColumnRuleStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleStyle \| undefined; MozColumnRuleWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleWidth<string \| number> \| undefined; MozColumnWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnWidth<string \| number> \| undefined; MozContextProperties?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozContextProperties \| undefined; MozFontFeatureSettings?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontFeatureSettings \| undefined; MozFontLanguageOverride?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontLanguageOverride \| undefined; MozHyphens?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Hyphens \| undefined; MozImageRegion?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozImageRegion \| undefined; MozMarginEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineEnd<string \| number> \| undefined; MozMarginStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineStart<string \| number> \| undefined; MozOrient?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOrient \| undefined; MozOsxFontSmoothing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSmooth<string \| number> \| undefined; MozOutlineRadiusBottomleft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOutlineRadiusBottomleft<string \| number> \| undefined; MozOutlineRadiusBottomright?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOutlineRadiusBottomright<string \| number> \| undefined; MozOutlineRadiusTopleft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOutlineRadiusTopleft<string \| number> \| undefined; MozOutlineRadiusTopright?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOutlineRadiusTopright<string \| number> \| undefined; MozPaddingEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineEnd<string \| number> \| undefined; MozPaddingStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineStart<string \| number> \| undefined; MozStackSizing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozStackSizing \| undefined; MozTabSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TabSize<string \| number> \| undefined; MozTextBlink?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozTextBlink \| undefined; MozTextSizeAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextSizeAdjust \| undefined; MozUserFocus?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozUserFocus \| undefined; MozUserModify?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozUserModify \| undefined; MozUserSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| UserSelect \| undefined; MozWindowDragging?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozWindowDragging \| undefined; MozWindowShadow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozWindowShadow \| undefined; msAccelerator?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsAccelerator \| undefined; msBlockProgression?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsBlockProgression \| undefined; msContentZoomChaining?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomChaining \| undefined; msContentZoomLimitMax?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomLimitMax \| undefined; msContentZoomLimitMin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomLimitMin \| undefined; msContentZoomSnapPoints?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomSnapPoints \| undefined; msContentZoomSnapType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomSnapType \| undefined; msContentZooming?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZooming \| undefined; msFilter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsFilter \| undefined; msFlexDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexDirection \| undefined; msFlexPositive?: FlexGrow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; msFlowFrom?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsFlowFrom \| undefined; msFlowInto?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsFlowInto \| undefined; msGridColumns?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsGridColumns<string \| number> \| undefined; msGridRows?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsGridRows<string \| number> \| undefined; msHighContrastAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsHighContrastAdjust \| undefined; msHyphenateLimitChars?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsHyphenateLimitChars \| undefined; msHyphenateLimitLines?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsHyphenateLimitLines \| undefined; msHyphenateLimitZone?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsHyphenateLimitZone<string \| number> \| undefined; msHyphens?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Hyphens \| undefined; msImeAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsImeAlign \| undefined; msLineBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineBreak \| undefined; msOrder?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Order \| undefined; msOverflowStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsOverflowStyle \| undefined; msOverflowX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowX \| undefined; msOverflowY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OverflowY \| undefined; msScrollChaining?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollChaining \| undefined; msScrollLimitXMax?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollLimitXMax<string \| number> \| undefined; msScrollLimitXMin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollLimitXMin<string \| number> \| undefined; msScrollLimitYMax?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollLimitYMax<string \| number> \| undefined; msScrollLimitYMin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollLimitYMin<string \| number> \| undefined; msScrollRails?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollRails \| undefined; msScrollSnapPointsX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollSnapPointsX \| undefined; msScrollSnapPointsY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollSnapPointsY \| undefined; msScrollSnapType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollSnapType \| undefined; msScrollTranslation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollTranslation \| undefined; msScrollbar3dlightColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbar3dlightColor \| undefined; msScrollbarArrowColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarArrowColor \| undefined; msScrollbarBaseColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarBaseColor \| undefined; msScrollbarDarkshadowColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarDarkshadowColor \| undefined; msScrollbarFaceColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarFaceColor \| undefined; msScrollbarHighlightColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarHighlightColor \| undefined; msScrollbarShadowColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarShadowColor \| undefined; msScrollbarTrackColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollbarTrackColor \| undefined; msTextAutospace?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsTextAutospace \| undefined; msTextCombineHorizontal?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextCombineUpright \| undefined; msTextOverflow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextOverflow \| undefined; msTouchAction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TouchAction \| undefined; msTouchSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsTouchSelect \| undefined; msTransform?: Transform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; msTransformOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformOrigin<string \| number> \| undefined; msTransitionDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDelay<string & {}> \| undefined; msTransitionDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDuration<string & {}> \| undefined; msTransitionProperty?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionProperty \| undefined; msTransitionTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionTimingFunction \| undefined; msUserSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsUserSelect \| undefined; msWordBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WordBreak \| undefined; msWrapFlow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsWrapFlow \| undefined; msWrapMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsWrapMargin<string \| number> \| undefined; msWrapThrough?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsWrapThrough \| undefined; msWritingMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WritingMode \| undefined; WebkitAlignContent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignContent \| undefined; WebkitAlignItems?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignItems \| undefined; WebkitAlignSelf?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AlignSelf \| undefined; WebkitAnimationDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDelay<string & {}> \| undefined; WebkitAnimationDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDirection \| undefined; WebkitAnimationDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDuration<string & {}> \| undefined; WebkitAnimationFillMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationFillMode \| undefined; WebkitAnimationIterationCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationIterationCount \| undefined; WebkitAnimationName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationName \| undefined; WebkitAnimationPlayState?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationPlayState \| undefined; WebkitAnimationTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationTimingFunction \| undefined; WebkitAppearance?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitAppearance \| undefined; WebkitBackdropFilter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackdropFilter \| undefined; WebkitBackfaceVisibility?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackfaceVisibility \| undefined; WebkitBackgroundClip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundClip \| undefined; WebkitBackgroundOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundOrigin \| undefined; WebkitBackgroundSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundSize<string \| number> \| undefined; WebkitBorderBeforeColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitBorderBeforeColor \| undefined; WebkitBorderBeforeStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitBorderBeforeStyle \| undefined; WebkitBorderBeforeWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitBorderBeforeWidth<string \| number> \| undefined; WebkitBorderBottomLeftRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomLeftRadius<string \| number> \| undefined; WebkitBorderBottomRightRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomRightRadius<string \| number> \| undefined; WebkitBorderImageSlice?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImageSlice \| undefined; WebkitBorderTopLeftRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopLeftRadius<string \| number> \| undefined; WebkitBorderTopRightRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopRightRadius<string \| number> \| undefined; WebkitBoxDecorationBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDecorationBreak \| undefined; WebkitBoxReflect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitBoxReflect<string \| number> \| undefined; WebkitBoxShadow?: BoxShadow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; WebkitBoxSizing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxSizing \| undefined; WebkitClipPath?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ClipPath \| undefined; WebkitColumnCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnCount \| undefined; WebkitColumnFill?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnFill \| undefined; WebkitColumnRuleColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleColor \| undefined; WebkitColumnRuleStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleStyle \| undefined; WebkitColumnRuleWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRuleWidth<string \| number> \| undefined; WebkitColumnSpan?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnSpan \| undefined; WebkitColumnWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnWidth<string \| number> \| undefined; WebkitFilter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Filter \| undefined; WebkitFlexBasis?: FlexBasis<string \| number> \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; WebkitFlexDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexDirection \| undefined; WebkitFlexGrow?: FlexGrow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; WebkitFlexShrink?: FlexShrink \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; WebkitFlexWrap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexWrap \| undefined; WebkitFontFeatureSettings?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontFeatureSettings \| undefined; WebkitFontKerning?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontKerning \| undefined; WebkitFontSmoothing?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontSmooth<string \| number> \| undefined; WebkitFontVariantLigatures?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FontVariantLigatures \| undefined; WebkitHyphenateCharacter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| HyphenateCharacter \| undefined; WebkitHyphens?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Hyphens \| undefined; WebkitInitialLetter?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InitialLetter \| undefined; WebkitJustifyContent?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| JustifyContent \| undefined; WebkitLineBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineBreak \| undefined; WebkitLineClamp?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitLineClamp \| undefined; WebkitMarginEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineEnd<string \| number> \| undefined; WebkitMarginStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MarginInlineStart<string \| number> \| undefined; WebkitMaskAttachment?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskAttachment \| undefined; WebkitMaskBoxImageOutset?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderOutset<string \| number> \| undefined; WebkitMaskBoxImageRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderRepeat \| undefined; WebkitMaskBoxImageSlice?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderSlice \| undefined; WebkitMaskBoxImageSource?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderSource \| undefined; WebkitMaskBoxImageWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorderWidth<string \| number> \| undefined; WebkitMaskClip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskClip \| undefined; WebkitMaskComposite?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskComposite \| undefined; WebkitMaskImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskImage \| undefined; WebkitMaskOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskOrigin \| undefined; WebkitMaskPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskPosition<string \| number> \| undefined; WebkitMaskPositionX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskPositionX<string \| number> \| undefined; WebkitMaskPositionY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskPositionY<string \| number> \| undefined; WebkitMaskRepeat?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskRepeat \| undefined; WebkitMaskRepeatX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskRepeatX \| undefined; WebkitMaskRepeatY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskRepeatY \| undefined; WebkitMaskSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMaskSize<string \| number> \| undefined; WebkitMaxInlineSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaxInlineSize<string \| number> \| undefined; WebkitOrder?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Order \| undefined; WebkitOverflowScrolling?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitOverflowScrolling \| undefined; WebkitPaddingEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineEnd<string \| number> \| undefined; WebkitPaddingStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PaddingInlineStart<string \| number> \| undefined; WebkitPerspective?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Perspective<string \| number> \| undefined; WebkitPerspectiveOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PerspectiveOrigin<string \| number> \| undefined; WebkitPrintColorAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PrintColorAdjust \| undefined; WebkitRubyPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| RubyPosition \| undefined; WebkitScrollSnapType?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapType \| undefined; WebkitShapeMargin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ShapeMargin<string \| number> \| undefined; WebkitTapHighlightColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTapHighlightColor \| undefined; WebkitTextCombine?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextCombineUpright \| undefined; WebkitTextDecorationColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationColor \| undefined; WebkitTextDecorationLine?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationLine \| undefined; WebkitTextDecorationSkip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationSkip \| undefined; WebkitTextDecorationStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationStyle \| undefined; WebkitTextEmphasisColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisColor \| undefined; WebkitTextEmphasisPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisPosition \| undefined; WebkitTextEmphasisStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasisStyle \| undefined; WebkitTextFillColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTextFillColor \| undefined; WebkitTextOrientation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextOrientation \| undefined; WebkitTextSizeAdjust?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextSizeAdjust \| undefined; WebkitTextStrokeColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTextStrokeColor \| undefined; WebkitTextStrokeWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTextStrokeWidth<string \| number> \| undefined; WebkitTextUnderlinePosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextUnderlinePosition \| undefined; WebkitTouchCallout?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTouchCallout \| undefined; WebkitTransform?: Transform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; WebkitTransformOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformOrigin<string \| number> \| undefined; WebkitTransformStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformStyle \| undefined; WebkitTransitionDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDelay<string & {}> \| undefined; WebkitTransitionDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDuration<string & {}> \| undefined; WebkitTransitionProperty?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionProperty \| undefined; WebkitTransitionTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionTimingFunction \| undefined; WebkitUserModify?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitUserModify \| undefined; WebkitUserSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| UserSelect \| undefined; WebkitWritingMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WritingMode \| undefined; MozAnimation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Animation<string & {}> \| undefined; MozBorderImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImage \| undefined; MozColumnRule?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRule<string \| number> \| undefined; MozColumns?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Columns<string \| number> \| undefined; MozOutlineRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozOutlineRadius<string \| number> \| undefined; msContentZoomLimit?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomLimit \| undefined; msContentZoomSnap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsContentZoomSnap \| undefined; msFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Flex<string \| number> \| undefined; msScrollLimit?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollLimit \| undefined; msScrollSnapX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollSnapX \| undefined; msScrollSnapY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MsScrollSnapY \| undefined; msTransition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Transition<string & {}> \| undefined; WebkitAnimation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Animation<string & {}> \| undefined; WebkitBorderBefore?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitBorderBefore<string \| number> \| undefined; WebkitBorderImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImage \| undefined; WebkitBorderRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRadius<string \| number> \| undefined; WebkitColumnRule?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ColumnRule<string \| number> \| undefined; WebkitColumns?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Columns<string \| number> \| undefined; WebkitFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Flex<string \| number> \| undefined; WebkitFlexFlow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| FlexFlow \| undefined; WebkitMask?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitMask<string \| number> \| undefined; WebkitMaskBoxImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MaskBorder \| undefined; WebkitTextEmphasis?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextEmphasis \| undefined; WebkitTextStroke?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| WebkitTextStroke<string \| number> \| undefined; WebkitTransition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Transition<string & {}> \| undefined; boxAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxAlign \| undefined; boxDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDirection \| undefined; boxFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlex \| undefined; boxFlexGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlexGroup \| undefined; boxLines?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxLines \| undefined; boxOrdinalGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrdinalGroup \| undefined; boxOrient?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrient \| undefined; boxPack?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxPack \| undefined; gridColumnGap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| GridColumnGap<string \| number> \| undefined; gridGap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| GridGap<string \| number> \| undefined; gridRowGap?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| GridRowGap<string \| number> \| undefined; imeMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ImeMode \| undefined; offsetBlock?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlock<string \| number> \| undefined; offsetBlockEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlockEnd<string \| number> \| undefined; offsetBlockStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetBlockStart<string \| number> \| undefined; offsetInline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInline<string \| number> \| undefined; offsetInlineEnd?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInlineEnd<string \| number> \| undefined; offsetInlineStart?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| InsetInlineStart<string \| number> \| undefined; scrollSnapCoordinate?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapCoordinate<string \| number> \| undefined; scrollSnapDestination?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapDestination<string \| number> \| undefined; scrollSnapPointsX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapPointsX \| undefined; scrollSnapPointsY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapPointsY \| undefined; scrollSnapTypeX?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapTypeX \| undefined; scrollSnapTypeY?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ScrollSnapTypeY \| undefined; KhtmlBoxAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxAlign \| undefined; KhtmlBoxDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDirection \| undefined; KhtmlBoxFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlex \| undefined; KhtmlBoxFlexGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlexGroup \| undefined; KhtmlBoxLines?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxLines \| undefined; KhtmlBoxOrdinalGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrdinalGroup \| undefined; KhtmlBoxOrient?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrient \| undefined; KhtmlBoxPack?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxPack \| undefined; KhtmlLineBreak?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| LineBreak \| undefined; KhtmlOpacity?: Opacity \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; KhtmlUserSelect?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| UserSelect \| undefined; MozBackfaceVisibility?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackfaceVisibility \| undefined; MozBackgroundClip?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundClip \| undefined; MozBackgroundInlinePolicy?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDecorationBreak \| undefined; MozBackgroundOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundOrigin \| undefined; MozBackgroundSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundSize<string \| number> \| undefined; MozBorderRadius?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderRadius<string \| number> \| undefined; MozBorderRadiusBottomleft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomLeftRadius<string \| number> \| undefined; MozBorderRadiusBottomright?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderBottomRightRadius<string \| number> \| undefined; MozBorderRadiusTopleft?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopLeftRadius<string \| number> \| undefined; MozBorderRadiusTopright?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderTopRightRadius<string \| number> \| undefined; MozBoxAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxAlign \| undefined; MozBoxDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDirection \| undefined; MozBoxFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlex \| undefined; MozBoxOrdinalGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrdinalGroup \| undefined; MozBoxOrient?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrient \| undefined; MozBoxPack?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxPack \| undefined; MozBoxShadow?: BoxShadow \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; MozFloatEdge?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozFloatEdge \| undefined; MozForceBrokenImageIcon?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozForceBrokenImageIcon \| undefined; MozOpacity?: Opacity \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; MozOutline?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Outline<string \| number> \| undefined; MozOutlineColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineColor \| undefined; MozOutlineStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineStyle \| undefined; MozOutlineWidth?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| OutlineWidth<string \| number> \| undefined; MozPerspective?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Perspective<string \| number> \| undefined; MozPerspectiveOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| PerspectiveOrigin<string \| number> \| undefined; MozTextAlignLast?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextAlignLast \| undefined; MozTextDecorationColor?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationColor \| undefined; MozTextDecorationLine?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationLine \| undefined; MozTextDecorationStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextDecorationStyle \| undefined; MozTransform?: Transform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; MozTransformOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformOrigin<string \| number> \| undefined; MozTransformStyle?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformStyle \| undefined; MozTransition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Transition<string & {}> \| undefined; MozTransitionDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDelay<string & {}> \| undefined; MozTransitionDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDuration<string & {}> \| undefined; MozTransitionProperty?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionProperty \| undefined; MozTransitionTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionTimingFunction \| undefined; MozUserInput?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| MozUserInput \| undefined; msImeMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ImeMode \| undefined; OAnimation?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Animation<string & {}> \| undefined; OAnimationDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDelay<string & {}> \| undefined; OAnimationDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDirection \| undefined; OAnimationDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationDuration<string & {}> \| undefined; OAnimationFillMode?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationFillMode \| undefined; OAnimationIterationCount?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationIterationCount \| undefined; OAnimationName?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationName \| undefined; OAnimationPlayState?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationPlayState \| undefined; OAnimationTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| AnimationTimingFunction \| undefined; OBackgroundSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BackgroundSize<string \| number> \| undefined; OBorderImage?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BorderImage \| undefined; OObjectFit?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ObjectFit \| undefined; OObjectPosition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| ObjectPosition<string \| number> \| undefined; OTabSize?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TabSize<string \| number> \| undefined; OTextOverflow?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TextOverflow \| undefined; OTransform?: Transform \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; OTransformOrigin?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransformOrigin<string \| number> \| undefined; OTransition?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| Transition<string & {}> \| undefined; OTransitionDelay?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDelay<string & {}> \| undefined; OTransitionDuration?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionDuration<string & {}> \| undefined; OTransitionProperty?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionProperty \| undefined; OTransitionTimingFunction?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| TransitionTimingFunction \| undefined; WebkitBoxAlign?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxAlign \| undefined; WebkitBoxDirection?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxDirection \| undefined; WebkitBoxFlex?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlex \| undefined; WebkitBoxFlexGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxFlexGroup \| undefined; WebkitBoxLines?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxLines \| undefined; WebkitBoxOrdinalGroup?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrdinalGroup \| undefined; WebkitBoxOrient?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxOrient \| undefined; WebkitBoxPack?: MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| BoxPack \| undefined; }> & MakeCustomValueType<{ x?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; y?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; z?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; translateX?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; translateY?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; translateZ?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; rotate?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; rotateX?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; rotateY?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; rotateZ?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; scale?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; scaleX?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; scaleY?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; scaleZ?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; skew?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; skewX?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; skewY?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; originX?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; originY?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; originZ?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; perspective?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; transformPerspective?: string \| number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; }> & MakeCustomValueType<{ pathLength?: number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; pathOffset?: number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; pathSpacing?: number \| MotionValue<number> \| MotionValue<string> \| MotionValue<any> \| undefined; }> & MakeCustomValueType<CustomStyles>) \| undefined` | No | `-` |  The React DOM style prop, enhanced with support for MotionValues and separate transform values.  jsx export const MyComponent = () => {   const x = useMotionValue(0)    return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> }  |
| `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 \| end \| start \| 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 | `-` | - |
| `transformTemplate` | `((transform: TransformProperties, generatedTransform: string) => string)` | No | `-` | By default, Framer Motion generates a transform property with a sensible transform order. transformTemplate can be used to create a different order, or to append/preprend the automatically generated transform property.  jsx <motion.div   style={{ x: 0, rotate: 180 }}   transformTemplate={     ({ x, rotate }) => rotate(${rotate}deg) translateX(${x}px)   } />  |
| `transformValues` | `(<V extends ResolvedValues>(values: V) => V)` | No | `-` | Internal.  This allows values to be transformed before being animated or set as styles.  For instance, this allows custom values in Framer Library like size to be converted into width and height. It also allows us a chance to take a value like Color and convert it to an animatable color string.  A few structural typing changes need making before this can be a public property: - Allow Target values to be appended by user-defined types (delete CustomStyles - does size throw a type error?) - Extract CustomValueType as a separate user-defined type (delete CustomValueType and animate a Color - does this throw a type error?). |
| `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 | `-` | Default transition. If no transition is defined in animate, it will use the transition defined here. jsx const spring = {   type: spring,   damping: 10,   stiffness: 100 }  <motion.div transition={spring} animate={{ scale: 1.2 }} />  |
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
| `variants` | `Variants` | No | `-` | Variants allow you to define animation states and organise them by name. They allow you to control animations throughout a component tree by switching a single animate prop.  Using transition options like delayChildren and staggerChildren, you can orchestrate when children animations play relative to their parent.   After passing variants to one or more motion components variants prop, these variants can be used in place of values on the animate, initial, whileFocus, whileTap and whileHover props.  jsx const variants = {   active: {       backgroundColor: #f00   },   inactive: {     backgroundColor: #fff,     transition: { duration: 2 }   } }  <motion.div variants={variants} animate=active />  |
| `viewport` | `ViewportOptions` | No | `-` | - |
| `visibility` | `ResponsiveProp<visible \| hidden>` | No | `-` | - |
| `whileDrag` | `VariantLabels \| TargetAndTransition` | No | `-` | Properties or variant label to animate to while the drag gesture is recognised.  jsx <motion.div whileDrag={{ scale: 1.2 }} />  |
| `whileFocus` | `VariantLabels \| TargetAndTransition` | No | `-` | Properties or variant label to animate to while the focus gesture is recognised.  jsx <motion.input whileFocus={{ scale: 1.2 }} />  |
| `whileHover` | `VariantLabels \| TargetAndTransition` | No | `-` | Properties or variant label to animate to while the hover gesture is recognised.  jsx <motion.div whileHover={{ scale: 1.2 }} />  |
| `whileInView` | `VariantLabels \| TargetAndTransition` | No | `-` | - |
| `whileTap` | `VariantLabels \| TargetAndTransition` | No | `-` | Properties or variant label to animate to while the component is pressed.  jsx <motion.div whileTap={{ scale: 0.8 }} />  |
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |