From f76c445b5b9265640098f14338b42261837d4746 Mon Sep 17 00:00:00 2001
From: Jeff Luyau <jluyau@users.noreply.github.com>
Date: Tue, 22 Apr 2025 13:53:15 -0700
Subject: [PATCH 01/24] feat(s2): coachmarks (#7590)

* GW coachmark

* fix TS errors

* remove unrelated files, update yarn.lock

* remove unneeded import

* lint fix

* more lint fixes

* remove old stories

* remove unused import

* fix yarn lock

* API changes to bring in line with other s2 components

* Cleanup to get merged

* fix lint and tests

* remove from exports entirely

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>
---
 packages/@react-spectrum/s2/package.json      |   2 +
 packages/@react-spectrum/s2/src/CoachMark.tsx | 530 ++++++++++++++++++
 .../s2/stories/CoachMark.stories.tsx          | 201 +++++++
 .../s2/test/CoachMark.test.tsx                |  78 +++
 yarn.lock                                     |   2 +
 5 files changed, 813 insertions(+)
 create mode 100644 packages/@react-spectrum/s2/src/CoachMark.tsx
 create mode 100644 packages/@react-spectrum/s2/stories/CoachMark.stories.tsx
 create mode 100644 packages/@react-spectrum/s2/test/CoachMark.test.tsx

diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
index 25c7e00c451..c631e2beaf8 100644
--- a/packages/@react-spectrum/s2/package.json
+++ b/packages/@react-spectrum/s2/package.json
@@ -135,9 +135,11 @@
     "@react-aria/i18n": "^3.12.8",
     "@react-aria/interactions": "^3.25.0",
     "@react-aria/live-announcer": "^3.4.2",
+    "@react-aria/overlays": "^3.27.0",
     "@react-aria/utils": "^3.28.2",
     "@react-spectrum/utils": "^3.12.4",
     "@react-stately/layout": "^4.2.2",
+    "@react-stately/menu": "^3.9.3",
     "@react-stately/utils": "^3.10.6",
     "@react-types/dialog": "^3.5.17",
     "@react-types/grid": "^3.3.1",
diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
new file mode 100644
index 00000000000..4edb0a55c84
--- /dev/null
+++ b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -0,0 +1,530 @@
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {ActionMenuContext} from './ActionMenu';
+import {
+  DialogTriggerProps as AriaDialogTriggerProps,
+  Popover as AriaPopover,
+  ContextValue,
+  DEFAULT_SLOT,
+  DialogContext,
+  OverlayTriggerStateContext,
+  PopoverContext,
+  PopoverProps,
+  Provider,
+  RootMenuTriggerStateContext,
+  useContextProps
+} from 'react-aria-components';
+import {ButtonContext} from './Button';
+import {Card} from './Card';
+import {CheckboxContext} from './Checkbox';
+import {colorScheme, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {ColorSchemeContext} from './Provider';
+import {ContentContext, FooterContext, KeyboardContext, TextContext} from './Content';
+import {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useContext,
+  useRef
+} from 'react';
+import {DividerContext} from './Divider';
+import {forwardRefType} from './types';
+import {ImageContext} from './Image';
+import {ImageCoordinator} from './ImageCoordinator';
+import {keyframes, raw} from '../style/style-macro' with {type: 'macro'};
+import {mergeStyles} from '../style/runtime';
+import {PressResponder} from '@react-aria/interactions';
+import {SliderContext} from './Slider';
+import {space, style} from '../style' with {type: 'macro'};
+import {useId, useObjectRef, useOverlayTrigger} from 'react-aria';
+import {useLayoutEffect} from '@react-aria/utils';
+import {useMenuTriggerState} from '@react-stately/menu';
+
+export interface CoachMarkProps extends Omit<PopoverProps, 'children' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'isNonModal'>, StyleProps {
+  /** The children of the coach mark. */
+  children: ReactNode,
+
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+
+const fadeKeyframes = keyframes(`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`);
+const slideUpKeyframes = keyframes(`
+  from {
+    transform: translateY(-4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`);
+const slideDownKeyframes = keyframes(`
+  from {
+    transform: translateY(4px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+`);
+const slideRightKeyframes = keyframes(`
+  from {
+    transform: translateX(4px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`);
+const slideLeftKeyframes = keyframes(`
+  from {
+    transform: translateX(-4px);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+`);
+
+let popover = style({
+  ...colorScheme(),
+  '--s2-container-bg': {
+    type: 'backgroundColor',
+    value: 'layer-2'
+  },
+  backgroundColor: '--s2-container-bg',
+  borderRadius: 'lg',
+  filter: {
+    isArrowShown: 'elevated'
+  },
+  // Use box-shadow instead of filter when an arrow is not shown.
+  // This fixes the shadow stacking problem with submenus.
+  boxShadow: {
+    default: 'elevated',
+    isArrowShown: 'none'
+  },
+  borderStyle: 'solid',
+  borderWidth: 1,
+  borderColor: {
+    default: 'gray-200',
+    forcedColors: 'ButtonBorder'
+  },
+  width: {
+    size: {
+      // Copied from designs, not sure if correct.
+      S: 336,
+      M: 416,
+      L: 576
+    }
+  },
+  // Don't be larger than full screen minus 2 * containerPadding
+  maxWidth: '[calc(100vw - 24px)]',
+  boxSizing: 'border-box',
+  translateY: {
+    placement: {
+      bottom: {
+        isArrowShown: 8 // TODO: not defined yet should this change with font size? need boolean support for 'hideArrow' prop
+      },
+      top: {
+        isArrowShown: -8
+      }
+    }
+  },
+  translateX: {
+    placement: {
+      left: {
+        isArrowShown: -8
+      },
+      right: {
+        isArrowShown: 8
+      }
+    }
+  },
+  animation: {
+    placement: {
+      top: {
+        isEntering: `${slideDownKeyframes}, ${fadeKeyframes}`,
+        isExiting: `${slideDownKeyframes}, ${fadeKeyframes}`
+      },
+      bottom: {
+        isEntering: `${slideUpKeyframes}, ${fadeKeyframes}`,
+        isExiting: `${slideUpKeyframes}, ${fadeKeyframes}`
+      },
+      left: {
+        isEntering: `${slideRightKeyframes}, ${fadeKeyframes}`,
+        isExiting: `${slideRightKeyframes}, ${fadeKeyframes}`
+      },
+      right: {
+        isEntering: `${slideLeftKeyframes}, ${fadeKeyframes}`,
+        isExiting: `${slideLeftKeyframes}, ${fadeKeyframes}`
+      }
+    },
+    isSubmenu: {
+      isEntering: fadeKeyframes,
+      isExiting: fadeKeyframes
+    }
+  },
+  animationDuration: {
+    isEntering: 200,
+    isExiting: 200
+  },
+  animationDirection: {
+    isEntering: 'normal',
+    isExiting: 'reverse'
+  },
+  animationTimingFunction: {
+    isExiting: 'in'
+  },
+  transition: '[opacity, transform]',
+  willChange: '[opacity, transform]',
+  isolation: 'isolate',
+  pointerEvents: {
+    isExiting: 'none'
+  }
+}, getAllowedOverrides());
+
+const image = style({
+  width: 'full',
+  aspectRatio: '[3/2]',
+  objectFit: 'cover',
+  userSelect: 'none',
+  pointerEvents: 'none'
+});
+
+let title = style({
+  font: 'title',
+  fontSize: {
+    size: {
+      XS: 'title-xs',
+      S: 'title-xs',
+      M: 'title-sm',
+      L: 'title',
+      XL: 'title-lg'
+    }
+  },
+  lineClamp: 3,
+  gridArea: 'title'
+});
+
+let description = style({
+  font: 'body',
+  fontSize: {
+    size: {
+      XS: 'body-2xs',
+      S: 'body-2xs',
+      M: 'body-xs',
+      L: 'body-sm',
+      XL: 'body'
+    }
+  },
+  lineClamp: 3,
+  gridArea: 'description'
+});
+
+let keyboard = style({
+  gridArea: 'keyboard',
+  font: 'ui',
+  fontWeight: 'light',
+  color: 'gray-600',
+  background: 'gray-25',
+  unicodeBidi: 'plaintext'
+});
+
+let steps = style({
+  font: 'detail',
+  fontSize: 'detail-sm',
+  alignSelf: 'center'
+});
+
+let content = style({
+  display: 'grid',
+  // By default, all elements are displayed in a stack.
+  // If an action menu is present, place it next to the title.
+  gridTemplateColumns: {
+    default: ['1fr'],
+    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']
+  },
+  gridTemplateAreas: {
+    default: [
+      'title keyboard',
+      'description keyboard'
+    ],
+    ':has([data-slot=menu])': [
+      'title menu',
+      'keyboard keyboard',
+      'description description'
+    ]
+  },
+  columnGap: 4,
+  flexGrow: 1,
+  alignItems: 'baseline',
+  alignContent: 'space-between',
+  rowGap: {
+    size: {
+      XS: 4,
+      S: 4,
+      M: space(6),
+      L: space(6),
+      XL: 8
+    }
+  },
+  paddingTop: {
+    default: '--card-spacing',
+    ':first-child': 0
+  },
+  paddingBottom: {
+    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    ':last-child': 0
+  }
+});
+
+let actionMenu = style({
+  gridArea: 'menu',
+  // Don't cause the row to expand, preserve gap between title and description text.
+  // Would use -100% here but it doesn't work in Firefox.
+  marginY: '[calc(-1 * self(height))]'
+});
+
+let footer = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'end',
+  justifyContent: 'space-between',
+  gap: 8,
+  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+});
+
+const actionButtonSize = {
+  XS: 'XS',
+  S: 'XS',
+  M: 'S',
+  L: 'M',
+  XL: 'L'
+} as const;
+
+export const CoachMarkContext = createContext<ContextValue<CoachMarkProps, HTMLElement>>({});
+
+export const CoachMark = forwardRef((props: CoachMarkProps, ref: ForwardedRef<HTMLElement>) => {
+  let colorScheme = useContext(ColorSchemeContext);
+  [props, ref] = useContextProps(props, ref, CoachMarkContext);
+  let {UNSAFE_style} = props;
+  let {size = 'M'} = props;
+  let popoverRef = useObjectRef(ref);
+
+  let children = (
+    <Provider
+      values={[
+        [ImageContext, {alt: '', styles: image}],
+        [TextContext, {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            title: {styles: title({size})},
+            description: {styles: description({size})},
+            steps: {styles: steps}
+          }
+        }],
+        [KeyboardContext, {styles: keyboard}],
+        [ContentContext, {styles: content({size})}],
+        [DividerContext, {size: 'S'}],
+        [FooterContext, {styles: footer}],
+        [ActionMenuContext, {
+          isQuiet: true,
+          size: actionButtonSize[size],
+          // @ts-ignore
+          'data-slot': 'menu',
+          styles: actionMenu
+        }]
+      ]}>
+      <ImageCoordinator>
+        {props.children}
+      </ImageCoordinator>
+    </Provider>
+  );
+
+  return (
+    <AriaPopover
+      {...props}
+      ref={popoverRef}
+      style={{
+        ...UNSAFE_style,
+        // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
+        zIndex: undefined
+      }}
+      className={(renderProps) =>  mergeStyles(popover({...renderProps, colorScheme}))}>
+      <Card>
+        {/* }// Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}
+        <OverlayTriggerStateContext.Provider value={null}>
+          {children}
+        </OverlayTriggerStateContext.Provider>
+      </Card>
+    </AriaPopover>
+  );
+});
+
+
+export interface CoachMarkTriggerProps extends AriaDialogTriggerProps {
+}
+
+/**
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+ * open state with the trigger's press state. Additionally, it allows you to customize the type and
+ * positioning of the Dialog.
+ */
+export function CoachMarkTrigger(props: CoachMarkTriggerProps): ReactNode {
+  let triggerRef = useRef<HTMLDivElement>(null);
+  // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
+  // This is needed to handle submenus.
+  let state = useMenuTriggerState(props);
+
+  let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, triggerRef);
+
+  // Label dialog by the trigger as a fallback if there is no title slot.
+  // This is done in RAC instead of hooks because otherwise we cannot distinguish
+  // between context and props. Normally aria-labelledby overrides the title
+  // but when sent by context we want the title to win.
+  triggerProps.id = useId();
+  overlayProps['aria-labelledby'] = triggerProps.id;
+
+
+  return (
+    <Provider
+      values={[
+          [OverlayTriggerStateContext, state],
+          [RootMenuTriggerStateContext, state],
+          [DialogContext, overlayProps],
+          [PopoverContext, {trigger: 'DialogTrigger', triggerRef, isNonModal: true}] // valid to pass triggerRef?
+      ]}>
+      <PressResponder {...triggerProps} isPressed={state.isOpen}>
+        <CoachMarkIndicator ref={triggerRef} isActive={state.isOpen}>
+          {props.children}
+        </CoachMarkIndicator>
+      </PressResponder>
+    </Provider>
+  );
+}
+
+
+// TODO better way to calculate 4px transform? (not 4%?)
+const pulseAnimation = keyframes(`
+  0% {
+    box-shadow: 0 0 0 4px rgba(20, 115, 230, 0.40);
+    transform: scale(calc(100%));
+  }
+  50% {
+     box-shadow: 0 0 0 10px rgba(20, 115, 230, 0.20);
+     transform: scale(104%);
+  }
+  100% {
+     box-shadow: 0 0 0 4px rgba(20, 115, 230, 0.40);
+     transform: scale(calc(100%));
+  }
+`);
+
+
+const indicator = style({
+  animationDuration: 1000,
+  animationIterationCount: 'infinite',
+  animationFillMode: 'forwards',
+  animationTimingFunction: 'in-out',
+  position: 'relative',
+  '--activeElement': {
+    type: 'outlineColor',
+    value: {
+      default: 'focus-ring',
+      forcedColors: 'Highlight'
+    }
+  },
+  '--borderOffset': {
+    type: 'top',
+    value: {
+      default: '[-2px]',
+      ':has([data-trigger=checkbox])': '[-6px]',
+      ':has([data-trigger=slider])': '[-8px]',
+      offset: {
+        M: '[-6px]',
+        L: '[-8px]'
+      }
+    }
+  },
+  '--ringRadius': {
+    type: 'top', // is there a generic for pixel values?
+    value: {
+      default: '[10px]',
+      ':has([data-trigger=button])': '[18px]',
+      ':has([data-trigger=checkbox])': '[6px]'
+    }
+  }
+});
+
+const pulse = raw(`&:before { content: ""; display: inline-block; position: absolute; top: var(--borderOffset); bottom:  var(--borderOffset); left: var(--borderOffset); right: var(--borderOffset); border-radius: var(--ringRadius); outline-style: solid; outline-color: var(--activeElement); outline-width: 4px; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-name: ${pulseAnimation}}`);
+
+interface CoachMarkIndicatorProps {
+  children: ReactNode,
+  isActive?: boolean
+}
+export const CoachMarkIndicator = /*#__PURE__*/ (forwardRef as forwardRefType)(function CoachMarkIndicator(props: CoachMarkIndicatorProps, ref: ForwardedRef<HTMLDivElement>) {
+  const {children, isActive} = props;
+  let objRef = useObjectRef(ref);
+
+    // This is very silly... better ways? can't use display: contents because it breaks positioning
+  // this will break if there is a resize or different styles
+  useLayoutEffect(() => {
+    if (objRef.current) {
+      let styles = getComputedStyle(objRef.current.children[0]);
+      let childDisplay = styles.getPropertyValue('display');
+      let childMaxWidth = styles.getPropertyValue('max-width');
+      let childMaxHeight = styles.getPropertyValue('max-height');
+      let childWidth = styles.getPropertyValue('width');
+      let childHeight = styles.getPropertyValue('height');
+      let childMinWidth = styles.getPropertyValue('min-width');
+      let childMinHeight = styles.getPropertyValue('min-height');
+      objRef.current.style.display = childDisplay;
+      objRef.current.style.maxWidth = childMaxWidth;
+      objRef.current.style.maxHeight = childMaxHeight;
+      objRef.current.style.width = childWidth;
+      objRef.current.style.height = childHeight;
+      objRef.current.style.minWidth = childMinWidth;
+      objRef.current.style.minHeight = childMinHeight;
+    }
+  }, [children]);
+
+  return (
+    <div ref={objRef} className={indicator({isActive}) + ' ' + (isActive ? pulse : '')}>
+      <Provider
+        values={[
+          [ButtonContext, {
+            // @ts-ignore
+            'data-trigger': 'button'
+          }],
+          [CheckboxContext, {
+            // @ts-ignore
+            'data-trigger': 'checkbox'
+          }],
+          [SliderContext, {
+            // @ts-ignore
+            'data-trigger': 'slider'
+          }]
+        ]}>
+        {children}
+      </Provider>
+    </div>
+  );
+});
diff --git a/packages/@react-spectrum/s2/stories/CoachMark.stories.tsx b/packages/@react-spectrum/s2/stories/CoachMark.stories.tsx
new file mode 100644
index 00000000000..3c213163383
--- /dev/null
+++ b/packages/@react-spectrum/s2/stories/CoachMark.stories.tsx
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import {
+  ActionButton,
+  ActionMenu,
+  Button,
+  CardPreview,
+  Checkbox,
+  Content,
+  Footer,
+  Image,
+  Keyboard,
+  MenuItem,
+  Slider,
+  Text
+} from '../src';
+import {CoachMark, CoachMarkTrigger} from '../src/CoachMark';
+import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
+import type {Meta, StoryObj} from '@storybook/react';
+import {style} from '../style' with {type: 'macro'};
+import {useState} from 'react';
+
+const meta: Meta<typeof CoachMark> = {
+  component: CoachMark,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    placement: {
+      control: 'radio',
+      options: ['top', 'left', 'left top', 'right', 'right top', 'bottom']
+    }
+  },
+  title: 'CoachMark'
+};
+
+export default meta;
+type Story = StoryObj<typeof CoachMark>;
+
+export const CoachMarkExample: Story = {
+  render: (args) => (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
+      <Button>Before</Button>
+      <CoachMarkTrigger defaultOpen>
+        <Checkbox>Sync with CC</Checkbox>
+        <CoachMark placement="right top" {...args}>
+          <CardPreview>
+            <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+          </CardPreview>
+          <Content>
+            <Text slot="title">Hello</Text>
+            <ActionMenu>
+              <MenuItem>Skip tour</MenuItem>
+              <MenuItem>Restart tour</MenuItem>
+            </ActionMenu>
+            <Keyboard>Command + B</Keyboard>
+            <Text slot="description">This is the description</Text>
+          </Content>
+          <Footer>
+            <Text slot="steps">1 of 10</Text>
+            <Button fillStyle="outline" variant="secondary">Previous</Button>
+            <Button variant="primary">Next</Button>
+          </Footer>
+        </CoachMark>
+      </CoachMarkTrigger>
+      <Button>After</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
+function ControlledCoachMark(args) {
+  let [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
+      <Button onPress={() => setIsOpen(true)}>Open</Button>
+      <CoachMarkTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+        <Checkbox>Sync with CC</Checkbox>
+        <CoachMark placement="right top" {...args}>
+          <CardPreview>
+            <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+          </CardPreview>
+          <Content>
+            <Text slot="title">Hello</Text>
+            <ActionMenu>
+              <MenuItem>Skip tour</MenuItem>
+              <MenuItem>Restart tour</MenuItem>
+            </ActionMenu>
+            <Keyboard>Command + B</Keyboard>
+            <Text slot="description">This is the description</Text>
+          </Content>
+          <Footer>
+            <Text slot="steps">1 of 10</Text>
+            <Button fillStyle="outline" variant="secondary">Previous</Button>
+            <Button variant="primary">Next</Button>
+          </Footer>
+        </CoachMark>
+      </CoachMarkTrigger>
+      <Button onPress={() => setIsOpen(false)}>Close</Button>
+    </div>
+  );
+}
+
+export const CoachMarkRestartable: Story = {
+  render: (args) => (
+    <ControlledCoachMark {...args} />
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
+export const CoachMarkSlider: Story = {
+  render: (args) => (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
+      <Button>Before</Button>
+      <CoachMarkTrigger defaultOpen>
+        <Slider label="Horizontal position" labelPosition="top" />
+        <CoachMark placement="right top" {...args}>
+          <CardPreview>
+            <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+          </CardPreview>
+          <Content>
+            <Text slot="title">Hello</Text>
+            <ActionMenu>
+              <MenuItem>Skip tour</MenuItem>
+              <MenuItem>Restart tour</MenuItem>
+            </ActionMenu>
+            <Keyboard>Command + B</Keyboard>
+            <Text slot="description">This is the description</Text>
+          </Content>
+          <Footer>
+            <Text slot="steps">1 of 10</Text>
+            <Button fillStyle="outline" variant="secondary">Previous</Button>
+            <Button variant="primary">Next</Button>
+          </Footer>
+        </CoachMark>
+      </CoachMarkTrigger>
+      <Button>After</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+
+export const CoachMarkButton: Story = {
+  render: (args) => (
+    <div className={style({display: 'flex', flexDirection: 'column', gap: 16})}>
+      <Button>Before</Button>
+      <CoachMarkTrigger defaultOpen>
+        <ActionButton>
+          <Filter />
+        </ActionButton>
+        <CoachMark placement="right top" {...args}>
+          <CardPreview>
+            <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+          </CardPreview>
+          <Content>
+            <Text slot="title">Hello</Text>
+            <ActionMenu>
+              <MenuItem>Skip tour</MenuItem>
+              <MenuItem>Restart tour</MenuItem>
+            </ActionMenu>
+            <Keyboard>Command + B</Keyboard>
+            <Text slot="description">This is the description</Text>
+          </Content>
+          <Footer>
+            <Text slot="steps">1 of 10</Text>
+            <Button fillStyle="outline" variant="secondary">Previous</Button>
+            <Button variant="primary">Next</Button>
+          </Footer>
+        </CoachMark>
+      </CoachMarkTrigger>
+      <Button>After</Button>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
diff --git a/packages/@react-spectrum/s2/test/CoachMark.test.tsx b/packages/@react-spectrum/s2/test/CoachMark.test.tsx
new file mode 100644
index 00000000000..6814ac9d717
--- /dev/null
+++ b/packages/@react-spectrum/s2/test/CoachMark.test.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {act, pointerMap, render} from '@react-spectrum/test-utils-internal';
+import {
+  ActionMenu,
+  Button,
+  CardPreview,
+  Checkbox,
+  Content,
+  Footer,
+  Image,
+  Keyboard,
+  MenuItem,
+  Text
+} from '../src';
+import {CoachMark, CoachMarkTrigger} from '../src/CoachMark';
+import React from 'react';
+import userEvent, {UserEvent} from '@testing-library/user-event';
+
+const mockAnimations = () => {
+  Element.prototype.animate = jest.fn().mockImplementation(() => ({finished: Promise.resolve()}));
+};
+
+describe('CoachMark', () => {
+  let user: UserEvent | null = null;
+  beforeAll(() => {
+    jest.useFakeTimers();
+    mockAnimations();
+  });
+  beforeEach(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+  afterAll(() => {
+    act(() => {jest.runAllTimers();});
+  });
+
+  it('renders a coachmark', async () => {
+    let onPress = jest.fn();
+    let {getAllByRole} = render(
+      <CoachMarkTrigger isOpen>
+        <Checkbox>Sync with CC</Checkbox>
+        <CoachMark placement="right top">
+          <CardPreview>
+            <Image src={new URL('assets/preview.png', import.meta.url).toString()} />
+          </CardPreview>
+          <Content>
+            <Text slot="title">Hello</Text>
+            <ActionMenu>
+              <MenuItem>Skip tour</MenuItem>
+              <MenuItem>Restart tour</MenuItem>
+            </ActionMenu>
+            <Keyboard>Command + B</Keyboard>
+            <Text slot="description">This is the description</Text>
+          </Content>
+          <Footer>
+            <Text slot="steps">1 of 10</Text>
+            <Button fillStyle="outline" variant="secondary">Previous</Button>
+            <Button variant="primary" onPress={onPress}>Next</Button>
+          </Footer>
+        </CoachMark>
+      </CoachMarkTrigger>
+    );
+    act(() => {jest.runAllTimers();});
+    expect(getAllByRole('button').length).toBe(4); // 2 Dismiss + 2 actions
+    await user?.click(getAllByRole('button')[2]);
+    expect(onPress).toHaveBeenCalled();
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 1908468e5ff..6dae49af9c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7943,10 +7943,12 @@ __metadata:
     "@react-aria/i18n": "npm:^3.12.8"
     "@react-aria/interactions": "npm:^3.25.0"
     "@react-aria/live-announcer": "npm:^3.4.2"
+    "@react-aria/overlays": "npm:^3.27.0"
     "@react-aria/test-utils": "npm:1.0.0-alpha.3"
     "@react-aria/utils": "npm:^3.28.2"
     "@react-spectrum/utils": "npm:^3.12.4"
     "@react-stately/layout": "npm:^4.2.2"
+    "@react-stately/menu": "npm:^3.9.3"
     "@react-stately/utils": "npm:^3.10.6"
     "@react-types/dialog": "npm:^3.5.17"
     "@react-types/grid": "npm:^3.3.1"

From 2e9061df69eb17f17b0fb7d64d318c2835aed145 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Wed, 23 Apr 2025 15:20:07 -0700
Subject: [PATCH 02/24] fix: spelling mistake in style macros list-style-type
 (#8124)

---
 packages/@react-spectrum/s2/style/spectrum-theme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 38ff6ce7b1a..4193e2c85a4 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -789,7 +789,7 @@ export const style = createTheme({
         ':lang(ja, ko, zh, zh-Hant, zh-Hans)': getToken('code-cjk-line-height')
       }
     },
-    listStyleType: ['none', 'dist', 'decimal'] as const,
+    listStyleType: ['none', 'disc', 'decimal'] as const,
     listStylePosition: ['inside', 'outside'] as const,
     textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'] as const,
     textAlign: ['start', 'center', 'end', 'justify'] as const,

From 9fe5629838c758b86d9fae2e99266518f9ebe0e0 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Sat, 26 Apr 2025 08:24:09 +1000
Subject: [PATCH 03/24] chore: add portal provider to react-aria monopackage
 (#8135)

---
 packages/react-aria/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria/src/index.ts b/packages/react-aria/src/index.ts
index 09f001db48b..bc63fd9515a 100644
--- a/packages/react-aria/src/index.ts
+++ b/packages/react-aria/src/index.ts
@@ -31,7 +31,7 @@ export {useListBox, useListBoxSection, useOption} from '@react-aria/listbox';
 export {useMenu, useMenuItem, useMenuSection, useMenuTrigger, useSubmenuTrigger} from '@react-aria/menu';
 export {useMeter} from '@react-aria/meter';
 export {useNumberField} from '@react-aria/numberfield';
-export {DismissButton, ModalProvider, Overlay, OverlayContainer, OverlayProvider, useModal, useModalOverlay, useModalProvider, useOverlay, useOverlayPosition, useOverlayTrigger, usePopover, usePreventScroll} from '@react-aria/overlays';
+export {DismissButton, ModalProvider, Overlay, OverlayContainer, OverlayProvider, useModal, useModalOverlay, useModalProvider, useOverlay, useOverlayPosition, useOverlayTrigger, usePopover, usePreventScroll, UNSAFE_PortalProvider} from '@react-aria/overlays';
 export {useProgressBar} from '@react-aria/progress';
 export {useRadio, useRadioGroup} from '@react-aria/radio';
 export {useSearchField} from '@react-aria/searchfield';

From 63d4359d6c7073033dbd000e4bddba1ab342ddb2 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Sat, 26 Apr 2025 08:33:42 +1000
Subject: [PATCH 04/24] chore: TS update 5.8 (#8061)

---
 .../@types-node-npm-20.14.13-41f92d384c.patch | 13 +++++++
 lib/viewTransitions.d.ts                      |  5 ---
 package.json                                  |  7 ++--
 .../dnd/src/useDroppableCollection.ts         | 29 +++++++++------
 .../grid/src/useGridSelectionAnnouncement.ts  | 19 ++++++----
 .../calendar/stories/Calendar.stories.tsx     |  2 +-
 .../datepicker/stories/DateField.stories.tsx  |  4 +--
 .../datepicker/stories/DatePicker.stories.tsx |  2 +-
 .../stories/DateRangePicker.stories.tsx       |  2 +-
 .../form/stories/Form.stories.tsx             |  2 +-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    | 12 ++++---
 .../@react-spectrum/s2/src/CloseButton.tsx    |  2 +-
 packages/@react-spectrum/s2/src/ComboBox.tsx  |  3 +-
 packages/@react-spectrum/s2/src/Menu.tsx      |  7 ++--
 .../@react-spectrum/s2/src/NumberField.tsx    | 20 +++--------
 .../s2/src/SegmentedControl.tsx               | 23 ++++++------
 packages/@react-spectrum/s2/src/Slider.tsx    |  7 ++--
 packages/@react-spectrum/s2/src/TableView.tsx |  9 +++--
 packages/@react-spectrum/s2/src/Tabs.tsx      | 14 +++++---
 .../@react-spectrum/s2/src/TabsPicker.tsx     |  4 +--
 packages/@react-spectrum/s2/src/TagGroup.tsx  |  3 +-
 .../s2/style/spectrum-theme.ts                |  3 +-
 .../steplist/stories/StepList.stories.tsx     |  4 +--
 packages/@react-spectrum/tabs/src/Tabs.tsx    | 11 ++++--
 .../tabs/stories/Tabs.stories.tsx             |  9 +++--
 .../disclosure/src/useDisclosureGroupState.ts | 11 +++---
 .../tabs/src/useTabListState.ts               |  5 +++
 .../@react-types/shared/src/selection.d.ts    |  2 +-
 packages/@react-types/tabs/src/index.d.ts     | 12 ++++---
 packages/dev/codemods/package.json            |  4 +--
 .../dev/docs/pages/react-aria/home/A11y.tsx   |  2 +-
 .../react-aria-components/docs/Checkbox.mdx   |  2 +-
 .../react-aria-components/docs/GridList.mdx   |  2 +-
 packages/react-aria-components/docs/Menu.mdx  |  2 +-
 packages/react-aria-components/docs/Table.mdx |  2 +-
 .../react-aria-components/docs/TagGroup.mdx   |  2 +-
 packages/react-aria-components/docs/Tree.mdx  |  2 +-
 scripts/extractExamples.mjs                   |  1 -
 yarn.lock                                     | 36 ++++++++++++++-----
 39 files changed, 184 insertions(+), 117 deletions(-)
 create mode 100644 .yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch

diff --git a/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch b/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch
new file mode 100644
index 00000000000..7afc48f1b36
--- /dev/null
+++ b/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch
@@ -0,0 +1,13 @@
+diff --git a/buffer.d.ts b/buffer.d.ts
+index 5d6c97d6b5d47fd189f795498aefd6b8d7713b7d..b9a22c4634fa6308006ae17d3527ff3c518a789d 100644
+--- a/buffer.d.ts
++++ b/buffer.d.ts
+@@ -629,7 +629,7 @@ declare module "buffer" {
+              */
+             poolSize: number;
+         }
+-        interface Buffer extends Uint8Array {
++        interface Buffer extends Uint8Array<ArrayBuffer> {
+             /**
+              * Writes `string` to `buf` at `offset` according to the character encoding in`encoding`. The `length` parameter is the number of bytes to write. If `buf` did
+              * not contain enough space to fit the entire string, only part of `string` will be
diff --git a/lib/viewTransitions.d.ts b/lib/viewTransitions.d.ts
index d0ff07d05f0..b23422f436f 100644
--- a/lib/viewTransitions.d.ts
+++ b/lib/viewTransitions.d.ts
@@ -13,8 +13,3 @@
 interface Document {
   startViewTransition(update: (() => void) | {update: () => void, types: string[]}): ViewTransition;
 }
-  
-interface ViewTransition {
-  ready: Promise<void>;
-  finished: Promise<void>;
-}
diff --git a/package.json b/package.json
index 0017e10be7f..9a4d516a881 100644
--- a/package.json
+++ b/package.json
@@ -206,7 +206,7 @@
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
-    "typescript": "^5.5.0",
+    "typescript": "^5.8.2",
     "typescript-eslint": "^8.9.0",
     "verdaccio": "^6.0.0",
     "walk-object": "^4.0.0",
@@ -234,7 +234,10 @@
     "recast": "0.23.6",
     "ast-types": "0.16.1",
     "svgo": "^3",
-    "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
+    "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
+    "@types/node@npm:*": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
+    "@types/node@npm:^18.0.0": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
+    "@types/node@npm:>= 8": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {
diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index 234793a78e6..53d409e9e5b 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -260,18 +260,25 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
         // inserted item. If selection is disabled, then also show the focus ring so there
         // is some indication that items were added.
         if (state.selectionManager.focusedKey === prevFocusedKey) {
-          let first = newKeys.keys().next().value;
-          let item = state.collection.getItem(first);
-
-          // If this is a cell, focus the parent row.
-          if (item?.type === 'cell') {
-            first = item.parentKey;
-          }
+          let first: Key | null | undefined = newKeys.keys().next().value;
+          if (first != null) {
+            let item = state.collection.getItem(first);
+
+            // If this is a cell, focus the parent row.
+            // eslint-disable-next-line max-depth
+            if (item?.type === 'cell') {
+              first = item.parentKey;
+            }
 
-          state.selectionManager.setFocusedKey(first);
+            // eslint-disable-next-line max-depth
+            if (first != null) {
+              state.selectionManager.setFocusedKey(first);
+            }
 
-          if (state.selectionManager.selectionMode === 'none') {
-            setInteractionModality('keyboard');
+            // eslint-disable-next-line max-depth
+            if (state.selectionManager.selectionMode === 'none') {
+              setInteractionModality('keyboard');
+            }
           }
         }
       } else if (
@@ -337,7 +344,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
     }, 50);
   }, [localState, defaultOnDrop, ref, updateFocusAfterDrop]);
 
-   
+
   useEffect(() => {
     return () => {
       if (droppingState.current) {
diff --git a/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts b/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
index 122aa695a6b..c3d84564c32 100644
--- a/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
+++ b/packages/@react-aria/grid/src/useGridSelectionAnnouncement.ts
@@ -61,20 +61,25 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
     let messages: string[] = [];
 
     if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
-      if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {
-        let currentSelectionText = getRowText(state.selectionManager.selectedKeys.keys().next().value);
+      let firstKey = state.selectionManager.selectedKeys.keys().next().value;
+      if (firstKey != null && state.collection.getItem(firstKey)) {
+        let currentSelectionText = getRowText(firstKey);
         if (currentSelectionText) {
           messages.push(stringFormatter.format('selectedItem', {item: currentSelectionText}));
         }
       }
     } else if (addedKeys.size === 1 && removedKeys.size === 0) {
-      let addedText = getRowText(addedKeys.keys().next().value);
-      if (addedText) {
-        messages.push(stringFormatter.format('selectedItem', {item: addedText}));
+      let firstKey = addedKeys.keys().next().value;
+      if (firstKey != null) {
+        let addedText = getRowText(firstKey);
+        if (addedText) {
+          messages.push(stringFormatter.format('selectedItem', {item: addedText}));
+        }
       }
     } else if (removedKeys.size === 1 && addedKeys.size === 0) {
-      if (state.collection.getItem(removedKeys.keys().next().value)) {
-        let removedText = getRowText(removedKeys.keys().next().value);
+      let firstKey = removedKeys.keys().next().value;
+      if (firstKey != null && state.collection.getItem(firstKey)) {
+        let removedText = getRowText(firstKey);
         if (removedText) {
           messages.push(stringFormatter.format('deselectedItem', {item: removedText}));
         }
diff --git a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
index 5da987a336d..d12df3d13e3 100644
--- a/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/Calendar.stories.tsx
@@ -209,7 +209,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale)!;
diff --git a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
index 682e5484224..3a495dd5ba6 100644
--- a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
@@ -212,7 +212,7 @@ export const IsDateUnavailable: DateFieldStory = {
   ...Default,
   args: {
     isDateUnavailable: (date) => {
-      return date.compare(new CalendarDate(1980, 1, 1)) >= 0 
+      return date.compare(new CalendarDate(1980, 1, 1)) >= 0
           && date.compare(new CalendarDate(1980, 1, 8)) <= 0;
     },
     errorMessage: 'Date unavailable.',
@@ -310,7 +310,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
diff --git a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
index e51901897ee..f53d6ae8a6f 100644
--- a/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DatePicker.stories.tsx
@@ -338,7 +338,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
diff --git a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
index 5ac199a8194..b71709b0f80 100644
--- a/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateRangePicker.stories.tsx
@@ -238,7 +238,7 @@ const calendars = [
 
 function Example(props) {
   let [locale, setLocale] = React.useState('');
-  let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
+  let [calendar, setCalendar] = React.useState<Key | null>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
   let pref = preferences.find(p => p.locale === locale);
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 131f5592b4f..e154e5efad7 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -482,7 +482,7 @@ function FormWithControls(props: any = {}) {
   let [firstName, setFirstName] = useState('hello');
   let [isHunter, setIsHunter] = useState(true);
   let [favoritePet, setFavoritePet] = useState('cats');
-  let [favoriteColor, setFavoriteColor] = useState('green' as Key);
+  let [favoriteColor, setFavoriteColor] = useState<Key | null>('green');
   let [howIFeel, setHowIFeel] = useState('I feel good, o I feel so good!');
   let [birthday, setBirthday] = useState<CalendarDate | null>(new CalendarDate(1732, 2, 22));
   let [money, setMoney] = useState(50);
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index be0f1cdacf3..a8f696b0bf9 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -20,6 +20,7 @@ import {
   DefaultCollectionRenderer,
   HeadingContext,
   Link,
+  LinkRenderProps,
   Provider,
   Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
@@ -97,7 +98,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
 
 const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
-/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
+/** Breadcrumbs show hierarchy and navigational context for a user's location within an application. */
 export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
@@ -200,7 +201,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
   );
 };
 
-const breadcrumbStyles = style({
+const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurrent?: boolean}>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'start',
@@ -245,7 +246,7 @@ const chevronStyles = style({
   }
 });
 
-const linkStyles = style({
+const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
   ...focusRing(),
   borderRadius: 'sm',
   font: 'control',
@@ -255,7 +256,8 @@ const linkStyles = style({
     isCurrent: 'neutral',
     forcedColors: {
       default: 'LinkText',
-      isDisabled: 'GrayText'
+      isDisabled: 'GrayText',
+      isCurrent: 'GrayText'
     }
   },
   transition: 'default',
@@ -337,7 +339,7 @@ export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                   ping={ping}
                   referrerPolicy={referrerPolicy}
                   isDisabled={isDisabled || isCurrent}
-                  className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed})}>
+                  className={({isFocused, isFocusVisible, isHovered, isDisabled, isPressed}) => linkStyles({isFocused, isFocusVisible, isHovered, isDisabled, size, isPressed, isCurrent})}>
                   {children}
                 </Link>
                 <ChevronIcon
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index 3e77db1de24..bb091ffb3ca 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -39,7 +39,7 @@ const hoverBackground = {
   isStaticColor: 'transparent-overlay-200'
 } as const;
 
-const styles = style({
+const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boolean, isPressed: boolean, isStaticColor: boolean}>({
   ...focusRing(),
   ...staticColor(),
   display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 1a755084b22..99439d91e38 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -16,6 +16,7 @@ import {
   ListBoxSection as AriaListBoxSection,
   PopoverProps as AriaPopoverProps,
   Button,
+  ButtonRenderProps,
   ContextValue,
   InputContext,
   ListBox,
@@ -95,7 +96,7 @@ export interface ComboBoxProps<T extends object> extends
 
 export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
 
-const inputButton = style({
+const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 8872ce1406c..9d8bc4b9f4d 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -23,6 +23,7 @@ import {
   SubmenuTriggerProps as AriaSubmenuTriggerProps,
   ContextValue,
   DEFAULT_SLOT,
+  MenuItemRenderProps,
   Provider,
   Separator,
   SeparatorProps
@@ -146,7 +147,7 @@ export let sectionHeading = style({
   margin: 0
 });
 
-export let menuitem = style({
+export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({
   ...focusRing(),
   boxSizing: 'border-box',
   borderRadius: 'control',
@@ -293,7 +294,7 @@ let value = style({
   marginStart: 8
 });
 
-let keyboard = style({
+let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
   gridArea: 'keyboard',
   marginStart: 8,
   font: 'ui',
@@ -305,7 +306,7 @@ let keyboard = style({
       isDisabled: 'GrayText'
     }
   },
-  background: 'gray-25',
+  backgroundColor: 'gray-25',
   unicodeBidi: 'plaintext'
 });
 
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index a18f70ac951..970a477b92b 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -16,6 +16,7 @@ import {
   NumberField as AriaNumberField,
   NumberFieldProps as AriaNumberFieldProps,
   ButtonContext,
+  ButtonRenderProps,
   ContextValue,
   InputContext,
   Text,
@@ -56,7 +57,7 @@ export interface NumberFieldProps extends
 
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
-const inputButton = style({
+const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
@@ -69,9 +70,6 @@ const inputButton = style({
         L: '[5px]',
         XL: '[6px]'
       }
-    },
-    type: {
-      decrementStep: 'none'
     }
   },
   borderBottomRadius: {
@@ -82,9 +80,6 @@ const inputButton = style({
         L: '[5px]',
         XL: '[6px]'
       }
-    },
-    type: {
-      incrementStep: 'none'
     }
   },
   alignItems: 'center',
@@ -132,13 +127,6 @@ const inputButton = style({
 
 const iconStyles = style({
   flexShrink: 0,
-  rotate: {
-    default: 0,
-    type: {
-      incrementStep: 270,
-      decrementStep: 90
-    }
-  },
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
@@ -261,7 +249,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                         type: 'decrement',
                         size
                       })}>
-                      <Dash size={size} className={iconStyles({})} />
+                      <Dash size={size} className={iconStyles} />
                     </StepButton>
                     <StepButton
                       ref={incrementButtonRef}
@@ -272,7 +260,7 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
                         type: 'increment',
                         size
                       })}>
-                      <Add size={size} className={iconStyles({})} />
+                      <Add size={size} className={iconStyles} />
                     </StepButton>
                   </div>}
                 </FieldGroup>
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index f1828b7b92e..d412b098404 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
 import {focusRing, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -62,7 +62,7 @@ const segmentedControl = style({
   width: 'fit'
 }, getAllowedOverrides());
 
-const controlItem = style({
+const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
   ...focusRing(),
   position: 'relative',
   display: 'flex',
@@ -107,7 +107,7 @@ const controlItem = style({
   }
 }, getAllowedOverrides());
 
-const slider = style({
+const slider = style<{isDisabled: boolean}>({
   backgroundColor: {
     default: 'gray-25',
     forcedColors: {
@@ -170,14 +170,17 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
     if (currentSelectedRef.current) {
       prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
     }
-    
+
     if (onSelectionChange) {
-      onSelectionChange(values.values().next().value);
+      let firstKey = values.values().next().value;
+      if (firstKey != null) {
+        onSelectionChange(firstKey);
+      }
     }
   };
 
   return (
-    <ToggleButtonGroup 
+    <ToggleButtonGroup
       {...props}
       selectedKeys={selectedKey != null ? [selectedKey] : undefined}
       defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}
@@ -211,7 +214,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
     <Provider
       values={[
         [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]
-      ]}> 
+      ]}>
       {props.children}
     </Provider>
   );
@@ -255,15 +258,15 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
   }, [isSelected, reduceMotion]);
 
   return (
-    <ToggleButton 
+    <ToggleButton
       {...props}
-      ref={domRef} 
+      ref={domRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >
       {({isSelected, isPressed, isDisabled}) => (
         <>
           {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}
-          <Provider 
+          <Provider
             values={[
               [IconContext, {
                 render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 72bfaba0428..a3cbce7dd95 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -16,6 +16,7 @@ import {
   ContextValue,
   SliderOutput,
   SliderThumb,
+  SliderThumbRenderProps,
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
@@ -199,7 +200,7 @@ export let thumbHitArea = style({
   }
 });
 
-export let thumb = style({
+export let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL', thumbStyle: 'default' | 'precise'}>({
   ...focusRing(),
   display: 'inline-block',
   boxSizing: 'border-box',
@@ -271,7 +272,7 @@ const trackStyling = {
   }
 } as const;
 
-export let upperTrack = style({
+export let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick'}>({
   ...trackStyling,
   position: 'absolute',
   backgroundColor: {
@@ -292,7 +293,7 @@ export let upperTrack = style({
   }
 });
 
-export let filledTrack = style({
+export let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, trackStyle: 'thin' | 'thick'}>({
   ...trackStyling,
   position: 'absolute',
   backgroundColor: {
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index eeb558e975b..6d26eb34bc4 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -645,14 +645,13 @@ const resizerHandleContainer = style({
   }
 });
 
-const resizerHandle = style({
+const resizerHandle = style<{isFocusVisible: boolean, isResizing: boolean}>({
   backgroundColor: {
     default: 'gray-300',
     isFocusVisible: lightDark('informative-900', 'informative-700'), // --spectrum-informative-background-color-default, can't use `informative` because that will use the focusVisible version
     isResizing: lightDark('informative-900', 'informative-700'),
     forcedColors: {
       default: 'Background',
-      isHovered: 'ButtonBorder',
       isFocusVisible: 'Highlight',
       isResizing: 'Highlight'
     }
@@ -802,7 +801,7 @@ function ColumnWithMenu(props: ColumnWithMenuProps) {
           <ColumnResizer data-react-aria-prevent-focus="true" className={({resizableDirection, isResizing}) => resizerHandleContainer({resizableDirection, isResizing, isInResizeMode})}>
             {({isFocusVisible, isResizing}) => (
               <>
-                <ResizerIndicator isInResizeMode={isInResizeMode} isFocusVisible={isFocusVisible} isResizing={isResizing} />
+                <ResizerIndicator isFocusVisible={isFocusVisible} isResizing={isResizing} />
                 {(isFocusVisible || isInResizeMode) && isResizing && <div className={nubbin}><Nubbin /></div>}
               </>
           )}
@@ -813,9 +812,9 @@ function ColumnWithMenu(props: ColumnWithMenuProps) {
   );
 }
 
-function ResizerIndicator({isFocusVisible, isResizing, isInResizeMode}) {
+function ResizerIndicator({isFocusVisible, isResizing}) {
   return (
-    <div className={resizerHandle({isFocusVisible, isInResizeMode, isResizing})} />
+    <div className={resizerHandle({isFocusVisible, isResizing})} />
   );
 }
 
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 414b7316429..81b2a38b3a1 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -22,7 +22,8 @@ import {
   Tab as RACTab,
   TabList as RACTabList,
   Tabs as RACTabs,
-  TabListStateContext
+  TabListStateContext,
+  TabRenderProps
 } from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
@@ -233,7 +234,7 @@ interface TabLineProps {
   density?: 'compact' | 'regular'
 }
 
-const selectedIndicator = style({
+const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
   position: 'absolute',
   backgroundColor: {
     default: 'neutral',
@@ -320,7 +321,7 @@ function TabLine(props: TabLineProps) {
   );
 }
 
-const tab = style({
+const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({
   ...focusRing(),
   display: 'flex',
   color: {
@@ -520,7 +521,12 @@ let HiddenTabs = function (props: {
 
 let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
   let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
+  let onSelectionChange = useCallback((key: Key | null) => {
+    if (key != null) {
+      _onSelectionChange?.(key);
+    }
+  }, [_onSelectionChange]);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index f417bba8859..09987c91455 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -281,7 +281,7 @@ let _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);
 export {_Picker as Picker};
 
 
-const selectedIndicator = style({
+const selectedIndicator = style<{isDisabled?: boolean}>({
   backgroundColor: {
     default: 'neutral',
     isDisabled: 'disabled',
@@ -297,7 +297,7 @@ const selectedIndicator = style({
   transitionDuration: 130,
   transitionTimingFunction: 'in-out'
 });
-function TabLine(props) {
+function TabLine(props: {isDisabled?: boolean}) {
   return <div className={selectedIndicator(props)} />;
 }
 
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index 93fe47d3e94..b2aa19e19be 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -23,6 +23,7 @@ import {
   TextContext as RACTextContext,
   TagList,
   TagListProps,
+  TagRenderProps,
   useLocale,
   useSlottedContext
 } from 'react-aria-components';
@@ -437,7 +438,7 @@ function ActionGroup(props) {
   );
 }
 
-const tagStyles = style({
+const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({
   ...focusRing(),
   display: 'inline-flex',
   boxSizing: 'border-box',
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 4193e2c85a4..0ef9c2b9d2f 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -967,7 +967,8 @@ export const style = createTheme({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     disableTapHighlight: createArbitraryProperty((_value: true) => ({
       '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'
-    }))
+    })),
+    unicodeBidi: ['normal', 'embed', 'bidi-override', 'isolate', 'isolate-override', 'plaintext'] as const
   },
   shorthands: {
     padding: ['paddingTop', 'paddingBottom', 'paddingStart', 'paddingEnd'] as const,
diff --git a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
index a3c2a55ae19..e18c57d3e08 100644
--- a/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
+++ b/packages/@react-spectrum/steplist/stories/StepList.stories.tsx
@@ -219,8 +219,8 @@ export const ControlledStory: StepListStory = {
 };
 
 function Controlled(args) {
-  const [lastCompletedStep, setLastCompletedStep] = useState<Key>(args.lastCompletedStep);
-  const [selectedKey, setSelectedKey] = useState<Key>(args.selectedKey);
+  const [lastCompletedStep, setLastCompletedStep] = useState<Key | null>(args.lastCompletedStep);
+  const [selectedKey, setSelectedKey] = useState<Key | null>(args.selectedKey);
 
   return (
     <View>
diff --git a/packages/@react-spectrum/tabs/src/Tabs.tsx b/packages/@react-spectrum/tabs/src/Tabs.tsx
index 9de494d5e1b..e6342c14bb7 100644
--- a/packages/@react-spectrum/tabs/src/Tabs.tsx
+++ b/packages/@react-spectrum/tabs/src/Tabs.tsx
@@ -377,12 +377,13 @@ function TabPanel(props: TabPanelProps) {
   );
 }
 
-interface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {
+interface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children' | 'onSelectionChange'> {
   density?: 'compact' | 'regular',
   isEmphasized?: boolean,
   state: TabListState<T>,
   className?: string,
-  visible: boolean
+  visible: boolean,
+  onSelectionChange?: (key: Key) => void
 }
 
 function TabPicker<T>(props: TabPickerProps<T>) {
@@ -450,7 +451,11 @@ function TabPicker<T>(props: TabPickerProps<T>) {
           isDisabled={!visible || isDisabled}
           selectedKey={state.selectedKey}
           disabledKeys={state.disabledKeys}
-          onSelectionChange={state.setSelectedKey}
+          onSelectionChange={key => {
+            if (key != null) {
+              state.setSelectedKey(key);
+            }
+          }}
           UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>
           {item => <Item {...item.props}>{item.rendered}</Item>}
         </Picker>
diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
index 66b2c374313..ebc359adeea 100644
--- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx
@@ -20,7 +20,7 @@ import Dashboard from '@spectrum-icons/workflow/Dashboard';
 import {Item, TabList, TabPanels, Tabs} from '..';
 import {Key} from '@react-types/shared';
 import {Picker} from '@react-spectrum/picker';
-import React, {ReactNode, useState} from 'react';
+import React, {ReactNode, useCallback, useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
 import {SpectrumTabsProps} from '@react-types/tabs';
 import {TextField} from '@react-spectrum/textfield';
@@ -907,7 +907,12 @@ let DynamicTabsWithDecoration = (props = {}) => {
 };
 
 let ControlledSelection = () => {
-  let [selectedKey, setSelectedKey] = useState<Key>('Tab 1');
+  let [selectedKey, _setSelectedKey] = useState<Key>('Tab 1');
+  let setSelectedKey = useCallback((key: Key | null) => {
+    if (key != null) {
+      _setSelectedKey(key);
+    }
+  }, [_setSelectedKey]);
 
   return (
     <div style={{width: '80%'}}>
diff --git a/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts b/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts
index 81d04ae955b..ef880baa6e9 100644
--- a/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts
+++ b/packages/@react-stately/disclosure/src/useDisclosureGroupState.ts
@@ -33,7 +33,7 @@ export interface DisclosureGroupState {
 
   /** Whether all items are disabled. */
   readonly isDisabled: boolean,
-  
+
   /** A set of keys for items that are expanded. */
   readonly expandedKeys: Set<Key>,
 
@@ -55,11 +55,14 @@ export function useDisclosureGroupState(props: DisclosureGroupProps): Disclosure
     useMemo(() => props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), [props.defaultExpandedKeys]),
     props.onExpandedChange
   );
-  
+
   useEffect(() => {
     // Ensure only one item is expanded if allowsMultipleExpanded is false.
     if (!allowsMultipleExpanded && expandedKeys.size > 1) {
-      setExpandedKeys(new Set([expandedKeys.values().next().value]));
+      let firstKey = expandedKeys.values().next().value;
+      if (firstKey != null) {
+        setExpandedKeys(new Set([firstKey]));
+      }
     }
   });
 
@@ -80,7 +83,7 @@ export function useDisclosureGroupState(props: DisclosureGroupProps): Disclosure
       } else {
         keys = new Set(expandedKeys.has(key) ? [] : [key]);
       }
-  
+
       setExpandedKeys(keys);
     }
   };
diff --git a/packages/@react-stately/tabs/src/useTabListState.ts b/packages/@react-stately/tabs/src/useTabListState.ts
index c9bc6c3c23d..116e39b059f 100644
--- a/packages/@react-stately/tabs/src/useTabListState.ts
+++ b/packages/@react-stately/tabs/src/useTabListState.ts
@@ -29,6 +29,11 @@ export interface TabListState<T> extends SingleSelectListState<T> {
 export function useTabListState<T extends object>(props: TabListStateOptions<T>): TabListState<T> {
   let state = useSingleSelectListState<T>({
     ...props,
+    onSelectionChange: props.onSelectionChange ? (key => {
+      if (key != null) {
+        props.onSelectionChange?.(key);
+      }
+    }) : undefined,
     suppressTextValueWarning: true,
     defaultSelectedKey: props.defaultSelectedKey ?? findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : new Set()) ?? undefined
   });
diff --git a/packages/@react-types/shared/src/selection.d.ts b/packages/@react-types/shared/src/selection.d.ts
index e6b89f6ba39..e59aaf3e435 100644
--- a/packages/@react-types/shared/src/selection.d.ts
+++ b/packages/@react-types/shared/src/selection.d.ts
@@ -20,7 +20,7 @@ export interface SingleSelection {
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey?: Key,
   /** Handler that is called when the selection changes. */
-  onSelectionChange?: (key: Key) => void
+  onSelectionChange?: (key: Key | null) => void
 }
 
 export type SelectionMode = 'none' | 'single' | 'multiple';
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index ebd96c99934..e760d2596a1 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -30,12 +30,14 @@ export interface AriaTabProps extends AriaLabelingProps {
   shouldSelectOnPressUp?: boolean
 }
 
-export interface TabListProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection'> {
+export interface TabListProps<T> extends CollectionBase<T>, Omit<SingleSelection, 'disallowEmptySelection' | 'onSelectionChange'> {
   /**
    * Whether the TabList is disabled.
    * Shows that a selection exists, but is not available in that circumstance.
    */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+  /** Handler that is called when the selection changes. */
+  onSelectionChange?: (key: Key) => void
 }
 
 interface AriaTabListBase extends AriaLabelingProps {
@@ -55,7 +57,7 @@ export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, D
 
 export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}
 
-export interface SpectrumTabsProps<T> extends AriaTabListBase, SingleSelection, DOMProps, StyleProps {
+export interface SpectrumTabsProps<T> extends AriaTabListBase, Omit<SingleSelection, 'onSelectionChange'>, DOMProps, StyleProps {
   /** The children of the `<Tabs>` element. Should include `<TabList>` and `<TabPanels>` elements. */
   children: ReactNode,
   /** The item objects for each tab, for dynamic collections. */
@@ -69,7 +71,9 @@ export interface SpectrumTabsProps<T> extends AriaTabListBase, SingleSelection,
   /** Whether the tabs are displayed in an emphasized style. */
   isEmphasized?: boolean,
   /** The amount of space between the tabs. */
-  density?: 'compact' | 'regular'
+  density?: 'compact' | 'regular',
+  /** Handler that is called when the selection changes. */
+  onSelectionChange?: (key: Key) => void
 }
 
 export interface SpectrumTabListProps<T> extends DOMProps, StyleProps {
diff --git a/packages/dev/codemods/package.json b/packages/dev/codemods/package.json
index 2364ed4b400..b861ff234e6 100644
--- a/packages/dev/codemods/package.json
+++ b/packages/dev/codemods/package.json
@@ -26,7 +26,7 @@
     "@babel/types": "^7.24.5",
     "@react-spectrum/s2": "^0.8.0",
     "@react-types/shared": "^3.29.0",
-    "@types/node": "^20",
+    "@types/node": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch",
     "boxen": "^5.1.2",
     "build": "^0.1.4",
     "chalk": "^4.0.0",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.11.11",
-    "typescript": "^5.5.0"
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0-rc.1",
diff --git a/packages/dev/docs/pages/react-aria/home/A11y.tsx b/packages/dev/docs/pages/react-aria/home/A11y.tsx
index 73a14913dd5..d9e9820dfbe 100644
--- a/packages/dev/docs/pages/react-aria/home/A11y.tsx
+++ b/packages/dev/docs/pages/react-aria/home/A11y.tsx
@@ -66,7 +66,7 @@ export function A11y() {
   let [fingerPos, setFingerPos] = useState<Point | null>(null);
   let [isOpen, setOpen] = useState(false);
   let [caption, setCaption] = useState('');
-  let [selectedKey, setSelectedKey] = useState<Key>('read');
+  let [selectedKey, setSelectedKey] = useState<Key | null>('read');
   useIntersectionObserver(ref, useCallback(() => {
     let button: HTMLButtonElement | null = null;
     let listbox: HTMLElement | null = null;
diff --git a/packages/react-aria-components/docs/Checkbox.mdx b/packages/react-aria-components/docs/Checkbox.mdx
index 6fe342d7d97..0df45705d92 100644
--- a/packages/react-aria-components/docs/Checkbox.mdx
+++ b/packages/react-aria-components/docs/Checkbox.mdx
@@ -167,7 +167,7 @@ This example wraps `Checkbox` and all of its children together into a single com
 ```tsx example export=true
 import type {CheckboxProps} from 'react-aria-components';
 
-export function MyCheckbox({children, ...props}: CheckboxProps) {
+export function MyCheckbox({children, ...props}: Omit<CheckboxProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <Checkbox {...props}>
       {({isIndeterminate}) => <>
diff --git a/packages/react-aria-components/docs/GridList.mdx b/packages/react-aria-components/docs/GridList.mdx
index 7d5483a0cb5..b00bc9796c8 100644
--- a/packages/react-aria-components/docs/GridList.mdx
+++ b/packages/react-aria-components/docs/GridList.mdx
@@ -318,7 +318,7 @@ export function MyGridList<T extends object>({children, ...props}: GridListProps
   );
 }
 
-export function MyItem({children, ...props}: GridListItemProps) {
+export function MyItem({children, ...props}: Omit<GridListItemProps, 'children'> & {children?: React.ReactNode}) {
   let textValue = typeof children === 'string' ? children : undefined;
   return (
     <GridListItem textValue={textValue} {...props}>
diff --git a/packages/react-aria-components/docs/Menu.mdx b/packages/react-aria-components/docs/Menu.mdx
index 9b808aa7d54..dac0cca9e55 100644
--- a/packages/react-aria-components/docs/Menu.mdx
+++ b/packages/react-aria-components/docs/Menu.mdx
@@ -227,7 +227,7 @@ function MyMenuButton<T extends object>({label, children, ...props}: MyMenuButto
   );
 }
 
-export function MyItem(props: MenuItemProps) {
+export function MyItem(props: Omit<MenuItemProps, 'children'> & {children?: React.ReactNode}) {
   let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   return (
     <MenuItem
diff --git a/packages/react-aria-components/docs/Table.mdx b/packages/react-aria-components/docs/Table.mdx
index fb000d2dd90..65d4ddd4fe3 100644
--- a/packages/react-aria-components/docs/Table.mdx
+++ b/packages/react-aria-components/docs/Table.mdx
@@ -346,7 +346,7 @@ The following example includes a custom Column component with a sort indicator.
 ```tsx example export=true render=false
 import type {ColumnProps} from 'react-aria-components';
 
-export function MyColumn(props: ColumnProps) {
+export function MyColumn(props: Omit<ColumnProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <Column {...props}>
       {({allowsSorting, sortDirection}) => <>
diff --git a/packages/react-aria-components/docs/TagGroup.mdx b/packages/react-aria-components/docs/TagGroup.mdx
index 0868156df51..79d8e5765cb 100644
--- a/packages/react-aria-components/docs/TagGroup.mdx
+++ b/packages/react-aria-components/docs/TagGroup.mdx
@@ -228,7 +228,7 @@ function MyTagGroup<T extends object>({label, description, errorMessage, items,
   );
 }
 
-function MyTag({children, ...props}: TagProps) {
+function MyTag({children, ...props}: Omit<TagProps, 'children'> & {children?: React.ReactNode}) {
   let textValue = typeof children === 'string' ? children : undefined;
   return (
     <Tag textValue={textValue} {...props}>
diff --git a/packages/react-aria-components/docs/Tree.mdx b/packages/react-aria-components/docs/Tree.mdx
index 55275f73ab6..c93d508afc0 100644
--- a/packages/react-aria-components/docs/Tree.mdx
+++ b/packages/react-aria-components/docs/Tree.mdx
@@ -350,7 +350,7 @@ If you will use a Tree in multiple places in your app, you can wrap all of the p
 import type {TreeItemContentProps, TreeItemContentRenderProps} from 'react-aria-components';
 import {Button} from 'react-aria-components';
 
-function MyTreeItemContent(props: TreeItemContentProps) {
+function MyTreeItemContent(props: Omit<TreeItemContentProps, 'children'> & {children?: React.ReactNode}) {
   return (
     <TreeItemContent>
       {({hasChildItems, selectionBehavior, selectionMode}: TreeItemContentRenderProps) => (
diff --git a/scripts/extractExamples.mjs b/scripts/extractExamples.mjs
index 1757dc4d6cb..137b3d6f174 100644
--- a/scripts/extractExamples.mjs
+++ b/scripts/extractExamples.mjs
@@ -108,7 +108,6 @@ import ReactDOM from 'react-dom/client';
 
 fs.copyFileSync('lib/svg.d.ts', `${distDir}/svg.d.ts`);
 fs.copyFileSync('lib/css.d.ts', `${distDir}/css.d.ts`);
-fs.copyFileSync('lib/viewTransitions.d.ts', `${distDir}/viewTransitions.d.ts`);
 fs.writeFileSync(`${distDir}/tsconfig.json`, `{
   "compilerOptions": {
     "target": "es2018",
diff --git a/yarn.lock b/yarn.lock
index 6dae49af9c3..37f6db6fb06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7194,7 +7194,7 @@ __metadata:
     "@react-spectrum/s2": "npm:^0.8.0"
     "@react-types/shared": "npm:^3.29.0"
     "@types/jscodeshift": "npm:^0.11.11"
-    "@types/node": "npm:^20"
+    "@types/node": "patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch"
     boxen: "npm:^5.1.2"
     build: "npm:^0.1.4"
     chalk: "npm:^4.0.0"
@@ -7202,7 +7202,7 @@ __metadata:
     jscodeshift: "npm:^0.15.2"
     recast: "npm:^0.23.9"
     ts-node: "npm:^10.9.2"
-    typescript: "npm:^5.5.0"
+    typescript: "npm:^5.8.2"
     uuid: "npm:^9.0.1"
   peerDependencies:
     react: ^18.0.0 || ^19.0.0-rc.1
@@ -11441,7 +11441,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^20":
+"@types/node@npm:20.14.13":
   version: 20.14.13
   resolution: "@types/node@npm:20.14.13"
   dependencies:
@@ -11450,12 +11450,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^18.0.0":
-  version: 18.19.31
-  resolution: "@types/node@npm:18.19.31"
+"@types/node@patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch":
+  version: 20.14.13
+  resolution: "@types/node@patch:@types/node@npm%3A20.14.13#~/.yarn/patches/@types-node-npm-20.14.13-41f92d384c.patch::version=20.14.13&hash=24fda2"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/bfebae8389220c0188492c82eaf328f4ba15e6e9b4abee33d6bf36d3b13f188c2f53eb695d427feb882fff09834f467405e2ed9be6aeb6ad4705509822d2ea08
+  checksum: 10c0/1bbbadf2732c27a8f1bc7b20be41bf7faa50436461c1af6e67398c2003a8bde9893e04f762d55b231ef818d4567ec6bcb6bcdf28748f73a715a11dd7df88e9f5
   languageName: node
   linkType: hard
 
@@ -29656,7 +29656,7 @@ __metadata:
     tailwindcss: "npm:^4.0.0"
     tailwindcss-animate: "npm:^1.0.7"
     tempy: "npm:^0.5.0"
-    typescript: "npm:^5.5.0"
+    typescript: "npm:^5.8.2"
     typescript-eslint: "npm:^8.9.0"
     verdaccio: "npm:^6.0.0"
     walk-object: "npm:^4.0.0"
@@ -33602,6 +33602,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.8.2":
+  version: 5.8.2
+  resolution: "typescript@npm:5.8.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/5c4f6fbf1c6389b6928fe7b8fcd5dc73bb2d58cd4e3883f1d774ed5bd83b151cbac6b7ecf11723de56d4676daeba8713894b1e9af56174f2f9780ae7848ec3c6
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A^5.5.0#optional!builtin<compat/typescript>":
   version: 5.5.2
   resolution: "typescript@patch:typescript@npm%3A5.5.2#optional!builtin<compat/typescript>::version=5.5.2&hash=b45daf"
@@ -33612,6 +33622,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.8.2#optional!builtin<compat/typescript>":
+  version: 5.8.2
+  resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=b45daf"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/8a6cd29dfb59bd5a978407b93ae0edb530ee9376a5b95a42ad057a6f80ffb0c410489ccd6fe48d1d0dfad6e8adf5d62d3874bbd251f488ae30e11a1ce6dabd28
+  languageName: node
+  linkType: hard
+
 "ua-parser-js@npm:0.7.17":
   version: 0.7.17
   resolution: "ua-parser-js@npm:0.7.17"

From 16ab6bfba14227f343858e112e5ad8928161b18e Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 25 Apr 2025 18:10:56 -0500
Subject: [PATCH 05/24] support dropping on items

---
 .../dnd/src/useDroppableCollection.ts         |  2 +-
 .../react-aria-components/example/index.css   |  5 +++
 packages/react-aria-components/src/Tree.tsx   | 34 +++++++++++++------
 .../stories/Tree.stories.tsx                  | 13 +++----
 4 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index 234793a78e6..fa17d25b8ac 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on') {
+        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }
diff --git a/packages/react-aria-components/example/index.css b/packages/react-aria-components/example/index.css
index 3a56707c261..43a01fb013b 100644
--- a/packages/react-aria-components/example/index.css
+++ b/packages/react-aria-components/example/index.css
@@ -52,6 +52,11 @@ html {
     background: lightseagreen;
     color: white;
   }
+
+  &[data-drop-target] {
+    background: purple;
+    color: white;
+  }
 }
 
 .menu {
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 290a8bb317a..aac53d9fa66 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
@@ -260,6 +260,10 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
       {
         keyboardDelegate,
         dropTargetDelegate,
+        shouldAcceptItemDrop: (target) => {
+          let item = state.collection.getItem(target.key);
+          return item?.hasChildNodes ?? false;
+        },
         onDropActivate: (e) => {
           // Expand collapsed item when dragging over
           if (e.target.type === 'item') {
@@ -514,13 +518,17 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
   }
 
-  let droppableItem: DroppableItemResult | null = null;
+  let dropIndicator: DropIndicatorAria | undefined = undefined;
+  let dropIndicatorRef = useRef<HTMLDivElement>(null);
+  let {visuallyHiddenProps} = useVisuallyHidden();
   if (dropState && dragAndDropHooks) {
-    droppableItem = dragAndDropHooks.useDroppableItem!({target: {type: 'item', key: item.key, dropPosition: 'on'}}, dropState, ref);
+    dropIndicator = dragAndDropHooks.useDropIndicator!({
+      target: {type: 'item', key: item.key, dropPosition: 'on'}
+    }, dropState, dropIndicatorRef);
   }
 
+
   let isDragging = dragState && dragState.isDragging(item.key);
-  let isDropTarget = droppableItem?.isDropTarget;
 
   let selectionMode = state.selectionManager.selectionMode;
   let selectionBehavior = state.selectionManager.selectionBehavior;
@@ -538,8 +546,8 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     id: item.key,
     allowsDragging: !!dragState,
     isDragging,
-    isDropTarget
-  }), [states, isHovered, isFocusVisible, state.selectionManager, isExpanded, hasChildItems, level, isFocusVisibleWithin, state, item.key, dragState, isDragging, isDropTarget, selectionBehavior, selectionMode]);
+    isDropTarget: dropIndicator?.isDropTarget
+  }), [states, isHovered, isFocusVisible, isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isFocusVisibleWithin, state, item.key, dragState, isDragging, dropIndicator?.isDropTarget]);
 
   let renderProps = useRenderProps({
     ...props,
@@ -570,7 +578,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
   let dragButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (dragState && !dragButtonRef.current && process.env.NODE_ENV !== 'production') {
-      console.warn('Draggable items in a Table must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
+      console.warn('Draggable items in a Tree must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
     }
   // eslint-disable-next-line
   }, []);
@@ -595,6 +603,13 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
 
   return (
     <>
+      {dropIndicator && !dropIndicator.isHidden && (
+        <div role="row" style={{height: 0}}>
+          <div role="gridcell" style={{padding: 0}}>
+            <div role="button" {...visuallyHiddenProps} {...dropIndicator.dropIndicatorProps} ref={dropIndicatorRef} />
+          </div>
+        </div>
+      )}
       <div
         {...mergeProps(
           filterDOMProps(props as any),
@@ -602,8 +617,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
           focusProps,
           hoverProps,
           focusWithinProps,
-          draggableItem?.dragProps,
-          droppableItem?.dropProps
+          draggableItem?.dragProps
         )}
         {...renderProps}
         ref={ref}
@@ -620,7 +634,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
         data-selection-mode={state.selectionManager.selectionMode === 'none' ? undefined : state.selectionManager.selectionMode}
         data-allows-dragging={!!dragState || undefined}
         data-dragging={isDragging || undefined}
-        data-drop-target={isDropTarget || undefined}>
+        data-drop-target={dropIndicator?.isDropTarget || undefined}>
         <div {...gridCellProps} style={{display: 'contents'}}>
           <Provider
             values={[
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index c2483864628..f7ab44b81ba 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -573,7 +573,7 @@ function TreeDragAndDropExample(args) {
 
   let {dragAndDropHooks} = useDragAndDrop({
     getItems,
-    getAllowedDropOperations: () => ['move'],
+    getAllowedDropOperations: () => ['move', 'cancel'],
     onReorder(e) {
       console.log(`moving [${[...e.keys].join(',')}] ${e.target.dropPosition} ${e.target.key}`);
       try {
@@ -584,11 +584,9 @@ function TreeDragAndDropExample(args) {
         } else if (e.target.dropPosition === 'on') {
           let targetNode = treeData.getItem(e.target.key);
           if (targetNode) {
-            let targetIndex = targetNode.children ? targetNode.children.length : 0;
-            let keyArray = Array.from(e.keys);
-            for (let i = 0; i < keyArray.length; i++) {
-              treeData.move(keyArray[i], e.target.key, targetIndex + i);
-            }
+            e.keys.forEach(key => {
+              treeData.move(key, e.target.key, targetNode.children ? targetNode.children.length : 0);
+            });
           } else {
             console.error('Target node not found for drop on:', e.target.key);
           }
@@ -596,6 +594,9 @@ function TreeDragAndDropExample(args) {
       } catch (error) {
         console.error(error);
       }
+    },
+    onItemDrop() {
+      // TODO: Need to get this to work without needing to pass this
     }
   });
 

From 145a58f7a055f7a996391e8bceebafaa4f342553 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 10:18:25 -0500
Subject: [PATCH 06/24] remove extraneous onKeyDown

---
 packages/@react-aria/dnd/src/useDroppableCollection.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index fa17d25b8ac..e43a1d3495e 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -743,7 +743,6 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
             break;
           }
         }
-        localState.props.onKeyDown?.(e as any);
       }
     });
   }, [localState, ref, onDrop, direction]);

From 532ec4c368df51c4817c9bf3019a56dba5b876f8 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 11:58:34 -0500
Subject: [PATCH 07/24] fix imports

---
 packages/react-aria-components/src/Tree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index aac53d9fa66..01cef2ef2b4 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';

From f87e28b1321df9e6de90f65309bf8255ec762d33 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 12:23:03 -0500
Subject: [PATCH 08/24] fix onInsert call

---
 packages/@react-aria/dnd/src/useDroppableCollection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index e43a1d3495e..33c09cacfd9 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
+        if (target.dropPosition !== 'on') {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }

From 1dd65ffc5e14c902b32d96abc88ff531a28dcf7b Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 28 Apr 2025 10:43:49 -0700
Subject: [PATCH 09/24] refactor: Generate stable style macro class names
 between versions (#8118)

* refactor: Generate stable style macro class names between versions

* fix chromatic issues
---
 packages/@react-spectrum/s2/src/Card.tsx      |    6 +-
 .../@react-spectrum/s2/src/Disclosure.tsx     |    6 +-
 packages/@react-spectrum/s2/src/TableView.tsx |    5 +-
 .../@react-spectrum/s2/src/style-utils.ts     |    2 -
 .../s2/style/__tests__/style-macro.test.js    |  350 ++-
 .../@react-spectrum/s2/style/properties.json  | 2422 +++++++++++++++++
 .../s2/style/spectrum-theme.ts                |  211 +-
 .../@react-spectrum/s2/style/style-macro.ts   |  539 ++--
 packages/@react-spectrum/s2/style/types.ts    |   12 +-
 9 files changed, 3180 insertions(+), 373 deletions(-)
 create mode 100644 packages/@react-spectrum/s2/style/properties.json

diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index 751388b4b2a..907a2f76962 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -139,7 +139,7 @@ let card = style({
       density: {
         compact: {
           size: {
-            XS: 6,
+            XS: space(6),
             S: 8,
             M: 12,
             L: 16,
@@ -647,7 +647,7 @@ export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMR
                 position: 'relative',
                 marginTop: {
                   default: 0,
-                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'
+                  ':is([slot=preview] + *)': '[calc(var(--size) / -2)]'
                 }
               }),
               isOverBackground: true
@@ -717,7 +717,7 @@ export const ProductCard = forwardRef(function ProductCard(props: ProductCardPro
                     objectFit: 'cover',
                     marginTop: {
                       default: 0,
-                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'
+                      ':is([slot=preview] + *)': '[calc(self(height) / -2)]'
                     },
                     outlineStyle: 'solid',
                     outlineWidth: {
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index fda4cca6ad7..426a6da965d 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -17,7 +17,7 @@ import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import {focusRing, lightDark, style} from '../style' with { type: 'macro' };
+import {focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -307,9 +307,9 @@ const panelStyles = style({
     isExpanded: {
       size: {
         S: 8,
-        M: 9,
+        M: space(9),
         L: 12,
-        XL: 15
+        XL: space(15)
       }
     }
   }
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 6d26eb34bc4..80953147990 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -564,10 +564,7 @@ const sortIcon = style({
     default: 8,
     isButton: 'text-to-visual'
   },
-  verticalAlign: {
-    default: 'bottom',
-    isButton: 0
-  },
+  verticalAlign: 'bottom',
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index ac6e346f672..01aae9ee3ef 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -153,10 +153,8 @@ const allowedOverrides = [
   'alignSelf',
   'order',
   'gridArea',
-  'gridRow',
   'gridRowStart',
   'gridRowEnd',
-  'gridColumn',
   'gridColumnStart',
   'gridColumnEnd',
   'position',
diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index 3762768c1b6..12597b8879a 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -40,81 +40,377 @@ describe('style-macro', () => {
       "@layer _.a, _.b, _.c;
 
       @layer _.b {
-        .A-13alit4c {
-          &:first-child {
-            margin-top: 0.25rem;
-          }
+        .jnb:first-child {
+          margin-top: 0.25rem;
         }
       }
 
-      @layer _.c.e {
+      @layer _.c.YxLy {
         @media (min-width: 1024px) {
-          .A-13alit4ed {
-            &:first-child {
-              margin-top: 0.5rem;
-            }
+          .jnYxLyf:first-child {
+            margin-top: 0.5rem;
           }
         }
       }
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" A-13alit4c A-13alit4ed"');
+    expect(js).toMatchInlineSnapshot('" jnb jnYxLyf"');
   });
 
   it('should support self references', () => {
-    let {css} = testStyle({
+    let {css, js} = testStyle({
       borderWidth: 2,
       paddingX: 'edge-to-text',
       width: '[calc(200px - self(borderStartWidth) - self(paddingStart))]'
     });
 
     expect(css).toMatchInlineSnapshot(`
-      "@layer _.a, _.b;
+      "@layer _.a;
 
       @layer _.a {
-        .uc {
+        ._nb {
           border-top-width: 2px;
         }
 
 
-        .vc {
+        ._ma {
           border-bottom-width: 2px;
         }
 
 
-        .s-375toy {
-          border-inline-start-width: var(--s);
+        ._twdjPYd {
+          border-inline-start-width: var(--_t);
         }
 
 
-        .tc {
+        ._sa {
           border-inline-end-width: 2px;
         }
 
 
-        .C-375tnm {
-          padding-inline-start: var(--C);
+        .oGQFGYc {
+          padding-inline-start: var(--o);
+        }
+
+
+        .nb {
+          padding-inline-end: calc(var(--e, var(--s)) * 3 / 8);
+        }
+
+
+        .fNANddc {
+          width: calc(200px - var(--_t) - var(--o));
+        }
+
+
+        .-_t_-_ta {
+          --_t: 2px;
+        }
+
+
+        .-o_-ob {
+          --o: calc(var(--e, var(--s)) * 3 / 8);
+        }
+      }
+
+      "
+    `);
+
+    expect(js).toMatchInlineSnapshot(
+      '" _nb _ma _twdjPYd _sa oGQFGYc nb fNANddc -_t_-_ta -o_-ob"'
+    );
+  });
+
+  it('should support allowed overrides', () => {
+    let {js} = testStyle(
+      {
+        backgroundColor: 'gray-400',
+        color: 'black'
+      },
+      ['backgroundColor']
+    );
+
+    let {js: overrides} = testStyle({
+      backgroundColor: 'red-400',
+      color: 'green-400'
+    });
+
+    expect(js()).toMatchInlineSnapshot('"  cE dj"');
+    expect(overrides).toMatchInlineSnapshot('" c8tmWqb dHJ3AUd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  c8tmWqb dj"');
+  });
+
+  it('should support allowed overrides for properties that expand into multiple', () => {
+    let {js} = testStyle(
+      {
+        translateX: 32
+      },
+      ['translateX']
+    );
+
+    let {js: overrides} = testStyle({
+      translateX: 40
+    });
+
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-zTRurc _Ia"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-Kr5lvc _Ia"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-Kr5lvc _Ia"');
+  });
+
+  it('should support allowed overrides for shorthands', () => {
+    let {js} = testStyle(
+      {
+        padding: 32
+      },
+      ['padding']
+    );
+
+    let {js: overrides} = testStyle({
+      padding: 40
+    });
+
+    expect(js()).toMatchInlineSnapshot('"  rg vd of ng"');
+    expect(overrides).toMatchInlineSnapshot('" rw vw oy ny"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  rw vw oy ny"');
+  });
+
+  it("should support allowed overrides for values that aren't defined", () => {
+    let {js} = testStyle(
+      {
+        backgroundColor: 'gray-300'
+      },
+      ['minWidth']
+    );
+
+    let {js: overrides} = testStyle({
+      minWidth: 32
+    });
+
+    expect(js()).toMatchInlineSnapshot('"  cz"');
+    expect(overrides).toMatchInlineSnapshot('" ue"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  ue cz"');
+  });
+
+  it('should support runtime conditions', () => {
+    let {js, css} = testStyle({
+      backgroundColor: {
+        default: 'gray-100',
+        isHovered: 'gray-200',
+        isPressed: 'gray-300'
+      },
+      color: {
+        default: 'gray-800',
+        isHovered: 'gray-900',
+        isPressed: 'gray-1000'
+      }
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a;
+
+      @layer _.a {
+        .ca {
+          background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
+        }
+
+
+        .ce {
+          background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
+        }
+
+
+        .cz {
+          background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
+        }
+
+
+        .da {
+          color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
+        }
+
+
+        .db {
+          color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
+        }
+
+
+        .dv {
+          color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
+        }
+      }
+
+      "
+    `);
+
+    expect(js({})).toMatchInlineSnapshot('"  ca da"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  ce db"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  cz dv"');
+  });
+
+  it('should support nested runtime conditions', () => {
+    let {js, css} = testStyle({
+      backgroundColor: {
+        default: 'gray-100',
+        isHovered: 'gray-200',
+        isSelected: {
+          default: 'blue-800',
+          isHovered: 'blue-900'
+        }
+      }
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a;
+
+      @layer _.a {
+        .ca {
+          background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
+        }
+
+
+        .ce {
+          background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
+        }
+
+
+        .c_k {
+          background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
         }
 
 
-        .DI {
-          padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
+        .cK {
+          background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
         }
+      }
 
+      "
+    `);
+    expect(js({})).toMatchInlineSnapshot('"  ca"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  ce"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  c_k"');
+    expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
+      '"  cK"'
+    );
+  });
 
-        .l-4s570k {
-          width: calc(200px - var(--s) - var(--C));
+  it('should support variant runtime conditions', () => {
+    let {js} = testStyle({
+      backgroundColor: {
+        variant: {
+          accent: 'accent-1000',
+          primary: 'gray-1000',
+          secondary: 'gray-400'
         }
+      }
+    });
 
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  cw"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  cjQquMe"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  cE"');
+  });
 
-        .-_375toy_s-c {
-          --s: 2px;
+  it('supports runtime conditions nested inside css conditions', () => {
+    let {css, js} = testStyle({
+      color: {
+        forcedColors: {
+          default: 'ButtonText',
+          isSelected: 'HighlightText'
         }
+      }
+    });
 
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a, _.b;
+
+      @layer _.b.b {
+        @media (forced-colors: active) {
+          .dbf {
+            color: ButtonText;
+          }
+        }
+
+
+        @media (forced-colors: active) {
+          .dbm {
+            color: HighlightText;
+          }
+        }
+      }
+
+      "
+    `);
+
+    expect(js({})).toMatchInlineSnapshot('"  dbf"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  dbm"');
+  });
+
+  it('should expand shorthand properties to longhands', () => {
+    let {js, css} = testStyle({
+      padding: 24
+    });
+
+    expect(js).toMatchInlineSnapshot('" rc vc od nd"');
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a;
 
-        .-_375tnm_C-I {
-          --C: calc(var(--k, var(--o)) * 3 / 8);
+      @layer _.a {
+        .rc {
+          padding-top: 1.5rem;
+        }
+
+
+        .vc {
+          padding-bottom: 1.5rem;
+        }
+
+
+        .od {
+          padding-inline-start: 1.5rem;
+        }
+
+
+        .nd {
+          padding-inline-end: 1.5rem;
+        }
+      }
+
+      "
+    `);
+  });
+
+  it('should support colors with opacity', () => {
+    let {css} = testStyle({
+      backgroundColor: 'blue-1000/50'
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a;
+
+      @layer _.a {
+        .cpQzfVb {
+          background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
+        }
+      }
+
+      "
+    `);
+  });
+
+  it('should support setting css variables', () => {
+    let {css} = testStyle({
+      '--foo': {
+        type: 'backgroundColor',
+        value: 'gray-300'
+      }
+    });
+
+    expect(css).toMatchInlineSnapshot(`
+      "@layer _.a;
+
+      @layer _.a {
+        .-FUeYm-cz {
+          --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
         }
       }
 
diff --git a/packages/@react-spectrum/s2/style/properties.json b/packages/@react-spectrum/s2/style/properties.json
new file mode 100644
index 00000000000..8d804625675
--- /dev/null
+++ b/packages/@react-spectrum/s2/style/properties.json
@@ -0,0 +1,2422 @@
+{
+  "properties": {
+    "fontSize": "a",
+    "fontFamily": "b",
+    "backgroundColor": "c",
+    "color": "d",
+    "height": "e",
+    "width": "f",
+    "lineHeight": "g",
+    "marginInlineStart": "h",
+    "marginInlineEnd": "i",
+    "marginTop": "j",
+    "columnGap": "k",
+    "marginBottom": "l",
+    "display": "m",
+    "paddingInlineEnd": "n",
+    "paddingInlineStart": "o",
+    "rowGap": "p",
+    "borderColor": "q",
+    "paddingTop": "r",
+    "minHeight": "s",
+    "outlineStyle": "t",
+    "minWidth": "u",
+    "paddingBottom": "v",
+    "borderEndStartRadius": "w",
+    "borderStartEndRadius": "x",
+    "borderEndEndRadius": "y",
+    "borderStartStartRadius": "z",
+    "cursor": "A",
+    "outlineColor": "B",
+    "fontSynthesisWeight": "C",
+    "fontVariationSettings": "D",
+    "fontWeight": "E",
+    "alignItems": "F",
+    "bottom": "G",
+    "top": "H",
+    "insetInlineEnd": "I",
+    "insetInlineStart": "J",
+    "position": "K",
+    "gridColumnStart": "L",
+    "flexBasis": "M",
+    "gridColumnEnd": "N",
+    "fill": "O",
+    "left": "P",
+    "right": "Q",
+    "borderStyle": "R",
+    "gridTemplateColumns": "S",
+    "scrollPaddingInlineStart": "T",
+    "scrollPaddingTop": "U",
+    "borderSpacing": "V",
+    "scrollMarginBottom": "W",
+    "scrollMarginInlineEnd": "X",
+    "scrollMarginInlineStart": "Y",
+    "scrollMarginTop": "Z",
+    "scrollPaddingBottom": "_a",
+    "scrollPaddingInlineEnd": "_b",
+    "textIndent": "_c",
+    "gridRowEnd": "_d",
+    "transitionTimingFunction": "_e",
+    "gridRowStart": "_f",
+    "outlineWidth": "_g",
+    "overflowY": "_h",
+    "transitionProperty": "_i",
+    "columns": "_j",
+    "transitionDuration": "_k",
+    "maxWidth": "_l",
+    "borderBottomWidth": "_m",
+    "borderTopWidth": "_n",
+    "overflowX": "_o",
+    "justifyContent": "_p",
+    "boxSizing": "_q",
+    "flexShrink": "_r",
+    "borderInlineEndWidth": "_s",
+    "borderInlineStartWidth": "_t",
+    "gridTemplateAreas": "_u",
+    "contain": "_v",
+    "maxHeight": "_w",
+    "mixBlendMode": "_x",
+    "outlineOffset": "_y",
+    "whiteSpace": "_z",
+    "backgroundBlendMode": "_A",
+    "flexDirection": "_B",
+    "containIntrinsicHeight": "_C",
+    "containIntrinsicWidth": "_D",
+    "textAlign": "_E",
+    "gridTemplateRows": "_F",
+    "-webkit-tap-highlight-color": "_G",
+    "flexGrow": "_H",
+    "translate": "_I",
+    "alignContent": "_J",
+    "boxShadow": "_K",
+    "opacity": "_L",
+    "order": "_M",
+    "colorScheme": "_N",
+    "aspectRatio": "_O",
+    "transformOrigin": "_P",
+    "userSelect": "_Q",
+    "objectFit": "_R",
+    "rotate": "_S",
+    "textOverflow": "_T",
+    "backgroundPosition": "_U",
+    "objectPosition": "_V",
+    "verticalAlign": "_W",
+    "alignSelf": "_X",
+    "breakAfter": "_Y",
+    "breakBefore": "_Z",
+    "forcedColorAdjust": "_0",
+    "pointerEvents": "_1",
+    "animationTimingFunction": "_2",
+    "flexWrap": "_3",
+    "backgroundRepeat": "_4",
+    "clear": "_5",
+    "scrollSnapType": "_6",
+    "touchAction": "_7",
+    "visibility": "_8",
+    "isolation": "_9",
+    "backgroundImage": "__a",
+    "filter": "__b",
+    "float": "__c",
+    "gridAutoFlow": "__d",
+    "justifyItems": "__e",
+    "justifySelf": "__f",
+    "stroke": "__g",
+    "textDecoration": "__h",
+    "animationFillMode": "__i",
+    "resize": "__j",
+    "willChange": "__k",
+    "animationDirection": "__l",
+    "backgroundClip": "__m",
+    "breakInside": "__n",
+    "scale": "__o",
+    "scrollSnapAlign": "__p",
+    "strokeWidth": "__q",
+    "textTransform": "__r",
+    "textWrap": "__s",
+    "listStyleType": "__t",
+    "backgroundAttachment": "__u",
+    "backgroundOrigin": "__v",
+    "backgroundSize": "__w",
+    "hyphens": "__x",
+    "overscrollBehaviorX": "__y",
+    "overscrollBehaviorY": "__z",
+    "wordBreak": "__A",
+    "zIndex": "__B",
+    "boxDecorationBreak": "__C",
+    "textUnderlineOffset": "__D",
+    "animationDuration": "__E",
+    "appearance": "__F",
+    "borderCollapse": "__G",
+    "captionSide": "__H",
+    "listStylePosition": "__I",
+    "scrollBehavior": "__J",
+    "scrollSnapStop": "__K",
+    "tableLayout": "__L",
+    "transform": "__M",
+    "-webkit-box-orient": "__N",
+    "-webkit-line-clamp": "__O",
+    "animationName": "__P",
+    "gridAutoRows": "__Q",
+    "overflow": "__R",
+    "transitionDelay": "__S",
+    "animationIterationCount": "__T"
+  },
+  "values": {
+    "fontSize": {
+      "0.875rem": "a",
+      "1.0625rem": "b",
+      "1.375rem": "c",
+      "1.1875rem": "d",
+      "1rem": "e",
+      "0.75rem": "f",
+      "0.9375rem": "g",
+      "1.125rem": "h",
+      "0.6875rem": "i",
+      "0.8125rem": "j",
+      "1.25rem": "k",
+      "1.5rem": "l",
+      "1.6875rem": "m",
+      "1.5625rem": "n",
+      "1.9375rem": "o",
+      "1.75rem": "p",
+      "2.125rem": "q",
+      "2.25rem": "r",
+      "2.75rem": "s",
+      "2.8125rem": "t",
+      "3.4375rem": "u",
+      "3.625rem": "v",
+      "4.375rem": "w"
+    },
+    "fontFamily": {
+      "adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif": "a",
+      "adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif": "b",
+      "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif": "c",
+      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif": "d",
+      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif": "e",
+      "myriad-arabic, ui-sans-serif, system-ui, sans-serif": "f",
+      "myriad-hebrew, ui-sans-serif, system-ui, sans-serif": "g",
+      "adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif": "h",
+      "adobe-clean-serif, \"Source Serif\", Georgia, serif": "i",
+      "source-code-pro, \"Source Code Pro\", Monaco, monospace": "j"
+    },
+    "backgroundColor": {
+      "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))": "a",
+      "light-dark(rgb(39, 77, 234), rgb(52, 91, 248))": "b",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "c",
+      "transparent": "d",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "e",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.11)": "f",
+      "Highlight": "g",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.14)": "h",
+      "light-dark(rgb(183, 40, 24), rgb(205, 46, 29))": "i",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "j",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "k",
+      "light-dark(rgb(59, 99, 251), rgb(64, 105, 253))": "l",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "m",
+      "ButtonFace": "n",
+      "GrayText": "o",
+      "light-dark(rgb(3, 110, 69), rgb(4, 124, 75))": "p",
+      "light-dark(rgb(41, 41, 41), rgb(68, 68, 68))": "q",
+      "black": "r",
+      "white": "s",
+      "ButtonText": "t",
+      "light-dark(rgb(215, 50, 32), rgb(223, 52, 34))": "u",
+      "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))": "v",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "w",
+      "Background": "x",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "y",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "z",
+      "light-dark(rgb(229, 240, 254), rgb(12, 33, 117))": "A",
+      "light-dark(rgb(5, 131, 78), rgb(6, 136, 80))": "B",
+      "light-dark(rgb(80, 80, 80), rgb(109, 109, 109))": "C",
+      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "D",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "E",
+      "light-dark(rgb(215, 247, 225), rgb(0, 51, 38))": "F",
+      "light-dark(rgb(233, 233, 233), rgb(57, 57, 57))": "G",
+      "light-dark(rgb(252, 125, 0), rgb(224, 100, 0))": "H",
+      "light-dark(rgb(255, 235, 232), rgb(87, 17, 7))": "I",
+      "light-dark(rgb(255, 236, 207), rgb(80, 27, 0))": "J",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "K",
+      "ButtonBorder": "L",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "M",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "N",
+      "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))": "O",
+      "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))": "P",
+      "rgba(0, 0, 0, 0.44)": "Q",
+      "Mark": "R",
+      "light-dark(rgb(11, 120, 179), rgb(13, 125, 186))": "S",
+      "light-dark(rgb(113, 85, 250), rgb(116, 91, 252))": "T",
+      "light-dark(rgb(114, 114, 114), rgb(118, 118, 118))": "U",
+      "light-dark(rgb(139, 109, 66), rgb(143, 114, 69))": "V",
+      "light-dark(rgb(154, 71, 226), rgb(157, 78, 228))": "W",
+      "light-dark(rgb(163, 196, 0), rgb(136, 164, 0))": "X",
+      "light-dark(rgb(170, 94, 56), rgb(176, 98, 59))": "Y",
+      "light-dark(rgb(181, 57, 200), rgb(186, 60, 206))": "Z",
+      "light-dark(rgb(197, 255, 156), rgb(21, 51, 1))": "0",
+      "light-dark(rgb(206, 42, 146), rgb(213, 45, 151))": "1",
+      "light-dark(rgb(209, 245, 245), rgb(0, 49, 54))": "2",
+      "light-dark(rgb(211, 246, 234), rgb(0, 50, 44))": "3",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "4",
+      "light-dark(rgb(217, 244, 253), rgb(0, 48, 65))": "5",
+      "light-dark(rgb(217, 35, 97), rgb(224, 38, 101))": "6",
+      "light-dark(rgb(229, 240, 254), rgb(15, 28, 82))": "7",
+      "light-dark(rgb(234, 246, 173), rgb(39, 47, 0))": "8",
+      "light-dark(rgb(235, 238, 255), rgb(47, 0, 140))": "9",
+      "light-dark(rgb(239, 239, 239), rgb(44, 44, 44))": "_a",
+      "light-dark(rgb(244, 235, 252), rgb(64, 0, 122))": "_b",
+      "light-dark(rgb(245, 199, 0), rgb(218, 159, 0))": "_c",
+      "light-dark(rgb(247, 238, 225), rgb(58, 40, 14))": "_d",
+      "light-dark(rgb(249, 236, 229), rgb(79, 28, 7))": "_e",
+      "light-dark(rgb(253, 233, 255), rgb(79, 0, 95))": "_f",
+      "light-dark(rgb(255, 232, 240), rgb(93, 0, 34))": "_g",
+      "light-dark(rgb(255, 232, 247), rgb(90, 0, 57))": "_h",
+      "light-dark(rgb(255, 241, 151), rgb(61, 39, 0))": "_i",
+      "light-dark(rgb(7, 129, 109), rgb(8, 134, 112))": "_j",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "_k",
+      "light-dark(rgb(8, 126, 137), rgb(9, 131, 142))": "_l",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "_m",
+      "light-dark(rgb(93, 180, 31), rgb(78, 154, 23))": "_n"
+    },
+    "color": {
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "a",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "b",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "c",
+      "white": "d",
+      "GrayText": "e",
+      "ButtonText": "f",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "g",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "h",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "i",
+      "black": "j",
+      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "k",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "l",
+      "HighlightText": "m",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "n",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "o",
+      "ButtonFace": "p",
+      "LinkText": "q",
+      "lch(from var(--c, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1)": "r",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "s",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "t",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "u",
+      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "v",
+      "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))": "w",
+      "Highlight": "x",
+      "transparent": "y"
+    },
+    "height": {
+      "calc(1.25rem * var(--s2-scale))": "a",
+      "calc(1.5rem * var(--s2-scale))": "b",
+      "calc(2rem * var(--s2-scale))": "c",
+      "calc(2.5rem * var(--s2-scale))": "d",
+      "calc(3rem * var(--s2-scale))": "e",
+      "100%": "f",
+      "calc(1rem * var(--s2-scale))": "g",
+      "calc(1.125rem * var(--s2-scale))": "h",
+      "calc(0.875rem * var(--s2-scale))": "i",
+      "calc(0.5rem * var(--s2-scale))": "j",
+      "calc(0.25rem * var(--s2-scale))": "k",
+      "auto": "l",
+      "calc(1.375rem * var(--s2-scale))": "m",
+      "calc(0.375rem * var(--s2-scale))": "n",
+      "100vh": "o",
+      "calc(0.625rem * var(--s2-scale))": "p",
+      "calc(0.75rem * var(--s2-scale))": "q",
+      "calc(2.75rem * var(--s2-scale))": "r",
+      "fit-content": "s",
+      "min-content": "t",
+      "calc(1.625rem * var(--s2-scale))": "u",
+      "calc(12rem * var(--s2-scale))": "v",
+      "calc(2.25rem * var(--s2-scale))": "w",
+      "calc(3.5rem * var(--s2-scale))": "x",
+      "calc(6rem * var(--s2-scale))": "y",
+      "max-content": "z",
+      "0px": "A",
+      "calc(10rem * var(--s2-scale))": "B",
+      "calc(4rem * var(--s2-scale))": "C",
+      "calc(8.75rem * var(--s2-scale))": "D"
+    },
+    "width": {
+      "100%": "a",
+      "calc(1.25rem * var(--s2-scale))": "b",
+      "calc(1.5rem * var(--s2-scale))": "c",
+      "calc(12rem * var(--s2-scale))": "d",
+      "fit-content": "e",
+      "calc(1rem * var(--s2-scale))": "f",
+      "calc(2rem * var(--s2-scale))": "g",
+      "calc(15rem * var(--s2-scale))": "h",
+      "calc(2.5rem * var(--s2-scale))": "i",
+      "calc(1.125rem * var(--s2-scale))": "j",
+      "calc(13rem * var(--s2-scale))": "k",
+      "calc(14rem * var(--s2-scale))": "l",
+      "calc(0.875rem * var(--s2-scale))": "m",
+      "calc(3rem * var(--s2-scale))": "n",
+      "calc(1.375rem * var(--s2-scale))": "o",
+      "auto": "p",
+      "max-content": "q",
+      "100vw": "r",
+      "calc(0.75rem * var(--s2-scale))": "s",
+      "calc(2.75rem * var(--s2-scale))": "t",
+      "calc(21rem * var(--s2-scale))": "u",
+      "calc(26rem * var(--s2-scale))": "v",
+      "calc(36rem * var(--s2-scale))": "w",
+      "calc(6rem * var(--s2-scale))": "x",
+      "min-content": "y",
+      "calc(0.0625rem * var(--s2-scale))": "z",
+      "calc(0.125rem * var(--s2-scale))": "A",
+      "calc(0.375rem * var(--s2-scale))": "B",
+      "calc(0.5rem * var(--s2-scale))": "C",
+      "calc(0.625rem * var(--s2-scale))": "D",
+      "calc(1.625rem * var(--s2-scale))": "E",
+      "calc(10rem * var(--s2-scale))": "F",
+      "calc(13.625rem * var(--s2-scale))": "G",
+      "calc(2.25rem * var(--s2-scale))": "H",
+      "calc(20rem * var(--s2-scale))": "I",
+      "calc(25rem * var(--s2-scale))": "J",
+      "calc(3.5rem * var(--s2-scale))": "K",
+      "calc(4rem * var(--s2-scale))": "L",
+      "calc(7rem * var(--s2-scale))": "M"
+    },
+    "lineHeight": {
+      "1.5": "a",
+      "1.3": "b",
+      "1.7": "c"
+    },
+    "marginInlineStart": {
+      "0rem": "a",
+      "auto": "b",
+      "0.5rem": "c",
+      "-0.75rem": "d",
+      "0.25rem": "e",
+      "0.42857142857142855em": "f",
+      "0.47058823529411764em": "g",
+      "-0.25rem": "h",
+      "0.7142857142857143em": "i",
+      "1rem": "j",
+      "2rem": "k",
+      "-0.5rem": "l",
+      "-1.5rem": "m",
+      "0.125rem": "n",
+      "0.75rem": "o",
+      "-1.25rem": "p",
+      "-1.75rem": "q",
+      "-10rem": "r",
+      "-11rem": "s",
+      "-12rem": "t",
+      "-13rem": "u",
+      "-14rem": "v",
+      "-15rem": "w",
+      "-16rem": "x",
+      "-18rem": "y",
+      "-1rem": "z",
+      "-2.25rem": "A",
+      "-2.5rem": "B",
+      "-2.75rem": "C",
+      "-20rem": "D",
+      "-24rem": "E",
+      "-2rem": "F",
+      "-3.5rem": "G",
+      "-3rem": "H",
+      "-4rem": "I",
+      "-5rem": "J",
+      "-6rem": "K",
+      "-7rem": "L",
+      "-8rem": "M",
+      "-9rem": "N",
+      "1.25rem": "O",
+      "1.5rem": "P",
+      "1.75rem": "Q",
+      "10rem": "R",
+      "11rem": "S",
+      "12rem": "T",
+      "13rem": "U",
+      "14rem": "V",
+      "15rem": "W",
+      "16rem": "X",
+      "18rem": "Y",
+      "2.25rem": "Z",
+      "2.5rem": "0",
+      "2.75rem": "1",
+      "20rem": "2",
+      "24rem": "3",
+      "3.5rem": "4",
+      "3rem": "5",
+      "4rem": "6",
+      "5rem": "7",
+      "6rem": "8",
+      "7rem": "9",
+      "8rem": "_a",
+      "9rem": "_b",
+      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
+      "calc(var(--e, var(--s)) / 2)": "_d"
+    },
+    "marginInlineEnd": {
+      "0rem": "a",
+      "0.25rem": "b",
+      "0.42857142857142855em": "c",
+      "0.47058823529411764em": "d",
+      "auto": "e",
+      "0.5rem": "f",
+      "0.7142857142857143em": "g",
+      "2rem": "h",
+      "-0.25rem": "i",
+      "-0.5rem": "j",
+      "-1.5rem": "k",
+      "0.75rem": "l",
+      "1rem": "m",
+      "-0.75rem": "n",
+      "-1.25rem": "o",
+      "-1.75rem": "p",
+      "-10rem": "q",
+      "-11rem": "r",
+      "-12rem": "s",
+      "-13rem": "t",
+      "-14rem": "u",
+      "-15rem": "v",
+      "-16rem": "w",
+      "-18rem": "x",
+      "-1rem": "y",
+      "-2.25rem": "z",
+      "-2.5rem": "A",
+      "-2.75rem": "B",
+      "-20rem": "C",
+      "-24rem": "D",
+      "-2rem": "E",
+      "-3.5rem": "F",
+      "-3rem": "G",
+      "-4rem": "H",
+      "-5rem": "I",
+      "-6rem": "J",
+      "-7rem": "K",
+      "-8rem": "L",
+      "-9rem": "M",
+      "0.125rem": "N",
+      "1.25rem": "O",
+      "1.5rem": "P",
+      "1.75rem": "Q",
+      "10rem": "R",
+      "11rem": "S",
+      "12rem": "T",
+      "13rem": "U",
+      "14rem": "V",
+      "15rem": "W",
+      "16rem": "X",
+      "18rem": "Y",
+      "2.25rem": "Z",
+      "2.5rem": "0",
+      "2.75rem": "1",
+      "20rem": "2",
+      "24rem": "3",
+      "3.5rem": "4",
+      "3rem": "5",
+      "4rem": "6",
+      "5rem": "7",
+      "6rem": "8",
+      "7rem": "9",
+      "8rem": "_a",
+      "9rem": "_b",
+      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
+      "calc(var(--e, var(--s)) / 2)": "_d"
+    },
+    "marginTop": {
+      "0rem": "a",
+      "0.25rem": "b",
+      "1rem": "c",
+      "-0.25rem": "d",
+      "-1.5rem": "e",
+      "0.5rem": "f",
+      "0.75rem": "g",
+      "1.25rem": "h",
+      "-0.5rem": "i",
+      "-0.75rem": "j",
+      "-1.25rem": "k",
+      "-1.75rem": "l",
+      "-10rem": "m",
+      "-11rem": "n",
+      "-12rem": "o",
+      "-13rem": "p",
+      "-14rem": "q",
+      "-15rem": "r",
+      "-16rem": "s",
+      "-18rem": "t",
+      "-1rem": "u",
+      "-2.25rem": "v",
+      "-2.5rem": "w",
+      "-2.75rem": "x",
+      "-20rem": "y",
+      "-24rem": "z",
+      "-2rem": "A",
+      "-3.5rem": "B",
+      "-3rem": "C",
+      "-4rem": "D",
+      "-5rem": "E",
+      "-6rem": "F",
+      "-7rem": "G",
+      "-8rem": "H",
+      "-9rem": "I",
+      "0.125rem": "J",
+      "0.42857142857142855em": "K",
+      "0.47058823529411764em": "L",
+      "0.7142857142857143em": "M",
+      "1.5rem": "N",
+      "1.75rem": "O",
+      "10rem": "P",
+      "11rem": "Q",
+      "12rem": "R",
+      "13rem": "S",
+      "14rem": "T",
+      "15rem": "U",
+      "16rem": "V",
+      "18rem": "W",
+      "2.25rem": "X",
+      "2.5rem": "Y",
+      "2.75rem": "Z",
+      "20rem": "0",
+      "24rem": "1",
+      "2rem": "2",
+      "3.5rem": "3",
+      "3rem": "4",
+      "4rem": "5",
+      "5rem": "6",
+      "6rem": "7",
+      "7rem": "8",
+      "8rem": "9",
+      "9rem": "_a",
+      "auto": "_b",
+      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
+      "calc(var(--e, var(--s)) / 2)": "_d"
+    },
+    "columnGap": {
+      "0.75rem": "a",
+      "0.42857142857142855em": "b",
+      "0.47058823529411764em": "c",
+      "0.5rem": "d",
+      "0.25rem": "e",
+      "1.5rem": "f",
+      "1rem": "g",
+      "0.7142857142857143em": "h",
+      "0.125rem": "i",
+      "1.25rem": "j",
+      "2rem": "k",
+      "0rem": "l",
+      "1.75rem": "m",
+      "10rem": "n",
+      "11rem": "o",
+      "12rem": "p",
+      "13rem": "q",
+      "14rem": "r",
+      "15rem": "s",
+      "16rem": "t",
+      "18rem": "u",
+      "2.25rem": "v",
+      "2.5rem": "w",
+      "2.75rem": "x",
+      "20rem": "y",
+      "24rem": "z",
+      "3.5rem": "A",
+      "3rem": "B",
+      "4rem": "C",
+      "5rem": "D",
+      "6rem": "E",
+      "7rem": "F",
+      "8rem": "G",
+      "9rem": "H",
+      "calc(var(--e, var(--s)) * 3 / 8)": "I",
+      "calc(var(--e, var(--s)) / 2)": "J"
+    },
+    "marginBottom": {
+      "0rem": "a",
+      "0.25rem": "b",
+      "-0.25rem": "c",
+      "-1.5rem": "d",
+      "0.5rem": "e",
+      "0.75rem": "f",
+      "1rem": "g",
+      "-0.5rem": "h",
+      "-0.75rem": "i",
+      "-1.25rem": "j",
+      "-1.75rem": "k",
+      "-10rem": "l",
+      "-11rem": "m",
+      "-12rem": "n",
+      "-13rem": "o",
+      "-14rem": "p",
+      "-15rem": "q",
+      "-16rem": "r",
+      "-18rem": "s",
+      "-1rem": "t",
+      "-2.25rem": "u",
+      "-2.5rem": "v",
+      "-2.75rem": "w",
+      "-20rem": "x",
+      "-24rem": "y",
+      "-2rem": "z",
+      "-3.5rem": "A",
+      "-3rem": "B",
+      "-4rem": "C",
+      "-5rem": "D",
+      "-6rem": "E",
+      "-7rem": "F",
+      "-8rem": "G",
+      "-9rem": "H",
+      "0.125rem": "I",
+      "0.42857142857142855em": "J",
+      "0.47058823529411764em": "K",
+      "0.7142857142857143em": "L",
+      "1.25rem": "M",
+      "1.5rem": "N",
+      "1.75rem": "O",
+      "10rem": "P",
+      "11rem": "Q",
+      "12rem": "R",
+      "13rem": "S",
+      "14rem": "T",
+      "15rem": "U",
+      "16rem": "V",
+      "18rem": "W",
+      "2.25rem": "X",
+      "2.5rem": "Y",
+      "2.75rem": "Z",
+      "20rem": "0",
+      "24rem": "1",
+      "2rem": "2",
+      "3.5rem": "3",
+      "3rem": "4",
+      "4rem": "5",
+      "5rem": "6",
+      "6rem": "7",
+      "7rem": "8",
+      "8rem": "9",
+      "9rem": "_a",
+      "auto": "_b",
+      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
+      "calc(var(--e, var(--s)) / 2)": "_d"
+    },
+    "display": {
+      "flex": "a",
+      "grid": "b",
+      "block": "c",
+      "none": "d",
+      "inline": "e",
+      "inline-flex": "f",
+      "inline-block": "g",
+      "contents": "h",
+      "-webkit-box": "i",
+      "inline-grid": "j",
+      "list-item": "k"
+    },
+    "paddingInlineEnd": {
+      "0rem": "a",
+      "calc(var(--e, var(--s)) * 3 / 8)": "b",
+      "0.5rem": "c",
+      "1.5rem": "d",
+      "0.25rem": "e",
+      "1rem": "f",
+      "2rem": "g",
+      "0.125rem": "h",
+      "0.75rem": "i",
+      "1.25rem": "j",
+      "calc(var(--e, var(--s)) / 2)": "k",
+      "0.42857142857142855em": "l",
+      "0.47058823529411764em": "m",
+      "0.7142857142857143em": "n",
+      "1.75rem": "o",
+      "10rem": "p",
+      "11rem": "q",
+      "12rem": "r",
+      "13rem": "s",
+      "14rem": "t",
+      "15rem": "u",
+      "16rem": "v",
+      "18rem": "w",
+      "2.25rem": "x",
+      "2.5rem": "y",
+      "2.75rem": "z",
+      "20rem": "A",
+      "24rem": "B",
+      "3.5rem": "C",
+      "3rem": "D",
+      "4rem": "E",
+      "5rem": "F",
+      "6rem": "G",
+      "7rem": "H",
+      "8rem": "I",
+      "9rem": "J"
+    },
+    "paddingInlineStart": {
+      "0rem": "a",
+      "calc(var(--e, var(--s)) * 3 / 8)": "b",
+      "0.5rem": "c",
+      "1.5rem": "d",
+      "1rem": "e",
+      "2rem": "f",
+      "0.25rem": "g",
+      "0.75rem": "h",
+      "calc(var(--e, var(--s)) / 2)": "i",
+      "0.125rem": "j",
+      "0.42857142857142855em": "k",
+      "0.47058823529411764em": "l",
+      "0.7142857142857143em": "m",
+      "1.25rem": "n",
+      "1.75rem": "o",
+      "10rem": "p",
+      "11rem": "q",
+      "12rem": "r",
+      "13rem": "s",
+      "14rem": "t",
+      "15rem": "u",
+      "16rem": "v",
+      "18rem": "w",
+      "2.25rem": "x",
+      "2.5rem": "y",
+      "2.75rem": "z",
+      "20rem": "A",
+      "24rem": "B",
+      "3.5rem": "C",
+      "3rem": "D",
+      "4rem": "E",
+      "5rem": "F",
+      "6rem": "G",
+      "7rem": "H",
+      "8rem": "I",
+      "9rem": "J"
+    },
+    "rowGap": {
+      "0.5rem": "a",
+      "0.25rem": "b",
+      "0.42857142857142855em": "c",
+      "0.47058823529411764em": "d",
+      "1.5rem": "e",
+      "1rem": "f",
+      "0.125rem": "g",
+      "0.75rem": "h",
+      "1.25rem": "i",
+      "2rem": "j",
+      "2.5rem": "k",
+      "0.7142857142857143em": "l",
+      "0rem": "m",
+      "1.75rem": "n",
+      "10rem": "o",
+      "11rem": "p",
+      "12rem": "q",
+      "13rem": "r",
+      "14rem": "s",
+      "15rem": "t",
+      "16rem": "u",
+      "18rem": "v",
+      "2.25rem": "w",
+      "2.75rem": "x",
+      "20rem": "y",
+      "24rem": "z",
+      "3.5rem": "A",
+      "3rem": "B",
+      "4rem": "C",
+      "5rem": "D",
+      "6rem": "E",
+      "7rem": "F",
+      "8rem": "G",
+      "9rem": "H",
+      "calc(var(--e, var(--s)) * 3 / 8)": "I",
+      "calc(var(--e, var(--s)) / 2)": "J"
+    },
+    "borderColor": {
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "a",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "b",
+      "ButtonBorder": "c",
+      "GrayText": "d",
+      "transparent": "e",
+      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "f",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "g",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "h",
+      "Highlight": "i",
+      "light-dark(rgb(156, 33, 19), rgb(255, 134, 120))": "j",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "k",
+      "ButtonText": "l",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "m",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "n",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "o",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "p",
+      "Mark": "q",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "r",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "s",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "t",
+      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "u",
+      "light-dark(rgb(11, 164, 93), rgb(4, 124, 75))": "v",
+      "light-dark(rgb(232, 106, 0), rgb(185, 73, 0))": "w",
+      "light-dark(rgb(240, 56, 35), rgb(223, 52, 34))": "x",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "y",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "z",
+      "rgb(from black r g b / 42%)": "A",
+      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 42%)": "B",
+      "white": "C"
+    },
+    "paddingTop": {
+      "0rem": "a",
+      "0.5rem": "b",
+      "1.5rem": "c",
+      "0.75rem": "d",
+      "1rem": "e",
+      "1.25rem": "f",
+      "2rem": "g",
+      "0.25rem": "h",
+      "1.75rem": "i",
+      "0.125rem": "j",
+      "0.42857142857142855em": "k",
+      "0.47058823529411764em": "l",
+      "0.7142857142857143em": "m",
+      "10rem": "n",
+      "11rem": "o",
+      "12rem": "p",
+      "13rem": "q",
+      "14rem": "r",
+      "15rem": "s",
+      "16rem": "t",
+      "18rem": "u",
+      "2.25rem": "v",
+      "2.5rem": "w",
+      "2.75rem": "x",
+      "20rem": "y",
+      "24rem": "z",
+      "3.5rem": "A",
+      "3rem": "B",
+      "4rem": "C",
+      "5rem": "D",
+      "6rem": "E",
+      "7rem": "F",
+      "8rem": "G",
+      "9rem": "H",
+      "calc(var(--e, var(--s)) * 3 / 8)": "I",
+      "calc(var(--e, var(--s)) / 2)": "J"
+    },
+    "minHeight": {
+      "calc(2.5rem * var(--s2-scale))": "a",
+      "calc(2rem * var(--s2-scale))": "b",
+      "calc(1.5rem * var(--s2-scale))": "c",
+      "calc(3rem * var(--s2-scale))": "d",
+      "calc(1.25rem * var(--s2-scale))": "e",
+      "0px": "f",
+      "calc(1.125rem * var(--s2-scale))": "g",
+      "calc(3.5rem * var(--s2-scale))": "h",
+      "100%": "i",
+      "100vh": "j",
+      "auto": "k",
+      "calc(0.875rem * var(--s2-scale))": "l",
+      "calc(1rem * var(--s2-scale))": "m",
+      "fit-content": "n",
+      "max-content": "o",
+      "min-content": "p",
+      "calc(4rem * var(--s2-scale))": "q"
+    },
+    "outlineStyle": {
+      "none": "a",
+      "solid": "b",
+      "dashed": "c",
+      "dotted": "d",
+      "double": "e",
+      "inset": "f"
+    },
+    "minWidth": {
+      "calc(1.25rem * var(--s2-scale))": "a",
+      "calc(3rem * var(--s2-scale))": "b",
+      "calc(1.5rem * var(--s2-scale))": "c",
+      "calc(2.5rem * var(--s2-scale))": "d",
+      "calc(2rem * var(--s2-scale))": "e",
+      "0px": "f",
+      "100%": "g",
+      "100vw": "h",
+      "auto": "i",
+      "calc(0.875rem * var(--s2-scale))": "j",
+      "calc(1.125rem * var(--s2-scale))": "k",
+      "calc(12rem * var(--s2-scale))": "l",
+      "calc(1rem * var(--s2-scale))": "m",
+      "fit-content": "n",
+      "max-content": "o",
+      "min-content": "p",
+      "calc(12.5rem * var(--s2-scale))": "q",
+      "calc(13.625rem * var(--s2-scale))": "r",
+      "calc(4rem * var(--s2-scale))": "s",
+      "calc(8rem * var(--s2-scale))": "t"
+    },
+    "paddingBottom": {
+      "0rem": "a",
+      "0.5rem": "b",
+      "1.5rem": "c",
+      "2rem": "d",
+      "0.25rem": "e",
+      "0.75rem": "f",
+      "1rem": "g",
+      "0.125rem": "h",
+      "0.42857142857142855em": "i",
+      "0.47058823529411764em": "j",
+      "0.7142857142857143em": "k",
+      "1.25rem": "l",
+      "1.75rem": "m",
+      "10rem": "n",
+      "11rem": "o",
+      "12rem": "p",
+      "13rem": "q",
+      "14rem": "r",
+      "15rem": "s",
+      "16rem": "t",
+      "18rem": "u",
+      "2.25rem": "v",
+      "2.5rem": "w",
+      "2.75rem": "x",
+      "20rem": "y",
+      "24rem": "z",
+      "3.5rem": "A",
+      "3rem": "B",
+      "4rem": "C",
+      "5rem": "D",
+      "6rem": "E",
+      "7rem": "F",
+      "8rem": "G",
+      "9rem": "H",
+      "calc(var(--e, var(--s)) * 3 / 8)": "I",
+      "calc(var(--e, var(--s)) / 2)": "J"
+    },
+    "borderEndStartRadius": {
+      "9999px": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.5714285714285714em": "d",
+      "0.625rem": "e",
+      "0px": "f",
+      "0.2857142857142857em": "g",
+      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
+      "1rem": "i"
+    },
+    "borderStartEndRadius": {
+      "9999px": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.5714285714285714em": "d",
+      "0.625rem": "e",
+      "0px": "f",
+      "0.2857142857142857em": "g",
+      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
+      "1rem": "i"
+    },
+    "borderEndEndRadius": {
+      "9999px": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.625rem": "d",
+      "0.5714285714285714em": "e",
+      "0px": "f",
+      "0.2857142857142857em": "g",
+      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
+      "1rem": "i"
+    },
+    "borderStartStartRadius": {
+      "9999px": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.625rem": "d",
+      "0.5714285714285714em": "e",
+      "0px": "f",
+      "0.2857142857142857em": "g",
+      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
+      "1rem": "i"
+    },
+    "cursor": {
+      "default": "a",
+      "pointer": "b",
+      "text": "c",
+      "e-resize": "d",
+      "ew-resize": "e",
+      "none": "f",
+      "w-resize": "g",
+      "alias": "h",
+      "all-scroll": "i",
+      "auto": "j",
+      "cell": "k",
+      "col-resize": "l",
+      "context-menu": "m",
+      "copy": "n",
+      "crosshair": "o",
+      "grab": "p",
+      "grabbing": "q",
+      "help": "r",
+      "move": "s",
+      "n-resize": "t",
+      "ne-resize": "u",
+      "nesw-resize": "v",
+      "no-drop": "w",
+      "not-allowed": "x",
+      "ns-resize": "y",
+      "nw-resize": "z",
+      "nwse-resize": "A",
+      "progress": "B",
+      "row-resize": "C",
+      "s-resize": "D",
+      "se-resize": "E",
+      "vertical-text": "F",
+      "wait": "G",
+      "zoom-in": "H",
+      "zoom-out": "I"
+    },
+    "outlineColor": {
+      "Highlight": "a",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "b",
+      "ButtonBorder": "c",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "d",
+      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 10%)": "e",
+      "transparent": "f",
+      "ButtonText": "g",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "h",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "i",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "j",
+      "rgb(from black r g b / 42%)": "k",
+      "white": "l"
+    },
+    "fontSynthesisWeight": {
+      "none": "a"
+    },
+    "fontVariationSettings": {
+      "\"wght\" 400": "a",
+      "\"wght\" 700": "b",
+      "\"wght\" 800": "c",
+      "\"wght\" 500": "d",
+      "\"wght\" 300": "e"
+    },
+    "fontWeight": {
+      "300": "e",
+      "400": "a",
+      "500": "d",
+      "700": "b",
+      "800": "c"
+    },
+    "alignItems": {
+      "center": "a",
+      "baseline": "b",
+      "start": "c",
+      "end": "d",
+      "stretch": "e"
+    },
+    "bottom": {
+      "0rem": "a",
+      "1.5rem": "b",
+      "1rem": "c",
+      "0.125rem": "d",
+      "0.25rem": "e",
+      "0.5rem": "f",
+      "0.75rem": "g",
+      "1.25rem": "h",
+      "1.75rem": "i",
+      "100%": "j",
+      "10rem": "k",
+      "11rem": "l",
+      "12rem": "m",
+      "13rem": "n",
+      "14rem": "o",
+      "15rem": "p",
+      "16rem": "q",
+      "18rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "top": {
+      "0rem": "a",
+      "1.5rem": "b",
+      "1rem": "c",
+      "0.125rem": "d",
+      "0.25rem": "e",
+      "0.5rem": "f",
+      "0.75rem": "g",
+      "1.25rem": "h",
+      "1.75rem": "i",
+      "100%": "j",
+      "10rem": "k",
+      "11rem": "l",
+      "12rem": "m",
+      "13rem": "n",
+      "14rem": "o",
+      "15rem": "p",
+      "16rem": "q",
+      "18rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "insetInlineEnd": {
+      "0rem": "a",
+      "0.5rem": "b",
+      "1.5rem": "c",
+      "0.125rem": "d",
+      "0.25rem": "e",
+      "0.75rem": "f",
+      "1.25rem": "g",
+      "1.75rem": "h",
+      "100%": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "insetInlineStart": {
+      "0rem": "a",
+      "0.5rem": "b",
+      "1.5rem": "c",
+      "0.125rem": "d",
+      "0.25rem": "e",
+      "0.75rem": "f",
+      "1.25rem": "g",
+      "1.75rem": "h",
+      "100%": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "position": {
+      "relative": "a",
+      "absolute": "b",
+      "fixed": "c",
+      "static": "d",
+      "sticky": "e"
+    },
+    "flexBasis": {
+      "0rem": "a",
+      "auto": "b",
+      "0.125rem": "c",
+      "0.25rem": "d",
+      "0.5rem": "e",
+      "0.75rem": "f",
+      "1.25rem": "g",
+      "1.5rem": "h",
+      "1.75rem": "i",
+      "100%": "j",
+      "10rem": "k",
+      "11rem": "l",
+      "12rem": "m",
+      "13rem": "n",
+      "14rem": "o",
+      "15rem": "p",
+      "16rem": "q",
+      "18rem": "r",
+      "1rem": "s",
+      "2.25rem": "t",
+      "2.5rem": "u",
+      "2.75rem": "v",
+      "20rem": "w",
+      "24rem": "x",
+      "2rem": "y",
+      "3.5rem": "z",
+      "3rem": "A",
+      "4rem": "B",
+      "5rem": "C",
+      "6rem": "D",
+      "7rem": "E",
+      "8rem": "F",
+      "9rem": "G"
+    },
+    "fill": {
+      "currentColor": "a",
+      "light-dark(rgb(240, 56, 35), rgb(252, 67, 46))": "b",
+      "light-dark(rgb(143, 143, 143), rgb(138, 138, 138))": "c",
+      "light-dark(rgb(212, 91, 0), rgb(224, 100, 0))": "d",
+      "light-dark(rgb(7, 147, 85), rgb(9, 157, 89))": "e",
+      "light-dark(rgb(75, 117, 255), rgb(86, 129, 255))": "f",
+      "white": "g",
+      "Highlight": "h",
+      "HighlightText": "i",
+      "ButtonText": "j",
+      "black": "k",
+      "light-dark(rgb(10, 141, 153), rgb(11, 151, 164))": "l",
+      "light-dark(rgb(11, 162, 134), rgb(8, 134, 112))": "m",
+      "light-dark(rgb(122, 106, 253), rgb(128, 119, 254))": "n",
+      "light-dark(rgb(128, 128, 128), rgb(137, 137, 137))": "o",
+      "light-dark(rgb(143, 172, 0), rgb(122, 147, 0))": "p",
+      "light-dark(rgb(154, 123, 77), rgb(163, 132, 84))": "q",
+      "light-dark(rgb(166, 92, 231), rgb(173, 105, 233))": "r",
+      "light-dark(rgb(184, 109, 70), rgb(192, 119, 80))": "s",
+      "light-dark(rgb(200, 68, 220), rgb(213, 73, 235))": "t",
+      "light-dark(rgb(210, 149, 0), rgb(218, 159, 0))": "u",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "v",
+      "light-dark(rgb(228, 52, 163), rgb(236, 67, 175))": "w",
+      "light-dark(rgb(240, 45, 110), rgb(255, 51, 119))": "x",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "y",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "z",
+      "light-dark(rgb(48, 167, 254), rgb(24, 142, 220))": "A",
+      "light-dark(rgb(82, 161, 25), rgb(66, 134, 18))": "B"
+    },
+    "left": {
+      "0rem": "a",
+      "0.125rem": "b",
+      "0.25rem": "c",
+      "0.5rem": "d",
+      "0.75rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "100%": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "right": {
+      "0rem": "a",
+      "0.125rem": "b",
+      "0.25rem": "c",
+      "0.5rem": "d",
+      "0.75rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "100%": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "2rem": "x",
+      "3.5rem": "y",
+      "3rem": "z",
+      "4rem": "A",
+      "5rem": "B",
+      "6rem": "C",
+      "7rem": "D",
+      "8rem": "E",
+      "9rem": "F",
+      "auto": "G"
+    },
+    "borderStyle": {
+      "solid": "a",
+      "none": "b",
+      "dashed": "c",
+      "dotted": "d",
+      "double": "e",
+      "hidden": "f"
+    },
+    "scrollPaddingInlineStart": {
+      "2.5rem": "a",
+      "0.125rem": "b",
+      "0.25rem": "c",
+      "0.5rem": "d",
+      "0.75rem": "e",
+      "0rem": "f",
+      "1.25rem": "g",
+      "1.5rem": "h",
+      "1.75rem": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollPaddingTop": {
+      "2rem": "a",
+      "0.125rem": "b",
+      "0.25rem": "c",
+      "0.5rem": "d",
+      "0.75rem": "e",
+      "0rem": "f",
+      "1.25rem": "g",
+      "1.5rem": "h",
+      "1.75rem": "i",
+      "10rem": "j",
+      "11rem": "k",
+      "12rem": "l",
+      "13rem": "m",
+      "14rem": "n",
+      "15rem": "o",
+      "16rem": "p",
+      "18rem": "q",
+      "1rem": "r",
+      "2.25rem": "s",
+      "2.5rem": "t",
+      "2.75rem": "u",
+      "20rem": "v",
+      "24rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "borderSpacing": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollMarginBottom": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollMarginInlineEnd": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollMarginInlineStart": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollMarginTop": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollPaddingBottom": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "scrollPaddingInlineEnd": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "textIndent": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "10rem": "i",
+      "11rem": "j",
+      "12rem": "k",
+      "13rem": "l",
+      "14rem": "m",
+      "15rem": "n",
+      "16rem": "o",
+      "18rem": "p",
+      "1rem": "q",
+      "2.25rem": "r",
+      "2.5rem": "s",
+      "2.75rem": "t",
+      "20rem": "u",
+      "24rem": "v",
+      "2rem": "w",
+      "3.5rem": "x",
+      "3rem": "y",
+      "4rem": "z",
+      "5rem": "A",
+      "6rem": "B",
+      "7rem": "C",
+      "8rem": "D",
+      "9rem": "E"
+    },
+    "transitionTimingFunction": {
+      "cubic-bezier(0.45, 0, 0.4, 1)": "a",
+      "cubic-bezier(0.5, 0, 1, 1)": "b",
+      "cubic-bezier(0, 0, 0.40, 1)": "c",
+      "linear": "d"
+    },
+    "outlineWidth": {
+      "2px": "a",
+      "1px": "b",
+      "0px": "c",
+      "4px": "d"
+    },
+    "overflowY": {
+      "hidden": "a",
+      "auto": "b",
+      "clip": "c",
+      "visible": "d",
+      "scroll": "e"
+    },
+    "transitionProperty": {
+      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter": "a",
+      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke": "b",
+      "none": "c",
+      "opacity": "d",
+      "transform, translate, scale, rotate": "e",
+      "all": "f",
+      "box-shadow": "g"
+    },
+    "columns": {
+      "1": "a",
+      "2": "g",
+      "3": "k",
+      "4": "n",
+      "5": "q",
+      "6": "s",
+      "7": "u",
+      "8": "w",
+      "9": "y",
+      "10": "b",
+      "11": "c",
+      "12": "d",
+      "16rem": "e",
+      "18rem": "f",
+      "20rem": "h",
+      "24rem": "i",
+      "28rem": "j",
+      "32rem": "l",
+      "36rem": "m",
+      "42rem": "o",
+      "48rem": "p",
+      "56rem": "r",
+      "64rem": "t",
+      "72rem": "v",
+      "80rem": "x",
+      "auto": "z"
+    },
+    "transitionDuration": {
+      "150ms": "a",
+      "130ms": "b",
+      "200ms": "c",
+      "250ms": "d",
+      "500ms": "e"
+    },
+    "maxWidth": {
+      "100%": "a",
+      "calc(1.25rem * var(--s2-scale))": "b",
+      "max-content": "c",
+      "none": "d",
+      "calc(10rem * var(--s2-scale))": "e",
+      "100vw": "f",
+      "auto": "g",
+      "calc(0.875rem * var(--s2-scale))": "h",
+      "calc(1.125rem * var(--s2-scale))": "i",
+      "calc(1.5rem * var(--s2-scale))": "j",
+      "calc(1rem * var(--s2-scale))": "k",
+      "calc(2.5rem * var(--s2-scale))": "l",
+      "calc(2rem * var(--s2-scale))": "m",
+      "calc(3rem * var(--s2-scale))": "n",
+      "calc(48rem * var(--s2-scale))": "o",
+      "fit-content": "p",
+      "min-content": "q",
+      "calc(12rem * var(--s2-scale))": "r",
+      "calc(13rem * var(--s2-scale))": "s",
+      "calc(20rem * var(--s2-scale))": "t",
+      "calc(21rem * var(--s2-scale))": "u",
+      "calc(23.75rem * var(--s2-scale))": "v",
+      "calc(33rem * var(--s2-scale))": "w",
+      "calc(60rem * var(--s2-scale))": "x"
+    },
+    "borderBottomWidth": {
+      "2px": "a",
+      "1px": "b",
+      "0px": "c",
+      "4px": "d"
+    },
+    "borderTopWidth": {
+      "0px": "a",
+      "2px": "b",
+      "1px": "c",
+      "4px": "d"
+    },
+    "overflowX": {
+      "hidden": "a",
+      "auto": "b",
+      "clip": "c",
+      "visible": "d",
+      "scroll": "e"
+    },
+    "justifyContent": {
+      "center": "a",
+      "end": "b",
+      "start": "c",
+      "space-between": "d",
+      "normal": "e",
+      "space-around": "f",
+      "space-evenly": "g",
+      "stretch": "h"
+    },
+    "boxSizing": {
+      "border-box": "a",
+      "content-box": "b"
+    },
+    "flexShrink": {
+      "0": "a",
+      "1": "b"
+    },
+    "borderInlineEndWidth": {
+      "2px": "a",
+      "0px": "b",
+      "1px": "c",
+      "4px": "d"
+    },
+    "borderInlineStartWidth": {
+      "2px": "a",
+      "0px": "b",
+      "1px": "c",
+      "4px": "d"
+    },
+    "contain": {
+      "inline-size": "a",
+      "none": "b",
+      "layout": "c",
+      "content": "d",
+      "paint": "e",
+      "size": "f",
+      "strict": "g",
+      "style": "h"
+    },
+    "maxHeight": {
+      "calc(1.25rem * var(--s2-scale))": "a",
+      "none": "b",
+      "100vh": "c",
+      "100%": "d",
+      "auto": "e",
+      "calc(0.875rem * var(--s2-scale))": "f",
+      "calc(1.125rem * var(--s2-scale))": "g",
+      "calc(1.5rem * var(--s2-scale))": "h",
+      "calc(1rem * var(--s2-scale))": "i",
+      "calc(2.5rem * var(--s2-scale))": "j",
+      "calc(2rem * var(--s2-scale))": "k",
+      "calc(3rem * var(--s2-scale))": "l",
+      "fit-content": "m",
+      "max-content": "n",
+      "min-content": "o",
+      "calc(10rem * var(--s2-scale))": "p"
+    },
+    "mixBlendMode": {
+      "color": "a",
+      "color-burn": "b",
+      "color-dodge": "c",
+      "darken": "d",
+      "difference": "e",
+      "exclusion": "f",
+      "hard-light": "g",
+      "hue": "h",
+      "lighten": "i",
+      "luminosity": "j",
+      "multiply": "k",
+      "normal": "l",
+      "overlay": "m",
+      "plus-darker": "n",
+      "plus-lighter": "o",
+      "saturation": "p",
+      "screen": "q",
+      "soft-light": "r"
+    },
+    "outlineOffset": {
+      "2px": "a",
+      "-2px": "b",
+      "-1px": "c",
+      "-4px": "d"
+    },
+    "whiteSpace": {
+      "nowrap": "a",
+      "normal": "b",
+      "break-spaces": "c",
+      "pre": "d",
+      "pre-line": "e",
+      "pre-wrap": "f"
+    },
+    "backgroundBlendMode": {
+      "color": "a",
+      "color-burn": "b",
+      "color-dodge": "c",
+      "darken": "d",
+      "difference": "e",
+      "exclusion": "f",
+      "hard-light": "g",
+      "hue": "h",
+      "lighten": "i",
+      "luminosity": "j",
+      "multiply": "k",
+      "normal": "l",
+      "overlay": "m",
+      "saturation": "n",
+      "screen": "o",
+      "soft-light": "p"
+    },
+    "flexDirection": {
+      "column": "a",
+      "row": "b",
+      "column-reverse": "c",
+      "row-reverse": "d"
+    },
+    "containIntrinsicHeight": {
+      "calc(1.25rem * var(--s2-scale))": "a",
+      "100%": "b",
+      "100vh": "c",
+      "auto": "d",
+      "calc(0.875rem * var(--s2-scale))": "e",
+      "calc(1.125rem * var(--s2-scale))": "f",
+      "calc(1.5rem * var(--s2-scale))": "g",
+      "calc(1rem * var(--s2-scale))": "h",
+      "calc(2.5rem * var(--s2-scale))": "i",
+      "calc(2rem * var(--s2-scale))": "j",
+      "calc(3rem * var(--s2-scale))": "k",
+      "fit-content": "l",
+      "max-content": "m",
+      "min-content": "n"
+    },
+    "containIntrinsicWidth": {
+      "calc(1.25rem * var(--s2-scale))": "a",
+      "100%": "b",
+      "100vw": "c",
+      "auto": "d",
+      "calc(0.875rem * var(--s2-scale))": "e",
+      "calc(1.125rem * var(--s2-scale))": "f",
+      "calc(1.5rem * var(--s2-scale))": "g",
+      "calc(1rem * var(--s2-scale))": "h",
+      "calc(2.5rem * var(--s2-scale))": "i",
+      "calc(2rem * var(--s2-scale))": "j",
+      "calc(3rem * var(--s2-scale))": "k",
+      "fit-content": "l",
+      "max-content": "m",
+      "min-content": "n"
+    },
+    "textAlign": {
+      "start": "a",
+      "end": "b",
+      "center": "c",
+      "justify": "d"
+    },
+    "-webkit-tap-highlight-color": {
+      "rgba(0,0,0,0)": "a"
+    },
+    "flexGrow": {
+      "0": "b",
+      "1": "a"
+    },
+    "translate": {
+      "var(--translateX, 0) var(--translateY, 0)": "a"
+    },
+    "alignContent": {
+      "center": "a",
+      "space-between": "b",
+      "baseline": "c",
+      "end": "d",
+      "normal": "e",
+      "space-around": "f",
+      "space-evenly": "g",
+      "start": "h",
+      "stretch": "i"
+    },
+    "boxShadow": {
+      "0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))": "a",
+      "none": "b",
+      "0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))": "c",
+      "0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "d"
+    },
+    "opacity": {
+      "0": "a",
+      "1": "b"
+    },
+    "order": {
+      "0": "a",
+      "1": "b"
+    },
+    "colorScheme": {
+      "light": "a",
+      "dark": "b",
+      "light dark": "c"
+    },
+    "aspectRatio": {
+      "1 / 1": "a",
+      "16 / 9": "b",
+      "auto": "c"
+    },
+    "transformOrigin": {
+      "top right": "a",
+      "center": "b",
+      "left": "c",
+      "bottom": "d",
+      "bottom left": "e",
+      "bottom right": "f",
+      "right": "g",
+      "top": "h"
+    },
+    "userSelect": {
+      "none": "a",
+      "all": "b",
+      "auto": "c",
+      "text": "d"
+    },
+    "objectFit": {
+      "cover": "a",
+      "contain": "b",
+      "fill": "c",
+      "none": "d",
+      "scale-down": "e"
+    },
+    "rotate": {
+      "90deg": "a",
+      "180deg": "b",
+      "-90deg": "c",
+      "0deg": "d",
+      "270deg": "e"
+    },
+    "textOverflow": {
+      "ellipsis": "a",
+      "clip": "b"
+    },
+    "backgroundPosition": {
+      "bottom": "a",
+      "center": "b",
+      "left": "c",
+      "left bottom": "d",
+      "left top": "e",
+      "right": "f",
+      "right bottom": "g",
+      "right top": "h",
+      "top": "i"
+    },
+    "objectPosition": {
+      "bottom": "a",
+      "center": "b",
+      "left": "c",
+      "left bottom": "d",
+      "left top": "e",
+      "right": "f",
+      "right bottom": "g",
+      "right top": "h",
+      "top": "i"
+    },
+    "verticalAlign": {
+      "bottom": "a",
+      "middle": "b",
+      "baseline": "c",
+      "sub": "d",
+      "super": "e",
+      "text-bottom": "f",
+      "text-top": "g",
+      "top": "h"
+    },
+    "alignSelf": {
+      "center": "a",
+      "end": "b",
+      "start": "c",
+      "stretch": "d",
+      "auto": "e",
+      "baseline": "f"
+    },
+    "breakAfter": {
+      "all": "a",
+      "auto": "b",
+      "avoid": "c",
+      "avoid-page": "d",
+      "column": "e",
+      "left": "f",
+      "page": "g",
+      "right": "h"
+    },
+    "breakBefore": {
+      "all": "a",
+      "auto": "b",
+      "avoid": "c",
+      "avoid-page": "d",
+      "column": "e",
+      "left": "f",
+      "page": "g",
+      "right": "h"
+    },
+    "forcedColorAdjust": {
+      "none": "a",
+      "auto": "b"
+    },
+    "pointerEvents": {
+      "none": "a",
+      "auto": "b"
+    },
+    "animationTimingFunction": {
+      "cubic-bezier(0.45, 0, 0.4, 1)": "a",
+      "cubic-bezier(0, 0, 0.40, 1)": "b",
+      "cubic-bezier(0.5, 0, 1, 1)": "c",
+      "linear": "d"
+    },
+    "flexWrap": {
+      "wrap": "a",
+      "nowrap": "b",
+      "wrap-reverse": "c"
+    },
+    "backgroundRepeat": {
+      "no-repeat": "a",
+      "repeat": "b",
+      "repeat-x": "c",
+      "repeat-y": "d",
+      "round": "e",
+      "space": "f"
+    },
+    "clear": {
+      "both": "a",
+      "inline-end": "b",
+      "inline-start": "c",
+      "left": "d",
+      "none": "e",
+      "right": "f"
+    },
+    "scrollSnapType": {
+      "both": "a",
+      "both mandatory": "b",
+      "x": "c",
+      "x mandatory": "d",
+      "y": "e",
+      "y mandatory": "f"
+    },
+    "touchAction": {
+      "auto": "a",
+      "manipulation": "b",
+      "none": "c",
+      "pan-x": "d",
+      "pan-y": "e",
+      "pinch-zoom": "f"
+    },
+    "visibility": {
+      "hidden": "a",
+      "visible": "b",
+      "collapse": "c"
+    },
+    "isolation": {
+      "isolate": "a",
+      "auto": "b"
+    },
+    "backgroundImage": {
+      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 33%,var(--g2) 100%)": "a",
+      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 66%,var(--g2) 100%)": "b",
+      "none": "c"
+    },
+    "filter": {
+      "drop-shadow(0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)))": "a",
+      "drop-shadow(0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)))": "b",
+      "drop-shadow0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "c",
+      "none": "d"
+    },
+    "float": {
+      "inline-end": "a",
+      "inline-start": "b",
+      "left": "c",
+      "none": "d",
+      "right": "e"
+    },
+    "gridAutoFlow": {
+      "column": "a",
+      "column dense": "b",
+      "dense": "c",
+      "row": "d",
+      "row dense": "e"
+    },
+    "justifyItems": {
+      "center": "a",
+      "start": "b",
+      "end": "c",
+      "stretch": "d"
+    },
+    "justifySelf": {
+      "auto": "a",
+      "center": "b",
+      "end": "c",
+      "start": "d",
+      "stretch": "e"
+    },
+    "stroke": {
+      "ButtonBorder": "a",
+      "Background": "b",
+      "Highlight": "c",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "d",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "e",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "f",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "g",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "h",
+      "rgba(0, 0, 0, 0.12)": "i"
+    },
+    "textDecoration": {
+      "none": "a",
+      "underline 1px": "b"
+    },
+    "animationFillMode": {
+      "forwards": "a",
+      "backwards": "b",
+      "both": "c",
+      "none": "d"
+    },
+    "resize": {
+      "none": "a",
+      "both": "b",
+      "horizontal": "c",
+      "vertical": "d"
+    },
+    "willChange": {
+      "transform": "a",
+      "auto": "b",
+      "contents": "c",
+      "scroll-position": "d"
+    },
+    "animationDirection": {
+      "alternate": "a",
+      "alternate-reverse": "b",
+      "normal": "c",
+      "reverse": "d"
+    },
+    "backgroundClip": {
+      "border-box": "a",
+      "content-box": "b",
+      "padding-box": "c",
+      "text": "d"
+    },
+    "breakInside": {
+      "auto": "a",
+      "avoid": "b",
+      "avoid-column": "c",
+      "avoid-page": "d"
+    },
+    "scale": {
+      "var(--scaleX, 1) var(--scaleY, 1)": "a"
+    },
+    "scrollSnapAlign": {
+      "center": "a",
+      "end": "b",
+      "none": "c",
+      "start": "d"
+    },
+    "strokeWidth": {
+      "0": "b",
+      "1": "a",
+      "2": "c"
+    },
+    "textTransform": {
+      "capitalize": "a",
+      "lowercase": "b",
+      "none": "c",
+      "uppercase": "d"
+    },
+    "textWrap": {
+      "balance": "a",
+      "nowrap": "b",
+      "pretty": "c",
+      "wrap": "d"
+    },
+    "listStyleType": {
+      "none": "a",
+      "decimal": "b",
+      "dist": "c"
+    },
+    "backgroundAttachment": {
+      "fixed": "a",
+      "local": "b",
+      "scroll": "c"
+    },
+    "backgroundOrigin": {
+      "border-box": "a",
+      "content-box": "b",
+      "padding-box": "c"
+    },
+    "backgroundSize": {
+      "auto": "a",
+      "contain": "b",
+      "cover": "c"
+    },
+    "hyphens": {
+      "auto": "a",
+      "manual": "b",
+      "none": "c"
+    },
+    "overscrollBehaviorX": {
+      "auto": "a",
+      "contain": "b",
+      "none": "c"
+    },
+    "overscrollBehaviorY": {
+      "auto": "a",
+      "contain": "b",
+      "none": "c"
+    },
+    "wordBreak": {
+      "break-all": "a",
+      "keep-all": "b",
+      "normal": "c"
+    },
+    "zIndex": {
+      "1": "b",
+      "2": "a",
+      "-1": "c"
+    },
+    "boxDecorationBreak": {
+      "clone": "a",
+      "slice": "b"
+    },
+    "textUnderlineOffset": {
+      "1px": "a"
+    },
+    "animationDuration": {
+      "150ms": "a",
+      "1000ms": "b",
+      "125ms": "c"
+    },
+    "appearance": {
+      "auto": "a",
+      "none": "b"
+    },
+    "borderCollapse": {
+      "collapse": "a",
+      "separate": "b"
+    },
+    "captionSide": {
+      "bottom": "a",
+      "top": "b"
+    },
+    "listStylePosition": {
+      "inside": "a",
+      "outside": "b"
+    },
+    "scrollBehavior": {
+      "auto": "a",
+      "smooth": "b"
+    },
+    "scrollSnapStop": {
+      "always": "a",
+      "normal": "b"
+    },
+    "tableLayout": {
+      "auto": "a",
+      "fixed": "b"
+    },
+    "transform": {
+      "rotate(-90deg)": "a",
+      "rotate(90deg)": "b",
+      "translate(-50%, -50%)": "c",
+      "translateY(-50%) translateX(-50%)": "d"
+    },
+    "-webkit-box-orient": {
+      "vertical": "a"
+    },
+    "-webkit-line-clamp": {
+      "3": "a"
+    },
+    "gridAutoRows": {
+      "min-content": "a"
+    },
+    "overflow": {
+      "hidden": "a"
+    },
+    "transitionDelay": {
+      "0ms": "a",
+      "160ms": "b"
+    },
+    "animationIterationCount": {
+      "infinite": "a"
+    }
+  },
+  "conditions": {
+    "@media not ((hover: hover) and (pointer: fine))": "a",
+    "@media (forced-colors: active)": "b",
+    ":lang(ja, ko, zh, zh-Hant, zh-Hans)": "c",
+    ":lang(ar)": "d",
+    ":lang(he)": "e",
+    ":lang(ja)": "f",
+    ":lang(ko)": "g",
+    ":lang(zh)": "h",
+    ":lang(zh-Hans, zh-CN, zh-SG)": "i",
+    ":lang(zh-hant)": "j",
+    "@media (min-width: 640px)": "k",
+    ":last-child": "l",
+    "@supports (contain-intrinsic-width: 1px)": "m",
+    ":first-child": "n",
+    ":empty": "o",
+    "@media (height < 400)": "p"
+  }
+}
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index 0ef9c2b9d2f..f04fdbaae74 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {ArbitraryProperty, Color, ColorProperty, createTheme, ExpandedProperty, MappedProperty, parseArbitraryValue, SizingProperty} from './style-macro';
 import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueMap} from './types';
 import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'};
-import {Color, createArbitraryProperty, createColorProperty, createMappedProperty, createRenamedProperty, createSizingProperty, createTheme, parseArbitraryValue} from './style-macro';
 import type * as CSS from 'csstype';
 
 interface MacroContext {
@@ -291,8 +291,8 @@ const width = {
   screen: '100vw'
 };
 
-function createSpectrumSizingProperty<T extends CSSValue>(values: PropertyValueMap<T>) {
-  return createSizingProperty(values, px => `calc(${pxToRem(px)} * var(--s2-scale))`);
+function createSpectrumSizingProperty<T extends CSSValue>(property: string, values: PropertyValueMap<T>) {
+  return new SizingProperty(property, values, px => `calc(${pxToRem(px)} * var(--s2-scale))`);
 }
 
 const margin = {
@@ -311,7 +311,7 @@ const translate = {
   ...baseSpacing,
   ...negativeSpacing,
   full: '100%'
-};
+} as const;
 
 const borderWidth = {
   0: '0px',
@@ -349,8 +349,8 @@ let gridTrackSize = (value: GridTrackSize) => {
 const transitionProperty = {
   // var(--gp) is generated by the backgroundImage property when setting a gradient.
   // It includes a list of all of the custom properties used for each color stop.
-  default: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
-  colors: 'color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke',
+  default: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter',
+  colors: 'color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke',
   opacity: 'opacity',
   shadow: 'box-shadow',
   transform: 'transform, translate, scale, rotate',
@@ -368,9 +368,7 @@ const timingFunction = {
 };
 
 // TODO: do these need tokens or are arbitrary values ok?
-let durationProperty = createArbitraryProperty((value: number | string, property) => ({[property]: typeof value === 'number' ? value + 'ms' : value}));
-
-// const colorWithAlpha = createColorProperty(color);
+let durationValue = (value: number | string) => typeof value === 'number' ? value + 'ms' : value;
 
 const fontWeightBase = {
   light: '300',
@@ -382,6 +380,22 @@ const fontWeightBase = {
   black: '900'
 } as const;
 
+const fontWeight = {
+  ...fontWeightBase,
+  heading: {
+    default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]
+  },
+  title: {
+    default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]
+  },
+  detail: {
+    default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],
+    ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]
+  }
+} as const;
+
 const i18nFonts = {
   ':lang(ar)': 'myriad-arabic, ui-sans-serif, system-ui, sans-serif',
   ':lang(he)': 'myriad-hebrew, ui-sans-serif, system-ui, sans-serif',
@@ -455,7 +469,7 @@ const fontSize = {
 export const style = createTheme({
   properties: {
     // colors
-    color: createColorProperty({
+    color: new ColorProperty('color', {
       ...color,
       accent: {
         default: colorToken('accent-content-color-default'),
@@ -495,7 +509,7 @@ export const style = createTheme({
       code: colorToken('code-color'),
       auto: autoStaticColor('self(backgroundColor, var(--s2-container-bg))')
     }),
-    backgroundColor: createColorProperty({
+    backgroundColor: new ColorProperty('backgroundColor', {
       ...color,
       accent: {
         default: weirdColorToken('accent-background-color-default'),
@@ -585,7 +599,7 @@ export const style = createTheme({
       pasteboard: weirdColorToken('background-pasteboard-color'),
       elevated: weirdColorToken('background-elevated-color')
     }),
-    borderColor: createColorProperty({
+    borderColor: new ColorProperty('borderColor', {
       ...color,
       negative: {
         default: colorToken('negative-border-color-default'),
@@ -596,17 +610,14 @@ export const style = createTheme({
       disabled: colorToken('disabled-border-color')
         // forcedColors: 'GrayText'
     }),
-    outlineColor: createColorProperty({
+    outlineColor: new ColorProperty('outlineColor', {
       ...color,
       'focus-ring': {
         default: colorToken('focus-indicator-color'),
         forcedColors: 'Highlight'
       }
     }),
-    // textDecorationColor: colorWithAlpha,
-    // accentColor: colorWithAlpha,
-    // caretColor: colorWithAlpha,
-    fill: createColorProperty({
+    fill: new ColorProperty('fill', {
       none: 'none',
       currentColor: 'currentColor',
       accent: weirdColorToken('accent-visual-color'),
@@ -636,7 +647,7 @@ export const style = createTheme({
       silver: weirdColorToken('silver-visual-color'),
       ...color
     }),
-    stroke: createColorProperty({
+    stroke: new ColorProperty('stroke', {
       none: 'none',
       currentColor: 'currentColor',
       ...color
@@ -651,22 +662,22 @@ export const style = createTheme({
     },
     rowGap: spacing,
     columnGap: spacing,
-    height: createSpectrumSizingProperty(height),
-    width: createSpectrumSizingProperty(width),
-    containIntrinsicWidth: createSpectrumSizingProperty(width),
-    containIntrinsicHeight: createSpectrumSizingProperty(height),
-    minHeight: createSpectrumSizingProperty(height),
-    maxHeight: createSpectrumSizingProperty({
+    height: createSpectrumSizingProperty('height', height),
+    width: createSpectrumSizingProperty('width', width),
+    containIntrinsicWidth: createSpectrumSizingProperty('containIntrinsicWidth', width),
+    containIntrinsicHeight: createSpectrumSizingProperty('containIntrinsicHeight', height),
+    minHeight: createSpectrumSizingProperty('minHeight', height),
+    maxHeight: createSpectrumSizingProperty('maxHeight', {
       ...height,
       none: 'none'
     }),
-    minWidth: createSpectrumSizingProperty(width),
-    maxWidth: createSpectrumSizingProperty({
+    minWidth: createSpectrumSizingProperty('minWidth', width),
+    maxWidth: createSpectrumSizingProperty('maxWidth', {
       ...width,
       none: 'none'
     }),
-    borderStartWidth: createRenamedProperty('borderInlineStartWidth', borderWidth),
-    borderEndWidth: createRenamedProperty('borderInlineEndWidth', borderWidth),
+    borderStartWidth: new MappedProperty('borderInlineStartWidth', borderWidth),
+    borderEndWidth: new MappedProperty('borderInlineEndWidth', borderWidth),
     borderTopWidth: borderWidth,
     borderBottomWidth: borderWidth,
     borderStyle: ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'] as const,
@@ -675,44 +686,44 @@ export const style = createTheme({
       1: '1',
       2: '2'
     },
-    marginStart: createRenamedProperty('marginInlineStart', margin),
-    marginEnd: createRenamedProperty('marginInlineEnd', margin),
+    marginStart: new MappedProperty('marginInlineStart', margin),
+    marginEnd: new MappedProperty('marginInlineEnd', margin),
     marginTop: margin,
     marginBottom: margin,
-    paddingStart: createRenamedProperty('paddingInlineStart', spacing),
-    paddingEnd: createRenamedProperty('paddingInlineEnd', spacing),
+    paddingStart: new MappedProperty('paddingInlineStart', spacing),
+    paddingEnd: new MappedProperty('paddingInlineEnd', spacing),
     paddingTop: spacing,
     paddingBottom: spacing,
-    scrollMarginStart: createRenamedProperty('scrollMarginInlineStart', baseSpacing),
-    scrollMarginEnd: createRenamedProperty('scrollMarginInlineEnd', baseSpacing),
+    scrollMarginStart: new MappedProperty('scrollMarginInlineStart', baseSpacing),
+    scrollMarginEnd: new MappedProperty('scrollMarginInlineEnd', baseSpacing),
     scrollMarginTop: baseSpacing,
     scrollMarginBottom: baseSpacing,
-    scrollPaddingStart: createRenamedProperty('scrollPaddingInlineStart', baseSpacing),
-    scrollPaddingEnd: createRenamedProperty('scrollPaddingInlineEnd', baseSpacing),
+    scrollPaddingStart: new MappedProperty('scrollPaddingInlineStart', baseSpacing),
+    scrollPaddingEnd: new MappedProperty('scrollPaddingInlineEnd', baseSpacing),
     scrollPaddingTop: baseSpacing,
     scrollPaddingBottom: baseSpacing,
     textIndent: baseSpacing,
-    translateX: createMappedProperty(value => ({
-      '--translateX': value,
+    translateX: new ExpandedProperty<keyof typeof translate>(['--translateX', 'translate'], value => ({
+      '--translateX': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
     }), translate),
-    translateY: createMappedProperty(value => ({
-      '--translateY': value,
+    translateY: new ExpandedProperty<keyof typeof translate>(['--translateY', 'translate'], value => ({
+      '--translateY': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
     }), translate),
-    rotate: createArbitraryProperty((value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`, property) => ({[property]: typeof value === 'number' ? `${value}deg` : value})),
-    scaleX: createArbitraryProperty<number>(value => ({
-      '--scaleX': value,
+    rotate: new ArbitraryProperty('rotate', (value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`) => typeof value === 'number' ? `${value}deg` : value),
+    scaleX: new ExpandedProperty<number>(['--scaleX', 'scale'], value => ({
+      '--scaleX': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
-    scaleY: createArbitraryProperty<number>(value => ({
-      '--scaleY': value,
+    scaleY: new ExpandedProperty<number>(['--scaleY', 'scale'], value => ({
+      '--scaleY': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
-    transform: createArbitraryProperty<string>(),
+    transform: new ArbitraryProperty<string>('transform'),
     position: ['absolute', 'fixed', 'relative', 'sticky', 'static'] as const,
-    insetStart: createRenamedProperty('insetInlineStart', inset),
-    insetEnd: createRenamedProperty('insetInlineEnd', inset),
+    insetStart: new MappedProperty('insetInlineStart', inset),
+    insetEnd: new MappedProperty('insetInlineEnd', inset),
     top: inset,
     left: inset,
     bottom: inset,
@@ -736,32 +747,14 @@ export const style = createTheme({
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
     fontSize,
-    fontWeight: createMappedProperty((value, property) => {
-      if (property === 'fontWeight') {
-        return {
-          // Set font-variation-settings in addition to font-weight to work around typekit issue.
-          fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
-          fontWeight: value as any,
-          fontSynthesisWeight: 'none'
-        };
-      }
-
-      return {[property]: value};
-    }, {
-      ...fontWeightBase,
-      heading: {
-        default: fontWeightBase[getToken('heading-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('heading-cjk-font-weight') as keyof typeof fontWeightBase]
-      },
-      title: {
-        default: fontWeightBase[getToken('title-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('title-cjk-font-weight') as keyof typeof fontWeightBase]
-      },
-      detail: {
-        default: fontWeightBase[getToken('detail-sans-serif-font-weight') as keyof typeof fontWeightBase],
-        ':lang(ja, ko, zh, zh-Hant, zh-Hans)': fontWeightBase[getToken('detail-cjk-font-weight') as keyof typeof fontWeightBase]
-      }
-    }),
+    fontWeight: new ExpandedProperty<keyof typeof fontWeight>(['fontWeight', 'fontVariationSettings', 'fontSynthesisWeight'], (value) => {
+      return {
+        // Set font-variation-settings in addition to font-weight to work around typekit issue.
+        fontVariationSettings: value === 'inherit' ? 'inherit' : `"wght" ${value}`,
+        fontWeight: value as any,
+        fontSynthesisWeight: 'none'
+      };
+    }, fontWeight),
     lineHeight: {
       // See https://spectrum.corp.adobe.com/page/typography/#Line-height
       ui: {
@@ -794,16 +787,16 @@ export const style = createTheme({
     textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'] as const,
     textAlign: ['start', 'center', 'end', 'justify'] as const,
     verticalAlign: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'] as const,
-    textDecoration: createMappedProperty((value) => ({
+    textDecoration: new ExpandedProperty<'underline' | 'overline' | 'line-through' | 'none'>(['textDecoration', 'textUnderlineOffset'], (value) => ({
       textDecoration: value === 'none' ? 'none' : `${value} ${getToken('text-underline-thickness')}`,
       textUnderlineOffset: value === 'underline' ? getToken('text-underline-gap') : undefined
-    }), ['underline', 'overline', 'line-through', 'none'] as const),
+    })),
     textOverflow: ['ellipsis', 'clip'] as const,
-    lineClamp: createArbitraryProperty((value: number) => ({
+    lineClamp: new ExpandedProperty<number>(['overflow', 'display', '-webkit-box-orient', '-webkit-line-clamp'], (value) => ({
       overflow: 'hidden',
       display: '-webkit-box',
       '-webkit-box-orient': 'vertical',
-      '-webkit-line-clamp': value
+      '-webkit-line-clamp': String(value)
     })),
     hyphens: ['none', 'manual', 'auto'] as const,
     whiteSpace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] as const,
@@ -824,18 +817,18 @@ export const style = createTheme({
       dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`,
       none: 'none'
     },
-    borderTopStartRadius: createRenamedProperty('borderStartStartRadius', radius),
-    borderTopEndRadius: createRenamedProperty('borderStartEndRadius', radius),
-    borderBottomStartRadius: createRenamedProperty('borderEndStartRadius', radius),
-    borderBottomEndRadius: createRenamedProperty('borderEndEndRadius', radius),
+    borderTopStartRadius: new MappedProperty('borderStartStartRadius', radius),
+    borderTopEndRadius: new MappedProperty('borderStartEndRadius', radius),
+    borderBottomStartRadius: new MappedProperty('borderEndStartRadius', radius),
+    borderBottomEndRadius: new MappedProperty('borderEndEndRadius', radius),
     forcedColorAdjust: ['auto', 'none'] as const,
     colorScheme: ['light', 'dark', 'light dark'] as const,
-    backgroundImage: createArbitraryProperty<string | [LinearGradient]>((value, property) => {
+    backgroundImage: new ExpandedProperty<string | [LinearGradient]>(['backgroundImage', '--g0', '--g1', '--g2', '--gp'], (value) => {
       if (typeof value === 'string') {
-        return {[property]: value};
+        return {backgroundImage: value};
       } else if (Array.isArray(value) && value[0]?.type === 'linear-gradient') {
         let values: CSSProperties = {
-          [property]: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i) => `var(--g${i}) ${stop}%`)})`
+          backgroundImage: `linear-gradient(${value[0].angle}, ${value[0].stops.map(([, stop], i) => `var(--g${i}) ${stop}%`)})`
         };
 
         // Create a CSS var for each color stop so the gradient can be transitioned.
@@ -862,22 +855,22 @@ export const style = createTheme({
     backgroundOrigin: ['border-box', 'padding-box', 'content-box'] as const,
     backgroundBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'] as const,
     mixBlendMode: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter'] as const,
-    opacity: createArbitraryProperty<number>(),
+    opacity: new ArbitraryProperty<number>('opacity'),
 
     outlineStyle: ['none', 'solid', 'dashed', 'dotted', 'double', 'inset'] as const,
-    outlineOffset: createArbitraryProperty<number>((v, property) => ({[property]: `${v}px`})),
+    outlineOffset: new ArbitraryProperty<number>('outlineOffset', v => `${v}px`),
     outlineWidth: borderWidth,
 
-    transition: createRenamedProperty('transitionProperty', transitionProperty),
-    transitionDelay: durationProperty,
-    transitionDuration: durationProperty,
+    transition: new MappedProperty('transitionProperty', transitionProperty),
+    transitionDelay: new ArbitraryProperty('transitionDelay', durationValue),
+    transitionDuration: new ArbitraryProperty('transitionDuration', durationValue),
     transitionTimingFunction: timingFunction,
-    animation: createArbitraryProperty((value: string, property) => ({[property === 'animation' ? 'animationName' : property]: value})),
-    animationDuration: durationProperty,
-    animationDelay: durationProperty,
+    animation: new ArbitraryProperty<string>('animationName'),
+    animationDuration: new ArbitraryProperty('animationDuration', durationValue),
+    animationDelay: new ArbitraryProperty('animationDelay', durationValue),
     animationDirection: ['normal', 'reverse', 'alternate', 'alternate-reverse'] as const,
     animationFillMode: ['none', 'forwards', 'backwards', 'both'] as const,
-    animationIterationCount: createArbitraryProperty<string>(),
+    animationIterationCount: new ArbitraryProperty<number | string>('animationIterationCount'),
     animationTimingFunction: timingFunction,
 
     // layout
@@ -890,18 +883,18 @@ export const style = createTheme({
     justifySelf: ['auto', 'start', 'end', 'center', 'stretch'] as const,
     flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'] as const,
     flexWrap: ['wrap', 'wrap-reverse', 'nowrap'] as const,
-    flexShrink: createArbitraryProperty<CSS.Property.FlexShrink>(),
-    flexGrow: createArbitraryProperty<CSS.Property.FlexGrow>(),
-    gridColumnStart: createArbitraryProperty<CSS.Property.GridColumnStart>(),
-    gridColumnEnd: createArbitraryProperty<CSS.Property.GridColumnEnd>(),
-    gridRowStart: createArbitraryProperty<CSS.Property.GridRowStart>(),
-    gridRowEnd: createArbitraryProperty<CSS.Property.GridRowEnd>(),
+    flexShrink: new ArbitraryProperty<CSS.Property.FlexShrink>('flexShrink'),
+    flexGrow: new ArbitraryProperty<CSS.Property.FlexGrow>('flexGrow'),
+    gridColumnStart: new ArbitraryProperty<CSS.Property.GridColumnStart>('gridColumnStart'),
+    gridColumnEnd: new ArbitraryProperty<CSS.Property.GridColumnEnd>('gridColumnEnd'),
+    gridRowStart: new ArbitraryProperty<CSS.Property.GridRowStart>('gridRowStart'),
+    gridRowEnd: new ArbitraryProperty<CSS.Property.GridRowEnd>('gridRowEnd'),
     gridAutoFlow: ['row', 'column', 'dense', 'row dense', 'column dense'] as const,
-    gridAutoRows: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
-    gridAutoColumns: createArbitraryProperty((value: GridTrackSize, property) => ({[property]: gridTrackSize(value)})),
-    gridTemplateColumns: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
-    gridTemplateRows: createArbitraryProperty((value: GridTrack, property) => ({[property]: gridTrack(value)})),
-    gridTemplateAreas: createArbitraryProperty((value: readonly string[], property) => ({[property]: value.map(v => `"${v}"`).join('')})),
+    gridAutoRows: new ArbitraryProperty('gridAutoRows', gridTrackSize),
+    gridAutoColumns: new ArbitraryProperty('gridAutoColumns', gridTrackSize),
+    gridTemplateColumns: new ArbitraryProperty('gridTemplateColumns', gridTrack),
+    gridTemplateRows: new ArbitraryProperty('gridTemplateRows', gridTrack),
+    gridTemplateAreas: new ArbitraryProperty('gridTemplateAreas', (value: readonly string[]) => value.map(v => `"${v}"`).join('')),
     float: ['inline-start', 'inline-end', 'right', 'left', 'none'] as const,
     clear: ['inline-start', 'inline-end', 'left', 'right', 'both', 'none'] as const,
     contain: ['none', 'strict', 'content', 'size', 'inline-size', 'layout', 'style', 'paint'] as const,
@@ -946,7 +939,7 @@ export const style = createTheme({
     overscrollBehaviorX: ['auto', 'contain', 'none'] as const,
     overscrollBehaviorY: ['auto', 'contain', 'none'] as const,
     scrollBehavior: ['auto', 'smooth'] as const,
-    order: createArbitraryProperty<number>(),
+    order: new ArbitraryProperty<number>('order'),
 
     pointerEvents: ['none', 'auto'] as const,
     touchAction: ['auto', 'none', 'pan-x', 'pan-y', 'manipulation', 'pinch-zoom'] as const,
@@ -963,11 +956,9 @@ export const style = createTheme({
     objectFit: ['contain', 'cover', 'fill', 'none', 'scale-down'] as const,
     objectPosition: ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top'] as const,
     willChange: ['auto', 'scroll-position', 'contents', 'transform'] as const,
-    zIndex: createArbitraryProperty<number>(),
+    zIndex: new ArbitraryProperty<number>('zIndex'),
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    disableTapHighlight: createArbitraryProperty((_value: true) => ({
-      '-webkit-tap-highlight-color': 'rgba(0,0,0,0)'
-    })),
+    disableTapHighlight: new ArbitraryProperty('-webkit-tap-highlight-color', (_value: true) => 'rgba(0,0,0,0)'),
     unicodeBidi: ['normal', 'embed', 'bidi-override', 'isolate', 'isolate-override', 'plaintext'] as const
   },
   shorthands: {
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 91caaca1bc9..292716b145d 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -10,84 +10,115 @@
  * governing permissions and limitations under the License.
  */
 
-import type {Condition, CSSProperties, CSSValue, CustomValue, PropertyFunction, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
+import type {Condition, CSSProperties, CSSValue, CustomValue, Property, PropertyValueDefinition, PropertyValueMap, RenderProps, ShorthandProperty, StyleFunction, StyleValue, Theme, ThemeProperties, Value} from './types';
+import * as propertyInfo from './properties.json';
 
-let defaultArbitraryProperty = <T>(value: T, property: string) => ({[property]: value} as CSSProperties);
-export function createArbitraryProperty<T>(fn: (value: T, property: string) => CSSProperties = defaultArbitraryProperty): PropertyFunction<T> {
-  return (value, property) => {
-    let selector = Array.isArray(value) ? generateArbitraryValueSelector(value.map(v => JSON.stringify(v)).join('')) : generateArbitraryValueSelector(JSON.stringify(value));
-    return {default: [fn(value, property), selector]};
-  };
-}
+export class ArbitraryProperty<T extends Value> implements Property<T> {
+  property: string;
+  toCSS: (value: T) => CSSValue;
 
-function recursiveValues(obj: object): string[] {
-  return Object.values(obj).flatMap(v => typeof v === 'object' ? recursiveValues(v) : [v]);
+  constructor(property: string, toCSS?: (value: T) => CSSValue) {
+    this.property = property;
+    this.toCSS = toCSS || ((value) => String(value));
+  }
+
+  get cssProperties(): string[] {
+    return [this.property];
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<Value> {
+    return this.toCSS(value);
+  }
+
+  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<Value>): PropertyValueDefinition<[CSSProperties]> {
+    return mapConditionalValue(value, value => [{[customProperty || this.property]: String(value)}]);
+  }
 }
 
-export function createMappedProperty<T extends CSSValue>(fn: (value: string, property: string) => CSSProperties, values: PropertyValueMap<T> | string[]): PropertyFunction<T> {
-  let valueMap = createValueLookup(Array.isArray(values) ? values : recursiveValues(values));
-  return (value, property) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [fn(v[0], property), v[1]]};
-    }
+export class MappedProperty<T extends CSSValue> extends ArbitraryProperty<T> implements Property<T> {
+  mapping: PropertyValueMap<T> | string[];
 
-    let val = Array.isArray(values) ? value : values[String(value)];
-    return mapConditionalValue(val, value => {
-      return [fn(value, property), valueMap.get(value)!];
-    });
-  };
+  constructor(property: string, mapping: PropertyValueMap<T> | string[]) {
+    super(property);
+    this.mapping = mapping;
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<Value> {
+    if (Array.isArray(this.mapping)) {
+      if (!this.mapping.includes(String(value))) {
+        throw new Error('Invalid style value: ' + value);
+      }
+      return value;
+    } else {
+      let res = this.mapping[String(value)];
+      if (res == null) {
+        throw new Error('Invalid style value: ' + value);
+      }
+      return res;
+    }
+  }
 }
 
-export function createRenamedProperty<T extends CSSValue>(name: string, values: PropertyValueMap<T> | string[]): PropertyFunction<T> {
-  return createMappedProperty((value, property) => ({[property.startsWith('--') ? property : name]: value}), values);
+export type Color<C extends string> = C | `${string}/${number}`;
+export class ColorProperty<C extends string> extends MappedProperty<C> implements Property<Color<C>> {
+  toCSSValue(value: Color<C>): PropertyValueDefinition<Value> {
+    let [color, opacity] = value.split('/');
+    return mapConditionalValue(this.mapping[color], value => {
+      return opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
+    });
+  }
 }
 
-export function createSizingProperty<T extends CSSValue>(values: PropertyValueMap<T>, fn: (value: number) => string): PropertyFunction<T | (number & {})> {
-  let valueMap = createValueLookup(Array.isArray(values) ? values : recursiveValues(values));
-  return (value, property) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [{[property]: v[0]}, v[1]]};
-    }
+export class SizingProperty<T extends CSSValue> extends MappedProperty<T> implements Property<T | number> {
+  numberToCSS: (value: number) => string;
 
-    let val = values[String(value)];
-    if (val != null) {
-      return mapConditionalValue(val, value => {
-        return [{[property]: value}, valueMap.get(value)!];
-      });
-    }
+  constructor(property: string, mapping: PropertyValueMap<T> | string[], numberToCSS: (value: number) => string) {
+    super(property, mapping);
+    this.numberToCSS = numberToCSS;
+  }
 
+  toCSSValue(value: T | number): PropertyValueDefinition<Value> {
     if (typeof value === 'number') {
-      let cssValue = value === 0 ? '0px' : fn(value);
-      return {default: [{[property]: cssValue}, generateName(value + valueMap.size)]};
+      return value === 0 ? '0px' : this.numberToCSS(value);
     }
 
-    throw new Error('Invalid sizing value: ' + value);
-  };
+    return super.toCSSValue(value);
+  }
 }
 
-export type Color<C extends string> = C | `${string}/${number}`;
-export function createColorProperty<C extends string>(colors: PropertyValueMap<C>, property?: keyof CSSProperties): PropertyFunction<Color<C>> {
-  let valueMap = createValueLookup(Object.values(colors).flatMap((v: any) => typeof v === 'object' ? Object.values(v) : [v]));
-  return (value: Color<C>, key: string) => {
-    let v = parseArbitraryValue(value);
-    if (v) {
-      return {default: [{[property || key]: v[0]}, v[1]]};
+export class ExpandedProperty<T extends Value> implements Property<T> {
+  cssProperties: string[];
+  mapping: PropertyValueMap<CSSValue> | null;
+  expand: (v: T | CSSValue) => CSSProperties;
+
+  constructor(properties: string[], expand: (v: T | CSSValue) => CSSProperties, mapping?: PropertyValueMap<CSSValue>) {
+    this.cssProperties = properties;
+    this.expand = expand;
+    this.mapping = mapping || null;
+  }
+
+  toCSSValue(value: T): PropertyValueDefinition<Value> {
+    if (!this.mapping) {
+      return value;
     }
 
-    let [color, opacity] = value.split('/');
-    let c = colors[color];
-    return mapConditionalValue(c, value => {
-      let css = opacity ? `rgb(from ${value} r g b / ${opacity}%)` : value;
-      let selector = valueMap.get(value)! + (opacity ? opacity.replace('.', '-') : '');
-      return [{[property || key]: css}, selector];
-    });
-  };
+    let res = this.mapping[String(value)];
+    if (res == null) {
+      throw new Error('Invalid style value: ' + value);
+    }
+    return res;
+  }
+
+  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<T>): PropertyValueDefinition<[CSSProperties]> {
+    if (customProperty) {
+      throw new Error('Style properties that expand into multiple CSS properties cannot be set as CSS variables.');
+    }
+    return mapConditionalValue(value, value => [this.expand(value)]);
+  }
 }
 
 function mapConditionalValue<T, U>(value: PropertyValueDefinition<T>, fn: (value: T) => U): PropertyValueDefinition<U> {
-  if (typeof value === 'object') {
+  if (typeof value === 'object' && !Array.isArray(value)) {
     let res: PropertyValueDefinition<U> = {};
     for (let condition in value) {
       res[condition] = mapConditionalValue((value as any)[condition], fn);
@@ -114,23 +145,29 @@ function mapConditionalShorthand<T, C extends string, R extends RenderProps<stri
   }
 }
 
-function createValueLookup(values: Array<CSSValue>, atStart = false) {
-  let map = new Map<CSSValue, string>();
-  for (let value of values) {
-    if (!map.has(value)) {
-      map.set(value, generateName(map.size, atStart));
-    }
+export function parseArbitraryValue(value: Value): string | undefined {
+  if (typeof value === 'string' && value.startsWith('--')) {
+    return `var(${value})`;
+  } else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
+    return value.slice(1, -1);
   }
-  return map;
 }
 
-export function parseArbitraryValue(value: string | number): string[] | undefined {
-  if (typeof value === 'string' && value.startsWith('--')) {
-    return [`var(${value})`, generateArbitraryValueSelector(value)];
-  } else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
-    let s = generateArbitraryValueSelector(value.slice(1, -1));
-    return [value.slice(1, -1), s];
+function shortCSSPropertyName(property: string) {
+  return propertyInfo.properties[property] ?? generateArbitraryValueSelector(property, true);
+}
+
+function classNamePrefix(property: string, cssProperty: string) {
+  let className = propertyInfo.properties[cssProperty];
+  if (className && property === '--' + className) {
+    return '-' + className + '_-';
   }
+
+  if (className && !property.startsWith('--')) {
+    return className;
+  }
+
+  return '-' + generateArbitraryValueSelector(property, true) + '-';
 }
 
 interface MacroContext {
@@ -138,13 +175,12 @@ interface MacroContext {
 }
 
 export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemeProperties<T>, 'default' | Extract<keyof T['conditions'], string>> {
-  let themePropertyMap = createValueLookup(Object.keys(theme.properties), true);
-  let themeConditionMap = createValueLookup(Object.keys(theme.conditions), true);
-  let propertyFunctions = new Map(Object.entries(theme.properties).map(([k, v]) => {
-    if (typeof v === 'function') {
-      return [k, v];
+  let properties = new Map<string, Property<any>>(Object.entries(theme.properties).map(([k, v]) => {
+    if (!Array.isArray(v) && v.cssProperties) {
+      return [k, v as Property<any>];
     }
-    return [k, createMappedProperty((value, p) => ({[p]: value}), v) as PropertyFunction<Value>];
+
+    return [k, new MappedProperty(k, v as any)];
   }));
 
   let dependencies = new Set<string>();
@@ -160,13 +196,13 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     }
 
     // Generate rules for each property.
-    let rules = new Map<string, Rule[]>();
+    let rules = new Map<string, Rule>();
     let values =  new Map();
     dependencies.clear();
-    let usedPriorities = 1;
+    let usedPriorities = 0;
     let setRules = (key: string, value: [number, Rule[]]) => {
       usedPriorities = Math.max(usedPriorities, value[0]);
-      rules.set(key, value[1]);
+      rules.set(key, new GroupRule(value[1]));
     };
 
     hasConditions = false;
@@ -210,7 +246,8 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         if (!(dep in theme.properties)) {
           throw new Error(`Unknown dependency ${dep}`);
         }
-        let name = `--${themePropertyMap.get(dep)}`;
+        let prop = properties.get(dep)!;
+        let name = `--${shortCSSPropertyName(prop.cssProperties[0])}`;
         // Could potentially use @property to prevent the var from inheriting in children.
         setRules(name, compileValue(name, dep, value));
         setRules(dep, compileValue(dep, dep, name));
@@ -218,10 +255,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     }
     dependencies.clear();
 
-    // Prevent all global styles from leaking into this element.
-    // The :not(#a#b) raises the specificity of the selector by 2 ids,
-    // which can never occur on a real element, and will win over other
-    // selectors such as class and element selectors.
     let css = '';
 
     // Declare layers for each priority ahead of time so the order is always correct.
@@ -241,28 +274,46 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     // Also generate a variable for each overridable property that overlaps with the style definition. If those are defined,
     // the defaults from the style definition are omitted.
     let allowedOverridesSet = new Set<string>();
-    let js = 'let rules = " .";\n';
+    let js = 'let rules = " ";\n';
     if (allowedOverrides?.length) {
       for (let property of allowedOverrides) {
-        if (themePropertyMap.has(property as string)) {
-          allowedOverridesSet.add(themePropertyMap.get(property as string)!);
+        let shorthand = theme.shorthands[property];
+        let props = Array.isArray(shorthand) ? shorthand : [property];
+        for (let property of props) {
+          let prop = properties.get(property);
+          if (!prop) {
+            throw new Error(`Invalid property ${property} in allowedOverrides`);
+          }
+          for (let property of prop.cssProperties) {
+            allowedOverridesSet.add(property);
+          }
         }
       }
 
-      js += `let matches = (overrides || '').match(/(?:^|\\s)(?:${[...allowedOverridesSet].join('|')})[^\\s]+/g) || [];\n`;
-      js += 'rules += matches.join(\'\');\n';
       let loop = '';
       for (let property of rules.keys()) {
-        let themeProperty = themePropertyMap.get(property);
-        if (themeProperty && allowedOverridesSet.has(themeProperty)) {
-          js += `let $${themeProperty} = false;\n`;
-          loop += `  if (/^\\s*${themeProperty}/.test(p)) $${themeProperty} = true;\n`;
+        let prop = properties.get(property);
+        if (prop) {
+          for (let property of prop.cssProperties) {
+            if (property && allowedOverridesSet.has(property)) {
+              let selector = classNamePrefix(property, property);
+              let p = property.replace('--', '__');
+              js += `let ${p} = false;\n`;
+              loop += `  if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
+            }
+          }
         }
       }
+
+      let regex = `/(?:^|\\s)(${[...allowedOverridesSet].map(p => classNamePrefix(p, p)).join('|')})[^\\s]+/g`;
       if (loop) {
+        js += `let matches = (overrides || '').matchAll(${regex});\n`;
         js += 'for (let p of matches) {\n';
         js += loop;
+        js += '  rules += p[0];\n';
         js += '}\n';
+      } else {
+        js += `rules += ((overrides || '').match(${regex}) || []).join('')\n`;
       }
     }
 
@@ -270,25 +321,13 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
     let isStatic = !(hasConditions || allowedOverrides);
     let className = '';
     let rulesByLayer = new Map<string, string[]>();
-    for (let [property, propertyRules] of rules) {
-      if (isStatic) {
-        className += getStaticClassName(propertyRules);
-      } else {
-        let themeProperty = themePropertyMap.get(property);
-        let allowsOverrides = themeProperty && allowedOverridesSet.has(themeProperty);
-        if (allowsOverrides) {
-          // Omit the value if an override was passed in.
-          js += `if (!$${themeProperty}) {\n`;
-        }
-        js += printJS(propertyRules) + '\n';
-        if (allowsOverrides) {
-          js += '}\n';
-        }
-      }
-      for (let rule of propertyRules) {
-        printRule(rule, rulesByLayer);
-      }
+    let rootRule = new GroupRule([...rules.values()]);
+    if (isStatic) {
+      className += rootRule.getStaticClassName();
+    } else {
+      js += rootRule.toJS(allowedOverridesSet) + '\n';
     }
+    rootRule.toCSS(rulesByLayer);
 
     for (let [layer, rules] of rulesByLayer) {
       css += `@layer ${layerName(layer)} {\n`;
@@ -352,7 +391,7 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         // The @layer order in the generated CSS will ensure that it overrides classes applied by runtime conditions.
         let isCSSCondition = condition in theme.conditions || /^[@:]/.test(condition);
         if (!wasCSSCondition && isCSSCondition && rules.length) {
-          rules = [{prelude: '', condition: '', layer: '', body: rules}];
+          rules = [new GroupRule(rules)];
         }
         wasCSSCondition = isCSSCondition;
 
@@ -390,56 +429,42 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
 
   function compileCondition(conditions: Set<string>, condition: string, priority: number, rules: Rule[]): Rule[] {
     if (condition === 'default' || conditions.has(condition)) {
-      return [{prelude: '', condition: '', layer: '', body: rules}];
+      return [new GroupRule(rules)];
     }
 
     if (condition in theme.conditions || /^[@:]/.test(condition)) {
       // Conditions starting with : are CSS pseudo classes. Nest them inside the parent rule.
       let prelude = theme.conditions[condition] || condition;
       if (prelude.startsWith(':')) {
-        return [{
-          prelude: '',
-          layer: generateName(priority, true),
-          body: rules.map(rule => nestRule(rule, prelude)),
-          condition: ''
-        }];
+        for (let rule of rules) {
+          rule.addPseudo(prelude);
+        }
+
+        return [new GroupRule(rules, generateName(priority, true))];
       }
 
       // Otherwise, wrap the rule in the condition (e.g. @media).
-      return [{
-        // Top level layer is based on the priority of the rule, not the condition.
-        // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
-        layer: `${generateName(priority, true)}.${themeConditionMap.get(condition) || generateArbitraryValueSelector(condition, true)}`,
-        prelude,
-        body: rules,
-        condition: ''
-      }];
+      // Top level layer is based on the priority of the rule, not the condition.
+      // Also group in a sub-layer based on the condition so that lightningcss can more effectively deduplicate rules.
+      let layer = `${generateName(priority, true)}.${propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition, true)}`;
+      return [new AtRule(rules, prelude, layer)];
     }
 
     hasConditions = true;
-    return [{prelude: '', layer: '', condition, body: rules}];
+    return [new ConditionalRule(rules, condition)];
   }
 
   function compileRule(property: string, themeProperty: string, value: Value, priority: number, conditions: Set<string>, skipConditions: Set<string>): [number, Rule[]] {
-    // Generate selector. This consists of three parts:
-    // 1. Property. For custom properties we use a hash. For theme properties, we use the index within the theme.
-    // 2. Conditions. This uses the index within the theme.
-    // 3. Value. The index in the theme, or a hash for arbitrary values.
-    let prelude = '.';
-    if (property.startsWith('--')) {
-      // Include both custom property name and theme property in case the same var is reused between multiple theme properties.
-      prelude += generateArbitraryValueSelector(property, true) + '_' + themePropertyMap.get(themeProperty) + '-';
-    } else {
-      prelude += themePropertyMap.get(themeProperty);
-    }
-
-    let propertyFunction = propertyFunctions.get(themeProperty);
+    let propertyFunction = properties.get(themeProperty);
     if (propertyFunction) {
       // Expand value to conditional CSS values, and then to rules.
-      let res = propertyFunction(value, property);
-      return conditionalToRules(res, priority, conditions, skipConditions, (value, priority, conditions) => {
-        let [obj, p] = value;
-        let body = '';
+      let arbitrary = parseArbitraryValue(value);
+      let cssValue = arbitrary ? arbitrary : propertyFunction.toCSSValue(value);
+      let cssProperties = propertyFunction.toCSSProperties(property.startsWith('--') ? property : null, cssValue);
+
+      return conditionalToRules(cssProperties, priority, conditions, skipConditions, (value, priority, conditions) => {
+        let [obj] = value;
+        let rules: Rule[] = [];
         for (let key in obj) {
           let k = key as any;
           let value = obj[k];
@@ -449,26 +474,39 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
           if (typeof value === 'string') {
             // Replace self() references with variables and track the dependencies.
             value = value.replace(/self\(([a-zA-Z]+)/g, (_, v) => {
+              let prop = properties.get(v);
+              if (!prop) {
+                throw new Error(`self(${v}) is invalid. ${v} is not a known property.`);
+              }
+              let cssProperties = prop.cssProperties;
+              if (cssProperties.length !== 1) {
+                throw new Error(`self(${v}) is not supported. ${v} expands to multiple CSS properties.`);
+              }
               dependencies.add(v);
-              return `var(--${themePropertyMap.get(v)}`;
+              return `var(--${shortCSSPropertyName(cssProperties[0])}`;
             });
           }
-          body += `${kebab(key)}: ${value};`;
-        }
 
-        let selector = prelude;
-        if (conditions.size > 0) {
-          for (let condition of conditions) {
-            selector += themeConditionMap.get(condition) || generateArbitraryValueSelector(condition);
+          // Generate selector. This consists of three parts: property, conditions, value.
+          let cssProperty = key;
+          if (property.startsWith('--')) {
+            cssProperty = propertyFunction.cssProperties[0];
           }
-        }
 
-        let rules: Rule[] = [{
-          condition: '',
-          layer: '',
-          prelude: selector + p,
-          body
-        }];
+          let className = classNamePrefix(key, cssProperty);
+          if (conditions.size > 0) {
+            for (let condition of conditions) {
+              className += propertyInfo.conditions[theme.conditions[condition] || condition] || generateArbitraryValueSelector(condition);
+            }
+          }
+
+          if (cssProperty !== key) {
+            className += shortCSSPropertyName(cssProperty);
+          }
+
+          className += propertyInfo.values[cssProperty]?.[String(value)] ?? generateArbitraryValueSelector(String(value));
+          rules.push(new StyleRule(className, key, String(value)));
+        }
 
         return [0, rules];
       });
@@ -478,24 +516,6 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
   }
 }
 
-function nestRule(rule: Rule, prelude: string): Rule {
-  if (Array.isArray(rule.body)) {
-    return {
-      prelude: rule.prelude,
-      layer: rule.layer,
-      body: rule.body.map(r => nestRule(r, prelude)),
-      condition: rule.condition
-    };
-  } else {
-    return {
-      prelude: rule.prelude,
-      layer: rule.layer,
-      body: [{...rule, prelude: '&' + prelude}],
-      condition: ''
-    };
-  }
-}
-
 function kebab(property: string) {
   if (property.startsWith('--')) {
     return property;
@@ -503,13 +523,6 @@ function kebab(property: string) {
   return property.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`);
 }
 
-interface Rule {
-  prelude: string,
-  layer: string,
-  condition: string,
-  body: string | Rule[]
-}
-
 // Generate a class name from a number, e.g. index within the theme.
 // This maps to an alphabet containing lower case letters, upper case letters, and numbers.
 // For numbers larger than 62, an underscore is prepended.
@@ -535,11 +548,26 @@ function generateName(index: number, atStart = false): string {
 
 // For arbitrary values, we use a hash of the string to generate the class name.
 function generateArbitraryValueSelector(v: string, atStart = false) {
-  let c = hash(v).toString(36);
+  let c = toBase62(hash(v));
   if (atStart && /^[0-9]/.test(c)) {
     c = `_${c}`;
   }
-  return `-${c}`;
+  return c;
+}
+
+function toBase62(value: number) {
+  if (value === 0) {
+    return generateName(value);
+  }
+
+  let res = '';
+  while (value) {
+    let remainder = value % 62;
+    res += generateName(remainder);
+    value = Math.floor((value - remainder) / 62);
+  }
+
+  return res;
 }
 
 // djb2 hash function.
@@ -558,75 +586,146 @@ function layerName(name: string) {
   return `_.${name}`;
 }
 
-function printRule(rule: Rule, rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer = 'a') {
-  if (rule.prelude) {
-    preludes.push(rule.prelude);
+interface Rule {
+  addPseudo(prelude: string): void,
+  getStaticClassName(): string,
+  toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string): void,
+  toJS(allowedOverridesSet: Set<string>, indent?: string): string
+}
+
+/** A CSS style rule. */
+class StyleRule implements Rule {
+  className: string;
+  pseudos: string;
+  property: string;
+  value: string;
+
+  constructor(className: string, property: string, value: string) {
+    this.className = className;
+    this.pseudos = '';
+    this.property = property;
+    this.value = value;
   }
 
-  if (typeof rule.body === 'string') {
+  addPseudo(prelude: string) {
+    this.pseudos += prelude;
+  }
+
+  getStaticClassName(): string {
+    return ' ' + this.className;
+  }
+
+  toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer = 'a') {
+    let prelude = `.${this.className}${this.pseudos}`;
+    preludes.push(prelude);
+
     // Nest rule in our stack of preludes (e.g. media queries/selectors).
     let content = '  ';
     preludes.forEach((p, i) => {
       content += `${p} {\n${' '.repeat((i + 2) * 2)}`;
     });
-    content += rule.body + '\n';
+    content += `${kebab(this.property)}: ${this.value};\n`;
     preludes.map((_, i) => {
       content += `${' '.repeat((preludes.length - i) * 2)}}\n`;
     });
 
     // Group rule into the appropriate layer.
-    let rules = rulesByLayer.get(rule.layer || layer);
+    let rules = rulesByLayer.get(layer);
     if (!rules) {
       rules = [];
-      rulesByLayer.set(rule.layer || layer, rules);
+      rulesByLayer.set(layer, rules);
     }
     rules.push(content);
-  } else {
-    for (let b of rule.body) {
-      printRule(b, rulesByLayer, preludes, rule.layer || layer);
-    }
+    preludes.pop();
   }
 
-  if (rule.prelude) {
-    preludes.pop();
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    let res = '';
+    if (allowedOverridesSet.has(this.property)) {
+      res += `${indent}if (!${this.property.replace('--', '__')}) `;
+    }
+    res +=  `${indent}rules += ' ${this.className}';`;
+    return res;
   }
 }
 
-function printJS(rules: Rule[], indent = ''): string {
-  rules = rules.slice().reverse();
+/** Base class for rules that contain other rules. */
+class GroupRule implements Rule {
+  rules: Rule[];
+  layer: string | null;
 
-  let conditional = rules.filter(rule => rule.condition).map((rule, i) => {
-    return `${i > 0 ? ' else ' : ''}if (props.${rule.condition}) {\n${indent}  ${printRuleChildren(rule, indent + '  ')}\n${indent}}`;
-  });
+  constructor(rules: Rule[], layer?: string) {
+    this.rules = rules;
+    this.layer = layer ?? null;
+  }
 
-  let elseCases = rules.filter(rule => !rule.condition).map(rule => printRuleChildren(rule, indent + '  '));
+  addPseudo(prelude: string) {
+    for (let rule of this.rules) {
+      rule.addPseudo(prelude);
+    }
+  }
 
-  if (conditional.length && elseCases.length) {
-    return `${conditional.join('')} else {\n${indent}  ${elseCases.join('\n' + indent + '  ')}\n${indent}}`;
+  getStaticClassName(): string {
+    return this.rules.map(rule => rule.getStaticClassName()).join('');
   }
 
-  if (conditional.length) {
-    return conditional.join('');
+  toCSS(rulesByLayer: Map<string, string[]>, preludes?: string[], layer?: string) {
+    for (let rule of this.rules) {
+      rule.toCSS(rulesByLayer, preludes, this.layer || layer);
+    }
   }
 
-  return elseCases.join('\n' + indent);
-}
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    let rules = this.rules.slice();
+    let conditional = rules.filter(rule => rule instanceof ConditionalRule).reverse().map((rule, i) => {
+      return `${i > 0 ? ' else ' : ''}${rule.toJS(allowedOverridesSet, indent)}`;
+    });
 
-function printRuleChildren(rule: Rule, indent = '') {
-  let res = '';
-  if (rule.prelude.startsWith('.')) {
-    res +=  `rules += ' ${rule.prelude.slice(1)}';`;
+    let elseCases = rules.filter(rule => !(rule instanceof ConditionalRule)).map(rule => rule.toJS(allowedOverridesSet, indent));
+    if (conditional.length && elseCases.length) {
+      return `${conditional.join('')} else {\n${indent}  ${elseCases.join('\n' + indent + '  ')}\n${indent}}`;
+    }
+
+    if (conditional.length) {
+      return conditional.join('');
+    }
+
+    return elseCases.join('\n' + indent);
   }
+}
+
+/** A rule that applies conditionally in CSS (e.g. @media). */
+class AtRule extends GroupRule {
+  prelude: string;
 
-  if (Array.isArray(rule.body)) {
-    res += printJS(rule.body, indent);
+  constructor(rules: Rule[], prelude: string, layer: string) {
+    super(rules, layer);
+    this.prelude = prelude;
   }
 
-  return res;
+  toCSS(rulesByLayer: Map<string, string[]>, preludes: string[] = [], layer?: string): void {
+    preludes.push(this.prelude);
+    super.toCSS(rulesByLayer, preludes, layer);
+    preludes?.pop();
+  }
 }
 
-function getStaticClassName(rules: Rule[]): string {
-  return rules.map(rule => (rule.prelude.startsWith('.') ? ' ' + rule.prelude.slice(1) : '') + (Array.isArray(rule.body) ? getStaticClassName(rule.body) : '')).join('');
+/** A rule that applies conditionally at runtime. */
+class ConditionalRule extends GroupRule {
+  condition: string;
+
+  constructor(rules: Rule[], condition: string) {
+    super(rules);
+    this.condition = condition;
+  }
+
+  getStaticClassName(): string {
+    throw new Error('Conditional rules cannot be compiled to a static class name. This is a bug.');
+  }
+
+  toJS(allowedOverridesSet: Set<string>, indent = ''): string {
+    return `${indent}if (props.${this.condition}) {\n${super.toJS(allowedOverridesSet, indent + '  ')}\n${indent}}`;
+  }
 }
 
 export function raw(this: MacroContext | void, css: string, layer = '_.a'): string {
diff --git a/packages/@react-spectrum/s2/style/types.ts b/packages/@react-spectrum/s2/style/types.ts
index e66bbb4bab5..b9309bd5968 100644
--- a/packages/@react-spectrum/s2/style/types.ts
+++ b/packages/@react-spectrum/s2/style/types.ts
@@ -14,7 +14,7 @@ import type * as CSS from 'csstype';
 
 export type CSSValue = string | number;
 export type CustomValue = string | number | boolean;
-export type Value = CustomValue | readonly CustomValue[];
+export type Value = CustomValue | readonly any[];
 export type PropertyValueDefinition<T> = T | {[condition: string]: PropertyValueDefinition<T>};
 export type PropertyValueMap<T extends CSSValue = CSSValue> = {
   [name in T]: PropertyValueDefinition<string>
@@ -25,13 +25,17 @@ export type CSSProperties = CSS.Properties & {
   [k: CustomProperty]: CSSValue
 };
 
-export type PropertyFunction<T> = (value: T, property: string) => PropertyValueDefinition<[CSSProperties, string]>;
+export interface Property<T> {
+  cssProperties: string[],
+  toCSSValue(value: T): PropertyValueDefinition<Value>,
+  toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<Value>): PropertyValueDefinition<[CSSProperties]>
+}
 
 export type ShorthandProperty<T> = (value: T) => {[name: string]: Value};
 
 export interface Theme {
   properties: {
-    [name: string]: PropertyValueMap | PropertyFunction<any> | string[]
+    [name: string]: PropertyValueMap | Property<any> | string[]
   },
   conditions: {
     [name: string]: string
@@ -42,7 +46,7 @@ export interface Theme {
 }
 
 type PropertyValue<T> =
-  T extends PropertyFunction<infer P>
+  T extends Property<infer P>
     ? P
     : T extends PropertyValueMap<infer P>
       ? P

From c7c55cc2611ad97cf05db11007668d03a1c053b1 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 28 Apr 2025 12:54:10 -0500
Subject: [PATCH 10/24] add back condition and fix tests

---
 .../@react-aria/dnd/src/useDroppableCollection.ts    |  2 +-
 packages/@react-spectrum/table/test/TableDnd.test.js | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index 33c09cacfd9..e43a1d3495e 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on') {
+        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }
diff --git a/packages/@react-spectrum/table/test/TableDnd.test.js b/packages/@react-spectrum/table/test/TableDnd.test.js
index a97231f92a7..c07936e6ec8 100644
--- a/packages/@react-spectrum/table/test/TableDnd.test.js
+++ b/packages/@react-spectrum/table/test/TableDnd.test.js
@@ -949,7 +949,7 @@ describe('TableView', function () {
           expect(onReorder).toHaveBeenCalledTimes(0);
           expect(onItemDrop).toHaveBeenCalledTimes(1);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '5',
@@ -1060,7 +1060,7 @@ describe('TableView', function () {
           expect(onReorder).toHaveBeenCalledTimes(0);
           expect(onItemDrop).toHaveBeenCalledTimes(1);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '4',
@@ -1664,7 +1664,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: false
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           // Only has the file in onItemDrop, the folder item should have been filtered out
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
@@ -2120,7 +2120,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: false
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledWith({
             target: {
               key: '7',
@@ -2172,7 +2172,7 @@ describe('TableView', function () {
           expect(document.activeElement).toHaveAttribute('aria-label', 'Drop on Documents');
           await user.keyboard('{Enter}');
 
-          expect(onReorder).toHaveBeenCalledTimes(0);
+          expect(onReorder).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenCalledTimes(2);
           expect(onRootDrop).toHaveBeenCalledTimes(0);
           expect(onDragEnd).toHaveBeenCalledTimes(2);
@@ -2184,7 +2184,7 @@ describe('TableView', function () {
             dropOperation: 'move',
             isInternal: true
           });
-          expect(onInsert).toHaveBeenCalledTimes(0);
+          expect(onInsert).toHaveBeenCalledTimes(1);
           expect(onItemDrop).toHaveBeenLastCalledWith({
             target: {
               key: '3',

From 74acbf9284ff58cdf090ad8fff35aaa22d0beabf Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 30 Apr 2025 14:25:58 -0500
Subject: [PATCH 11/24] add story for shouldAcceptItemDrop

---
 .../stories/Tree.stories.tsx                  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index f7ab44b81ba..145ad23b945 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -280,6 +280,8 @@ const DynamicTreeItem = (props: DynamicTreeItemProps) => {
         <Collection items={childItems}>
           {(item: any) => (
             <DynamicTreeItem supportsDragging={supportsDragging} renderLoader={renderLoader} isLoading={props.isLoading} id={item.key} childItems={item.children} textValue={item.value.name} href={props.href}>
+              {item.value?.type === 'folder' && '📁'}
+              {item.value?.type === 'file' && '📄'}
               {item.value.name}
             </DynamicTreeItem>
           )}
@@ -615,3 +617,109 @@ export const TreeWithDragAndDrop = {
   ...TreeExampleDynamic,
   render: TreeDragAndDropExample
 };
+
+function TreeDragAndDropFilesFoldersExample(args) {
+  let rows = [
+    {
+      id: 'folder-1',
+      name: 'Folder 1',
+      type: 'folder',
+      childItems: [
+        {
+          id: '1.1',
+          name: 'File 1.1',
+          type: 'file',
+          childItems: []
+        },
+        {
+          id: 'folder-1.1',
+          name: 'Folder 1.1',
+          type: 'folder',
+          childItems: []
+        }
+      ]
+    },
+    {
+      id: 'folder-2',
+      name: 'Folder 2',
+      type: 'folder',
+      childItems: [
+        {
+          id: '2.1',
+          name: 'File 2.1',
+          type: 'file',
+          childItems: []
+        }
+      ]
+    },
+    {
+      id: 'file-1',
+      name: 'File 1',
+      type: 'file',
+      childItems: []
+    }
+  ];
+  let treeData = useTreeData<any>({
+    initialItems: rows,
+    getKey: item => item.id,
+    getChildren: item => item.childItems
+  });
+
+  let getItems = (keys) => [...keys].map(key => {
+    let item = treeData.getItem(key);
+    return {
+      'text/plain': item?.value.name
+    };
+  });
+
+  let {dragAndDropHooks} = useDragAndDrop({
+    getItems,
+    getAllowedDropOperations: () => ['move', 'cancel'],
+    shouldAcceptItemDrop: (target) => {
+      let item = treeData.getItem(target.key);
+      return item?.value?.type !== 'file';
+    },
+    onReorder(e) {
+      console.log(`moving [${[...e.keys].join(',')}] ${e.target.dropPosition} ${e.target.key}`);
+      try {
+        if (e.target.dropPosition === 'before') {
+          treeData.moveBefore(e.target.key, e.keys);
+        } else if (e.target.dropPosition === 'after') {
+          treeData.moveAfter(e.target.key, e.keys);
+        } else if (e.target.dropPosition === 'on') {
+          let targetNode = treeData.getItem(e.target.key);
+          if (targetNode) {
+            e.keys.forEach(key => {
+              treeData.move(key, e.target.key, targetNode.children ? targetNode.children.length : 0);
+            });
+          } else {
+            console.error('Target node not found for drop on:', e.target.key);
+          }
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    onItemDrop() {
+      // TODO: Need to get this to work without needing to pass this
+    }
+  });
+
+  return (
+    <Tree dragAndDropHooks={dragAndDropHooks} {...args} className={styles.tree} aria-label="Tree with drag and drop" items={treeData.items}>
+      {(item: any) => (
+        <DynamicTreeItem id={item.key} childItems={item.children ?? []} textValue={item.value.name} supportsDragging>
+          {item.value?.type === 'folder' && '📁'}
+          {item.value?.type === 'file' && '📄'}
+          {item.value.name}
+        </DynamicTreeItem>
+      )}
+    </Tree>
+  );
+}
+
+export const TreeDragAndDropFilesFolders = {
+  ...TreeExampleDynamic,
+  render: TreeDragAndDropFilesFoldersExample,
+  name: 'Tree Drag and Drop (with files and folders)'
+};

From 2951a955365afc2cb78d5c86a645dbcdeca09c4a Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 30 Apr 2025 15:05:59 -0500
Subject: [PATCH 12/24] fix rows in story

---
 .../react-aria-components/stories/Tree.stories.tsx  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index 145ad23b945..4ebd7debb59 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -626,10 +626,9 @@ function TreeDragAndDropFilesFoldersExample(args) {
       type: 'folder',
       childItems: [
         {
-          id: '1.1',
+          id: 'file-1.1',
           name: 'File 1.1',
-          type: 'file',
-          childItems: []
+          type: 'file'
         },
         {
           id: 'folder-1.1',
@@ -645,18 +644,16 @@ function TreeDragAndDropFilesFoldersExample(args) {
       type: 'folder',
       childItems: [
         {
-          id: '2.1',
+          id: 'file-2.1',
           name: 'File 2.1',
-          type: 'file',
-          childItems: []
+          type: 'file'
         }
       ]
     },
     {
       id: 'file-1',
       name: 'File 1',
-      type: 'file',
-      childItems: []
+      type: 'file'
     }
   ];
   let treeData = useTreeData<any>({

From 6328d20e05d07563835f4a117f6f8d1157940e80 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 30 Apr 2025 16:28:57 -0700
Subject: [PATCH 13/24] Fix menu keyboard shortcut icons background color when
 hovered/focused (#8153)

---
 packages/@react-spectrum/s2/src/Menu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 9d8bc4b9f4d..7dacfbba746 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -306,7 +306,6 @@ let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
-  backgroundColor: 'gray-25',
   unicodeBidi: 'plaintext'
 });
 

From e3b138d41ef333c1c10c17a24c75169bce530584 Mon Sep 17 00:00:00 2001
From: stefanprobst <stefanprobst@posteo.de>
Date: Mon, 5 May 2025 16:03:39 +0200
Subject: [PATCH 14/24] update optimize-locales plugin types (#8087)

---
 packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts b/packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts
index 537b27d5776..8d553e82e0a 100644
--- a/packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts
+++ b/packages/dev/optimize-locales-plugin/LocalesPlugin.d.ts
@@ -4,5 +4,5 @@ type Options = {
   locales: readonly string[]
 };
 
-declare const plugin: UnpluginInstance<Options, boolean>;
+declare const plugin: UnpluginInstance<Options, false>;
 export = plugin;

From 542e48d5955da6f6dee45893370d1b1ae978d7d9 Mon Sep 17 00:00:00 2001
From: chirokas <157580465+chirokas@users.noreply.github.com>
Date: Mon, 5 May 2025 23:52:25 +0800
Subject: [PATCH 15/24] fix ColorSlider className (#8190)

---
 packages/@react-spectrum/color/src/ColorSlider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@react-spectrum/color/src/ColorSlider.tsx b/packages/@react-spectrum/color/src/ColorSlider.tsx
index 3bb5907bf0b..f42e5af782c 100644
--- a/packages/@react-spectrum/color/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/color/src/ColorSlider.tsx
@@ -92,7 +92,8 @@ export const ColorSlider = React.forwardRef(function ColorSlider(props: Spectrum
         {
           'spectrum-ColorSlider-container--horizontal': !vertical,
           'spectrum-ColorSlider-container--vertical': vertical
-        }
+        },
+        styleProps.className
       )}>
       {label &&
         <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>

From 76debfe15d5b1445cb4dbb1915f7112e804a57f6 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Tue, 6 May 2025 10:49:36 -0500
Subject: [PATCH 16/24] use expand button as activate button

---
 packages/@react-aria/dnd/src/DragManager.ts   | 91 +++++++++++++++----
 .../@react-aria/dnd/src/useDropIndicator.ts   |  6 +-
 .../dnd/src/useDroppableCollection.ts         |  2 +-
 .../@react-aria/dnd/src/useDroppableItem.ts   | 11 ++-
 packages/@react-types/shared/src/dnd.d.ts     |  1 -
 packages/react-aria-components/src/Tree.tsx   | 17 ++--
 .../stories/Tree.stories.tsx                  | 30 +++---
 7 files changed, 112 insertions(+), 46 deletions(-)

diff --git a/packages/@react-aria/dnd/src/DragManager.ts b/packages/@react-aria/dnd/src/DragManager.ts
index 783855047d0..d515e42f18c 100644
--- a/packages/@react-aria/dnd/src/DragManager.ts
+++ b/packages/@react-aria/dnd/src/DragManager.ts
@@ -16,7 +16,7 @@ import {DragEndEvent, DragItem, DropActivateEvent, DropEnterEvent, DropEvent, Dr
 import {getDragModality, getTypes} from './utils';
 import {isVirtualClick, isVirtualPointerEvent} from '@react-aria/utils';
 import type {LocalizedStringFormatter} from '@internationalized/string';
-import {useEffect, useState} from 'react';
+import {RefObject, useEffect, useState} from 'react';
 
 let dropTargets = new Map<Element, DropTarget>();
 let dropItems = new Map<Element, DroppableItem>();
@@ -32,7 +32,8 @@ interface DropTarget {
   onDropTargetEnter?: (target: DroppableCollectionTarget | null) => void,
   onDropActivate?: (e: DropActivateEvent, target: DroppableCollectionTarget | null) => void,
   onDrop?: (e: DropEvent, target: DroppableCollectionTarget | null) => void,
-  onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void
+  onKeyDown?: (e: KeyboardEvent, dragTarget: DragTarget) => void,
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export function registerDropTarget(target: DropTarget) {
@@ -47,7 +48,8 @@ export function registerDropTarget(target: DropTarget) {
 interface DroppableItem {
   element: FocusableElement,
   target: DroppableCollectionTarget,
-  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation
+  getDropOperation?: (types: Set<string>, allowedOperations: DropOperation[]) => DropOperation,
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export function registerDropItem(item: DroppableItem) {
@@ -165,6 +167,7 @@ class DragSession {
   private stringFormatter: LocalizedStringFormatter;
   private isVirtualClick: boolean = false;
   private initialFocused: boolean;
+  private isActivateButtonFocused: boolean = false;
 
   constructor(target: DragTarget, stringFormatter: LocalizedStringFormatter) {
     this.dragTarget = target;
@@ -178,6 +181,7 @@ class DragSession {
     this.onPointerDown = this.onPointerDown.bind(this);
     this.cancelEvent = this.cancelEvent.bind(this);
     this.initialFocused = false;
+    this.isActivateButtonFocused = false;
   }
 
   setup() {
@@ -196,6 +200,7 @@ class DragSession {
       this.updateValidDropTargets()
     );
     this.updateValidDropTargets();
+    this.isActivateButtonFocused = false;
 
     announce(this.stringFormatter.format(MESSAGES[getDragModality()]));
   }
@@ -241,7 +246,7 @@ class DragSession {
     this.cancelEvent(e);
 
     if (e.key === 'Enter') {
-      if (e.altKey) {
+      if (e.altKey || this.isActivateButtonFocused) {
         this.activate();
       } else {
         this.drop();
@@ -250,22 +255,38 @@ class DragSession {
   }
 
   onFocus(e: FocusEvent) {
+    let activateButton = this.currentDropItem?.activateButtonRef?.current;
+
     // Prevent focus events, except to the original drag target.
-    if (e.target !== this.dragTarget.element) {
+    if (e.target !== this.dragTarget.element && e.target !== this.currentDropTarget?.element && e.target !== this.currentDropItem?.element && e.target !== activateButton) {
       this.cancelEvent(e);
     }
 
     // Ignore focus events on the window/document (JSDOM). Will be handled in onBlur, below.
-    if (!(e.target instanceof HTMLElement) || e.target === this.dragTarget.element) {
+    if (!(e.target instanceof HTMLElement)) {
+      return;
+    }
+
+    if (e.target === activateButton) {
+      this.isActivateButtonFocused = true;
+      return;
+    }
+
+    if (e.target === this.dragTarget.element) {
+      this.isActivateButtonFocused = false;
       return;
     }
 
     let dropTarget =
-      this.validDropTargets.find(target => target.element === e.target as HTMLElement) ||
-      this.validDropTargets.find(target => target.element.contains(e.target as HTMLElement));
+      this.validDropTargets.find(target => target.element === e.target) ||
+      this.validDropTargets.find(target => target.element.contains(e.target as Node));
+
+    let item = e.target instanceof Element ? dropItems.get(e.target) : undefined;
 
-    if (!dropTarget) {
-      if (this.currentDropTarget) {
+    if (!dropTarget && !item && e.target !== this.dragTarget.element) {
+      if (this.isActivateButtonFocused && activateButton) {
+        activateButton.focus();
+      } else if (this.currentDropTarget) {
         this.currentDropTarget.element.focus();
       } else {
         this.dragTarget.element.focus();
@@ -273,19 +294,27 @@ class DragSession {
       return;
     }
 
-    let item = dropItems.get(e.target as HTMLElement);
-    this.setCurrentDropTarget(dropTarget, item);
+    if (e.target !== activateButton) {
+      this.isActivateButtonFocused = false;
+    }
+
+    if (dropTarget) {
+      this.setCurrentDropTarget(dropTarget, item);
+    }
   }
 
   onBlur(e: FocusEvent) {
-    if (e.target !== this.dragTarget.element) {
+    let activateButton = this.currentDropItem?.activateButtonRef?.current;
+    if (e.target !== this.dragTarget.element && e.target !== activateButton) {
       this.cancelEvent(e);
     }
 
     // If nothing is gaining focus, or e.relatedTarget is the window/document (JSDOM),
     // restore focus back to the current drop target if any, or the original drag target.
     if (!e.relatedTarget || !(e.relatedTarget instanceof HTMLElement)) {
-      if (this.currentDropTarget) {
+      if (this.isActivateButtonFocused && activateButton) {
+        activateButton.focus();
+      } else if (this.currentDropTarget) {
         this.currentDropTarget.element.focus();
       } else {
         this.dragTarget.element.focus();
@@ -323,6 +352,11 @@ class DragSession {
       return;
     }
 
+    let activateButton = this.currentDropItem?.activateButtonRef?.current;
+    if ((e.type === 'focusin' || e.type === 'focusout') && activateButton && e.target === activateButton) {
+      return;
+    }
+
     // Allow default for events that might cancel a click event
     if (!CLICK_EVENTS.includes(e.type)) {
       e.preventDefault();
@@ -383,6 +417,17 @@ class DragSession {
   }
 
   next() {
+    let currentItem = this.currentDropItem;
+    let activateButton = currentItem?.activateButtonRef?.current;
+
+    if (currentItem && activateButton && !this.isActivateButtonFocused) {
+      activateButton.focus();
+      this.isActivateButtonFocused = true;
+      return;
+    }
+
+    this.isActivateButtonFocused = false;
+
     if (!this.currentDropTarget) {
       this.setCurrentDropTarget(this.validDropTargets[0]);
       return;
@@ -409,6 +454,16 @@ class DragSession {
   }
 
   previous() {
+    let currentItem = this.currentDropItem;
+    let activateButton = currentItem?.activateButtonRef?.current;
+    if (this.isActivateButtonFocused && currentItem && activateButton) {
+      currentItem.element.focus();
+      this.isActivateButtonFocused = false;
+      return;
+    }
+
+    this.isActivateButtonFocused = false;
+
     if (!this.currentDropTarget) {
       this.setCurrentDropTarget(this.validDropTargets[this.validDropTargets.length - 1]);
       return;
@@ -466,6 +521,7 @@ class DragSession {
       }
 
       this.currentDropTarget = dropTarget;
+      this.isActivateButtonFocused = false;
 
       if (dropTarget) {
         if (typeof dropTarget.onDropEnter === 'function') {
@@ -487,7 +543,7 @@ class DragSession {
       if (this.currentDropTarget && typeof this.currentDropTarget.onDropTargetEnter === 'function') {
         this.currentDropTarget.onDropTargetEnter(item.target);
       }
-
+      this.isActivateButtonFocused = false;
       item.element.focus();
       this.currentDropItem = item;
 
@@ -506,6 +562,7 @@ class DragSession {
   end() {
     this.teardown();
     endDragging();
+    this.isActivateButtonFocused = false;
 
     if (typeof this.dragTarget.onDragEnd === 'function') {
       let target = this.currentDropTarget && this.dropOperation !== 'cancel' ? this.currentDropTarget : this.dragTarget;
@@ -530,6 +587,7 @@ class DragSession {
 
   cancel() {
     this.setCurrentDropTarget(null);
+    this.isActivateButtonFocused = false;
     this.end();
     if (!this.dragTarget.element.closest('[aria-hidden="true"]')) {
       this.dragTarget.element.focus();
@@ -578,12 +636,13 @@ class DragSession {
 
   activate() {
     if (this.currentDropTarget && typeof this.currentDropTarget.onDropActivate === 'function') {
+      let target = this.currentDropItem?.target ?? null;
       let rect = this.currentDropTarget.element.getBoundingClientRect();
       this.currentDropTarget.onDropActivate({
         type: 'dropactivate',
         x: rect.left + (rect.width / 2),
         y: rect.top + (rect.height / 2)
-      }, null);
+      }, target);
     }
   }
 }
diff --git a/packages/@react-aria/dnd/src/useDropIndicator.ts b/packages/@react-aria/dnd/src/useDropIndicator.ts
index 6700e730e8d..5c13233ec83 100644
--- a/packages/@react-aria/dnd/src/useDropIndicator.ts
+++ b/packages/@react-aria/dnd/src/useDropIndicator.ts
@@ -12,7 +12,7 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget, Key, RefObject} from '@react-types/shared';
+import {DropTarget, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {getDroppableCollectionId} from './utils';
 import {HTMLAttributes} from 'react';
 // @ts-ignore
@@ -23,7 +23,9 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DropIndicatorProps {
   /** The drop target that the drop indicator represents. */
-  target: DropTarget
+  target: DropTarget,
+  /** The ref to the activate button. */
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export interface DropIndicatorAria {
diff --git a/packages/@react-aria/dnd/src/useDroppableCollection.ts b/packages/@react-aria/dnd/src/useDroppableCollection.ts
index e43a1d3495e..33c09cacfd9 100644
--- a/packages/@react-aria/dnd/src/useDroppableCollection.ts
+++ b/packages/@react-aria/dnd/src/useDroppableCollection.ts
@@ -139,7 +139,7 @@ export function useDroppableCollection(props: DroppableCollectionOptions, state:
           await onItemDrop({items: filteredItems, dropOperation, isInternal, target});
         }
 
-        if (target.dropPosition !== 'on' || localState.state.collection.getItem(target.key)?.hasChildNodes) {
+        if (target.dropPosition !== 'on') {
           if (!isInternal && onInsert) {
             await onInsert({items: filteredItems, dropOperation, target});
           }
diff --git a/packages/@react-aria/dnd/src/useDroppableItem.ts b/packages/@react-aria/dnd/src/useDroppableItem.ts
index d62b737619d..d54e45772ac 100644
--- a/packages/@react-aria/dnd/src/useDroppableItem.ts
+++ b/packages/@react-aria/dnd/src/useDroppableItem.ts
@@ -12,14 +12,16 @@
 
 import * as DragManager from './DragManager';
 import {DroppableCollectionState} from '@react-stately/dnd';
-import {DropTarget, RefObject} from '@react-types/shared';
+import {DropTarget, FocusableElement, RefObject} from '@react-types/shared';
 import {getDroppableCollectionRef, getTypes, globalDndState, isInternalDropOperation} from './utils';
 import {HTMLAttributes, useEffect} from 'react';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DroppableItemOptions {
   /** The drop target represented by the item. */
-  target: DropTarget
+  target: DropTarget,
+  /** The ref to the activate button. */
+  activateButtonRef?: RefObject<FocusableElement | null>
 }
 
 export interface DroppableItemResult {
@@ -50,10 +52,11 @@ export function useDroppableItem(options: DroppableItemOptions, state: Droppable
             isInternal,
             draggingKeys
           });
-        }
+        },
+        activateButtonRef: options.activateButtonRef
       });
     }
-  }, [ref, options.target, state, droppableCollectionRef]);
+  }, [ref, options.target, state, droppableCollectionRef, options.activateButtonRef]);
 
   let dragSession = DragManager.useDragSession();
   let {draggingKeys} = globalDndState;
diff --git a/packages/@react-types/shared/src/dnd.d.ts b/packages/@react-types/shared/src/dnd.d.ts
index 49aca05cdbf..422ceb969aa 100644
--- a/packages/@react-types/shared/src/dnd.d.ts
+++ b/packages/@react-types/shared/src/dnd.d.ts
@@ -232,7 +232,6 @@ export interface DroppableCollectionBaseProps {
   onDropEnter?: (e: DroppableCollectionEnterEvent) => void,
   /**
    * Handler that is called after a valid drag is held over a drop target for a period of time.
-   * @private
    */
   onDropActivate?: (e: DroppableCollectionActivateEvent) => void,
   /** Handler that is called when a valid drag exits a drop target. */
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 01cef2ef2b4..432c0f4d047 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useDrag, useFocusRing,  useGridListSelectionCheckbox, useHover, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
@@ -23,6 +23,7 @@ import {DraggableCollectionState, DroppableCollectionState, Collection as IColle
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {useControlledState} from '@react-stately/utils';
+import {useDragModality} from '@react-aria/dnd/src/utils';
 
 class TreeCollection<T> implements ICollection<Node<T>> {
   private flattenedRows: Node<T>[];
@@ -226,6 +227,8 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   let dragPreview: JSX.Element | null = null;
   let preview = useRef<DragPreviewRenderer>(null);
 
+  let modality = useDragModality();
+
   if (hasDragHooks && dragAndDropHooks) {
     dragState = dragAndDropHooks.useDraggableCollectionState!({
       collection: state.collection,
@@ -265,11 +268,12 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
           return item?.hasChildNodes ?? false;
         },
         onDropActivate: (e) => {
-          // Expand collapsed item when dragging over
+          // Expand collapsed item when dragging over. For keyboard, allow collapsing.
           if (e.target.type === 'item') {
             let key = e.target.key;
             let item = state.collection.getItem(key);
-            if (item && item.hasChildNodes && expandedKeys !== 'all' && !expandedKeys.has(key)) {
+            let isExpanded = expandedKeys !== 'all' && expandedKeys.has(key);
+            if (item && item.hasChildNodes && (!isExpanded || modality === 'keyboard')) {
               state.toggleKey(key);
             }
           }
@@ -279,7 +283,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
             // Toggle expansion when drop target is after expandable item
             let target = dropState?.target;
             if (target && target.type === 'item') {
-              let keyToToggle = target.dropPosition === 'after' ? target.key : state.collection.getKeyBefore(target.key);
+              let keyToToggle = target.dropPosition === 'after' || target.dropPosition === 'on' ? target.key : state.collection.getKeyBefore(target.key);
               if (keyToToggle) {
                 let item = state.collection.getItem(keyToToggle);
                 let isExpanded = state.expandedKeys.has(keyToToggle);
@@ -518,12 +522,14 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     draggableItem = dragAndDropHooks.useDraggableItem!({key: item.key, hasDragButton: true}, dragState);
   }
 
+  let expandButtonRef = useRef<HTMLButtonElement>(null);
   let dropIndicator: DropIndicatorAria | undefined = undefined;
   let dropIndicatorRef = useRef<HTMLDivElement>(null);
   let {visuallyHiddenProps} = useVisuallyHidden();
   if (dropState && dragAndDropHooks) {
     dropIndicator = dragAndDropHooks.useDropIndicator!({
-      target: {type: 'item', key: item.key, dropPosition: 'on'}
+      target: {type: 'item', key: item.key, dropPosition: 'on'},
+      activateButtonRef: expandButtonRef
     }, dropState, dropIndicatorRef);
   }
 
@@ -567,7 +573,6 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
     }
   }, [item.textValue]);
 
-  let expandButtonRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     if (hasChildItems && !expandButtonRef.current && process.env.NODE_ENV !== 'production') {
       console.warn('Expandable tree items must contain a expand button so screen reader users can expand/collapse the item.');
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index 4ebd7debb59..e0a0f9ed527 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -596,9 +596,6 @@ function TreeDragAndDropExample(args) {
       } catch (error) {
         console.error(error);
       }
-    },
-    onItemDrop() {
-      // TODO: Need to get this to work without needing to pass this
     }
   });
 
@@ -663,9 +660,8 @@ function TreeDragAndDropFilesFoldersExample(args) {
   });
 
   let getItems = (keys) => [...keys].map(key => {
-    let item = treeData.getItem(key);
     return {
-      'text/plain': item?.value.name
+      'text/plain': key.toString()
     };
   });
 
@@ -683,22 +679,24 @@ function TreeDragAndDropFilesFoldersExample(args) {
           treeData.moveBefore(e.target.key, e.keys);
         } else if (e.target.dropPosition === 'after') {
           treeData.moveAfter(e.target.key, e.keys);
-        } else if (e.target.dropPosition === 'on') {
-          let targetNode = treeData.getItem(e.target.key);
-          if (targetNode) {
-            e.keys.forEach(key => {
-              treeData.move(key, e.target.key, targetNode.children ? targetNode.children.length : 0);
-            });
-          } else {
-            console.error('Target node not found for drop on:', e.target.key);
-          }
         }
       } catch (error) {
         console.error(error);
       }
     },
-    onItemDrop() {
-      // TODO: Need to get this to work without needing to pass this
+    onItemDrop(e) {
+      let targetNode = treeData.getItem(e.target.key);
+      if (targetNode && e.isInternal) {
+        e.items.forEach(item => {
+          if (item.kind === 'text') {
+            item.getText('text/plain').then(key => {
+              treeData.move(key, e.target.key, targetNode.children ? targetNode.children.length : 0);
+            });
+          }
+        });
+      } else {
+        console.error('Target node not found for drop on:', e.target.key);
+      }
     }
   });
 

From d1c558744d14a608a9b232a2f472fbb411ebabf7 Mon Sep 17 00:00:00 2001
From: Kyle Taborski <ktabors@yahoo.com>
Date: Tue, 6 May 2025 10:46:12 -0700
Subject: [PATCH 17/24] doc(RAC): FileType docs TypeScript fix (#8172)

---
 packages/react-aria-components/docs/FileTrigger.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-aria-components/docs/FileTrigger.mdx b/packages/react-aria-components/docs/FileTrigger.mdx
index fd0fb837b5f..4b42f2f4735 100644
--- a/packages/react-aria-components/docs/FileTrigger.mdx
+++ b/packages/react-aria-components/docs/FileTrigger.mdx
@@ -49,7 +49,7 @@ function Example(){
     <>
       <FileTrigger
         onSelect={(e) => {
-          let files = Array.from(e);
+          let files = e ? Array.from(e) : [];
           let filenames = files.map((file) => file.name);
           setFile(filenames);
         }}>

From b07a79d91b85c08e63b3c66f9581cacdc11451ae Mon Sep 17 00:00:00 2001
From: Alexandre Asselin <alexandre.asselin@gsoft.com>
Date: Wed, 7 May 2025 12:18:26 -0400
Subject: [PATCH 18/24] fix: Correct the PortalProvider's getContainer typings
 (#8185)

* fix(overlays): Correct the PortalProvider typings

* fix typings

---------

Co-authored-by: Reid Barber <reid@reidbarber.com>
---
 packages/@react-aria/overlays/src/PortalProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/overlays/src/PortalProvider.tsx b/packages/@react-aria/overlays/src/PortalProvider.tsx
index 8721a00df5f..a705917130f 100644
--- a/packages/@react-aria/overlays/src/PortalProvider.tsx
+++ b/packages/@react-aria/overlays/src/PortalProvider.tsx
@@ -14,7 +14,7 @@ import React, {createContext, ReactNode, useContext} from 'react';
 
 export interface PortalProviderProps {
   /** Should return the element where we should portal to. Can clear the context by passing null. */
-  getContainer?: () => HTMLElement | null,
+  getContainer?: (() => HTMLElement | null) | null,
   /** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided `getContainer()`. */
   children: ReactNode
 }

From b0c045460904e9ef82241538ac99f44f22a30981 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 7 May 2025 10:33:34 -0700
Subject: [PATCH 19/24] refactor: Theme updates (#8155)

* Remove columns for now, and reduce spacing scale

* use rems for media queries

* use px instead of rems for padding and absolute positioning

* use rems for icon sizes and support size prop

* use rems for checkbox and radio borders

* more component-specific rem fixes

* support percentages and viewport units by default

* support arbitrary aspect ratios

* support math functions and css-wide keywords without bracket syntax

* update property data

* fix test

* icon colors

* Remove runtime conditions from color properties in theme, use baseColor macro instead

* Move control styles to shared macros

* inherit doesn't need brackets anymore

* update property data

* sort properties by number of generated rules rather than absolute frequency of usage

using the same value many time results in only one rule, so shouldn't be counted more than once

* Add shorter mappings for some common custom properties

* update snapshots

* Fix color with opacity
---
 .storybook-s2/docs/Colors.jsx                 |    4 +-
 .../s2/chromatic/ActionButton.stories.tsx     |    2 +-
 .../s2/chromatic/Badge.stories.tsx            |    2 +-
 .../s2/chromatic/Breadcrumbs.stories.tsx      |    2 +-
 .../s2/chromatic/Button.stories.tsx           |    2 +-
 .../s2/chromatic/ButtonGroup.stories.tsx      |    4 +-
 .../s2/chromatic/Card.stories.tsx             |    2 +-
 .../s2/chromatic/Checkbox.stories.tsx         |    2 +-
 .../s2/chromatic/CheckboxGroup.stories.tsx    |    8 +-
 .../s2/chromatic/ColorField.stories.tsx       |    2 +-
 .../s2/chromatic/ColorSlider.stories.tsx      |    4 +-
 .../s2/chromatic/NumberField.stories.tsx      |    2 +-
 .../s2/chromatic/ToggleButton.stories.tsx     |    2 +-
 .../@react-spectrum/s2/src/ActionButton.tsx   |   65 +-
 .../@react-spectrum/s2/src/AvatarGroup.tsx    |    2 +-
 packages/@react-spectrum/s2/src/Badge.tsx     |   31 +-
 .../@react-spectrum/s2/src/Breadcrumbs.tsx    |   20 +-
 packages/@react-spectrum/s2/src/Button.tsx    |   52 +-
 packages/@react-spectrum/s2/src/Card.tsx      |   41 +-
 packages/@react-spectrum/s2/src/Checkbox.tsx  |   18 +-
 .../@react-spectrum/s2/src/CheckboxGroup.tsx  |    2 +-
 .../@react-spectrum/s2/src/ClearButton.tsx    |    5 +-
 .../@react-spectrum/s2/src/CloseButton.tsx    |    6 +-
 packages/@react-spectrum/s2/src/CoachMark.tsx |   10 +-
 .../@react-spectrum/s2/src/ColorSlider.tsx    |    4 +-
 .../s2/src/ColorSwatchPicker.tsx              |    2 +-
 packages/@react-spectrum/s2/src/ComboBox.tsx  |   16 +-
 .../@react-spectrum/s2/src/ContextualHelp.tsx |    2 +-
 .../@react-spectrum/s2/src/CustomDialog.tsx   |    4 +-
 packages/@react-spectrum/s2/src/Dialog.tsx    |   15 +-
 .../@react-spectrum/s2/src/Disclosure.tsx     |   12 +-
 packages/@react-spectrum/s2/src/DropZone.tsx  |    2 +-
 packages/@react-spectrum/s2/src/Field.tsx     |   26 +-
 .../s2/src/FullscreenDialog.tsx               |    6 +-
 packages/@react-spectrum/s2/src/Icon.tsx      |  110 +-
 .../s2/src/IllustratedMessage.tsx             |   12 +-
 packages/@react-spectrum/s2/src/Image.tsx     |    4 +-
 packages/@react-spectrum/s2/src/Link.tsx      |    6 +-
 packages/@react-spectrum/s2/src/Menu.tsx      |   30 +-
 packages/@react-spectrum/s2/src/Modal.tsx     |    8 +-
 .../s2/src/NotificationBadge.tsx              |    2 +-
 .../@react-spectrum/s2/src/NumberField.tsx    |   27 +-
 packages/@react-spectrum/s2/src/Picker.tsx    |   29 +-
 packages/@react-spectrum/s2/src/Popover.tsx   |   10 +-
 .../@react-spectrum/s2/src/ProgressCircle.tsx |    8 +-
 packages/@react-spectrum/s2/src/Radio.tsx     |   16 +-
 .../@react-spectrum/s2/src/RadioGroup.tsx     |    2 +-
 .../@react-spectrum/s2/src/SearchField.tsx    |    4 +-
 .../s2/src/SegmentedControl.tsx               |   29 +-
 packages/@react-spectrum/s2/src/Skeleton.tsx  |    5 +-
 packages/@react-spectrum/s2/src/Slider.tsx    |   16 +-
 .../@react-spectrum/s2/src/StatusLight.tsx    |    4 +-
 packages/@react-spectrum/s2/src/Switch.tsx    |   12 +-
 packages/@react-spectrum/s2/src/TableView.tsx |   18 +-
 packages/@react-spectrum/s2/src/Tabs.tsx      |   23 +-
 .../@react-spectrum/s2/src/TabsPicker.tsx     |   12 +-
 packages/@react-spectrum/s2/src/TagGroup.tsx  |   50 +-
 packages/@react-spectrum/s2/src/TextField.tsx |   14 +-
 packages/@react-spectrum/s2/src/Toast.tsx     |   28 +-
 packages/@react-spectrum/s2/src/Tooltip.tsx   |   10 +-
 packages/@react-spectrum/s2/src/TreeView.tsx  |    4 +-
 packages/@react-spectrum/s2/src/bar-utils.ts  |    4 +-
 packages/@react-spectrum/s2/src/index.ts      |    2 +-
 .../@react-spectrum/s2/src/style-utils.ts     |  147 +-
 .../s2/stories/Card.stories.tsx               |    2 +-
 .../s2/stories/Icon.stories.tsx               |   18 +-
 .../s2/stories/Tabs.stories.tsx               |    8 +-
 .../s2/style/__tests__/style-macro.test.js    |  140 +-
 packages/@react-spectrum/s2/style/index.ts    |   62 +-
 .../@react-spectrum/s2/style/properties.json  | 4179 ++++++++---------
 .../s2/style/spectrum-theme.ts                |  489 +-
 .../@react-spectrum/s2/style/style-macro.ts   |   56 +-
 packages/@react-spectrum/s2/style/tokens.ts   |   41 +-
 packages/@react-spectrum/s2/style/types.ts    |    4 +-
 packages/@react-spectrum/s2/ui-icons/Add.tsx  |   32 +-
 .../@react-spectrum/s2/ui-icons/Arrow.tsx     |   20 +-
 .../@react-spectrum/s2/ui-icons/Asterisk.tsx  |   24 +-
 .../@react-spectrum/s2/ui-icons/Checkmark.tsx |   36 +-
 .../@react-spectrum/s2/ui-icons/Chevron.tsx   |   36 +-
 .../s2/ui-icons/CornerTriangle.tsx            |   28 +-
 .../@react-spectrum/s2/ui-icons/Cross.tsx     |   40 +-
 packages/@react-spectrum/s2/ui-icons/Dash.tsx |   32 +-
 .../s2/ui-icons/DragHandle.tsx                |   28 +-
 .../@react-spectrum/s2/ui-icons/Gripper.tsx   |   16 +-
 .../@react-spectrum/s2/ui-icons/LinkOut.tsx   |   28 +-
 .../IconTransformer.js                        |    6 +-
 scripts/generateS2IconIndex.js                |   39 +-
 87 files changed, 3282 insertions(+), 3107 deletions(-)

diff --git a/.storybook-s2/docs/Colors.jsx b/.storybook-s2/docs/Colors.jsx
index a3db5085d1e..94ce908ebbf 100644
--- a/.storybook-s2/docs/Colors.jsx
+++ b/.storybook-s2/docs/Colors.jsx
@@ -9,7 +9,7 @@ export function Colors() {
       <Disclosure isQuiet>
         <DisclosureTitle>Background colors</DisclosureTitle>
         <DisclosurePanel>
-          <P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible. Some background colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
+          <P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.</P>
           <div className="sb-unstyled" style={{columnWidth: 120}}>
             <Color name="base" className={colorSwatch('base')} />
             <Color name="layer-1" className={colorSwatch('layer-1')} />
@@ -74,7 +74,7 @@ export function Colors() {
       <Disclosure isQuiet>
         <DisclosureTitle>Text colors</DisclosureTitle>
         <DisclosurePanel>
-          <P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible. Some text colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
+          <P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.</P>
           <div className="sb-unstyled" style={{columnWidth: 120}}>
             <Color name="accent" className={colorSwatch('accent', 'color')} />
             <Color name="neutral" className={colorSwatch('neutral', 'color')} />
diff --git a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
index 16be0b1a9a4..9bc2984a188 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx
@@ -41,7 +41,7 @@ let combinations = generatePowerset(states);
 const Template = (args) => {
   let {children, ...otherArgs} = args;
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
index 47bed3ae08e..b4bf1bcef1e 100644
--- a/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Badge.stories.tsx
@@ -38,7 +38,7 @@ let chunkSize = Math.ceil(combinations.length / 3);
 
 const Template = ({combos, ...args}) => {
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
index 85e3807b6cf..d8c72597c5b 100644
--- a/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx
@@ -50,7 +50,7 @@ let combinations = generatePowerset(states);
 
 const Template = () => {
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
index ae610256545..c3458ad719a 100644
--- a/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Button.stories.tsx
@@ -42,7 +42,7 @@ let combinations = generatePowerset(states);
 const Template = (args) => {
   let {children, ...otherArgs} = args;
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
index 94b33724833..29369c0a1e0 100644
--- a/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx
@@ -65,7 +65,7 @@ export const Horizontal = {
   render: Template,
   args: {
     combos: horizontalCombos,
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
   }
 };
 
@@ -81,6 +81,6 @@ export const Vertical = {
   render: Template,
   args: {
     combos: verticalCombos,
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
   }
 };
diff --git a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
index 1635e728712..2b18a1794ad 100644
--- a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
@@ -211,7 +211,7 @@ export const Collection = (args: any) => (
 export const PreviewOverlay = (args: any) => (
   <Card {...args}>
     <CardPreview>
-      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: '[1/1]', objectFit: 'cover', pointerEvents: 'none'})} />
+      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
       <Badge
         variant="positive"
         styles={style({
diff --git a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
index 01438e954fc..ccc666a4c15 100644
--- a/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx
@@ -39,7 +39,7 @@ let states = [
 
 const Template = ({combos, ...args}) => {
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
index d914ce16b1f..a1b03745164 100644
--- a/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx
@@ -65,7 +65,7 @@ export const Horizontal = {
   render: Template,
   args: {
     combos: chunks[0],
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
     orientation: 'horizontal'
   }
 };
@@ -106,7 +106,7 @@ export const Vertical = {
   render: Template,
   args: {
     combos: chunks[0],
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
     orientation: 'vertical'
   }
 };
@@ -157,7 +157,7 @@ export const ContextualHelpStories = {
   render: Template,
   args: {
     combos: contextualHelpChunks[0],
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
     orientation: 'horizontal',
     contextualHelp: (
       <ContextualHelp>
@@ -188,7 +188,7 @@ export const ContextualHelpVertical = {
   render: Template,
   args: {
     ...ContextualHelpStories.args,
-    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
+    containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
     orientation: 'vertical'
   }
 };
diff --git a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
index 9be6faf50de..be853ddf762 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx
@@ -36,7 +36,7 @@ let states = [
 
 const Template = ({combos, ...args}) => {
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combos.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
index e8a2728c24e..f537cad0c4b 100644
--- a/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx
@@ -41,7 +41,7 @@ let states = [
 let combinations = generatePowerset(states, (merged) => merged.label === null && (merged.showValueLabel === false || merged.contextualHelp));
 
 const Template = (args) => (
-  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
     {combinations.map(c => {
       let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -54,7 +54,7 @@ const Template = (args) => (
 );
 
 const VerticalTemplate = (args) => (
-  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+  <div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
     {combinations.map(c => {
       let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
       let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx b/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
index 44968d1cf44..bd9b8a0e360 100644
--- a/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx
@@ -47,7 +47,7 @@ let combinations = generatePowerset(states);
 
 const Template = ({...args}) => {
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
index 18347be713d..6263b5b6aea 100644
--- a/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx
@@ -46,7 +46,7 @@ let combinations = generatePowerset(states);
 const Template = (args) => {
   let {children, ...otherArgs} = args;
   return (
-    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
+    <div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
       {combinations.map(c => {
         let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
         let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 87e0042cbc1..70252e5fd72 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/packages/@react-spectrum/s2/src/ActionButton.tsx
@@ -15,9 +15,9 @@ import {AvatarContext} from './Avatar';
 import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
 import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
+import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
 import {IconContext} from './Icon';
 import {NotificationBadgeContext} from './NotificationBadge';
 import {pressScale} from './pressScale';
@@ -61,13 +61,12 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
 // These styles handle both ActionButton and ToggleButton
 const iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
 const textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
+const controlStyle = control({shape: 'default', icon: true});
 export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({
   ...focusRing(),
   ...staticColor(),
-  display: 'flex',
-  alignItems: 'center',
+  ...controlStyle,
   justifyContent: 'center',
-  columnGap: 'text-to-visual',
   flexShrink: {
     default: 1,
     isInGroup: 0
@@ -78,11 +77,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   flexBasis: {
     isJustified: 0
   },
-  font: 'control',
   fontWeight: 'medium',
   userSelect: 'none',
-  height: 'control',
-  minWidth: 'control',
   transition: 'default',
   forcedColorAdjust: 'none',
   backgroundColor: {
@@ -94,8 +90,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
       }
     },
     isSelected: {
-      default: 'neutral',
-      isEmphasized: 'accent',
+      default: baseColor('neutral'),
+      isEmphasized: baseColor('accent'),
       isDisabled: {
         default: 'gray-100',
         isQuiet: 'transparent'
@@ -124,7 +120,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
     }
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isSelected: {
       default: 'gray-25',
       isEmphasized: 'white'
@@ -153,68 +149,56 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
     forcedColors: 'Highlight'
   },
   borderStyle: 'none',
-  paddingX: {
-    default: 'edge-to-text',
-    [iconOnly]: 0
-  },
-  paddingY: 0,
   borderTopStartRadius: {
-    default: 'control',
+    default: controlStyle.borderRadius,
     density: {
       compact: {
         default: 'none',
-        ':first-child': 'control'
+        ':first-child': controlStyle.borderRadius
       }
     }
   },
   borderTopEndRadius: {
-    default: 'control',
+    default: controlStyle.borderRadius,
     density: {
       compact: {
         default: 'none',
         orientation: {
           horizontal: {
-            ':last-child': 'control'
+            ':last-child': controlStyle.borderRadius
           },
           vertical: {
-            ':first-child': 'control'
+            ':first-child': controlStyle.borderRadius
           }
         }
       }
     }
   },
   borderBottomStartRadius: {
-    default: 'control',
+    default: controlStyle.borderRadius,
     density: {
       compact: {
         default: 'none',
         orientation: {
           horizontal: {
-            ':first-child': 'control'
+            ':first-child': controlStyle.borderRadius
           },
           vertical: {
-            ':last-child': 'control'
+            ':last-child': controlStyle.borderRadius
           }
         }
       }
     }
   },
   borderBottomEndRadius: {
-    default: 'control',
+    default: controlStyle.borderRadius,
     density: {
       compact: {
         default: 'none',
-        ':last-child': 'control'
+        ':last-child': controlStyle.borderRadius
       }
     }
   },
-  '--iconMargin': {
-    type: 'marginTop',
-    value: {
-      default: fontRelative(-2),
-      [iconOnly]: 0
-    }
-  },
   zIndex: {
     isFocusVisible: 2
   },
@@ -222,17 +206,10 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   '--badgeTop': {
     type: 'top',
     value: {
-      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',
+      default: 'calc(self(height)/2 - var(--iconWidth)/2)',
       [textOnly]: 0
     }
   },
-  '--buttonPaddingX': {
-    type: 'paddingStart',
-    value: {
-      default: 'edge-to-text',
-      [iconOnly]: 0
-    }
-  },
   '--iconWidth': {
     type: 'width',
     value: fontRelative(20)
@@ -240,8 +217,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   '--badgePosition': {
     type: 'width',
     value: {
-      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',
-      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',
+      default: 'calc(self(paddingStart) + var(--iconWidth))',
+      [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
       [textOnly]: 'full'
     }
   }
@@ -302,7 +279,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
       <Provider
         values={[
           [SkeletonContext, null],
-          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+          [TextContext, {styles: style({order: 1, truncate: true})}],
           [IconContext, {
             render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
             styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
@@ -315,7 +292,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
             staticColor: staticColor,
             size: props.size === 'XS' ? undefined : props.size,
             isDisabled: props.isDisabled,
-            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})
+            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
           }]
         ]}>
         {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
index 28c485820fe..2bba0fa7b4b 100644
--- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx
+++ b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
@@ -39,7 +39,7 @@ export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroup
 
 const avatar = style({
   marginStart: {
-    default: '[calc(var(--size) / -4)]',
+    default: 'calc(var(--size) / -4)',
     ':first-child': 0
   }
 });
diff --git a/packages/@react-spectrum/s2/src/Badge.tsx b/packages/@react-spectrum/s2/src/Badge.tsx
index dff5cf65321..8766942111c 100644
--- a/packages/@react-spectrum/s2/src/Badge.tsx
+++ b/packages/@react-spectrum/s2/src/Badge.tsx
@@ -12,8 +12,8 @@
 
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';
+import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -58,34 +58,8 @@ export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, Bad
 export const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const badge = style<BadgeStyleProps>({
-  display: 'flex',
-  font: 'control',
+  ...control({shape: 'default', wrap: true, icon: true}),
   justifyContent: 'center',
-  alignItems: {
-    default: 'baseline',
-    ':has([slot=icon]:only-child)': 'center'
-  },
-  borderRadius: 'control',
-  minHeight: 'control',
-  paddingX: {
-    default: 'edge-to-text',
-    ':has([slot=icon]:only-child)': 0
-  },
-  '--labelPadding': {
-    type: 'paddingTop',
-    value: centerPadding()
-  },
-  aspectRatio: {
-    ':has([slot=icon]:only-child)': 'square'
-  },
-  '--iconMargin': {
-    type: 'marginTop',
-    value: {
-      default: fontRelative(-2),
-      ':has([slot=icon]:only-child)': 0
-    }
-  },
-  columnGap: 'text-to-visual',
   color: {
     fillStyle: {
       bold: {
@@ -166,7 +140,6 @@ const badge = style<BadgeStyleProps>({
     }
   },
   borderStyle: 'solid',
-  boxSizing: 'border-box',
   borderWidth: 2,
   borderColor: {
     default: 'transparent',
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index a8f696b0bf9..5436152eefd 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -25,13 +25,13 @@ import {
   Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
 import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
+import {baseColor, focusRing, size, style} from '../style' with { type: 'macro' };
 import ChevronIcon from '../ui-icons/Chevron';
 import {Collection, DOMRef, DOMRefValue, LinkDOMProps, Node} from '@react-types/shared';
+import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {focusRing, size, style} from '../style' with { type: 'macro' };
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {inertValue, useLayoutEffect} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -172,9 +172,9 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
       inert={inertValue(true)}
       ref={listRef}
       className={style({
-        display: '[inherit]',
-        gap: '[inherit]',
-        flexWrap: '[inherit]',
+        display: 'inherit',
+        gap: 'inherit',
+        flexWrap: 'inherit',
         position: 'absolute',
         top: 0,
         bottom: 0,
@@ -205,7 +205,7 @@ const breadcrumbStyles = style<BreadcrumbsStyleProps & {isMenu?: boolean, isCurr
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'start',
-  height: 'control',
+  height: controlSize(),
   transition: 'default',
   position: 'relative',
   flexShrink: 0,
@@ -249,11 +249,11 @@ const chevronStyles = style({
 const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolean}>({
   ...focusRing(),
   borderRadius: 'sm',
-  font: 'control',
+  font: controlFont(),
   color: {
-    default: 'neutral-subdued',
+    default: baseColor('neutral-subdued'),
     isDisabled: 'disabled',
-    isCurrent: 'neutral',
+    isCurrent: baseColor('neutral'),
     forcedColors: {
       default: 'LinkText',
       isDisabled: 'GrayText',
@@ -279,7 +279,7 @@ const linkStyles = style<LinkRenderProps & {size?: 'M' | 'L', isCurrent?: boolea
 });
 
 const currentStyles = style<{size: string}>({
-  font: 'control',
+  font: controlFont(),
   fontWeight: 'bold'
 });
 
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 2e7830c985f..21c9a8a1384 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/packages/@react-spectrum/s2/src/Button.tsx
@@ -13,7 +13,7 @@
 import {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};
 import {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
+import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {IconContext} from './Icon';
@@ -64,38 +64,17 @@ export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' |
 export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({
   ...focusRing(),
   ...staticColor(),
+  ...control({shape: 'pill', wrap: true, icon: true}),
   position: 'relative',
-  display: 'flex',
-  alignItems: {
-    default: 'baseline',
-    [iconOnly]: 'center'
-  },
   justifyContent: 'center',
   textAlign: 'start',
-  columnGap: 'text-to-visual',
-  font: 'control',
   fontWeight: 'bold',
   userSelect: 'none',
-  minHeight: 'control',
-  minWidth: {
-    [iconOnly]: 'control'
-  },
-  borderRadius: 'pill',
-  boxSizing: 'border-box',
   width: 'fit',
   textDecoration: 'none', // for link buttons
-  paddingX: {
-    default: 'pill',
-    [iconOnly]: 0
-  },
-  paddingY: 0,
-  aspectRatio: {
-    [iconOnly]: 'square'
-  },
   transition: 'default',
   borderStyle: 'solid',
   borderWidth: {
@@ -108,17 +87,6 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       genai: 0
     }
   },
-  '--labelPadding': {
-    type: 'paddingTop',
-    value: centerPadding()
-  },
-  '--iconMargin': {
-    type: 'marginTop',
-    value: {
-      default: fontRelative(-2),
-      [iconOnly]: 0
-    }
-  },
   borderColor: {
     variant: {
       primary: baseColor('gray-800'),
@@ -142,10 +110,10 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
     fillStyle: {
       fill: {
         variant: {
-          primary: 'neutral',
+          primary: baseColor('neutral'),
           secondary: baseColor('gray-100'),
-          accent: 'accent',
-          negative: 'negative',
+          accent: baseColor('accent'),
+          negative: baseColor('negative'),
           premium: 'gray-100',
           genai: 'gray-100'
         },
@@ -215,7 +183,7 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
       fill: {
         variant: {
           primary: 'gray-25',
-          secondary: 'neutral',
+          secondary: baseColor('neutral'),
           accent: 'white',
           negative: 'white',
           premium: 'white',
@@ -224,7 +192,7 @@ const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: bool
         isDisabled: 'disabled'
       },
       outline: {
-        default: 'neutral',
+        default: baseColor('neutral'),
         variant: {
           premium: 'white',
           genai: 'white'
@@ -286,7 +254,7 @@ const gradient = style({
   inset: 0,
   zIndex: -1,
   transition: 'default',
-  borderRadius: '[inherit]',
+  borderRadius: 'inherit',
   backgroundImage: {
     variant: {
       premium: {
@@ -414,8 +382,8 @@ export const Button = forwardRef(function Button(props: ButtonProps, ref: Focusa
             <div
               className={style({
                 position: 'absolute',
-                top: '[50%]',
-                left: '[50%]',
+                top: '50%',
+                left: '50%',
                 transform: 'translate(-50%, -50%)',
                 opacity: {
                   default: 0,
diff --git a/packages/@react-spectrum/s2/src/Card.tsx b/packages/@react-spectrum/s2/src/Card.tsx
index 907a2f76962..b737c1505fc 100644
--- a/packages/@react-spectrum/s2/src/Card.tsx
+++ b/packages/@react-spectrum/s2/src/Card.tsx
@@ -14,14 +14,13 @@ import {ActionMenuContext} from './ActionMenu';
 import {AvatarContext} from './Avatar';
 import {ButtonContext, LinkButtonContext} from './Button';
 import {Checkbox} from './Checkbox';
-import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {color, focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';
 import {ContentContext, FooterContext, TextContext} from './Content';
 import {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';
 import {DividerContext} from './Divider';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps, inertValue} from '@react-aria/utils';
-import {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
 import {ImageContext} from './Image';
@@ -96,9 +95,9 @@ let card = style({
     variant: {
       tertiary: {
         // Render border with box-shadow to avoid affecting layout.
-        default: `[0 0 0 1px ${colorToken('gray-100')}]`,
-        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,
-        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,
+        default: `[0 0 0 1px ${color('gray-100')}]`,
+        isHovered: `[0 0 0 1px ${color('gray-200')}]`,
+        isFocusVisible: `[0 0 0 1px ${color('gray-200')}]`,
         isSelected: 'none',
         forcedColors: '[0 0 0 1px ButtonBorder]'
       },
@@ -139,7 +138,7 @@ let card = style({
       density: {
         compact: {
           size: {
-            XS: space(6),
+            XS: '[6px]',
             S: 8,
             M: 12,
             L: 16,
@@ -228,10 +227,10 @@ let preview = style({
   position: 'relative',
   transition: 'default',
   overflow: 'clip',
-  marginX: '[calc(var(--card-padding-x) * -1)]',
-  marginTop: '[calc(var(--card-padding-y) * -1)]',
+  marginX: 'calc(var(--card-padding-x) * -1)',
+  marginTop: 'calc(var(--card-padding-y) * -1)',
   marginBottom: {
-    ':last-child': '[calc(var(--card-padding-y) * -1)]'
+    ':last-child': 'calc(var(--card-padding-y) * -1)'
   },
   borderRadius: {
     isQuiet: borderRadius
@@ -254,7 +253,7 @@ let preview = style({
 
 const image = style({
   width: 'full',
-  aspectRatio: '[3/2]',
+  aspectRatio: '3/2',
   objectFit: 'cover',
   userSelect: 'none',
   pointerEvents: 'none'
@@ -326,7 +325,7 @@ let content = style({
     ':first-child': 0
   },
   paddingBottom: {
-    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    default: 'calc(var(--card-spacing) * 1.5 / 2)',
     ':last-child': 0
   }
 });
@@ -335,7 +334,7 @@ let actionMenu = style({
   gridArea: 'menu',
   // Don't cause the row to expand, preserve gap between title and description text.
   // Would use -100% here but it doesn't work in Firefox.
-  marginY: '[calc(-1 * self(height))]'
+  marginY: 'calc(-1 * self(height))'
 });
 
 let footer = style({
@@ -344,7 +343,7 @@ let footer = style({
   alignItems: 'end',
   justifyContent: 'space-between',
   gap: 8,
-  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+  paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
 export const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');
@@ -512,7 +511,7 @@ export const CardPreview = forwardRef(function CardPreview(props: CardPreviewPro
       style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>
       {isQuiet && <SelectionIndicator />}
       {isQuiet && isCheckboxSelection && <CardCheckbox />}
-      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>
+      <div className={style({borderRadius: 'inherit', overflow: 'clip'})}>
         {props.children}
       </div>
     </div>
@@ -535,7 +534,7 @@ const collectionImage = style({
   width: 'full',
   aspectRatio: {
     default: 'square',
-    ':nth-last-child(4):first-child': '[3/2]'
+    ':nth-last-child(4):first-child': '3/2'
   },
   gridColumnEnd: {
     ':nth-last-child(4):first-child': 'span 3'
@@ -597,7 +596,7 @@ export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, re
                 height: 'auto',
                 maxSize: 160,
                 // TODO: this is made up.
-                width: '[50%]'
+                width: '50%'
               })
             }]
           ]}>
@@ -632,7 +631,7 @@ export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMR
               alt: '',
               styles: style({
                 width: 'full',
-                aspectRatio: '[3/1]',
+                aspectRatio: '3/1',
                 objectFit: 'cover',
                 pointerEvents: 'none',
                 userSelect: 'none'
@@ -641,13 +640,13 @@ export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMR
             [AvatarContext, {
               size: avatarSize[size],
               UNSAFE_style: {
-                '--size': avatarSize[size] + 'px'
+                '--size': (avatarSize[size] / 16) + 'rem'
               } as CSSProperties,
               styles: style({
                 position: 'relative',
                 marginTop: {
                   default: 0,
-                  ':is([slot=preview] + *)': '[calc(var(--size) / -2)]'
+                  ':is([slot=preview] + *)': 'calc(var(--size) / -2)'
                 }
               }),
               isOverBackground: true
@@ -686,7 +685,7 @@ export const ProductCard = forwardRef(function ProductCard(props: ProductCardPro
                   alt: '',
                   styles: style({
                     width: 'full',
-                    aspectRatio: '[5/1]',
+                    aspectRatio: '5/1',
                     objectFit: 'cover',
                     pointerEvents: 'none',
                     userSelect: 'none'
@@ -717,7 +716,7 @@ export const ProductCard = forwardRef(function ProductCard(props: ProductCardPro
                     objectFit: 'cover',
                     marginTop: {
                       default: 0,
-                      ':is([slot=preview] + *)': '[calc(self(height) / -2)]'
+                      ':is([slot=preview] + *)': 'calc(self(height) / -2)'
                     },
                     outlineStyle: 'solid',
                     outlineWidth: {
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 13285aff9b2..2a0540b6f17 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/packages/@react-spectrum/s2/src/Checkbox.tsx
@@ -11,14 +11,14 @@
  */
 
 import {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';
-import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import CheckmarkIcon from '../ui-icons/Checkmark';
+import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -49,10 +49,10 @@ const wrapper = style({
   columnGap: 'text-to-control',
   alignItems: 'baseline',
   width: 'fit',
-  font: 'control',
+  font: controlFont(),
   transition: 'colors',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
@@ -66,13 +66,13 @@ const wrapper = style({
 
 export const box = style<RenderProps>({
   ...focusRing(),
-  size: 'control-sm',
-  borderRadius: 'control-sm',
+  ...controlBorderRadius('sm'),
+  size: controlSize('sm'),
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  borderWidth: 2,
+  borderWidth: space(2),
   boxSizing: 'border-box',
   borderStyle: 'solid',
   transition: 'default',
@@ -81,7 +81,7 @@ export const box = style<RenderProps>({
     default: 'gray-25',
     forcedColors: 'Background',
     isSelected: {
-      default: 'neutral',
+      default: baseColor('neutral'),
       isEmphasized: baseColor('accent-900'),
       forcedColors: 'Highlight',
       isInvalid: {
@@ -98,7 +98,7 @@ export const box = style<RenderProps>({
     default: baseColor('gray-800'),
     forcedColors: 'ButtonBorder',
     isInvalid: {
-      default: 'negative',
+      default: baseColor('negative'),
       forcedColors: 'Mark'
     },
     isDisabled: {
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index 2d414eb4b0a..8ccf4f5e777 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -85,7 +85,7 @@ export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGr
         // Double the usual gap because of the internal padding within checkbox that spectrum has.
         '--field-gap': {
           type: 'rowGap',
-          value: '[calc(var(--field-height) - 1lh)]'
+          value: 'calc(var(--field-height) - 1lh)'
         }
       }, getAllowedOverrides())({
         size: props.size,
diff --git a/packages/@react-spectrum/s2/src/ClearButton.tsx b/packages/@react-spectrum/s2/src/ClearButton.tsx
index 11c06ee674a..8130101c119 100644
--- a/packages/@react-spectrum/s2/src/ClearButton.tsx
+++ b/packages/@react-spectrum/s2/src/ClearButton.tsx
@@ -15,6 +15,7 @@ import {
   ButtonProps,
   ButtonRenderProps
 } from 'react-aria-components';
+import {controlSize} from './style-utils' with {type: 'macro'};
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef} from '@react-types/shared';
 import {forwardRef} from 'react';
@@ -45,13 +46,13 @@ export const ClearButton = forwardRef(function ClearButton(props: ClearButtonPro
         alignItems: 'center',
         justifyContent: 'center',
         height: 'full',
-        width: 'control',
+        width: controlSize(),
         flexShrink: 0,
         borderStyle: 'none',
         outlineStyle: 'none',
         backgroundColor: 'transparent',
         padding: 0,
-        color: '[inherit]',
+        color: 'inherit',
         '--iconPrimary': {
           type: 'fill',
           value: 'currentColor'
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index bb091ffb3ca..ec981959ef2 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/packages/@react-spectrum/s2/src/CloseButton.tsx
@@ -12,10 +12,10 @@
 
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {Button, ButtonProps, ContextValue} from 'react-aria-components';
+import {controlSize, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
@@ -45,7 +45,7 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  size: 'control',
+  size: controlSize(),
   flexShrink: 0,
   borderRadius: 'full',
   padding: 0,
@@ -60,7 +60,7 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
   '--iconPrimary': {
     type: 'color',
     value: {
-      default: 'neutral',
+      default: baseColor('neutral'),
       isDisabled: 'disabled',
       isStaticColor: {
         default: baseColor('transparent-overlay-800'),
diff --git a/packages/@react-spectrum/s2/src/CoachMark.tsx b/packages/@react-spectrum/s2/src/CoachMark.tsx
index 4edb0a55c84..20bdbcc7dfd 100644
--- a/packages/@react-spectrum/s2/src/CoachMark.tsx
+++ b/packages/@react-spectrum/s2/src/CoachMark.tsx
@@ -136,7 +136,7 @@ let popover = style({
     }
   },
   // Don't be larger than full screen minus 2 * containerPadding
-  maxWidth: '[calc(100vw - 24px)]',
+  maxWidth: 'calc(100vw - 24px)',
   boxSizing: 'border-box',
   translateY: {
     placement: {
@@ -203,7 +203,7 @@ let popover = style({
 
 const image = style({
   width: 'full',
-  aspectRatio: '[3/2]',
+  aspectRatio: '3/2',
   objectFit: 'cover',
   userSelect: 'none',
   pointerEvents: 'none'
@@ -291,7 +291,7 @@ let content = style({
     ':first-child': 0
   },
   paddingBottom: {
-    default: '[calc(var(--card-spacing) * 1.5 / 2)]',
+    default: 'calc(var(--card-spacing) * 1.5 / 2)',
     ':last-child': 0
   }
 });
@@ -300,7 +300,7 @@ let actionMenu = style({
   gridArea: 'menu',
   // Don't cause the row to expand, preserve gap between title and description text.
   // Would use -100% here but it doesn't work in Firefox.
-  marginY: '[calc(-1 * self(height))]'
+  marginY: 'calc(-1 * self(height))'
 });
 
 let footer = style({
@@ -309,7 +309,7 @@ let footer = style({
   alignItems: 'end',
   justifyContent: 'space-between',
   gap: 8,
-  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'
+  paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
 const actionButtonSize = {
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index 87d9b07d279..8e373009287 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSlider.tsx
@@ -19,10 +19,10 @@ import {
   useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
+import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, useRef} from 'react';
 import {DOMRef, DOMRefValue, SpectrumLabelableProps} from '@react-types/shared';
 import {FieldLabel} from './Field';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -88,7 +88,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
           <SliderOutput
             className={style({
               gridArea: 'output',
-              font: 'control',
+              font: controlFont(),
               cursor: 'default',
               color: {
                 default: 'neutral-subdued',
diff --git a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
index 53a0acab545..9028a4f65e4 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
+++ b/packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx
@@ -110,7 +110,7 @@ function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchPro
               outlineWidth: 2,
               outlineOffset: -4,
               forcedColorAdjust: 'none',
-              borderRadius: '[inherit]'
+              borderRadius: 'inherit'
             })} />
         )}
       </>)}
diff --git a/packages/@react-spectrum/s2/src/ComboBox.tsx b/packages/@react-spectrum/s2/src/ComboBox.tsx
index 99439d91e38..cdd7f71d35d 100644
--- a/packages/@react-spectrum/s2/src/ComboBox.tsx
+++ b/packages/@react-spectrum/s2/src/ComboBox.tsx
@@ -42,9 +42,9 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
+import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
@@ -97,11 +97,11 @@ export interface ComboBoxProps<T extends object> extends
 export const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({
+  ...controlBorderRadius('sm'),
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
   borderStyle: 'none',
-  borderRadius: 'control-sm',
   alignItems: 'center',
   justifyContent: 'center',
   size: {
@@ -131,11 +131,9 @@ const inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M'
     }
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled',
-    forcedColors: {
-      default: 'ButtonFace'
-    }
+    forcedColors: 'ButtonFace'
   }
 });
 
@@ -255,7 +253,7 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
                 // better way to do this one? it's not actually half, they are
                 // [9, 4], [12, 6], [15, 8], [18, 8]
                 // also noticed that our measurement is including the border, making the padding too much
-                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'
+                paddingEnd: 'calc(self(height, self(minHeight)) * 3 / 16)'
               })({size})}>
               <InputContext.Consumer>
                 {ctx => (
@@ -300,8 +298,8 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
                 '--trigger-width': `calc(${triggerWidth} - 2px)`
               } as CSSProperties}
               styles={style({
-                minWidth: '[var(--trigger-width)]',
-                width: '[var(--trigger-width)]'
+                minWidth: '--trigger-width',
+                width: '--trigger-width'
               })}>
               <Provider
                 values={[
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 8c9b48167a3..f7a95c2775c 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -104,7 +104,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         crossOffset={crossOffset}
         hideArrow
         styles={popover}>
-        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>
+        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
           <Provider
             values={[
               [TextContext, {
diff --git a/packages/@react-spectrum/s2/src/CustomDialog.tsx b/packages/@react-spectrum/s2/src/CustomDialog.tsx
index 8a74236281e..ea9e03ed417 100644
--- a/packages/@react-spectrum/s2/src/CustomDialog.tsx
+++ b/packages/@react-spectrum/s2/src/CustomDialog.tsx
@@ -48,11 +48,11 @@ const dialogStyle = style({
   },
   boxSizing: 'border-box',
   outlineStyle: 'none',
-  borderRadius: '[inherit]',
+  borderRadius: 'inherit',
   overflow: 'auto',
   position: 'relative',
   size: 'full',
-  maxSize: '[inherit]'
+  maxSize: 'inherit'
 }, getAllowedOverrides({height: true}));
 
 /**
diff --git a/packages/@react-spectrum/s2/src/Dialog.tsx b/packages/@react-spectrum/s2/src/Dialog.tsx
index 47db8fd25cf..9cbbc841d6c 100644
--- a/packages/@react-spectrum/s2/src/Dialog.tsx
+++ b/packages/@react-spectrum/s2/src/Dialog.tsx
@@ -41,6 +41,7 @@ export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>
 const image = style({
   width: 'full',
   height: 140,
+  flexShrink: 0,
   objectFit: 'cover'
 });
 
@@ -59,11 +60,11 @@ const content =  style({
   overflowY: {
     default: 'auto',
     // Make the whole dialog scroll rather than only the content when the height it small.
-    '@media (height < 400)': 'visible'
+    [`@media (height < ${400 / 16}rem)`]: 'visible'
   },
   font: 'body',
   // TODO: adjust margin on mobile?
-  marginX: {
+  paddingX: {
     default: 32
   }
 });
@@ -82,11 +83,11 @@ export const dialogInner = style({
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
-  maxHeight: '[inherit]',
+  maxHeight: 'inherit',
   boxSizing: 'border-box',
   outlineStyle: 'none',
   fontFamily: 'sans',
-  borderRadius: '[inherit]',
+  borderRadius: 'inherit',
   overflow: 'auto'
 });
 
@@ -129,14 +130,14 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                 display: 'flex',
                 alignItems: 'start',
                 columnGap: 12,
-                marginStart: {
+                paddingStart: {
                   default: 32
                 },
-                marginEnd: {
+                paddingEnd: {
                   default: 32,
                   isDismissible: 12
                 },
-                marginTop: {
+                paddingTop: {
                   default: 12 // margin to dismiss button
                 }
               })({isDismissible: props.isDismissible})}>
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 426a6da965d..bddb06cc2fb 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/packages/@react-spectrum/s2/src/Disclosure.tsx
@@ -12,12 +12,12 @@
 
 import {ActionButtonContext} from './ActionButton';
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';
+import {baseColor, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
 import {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';
 import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import {focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -124,7 +124,7 @@ const buttonStyles = style({
   outlineOffset: -2,
   font: 'heading',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   },
   fontWeight: 'bold',
@@ -140,9 +140,9 @@ const buttonStyles = style({
   display: 'flex',
   flexGrow: 1,
   alignItems: 'baseline',
-  paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',
+  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
   paddingY: centerPadding(),
-  gap: '[calc(self(minHeight) * 3/8 - 1px)]',
+  gap: 'calc(self(minHeight) * 3/8 - 1px)',
   minHeight: {
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
@@ -188,8 +188,8 @@ const buttonStyles = style({
   borderRadius: {
     // Only rounded for keyboard focus and quiet.
     default: 'none',
-    isFocusVisible: 'control',
-    isQuiet: 'control'
+    isFocusVisible: 'default',
+    isQuiet: 'default'
   },
   textAlign: 'start',
   disableTapHighlight: true
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index 8bea944c2a3..63e0149136a 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/packages/@react-spectrum/s2/src/DropZone.tsx
@@ -86,7 +86,7 @@ const banner = style({
   borderRadius: 'default',
   color: 'white',
   fontWeight: 'bold',
-  padding: '[calc((self(minHeight))/1.5)]'
+  padding: 'calc((self(minHeight))/1.5)'
 });
 
 /**
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 5c1d45efe3d..d4bbe520d38 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -17,7 +17,7 @@ import {baseColor, focusRing, fontRelative, style} from '../style' with {type: '
 import {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';
 import {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';
 import {ContextualHelpContext} from './ContextualHelp';
-import {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {ForwardedRef, forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -157,20 +157,14 @@ interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'chil
 
 const fieldGroupStyles = style({
   ...focusRing(),
+  ...control({shape: 'default'}),
   ...fieldInput(),
-  display: 'flex',
-  alignItems: 'center',
-  height: 'control',
-  boxSizing: 'border-box',
-  paddingX: 'edge-to-text',
-  font: 'control',
-  borderRadius: 'control',
   borderWidth: 2,
   borderStyle: 'solid',
   transition: 'default',
   borderColor: {
     default: baseColor('gray-300'),
-    isInvalid: 'negative',
+    isInvalid: baseColor('negative'),
     isFocusWithin: {
       default: 'gray-900',
       isInvalid: 'negative-1000',
@@ -183,7 +177,7 @@ const fieldGroupStyles = style({
   },
   backgroundColor: 'gray-25',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   },
   cursor: {
@@ -230,10 +224,10 @@ export const Input = forwardRef(function Input(props: InputProps, ref: Forwarded
       className={UNSAFE_className + mergeStyles(style({
         padding: 0,
         backgroundColor: 'transparent',
-        color: '[inherit]',
-        fontFamily: '[inherit]',
-        fontSize: '[inherit]',
-        fontWeight: '[inherit]',
+        color: 'inherit',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
         flexGrow: 1,
         flexShrink: 1,
         minWidth: 0,
@@ -253,12 +247,12 @@ interface HelpTextProps extends FieldErrorProps {
   showErrorIcon?: boolean
 }
 
-const helpTextStyles = style({
+export const helpTextStyles = style({
   gridArea: 'helptext',
   display: 'flex',
   alignItems: 'baseline',
   gap: 'text-to-visual',
-  font: 'control',
+  font: controlFont(),
   color: {
     default: 'neutral-subdued',
     isInvalid: 'negative',
diff --git a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
index 1c71f2ee83e..d46c31210a5 100644
--- a/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
+++ b/packages/@react-spectrum/s2/src/FullscreenDialog.tsx
@@ -52,7 +52,7 @@ const content =  style({
   overflowY: {
     default: 'auto',
     // Make the whole dialog scroll rather than only the content when the height it small.
-    '@media (height < 400)': 'visible'
+    [`@media (height < ${400 / 16}rem)`]: 'visible'
   },
   font: 'body'
 });
@@ -108,12 +108,12 @@ export const dialogInner = style({
     default: 16,
     sm: 24
   },
-  maxHeight: '[inherit]',
+  maxHeight: 'inherit',
   height: 'full',
   boxSizing: 'border-box',
   outlineStyle: 'none',
   fontFamily: 'sans',
-  borderRadius: '[inherit]',
+  borderRadius: 'inherit',
   overflow: 'auto'
 });
 
diff --git a/packages/@react-spectrum/s2/src/Icon.tsx b/packages/@react-spectrum/s2/src/Icon.tsx
index 42f54df7d0f..c1c56833fc3 100644
--- a/packages/@react-spectrum/s2/src/Icon.tsx
+++ b/packages/@react-spectrum/s2/src/Icon.tsx
@@ -13,13 +13,51 @@
 import {AriaLabelingProps, DOMProps} from '@react-types/shared';
 import {ComponentType, Context, createContext, FunctionComponent, ReactNode, SVGProps, useRef} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {mergeStyles} from '../style/runtime';
 import {SkeletonWrapper, useSkeletonIcon} from './Skeleton';
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
+// Custom list of overrides, excluding width/height/flexGrow/flexShrink/flexBasis
+const allowedOverrides = [
+  'margin',
+  'marginStart',
+  'marginEnd',
+  'marginTop',
+  'marginBottom',
+  'marginX',
+  'marginY',
+  'justifySelf',
+  'alignSelf',
+  'order',
+  'gridArea',
+  'gridRowStart',
+  'gridRowEnd',
+  'gridColumnStart',
+  'gridColumnEnd',
+  'position',
+  'zIndex',
+  'top',
+  'bottom',
+  'inset',
+  'insetX',
+  'insetY',
+  'insetStart',
+  'insetEnd',
+  'rotate',
+  '--iconPrimary',
+  'size'
+] as const;
+
+// Omit --iconPrimary and size from type (they are private).
+// Use the iconStyle() macro to apply them.
+type AllowedOverrides = Exclude<(typeof allowedOverrides)[number], '--iconPrimary' | 'size'>;
+
 export interface IconProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
-  'aria-hidden'?: boolean | 'false' | 'true'
+  'aria-hidden'?: boolean | 'false' | 'true',
+  styles?: StyleString<AllowedOverrides>
 }
 
 export interface IconContextValue extends UnsafeStyles, SlotProps {
@@ -27,6 +65,12 @@ export interface IconContextValue extends UnsafeStyles, SlotProps {
   render?: (icon: ReactNode) => ReactNode
 }
 
+export interface IllustrationProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
+  'aria-hidden'?: boolean | 'false' | 'true',
+  size?: 'S' | 'M' | 'L',
+  styles?: StyleString<AllowedOverrides>
+}
+
 export interface IllustrationContextValue extends IconContextValue {
   size?: 'S' | 'M' | 'L'
 }
@@ -34,19 +78,25 @@ export interface IllustrationContextValue extends IconContextValue {
 export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
 export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
 
+const iconStyles = style({
+  size: 20,
+  flexShrink: 0
+}, allowedOverrides);
+
 export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext): FunctionComponent<IconProps> {
   return (props: IconProps) => {
     let ref = useRef<SVGElement>(null);
     let ctx;
     // TODO: remove this default once we release RAC and use DEFAULT_SLOT.
     [ctx, ref] = useSpectrumContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, context);
-    let {render, styles} = ctx;
+    let {render, styles: ctxStyles} = ctx;
     let {
       UNSAFE_className,
       UNSAFE_style,
       slot,
       'aria-label': ariaLabel,
       'aria-hidden': ariaHidden,
+      styles,
       ...otherProps
     } = props;
 
@@ -63,7 +113,7 @@ export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, co
           aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
           role="img"
           data-slot={slot}
-          className={(UNSAFE_className ?? '') + ' ' + useSkeletonIcon(styles)}
+          className={(UNSAFE_className ?? '') + ' ' + useSkeletonIcon(mergeStyles(iconStyles(null, styles), ctxStyles))}
           style={UNSAFE_style} />
       </SkeletonWrapper>
     );
@@ -75,3 +125,57 @@ export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, co
     return svg;
   };
 }
+
+const illustrationStyles = style({
+  size: {
+    size: {
+      S: 48,
+      M: 96,
+      L: 160
+    }
+  },
+  flexShrink: 0
+}, allowedOverrides);
+
+export function createIllustration(Component: ComponentType<SVGProps<SVGSVGElement>>): FunctionComponent<IllustrationProps> {
+  return (props: IllustrationProps) => {
+    let ref = useRef<SVGElement>(null);
+    let ctx;
+    [ctx, ref] = useSpectrumContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, IllustrationContext);
+    let {render, styles: ctxStyles} = ctx;
+    let {
+      UNSAFE_className,
+      UNSAFE_style,
+      slot,
+      'aria-label': ariaLabel,
+      'aria-hidden': ariaHidden,
+      size = ctx.size || 'M',
+      styles,
+      ...otherProps
+    } = props;
+
+    if (!ariaHidden) {
+      ariaHidden = undefined;
+    }
+
+    let svg = (
+      <Component
+        {...otherProps}
+        // @ts-ignore
+        size={size}
+        focusable={false}
+        aria-label={ariaLabel}
+        aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
+        role="img"
+        data-slot={slot}
+        className={(UNSAFE_className ?? '') + ' ' + illustrationStyles({size}, styles) + (ctxStyles || '')}
+        style={UNSAFE_style} />
+    );
+
+    if (render) {
+      return render(svg);
+    }
+
+    return svg;
+  };
+}
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index 53908b2c23a..a7de53690e9 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
@@ -13,10 +13,10 @@
 import {ButtonGroupContext} from './ButtonGroup';
 import {ContentContext, HeadingContext} from './Content';
 import {ContextValue, Provider} from 'react-aria-components';
+import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IllustrationContext} from './Icon';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -46,8 +46,7 @@ interface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, Illu
 
 const illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({
   display: 'grid',
-  fontFamily: 'sans',
-  fontSize: 'control',
+  font: controlFont(),
   maxWidth: {
     orientation: {
       vertical: 380,
@@ -103,13 +102,6 @@ const illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?:
 
 const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({
   gridArea: 'illustration',
-  size: {
-    size: {
-      S: 96,
-      M: 96,
-      L: 160
-    }
-  },
   alignSelf: 'center',
   '--iconPrimary': {
     type: 'color',
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
index 0971c8bb873..7e8f875099d 100644
--- a/packages/@react-spectrum/s2/src/Image.tsx
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -120,8 +120,8 @@ const imgStyles = style({
   display: 'block',
   width: 'full',
   height: 'full',
-  objectFit: '[inherit]',
-  objectPosition: '[inherit]',
+  objectFit: 'inherit',
+  objectPosition: 'inherit',
   opacity: {
     default: 0,
     isRevealed: 1
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index 3b0ab4181b5..c218555ed57 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
 import {useFocusableRef} from '@react-spectrum/utils';
@@ -49,8 +49,8 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isSt
   },
   color: {
     variant: {
-      primary: 'accent',
-      secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?
+      primary: baseColor('accent'),
+      secondary: baseColor('neutral') // TODO: should there be an option to inherit from the paragraph? What about hover states?
     },
     isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'LinkText'
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 7dacfbba746..0a0ef699749 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -31,7 +31,7 @@ import {
 import {baseColor, edgeToText, focusRing, fontRelative, size, space, style} from '../style' with {type: 'macro'};
 import {box, iconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, control, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
 import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
@@ -104,7 +104,7 @@ export let menu = style({
   display: 'grid',
   gridTemplateColumns: menuItemGrid,
   boxSizing: 'border-box',
-  maxHeight: '[inherit]',
+  maxHeight: 'inherit',
   width: 'full',
   overflow: {
     isPopover: 'auto'
@@ -116,7 +116,7 @@ export let menu = style({
     isPopover: 8
   },
   fontFamily: 'sans',
-  fontSize: 'control',
+  fontSize: controlFont(),
   gridAutoRows: 'min-content'
 }, getAllowedOverrides());
 
@@ -137,7 +137,7 @@ export let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
   gridColumnStart: 2,
   gridColumnEnd: -2,
   boxSizing: 'border-box',
-  minHeight: 'control',
+  minHeight: controlSize(),
   paddingY: centerPadding()
 });
 
@@ -149,13 +149,9 @@ export let sectionHeading = style({
 
 export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> & {isFocused: boolean, size: 'S' | 'M' | 'L' | 'XL', isLink?: boolean, hasSubmenu?: boolean, isOpen?: boolean}>({
   ...focusRing(),
-  boxSizing: 'border-box',
-  borderRadius: 'control',
-  font: 'control',
-  '--labelPadding': {
-    type: 'paddingTop',
-    value: centerPadding()
-  },
+  ...control({shape: 'default', wrap: true, icon: true}),
+  columnGap: 0,
+  paddingX: 0,
   paddingBottom: '--labelPadding',
   backgroundColor: { // TODO: revisit color when I have access to dev mode again
     default: {
@@ -164,7 +160,7 @@ export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> &
     }
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
@@ -188,8 +184,6 @@ export let menuitem = style<Omit<MenuItemRenderProps, 'hasSubmenu' | 'isOpen'> &
   rowGap: {
     ':has([slot=description])': space(1)
   },
-  alignItems: 'baseline',
-  minHeight: 'control',
   height: 'min',
   textDecoration: 'none',
   cursor: {
@@ -205,7 +199,7 @@ export let checkmark = style({
     isSelected: 'visible'
   },
   gridArea: 'checkmark',
-  color: 'accent',
+  color: baseColor('accent'),
   '--iconPrimary': {
     type: 'fill',
     value: {
@@ -261,8 +255,8 @@ let image = style({
 
 export let label = style<{size: string}>({
   gridArea: 'label',
-  font: 'control',
-  color: '[inherit]',
+  font: controlFont(),
+  color: 'inherit',
   fontWeight: 'medium',
   // TODO: token values for padding not defined yet, revisit
   marginTop: '--labelPadding'
@@ -280,7 +274,7 @@ export let description = style({
     }
   },
   color: {
-    default: 'neutral-subdued',
+    default: baseColor('neutral-subdued'),
     // Ideally this would use the same token as hover, but we don't have access to that here.
     // TODO: should we always consider isHovered and isFocused to be the same thing?
     isFocused: 'gray-800',
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index b8b9350a38c..dc5a5af0812 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -86,25 +86,25 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
               S: 336,
               M: 416,
               L: 576,
-              fullscreen: '[calc(100% - 40px)]',
+              fullscreen: 'calc(100% - 40px)',
               fullscreenTakeover: 'full'
             }
           },
           height: {
             size: {
-              fullscreen: '[calc(100% - 40px)]',
+              fullscreen: 'calc(100% - 40px)',
               fullscreenTakeover: 'full'
             }
           },
           maxWidth: {
-            default: '[90vw]',
+            default: '90vw',
             size: {
               fullscreen: 'none',
               fullscreenTakeover: 'none'
             }
           },
           maxHeight: {
-            default: '[90vh]',
+            default: '90vh',
             size: {
               fullscreen: 'none',
               fullscreenTakeover: 'none'
diff --git a/packages/@react-spectrum/s2/src/NotificationBadge.tsx b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
index 961d8f20553..a2d86d8ef90 100644
--- a/packages/@react-spectrum/s2/src/NotificationBadge.tsx
+++ b/packages/@react-spectrum/s2/src/NotificationBadge.tsx
@@ -51,7 +51,7 @@ const badge = style({
     default: 'flex',
     isDisabled: 'none'
   },
-  font: 'control',
+  font: 'ui',
   color: {
     default: 'white',
     isStaticColor: 'auto',
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index 970a477b92b..77f9868331a 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -23,10 +23,10 @@ import {
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
+import {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import Dash from '../ui-icons/Dash';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';
 import {FormContext} from './Form';
@@ -58,30 +58,11 @@ export interface NumberFieldProps extends
 export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
 const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', type: 'decrement' | 'increment'}>({
+  ...controlBorderRadius('sm'),
   display: 'flex',
   outlineStyle: 'none',
   textAlign: 'center',
   borderStyle: 'none',
-  borderTopRadius: {
-    default: {
-      size: {
-        S: '[3px]',
-        M: '[4px]',
-        L: '[5px]',
-        XL: '[6px]'
-      }
-    }
-  },
-  borderBottomRadius: {
-    default: {
-      size: {
-        S: '[3px]',
-        M: '[4px]',
-        L: '[5px]',
-        XL: '[6px]'
-      }
-    }
-  },
   alignItems: 'center',
   justifyContent: 'center',
   width: {
@@ -116,7 +97,7 @@ const inputButton = style<ButtonRenderProps & {size: 'S' | 'M' | 'L' | 'XL', typ
     }
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled',
     forcedColors: {
       default: 'ButtonFace'
@@ -144,7 +125,7 @@ const stepperContainerStyles = style({
       XL: 8
     }
   },
-  paddingEnd: {
+  marginEnd: {
     size: {
       S: 2,
       M: 4,
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
index ea3a15d66d5..e3e63d7a9d6 100644
--- a/packages/@react-spectrum/s2/src/Picker.tsx
+++ b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -43,7 +43,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {control, controlBorderRadius, controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldErrorIcon,
   FieldLabel,
@@ -114,6 +114,7 @@ export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>
 
 const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   ...focusRing(),
+  ...control({shape: 'default', icon: true}),
   ...fieldInput(),
   outlineStyle: {
     default: 'none',
@@ -121,8 +122,6 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
     isQuiet: 'none'
   },
   position: 'relative',
-  font: 'control',
-  display: 'flex',
   textAlign: 'start',
   borderStyle: {
     default: 'none',
@@ -134,14 +133,7 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
       isDisabled: 'GrayText'
     }
   },
-  borderRadius: 'control',
-  alignItems: 'center',
-  height: 'control',
   transition: 'default',
-  columnGap: {
-    default: 'text-to-control',
-    isQuiet: 'text-to-visual'
-  },
   paddingX: {
     default: 'edge-to-text',
     isQuiet: 0
@@ -153,7 +145,7 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
     isQuiet: 'transparent'
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   },
   maxWidth: {
@@ -188,25 +180,25 @@ export let menu = style({
     }
   },
   boxSizing: 'border-box',
-  maxHeight: '[inherit]',
+  maxHeight: 'inherit',
   overflow: 'auto',
   padding: 8,
   fontFamily: 'sans',
-  fontSize: 'control',
+  fontSize: controlFont(),
   gridAutoRows: 'min-content'
 });
 
 const invalidBorder = style({
+  ...controlBorderRadius(),
   position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
   pointerEvents: 'none',
-  borderRadius: 'control',
   borderStyle: 'solid',
   borderWidth: 2,
-  borderColor: 'negative',
+  borderColor: baseColor('negative'),
   transition: 'default'
 });
 
@@ -366,7 +358,6 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                       className={iconStyles} />
                     {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
                     {isInvalid && !isDisabled && !isQuiet &&
-                      // @ts-ignore known limitation detecting functions from the theme
                       <div className={invalidBorder({...renderProps, size})} />
                     }
                   </>
@@ -393,12 +384,12 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                   isQuiet: -12
                 },
                 minWidth: {
-                  default: '[var(--trigger-width)]',
+                  default: '--trigger-width',
                   isQuiet: 192
                 },
                 width: {
-                  default: '[var(--trigger-width)]',
-                  isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                  default: '--trigger-width',
+                  isQuiet: 'calc(var(--trigger-width) + (-2 * self(marginStart)))'
                 }
               })(props)}>
               <Provider
diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
index cc14ad5ee79..6c016bcbdba 100644
--- a/packages/@react-spectrum/s2/src/Popover.tsx
+++ b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -77,7 +77,7 @@ let popover = style({
     }
   },
   // Don't be larger than full screen minus 2 * containerPadding
-  maxWidth: '[calc(100vw - 24px)]',
+  maxWidth: 'calc(100vw - 24px)',
   boxSizing: 'border-box',
   display: 'flex',
   opacity: {
@@ -125,6 +125,8 @@ let popover = style({
 let arrow = style({
   display: 'block',
   fill: '--s2-container-bg',
+  width: 18,
+  height: 9,
   rotate: {
     default: 180,
     placement: {
@@ -206,7 +208,7 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
         <>
           {!hideArrow && (
             <OverlayArrow>
-              <svg width={18} height={9} viewBox="0 0 18 10" className={arrow(renderProps)}>
+              <svg viewBox="0 0 18 10" className={arrow(renderProps)}>
                 <path transform="translate(0 -1)" d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1" />
               </svg>
             </OverlayArrow>
@@ -224,11 +226,11 @@ const dialogStyle = style({
   padding: 8,
   boxSizing: 'border-box',
   outlineStyle: 'none',
-  borderRadius: '[inherit]',
+  borderRadius: 'inherit',
   overflow: 'auto',
   position: 'relative',
   width: 'full',
-  maxSize: '[inherit]'
+  maxSize: 'inherit'
 }, getAllowedOverrides({height: true}));
 
 /**
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index d8c53f9c72b..8780c7f03b3 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -93,6 +93,8 @@ const dashoffsetAnimation = keyframes(`
   }
 `);
 
+let pxToRem = px => (px / 16) + 'rem';
+
 /**
  * ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way.
  * They can represent determinate or indeterminate progress.
@@ -115,7 +117,7 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
   }
 
   // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke.
-  let radius = `calc(50% - ${strokeWidth / 2}px)`;
+  let radius = `calc(50% - ${pxToRem(strokeWidth / 2)})`;
   let isStaticColor = !!staticColor;
 
   return (
@@ -137,13 +139,13 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(p
             cx="50%"
             cy="50%"
             r={radius}
-            strokeWidth={strokeWidth}
+            strokeWidth={pxToRem(strokeWidth)}
             className={track({isStaticColor})} />
           <circle
             cx="50%"
             cy="50%"
             r={radius}
-            strokeWidth={strokeWidth}
+            strokeWidth={pxToRem(strokeWidth)}
             className={fill({isStaticColor})}
             style={{
               // These cubic-bezier timing functions were derived from the previous animation keyframes
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 04b8ea7ed7b..436bd712a77 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -15,12 +15,12 @@ import {
   RadioProps as AriaRadioProps,
   RadioRenderProps
 } from 'react-aria-components';
-import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
+import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FocusableRef} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {forwardRef, ReactNode, useContext, useRef} from 'react';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 
@@ -53,10 +53,10 @@ const wrapper = style({
   position: 'relative',
   columnGap: 'text-to-control',
   alignItems: 'baseline',
-  font: 'control',
+  font: controlFont(),
   transition: 'colors',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
@@ -70,7 +70,7 @@ const wrapper = style({
 
 const circle = style<RenderProps>({
   ...focusRing(),
-  size: 'control-sm',
+  size: controlSize('sm'),
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
@@ -80,8 +80,8 @@ const circle = style<RenderProps>({
   borderStyle: 'solid',
   boxSizing: 'border-box',
   borderWidth: {
-    default: 2,
-    isSelected: '[calc((self(height) - 4px) / 2)]'
+    default: space(2),
+    isSelected: 'calc((self(height) - (4 / 16) * 1rem) / 2)'
   },
   forcedColorAdjust: 'none',
   backgroundColor: 'gray-25',
@@ -93,7 +93,7 @@ const circle = style<RenderProps>({
       forcedColors: 'Highlight'
     },
     isInvalid: {
-      default: 'negative',
+      default: baseColor('negative'),
       forcedColors: 'Mark'
     },
     isDisabled: {
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index 6ba21543a8c..a9f503028a7 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -85,7 +85,7 @@ export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: Ra
         // Double the usual gap because of the internal padding within checkbox that spectrum has.
         '--field-gap': {
           type: 'rowGap',
-          value: '[calc(var(--field-height) - 1lh)]'
+          value: 'calc(var(--field-height) - 1lh)'
         }
       }, getAllowedOverrides())({
         size,
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 04a9f7f811a..494bc6175c7 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -16,13 +16,13 @@ import {
   ContextValue,
   Provider
 } from 'react-aria-components';
+import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText, Input} from './Field';
-import {fontRelative, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
@@ -89,7 +89,7 @@ export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props:
           value: fontRelative(-2)
         },
         color: {
-          default: 'neutral',
+          default: baseColor('neutral'),
           isDisabled: {
             default: 'disabled',
             forcedColors: 'GrayText'
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index d412b098404..8ce68abcdaa 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -11,11 +11,11 @@
  */
 
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
+import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
-import {focusRing, space, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
@@ -64,14 +64,13 @@ const segmentedControl = style({
 
 const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
   ...focusRing(),
+  ...control({shape: 'default', icon: true}),
+  justifyContent: 'center',
   position: 'relative',
-  display: 'flex',
   forcedColorAdjust: 'none',
-  font: 'control',
   color: {
-    default: 'gray-700',
-    isHovered: 'neutral-subdued',
-    isSelected: 'neutral',
+    default: baseColor('neutral-subdued'),
+    isSelected: baseColor('neutral'),
     isDisabled: 'disabled',
     forcedColors: {
       default: 'ButtonText',
@@ -79,13 +78,6 @@ const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
       isSelected: 'HighlightText'
     }
   },
-  // TODO: update this padding for icon-only items when we introduce the non-track style back
-  paddingX: {
-    default: 'edge-to-text',
-    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': space(6)
-  },
-  height: 32,
-  alignItems: 'center',
   flexGrow: {
     isJustified: 1
   },
@@ -93,17 +85,20 @@ const controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({
     isJustified: 0
   },
   flexShrink: 0,
-  minWidth: 0,
-  justifyContent: 'center',
   whiteSpace: 'nowrap',
   disableTapHighlight: true,
   userSelect: 'none',
   backgroundColor: 'transparent',
   borderStyle: 'none',
-  borderRadius: 'default',
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
+  },
+  // The selected item has lower z-index so that the sliding background
+  // animation does not cover other items.
+  zIndex: {
+    default: 1,
+    isSelected: 0
   }
 }, getAllowedOverrides());
 
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
index 85d1418804b..c74c9f33ef4 100644
--- a/packages/@react-spectrum/s2/src/Skeleton.tsx
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -11,11 +11,10 @@
  */
 
 import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
-import {colorToken} from '../style/tokens' with {type: 'macro'};
+import {color, style} from '../style' with {type: 'macro'};
 import {inertValue, mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {useMediaQuery} from '@react-spectrum/utils';
 
@@ -75,7 +74,7 @@ export function Skeleton({children, isLoading}: SkeletonProps): ReactNode {
 }
 
 export const loadingStyle = raw(`
-  background-image: linear-gradient(to right, ${colorToken('gray-100')} 33%, light-dark(${colorToken('gray-25')}, ${colorToken('gray-300')}), ${colorToken('gray-100')} 66%);
+  background-image: linear-gradient(to right, ${color('gray-100')} 33%, light-dark(${color('gray-25')}, ${color('gray-300')}), ${color('gray-100')} 66%);
   background-size: 300%;
   * {
     visibility: hidden;
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index a3cbce7dd95..657a17b1bab 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -20,8 +20,8 @@ import {
   SliderTrack
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
+import {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
@@ -70,7 +70,7 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
 export const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 const slider = style({
-  font: 'control',
+  font: controlFont(),
   alignItems: {
     labelPosition: {
       side: 'center'
@@ -173,7 +173,7 @@ export let thumbContainer = style({
   },
   display: 'inline-block',
   position: 'absolute',
-  top: '[50%]'
+  top: '50%'
 });
 
 // if precision thumb should have a smaller hit area, then remove this
@@ -205,8 +205,8 @@ export let thumb = style<SliderThumbRenderProps & {size: 'S' | 'M' | 'L' | 'XL',
   display: 'inline-block',
   boxSizing: 'border-box',
   position: 'absolute',
-  top: '[50%]',
-  left: '[50%]',
+  top: '50%',
+  left: '50%',
   transform: 'translateY(-50%) translateX(-50%)',
   width: {
     thumbStyle: {
@@ -263,7 +263,7 @@ const trackStyling = {
       thick: 16
     }
   },
-  top: '[50%]',
+  top: '50%',
   borderRadius: {
     trackStyle: {
       thin: 'lg',
@@ -279,7 +279,7 @@ export let upperTrack = style<{isDisabled?: boolean, trackStyle: 'thin' | 'thick
     default: 'gray-300',
     isDisabled: 'disabled'
   },
-  translateY: '[-50%]',
+  translateY: '-50%',
   width: 'full',
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -315,7 +315,7 @@ export let filledTrack = style<{isDisabled?: boolean, isEmphasized?: boolean, tr
       isDisabled: 'GrayText'
     }
   },
-  translateY: '[-50%]'
+  translateY: '-50%'
 });
 
 export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}): ReactNode {
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 4f08675f302..f62161bf0b1 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -13,9 +13,9 @@
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {CenterBaseline} from './CenterBaseline';
 import {ContextValue, SlotProps} from 'react-aria-components';
+import {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -56,7 +56,7 @@ const wrapper = style<StatusLightStyleProps>({
   gap: 'text-to-visual',
   alignItems: 'baseline',
   width: 'fit',
-  font: 'control',
+  font: controlFont(),
   color: {
     default: 'neutral',
     variant: {
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index ccda65b085c..897cc383954 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -18,10 +18,10 @@ import {
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
+import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -52,10 +52,10 @@ const wrapper = style({
   columnGap: 'text-to-control',
   alignItems: 'baseline',
   width: 'fit',
-  font: 'control',
+  font: controlFont(),
   transition: 'colors',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
@@ -76,7 +76,7 @@ const track = style<RenderProps>({
   },
   '--trackHeight': {
     type: 'height',
-    value: 'control-sm'
+    value: controlSize('sm')
   },
   width: '--trackWidth',
   height: '--trackHeight',
@@ -97,7 +97,7 @@ const track = style<RenderProps>({
   backgroundColor: {
     default: 'gray-25',
     isSelected: {
-      default: 'neutral',
+      default: baseColor('neutral'),
       isEmphasized: baseColor('accent-900'),
       forcedColors: 'Highlight',
       isDisabled: {
@@ -113,7 +113,7 @@ const handle = style<RenderProps>({
   aspectRatio: 'square',
   borderRadius: 'full',
   backgroundColor: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: {
       default: 'gray-400',
       forcedColors: 'GrayText'
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 80953147990..16128662bed 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, colorMix, focusRing, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
 import {
   Button,
   CellRenderProps,
@@ -43,10 +44,9 @@ import {
   useTableOptions,
   Virtualizer
 } from 'react-aria-components';
-import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, focusRing, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
 import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
@@ -458,10 +458,10 @@ function CellFocusRing() {
 }
 
 const columnStyles = style({
-  height: '[inherit]',
+  height: 'inherit',
   boxSizing: 'border-box',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     forcedColors: 'ButtonText'
   },
   paddingX: {
@@ -477,7 +477,7 @@ const columnStyles = style({
   },
   outlineStyle: 'none',
   position: 'relative',
-  fontSize: 'control',
+  fontSize: controlFont(),
   fontFamily: 'sans',
   fontWeight: 'bold',
   display: 'flex',
@@ -616,7 +616,7 @@ const resizableMenuButtonWrapper = style({
   paddingX: 16,
   backgroundColor: 'transparent',
   borderStyle: 'none',
-  fontSize: 'control',
+  fontSize: controlFont(),
   fontFamily: 'sans',
   fontWeight: 'bold'
 });
@@ -923,7 +923,7 @@ const commonCellStyles = {
 
 const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({
   ...commonCellStyles,
-  color: 'neutral',
+  color: baseColor('neutral'),
   paddingY: centerPadding(),
   minHeight: {
     default: 40,
@@ -935,7 +935,7 @@ const cell = style<CellRenderProps & S2TableProps & {isDivider: boolean}>({
   boxSizing: 'border-box',
   height: 'full',
   width: 'full',
-  fontSize: 'control',
+  fontSize: controlFont(),
   alignItems: 'center',
   display: 'flex',
   borderStyle: {
@@ -961,7 +961,7 @@ const checkboxCellStyle = style({
   ...stickyCell,
   paddingStart: 16,
   alignContent: 'center',
-  height: '[calc(100% - 1px)]',
+  height: 'calc(100% - 1px)',
   borderBottomWidth: 0,
   backgroundColor: '--rowBackgroundColor'
 });
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 81b2a38b3a1..acfe81ce648 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -25,11 +25,11 @@ import {
   TabListStateContext,
   TabRenderProps
 } from 'react-aria-components';
+import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {CollectionBuilder} from '@react-aria/collections';
 import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
@@ -169,18 +169,18 @@ const tablist = style({
       vertical: 'column'
     }
   },
-  paddingEnd: {
+  marginEnd: {
     orientation: {
       vertical: 20
     }
   },
-  paddingStart: {
+  marginStart: {
     orientation: {
       vertical: 12
     }
   },
   flexShrink: 0,
-  flexBasis: '[0%]'
+  flexBasis: '0%'
 });
 
 export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
@@ -325,9 +325,8 @@ const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavi
   ...focusRing(),
   display: 'flex',
   color: {
-    default: 'neutral-subdued',
-    isSelected: 'neutral',
-    isHovered: 'neutral-subdued',
+    default: baseColor('neutral-subdued'),
+    isSelected: baseColor('neutral'),
     isDisabled: 'disabled',
     forcedColors: {
       isSelected: 'Highlight',
@@ -418,7 +417,7 @@ const tabPanel = style({
   marginTop: 4,
   color: 'gray-800',
   flexGrow: 1,
-  flexBasis: '[0%]',
+  flexBasis: '0%',
   minHeight: 0,
   minWidth: 0
 }, getAllowedOverrides({height: true}));
@@ -493,10 +492,10 @@ let HiddenTabs = function (props: {
       inert={inertValue(true)}
       ref={listRef}
       className={style({
-        display: '[inherit]',
-        flexDirection: '[inherit]',
-        gap: '[inherit]',
-        flexWrap: '[inherit]',
+        display: 'inherit',
+        flexDirection: 'inherit',
+        gap: 'inherit',
+        flexWrap: 'inherit',
         position: 'absolute',
         inset: 0,
         visibility: 'hidden',
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 09987c91455..e14141ef0af 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -23,6 +23,7 @@ import {
   Provider,
   SelectValue
 } from 'react-aria-components';
+import {baseColor, edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
 import {
   checkmark,
@@ -35,8 +36,7 @@ import {
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
-import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
+import {controlFont, fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldLabel
 } from './Field';
@@ -107,7 +107,7 @@ const inputButton = style({
   paddingX: 0,
   backgroundColor: 'transparent',
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isDisabled: 'disabled'
   },
   maxWidth: {
@@ -127,11 +127,11 @@ export let menu = style({
   display: 'grid',
   gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
   boxSizing: 'border-box',
-  maxHeight: '[inherit]',
+  maxHeight: 'inherit',
   overflow: 'auto',
   padding: 8,
   fontFamily: 'sans',
-  fontSize: 'control'
+  fontSize: controlFont()
 });
 const valueStyles = style({
   flexGrow: 0,
@@ -248,7 +248,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
               styles={style({
                 marginStart: -12,
                 minWidth: 192,
-                width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                width: 'calc(var(--trigger-width) + (-2 * self(marginStart)))'
               })}>
               <Provider
                 values={[
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index b2aa19e19be..358173bf912 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -28,15 +28,15 @@ import {
   useSlottedContext
 } from 'react-aria-components';
 import {AvatarContext} from './Avatar';
+import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
 import {CenterBaseline, centerBaseline} from './CenterBaseline';
 import {ClearButton} from './ClearButton';
 import {Collection, CollectionBuilder} from '@react-aria/collections';
+import {control, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {DOMRef, DOMRefValue, HelpTextProps, Node, SpectrumLabelableProps} from '@react-types/shared';
-import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {FieldLabel} from './Field';
+import {FieldLabel, helpTextStyles} from './Field';
 import {flushSync} from 'react-dom';
-import {focusRing, fontRelative, style} from '../style' with { type: 'macro' };
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {IconContext} from './Icon';
@@ -83,25 +83,6 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
 
 export const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
-const helpTextStyles = style({
-  gridArea: 'helptext',
-  display: 'flex',
-  alignItems: 'baseline',
-  gap: 'text-to-visual',
-  font: 'control',
-  color: {
-    default: 'neutral-subdued',
-    isInvalid: 'negative'
-  },
-  '--iconPrimary': {
-    type: 'fill',
-    value: 'currentColor'
-  },
-  contain: 'inline-size',
-  paddingTop: '--field-gap',
-  cursor: 'text'
-});
-
 const InternalTagGroupContext = createContext<TagGroupProps<any>>({});
 
 /** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
@@ -440,17 +421,13 @@ function ActionGroup(props) {
 
 const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?: boolean, isLink?: boolean, allowsRemoving?: boolean}>({
   ...focusRing(),
+  ...control({shape: 'default', icon: true}),
   display: 'inline-flex',
-  boxSizing: 'border-box',
   maxWidth: 'full',
   verticalAlign: 'middle',
-  alignItems: 'center',
   justifyContent: 'center',
-  font: 'control',
-  height: 'control',
   transition: 'default',
-  minWidth: 0,
-  // maxWidth: '[calc(self(height) * 7)]', // s2 designs show a max width on tags but we pushed back on this in v3
+  // maxWidth: 'calc(self(height) * 7)', // s2 designs show a max width on tags but we pushed back on this in v3
   backgroundColor: {
     default: 'gray-100',
     isHovered: {
@@ -460,9 +437,9 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
       default: 'gray-200'
     },
     isSelected: {
-      default: 'neutral',
+      default: baseColor('neutral'),
       isEmphasized: {
-        default: 'accent'
+        default: baseColor('accent')
       }
     },
     isDisabled: 'disabled',
@@ -472,7 +449,7 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
     }
   },
   color: {
-    default: 'neutral',
+    default: baseColor('neutral'),
     isSelected: {
       default: 'gray-25',
       isEmphasized: 'white'
@@ -485,26 +462,15 @@ const tagStyles = style<TagRenderProps & {size?: 'S' | 'M' | 'L', isEmphasized?:
     }
   },
   borderStyle: 'none',
-  paddingStart: {
-    default: 'edge-to-text'
-  },
   paddingEnd: {
     default: 'edge-to-text',
     allowsRemoving: 0
   },
-  paddingY: 0,
   margin: 4,
-  borderRadius: 'control',
   cursor: {
     default: 'default',
     isLink: 'pointer'
   },
-  '--iconMargin': {
-    type: 'marginTop',
-    value: {
-      default: fontRelative(-2)
-    }
-  },
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index ba5b029ec29..182ff4107ba 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/src/TextField.tsx
@@ -20,7 +20,7 @@ import {
   InputContext,
   useSlottedContext
 } from 'react-aria-components';
-import {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, controlSize, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
@@ -191,14 +191,14 @@ function TextAreaInput() {
       className={style({
         paddingX: 0,
         paddingY: centerPadding(),
-        minHeight: 'control',
+        minHeight: controlSize(),
         boxSizing: 'border-box',
         backgroundColor: 'transparent',
-        color: '[inherit]',
-        fontFamily: '[inherit]',
-        fontSize: '[inherit]',
-        fontWeight: '[inherit]',
-        lineHeight: '[inherit]',
+        color: 'inherit',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        lineHeight: 'inherit',
         flexGrow: 1,
         minWidth: 0,
         outlineStyle: 'none',
diff --git a/packages/@react-spectrum/s2/src/Toast.tsx b/packages/@react-spectrum/s2/src/Toast.tsx
index 2fa863d0917..0391cf2bc23 100644
--- a/packages/@react-spectrum/s2/src/Toast.tsx
+++ b/packages/@react-spectrum/s2/src/Toast.tsx
@@ -26,7 +26,6 @@ import {FocusScope, useModalOverlay} from 'react-aria';
 import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeStyles} from '../style/runtime';
 import {ToastOptions as RACToastOptions, UNSTABLE_Toast as Toast, UNSTABLE_ToastContent as ToastContent, UNSTABLE_ToastList as ToastList, ToastProps, UNSTABLE_ToastQueue as ToastQueue, UNSTABLE_ToastRegion as ToastRegion, ToastRegionProps, UNSTABLE_ToastStateContext as ToastStateContext} from 'react-aria-components';
 import {Text} from './Content';
 import toastCss from './Toast.module.css';
@@ -232,17 +231,12 @@ const toastList = style({
   }
 });
 
-// Separate style macro for focus ring and toast so that
-// isFocusVisible doesn't cause toast background to change.
-const toastFocusRing = style({
+const toastStyle = style({
   ...focusRing(),
   outlineColor: {
     default: 'focus-ring',
     isExpanded: 'white'
-  }
-});
-
-const toastStyle = style({
+  },
   display: 'flex',
   gap: 16,
   paddingStart: 16,
@@ -254,7 +248,7 @@ const toastStyle = style({
     type: 'maxWidth',
     value: 336
   },
-  maxWidth: '[min(var(--maxWidth), 90vw)]',
+  maxWidth: 'min(var(--maxWidth), 90vw)',
   boxSizing: 'border-box',
   flexShrink: 0,
   font: 'ui',
@@ -494,7 +488,7 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
           [placement === 'top' ? 'bottom' : 'top']: 0,
           left: 0,
           width: '100%',
-          translate: `0 0 ${(-12 * index)}px`,
+          translate: `0 0 ${(-12 * index) / 16}rem`,
           // Only 3 toasts are visible in the stack at once, but all toasts are in the DOM.
           // This allows view transitions to smoothly animate them from where they would be 
           // in the collapsed stack to their final position in the expanded list.
@@ -519,14 +513,12 @@ export function SpectrumToast(props: SpectrumToastProps): ReactNode {
         viewTransitionName: toast.key,
         viewTransitionClass: [toastCss.toast, !isMain ? toastCss['background-toast'] : '', toastCss[placement], toastCss[align]].filter(Boolean).map(c => CSS.escape(c)).join(' ')
       }}
-      className={renderProps => toastCss.toast + mergeStyles(
-        toastFocusRing({...renderProps, isExpanded}),
-        toastStyle({
-          variant: toast.content.variant || 'info',
-          index,
-          isExpanded
-        })
-      )}>
+      className={renderProps => toastCss.toast + toastStyle({
+        ...renderProps,
+        variant: toast.content.variant || 'info',
+        index,
+        isExpanded
+      })}>
       <div role="presentation" className={toastBody({isSingle: !isMain || visibleToasts.length <= 1 || isExpanded})}>
         <ToastContent className={toastContent + (ctx && isMain ? ` ${toastCss['toast-content']}` : null)}>
           {Icon &&
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index 4a8402c03d8..84295a4277c 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/src/Tooltip.tsx
@@ -65,7 +65,7 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
     forcedColors: 'transparent'
   },
   backgroundColor: 'neutral',
-  borderRadius: 'control',
+  borderRadius: 'default',
   paddingX: 'edge-to-text',
   paddingY: centerPadding(),
   margin: 8,
@@ -107,6 +107,8 @@ const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light da
 const arrowStyles = style<TooltipRenderProps>({
   display: 'block',
   fill: 'gray-800',
+  width: 10,
+  height: 5,
   rotate: {
     placement: {
       top: 0,
@@ -117,8 +119,8 @@ const arrowStyles = style<TooltipRenderProps>({
   },
   translateX: {
     placement: {
-      left: '[-25%]',
-      right: '[25%]'
+      left: '-25%',
+      right: '25%'
     }
   }
 });
@@ -170,7 +172,7 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
       {renderProps => (
         <>
           <OverlayArrow>
-            <svg className={arrowStyles(renderProps)} xmlns="http://www.w3.org/2000/svg" width="10" height="5" viewBox="0 0 10 5">
+            <svg className={arrowStyles(renderProps)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5">
               <path d="M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z" />
             </svg>
           </OverlayArrow>
diff --git a/packages/@react-spectrum/s2/src/TreeView.tsx b/packages/@react-spectrum/s2/src/TreeView.tsx
index ebb3e8458f6..59f4cdfcf32 100644
--- a/packages/@react-spectrum/s2/src/TreeView.tsx
+++ b/packages/@react-spectrum/s2/src/TreeView.tsx
@@ -345,7 +345,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
             <div
               className={style({
                 gridArea: 'level-padding',
-                width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'
+                width: 'calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))'
               })} />
             {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
             <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildItems)} />
@@ -380,7 +380,7 @@ interface ExpandableRowChevronProps {
 const expandButton = style<ExpandableRowChevronProps>({
   gridArea: 'expand-button',
   color: {
-    default: '[inherit]',
+    default: 'inherit',
     isDisabled: {
       default: 'disabled',
       forcedColors: 'GrayText'
diff --git a/packages/@react-spectrum/s2/src/bar-utils.ts b/packages/@react-spectrum/s2/src/bar-utils.ts
index 2a9938fe49b..0b28be2bb50 100644
--- a/packages/@react-spectrum/s2/src/bar-utils.ts
+++ b/packages/@react-spectrum/s2/src/bar-utils.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {centerPadding, fieldInput, staticColor} from './style-utils' with {type: 'macro'};
+import {centerPadding, controlSize, fieldInput, staticColor} from './style-utils' with {type: 'macro'};
 
 export const bar = () => ({
   ...staticColor(),
@@ -39,7 +39,7 @@ export const bar = () => ({
   maxWidth: 768, // progress-bar-maximum-width
   '--field-height': {
     type: 'height',
-    value: 'control'
+    value: controlSize()
   },
   '--track-to-label': {
     type: 'height',
diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts
index 8203f0ef23d..3b48b1f6d09 100644
--- a/packages/@react-spectrum/s2/src/index.ts
+++ b/packages/@react-spectrum/s2/src/index.ts
@@ -45,7 +45,7 @@ export {DialogContainer, useDialogContainer} from './DialogContainer';
 export {Divider, DividerContext} from './Divider';
 export {DropZone, DropZoneContext} from './DropZone';
 export {Form} from './Form';
-export {createIcon, IconContext, IllustrationContext} from './Icon';
+export {createIcon, createIllustration, IconContext, IllustrationContext} from './Icon';
 export {IllustratedMessage, IllustratedMessageContext} from './IllustratedMessage';
 export {Image, ImageContext} from './Image';
 export {ImageCoordinator} from './ImageCoordinator';
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index 01aae9ee3ef..ca5461afce6 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -11,6 +11,7 @@
  */
 
 import {CSSProperties} from 'react';
+import {fontRelative} from '../style';
 import {StyleString} from '../style/types';
 
 export function centerPadding(minHeight: string = 'self(minHeight)'): `[${string}]` {
@@ -57,12 +58,12 @@ export const field = () => ({
       ]
     }
   },
-  fontSize: 'control',
+  fontSize: controlFont(),
   alignItems: 'baseline',
   lineHeight: 'ui',
   '--field-height': {
     type: 'height',
-    value: 'control'
+    value: controlSize()
   },
   // Spectrum defines the field label/help text with a (minimum) height, with text centered inside.
   // Calculate what the gap should be based on the height and line height.
@@ -78,7 +79,7 @@ export const field = () => ({
 } as const);
 
 export const fieldLabel = () => ({
-  font: 'control',
+  font: controlFont(),
   cursor: 'default',
   color: {
     default: 'neutral-subdued',
@@ -90,7 +91,7 @@ export const fieldLabel = () => ({
 
 export const fieldInput = () => ({
   gridArea: 'input',
-  minWidth: 'control',
+  minWidth: controlSize(),
   contain: {
     // Only apply size containment if contain-intrinsic-width is supported.
     // In older browsers, this will fall back to the default browser intrinsic width.
@@ -109,7 +110,7 @@ export const fieldInput = () => ({
     }
   },
   // contain-intrinsic-width only includes the width of children, not the padding or borders.
-  containIntrinsicWidth: '[calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))]'
+  containIntrinsicWidth: 'calc(var(--defaultWidth) - self(paddingStart, 0px) - self(paddingEnd, 0px) - self(borderStartWidth, 0px) - self(borderEndWidth, 0px))'
 } as const);
 
 export const colorScheme = () => ({
@@ -138,6 +139,142 @@ export function staticColor(): Record<string, any> {
   } as const;
 }
 
+export const controlFont = () => ({
+  default: 'ui',
+  size: {
+    XS: 'ui-xs',
+    S: 'ui-sm',
+    L: 'ui-lg',
+    XL: 'ui-xl'
+  }
+} as const);
+
+export const controlSize = (size: 'sm' | 'md' = 'md'): typeof controlSizeM | typeof controlSizeS => (
+  size === 'sm' ? controlSizeS : controlSizeM
+);
+
+const controlSizeM = {
+  default: 32,
+  size: {
+    XS: 20,
+    S: 24,
+    L: 40,
+    XL: 48
+  }
+} as const;
+
+const controlSizeS = {
+  default: 16,
+  size: {
+    S: 14,
+    L: 18,
+    XL: 20
+  }
+} as const;
+
+// This generates the border radius for t-shirt sizes using the
+// Major Second logarithmic scale.
+export const controlBorderRadius = (size: 'default' | 'sm' = 'default') => ({
+  '--size': {
+    type: 'order',
+    value: {
+      default: 1,
+      size: {
+        XS: Math.pow(1.125, -2),
+        S: Math.pow(1.125, -1),
+        L: Math.pow(1.125, 1),
+        XL: Math.pow(1.125, 2)
+      }
+    }
+  },
+  '--radius': {
+    type: 'borderTopStartRadius',
+    value: size
+  },
+  borderRadius: 'round(var(--radius) * var(--size), 1px)'
+} as const);
+
+interface ControlOptions {
+  shape?: 'default' | 'pill',
+  wrap?: boolean,
+  icon?: boolean
+}
+
+interface ControlResult {
+  font: ReturnType<typeof controlFont>,
+  boxSizing?: 'border-box',
+  borderRadius?: 'pill' | `[${string}]`,
+  minWidth?: ReturnType<typeof controlSize>,
+  minHeight?: ReturnType<typeof controlSize>,
+  height?: ReturnType<typeof controlSize>,
+  display?: 'flex',
+  alignItems?: 'center' | {default: 'baseline', [iconOnly]: 'center'},
+  columnGap?: 'text-to-visual',
+  paddingX?: 'pill' | 'edge-to-text' | {default: 'pill' | 'edge-to-text', [iconOnly]: 0},
+  paddingY?: 0 | `[${string}]`
+}
+
+const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
+
+/**
+ * Common styles for a pill or round rect shaped container with text and icon slots.
+ * The text can optionally wrap, aligning the icon with the first line of text.
+ */
+export function control(options: ControlOptions): ControlResult {
+  let paddingX = options.shape === 'pill' ? 'pill' as const : 'edge-to-text' as const;
+  let result: ControlResult = {
+    font: controlFont(),
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    paddingX: paddingX,
+    minWidth: controlSize()
+  };
+
+  if (options.shape === 'pill') {
+    result.borderRadius = 'pill';
+  } else {
+    Object.assign(result, controlBorderRadius());
+  }
+
+  if (options.icon) {
+    result.columnGap = 'text-to-visual';
+    result.paddingX = {
+      default: paddingX,
+      [iconOnly]: 0
+    };
+    result['--iconMargin'] = {
+      type: 'marginStart',
+      value: {
+        default: fontRelative(-2),
+        [iconOnly]: 0
+      }
+    };
+  }
+
+  if (options.wrap) {
+    result.minHeight = controlSize();
+
+    if (options.icon) {
+      result.paddingY = 0;
+      result['--labelPadding'] = {
+        type: 'paddingTop',
+        value: centerPadding()
+      };
+      result.alignItems = {
+        default: 'baseline',
+        [iconOnly]: 'center'
+      };
+    } else {
+      result.paddingY = centerPadding();
+    }
+  } else {
+    result.height = controlSize();
+  }
+
+  return result;
+}
+
 const allowedOverrides = [
   'margin',
   'marginStart',
diff --git a/packages/@react-spectrum/s2/stories/Card.stories.tsx b/packages/@react-spectrum/s2/stories/Card.stories.tsx
index 120d9609ec9..65ea06fd213 100644
--- a/packages/@react-spectrum/s2/stories/Card.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Card.stories.tsx
@@ -234,7 +234,7 @@ export const Collection = (args: any) => (
 export const PreviewOverlay = (args: any) => (
   <Card {...args}>
     <CardPreview>
-      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: '[1/1]', objectFit: 'cover', pointerEvents: 'none'})} />
+      <Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
       <Badge
         variant="positive"
         styles={style({
diff --git a/packages/@react-spectrum/s2/stories/Icon.stories.tsx b/packages/@react-spectrum/s2/stories/Icon.stories.tsx
index 5ce0631e5c0..a9056649aa4 100644
--- a/packages/@react-spectrum/s2/stories/Icon.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Icon.stories.tsx
@@ -10,11 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
+import AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
+import {FunctionComponent} from 'react';
+import {IconProps} from '../src';
+import {iconStyle} from '../style' with {type: 'macro'};
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 
-const meta: Meta<typeof NewIcon> = {
-  component: NewIcon,
+const Alert = AlertIcon as FunctionComponent<IconProps>;
+
+const meta: Meta<FunctionComponent<IconProps>> = {
+  component: NewIcon as FunctionComponent<IconProps>,
   parameters: {
     layout: 'centered'
   },
@@ -24,12 +30,12 @@ const meta: Meta<typeof NewIcon> = {
 export default meta;
 
 type Story = StoryObj<typeof NewIcon>;
-export const Example: Story = {
+export const Example: Story = {};
+
+export const ColorAndSize: Story = {
   render: (args) => {
     return (
-      <div style={{display: 'flex', gap: 8, justifyContent: 'center'}}>
-        <NewIcon {...args} />
-      </div>
+      <Alert {...args} styles={iconStyle({color: 'negative', size: 'XL'})} />
     );
   }
 };
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 1a40f6b6801..0ab6cabcc19 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -32,7 +32,7 @@ export default meta;
 const tabs = style({width: 'full', height: 'full'});
 
 export const Example = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={tabs} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR">Founding of Rome</Tab>
@@ -58,7 +58,7 @@ export const Example = (args: any) => (
 );
 
 export const Disabled = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={tabs} disabledKeys={['FoR', 'MaR', 'Emp']} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR">Founding of Rome</Tab>
@@ -79,7 +79,7 @@ export const Disabled = (args: any) => (
 );
 
 const IconsRender = (props) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...props} styles={tabs} aria-label="History of Ancient Rome">
       <TabList>
         <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
@@ -115,7 +115,7 @@ let items: Item[] = [
 ];
 
 export const Dynamic = (args: any) => (
-  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: 'calc(100vw - 60px)', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <div id="the-label" className={style({font: 'ui'})}>External label for tabs</div>
     <Tabs {...args} styles={tabs} disabledKeys={new Set([2])} aria-labelledby="the-label">
       <TabList items={items}>
diff --git a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
index 12597b8879a..ce9daf45ead 100644
--- a/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
+++ b/packages/@react-spectrum/s2/style/__tests__/style-macro.test.js
@@ -40,14 +40,14 @@ describe('style-macro', () => {
       "@layer _.a, _.b, _.c;
 
       @layer _.b {
-        .jnb:first-child {
+        .Jbs:first-child {
           margin-top: 0.25rem;
         }
       }
 
-      @layer _.c.YxLy {
-        @media (min-width: 1024px) {
-          .jnYxLyf:first-child {
+      @layer _.c.p {
+        @media (min-width: 64rem) {
+          .Jbpv:first-child {
             margin-top: 0.5rem;
           }
         }
@@ -55,62 +55,62 @@ describe('style-macro', () => {
 
       "
     `);
-    expect(js).toMatchInlineSnapshot('" jnb jnYxLyf"');
+    expect(js).toMatchInlineSnapshot('" Jbs Jbpv"');
   });
 
   it('should support self references', () => {
     let {css, js} = testStyle({
       borderWidth: 2,
       paddingX: 'edge-to-text',
-      width: '[calc(200px - self(borderStartWidth) - self(paddingStart))]'
+      width: 'calc(200px - self(borderStartWidth) - self(paddingStart))'
     });
 
     expect(css).toMatchInlineSnapshot(`
       "@layer _.a;
 
       @layer _.a {
-        ._nb {
+        ._kc {
           border-top-width: 2px;
         }
 
 
-        ._ma {
+        .hc {
           border-bottom-width: 2px;
         }
 
 
-        ._twdjPYd {
-          border-inline-start-width: var(--_t);
+        .mCPFGYc {
+          border-inline-start-width: var(--m);
         }
 
 
-        ._sa {
+        .lc {
           border-inline-end-width: 2px;
         }
 
 
-        .oGQFGYc {
-          padding-inline-start: var(--o);
+        .SMBFGYc {
+          padding-inline-start: var(--S);
         }
 
 
-        .nb {
-          padding-inline-end: calc(var(--e, var(--s)) * 3 / 8);
+        .Rv {
+          padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
         }
 
 
-        .fNANddc {
-          width: calc(200px - var(--_t) - var(--o));
+        .ZjUQgKd {
+          width: calc(200px - var(--m) - var(--S));
         }
 
 
-        .-_t_-_ta {
-          --_t: 2px;
+        .-m_-mc {
+          --m: 2px;
         }
 
 
-        .-o_-ob {
-          --o: calc(var(--e, var(--s)) * 3 / 8);
+        .-S_-Sv {
+          --S: calc(var(--F, var(--M)) * 3 / 8);
         }
       }
 
@@ -118,7 +118,7 @@ describe('style-macro', () => {
     `);
 
     expect(js).toMatchInlineSnapshot(
-      '" _nb _ma _twdjPYd _sa oGQFGYc nb fNANddc -_t_-_ta -o_-ob"'
+      '" _kc hc mCPFGYc lc SMBFGYc Rv ZjUQgKd -m_-mc -S_-Sv"'
     );
   });
 
@@ -136,9 +136,9 @@ describe('style-macro', () => {
       color: 'green-400'
     });
 
-    expect(js()).toMatchInlineSnapshot('"  cE dj"');
-    expect(overrides).toMatchInlineSnapshot('" c8tmWqb dHJ3AUd"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  c8tmWqb dj"');
+    expect(js()).toMatchInlineSnapshot('"  gw pg"');
+    expect(overrides).toMatchInlineSnapshot('" g8tmWqb pHJ3AUd"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  g8tmWqb pg"');
   });
 
   it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +153,9 @@ describe('style-macro', () => {
       translateX: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-zTRurc _Ia"');
-    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-Kr5lvc _Ia"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-Kr5lvc _Ia"');
+    expect(js()).toMatchInlineSnapshot('"  -_7PloMd-B __Ya"');
+    expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D __Ya"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_7PloMd-D __Ya"');
   });
 
   it('should support allowed overrides for shorthands', () => {
@@ -170,9 +170,9 @@ describe('style-macro', () => {
       padding: 40
     });
 
-    expect(js()).toMatchInlineSnapshot('"  rg vd of ng"');
-    expect(overrides).toMatchInlineSnapshot('" rw vw oy ny"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  rw vw oy ny"');
+    expect(js()).toMatchInlineSnapshot('"  Tk Qk Sk Rk"');
+    expect(overrides).toMatchInlineSnapshot('" Tm Qm Sm Rm"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm Qm Sm Rm"');
   });
 
   it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +187,9 @@ describe('style-macro', () => {
       minWidth: 32
     });
 
-    expect(js()).toMatchInlineSnapshot('"  cz"');
-    expect(overrides).toMatchInlineSnapshot('" ue"');
-    expect(js({}, overrides)).toMatchInlineSnapshot('"  ue cz"');
+    expect(js()).toMatchInlineSnapshot('"  gE"');
+    expect(overrides).toMatchInlineSnapshot('" Nk"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  Nk gE"');
   });
 
   it('should support runtime conditions', () => {
@@ -210,32 +210,32 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .ca {
+        .gH {
           background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
         }
 
 
-        .ce {
+        .gF {
           background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
         }
 
 
-        .cz {
+        .gE {
           background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
         }
 
 
-        .da {
+        .pt {
           color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
         }
 
 
-        .db {
+        .po {
           color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
         }
 
 
-        .dv {
+        .pm {
           color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
         }
       }
@@ -243,9 +243,9 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  ca da"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  ce db"');
-    expect(js({isPressed: true})).toMatchInlineSnapshot('"  cz dv"');
+    expect(js({})).toMatchInlineSnapshot('"  gH pt"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF po"');
+    expect(js({isPressed: true})).toMatchInlineSnapshot('"  gE pm"');
   });
 
   it('should support nested runtime conditions', () => {
@@ -264,33 +264,33 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .ca {
+        .gH {
           background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
         }
 
 
-        .ce {
+        .gF {
           background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
         }
 
 
-        .c_k {
+        .g_h {
           background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
         }
 
 
-        .cK {
+        .g3 {
           background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
         }
       }
 
       "
     `);
-    expect(js({})).toMatchInlineSnapshot('"  ca"');
-    expect(js({isHovered: true})).toMatchInlineSnapshot('"  ce"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  c_k"');
+    expect(js({})).toMatchInlineSnapshot('"  gH"');
+    expect(js({isHovered: true})).toMatchInlineSnapshot('"  gF"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  g_h"');
     expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
-      '"  cK"'
+      '"  g3"'
     );
   });
 
@@ -305,9 +305,9 @@ describe('style-macro', () => {
       }
     });
 
-    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  cw"');
-    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  cjQquMe"');
-    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  cE"');
+    expect(js({variant: 'accent'})).toMatchInlineSnapshot('"  gY"');
+    expect(js({variant: 'primary'})).toMatchInlineSnapshot('"  gjQquMe"');
+    expect(js({variant: 'secondary'})).toMatchInlineSnapshot('"  gw"');
   });
 
   it('supports runtime conditions nested inside css conditions', () => {
@@ -323,16 +323,16 @@ describe('style-macro', () => {
     expect(css).toMatchInlineSnapshot(`
       "@layer _.a, _.b;
 
-      @layer _.b.b {
+      @layer _.b.l {
         @media (forced-colors: active) {
-          .dbf {
+          .plb {
             color: ButtonText;
           }
         }
 
 
         @media (forced-colors: active) {
-          .dbm {
+          .ple {
             color: HighlightText;
           }
         }
@@ -341,8 +341,8 @@ describe('style-macro', () => {
       "
     `);
 
-    expect(js({})).toMatchInlineSnapshot('"  dbf"');
-    expect(js({isSelected: true})).toMatchInlineSnapshot('"  dbm"');
+    expect(js({})).toMatchInlineSnapshot('"  plb"');
+    expect(js({isSelected: true})).toMatchInlineSnapshot('"  ple"');
   });
 
   it('should expand shorthand properties to longhands', () => {
@@ -350,28 +350,28 @@ describe('style-macro', () => {
       padding: 24
     });
 
-    expect(js).toMatchInlineSnapshot('" rc vc od nd"');
+    expect(js).toMatchInlineSnapshot('" Th Qh Sh Rh"');
     expect(css).toMatchInlineSnapshot(`
       "@layer _.a;
 
       @layer _.a {
-        .rc {
-          padding-top: 1.5rem;
+        .Th {
+          padding-top: 24px;
         }
 
 
-        .vc {
-          padding-bottom: 1.5rem;
+        .Qh {
+          padding-bottom: 24px;
         }
 
 
-        .od {
-          padding-inline-start: 1.5rem;
+        .Sh {
+          padding-inline-start: 24px;
         }
 
 
-        .nd {
-          padding-inline-end: 1.5rem;
+        .Rh {
+          padding-inline-end: 24px;
         }
       }
 
@@ -388,7 +388,7 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .cpQzfVb {
+        .gpQzfVb {
           background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
         }
       }
@@ -409,7 +409,7 @@ describe('style-macro', () => {
       "@layer _.a;
 
       @layer _.a {
-        .-FUeYm-cz {
+        .-FUeYm-gE {
           --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
         }
       }
diff --git a/packages/@react-spectrum/s2/style/index.ts b/packages/@react-spectrum/s2/style/index.ts
index c2b0b2af709..fb2c934e69a 100644
--- a/packages/@react-spectrum/s2/style/index.ts
+++ b/packages/@react-spectrum/s2/style/index.ts
@@ -10,8 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {fontRelative as internalFontRelative, size as internalSize, space as internalSpace} from './spectrum-theme';
-export {baseColor, edgeToText, lightDark, linearGradient, colorMix, style} from './spectrum-theme';
+import type * as CSS from 'csstype';
+import {Inset, fontRelative as internalFontRelative, size as internalSize, space as internalSpace, Spacing, style} from './spectrum-theme';
+import type {MacroContext} from '@parcel/macros';
+import {StyleString} from './types';
+
+export {baseColor, color, edgeToText, lightDark, linearGradient, colorMix, style} from './spectrum-theme';
 export type {StyleString} from './types';
 
 // Wrap these functions in arbitrary value syntax when called from the outside.
@@ -36,3 +40,57 @@ export const focusRing = () => ({
   outlineWidth: 2,
   outlineOffset: 2
 } as const);
+
+interface IconStyle {
+  size?: 'XS' | 'S' | 'M' | 'L' |'XL',
+  color?: 'white' | 'black' | 'accent' | 'neutral' | 'negative' | 'informative' | 'positive' | 'notice' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',
+  margin?: Spacing,
+  marginStart?: Spacing,
+  marginEnd?: Spacing,
+  marginTop?: Spacing,
+  marginBottom?: Spacing,
+  marginX?: Spacing,
+  marginY?: Spacing,
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline',
+  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch',
+  order?: number,
+  gridArea?: CSS.Property.GridArea,
+  gridColumnStart?: CSS.Property.GridColumnStart,
+  gridColumnEnd?: CSS.Property.GridColumnEnd,
+  gridRowStart?: CSS.Property.GridRowStart,
+  gridRowEnd?: CSS.Property.GridRowStart,
+  position?: 'absolute' | 'fixed' | 'relative' | 'sticky' | 'static',
+  zIndex?: number,
+  top?: Inset,
+  bottom?: Inset,
+  inset?: Inset,
+  insetX?: Inset,
+  insetY?: Inset,
+  insetStart?: Inset,
+  insetEnd?: Inset,
+  rotate?: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`
+}
+
+const iconSizes = {
+  XS: 14,
+  S: 16,
+  M: 20,
+  L: 22,
+  XL: 26
+} as const;
+
+export function iconStyle(this: MacroContext | void, options: IconStyle): StyleString<Exclude<keyof IconStyle, 'color' | 'size'>> {
+  let {size = 'M', color, ...styles} = options;
+  
+  if (color) {
+    styles['--iconPrimary'] = {
+      type: 'fill',
+      value: color
+    };
+  }
+
+  styles['size'] = iconSizes[size];
+
+  // @ts-ignore
+  return style.call(this, styles);
+}
diff --git a/packages/@react-spectrum/s2/style/properties.json b/packages/@react-spectrum/s2/style/properties.json
index 8d804625675..0ed62c71dec 100644
--- a/packages/@react-spectrum/s2/style/properties.json
+++ b/packages/@react-spectrum/s2/style/properties.json
@@ -1,2059 +1,1776 @@
 {
   "properties": {
-    "fontSize": "a",
-    "fontFamily": "b",
-    "backgroundColor": "c",
-    "color": "d",
-    "height": "e",
-    "width": "f",
-    "lineHeight": "g",
-    "marginInlineStart": "h",
-    "marginInlineEnd": "i",
-    "marginTop": "j",
-    "columnGap": "k",
-    "marginBottom": "l",
-    "display": "m",
-    "paddingInlineEnd": "n",
-    "paddingInlineStart": "o",
-    "rowGap": "p",
-    "borderColor": "q",
-    "paddingTop": "r",
-    "minHeight": "s",
-    "outlineStyle": "t",
-    "minWidth": "u",
-    "paddingBottom": "v",
-    "borderEndStartRadius": "w",
-    "borderStartEndRadius": "x",
-    "borderEndEndRadius": "y",
-    "borderStartStartRadius": "z",
-    "cursor": "A",
-    "outlineColor": "B",
-    "fontSynthesisWeight": "C",
-    "fontVariationSettings": "D",
-    "fontWeight": "E",
-    "alignItems": "F",
-    "bottom": "G",
-    "top": "H",
-    "insetInlineEnd": "I",
-    "insetInlineStart": "J",
-    "position": "K",
-    "gridColumnStart": "L",
-    "flexBasis": "M",
-    "gridColumnEnd": "N",
-    "fill": "O",
-    "left": "P",
-    "right": "Q",
-    "borderStyle": "R",
-    "gridTemplateColumns": "S",
-    "scrollPaddingInlineStart": "T",
-    "scrollPaddingTop": "U",
-    "borderSpacing": "V",
-    "scrollMarginBottom": "W",
-    "scrollMarginInlineEnd": "X",
-    "scrollMarginInlineStart": "Y",
-    "scrollMarginTop": "Z",
-    "scrollPaddingBottom": "_a",
-    "scrollPaddingInlineEnd": "_b",
-    "textIndent": "_c",
-    "gridRowEnd": "_d",
-    "transitionTimingFunction": "_e",
-    "gridRowStart": "_f",
-    "outlineWidth": "_g",
-    "overflowY": "_h",
-    "transitionProperty": "_i",
-    "columns": "_j",
-    "transitionDuration": "_k",
-    "maxWidth": "_l",
-    "borderBottomWidth": "_m",
-    "borderTopWidth": "_n",
-    "overflowX": "_o",
-    "justifyContent": "_p",
-    "boxSizing": "_q",
-    "flexShrink": "_r",
-    "borderInlineEndWidth": "_s",
-    "borderInlineStartWidth": "_t",
-    "gridTemplateAreas": "_u",
-    "contain": "_v",
-    "maxHeight": "_w",
-    "mixBlendMode": "_x",
-    "outlineOffset": "_y",
-    "whiteSpace": "_z",
-    "backgroundBlendMode": "_A",
-    "flexDirection": "_B",
-    "containIntrinsicHeight": "_C",
-    "containIntrinsicWidth": "_D",
-    "textAlign": "_E",
-    "gridTemplateRows": "_F",
-    "-webkit-tap-highlight-color": "_G",
-    "flexGrow": "_H",
-    "translate": "_I",
-    "alignContent": "_J",
-    "boxShadow": "_K",
-    "opacity": "_L",
-    "order": "_M",
-    "colorScheme": "_N",
-    "aspectRatio": "_O",
-    "transformOrigin": "_P",
-    "userSelect": "_Q",
-    "objectFit": "_R",
+    "--iconPrimary": "a",
+    "--s2-container-bg": "b",
+    "--translateX": "c",
+    "--translateY": "d",
+    "alignItems": "e",
+    "aspectRatio": "f",
+    "backgroundColor": "g",
+    "borderBottomWidth": "h",
+    "borderColor": "i",
+    "borderEndEndRadius": "j",
+    "borderEndStartRadius": "k",
+    "borderInlineEndWidth": "l",
+    "borderInlineStartWidth": "m",
+    "borderStartEndRadius": "n",
+    "borderStartStartRadius": "o",
+    "color": "p",
+    "columnGap": "q",
+    "cursor": "r",
+    "display": "s",
+    "fill": "t",
+    "fontFamily": "u",
+    "fontSize": "v",
+    "fontVariationSettings": "w",
+    "fontWeight": "x",
+    "gridColumnEnd": "y",
+    "gridColumnStart": "z",
+    "gridRowEnd": "A",
+    "gridRowStart": "B",
+    "gridTemplateAreas": "C",
+    "gridTemplateColumns": "D",
+    "gridTemplateRows": "E",
+    "height": "F",
+    "marginBottom": "G",
+    "marginInlineEnd": "H",
+    "marginInlineStart": "I",
+    "marginTop": "J",
+    "maxHeight": "K",
+    "maxWidth": "L",
+    "minHeight": "M",
+    "minWidth": "N",
+    "outlineColor": "O",
+    "overflowY": "P",
+    "paddingBottom": "Q",
+    "paddingInlineEnd": "R",
+    "paddingInlineStart": "S",
+    "paddingTop": "T",
+    "rowGap": "U",
+    "stroke": "V",
+    "top": "W",
+    "transitionDuration": "X",
+    "transitionProperty": "Y",
+    "width": "Z",
+    "--scaleX": "_a",
+    "--scaleY": "_b",
+    "alignContent": "_c",
+    "alignSelf": "_d",
+    "animationDuration": "_e",
+    "animationFillMode": "_f",
+    "animationName": "_g",
+    "animationTimingFunction": "_h",
+    "backgroundImage": "_i",
+    "borderStyle": "_j",
+    "borderTopWidth": "_k",
+    "bottom": "_l",
+    "boxDecorationBreak": "_m",
+    "boxShadow": "_n",
+    "boxSizing": "_o",
+    "colorScheme": "_p",
+    "contain": "_q",
+    "filter": "_r",
+    "flexBasis": "_s",
+    "flexDirection": "_t",
+    "flexGrow": "_u",
+    "flexShrink": "_v",
+    "flexWrap": "_w",
+    "fontSynthesisWeight": "_x",
+    "forcedColorAdjust": "_y",
+    "insetInlineEnd": "_z",
+    "insetInlineStart": "_A",
+    "isolation": "_B",
+    "justifyContent": "_C",
+    "justifyItems": "_D",
+    "left": "_E",
+    "lineHeight": "_F",
+    "listStyleType": "_G",
+    "objectFit": "_H",
+    "opacity": "_I",
+    "order": "_J",
+    "outlineOffset": "_K",
+    "outlineStyle": "_L",
+    "outlineWidth": "_M",
+    "overflowX": "_N",
+    "pointerEvents": "_O",
+    "position": "_P",
+    "resize": "_Q",
+    "right": "_R",
     "rotate": "_S",
-    "textOverflow": "_T",
-    "backgroundPosition": "_U",
-    "objectPosition": "_V",
-    "verticalAlign": "_W",
-    "alignSelf": "_X",
-    "breakAfter": "_Y",
-    "breakBefore": "_Z",
-    "forcedColorAdjust": "_0",
-    "pointerEvents": "_1",
-    "animationTimingFunction": "_2",
-    "flexWrap": "_3",
-    "backgroundRepeat": "_4",
-    "clear": "_5",
-    "scrollSnapType": "_6",
-    "touchAction": "_7",
-    "visibility": "_8",
-    "isolation": "_9",
-    "backgroundImage": "__a",
-    "filter": "__b",
-    "float": "__c",
-    "gridAutoFlow": "__d",
-    "justifyItems": "__e",
-    "justifySelf": "__f",
-    "stroke": "__g",
-    "textDecoration": "__h",
-    "animationFillMode": "__i",
-    "resize": "__j",
-    "willChange": "__k",
-    "animationDirection": "__l",
-    "backgroundClip": "__m",
-    "breakInside": "__n",
-    "scale": "__o",
-    "scrollSnapAlign": "__p",
-    "strokeWidth": "__q",
-    "textTransform": "__r",
-    "textWrap": "__s",
-    "listStyleType": "__t",
-    "backgroundAttachment": "__u",
-    "backgroundOrigin": "__v",
-    "backgroundSize": "__w",
-    "hyphens": "__x",
-    "overscrollBehaviorX": "__y",
-    "overscrollBehaviorY": "__z",
-    "wordBreak": "__A",
-    "zIndex": "__B",
-    "boxDecorationBreak": "__C",
-    "textUnderlineOffset": "__D",
-    "animationDuration": "__E",
-    "appearance": "__F",
-    "borderCollapse": "__G",
-    "captionSide": "__H",
-    "listStylePosition": "__I",
-    "scrollBehavior": "__J",
-    "scrollSnapStop": "__K",
-    "tableLayout": "__L",
-    "transform": "__M",
-    "-webkit-box-orient": "__N",
-    "-webkit-line-clamp": "__O",
-    "animationName": "__P",
-    "gridAutoRows": "__Q",
-    "overflow": "__R",
-    "transitionDelay": "__S",
-    "animationIterationCount": "__T"
+    "scrollPaddingInlineStart": "_T",
+    "scrollPaddingTop": "_U",
+    "strokeWidth": "_V",
+    "textAlign": "_W",
+    "textDecoration": "_X",
+    "textOverflow": "_Y",
+    "transform": "_Z",
+    "transformOrigin": "_0",
+    "transitionDelay": "_1",
+    "transitionTimingFunction": "_2",
+    "unicodeBidi": "_3",
+    "userSelect": "_4",
+    "verticalAlign": "_5",
+    "visibility": "_6",
+    "whiteSpace": "_7",
+    "willChange": "_8",
+    "zIndex": "_9",
+    "-webkit-box-orient": "__a",
+    "-webkit-line-clamp": "__b",
+    "-webkit-tap-highlight-color": "__c",
+    "animationDirection": "__d",
+    "animationIterationCount": "__e",
+    "appearance": "__f",
+    "backgroundAttachment": "__g",
+    "backgroundBlendMode": "__h",
+    "backgroundClip": "__i",
+    "backgroundOrigin": "__j",
+    "backgroundPosition": "__k",
+    "backgroundRepeat": "__l",
+    "backgroundSize": "__m",
+    "borderCollapse": "__n",
+    "borderSpacing": "__o",
+    "breakAfter": "__p",
+    "breakBefore": "__q",
+    "breakInside": "__r",
+    "captionSide": "__s",
+    "clear": "__t",
+    "containIntrinsicHeight": "__u",
+    "containIntrinsicWidth": "__v",
+    "float": "__w",
+    "gridAutoFlow": "__x",
+    "gridAutoRows": "__y",
+    "hyphens": "__z",
+    "justifySelf": "__A",
+    "listStylePosition": "__B",
+    "mixBlendMode": "__C",
+    "objectPosition": "__D",
+    "overflow": "__E",
+    "overscrollBehaviorX": "__F",
+    "overscrollBehaviorY": "__G",
+    "scale": "__H",
+    "scrollBehavior": "__I",
+    "scrollMarginBottom": "__J",
+    "scrollMarginInlineEnd": "__K",
+    "scrollMarginInlineStart": "__L",
+    "scrollMarginTop": "__M",
+    "scrollPaddingBottom": "__N",
+    "scrollPaddingInlineEnd": "__O",
+    "scrollSnapAlign": "__P",
+    "scrollSnapStop": "__Q",
+    "scrollSnapType": "__R",
+    "tableLayout": "__S",
+    "textIndent": "__T",
+    "textTransform": "__U",
+    "textUnderlineOffset": "__V",
+    "textWrap": "__W",
+    "touchAction": "__X",
+    "translate": "__Y",
+    "wordBreak": "__Z"
   },
   "values": {
-    "fontSize": {
-      "0.875rem": "a",
-      "1.0625rem": "b",
-      "1.375rem": "c",
-      "1.1875rem": "d",
-      "1rem": "e",
-      "0.75rem": "f",
-      "0.9375rem": "g",
-      "1.125rem": "h",
-      "0.6875rem": "i",
-      "0.8125rem": "j",
-      "1.25rem": "k",
-      "1.5rem": "l",
-      "1.6875rem": "m",
-      "1.5625rem": "n",
-      "1.9375rem": "o",
-      "1.75rem": "p",
-      "2.125rem": "q",
-      "2.25rem": "r",
-      "2.75rem": "s",
-      "2.8125rem": "t",
-      "3.4375rem": "u",
-      "3.625rem": "v",
-      "4.375rem": "w"
+    "--iconPrimary": {
+      "ButtonText": "a",
+      "GrayText": "b",
+      "Highlight": "c",
+      "HighlightText": "d",
+      "black": "e",
+      "currentColor": "f",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "g",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "h",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "i",
+      "light-dark(rgb(143, 143, 143), rgb(138, 138, 138))": "j",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "k",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "l",
+      "light-dark(rgb(212, 91, 0), rgb(224, 100, 0))": "m",
+      "light-dark(rgb(240, 56, 35), rgb(252, 67, 46))": "n",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "o",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "p",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "q",
+      "light-dark(rgb(7, 147, 85), rgb(9, 157, 89))": "r",
+      "light-dark(rgb(75, 117, 255), rgb(86, 129, 255))": "s",
+      "white": "t"
+    },
+    "--s2-container-bg": {
+      "ButtonFace": "a",
+      "black": "b",
+      "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))": "c",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "d",
+      "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))": "e",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "f",
+      "white": "g"
+    },
+    "--translateX": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-25%": "e",
+      "-28px": "f",
+      "-2px": "g",
+      "-32px": "h",
+      "-36px": "i",
+      "-40px": "j",
+      "-44px": "k",
+      "-48px": "l",
+      "-4px": "m",
+      "-56px": "n",
+      "-64px": "o",
+      "-80px": "p",
+      "-8px": "q",
+      "-96px": "r",
+      "0px": "s",
+      "100%": "t",
+      "12px": "u",
+      "16px": "v",
+      "20px": "w",
+      "24px": "x",
+      "25%": "y",
+      "28px": "z",
+      "2px": "A",
+      "32px": "B",
+      "36px": "C",
+      "40px": "D",
+      "44px": "E",
+      "48px": "F",
+      "4px": "G",
+      "56px": "H",
+      "64px": "I",
+      "80px": "J",
+      "8px": "K",
+      "96px": "L"
+    },
+    "--translateY": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-50%": "m",
+      "-56px": "n",
+      "-64px": "o",
+      "-80px": "p",
+      "-8px": "q",
+      "-96px": "r",
+      "0px": "s",
+      "100%": "t",
+      "12px": "u",
+      "16px": "v",
+      "20px": "w",
+      "24px": "x",
+      "28px": "y",
+      "2px": "z",
+      "32px": "A",
+      "36px": "B",
+      "40px": "C",
+      "44px": "D",
+      "48px": "E",
+      "4px": "F",
+      "56px": "G",
+      "64px": "H",
+      "80px": "I",
+      "8px": "J",
+      "96px": "K"
     },
-    "fontFamily": {
-      "adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif": "a",
-      "adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif": "b",
-      "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif": "c",
-      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif": "d",
-      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif": "e",
-      "myriad-arabic, ui-sans-serif, system-ui, sans-serif": "f",
-      "myriad-hebrew, ui-sans-serif, system-ui, sans-serif": "g",
-      "adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif": "h",
-      "adobe-clean-serif, \"Source Serif\", Georgia, serif": "i",
-      "source-code-pro, \"Source Code Pro\", Monaco, monospace": "j"
+    "alignItems": {
+      "baseline": "a",
+      "center": "b",
+      "end": "c",
+      "start": "d",
+      "stretch": "e"
+    },
+    "aspectRatio": {
+      "1/1": "a",
+      "3/1": "b",
+      "3/2": "c",
+      "5/1": "d"
     },
     "backgroundColor": {
-      "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))": "a",
-      "light-dark(rgb(39, 77, 234), rgb(52, 91, 248))": "b",
-      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "c",
-      "transparent": "d",
-      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "e",
+      "Background": "a",
+      "ButtonFace": "b",
+      "ButtonText": "c",
+      "GrayText": "d",
+      "Highlight": "e",
       "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.11)": "f",
-      "Highlight": "g",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.14)": "h",
-      "light-dark(rgb(183, 40, 24), rgb(205, 46, 29))": "i",
-      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "j",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "k",
-      "light-dark(rgb(59, 99, 251), rgb(64, 105, 253))": "l",
-      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "m",
-      "ButtonFace": "n",
-      "GrayText": "o",
-      "light-dark(rgb(3, 110, 69), rgb(4, 124, 75))": "p",
-      "light-dark(rgb(41, 41, 41), rgb(68, 68, 68))": "q",
-      "black": "r",
-      "white": "s",
-      "ButtonText": "t",
-      "light-dark(rgb(215, 50, 32), rgb(223, 52, 34))": "u",
-      "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))": "v",
-      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "w",
-      "Background": "x",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "y",
-      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "z",
-      "light-dark(rgb(229, 240, 254), rgb(12, 33, 117))": "A",
-      "light-dark(rgb(5, 131, 78), rgb(6, 136, 80))": "B",
-      "light-dark(rgb(80, 80, 80), rgb(109, 109, 109))": "C",
-      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "D",
-      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "E",
-      "light-dark(rgb(215, 247, 225), rgb(0, 51, 38))": "F",
-      "light-dark(rgb(233, 233, 233), rgb(57, 57, 57))": "G",
-      "light-dark(rgb(252, 125, 0), rgb(224, 100, 0))": "H",
-      "light-dark(rgb(255, 235, 232), rgb(87, 17, 7))": "I",
-      "light-dark(rgb(255, 236, 207), rgb(80, 27, 0))": "J",
-      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "K",
-      "ButtonBorder": "L",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "M",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "N",
-      "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))": "O",
-      "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))": "P",
-      "rgba(0, 0, 0, 0.44)": "Q",
-      "Mark": "R",
-      "light-dark(rgb(11, 120, 179), rgb(13, 125, 186))": "S",
-      "light-dark(rgb(113, 85, 250), rgb(116, 91, 252))": "T",
-      "light-dark(rgb(114, 114, 114), rgb(118, 118, 118))": "U",
-      "light-dark(rgb(139, 109, 66), rgb(143, 114, 69))": "V",
-      "light-dark(rgb(154, 71, 226), rgb(157, 78, 228))": "W",
-      "light-dark(rgb(163, 196, 0), rgb(136, 164, 0))": "X",
-      "light-dark(rgb(170, 94, 56), rgb(176, 98, 59))": "Y",
-      "light-dark(rgb(181, 57, 200), rgb(186, 60, 206))": "Z",
-      "light-dark(rgb(197, 255, 156), rgb(21, 51, 1))": "0",
-      "light-dark(rgb(206, 42, 146), rgb(213, 45, 151))": "1",
-      "light-dark(rgb(209, 245, 245), rgb(0, 49, 54))": "2",
-      "light-dark(rgb(211, 246, 234), rgb(0, 50, 44))": "3",
-      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "4",
-      "light-dark(rgb(217, 244, 253), rgb(0, 48, 65))": "5",
-      "light-dark(rgb(217, 35, 97), rgb(224, 38, 101))": "6",
-      "light-dark(rgb(229, 240, 254), rgb(15, 28, 82))": "7",
-      "light-dark(rgb(234, 246, 173), rgb(39, 47, 0))": "8",
-      "light-dark(rgb(235, 238, 255), rgb(47, 0, 140))": "9",
-      "light-dark(rgb(239, 239, 239), rgb(44, 44, 44))": "_a",
-      "light-dark(rgb(244, 235, 252), rgb(64, 0, 122))": "_b",
-      "light-dark(rgb(245, 199, 0), rgb(218, 159, 0))": "_c",
-      "light-dark(rgb(247, 238, 225), rgb(58, 40, 14))": "_d",
-      "light-dark(rgb(249, 236, 229), rgb(79, 28, 7))": "_e",
-      "light-dark(rgb(253, 233, 255), rgb(79, 0, 95))": "_f",
-      "light-dark(rgb(255, 232, 240), rgb(93, 0, 34))": "_g",
-      "light-dark(rgb(255, 232, 247), rgb(90, 0, 57))": "_h",
-      "light-dark(rgb(255, 241, 151), rgb(61, 39, 0))": "_i",
-      "light-dark(rgb(7, 129, 109), rgb(8, 134, 112))": "_j",
-      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "_k",
-      "light-dark(rgb(8, 126, 137), rgb(9, 131, 142))": "_l",
-      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "_m",
-      "light-dark(rgb(93, 180, 31), rgb(78, 154, 23))": "_n"
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.14)": "g",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "h",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "i",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "j",
+      "light-dark(rgb(11, 120, 179), rgb(13, 125, 186))": "k",
+      "light-dark(rgb(113, 85, 250), rgb(116, 91, 252))": "l",
+      "light-dark(rgb(114, 114, 114), rgb(118, 118, 118))": "m",
+      "light-dark(rgb(139, 109, 66), rgb(143, 114, 69))": "n",
+      "light-dark(rgb(154, 71, 226), rgb(157, 78, 228))": "o",
+      "light-dark(rgb(163, 196, 0), rgb(136, 164, 0))": "p",
+      "light-dark(rgb(170, 94, 56), rgb(176, 98, 59))": "q",
+      "light-dark(rgb(181, 57, 200), rgb(186, 60, 206))": "r",
+      "light-dark(rgb(183, 40, 24), rgb(252, 67, 46))": "s",
+      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "t",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "u",
+      "light-dark(rgb(197, 255, 156), rgb(21, 51, 1))": "v",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "w",
+      "light-dark(rgb(206, 42, 146), rgb(213, 45, 151))": "x",
+      "light-dark(rgb(209, 245, 245), rgb(0, 49, 54))": "y",
+      "light-dark(rgb(211, 246, 234), rgb(0, 50, 44))": "z",
+      "light-dark(rgb(215, 247, 225), rgb(0, 51, 38))": "A",
+      "light-dark(rgb(215, 50, 32), rgb(223, 52, 34))": "B",
+      "light-dark(rgb(217, 244, 253), rgb(0, 48, 65))": "C",
+      "light-dark(rgb(217, 35, 97), rgb(224, 38, 101))": "D",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "E",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "F",
+      "light-dark(rgb(229, 240, 254), rgb(12, 33, 117))": "G",
+      "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))": "H",
+      "light-dark(rgb(233, 233, 233), rgb(57, 57, 57))": "I",
+      "light-dark(rgb(234, 246, 173), rgb(39, 47, 0))": "J",
+      "light-dark(rgb(235, 238, 255), rgb(47, 0, 140))": "K",
+      "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))": "L",
+      "light-dark(rgb(244, 235, 252), rgb(64, 0, 122))": "M",
+      "light-dark(rgb(245, 199, 0), rgb(218, 159, 0))": "N",
+      "light-dark(rgb(247, 238, 225), rgb(58, 40, 14))": "O",
+      "light-dark(rgb(249, 236, 229), rgb(79, 28, 7))": "P",
+      "light-dark(rgb(252, 125, 0), rgb(224, 100, 0))": "Q",
+      "light-dark(rgb(253, 233, 255), rgb(79, 0, 95))": "R",
+      "light-dark(rgb(255, 232, 240), rgb(93, 0, 34))": "S",
+      "light-dark(rgb(255, 232, 247), rgb(90, 0, 57))": "T",
+      "light-dark(rgb(255, 235, 232), rgb(87, 17, 7))": "U",
+      "light-dark(rgb(255, 236, 207), rgb(80, 27, 0))": "V",
+      "light-dark(rgb(255, 241, 151), rgb(61, 39, 0))": "W",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "X",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "Y",
+      "light-dark(rgb(39, 77, 234), rgb(86, 129, 255))": "Z",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "0",
+      "light-dark(rgb(5, 131, 78), rgb(6, 136, 80))": "1",
+      "light-dark(rgb(59, 99, 251), rgb(64, 105, 253))": "2",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "3",
+      "light-dark(rgb(7, 129, 109), rgb(8, 134, 112))": "4",
+      "light-dark(rgb(8, 126, 137), rgb(9, 131, 142))": "5",
+      "light-dark(rgb(80, 80, 80), rgb(109, 109, 109))": "6",
+      "light-dark(rgb(93, 180, 31), rgb(78, 154, 23))": "7",
+      "rgba(0, 0, 0, 0.44)": "8",
+      "transparent": "9",
+      "ButtonBorder": "_a",
+      "Mark": "_b",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "_c",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "_d",
+      "light-dark(rgb(229, 240, 254), rgb(15, 28, 82))": "_e",
+      "light-dark(rgb(239, 239, 239), rgb(44, 44, 44))": "_f",
+      "light-dark(rgb(255, 255, 255), rgb(34, 34, 34))": "_g",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "_h",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "_i"
     },
-    "color": {
-      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "a",
-      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "b",
-      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "c",
-      "white": "d",
-      "GrayText": "e",
-      "ButtonText": "f",
-      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "g",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "h",
-      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "i",
-      "black": "j",
-      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "k",
-      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "l",
-      "HighlightText": "m",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "n",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "o",
-      "ButtonFace": "p",
-      "LinkText": "q",
-      "lch(from var(--c, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1)": "r",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "s",
-      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "t",
-      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "u",
-      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "v",
-      "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))": "w",
-      "Highlight": "x",
-      "transparent": "y"
+    "borderBottomWidth": {
+      "0px": "a",
+      "1px": "b",
+      "2px": "c",
+      "4px": "d"
     },
-    "height": {
-      "calc(1.25rem * var(--s2-scale))": "a",
-      "calc(1.5rem * var(--s2-scale))": "b",
-      "calc(2rem * var(--s2-scale))": "c",
-      "calc(2.5rem * var(--s2-scale))": "d",
-      "calc(3rem * var(--s2-scale))": "e",
-      "100%": "f",
-      "calc(1rem * var(--s2-scale))": "g",
-      "calc(1.125rem * var(--s2-scale))": "h",
-      "calc(0.875rem * var(--s2-scale))": "i",
-      "calc(0.5rem * var(--s2-scale))": "j",
-      "calc(0.25rem * var(--s2-scale))": "k",
-      "auto": "l",
-      "calc(1.375rem * var(--s2-scale))": "m",
-      "calc(0.375rem * var(--s2-scale))": "n",
-      "100vh": "o",
-      "calc(0.625rem * var(--s2-scale))": "p",
-      "calc(0.75rem * var(--s2-scale))": "q",
-      "calc(2.75rem * var(--s2-scale))": "r",
-      "fit-content": "s",
-      "min-content": "t",
-      "calc(1.625rem * var(--s2-scale))": "u",
-      "calc(12rem * var(--s2-scale))": "v",
-      "calc(2.25rem * var(--s2-scale))": "w",
-      "calc(3.5rem * var(--s2-scale))": "x",
-      "calc(6rem * var(--s2-scale))": "y",
-      "max-content": "z",
-      "0px": "A",
-      "calc(10rem * var(--s2-scale))": "B",
-      "calc(4rem * var(--s2-scale))": "C",
-      "calc(8.75rem * var(--s2-scale))": "D"
+    "borderColor": {
+      "ButtonBorder": "a",
+      "ButtonText": "b",
+      "GrayText": "c",
+      "Highlight": "d",
+      "Mark": "e",
+      "black": "f",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "g",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "h",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "i",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "j",
+      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "k",
+      "light-dark(rgb(11, 164, 93), rgb(4, 124, 75))": "l",
+      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "m",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "n",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "o",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "p",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "q",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "r",
+      "light-dark(rgb(232, 106, 0), rgb(185, 73, 0))": "s",
+      "light-dark(rgb(240, 56, 35), rgb(223, 52, 34))": "t",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "u",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "v",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "w",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "x",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "y",
+      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 42%)": "z",
+      "transparent": "A",
+      "white": "B"
     },
-    "width": {
-      "100%": "a",
-      "calc(1.25rem * var(--s2-scale))": "b",
-      "calc(1.5rem * var(--s2-scale))": "c",
-      "calc(12rem * var(--s2-scale))": "d",
-      "fit-content": "e",
-      "calc(1rem * var(--s2-scale))": "f",
-      "calc(2rem * var(--s2-scale))": "g",
-      "calc(15rem * var(--s2-scale))": "h",
-      "calc(2.5rem * var(--s2-scale))": "i",
-      "calc(1.125rem * var(--s2-scale))": "j",
-      "calc(13rem * var(--s2-scale))": "k",
-      "calc(14rem * var(--s2-scale))": "l",
-      "calc(0.875rem * var(--s2-scale))": "m",
-      "calc(3rem * var(--s2-scale))": "n",
-      "calc(1.375rem * var(--s2-scale))": "o",
-      "auto": "p",
-      "max-content": "q",
-      "100vw": "r",
-      "calc(0.75rem * var(--s2-scale))": "s",
-      "calc(2.75rem * var(--s2-scale))": "t",
-      "calc(21rem * var(--s2-scale))": "u",
-      "calc(26rem * var(--s2-scale))": "v",
-      "calc(36rem * var(--s2-scale))": "w",
-      "calc(6rem * var(--s2-scale))": "x",
-      "min-content": "y",
-      "calc(0.0625rem * var(--s2-scale))": "z",
-      "calc(0.125rem * var(--s2-scale))": "A",
-      "calc(0.375rem * var(--s2-scale))": "B",
-      "calc(0.5rem * var(--s2-scale))": "C",
-      "calc(0.625rem * var(--s2-scale))": "D",
-      "calc(1.625rem * var(--s2-scale))": "E",
-      "calc(10rem * var(--s2-scale))": "F",
-      "calc(13.625rem * var(--s2-scale))": "G",
-      "calc(2.25rem * var(--s2-scale))": "H",
-      "calc(20rem * var(--s2-scale))": "I",
-      "calc(25rem * var(--s2-scale))": "J",
-      "calc(3.5rem * var(--s2-scale))": "K",
-      "calc(4rem * var(--s2-scale))": "L",
-      "calc(7rem * var(--s2-scale))": "M"
+    "borderEndEndRadius": {
+      "0.25rem": "a",
+      "0.5rem": "b",
+      "0.625rem": "c",
+      "0px": "d",
+      "1rem": "e",
+      "6px": "f",
+      "9999px": "g",
+      "calc(var(--F, var(--M, 9999px)) / 2)": "h",
+      "inherit": "i",
+      "round(var(--radius) * var(--size), 1px)": "j"
     },
-    "lineHeight": {
-      "1.5": "a",
-      "1.3": "b",
-      "1.7": "c"
+    "borderEndStartRadius": {
+      "0.25rem": "a",
+      "0.5rem": "b",
+      "0.625rem": "c",
+      "0px": "d",
+      "1rem": "e",
+      "6px": "f",
+      "9999px": "g",
+      "calc(var(--F, var(--M, 9999px)) / 2)": "h",
+      "inherit": "i",
+      "round(var(--radius) * var(--size), 1px)": "j"
     },
-    "marginInlineStart": {
-      "0rem": "a",
-      "auto": "b",
-      "0.5rem": "c",
-      "-0.75rem": "d",
-      "0.25rem": "e",
-      "0.42857142857142855em": "f",
-      "0.47058823529411764em": "g",
-      "-0.25rem": "h",
-      "0.7142857142857143em": "i",
-      "1rem": "j",
-      "2rem": "k",
-      "-0.5rem": "l",
-      "-1.5rem": "m",
-      "0.125rem": "n",
-      "0.75rem": "o",
-      "-1.25rem": "p",
-      "-1.75rem": "q",
-      "-10rem": "r",
-      "-11rem": "s",
-      "-12rem": "t",
-      "-13rem": "u",
-      "-14rem": "v",
-      "-15rem": "w",
-      "-16rem": "x",
-      "-18rem": "y",
-      "-1rem": "z",
-      "-2.25rem": "A",
-      "-2.5rem": "B",
-      "-2.75rem": "C",
-      "-20rem": "D",
-      "-24rem": "E",
-      "-2rem": "F",
-      "-3.5rem": "G",
-      "-3rem": "H",
-      "-4rem": "I",
-      "-5rem": "J",
-      "-6rem": "K",
-      "-7rem": "L",
-      "-8rem": "M",
-      "-9rem": "N",
-      "1.25rem": "O",
-      "1.5rem": "P",
-      "1.75rem": "Q",
-      "10rem": "R",
-      "11rem": "S",
-      "12rem": "T",
-      "13rem": "U",
-      "14rem": "V",
-      "15rem": "W",
-      "16rem": "X",
-      "18rem": "Y",
-      "2.25rem": "Z",
-      "2.5rem": "0",
-      "2.75rem": "1",
-      "20rem": "2",
-      "24rem": "3",
-      "3.5rem": "4",
-      "3rem": "5",
-      "4rem": "6",
-      "5rem": "7",
-      "6rem": "8",
-      "7rem": "9",
-      "8rem": "_a",
-      "9rem": "_b",
-      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
-      "calc(var(--e, var(--s)) / 2)": "_d"
+    "borderInlineEndWidth": {
+      "0px": "a",
+      "1px": "b",
+      "2px": "c",
+      "4px": "d"
     },
-    "marginInlineEnd": {
-      "0rem": "a",
-      "0.25rem": "b",
-      "0.42857142857142855em": "c",
-      "0.47058823529411764em": "d",
-      "auto": "e",
-      "0.5rem": "f",
-      "0.7142857142857143em": "g",
-      "2rem": "h",
-      "-0.25rem": "i",
-      "-0.5rem": "j",
-      "-1.5rem": "k",
-      "0.75rem": "l",
-      "1rem": "m",
-      "-0.75rem": "n",
-      "-1.25rem": "o",
-      "-1.75rem": "p",
-      "-10rem": "q",
-      "-11rem": "r",
-      "-12rem": "s",
-      "-13rem": "t",
-      "-14rem": "u",
-      "-15rem": "v",
-      "-16rem": "w",
-      "-18rem": "x",
-      "-1rem": "y",
-      "-2.25rem": "z",
-      "-2.5rem": "A",
-      "-2.75rem": "B",
-      "-20rem": "C",
-      "-24rem": "D",
-      "-2rem": "E",
-      "-3.5rem": "F",
-      "-3rem": "G",
-      "-4rem": "H",
-      "-5rem": "I",
-      "-6rem": "J",
-      "-7rem": "K",
-      "-8rem": "L",
-      "-9rem": "M",
-      "0.125rem": "N",
-      "1.25rem": "O",
-      "1.5rem": "P",
-      "1.75rem": "Q",
-      "10rem": "R",
-      "11rem": "S",
-      "12rem": "T",
-      "13rem": "U",
-      "14rem": "V",
-      "15rem": "W",
-      "16rem": "X",
-      "18rem": "Y",
-      "2.25rem": "Z",
-      "2.5rem": "0",
-      "2.75rem": "1",
-      "20rem": "2",
-      "24rem": "3",
-      "3.5rem": "4",
-      "3rem": "5",
-      "4rem": "6",
-      "5rem": "7",
-      "6rem": "8",
-      "7rem": "9",
-      "8rem": "_a",
-      "9rem": "_b",
-      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
-      "calc(var(--e, var(--s)) / 2)": "_d"
+    "borderInlineStartWidth": {
+      "0px": "a",
+      "1px": "b",
+      "2px": "c",
+      "4px": "d"
     },
-    "marginTop": {
-      "0rem": "a",
-      "0.25rem": "b",
-      "1rem": "c",
-      "-0.25rem": "d",
-      "-1.5rem": "e",
-      "0.5rem": "f",
-      "0.75rem": "g",
-      "1.25rem": "h",
-      "-0.5rem": "i",
-      "-0.75rem": "j",
-      "-1.25rem": "k",
-      "-1.75rem": "l",
-      "-10rem": "m",
-      "-11rem": "n",
-      "-12rem": "o",
-      "-13rem": "p",
-      "-14rem": "q",
-      "-15rem": "r",
-      "-16rem": "s",
-      "-18rem": "t",
-      "-1rem": "u",
-      "-2.25rem": "v",
-      "-2.5rem": "w",
-      "-2.75rem": "x",
-      "-20rem": "y",
-      "-24rem": "z",
-      "-2rem": "A",
-      "-3.5rem": "B",
-      "-3rem": "C",
-      "-4rem": "D",
-      "-5rem": "E",
-      "-6rem": "F",
-      "-7rem": "G",
-      "-8rem": "H",
-      "-9rem": "I",
-      "0.125rem": "J",
-      "0.42857142857142855em": "K",
-      "0.47058823529411764em": "L",
-      "0.7142857142857143em": "M",
-      "1.5rem": "N",
-      "1.75rem": "O",
-      "10rem": "P",
-      "11rem": "Q",
-      "12rem": "R",
-      "13rem": "S",
-      "14rem": "T",
-      "15rem": "U",
-      "16rem": "V",
-      "18rem": "W",
-      "2.25rem": "X",
-      "2.5rem": "Y",
-      "2.75rem": "Z",
-      "20rem": "0",
-      "24rem": "1",
-      "2rem": "2",
-      "3.5rem": "3",
-      "3rem": "4",
-      "4rem": "5",
-      "5rem": "6",
-      "6rem": "7",
-      "7rem": "8",
-      "8rem": "9",
-      "9rem": "_a",
-      "auto": "_b",
-      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
-      "calc(var(--e, var(--s)) / 2)": "_d"
+    "borderStartEndRadius": {
+      "0.25rem": "a",
+      "0.5rem": "b",
+      "0.625rem": "c",
+      "0px": "d",
+      "1rem": "e",
+      "6px": "f",
+      "9999px": "g",
+      "calc(var(--F, var(--M, 9999px)) / 2)": "h",
+      "inherit": "i",
+      "round(var(--radius) * var(--size), 1px)": "j"
     },
-    "columnGap": {
-      "0.75rem": "a",
-      "0.42857142857142855em": "b",
-      "0.47058823529411764em": "c",
-      "0.5rem": "d",
-      "0.25rem": "e",
-      "1.5rem": "f",
-      "1rem": "g",
-      "0.7142857142857143em": "h",
-      "0.125rem": "i",
-      "1.25rem": "j",
-      "2rem": "k",
-      "0rem": "l",
-      "1.75rem": "m",
-      "10rem": "n",
-      "11rem": "o",
-      "12rem": "p",
-      "13rem": "q",
-      "14rem": "r",
-      "15rem": "s",
-      "16rem": "t",
-      "18rem": "u",
-      "2.25rem": "v",
-      "2.5rem": "w",
-      "2.75rem": "x",
-      "20rem": "y",
-      "24rem": "z",
-      "3.5rem": "A",
-      "3rem": "B",
-      "4rem": "C",
-      "5rem": "D",
-      "6rem": "E",
-      "7rem": "F",
-      "8rem": "G",
-      "9rem": "H",
-      "calc(var(--e, var(--s)) * 3 / 8)": "I",
-      "calc(var(--e, var(--s)) / 2)": "J"
+    "borderStartStartRadius": {
+      "0.25rem": "a",
+      "0.5rem": "b",
+      "0.625rem": "c",
+      "0px": "d",
+      "1rem": "e",
+      "6px": "f",
+      "9999px": "g",
+      "calc(var(--F, var(--M, 9999px)) / 2)": "h",
+      "inherit": "i",
+      "round(var(--radius) * var(--size), 1px)": "j"
     },
-    "marginBottom": {
-      "0rem": "a",
+    "color": {
+      "ButtonFace": "a",
+      "ButtonText": "b",
+      "GrayText": "c",
+      "Highlight": "d",
+      "HighlightText": "e",
+      "LinkText": "f",
+      "black": "g",
+      "lch(from var(--g, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1)": "h",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "i",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "j",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "k",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "l",
+      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "m",
+      "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))": "n",
+      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "o",
+      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "p",
+      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "q",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "r",
+      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "s",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "t",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "u",
+      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "v",
+      "transparent": "w",
+      "white": "x"
+    },
+    "columnGap": {
+      "0.125rem": "a",
       "0.25rem": "b",
-      "-0.25rem": "c",
-      "-1.5rem": "d",
+      "0.42857142857142855em": "c",
+      "0.47058823529411764em": "d",
       "0.5rem": "e",
-      "0.75rem": "f",
-      "1rem": "g",
-      "-0.5rem": "h",
-      "-0.75rem": "i",
-      "-1.25rem": "j",
-      "-1.75rem": "k",
-      "-10rem": "l",
-      "-11rem": "m",
-      "-12rem": "n",
-      "-13rem": "o",
-      "-14rem": "p",
-      "-15rem": "q",
-      "-16rem": "r",
-      "-18rem": "s",
-      "-1rem": "t",
-      "-2.25rem": "u",
-      "-2.5rem": "v",
-      "-2.75rem": "w",
-      "-20rem": "x",
-      "-24rem": "y",
-      "-2rem": "z",
-      "-3.5rem": "A",
-      "-3rem": "B",
-      "-4rem": "C",
-      "-5rem": "D",
-      "-6rem": "E",
-      "-7rem": "F",
-      "-8rem": "G",
-      "-9rem": "H",
-      "0.125rem": "I",
-      "0.42857142857142855em": "J",
-      "0.47058823529411764em": "K",
-      "0.7142857142857143em": "L",
-      "1.25rem": "M",
-      "1.5rem": "N",
-      "1.75rem": "O",
-      "10rem": "P",
-      "11rem": "Q",
-      "12rem": "R",
-      "13rem": "S",
-      "14rem": "T",
-      "15rem": "U",
-      "16rem": "V",
-      "18rem": "W",
-      "2.25rem": "X",
-      "2.5rem": "Y",
-      "2.75rem": "Z",
-      "20rem": "0",
-      "24rem": "1",
-      "2rem": "2",
-      "3.5rem": "3",
-      "3rem": "4",
-      "4rem": "5",
-      "5rem": "6",
-      "6rem": "7",
-      "7rem": "8",
-      "8rem": "9",
-      "9rem": "_a",
-      "auto": "_b",
-      "calc(var(--e, var(--s)) * 3 / 8)": "_c",
-      "calc(var(--e, var(--s)) / 2)": "_d"
+      "0.7142857142857143em": "f",
+      "0.75rem": "g",
+      "0rem": "h",
+      "1.25rem": "i",
+      "1.5rem": "j",
+      "1.75rem": "k",
+      "1rem": "l",
+      "2.25rem": "m",
+      "2.5rem": "n",
+      "2.75rem": "o",
+      "2rem": "p",
+      "3.5rem": "q",
+      "3rem": "r",
+      "4rem": "s",
+      "5rem": "t",
+      "6rem": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
+    },
+    "cursor": {
+      "alias": "a",
+      "all-scroll": "b",
+      "auto": "c",
+      "cell": "d",
+      "col-resize": "e",
+      "context-menu": "f",
+      "copy": "g",
+      "crosshair": "h",
+      "default": "i",
+      "e-resize": "j",
+      "ew-resize": "k",
+      "grab": "l",
+      "grabbing": "m",
+      "help": "n",
+      "move": "o",
+      "n-resize": "p",
+      "ne-resize": "q",
+      "nesw-resize": "r",
+      "no-drop": "s",
+      "none": "t",
+      "not-allowed": "u",
+      "ns-resize": "v",
+      "nw-resize": "w",
+      "nwse-resize": "x",
+      "pointer": "y",
+      "progress": "z",
+      "row-resize": "A",
+      "s-resize": "B",
+      "se-resize": "C",
+      "text": "D",
+      "vertical-text": "E",
+      "w-resize": "F",
+      "wait": "G",
+      "zoom-in": "H",
+      "zoom-out": "I"
     },
     "display": {
-      "flex": "a",
-      "grid": "b",
-      "block": "c",
-      "none": "d",
-      "inline": "e",
-      "inline-flex": "f",
+      "-webkit-box": "a",
+      "block": "b",
+      "contents": "c",
+      "flex": "d",
+      "grid": "e",
+      "inline": "f",
       "inline-block": "g",
-      "contents": "h",
-      "-webkit-box": "i",
-      "inline-grid": "j",
-      "list-item": "k"
+      "inline-flex": "h",
+      "inline-grid": "i",
+      "list-item": "j",
+      "none": "k"
     },
-    "paddingInlineEnd": {
-      "0rem": "a",
-      "calc(var(--e, var(--s)) * 3 / 8)": "b",
-      "0.5rem": "c",
-      "1.5rem": "d",
-      "0.25rem": "e",
-      "1rem": "f",
-      "2rem": "g",
-      "0.125rem": "h",
-      "0.75rem": "i",
-      "1.25rem": "j",
-      "calc(var(--e, var(--s)) / 2)": "k",
-      "0.42857142857142855em": "l",
-      "0.47058823529411764em": "m",
-      "0.7142857142857143em": "n",
-      "1.75rem": "o",
-      "10rem": "p",
-      "11rem": "q",
-      "12rem": "r",
-      "13rem": "s",
-      "14rem": "t",
-      "15rem": "u",
-      "16rem": "v",
-      "18rem": "w",
-      "2.25rem": "x",
-      "2.5rem": "y",
-      "2.75rem": "z",
-      "20rem": "A",
-      "24rem": "B",
-      "3.5rem": "C",
-      "3rem": "D",
-      "4rem": "E",
-      "5rem": "F",
-      "6rem": "G",
-      "7rem": "H",
-      "8rem": "I",
-      "9rem": "J"
+    "fill": {
+      "Highlight": "a",
+      "light-dark(rgb(10, 141, 153), rgb(11, 151, 164))": "b",
+      "light-dark(rgb(11, 162, 134), rgb(8, 134, 112))": "c",
+      "light-dark(rgb(122, 106, 253), rgb(128, 119, 254))": "d",
+      "light-dark(rgb(128, 128, 128), rgb(137, 137, 137))": "e",
+      "light-dark(rgb(143, 143, 143), rgb(138, 138, 138))": "f",
+      "light-dark(rgb(143, 172, 0), rgb(122, 147, 0))": "g",
+      "light-dark(rgb(154, 123, 77), rgb(163, 132, 84))": "h",
+      "light-dark(rgb(166, 92, 231), rgb(173, 105, 233))": "i",
+      "light-dark(rgb(184, 109, 70), rgb(192, 119, 80))": "j",
+      "light-dark(rgb(200, 68, 220), rgb(213, 73, 235))": "k",
+      "light-dark(rgb(210, 149, 0), rgb(218, 159, 0))": "l",
+      "light-dark(rgb(212, 91, 0), rgb(224, 100, 0))": "m",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "n",
+      "light-dark(rgb(228, 52, 163), rgb(236, 67, 175))": "o",
+      "light-dark(rgb(240, 45, 110), rgb(255, 51, 119))": "p",
+      "light-dark(rgb(240, 56, 35), rgb(252, 67, 46))": "q",
+      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "r",
+      "light-dark(rgb(48, 167, 254), rgb(24, 142, 220))": "s",
+      "light-dark(rgb(7, 147, 85), rgb(9, 157, 89))": "t",
+      "light-dark(rgb(75, 117, 255), rgb(86, 129, 255))": "u",
+      "light-dark(rgb(82, 161, 25), rgb(66, 134, 18))": "v",
+      "white": "w"
     },
-    "paddingInlineStart": {
-      "0rem": "a",
-      "calc(var(--e, var(--s)) * 3 / 8)": "b",
-      "0.5rem": "c",
-      "1.5rem": "d",
-      "1rem": "e",
-      "2rem": "f",
-      "0.25rem": "g",
-      "0.75rem": "h",
-      "calc(var(--e, var(--s)) / 2)": "i",
-      "0.125rem": "j",
-      "0.42857142857142855em": "k",
-      "0.47058823529411764em": "l",
-      "0.7142857142857143em": "m",
-      "1.25rem": "n",
-      "1.75rem": "o",
-      "10rem": "p",
-      "11rem": "q",
-      "12rem": "r",
-      "13rem": "s",
-      "14rem": "t",
-      "15rem": "u",
-      "16rem": "v",
-      "18rem": "w",
-      "2.25rem": "x",
-      "2.5rem": "y",
-      "2.75rem": "z",
-      "20rem": "A",
-      "24rem": "B",
-      "3.5rem": "C",
-      "3rem": "D",
-      "4rem": "E",
-      "5rem": "F",
-      "6rem": "G",
-      "7rem": "H",
-      "8rem": "I",
-      "9rem": "J"
+    "fontFamily": {
+      "adobe-clean-han-japanese, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif": "a",
+      "adobe-clean-han-korean, source-han-korean, 'Malgun Gothic', 'Apple Gothic', sans-serif": "b",
+      "adobe-clean-han-simplified-c, source-han-simplified-c, 'SimSun', 'Heiti SC Light', sans-serif": "c",
+      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Heiti TC Light', sans-serif": "d",
+      "adobe-clean-han-traditional, source-han-traditional, 'MingLiu', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', sans-serif": "e",
+      "adobe-clean-serif, \"Source Serif\", Georgia, serif": "f",
+      "adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif": "g",
+      "myriad-arabic, ui-sans-serif, system-ui, sans-serif": "h",
+      "myriad-hebrew, ui-sans-serif, system-ui, sans-serif": "i",
+      "source-code-pro, \"Source Code Pro\", Monaco, monospace": "j"
     },
-    "rowGap": {
-      "0.5rem": "a",
-      "0.25rem": "b",
-      "0.42857142857142855em": "c",
-      "0.47058823529411764em": "d",
-      "1.5rem": "e",
-      "1rem": "f",
-      "0.125rem": "g",
-      "0.75rem": "h",
+    "fontSize": {
+      "0.6875rem": "a",
+      "0.75rem": "b",
+      "0.8125rem": "c",
+      "0.875rem": "d",
+      "0.9375rem": "e",
+      "1.0625rem": "f",
+      "1.125rem": "g",
+      "1.1875rem": "h",
       "1.25rem": "i",
-      "2rem": "j",
-      "2.5rem": "k",
-      "0.7142857142857143em": "l",
-      "0rem": "m",
+      "1.375rem": "j",
+      "1.5625rem": "k",
+      "1.5rem": "l",
+      "1.6875rem": "m",
       "1.75rem": "n",
-      "10rem": "o",
-      "11rem": "p",
-      "12rem": "q",
-      "13rem": "r",
-      "14rem": "s",
-      "15rem": "t",
-      "16rem": "u",
-      "18rem": "v",
-      "2.25rem": "w",
-      "2.75rem": "x",
-      "20rem": "y",
-      "24rem": "z",
-      "3.5rem": "A",
-      "3rem": "B",
-      "4rem": "C",
-      "5rem": "D",
-      "6rem": "E",
-      "7rem": "F",
-      "8rem": "G",
-      "9rem": "H",
-      "calc(var(--e, var(--s)) * 3 / 8)": "I",
-      "calc(var(--e, var(--s)) / 2)": "J"
+      "1.9375rem": "o",
+      "1rem": "p",
+      "2.125rem": "q",
+      "2.25rem": "r",
+      "2.75rem": "s",
+      "2.8125rem": "t",
+      "3.4375rem": "u",
+      "3.625rem": "v",
+      "4.375rem": "w"
     },
-    "borderColor": {
-      "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))": "a",
-      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "b",
-      "ButtonBorder": "c",
-      "GrayText": "d",
-      "transparent": "e",
-      "light-dark(rgb(183, 40, 24), rgb(255, 103, 86))": "f",
-      "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))": "g",
-      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "h",
-      "Highlight": "i",
-      "light-dark(rgb(156, 33, 19), rgb(255, 134, 120))": "j",
-      "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))": "k",
-      "ButtonText": "l",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.21)": "m",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "n",
-      "light-dark(rgb(39, 77, 234), rgb(105, 149, 254))": "o",
-      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "p",
-      "Mark": "q",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "r",
-      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "s",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.85)": "t",
-      "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))": "u",
-      "light-dark(rgb(11, 164, 93), rgb(4, 124, 75))": "v",
-      "light-dark(rgb(232, 106, 0), rgb(185, 73, 0))": "w",
-      "light-dark(rgb(240, 56, 35), rgb(223, 52, 34))": "x",
-      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "y",
-      "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))": "z",
-      "rgb(from black r g b / 42%)": "A",
-      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 42%)": "B",
-      "white": "C"
+    "fontVariationSettings": {
+      "\"wght\" 300": "a",
+      "\"wght\" 400": "b",
+      "\"wght\" 500": "c",
+      "\"wght\" 700": "d",
+      "\"wght\" 800": "e"
     },
-    "paddingTop": {
-      "0rem": "a",
-      "0.5rem": "b",
-      "1.5rem": "c",
-      "0.75rem": "d",
-      "1rem": "e",
-      "1.25rem": "f",
-      "2rem": "g",
-      "0.25rem": "h",
-      "1.75rem": "i",
-      "0.125rem": "j",
-      "0.42857142857142855em": "k",
-      "0.47058823529411764em": "l",
-      "0.7142857142857143em": "m",
-      "10rem": "n",
-      "11rem": "o",
-      "12rem": "p",
-      "13rem": "q",
-      "14rem": "r",
-      "15rem": "s",
-      "16rem": "t",
-      "18rem": "u",
-      "2.25rem": "v",
-      "2.5rem": "w",
-      "2.75rem": "x",
-      "20rem": "y",
-      "24rem": "z",
-      "3.5rem": "A",
-      "3rem": "B",
-      "4rem": "C",
-      "5rem": "D",
-      "6rem": "E",
-      "7rem": "F",
-      "8rem": "G",
-      "9rem": "H",
-      "calc(var(--e, var(--s)) * 3 / 8)": "I",
-      "calc(var(--e, var(--s)) / 2)": "J"
+    "fontWeight": {
+      "300": "a",
+      "400": "b",
+      "500": "c",
+      "700": "d",
+      "800": "e",
+      "900": "f"
     },
-    "minHeight": {
-      "calc(2.5rem * var(--s2-scale))": "a",
-      "calc(2rem * var(--s2-scale))": "b",
-      "calc(1.5rem * var(--s2-scale))": "c",
-      "calc(3rem * var(--s2-scale))": "d",
-      "calc(1.25rem * var(--s2-scale))": "e",
-      "0px": "f",
-      "calc(1.125rem * var(--s2-scale))": "g",
-      "calc(3.5rem * var(--s2-scale))": "h",
-      "100%": "i",
-      "100vh": "j",
-      "auto": "k",
+    "height": {
+      "0px": "a",
+      "100%": "b",
+      "100vh": "c",
+      "auto": "d",
+      "calc(0.25rem * var(--s2-scale))": "e",
+      "calc(0.3125rem * var(--s2-scale))": "f",
+      "calc(0.375rem * var(--s2-scale))": "g",
+      "calc(0.5625rem * var(--s2-scale))": "h",
+      "calc(0.5rem * var(--s2-scale))": "i",
+      "calc(0.625rem * var(--s2-scale))": "j",
+      "calc(0.75rem * var(--s2-scale))": "k",
       "calc(0.875rem * var(--s2-scale))": "l",
-      "calc(1rem * var(--s2-scale))": "m",
-      "fit-content": "n",
-      "max-content": "o",
-      "min-content": "p",
-      "calc(4rem * var(--s2-scale))": "q"
+      "calc(1.125rem * var(--s2-scale))": "m",
+      "calc(1.25rem * var(--s2-scale))": "n",
+      "calc(1.375rem * var(--s2-scale))": "o",
+      "calc(1.5rem * var(--s2-scale))": "p",
+      "calc(1.625rem * var(--s2-scale))": "q",
+      "calc(10rem * var(--s2-scale))": "r",
+      "calc(12rem * var(--s2-scale))": "s",
+      "calc(1rem * var(--s2-scale))": "t",
+      "calc(2.25rem * var(--s2-scale))": "u",
+      "calc(2.5rem * var(--s2-scale))": "v",
+      "calc(2.75rem * var(--s2-scale))": "w",
+      "calc(2rem * var(--s2-scale))": "x",
+      "calc(3.5rem * var(--s2-scale))": "y",
+      "calc(3rem * var(--s2-scale))": "z",
+      "calc(4rem * var(--s2-scale))": "A",
+      "calc(6rem * var(--s2-scale))": "B",
+      "calc(8.75rem * var(--s2-scale))": "C",
+      "fit-content": "D",
+      "max-content": "E",
+      "min-content": "F"
     },
-    "outlineStyle": {
-      "none": "a",
-      "solid": "b",
-      "dashed": "c",
-      "dotted": "d",
-      "double": "e",
-      "inset": "f"
+    "marginBottom": {
+      "-0.125rem": "a",
+      "-0.25rem": "b",
+      "-0.5rem": "c",
+      "-0.75rem": "d",
+      "-1.25rem": "e",
+      "-1.5rem": "f",
+      "-1.75rem": "g",
+      "-1rem": "h",
+      "-2.25rem": "i",
+      "-2.5rem": "j",
+      "-2.75rem": "k",
+      "-2rem": "l",
+      "-3.5rem": "m",
+      "-3rem": "n",
+      "-4rem": "o",
+      "-5rem": "p",
+      "-6rem": "q",
+      "0.125rem": "r",
+      "0.25rem": "s",
+      "0.42857142857142855em": "t",
+      "0.47058823529411764em": "u",
+      "0.5rem": "v",
+      "0.7142857142857143em": "w",
+      "0.75rem": "x",
+      "0rem": "y",
+      "1.25rem": "z",
+      "1.5rem": "A",
+      "1.75rem": "B",
+      "1rem": "C",
+      "2.25rem": "D",
+      "2.5rem": "E",
+      "2.75rem": "F",
+      "2rem": "G",
+      "3.5rem": "H",
+      "3rem": "I",
+      "4rem": "J",
+      "5rem": "K",
+      "6rem": "L",
+      "auto": "M",
+      "calc(var(--F, var(--M)) * 3 / 8)": "N",
+      "calc(var(--F, var(--M)) / 2)": "O"
     },
-    "minWidth": {
-      "calc(1.25rem * var(--s2-scale))": "a",
-      "calc(3rem * var(--s2-scale))": "b",
-      "calc(1.5rem * var(--s2-scale))": "c",
-      "calc(2.5rem * var(--s2-scale))": "d",
-      "calc(2rem * var(--s2-scale))": "e",
-      "0px": "f",
-      "100%": "g",
-      "100vw": "h",
-      "auto": "i",
-      "calc(0.875rem * var(--s2-scale))": "j",
-      "calc(1.125rem * var(--s2-scale))": "k",
-      "calc(12rem * var(--s2-scale))": "l",
-      "calc(1rem * var(--s2-scale))": "m",
-      "fit-content": "n",
-      "max-content": "o",
-      "min-content": "p",
-      "calc(12.5rem * var(--s2-scale))": "q",
-      "calc(13.625rem * var(--s2-scale))": "r",
-      "calc(4rem * var(--s2-scale))": "s",
-      "calc(8rem * var(--s2-scale))": "t"
+    "marginInlineEnd": {
+      "-0.125rem": "a",
+      "-0.25rem": "b",
+      "-0.5rem": "c",
+      "-0.75rem": "d",
+      "-1.25rem": "e",
+      "-1.5rem": "f",
+      "-1.75rem": "g",
+      "-1rem": "h",
+      "-2.25rem": "i",
+      "-2.5rem": "j",
+      "-2.75rem": "k",
+      "-2rem": "l",
+      "-3.5rem": "m",
+      "-3rem": "n",
+      "-4rem": "o",
+      "-5rem": "p",
+      "-6rem": "q",
+      "0.125rem": "r",
+      "0.25rem": "s",
+      "0.42857142857142855em": "t",
+      "0.47058823529411764em": "u",
+      "0.5rem": "v",
+      "0.7142857142857143em": "w",
+      "0.75rem": "x",
+      "0rem": "y",
+      "1.25rem": "z",
+      "1.5rem": "A",
+      "1.75rem": "B",
+      "1rem": "C",
+      "2.25rem": "D",
+      "2.5rem": "E",
+      "2.75rem": "F",
+      "2rem": "G",
+      "3.5rem": "H",
+      "3rem": "I",
+      "4rem": "J",
+      "5rem": "K",
+      "6rem": "L",
+      "auto": "M",
+      "calc(var(--F, var(--M)) * 3 / 8)": "N",
+      "calc(var(--F, var(--M)) / 2)": "O"
     },
-    "paddingBottom": {
-      "0rem": "a",
-      "0.5rem": "b",
-      "1.5rem": "c",
-      "2rem": "d",
-      "0.25rem": "e",
-      "0.75rem": "f",
-      "1rem": "g",
-      "0.125rem": "h",
-      "0.42857142857142855em": "i",
-      "0.47058823529411764em": "j",
-      "0.7142857142857143em": "k",
-      "1.25rem": "l",
-      "1.75rem": "m",
-      "10rem": "n",
-      "11rem": "o",
-      "12rem": "p",
-      "13rem": "q",
-      "14rem": "r",
-      "15rem": "s",
-      "16rem": "t",
-      "18rem": "u",
-      "2.25rem": "v",
-      "2.5rem": "w",
-      "2.75rem": "x",
-      "20rem": "y",
-      "24rem": "z",
-      "3.5rem": "A",
-      "3rem": "B",
-      "4rem": "C",
-      "5rem": "D",
-      "6rem": "E",
-      "7rem": "F",
-      "8rem": "G",
-      "9rem": "H",
-      "calc(var(--e, var(--s)) * 3 / 8)": "I",
-      "calc(var(--e, var(--s)) / 2)": "J"
+    "marginInlineStart": {
+      "-0.125rem": "a",
+      "-0.25rem": "b",
+      "-0.5rem": "c",
+      "-0.75rem": "d",
+      "-1.25rem": "e",
+      "-1.5rem": "f",
+      "-1.75rem": "g",
+      "-1rem": "h",
+      "-2.25rem": "i",
+      "-2.5rem": "j",
+      "-2.75rem": "k",
+      "-2rem": "l",
+      "-3.5rem": "m",
+      "-3rem": "n",
+      "-4rem": "o",
+      "-5rem": "p",
+      "-6rem": "q",
+      "0.125rem": "r",
+      "0.25rem": "s",
+      "0.42857142857142855em": "t",
+      "0.47058823529411764em": "u",
+      "0.5rem": "v",
+      "0.7142857142857143em": "w",
+      "0.75rem": "x",
+      "0rem": "y",
+      "1.25rem": "z",
+      "1.5rem": "A",
+      "1.75rem": "B",
+      "1rem": "C",
+      "2.25rem": "D",
+      "2.5rem": "E",
+      "2.75rem": "F",
+      "2rem": "G",
+      "3.5rem": "H",
+      "3rem": "I",
+      "4rem": "J",
+      "5rem": "K",
+      "6rem": "L",
+      "auto": "M",
+      "calc(var(--F, var(--M)) * 3 / 8)": "N",
+      "calc(var(--F, var(--M)) / 2)": "O"
     },
-    "borderEndStartRadius": {
-      "9999px": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.5714285714285714em": "d",
-      "0.625rem": "e",
-      "0px": "f",
-      "0.2857142857142857em": "g",
-      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
-      "1rem": "i"
+    "marginTop": {
+      "-0.125rem": "a",
+      "-0.25rem": "b",
+      "-0.5rem": "c",
+      "-0.75rem": "d",
+      "-1.25rem": "e",
+      "-1.5rem": "f",
+      "-1.75rem": "g",
+      "-1rem": "h",
+      "-2.25rem": "i",
+      "-2.5rem": "j",
+      "-2.75rem": "k",
+      "-2rem": "l",
+      "-3.5rem": "m",
+      "-3rem": "n",
+      "-4rem": "o",
+      "-5rem": "p",
+      "-6rem": "q",
+      "0.125rem": "r",
+      "0.25rem": "s",
+      "0.42857142857142855em": "t",
+      "0.47058823529411764em": "u",
+      "0.5rem": "v",
+      "0.7142857142857143em": "w",
+      "0.75rem": "x",
+      "0rem": "y",
+      "1.25rem": "z",
+      "1.5rem": "A",
+      "1.75rem": "B",
+      "1rem": "C",
+      "2.25rem": "D",
+      "2.5rem": "E",
+      "2.75rem": "F",
+      "2rem": "G",
+      "3.5rem": "H",
+      "3rem": "I",
+      "4rem": "J",
+      "5rem": "K",
+      "6rem": "L",
+      "auto": "M",
+      "calc(var(--F, var(--M)) * 3 / 8)": "N",
+      "calc(var(--F, var(--M)) / 2)": "O"
     },
-    "borderStartEndRadius": {
-      "9999px": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.5714285714285714em": "d",
-      "0.625rem": "e",
-      "0px": "f",
-      "0.2857142857142857em": "g",
-      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
-      "1rem": "i"
+    "maxHeight": {
+      "100%": "a",
+      "100vh": "b",
+      "90vh": "c",
+      "auto": "d",
+      "calc(10rem * var(--s2-scale))": "e",
+      "fit-content": "f",
+      "max-content": "g",
+      "min-content": "h",
+      "none": "i"
     },
-    "borderEndEndRadius": {
-      "9999px": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.625rem": "d",
-      "0.5714285714285714em": "e",
-      "0px": "f",
-      "0.2857142857142857em": "g",
-      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
-      "1rem": "i"
+    "maxWidth": {
+      "100%": "a",
+      "100vw": "b",
+      "90vw": "c",
+      "auto": "d",
+      "calc(10rem * var(--s2-scale))": "e",
+      "calc(12rem * var(--s2-scale))": "f",
+      "calc(13rem * var(--s2-scale))": "g",
+      "calc(20rem * var(--s2-scale))": "h",
+      "calc(23.75rem * var(--s2-scale))": "i",
+      "calc(33rem * var(--s2-scale))": "j",
+      "calc(48rem * var(--s2-scale))": "k",
+      "calc(60rem * var(--s2-scale))": "l",
+      "fit-content": "m",
+      "max-content": "n",
+      "min-content": "o",
+      "none": "p"
     },
-    "borderStartStartRadius": {
-      "9999px": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.625rem": "d",
-      "0.5714285714285714em": "e",
-      "0px": "f",
-      "0.2857142857142857em": "g",
-      "calc(var(--e, var(--s, 9999px)) / 2)": "h",
-      "1rem": "i"
+    "minHeight": {
+      "0px": "a",
+      "100%": "b",
+      "100vh": "c",
+      "auto": "d",
+      "calc(1.125rem * var(--s2-scale))": "e",
+      "calc(1.25rem * var(--s2-scale))": "f",
+      "calc(1.5rem * var(--s2-scale))": "g",
+      "calc(2.5rem * var(--s2-scale))": "h",
+      "calc(2rem * var(--s2-scale))": "i",
+      "calc(3.5rem * var(--s2-scale))": "j",
+      "calc(3rem * var(--s2-scale))": "k",
+      "calc(4rem * var(--s2-scale))": "l",
+      "fit-content": "m",
+      "max-content": "n",
+      "min-content": "o"
     },
-    "cursor": {
-      "default": "a",
-      "pointer": "b",
-      "text": "c",
-      "e-resize": "d",
-      "ew-resize": "e",
-      "none": "f",
-      "w-resize": "g",
-      "alias": "h",
-      "all-scroll": "i",
-      "auto": "j",
-      "cell": "k",
-      "col-resize": "l",
-      "context-menu": "m",
-      "copy": "n",
-      "crosshair": "o",
-      "grab": "p",
-      "grabbing": "q",
-      "help": "r",
-      "move": "s",
-      "n-resize": "t",
-      "ne-resize": "u",
-      "nesw-resize": "v",
-      "no-drop": "w",
-      "not-allowed": "x",
-      "ns-resize": "y",
-      "nw-resize": "z",
-      "nwse-resize": "A",
-      "progress": "B",
-      "row-resize": "C",
-      "s-resize": "D",
-      "se-resize": "E",
-      "vertical-text": "F",
-      "wait": "G",
-      "zoom-in": "H",
-      "zoom-out": "I"
+    "minWidth": {
+      "0px": "a",
+      "100%": "b",
+      "100vw": "c",
+      "auto": "d",
+      "calc(1.25rem * var(--s2-scale))": "e",
+      "calc(1.5rem * var(--s2-scale))": "f",
+      "calc(12.5rem * var(--s2-scale))": "g",
+      "calc(12rem * var(--s2-scale))": "h",
+      "calc(13.625rem * var(--s2-scale))": "i",
+      "calc(2.5rem * var(--s2-scale))": "j",
+      "calc(2rem * var(--s2-scale))": "k",
+      "calc(3rem * var(--s2-scale))": "l",
+      "calc(4rem * var(--s2-scale))": "m",
+      "calc(8rem * var(--s2-scale))": "n",
+      "fit-content": "o",
+      "max-content": "p",
+      "min-content": "q"
     },
     "outlineColor": {
-      "Highlight": "a",
-      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "b",
-      "ButtonBorder": "c",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "d",
-      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 10%)": "e",
-      "transparent": "f",
-      "ButtonText": "g",
-      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "h",
-      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "i",
-      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "j",
-      "rgb(from black r g b / 42%)": "k",
-      "white": "l"
+      "ButtonBorder": "a",
+      "ButtonText": "b",
+      "Highlight": "c",
+      "black": "d",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1)": "e",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "f",
+      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "g",
+      "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))": "h",
+      "rgb(from light-dark(rgb(0, 0, 0), rgb(255, 255, 255)) r g b / 10%)": "i",
+      "transparent": "j",
+      "white": "k"
     },
-    "fontSynthesisWeight": {
-      "none": "a"
+    "overflowY": {
+      "auto": "a",
+      "clip": "b",
+      "hidden": "c",
+      "scroll": "d",
+      "visible": "e"
     },
-    "fontVariationSettings": {
-      "\"wght\" 400": "a",
-      "\"wght\" 700": "b",
-      "\"wght\" 800": "c",
-      "\"wght\" 500": "d",
-      "\"wght\" 300": "e"
+    "paddingBottom": {
+      "0.42857142857142855em": "a",
+      "0.47058823529411764em": "b",
+      "0.7142857142857143em": "c",
+      "0px": "d",
+      "12px": "e",
+      "16px": "f",
+      "20px": "g",
+      "24px": "h",
+      "28px": "i",
+      "2px": "j",
+      "32px": "k",
+      "36px": "l",
+      "40px": "m",
+      "44px": "n",
+      "48px": "o",
+      "4px": "p",
+      "56px": "q",
+      "64px": "r",
+      "80px": "s",
+      "8px": "t",
+      "96px": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
     },
-    "fontWeight": {
-      "300": "e",
-      "400": "a",
-      "500": "d",
-      "700": "b",
-      "800": "c"
+    "paddingInlineEnd": {
+      "0.42857142857142855em": "a",
+      "0.47058823529411764em": "b",
+      "0.7142857142857143em": "c",
+      "0px": "d",
+      "12px": "e",
+      "16px": "f",
+      "20px": "g",
+      "24px": "h",
+      "28px": "i",
+      "2px": "j",
+      "32px": "k",
+      "36px": "l",
+      "40px": "m",
+      "44px": "n",
+      "48px": "o",
+      "4px": "p",
+      "56px": "q",
+      "64px": "r",
+      "80px": "s",
+      "8px": "t",
+      "96px": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
     },
-    "alignItems": {
-      "center": "a",
-      "baseline": "b",
-      "start": "c",
-      "end": "d",
-      "stretch": "e"
+    "paddingInlineStart": {
+      "0.42857142857142855em": "a",
+      "0.47058823529411764em": "b",
+      "0.7142857142857143em": "c",
+      "0px": "d",
+      "12px": "e",
+      "16px": "f",
+      "20px": "g",
+      "24px": "h",
+      "28px": "i",
+      "2px": "j",
+      "32px": "k",
+      "36px": "l",
+      "40px": "m",
+      "44px": "n",
+      "48px": "o",
+      "4px": "p",
+      "56px": "q",
+      "64px": "r",
+      "80px": "s",
+      "8px": "t",
+      "96px": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
     },
-    "bottom": {
-      "0rem": "a",
-      "1.5rem": "b",
-      "1rem": "c",
-      "0.125rem": "d",
-      "0.25rem": "e",
-      "0.5rem": "f",
-      "0.75rem": "g",
-      "1.25rem": "h",
-      "1.75rem": "i",
-      "100%": "j",
-      "10rem": "k",
-      "11rem": "l",
-      "12rem": "m",
-      "13rem": "n",
-      "14rem": "o",
-      "15rem": "p",
-      "16rem": "q",
-      "18rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+    "paddingTop": {
+      "0.42857142857142855em": "a",
+      "0.47058823529411764em": "b",
+      "0.7142857142857143em": "c",
+      "0px": "d",
+      "12px": "e",
+      "16px": "f",
+      "20px": "g",
+      "24px": "h",
+      "28px": "i",
+      "2px": "j",
+      "32px": "k",
+      "36px": "l",
+      "40px": "m",
+      "44px": "n",
+      "48px": "o",
+      "4px": "p",
+      "56px": "q",
+      "64px": "r",
+      "80px": "s",
+      "8px": "t",
+      "96px": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
     },
-    "top": {
-      "0rem": "a",
-      "1.5rem": "b",
-      "1rem": "c",
-      "0.125rem": "d",
-      "0.25rem": "e",
-      "0.5rem": "f",
+    "rowGap": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.42857142857142855em": "c",
+      "0.47058823529411764em": "d",
+      "0.5rem": "e",
+      "0.7142857142857143em": "f",
       "0.75rem": "g",
-      "1.25rem": "h",
-      "1.75rem": "i",
-      "100%": "j",
-      "10rem": "k",
-      "11rem": "l",
-      "12rem": "m",
-      "13rem": "n",
-      "14rem": "o",
-      "15rem": "p",
-      "16rem": "q",
-      "18rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+      "0rem": "h",
+      "1.25rem": "i",
+      "1.5rem": "j",
+      "1.75rem": "k",
+      "1rem": "l",
+      "2.25rem": "m",
+      "2.5rem": "n",
+      "2.75rem": "o",
+      "2rem": "p",
+      "3.5rem": "q",
+      "3rem": "r",
+      "4rem": "s",
+      "5rem": "t",
+      "6rem": "u",
+      "calc(var(--F, var(--M)) * 3 / 8)": "v",
+      "calc(var(--F, var(--M)) / 2)": "w"
     },
-    "insetInlineEnd": {
-      "0rem": "a",
-      "0.5rem": "b",
-      "1.5rem": "c",
-      "0.125rem": "d",
-      "0.25rem": "e",
-      "0.75rem": "f",
-      "1.25rem": "g",
-      "1.75rem": "h",
-      "100%": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+    "stroke": {
+      "Background": "a",
+      "ButtonBorder": "b",
+      "Highlight": "c",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "d",
+      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "e",
+      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "f",
+      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "g",
+      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "h",
+      "rgba(0, 0, 0, 0.12)": "i"
     },
-    "insetInlineStart": {
-      "0rem": "a",
-      "0.5rem": "b",
-      "1.5rem": "c",
-      "0.125rem": "d",
-      "0.25rem": "e",
-      "0.75rem": "f",
-      "1.25rem": "g",
-      "1.75rem": "h",
-      "100%": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+    "top": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "50%": "F",
+      "56px": "G",
+      "64px": "H",
+      "80px": "I",
+      "8px": "J",
+      "96px": "K",
+      "auto": "L"
     },
-    "position": {
-      "relative": "a",
-      "absolute": "b",
-      "fixed": "c",
-      "static": "d",
-      "sticky": "e"
+    "transitionDuration": {
+      "130ms": "a",
+      "150ms": "b",
+      "200ms": "c",
+      "250ms": "d",
+      "500ms": "e"
     },
-    "flexBasis": {
-      "0rem": "a",
-      "auto": "b",
-      "0.125rem": "c",
-      "0.25rem": "d",
-      "0.5rem": "e",
-      "0.75rem": "f",
-      "1.25rem": "g",
-      "1.5rem": "h",
-      "1.75rem": "i",
-      "100%": "j",
-      "10rem": "k",
-      "11rem": "l",
-      "12rem": "m",
-      "13rem": "n",
-      "14rem": "o",
-      "15rem": "p",
-      "16rem": "q",
-      "18rem": "r",
-      "1rem": "s",
-      "2.25rem": "t",
-      "2.5rem": "u",
-      "2.75rem": "v",
-      "20rem": "w",
-      "24rem": "x",
-      "2rem": "y",
-      "3.5rem": "z",
-      "3rem": "A",
-      "4rem": "B",
-      "5rem": "C",
-      "6rem": "D",
-      "7rem": "E",
-      "8rem": "F",
-      "9rem": "G"
+    "transitionProperty": {
+      "all": "a",
+      "box-shadow": "b",
+      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke": "c",
+      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter": "d",
+      "none": "e",
+      "opacity": "f",
+      "transform, translate, scale, rotate": "g"
     },
-    "fill": {
-      "currentColor": "a",
-      "light-dark(rgb(240, 56, 35), rgb(252, 67, 46))": "b",
-      "light-dark(rgb(143, 143, 143), rgb(138, 138, 138))": "c",
-      "light-dark(rgb(212, 91, 0), rgb(224, 100, 0))": "d",
-      "light-dark(rgb(7, 147, 85), rgb(9, 157, 89))": "e",
-      "light-dark(rgb(75, 117, 255), rgb(86, 129, 255))": "f",
-      "white": "g",
-      "Highlight": "h",
-      "HighlightText": "i",
-      "ButtonText": "j",
-      "black": "k",
-      "light-dark(rgb(10, 141, 153), rgb(11, 151, 164))": "l",
-      "light-dark(rgb(11, 162, 134), rgb(8, 134, 112))": "m",
-      "light-dark(rgb(122, 106, 253), rgb(128, 119, 254))": "n",
-      "light-dark(rgb(128, 128, 128), rgb(137, 137, 137))": "o",
-      "light-dark(rgb(143, 172, 0), rgb(122, 147, 0))": "p",
-      "light-dark(rgb(154, 123, 77), rgb(163, 132, 84))": "q",
-      "light-dark(rgb(166, 92, 231), rgb(173, 105, 233))": "r",
-      "light-dark(rgb(184, 109, 70), rgb(192, 119, 80))": "s",
-      "light-dark(rgb(200, 68, 220), rgb(213, 73, 235))": "t",
-      "light-dark(rgb(210, 149, 0), rgb(218, 159, 0))": "u",
-      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "v",
-      "light-dark(rgb(228, 52, 163), rgb(236, 67, 175))": "w",
-      "light-dark(rgb(240, 45, 110), rgb(255, 51, 119))": "x",
-      "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))": "y",
-      "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))": "z",
-      "light-dark(rgb(48, 167, 254), rgb(24, 142, 220))": "A",
-      "light-dark(rgb(82, 161, 25), rgb(66, 134, 18))": "B"
+    "width": {
+      "100%": "a",
+      "100vw": "b",
+      "50%": "c",
+      "auto": "d",
+      "calc(0.0625rem * var(--s2-scale))": "e",
+      "calc(0.125rem * var(--s2-scale))": "f",
+      "calc(0.375rem * var(--s2-scale))": "g",
+      "calc(0.5rem * var(--s2-scale))": "h",
+      "calc(0.625rem * var(--s2-scale))": "i",
+      "calc(0.75rem * var(--s2-scale))": "j",
+      "calc(0.875rem * var(--s2-scale))": "k",
+      "calc(1.125rem * var(--s2-scale))": "l",
+      "calc(1.25rem * var(--s2-scale))": "m",
+      "calc(1.375rem * var(--s2-scale))": "n",
+      "calc(1.5rem * var(--s2-scale))": "o",
+      "calc(1.625rem * var(--s2-scale))": "p",
+      "calc(10rem * var(--s2-scale))": "q",
+      "calc(12rem * var(--s2-scale))": "r",
+      "calc(13.625rem * var(--s2-scale))": "s",
+      "calc(15rem * var(--s2-scale))": "t",
+      "calc(1rem * var(--s2-scale))": "u",
+      "calc(2.25rem * var(--s2-scale))": "v",
+      "calc(2.5rem * var(--s2-scale))": "w",
+      "calc(2.75rem * var(--s2-scale))": "x",
+      "calc(20rem * var(--s2-scale))": "y",
+      "calc(21rem * var(--s2-scale))": "z",
+      "calc(25rem * var(--s2-scale))": "A",
+      "calc(26rem * var(--s2-scale))": "B",
+      "calc(2rem * var(--s2-scale))": "C",
+      "calc(3.5rem * var(--s2-scale))": "D",
+      "calc(36rem * var(--s2-scale))": "E",
+      "calc(3rem * var(--s2-scale))": "F",
+      "calc(4rem * var(--s2-scale))": "G",
+      "calc(6rem * var(--s2-scale))": "H",
+      "calc(7rem * var(--s2-scale))": "I",
+      "fit-content": "J",
+      "max-content": "K",
+      "min-content": "L"
+    },
+    "--scaleX": {
+      "1": "b",
+      "-1": "a"
     },
-    "left": {
-      "0rem": "a",
-      "0.125rem": "b",
-      "0.25rem": "c",
-      "0.5rem": "d",
-      "0.75rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "100%": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+    "--scaleY": {
+      "1": "b",
+      "-1": "a"
     },
-    "right": {
-      "0rem": "a",
-      "0.125rem": "b",
-      "0.25rem": "c",
-      "0.5rem": "d",
-      "0.75rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "100%": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "2rem": "x",
-      "3.5rem": "y",
-      "3rem": "z",
-      "4rem": "A",
-      "5rem": "B",
-      "6rem": "C",
-      "7rem": "D",
-      "8rem": "E",
-      "9rem": "F",
-      "auto": "G"
+    "alignContent": {
+      "baseline": "a",
+      "center": "b",
+      "end": "c",
+      "normal": "d",
+      "space-around": "e",
+      "space-between": "f",
+      "space-evenly": "g",
+      "start": "h",
+      "stretch": "i"
     },
-    "borderStyle": {
-      "solid": "a",
-      "none": "b",
-      "dashed": "c",
-      "dotted": "d",
-      "double": "e",
-      "hidden": "f"
+    "alignSelf": {
+      "auto": "a",
+      "baseline": "b",
+      "center": "c",
+      "end": "d",
+      "start": "e",
+      "stretch": "f"
     },
-    "scrollPaddingInlineStart": {
-      "2.5rem": "a",
-      "0.125rem": "b",
-      "0.25rem": "c",
-      "0.5rem": "d",
-      "0.75rem": "e",
-      "0rem": "f",
-      "1.25rem": "g",
-      "1.5rem": "h",
-      "1.75rem": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "animationDuration": {
+      "1000ms": "a",
+      "125ms": "b",
+      "150ms": "c"
     },
-    "scrollPaddingTop": {
-      "2rem": "a",
-      "0.125rem": "b",
-      "0.25rem": "c",
-      "0.5rem": "d",
-      "0.75rem": "e",
-      "0rem": "f",
-      "1.25rem": "g",
-      "1.5rem": "h",
-      "1.75rem": "i",
-      "10rem": "j",
-      "11rem": "k",
-      "12rem": "l",
-      "13rem": "m",
-      "14rem": "n",
-      "15rem": "o",
-      "16rem": "p",
-      "18rem": "q",
-      "1rem": "r",
-      "2.25rem": "s",
-      "2.5rem": "t",
-      "2.75rem": "u",
-      "20rem": "v",
-      "24rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "animationFillMode": {
+      "backwards": "a",
+      "both": "b",
+      "forwards": "c",
+      "none": "d"
     },
-    "borderSpacing": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "animationTimingFunction": {
+      "cubic-bezier(0, 0, 0.40, 1)": "a",
+      "cubic-bezier(0.45, 0, 0.4, 1)": "b",
+      "cubic-bezier(0.5, 0, 1, 1)": "c",
+      "linear": "d"
     },
-    "scrollMarginBottom": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "backgroundImage": {
+      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 33%,var(--g2) 100%)": "a",
+      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 66%,var(--g2) 100%)": "b",
+      "none": "c"
     },
-    "scrollMarginInlineEnd": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "borderStyle": {
+      "dashed": "a",
+      "dotted": "b",
+      "double": "c",
+      "hidden": "d",
+      "none": "e",
+      "solid": "f"
     },
-    "scrollMarginInlineStart": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "borderTopWidth": {
+      "0px": "a",
+      "1px": "b",
+      "2px": "c",
+      "4px": "d"
     },
-    "scrollMarginTop": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "bottom": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "56px": "F",
+      "64px": "G",
+      "80px": "H",
+      "8px": "I",
+      "96px": "J",
+      "auto": "K"
     },
-    "scrollPaddingBottom": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "boxDecorationBreak": {
+      "clone": "a",
+      "slice": "b"
     },
-    "scrollPaddingInlineEnd": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "boxShadow": {
+      "0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))": "a",
+      "0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))": "b",
+      "0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "c",
+      "none": "d"
     },
-    "textIndent": {
-      "0.125rem": "a",
-      "0.25rem": "b",
-      "0.5rem": "c",
-      "0.75rem": "d",
-      "0rem": "e",
-      "1.25rem": "f",
-      "1.5rem": "g",
-      "1.75rem": "h",
-      "10rem": "i",
-      "11rem": "j",
-      "12rem": "k",
-      "13rem": "l",
-      "14rem": "m",
-      "15rem": "n",
-      "16rem": "o",
-      "18rem": "p",
-      "1rem": "q",
-      "2.25rem": "r",
-      "2.5rem": "s",
-      "2.75rem": "t",
-      "20rem": "u",
-      "24rem": "v",
-      "2rem": "w",
-      "3.5rem": "x",
-      "3rem": "y",
-      "4rem": "z",
-      "5rem": "A",
-      "6rem": "B",
-      "7rem": "C",
-      "8rem": "D",
-      "9rem": "E"
+    "boxSizing": {
+      "border-box": "a",
+      "content-box": "b"
     },
-    "transitionTimingFunction": {
-      "cubic-bezier(0.45, 0, 0.4, 1)": "a",
-      "cubic-bezier(0.5, 0, 1, 1)": "b",
-      "cubic-bezier(0, 0, 0.40, 1)": "c",
-      "linear": "d"
+    "colorScheme": {
+      "dark": "a",
+      "light": "b",
+      "light dark": "c"
     },
-    "outlineWidth": {
-      "2px": "a",
-      "1px": "b",
-      "0px": "c",
-      "4px": "d"
+    "contain": {
+      "content": "a",
+      "inline-size": "b",
+      "layout": "c",
+      "none": "d",
+      "paint": "e",
+      "size": "f",
+      "strict": "g",
+      "style": "h"
     },
-    "overflowY": {
-      "hidden": "a",
-      "auto": "b",
-      "clip": "c",
-      "visible": "d",
-      "scroll": "e"
+    "filter": {
+      "drop-shadow(0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)))": "a",
+      "drop-shadow(0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)))": "b",
+      "drop-shadow0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "c",
+      "none": "d"
     },
-    "transitionProperty": {
-      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter": "a",
-      "color, background-color, var(--gp, color), border-color, text-decoration-color, fill, stroke": "b",
-      "none": "c",
-      "opacity": "d",
-      "transform, translate, scale, rotate": "e",
-      "all": "f",
-      "box-shadow": "g"
-    },
-    "columns": {
-      "1": "a",
-      "2": "g",
-      "3": "k",
-      "4": "n",
-      "5": "q",
-      "6": "s",
-      "7": "u",
-      "8": "w",
-      "9": "y",
-      "10": "b",
-      "11": "c",
-      "12": "d",
-      "16rem": "e",
-      "18rem": "f",
-      "20rem": "h",
-      "24rem": "i",
-      "28rem": "j",
-      "32rem": "l",
-      "36rem": "m",
-      "42rem": "o",
-      "48rem": "p",
-      "56rem": "r",
-      "64rem": "t",
-      "72rem": "v",
-      "80rem": "x",
-      "auto": "z"
+    "flexBasis": {
+      "0%": "a",
+      "0px": "b",
+      "100%": "c",
+      "auto": "d"
     },
-    "transitionDuration": {
-      "150ms": "a",
-      "130ms": "b",
-      "200ms": "c",
-      "250ms": "d",
-      "500ms": "e"
+    "flexDirection": {
+      "column": "a",
+      "column-reverse": "b",
+      "row": "c",
+      "row-reverse": "d"
     },
-    "maxWidth": {
-      "100%": "a",
-      "calc(1.25rem * var(--s2-scale))": "b",
-      "max-content": "c",
-      "none": "d",
-      "calc(10rem * var(--s2-scale))": "e",
-      "100vw": "f",
-      "auto": "g",
-      "calc(0.875rem * var(--s2-scale))": "h",
-      "calc(1.125rem * var(--s2-scale))": "i",
-      "calc(1.5rem * var(--s2-scale))": "j",
-      "calc(1rem * var(--s2-scale))": "k",
-      "calc(2.5rem * var(--s2-scale))": "l",
-      "calc(2rem * var(--s2-scale))": "m",
-      "calc(3rem * var(--s2-scale))": "n",
-      "calc(48rem * var(--s2-scale))": "o",
-      "fit-content": "p",
-      "min-content": "q",
-      "calc(12rem * var(--s2-scale))": "r",
-      "calc(13rem * var(--s2-scale))": "s",
-      "calc(20rem * var(--s2-scale))": "t",
-      "calc(21rem * var(--s2-scale))": "u",
-      "calc(23.75rem * var(--s2-scale))": "v",
-      "calc(33rem * var(--s2-scale))": "w",
-      "calc(60rem * var(--s2-scale))": "x"
+    "flexGrow": {
+      "0": "a",
+      "1": "b"
     },
-    "borderBottomWidth": {
-      "2px": "a",
-      "1px": "b",
-      "0px": "c",
-      "4px": "d"
+    "flexShrink": {
+      "0": "a",
+      "1": "b"
     },
-    "borderTopWidth": {
-      "0px": "a",
-      "2px": "b",
-      "1px": "c",
-      "4px": "d"
+    "flexWrap": {
+      "nowrap": "a",
+      "wrap": "b",
+      "wrap-reverse": "c"
     },
-    "overflowX": {
-      "hidden": "a",
-      "auto": "b",
-      "clip": "c",
-      "visible": "d",
-      "scroll": "e"
+    "fontSynthesisWeight": {
+      "none": "a"
+    },
+    "forcedColorAdjust": {
+      "auto": "a",
+      "none": "b"
+    },
+    "insetInlineEnd": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "56px": "F",
+      "64px": "G",
+      "80px": "H",
+      "8px": "I",
+      "96px": "J",
+      "auto": "K"
+    },
+    "insetInlineStart": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "56px": "F",
+      "64px": "G",
+      "80px": "H",
+      "8px": "I",
+      "96px": "J",
+      "auto": "K"
+    },
+    "isolation": {
+      "auto": "a",
+      "isolate": "b"
     },
     "justifyContent": {
       "center": "a",
       "end": "b",
-      "start": "c",
-      "space-between": "d",
-      "normal": "e",
-      "space-around": "f",
-      "space-evenly": "g",
+      "normal": "c",
+      "space-around": "d",
+      "space-between": "e",
+      "space-evenly": "f",
+      "start": "g",
       "stretch": "h"
     },
-    "boxSizing": {
-      "border-box": "a",
-      "content-box": "b"
+    "justifyItems": {
+      "center": "a",
+      "end": "b",
+      "start": "c",
+      "stretch": "d"
     },
-    "flexShrink": {
+    "left": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "50%": "F",
+      "56px": "G",
+      "64px": "H",
+      "80px": "I",
+      "8px": "J",
+      "96px": "K",
+      "auto": "L"
+    },
+    "lineHeight": {
+      "1.3": "a",
+      "1.5": "b",
+      "1.7": "c"
+    },
+    "listStyleType": {
+      "decimal": "a",
+      "disc": "b",
+      "none": "c"
+    },
+    "objectFit": {
+      "contain": "a",
+      "cover": "b",
+      "fill": "c",
+      "none": "d",
+      "scale-down": "e"
+    },
+    "opacity": {
       "0": "a",
       "1": "b"
     },
-    "borderInlineEndWidth": {
-      "2px": "a",
-      "0px": "b",
-      "1px": "c",
-      "4px": "d"
+    "order": {
+      "0": "a",
+      "1": "b"
     },
-    "borderInlineStartWidth": {
-      "2px": "a",
-      "0px": "b",
-      "1px": "c",
+    "outlineOffset": {
+      "-1px": "a",
+      "-2px": "b",
+      "-4px": "c",
+      "2px": "d"
+    },
+    "outlineStyle": {
+      "dashed": "a",
+      "dotted": "b",
+      "double": "c",
+      "inset": "d",
+      "none": "e",
+      "solid": "f"
+    },
+    "outlineWidth": {
+      "0px": "a",
+      "1px": "b",
+      "2px": "c",
       "4px": "d"
     },
-    "contain": {
-      "inline-size": "a",
-      "none": "b",
-      "layout": "c",
-      "content": "d",
-      "paint": "e",
-      "size": "f",
-      "strict": "g",
-      "style": "h"
+    "overflowX": {
+      "auto": "a",
+      "clip": "b",
+      "hidden": "c",
+      "scroll": "d",
+      "visible": "e"
     },
-    "maxHeight": {
-      "calc(1.25rem * var(--s2-scale))": "a",
-      "none": "b",
-      "100vh": "c",
-      "100%": "d",
-      "auto": "e",
-      "calc(0.875rem * var(--s2-scale))": "f",
-      "calc(1.125rem * var(--s2-scale))": "g",
-      "calc(1.5rem * var(--s2-scale))": "h",
-      "calc(1rem * var(--s2-scale))": "i",
-      "calc(2.5rem * var(--s2-scale))": "j",
-      "calc(2rem * var(--s2-scale))": "k",
-      "calc(3rem * var(--s2-scale))": "l",
-      "fit-content": "m",
-      "max-content": "n",
-      "min-content": "o",
-      "calc(10rem * var(--s2-scale))": "p"
+    "pointerEvents": {
+      "auto": "a",
+      "none": "b"
     },
-    "mixBlendMode": {
-      "color": "a",
-      "color-burn": "b",
-      "color-dodge": "c",
-      "darken": "d",
-      "difference": "e",
-      "exclusion": "f",
-      "hard-light": "g",
-      "hue": "h",
-      "lighten": "i",
-      "luminosity": "j",
-      "multiply": "k",
-      "normal": "l",
-      "overlay": "m",
-      "plus-darker": "n",
-      "plus-lighter": "o",
-      "saturation": "p",
-      "screen": "q",
-      "soft-light": "r"
+    "position": {
+      "absolute": "a",
+      "fixed": "b",
+      "relative": "c",
+      "static": "d",
+      "sticky": "e"
     },
-    "outlineOffset": {
-      "2px": "a",
-      "-2px": "b",
-      "-1px": "c",
-      "-4px": "d"
+    "resize": {
+      "both": "a",
+      "horizontal": "b",
+      "none": "c",
+      "vertical": "d"
     },
-    "whiteSpace": {
-      "nowrap": "a",
-      "normal": "b",
-      "break-spaces": "c",
-      "pre": "d",
-      "pre-line": "e",
-      "pre-wrap": "f"
+    "right": {
+      "-12px": "a",
+      "-16px": "b",
+      "-20px": "c",
+      "-24px": "d",
+      "-28px": "e",
+      "-2px": "f",
+      "-32px": "g",
+      "-36px": "h",
+      "-40px": "i",
+      "-44px": "j",
+      "-48px": "k",
+      "-4px": "l",
+      "-56px": "m",
+      "-64px": "n",
+      "-80px": "o",
+      "-8px": "p",
+      "-96px": "q",
+      "0px": "r",
+      "100%": "s",
+      "12px": "t",
+      "16px": "u",
+      "20px": "v",
+      "24px": "w",
+      "28px": "x",
+      "2px": "y",
+      "32px": "z",
+      "36px": "A",
+      "40px": "B",
+      "44px": "C",
+      "48px": "D",
+      "4px": "E",
+      "56px": "F",
+      "64px": "G",
+      "80px": "H",
+      "8px": "I",
+      "96px": "J",
+      "auto": "K"
     },
-    "backgroundBlendMode": {
-      "color": "a",
-      "color-burn": "b",
-      "color-dodge": "c",
-      "darken": "d",
-      "difference": "e",
-      "exclusion": "f",
-      "hard-light": "g",
-      "hue": "h",
-      "lighten": "i",
-      "luminosity": "j",
-      "multiply": "k",
-      "normal": "l",
-      "overlay": "m",
-      "saturation": "n",
-      "screen": "o",
-      "soft-light": "p"
+    "rotate": {
+      "-90deg": "a",
+      "0deg": "b",
+      "180deg": "c",
+      "90deg": "d"
     },
-    "flexDirection": {
-      "column": "a",
-      "row": "b",
-      "column-reverse": "c",
-      "row-reverse": "d"
+    "scrollPaddingInlineStart": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "containIntrinsicHeight": {
-      "calc(1.25rem * var(--s2-scale))": "a",
-      "100%": "b",
-      "100vh": "c",
-      "auto": "d",
-      "calc(0.875rem * var(--s2-scale))": "e",
-      "calc(1.125rem * var(--s2-scale))": "f",
-      "calc(1.5rem * var(--s2-scale))": "g",
-      "calc(1rem * var(--s2-scale))": "h",
-      "calc(2.5rem * var(--s2-scale))": "i",
-      "calc(2rem * var(--s2-scale))": "j",
-      "calc(3rem * var(--s2-scale))": "k",
-      "fit-content": "l",
-      "max-content": "m",
-      "min-content": "n"
+    "scrollPaddingTop": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "containIntrinsicWidth": {
-      "calc(1.25rem * var(--s2-scale))": "a",
-      "100%": "b",
-      "100vw": "c",
-      "auto": "d",
-      "calc(0.875rem * var(--s2-scale))": "e",
-      "calc(1.125rem * var(--s2-scale))": "f",
-      "calc(1.5rem * var(--s2-scale))": "g",
-      "calc(1rem * var(--s2-scale))": "h",
-      "calc(2.5rem * var(--s2-scale))": "i",
-      "calc(2rem * var(--s2-scale))": "j",
-      "calc(3rem * var(--s2-scale))": "k",
-      "fit-content": "l",
-      "max-content": "m",
-      "min-content": "n"
+    "strokeWidth": {
+      "0": "a",
+      "1": "b",
+      "2": "c"
     },
     "textAlign": {
-      "start": "a",
+      "center": "a",
       "end": "b",
-      "center": "c",
-      "justify": "d"
+      "justify": "c",
+      "start": "d"
     },
-    "-webkit-tap-highlight-color": {
-      "rgba(0,0,0,0)": "a"
+    "textDecoration": {
+      "none": "a",
+      "underline 1px": "b"
     },
-    "flexGrow": {
-      "0": "b",
-      "1": "a"
+    "textOverflow": {
+      "clip": "a",
+      "ellipsis": "b"
     },
-    "translate": {
-      "var(--translateX, 0) var(--translateY, 0)": "a"
+    "transform": {
+      "rotate(-90deg)": "a",
+      "rotate(90deg)": "b",
+      "translate(-50%, -50%)": "c",
+      "translateY(-50%) translateX(-50%)": "d"
     },
-    "alignContent": {
-      "center": "a",
-      "space-between": "b",
-      "baseline": "c",
-      "end": "d",
+    "transformOrigin": {
+      "bottom": "a",
+      "bottom left": "b",
+      "bottom right": "c",
+      "center": "d",
+      "left": "e",
+      "right": "f",
+      "top": "g",
+      "top right": "h"
+    },
+    "transitionDelay": {
+      "0ms": "a",
+      "160ms": "b"
+    },
+    "transitionTimingFunction": {
+      "cubic-bezier(0, 0, 0.40, 1)": "a",
+      "cubic-bezier(0.45, 0, 0.4, 1)": "b",
+      "cubic-bezier(0.5, 0, 1, 1)": "c",
+      "linear": "d"
+    },
+    "unicodeBidi": {
+      "bidi-override": "a",
+      "embed": "b",
+      "isolate": "c",
+      "isolate-override": "d",
       "normal": "e",
-      "space-around": "f",
-      "space-evenly": "g",
-      "start": "h",
-      "stretch": "i"
+      "plaintext": "f"
+    },
+    "userSelect": {
+      "all": "a",
+      "auto": "b",
+      "none": "c",
+      "text": "d"
+    },
+    "verticalAlign": {
+      "baseline": "a",
+      "bottom": "b",
+      "middle": "c",
+      "sub": "d",
+      "super": "e",
+      "text-bottom": "f",
+      "text-top": "g",
+      "top": "h"
+    },
+    "visibility": {
+      "collapse": "a",
+      "hidden": "b",
+      "visible": "c"
+    },
+    "whiteSpace": {
+      "break-spaces": "a",
+      "normal": "b",
+      "nowrap": "c",
+      "pre": "d",
+      "pre-line": "e",
+      "pre-wrap": "f"
+    },
+    "willChange": {
+      "auto": "a",
+      "contents": "b",
+      "scroll-position": "c",
+      "transform": "d"
+    },
+    "zIndex": {
+      "0": "b",
+      "1": "c",
+      "2": "d",
+      "-1": "a"
     },
-    "boxShadow": {
-      "0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48))": "a",
-      "none": "b",
-      "0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36))": "c",
-      "0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "d"
+    "-webkit-box-orient": {
+      "vertical": "a"
     },
-    "opacity": {
-      "0": "a",
-      "1": "b"
+    "-webkit-line-clamp": {
+      "3": "a"
     },
-    "order": {
-      "0": "a",
-      "1": "b"
+    "-webkit-tap-highlight-color": {
+      "rgba(0,0,0,0)": "a"
     },
-    "colorScheme": {
-      "light": "a",
-      "dark": "b",
-      "light dark": "c"
+    "animationDirection": {
+      "alternate": "a",
+      "alternate-reverse": "b",
+      "normal": "c",
+      "reverse": "d"
     },
-    "aspectRatio": {
-      "1 / 1": "a",
-      "16 / 9": "b",
-      "auto": "c"
+    "animationIterationCount": {
+      "infinite": "a"
     },
-    "transformOrigin": {
-      "top right": "a",
-      "center": "b",
-      "left": "c",
-      "bottom": "d",
-      "bottom left": "e",
-      "bottom right": "f",
-      "right": "g",
-      "top": "h"
+    "appearance": {
+      "auto": "a",
+      "none": "b"
     },
-    "userSelect": {
-      "none": "a",
-      "all": "b",
-      "auto": "c",
-      "text": "d"
+    "backgroundAttachment": {
+      "fixed": "a",
+      "local": "b",
+      "scroll": "c"
     },
-    "objectFit": {
-      "cover": "a",
-      "contain": "b",
-      "fill": "c",
-      "none": "d",
-      "scale-down": "e"
+    "backgroundBlendMode": {
+      "color": "a",
+      "color-burn": "b",
+      "color-dodge": "c",
+      "darken": "d",
+      "difference": "e",
+      "exclusion": "f",
+      "hard-light": "g",
+      "hue": "h",
+      "lighten": "i",
+      "luminosity": "j",
+      "multiply": "k",
+      "normal": "l",
+      "overlay": "m",
+      "saturation": "n",
+      "screen": "o",
+      "soft-light": "p"
     },
-    "rotate": {
-      "90deg": "a",
-      "180deg": "b",
-      "-90deg": "c",
-      "0deg": "d",
-      "270deg": "e"
+    "backgroundClip": {
+      "border-box": "a",
+      "content-box": "b",
+      "padding-box": "c",
+      "text": "d"
     },
-    "textOverflow": {
-      "ellipsis": "a",
-      "clip": "b"
+    "backgroundOrigin": {
+      "border-box": "a",
+      "content-box": "b",
+      "padding-box": "c"
     },
     "backgroundPosition": {
       "bottom": "a",
@@ -2066,34 +1783,42 @@
       "right top": "h",
       "top": "i"
     },
-    "objectPosition": {
-      "bottom": "a",
-      "center": "b",
-      "left": "c",
-      "left bottom": "d",
-      "left top": "e",
-      "right": "f",
-      "right bottom": "g",
-      "right top": "h",
-      "top": "i"
+    "backgroundRepeat": {
+      "no-repeat": "a",
+      "repeat": "b",
+      "repeat-x": "c",
+      "repeat-y": "d",
+      "round": "e",
+      "space": "f"
     },
-    "verticalAlign": {
-      "bottom": "a",
-      "middle": "b",
-      "baseline": "c",
-      "sub": "d",
-      "super": "e",
-      "text-bottom": "f",
-      "text-top": "g",
-      "top": "h"
+    "backgroundSize": {
+      "auto": "a",
+      "contain": "b",
+      "cover": "c"
     },
-    "alignSelf": {
-      "center": "a",
-      "end": "b",
-      "start": "c",
-      "stretch": "d",
-      "auto": "e",
-      "baseline": "f"
+    "borderCollapse": {
+      "collapse": "a",
+      "separate": "b"
+    },
+    "borderSpacing": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
     "breakAfter": {
       "all": "a",
@@ -2115,206 +1840,107 @@
       "page": "g",
       "right": "h"
     },
-    "forcedColorAdjust": {
-      "none": "a",
-      "auto": "b"
-    },
-    "pointerEvents": {
-      "none": "a",
-      "auto": "b"
-    },
-    "animationTimingFunction": {
-      "cubic-bezier(0.45, 0, 0.4, 1)": "a",
-      "cubic-bezier(0, 0, 0.40, 1)": "b",
-      "cubic-bezier(0.5, 0, 1, 1)": "c",
-      "linear": "d"
-    },
-    "flexWrap": {
-      "wrap": "a",
-      "nowrap": "b",
-      "wrap-reverse": "c"
-    },
-    "backgroundRepeat": {
-      "no-repeat": "a",
-      "repeat": "b",
-      "repeat-x": "c",
-      "repeat-y": "d",
-      "round": "e",
-      "space": "f"
-    },
-    "clear": {
-      "both": "a",
-      "inline-end": "b",
-      "inline-start": "c",
-      "left": "d",
-      "none": "e",
-      "right": "f"
-    },
-    "scrollSnapType": {
-      "both": "a",
-      "both mandatory": "b",
-      "x": "c",
-      "x mandatory": "d",
-      "y": "e",
-      "y mandatory": "f"
-    },
-    "touchAction": {
-      "auto": "a",
-      "manipulation": "b",
-      "none": "c",
-      "pan-x": "d",
-      "pan-y": "e",
-      "pinch-zoom": "f"
-    },
-    "visibility": {
-      "hidden": "a",
-      "visible": "b",
-      "collapse": "c"
-    },
-    "isolation": {
-      "isolate": "a",
-      "auto": "b"
-    },
-    "backgroundImage": {
-      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 33%,var(--g2) 100%)": "a",
-      "linear-gradient(to bottom right, var(--g0) 0%,var(--g1) 66%,var(--g2) 100%)": "b",
-      "none": "c"
-    },
-    "filter": {
-      "drop-shadow(0px 2px 8px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.48)))": "a",
-      "drop-shadow(0px 1px 6px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.36)))": "b",
-      "drop-shadow0px 6px 16px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6))": "c",
-      "none": "d"
-    },
-    "float": {
-      "inline-end": "a",
-      "inline-start": "b",
-      "left": "c",
-      "none": "d",
-      "right": "e"
-    },
-    "gridAutoFlow": {
-      "column": "a",
-      "column dense": "b",
-      "dense": "c",
-      "row": "d",
-      "row dense": "e"
-    },
-    "justifyItems": {
-      "center": "a",
-      "start": "b",
-      "end": "c",
-      "stretch": "d"
-    },
-    "justifySelf": {
-      "auto": "a",
-      "center": "b",
-      "end": "c",
-      "start": "d",
-      "stretch": "e"
-    },
-    "stroke": {
-      "ButtonBorder": "a",
-      "Background": "b",
-      "Highlight": "c",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.17)": "d",
-      "lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 0.94)": "e",
-      "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))": "f",
-      "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))": "g",
-      "light-dark(rgb(59, 99, 251), rgb(86, 129, 255))": "h",
-      "rgba(0, 0, 0, 0.12)": "i"
-    },
-    "textDecoration": {
-      "none": "a",
-      "underline 1px": "b"
-    },
-    "animationFillMode": {
-      "forwards": "a",
-      "backwards": "b",
-      "both": "c",
-      "none": "d"
-    },
-    "resize": {
-      "none": "a",
-      "both": "b",
-      "horizontal": "c",
-      "vertical": "d"
-    },
-    "willChange": {
-      "transform": "a",
-      "auto": "b",
-      "contents": "c",
-      "scroll-position": "d"
-    },
-    "animationDirection": {
-      "alternate": "a",
-      "alternate-reverse": "b",
-      "normal": "c",
-      "reverse": "d"
-    },
-    "backgroundClip": {
-      "border-box": "a",
-      "content-box": "b",
-      "padding-box": "c",
-      "text": "d"
-    },
     "breakInside": {
       "auto": "a",
       "avoid": "b",
       "avoid-column": "c",
       "avoid-page": "d"
     },
-    "scale": {
-      "var(--scaleX, 1) var(--scaleY, 1)": "a"
-    },
-    "scrollSnapAlign": {
-      "center": "a",
-      "end": "b",
-      "none": "c",
-      "start": "d"
-    },
-    "strokeWidth": {
-      "0": "b",
-      "1": "a",
-      "2": "c"
+    "captionSide": {
+      "bottom": "a",
+      "top": "b"
     },
-    "textTransform": {
-      "capitalize": "a",
-      "lowercase": "b",
-      "none": "c",
-      "uppercase": "d"
+    "clear": {
+      "both": "a",
+      "inline-end": "b",
+      "inline-start": "c",
+      "left": "d",
+      "none": "e",
+      "right": "f"
     },
-    "textWrap": {
-      "balance": "a",
-      "nowrap": "b",
-      "pretty": "c",
-      "wrap": "d"
+    "containIntrinsicHeight": {
+      "100%": "a",
+      "100vh": "b",
+      "auto": "c",
+      "fit-content": "d",
+      "max-content": "e",
+      "min-content": "f"
     },
-    "listStyleType": {
-      "none": "a",
-      "decimal": "b",
-      "dist": "c"
+    "containIntrinsicWidth": {
+      "100%": "a",
+      "100vw": "b",
+      "auto": "c",
+      "fit-content": "d",
+      "max-content": "e",
+      "min-content": "f"
     },
-    "backgroundAttachment": {
-      "fixed": "a",
-      "local": "b",
-      "scroll": "c"
+    "float": {
+      "inline-end": "a",
+      "inline-start": "b",
+      "left": "c",
+      "none": "d",
+      "right": "e"
     },
-    "backgroundOrigin": {
-      "border-box": "a",
-      "content-box": "b",
-      "padding-box": "c"
+    "gridAutoFlow": {
+      "column": "a",
+      "column dense": "b",
+      "dense": "c",
+      "row": "d",
+      "row dense": "e"
     },
-    "backgroundSize": {
-      "auto": "a",
-      "contain": "b",
-      "cover": "c"
+    "gridAutoRows": {
+      "min-content": "a"
     },
     "hyphens": {
       "auto": "a",
       "manual": "b",
       "none": "c"
     },
+    "justifySelf": {
+      "auto": "a",
+      "center": "b",
+      "end": "c",
+      "start": "d",
+      "stretch": "e"
+    },
+    "listStylePosition": {
+      "inside": "a",
+      "outside": "b"
+    },
+    "mixBlendMode": {
+      "color": "a",
+      "color-burn": "b",
+      "color-dodge": "c",
+      "darken": "d",
+      "difference": "e",
+      "exclusion": "f",
+      "hard-light": "g",
+      "hue": "h",
+      "lighten": "i",
+      "luminosity": "j",
+      "multiply": "k",
+      "normal": "l",
+      "overlay": "m",
+      "plus-darker": "n",
+      "plus-lighter": "o",
+      "saturation": "p",
+      "screen": "q",
+      "soft-light": "r"
+    },
+    "objectPosition": {
+      "bottom": "a",
+      "center": "b",
+      "left": "c",
+      "left bottom": "d",
+      "left top": "e",
+      "right": "f",
+      "right bottom": "g",
+      "right top": "h",
+      "top": "i"
+    },
+    "overflow": {
+      "hidden": "a"
+    },
     "overscrollBehaviorX": {
       "auto": "a",
       "contain": "b",
@@ -2325,98 +1951,227 @@
       "contain": "b",
       "none": "c"
     },
-    "wordBreak": {
-      "break-all": "a",
-      "keep-all": "b",
-      "normal": "c"
-    },
-    "zIndex": {
-      "1": "b",
-      "2": "a",
-      "-1": "c"
+    "scale": {
+      "var(--scaleX, 1) var(--scaleY, 1)": "a"
     },
-    "boxDecorationBreak": {
-      "clone": "a",
-      "slice": "b"
+    "scrollBehavior": {
+      "auto": "a",
+      "smooth": "b"
     },
-    "textUnderlineOffset": {
-      "1px": "a"
+    "scrollMarginBottom": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "animationDuration": {
-      "150ms": "a",
-      "1000ms": "b",
-      "125ms": "c"
+    "scrollMarginInlineEnd": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "appearance": {
-      "auto": "a",
-      "none": "b"
+    "scrollMarginInlineStart": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "borderCollapse": {
-      "collapse": "a",
-      "separate": "b"
+    "scrollMarginTop": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "captionSide": {
-      "bottom": "a",
-      "top": "b"
+    "scrollPaddingBottom": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "listStylePosition": {
-      "inside": "a",
-      "outside": "b"
+    "scrollPaddingInlineEnd": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "scrollBehavior": {
-      "auto": "a",
-      "smooth": "b"
+    "scrollSnapAlign": {
+      "center": "a",
+      "end": "b",
+      "none": "c",
+      "start": "d"
     },
     "scrollSnapStop": {
       "always": "a",
       "normal": "b"
     },
+    "scrollSnapType": {
+      "both": "a",
+      "both mandatory": "b",
+      "x": "c",
+      "x mandatory": "d",
+      "y": "e",
+      "y mandatory": "f"
+    },
     "tableLayout": {
       "auto": "a",
       "fixed": "b"
     },
-    "transform": {
-      "rotate(-90deg)": "a",
-      "rotate(90deg)": "b",
-      "translate(-50%, -50%)": "c",
-      "translateY(-50%) translateX(-50%)": "d"
+    "textIndent": {
+      "0.125rem": "a",
+      "0.25rem": "b",
+      "0.5rem": "c",
+      "0.75rem": "d",
+      "0rem": "e",
+      "1.25rem": "f",
+      "1.5rem": "g",
+      "1.75rem": "h",
+      "1rem": "i",
+      "2.25rem": "j",
+      "2.5rem": "k",
+      "2.75rem": "l",
+      "2rem": "m",
+      "3.5rem": "n",
+      "3rem": "o",
+      "4rem": "p",
+      "5rem": "q",
+      "6rem": "r"
     },
-    "-webkit-box-orient": {
-      "vertical": "a"
+    "textTransform": {
+      "capitalize": "a",
+      "lowercase": "b",
+      "none": "c",
+      "uppercase": "d"
     },
-    "-webkit-line-clamp": {
-      "3": "a"
+    "textUnderlineOffset": {
+      "1px": "a"
     },
-    "gridAutoRows": {
-      "min-content": "a"
+    "textWrap": {
+      "balance": "a",
+      "nowrap": "b",
+      "pretty": "c",
+      "wrap": "d"
     },
-    "overflow": {
-      "hidden": "a"
+    "touchAction": {
+      "auto": "a",
+      "manipulation": "b",
+      "none": "c",
+      "pan-x": "d",
+      "pan-y": "e",
+      "pinch-zoom": "f"
     },
-    "transitionDelay": {
-      "0ms": "a",
-      "160ms": "b"
+    "translate": {
+      "var(--translateX, 0) var(--translateY, 0)": "a"
     },
-    "animationIterationCount": {
-      "infinite": "a"
+    "wordBreak": {
+      "break-all": "a",
+      "keep-all": "b",
+      "normal": "c"
     }
   },
   "conditions": {
-    "@media not ((hover: hover) and (pointer: fine))": "a",
-    "@media (forced-colors: active)": "b",
-    ":lang(ja, ko, zh, zh-Hant, zh-Hans)": "c",
-    ":lang(ar)": "d",
-    ":lang(he)": "e",
-    ":lang(ja)": "f",
+    ":empty": "a",
+    ":first-child": "b",
+    ":lang(ar)": "c",
+    ":lang(he)": "d",
+    ":lang(ja)": "e",
+    ":lang(ja, ko, zh, zh-Hant, zh-Hans)": "f",
     ":lang(ko)": "g",
     ":lang(zh)": "h",
     ":lang(zh-Hans, zh-CN, zh-SG)": "i",
     ":lang(zh-hant)": "j",
-    "@media (min-width: 640px)": "k",
-    ":last-child": "l",
-    "@supports (contain-intrinsic-width: 1px)": "m",
-    ":first-child": "n",
-    ":empty": "o",
-    "@media (height < 400)": "p"
+    ":last-child": "k",
+    "@media (forced-colors: active)": "l",
+    "@media (height < 25rem)": "m",
+    "@media (min-width: 40rem)": "n",
+    "@media (min-width: 48rem)": "o",
+    "@media (min-width: 64rem)": "p",
+    "@media (min-width: 80rem)": "q",
+    "@media (min-width: 96rem)": "r",
+    "@media not ((hover: hover) and (pointer: fine))": "s",
+    "@supports (contain-intrinsic-width: 1px)": "t"
   }
 }
diff --git a/packages/@react-spectrum/s2/style/spectrum-theme.ts b/packages/@react-spectrum/s2/style/spectrum-theme.ts
index f04fdbaae74..defa41cb136 100644
--- a/packages/@react-spectrum/s2/style/spectrum-theme.ts
+++ b/packages/@react-spectrum/s2/style/spectrum-theme.ts
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {ArbitraryProperty, Color, ColorProperty, createTheme, ExpandedProperty, MappedProperty, parseArbitraryValue, SizingProperty} from './style-macro';
-import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueMap} from './types';
-import {autoStaticColor, colorScale, colorToken, fontSizeToken, generateOverlayColorScale, getToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'};
+import {ArbitraryProperty, Color, createTheme, ExpandedProperty, MappedProperty, parseArbitraryValue, PercentageProperty, SizingProperty} from './style-macro';
+import {ArbitraryValue, CSSProperties, CSSValue, PropertyValueDefinition, PropertyValueMap, Value} from './types';
+import {autoStaticColor, ColorRef, colorScale, ColorToken, colorToken, fontSizeToken, generateOverlayColorScale, getToken, rawColorToken, simpleColorScale, weirdColorToken} from './tokens' with {type: 'macro'};
 import type * as CSS from 'csstype';
 
 interface MacroContext {
@@ -26,7 +26,7 @@ function pxToRem(px: string | number) {
   return px / 16 + 'rem';
 }
 
-const color = {
+const baseColors = {
   transparent: 'transparent',
   black: 'black',
   white: 'white',
@@ -74,41 +74,135 @@ const color = {
   LinkText: 'LinkText'
 };
 
-export function baseColor(base: keyof typeof color): {default: keyof typeof color, isHovered: keyof typeof color, isFocusVisible: keyof typeof color, isPressed: keyof typeof color} {
-  let keys = Object.keys(color) as (keyof typeof color)[];
-  let index = keys.indexOf(base);
+// Resolves a color to its most basic form, following all aliases.
+function resolveColorToken(token: string | ColorToken | ColorRef): ColorToken {
+  if (typeof token === 'string') {
+    return {
+      type: 'color',
+      light: token,
+      dark: token
+    };
+  }
+
+  if (token.type === 'color') {
+    return token;
+  }
+
+  let lightToken = baseColors[token.light];
+  if (!lightToken) {
+    throw new Error(`${token.light} is not a valid color reference`);
+  }
+  let darkToken = baseColors[token.dark];
+  if (!darkToken) {
+    throw new Error(`${token.dark} is not a valid color reference`);
+  }
+
+  let light = resolveColorToken(lightToken);
+  let dark = resolveColorToken(darkToken);
+  return {
+    type: 'color',
+    light: light.light,
+    dark: dark.dark
+  };
+}
+
+function colorTokenToString(token: ColorToken, opacity?: string | number) {
+  let result = token.light === token.dark ? token.light : `light-dark(${token.light}, ${token.dark})`;
+  if (opacity) {
+    result = `rgb(from ${result} r g b / ${opacity}%)`;
+  }
+  return result;
+}
+
+// Bumps up a color token by one stop, e.g. for hover/press states.
+let colorList = Object.keys(baseColors);
+function nextColorStop(name: string, token: string | ColorToken | ColorRef): ColorToken {
+  if (typeof token === 'object' && token.type === 'ref') {
+    let light = nextColorStop(token.light, baseColors[token.light]);
+    let dark = nextColorStop(token.dark, baseColors[token.dark]);
+
+    return {
+      type: 'color',
+      light: light.light,
+      dark: dark.dark,
+      forcedColors: token.forcedColors
+    };
+  }
+
+  let index = colorList.indexOf(name);
   if (index === -1) {
-    throw new Error('Invalid base color ' + base);
+    throw new Error(`${name} does not support states`);
+  }
+
+  let key = colorList[index + 1];
+  if (key.split('-')[0] !== name.split('-')[0]) {
+    throw new Error(`${name} does not support states`);
+  }
+
+  return resolveColorToken(baseColors[key]);
+}
+
+class SpectrumColorProperty<C extends string> extends ArbitraryProperty<C> {
+  mapping: {[name in C]: string | ColorToken | ColorRef};
+
+  constructor(property: string, mapping: {[name in C]: string | ColorToken | ColorRef}) {
+    super(property);
+    this.mapping = mapping;
   }
 
+  toCSSValue(value: Color<C>): PropertyValueDefinition<Value> {
+    let [colorWithOpacity, state] = value.split(':');
+    let [color, opacity] = colorWithOpacity.split('/');
+    let token: string | ColorToken | ColorRef = this.mapping[color];
+    if (!token) {
+      throw new Error('Invalid color ' + value);
+    }
+
+    if (state === 'hovered' || state === 'pressed' || state === 'focused') {
+      token = nextColorStop(color, token);
+    } else {
+      token = resolveColorToken(token);
+    }
+
+    let result = colorTokenToString(token, opacity);
+    if (token.forcedColors) {
+      return {
+        default: result,
+        forcedColors: token.forcedColors
+      };
+    }
+
+    return result;
+  }
+}
+
+type BaseColor = keyof typeof baseColors;
+
+export function baseColor<C extends string = BaseColor>(base: BaseColor | C): {default: C, isHovered: C, isFocusVisible: C, isPressed: C} {
   return {
-    default: base,
-    isHovered: keys[index + 1],
-    isFocusVisible: keys[index + 1],
-    isPressed: keys[index + 1]
+    default: base as C,
+    isHovered: `${base}:hovered` as C,
+    isFocusVisible: `${base}:focused` as C,
+    isPressed: `${base}:pressed` as C
   };
 }
 
-type SpectrumColor = Color<keyof typeof color> | ArbitraryValue;
-function parseColor(value: SpectrumColor) {
+type SpectrumColor = Color<BaseColor> | ArbitraryValue;
+export function color(value: SpectrumColor): string {
   let arbitrary = parseArbitraryValue(value);
   if (arbitrary) {
-    return arbitrary[0];
+    return arbitrary;
   }
   let [colorValue, opacity] = value.split('/');
-  colorValue = color[colorValue];
-  if (opacity) {
-    colorValue = `rgb(from ${colorValue} r g b / ${opacity}%)`;
-  }
-  return colorValue;
+  return colorTokenToString(resolveColorToken(baseColors[colorValue]), opacity);
 }
 
 export function lightDark(light: SpectrumColor, dark: SpectrumColor): `[${string}]` {
-  return `[light-dark(${parseColor(light)}, ${parseColor(dark)})]`;
+  return `[light-dark(${color(light)}, ${color(dark)})]`;
 }
 
 export function colorMix(a: SpectrumColor, b: SpectrumColor, percent: number): `[${string}]` {
-  return `[color-mix(in srgb, ${parseColor(a)}, ${parseColor(b)} ${percent}%)]`;
+  return `[color-mix(in srgb, ${color(a)}, ${color(b)} ${percent}%)]`;
 }
 
 interface LinearGradient {
@@ -142,15 +236,18 @@ export function linearGradient(this: MacroContext | void, angle: string, ...toke
   }];
 }
 
-function generateSpacing<K extends number[]>(px: K): {[P in K[number]]: string} {
-  let res: any = {};
+// Spacing uses rems, padding does not.
+function generateSpacing<K extends number[]>(px: K): {spacing: {[P in K[number]]: string}, padding: {[P in K[number]]: string}} {
+  let spacing: any = {};
+  let padding: any = {};
   for (let p of px) {
-    res[p] = pxToRem(p);
+    spacing[p] = pxToRem(p);
+    padding[p] = p + 'px';
   }
-  return res;
+  return {spacing, padding};
 }
 
-const baseSpacing = generateSpacing([
+const {spacing: baseSpacing, padding: basePadding} = generateSpacing([
   0,
   2, // spacing-50
   4, // spacing-75
@@ -169,27 +266,13 @@ const baseSpacing = generateSpacing([
   // From here onward the values are mostly spaced by 1rem (16px)
   64, // spacing-800
   80, // spacing-900
-  96, // spacing-1000
-  // TODO: should these only be available as sizes rather than spacing?
-  112,
-  128,
-  144,
-  160,
-  176,
-  192,
-  208,
-  224,
-  240,
-  256,
-  288,
-  320,
-  384
+  96 // spacing-1000
 ] as const);
 
 // This should match the above, but negative. There's no way to negate a number
 // type in typescript so this has to be done manually for now.
-const negativeSpacing = generateSpacing([
-  // -2, // spacing-50 !! TODO: should we support this?
+const {spacing: negativeSpacing, padding: negativePadding} = generateSpacing([
+  -2, // spacing-50
   -4, // spacing-75
   -8, // spacing-100
   -12, // spacing-200
@@ -206,23 +289,13 @@ const negativeSpacing = generateSpacing([
   // From here onward the values are mostly spaced by 1rem (16px)
   -64, // spacing-800
   -80, // spacing-900
-  -96, // spacing-1000
-  // TODO: should these only be available as sizes rather than spacing?
-  -112,
-  -128,
-  -144,
-  -160,
-  -176,
-  -192,
-  -208,
-  -224,
-  -240,
-  -256,
-  -288,
-  -320,
-  -384
+  -96 // spacing-1000
 ] as const);
 
+export type PositiveSpacing = keyof typeof baseSpacing;
+export type NegativeSpacing = keyof typeof negativeSpacing;
+export type Spacing = PositiveSpacing | NegativeSpacing;
+
 export function fontRelative(this: MacroContext | void, base: number, baseFontSize = 14): string {
   return (base / baseFontSize) + 'em';
 }
@@ -235,9 +308,7 @@ export function space(this: MacroContext | void, px: number): string {
   return pxToRem(px);
 }
 
-const spacing = {
-  ...baseSpacing,
-
+const relativeSpacing = {
   // font-size relative values
   'text-to-control': fontRelative(10),
   'text-to-visual': {
@@ -247,6 +318,16 @@ const spacing = {
   // height relative values
   'edge-to-text': 'calc(self(height, self(minHeight)) * 3 / 8)',
   'pill': 'calc(self(height, self(minHeight)) / 2)'
+} as const;
+
+const spacing = {
+  ...baseSpacing,
+  ...relativeSpacing
+};
+
+const padding = {
+  ...basePadding,
+  ...relativeSpacing
 };
 
 export function size(this: MacroContext | void, px: number): string {
@@ -258,27 +339,7 @@ const sizing = {
   full: '100%',
   min: 'min-content',
   max: 'max-content',
-  fit: 'fit-content',
-
-  control: {
-    default: size(32),
-    size: {
-      XS: size(20),
-      S: size(24),
-      L: size(40),
-      XL: size(48)
-    }
-  },
-  // With browser support for round() we could do this:
-  // 'control-sm': `round(${16 / 14}em, 2px)`
-  'control-sm': {
-    default: size(16),
-    size: {
-      S: size(14),
-      L: size(18),
-      XL: size(20)
-    }
-  }
+  fit: 'fit-content'
 };
 
 const height = {
@@ -302,14 +363,17 @@ const margin = {
 };
 
 const inset = {
-  ...baseSpacing,
+  ...basePadding,
+  ...negativePadding,
   auto: 'auto',
   full: '100%'
 };
 
+export type Inset = keyof typeof inset;
+
 const translate = {
-  ...baseSpacing,
-  ...negativeSpacing,
+  ...basePadding,
+  ...negativePadding,
   full: '100%'
 } as const;
 
@@ -327,9 +391,7 @@ const radius = {
   lg: pxToRem(getToken('corner-radius-large-default')), // 10px
   xl: pxToRem(getToken('corner-radius-extra-large-default')), // 16px
   full: '9999px',
-  pill: 'calc(self(height, self(minHeight, 9999px)) / 2)',
-  control: fontRelative(8), // automatic based on font size (e.g. t-shirt size logarithmic scale)
-  'control-sm': fontRelative(4)
+  pill: 'calc(self(height, self(minHeight, 9999px)) / 2)'
 };
 
 type GridTrack = 'none' | 'subgrid' | (string & {}) | readonly GridTrackSize[];
@@ -367,12 +429,10 @@ const timingFunction = {
   'in-out': 'cubic-bezier(0.45, 0, 0.4, 1)'
 };
 
-// TODO: do these need tokens or are arbitrary values ok?
 let durationValue = (value: number | string) => typeof value === 'number' ? value + 'ms' : value;
 
 const fontWeightBase = {
   light: '300',
-  // TODO: spectrum calls this "regular" but CSS calls it "normal". We also call other properties "default". What do we want to match?
   normal: '400',
   medium: '500',
   bold: '700',
@@ -417,16 +477,6 @@ const fontSize = {
   'ui-2xl': fontSizeToken('font-size-400'),
   'ui-3xl': fontSizeToken('font-size-500'),
 
-  control: {
-    default: fontSizeToken('font-size-100'),
-    size: {
-      XS: fontSizeToken('font-size-50'),
-      S: fontSizeToken('font-size-75'),
-      L: fontSizeToken('font-size-200'),
-      XL: fontSizeToken('font-size-300')
-    }
-  },
-
   'heading-2xs': fontSizeToken('heading-size-xxs'),
   'heading-xs': fontSizeToken('heading-size-xs'),
   'heading-sm': fontSizeToken('heading-size-s'),
@@ -469,39 +519,13 @@ const fontSize = {
 export const style = createTheme({
   properties: {
     // colors
-    color: new ColorProperty('color', {
-      ...color,
-      accent: {
-        default: colorToken('accent-content-color-default'),
-        isHovered: colorToken('accent-content-color-hover'),
-        isFocusVisible: colorToken('accent-content-color-key-focus'),
-        isPressed: colorToken('accent-content-color-down')
-        // isSelected: colorToken('accent-content-color-selected'), // same as pressed
-      },
-      neutral: {
-        default: colorToken('neutral-content-color-default'),
-        isHovered: colorToken('neutral-content-color-hover'),
-        isFocusVisible: colorToken('neutral-content-color-key-focus'),
-        isPressed: colorToken('neutral-content-color-down')
-        // isSelected: colorToken('neutral-subdued-content-color-selected'),
-      },
-      'neutral-subdued': {
-        default: colorToken('neutral-subdued-content-color-default'),
-        isHovered: colorToken('neutral-subdued-content-color-hover'),
-        isFocusVisible: colorToken('neutral-subdued-content-color-key-focus'),
-        isPressed: colorToken('neutral-subdued-content-color-down')
-        // isSelected: colorToken('neutral-subdued-content-color-selected'),
-      },
-      negative: {
-        default: colorToken('negative-content-color-default'),
-        isHovered: colorToken('negative-content-color-hover'),
-        isFocusVisible: colorToken('negative-content-color-key-focus'),
-        isPressed: colorToken('negative-content-color-down')
-      },
-      disabled: {
-        default: colorToken('disabled-content-color')
-        // forcedColors: 'GrayText'
-      },
+    color: new SpectrumColorProperty('color', {
+      ...baseColors,
+      accent: colorToken('accent-content-color-default'),
+      neutral: colorToken('neutral-content-color-default'),
+      'neutral-subdued': colorToken('neutral-subdued-content-color-default'),
+      negative: colorToken('negative-content-color-default'),
+      disabled: colorToken('disabled-content-color'),
       heading: colorToken('heading-color'),
       title: colorToken('title-color'),
       body: colorToken('body-color'),
@@ -509,48 +533,18 @@ export const style = createTheme({
       code: colorToken('code-color'),
       auto: autoStaticColor('self(backgroundColor, var(--s2-container-bg))')
     }),
-    backgroundColor: new ColorProperty('backgroundColor', {
-      ...color,
-      accent: {
-        default: weirdColorToken('accent-background-color-default'),
-        isHovered: weirdColorToken('accent-background-color-hover'),
-        isFocusVisible: weirdColorToken('accent-background-color-key-focus'),
-        isPressed: weirdColorToken('accent-background-color-down')
-      },
+    backgroundColor: new SpectrumColorProperty('backgroundColor', {
+      ...baseColors,
+      accent: weirdColorToken('accent-background-color-default'),
       'accent-subtle': weirdColorToken('accent-subtle-background-color-default'),
-      neutral: {
-        default: colorToken('neutral-background-color-default'),
-        isHovered: colorToken('neutral-background-color-hover'),
-        isFocusVisible: colorToken('neutral-background-color-key-focus'),
-        isPressed: colorToken('neutral-background-color-down')
-      },
-      'neutral-subdued': {
-        default: weirdColorToken('neutral-subdued-background-color-default'),
-        isHovered: weirdColorToken('neutral-subdued-background-color-hover'),
-        isFocusVisible: weirdColorToken('neutral-subdued-background-color-key-focus'),
-        isPressed: weirdColorToken('neutral-subdued-background-color-down')
-      },
+      neutral: colorToken('neutral-background-color-default'),
+      'neutral-subdued': weirdColorToken('neutral-subdued-background-color-default'),
       'neutral-subtle': weirdColorToken('neutral-subtle-background-color-default'),
-      negative: {
-        default: weirdColorToken('negative-background-color-default'),
-        isHovered: weirdColorToken('negative-background-color-hover'),
-        isFocusVisible: weirdColorToken('negative-background-color-key-focus'),
-        isPressed: weirdColorToken('negative-background-color-down')
-      },
+      negative: weirdColorToken('negative-background-color-default'),
       'negative-subtle': weirdColorToken('negative-subtle-background-color-default'),
-      informative: {
-        default: weirdColorToken('informative-background-color-default'),
-        isHovered: weirdColorToken('informative-background-color-hover'),
-        isFocusVisible: weirdColorToken('informative-background-color-key-focus'),
-        isPressed: weirdColorToken('informative-background-color-down')
-      },
+      informative: weirdColorToken('informative-background-color-default'),
       'informative-subtle': weirdColorToken('informative-subtle-background-color-default'),
-      positive: {
-        default: weirdColorToken('positive-background-color-default'),
-        isHovered: weirdColorToken('positive-background-color-hover'),
-        isFocusVisible: weirdColorToken('positive-background-color-key-focus'),
-        isPressed: weirdColorToken('positive-background-color-down')
-      },
+      positive: weirdColorToken('positive-background-color-default'),
       'positive-subtle': weirdColorToken('positive-subtle-background-color-default'),
       notice: weirdColorToken('notice-background-color-default'),
       'notice-subtle': weirdColorToken('notice-subtle-background-color-default'),
@@ -599,25 +593,19 @@ export const style = createTheme({
       pasteboard: weirdColorToken('background-pasteboard-color'),
       elevated: weirdColorToken('background-elevated-color')
     }),
-    borderColor: new ColorProperty('borderColor', {
-      ...color,
-      negative: {
-        default: colorToken('negative-border-color-default'),
-        isHovered: colorToken('negative-border-color-hover'),
-        isFocusVisible: colorToken('negative-border-color-key-focus'),
-        isPressed: colorToken('negative-border-color-down')
-      },
+    borderColor: new SpectrumColorProperty('borderColor', {
+      ...baseColors,
+      negative: colorToken('negative-border-color-default'),
       disabled: colorToken('disabled-border-color')
-        // forcedColors: 'GrayText'
     }),
-    outlineColor: new ColorProperty('outlineColor', {
-      ...color,
+    outlineColor: new SpectrumColorProperty('outlineColor', {
+      ...baseColors,
       'focus-ring': {
-        default: colorToken('focus-indicator-color'),
+        ...colorToken('focus-indicator-color'),
         forcedColors: 'Highlight'
       }
     }),
-    fill: new ColorProperty('fill', {
+    fill: new SpectrumColorProperty('fill', {
       none: 'none',
       currentColor: 'currentColor',
       accent: weirdColorToken('accent-visual-color'),
@@ -645,21 +633,20 @@ export const style = createTheme({
       cinnamon: weirdColorToken('cinnamon-visual-color'),
       brown: weirdColorToken('brown-visual-color'),
       silver: weirdColorToken('silver-visual-color'),
-      ...color
+      ...baseColors
     }),
-    stroke: new ColorProperty('stroke', {
+    stroke: new SpectrumColorProperty('stroke', {
       none: 'none',
       currentColor: 'currentColor',
-      ...color
+      ...baseColors
     }),
 
     // dimensions
     borderSpacing: baseSpacing, // TODO: separate x and y
-    flexBasis: {
+    flexBasis: createSpectrumSizingProperty('flexBasis', {
       auto: 'auto',
-      full: '100%',
-      ...baseSpacing
-    },
+      full: '100%'
+    }),
     rowGap: spacing,
     columnGap: spacing,
     height: createSpectrumSizingProperty('height', height),
@@ -686,53 +673,60 @@ export const style = createTheme({
       1: '1',
       2: '2'
     },
-    marginStart: new MappedProperty('marginInlineStart', margin),
-    marginEnd: new MappedProperty('marginInlineEnd', margin),
-    marginTop: margin,
-    marginBottom: margin,
-    paddingStart: new MappedProperty('paddingInlineStart', spacing),
-    paddingEnd: new MappedProperty('paddingInlineEnd', spacing),
-    paddingTop: spacing,
-    paddingBottom: spacing,
+    marginStart: new PercentageProperty('marginInlineStart', margin),
+    marginEnd: new PercentageProperty('marginInlineEnd', margin),
+    marginTop: new PercentageProperty('marginTop', margin),
+    marginBottom: new PercentageProperty('marginBottom', margin),
+    paddingStart: new PercentageProperty('paddingInlineStart', padding),
+    paddingEnd: new PercentageProperty('paddingInlineEnd', padding),
+    paddingTop: new PercentageProperty('paddingTop', padding),
+    paddingBottom: new PercentageProperty('paddingBottom', padding),
     scrollMarginStart: new MappedProperty('scrollMarginInlineStart', baseSpacing),
     scrollMarginEnd: new MappedProperty('scrollMarginInlineEnd', baseSpacing),
     scrollMarginTop: baseSpacing,
     scrollMarginBottom: baseSpacing,
+    // Using rems instead of px here (unlike regular padding) because this often needs to match the height of something.
     scrollPaddingStart: new MappedProperty('scrollPaddingInlineStart', baseSpacing),
     scrollPaddingEnd: new MappedProperty('scrollPaddingInlineEnd', baseSpacing),
     scrollPaddingTop: baseSpacing,
     scrollPaddingBottom: baseSpacing,
-    textIndent: baseSpacing,
-    translateX: new ExpandedProperty<keyof typeof translate>(['--translateX', 'translate'], value => ({
+    textIndent: new PercentageProperty('textIndent', baseSpacing),
+    translateX: new ExpandedProperty(['--translateX', 'translate'], value => ({
       '--translateX': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
-    }), translate),
-    translateY: new ExpandedProperty<keyof typeof translate>(['--translateY', 'translate'], value => ({
+    }), new PercentageProperty('--translateX', translate)),
+    translateY: new ExpandedProperty(['--translateY', 'translate'], value => ({
       '--translateY': String(value),
       translate: 'var(--translateX, 0) var(--translateY, 0)'
-    }), translate),
+    }), new PercentageProperty('--translateY', translate)),
     rotate: new ArbitraryProperty('rotate', (value: number | `${number}deg` | `${number}rad` | `${number}grad` | `${number}turn`) => typeof value === 'number' ? `${value}deg` : value),
-    scaleX: new ExpandedProperty<number>(['--scaleX', 'scale'], value => ({
+    scaleX: new ExpandedProperty<number | `${number}%`>(['--scaleX', 'scale'], value => ({
       '--scaleX': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
-    scaleY: new ExpandedProperty<number>(['--scaleY', 'scale'], value => ({
+    scaleY: new ExpandedProperty<number | `${number}%`>(['--scaleY', 'scale'], value => ({
       '--scaleY': String(value),
       scale: 'var(--scaleX, 1) var(--scaleY, 1)'
     })),
     transform: new ArbitraryProperty<string>('transform'),
     position: ['absolute', 'fixed', 'relative', 'sticky', 'static'] as const,
-    insetStart: new MappedProperty('insetInlineStart', inset),
-    insetEnd: new MappedProperty('insetInlineEnd', inset),
-    top: inset,
-    left: inset,
-    bottom: inset,
-    right: inset,
-    aspectRatio: {
-      auto: 'auto',
-      square: '1 / 1',
-      video: '16 / 9'
-    },
+    insetStart: new PercentageProperty('insetInlineStart', inset),
+    insetEnd: new PercentageProperty('insetInlineEnd', inset),
+    top: new PercentageProperty('top', inset),
+    left: new PercentageProperty('left', inset),
+    bottom: new PercentageProperty('bottom', inset),
+    right: new PercentageProperty('right', inset),
+    aspectRatio: new ArbitraryProperty<'auto' | 'square' | 'video' | `${number}/${number}`>('aspectRatio', value => {
+      if (value === 'square') {
+        return '1/1';
+      }
+
+      if (value === 'video') {
+        return '16/9';
+      }
+
+      return value;
+    }),
 
     // text
     fontFamily: {
@@ -806,15 +800,15 @@ export const style = createTheme({
 
     // effects
     boxShadow: {
-      emphasized: `${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')}`,
-      elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')}`,
-      dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`,
+      emphasized: `${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${rawColorToken('drop-shadow-emphasized-default-color')}`,
+      elevated: `${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${rawColorToken('drop-shadow-elevated-color')}`,
+      dragged: `${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${rawColorToken('drop-shadow-dragged-color')}`,
       none: 'none'
     },
     filter: {
-      emphasized: `drop-shadow(${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${colorToken('drop-shadow-emphasized-default-color')})`,
-      elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${colorToken('drop-shadow-elevated-color')})`,
-      dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${colorToken('drop-shadow-dragged-color')}`,
+      emphasized: `drop-shadow(${getToken('drop-shadow-emphasized-default-x')} ${getToken('drop-shadow-emphasized-default-y')} ${getToken('drop-shadow-emphasized-default-blur')} ${rawColorToken('drop-shadow-emphasized-default-color')})`,
+      elevated: `drop-shadow(${getToken('drop-shadow-elevated-x')} ${getToken('drop-shadow-elevated-y')} ${getToken('drop-shadow-elevated-blur')} ${rawColorToken('drop-shadow-elevated-color')})`,
+      dragged: `drop-shadow${getToken('drop-shadow-dragged-x')} ${getToken('drop-shadow-dragged-y')} ${getToken('drop-shadow-dragged-blur')} ${rawColorToken('drop-shadow-dragged-color')}`,
       none: 'none'
     },
     borderTopStartRadius: new MappedProperty('borderStartStartRadius', radius),
@@ -834,9 +828,9 @@ export const style = createTheme({
         // Create a CSS var for each color stop so the gradient can be transitioned.
         // These are registered via @property in the `linearGradient` macro.
         let properties: string[] = [];
-        value[0].stops.forEach(([color], i) => {
+        value[0].stops.forEach(([colorValue], i) => {
           properties.push(`--g${i}`);
-          values[`--g${i}`] = parseColor(color);
+          values[`--g${i}`] = color(colorValue);
         });
 
         // This is used by transition-property so we automatically transition all of the color stops.
@@ -902,35 +896,6 @@ export const style = createTheme({
     tableLayout: ['auto', 'fixed'] as const,
     captionSide: ['top', 'bottom'] as const,
     borderCollapse: ['collapse', 'separate'] as const,
-    columns: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      // TODO: what should these sizes be?
-      '3xs': '16rem',
-      '2xs': '18rem',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      '7xl': '80rem'
-    },
     breakBefore: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,
     breakInside: ['auto', 'avoid', 'avoid-page', 'avoid-column'] as const,
     breakAfter: ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const,
@@ -1016,9 +981,6 @@ export const style = createTheme({
     }),
     font: (value: keyof typeof fontSize) => {
       let type = value.split('-')[0];
-      if (type === 'control') {
-        type = 'ui';
-      }
       return {
         fontFamily: type === 'code' ? 'code' : 'sans',
         fontSize: value,
@@ -1039,11 +1001,10 @@ export const style = createTheme({
     // Windows tablet matches the same as iPhone. No difference when a mouse is connected.
     // Windows touch laptop matches same as macOS: (any-pointer: fine), (pointer: fine), (any-hover: hover), (hover: hover).
     touch: '@media not ((hover: hover) and (pointer: fine))',
-    // TODO
-    sm: '@media (min-width: 640px)',
-    md: '@media (min-width: 768px)',
-    lg: '@media (min-width: 1024px)',
-    xl: '@media (min-width: 1280px)',
-    '2xl': '@media (min-width: 1536px)'
+    sm: `@media (min-width: ${pxToRem(640)})`,
+    md: `@media (min-width: ${pxToRem(768)})`,
+    lg: `@media (min-width: ${pxToRem(1024)})`,
+    xl: `@media (min-width: ${pxToRem(1280)})`,
+    '2xl': `@media (min-width: ${pxToRem(1536)})`
   }
 });
diff --git a/packages/@react-spectrum/s2/style/style-macro.ts b/packages/@react-spectrum/s2/style/style-macro.ts
index 292716b145d..53d823dbf4f 100644
--- a/packages/@react-spectrum/s2/style/style-macro.ts
+++ b/packages/@react-spectrum/s2/style/style-macro.ts
@@ -69,7 +69,24 @@ export class ColorProperty<C extends string> extends MappedProperty<C> implement
   }
 }
 
-export class SizingProperty<T extends CSSValue> extends MappedProperty<T> implements Property<T | number> {
+export type LengthPercentageUnit = '%' | 'vw' | 'svw' | 'dvw' | 'vh' | 'svh' | 'dvh' | 'vmin' | 'svmin' | 'dvmin' | 'vmax' | 'svmax' | 'dvmax' | 'cqw' | 'cqh' | 'cqmin' | 'cqmax';
+export type LengthPercentage = `${number}${LengthPercentageUnit}`;
+
+export class PercentageProperty<T extends CSSValue> extends MappedProperty<T> implements Property<T | LengthPercentage> {
+  constructor(property: string, mapping: PropertyValueMap<T> | string[]) {
+    super(property, mapping);
+  }
+
+  toCSSValue(value: T | LengthPercentage): PropertyValueDefinition<Value> {
+    if (typeof value === 'string' && /^-?\d+(?:\.\d+)?(%|vw|svw|dvw|vh|svh|dvh|vmin|svmin|dvmin|vmax|svmax|dvmax|cqw|cqh|cqmin|cqmax)$/.test(value)) {
+      return value;
+    }
+
+    return super.toCSSValue(value as T);
+  }
+}
+
+export class SizingProperty<T extends CSSValue> extends PercentageProperty<T> implements Property<T | number | LengthPercentage> {
   numberToCSS: (value: number) => string;
 
   constructor(property: string, mapping: PropertyValueMap<T> | string[], numberToCSS: (value: number) => string) {
@@ -77,7 +94,7 @@ export class SizingProperty<T extends CSSValue> extends MappedProperty<T> implem
     this.numberToCSS = numberToCSS;
   }
 
-  toCSSValue(value: T | number): PropertyValueDefinition<Value> {
+  toCSSValue(value: T | LengthPercentage | number): PropertyValueDefinition<Value> {
     if (typeof value === 'number') {
       return value === 0 ? '0px' : this.numberToCSS(value);
     }
@@ -88,13 +105,19 @@ export class SizingProperty<T extends CSSValue> extends MappedProperty<T> implem
 
 export class ExpandedProperty<T extends Value> implements Property<T> {
   cssProperties: string[];
-  mapping: PropertyValueMap<CSSValue> | null;
+  mapping: Property<T> | null;
   expand: (v: T | CSSValue) => CSSProperties;
 
-  constructor(properties: string[], expand: (v: T | CSSValue) => CSSProperties, mapping?: PropertyValueMap<CSSValue>) {
+  constructor(properties: string[], expand: (v: T | CSSValue) => CSSProperties, mapping?: Property<T> | PropertyValueMap<CSSValue>) {
     this.cssProperties = properties;
     this.expand = expand;
-    this.mapping = mapping || null;
+    if (mapping instanceof MappedProperty) {
+      this.mapping = mapping;
+    } else if (mapping) {
+      this.mapping = new MappedProperty<any>(properties[0], mapping as any);
+    } else {
+      this.mapping = null;
+    }
   }
 
   toCSSValue(value: T): PropertyValueDefinition<Value> {
@@ -102,11 +125,7 @@ export class ExpandedProperty<T extends Value> implements Property<T> {
       return value;
     }
 
-    let res = this.mapping[String(value)];
-    if (res == null) {
-      throw new Error('Invalid style value: ' + value);
-    }
-    return res;
+    return this.mapping.toCSSValue(value);
   }
 
   toCSSProperties(customProperty: string | null, value: PropertyValueDefinition<T>): PropertyValueDefinition<[CSSProperties]> {
@@ -150,6 +169,13 @@ export function parseArbitraryValue(value: Value): string | undefined {
     return `var(${value})`;
   } else if (typeof value === 'string' && value[0] === '[' && value[value.length - 1] === ']') {
     return value.slice(1, -1);
+  } else if (
+    typeof value === 'string' && (
+      /^(var|calc|min|max|clamp|round|mod|rem|sin|cos|tan|asin|acos|atan|atan2|pow|sqrt|hypot|log|exp|abs|sign)\(.+\)$/.test(value) || 
+      /^(inherit|initial|unset)$/.test(value)
+    )
+  ) {
+    return value;
   }
 }
 
@@ -280,6 +306,11 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
         let shorthand = theme.shorthands[property];
         let props = Array.isArray(shorthand) ? shorthand : [property];
         for (let property of props) {
+          if (property.startsWith('--')) {
+            allowedOverridesSet.add(property);
+            continue;
+          }
+          
           let prop = properties.get(property);
           if (!prop) {
             throw new Error(`Invalid property ${property} in allowedOverrides`);
@@ -302,6 +333,11 @@ export function createTheme<T extends Theme>(theme: T): StyleFunction<ThemePrope
               loop += `  if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
             }
           }
+        } else if (property.startsWith('--') && allowedOverridesSet.has(property)) {
+          let selector = classNamePrefix(property, property);
+          let p = property.replace('--', '__');
+          js += `let ${p} = false;\n`;
+          loop += `  if (p[1] === ${JSON.stringify(selector)}) ${p} = true;\n`;
         }
       }
 
diff --git a/packages/@react-spectrum/s2/style/tokens.ts b/packages/@react-spectrum/s2/style/tokens.ts
index f315f040caa..b1b44261ed9 100644
--- a/packages/@react-spectrum/s2/style/tokens.ts
+++ b/packages/@react-spectrum/s2/style/tokens.ts
@@ -18,14 +18,49 @@ export function getToken(name: keyof typeof tokens): string {
   return (tokens[name] as any).value;
 }
 
-export function colorToken(name: keyof typeof tokens): string {
+export interface ColorToken {
+  type: 'color',
+  light: string,
+  dark: string,
+  forcedColors?: string
+}
+
+export function colorToken(name: keyof typeof tokens): ColorToken | ColorRef {
+  let token = tokens[name] as typeof tokens['gray-25'] | typeof tokens['neutral-content-color-default'];
+  if ('ref' in token) {
+    return {
+      type: 'ref',
+      light: token.ref.slice(1, -1).replace('-color', ''),
+      dark: token.ref.slice(1, -1).replace('-color', '')
+    };
+  }
+
+  return {
+    type: 'color',
+    light: token.sets.light.value,
+    dark: token.sets.dark.value
+  };
+}
+
+export function rawColorToken(name: keyof typeof tokens): string {
   let token = tokens[name] as typeof tokens['gray-25'];
   return `light-dark(${token.sets.light.value}, ${token.sets.dark.value})`;
 }
 
-export function weirdColorToken(name: keyof typeof tokens): string {
+export interface ColorRef {
+  type: 'ref',
+  light: string,
+  dark: string,
+  forcedColors?: string
+}
+
+export function weirdColorToken(name: keyof typeof tokens): ColorRef {
   let token = tokens[name] as typeof tokens['accent-background-color-default'];
-  return `light-dark(${token.sets.light.sets.light.value}, ${token.sets.dark.sets.dark.value})`;
+  return {
+    type: 'ref',
+    light: token.sets.light.ref.slice(1, -1).replace('-color', ''),
+    dark: token.sets.dark.ref.slice(1, -1).replace('-color', '')
+  };
 }
 
 type ReplaceColor<S extends string> = S extends `${infer S}-color-${infer N}` ? `${S}-${N}` : S;
diff --git a/packages/@react-spectrum/s2/style/types.ts b/packages/@react-spectrum/s2/style/types.ts
index b9309bd5968..002429f50e2 100644
--- a/packages/@react-spectrum/s2/style/types.ts
+++ b/packages/@react-spectrum/s2/style/types.ts
@@ -54,7 +54,9 @@ type PropertyValue<T> =
         ? T[number]
         : never;
 
-export type ArbitraryValue = CustomProperty | `[${string}]`;
+type FunctionName = 'var' | 'calc' | 'min' | 'max' | 'clamp' | 'round' | 'mod' | 'rem' | 'sin' | 'cos' | 'tan' | 'asin' | 'acos' | 'atan' | 'atan2' | 'pow' | 'sqrt' | 'hypot' | 'log' | 'exp' | 'abs' | 'sign';
+type CSSWideKeyword = 'inherit' | 'initial' | 'unset';
+export type ArbitraryValue = CustomProperty | `[${string}]` | `${FunctionName}(${string})` | CSSWideKeyword;
 type PropertyValue2<T> = PropertyValue<T> | ArbitraryValue;
 type Merge<T> = T extends any ? T : never;
 type ShorthandValue<T extends Theme, P> = 
diff --git a/packages/@react-spectrum/s2/ui-icons/Add.tsx b/packages/@react-spectrum/s2/ui-icons/Add.tsx
index 9d10f5e9faa..0f26656fa60 100644
--- a/packages/@react-spectrum/s2/ui-icons/Add.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Add.tsx
@@ -16,19 +16,41 @@ import Add_S from './S2_AddSize75.svg';
 import Add_XL from './S2_AddSize300.svg';
 import Add_XS from './S2_AddSize50.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8
+    }
+  }
+});
 
 export default function Add(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Add_M {...otherProps} />;
+      return <Add_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Add_L {...otherProps} />;
+      return <Add_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Add_XL {...otherProps} />;
+      return <Add_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XS':
-      return <Add_XS {...otherProps} />;
+      return <Add_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <Add_S {...otherProps} />;
+      return <Add_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Arrow.tsx b/packages/@react-spectrum/s2/ui-icons/Arrow.tsx
index 2c70997cb03..68d07390770 100644
--- a/packages/@react-spectrum/s2/ui-icons/Arrow.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Arrow.tsx
@@ -13,13 +13,29 @@
 import Arrow_M from './S2_ArrowSize100.svg';
 import Arrow_XXL from './S2_ArrowSize400.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      XXL: 16
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      XXL: 16
+    }
+  }
+});
 
 export default function Arrow(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'XXL'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Arrow_M {...otherProps} />;
+      return <Arrow_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXL':
-      return <Arrow_XXL {...otherProps} />;
+      return <Arrow_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Asterisk.tsx b/packages/@react-spectrum/s2/ui-icons/Asterisk.tsx
index 5e1eb01d265..ef4f73cfb2a 100644
--- a/packages/@react-spectrum/s2/ui-icons/Asterisk.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Asterisk.tsx
@@ -14,15 +14,33 @@ import Asterisk_L from './S2_AsteriskSize200.svg';
 import Asterisk_M from './S2_AsteriskSize100.svg';
 import Asterisk_XL from './S2_AsteriskSize300.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 10
+    }
+  },
+  height: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 10
+    }
+  }
+});
 
 export default function Asterisk(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Asterisk_M {...otherProps} />;
+      return <Asterisk_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Asterisk_L {...otherProps} />;
+      return <Asterisk_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Asterisk_XL {...otherProps} />;
+      return <Asterisk_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Checkmark.tsx b/packages/@react-spectrum/s2/ui-icons/Checkmark.tsx
index 77f750701ba..c5e0d45f511 100644
--- a/packages/@react-spectrum/s2/ui-icons/Checkmark.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Checkmark.tsx
@@ -17,21 +17,45 @@ import Checkmark_XL from './S2_CheckmarkSize300.svg';
 import Checkmark_XS from './S2_CheckmarkSize50.svg';
 import Checkmark_XXL from './S2_CheckmarkSize400.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 10,
+      S: 10
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 10,
+      S: 10
+    }
+  }
+});
 
 export default function Checkmark(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XS' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Checkmark_M {...otherProps} />;
+      return <Checkmark_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Checkmark_L {...otherProps} />;
+      return <Checkmark_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Checkmark_XL {...otherProps} />;
+      return <Checkmark_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXL':
-      return <Checkmark_XXL {...otherProps} />;
+      return <Checkmark_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XS':
-      return <Checkmark_XS {...otherProps} />;
+      return <Checkmark_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <Checkmark_S {...otherProps} />;
+      return <Checkmark_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Chevron.tsx b/packages/@react-spectrum/s2/ui-icons/Chevron.tsx
index eb55bc58765..c79861c766e 100644
--- a/packages/@react-spectrum/s2/ui-icons/Chevron.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Chevron.tsx
@@ -17,21 +17,45 @@ import Chevron_XL from './S2_ChevronSize300.svg';
 import Chevron_XS from './S2_ChevronSize50.svg';
 import Chevron_XXL from './S2_ChevronSize400.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16,
+      XS: 6,
+      S: 10
+    }
+  }
+});
 
 export default function Chevron(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XS' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Chevron_M {...otherProps} />;
+      return <Chevron_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Chevron_L {...otherProps} />;
+      return <Chevron_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Chevron_XL {...otherProps} />;
+      return <Chevron_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXL':
-      return <Chevron_XXL {...otherProps} />;
+      return <Chevron_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XS':
-      return <Chevron_XS {...otherProps} />;
+      return <Chevron_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <Chevron_S {...otherProps} />;
+      return <Chevron_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/CornerTriangle.tsx b/packages/@react-spectrum/s2/ui-icons/CornerTriangle.tsx
index 3076dace2c4..15f12d808f5 100644
--- a/packages/@react-spectrum/s2/ui-icons/CornerTriangle.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/CornerTriangle.tsx
@@ -15,17 +15,37 @@ import CornerTriangle_M from './S2_CornerTriangleSize100.svg';
 import CornerTriangle_S from './S2_CornerTriangleSize75.svg';
 import CornerTriangle_XL from './S2_CornerTriangleSize300.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 5,
+      L: 6,
+      XL: 7,
+      S: 5
+    }
+  },
+  height: {
+    size: {
+      M: 5,
+      L: 6,
+      XL: 7,
+      S: 5
+    }
+  }
+});
 
 export default function CornerTriangle(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <CornerTriangle_M {...otherProps} />;
+      return <CornerTriangle_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <CornerTriangle_L {...otherProps} />;
+      return <CornerTriangle_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <CornerTriangle_XL {...otherProps} />;
+      return <CornerTriangle_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <CornerTriangle_S {...otherProps} />;
+      return <CornerTriangle_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Cross.tsx b/packages/@react-spectrum/s2/ui-icons/Cross.tsx
index 741046e5f6b..fb1048bb422 100644
--- a/packages/@react-spectrum/s2/ui-icons/Cross.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Cross.tsx
@@ -18,23 +18,49 @@ import Cross_XXL from './S2_CrossSize400.svg';
 import Cross_XXXL from './S2_CrossSize500.svg';
 import Cross_XXXXL from './S2_CrossSize600.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  },
+  height: {
+    size: {
+      M: 8,
+      L: 10,
+      XL: 12,
+      XXL: 12,
+      XXXL: 14,
+      XXXXL: 16,
+      S: 8
+    }
+  }
+});
 
 export default function Cross(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Cross_M {...otherProps} />;
+      return <Cross_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Cross_L {...otherProps} />;
+      return <Cross_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Cross_XL {...otherProps} />;
+      return <Cross_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXL':
-      return <Cross_XXL {...otherProps} />;
+      return <Cross_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXXL':
-      return <Cross_XXXL {...otherProps} />;
+      return <Cross_XXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXXXL':
-      return <Cross_XXXXL {...otherProps} />;
+      return <Cross_XXXXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <Cross_S {...otherProps} />;
+      return <Cross_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Dash.tsx b/packages/@react-spectrum/s2/ui-icons/Dash.tsx
index 901b6e928c4..2195674d06f 100644
--- a/packages/@react-spectrum/s2/ui-icons/Dash.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Dash.tsx
@@ -16,19 +16,41 @@ import Dash_S from './S2_DashSize75.svg';
 import Dash_XL from './S2_DashSize300.svg';
 import Dash_XS from './S2_DashSize50.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 12,
+      XS: 8,
+      S: 8
+    }
+  }
+});
 
 export default function Dash(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Dash_M {...otherProps} />;
+      return <Dash_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <Dash_L {...otherProps} />;
+      return <Dash_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <Dash_XL {...otherProps} />;
+      return <Dash_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XS':
-      return <Dash_XS {...otherProps} />;
+      return <Dash_XS {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <Dash_S {...otherProps} />;
+      return <Dash_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/DragHandle.tsx b/packages/@react-spectrum/s2/ui-icons/DragHandle.tsx
index 163c2f6c925..4dc59f61d94 100644
--- a/packages/@react-spectrum/s2/ui-icons/DragHandle.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/DragHandle.tsx
@@ -15,17 +15,37 @@ import DragHandle_M from './S2_DragHandleSize100.svg';
 import DragHandle_S from './S2_DragHandleSize75.svg';
 import DragHandle_XL from './S2_DragHandleSize300.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      S: 10
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      S: 10
+    }
+  }
+});
 
 export default function DragHandle(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'S'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <DragHandle_M {...otherProps} />;
+      return <DragHandle_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <DragHandle_L {...otherProps} />;
+      return <DragHandle_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <DragHandle_XL {...otherProps} />;
+      return <DragHandle_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'S':
-      return <DragHandle_S {...otherProps} />;
+      return <DragHandle_S {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/Gripper.tsx b/packages/@react-spectrum/s2/ui-icons/Gripper.tsx
index 1c93a29bc0d..dbd4340b7ce 100644
--- a/packages/@react-spectrum/s2/ui-icons/Gripper.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/Gripper.tsx
@@ -12,11 +12,25 @@
 
 import Gripper_M from './S2_GripperSize100.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 24
+    }
+  },
+  height: {
+    size: {
+      M: 4
+    }
+  }
+});
 
 export default function Gripper(props: SVGProps<SVGSVGElement> & {size?: 'M'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <Gripper_M {...otherProps} />;
+      return <Gripper_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/@react-spectrum/s2/ui-icons/LinkOut.tsx b/packages/@react-spectrum/s2/ui-icons/LinkOut.tsx
index 0ccf684bdf8..e8f99804e1b 100644
--- a/packages/@react-spectrum/s2/ui-icons/LinkOut.tsx
+++ b/packages/@react-spectrum/s2/ui-icons/LinkOut.tsx
@@ -15,17 +15,37 @@ import LinkOut_M from './S2_LinkOutSize100.svg';
 import LinkOut_XL from './S2_LinkOutSize300.svg';
 import LinkOut_XXL from './S2_LinkOutSize400.svg';
 import {ReactNode, SVGProps} from 'react';
+import {style} from '../style' with {type: 'macro'};
+
+let styles = style({
+  width: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16
+    }
+  },
+  height: {
+    size: {
+      M: 10,
+      L: 12,
+      XL: 14,
+      XXL: 16
+    }
+  }
+});
 
 export default function LinkOut(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL'}): ReactNode {
   let {size = 'M', ...otherProps} = props;
   switch (size) {
     case 'M':
-      return <LinkOut_M {...otherProps} />;
+      return <LinkOut_M {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'L':
-      return <LinkOut_L {...otherProps} />;
+      return <LinkOut_L {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XL':
-      return <LinkOut_XL {...otherProps} />;
+      return <LinkOut_XL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
     case 'XXL':
-      return <LinkOut_XXL {...otherProps} />;
+      return <LinkOut_XXL {...otherProps} className={(otherProps.className || '') + styles({size})} />;
   }
 }
diff --git a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
index de3cb53e01b..94835e06a85 100644
--- a/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
+++ b/packages/dev/parcel-transformer-s2-icon/IconTransformer.js
@@ -80,14 +80,14 @@ module.exports = new Transformer({
 
 function template(asset, svg) {
   let normalizedPath = asset.filePath.replaceAll('\\', '/');
-  let context = asset.pipeline === 'illustration' || normalizedPath.includes('@react-spectrum/s2/spectrum-illustrations') ? 'IllustrationContext' : 'IconContext';
+  let fn = asset.pipeline === 'illustration' || normalizedPath.includes('@react-spectrum/s2/spectrum-illustrations') ? 'createIllustration' : 'createIcon';
   return (
 `
-import {createIcon, ${context}} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
+import {${fn}} from '${normalizedPath.includes('@react-spectrum/s2') ? '~/src/Icon' : '@react-spectrum/s2'}';
 
 ${svg.replace('import { SVGProps } from "react";', '')}
 
-export default /*#__PURE__*/ createIcon(ForwardRef, ${context});
+export default /*#__PURE__*/ ${fn}(ForwardRef);
 `
   );
 }
diff --git a/scripts/generateS2IconIndex.js b/scripts/generateS2IconIndex.js
index e6dc1884f5c..a7af51f6e37 100644
--- a/scripts/generateS2IconIndex.js
+++ b/scripts/generateS2IconIndex.js
@@ -12,6 +12,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const {JSDOM} = require('jsdom');
 
 // This script generates the "index" wrapper components for UI icons and illustrations that have multiple sizes.
 generate('packages/@react-spectrum/s2/ui-icons');
@@ -52,12 +53,20 @@ function generate(dir) {
       if (!icons.has(name)) {
         icons.set(name, {});
       }
-      icons.get(name)[sizes[size]] = fileName;
+      let width = '0', height = '0';
+      if (!dir.includes('spectrum-illustrations')) {
+        let contents = fs.readFileSync(file, 'utf8');
+        let dom = new JSDOM(contents);
+        let svg = dom.window.document.querySelector('svg');
+        width = svg.getAttribute('width');
+        height = svg.getAttribute('height');
+      }
+      icons.get(name)[sizes[size]] = {fileName, width, height};
     }
   }
 
   let relative = path.relative(dir, 'packages/@react-spectrum/s2/src/Icon');
-  let typeImport = dir.includes('ui-icons') ? "import {SVGProps} from 'react';" : `import {IconProps, IllustrationContext} from '${relative}';`;
+  let typeImport = dir.includes('ui-icons') ? "import {ReactNode, SVGProps} from 'react';" : `import {IconProps, IllustrationContext} from '${relative}';`;
   let ctx = dir.includes('spectrum-illustrations') ? '[props] = useContextProps(props, null, IllustrationContext);\n  ' : '';
   let type = dir.includes('ui-icons') ? 'SVGProps<SVGSVGElement>' : 'IconProps';
   let isIllustration =  dir.includes('spectrum-illustrations');
@@ -83,23 +92,43 @@ function generate(dir) {
 
     let imports = [typeImport];
     for (let size in sizes) {
-      imports.push(`import ${importName}_${size} from '${isIllustration ? 'illustration:' : ''}./${sizes[size]}';`);
+      imports.push(`import ${importName}_${size} from '${isIllustration ? 'illustration:' : ''}./${sizes[size].fileName}';`);
     }
     if (ctx) {
       imports.push("import {useContextProps} from 'react-aria-components';");
     }
+    if (!isIllustration) {
+      imports.push("import {style} from '../style' with {type: 'macro'};");
+    }
     src += imports.sort((a, b) => {
       let a1 = a[7] === '{' ? a.slice(8).toLowerCase() : a.slice(7).toLowerCase();
       let b1 = b[7] === '{' ? b.slice(8).toLowerCase() : b.slice(7).toLowerCase();
       return a1 < b1 ? -1 : 1;
     }).join('\n') + '\n';
 
+    if (!isIllustration) {
+      src += `
+let styles = style({
+  width: {
+    size: {
+      ${Object.keys(sizes).map(s => `${s}: ${sizes[s].width}`).join(',\n      ')}
+    }
+  },
+  height: {
+    size: {
+      ${Object.keys(sizes).map(s => `${s}: ${sizes[s].height}`).join(',\n      ')}
+    }
+  }
+});
+`;
+    }
+
     src += `
-export default function ${importName}(props: ${type} & {size?: ${Object.keys(sizes).map(s => `'${s}'`).join(' | ')}}) {
+export default function ${importName}(props: ${type} & {size?: ${Object.keys(sizes).map(s => `'${s}'`).join(' | ')}})${isIllustration ? '' : ': ReactNode'} {
   ${ctx}let {size = 'M', ...otherProps} = props;
   switch (size) {${Object.keys(sizes).map(size => `
     case '${size}':
-      return <${importName}_${size} {...otherProps} />;`
+      return <${importName}_${size} {...otherProps}${isIllustration ? '' : " className={(otherProps.className || '') + styles({size})}"} />;`
     ).join('')}
   }
 }

From 72fabca29a7726df5589c9bf22babb6c0d41c37f Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 7 May 2025 15:33:06 -0700
Subject: [PATCH 20/24] chore: Update to Node 20 (#6385)

* Update to Node 22

* go to node 20 instead

* fix formatting test

* run verdaccio build

* turn off verdaccio build

* try limiting concurrent tests

* try to debug on ci where error happens more

* keep debugging

* try a longer timeout

* remove debugging

* turn on verdaccio build

* fix lint

* update yarn lock

* fix verdaccio and tsdiffer

* fix node corepack

* fix forkpoint

* try to fix buildWebsite

* turn verdaccio build back off

* fix rebase

* turn on verdaccio on CI

* turn off verdaccio again and remove concurrency restriction

* turn back on verdaccio

* fix spectrum-css local builder

* remove obselete patch

* fix lint and flakey ssr

* remove verdaccio

* update to latest node 20

* remove leftovers
---
 .circleci/config.yml                          |    6 +-
 .github/actions/branch/action.yml             |    2 +-
 .github/actions/comment/action.yml            |    2 +-
 .github/actions/permissions/action.yml        |    2 +-
 .nvmrc                                        |    2 +-
 examples/remix/package.json                   |    2 +-
 package.json                                  |    4 +-
 .../css/lib/varUtils.js                       |  149 +
 .../postcss-custom-properties-mapping.js      |   75 +
 .../postcss-custom-properties-passthrough.js  |   28 +
 .../css/processors.js                         |  132 +
 .../spectrum-css-builder-temp/package.json    |   29 +
 .../number/src/NumberParser.ts                |   13 +
 .../labeledvalue/test/LabeledValue.test.js    |    2 +-
 ...spectrum-css+component-builder+1.0.1.patch |  313 --
 scripts/buildBranchAPI.js                     |    9 +
 scripts/buildPublishedAPI.js                  |    3 +
 scripts/buildWebsite.js                       |    6 +-
 yarn.config.cjs                               |    6 +-
 yarn.lock                                     | 3531 +++--------------
 20 files changed, 981 insertions(+), 3335 deletions(-)
 create mode 100644 packages/@adobe/spectrum-css-builder-temp/css/lib/varUtils.js
 create mode 100644 packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-mapping.js
 create mode 100644 packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-passthrough.js
 create mode 100644 packages/@adobe/spectrum-css-builder-temp/css/processors.js
 create mode 100644 packages/@adobe/spectrum-css-builder-temp/package.json
 delete mode 100644 patches/@spectrum-css+component-builder+1.0.1.patch

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9e182eb8fb8..652fd650031 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -19,14 +19,14 @@ orbs:
 executors:
   rsp:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     environment:
       CACHE_VERSION: v1
     working_directory: ~/react-spectrum
 
   rsp-large:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     resource_class: large
     environment:
       CACHE_VERSION: v1
@@ -34,7 +34,7 @@ executors:
 
   rsp-xlarge:
     docker:
-      - image: cimg/node:18.20.3
+      - image: cimg/node:20.18.2
     resource_class: xlarge
     environment:
       CACHE_VERSION: v1
diff --git a/.github/actions/branch/action.yml b/.github/actions/branch/action.yml
index dbe062364e3..52fb16a7f3b 100644
--- a/.github/actions/branch/action.yml
+++ b/.github/actions/branch/action.yml
@@ -1,5 +1,5 @@
 name: 'Branch from fork'
 description: 'creates a branch based off PR from fork'
 runs:
-  using: 'node18'
+  using: 'node20'
   main: 'index.js'
diff --git a/.github/actions/comment/action.yml b/.github/actions/comment/action.yml
index 955eba1aedd..e99e408e8b4 100644
--- a/.github/actions/comment/action.yml
+++ b/.github/actions/comment/action.yml
@@ -1,5 +1,5 @@
 name: 'PR Comment'
 description: 'Comment on the PR attached to a commit'
 runs:
-  using: 'node12'
+  using: 'node20'
   main: 'index.js'
diff --git a/.github/actions/permissions/action.yml b/.github/actions/permissions/action.yml
index 81667bae21a..c807623a0b2 100644
--- a/.github/actions/permissions/action.yml
+++ b/.github/actions/permissions/action.yml
@@ -1,5 +1,5 @@
 name: 'Check permissions'
 description: 'Checks if commentor has write access or above'
 runs:
-  using: 'node18'
+  using: 'node20'
   main: 'index.js'
diff --git a/.nvmrc b/.nvmrc
index 20be6fc3369..e6a178735bc 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.*
+20.*
diff --git a/examples/remix/package.json b/examples/remix/package.json
index 6c49d3084d4..bc415fa05fe 100644
--- a/examples/remix/package.json
+++ b/examples/remix/package.json
@@ -30,7 +30,7 @@
     "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "workspaces": [
     "../../packages/react-aria-components",
diff --git a/package.json b/package.json
index 9a4d516a881..599528be75d 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "test-storybook": "test-storybook --url http://localhost:9003  --browsers chromium --no-cache",
     "test:docs": "yarn playwright install && node scripts/testDocs.js",
     "build": "make build",
-    "test:ssr": "cross-env STRICT_MODE=1 yarn jest --config jest.ssr.config.js",
+    "test:ssr": "cross-env STRICT_MODE=1 yarn jest --runInBand --config jest.ssr.config.js",
     "ci-test": "cross-env STRICT_MODE=1 yarn jest --maxWorkers=2 && cross-env STRICT_MODE=1 yarn test:ssr --runInBand",
     "lint": "concurrently \"yarn check-types\" \"eslint packages\" \"node scripts/lint-packages.js\" \"yarn constraints\"",
     "jest": "jest",
@@ -101,7 +101,7 @@
     "@parcel/transformer-svg-react": "^2.14.0",
     "@parcel/transformer-typescript-types": "^2.14.0",
     "@react-spectrum/s2-icon-builder": "^0.2.0",
-    "@spectrum-css/component-builder": "1.0.1",
+    "@spectrum-css/component-builder": "workspace:^",
     "@spectrum-css/vars": "^2.3.0",
     "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch",
     "@storybook/addon-actions": "^7.6.19",
diff --git a/packages/@adobe/spectrum-css-builder-temp/css/lib/varUtils.js b/packages/@adobe/spectrum-css-builder-temp/css/lib/varUtils.js
new file mode 100644
index 00000000000..95ee3f4a9d6
--- /dev/null
+++ b/packages/@adobe/spectrum-css-builder-temp/css/lib/varUtils.js
@@ -0,0 +1,149 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const gulp = require('gulp');
+const postcss = require('postcss');
+const concat = require('gulp-concat');
+const through = require('through2');
+const fsp = require('fs').promises;
+const logger = require('gulplog');
+const path = require('path');
+
+function getVarsFromCSS(css) {
+  let variableList = [];
+  let root = postcss.parse(css);
+
+  root.walkRules((rule, ruleIndex) => {
+    rule.walkDecls((decl) => {
+      let matches = decl.value.match(/var\(.*?\)/g);
+      if (matches) {
+        matches.forEach(function (match) {
+          let varName = match.replace(/var\((--[\w-]+),?.*?\)/, '$1').trim();
+          if (variableList.indexOf(varName) === -1) {
+            variableList.push(varName);
+          }
+        });
+      }
+    });
+  });
+  return variableList;
+}
+
+function getVarValues(css) {
+  let root = postcss.parse(css);
+  let variables = {};
+
+  root.walkRules((rule, ruleIndex) => {
+    rule.walkDecls((decl) => {
+      variables[decl.prop] = decl.value;
+    });
+  });
+
+  return variables;
+}
+
+function getClassNames(contents, pkgName) {
+  let classNames = [];
+
+  if (classNames.length === 0) {
+    logger.error(`Could not find classNames for ${pkgName}, assuming no classNames`);
+    classNames.push('');
+  }
+
+  logger.debug(`Found classNames ${classNames.join(', ')} for ${pkgName}`);
+
+  return classNames;
+}
+
+function resolveValue(value, vars) {
+  if (value) {
+    let match = value.match(/var\((.+),?.*?\)/);
+    if (match) {
+      return match[1];
+    }
+    return value;
+  }
+}
+
+const varDir = path.join(path.dirname(require.resolve('@spectrum-css/vars')), '..');
+
+async function readDNAVariables(file) {
+  let css = await fsp.readFile(path.join(varDir, 'css', file));
+  let vars = getVarValues(css);
+  return vars;
+}
+
+function getVariableDeclarations(classNames, vars) {
+  let varNames = Object.keys(vars);
+  if (varNames.length) {
+    return `
+${classNames.map((className) => `${className}`).join(',\n')} {
+${varNames.map((varName) => `  ${varName}: ${vars[varName]};`).join('\n')}
+}
+`;
+  }
+
+  return '';
+}
+
+function getAllVars() {
+  return new Promise((resolve, reject) => {
+    let variableList;
+
+    gulp.src([
+      `${varDir}/css/themes/*.css`,
+      `${varDir}/css/scales/*.css`,
+      `${varDir}/css/components/*.css`,
+      `${varDir}/css/globals/*.css`
+    ])
+      .pipe(concat('everything.css'))
+      .pipe(through.obj(function getAllVars(file, enc, cb) {
+        variableList = getVarValues(file.contents.toString());
+
+        cb(null, file);
+      }))
+      .on('finish', () => {
+        resolve(variableList);
+      })
+      .on('error', reject);
+  });
+}
+
+function getAllComponentVars() {
+  return new Promise((resolve, reject) => {
+    let variableList;
+
+    gulp.src([
+      `${varDir}/css/components/*.css`,
+      `${varDir}/css/globals/*.css`
+    ])
+      .pipe(concat('everything.css'))
+      .pipe(through.obj(function getAllVars(file, enc, cb) {
+        variableList = getVarValues(file.contents.toString());
+
+        cb(null, file);
+      }))
+      .on('finish', () => {
+        resolve(variableList);
+      })
+      .on('error', reject);
+  });
+}
+
+exports.getAllComponentVars = getAllComponentVars;
+exports.getAllVars = getAllVars;
+exports.getVarsFromCSS = getVarsFromCSS;
+exports.getVarValues = getVarValues;
+exports.getClassNames = getClassNames;
+exports.resolveValue = resolveValue;
+exports.readDNAVariables = readDNAVariables;
+exports.getVariableDeclarations = getVariableDeclarations;
diff --git a/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-mapping.js b/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-mapping.js
new file mode 100644
index 00000000000..e0db25489a7
--- /dev/null
+++ b/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-mapping.js
@@ -0,0 +1,75 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+var valueParser = require('postcss-value-parser');
+let varUtils = require('../lib/varUtils.js');
+
+// match custom property inclusions
+const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/;
+
+let staticVars;
+let allVars;
+async function fetchVars() {
+  if (staticVars && allVars) {
+    return true;
+  }
+
+  // Read in all static vars
+  staticVars = Object.assign(
+    {},
+    await varUtils.readDNAVariables('globals/spectrum-staticAliases.css'),
+    await varUtils.readDNAVariables('globals/spectrum-fontGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-fontGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-dimensionGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-colorGlobals.css'),
+    await varUtils.readDNAVariables('globals/spectrum-animationGlobals.css')
+  );
+
+  // Read in all variables so we have the value they resolve to
+  allVars = await varUtils.getAllComponentVars();
+
+  return true;
+}
+
+let fetchVarsPromise;
+module.exports = function () {
+  return {
+    postcssPlugin: 'postcss-custom-properties-mapping',
+    OnceExit: async function (root, result) {
+      fetchVarsPromise ??= fetchVars();
+      await fetchVarsPromise;
+
+      root.walkRules((rule, ruleIndex) => {
+        rule.walkDecls((decl) => {
+          if (customPropertiesRegExp.test(decl.value)) {
+            let value = valueParser(decl.value);
+
+            value.walk((node, index, nodes) => {
+              if (node.type === 'function' && node.value === 'var') {
+                let v = node.nodes[0].value;
+
+                // If the value is static, replace the variable with the value.
+                // Otherwise, change the variable name to the mapped name.
+                if (staticVars[v]) {
+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${staticVars[v]})`).nodes);
+                } else if (allVars[v]) {
+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${allVars[v]})`).nodes);
+                }
+              }
+            });
+
+            decl.value = value.toString();
+          }
+        });
+      });
+    }
+  };
+};
diff --git a/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-passthrough.js b/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-passthrough.js
new file mode 100644
index 00000000000..5287299a575
--- /dev/null
+++ b/packages/@adobe/spectrum-css-builder-temp/css/plugins/postcss-custom-properties-passthrough.js
@@ -0,0 +1,28 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+module.exports = function (opts) {
+  opts = opts || {};
+
+  return function (root, result) {
+    root.walkRules((rule, ruleIndex) => {
+      rule.walkDecls((decl) => {
+        if (decl.value.match('xvar(.*?)')) {
+          decl.value = decl.value.substr(1);
+        }
+        if (decl.prop.substr(0, 3) === 'x--') {
+          decl.prop = decl.prop.substr(1);
+        }
+      });
+    });
+  };
+};
diff --git a/packages/@adobe/spectrum-css-builder-temp/css/processors.js b/packages/@adobe/spectrum-css-builder-temp/css/processors.js
new file mode 100644
index 00000000000..2a6eb43c03e
--- /dev/null
+++ b/packages/@adobe/spectrum-css-builder-temp/css/processors.js
@@ -0,0 +1,132 @@
+/*
+Copyright 2019 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+function getProcessors(keepVars = false, notNested = true, secondNotNested = true) {
+  return [
+    require('postcss-import'),
+    // require('postcss-mixins')({
+    //   mixins: {
+    //     typography: function(mixin, name, tokenName, textTransformIgnore) {
+    //       if(!tokenName) {
+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+    //         tokenName = tokenName.replace('.spectrum--', '');
+    //       }
+    //       var output = '';
+    //       var propMap = {
+    //         'font-size': 'text-size',
+    //         'font-weight': 'text-font-weight',
+    //         'line-height': 'text-line-height',
+    //         'font-style': 'text-font-style',
+    //         'letter-spacing': 'text-letter-spacing',
+    //         'text-transform': 'text-transform',
+    //       };
+    //       function buildProperties (tokeString) {
+    //         var ruleString = '';
+    //         Object.keys(propMap).forEach((key) => {
+    //           if(!textTransformIgnore || key != 'text-transform') {
+    //             ruleString += `  ${key}: var(--spectrum-${tokeString}-${propMap[key]});\n`;
+    //           }
+    //         });
+    //         ruleString += '  margin-top: 0;\n  margin-bottom: 0;\n';
+    //         return ruleString;
+    //       }
+    //       output = `${name} {
+    //       ${buildProperties(tokenName)}
+    //         em {
+    //           ${buildProperties(`${tokenName}-emphasis`)}
+    //         }
+    //         strong {
+    //           ${buildProperties(`${tokenName}-strong`)}
+    //         }
+    //       }`;
+    //       var nodes = postcssReal.parse(output);
+    //       nodes.nodes[0].append(mixin.nodes);
+    //       mixin.replaceWith(nodes);
+    //     },
+    //     typographyColor: function(mixin, name, tokenName) {
+    //       if(!tokenName) {
+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+    //         tokenName = tokenName.replace('.spectrum--', '');
+    //       }
+    //       var output = `${name} {
+    //         color: var(--spectrum-${tokenName}-text-color);
+    //       }`;
+    //       var nodes = postcssReal.parse(output);
+    //       nodes.nodes[0].append(mixin.nodes);
+    //       mixin.replaceWith(nodes);
+    //     },
+    //     typographyMargins: function(mixin, name, tokenName) {
+    //       if(!tokenName) {
+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+    //         tokenName = tokenName.replace('.spectrum--', '');
+    //       }
+    //       var output = `${name} {
+    //         margin-top: var(--spectrum-${tokenName}-margin-top);
+    //         margin-bottom: var(--spectrum-${tokenName}-margin-bottom);
+    //       }`;
+    //       var nodes = postcssReal.parse(output);
+    //       nodes.nodes[0].append(mixin.nodes);
+    //       mixin.replaceWith(nodes);
+    //     },
+    //   }
+    // }),
+    // require('postcss-nested'),
+    // require('postcss-inherit'),
+    require('postcss-custom-properties')({
+      noValueNotifications: 'error',
+      warnings: !keepVars,
+      preserve: false
+    }),
+    require('./plugins/postcss-custom-properties-passthrough')(),
+    // require('postcss-calc'),
+    keepVars ? require('./plugins/postcss-custom-properties-mapping')() : null,
+    {
+      postcssPlugin: 'postcss-remove-root',
+      OnceExit(root) {
+        root.walkRules(rule => {
+          if (rule.selector === ':root') {
+            rule.remove();
+          }
+        });
+      }
+    }
+    // notNested ? require('./plugins/postcss-notnested')({ replace: '.spectrum' }) : null,
+    // require('postcss-svg'),
+    // require('postcss-functions')({
+    //   functions: {
+    //     noscale: function(value) {
+    //       return value.toString().toUpperCase();
+    //     },
+    //     percent: function(value) {
+    //       return parseInt(value, 10) / 100;
+    //     }
+    //   }
+    // }),
+    // require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }),
+    // require('postcss-focus-ring'),
+    // secondNotNested ? require('./plugins/postcss-notnested')() : null, // Second one to catch all stray &
+    // require('postcss-discard-empty'),
+    // require('autoprefixer')({
+    //   'browsers': [
+    //     'IE >= 10',
+    //     'last 2 Chrome versions',
+    //     'last 2 Firefox versions',
+    //     'last 2 Safari versions',
+    //     'last 2 iOS versions'
+    //   ]
+    // })
+  ].filter(Boolean);
+}
+
+exports.getProcessors = getProcessors;
+exports.processors = getProcessors(true);
+exports.legacyProcessors = getProcessors();
diff --git a/packages/@adobe/spectrum-css-builder-temp/package.json b/packages/@adobe/spectrum-css-builder-temp/package.json
new file mode 100644
index 00000000000..2b70736000a
--- /dev/null
+++ b/packages/@adobe/spectrum-css-builder-temp/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@spectrum-css/component-builder",
+  "private": true,
+  "version": "1.0.1",
+  "description": "The Spectrum CSS component builder",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@swc/helpers": "^0.5.0",
+    "gulp": "^5.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulplog": "^1.0.0",
+    "postcss": "^5.2.18",
+    "postcss-custom-properties": "^6.0.1",
+    "postcss-import": "^10.0.0",
+    "postcss-value-parser": "3.3.1",
+    "through2": "^3.0.1"
+  },
+  "rsp": {
+    "type": "cli"
+  },
+  "gitHead": "9b1c059b9e3c769334f8c6880e4a6a041fde1227"
+}
diff --git a/packages/@internationalized/number/src/NumberParser.ts b/packages/@internationalized/number/src/NumberParser.ts
index 6683f8ac017..2442fdbd4e4 100644
--- a/packages/@internationalized/number/src/NumberParser.ts
+++ b/packages/@internationalized/number/src/NumberParser.ts
@@ -108,6 +108,19 @@ class NumberParserImpl {
 
   constructor(locale: string, options: Intl.NumberFormatOptions = {}) {
     this.locale = locale;
+    // see https://tc39.es/ecma402/#sec-setnfdigitoptions, when using roundingIncrement, the maximumFractionDigits and minimumFractionDigits must be equal
+    // by default, they are 0 and 3 respectively, so we set them to 0 if neither are set
+    if (options.roundingIncrement !== 1 && options.roundingIncrement != null) {
+      if (options.maximumFractionDigits == null && options.minimumFractionDigits == null) {
+        options.maximumFractionDigits = 0;
+        options.minimumFractionDigits = 0;
+      } else if (options.maximumFractionDigits == null) {
+        options.maximumFractionDigits = options.minimumFractionDigits;
+      } else if (options.minimumFractionDigits == null) {
+        options.minimumFractionDigits = options.maximumFractionDigits;
+      }
+      // if both are specified, let the normal Range Error be thrown
+    }
     this.formatter = new Intl.NumberFormat(locale, options);
     this.options = this.formatter.resolvedOptions();
     this.symbols = getSymbols(locale, this.formatter, this.options, options);
diff --git a/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js b/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js
index 91ecb3b80f5..4a5d5061cb9 100644
--- a/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js
+++ b/packages/@react-spectrum/labeledvalue/test/LabeledValue.test.js
@@ -272,7 +272,7 @@ describe('LabeledValue', function () {
 
     let staticField = getByTestId('test-id');
     expect(staticField).toBeInTheDocument();
-    expect(staticField).toHaveTextContent('10 – 20');
+    expect(staticField).toHaveTextContent('Field label10–20');
   });
 
   it('renders correctly with ReactElement value', function () {
diff --git a/patches/@spectrum-css+component-builder+1.0.1.patch b/patches/@spectrum-css+component-builder+1.0.1.patch
deleted file mode 100644
index 50a46f3240a..00000000000
--- a/patches/@spectrum-css+component-builder+1.0.1.patch
+++ /dev/null
@@ -1,313 +0,0 @@
-diff --git a/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-mapping.js b/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-mapping.js
-index 0eb302e..c32614e 100644
---- a/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-mapping.js
-+++ b/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-mapping.js
-@@ -9,7 +9,6 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
- OF ANY KIND, either express or implied. See the License for the specific language
- governing permissions and limitations under the License.
- */
--var postcss = require('postcss');
- var valueParser = require('postcss-value-parser');
- let varUtils = require('../lib/varUtils.js');
- 
-@@ -40,33 +39,38 @@ async function fetchVars() {
-   return true;
- }
- 
--module.exports = postcss.plugin('postcss-custom-properties-mapping', function() {
--  return async function (root, result) {
--    await fetchVars();
-+let fetchVarsPromise;
-+module.exports = function() {
-+  return {
-+    postcssPlugin: 'postcss-custom-properties-mapping',
-+    OnceExit: async function (root, result) {
-+      fetchVarsPromise ??= fetchVars();
-+      await fetchVarsPromise;
- 
--    root.walkRules((rule, ruleIndex) => {
--      rule.walkDecls((decl) => {
--        if (customPropertiesRegExp.test(decl.value)) {
--          let value = valueParser(decl.value);
-+      root.walkRules((rule, ruleIndex) => {
-+        rule.walkDecls((decl) => {
-+          if (customPropertiesRegExp.test(decl.value)) {
-+            let value = valueParser(decl.value);
- 
--          value.walk((node, index, nodes) => {
--            if (node.type === 'function' && node.value === 'var') {
--              let v = node.nodes[0].value;
-+            value.walk((node, index, nodes) => {
-+              if (node.type === 'function' && node.value === 'var') {
-+                let v = node.nodes[0].value;
- 
--              // If the value is static, replace the variable with the value.
--              // Otherwise, change the variable name to the mapped name.
--              if (staticVars[v]) {
--                nodes.splice(index, 1, ...valueParser(`var(${v}, ${staticVars[v]})`).nodes);
-+                // If the value is static, replace the variable with the value.
-+                // Otherwise, change the variable name to the mapped name.
-+                if (staticVars[v]) {
-+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${staticVars[v]})`).nodes);
-+                }
-+                else if (allVars[v]) {
-+                  nodes.splice(index, 1, ...valueParser(`var(${v}, ${allVars[v]})`).nodes);
-+                }
-               }
--              else if (allVars[v]) {
--                nodes.splice(index, 1, ...valueParser(`var(${v}, ${allVars[v]})`).nodes);
--              }
--            }
--          });
-+            });
- 
--          decl.value = value.toString();
--        }
-+            decl.value = value.toString();
-+          }
-+        });
-       });
--    });
--  }
--});
-+    }
-+  };
-+};
-diff --git a/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-passthrough.js b/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-passthrough.js
-index 41ae55b..f506479 100644
---- a/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-passthrough.js
-+++ b/node_modules/@spectrum-css/component-builder/css/plugins/postcss-custom-properties-passthrough.js
-@@ -9,9 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
- OF ANY KIND, either express or implied. See the License for the specific language
- governing permissions and limitations under the License.
- */
--var postcss = require('postcss');
- 
--module.exports = postcss.plugin('postcss-custom-properties-passthrough', function (opts) {
-+module.exports = function (opts) {
-   opts = opts || {};
- 
-   return function (root, result) {
-@@ -26,4 +25,4 @@ module.exports = postcss.plugin('postcss-custom-properties-passthrough', functio
-       });
-     });
-   }
--});
-+};
-diff --git a/node_modules/@spectrum-css/component-builder/css/processors.js b/node_modules/@spectrum-css/component-builder/css/processors.js
-index 9556e04..4340802 100644
---- a/node_modules/@spectrum-css/component-builder/css/processors.js
-+++ b/node_modules/@spectrum-css/component-builder/css/processors.js
-@@ -15,106 +15,117 @@ const postcssReal = require('postcss');
- function getProcessors(keepVars = false, notNested = true, secondNotNested = true) {
-   return [
-     require('postcss-import'),
--    require('postcss-mixins')({
--      mixins: {
--        typography: function(mixin, name, tokenName, textTransformIgnore) {
--          if(!tokenName) {
--            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
--            tokenName = tokenName.replace('.spectrum--', '');
--          }
--          var output = '';
--          var propMap = {
--            'font-size': 'text-size',
--            'font-weight': 'text-font-weight',
--            'line-height': 'text-line-height',
--            'font-style': 'text-font-style',
--            'letter-spacing': 'text-letter-spacing',
--            'text-transform': 'text-transform',
--          };
--          function buildProperties (tokeString) {
--            var ruleString = '';
--            Object.keys(propMap).forEach((key) => {
--              if(!textTransformIgnore || key != 'text-transform') {
--                ruleString += `  ${key}: var(--spectrum-${tokeString}-${propMap[key]});\n`;
--              }
--            });
--            ruleString += '  margin-top: 0;\n  margin-bottom: 0;\n';
--            return ruleString;
--          }
--          output = `${name} {
--          ${buildProperties(tokenName)}
--            em {
--              ${buildProperties(`${tokenName}-emphasis`)}
--            }
--            strong {
--              ${buildProperties(`${tokenName}-strong`)}
--            }
--          }`;
--          var nodes = postcssReal.parse(output);
--          nodes.nodes[0].append(mixin.nodes);
--          mixin.replaceWith(nodes);
--        },
--        typographyColor: function(mixin, name, tokenName) {
--          if(!tokenName) {
--            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
--            tokenName = tokenName.replace('.spectrum--', '');
--          }
--          var output = `${name} {
--            color: var(--spectrum-${tokenName}-text-color);
--          }`;
--          var nodes = postcssReal.parse(output);
--          nodes.nodes[0].append(mixin.nodes);
--          mixin.replaceWith(nodes);
--        },
--        typographyMargins: function(mixin, name, tokenName) {
--          if(!tokenName) {
--            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
--            tokenName = tokenName.replace('.spectrum--', '');
--          }
--          var output = `${name} {
--            margin-top: var(--spectrum-${tokenName}-margin-top);
--            margin-bottom: var(--spectrum-${tokenName}-margin-bottom);
--          }`;
--          var nodes = postcssReal.parse(output);
--          nodes.nodes[0].append(mixin.nodes);
--          mixin.replaceWith(nodes);
--        },
--      }
--    }),
--    require('postcss-nested'),
--    require('postcss-inherit'),
-+    // require('postcss-mixins')({
-+    //   mixins: {
-+    //     typography: function(mixin, name, tokenName, textTransformIgnore) {
-+    //       if(!tokenName) {
-+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
-+    //         tokenName = tokenName.replace('.spectrum--', '');
-+    //       }
-+    //       var output = '';
-+    //       var propMap = {
-+    //         'font-size': 'text-size',
-+    //         'font-weight': 'text-font-weight',
-+    //         'line-height': 'text-line-height',
-+    //         'font-style': 'text-font-style',
-+    //         'letter-spacing': 'text-letter-spacing',
-+    //         'text-transform': 'text-transform',
-+    //       };
-+    //       function buildProperties (tokeString) {
-+    //         var ruleString = '';
-+    //         Object.keys(propMap).forEach((key) => {
-+    //           if(!textTransformIgnore || key != 'text-transform') {
-+    //             ruleString += `  ${key}: var(--spectrum-${tokeString}-${propMap[key]});\n`;
-+    //           }
-+    //         });
-+    //         ruleString += '  margin-top: 0;\n  margin-bottom: 0;\n';
-+    //         return ruleString;
-+    //       }
-+    //       output = `${name} {
-+    //       ${buildProperties(tokenName)}
-+    //         em {
-+    //           ${buildProperties(`${tokenName}-emphasis`)}
-+    //         }
-+    //         strong {
-+    //           ${buildProperties(`${tokenName}-strong`)}
-+    //         }
-+    //       }`;
-+    //       var nodes = postcssReal.parse(output);
-+    //       nodes.nodes[0].append(mixin.nodes);
-+    //       mixin.replaceWith(nodes);
-+    //     },
-+    //     typographyColor: function(mixin, name, tokenName) {
-+    //       if(!tokenName) {
-+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
-+    //         tokenName = tokenName.replace('.spectrum--', '');
-+    //       }
-+    //       var output = `${name} {
-+    //         color: var(--spectrum-${tokenName}-text-color);
-+    //       }`;
-+    //       var nodes = postcssReal.parse(output);
-+    //       nodes.nodes[0].append(mixin.nodes);
-+    //       mixin.replaceWith(nodes);
-+    //     },
-+    //     typographyMargins: function(mixin, name, tokenName) {
-+    //       if(!tokenName) {
-+    //         tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
-+    //         tokenName = tokenName.replace('.spectrum--', '');
-+    //       }
-+    //       var output = `${name} {
-+    //         margin-top: var(--spectrum-${tokenName}-margin-top);
-+    //         margin-bottom: var(--spectrum-${tokenName}-margin-bottom);
-+    //       }`;
-+    //       var nodes = postcssReal.parse(output);
-+    //       nodes.nodes[0].append(mixin.nodes);
-+    //       mixin.replaceWith(nodes);
-+    //     },
-+    //   }
-+    // }),
-+    // require('postcss-nested'),
-+    // require('postcss-inherit'),
-     require('postcss-custom-properties')({
-       noValueNotifications: 'error',
--      warnings: !keepVars
-+      warnings: !keepVars,
-+      preserve: false
-     }),
-     require('./plugins/postcss-custom-properties-passthrough')(),
--    require('postcss-calc'),
--    keepVars ? require('./plugins/postcss-custom-properties-mapping') : null,
--    notNested ? require('./plugins/postcss-notnested')({ replace: '.spectrum' }) : null,
--    require('postcss-svg'),
--    require('postcss-functions')({
--      functions: {
--        noscale: function(value) {
--          return value.toString().toUpperCase();
--        },
--        percent: function(value) {
--          return parseInt(value, 10) / 100;
--        }
-+    // require('postcss-calc'),
-+    keepVars ? require('./plugins/postcss-custom-properties-mapping')() : null,
-+    {
-+      postcssPlugin: 'postcss-remove-root',
-+      OnceExit(root) {
-+        root.walkRules(rule => {
-+          if (rule.selector === ':root') {
-+            rule.remove();
-+          }
-+        });
-       }
--    }),
--    require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }),
--    require('postcss-focus-ring'),
--    secondNotNested ? require('./plugins/postcss-notnested')() : null, // Second one to catch all stray &
--    require('postcss-discard-empty'),
--    require('autoprefixer')({
--      'browsers': [
--        'IE >= 10',
--        'last 2 Chrome versions',
--        'last 2 Firefox versions',
--        'last 2 Safari versions',
--        'last 2 iOS versions'
--      ]
--    })
-+    }
-+    // notNested ? require('./plugins/postcss-notnested')({ replace: '.spectrum' }) : null,
-+    // require('postcss-svg'),
-+    // require('postcss-functions')({
-+    //   functions: {
-+    //     noscale: function(value) {
-+    //       return value.toString().toUpperCase();
-+    //     },
-+    //     percent: function(value) {
-+    //       return parseInt(value, 10) / 100;
-+    //     }
-+    //   }
-+    // }),
-+    // require('./plugins/postcss-strip-comments')({ preserveTopdoc: false }),
-+    // require('postcss-focus-ring'),
-+    // secondNotNested ? require('./plugins/postcss-notnested')() : null, // Second one to catch all stray &
-+    // require('postcss-discard-empty'),
-+    // require('autoprefixer')({
-+    //   'browsers': [
-+    //     'IE >= 10',
-+    //     'last 2 Chrome versions',
-+    //     'last 2 Firefox versions',
-+    //     'last 2 Safari versions',
-+    //     'last 2 iOS versions'
-+    //   ]
-+    // })
-   ].filter(Boolean);
- }
- 
diff --git a/scripts/buildBranchAPI.js b/scripts/buildBranchAPI.js
index 3c48ba662e9..fc79ba27f9c 100644
--- a/scripts/buildBranchAPI.js
+++ b/scripts/buildBranchAPI.js
@@ -36,11 +36,14 @@ build().catch(err => {
  * This is run against the current branch by copying the current branch into a temporary directory and building there
  */
 async function build() {
+  let backupDir = tempy.directory();
   let archiveDir;
   if (argv.githash) {
     archiveDir = tempy.directory();
     console.log('checking out archive of', argv.githash, 'into', archiveDir);
     await run('sh', ['-c', `git archive ${argv.githash} | tar -x -C ${archiveDir}`], {stdio: 'inherit'});
+
+    await run('sh', ['-c', `git archive HEAD | tar -x -C ${backupDir}`], {stdio: 'inherit'});
   }
   let srcDir = archiveDir ?? path.join(__dirname, '..');
   let distDir = path.join(__dirname, '..', 'dist', argv.output ?? 'branch-api');
@@ -53,6 +56,7 @@ async function build() {
   // Generate a package.json containing just what we need to build the website
   let pkg = {
     name: 'rsp-website',
+    packageManager: "yarn@4.2.2",
     version: '0.0.0',
     private: true,
     workspaces: [
@@ -102,6 +106,11 @@ async function build() {
 
   // Copy necessary code and configuration over
   fs.copySync(path.join(srcDir, 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  try {
+    fs.copySync(path.join(srcDir, 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
+  } catch (e) {
+    fs.copySync(path.join(backupDir, 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
+  }
   fs.copySync(path.join(srcDir, 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(srcDir, 'lib'), path.join(dir, 'lib'));
   fs.copySync(path.join(srcDir, 'CONTRIBUTING.md'), path.join(dir, 'CONTRIBUTING.md'));
diff --git a/scripts/buildPublishedAPI.js b/scripts/buildPublishedAPI.js
index b60fb165f08..c7c0f75af18 100644
--- a/scripts/buildPublishedAPI.js
+++ b/scripts/buildPublishedAPI.js
@@ -46,6 +46,7 @@ async function build() {
   let pkg = {
     name: 'react-spectrum-monorepo',
     version: '0.0.0',
+    packageManager: "yarn@4.2.2",
     private: true,
     workspaces: [
       'packages/*/*'
@@ -79,6 +80,7 @@ async function build() {
   let cleanPkg = {
     name: 'react-spectrum-monorepo',
     version: '0.0.0',
+    packageManager: "yarn@4.2.2",
     private: true,
     workspaces: [
       'packages/*/*'
@@ -161,6 +163,7 @@ async function build() {
   fs.copySync(path.join(__dirname, '..', 'packages', 'dev'), path.join(dir, 'packages', 'dev'));
   fs.removeSync(path.join(dir, 'packages', 'dev', 'docs'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
   fs.copySync(path.join(__dirname, '..', '.parcelrc'), path.join(dir, '.parcelrc'));
   fs.copySync(path.join(__dirname, '..', 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(__dirname, '..', 'lib'), path.join(dir, 'lib'));
diff --git a/scripts/buildWebsite.js b/scripts/buildWebsite.js
index cf93f5e0b32..5051412549d 100644
--- a/scripts/buildWebsite.js
+++ b/scripts/buildWebsite.js
@@ -39,7 +39,8 @@ async function build() {
     workspaces: [
       'packages/@internationalized/string-compiler',
       'packages/dev/*',
-      'packages/@adobe/spectrum-css-temp'
+      'packages/@adobe/spectrum-css-temp',
+      'packages/@adobe/spectrum-css-builder-temp'
     ],
     packageManager: 'yarn@4.2.2',
     devDependencies: Object.fromEntries(
@@ -129,6 +130,7 @@ async function build() {
   fs.copySync(path.join(__dirname, '..', 'packages', 'dev'), path.join(dir, 'packages', 'dev'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@internationalized', 'string-compiler'), path.join(dir, 'packages', '@internationalized', 'string-compiler'));
   fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-temp'));
+  fs.copySync(path.join(__dirname, '..', 'packages', '@adobe', 'spectrum-css-builder-temp'), path.join(dir, 'packages', '@adobe', 'spectrum-css-builder-temp'));
   fs.copySync(path.join(__dirname, '..', '.parcelrc'), path.join(dir, '.parcelrc'));
   fs.copySync(path.join(__dirname, '..', 'postcss.config.js'), path.join(dir, 'postcss.config.js'));
   fs.copySync(path.join(__dirname, '..', 'lib'), path.join(dir, 'lib'));
@@ -152,7 +154,7 @@ async function build() {
   }
 
   // Only copy babel and parcel patches over
-  let patches = fs.readdirSync(path.join(__dirname, '..', 'patches')).filter(name => name.startsWith('@babel') || name.startsWith('@parcel') || name.startsWith('@spectrum-css') || name.startsWith('postcss'));
+  let patches = fs.readdirSync(path.join(__dirname, '..', 'patches')).filter(name => name.startsWith('@babel') || name.startsWith('@parcel') || name.startsWith('postcss'));
   for (let patch of patches) {
     fs.copySync(path.join(__dirname, '..', 'patches', patch), path.join(dir, 'patches', patch));
   }
diff --git a/yarn.config.cjs b/yarn.config.cjs
index f5a13b80d6e..76ab916e6ce 100644
--- a/yarn.config.cjs
+++ b/yarn.config.cjs
@@ -182,7 +182,11 @@ function enforceWorkspaceDependencies({Yarn}) {
 function enforceCSS({Yarn}) {
   for (const workspace of Yarn.workspaces()) {
     let name = workspace.ident;
-    if (!name.startsWith('@react-spectrum/docs') && !name.startsWith('@react-spectrum/test-utils') && name.startsWith('@react-spectrum') && workspace.pkg.dependencies?.has('@adobe/spectrum-css-temp')) {
+    if (!name.startsWith('@react-spectrum/docs')
+      && !name.startsWith('@react-spectrum/test-utils')
+      && name.startsWith('@react-spectrum')
+      && workspace.pkg.dependencies?.has('@adobe/spectrum-css-temp')) {
+
       workspace.set('targets', {
         main: {includeNodeModules: ['@adobe/spectrum-css-temp']},
         module: {includeNodeModules: ['@adobe/spectrum-css-temp']}
diff --git a/yarn.lock b/yarn.lock
index 37f6db6fb06..c5a874f85cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2510,6 +2510,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gulpjs/messages@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@gulpjs/messages@npm:1.1.0"
+  checksum: 10c0/3833c865a8a011938509863a6e92dca7b076823c0f2936547aad9170ad176c78174e200b087d3cd7dff98360ecfcaa6776650924e2c64399125d39ffb9ad885c
+  languageName: node
+  linkType: hard
+
+"@gulpjs/to-absolute-glob@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@gulpjs/to-absolute-glob@npm:4.0.0"
+  dependencies:
+    is-negated-glob: "npm:^1.0.0"
+  checksum: 10c0/acddf10466bfff672e7d09d5b7d9fb2d9d50dff3bcf6d4cc3b3df364ea0ccad6e7a8d8ba0f474f880ff18a76ebbcc09b3f4d6d12d2913e3469361d5539a72110
+  languageName: node
+  linkType: hard
+
 "@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0":
   version: 9.3.0
   resolution: "@hapi/hoek@npm:9.3.0"
@@ -9490,42 +9506,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@spectrum-css/component-builder@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@spectrum-css/component-builder@npm:1.0.1"
+"@spectrum-css/component-builder@workspace:^, @spectrum-css/component-builder@workspace:packages/@adobe/spectrum-css-builder-temp":
+  version: 0.0.0-use.local
+  resolution: "@spectrum-css/component-builder@workspace:packages/@adobe/spectrum-css-builder-temp"
   dependencies:
-    autoprefixer: "npm:^6.5.3"
-    browser-sync: "npm:^2.26.7"
-    del: "npm:^5.0.0"
-    gulp: "npm:^4.0.0"
+    "@swc/helpers": "npm:^0.5.0"
+    gulp: "npm:^5.0.0"
     gulp-concat: "npm:^2.6.1"
-    gulp-data: "npm:^1.3.1"
-    gulp-exec: "npm:^3.0.2"
-    gulp-insert: "npm:^0.5.0"
-    gulp-postcss: "npm:^7.0.0"
-    gulp-rename: "npm:^1.4.0"
-    gulp-replace: "npm:^1.0.0"
     gulplog: "npm:^1.0.0"
-    js-yaml: "npm:^3.13.1"
-    markdown: "npm:^0.5.0"
-    merge-stream: "npm:^2.0.0"
     postcss: "npm:^5.2.18"
-    postcss-calc: "npm:^6.0.0"
     postcss-custom-properties: "npm:^6.0.1"
-    postcss-discard-empty: "npm:^4.0.1"
-    postcss-focus-ring: "npm:^1.0.0"
-    postcss-functions: "npm:^3.0.0"
     postcss-import: "npm:^10.0.0"
-    postcss-inherit: "npm:^4.0.3"
-    postcss-mixins: "npm:^6.2.1"
-    postcss-nested: "npm:^3.0.0"
-    postcss-svg: "npm:^3.0.0"
-    pug: "npm:^2.0.4"
-    replace-ext: "npm:^1.0.0"
+    postcss-value-parser: "npm:3.3.1"
     through2: "npm:^3.0.1"
-  checksum: 10c0/533c730a605c3b20c68d8480659c9320fa13341c5e25cff5ff5723e506830c99d6b88e0d6b3ced6664556e81b0c10d08b00d25edbed7d45e2f439ed02ed66b07
-  languageName: node
-  linkType: hard
+  languageName: unknown
+  linkType: soft
 
 "@spectrum-css/vars@npm:^2.3.0":
   version: 2.3.0
@@ -11012,13 +11007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel-types@npm:*, @types/babel-types@npm:^7.0.0":
-  version: 7.0.7
-  resolution: "@types/babel-types@npm:7.0.7"
-  checksum: 10c0/50b8e1ef0feb5bbcbcf6751595c0e4794dc7b8868faddcf23b2f00dfb95695e3a5384d82c65cc8f8abb479206fef126078ce02c7d227386b931cf37839c13c13
-  languageName: node
-  linkType: hard
-
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -11060,15 +11048,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babylon@npm:^6.16.2":
-  version: 6.16.5
-  resolution: "@types/babylon@npm:6.16.5"
-  dependencies:
-    "@types/babel-types": "npm:*"
-  checksum: 10c0/a56538ee371c89cb687216f335ceb497eff16555a4a8c1a73580e0d516aa1e2cc90da00fc41f6c350c5028659e197b0c073c8d41cab3445b84100619d650c1de
-  languageName: node
-  linkType: hard
-
 "@types/body-parser@npm:*":
   version: 1.19.5
   resolution: "@types/body-parser@npm:1.19.5"
@@ -12123,7 +12102,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accepts@npm:~1.3.4, accepts@npm:~1.3.5, accepts@npm:~1.3.8":
+"accepts@npm:~1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -12133,15 +12112,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-globals@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "acorn-globals@npm:3.1.0"
-  dependencies:
-    acorn: "npm:^4.0.4"
-  checksum: 10c0/f5268bf68f20f5e11fa6cc5bcffe9413d4d86617c06f4a5461ec4f76893c94f23a34aec9be820c454426e4ecc013b24c9d62b72810ab1cebc328efe0317ce171
-  languageName: node
-  linkType: hard
-
 "acorn-globals@npm:^7.0.0":
   version: 7.0.1
   resolution: "acorn-globals@npm:7.0.1"
@@ -12177,24 +12147,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^3.1.0":
-  version: 3.3.0
-  resolution: "acorn@npm:3.3.0"
-  bin:
-    acorn: ./bin/acorn
-  checksum: 10c0/04d645eede54b19e0aab3da2bea73778b1b42b0c45598fab95687c01bcae0fb47eec7661a73c09781b400a884b47f279fb5c2bdc24f5d09642b5ef3ef62b03a2
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^4.0.4, acorn@npm:~4.0.2":
-  version: 4.0.13
-  resolution: "acorn@npm:4.0.13"
-  bin:
-    acorn: ./bin/acorn
-  checksum: 10c0/ed73e42711474f80d7f2f94d68109e83a40d48c9596f0bcfd1a4c64e086636495259432421357524d04bfe317eed6de5b6202d2ab30f1b1c26bca12684979aa5
-  languageName: node
-  linkType: hard
-
 "acorn@npm:^7.4.1":
   version: 7.4.1
   resolution: "acorn@npm:7.4.1"
@@ -12220,13 +12172,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"after@npm:0.8.2":
-  version: 0.8.2
-  resolution: "after@npm:0.8.2"
-  checksum: 10c0/b7ac8c7936eadfcb7cd6714150f04977745f3555db0d2183fd219d1f69a0d2dba95c1db16f372b45aef6670bda74c674a49a74100310080676b7ec308842a9c3
-  languageName: node
-  linkType: hard
-
 "agent-base@npm:4, agent-base@npm:^4.3.0":
   version: 4.3.0
   resolution: "agent-base@npm:4.3.0"
@@ -12335,17 +12280,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"align-text@npm:^0.1.1, align-text@npm:^0.1.3":
-  version: 0.1.4
-  resolution: "align-text@npm:0.1.4"
-  dependencies:
-    kind-of: "npm:^3.0.2"
-    longest: "npm:^1.0.1"
-    repeat-string: "npm:^1.5.2"
-  checksum: 10c0/c0fc03fe5de15cda89f9babb91e77a255013b49912031e86e79f25547aa666622f0a68be3da47fc834ab2c97cfb6b0a967509b2ce883f5306d9c78f6069ced7a
-  languageName: node
-  linkType: hard
-
 "almost-equal@npm:^1.1.0":
   version: 1.1.0
   resolution: "almost-equal@npm:1.1.0"
@@ -12371,24 +12305,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-colors@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "ansi-colors@npm:1.1.0"
-  dependencies:
-    ansi-wrap: "npm:^0.1.0"
-  checksum: 10c0/c5f3ae4710ed564ca173cd2cf3e85a3bf8dabb7b20688f84299caaf0a4af01e6b7825b32739336c9437492058d3b07d90ef42e3e6223fbba3dc9d52f63e29056
-  languageName: node
-  linkType: hard
-
-"ansi-cyan@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "ansi-cyan@npm:0.1.1"
-  dependencies:
-    ansi-wrap: "npm:0.1.0"
-  checksum: 10c0/194a33c4234a9b5150efa22f66d9820bcb44a0aa394767d2203bb49751064a52d5547ff878ec7cfaaa02543490172b405914e0a8647954be29f05474ad0c452f
-  languageName: node
-  linkType: hard
-
 "ansi-escapes@npm:^3.2.0":
   version: 3.2.0
   resolution: "ansi-escapes@npm:3.2.0"
@@ -12423,15 +12339,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-red@npm:^0.1.1":
-  version: 0.1.1
-  resolution: "ansi-red@npm:0.1.1"
-  dependencies:
-    ansi-wrap: "npm:0.1.0"
-  checksum: 10c0/e7f1ae80770d190d5aa0f2169cebd5caae0fa1e5cf20945d843d4bbb98428194e2fa062e285eb8807820612d30453573e89eb2c5c6a4aba257b725d37852bb11
-  languageName: node
-  linkType: hard
-
 "ansi-regex@npm:^0.2.0, ansi-regex@npm:^0.2.1":
   version: 0.2.1
   resolution: "ansi-regex@npm:0.2.1"
@@ -12521,7 +12428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-wrap@npm:0.1.0, ansi-wrap@npm:^0.1.0":
+"ansi-wrap@npm:0.1.0":
   version: 0.1.0
   resolution: "ansi-wrap@npm:0.1.0"
   checksum: 10c0/1e0a53ae0d1a3fc5ceeb5d1868cb5b0a61543a1ff11f3efc51bab7923cc01fe8180db1f9250ce5003b425c53f568bcf3c2dea9d90b5c1cd0a1dae13f76c601dd
@@ -12535,23 +12442,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"anymatch@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "anymatch@npm:2.0.0"
-  dependencies:
-    micromatch: "npm:^3.1.4"
-    normalize-path: "npm:^2.1.1"
-  checksum: 10c0/a0d745e52f0233048724b9c9d7b1d8a650f7a50151a0f1d2cce1857b09fd096052d334f8c570cc88596edef8249ae778f767db94025cd00f81e154a37bb7e34e
-  languageName: node
-  linkType: hard
-
-"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
-  version: 3.1.2
-  resolution: "anymatch@npm:3.1.2"
+"anymatch@npm:^3.0.3, anymatch@npm:^3.1.3, anymatch@npm:~3.1.2":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
   dependencies:
     normalize-path: "npm:^3.0.0"
     picomatch: "npm:^2.0.4"
-  checksum: 10c0/900645535aee46ed7958f4f5b5e38abcbf474b5230406e913de15fc9a1310f0d5322775deb609688efe31010fa57831e55d36040b19826c22ce61d537e9b9759
+  checksum: 10c0/57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
   languageName: node
   linkType: hard
 
@@ -12569,15 +12466,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"append-buffer@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "append-buffer@npm:1.0.2"
-  dependencies:
-    buffer-equal: "npm:^1.0.0"
-  checksum: 10c0/909c34059ddd418ddd7c5a050b2891f971eafd17ffdcf4b39411fcb6ecb780db3e147a17dd8c4482381ee2c3a3447689d6e2ef5529dd9c1f9bb630b763a5aab5
-  languageName: node
-  linkType: hard
-
 "append-transform@npm:^0.4.0":
   version: 0.4.0
   resolution: "append-transform@npm:0.4.0"
@@ -12684,16 +12572,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-diff@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "arr-diff@npm:1.1.0"
-  dependencies:
-    arr-flatten: "npm:^1.0.1"
-    array-slice: "npm:^0.2.3"
-  checksum: 10c0/72e93f94b39b0edc792ffd0c09658ddbecc1ec19ac50411408f720a6aab833cbf1df3947a7c9d5a6aea5fa4861ea508b6a04419a95b85bf9b256c8d65cc64388
-  languageName: node
-  linkType: hard
-
 "arr-diff@npm:^2.0.0":
   version: 2.0.0
   resolution: "arr-diff@npm:2.0.0"
@@ -12710,15 +12588,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-filter@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "arr-filter@npm:1.1.2"
-  dependencies:
-    make-iterator: "npm:^1.0.0"
-  checksum: 10c0/66b7f29957e9e1ce02f8de6802c588cca21124335c875849ac5ef306188be7adcce6d978e3349ce05abb35420cdb7988a818020e1b16471ad83b48e2cf58ad3a
-  languageName: node
-  linkType: hard
-
 "arr-flatten@npm:^1.0.1, arr-flatten@npm:^1.1.0":
   version: 1.1.0
   resolution: "arr-flatten@npm:1.1.0"
@@ -12726,22 +12595,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arr-map@npm:^2.0.0, arr-map@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "arr-map@npm:2.0.2"
-  dependencies:
-    make-iterator: "npm:^1.0.0"
-  checksum: 10c0/b91d095a194455f779f929de86bb815671f1602c7f344426334ddc819a8a684cde76f61ed572fd5553d23711ccba04da542f204ecb0b81c28bbe70d9793497fc
-  languageName: node
-  linkType: hard
-
-"arr-union@npm:^2.0.1":
-  version: 2.1.0
-  resolution: "arr-union@npm:2.1.0"
-  checksum: 10c0/27d270a77ebbccf1fb7b8544ebdcca3fcf1bcf10b3d01bbef127466b1bd1c877ead79f607f3404de21880e675582b453f7fefbe48b6818516be3f075f46c5172
-  languageName: node
-  linkType: hard
-
 "arr-union@npm:^3.1.0":
   version: 3.1.0
   resolution: "arr-union@npm:3.1.0"
@@ -12773,7 +12626,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-each@npm:^1.0.0, array-each@npm:^1.0.1":
+"array-each@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-each@npm:1.0.1"
   checksum: 10c0/b5951ac450b560849143722d6785672ae71f5e9b061f11e7e2f775513a952e583e8bcedbba538a08049e235f5583756efec440fc6740a9b47b411cb487f65a9b
@@ -12822,32 +12675,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-initial@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "array-initial@npm:1.1.0"
-  dependencies:
-    array-slice: "npm:^1.0.0"
-    is-number: "npm:^4.0.0"
-  checksum: 10c0/2a895b8aed2d782b953c4281ed09d67a465ed1c62e2264c7ee3e1a39c72b3790bac21d6ffa62f0ce606f18a99195c50fd4cd36cc725b501ee49c81fd2441ead5
-  languageName: node
-  linkType: hard
-
-"array-last@npm:^1.1.1":
-  version: 1.3.0
-  resolution: "array-last@npm:1.3.0"
-  dependencies:
-    is-number: "npm:^4.0.0"
-  checksum: 10c0/bb620e744fab80b104a5eddfa828eb915451ffc23b737e76b2ecfbbef42e1a9557ca85d280cde10c5d12b4627d15857e7312a2f20d9ecc45f1e52d745a591438
-  languageName: node
-  linkType: hard
-
-"array-slice@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "array-slice@npm:0.2.3"
-  checksum: 10c0/aba296c769a8a6f772e26261510d33ae0be231e0f3acb2eb7da5c65becf0769e0f339d722739af49fea429941c19d23ce85a4ba2fc475df645a4d4d1289d65c3
-  languageName: node
-  linkType: hard
-
 "array-slice@npm:^1.0.0":
   version: 1.1.0
   resolution: "array-slice@npm:1.1.0"
@@ -12855,17 +12682,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-sort@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "array-sort@npm:1.0.0"
-  dependencies:
-    default-compare: "npm:^1.0.0"
-    get-value: "npm:^2.0.6"
-    kind-of: "npm:^5.0.2"
-  checksum: 10c0/10fe9186fcf25e019e28a8a5d0375f6f5b71f48983266ae64ae06f7c55e1ccd7aea6ecf78c77829e7859e2da240398c45e4d046fd9f45935485d08c9fd45eb53
-  languageName: node
-  linkType: hard
-
 "array-union@npm:^1.0.1, array-union@npm:^1.0.2":
   version: 1.0.2
   resolution: "array-union@npm:1.0.2"
@@ -12984,13 +12800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arraybuffer.slice@npm:~0.0.7":
-  version: 0.0.7
-  resolution: "arraybuffer.slice@npm:0.0.7"
-  checksum: 10c0/64bbc32b9501f5c1c7bcfca38fcfd976650a91ffbff342cdff532bef7e2fa67e3b43a9242ca6f3e10715b5d1ed8243b0850cd506a84f7bbad5905a04a92b4b9a
-  languageName: node
-  linkType: hard
-
 "arrify@npm:^1.0.1":
   version: 1.0.1
   resolution: "arrify@npm:1.0.1"
@@ -12998,7 +12807,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asap@npm:^2.0.0, asap@npm:~2.0.3":
+"asap@npm:^2.0.0":
   version: 2.0.6
   resolution: "asap@npm:2.0.6"
   checksum: 10c0/c6d5e39fe1f15e4b87677460bd66b66050cd14c772269cee6688824c1410a08ab20254bb6784f9afb75af9144a9f9a7692d49547f4d19d715aeb7c0318f3136d
@@ -13066,29 +12875,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-done@npm:^1.2.0, async-done@npm:^1.2.2":
-  version: 1.3.2
-  resolution: "async-done@npm:1.3.2"
+"async-done@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "async-done@npm:2.0.0"
   dependencies:
-    end-of-stream: "npm:^1.1.0"
-    once: "npm:^1.3.2"
-    process-nextick-args: "npm:^2.0.0"
-    stream-exhaust: "npm:^1.0.1"
-  checksum: 10c0/0c11985b49e7915f2de2333a12722e415ba0d46e8285f699b610b11cd54ee8c59056e8ae6e7ed2c88e4cc2235173895fe4a67c610b3105cc58d821f4ce72fb35
-  languageName: node
-  linkType: hard
-
-"async-each-series@npm:0.1.1":
-  version: 0.1.1
-  resolution: "async-each-series@npm:0.1.1"
-  checksum: 10c0/38d30fd162e6b1a6abe44ac6518cd0ae6f5ead587005b052a74dcd56494cc29fd2575845e34f24a6cc8e91d51a7060302bff3e8f605e8f359fcaea8072ceb4b9
-  languageName: node
-  linkType: hard
-
-"async-each@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "async-each@npm:1.0.3"
-  checksum: 10c0/d5f0ed24792d04b747f667fdcc92c7e6972da1252525a942119f468e629adba1e235df8b8a8e75776e6c7b18ef04d68db7295350bfa1a958457b34faa9a3bd65
+    end-of-stream: "npm:^1.4.4"
+    once: "npm:^1.4.0"
+    stream-exhaust: "npm:^1.0.2"
+  checksum: 10c0/b7e391b5571a27e157c94980aeb7536a683c85d4bdd8bdf43f08d77d872caa3de9d316bc80b4ab5c2d11f22819b8625971912d30fe5d47ccb535dd57a5912149
   languageName: node
   linkType: hard
 
@@ -13099,19 +12893,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-settle@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "async-settle@npm:1.0.0"
+"async-settle@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "async-settle@npm:2.0.0"
   dependencies:
-    async-done: "npm:^1.2.2"
-  checksum: 10c0/cae0911fa77078472d5f8889a1dbd60bd35a69b0a5ed0b4bd0cdb7ac57935c08c6b16242eaa0149c7a920553d5efba4512ef1175f6ed0b66f374d61c01373a36
-  languageName: node
-  linkType: hard
-
-"async@npm:1.5.2":
-  version: 1.5.2
-  resolution: "async@npm:1.5.2"
-  checksum: 10c0/9ee84592c393aad1047d1223004317ecc65a9a3f76101e0f4614a0818eac962e666510353400a3c9ea158df540579a293f486f3578e918c5e90a0f5ed52e8aea
+    async-done: "npm:^2.0.0"
+  checksum: 10c0/61cae0411826e8ce4162137eeb281bbfca90297bc29a0b7ee97ad107949e974594944c7b5e2f934cd003657fe23518b705ff4b837a6c856ad59e6e0065b82a4e
   languageName: node
   linkType: hard
 
@@ -13122,7 +12909,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:3.2.6":
+"async@npm:3.2.6, async@npm:^3.2.3":
   version: 3.2.6
   resolution: "async@npm:3.2.6"
   checksum: 10c0/36484bb15ceddf07078688d95e27076379cc2f87b10c03b6dd8a83e89475a3c8df5848859dd06a4c95af1e4c16fc973de0171a77f18ea00be899aca2a4f85e70
@@ -13136,13 +12923,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async@npm:^3.2.3":
-  version: 3.2.5
-  resolution: "async@npm:3.2.5"
-  checksum: 10c0/1408287b26c6db67d45cb346e34892cee555b8b59e6c68e6f8c3e495cad5ca13b4f218180e871f3c2ca30df4ab52693b66f2f6ff43644760cab0b2198bda79c1
-  languageName: node
-  linkType: hard
-
 "asynckit@npm:^0.4.0":
   version: 0.4.0
   resolution: "asynckit@npm:0.4.0"
@@ -13173,20 +12953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:^6.5.3":
-  version: 6.7.7
-  resolution: "autoprefixer@npm:6.7.7"
-  dependencies:
-    browserslist: "npm:^1.7.6"
-    caniuse-db: "npm:^1.0.30000634"
-    normalize-range: "npm:^0.1.2"
-    num2fraction: "npm:^1.2.2"
-    postcss: "npm:^5.2.16"
-    postcss-value-parser: "npm:^3.2.3"
-  checksum: 10c0/bdcf8e53eacef1feb54940bbe33fcb67e12eb07d5572d5f0fbadb638b84be15ca91b3a343763962a2ce6ed12ba611e039c62e871d12e29b956b8f2b189c263ae
-  languageName: node
-  linkType: hard
-
 "autoprefixer@npm:^9.6.0":
   version: 9.8.8
   resolution: "autoprefixer@npm:9.8.8"
@@ -13266,16 +13032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:0.19.0":
-  version: 0.19.0
-  resolution: "axios@npm:0.19.0"
-  dependencies:
-    follow-redirects: "npm:1.5.10"
-    is-buffer: "npm:^2.0.2"
-  checksum: 10c0/f8b8b3612892888db5bae625e5e065cfb0f0e5774759a1868a38ed26f85989c9554279f2e58816f7faddb325ddccd8f8ca4fc3e48e8b78c29f9bb2194a14e3b0
-  languageName: node
-  linkType: hard
-
 "axios@npm:^1.6.1":
   version: 1.6.8
   resolution: "axios@npm:1.6.8"
@@ -13557,27 +13313,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bach@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "bach@npm:1.2.0"
+"bach@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "bach@npm:2.0.1"
   dependencies:
-    arr-filter: "npm:^1.1.1"
-    arr-flatten: "npm:^1.0.1"
-    arr-map: "npm:^2.0.0"
-    array-each: "npm:^1.0.0"
-    array-initial: "npm:^1.0.0"
-    array-last: "npm:^1.1.1"
-    async-done: "npm:^1.2.2"
-    async-settle: "npm:^1.0.0"
-    now-and-later: "npm:^2.0.0"
-  checksum: 10c0/0f2615664960f73fc38d1738206a861266b8b9d1ef5e95dccd7e2d8f2b8e93c718ec7717cb35d4229d2a4ed9909c3830b64bca892451a6bcf07fa572e1e0758c
-  languageName: node
-  linkType: hard
-
-"backo2@npm:1.0.2":
-  version: 1.0.2
-  resolution: "backo2@npm:1.0.2"
-  checksum: 10c0/a9e825a6a38a6d1c4a94476eabc13d6127dfaafb0967baf104affbb67806ae26abbb58dab8d572d2cd21ef06634ff57c3ad48dff14b904e18de1474cc2f22bf3
+    async-done: "npm:^2.0.0"
+    async-settle: "npm:^2.0.0"
+    now-and-later: "npm:^3.0.0"
+  checksum: 10c0/f772a68ecf69dc82eae9b89a9a40d01e6a64f3d59d0ba2a76c6963207e98ab96232b5c83a1858af99384fd90247492a5085092ead4277a62fbcd7fe0785d112c
   languageName: node
   linkType: hard
 
@@ -13611,34 +13354,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"base64-arraybuffer@npm:0.1.5":
-  version: 0.1.5
-  resolution: "base64-arraybuffer@npm:0.1.5"
-  checksum: 10c0/90afdff8ecae0ea96709f8d65037585bcabddfb222bc8b46408b74b982a8322f36fe1f97468d84e6e18e01ac165ee1c6570bde6c8f9b4f64a3e9374885237a76
-  languageName: node
-  linkType: hard
-
-"base64-js@npm:^1.0.2":
-  version: 1.3.1
-  resolution: "base64-js@npm:1.3.1"
-  checksum: 10c0/f111a2c2b105eb9ee3818c30154e047fb00370699a03c2130d0944f10914697677ceb5faec64ea851e00710b80539afb03e9aa098e19c183a5e7a1cdc18abb29
-  languageName: node
-  linkType: hard
-
-"base64-js@npm:^1.3.1":
+"base64-js@npm:^1.0.2, base64-js@npm:^1.3.1":
   version: 1.5.1
   resolution: "base64-js@npm:1.5.1"
   checksum: 10c0/f23823513b63173a001030fae4f2dabe283b99a9d324ade3ad3d148e218134676f1ee8568c877cd79ec1c53158dcf2d2ba527a97c606618928ba99dd930102bf
   languageName: node
   linkType: hard
 
-"base64id@npm:1.0.0":
-  version: 1.0.0
-  resolution: "base64id@npm:1.0.0"
-  checksum: 10c0/702f2e7b5cf28a9e078f9bdee8c911c2453e44283d77ee06c377125e03d72910f500d605cf7a22436faa62cb0698ae8ba966bb620e6dee0d8da87302ef46387a
-  languageName: node
-  linkType: hard
-
 "base@npm:^0.11.1":
   version: 0.11.2
   resolution: "base@npm:0.11.2"
@@ -13654,13 +13376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"batch@npm:0.6.1":
-  version: 0.6.1
-  resolution: "batch@npm:0.6.1"
-  checksum: 10c0/925a13897b4db80d4211082fe287bcf96d297af38e26448c857cee3e095c9792e3b8f26b37d268812e7f38a589f694609de8534a018b1937d7dc9f84e6b387c5
-  languageName: node
-  linkType: hard
-
 "bcrypt-pbkdf@npm:^1.0.0":
   version: 1.0.2
   resolution: "bcrypt-pbkdf@npm:1.0.2"
@@ -13691,15 +13406,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"better-assert@npm:~1.0.0":
-  version: 1.0.2
-  resolution: "better-assert@npm:1.0.2"
-  dependencies:
-    callsite: "npm:1.0.0"
-  checksum: 10c0/9bba805b3472e05b2d2d2bf2b33d53c9d066c60ea0f015a587c1ad450a409f2018df2d61596ad27d8aaeed5ff786c567bbaf648649e122dbea7d9ca0b41c32fe
-  languageName: node
-  linkType: hard
-
 "better-opn@npm:^3.0.2":
   version: 3.0.2
   resolution: "better-opn@npm:3.0.2"
@@ -13716,13 +13422,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"binary-extensions@npm:^1.0.0":
-  version: 1.13.1
-  resolution: "binary-extensions@npm:1.13.1"
-  checksum: 10c0/2d616938ac23d828ec3fbe0dea429b566fd2c137ddc38f166f16561ccd58029deac3fa9fddb489ab13d679c8fb5f1bd0e82824041299e5e39d8dd3cc68fbb9f9
-  languageName: node
-  linkType: hard
-
 "binary-extensions@npm:^2.0.0":
   version: 2.2.0
   resolution: "binary-extensions@npm:2.2.0"
@@ -13730,22 +13429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"binaryextensions@npm:2":
-  version: 2.1.2
-  resolution: "binaryextensions@npm:2.1.2"
-  checksum: 10c0/393daf74b0eb8f9d770145f79668dcfef7eaea8d88456cf8a08acc1243b5bef51fae0d2492ec1c409348856c298a0086cf9b0902401222c9605f4a0b13f58df7
-  languageName: node
-  linkType: hard
-
-"bindings@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "bindings@npm:1.5.0"
-  dependencies:
-    file-uri-to-path: "npm:1.0.0"
-  checksum: 10c0/3dab2491b4bb24124252a91e656803eac24292473e56554e35bbfe3cc1875332cfa77600c3bac7564049dc95075bf6fcc63a4609920ff2d64d0fe405fcf0d4ba
-  languageName: node
-  linkType: hard
-
 "bl@npm:^4.0.3, bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -13757,10 +13440,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"blob@npm:0.0.5":
-  version: 0.0.5
-  resolution: "blob@npm:0.0.5"
-  checksum: 10c0/56adf88c6da42bb17a7ec5f8ed2506e8e83626b2a1094548cb21aaa2355018c82529c56f065ed7fa8e109199149953c33c0039aa609a79c4948a60e1f92a84db
+"bl@npm:^5.0.0":
+  version: 5.1.0
+  resolution: "bl@npm:5.1.0"
+  dependencies:
+    buffer: "npm:^6.0.3"
+    inherits: "npm:^2.0.4"
+    readable-stream: "npm:^3.4.0"
+  checksum: 10c0/528a9c3d7d6b87af98c46f10a887654d027c28c503c7f7de87440e643f0056d7a2319a967762b8ec18150c64799d2825a277147a752a0570a7407c0b705b0d01
   languageName: node
   linkType: hard
 
@@ -13771,26 +13458,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"body-parser@npm:1.20.2":
-  version: 1.20.2
-  resolution: "body-parser@npm:1.20.2"
-  dependencies:
-    bytes: "npm:3.1.2"
-    content-type: "npm:~1.0.5"
-    debug: "npm:2.6.9"
-    depd: "npm:2.0.0"
-    destroy: "npm:1.2.0"
-    http-errors: "npm:2.0.0"
-    iconv-lite: "npm:0.4.24"
-    on-finished: "npm:2.4.1"
-    qs: "npm:6.11.0"
-    raw-body: "npm:2.5.2"
-    type-is: "npm:~1.6.18"
-    unpipe: "npm:1.0.0"
-  checksum: 10c0/06f1438fff388a2e2354c96aa3ea8147b79bfcb1262dfcc2aae68ec13723d01d5781680657b74e9f83c808266d5baf52804032fbde2b7382b89bd8cdb273ace9
-  languageName: node
-  linkType: hard
-
 "body-parser@npm:1.20.3":
   version: 1.20.3
   resolution: "body-parser@npm:1.20.3"
@@ -13888,7 +13555,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^2.3.1, braces@npm:^2.3.2":
+"braces@npm:^2.3.1":
   version: 2.3.2
   resolution: "braces@npm:2.3.2"
   dependencies:
@@ -13922,72 +13589,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browser-sync-client@npm:^2.26.6":
-  version: 2.26.6
-  resolution: "browser-sync-client@npm:2.26.6"
-  dependencies:
-    etag: "npm:1.8.1"
-    fresh: "npm:0.5.2"
-    mitt: "npm:^1.1.3"
-    rxjs: "npm:^5.5.6"
-  checksum: 10c0/f0bb9219025b04dfa6343ee61d31777675869538ff898e0cd396eb510acedb72af91ad0f3107ba9237efd91843398da3fc3180b7cd46837e732d7f354761f548
-  languageName: node
-  linkType: hard
-
-"browser-sync-ui@npm:^2.26.4":
-  version: 2.26.4
-  resolution: "browser-sync-ui@npm:2.26.4"
-  dependencies:
-    async-each-series: "npm:0.1.1"
-    connect-history-api-fallback: "npm:^1"
-    immutable: "npm:^3"
-    server-destroy: "npm:1.0.1"
-    socket.io-client: "npm:^2.0.4"
-    stream-throttle: "npm:^0.1.3"
-  checksum: 10c0/de31cd740ef1e4d0e8a37a309f0d731947fc169bc1053b92c535752bbb6ba081b4201d13eb6bba70bfe6aceec8f692d1d954b3a8c3c97cc5e9f83011db8e2c82
-  languageName: node
-  linkType: hard
-
-"browser-sync@npm:^2.26.7":
-  version: 2.26.7
-  resolution: "browser-sync@npm:2.26.7"
-  dependencies:
-    browser-sync-client: "npm:^2.26.6"
-    browser-sync-ui: "npm:^2.26.4"
-    bs-recipes: "npm:1.3.4"
-    bs-snippet-injector: "npm:^2.0.1"
-    chokidar: "npm:^2.0.4"
-    connect: "npm:3.6.6"
-    connect-history-api-fallback: "npm:^1"
-    dev-ip: "npm:^1.0.1"
-    easy-extender: "npm:^2.3.4"
-    eazy-logger: "npm:^3"
-    etag: "npm:^1.8.1"
-    fresh: "npm:^0.5.2"
-    fs-extra: "npm:3.0.1"
-    http-proxy: "npm:1.15.2"
-    immutable: "npm:^3"
-    localtunnel: "npm:1.9.2"
-    micromatch: "npm:^3.1.10"
-    opn: "npm:5.3.0"
-    portscanner: "npm:2.1.1"
-    qs: "npm:6.2.3"
-    raw-body: "npm:^2.3.2"
-    resp-modifier: "npm:6.0.2"
-    rx: "npm:4.1.0"
-    send: "npm:0.16.2"
-    serve-index: "npm:1.9.1"
-    serve-static: "npm:1.13.2"
-    server-destroy: "npm:1.0.1"
-    socket.io: "npm:2.1.1"
-    ua-parser-js: "npm:0.7.17"
-    yargs: "npm:6.4.0"
-  bin:
-    browser-sync: dist/bin.js
-  checksum: 10c0/4b0fdeda622cfd2ff5e3549461502ed546e3e1b7025359a17c0cd7059d6a0369a79e2d225fa9eb1056a410666a759a08dac252de3f33ef5a59c4b68e9b45dce2
-  languageName: node
-  linkType: hard
-
 "browserify-zlib@npm:^0.1.4":
   version: 0.1.4
   resolution: "browserify-zlib@npm:0.1.4"
@@ -14011,20 +13612,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bs-recipes@npm:1.3.4":
-  version: 1.3.4
-  resolution: "bs-recipes@npm:1.3.4"
-  checksum: 10c0/40946a0802dbeef3386b0a96003b7adbf2f20877c4de5fe3ba37c87a273238b6eec2a18b7f57d86fc46101e1b717815f6428d73d0263cc9de574cd30f25e6ceb
-  languageName: node
-  linkType: hard
-
-"bs-snippet-injector@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "bs-snippet-injector@npm:2.0.1"
-  checksum: 10c0/c57f8a22bb6366dc7299f43dc828cf0e9f869321389fe50b26e509d509f561ba8377537843e173bc74ca4ea055d332af80ad61f088be3da805361c440993d003
-  languageName: node
-  linkType: hard
-
 "bser@npm:^2.0.0":
   version: 2.1.0
   resolution: "bser@npm:2.1.0"
@@ -14055,13 +13642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-equal@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "buffer-equal@npm:1.0.0"
-  checksum: 10c0/2459f0b6a50dec18571c56dc2a2a0603d2078e79cb0cad2a6eabd093c9fc6e40e7c0a42170fa982324e8defb5d7fe7318e3a91458bc26a00ada1adef87849aaf
-  languageName: node
-  linkType: hard
-
 "buffer-from@npm:^1.0.0":
   version: 1.1.1
   resolution: "buffer-from@npm:1.1.1"
@@ -14128,13 +13708,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.0.0":
-  version: 3.0.0
-  resolution: "bytes@npm:3.0.0"
-  checksum: 10c0/91d42c38601c76460519ffef88371caacaea483a354c8e4b8808e7b027574436a5713337c003ea3de63ee4991c2a9a637884fdfe7f761760d746929d9e8fec60
-  languageName: node
-  linkType: hard
-
 "bytes@npm:3.1.2":
   version: 3.1.2
   resolution: "bytes@npm:3.1.2"
@@ -14273,13 +13846,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"callsite@npm:1.0.0":
-  version: 1.0.0
-  resolution: "callsite@npm:1.0.0"
-  checksum: 10c0/8b23d5ed879984b66fe3da381994d6c4b741e561226abc48b40c99c4896f7125db395ea4aa989071a7eb0712c3f83bc32fb1e798fdf54967acdf4af176e48572
-  languageName: node
-  linkType: hard
-
 "callsites@npm:^2.0.0":
   version: 2.0.0
   resolution: "callsites@npm:2.0.0"
@@ -14304,13 +13870,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase-css@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "camelcase-css@npm:2.0.1"
-  checksum: 10c0/1a1a3137e8a781e6cbeaeab75634c60ffd8e27850de410c162cce222ea331cd1ba5364e8fb21c95e5ca76f52ac34b81a090925ca00a87221355746d049c6e273
-  languageName: node
-  linkType: hard
-
 "camelcase-keys@npm:^2.0.0":
   version: 2.1.0
   resolution: "camelcase-keys@npm:2.1.0"
@@ -14332,13 +13891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:^1.0.2":
-  version: 1.2.1
-  resolution: "camelcase@npm:1.2.1"
-  checksum: 10c0/dec70dfd46be8e31c5f8a4616f441cc3902da9b807f843c2ad4f2a0c79a8907d91914184b40166e2111bfa76cb66de6107924c0529017204e810ef14390381fa
-  languageName: node
-  linkType: hard
-
 "camelcase@npm:^2.0.0":
   version: 2.1.1
   resolution: "camelcase@npm:2.1.1"
@@ -14383,13 +13935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-db@npm:^1.0.30000634":
-  version: 1.0.30001680
-  resolution: "caniuse-db@npm:1.0.30001680"
-  checksum: 10c0/5a2d75736353b93a2da769eeb151f0062ab296f90e413f8947fca78b916e0358c75c7350026a84a3c988c2d00562df088df5c8b5a66d000130fd00367f917a0d
-  languageName: node
-  linkType: hard
-
 "caniuse-lite@npm:1.0.30001563":
   version: 1.0.30001563
   resolution: "caniuse-lite@npm:1.0.30001563"
@@ -14411,16 +13956,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"center-align@npm:^0.1.1":
-  version: 0.1.3
-  resolution: "center-align@npm:0.1.3"
-  dependencies:
-    align-text: "npm:^0.1.3"
-    lazy-cache: "npm:^1.0.3"
-  checksum: 10c0/d12d17b53c4ffce900ecddeb87b781e65af9fe197973015bc2d8fb114fcccdd6457995df26bfe156ffe44573ffbabbba7c67653d92cfc8e1b2e7ec88404cbb61
-  languageName: node
-  linkType: hard
-
 "chalk@npm:^0.5.0":
   version: 0.5.1
   resolution: "chalk@npm:0.5.1"
@@ -14434,7 +13969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^1.0.0, chalk@npm:^1.1.1, chalk@npm:^1.1.3":
+"chalk@npm:^1.0.0, chalk@npm:^1.1.3":
   version: 1.1.3
   resolution: "chalk@npm:1.1.3"
   dependencies:
@@ -14546,15 +14081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"character-parser@npm:^2.1.1":
-  version: 2.2.0
-  resolution: "character-parser@npm:2.2.0"
-  dependencies:
-    is-regex: "npm:^1.0.3"
-  checksum: 10c0/5a8d3eff2c912a6878c84e2ebf9d42524e858aa7e1a1c7e8bb79ab54da109ad008fe9057a9d2b3230541d7ff858eda98983a2ae15db57ba01af2e989d29e932e
-  languageName: node
-  linkType: hard
-
 "character-reference-invalid@npm:^2.0.0":
   version: 2.0.1
   resolution: "character-reference-invalid@npm:2.0.1"
@@ -14576,30 +14102,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^2.0.0, chokidar@npm:^2.0.4":
-  version: 2.1.8
-  resolution: "chokidar@npm:2.1.8"
-  dependencies:
-    anymatch: "npm:^2.0.0"
-    async-each: "npm:^1.0.1"
-    braces: "npm:^2.3.2"
-    fsevents: "npm:^1.2.7"
-    glob-parent: "npm:^3.1.0"
-    inherits: "npm:^2.0.3"
-    is-binary-path: "npm:^1.0.0"
-    is-glob: "npm:^4.0.0"
-    normalize-path: "npm:^3.0.0"
-    path-is-absolute: "npm:^1.0.0"
-    readdirp: "npm:^2.2.1"
-    upath: "npm:^1.1.1"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10c0/5631cc00080224f9482cf5418dcbea111aec02fa8d81a8cfe37e47b9cf36089e071de52d503647e3a821a01426a40adc926ba899f657af86a51b8f8d4eef12a7
-  languageName: node
-  linkType: hard
-
-"chokidar@npm:^3.4.0, chokidar@npm:^3.6.0":
+"chokidar@npm:^3.4.0, chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -14707,15 +14210,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:^4.1.11":
-  version: 4.2.3
-  resolution: "clean-css@npm:4.2.3"
-  dependencies:
-    source-map: "npm:~0.6.0"
-  checksum: 10c0/738eb574a1780663bad95d1772a6b97a0140b49e8c77850082f324112eb2d528737393075eede14be6c9797d15f09dd64657772f0d4e6990c9c887150648539f
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -14800,17 +14294,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "cliui@npm:2.1.0"
-  dependencies:
-    center-align: "npm:^0.1.1"
-    right-align: "npm:^0.1.1"
-    wordwrap: "npm:0.0.2"
-  checksum: 10c0/a5e7a3c1f354f3dd4cdea613822633a3c73604d4852ab2f5ac24fb7e10a2bef4475b4064e1bdd3db61e9527130a634ca4cef7e18666d03519611e70213606245
-  languageName: node
-  linkType: hard
-
 "cliui@npm:^3.2.0":
   version: 3.2.0
   resolution: "cliui@npm:3.2.0"
@@ -14923,7 +14406,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clone@npm:^2.1.1":
+"clone@npm:^2.1.1, clone@npm:^2.1.2":
   version: 2.1.2
   resolution: "clone@npm:2.1.2"
   checksum: 10c0/ed0601cd0b1606bc7d82ee7175b97e68d1dd9b91fd1250a3617b38d34a095f8ee0431d40a1a611122dcccb4f93295b4fdb94942aa763392b5fe44effa50c2d5e
@@ -14969,17 +14452,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"collection-map@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "collection-map@npm:1.0.0"
-  dependencies:
-    arr-map: "npm:^2.0.2"
-    for-own: "npm:^1.0.0"
-    make-iterator: "npm:^1.0.0"
-  checksum: 10c0/9fdda135961199d00401f1c72b2cb87d5ed1c120a98d0244a6199c1167b0f51ce88ae392300d2518c9930671bd2db85b5c47521e0bc54f7745872139a5b16964
-  languageName: node
-  linkType: hard
-
 "collection-visit@npm:^1.0.0":
   version: 1.0.0
   resolution: "collection-visit@npm:1.0.0"
@@ -15114,7 +14586,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:2.20.0, commander@npm:^2.2.0, commander@npm:^2.20.0":
+"commander@npm:2.20.0, commander@npm:^2.20.0":
   version: 2.20.0
   resolution: "commander@npm:2.20.0"
   checksum: 10c0/c037420cdf8c8bbadf37749fe129298eda5b5c004e81805057d87ff508f9dbfb680d30aebe1bbcdfc54b579eaf6182dd90077e506add74d6b26ef52c7e22d41d
@@ -15194,28 +14666,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"component-bind@npm:1.0.0":
-  version: 1.0.0
-  resolution: "component-bind@npm:1.0.0"
-  checksum: 10c0/839485d60fdf21e1303cd739c76f5adac046f7b3d5d7b666ad1259ccff562c7e7afc8922b40e4a5c4665789a7fb6645e527214c80a922093f392d89685fda488
-  languageName: node
-  linkType: hard
-
-"component-emitter@npm:1.2.1, component-emitter@npm:^1.2.1":
+"component-emitter@npm:^1.2.1":
   version: 1.2.1
   resolution: "component-emitter@npm:1.2.1"
   checksum: 10c0/6c27bd7bba028776464cee6c1686c8e02cb9a576a11df93f1fc211ae3eb2de234ae90952d0b7fb3acc9c92c8baa389fa7389681b2e8689d2ca463e94f3ad30b2
   languageName: node
   linkType: hard
 
-"component-inherit@npm:0.0.3":
-  version: 0.0.3
-  resolution: "component-inherit@npm:0.0.3"
-  checksum: 10c0/f9f7b0555aa4976e227b28e1cfc1a775941f053fb1c33be81ece31afd759807ff0f35a437fb61a08eb1039a3444a970f29e2808d0621df4eed9ff510849fba36
-  languageName: node
-  linkType: hard
-
-"compressible@npm:~2.0.16, compressible@npm:~2.0.18":
+"compressible@npm:~2.0.18":
   version: 2.0.18
   resolution: "compressible@npm:2.0.18"
   dependencies:
@@ -15224,7 +14682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compression@npm:1.7.5":
+"compression@npm:1.7.5, compression@npm:^1.7.4":
   version: 1.7.5
   resolution: "compression@npm:1.7.5"
   dependencies:
@@ -15239,21 +14697,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compression@npm:^1.7.4":
-  version: 1.7.4
-  resolution: "compression@npm:1.7.4"
-  dependencies:
-    accepts: "npm:~1.3.5"
-    bytes: "npm:3.0.0"
-    compressible: "npm:~2.0.16"
-    debug: "npm:2.6.9"
-    on-headers: "npm:~1.0.2"
-    safe-buffer: "npm:5.1.2"
-    vary: "npm:~1.1.2"
-  checksum: 10c0/138db836202a406d8a14156a5564fb1700632a76b6e7d1546939472895a5304f2b23c80d7a22bf44c767e87a26e070dbc342ea63bb45ee9c863354fa5556bbbc
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -15261,7 +14704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-stream@npm:^1.5.0, concat-stream@npm:^1.5.2, concat-stream@npm:^1.6.0, concat-stream@npm:^1.6.2":
+"concat-stream@npm:^1.5.0, concat-stream@npm:^1.5.2, concat-stream@npm:^1.6.2":
   version: 1.6.2
   resolution: "concat-stream@npm:1.6.2"
   dependencies:
@@ -15337,25 +14780,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"connect-history-api-fallback@npm:^1":
-  version: 1.6.0
-  resolution: "connect-history-api-fallback@npm:1.6.0"
-  checksum: 10c0/6d59c68070fcb2f6d981992f88d050d7544e8e1af6600c23ad680d955e316216794a742a1669d1f14ed5171fc628b916f8a4e15c5a1e55bffc8ccc60bfeb0b2c
-  languageName: node
-  linkType: hard
-
-"connect@npm:3.6.6":
-  version: 3.6.6
-  resolution: "connect@npm:3.6.6"
-  dependencies:
-    debug: "npm:2.6.9"
-    finalhandler: "npm:1.1.0"
-    parseurl: "npm:~1.3.2"
-    utils-merge: "npm:1.0.1"
-  checksum: 10c0/62bc03bfa8f0ed122b7cbc86b3145ecf581ca1b79ccd4d0755e10645b5dc9ba2dee39cc13b8372b5fcf532e6f7ef7a17eb920e934f9934c4ffd40adc0616c423
-  languageName: node
-  linkType: hard
-
 "consola@npm:^3.2.3":
   version: 3.2.3
   resolution: "consola@npm:3.2.3"
@@ -15380,18 +14804,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"constantinople@npm:^3.0.1, constantinople@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "constantinople@npm:3.1.2"
-  dependencies:
-    "@types/babel-types": "npm:^7.0.0"
-    "@types/babylon": "npm:^6.16.2"
-    babel-types: "npm:^6.26.0"
-    babylon: "npm:^6.18.0"
-  checksum: 10c0/5fea24b1a1a00369a0eeb22077acc6cc3b044b54820ee903feafc6b5e5b21e57a130d636cbd2e7d400d7a22cbd4df79091d6eab7f1211a5fbb3ba866f2bb5b68
-  languageName: node
-  linkType: hard
-
 "content-disposition@npm:0.5.4":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
@@ -15511,7 +14923,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.3.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.3.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.7.0
   resolution: "convert-source-map@npm:1.7.0"
   dependencies:
@@ -15534,20 +14946,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie@npm:0.3.1":
-  version: 0.3.1
-  resolution: "cookie@npm:0.3.1"
-  checksum: 10c0/0d73c4d605b234c4d04de335aefa4988157f03265845f4a89ea311e3ba1ce73ab42b52d33652ed1c9671342eb77742a58f61753f3e90f31711284fb6031b2962
-  languageName: node
-  linkType: hard
-
-"cookie@npm:0.6.0":
-  version: 0.6.0
-  resolution: "cookie@npm:0.6.0"
-  checksum: 10c0/f2318b31af7a31b4ddb4a678d024514df5e705f9be5909a192d7f116cfb6d45cbacf96a473fa733faa95050e7cff26e7832bb3ef94751592f1387b71c8956686
-  languageName: node
-  linkType: hard
-
 "cookie@npm:0.7.1":
   version: 0.7.1
   resolution: "cookie@npm:0.7.1"
@@ -15576,13 +14974,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-props@npm:^2.0.1":
-  version: 2.0.4
-  resolution: "copy-props@npm:2.0.4"
+"copy-props@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "copy-props@npm:4.0.0"
   dependencies:
-    each-props: "npm:^1.3.0"
-    is-plain-object: "npm:^2.0.1"
-  checksum: 10c0/8ab4d606a78fc5fd575d4c8439edec738aaac4ff6260036a9ac3879da62fdf397bb96aadd611c535bfe2e2a95df0900a885026ac3c4b37accf98c0cecc55aaec
+    each-props: "npm:^3.0.0"
+    is-plain-object: "npm:^5.0.0"
+  checksum: 10c0/9b8a4b9bbf70cb262756ebc0b411853937abe297be2776f00ba9414b15fd35f1405d7cf31136a84f81a629786c13da050a26ddb6954b756ff7b884bc87bc3df4
   languageName: node
   linkType: hard
 
@@ -15595,7 +14993,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:3.37.1":
+"core-js@npm:3.37.1, core-js@npm:^3.0.0, core-js@npm:^3.1.4, core-js@npm:^3.30.2":
   version: 3.37.1
   resolution: "core-js@npm:3.37.1"
   checksum: 10c0/440eb51a7a39128a320225fe349f870a3641b96c9ecd26470227db730ef8c161ea298eaea621db66ec0ff622a85299efb4e23afebf889c0a1748616102307675
@@ -15609,13 +15007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.0, core-js@npm:^3.1.4, core-js@npm:^3.30.2":
-  version: 3.36.1
-  resolution: "core-js@npm:3.36.1"
-  checksum: 10c0/4f0ad2464535d809ba659226feca15bff14b9b5452518bddff8d81b9c94b0227b3027d9838f22f1dce664958acb4107b935cc0037695ae545edc2a303bca98bf
-  languageName: node
-  linkType: hard
-
 "core-util-is@npm:1.0.2, core-util-is@npm:~1.0.0":
   version: 1.0.2
   resolution: "core-util-is@npm:1.0.2"
@@ -15633,21 +15024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^2.1.0, cosmiconfig@npm:^2.1.1":
-  version: 2.2.2
-  resolution: "cosmiconfig@npm:2.2.2"
-  dependencies:
-    is-directory: "npm:^0.3.1"
-    js-yaml: "npm:^3.4.3"
-    minimist: "npm:^1.2.0"
-    object-assign: "npm:^4.1.0"
-    os-homedir: "npm:^1.0.1"
-    parse-json: "npm:^2.2.0"
-    require-from-string: "npm:^1.1.0"
-  checksum: 10c0/be58b7e87e817280f042c0f84b78752879581989a940f963a8cb823b7c0528d58f47b5cf12539235596e84db0fc08eed658502c249474fcde6d1fa8ebd291b57
-  languageName: node
-  linkType: hard
-
 "cosmiconfig@npm:^5.1.0":
   version: 5.2.1
   resolution: "cosmiconfig@npm:5.2.1"
@@ -15840,13 +15216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-unit-converter@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "css-unit-converter@npm:1.1.2"
-  checksum: 10c0/540e94213fa5305c49215c6a2ba24d934fa400c0ae0897a87632a3a3a8f4824d168448806180c511dcfb2ecf21cf16be51af0739ff09ef5bcd946f19e9a5624d
-  languageName: node
-  linkType: hard
-
 "css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
@@ -15935,16 +15304,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"d@npm:1, d@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "d@npm:1.0.1"
-  dependencies:
-    es5-ext: "npm:^0.10.50"
-    type: "npm:^1.0.1"
-  checksum: 10c0/1fedcb3b956a461f64d86b94b347441beff5cef8910b6ac4ec509a2c67eeaa7093660a98b26601ac91f91260238add73bdf25867a9c0cb783774642bc4c1523f
-  languageName: node
-  linkType: hard
-
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -16070,7 +15429,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:3.1.0, debug@npm:=3.1.0, debug@npm:~3.1.0":
+"debug@npm:3.1.0":
   version: 3.1.0
   resolution: "debug@npm:3.1.0"
   dependencies:
@@ -16079,24 +15438,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:4.3.7, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.6":
-  version: 4.3.7
-  resolution: "debug@npm:4.3.7"
+"debug@npm:4, debug@npm:4.4.0, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.6":
+  version: 4.4.0
+  resolution: "debug@npm:4.4.0"
   dependencies:
     ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
-  languageName: node
-  linkType: hard
-
-"debug@npm:4.1.1":
-  version: 4.1.1
-  resolution: "debug@npm:4.1.1"
-  dependencies:
-    ms: "npm:^2.1.1"
-  checksum: 10c0/399e98c779ba4e71537497f10caf6390646b69330ff8a455427acce04f1ce8d8cd018e1804fdcca772177666fdcd888dd3672bb8f9986c1d785a6c2b9805f370
+  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
   languageName: node
   linkType: hard
 
@@ -16112,15 +15462,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4.4.0":
-  version: 4.4.0
-  resolution: "debug@npm:4.4.0"
+"debug@npm:4.3.7":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
   dependencies:
     ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/db94f1a182bf886f57b4755f85b3a74c39b5114b9377b7ab375dc2cfa3454f09490cc6c30f829df3fc8042bc8b8995f6567ce5cd96f3bc3688bd24027197d9de
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
   languageName: node
   linkType: hard
 
@@ -16133,7 +15483,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^3.1.0, debug@npm:^3.2.6, debug@npm:^3.2.7":
+"debug@npm:^3.1.0, debug@npm:^3.2.7":
   version: 3.2.7
   resolution: "debug@npm:3.2.7"
   dependencies:
@@ -16159,7 +15509,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decamelize@npm:^1.0.0, decamelize@npm:^1.1.0, decamelize@npm:^1.1.1, decamelize@npm:^1.1.2, decamelize@npm:^1.2.0":
+"decamelize@npm:^1.1.0, decamelize@npm:^1.1.1, decamelize@npm:^1.1.2, decamelize@npm:^1.2.0":
   version: 1.2.0
   resolution: "decamelize@npm:1.2.0"
   checksum: 10c0/85c39fe8fbf0482d4a1e224ef0119db5c1897f8503bcef8b826adff7a1b11414972f6fef2d7dec2ee0b4be3863cf64ac1439137ae9e6af23a3d8dcbe26a5b4b2
@@ -16265,15 +15615,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-compare@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "default-compare@npm:1.0.0"
-  dependencies:
-    kind-of: "npm:^5.0.2"
-  checksum: 10c0/718f6f76c327c26509697ded2b642dbe526589c98ba6316a90b6564f5084d05cf07fc38addd452d8eed9c22fb598eea5ecc52b130f602975c608e61c70251ff2
-  languageName: node
-  linkType: hard
-
 "default-require-extensions@npm:^1.0.0":
   version: 1.0.0
   resolution: "default-require-extensions@npm:1.0.0"
@@ -16292,13 +15633,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-resolution@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "default-resolution@npm:2.0.0"
-  checksum: 10c0/162c538be2dbecd09f7303a34303f97ca1684232e1cd7dd58a97cf472d3874b92ed2fba52c01cada47f595136007dec4dfdb368a7e1c043872407b97a00772ad
-  languageName: node
-  linkType: hard
-
 "defaults@npm:^1.0.0, defaults@npm:^1.0.3":
   version: 1.0.3
   resolution: "defaults@npm:1.0.3"
@@ -16387,22 +15721,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"del@npm:^5.0.0":
-  version: 5.1.0
-  resolution: "del@npm:5.1.0"
-  dependencies:
-    globby: "npm:^10.0.1"
-    graceful-fs: "npm:^4.2.2"
-    is-glob: "npm:^4.0.1"
-    is-path-cwd: "npm:^2.2.0"
-    is-path-inside: "npm:^3.0.1"
-    p-map: "npm:^3.0.0"
-    rimraf: "npm:^3.0.0"
-    slash: "npm:^3.0.0"
-  checksum: 10c0/1c25de7ff7cf4a8ee017190e39e05d2c4e19774802213d210daaa627228b50e0f5b04e7ce8cceaf03647b238732f78dc303ec5a9d54d5104de33a13fb5a899cf
-  languageName: node
-  linkType: hard
-
 "del@npm:^6.0.0":
   version: 6.1.1
   resolution: "del@npm:6.1.1"
@@ -16447,13 +15765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "depd@npm:1.1.2"
-  checksum: 10c0/acb24aaf936ef9a227b6be6d495f0d2eb20108a9a6ad40585c5bda1a897031512fef6484e4fdbb80bd249fdaa82841fa1039f416ece03188e677ba11bcfda249
-  languageName: node
-  linkType: hard
-
 "deprecated@npm:^0.0.1":
   version: 0.0.1
   resolution: "deprecated@npm:0.0.1"
@@ -16482,13 +15793,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"destroy@npm:~1.0.4":
-  version: 1.0.4
-  resolution: "destroy@npm:1.0.4"
-  checksum: 10c0/eab493808ba17a1fa22c71ef1a4e68d2c4c5222a38040606c966d2ab09117f3a7f3e05c39bffbe41a697f9de552039e43c30e46f0c3eab3faa9f82e800e172a0
-  languageName: node
-  linkType: hard
-
 "detect-file@npm:^1.0.0":
   version: 1.0.0
   resolution: "detect-file@npm:1.0.0"
@@ -16571,15 +15875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dev-ip@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "dev-ip@npm:1.0.1"
-  bin:
-    dev-ip: lib/dev-ip.js
-  checksum: 10c0/c5f1f890a97e4aead98081d3d8e95d71f456423b5c047a286a07a5793ef58022e028a2bded40b671853fc53d95c5bffd64c18e31932ef670db60ada764ce0d82
-  languageName: node
-  linkType: hard
-
 "dezalgo@npm:^1.0.0":
   version: 1.0.3
   resolution: "dezalgo@npm:1.0.3"
@@ -16634,16 +15929,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dir-glob@npm:2.0.0":
-  version: 2.0.0
-  resolution: "dir-glob@npm:2.0.0"
-  dependencies:
-    arrify: "npm:^1.0.1"
-    path-type: "npm:^3.0.0"
-  checksum: 10c0/2eb167f7d1f9330fe01db7e7cb7f66fc71b6a4282adc4d72e8d55e415730a63ad52bde58d45ecb2825a1a4c26e1b95674d1e1e60dfbd51597f43f53a2106eec2
-  languageName: node
-  linkType: hard
-
 "dir-glob@npm:^2.0.0, dir-glob@npm:^2.2.2":
   version: 2.2.2
   resolution: "dir-glob@npm:2.2.2"
@@ -16680,13 +15965,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"doctypes@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "doctypes@npm:1.1.0"
-  checksum: 10c0/b3f9d597ad8b9ac6aeba9d64df61f0098174f7570e3d34f7ee245ebc736c7bee122d9738a18e22010b98983fd9a340d63043d3841f02d8a7742a2d96d2c72610
-  languageName: node
-  linkType: hard
-
 "dom-accessibility-api@npm:^0.5.6, dom-accessibility-api@npm:^0.5.9":
   version: 0.5.10
   resolution: "dom-accessibility-api@npm:0.5.10"
@@ -16862,15 +16140,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dot-prop@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "dot-prop@npm:5.2.0"
-  dependencies:
-    is-obj: "npm:^2.0.0"
-  checksum: 10c0/2431adeab57984e51b99766fb4a0fecae9e24f92f231cb3b2e317c0de49cbc91dff9846ae7a96f2be336be32fb93deed84a5e3d30c440a9e4b46beca92fb0b2c
-  languageName: node
-  linkType: hard
-
 "dotenv-expand@npm:^10.0.0":
   version: 10.0.0
   resolution: "dotenv-expand@npm:10.0.0"
@@ -16949,13 +16218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"each-props@npm:^1.3.0":
-  version: 1.3.2
-  resolution: "each-props@npm:1.3.2"
+"each-props@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "each-props@npm:3.0.0"
   dependencies:
-    is-plain-object: "npm:^2.0.1"
+    is-plain-object: "npm:^5.0.0"
     object.defaults: "npm:^1.1.0"
-  checksum: 10c0/458eacb5703bd3d7a65c13427639980b0e7feb2a171c41af55808a04927394289c520fc0629e2d37a4fcbbb5ab3bb0c45c36ed4a86887e33c276fa823bcdc549
+  checksum: 10c0/6a9f12d84c7918adcd92fa9dadbf952a09b9c1d7800cc25ae601976d955f3dc4d67ddbfa89f62b2624aafe598bf9f1afa0c4c8f895e7da2017c7b98f9dd9cb96
   languageName: node
   linkType: hard
 
@@ -16966,24 +16235,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"easy-extender@npm:^2.3.4":
-  version: 2.3.4
-  resolution: "easy-extender@npm:2.3.4"
-  dependencies:
-    lodash: "npm:^4.17.10"
-  checksum: 10c0/0919927df255f5ad01dde06ce1b6da0665fda5b55dcc9bff8962fa96f443ce8a288bc2288e43cbf940804f250183f9e2f4ee841f2de4392a1c234d692291d705
-  languageName: node
-  linkType: hard
-
-"eazy-logger@npm:^3":
-  version: 3.0.2
-  resolution: "eazy-logger@npm:3.0.2"
-  dependencies:
-    tfunk: "npm:^3.0.1"
-  checksum: 10c0/86600e12bb6aae14393096efe98069c70d0f6854ed2d83e6572956558a6ce607c28b7b1cb7975e0a7bdb5eb28fb3e1328fef27f25168783bd0dd3ac831640047
-  languageName: node
-  linkType: hard
-
 "ecc-jsbn@npm:~0.1.1":
   version: 0.1.2
   resolution: "ecc-jsbn@npm:0.1.2"
@@ -17003,13 +16254,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"editions@npm:^1.3.3":
-  version: 1.3.4
-  resolution: "editions@npm:1.3.4"
-  checksum: 10c0/838d1eaad03bb3b3bbb054432f555664f8cd8aa59c2669f98bc64a742ff1f96f47d10395aac8fd952706d64db944ee4c5a391f52859e5b1927f2778b16adef17
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -17077,7 +16321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encodeurl@npm:~1.0.1, encodeurl@npm:~1.0.2":
+"encodeurl@npm:~1.0.2":
   version: 1.0.2
   resolution: "encodeurl@npm:1.0.2"
   checksum: 10c0/f6c2387379a9e7c1156c1c3d4f9cb7bb11cf16dd4c1682e1f6746512564b053df5781029b6061296832b59fb22f459dbe250386d217c2f6e203601abb2ee0bec
@@ -17100,7 +16344,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
+"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1, end-of-stream@npm:^1.4.4":
   version: 1.4.4
   resolution: "end-of-stream@npm:1.4.4"
   dependencies:
@@ -17118,52 +16362,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"engine.io-client@npm:~3.2.0":
-  version: 3.2.1
-  resolution: "engine.io-client@npm:3.2.1"
-  dependencies:
-    component-emitter: "npm:1.2.1"
-    component-inherit: "npm:0.0.3"
-    debug: "npm:~3.1.0"
-    engine.io-parser: "npm:~2.1.1"
-    has-cors: "npm:1.1.0"
-    indexof: "npm:0.0.1"
-    parseqs: "npm:0.0.5"
-    parseuri: "npm:0.0.5"
-    ws: "npm:~3.3.1"
-    xmlhttprequest-ssl: "npm:~1.5.4"
-    yeast: "npm:0.1.2"
-  checksum: 10c0/d84b80af32703280c3f82e63b18b03f161a1487a4e344685705755dc5d9dac7fb47ae6f2331f8b2a70d449c1e4762290070f037e3b713b5f3d257fcaf489349f
-  languageName: node
-  linkType: hard
-
-"engine.io-parser@npm:~2.1.0, engine.io-parser@npm:~2.1.1":
-  version: 2.1.3
-  resolution: "engine.io-parser@npm:2.1.3"
-  dependencies:
-    after: "npm:0.8.2"
-    arraybuffer.slice: "npm:~0.0.7"
-    base64-arraybuffer: "npm:0.1.5"
-    blob: "npm:0.0.5"
-    has-binary2: "npm:~1.0.2"
-  checksum: 10c0/4a8c01e4b19f6f6d4e9a891c51d768203b86bdefb2bc03915417096cba8d313bf84f3315f76dd4c22d9dfd86ac847b7acdf890191c21654269f5075156cbe168
-  languageName: node
-  linkType: hard
-
-"engine.io@npm:~3.2.0":
-  version: 3.2.1
-  resolution: "engine.io@npm:3.2.1"
-  dependencies:
-    accepts: "npm:~1.3.4"
-    base64id: "npm:1.0.0"
-    cookie: "npm:0.3.1"
-    debug: "npm:~3.1.0"
-    engine.io-parser: "npm:~2.1.0"
-    ws: "npm:~3.3.1"
-  checksum: 10c0/b0c202cdae554333f1e96fc6275ce86254382abf655c39923cdc33435fa52f6d889713e37172bab0919e3721a148f42d1807717c4b27c59ada2abce5653d6cdc
-  languageName: node
-  linkType: hard
-
 "enhanced-resolve@npm:^5.18.0":
   version: 5.18.0
   resolution: "enhanced-resolve@npm:5.18.0"
@@ -17216,7 +16414,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:7.14.0":
+"envinfo@npm:7.14.0, envinfo@npm:^7.7.3":
   version: 7.14.0
   resolution: "envinfo@npm:7.14.0"
   bin:
@@ -17225,15 +16423,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"envinfo@npm:^7.7.3":
-  version: 7.13.0
-  resolution: "envinfo@npm:7.13.0"
-  bin:
-    envinfo: dist/cli.js
-  checksum: 10c0/9c279213cbbb353b3171e8e333fd2ed564054abade08ab3d735fe136e10a0e14e0588e1ce77e6f01285f2462eaca945d64f0778be5ae3d9e82804943e36a4411
-  languageName: node
-  linkType: hard
-
 "err-code@npm:^1.0.0":
   version: 1.1.2
   resolution: "err-code@npm:1.1.2"
@@ -17311,16 +16500,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-define-property@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-define-property@npm:1.0.0"
-  dependencies:
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/6bf3191feb7ea2ebda48b577f69bdfac7a2b3c9bcf97307f55fd6ef1bbca0b49f0c219a935aca506c993d8c5d8bddd937766cb760cd5e5a1071351f2df9f9aa4
-  languageName: node
-  linkType: hard
-
-"es-define-property@npm:^1.0.1":
+"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1":
   version: 1.0.1
   resolution: "es-define-property@npm:1.0.1"
   checksum: 10c0/3f54eb49c16c18707949ff25a1456728c883e81259f045003499efba399c08bad00deebf65cccde8c0e07908c1a225c9d472b7107e558f2a48e28d530e34527c
@@ -17380,16 +16560,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-object-atoms@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-object-atoms@npm:1.0.0"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-  checksum: 10c0/1fed3d102eb27ab8d983337bb7c8b159dd2a1e63ff833ec54eea1311c96d5b08223b433060ba240541ca8adba9eee6b0a60cdbf2f80634b784febc9cc8b687b4
-  languageName: node
-  linkType: hard
-
-"es-object-atoms@npm:^1.1.1":
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
   version: 1.1.1
   resolution: "es-object-atoms@npm:1.1.1"
   dependencies:
@@ -17398,18 +16569,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-set-tostringtag@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "es-set-tostringtag@npm:2.0.3"
-  dependencies:
-    get-intrinsic: "npm:^1.2.4"
-    has-tostringtag: "npm:^1.0.2"
-    hasown: "npm:^2.0.1"
-  checksum: 10c0/f22aff1585eb33569c326323f0b0d175844a1f11618b86e193b386f8be0ea9474cfbe46df39c45d959f7aa8f6c06985dc51dd6bce5401645ec5a74c4ceaa836a
-  languageName: node
-  linkType: hard
-
-"es-set-tostringtag@npm:^2.1.0":
+"es-set-tostringtag@npm:^2.0.3, es-set-tostringtag@npm:^2.1.0":
   version: 2.1.0
   resolution: "es-set-tostringtag@npm:2.1.0"
   dependencies:
@@ -17441,17 +16601,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.46, es5-ext@npm:^0.10.50":
-  version: 0.10.61
-  resolution: "es5-ext@npm:0.10.61"
-  dependencies:
-    es6-iterator: "npm:^2.0.3"
-    es6-symbol: "npm:^3.1.3"
-    next-tick: "npm:^1.1.0"
-  checksum: 10c0/fceee484bbf3d7b064b8b3b9ad9095fa64e8736de322f8b48abd162f215bdd503390a3bb8c3cdeebae619825111f7eff83e1e4400fe232733da027ade8e1823e
-  languageName: node
-  linkType: hard
-
 "es6-error@npm:^4.0.1":
   version: 4.1.1
   resolution: "es6-error@npm:4.1.1"
@@ -17459,17 +16608,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-iterator@npm:^2.0.1, es6-iterator@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "es6-iterator@npm:2.0.3"
-  dependencies:
-    d: "npm:1"
-    es5-ext: "npm:^0.10.35"
-    es6-symbol: "npm:^3.1.1"
-  checksum: 10c0/91f20b799dba28fb05bf623c31857fc1524a0f1c444903beccaf8929ad196c8c9ded233e5ac7214fc63a92b3f25b64b7f2737fcca8b1f92d2d96cf3ac902f5d8
-  languageName: node
-  linkType: hard
-
 "es6-promise@npm:^4.0.3":
   version: 4.2.8
   resolution: "es6-promise@npm:4.2.8"
@@ -17486,28 +16624,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-symbol@npm:^3.1.1, es6-symbol@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "es6-symbol@npm:3.1.3"
-  dependencies:
-    d: "npm:^1.0.1"
-    ext: "npm:^1.1.2"
-  checksum: 10c0/22982f815f00df553a89f4fb74c5048fed85df598482b4bd38dbd173174247949c72982a7d7132a58b147525398400e5f182db59b0916cb49f1e245fb0e22233
-  languageName: node
-  linkType: hard
-
-"es6-weak-map@npm:^2.0.1":
-  version: 2.0.3
-  resolution: "es6-weak-map@npm:2.0.3"
-  dependencies:
-    d: "npm:1"
-    es5-ext: "npm:^0.10.46"
-    es6-iterator: "npm:^2.0.3"
-    es6-symbol: "npm:^3.1.1"
-  checksum: 10c0/460932be9542473dbbddd183e21c15a66cfec1b2c17dae2b514e190d6fb2896b7eb683783d4b36da036609d2e1c93d2815f21b374dfccaf02a8978694c2f7b67
-  languageName: node
-  linkType: hard
-
 "esbuild-plugin-alias@npm:^0.2.1":
   version: 0.2.1
   resolution: "esbuild-plugin-alias@npm:0.2.1"
@@ -17617,7 +16733,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-string-regexp@npm:^1.0.0, escape-string-regexp@npm:^1.0.2, escape-string-regexp@npm:^1.0.3, escape-string-regexp@npm:^1.0.5":
+"escape-string-regexp@npm:^1.0.0, escape-string-regexp@npm:^1.0.2, escape-string-regexp@npm:^1.0.5":
   version: 1.0.5
   resolution: "escape-string-regexp@npm:1.0.5"
   checksum: 10c0/a968ad453dd0c2724e14a4f20e177aaf32bb384ab41b674a8454afe9a41c5e6fe8903323e0a1052f56289d04bd600f81278edf140b0fcc02f5cac98d0f5b5371
@@ -18018,7 +17134,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"etag@npm:1.8.1, etag@npm:^1.8.1, etag@npm:~1.8.1":
+"etag@npm:~1.8.1":
   version: 1.8.1
   resolution: "etag@npm:1.8.1"
   checksum: 10c0/12be11ef62fb9817314d790089a0a49fae4e1b50594135dcb8076312b7d7e470884b5100d249b28c18581b7fd52f8b485689ffae22a11ed9ec17377a33a08f84
@@ -18047,13 +17163,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventemitter3@npm:1.x.x":
-  version: 1.2.0
-  resolution: "eventemitter3@npm:1.2.0"
-  checksum: 10c0/8fb54d4b00d87d0d43fe9bfd4f07bb27702a8f9f23cfa3ac854470b6e23d2868501198a74494c54a8585f8d99e0ef7f63ff926623883c13b4f93e585184867a5
-  languageName: node
-  linkType: hard
-
 "eventemitter3@npm:^3.1.0":
   version: 3.1.2
   resolution: "eventemitter3@npm:3.1.2"
@@ -18231,7 +17340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:4.21.2":
+"express@npm:4.21.2, express@npm:^4.17.3":
   version: 4.21.2
   resolution: "express@npm:4.21.2"
   dependencies:
@@ -18270,63 +17379,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:^4.17.3":
-  version: 4.19.2
-  resolution: "express@npm:4.19.2"
-  dependencies:
-    accepts: "npm:~1.3.8"
-    array-flatten: "npm:1.1.1"
-    body-parser: "npm:1.20.2"
-    content-disposition: "npm:0.5.4"
-    content-type: "npm:~1.0.4"
-    cookie: "npm:0.6.0"
-    cookie-signature: "npm:1.0.6"
-    debug: "npm:2.6.9"
-    depd: "npm:2.0.0"
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    etag: "npm:~1.8.1"
-    finalhandler: "npm:1.2.0"
-    fresh: "npm:0.5.2"
-    http-errors: "npm:2.0.0"
-    merge-descriptors: "npm:1.0.1"
-    methods: "npm:~1.1.2"
-    on-finished: "npm:2.4.1"
-    parseurl: "npm:~1.3.3"
-    path-to-regexp: "npm:0.1.7"
-    proxy-addr: "npm:~2.0.7"
-    qs: "npm:6.11.0"
-    range-parser: "npm:~1.2.1"
-    safe-buffer: "npm:5.2.1"
-    send: "npm:0.18.0"
-    serve-static: "npm:1.15.0"
-    setprototypeof: "npm:1.2.0"
-    statuses: "npm:2.0.1"
-    type-is: "npm:~1.6.18"
-    utils-merge: "npm:1.0.1"
-    vary: "npm:~1.1.2"
-  checksum: 10c0/e82e2662ea9971c1407aea9fc3c16d6b963e55e3830cd0ef5e00b533feda8b770af4e3be630488ef8a752d7c75c4fcefb15892868eeaafe7353cb9e3e269fdcb
-  languageName: node
-  linkType: hard
-
-"ext@npm:^1.1.2":
-  version: 1.2.0
-  resolution: "ext@npm:1.2.0"
-  dependencies:
-    type: "npm:^2.0.0"
-  checksum: 10c0/dee487686588ce2872cc0f483bfbd2b140fdd26ad9e4092deabc0b7c63ff8c323c53a5dcd9e20e5b60f61db368a7c16d3668a1ecc7835f712214bd278d02febe
-  languageName: node
-  linkType: hard
-
-"extend-shallow@npm:^1.1.2":
-  version: 1.1.4
-  resolution: "extend-shallow@npm:1.1.4"
-  dependencies:
-    kind-of: "npm:^1.1.0"
-  checksum: 10c0/f3509ee4ed8894ea109de203f907a3bf7d55f62352f5aab1591bd64ca84663e06e6d484dcf80ff8566e6c523632e37b58f6c34d55d8f749ca51c28c0b7ce7004
-  languageName: node
-  linkType: hard
-
 "extend-shallow@npm:^2.0.1":
   version: 2.0.1
   resolution: "extend-shallow@npm:2.0.1"
@@ -18346,7 +17398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extend@npm:^3.0.0, extend@npm:~3.0.2":
+"extend@npm:^3.0.0, extend@npm:^3.0.2, extend@npm:~3.0.2":
   version: 3.0.2
   resolution: "extend@npm:3.0.2"
   checksum: 10c0/73bf6e27406e80aa3e85b0d1c4fd987261e628064e170ca781125c0b635a3dabad5e05adbf07595ea0cf1e6c5396cacb214af933da7cbaf24fe75ff14818e8f9
@@ -18410,7 +17462,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fancy-log@npm:^1.1.0, fancy-log@npm:^1.3.2":
+"fancy-log@npm:^1.1.0":
   version: 1.3.3
   resolution: "fancy-log@npm:1.3.3"
   dependencies:
@@ -18445,7 +17497,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^2.0.2, fast-glob@npm:^2.2.6":
+"fast-glob@npm:^2.2.6":
   version: 2.2.7
   resolution: "fast-glob@npm:2.2.7"
   dependencies:
@@ -18459,7 +17511,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.0.3, fast-glob@npm:^3.1.0, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.1.0, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -18486,6 +17538,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-levenshtein@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "fast-levenshtein@npm:3.0.0"
+  dependencies:
+    fastest-levenshtein: "npm:^1.0.7"
+  checksum: 10c0/9e147c682bd0ca54474f1cbf906f6c45262fd2e7c051d2caf2cc92729dcf66949dc809f2392de6adbe1c8716fdf012f91ce38c9422aef63b5732fc688eee4046
+  languageName: node
+  linkType: hard
+
 "fast-redact@npm:^3.1.1":
   version: 3.5.0
   resolution: "fast-redact@npm:3.5.0"
@@ -18507,12 +17568,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fastq@npm:^1.6.0":
-  version: 1.8.0
-  resolution: "fastq@npm:1.8.0"
+"fastest-levenshtein@npm:^1.0.7":
+  version: 1.0.16
+  resolution: "fastest-levenshtein@npm:1.0.16"
+  checksum: 10c0/7e3d8ae812a7f4fdf8cad18e9cde436a39addf266a5986f653ea0d81e0de0900f50c0f27c6d5aff3f686bcb48acbd45be115ae2216f36a6a13a7dbbf5cad878b
+  languageName: node
+  linkType: hard
+
+"fastq@npm:^1.13.0, fastq@npm:^1.6.0":
+  version: 1.19.1
+  resolution: "fastq@npm:1.19.1"
   dependencies:
     reusify: "npm:^1.0.4"
-  checksum: 10c0/d5855c5220629bc3507d1b5c24555139b4412f715ca887ede0ce42dbf67b58efc3e2642d2e1ee50ea24d5ae0faa217e06b97d7a94cf5c5167ae13917049fed36
+  checksum: 10c0/ebc6e50ac7048daaeb8e64522a1ea7a26e92b3cee5cd1c7f2316cdca81ba543aa40a136b53891446ea5c3a67ec215fbaca87ad405f102dd97012f62916905630
   languageName: node
   linkType: hard
 
@@ -18601,13 +17669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-uri-to-path@npm:1.0.0":
-  version: 1.0.0
-  resolution: "file-uri-to-path@npm:1.0.0"
-  checksum: 10c0/3b545e3a341d322d368e880e1c204ef55f1d45cdea65f7efc6c6ce9e0c4d22d802d5629320eb779d006fe59624ac17b0e848d83cc5af7cd101f206cb704f5519
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -18658,36 +17719,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"finalhandler@npm:1.1.0":
-  version: 1.1.0
-  resolution: "finalhandler@npm:1.1.0"
-  dependencies:
-    debug: "npm:2.6.9"
-    encodeurl: "npm:~1.0.1"
-    escape-html: "npm:~1.0.3"
-    on-finished: "npm:~2.3.0"
-    parseurl: "npm:~1.3.2"
-    statuses: "npm:~1.3.1"
-    unpipe: "npm:~1.0.0"
-  checksum: 10c0/ed28bf6b7cf423dec9ab3a0016bbc2d21898e315b663f5a989a4b078537858bf3f0a2edb241bce54f66f3b5f233456c9f1dd03318ca745cd70405517aa6954cd
-  languageName: node
-  linkType: hard
-
-"finalhandler@npm:1.2.0":
-  version: 1.2.0
-  resolution: "finalhandler@npm:1.2.0"
-  dependencies:
-    debug: "npm:2.6.9"
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    on-finished: "npm:2.4.1"
-    parseurl: "npm:~1.3.3"
-    statuses: "npm:2.0.1"
-    unpipe: "npm:~1.0.0"
-  checksum: 10c0/64b7e5ff2ad1fcb14931cd012651631b721ce657da24aedb5650ddde9378bf8e95daa451da43398123f5de161a81e79ff5affe4f9f2a6d2df4a813d6d3e254b7
-  languageName: node
-  linkType: hard
-
 "finalhandler@npm:1.3.1":
   version: 1.3.1
   resolution: "finalhandler@npm:1.3.1"
@@ -18845,15 +17876,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"findup-sync@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "findup-sync@npm:3.0.0"
+"findup-sync@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "findup-sync@npm:5.0.0"
   dependencies:
     detect-file: "npm:^1.0.0"
-    is-glob: "npm:^4.0.0"
-    micromatch: "npm:^3.0.4"
+    is-glob: "npm:^4.0.3"
+    micromatch: "npm:^4.0.4"
     resolve-dir: "npm:^1.0.1"
-  checksum: 10c0/ff6f37328a7629775db2abf0fcd40e7c117baf37f23006f206c18bcd9ca0ce99d8c24ae86df540370ec76c1080ab59fe82cb71d2c7c1ad819ccccee726af7e92
+  checksum: 10c0/bbdb8af8c86a0bde4445e2f738003b92e4cd2a4539a5b45199d0252f2f504aeaf19aeca1fac776c3632c60657b2659151e72c8ead29a79617459a57419a0920b
   languageName: node
   linkType: hard
 
@@ -18870,6 +17901,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fined@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "fined@npm:2.0.0"
+  dependencies:
+    expand-tilde: "npm:^2.0.2"
+    is-plain-object: "npm:^5.0.0"
+    object.defaults: "npm:^1.1.0"
+    object.pick: "npm:^1.3.0"
+    parse-filepath: "npm:^1.0.2"
+  checksum: 10c0/0a06efeb0ede9a4e392e3a1295d238cfdb17ac0bffb0983656d34bc10dd41ffb468dc8077e0f8c140a989ec827e4a729ab77db517c1cb8f3497305710f3747e2
+  languageName: node
+  linkType: hard
+
 "first-chunk-stream@npm:^1.0.0":
   version: 1.0.0
   resolution: "first-chunk-stream@npm:1.0.0"
@@ -18884,6 +17928,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flagged-respawn@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "flagged-respawn@npm:2.0.0"
+  checksum: 10c0/630c8ce4e6dc6425d98d31a533af8a012187904bbd0ce0afebc9bf25c47da7b27901f75fca2da5ab37fc8d77109dc5da3ddab98ab400f9d9f985871513e2692a
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^4.0.0":
   version: 4.0.1
   resolution: "flat-cache@npm:4.0.1"
@@ -18901,13 +17952,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatten@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "flatten@npm:1.0.3"
-  checksum: 10c0/9f9b1f3dcd05be057bb83ec27f2513da5306e7bfc0cf8bd839ab423eb1b0f99683a25c97b48fafd5959819159659ce9f1397623a46f89a8577ba095fcf5fb753
-  languageName: node
-  linkType: hard
-
 "flow-parser@npm:0.*":
   version: 0.235.1
   resolution: "flow-parser@npm:0.235.1"
@@ -18915,7 +17959,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flush-write-stream@npm:^1.0.0, flush-write-stream@npm:^1.0.2":
+"flush-write-stream@npm:^1.0.0":
   version: 1.1.1
   resolution: "flush-write-stream@npm:1.1.1"
   dependencies:
@@ -18932,15 +17976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:1.5.10":
-  version: 1.5.10
-  resolution: "follow-redirects@npm:1.5.10"
-  dependencies:
-    debug: "npm:=3.1.0"
-  checksum: 10c0/f56ca26dcf3c9996a6cf8868b61e369a35d4000ade0292bdd27b5e0934902681b037060b9fabe58e7042bb8b85166d5db8bbcf027f1825c1577e4cffd904fd3f
-  languageName: node
-  linkType: hard
-
 "follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.6":
   version: 1.15.6
   resolution: "follow-redirects@npm:1.15.6"
@@ -19022,14 +18057,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-data@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "form-data@npm:4.0.0"
+"form-data@npm:^4.0.0, form-data@npm:~4.0.0":
+  version: 4.0.2
+  resolution: "form-data@npm:4.0.2"
   dependencies:
     asynckit: "npm:^0.4.0"
     combined-stream: "npm:^1.0.8"
+    es-set-tostringtag: "npm:^2.1.0"
     mime-types: "npm:^2.1.12"
-  checksum: 10c0/cb6f3ac49180be03ff07ba3ff125f9eba2ff0b277fb33c7fc47569fc5e616882c5b1c69b9904c4c4187e97dd0419dd03b134174756f296dec62041e6527e2c6e
+  checksum: 10c0/e534b0cf025c831a0929bf4b9bbe1a9a6b03e273a8161f9947286b9b13bf8fb279c6944aae0070c4c311100c6d6dbb815cd955dc217728caf73fad8dc5b8ee9c
   languageName: node
   linkType: hard
 
@@ -19044,18 +18080,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"form-data@npm:~4.0.0":
-  version: 4.0.2
-  resolution: "form-data@npm:4.0.2"
-  dependencies:
-    asynckit: "npm:^0.4.0"
-    combined-stream: "npm:^1.0.8"
-    es-set-tostringtag: "npm:^2.1.0"
-    mime-types: "npm:^2.1.12"
-  checksum: 10c0/e534b0cf025c831a0929bf4b9bbe1a9a6b03e273a8161f9947286b9b13bf8fb279c6944aae0070c4c311100c6d6dbb815cd955dc217728caf73fad8dc5b8ee9c
-  languageName: node
-  linkType: hard
-
 "format@npm:^0.2.0":
   version: 0.2.2
   resolution: "format@npm:0.2.2"
@@ -19099,7 +18123,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fresh@npm:0.5.2, fresh@npm:^0.5.2":
+"fresh@npm:0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
   checksum: 10c0/c6d27f3ed86cc5b601404822f31c900dd165ba63fff8152a3ef714e2012e7535027063bc67ded4cb5b3a49fa596495d46cacd9f47d6328459cf570f08b7d9e5a
@@ -19155,17 +18179,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:3.0.1":
-  version: 3.0.1
-  resolution: "fs-extra@npm:3.0.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    jsonfile: "npm:^3.0.0"
-    universalify: "npm:^0.1.0"
-  checksum: 10c0/ac3a17c9355f80aa250e102dbc4939c50ec83fca49a144bdd432f43deb0a3c07f74ec313feb2b938d6b0c1de9bfb02c2358bc602efeed5174fca692b7d4694f1
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^10.0.0":
   version: 10.0.0
   resolution: "fs-extra@npm:10.0.0"
@@ -19248,13 +18261,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-mkdirp-stream@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "fs-mkdirp-stream@npm:1.0.0"
+"fs-mkdirp-stream@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "fs-mkdirp-stream@npm:2.0.1"
   dependencies:
-    graceful-fs: "npm:^4.1.11"
-    through2: "npm:^2.0.3"
-  checksum: 10c0/c1a6a8913e6cda1741e1d146d05baa21fe6a91802b836b3a0ae1b0654269b5097727d77d97cf5f242317b2c5e44831f834fd3bb36853a2083494d94523221a39
+    graceful-fs: "npm:^4.2.8"
+    streamx: "npm:^2.12.0"
+  checksum: 10c0/57d25f59a15acd7a1c5d0c9fc0fee08f9e1224a3010e21eecedf1e6d42672b3e377d10ea41cf8fc86ceb2651601648156af615fd18216318435be48031001ec8
   languageName: node
   linkType: hard
 
@@ -19294,19 +18307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^1.2.7":
-  version: 1.2.12
-  resolution: "fsevents@npm:1.2.12"
-  dependencies:
-    bindings: "npm:^1.5.0"
-    nan: "npm:^2.12.1"
-    node-gyp: "npm:latest"
-    node-pre-gyp: "npm:*"
-  checksum: 10c0/b5f5c554c426584cba11cd5c52840627e7e7f5ed917331d287cc548803e3e4392e8eaa2894628e73e6cf52d3bddc5d4cd332604474ffea19a00e57d09d12a0e6
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
@@ -19316,18 +18316,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^1.2.7#optional!builtin<compat/fsevents>":
-  version: 1.2.12
-  resolution: "fsevents@patch:fsevents@npm%3A1.2.12#optional!builtin<compat/fsevents>::version=1.2.12&hash=d11327"
-  dependencies:
-    bindings: "npm:^1.5.0"
-    nan: "npm:^2.12.1"
-    node-gyp: "npm:latest"
-    node-pre-gyp: "npm:*"
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
@@ -19407,20 +18395,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "get-intrinsic@npm:1.2.4"
-  dependencies:
-    es-errors: "npm:^1.3.0"
-    function-bind: "npm:^1.1.2"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    hasown: "npm:^2.0.0"
-  checksum: 10c0/0a9b82c16696ed6da5e39b1267104475c47e3a9bdbe8b509dfe1710946e38a87be70d759f4bb3cda042d76a41ef47fe769660f3b7c0d1f68750299344ffb15b7
-  languageName: node
-  linkType: hard
-
-"get-intrinsic@npm:^1.2.6":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.0, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.6":
   version: 1.3.0
   resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
@@ -19736,21 +18711,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-stream@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "glob-stream@npm:6.1.0"
+"glob-stream@npm:^8.0.0":
+  version: 8.0.2
+  resolution: "glob-stream@npm:8.0.2"
   dependencies:
-    extend: "npm:^3.0.0"
-    glob: "npm:^7.1.1"
-    glob-parent: "npm:^3.1.0"
+    "@gulpjs/to-absolute-glob": "npm:^4.0.0"
+    anymatch: "npm:^3.1.3"
+    fastq: "npm:^1.13.0"
+    glob-parent: "npm:^6.0.2"
+    is-glob: "npm:^4.0.3"
     is-negated-glob: "npm:^1.0.0"
-    ordered-read-streams: "npm:^1.0.0"
-    pumpify: "npm:^1.3.5"
-    readable-stream: "npm:^2.1.5"
-    remove-trailing-separator: "npm:^1.0.1"
-    to-absolute-glob: "npm:^2.0.0"
-    unique-stream: "npm:^2.0.2"
-  checksum: 10c0/6b2653f2aafe99f17c0348de34dc0782cc20c3425ade4d4e354ef125b6e049e71cb4a209c6ea624a6a72bf99e0d7a25f1c2f04f81e42b0b8091b48d210fc48f5
+    normalize-path: "npm:^3.0.0"
+    streamx: "npm:^2.12.5"
+  checksum: 10c0/ba93be61b85d2143d2b21f35caaf5cb8450c5b72fa377353afabb4922862368be2366c45a998662eaa0098957bf1cc599e546a975767a32758c259093f5b069e
   languageName: node
   linkType: hard
 
@@ -19777,17 +18750,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-watcher@npm:^5.0.3":
-  version: 5.0.3
-  resolution: "glob-watcher@npm:5.0.3"
+"glob-watcher@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "glob-watcher@npm:6.0.0"
   dependencies:
-    anymatch: "npm:^2.0.0"
-    async-done: "npm:^1.2.0"
-    chokidar: "npm:^2.0.0"
-    is-negated-glob: "npm:^1.0.0"
-    just-debounce: "npm:^1.0.0"
-    object.defaults: "npm:^1.1.0"
-  checksum: 10c0/3bb546483cf78b48798db072d51ae02a66eb8bb8bbf229a9f75017518e607ce3d6b3fc992c0a1dca757bb45ab07e3807b8ba34fe7c4bb772591b757e80b86ac7
+    async-done: "npm:^2.0.0"
+    chokidar: "npm:^3.5.3"
+  checksum: 10c0/369a4da70657b21d6c4af185ee60c32360369f0aa6bae1446a2fe6b5337537e75b9c7a7411871c8494191c6e4c956d1705f69e53cd5b046e3474e7eaee163ea4
   languageName: node
   linkType: hard
 
@@ -19974,22 +18943,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^10.0.1":
-  version: 10.0.1
-  resolution: "globby@npm:10.0.1"
-  dependencies:
-    "@types/glob": "npm:^7.1.1"
-    array-union: "npm:^2.1.0"
-    dir-glob: "npm:^3.0.1"
-    fast-glob: "npm:^3.0.3"
-    glob: "npm:^7.1.3"
-    ignore: "npm:^5.1.1"
-    merge2: "npm:^1.2.3"
-    slash: "npm:^3.0.0"
-  checksum: 10c0/048f8e19a5ff1b3d565372e66ac22050fcc9225ccf931ce7b0971bf264fd31ea19cdd8b8ba71e4af68d8264789c1534c23939bd56b3a5b0092c52d315ecc5f1b
-  languageName: node
-  linkType: hard
-
 "globby@npm:^11.0.1, globby@npm:^11.0.2":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
@@ -20031,21 +18984,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^8.0.1":
-  version: 8.0.2
-  resolution: "globby@npm:8.0.2"
-  dependencies:
-    array-union: "npm:^1.0.1"
-    dir-glob: "npm:2.0.0"
-    fast-glob: "npm:^2.0.2"
-    glob: "npm:^7.1.2"
-    ignore: "npm:^3.3.5"
-    pify: "npm:^3.0.0"
-    slash: "npm:^1.0.0"
-  checksum: 10c0/d259027ed7678366cbff92c1d5f4c3b92d7ebbb33990052570caae84dcd909a46a7ebe364625dc26d2e29c5cdc28481d5edd15ea680d740a0620b6d6fe173f43
-  languageName: node
-  linkType: hard
-
 "globby@npm:^9.2.0":
   version: 9.2.0
   resolution: "globby@npm:9.2.0"
@@ -20082,16 +19020,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "gopd@npm:1.0.1"
+"glogg@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "glogg@npm:2.2.0"
   dependencies:
-    get-intrinsic: "npm:^1.1.3"
-  checksum: 10c0/505c05487f7944c552cee72087bf1567debb470d4355b1335f2c262d218ebbff805cd3715448fe29b4b380bae6912561d0467233e4165830efd28da241418c63
+    sparkles: "npm:^2.1.0"
+  checksum: 10c0/d5484bee0eb3ad766fbc7fe7511078d3c50707705a53a36a0d93dd8e9d5339b154b072070a25540a860758110a832d354dbf255a583a0bff5cbc3f2b83fcad4a
   languageName: node
   linkType: hard
 
-"gopd@npm:^1.2.0":
+"gopd@npm:^1.0.1, gopd@npm:^1.2.0":
   version: 1.2.0
   resolution: "gopd@npm:1.2.0"
   checksum: 10c0/50fff1e04ba2b7737c097358534eacadad1e68d24cccee3272e04e007bed008e68d2614f3987788428fd192a5ae3889d08fb2331417e4fc4a9ab366b2043cead
@@ -20126,7 +19064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.0.0, graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.2, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.10, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.8, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -20164,31 +19102,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gulp-cli@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "gulp-cli@npm:2.2.0"
+"gulp-cli@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "gulp-cli@npm:3.0.0"
   dependencies:
-    ansi-colors: "npm:^1.0.1"
-    archy: "npm:^1.0.0"
-    array-sort: "npm:^1.0.0"
-    color-support: "npm:^1.1.3"
-    concat-stream: "npm:^1.6.0"
-    copy-props: "npm:^2.0.1"
-    fancy-log: "npm:^1.3.2"
-    gulplog: "npm:^1.0.0"
-    interpret: "npm:^1.1.0"
-    isobject: "npm:^3.0.1"
-    liftoff: "npm:^3.1.0"
-    matchdep: "npm:^2.0.0"
-    mute-stdout: "npm:^1.0.0"
-    pretty-hrtime: "npm:^1.0.0"
-    replace-homedir: "npm:^1.0.0"
-    semver-greatest-satisfied-range: "npm:^1.1.0"
-    v8flags: "npm:^3.0.1"
-    yargs: "npm:^7.1.0"
+    "@gulpjs/messages": "npm:^1.1.0"
+    chalk: "npm:^4.1.2"
+    copy-props: "npm:^4.0.0"
+    gulplog: "npm:^2.2.0"
+    interpret: "npm:^3.1.1"
+    liftoff: "npm:^5.0.0"
+    mute-stdout: "npm:^2.0.0"
+    replace-homedir: "npm:^2.0.0"
+    semver-greatest-satisfied-range: "npm:^2.0.0"
+    string-width: "npm:^4.2.3"
+    v8flags: "npm:^4.0.0"
+    yargs: "npm:^16.2.0"
   bin:
     gulp: bin/gulp.js
-  checksum: 10c0/89f6000566c649371fc43c7849e369a9e2f26e1f6314f657cd4a3170fea698b89f70e19d6980991df1a319df04b59a30a3b3f35d9d819bef21c6a7b972249868
+  checksum: 10c0/6e07684ad763009e449b3858c4b202d9dea7da52c8889635463ecaab2964085ca8a682f8ca73cf43f7008de900c4164364e3565ac78a99977a61cf0595311380
   languageName: node
   linkType: hard
 
@@ -20203,69 +19135,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gulp-data@npm:^1.3.1":
-  version: 1.3.1
-  resolution: "gulp-data@npm:1.3.1"
-  dependencies:
-    plugin-error: "npm:^0.1.2"
-    through2: "npm:^2.0.0"
-    util-extend: "npm:^1.0.1"
-  checksum: 10c0/e520352f159dcbad835e8be1c51b9457b30adc3802628d64fc7bbdc251c2276b6ee7903c8149c3aa5946c37662a69e76d653619da15f58646fa6564606b7401e
-  languageName: node
-  linkType: hard
-
-"gulp-exec@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "gulp-exec@npm:3.0.2"
-  dependencies:
-    lodash.template: "npm:^4.4.0"
-    plugin-error: "npm:^0.1.2"
-    through2: "npm:^2.0.3"
-  checksum: 10c0/26e3880d4605476349b28afe8b00615c39dc527ad85b8920d25710f7708766aa12ab3229c0bb4bfb783fbaf4ab566996387763b9523143fafc2c3668168b630d
-  languageName: node
-  linkType: hard
-
-"gulp-insert@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "gulp-insert@npm:0.5.0"
-  dependencies:
-    readable-stream: "npm:^1.0.26-4"
-    streamqueue: "npm:0.0.6"
-  checksum: 10c0/10424b8330ccfca05befbe76a6078ef9e34524a6600477f43b6d2c9431c934a80b1ba721feddc03120c3585ebdbf0700d000f628048ee1d5b530cf7bce1750cb
-  languageName: node
-  linkType: hard
-
-"gulp-postcss@npm:^7.0.0":
-  version: 7.0.1
-  resolution: "gulp-postcss@npm:7.0.1"
-  dependencies:
-    fancy-log: "npm:^1.3.2"
-    plugin-error: "npm:^0.1.2"
-    postcss: "npm:^6.0.0"
-    postcss-load-config: "npm:^1.2.0"
-    vinyl-sourcemaps-apply: "npm:^0.2.1"
-  checksum: 10c0/f93c96a82ee710a34ad5a5e5d9ea56a78aa0f1cb3ccdcf2c54a8194808811cb9a5ace06fa11d5b3f3293c9cbb33623710677025335b0418fa7d0529911a0f52c
-  languageName: node
-  linkType: hard
-
-"gulp-rename@npm:^1.2.0, gulp-rename@npm:^1.4.0":
+"gulp-rename@npm:^1.2.0":
   version: 1.4.0
   resolution: "gulp-rename@npm:1.4.0"
   checksum: 10c0/81e123009470e1a4ce52c8eadf2b65d1b67293699c3e5990b27438e43a90378fd50ba8a049e5f5fc69beae72ef4504cfaf6f3c96e9a261650c20bb05efb0f2b8
   languageName: node
   linkType: hard
 
-"gulp-replace@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "gulp-replace@npm:1.0.0"
-  dependencies:
-    istextorbinary: "npm:2.2.1"
-    readable-stream: "npm:^2.0.1"
-    replacestream: "npm:^4.0.0"
-  checksum: 10c0/e9a34396ed187ccddb55da9dae130d50f7ba11ea6bd23936eb02ffe97a456623e6715a8deafbc2e3541d365f253ef48e0dd38e1000c587994eb382fffff90368
-  languageName: node
-  linkType: hard
-
 "gulp-util@npm:2.x":
   version: 2.2.20
   resolution: "gulp-util@npm:2.2.20"
@@ -20331,17 +19207,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gulp@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "gulp@npm:4.0.2"
+"gulp@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "gulp@npm:5.0.0"
   dependencies:
-    glob-watcher: "npm:^5.0.3"
-    gulp-cli: "npm:^2.2.0"
-    undertaker: "npm:^1.2.1"
-    vinyl-fs: "npm:^3.0.0"
+    glob-watcher: "npm:^6.0.0"
+    gulp-cli: "npm:^3.0.0"
+    undertaker: "npm:^2.0.0"
+    vinyl-fs: "npm:^4.0.0"
   bin:
-    gulp: ./bin/gulp.js
-  checksum: 10c0/5433fa64680b68b1e747868cc68563c3ab4a3b3a60e63fc930de3e8fc71ac1c3ce7ea9657a3e306103fe39961ea156fdb9a1af37764aa8f450ac5c8fed2fa98d
+    gulp: bin/gulp.js
+  checksum: 10c0/b8d40cd1a9ec321bfccd0e80e587088269b65985328987be05053ed852dd0ce020b1697d0f7916401a0fd8f761b03ff234a317eb71160da68c79e03d291b1550
   languageName: node
   linkType: hard
 
@@ -20354,6 +19230,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"gulplog@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "gulplog@npm:2.2.0"
+  dependencies:
+    glogg: "npm:^2.2.0"
+  checksum: 10c0/e19fc5a28f37568cccb667bcfa593aff223937c29b9e72871b82816d6c14537fe174e70de782ed01562da86a8cfb0dfb598285fe29603478376969c2da7b6a45
+  languageName: node
+  linkType: hard
+
 "gunzip-maybe@npm:^1.4.2":
   version: 1.4.2
   resolution: "gunzip-maybe@npm:1.4.2"
@@ -20370,7 +19255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"handlebars@npm:4.7.8":
+"handlebars@npm:4.7.8, handlebars@npm:^4.0.3, handlebars@npm:^4.1.2, handlebars@npm:^4.4.0, handlebars@npm:^4.7.7":
   version: 4.7.8
   resolution: "handlebars@npm:4.7.8"
   dependencies:
@@ -20388,24 +19273,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"handlebars@npm:^4.0.3, handlebars@npm:^4.1.2, handlebars@npm:^4.4.0, handlebars@npm:^4.7.7":
-  version: 4.7.7
-  resolution: "handlebars@npm:4.7.7"
-  dependencies:
-    minimist: "npm:^1.2.5"
-    neo-async: "npm:^2.6.0"
-    source-map: "npm:^0.6.1"
-    uglify-js: "npm:^3.1.4"
-    wordwrap: "npm:^1.0.0"
-  dependenciesMeta:
-    uglify-js:
-      optional: true
-  bin:
-    handlebars: bin/handlebars
-  checksum: 10c0/4c0913fc0018a2a2e358ee94e4fe83f071762b8bec51a473d187e6642e94e569843adcf550ffe329554c63ad450c062f3a05447bd2e3fff5ebfe698e214225c6
-  languageName: node
-  linkType: hard
-
 "har-schema@npm:^2.0.0":
   version: 2.0.0
   resolution: "har-schema@npm:2.0.0"
@@ -20457,22 +19324,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-binary2@npm:~1.0.2":
-  version: 1.0.3
-  resolution: "has-binary2@npm:1.0.3"
-  dependencies:
-    isarray: "npm:2.0.1"
-  checksum: 10c0/0ff135b01acfe219badc4b53d939fcec20683cdbe068bf91bfb4c949197eacc141be53c2d93a92c0515b29abc355dfac1e6f03103bfd6b876c8e2e5ca4108afb
-  languageName: node
-  linkType: hard
-
-"has-cors@npm:1.1.0":
-  version: 1.1.0
-  resolution: "has-cors@npm:1.1.0"
-  checksum: 10c0/5ca44b97681cb05c4fde04bf3d8d84d0b0a95d6134eb5821e057ea3b09f4c658c8b499bcdfc4d8ad669253b5249767062e2882eba40950eb73e4465748d4f3cf
-  languageName: node
-  linkType: hard
-
 "has-flag@npm:^1.0.0":
   version: 1.0.0
   resolution: "has-flag@npm:1.0.0"
@@ -20512,21 +19363,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3":
+"has-proto@npm:^1.0.3":
   version: 1.0.3
   resolution: "has-proto@npm:1.0.3"
   checksum: 10c0/35a6989f81e9f8022c2f4027f8b48a552de714938765d019dbea6bb547bd49ce5010a3c7c32ec6ddac6e48fc546166a3583b128f5a7add8b058a6d8b4afec205
   languageName: node
   linkType: hard
 
-"has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "has-symbols@npm:1.0.3"
-  checksum: 10c0/e6922b4345a3f37069cdfe8600febbca791c94988c01af3394d86ca3360b4b93928bbf395859158f88099cb10b19d98e3bbab7c9ff2c1bd09cf665ee90afa2c3
-  languageName: node
-  linkType: hard
-
-"has-symbols@npm:^1.1.0":
+"has-symbols@npm:^1.0.1, has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
   version: 1.1.0
   resolution: "has-symbols@npm:1.1.0"
   checksum: 10c0/dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e
@@ -20598,7 +19442,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2":
+"hasown@npm:^2.0.0, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
   dependencies:
@@ -20808,18 +19652,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:~1.6.2":
-  version: 1.6.3
-  resolution: "http-errors@npm:1.6.3"
-  dependencies:
-    depd: "npm:~1.1.2"
-    inherits: "npm:2.0.3"
-    setprototypeof: "npm:1.1.0"
-    statuses: "npm:>= 1.4.0 < 2"
-  checksum: 10c0/17ec4046ee974477778bfdd525936c254b872054703ec2caa4d6f099566b8adade636ae6aeeacb39302c5cd6e28fb407ebd937f500f5010d0b6850750414ff78
-  languageName: node
-  linkType: hard
-
 "http-proxy-agent@npm:^2.1.0":
   version: 2.1.0
   resolution: "http-proxy-agent@npm:2.1.0"
@@ -20869,16 +19701,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy@npm:1.15.2":
-  version: 1.15.2
-  resolution: "http-proxy@npm:1.15.2"
-  dependencies:
-    eventemitter3: "npm:1.x.x"
-    requires-port: "npm:1.x.x"
-  checksum: 10c0/abb27cfa6df35f7a0d682c99738fb9579e439d83efc5b990a98663a45e4d877d61dfde6afde69b1408761c4ef59339bdab6321c7b929c2695367ebf3d9ccd5a7
-  languageName: node
-  linkType: hard
-
 "http-proxy@npm:^1.18.1":
   version: 1.18.1
   resolution: "http-proxy@npm:1.18.1"
@@ -20989,7 +19811,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24, iconv-lite@npm:^0.4.4":
+"iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
   dependencies:
@@ -20998,7 +19820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2, iconv-lite@npm:^0.6.3":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
   dependencies:
@@ -21016,14 +19838,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ieee754@npm:^1.1.4":
-  version: 1.1.13
-  resolution: "ieee754@npm:1.1.13"
-  checksum: 10c0/eaf8c87e014282bfb5b13670991a2ed086eaef35ccc3fb713833863f2e7213041b2c29246adbc5f6561d51d53861c3b11f3b82b28fc6fa1352edeff381f056e5
-  languageName: node
-  linkType: hard
-
-"ieee754@npm:^1.2.1":
+"ieee754@npm:^1.1.4, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
   checksum: 10c0/b0782ef5e0935b9f12883a2e2aa37baa75da6e66ce6515c168697b42160807d9330de9a32ec1ed73149aea02e0d822e572bca6f1e22bdcbd2149e13b050b17bb
@@ -21067,20 +19882,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.3.1":
+"ignore@npm:^5.2.0, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
-"immutable@npm:^3":
-  version: 3.8.2
-  resolution: "immutable@npm:3.8.2"
-  checksum: 10c0/fb6a2999ad3bda9e51741721e42547076dd492635ee4df9241224055fe953ec843583a700088cc4915f23dc326e5084f4e17f1bbd7388c3e872ef5a242e0ac5e
-  languageName: node
-  linkType: hard
-
 "import-fresh@npm:^2.0.0":
   version: 2.0.0
   resolution: "import-fresh@npm:2.0.0"
@@ -21162,20 +19970,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"indexes-of@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "indexes-of@npm:1.0.1"
-  checksum: 10c0/1ea1d2d00173fa38f728acfa00303657e1115361481e52f6cbae47c5d603219006c9357abf6bc323f1fb0fbe937e363bbb19e5c66c12578eea6ec6b7e892bdba
-  languageName: node
-  linkType: hard
-
-"indexof@npm:0.0.1":
-  version: 0.0.1
-  resolution: "indexof@npm:0.0.1"
-  checksum: 10c0/31f2b90def1d5429db21384a10d0ccc0d7bdbf0566d30d7fcabf99c7c2b7ffe420bb8fabadcce85e3d453b0e590c507de64401abe8c3eb238c878e78fcb98d33
-  languageName: node
-  linkType: hard
-
 "infer-owner@npm:^1.0.3, infer-owner@npm:^1.0.4":
   version: 1.0.4
   resolution: "infer-owner@npm:1.0.4"
@@ -21207,13 +20001,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.3":
-  version: 2.0.3
-  resolution: "inherits@npm:2.0.3"
-  checksum: 10c0/6e56402373149ea076a434072671f9982f5fad030c7662be0332122fe6c0fa490acb3cc1010d90b6eff8d640b1167d77674add52dfd1bb85d545cf29e80e73e7
-  languageName: node
-  linkType: hard
-
 "ini@npm:^1.3.2, ini@npm:^1.3.4, ini@npm:~1.3.0":
   version: 1.3.5
   resolution: "ini@npm:1.3.5"
@@ -21276,13 +20063,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"interpret@npm:^1.0.0, interpret@npm:^1.1.0, interpret@npm:^1.2.0":
+"interpret@npm:^1.0.0, interpret@npm:^1.2.0":
   version: 1.2.0
   resolution: "interpret@npm:1.2.0"
   checksum: 10c0/1482626650a5ba3cfdbe42a43c8feb939ef51cfd6b056686e40943ea215ac2055f9ed7c632ed2521180de2c01197d8b8a02961324e21f89339379cd76ec56a51
   languageName: node
   linkType: hard
 
+"interpret@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "interpret@npm:3.1.1"
+  checksum: 10c0/6f3c4d0aa6ec1b43a8862375588a249e3c917739895cbe67fe12f0a76260ea632af51e8e2431b50fbcd0145356dc28ca147be08dbe6a523739fd55c0f91dc2a5
+  languageName: node
+  linkType: hard
+
 "intl-messageformat@npm:^10.1.0":
   version: 10.1.1
   resolution: "intl-messageformat@npm:10.1.1"
@@ -21439,15 +20233,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-binary-path@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "is-binary-path@npm:1.0.1"
-  dependencies:
-    binary-extensions: "npm:^1.0.0"
-  checksum: 10c0/16e456fa3782eaf3d8e28d382b750507e3d54ff6694df8a1b2c6498da321e2ead311de9c42e653d8fb3213de72bac204b5f97e4a110cda8a72f17b1c1b4eb643
-  languageName: node
-  linkType: hard
-
 "is-binary-path@npm:~2.1.0":
   version: 2.1.0
   resolution: "is-binary-path@npm:2.1.0"
@@ -21474,7 +20259,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-buffer@npm:^2.0.0, is-buffer@npm:^2.0.2":
+"is-buffer@npm:^2.0.0":
   version: 2.0.4
   resolution: "is-buffer@npm:2.0.4"
   checksum: 10c0/d02bda79ca71c8da645d74046f89283ada2cfd02c74dfadb88dfa5b722b8f577019ec520016938ed171aaff8c818f93014c7431ece44976c0969e1267194fbd3
@@ -21623,16 +20408,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-expression@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-expression@npm:3.0.0"
-  dependencies:
-    acorn: "npm:~4.0.2"
-    object-assign: "npm:^4.0.1"
-  checksum: 10c0/3b21d6b1351d7a3a28ee565eeb5b1bd7128473af9c0f2fc8fd424b7ab2c1da37359d01da29439dd3b3ded8d8286dfc736fb9f3342abc8ce79191c722ac2cb662
-  languageName: node
-  linkType: hard
-
 "is-extendable@npm:^0.1.0, is-extendable@npm:^0.1.1":
   version: 0.1.1
   resolution: "is-extendable@npm:0.1.1"
@@ -21846,15 +20621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-number-like@npm:^1.0.3":
-  version: 1.0.8
-  resolution: "is-number-like@npm:1.0.8"
-  dependencies:
-    lodash.isfinite: "npm:^3.3.2"
-  checksum: 10c0/082f407c5f463b3618b5941f7f54541f6cb58bd6af1a80e42daaba7f81ed49785bb11f7ef3010051f6916cc3f97ed6cb40e7e87d15cea81f95306d34a1926ead
-  languageName: node
-  linkType: hard
-
 "is-number-object@npm:^1.0.4":
   version: 1.0.7
   resolution: "is-number-object@npm:1.0.7"
@@ -21903,13 +20669,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-obj@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-obj@npm:2.0.0"
-  checksum: 10c0/85044ed7ba8bd169e2c2af3a178cacb92a97aa75de9569d02efef7f443a824b5e153eba72b9ae3aca6f8ce81955271aa2dc7da67a8b720575d3e38104208cb4e
-  languageName: node
-  linkType: hard
-
 "is-path-cwd@npm:^2.0.0, is-path-cwd@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-path-cwd@npm:2.2.0"
@@ -21944,7 +20703,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-path-inside@npm:^3.0.1, is-path-inside@npm:^3.0.2":
+"is-path-inside@npm:^3.0.2":
   version: 3.0.3
   resolution: "is-path-inside@npm:3.0.3"
   checksum: 10c0/cf7d4ac35fb96bab6a1d2c3598fe5ebb29aafb52c0aaa482b5a3ed9d8ba3edc11631e3ec2637660c44b3ce0e61a08d54946e8af30dec0b60a7c27296c68ffd05
@@ -21979,7 +20738,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-object@npm:^2.0.1, is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
+"is-plain-object@npm:^2.0.3, is-plain-object@npm:^2.0.4":
   version: 2.0.4
   resolution: "is-plain-object@npm:2.0.4"
   dependencies:
@@ -22009,7 +20768,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-promise@npm:^2.0.0, is-promise@npm:^2.1.0":
+"is-promise@npm:^2.1.0":
   version: 2.2.2
   resolution: "is-promise@npm:2.2.2"
   checksum: 10c0/2dba959812380e45b3df0fb12e7cb4d4528c989c7abb03ececb1d1fd6ab1cbfee956ca9daa587b9db1d8ac3c1e5738cf217bdb3dfd99df8c691be4c00ae09069
@@ -22039,7 +20798,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.3, is-regex@npm:^1.1.4":
+"is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
   dependencies:
@@ -22179,7 +20938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-utf8@npm:^0.2.0, is-utf8@npm:^0.2.1":
+"is-utf8@npm:^0.2.0":
   version: 0.2.1
   resolution: "is-utf8@npm:0.2.1"
   checksum: 10c0/3ed45e5b4ddfa04ed7e32c63d29c61b980ecd6df74698f45978b8c17a54034943bcbffb6ae243202e799682a66f90fef526f465dd39438745e9fe70794c1ef09
@@ -22233,13 +20992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-wsl@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "is-wsl@npm:1.1.0"
-  checksum: 10c0/7ad0012f21092d6f586c7faad84755a8ef0da9b9ec295e4dc82313cce4e1a93a3da3c217265016461f9b141503fe55fa6eb1fd5457d3f05e8d1bdbb48e50c13a
-  languageName: node
-  linkType: hard
-
 "is-wsl@npm:^2.2.0":
   version: 2.2.0
   resolution: "is-wsl@npm:2.2.0"
@@ -22263,13 +21015,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isarray@npm:2.0.1":
-  version: 2.0.1
-  resolution: "isarray@npm:2.0.1"
-  checksum: 10c0/ff43dc2ae104ca8c521db397f5c6cc3c8ba68ee33f186f92de72887be0c4ca1333df1386b20f376a520f41739d5a0f5f61fbb6826f10aa2d619ede603e477dc6
-  languageName: node
-  linkType: hard
-
 "isarray@npm:^2.0.5":
   version: 2.0.5
   resolution: "isarray@npm:2.0.5"
@@ -22493,17 +21238,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"istextorbinary@npm:2.2.1":
-  version: 2.2.1
-  resolution: "istextorbinary@npm:2.2.1"
-  dependencies:
-    binaryextensions: "npm:2"
-    editions: "npm:^1.3.3"
-    textextensions: "npm:2"
-  checksum: 10c0/fa70c089438085c40d4f048fe79b28dd0d958a971970b5bb01b8fb572b9fc4cb2199519537d58f17d6cda70fe6a8b8012e7140248a9068377ef4794073217f4f
-  languageName: node
-  linkType: hard
-
 "iterator.prototype@npm:^1.1.3":
   version: 1.1.3
   resolution: "iterator.prototype@npm:1.1.3"
@@ -23151,13 +21885,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-stringify@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "js-stringify@npm:1.0.2"
-  checksum: 10c0/a450c04fde3a7e1c27f1c3c4300433f8d79322f9e3c2e76266843cef8c0b5a69b5f11b5f173212b2f15f2df09e068ef7ddf46ef775e2486f3006a6f4e912578d
-  languageName: node
-  linkType: hard
-
 "js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
@@ -23190,7 +21917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:^3.13.1, js-yaml@npm:^3.4.3":
+"js-yaml@npm:^3.13.1":
   version: 3.14.0
   resolution: "js-yaml@npm:3.14.0"
   dependencies:
@@ -23423,18 +22150,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "jsonfile@npm:3.0.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: 10c0/159ec98712d5a0f77ddb96ddbde0ecc5fb1108fadab5b85cea18f508be78eabf03a3370b3769112fce1d8772b4e396f81d7c0d378ac5d7955bee5f1330cf1b19
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"
@@ -23509,16 +22224,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jstransformer@npm:1.0.0":
-  version: 1.0.0
-  resolution: "jstransformer@npm:1.0.0"
-  dependencies:
-    is-promise: "npm:^2.0.0"
-    promise: "npm:^7.0.1"
-  checksum: 10c0/11f9b4f368a55878dd7973154cd83b0adca27f974d21217728652530775b2bec281e92109de66f0c9e37c76af796d5b76b33f3e38363214a83d102d523a7285b
-  languageName: node
-  linkType: hard
-
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -23531,13 +22236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"just-debounce@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "just-debounce@npm:1.0.0"
-  checksum: 10c0/743402de4ad44257be4c3c44f7eb79ff14050558b2090f1ac52c88421d59f36015941d3147a087ba9f35b9323173447c95dfb9aed6f9ac74bd3b27ab5d04e931
-  languageName: node
-  linkType: hard
-
 "just-extend@npm:^4.0.2":
   version: 4.0.2
   resolution: "just-extend@npm:4.0.2"
@@ -23587,13 +22285,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "kind-of@npm:1.1.0"
-  checksum: 10c0/24bded3cda73094d61a3f0780d6a5cac2fc25a898885eaf4f2bb1a8ce497e3eee5f3fa30b11455d35d3e8153f82724f43837524c2c80737211d8dc7c17ffe572
-  languageName: node
-  linkType: hard
-
 "kind-of@npm:^3.0.2, kind-of@npm:^3.0.3, kind-of@npm:^3.2.0":
   version: 3.2.2
   resolution: "kind-of@npm:3.2.2"
@@ -23612,7 +22303,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kind-of@npm:^5.0.0, kind-of@npm:^5.0.2":
+"kind-of@npm:^5.0.0":
   version: 5.1.0
   resolution: "kind-of@npm:5.1.0"
   checksum: 10c0/fe85b7a2ed4b4d5a12e16e01d00d5c336e1760842fe0da38283605b9880c984288935e87b13138909e4d23d2d197a1d492f7393c6638d2c0fab8a900c4fb0392
@@ -23635,7 +22326,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:4.1.5":
+"kleur@npm:4.1.5, kleur@npm:^4.0.3":
   version: 4.1.5
   resolution: "kleur@npm:4.1.5"
   checksum: 10c0/e9de6cb49657b6fa70ba2d1448fd3d691a5c4370d8f7bbf1c2f64c24d461270f2117e1b0afe8cb3114f13bbd8e51de158c2a224953960331904e636a5e4c0f2a
@@ -23649,13 +22340,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.0.3":
-  version: 4.1.4
-  resolution: "kleur@npm:4.1.4"
-  checksum: 10c0/c70aaa99a6797b0a73a6f8a84c3912dbf49c95acf78cb661e30677999914843d0f5deedb0910458259c43c5fd98ea3195777988a8291c058874e29344dd1ea0c
-  languageName: node
-  linkType: hard
-
 "knox@npm:0.x":
   version: 0.9.2
   resolution: "knox@npm:0.9.2"
@@ -23692,13 +22376,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"last-run@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "last-run@npm:1.1.1"
-  dependencies:
-    default-resolution: "npm:^2.0.0"
-    es6-weak-map: "npm:^2.0.1"
-  checksum: 10c0/dd468d32839d1f548e0b30b76fbb015aa01c1a10bcddedfe39d7f06612e91292899411aaecd6c420a024c368d853fa8845613f7b304b3d173892be07872a4a9c
+"last-run@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "last-run@npm:2.0.0"
+  checksum: 10c0/08925a9904e399229e02f448e572875553c477712089ed434af7482a2662dc5817cb9da29fadf2df63a479c9d16b1f09e0e0d5c1aec19c206397bfe8c3bba4d2
   languageName: node
   linkType: hard
 
@@ -23711,13 +22392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lazy-cache@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "lazy-cache@npm:1.0.4"
-  checksum: 10c0/00f4868a27dc5c491ad86f46068d19bc97c0402d6c7c1449a977fade8ce667d4723beac8e12fdb1d6237156dd25ab0d3c963422bdfcbc76fd25941bfe3c6f015
-  languageName: node
-  linkType: hard
-
 "lazy-universal-dotenv@npm:^4.0.0":
   version: 4.0.0
   resolution: "lazy-universal-dotenv@npm:4.0.0"
@@ -23729,15 +22403,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lazystream@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "lazystream@npm:1.0.0"
-  dependencies:
-    readable-stream: "npm:^2.0.5"
-  checksum: 10c0/920d4467df293f0235c78354d7cbfe48e4fa5fa86d28e2259b910817d3531cc6edb24c603c0a7d52a3187e70bc795315cadf3ee724f625df320e9c06db25b963
-  languageName: node
-  linkType: hard
-
 "lcid@npm:^1.0.0":
   version: 1.0.0
   resolution: "lcid@npm:1.0.0"
@@ -23747,12 +22412,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lead@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "lead@npm:1.0.0"
-  dependencies:
-    flush-write-stream: "npm:^1.0.2"
-  checksum: 10c0/355fa4cce74a62cec9d4dc4520a8a6a3bd0472e88e070208a895aa1d144bd5f35a099e0f0d4938f4bc909b6a40fb64cc389e0ec32cc86471540e7a643ffe0519
+"lead@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "lead@npm:4.0.0"
+  checksum: 10c0/71d2509b3c921dc74c47561a3c7bf0b76ecb530af178c3e0f469f3bdf20940ca08bcb4f18bbcfde0619706c1e550d3ba67ea187407722304db8fd3bc13a4405d
   languageName: node
   linkType: hard
 
@@ -23834,19 +22497,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"liftoff@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "liftoff@npm:3.1.0"
+"liftoff@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "liftoff@npm:5.0.0"
   dependencies:
-    extend: "npm:^3.0.0"
-    findup-sync: "npm:^3.0.0"
-    fined: "npm:^1.0.1"
-    flagged-respawn: "npm:^1.0.0"
-    is-plain-object: "npm:^2.0.4"
-    object.map: "npm:^1.0.0"
-    rechoir: "npm:^0.6.2"
-    resolve: "npm:^1.1.7"
-  checksum: 10c0/f4cf3f09a3c368e8ee349dc11cfaae39898d1063e803a05ebacf34949eab20dd9448c682684f5933fdef0b3a61b4e56ae2dbd089689cbb892690d7e368330c20
+    extend: "npm:^3.0.2"
+    findup-sync: "npm:^5.0.0"
+    fined: "npm:^2.0.0"
+    flagged-respawn: "npm:^2.0.0"
+    is-plain-object: "npm:^5.0.0"
+    rechoir: "npm:^0.8.0"
+    resolve: "npm:^1.20.0"
+  checksum: 10c0/3890be872644a43361620adaee3cc2512ba39ba1f4f96f65c8913918b6d31c6be2d0ef248701bae3c291e3926aa15d88ccdda4fcaf2fa88af9a1b830dbb400a6
   languageName: node
   linkType: hard
 
@@ -23960,13 +22622,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"limiter@npm:^1.0.5":
-  version: 1.1.4
-  resolution: "limiter@npm:1.1.4"
-  checksum: 10c0/45ae482459931b27950159f295eda732f0f82d5632d546b9a58fe4c53b5db9d68ceb175d7e2b0475ed3da68eab3f408559900b606ce403bb28c4a7d46cdd6b49
-  languageName: node
-  linkType: hard
-
 "lines-and-columns@npm:^1.1.6":
   version: 1.1.6
   resolution: "lines-and-columns@npm:1.1.6"
@@ -24047,20 +22702,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"localtunnel@npm:1.9.2":
-  version: 1.9.2
-  resolution: "localtunnel@npm:1.9.2"
-  dependencies:
-    axios: "npm:0.19.0"
-    debug: "npm:4.1.1"
-    openurl: "npm:1.1.1"
-    yargs: "npm:6.6.0"
-  bin:
-    lt: ./bin/client
-  checksum: 10c0/6a14f4475407faf71b84cd59939b57c13bc797d5ffb419b2272c2279d9e5df19d3498d28259d470c5134138285f7b2e31711b3970212a02af5329bcef151c250
-  languageName: node
-  linkType: hard
-
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -24320,13 +22961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isfinite@npm:^3.3.2":
-  version: 3.3.2
-  resolution: "lodash.isfinite@npm:3.3.2"
-  checksum: 10c0/997f5f2e96daf3f9f7e27a46cf5b409097d6426e137357f95b1aa357b3abfdf6c61225d451aab40be58941a87df5d5ca85617e85960f6fe50ee09aba41a974de
-  languageName: node
-  linkType: hard
-
 "lodash.isinteger@npm:^4.0.4":
   version: 4.0.4
   resolution: "lodash.isinteger@npm:4.0.4"
@@ -24460,7 +23094,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.template@npm:^4.0.2, lodash.template@npm:^4.4.0, lodash.template@npm:^4.5.0":
+"lodash.template@npm:^4.0.2, lodash.template@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.template@npm:4.5.0"
   dependencies:
@@ -24515,7 +23149,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:4, lodash@npm:4.17.21, lodash@npm:^4.17.10, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.2.1":
+"lodash@npm:4, lodash@npm:4.17.21, lodash@npm:^4.17.12, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.2.1":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: 10c0/d8cbea072bb08655bb4c989da418994b073a608dffa608b09ac04b43a791b12aeae7cd7ad919aa4c925f33b48490b5cfe6c1f71d827956071dae2e7bb3a6b74c
@@ -24576,13 +23210,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"longest@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "longest@npm:1.0.1"
-  checksum: 10c0/e77bd510ea4083cc202a8985be1d422d4183e1078775bcf6c5d9aee3e401d9094b44348c720f9d349f230293865b09ee611453ac4694422ad43a9a9bdb092c82
-  languageName: node
-  linkType: hard
-
 "loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
@@ -24888,29 +23515,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown@npm:^0.5.0":
-  version: 0.5.0
-  resolution: "markdown@npm:0.5.0"
-  dependencies:
-    nopt: "npm:~2.1.1"
-  bin:
-    md2html: ./bin/md2html.js
-  checksum: 10c0/f9feeb2c3c4ad5a96399d2fe421c2d2cdc5862eaa89b1711864f3c819dc23d41765daae9566ecc38e19f46f3ddaea7a0f2e9e3fd044319554a686206e0de7052
-  languageName: node
-  linkType: hard
-
-"matchdep@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "matchdep@npm:2.0.0"
-  dependencies:
-    findup-sync: "npm:^2.0.0"
-    micromatch: "npm:^3.0.4"
-    resolve: "npm:^1.4.0"
-    stack-trace: "npm:0.0.10"
-  checksum: 10c0/0a44d235d1edc84fe37cf8b07f55bb6b9f10480bb754f21692421b04e020a9b5f8f9f2e138119e4eac219027328daa4d9cae7dc4c38e08f23cf29cc5dfb8a727
-  languageName: node
-  linkType: hard
-
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -25193,13 +23797,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-descriptors@npm:1.0.1":
-  version: 1.0.1
-  resolution: "merge-descriptors@npm:1.0.1"
-  checksum: 10c0/b67d07bd44cfc45cebdec349bb6e1f7b077ee2fd5beb15d1f7af073849208cb6f144fe403e29a36571baf3f4e86469ac39acf13c318381e958e186b2766f54ec
-  languageName: node
-  linkType: hard
-
 "merge-descriptors@npm:1.0.3":
   version: 1.0.3
   resolution: "merge-descriptors@npm:1.0.3"
@@ -25647,7 +24244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12, mime-types@npm:^2.1.25, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.25, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -25665,15 +24262,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime@npm:1.4.1":
-  version: 1.4.1
-  resolution: "mime@npm:1.4.1"
-  bin:
-    mime: cli.js
-  checksum: 10c0/ba9db9f7eb3eaae61c072cf06d744db99c091b5c9fa49f68e44ada7c6cccc89568c7a830f9ae0a11f37c88ca3851cb59a138e4703895e01d55dbff274feb74be
-  languageName: node
-  linkType: hard
-
 "mime@npm:1.6.0, mime@npm:1.x":
   version: 1.6.0
   resolution: "mime@npm:1.6.0"
@@ -25936,13 +24524,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mitt@npm:^1.1.3":
-  version: 1.2.0
-  resolution: "mitt@npm:1.2.0"
-  checksum: 10c0/81a0f22b7ac1a0ab5f17489e811641ad589b5e9d2a46a25adac19c8c0ba9c3b50bef7b287582357de25eaa0a47e5d4ced63ea8b8641ba6ca1d1f39d3ec47bb11
-  languageName: node
-  linkType: hard
-
 "mixin-deep@npm:^1.2.0":
   version: 1.3.2
   resolution: "mixin-deep@npm:1.3.2"
@@ -26127,10 +24708,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mute-stdout@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "mute-stdout@npm:1.0.1"
-  checksum: 10c0/5b6a20ee77cbe9e61fa52cfb1f2ddf1c21d49a0c874a2f6a24bbff962031084a0694a0258e92b33c0f492229416031c1a53d4dcffc902b981daff2379fd40903
+"mute-stdout@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mute-stdout@npm:2.0.0"
+  checksum: 10c0/21e6b65796b69a8e7bd9771317b1990c911c722b7fc6e78eefc9b28d8042af36d8fd161d4bdf2a9b3663cb9067a9679f68517eae7e62ea42d36e0ea6caf9296b
   languageName: node
   linkType: hard
 
@@ -26159,15 +24740,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1":
-  version: 2.15.0
-  resolution: "nan@npm:2.15.0"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 10c0/797924e8dd64c32d571f322f998d5aa5a732012a23315976456017ea37515b21a808020995d7f48b716476b7e9a6a1ba9cce43bee30399016b9ac7257454ea04
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^3.3.6":
   version: 3.3.6
   resolution: "nanoid@npm:3.3.6"
@@ -26210,47 +24782,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"needle@npm:^2.5.2":
-  version: 2.9.1
-  resolution: "needle@npm:2.9.1"
-  dependencies:
-    debug: "npm:^3.2.6"
-    iconv-lite: "npm:^0.4.4"
-    sax: "npm:^1.2.4"
-  bin:
-    needle: ./bin/needle
-  checksum: 10c0/65a7eaeaf4ca3410de492957474592af9838e02875273d9232ff6cff331393c58a95e48c592bd9a05f575e5bb9b08543d6cfd19eb96595dbd3d7da2c5fe1accb
-  languageName: node
-  linkType: hard
-
-"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: 10c0/3ec9fd413e7bf071c937ae60d572bc67155262068ed522cf4b3be5edbe6ddf67d095ec03a3a14ebf8fc8e95f8e1d61be4869db0dbb0de696f6b837358bd43fc2
   languageName: node
   linkType: hard
 
-"negotiator@npm:~0.6.4":
+"negotiator@npm:^0.6.3, negotiator@npm:~0.6.4":
   version: 0.6.4
   resolution: "negotiator@npm:0.6.4"
   checksum: 10c0/3e677139c7fb7628a6f36335bf11a885a62c21d5390204590a1a214a5631fcbe5ea74ef6a610b60afe84b4d975cbe0566a23f20ee17c77c73e74b80032108dea
   languageName: node
   linkType: hard
 
-"neo-async@npm:^2.5.0, neo-async@npm:^2.6.0, neo-async@npm:^2.6.2":
+"neo-async@npm:^2.5.0, neo-async@npm:^2.6.2":
   version: 2.6.2
   resolution: "neo-async@npm:2.6.2"
   checksum: 10c0/c2f5a604a54a8ec5438a342e1f356dff4bc33ccccdb6dc668d94fe8e5eccfc9d2c2eea6064b0967a767ba63b33763f51ccf2cd2441b461a7322656c1f06b3f5d
   languageName: node
   linkType: hard
 
-"next-tick@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "next-tick@npm:1.1.0"
-  checksum: 10c0/3ba80dd805fcb336b4f52e010992f3e6175869c8d88bf4ff0a81d5d66e6049f89993463b28211613e58a6b7fe93ff5ccbba0da18d4fa574b96289e8f0b577f28
-  languageName: node
-  linkType: hard
-
 "nice-try@npm:^1.0.4":
   version: 1.0.5
   resolution: "nice-try@npm:1.0.5"
@@ -26465,26 +25017,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-pre-gyp@npm:*":
-  version: 0.17.0
-  resolution: "node-pre-gyp@npm:0.17.0"
-  dependencies:
-    detect-libc: "npm:^1.0.3"
-    mkdirp: "npm:^0.5.5"
-    needle: "npm:^2.5.2"
-    nopt: "npm:^4.0.3"
-    npm-packlist: "npm:^1.4.8"
-    npmlog: "npm:^4.1.2"
-    rc: "npm:^1.2.8"
-    rimraf: "npm:^2.7.1"
-    semver: "npm:^5.7.1"
-    tar: "npm:^4.4.13"
-  bin:
-    node-pre-gyp: bin/node-pre-gyp
-  checksum: 10c0/ed02b350dbe9f06a6d9b19703839a239fdb841869f89edd129462b0d9c51e021464abd415198e3c19744797f04647b0b173b1446bce4b1772e4821290b9595ec
-  languageName: node
-  linkType: hard
-
 "node-preload@npm:^0.2.1":
   version: 0.2.1
   resolution: "node-preload@npm:0.2.1"
@@ -26501,7 +25033,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:2 || 3, nopt@npm:~2.1.1":
+"nopt@npm:2 || 3":
   version: 2.1.2
   resolution: "nopt@npm:2.1.2"
   dependencies:
@@ -26512,18 +25044,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:^4.0.3":
-  version: 4.0.3
-  resolution: "nopt@npm:4.0.3"
-  dependencies:
-    abbrev: "npm:1"
-    osenv: "npm:^0.1.4"
-  bin:
-    nopt: bin/nopt.js
-  checksum: 10c0/03e54cdf8c9b46924cfadf333b2b86fc180410d74d51f9c72fec5ef9c6f1a19ec533f647c05e40d49ef7491af59664c5d0baace808d6ccfe3ff064ae630a61b4
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^7.0.0":
   version: 7.2.1
   resolution: "nopt@npm:7.2.1"
@@ -26547,7 +25067,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^2.0.1, normalize-path@npm:^2.1.1":
+"normalize-path@npm:3.0.0, normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+  version: 3.0.0
+  resolution: "normalize-path@npm:3.0.0"
+  checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
+  languageName: node
+  linkType: hard
+
+"normalize-path@npm:^2.0.1":
   version: 2.1.1
   resolution: "normalize-path@npm:2.1.1"
   dependencies:
@@ -26556,13 +25083,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
-  version: 3.0.0
-  resolution: "normalize-path@npm:3.0.0"
-  checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046
-  languageName: node
-  linkType: hard
-
 "normalize-range@npm:^0.1.2":
   version: 0.1.2
   resolution: "normalize-range@npm:0.1.2"
@@ -26577,12 +25097,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"now-and-later@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "now-and-later@npm:2.0.1"
+"now-and-later@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "now-and-later@npm:3.0.0"
   dependencies:
-    once: "npm:^1.3.2"
-  checksum: 10c0/a3b123b6a7378f300cf45b381efb69b7d085a4151dceeca8442e7e08aa50f6e44d15af114261dca201e19be85f9e25dd61ad74aab62ad3675210bfc60f1f19f5
+    once: "npm:^1.4.0"
+  checksum: 10c0/9ed96bae9f4bf66c01704a59aa5b6a8aa26bd65445133a08a2b867470c1705ae746f7261e4676b2ae6fc9dce0dc778055b816218bdeb1efbf610e0c95a83711b
   languageName: node
   linkType: hard
 
@@ -26642,7 +25162,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"npm-packlist@npm:^1.4.4, npm-packlist@npm:^1.4.8":
+"npm-packlist@npm:^1.4.4":
   version: 1.4.8
   resolution: "npm-packlist@npm:1.4.8"
   dependencies:
@@ -26873,13 +25393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-component@npm:0.0.3":
-  version: 0.0.3
-  resolution: "object-component@npm:0.0.3"
-  checksum: 10c0/49a67086176e04ea684b76db24e8b871041e558c6d7e3b084ab46cc9d38756aff5fab0d0166604c6869e113e9ca49c372ad85b473863eeeadb6ec959f8cfa9bb
-  languageName: node
-  linkType: hard
-
 "object-copy@npm:^0.1.0":
   version: 0.1.0
   resolution: "object-copy@npm:0.1.0"
@@ -26915,13 +25428,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-path@npm:^0.9.0":
-  version: 0.9.2
-  resolution: "object-path@npm:0.9.2"
-  checksum: 10c0/1a2c85f1ad0248cbf641b8b1c9cfcda6eb01c986e744ea51f18e202268213dcc81554496fcc6e0731aa8b58b6c49afb02d8419832473023a36b3f88c05e9cfe9
-  languageName: node
-  linkType: hard
-
 "object-visit@npm:^1.0.0":
   version: 1.0.1
   resolution: "object-visit@npm:1.0.1"
@@ -26931,7 +25437,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.assign@npm:^4.0.4, object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
+"object.assign@npm:^4.1.4, object.assign@npm:^4.1.5":
   version: 4.1.5
   resolution: "object.assign@npm:4.1.5"
   dependencies:
@@ -26943,7 +25449,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.defaults@npm:^1.0.0, object.defaults@npm:^1.1.0":
+"object.defaults@npm:^1.1.0":
   version: 1.1.0
   resolution: "object.defaults@npm:1.1.0"
   dependencies:
@@ -27028,16 +25534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.reduce@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "object.reduce@npm:1.0.1"
-  dependencies:
-    for-own: "npm:^1.0.0"
-    make-iterator: "npm:^1.0.0"
-  checksum: 10c0/d3c10543bf939f7475e61f90784613fec60c6a3b92a45e2d7a88b1fe297c1466edd0148a102cbbb9eb14a48bafecb698917af5b76895f434e6a715e78397f5fc
-  languageName: node
-  linkType: hard
-
 "object.values@npm:^1.1.6, object.values@npm:^1.2.0":
   version: 1.2.0
   resolution: "object.values@npm:1.2.0"
@@ -27079,15 +25575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"on-finished@npm:~2.3.0":
-  version: 2.3.0
-  resolution: "on-finished@npm:2.3.0"
-  dependencies:
-    ee-first: "npm:1.1.1"
-  checksum: 10c0/c904f9e518b11941eb60279a3cbfaf1289bd0001f600a950255b1dede9fe3df8cd74f38483550b3bb9485165166acb5db500c3b4c4337aec2815c88c96fcc2ea
-  languageName: node
-  linkType: hard
-
 "on-headers@npm:~1.0.2":
   version: 1.0.2
   resolution: "on-headers@npm:1.0.2"
@@ -27095,7 +25582,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.3.2, once@npm:^1.3.3, once@npm:^1.4.0":
+"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.3.3, once@npm:^1.4.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
   dependencies:
@@ -27160,22 +25647,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"openurl@npm:1.1.1":
-  version: 1.1.1
-  resolution: "openurl@npm:1.1.1"
-  checksum: 10c0/4899895f78e54ff5c7cc5c90565646bb2d0fd0ac6bc4b1028c77596f606f39cd80e63e161f24d631ce98abda8b4e99433a2ed50b0495a7dc95e11370264c9e19
-  languageName: node
-  linkType: hard
-
-"opn@npm:5.3.0":
-  version: 5.3.0
-  resolution: "opn@npm:5.3.0"
-  dependencies:
-    is-wsl: "npm:^1.1.0"
-  checksum: 10c0/ac1c7a4176296c1f1190ab226a629535b9a9ef748b6c821fd6cc4353ef11d259dabdbafd610b2a46d53cfe8abd500396305eaffc1d4dffbc70dc931cd517a5b1
-  languageName: node
-  linkType: hard
-
 "optionator@npm:^0.9.3":
   version: 0.9.4
   resolution: "optionator@npm:0.9.4"
@@ -27246,15 +25717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ordered-read-streams@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "ordered-read-streams@npm:1.0.1"
-  dependencies:
-    readable-stream: "npm:^2.0.1"
-  checksum: 10c0/6243667adbcea69527cfebd1e483f0d06109dea578e4bbd6f185acfd1c3cc5f059b887fe600ba3084498924b9566405c0595819e02caf9ce88bc604e90b652b8
-  languageName: node
-  linkType: hard
-
 "os-homedir@npm:^1.0.0, os-homedir@npm:^1.0.1":
   version: 1.0.2
   resolution: "os-homedir@npm:1.0.2"
@@ -27299,7 +25761,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"osenv@npm:^0.1.4, osenv@npm:^0.1.5":
+"osenv@npm:^0.1.5":
   version: 0.1.5
   resolution: "osenv@npm:0.1.5"
   dependencies:
@@ -27734,7 +26196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-filepath@npm:^1.0.1":
+"parse-filepath@npm:^1.0.1, parse-filepath@npm:^1.0.2":
   version: 1.0.2
   resolution: "parse-filepath@npm:1.0.2"
   dependencies:
@@ -27857,25 +26319,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parseqs@npm:0.0.5":
-  version: 0.0.5
-  resolution: "parseqs@npm:0.0.5"
-  dependencies:
-    better-assert: "npm:~1.0.0"
-  checksum: 10c0/2290c5de49a54b6b39f6647f794f68ecf8e3e556a73e2c549f0adad8bda5b5e054cb187fe7e8714dc2d3ce315d00fe25ba8705847ae0bf4c2e9073a3f6d7675b
-  languageName: node
-  linkType: hard
-
-"parseuri@npm:0.0.5":
-  version: 0.0.5
-  resolution: "parseuri@npm:0.0.5"
-  dependencies:
-    better-assert: "npm:~1.0.0"
-  checksum: 10c0/605d075c504d4d9455f0f8f150026ae9718483d3c797fa0c7909dbb8bc6ce5a0cc6285d3ef126fea1f53478a4f039cb60cbe2b50051155049b8037588a9435b5
-  languageName: node
-  linkType: hard
-
-"parseurl@npm:~1.3.2, parseurl@npm:~1.3.3":
+"parseurl@npm:~1.3.3":
   version: 1.3.3
   resolution: "parseurl@npm:1.3.3"
   checksum: 10c0/90dd4760d6f6174adb9f20cf0965ae12e23879b5f5464f38e92fce8073354341e4b3b76fa3d878351efe7d01e617121955284cfd002ab087fba1a0726ec0b4f5
@@ -28036,13 +26480,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:0.1.7":
-  version: 0.1.7
-  resolution: "path-to-regexp@npm:0.1.7"
-  checksum: 10c0/50a1ddb1af41a9e68bd67ca8e331a705899d16fb720a1ea3a41e310480948387daf603abb14d7b0826c58f10146d49050a1291ba6a82b78a382d1c02c0b8f905
-  languageName: node
-  linkType: hard
-
 "path-to-regexp@npm:^1.7.0":
   version: 1.7.0
   resolution: "path-to-regexp@npm:1.7.0"
@@ -28326,19 +26763,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"plugin-error@npm:^0.1.2":
-  version: 0.1.2
-  resolution: "plugin-error@npm:0.1.2"
-  dependencies:
-    ansi-cyan: "npm:^0.1.1"
-    ansi-red: "npm:^0.1.1"
-    arr-diff: "npm:^1.0.1"
-    arr-union: "npm:^2.0.1"
-    extend-shallow: "npm:^1.1.2"
-  checksum: 10c0/bc08395a4ae874c4d3215b827be8e86c5535b4c834a1025ebbdea5b33bdfd82ac6db600f15df5a22eefc0f2adfce0da388b4c49fa4543af64220fbf1b6cd381a
-  languageName: node
-  linkType: hard
-
 "polished@npm:^4.2.2":
   version: 4.2.2
   resolution: "polished@npm:4.2.2"
@@ -28348,16 +26772,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"portscanner@npm:2.1.1":
-  version: 2.1.1
-  resolution: "portscanner@npm:2.1.1"
-  dependencies:
-    async: "npm:1.5.2"
-    is-number-like: "npm:^1.0.3"
-  checksum: 10c0/6f8f5648c035df0e485224846a56306395dd5e668d2aa2f86c415f2f13b271a4914e1bffd64b670e7242881b36008faa8a39c963a7ab125802431338c1033a01
-  languageName: node
-  linkType: hard
-
 "posix-character-classes@npm:^0.1.0":
   version: 0.1.1
   resolution: "posix-character-classes@npm:0.1.1"
@@ -28372,18 +26786,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-calc@npm:^6.0.0":
-  version: 6.0.2
-  resolution: "postcss-calc@npm:6.0.2"
-  dependencies:
-    css-unit-converter: "npm:^1.1.1"
-    postcss: "npm:^7.0.2"
-    postcss-selector-parser: "npm:^2.2.2"
-    reduce-css-calc: "npm:^2.0.0"
-  checksum: 10c0/53441221cb2f8a36d8cd2268ebacd5ea78e99c63a40fbdc2f3d7e0025a8f1b176e5634829d78c15e75468c79de60169b5bbc30c928723ab529a789fb68e6157a
-  languageName: node
-  linkType: hard
-
 "postcss-custom-properties@npm:13.2.0":
   version: 13.2.0
   resolution: "postcss-custom-properties@npm:13.2.0"
@@ -28398,37 +26800,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-discard-empty@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-discard-empty@npm:4.0.1"
-  dependencies:
-    postcss: "npm:^7.0.0"
-  checksum: 10c0/be6c575a92dfd8b43e3e31af27b4585273e51b8576a8f8b68128fd66a050aeed2395e8f68000ab4047a5a51388fd1c1d6abdcb21469bccf99394faef5638ed94
-  languageName: node
-  linkType: hard
-
-"postcss-focus-ring@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "postcss-focus-ring@npm:1.0.0"
-  dependencies:
-    postcss: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^2.2.3"
-  checksum: 10c0/2b47f290a267e4ea050d15b39a476b165712638d6baf21761f0a12fa31fe45475f92208c4af0b23e3398778afc33e70c1f4354d55ab8335fbfb77e44b17d74b1
-  languageName: node
-  linkType: hard
-
-"postcss-functions@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-functions@npm:3.0.0"
-  dependencies:
-    glob: "npm:^7.1.2"
-    object-assign: "npm:^4.1.1"
-    postcss: "npm:^6.0.9"
-    postcss-value-parser: "npm:^3.3.0"
-  checksum: 10c0/8f47c51ce66fa6da666a86f10736133f9c31c8cd8ff872f184ff694b682d5cd37560e4fe8e3c8ca6896278e05b35426183bbd9afd3a25e6f3e5bc32ecc8909bc
-  languageName: node
-  linkType: hard
-
 "postcss-import@npm:15.1.0":
   version: 15.1.0
   resolution: "postcss-import@npm:15.1.0"
@@ -28442,135 +26813,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-inherit-parser@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "postcss-inherit-parser@npm:0.2.0"
-  dependencies:
-    postcss: "npm:^6.0.22"
-  checksum: 10c0/4f8d8df358ca121e7188993b0c289e5015d1a9b2d8eaed0ace72b9bfe56e7a2fdd7e710b4443a8f7c94eb043fa57dcabd3d41d1998d2dc9766230bb21384f003
-  languageName: node
-  linkType: hard
-
-"postcss-inherit@npm:^4.0.3":
-  version: 4.1.0
-  resolution: "postcss-inherit@npm:4.1.0"
-  dependencies:
-    debug: "npm:^3.1.0"
-    postcss: "npm:^6.0.22"
-    postcss-inherit-parser: "npm:^0.2.0"
-  checksum: 10c0/ab908f1e18bef53fc161bcec1c579dba597f1c049e5a72082a56371f2bd5843f46273aff0f18a38e071853e6d33509e8fad7b267c1edee45339341ebe7e2a934
-  languageName: node
-  linkType: hard
-
-"postcss-js@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "postcss-js@npm:2.0.3"
-  dependencies:
-    camelcase-css: "npm:^2.0.1"
-    postcss: "npm:^7.0.18"
-  checksum: 10c0/920905b836f75539479f13556d09972c6c43f2db8ea6db625fec870b85da2505e9664fe722b609fc07aeb236e3350c764df82f53c7c7e22e78dc7ac675c283d7
-  languageName: node
-  linkType: hard
-
-"postcss-load-config@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "postcss-load-config@npm:1.2.0"
-  dependencies:
-    cosmiconfig: "npm:^2.1.0"
-    object-assign: "npm:^4.1.0"
-    postcss-load-options: "npm:^1.2.0"
-    postcss-load-plugins: "npm:^2.3.0"
-  checksum: 10c0/e86cfdd1f9351fcb5e694a7e7ecdb64bec690b3a8077cb88b65f604e01eed436053ee4c2be4b3523209a3fa02dcecfcdfb29266daed46062f01799322e2aea02
-  languageName: node
-  linkType: hard
-
-"postcss-load-options@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "postcss-load-options@npm:1.2.0"
-  dependencies:
-    cosmiconfig: "npm:^2.1.0"
-    object-assign: "npm:^4.1.0"
-  checksum: 10c0/44dfb91c1fa748de300cf2409a0d1a6422c8b0620f277cbe67a1602134f1939d31d0dc46136e90d63f2791f15994e64d4355df8eeb27dd1cf82b534691062425
-  languageName: node
-  linkType: hard
-
-"postcss-load-plugins@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "postcss-load-plugins@npm:2.3.0"
-  dependencies:
-    cosmiconfig: "npm:^2.1.1"
-    object-assign: "npm:^4.1.0"
-  checksum: 10c0/7d7e1a5fe5b2a321d06b2f543deb40293dfe7decf8354b0e87bb9ef8ff2aa3fcfb2666d6ec11c33f005203a226cd9f2490016399b26c8b5fe8b8279afbd8e1f8
-  languageName: node
-  linkType: hard
-
-"postcss-mixins@npm:^6.2.1":
-  version: 6.2.3
-  resolution: "postcss-mixins@npm:6.2.3"
-  dependencies:
-    globby: "npm:^8.0.1"
-    postcss: "npm:^7.0.21"
-    postcss-js: "npm:^2.0.3"
-    postcss-simple-vars: "npm:^5.0.2"
-    sugarss: "npm:^2.0.0"
-  checksum: 10c0/9205a376d4d35789f98f4e9f19ec661b3603205d98ac95d2cf15cf41304339120fd41e9b36459e1f7cb492a5a7faf8ddd192c1b93418ec273c7fca6e05710f0e
-  languageName: node
-  linkType: hard
-
-"postcss-nested@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-nested@npm:3.0.0"
-  dependencies:
-    postcss: "npm:^6.0.14"
-    postcss-selector-parser: "npm:^3.1.1"
-  checksum: 10c0/39c842323cfe63d3182509805520deee7c47fa7360edafbcee0485931765d4c14cd1da5edbe6c021790e962826a51870fb65abba0fdc12d1b82eed778987f4aa
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^2.2.2, postcss-selector-parser@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "postcss-selector-parser@npm:2.2.3"
-  dependencies:
-    flatten: "npm:^1.0.2"
-    indexes-of: "npm:^1.0.1"
-    uniq: "npm:^1.0.1"
-  checksum: 10c0/dc8aee6807096a93a6a1079bddb8d3e94ca385688889da087156ecfe48f3ad7db7581395fada92737d0d6e6a2cda96697fb2d94bbbf97484adb1acff261efe00
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^3.1.1":
-  version: 3.1.2
-  resolution: "postcss-selector-parser@npm:3.1.2"
-  dependencies:
-    dot-prop: "npm:^5.2.0"
-    indexes-of: "npm:^1.0.1"
-    uniq: "npm:^1.0.1"
-  checksum: 10c0/65f8fb1dcd64e9a3de03a6bd5e0a2e67475a01057d8470b46723cd569d1ddba4d18107e45aee26b46d8cdaab6ef8f5aad7c2e934fc4c46386418cc578dcc181b
-  languageName: node
-  linkType: hard
-
-"postcss-simple-vars@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "postcss-simple-vars@npm:5.0.2"
-  dependencies:
-    postcss: "npm:^7.0.14"
-  checksum: 10c0/1261b729605a1adaf8dac5fa0d0db6a39159f32017ae6352f267e829480ab636d945257957cd71203d5d184771968055a190d5a4e60dd99bb09a704a6bce6f43
-  languageName: node
-  linkType: hard
-
-"postcss-svg@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-svg@npm:3.0.0"
-  dependencies:
-    postcss: "npm:^7.0.6"
-    postcss-values-parser: "npm:^2.0.0"
-    svgo: "npm:^1.1.1"
-    xmldoc: "npm:^1.1.2"
-  checksum: 10c0/11adda39bd93c64a9c413789866f9db8358af585dbc194d983c2c340e89df45c33fb65a525b2aab6fc4e5ca6a8f1a189047336565358a3b7ce9f62a1335a25bf
-  languageName: node
-  linkType: hard
-
-"postcss-value-parser@npm:^3.2.3, postcss-value-parser@npm:^3.3.0":
+"postcss-value-parser@npm:3.3.1":
   version: 3.3.1
   resolution: "postcss-value-parser@npm:3.3.1"
   checksum: 10c0/23eed98d8eeadb1f9ef1db4a2757da0f1d8e7c1dac2a38d6b35d971aab9eb3c6d8a967d0e9f435558834ffcd966afbbe875a56bcc5bcdd09e663008c106b3e47
@@ -28584,17 +26827,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-values-parser@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "postcss-values-parser@npm:2.0.1"
-  dependencies:
-    flatten: "npm:^1.0.2"
-    indexes-of: "npm:^1.0.1"
-    uniq: "npm:^1.0.1"
-  checksum: 10c0/2ac07c134abc1c1f79f3188afa028db4b0f58421b3eb13b8ad5e3c79542735810d70b24a49d274237f9315b13d970ce81790b3c5a676543e0717228a66f9e703
-  languageName: node
-  linkType: hard
-
 "postcss@npm:8.4.24":
   version: 8.4.24
   resolution: "postcss@npm:8.4.24"
@@ -28800,15 +27032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"promise@npm:^7.0.1":
-  version: 7.3.1
-  resolution: "promise@npm:7.3.1"
-  dependencies:
-    asap: "npm:~2.0.3"
-  checksum: 10c0/742e5c0cc646af1f0746963b8776299701ad561ce2c70b49365d62c8db8ea3681b0a1bf0d4e2fe07910bf72f02d39e51e8e73dc8d7503c3501206ac908be107f
-  languageName: node
-  linkType: hard
-
 "promised-io@npm:*":
   version: 0.3.6
   resolution: "promised-io@npm:0.3.6"
@@ -28846,193 +27069,64 @@ __metadata:
   languageName: node
   linkType: hard
 
-"property-information@npm:^6.0.0":
-  version: 6.1.1
-  resolution: "property-information@npm:6.1.1"
-  checksum: 10c0/5f0a9c4b1dcdcbe9c5858d3fa3c3760a43616dc2929f3e213b9c40d94bdd01581d12458f6a1acc0fbd22233fbb311c833397df8050ac8e353007e2138c66478e
-  languageName: node
-  linkType: hard
-
-"proto-list@npm:~1.2.1":
-  version: 1.2.4
-  resolution: "proto-list@npm:1.2.4"
-  checksum: 10c0/b9179f99394ec8a68b8afc817690185f3b03933f7b46ce2e22c1930dc84b60d09f5ad222beab4e59e58c6c039c7f7fcf620397235ef441a356f31f9744010e12
-  languageName: node
-  linkType: hard
-
-"protocols@npm:^1.1.0, protocols@npm:^1.4.0":
-  version: 1.4.7
-  resolution: "protocols@npm:1.4.7"
-  checksum: 10c0/f2a1e62d6679155d0ceb7b474334510f62501b90187cb90f1ab0dd70fd33a8998bb2c6f7e76e404bb78d5fa9f6d09fbef4890351cceecba875f7beb8766e6fc5
-  languageName: node
-  linkType: hard
-
-"protoduck@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "protoduck@npm:5.0.1"
-  dependencies:
-    genfun: "npm:^5.0.0"
-  checksum: 10c0/8b9057ac37e97b7e3fe82da7fc8f233781ea0dd3ad5ed514a3064e2e0ed0ee444ed4d115561595a9f5b1b1ef59aaa3d1d7f05ea7670357f8f74e2244245cc239
-  languageName: node
-  linkType: hard
-
-"proxy-addr@npm:~2.0.7":
-  version: 2.0.7
-  resolution: "proxy-addr@npm:2.0.7"
-  dependencies:
-    forwarded: "npm:0.2.0"
-    ipaddr.js: "npm:1.9.1"
-  checksum: 10c0/c3eed999781a35f7fd935f398b6d8920b6fb00bbc14287bc6de78128ccc1a02c89b95b56742bf7cf0362cc333c61d138532049c7dedc7a328ef13343eff81210
-  languageName: node
-  linkType: hard
-
-"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "proxy-from-env@npm:1.1.0"
-  checksum: 10c0/fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
-  languageName: node
-  linkType: hard
-
-"pseudomap@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "pseudomap@npm:1.0.2"
-  checksum: 10c0/5a91ce114c64ed3a6a553aa7d2943868811377388bb31447f9d8028271bae9b05b340fe0b6961a64e45b9c72946aeb0a4ab635e8f7cb3715ffd0ff2beeb6a679
-  languageName: node
-  linkType: hard
-
-"psl@npm:^1.1.28, psl@npm:^1.1.33":
-  version: 1.8.0
-  resolution: "psl@npm:1.8.0"
-  checksum: 10c0/b5f1956f7530860e1918e7238291689fdc3cab9c2c0cdbc47cde21addcc7f62495d794692cc1e43e54728d273f78037e8e73ac43009509a1a7f823341f4039c8
-  languageName: node
-  linkType: hard
-
-"pug-attrs@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "pug-attrs@npm:2.0.4"
-  dependencies:
-    constantinople: "npm:^3.0.1"
-    js-stringify: "npm:^1.0.1"
-    pug-runtime: "npm:^2.0.5"
-  checksum: 10c0/f88c5ad83224bb3c717f601b655e0c75401036f561bccf710e9c5e7d33479dfc69c73144c6369658d670c2c53c21f974736c63d2944b4b085feb4facdde20be1
-  languageName: node
-  linkType: hard
-
-"pug-code-gen@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "pug-code-gen@npm:2.0.2"
-  dependencies:
-    constantinople: "npm:^3.1.2"
-    doctypes: "npm:^1.1.0"
-    js-stringify: "npm:^1.0.1"
-    pug-attrs: "npm:^2.0.4"
-    pug-error: "npm:^1.3.3"
-    pug-runtime: "npm:^2.0.5"
-    void-elements: "npm:^2.0.1"
-    with: "npm:^5.0.0"
-  checksum: 10c0/a14122bb7a4910945a9497ddfe79508252a9c2972087ae215579b2069f0a03e828f840fe610a78035e93aee1c4876b7ecb8aaa3988b4c6525aa8f51be0b86892
-  languageName: node
-  linkType: hard
-
-"pug-error@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "pug-error@npm:1.3.3"
-  checksum: 10c0/b879864bbddc43c1e1a850c103b6140f928dd7b494faaa414266dbfa3a005fc65ddba5ad6ec83ee821066a66a59038cc6579dffada92aca35e52974babea7f01
-  languageName: node
-  linkType: hard
-
-"pug-filters@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "pug-filters@npm:3.1.1"
-  dependencies:
-    clean-css: "npm:^4.1.11"
-    constantinople: "npm:^3.0.1"
-    jstransformer: "npm:1.0.0"
-    pug-error: "npm:^1.3.3"
-    pug-walk: "npm:^1.1.8"
-    resolve: "npm:^1.1.6"
-    uglify-js: "npm:^2.6.1"
-  checksum: 10c0/ca862b1f468f8d802eac18adc06963e67064d399d7e8723de79624e138af12a06456dc771bd039b5cc11f37d852b95a93af7c37b7b5d012e696d03c928dad8f4
-  languageName: node
-  linkType: hard
-
-"pug-lexer@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "pug-lexer@npm:4.1.0"
-  dependencies:
-    character-parser: "npm:^2.1.1"
-    is-expression: "npm:^3.0.0"
-    pug-error: "npm:^1.3.3"
-  checksum: 10c0/24d8abe8205acea63bad35139409e3bb88314b9a7bc25a4815a0266235d92271dd5e96e5fe01edd007a25b368fb2b499663d6625a3590286dee38588de6b5e90
+"property-information@npm:^6.0.0":
+  version: 6.1.1
+  resolution: "property-information@npm:6.1.1"
+  checksum: 10c0/5f0a9c4b1dcdcbe9c5858d3fa3c3760a43616dc2929f3e213b9c40d94bdd01581d12458f6a1acc0fbd22233fbb311c833397df8050ac8e353007e2138c66478e
   languageName: node
   linkType: hard
 
-"pug-linker@npm:^3.0.6":
-  version: 3.0.6
-  resolution: "pug-linker@npm:3.0.6"
-  dependencies:
-    pug-error: "npm:^1.3.3"
-    pug-walk: "npm:^1.1.8"
-  checksum: 10c0/23c624e9bc9e1cf351ce172402c7a4907ee937684c3e37806af9c6fc7e53384960ab048e329f286a01483ef403085bac92d2f73dbc5bbcf367ddc0061325146a
+"proto-list@npm:~1.2.1":
+  version: 1.2.4
+  resolution: "proto-list@npm:1.2.4"
+  checksum: 10c0/b9179f99394ec8a68b8afc817690185f3b03933f7b46ce2e22c1930dc84b60d09f5ad222beab4e59e58c6c039c7f7fcf620397235ef441a356f31f9744010e12
   languageName: node
   linkType: hard
 
-"pug-load@npm:^2.0.12":
-  version: 2.0.12
-  resolution: "pug-load@npm:2.0.12"
-  dependencies:
-    object-assign: "npm:^4.1.0"
-    pug-walk: "npm:^1.1.8"
-  checksum: 10c0/2cb1439e74faf96cc4998fccdebd29d5528bfe39e0597dd7676c83b27eb071117fa1412d8ef78365ae666c208dba60c13d4e7d4352b6cf4ddd71efc9e71de6b9
+"protocols@npm:^1.1.0, protocols@npm:^1.4.0":
+  version: 1.4.7
+  resolution: "protocols@npm:1.4.7"
+  checksum: 10c0/f2a1e62d6679155d0ceb7b474334510f62501b90187cb90f1ab0dd70fd33a8998bb2c6f7e76e404bb78d5fa9f6d09fbef4890351cceecba875f7beb8766e6fc5
   languageName: node
   linkType: hard
 
-"pug-parser@npm:^5.0.1":
+"protoduck@npm:^5.0.1":
   version: 5.0.1
-  resolution: "pug-parser@npm:5.0.1"
+  resolution: "protoduck@npm:5.0.1"
   dependencies:
-    pug-error: "npm:^1.3.3"
-    token-stream: "npm:0.0.1"
-  checksum: 10c0/0a9f0e24457b7b7b5daf562f5a74a1ee1ce29c7bb3f0447eb8dcb8ff2a0fef859b80ea56f05b65bbac6d7a5b781cf9a5f45eb683ba7fd284aae3488f2bbd61bd
+    genfun: "npm:^5.0.0"
+  checksum: 10c0/8b9057ac37e97b7e3fe82da7fc8f233781ea0dd3ad5ed514a3064e2e0ed0ee444ed4d115561595a9f5b1b1ef59aaa3d1d7f05ea7670357f8f74e2244245cc239
   languageName: node
   linkType: hard
 
-"pug-runtime@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "pug-runtime@npm:2.0.5"
-  checksum: 10c0/cb8d472536d1923798c95905cda187f0c9abb87fa111704974e2f7f84101b1e4bb11d1e0dfb4dc1290f3d712924f1c5a7a73a2801c5fb5c0e8e4f5dd1be620ea
+"proxy-addr@npm:~2.0.7":
+  version: 2.0.7
+  resolution: "proxy-addr@npm:2.0.7"
+  dependencies:
+    forwarded: "npm:0.2.0"
+    ipaddr.js: "npm:1.9.1"
+  checksum: 10c0/c3eed999781a35f7fd935f398b6d8920b6fb00bbc14287bc6de78128ccc1a02c89b95b56742bf7cf0362cc333c61d138532049c7dedc7a328ef13343eff81210
   languageName: node
   linkType: hard
 
-"pug-strip-comments@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "pug-strip-comments@npm:1.0.4"
-  dependencies:
-    pug-error: "npm:^1.3.3"
-  checksum: 10c0/23289805ef8eecb9fc8b6d8bb3065eed381455451ab84e83e83f11a99a90ca5d8db92db67b3363bbcebdc159fa12b447f09dcfe225ae7840bac2ac044a24a210
+"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "proxy-from-env@npm:1.1.0"
+  checksum: 10c0/fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
   languageName: node
   linkType: hard
 
-"pug-walk@npm:^1.1.8":
-  version: 1.1.8
-  resolution: "pug-walk@npm:1.1.8"
-  checksum: 10c0/88006e27e151c56b576f6bee19bb82dfd265b40dac069b5ebae958debf45173b39240ada2873e21b5971ed2092ea33e1b20308f1ef7616fbf0675efbfa575af4
+"pseudomap@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "pseudomap@npm:1.0.2"
+  checksum: 10c0/5a91ce114c64ed3a6a553aa7d2943868811377388bb31447f9d8028271bae9b05b340fe0b6961a64e45b9c72946aeb0a4ab635e8f7cb3715ffd0ff2beeb6a679
   languageName: node
   linkType: hard
 
-"pug@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "pug@npm:2.0.4"
-  dependencies:
-    pug-code-gen: "npm:^2.0.2"
-    pug-filters: "npm:^3.1.1"
-    pug-lexer: "npm:^4.1.0"
-    pug-linker: "npm:^3.0.6"
-    pug-load: "npm:^2.0.12"
-    pug-parser: "npm:^5.0.1"
-    pug-runtime: "npm:^2.0.5"
-    pug-strip-comments: "npm:^1.0.4"
-  checksum: 10c0/59390cbe27a34bd64ef5367af3bacfa1100ae2bee7d198e12a6b67412162e6e39b45fc3c971de496140bc44f834b9a7c458eabc80579b2e07f52af1b2078d2c1
+"psl@npm:^1.1.28, psl@npm:^1.1.33":
+  version: 1.8.0
+  resolution: "psl@npm:1.8.0"
+  checksum: 10c0/b5f1956f7530860e1918e7238291689fdc3cab9c2c0cdbc47cde21addcc7f62495d794692cc1e43e54728d273f78037e8e73ac43009509a1a7f823341f4039c8
   languageName: node
   linkType: hard
 
@@ -29056,7 +27150,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pumpify@npm:^1.3.3, pumpify@npm:^1.3.5":
+"pumpify@npm:^1.3.3":
   version: 1.5.1
   resolution: "pumpify@npm:1.5.1"
   dependencies:
@@ -29113,15 +27207,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.11.0, qs@npm:^6.10.0":
-  version: 6.11.0
-  resolution: "qs@npm:6.11.0"
-  dependencies:
-    side-channel: "npm:^1.0.4"
-  checksum: 10c0/4e4875e4d7c7c31c233d07a448e7e4650f456178b9dd3766b7cfa13158fdb24ecb8c4f059fa91e820dc6ab9f2d243721d071c9c0378892dcdad86e9e9a27c68f
-  languageName: node
-  linkType: hard
-
 "qs@npm:6.13.0":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
@@ -29131,7 +27216,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.13.1":
+"qs@npm:6.13.1, qs@npm:^6.10.0":
   version: 6.13.1
   resolution: "qs@npm:6.13.1"
   dependencies:
@@ -29140,13 +27225,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:6.2.3":
-  version: 6.2.3
-  resolution: "qs@npm:6.2.3"
-  checksum: 10c0/ea140b03c95e27791a18351e82bfbf15b78e9ed3312598582e44bacd97153bf79d8c4a8cc2ae3ed86d6f7a82a5b6889574a40de19d642cf3396f0926d4151a28
-  languageName: node
-  linkType: hard
-
 "qs@npm:~6.5.2":
   version: 6.5.2
   resolution: "qs@npm:6.5.2"
@@ -29215,14 +27293,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"range-parser@npm:~1.2.0, range-parser@npm:~1.2.1":
+"range-parser@npm:~1.2.1":
   version: 1.2.1
   resolution: "range-parser@npm:1.2.1"
   checksum: 10c0/96c032ac2475c8027b7a4e9fe22dc0dfe0f6d90b85e496e0f016fbdb99d6d066de0112e680805075bd989905e2123b3b3d002765149294dce0c1f7f01fcc2ea0
   languageName: node
   linkType: hard
 
-"raw-body@npm:2.5.2, raw-body@npm:^2.3.2":
+"raw-body@npm:2.5.2":
   version: 2.5.2
   resolution: "raw-body@npm:2.5.2"
   dependencies:
@@ -29234,7 +27312,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc@npm:^1.0.1, rc@npm:^1.1.6, rc@npm:^1.2.8":
+"rc@npm:^1.0.1, rc@npm:^1.1.6":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
   dependencies:
@@ -29551,7 +27629,7 @@ __metadata:
     "@parcel/transformer-svg-react": "npm:^2.14.0"
     "@parcel/transformer-typescript-types": "npm:^2.14.0"
     "@react-spectrum/s2-icon-builder": "npm:^0.2.0"
-    "@spectrum-css/component-builder": "npm:1.0.1"
+    "@spectrum-css/component-builder": "workspace:^"
     "@spectrum-css/vars": "npm:^2.3.0"
     "@storybook/addon-a11y": "patch:@storybook/addon-a11y@npm%3A^7.6.19#~/.yarn/patches/@storybook-addon-a11y-npm-7.6.19-04b470eae0.patch"
     "@storybook/addon-actions": "npm:^7.6.19"
@@ -29876,7 +27954,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:1 || 2, readable-stream@npm:^2.0.0, readable-stream@npm:^2.0.1, readable-stream@npm:^2.0.2, readable-stream@npm:^2.0.5, readable-stream@npm:^2.0.6, readable-stream@npm:^2.1.5, readable-stream@npm:^2.2.2, readable-stream@npm:^2.3.3, readable-stream@npm:^2.3.5, readable-stream@npm:^2.3.6, readable-stream@npm:~2.3.6":
+"readable-stream@npm:1 || 2, readable-stream@npm:^2.0.0, readable-stream@npm:^2.0.6, readable-stream@npm:^2.1.5, readable-stream@npm:^2.2.2, readable-stream@npm:^2.3.5, readable-stream@npm:^2.3.6, readable-stream@npm:~2.3.6":
   version: 2.3.7
   resolution: "readable-stream@npm:2.3.7"
   dependencies:
@@ -29914,18 +27992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^1.0.26-2, readable-stream@npm:^1.0.26-4, readable-stream@npm:~1.1.9":
-  version: 1.1.14
-  resolution: "readable-stream@npm:1.1.14"
-  dependencies:
-    core-util-is: "npm:~1.0.0"
-    inherits: "npm:~2.0.1"
-    isarray: "npm:0.0.1"
-    string_decoder: "npm:~0.10.x"
-  checksum: 10c0/b7f41b16b305103d598e3c8964fa30d52d6e0b5d9fdad567588964521691c24b279c7a8bb71f11927c3613acf355bac72d8396885a43d50425b2caafd49bc83d
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:^4.0.0":
   version: 4.7.0
   resolution: "readable-stream@npm:4.7.0"
@@ -29939,6 +28005,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readable-stream@npm:~1.1.9":
+  version: 1.1.14
+  resolution: "readable-stream@npm:1.1.14"
+  dependencies:
+    core-util-is: "npm:~1.0.0"
+    inherits: "npm:~2.0.1"
+    isarray: "npm:0.0.1"
+    string_decoder: "npm:~0.10.x"
+  checksum: 10c0/b7f41b16b305103d598e3c8964fa30d52d6e0b5d9fdad567588964521691c24b279c7a8bb71f11927c3613acf355bac72d8396885a43d50425b2caafd49bc83d
+  languageName: node
+  linkType: hard
+
 "readdir-scoped-modules@npm:^1.0.0":
   version: 1.1.0
   resolution: "readdir-scoped-modules@npm:1.1.0"
@@ -29951,17 +28029,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readdirp@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "readdirp@npm:2.2.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.11"
-    micromatch: "npm:^3.1.10"
-    readable-stream: "npm:^2.0.2"
-  checksum: 10c0/770d177372ff2212d382d425d55ca48301fcbf3231ab3827257bbcca7ff44fb51fe4af6acc2dda8512dc7f29da390e9fbea5b2b3fc724b86e85cc828395b7797
-  languageName: node
-  linkType: hard
-
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -30000,6 +28067,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rechoir@npm:^0.8.0":
+  version: 0.8.0
+  resolution: "rechoir@npm:0.8.0"
+  dependencies:
+    resolve: "npm:^1.20.0"
+  checksum: 10c0/1a30074124a22abbd5d44d802dac26407fa72a0a95f162aa5504ba8246bc5452f8b1a027b154d9bdbabcd8764920ff9333d934c46a8f17479c8912e92332f3ff
+  languageName: node
+  linkType: hard
+
 "recursive-readdir@npm:^2.2.2":
   version: 2.2.2
   resolution: "recursive-readdir@npm:2.2.2"
@@ -30039,16 +28115,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reduce-css-calc@npm:^2.0.0":
-  version: 2.1.7
-  resolution: "reduce-css-calc@npm:2.1.7"
-  dependencies:
-    css-unit-converter: "npm:^1.1.1"
-    postcss-value-parser: "npm:^3.3.0"
-  checksum: 10c0/9c17754ffcdbc9cfa80a0cd762e3a4cd152054fe1b8c0c6223f38d0512ba9131d19172604b51c589cb023a87aafe872be467ec860d8dd9a76d85e83b7a302047
-  languageName: node
-  linkType: hard
-
 "reflect.getprototypeof@npm:^1.0.4":
   version: 1.0.6
   resolution: "reflect.getprototypeof@npm:1.0.6"
@@ -30284,27 +28350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-bom-buffer@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "remove-bom-buffer@npm:3.0.0"
-  dependencies:
-    is-buffer: "npm:^1.1.5"
-    is-utf8: "npm:^0.2.1"
-  checksum: 10c0/5179a73424893880709fff54ba2160d6175abfb587031a4cdf16f43acb5952d219fe342a40ea45a4d2ef40cd7af19722b0ba6447a6605b42b6c0674eff320896
-  languageName: node
-  linkType: hard
-
-"remove-bom-stream@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "remove-bom-stream@npm:1.2.0"
-  dependencies:
-    remove-bom-buffer: "npm:^3.0.0"
-    safe-buffer: "npm:^5.1.0"
-    through2: "npm:^2.0.3"
-  checksum: 10c0/c5f34d3308c7864579838a3741a08983bd47d3bac5e6f9e4f498c1eccdc6784805ce52aec1700c420eff09d05184e6c96bb6a3380cf18aadce6dd3d4138399cb
-  languageName: node
-  linkType: hard
-
 "remove-trailing-separator@npm:^1.0.1, remove-trailing-separator@npm:^1.1.0":
   version: 1.1.0
   resolution: "remove-trailing-separator@npm:1.1.0"
@@ -30349,25 +28394,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"replace-homedir@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "replace-homedir@npm:1.0.0"
-  dependencies:
-    homedir-polyfill: "npm:^1.0.1"
-    is-absolute: "npm:^1.0.0"
-    remove-trailing-separator: "npm:^1.1.0"
-  checksum: 10c0/7ccdc91dde3dfbf284eb5841291fa634f61a4534d4a1faf3de7ada14db27675cf76b0246c29bf11544ebb8a9e75b401cb5185fa17a9b9a0bd4910f8ff1a25073
+"replace-ext@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "replace-ext@npm:2.0.0"
+  checksum: 10c0/52cb1006f83c5f07ef2c76b070c58bdeca1b67beded57d60593d1af8cd8ee731501d0433645cea8e9a4bf57a7018f47c9a3928c0463496cad1946fa85907aa47
   languageName: node
   linkType: hard
 
-"replacestream@npm:^4.0.0":
-  version: 4.0.3
-  resolution: "replacestream@npm:4.0.3"
-  dependencies:
-    escape-string-regexp: "npm:^1.0.3"
-    object-assign: "npm:^4.0.1"
-    readable-stream: "npm:^2.0.2"
-  checksum: 10c0/e54c9d8e051a0f0873cbc0f3cddf6999b47b6b87a8ba60a5f09b222046f3e25c42337955d945ee3db928ad347afec47748e851d33a6f69fd2dda97c1d7680e2f
+"replace-homedir@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "replace-homedir@npm:2.0.0"
+  checksum: 10c0/744820d254c3572abf5e3a4d7920ffae406c408d0acf955a3e67986706ebe587acf264d47009a218c7c96e4f11823fd59e75913782fdbd16c94f3a60b51d5483
   languageName: node
   linkType: hard
 
@@ -30413,13 +28450,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-from-string@npm:^1.1.0":
-  version: 1.2.1
-  resolution: "require-from-string@npm:1.2.1"
-  checksum: 10c0/29b4802dbeb78c76a589fe3d5bbe3b836624a38358d024e1855a882d91218d10fe353f9c0d265deda944b0f3f789244d6813ca748c9d846fbe69734319ffe0b5
-  languageName: node
-  linkType: hard
-
 "require-from-string@npm:^2.0.2":
   version: 2.0.2
   resolution: "require-from-string@npm:2.0.2"
@@ -30441,7 +28471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"requires-port@npm:1.x.x, requires-port@npm:^1.0.0":
+"requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
   checksum: 10c0/b2bfdd09db16c082c4326e573a82c0771daaf7b53b9ce8ad60ea46aa6e30aaf475fe9b164800b89f93b748d2c234d8abff945d2551ba47bf5698e04cd7713267
@@ -30514,12 +28544,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-options@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "resolve-options@npm:1.1.0"
+"resolve-options@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "resolve-options@npm:2.0.0"
   dependencies:
-    value-or-function: "npm:^3.0.0"
-  checksum: 10c0/2f55cbe96ef8260771fc52a4335bb4a04e0d7b52e616c2538a0eb48fd8335a932a3bfc67356a21db965e4bc3e4be869e7925d475c8fb556adf771cc5409fbf3d
+    value-or-function: "npm:^4.0.0"
+  checksum: 10c0/108f22186cad8748f1f0263944702a9949a12074e49442827845a52048f9156290781ceab8aee3e26ad868347266746704ee59a83a8f2fe2ce35228d054e325e
   languageName: node
   linkType: hard
 
@@ -30537,7 +28567,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.11.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.4, resolve@npm:^1.4.0":
+"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.11.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.4":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -30563,7 +28593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.11.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.11.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -30589,16 +28619,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resp-modifier@npm:6.0.2":
-  version: 6.0.2
-  resolution: "resp-modifier@npm:6.0.2"
-  dependencies:
-    debug: "npm:^2.2.0"
-    minimatch: "npm:^3.0.2"
-  checksum: 10c0/670703c372c83cc5821698ef92d7e4399d8c8e20c5d693eb28a4acbe82a5020c4cbedd166fb5946e83f605639803c780793e467bfa6f649148510983cfb17c99
-  languageName: node
-  linkType: hard
-
 "restore-cursor@npm:^2.0.0":
   version: 2.0.0
   resolution: "restore-cursor@npm:2.0.0"
@@ -30647,16 +28667,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"right-align@npm:^0.1.1":
-  version: 0.1.3
-  resolution: "right-align@npm:0.1.3"
-  dependencies:
-    align-text: "npm:^0.1.1"
-  checksum: 10c0/8fdafcb1e4cadd03d392f2a2185ab39265deb80bbe37c6ee4b0a552937c84a10fae5afd7ab4623734f7c5356b1d748daf4130529a2fbc8caa311b6257473ec95
-  languageName: node
-  linkType: hard
-
-"rimraf@npm:2, rimraf@npm:^2.3.3, rimraf@npm:^2.5.4, rimraf@npm:^2.6.1, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3, rimraf@npm:^2.7.1":
+"rimraf@npm:2, rimraf@npm:^2.3.3, rimraf@npm:^2.5.4, rimraf@npm:^2.6.1, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -30723,22 +28734,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rx@npm:4.1.0":
-  version: 4.1.0
-  resolution: "rx@npm:4.1.0"
-  checksum: 10c0/c2a2cf8cb350f38b5396f8ee6af1bc359c5ed5a409d710111a2da215bfb3fe77f75b5f0a0dd6fe6b57c5bdadf3b128ad1f8ad99de27da2c13ae9ba908a642cee
-  languageName: node
-  linkType: hard
-
-"rxjs@npm:^5.5.6":
-  version: 5.5.12
-  resolution: "rxjs@npm:5.5.12"
-  dependencies:
-    symbol-observable: "npm:1.0.1"
-  checksum: 10c0/da1a467cda40792f41d16998e4766ab27f14c077b2b333a35ff0b26251211d646f7aadd0e8255e1f7da95c038f40f1322be030424376592b28361388a3001115
-  languageName: node
-  linkType: hard
-
 "rxjs@npm:^6.4.0, rxjs@npm:^6.6.3":
   version: 6.6.7
   resolution: "rxjs@npm:6.6.7"
@@ -30800,20 +28795,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
-  version: 5.1.2
-  resolution: "safe-buffer@npm:5.1.2"
-  checksum: 10c0/780ba6b5d99cc9a40f7b951d47152297d0e260f0df01472a1b99d4889679a4b94a13d644f7dbc4f022572f09ae9005fa2fbb93bbbd83643316f365a3e9a45b21
-  languageName: node
-  linkType: hard
-
-"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 10c0/6501914237c0a86e9675d4e51d89ca3c21ffd6a31642efeba25ad65720bce6921c9e7e974e5be91a786b25aa058b5303285d3c15dbabf983a919f5f630d349f3
   languageName: node
   linkType: hard
 
+"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
+  version: 5.1.2
+  resolution: "safe-buffer@npm:5.1.2"
+  checksum: 10c0/780ba6b5d99cc9a40f7b951d47152297d0e260f0df01472a1b99d4889679a4b94a13d644f7dbc4f022572f09ae9005fa2fbb93bbbd83643316f365a3e9a45b21
+  languageName: node
+  linkType: hard
+
 "safe-regex-test@npm:^1.0.3":
   version: 1.0.3
   resolution: "safe-regex-test@npm:1.0.3"
@@ -30848,7 +28843,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:>=0.6.0, sax@npm:^1.2.1, sax@npm:^1.2.4":
+"sax@npm:>=0.6.0":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"
   checksum: 10c0/6bf86318a254c5d898ede6bd3ded15daf68ae08a5495a2739564eb265cd13bcc64a07ab466fb204f67ce472bb534eb8612dac587435515169593f4fffa11de7c
@@ -30882,16 +28877,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver-greatest-satisfied-range@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "semver-greatest-satisfied-range@npm:1.1.0"
+"semver-greatest-satisfied-range@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "semver-greatest-satisfied-range@npm:2.0.0"
   dependencies:
-    sver-compat: "npm:^1.5.0"
-  checksum: 10c0/66f3a52a9ca788523452e5efc70373ca497abc24945eadc5b52b6d06c2821ec201018d1c9eab8d53e8630e9c5457eb4d428828b7ca068b95c41be4cc6ca3a6d6
+    sver: "npm:^1.8.3"
+  checksum: 10c0/7376dd0a56c72f22b27d0a266eb58b4a15cd4a8b726b2e9a654e29bb88c9b0d1a44a9492ee6867b5cd623d36fe0a8cec689ac4545206ddecb80fd466fdbd43dc
   languageName: node
   linkType: hard
 
-"semver@npm:2 >=2.2.1 || 3.x || 4 || 5, semver@npm:2 || 3 || 4 || 5, semver@npm:2.x || 3.x || 4 || 5, semver@npm:^5.0.3, semver@npm:^5.1.0, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.5.1, semver@npm:^5.6.0, semver@npm:^5.7.0, semver@npm:^5.7.1":
+"semver@npm:2 >=2.2.1 || 3.x || 4 || 5, semver@npm:2 || 3 || 4 || 5, semver@npm:2.x || 3.x || 4 || 5, semver@npm:^5.0.3, semver@npm:^5.1.0, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.5.1, semver@npm:^5.6.0, semver@npm:^5.7.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
   bin:
@@ -30945,48 +28940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"send@npm:0.16.2":
-  version: 0.16.2
-  resolution: "send@npm:0.16.2"
-  dependencies:
-    debug: "npm:2.6.9"
-    depd: "npm:~1.1.2"
-    destroy: "npm:~1.0.4"
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    etag: "npm:~1.8.1"
-    fresh: "npm:0.5.2"
-    http-errors: "npm:~1.6.2"
-    mime: "npm:1.4.1"
-    ms: "npm:2.0.0"
-    on-finished: "npm:~2.3.0"
-    range-parser: "npm:~1.2.0"
-    statuses: "npm:~1.4.0"
-  checksum: 10c0/64681de4068c53aa7792d977d8c5b548966ea4aec018850ebf8516cc8bd5547c6e7189ec599907e6a41216058347f0e4fc72d3b37a5f38bf07d5cda168b2b84d
-  languageName: node
-  linkType: hard
-
-"send@npm:0.18.0":
-  version: 0.18.0
-  resolution: "send@npm:0.18.0"
-  dependencies:
-    debug: "npm:2.6.9"
-    depd: "npm:2.0.0"
-    destroy: "npm:1.2.0"
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    etag: "npm:~1.8.1"
-    fresh: "npm:0.5.2"
-    http-errors: "npm:2.0.0"
-    mime: "npm:1.6.0"
-    ms: "npm:2.1.3"
-    on-finished: "npm:2.4.1"
-    range-parser: "npm:~1.2.1"
-    statuses: "npm:2.0.1"
-  checksum: 10c0/0eb134d6a51fc13bbcb976a1f4214ea1e33f242fae046efc311e80aff66c7a43603e26a79d9d06670283a13000e51be6e0a2cb80ff0942eaf9f1cd30b7ae736a
-  languageName: node
-  linkType: hard
-
 "send@npm:0.19.0":
   version: 0.19.0
   resolution: "send@npm:0.19.0"
@@ -31025,45 +28978,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"serve-index@npm:1.9.1":
-  version: 1.9.1
-  resolution: "serve-index@npm:1.9.1"
-  dependencies:
-    accepts: "npm:~1.3.4"
-    batch: "npm:0.6.1"
-    debug: "npm:2.6.9"
-    escape-html: "npm:~1.0.3"
-    http-errors: "npm:~1.6.2"
-    mime-types: "npm:~2.1.17"
-    parseurl: "npm:~1.3.2"
-  checksum: 10c0/a666471a24196f74371edf2c3c7bcdd82adbac52f600804508754b5296c3567588bf694258b19e0cb23a567acfa20d9721bfdaed3286007b81f9741ada8a3a9c
-  languageName: node
-  linkType: hard
-
-"serve-static@npm:1.13.2":
-  version: 1.13.2
-  resolution: "serve-static@npm:1.13.2"
-  dependencies:
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    parseurl: "npm:~1.3.2"
-    send: "npm:0.16.2"
-  checksum: 10c0/7d277284091ed3902ae1020149b45559b0af5ccc64dcb66331ae771756afb10da56275b363ec2e8fa40607eaa2a7e90c84a40b28ff18083a0f5e78b215aaa634
-  languageName: node
-  linkType: hard
-
-"serve-static@npm:1.15.0":
-  version: 1.15.0
-  resolution: "serve-static@npm:1.15.0"
-  dependencies:
-    encodeurl: "npm:~1.0.2"
-    escape-html: "npm:~1.0.3"
-    parseurl: "npm:~1.3.3"
-    send: "npm:0.18.0"
-  checksum: 10c0/fa9f0e21a540a28f301258dfe1e57bb4f81cd460d28f0e973860477dd4acef946a1f41748b5bd41c73b621bea2029569c935faa38578fd34cd42a9b4947088ba
-  languageName: node
-  linkType: hard
-
 "serve-static@npm:1.16.2":
   version: 1.16.2
   resolution: "serve-static@npm:1.16.2"
@@ -31076,13 +28990,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"server-destroy@npm:1.0.1":
-  version: 1.0.1
-  resolution: "server-destroy@npm:1.0.1"
-  checksum: 10c0/ab771f12b24cde1bc622cce0c14a1365f3ab0685937c641c762916fb43aa7a03d6c577cc4375ea5361d6bc1bb20ab689ec5723086e5798c6781edb61287e24b8
-  languageName: node
-  linkType: hard
-
 "set-blocking@npm:^2.0.0, set-blocking@npm:~2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"
@@ -31128,13 +29035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setprototypeof@npm:1.1.0":
-  version: 1.1.0
-  resolution: "setprototypeof@npm:1.1.0"
-  checksum: 10c0/a77b20876689c6a89c3b42f0c3596a9cae02f90fc902570cbd97198e9e8240382086c9303ad043e88cee10f61eae19f1004e51d885395a1e9bf49f9ebed12872
-  languageName: node
-  linkType: hard
-
 "setprototypeof@npm:1.2.0":
   version: 1.2.0
   resolution: "setprototypeof@npm:1.2.0"
@@ -31443,60 +29343,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socket.io-adapter@npm:~1.1.0":
-  version: 1.1.1
-  resolution: "socket.io-adapter@npm:1.1.1"
-  checksum: 10c0/1403a346251a1864699d0e635f6c0ab6dad1240e7568aaa4f2361631d70f0ab233e8332cd4bb6e7f2644fc973750d93bfe8e0baec3e677507cd0c26e17525825
-  languageName: node
-  linkType: hard
-
-"socket.io-client@npm:2.1.1, socket.io-client@npm:^2.0.4":
-  version: 2.1.1
-  resolution: "socket.io-client@npm:2.1.1"
-  dependencies:
-    backo2: "npm:1.0.2"
-    base64-arraybuffer: "npm:0.1.5"
-    component-bind: "npm:1.0.0"
-    component-emitter: "npm:1.2.1"
-    debug: "npm:~3.1.0"
-    engine.io-client: "npm:~3.2.0"
-    has-binary2: "npm:~1.0.2"
-    has-cors: "npm:1.1.0"
-    indexof: "npm:0.0.1"
-    object-component: "npm:0.0.3"
-    parseqs: "npm:0.0.5"
-    parseuri: "npm:0.0.5"
-    socket.io-parser: "npm:~3.2.0"
-    to-array: "npm:0.1.4"
-  checksum: 10c0/08909f4caf09247c3b047b93415d8e9f7bcb18e013bbecce4c44fe032ff5013aa19b3687cfd60ec3d910494e743ff08403e1cc9ecec8f8ec275ad2226abc42fa
-  languageName: node
-  linkType: hard
-
-"socket.io-parser@npm:~3.2.0":
-  version: 3.2.0
-  resolution: "socket.io-parser@npm:3.2.0"
-  dependencies:
-    component-emitter: "npm:1.2.1"
-    debug: "npm:~3.1.0"
-    isarray: "npm:2.0.1"
-  checksum: 10c0/ff551d907a49cf57ae4fafe8a27815fa01b299d4549ca77f5e48c10cc1972c380f842f426a64508ca89bd60174a8fb4f2243c344c5389713ee1bdf75e1e4a4ad
-  languageName: node
-  linkType: hard
-
-"socket.io@npm:2.1.1":
-  version: 2.1.1
-  resolution: "socket.io@npm:2.1.1"
-  dependencies:
-    debug: "npm:~3.1.0"
-    engine.io: "npm:~3.2.0"
-    has-binary2: "npm:~1.0.2"
-    socket.io-adapter: "npm:~1.1.0"
-    socket.io-client: "npm:2.1.1"
-    socket.io-parser: "npm:~3.2.0"
-  checksum: 10c0/6075cffa6805ddd43e11fbb21572c43767b961e6a1e6e22d56dcd1ffd066e9faf3d631515b2e66639253b7b0a2ea86f725d617ee077ac08f6796a591cca88b4e
-  languageName: node
-  linkType: hard
-
 "socks-proxy-agent@npm:^4.0.0":
   version: 4.0.2
   resolution: "socks-proxy-agent@npm:4.0.2"
@@ -31612,14 +29458,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.5.1, source-map@npm:^0.5.3, source-map@npm:^0.5.6, source-map@npm:^0.5.7, source-map@npm:~0.5.1":
+"source-map@npm:^0.5.3, source-map@npm:^0.5.6, source-map@npm:^0.5.7":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
   checksum: 10c0/904e767bb9c494929be013017380cbba013637da1b28e5943b566031e29df04fba57edf3f093e0914be094648b577372bd8ad247fa98cfba9c600794cd16b599
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 10c0/ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
@@ -31647,6 +29493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sparkles@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "sparkles@npm:2.1.0"
+  checksum: 10c0/c431692f4559c4fbae78598678340d4b72074f1cec022d616958d35a17f6b1bd4783ff24a9005fe87143bc820444c04544a8230c6b0b68f18d5bca3f4db1dc3c
+  languageName: node
+  linkType: hard
+
 "spawn-command@npm:^0.0.2-1":
   version: 0.0.2-1
   resolution: "spawn-command@npm:0.0.2-1"
@@ -31787,36 +29640,15 @@ __metadata:
   linkType: hard
 
 "srcset@npm:4":
-  version: 4.0.0
-  resolution: "srcset@npm:4.0.0"
-  checksum: 10c0/0685c3bd2423b33831734fb71560cd8784f024895e70ee2ac2c392e30047c27ffd9481e001950fb0503f4906bc3fe963145935604edad77944d09c9800990660
-  languageName: node
-  linkType: hard
-
-"sshpk@npm:^1.18.0":
-  version: 1.18.0
-  resolution: "sshpk@npm:1.18.0"
-  dependencies:
-    asn1: "npm:~0.2.3"
-    assert-plus: "npm:^1.0.0"
-    bcrypt-pbkdf: "npm:^1.0.0"
-    dashdash: "npm:^1.12.0"
-    ecc-jsbn: "npm:~0.1.1"
-    getpass: "npm:^0.1.1"
-    jsbn: "npm:~0.1.0"
-    safer-buffer: "npm:^2.0.2"
-    tweetnacl: "npm:~0.14.0"
-  bin:
-    sshpk-conv: bin/sshpk-conv
-    sshpk-sign: bin/sshpk-sign
-    sshpk-verify: bin/sshpk-verify
-  checksum: 10c0/e516e34fa981cfceef45fd2e947772cc70dbd57523e5c608e2cd73752ba7f8a99a04df7c3ed751588e8d91956b6f16531590b35d3489980d1c54c38bebcd41b1
+  version: 4.0.0
+  resolution: "srcset@npm:4.0.0"
+  checksum: 10c0/0685c3bd2423b33831734fb71560cd8784f024895e70ee2ac2c392e30047c27ffd9481e001950fb0503f4906bc3fe963145935604edad77944d09c9800990660
   languageName: node
   linkType: hard
 
-"sshpk@npm:^1.7.0":
-  version: 1.16.1
-  resolution: "sshpk@npm:1.16.1"
+"sshpk@npm:^1.18.0, sshpk@npm:^1.7.0":
+  version: 1.18.0
+  resolution: "sshpk@npm:1.18.0"
   dependencies:
     asn1: "npm:~0.2.3"
     assert-plus: "npm:^1.0.0"
@@ -31831,7 +29663,7 @@ __metadata:
     sshpk-conv: bin/sshpk-conv
     sshpk-sign: bin/sshpk-sign
     sshpk-verify: bin/sshpk-verify
-  checksum: 10c0/0fd664954f6c9dd07d77076e26c15de4ede5ea4457df86119c0c67d28b53d7a97647431e198869ebaf680cf8d292db2114a28d4c30841125e50c0de37a4b89bf
+  checksum: 10c0/e516e34fa981cfceef45fd2e947772cc70dbd57523e5c608e2cd73752ba7f8a99a04df7c3ed751588e8d91956b6f16531590b35d3489980d1c54c38bebcd41b1
   languageName: node
   linkType: hard
 
@@ -31862,7 +29694,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stack-trace@npm:0.0.10, stack-trace@npm:0.0.x":
+"stack-trace@npm:0.0.x":
   version: 0.0.10
   resolution: "stack-trace@npm:0.0.10"
   checksum: 10c0/9ff3dabfad4049b635a85456f927a075c9d0c210e3ea336412d18220b2a86cbb9b13ec46d6c37b70a302a4ea4d49e30e5d4944dd60ae784073f1cde778ac8f4b
@@ -31895,27 +29727,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:>= 1.4.0 < 2":
-  version: 1.5.0
-  resolution: "statuses@npm:1.5.0"
-  checksum: 10c0/e433900956357b3efd79b1c547da4d291799ac836960c016d10a98f6a810b1b5c0dcc13b5a7aa609a58239b5190e1ea176ad9221c2157d2fd1c747393e6b2940
-  languageName: node
-  linkType: hard
-
-"statuses@npm:~1.3.1":
-  version: 1.3.1
-  resolution: "statuses@npm:1.3.1"
-  checksum: 10c0/cdeccf298416555abe1a5ff632a1bf9d27a3546e013b5a456987a6a0c4fb4f277d138f14940a537ca05039be7fbc0734689331e697ef8d063928014a58ce1bdd
-  languageName: node
-  linkType: hard
-
-"statuses@npm:~1.4.0":
-  version: 1.4.0
-  resolution: "statuses@npm:1.4.0"
-  checksum: 10c0/2877ece71af9f8dcefe6cdf0cc0d96d3cab20cef33594991396346e683923d36add1b08312450e9f8dfb9f1e6718d9e57482157bb190f8ea4fc5c7bc441f3f25
-  languageName: node
-  linkType: hard
-
 "steno@npm:^0.4.1":
   version: 0.4.4
   resolution: "steno@npm:0.4.4"
@@ -32015,6 +29826,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-composer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "stream-composer@npm:1.0.2"
+  dependencies:
+    streamx: "npm:^2.13.2"
+  checksum: 10c0/00b7c63e67dffa1f7d7149f47072e61e3e788aa1221a6116cac0186f387650816927e41b0934e615f47fec6d8d9c5b93cc85952748ed0238975090dfabf17fa7
+  languageName: node
+  linkType: hard
+
 "stream-consume@npm:~0.1.0":
   version: 0.1.1
   resolution: "stream-consume@npm:0.1.1"
@@ -32039,7 +29859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stream-exhaust@npm:^1.0.1":
+"stream-exhaust@npm:^1.0.2":
   version: 1.0.2
   resolution: "stream-exhaust@npm:1.0.2"
   checksum: 10c0/e8b84a9496ba8ecfde7549e682803a98c8dc983b60cb27726797c9c2627d0b4b2cb95d7016f015465e97ea77e9e41fccce2105ecf2c87451597e3a34405a72b3
@@ -32053,28 +29873,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stream-throttle@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "stream-throttle@npm:0.1.3"
-  dependencies:
-    commander: "npm:^2.2.0"
-    limiter: "npm:^1.0.5"
-  bin:
-    throttleproxy: ./bin/throttleproxy.js
-  checksum: 10c0/34c418038b66f651b59250eae30afe2939b65a924d7493d43e249fef278069988706b61a3babc1da8af74061fef995aa88b2925949b46ceb7f737a71b2b9dce0
-  languageName: node
-  linkType: hard
-
-"streamqueue@npm:0.0.6":
-  version: 0.0.6
-  resolution: "streamqueue@npm:0.0.6"
-  dependencies:
-    readable-stream: "npm:^1.0.26-2"
-  checksum: 10c0/ddabc50eaf6adc117a0156aa2c5e43b63922ef81a6a55cf0dc72f87292dad44c18fa4552ccd96ab45d74551006ca69c5caa810d9b44b04b801de9fc01b367b2b
-  languageName: node
-  linkType: hard
-
-"streamx@npm:^2.15.0":
+"streamx@npm:^2.12.0, streamx@npm:^2.12.5, streamx@npm:^2.13.2, streamx@npm:^2.14.0, streamx@npm:^2.15.0":
   version: 2.22.0
   resolution: "streamx@npm:2.22.0"
   dependencies:
@@ -32446,15 +30245,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sugarss@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "sugarss@npm:2.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10c0/d2a05b0f25ff2e8c518d4eabf29227558d7adf795748c5b0311b8b6036dcb492027235a1a2ec81c7bc906a20f58598945f1c0c3e7fbde1ecb31b4505a941976d
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^0.2.0":
   version: 0.2.0
   resolution: "supports-color@npm:0.2.0"
@@ -32514,13 +30304,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sver-compat@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "sver-compat@npm:1.5.0"
+"sver@npm:^1.8.3":
+  version: 1.8.4
+  resolution: "sver@npm:1.8.4"
   dependencies:
-    es6-iterator: "npm:^2.0.1"
-    es6-symbol: "npm:^3.1.1"
-  checksum: 10c0/23388477ff4c6ef45c66d3a1347cb392cfcfd2e995ab15b56fd0f4fed1c263730f71816ffb62a433d37aa467939a3b9ccc9542bf2d0ef1f38fdd23cd77842dcb
+    semver: "npm:^6.3.0"
+  dependenciesMeta:
+    semver:
+      optional: true
+  checksum: 10c0/94c4ef9e59be9014e7ea7efa687b858152be0752e21c0dce3af1133504e02335a5c3f75a2791bcf5e5a28b243d2759cd5d7c79e4f4b94b64f848ab9b26d36239
   languageName: node
   linkType: hard
 
@@ -32558,13 +30350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"symbol-observable@npm:1.0.1":
-  version: 1.0.1
-  resolution: "symbol-observable@npm:1.0.1"
-  checksum: 10c0/f6a4232c2ed3a7932018de3377de11b0fe9b1acd74ed759d79854e7177f7ed94e89493093441d942a5c7d0b7b5f58667d5ad3aea3573a8260011515745a96991
-  languageName: node
-  linkType: hard
-
 "symbol-tree@npm:^3.2.4":
   version: 3.2.4
   resolution: "symbol-tree@npm:3.2.4"
@@ -32689,7 +30474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:^4.4.10, tar@npm:^4.4.12, tar@npm:^4.4.13, tar@npm:^4.4.8":
+"tar@npm:^4.4.10, tar@npm:^4.4.12, tar@npm:^4.4.8":
   version: 4.4.19
   resolution: "tar@npm:4.4.19"
   dependencies:
@@ -32718,6 +30503,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"teex@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "teex@npm:1.0.1"
+  dependencies:
+    streamx: "npm:^2.12.5"
+  checksum: 10c0/8df9166c037ba694b49d32a49858e314c60e513d55ac5e084dbf1ddbb827c5fa43cc389a81e87684419c21283308e9d68bb068798189c767ec4c252f890b8a77
+  languageName: node
+  linkType: hard
+
 "telejson@npm:^7.2.0":
   version: 7.2.0
   resolution: "telejson@npm:7.2.0"
@@ -32873,23 +30667,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"textextensions@npm:2":
-  version: 2.5.0
-  resolution: "textextensions@npm:2.5.0"
-  checksum: 10c0/8ccc0b525c9368607994ba30d5e23469f2f69884ac975079fc43469bbd8b470963811c76ce12e33d27a98693b1a51ddc3c118c6049be4f94e3cf499d809e1604
-  languageName: node
-  linkType: hard
-
-"tfunk@npm:^3.0.1":
-  version: 3.1.0
-  resolution: "tfunk@npm:3.1.0"
-  dependencies:
-    chalk: "npm:^1.1.1"
-    object-path: "npm:^0.9.0"
-  checksum: 10c0/acdacfd84f2cd72b1a26a8727ef69576363d5c7ae3b34f3fb2e90e49973e125d90f6ae058996d3f263d0773e78afb61566345b7de7f7d82190bbc5d08632b9b0
-  languageName: node
-  linkType: hard
-
 "thenify-all@npm:^1.0.0":
   version: 1.6.0
   resolution: "thenify-all@npm:1.6.0"
@@ -32931,16 +30708,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through2-filter@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "through2-filter@npm:3.0.0"
-  dependencies:
-    through2: "npm:~2.0.0"
-    xtend: "npm:~4.0.0"
-  checksum: 10c0/741d9144dbbafca3a4a75fc55a0c062641ac464071118cef2213f35f0a961e3331795c802d5bef915060d07cebd29e6c7079e656845145de4db63c74054b4156
-  languageName: node
-  linkType: hard
-
 "through2@npm:0.x, through2@npm:^0.6.1":
   version: 0.6.5
   resolution: "through2@npm:0.6.5"
@@ -32961,7 +30728,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.2, through2@npm:^2.0.3, through2@npm:~2.0.0":
+"through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.2, through2@npm:^2.0.3":
   version: 2.0.5
   resolution: "through2@npm:2.0.5"
   dependencies:
@@ -33075,23 +30842,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-absolute-glob@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "to-absolute-glob@npm:2.0.2"
-  dependencies:
-    is-absolute: "npm:^1.0.0"
-    is-negated-glob: "npm:^1.0.0"
-  checksum: 10c0/7c5384222d6bd8f68d105bcc618794dfc3433de74eea195da172f27e107e8b2e1e1991e4adaf837f65e04623e4b03d90e19fd48aaeecfc89b6f642da2510c4d5
-  languageName: node
-  linkType: hard
-
-"to-array@npm:0.1.4":
-  version: 0.1.4
-  resolution: "to-array@npm:0.1.4"
-  checksum: 10c0/80c8d5677bcff082d68805625fc1282717c4ccd27885093372131cfbcd719e498c2e86c1787d0064f23529b6f2334031094c087061d20fa06430250ea7caef53
-  languageName: node
-  linkType: hard
-
 "to-fast-properties@npm:^1.0.3":
   version: 1.0.3
   resolution: "to-fast-properties@npm:1.0.3"
@@ -33146,12 +30896,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"to-through@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "to-through@npm:2.0.0"
+"to-through@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "to-through@npm:3.0.0"
   dependencies:
-    through2: "npm:^2.0.3"
-  checksum: 10c0/f8a7b0b38c51bcc018c38e6867588ac72120bd62232250b49a0fc209bd53ed66461ff85dc50b398c8e3686aa3e61165bce1dce4e89930f2f973b0fd3f64e4d2c
+    streamx: "npm:^2.12.5"
+  checksum: 10c0/9b1a6eb85ceff159db21678b7d9aec1d8b99a63dae01ce95b074df1f37f9d92e3ed7d5284f394917a079dda37d53f8eeef8fc74ef506b97cc35629925f29b464
   languageName: node
   linkType: hard
 
@@ -33169,13 +30919,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"token-stream@npm:0.0.1":
-  version: 0.0.1
-  resolution: "token-stream@npm:0.0.1"
-  checksum: 10c0/cf4020b5ca9c2acbf3a1382d84ca36830809d08fea4a295dee08c534a955c84cb9711802c7a7c916a904824bdc49300b60e9a26d29800680c2404f8c419845c8
-  languageName: node
-  linkType: hard
-
 "totalist@npm:^2.0.0":
   version: 2.0.0
   resolution: "totalist@npm:2.0.0"
@@ -33496,20 +31239,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type@npm:^1.0.1":
-  version: 1.2.0
-  resolution: "type@npm:1.2.0"
-  checksum: 10c0/444660849aaebef8cbb9bc43b28ec2068952064cfce6a646f88db97aaa2e2d6570c5629cd79238b71ba23aa3f75146a0b96e24e198210ee0089715a6f8889bf7
-  languageName: node
-  linkType: hard
-
-"type@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "type@npm:2.0.0"
-  checksum: 10c0/e63827740d9db84c1bb30829706c56b6eb2990d991334143532dee63dfac7ada1852681d68fce3dde118e2d4521329a75f6104b6e8e1350620b36e67b146a28b
-  languageName: node
-  linkType: hard
-
 "typed-array-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "typed-array-buffer@npm:1.0.2"
@@ -33592,17 +31321,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.5.0":
-  version: 5.5.2
-  resolution: "typescript@npm:5.5.2"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10c0/8ca39b27b5f9bd7f32db795045933ab5247897660627251e8254180b792a395bf061ea7231947d5d7ffa5cb4cc771970fd4ef543275f9b559f08c9325cccfce3
-  languageName: node
-  linkType: hard
-
-"typescript@npm:^5.8.2":
+"typescript@npm:^5.5.0, typescript@npm:^5.8.2":
   version: 5.8.2
   resolution: "typescript@npm:5.8.2"
   bin:
@@ -33612,17 +31331,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.5.0#optional!builtin<compat/typescript>":
-  version: 5.5.2
-  resolution: "typescript@patch:typescript@npm%3A5.5.2#optional!builtin<compat/typescript>::version=5.5.2&hash=b45daf"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 10c0/6721ac8933a70c252d7b640b345792e103d881811ff660355617c1836526dbb71c2044e2e77a8823fb3570b469f33276875a4cab6d3c4de4ae7d7ee1c3074ae4
-  languageName: node
-  linkType: hard
-
-"typescript@patch:typescript@npm%3A^5.8.2#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A^5.5.0#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.8.2#optional!builtin<compat/typescript>":
   version: 5.8.2
   resolution: "typescript@patch:typescript@npm%3A5.8.2#optional!builtin<compat/typescript>::version=5.8.2&hash=b45daf"
   bin:
@@ -33632,13 +31341,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:0.7.17":
-  version: 0.7.17
-  resolution: "ua-parser-js@npm:0.7.17"
-  checksum: 10c0/a6eb310e6127352e1bae8d5bfee0562cb7a0b8ae850b2c10198f4dfb657c28f4700e8965739ed39cffb9e7c724f35be75132d89b0a7e1637266ec860a6fc0c3b
-  languageName: node
-  linkType: hard
-
 "ufo@npm:^1.4.0":
   version: 1.5.3
   resolution: "ufo@npm:1.5.3"
@@ -33655,22 +31357,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uglify-js@npm:^2.6.1":
-  version: 2.8.29
-  resolution: "uglify-js@npm:2.8.29"
-  dependencies:
-    source-map: "npm:~0.5.1"
-    uglify-to-browserify: "npm:~1.0.0"
-    yargs: "npm:~3.10.0"
-  dependenciesMeta:
-    uglify-to-browserify:
-      optional: true
-  bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 10c0/e2e5d67a551975d70aef4b693d369934b4917b17dd2a36270cabd8df884eeb59cb517d9a0a52ca996f11f3b3e202f9563bf620089ffa73d804d08619e338f080
-  languageName: node
-  linkType: hard
-
 "uglify-js@npm:^3.1.4":
   version: 3.6.2
   resolution: "uglify-js@npm:3.6.2"
@@ -33683,13 +31369,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uglify-to-browserify@npm:~1.0.0":
-  version: 1.0.2
-  resolution: "uglify-to-browserify@npm:1.0.2"
-  checksum: 10c0/7927b554c2cbc110f3e6a5f8f5ed430710e72adadd9dc900fc3393b6d67f281048f2dfd1b2da3df9e88b9308b215247688d16337dccd5202d56636173a83ce16
-  languageName: node
-  linkType: hard
-
 "uid-number@npm:0.0.6":
   version: 0.0.6
   resolution: "uid-number@npm:0.0.6"
@@ -33697,13 +31376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ultron@npm:~1.1.0":
-  version: 1.1.1
-  resolution: "ultron@npm:1.1.1"
-  checksum: 10c0/527d7f687012898e3af8d646936ecba776a7099ef8d3d983f9b3ccd5e84e266af0f714d859be15090b55b93f331bb95e5798bce555d9bb08e2f4bf2faac16517
-  languageName: node
-  linkType: hard
-
 "umask@npm:^1.1.0":
   version: 1.1.0
   resolution: "umask@npm:1.1.0"
@@ -33730,27 +31402,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undertaker-registry@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "undertaker-registry@npm:1.0.1"
-  checksum: 10c0/55b60fac04e7fda61d544c33c3d71e9d20aaa91026ca4833041fcd4c2de890f1a798320a8eb3dc3e9a0af68dd2fc7b26087ed6a48fd1163ac1dfacd3936a11fe
+"undertaker-registry@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "undertaker-registry@npm:2.0.0"
+  checksum: 10c0/8d2f51efedd8dc4f6b4f6e3ecf23849327bc17b975e3e7df99dbd562a8d924e69a3f212f42353894fe89795ac937717b90d35541bbd390f44e4c9f223eaa2d71
   languageName: node
   linkType: hard
 
-"undertaker@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "undertaker@npm:1.2.1"
+"undertaker@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "undertaker@npm:2.0.0"
   dependencies:
-    arr-flatten: "npm:^1.0.1"
-    arr-map: "npm:^2.0.0"
-    bach: "npm:^1.0.0"
-    collection-map: "npm:^1.0.0"
-    es6-weak-map: "npm:^2.0.1"
-    last-run: "npm:^1.1.0"
-    object.defaults: "npm:^1.0.0"
-    object.reduce: "npm:^1.0.0"
-    undertaker-registry: "npm:^1.0.0"
-  checksum: 10c0/155067e4e56c3fab467bc861941d254c687fa38c15d55da07238a2a5a31875f07d61dc04b2f0e208c866e7b00a02eacaec779aa9a553fe0232a7976395eceb71
+    bach: "npm:^2.0.1"
+    fast-levenshtein: "npm:^3.0.0"
+    last-run: "npm:^2.0.0"
+    undertaker-registry: "npm:^2.0.0"
+  checksum: 10c0/a3f4707de03affef7b93af7e1eb840a7af07ee2c9c25ce3a65930d8d0be08cf456e9f0c2998adc93b6c841e48c8df6c19f9f3ec99a31fd7245b0292059627c78
   languageName: node
   linkType: hard
 
@@ -33819,13 +31486,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uniq@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "uniq@npm:1.0.1"
-  checksum: 10c0/369dca4a07fdd8de9e48378b9d4b6861722ca71d5f496e91687916bd4b48b8cf3d6db1677be1b40eea63bc6d4728efb4b4e0bd7a89c5fd2d23e7a2cff8009c7a
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^1.1.1":
   version: 1.1.1
   resolution: "unique-filename@npm:1.1.1"
@@ -33869,16 +31529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-stream@npm:^2.0.2":
-  version: 2.3.1
-  resolution: "unique-stream@npm:2.3.1"
-  dependencies:
-    json-stable-stringify-without-jsonify: "npm:^1.0.1"
-    through2-filter: "npm:^3.0.0"
-  checksum: 10c0/4827c5f249d1d760076d64e087d18618104ce5511112c85150b0dd76cea5ddd5a5fd143559597d07b519c2a19abd83f5cdaac3a30204d66cff63e986dd4cd18c
-  languageName: node
-  linkType: hard
-
 "unique-string@npm:^1.0.0":
   version: 1.0.0
   resolution: "unique-string@npm:1.0.0"
@@ -34142,13 +31792,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"upath@npm:^1.1.1":
-  version: 1.2.0
-  resolution: "upath@npm:1.2.0"
-  checksum: 10c0/3746f24099bf69dbf8234cecb671e1016e1f6b26bd306de4ff8966fb0bc463fa1014ffc48646b375de1ab573660e3a0256f6f2a87218b2dfa1779a84ef6992fa
-  languageName: node
-  linkType: hard
-
 "update-browserslist-db@npm:^1.1.0":
   version: 1.1.1
   resolution: "update-browserslist-db@npm:1.1.1"
@@ -34307,13 +31950,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-extend@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "util-extend@npm:1.0.3"
-  checksum: 10c0/93d5a4faec6ce92d6976fc421ed716888054291602fed8067134867a37226738a557e4785f47b8a5ecde60837e0c694da73895f66badbd4bc8d57ec9d4799bfd
-  languageName: node
-  linkType: hard
-
 "util-promisify@npm:^2.1.0":
   version: 2.1.0
   resolution: "util-promisify@npm:2.1.0"
@@ -34429,7 +32065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"v8flags@npm:^3.0.1, v8flags@npm:^3.1.1":
+"v8flags@npm:^3.1.1":
   version: 3.1.3
   resolution: "v8flags@npm:3.1.3"
   dependencies:
@@ -34438,6 +32074,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"v8flags@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "v8flags@npm:4.0.1"
+  checksum: 10c0/59500e19ff9e7b4e2f09bcfe12d16d9443bf36a0e9b65b5fa6688f12c4b3f833d99ecd8debdbe856c047080bd0a73bd2ca5066f524efb1a87fdca6c1e0aecd74
+  languageName: node
+  linkType: hard
+
 "validate-npm-package-license@npm:^3.0.1, validate-npm-package-license@npm:^3.0.3":
   version: 3.0.4
   resolution: "validate-npm-package-license@npm:3.0.4"
@@ -34464,10 +32107,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"value-or-function@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "value-or-function@npm:3.0.0"
-  checksum: 10c0/78a75b44543bb70ea3eee1804bbb101558f422335e3b62ed8864deeb85295efab1b109f607c3806b13c2fc48630d93f6c564b2796377a01a6302d355323ecebe
+"value-or-function@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "value-or-function@npm:4.0.0"
+  checksum: 10c0/1ac6f3ce4c2d811f9fb99a50a69df1d3960376cd1d8fa89106f746a251cb7a0bccb62199972c00beecb5f4911b7a65465b6624d198108ca90dc95cfbf1643230
   languageName: node
   linkType: hard
 
@@ -34587,6 +32230,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vinyl-contents@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "vinyl-contents@npm:2.0.0"
+  dependencies:
+    bl: "npm:^5.0.0"
+    vinyl: "npm:^3.0.0"
+  checksum: 10c0/b50ddf02c48fa5f89fc14bce470a375cfe74ffd6f8081836ee22f3b731e37bf1ef56761eea73377037325c79784ddc5b90000f8bddd418b87b75ea3f6320f16b
+  languageName: node
+  linkType: hard
+
 "vinyl-fs@npm:^0.3.0":
   version: 0.3.14
   resolution: "vinyl-fs@npm:0.3.14"
@@ -34603,52 +32256,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vinyl-fs@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "vinyl-fs@npm:3.0.3"
+"vinyl-fs@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "vinyl-fs@npm:4.0.0"
   dependencies:
-    fs-mkdirp-stream: "npm:^1.0.0"
-    glob-stream: "npm:^6.1.0"
-    graceful-fs: "npm:^4.0.0"
+    fs-mkdirp-stream: "npm:^2.0.1"
+    glob-stream: "npm:^8.0.0"
+    graceful-fs: "npm:^4.2.11"
+    iconv-lite: "npm:^0.6.3"
     is-valid-glob: "npm:^1.0.0"
-    lazystream: "npm:^1.0.0"
-    lead: "npm:^1.0.0"
-    object.assign: "npm:^4.0.4"
-    pumpify: "npm:^1.3.5"
-    readable-stream: "npm:^2.3.3"
-    remove-bom-buffer: "npm:^3.0.0"
-    remove-bom-stream: "npm:^1.2.0"
-    resolve-options: "npm:^1.1.0"
-    through2: "npm:^2.0.0"
-    to-through: "npm:^2.0.0"
-    value-or-function: "npm:^3.0.0"
-    vinyl: "npm:^2.0.0"
-    vinyl-sourcemap: "npm:^1.1.0"
-  checksum: 10c0/c7e52624b8a32fd5164210d0ce45050ddfcd535ac0b172c59138a402ca730bd1083ee78e43dc71d8ee21475869e9c080ff212e98926a2b980eb3aa644a561777
-  languageName: node
-  linkType: hard
-
-"vinyl-sourcemap@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "vinyl-sourcemap@npm:1.1.0"
-  dependencies:
-    append-buffer: "npm:^1.0.2"
-    convert-source-map: "npm:^1.5.0"
-    graceful-fs: "npm:^4.1.6"
-    normalize-path: "npm:^2.1.1"
-    now-and-later: "npm:^2.0.0"
-    remove-bom-buffer: "npm:^3.0.0"
-    vinyl: "npm:^2.0.0"
-  checksum: 10c0/5945250fbc04ed8be348f27adfcf842d310f2e4eea88c4821b48768d12bc8407c332c26b0eeabc63f5808843a2859d902020572bdc42e625a9d049a298d8cf68
+    lead: "npm:^4.0.0"
+    normalize-path: "npm:3.0.0"
+    resolve-options: "npm:^2.0.0"
+    stream-composer: "npm:^1.0.2"
+    streamx: "npm:^2.14.0"
+    to-through: "npm:^3.0.0"
+    value-or-function: "npm:^4.0.0"
+    vinyl: "npm:^3.0.0"
+    vinyl-sourcemap: "npm:^2.0.0"
+  checksum: 10c0/c68a86ec8b48e60c5b31a881d2f39cebfe104518a1895f38ba658cfd890673a6cfa5d55de58eb15264fd2333e5b26099989e1de4e14aa6a8ad0f04529ff46a34
   languageName: node
   linkType: hard
 
-"vinyl-sourcemaps-apply@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "vinyl-sourcemaps-apply@npm:0.2.1"
+"vinyl-sourcemap@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "vinyl-sourcemap@npm:2.0.0"
   dependencies:
-    source-map: "npm:^0.5.1"
-  checksum: 10c0/141c66335eb98f40e2c31418cda57b33ef5378480c73c8416fd88e44655212160119a629f740d1b1969e84481c5e01d3e3f861c38ed16a0cf2afcc112a466f7d
+    convert-source-map: "npm:^2.0.0"
+    graceful-fs: "npm:^4.2.10"
+    now-and-later: "npm:^3.0.0"
+    streamx: "npm:^2.12.5"
+    vinyl: "npm:^3.0.0"
+    vinyl-contents: "npm:^2.0.0"
+  checksum: 10c0/073f3f7dac1fcbf75a5ef22dac1ad18a6a299a761ff1b897455177403141935a1a909fec4540434e5b6344f9d25b962efe49fce5e82fd9e3219d4865e7688e9a
   languageName: node
   linkType: hard
 
@@ -34696,10 +32336,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"void-elements@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "void-elements@npm:2.0.1"
-  checksum: 10c0/23b4f35bbeabcaa5c87a9f638ae80862a9313dccbaa8973b0eada81dbe97488ae11baf4d8aa2846bc397d31456afdfd8d791bb44c542f83735e6d04af6996f4d
+"vinyl@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "vinyl@npm:3.0.0"
+  dependencies:
+    clone: "npm:^2.1.2"
+    clone-stats: "npm:^1.0.0"
+    remove-trailing-separator: "npm:^1.1.0"
+    replace-ext: "npm:^2.0.0"
+    teex: "npm:^1.0.1"
+  checksum: 10c0/566ab41a84c1a167023a07cb94110d40a07835a5239297e3266a11b0e9c522969a1e623ec2a4f9b05ac7fef596cf47685b410359e5b2ca00bd77400657808816
   languageName: node
   linkType: hard
 
@@ -34998,22 +32644,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"window-size@npm:0.1.0":
-  version: 0.1.0
-  resolution: "window-size@npm:0.1.0"
-  checksum: 10c0/4753f1d55afde8e89f49ab161a5c5bff9a5e025443a751f6e9654168c319cf9e429ac9ed19e12241cdf0fb9d7fdc4af220abd18f05ad8e254899d331f798723e
-  languageName: node
-  linkType: hard
-
-"window-size@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "window-size@npm:0.2.0"
-  bin:
-    window-size: cli.js
-  checksum: 10c0/378c9d7a1c903ca57f08db40dd8960252f566910ea9dea6d8552e9d61cebe9e536dcabc1b5a6edb776eebe8e5bcbcfb5b27ba13fe128625bc2033516acdc95cc
-  languageName: node
-  linkType: hard
-
 "windows-release@npm:^3.1.0":
   version: 3.2.0
   resolution: "windows-release@npm:3.2.0"
@@ -35053,16 +32683,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"with@npm:^5.0.0":
-  version: 5.1.1
-  resolution: "with@npm:5.1.1"
-  dependencies:
-    acorn: "npm:^3.1.0"
-    acorn-globals: "npm:^3.0.0"
-  checksum: 10c0/0e7d79f80b4772f3e454edc8cddf3ebcabb27adc734e056f4b1d21e1c07e301437b067a350f4117731c3d971343c8263eaaf537e360f762c90278efe8a00f38b
-  languageName: node
-  linkType: hard
-
 "word-wrap@npm:^1.2.5":
   version: 1.2.5
   resolution: "word-wrap@npm:1.2.5"
@@ -35070,13 +32690,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrap@npm:0.0.2":
-  version: 0.0.2
-  resolution: "wordwrap@npm:0.0.2"
-  checksum: 10c0/a697f8d4de35aa5fc09c84756a471a72cf602abcd8f45e132a28b0140369a4abd142676db4daa64632f10472cd7d6fa89daa308914b84ba6a5f43e35b6711501
-  languageName: node
-  linkType: hard
-
 "wordwrap@npm:^1.0.0":
   version: 1.0.0
   resolution: "wordwrap@npm:1.0.0"
@@ -35258,17 +32871,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:~3.3.1":
-  version: 3.3.3
-  resolution: "ws@npm:3.3.3"
-  dependencies:
-    async-limiter: "npm:~1.0.0"
-    safe-buffer: "npm:~5.1.0"
-    ultron: "npm:~1.1.0"
-  checksum: 10c0/bed856f4fd85388a78b80e5ea92c7a6ff8df09ece1621218c4e366faa1551b42b5a0b66a5dd1a47d7f0d97be21d1df528b6d54f04b327e5b94c9dbcab753c94c
-  languageName: node
-  linkType: hard
-
 "wsrun@npm:^5.0.0":
   version: 5.0.2
   resolution: "wsrun@npm:5.0.2"
@@ -35333,23 +32935,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"xmldoc@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "xmldoc@npm:1.1.2"
-  dependencies:
-    sax: "npm:^1.2.1"
-  checksum: 10c0/1f04ca8b13a86dfd03b70e33a56d578c735cd13874515c980b9361d135679b95e9ee94549c3203f861085fd5a29e24932212f5efa59d3345384c39d55f598c84
-  languageName: node
-  linkType: hard
-
-"xmlhttprequest-ssl@npm:~1.5.4":
-  version: 1.5.5
-  resolution: "xmlhttprequest-ssl@npm:1.5.5"
-  checksum: 10c0/abbdfd737a005f5dc032cafcc08897d951c54cc7aedd5990edbed985e2ea7c52b21cac8eef9e31d9e8cd047b05d891f2ed05fe70c17f7503db6484c71e85d03e
-  languageName: node
-  linkType: hard
-
-"xtend@npm:>=4.0.0 <4.1.0-0, xtend@npm:~4.0.0, xtend@npm:~4.0.1":
+"xtend@npm:>=4.0.0 <4.1.0-0, xtend@npm:~4.0.1":
   version: 4.0.2
   resolution: "xtend@npm:4.0.2"
   checksum: 10c0/366ae4783eec6100f8a02dff02ac907bf29f9a00b82ac0264b4d8b832ead18306797e283cf19de776538babfdcb2101375ec5646b59f08c52128ac4ab812ed0e
@@ -35446,15 +33032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^4.1.0, yargs-parser@npm:^4.2.0":
-  version: 4.2.1
-  resolution: "yargs-parser@npm:4.2.1"
-  dependencies:
-    camelcase: "npm:^3.0.0"
-  checksum: 10c0/84cfede671a1bf3d9ae8349d88f6d93b3fcd835fd05437bc0367b8c6c47aa81b5627bd144953ccbba89d45702fabbb9713fda396ce9e7763a72e19e6c399e743
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:^5.0.0":
   version: 5.0.0
   resolution: "yargs-parser@npm:5.0.0"
@@ -35473,49 +33050,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:6.4.0":
-  version: 6.4.0
-  resolution: "yargs@npm:6.4.0"
-  dependencies:
-    camelcase: "npm:^3.0.0"
-    cliui: "npm:^3.2.0"
-    decamelize: "npm:^1.1.1"
-    get-caller-file: "npm:^1.0.1"
-    os-locale: "npm:^1.4.0"
-    read-pkg-up: "npm:^1.0.1"
-    require-directory: "npm:^2.1.1"
-    require-main-filename: "npm:^1.0.1"
-    set-blocking: "npm:^2.0.0"
-    string-width: "npm:^1.0.2"
-    which-module: "npm:^1.0.0"
-    window-size: "npm:^0.2.0"
-    y18n: "npm:^3.2.1"
-    yargs-parser: "npm:^4.1.0"
-  checksum: 10c0/502198304a3fa60025b2ac151e39d82357d90f9849eb96e13881d3c36e951579c4a1c96eb3fae5ea4b99167b5da20ea382de2d79ae3bb8c45fe70a89f88ad79a
-  languageName: node
-  linkType: hard
-
-"yargs@npm:6.6.0":
-  version: 6.6.0
-  resolution: "yargs@npm:6.6.0"
-  dependencies:
-    camelcase: "npm:^3.0.0"
-    cliui: "npm:^3.2.0"
-    decamelize: "npm:^1.1.1"
-    get-caller-file: "npm:^1.0.1"
-    os-locale: "npm:^1.4.0"
-    read-pkg-up: "npm:^1.0.1"
-    require-directory: "npm:^2.1.1"
-    require-main-filename: "npm:^1.0.1"
-    set-blocking: "npm:^2.0.0"
-    string-width: "npm:^1.0.2"
-    which-module: "npm:^1.0.0"
-    y18n: "npm:^3.2.1"
-    yargs-parser: "npm:^4.2.0"
-  checksum: 10c0/d27290e404a279dc4e6b9ae7e378af773c1697e9ceec798adc8ac8bb6c3c12e20309861f5ace03252fa25f93448847e1891adb17edf5ce9e50007b0782a2ee4c
-  languageName: node
-  linkType: hard
-
 "yargs@npm:^10.0.3":
   version: 10.1.2
   resolution: "yargs@npm:10.1.2"
@@ -35625,18 +33159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:~3.10.0":
-  version: 3.10.0
-  resolution: "yargs@npm:3.10.0"
-  dependencies:
-    camelcase: "npm:^1.0.2"
-    cliui: "npm:^2.1.0"
-    decamelize: "npm:^1.0.0"
-    window-size: "npm:0.1.0"
-  checksum: 10c0/df727126b4e664987c5bb1f346fbde24d2d5e6bd435d081d816f1f5890811ceb82f90ac7e6eb849eae749dde6fe5a2eda2c6f2b22021824976399fb4362413c1
-  languageName: node
-  linkType: hard
-
 "yauzl@npm:^2.10.0":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"
@@ -35647,13 +33169,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yeast@npm:0.1.2":
-  version: 0.1.2
-  resolution: "yeast@npm:0.1.2"
-  checksum: 10c0/74530f4ac042e6ff768cb4a35deb1330a092ad239e13f97989aa82496dfb73fcae689eec2f785af1ef904b92ca33cbbffe3d3a7ee937bf29aa033b970af728bb
-  languageName: node
-  linkType: hard
-
 "yn@npm:3.1.1":
   version: 3.1.1
   resolution: "yn@npm:3.1.1"

From 804cc82c3dae1673367ade0e8538bf96a4463b35 Mon Sep 17 00:00:00 2001
From: Robert Snow <rsnow@adobe.com>
Date: Wed, 7 May 2025 15:56:34 -0700
Subject: [PATCH 21/24] fix: react types backwards compat (#8099)

* fix: keep more compatible React component types

* revert v3 explicit change

* add react-aria components as well

* fix remaining
---
 .../@react-aria/collections/src/CollectionBuilder.tsx     | 8 ++++----
 packages/@react-aria/collections/src/Hidden.tsx           | 4 ++--
 packages/@react-aria/focus/src/FocusRing.tsx              | 4 ++--
 packages/@react-aria/i18n/src/context.tsx                 | 4 ++--
 packages/@react-aria/i18n/src/server.tsx                  | 4 ++--
 packages/@react-aria/interactions/src/PressResponder.tsx  | 4 ++--
 packages/@react-aria/overlays/src/DismissButton.tsx       | 4 ++--
 packages/@react-aria/overlays/src/Overlay.tsx             | 2 +-
 packages/@react-aria/overlays/src/PortalProvider.tsx      | 4 ++--
 packages/@react-aria/overlays/src/useModal.tsx            | 6 +++---
 packages/@react-aria/select/src/HiddenSelect.tsx          | 4 ++--
 packages/@react-aria/utils/src/openLink.tsx               | 4 ++--
 packages/@react-aria/virtualizer/src/VirtualizerItem.tsx  | 4 ++--
 .../@react-aria/visually-hidden/src/VisuallyHidden.tsx    | 4 ++--
 .../@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx    | 4 ++--
 packages/@react-spectrum/calendar/src/CalendarBase.tsx    | 4 ++--
 packages/@react-spectrum/calendar/src/CalendarCell.tsx    | 4 ++--
 packages/@react-spectrum/calendar/src/CalendarMonth.tsx   | 4 ++--
 packages/@react-spectrum/color/src/ColorThumb.tsx         | 4 ++--
 .../@react-spectrum/datepicker/src/DatePickerField.tsx    | 4 ++--
 .../@react-spectrum/datepicker/src/DatePickerSegment.tsx  | 4 ++--
 packages/@react-spectrum/dialog/src/DialogContainer.tsx   | 4 ++--
 packages/@react-spectrum/icon/src/Icon.tsx                | 4 ++--
 packages/@react-spectrum/icon/src/Illustration.tsx        | 4 ++--
 packages/@react-spectrum/icon/src/UIIcon.tsx              | 4 ++--
 packages/@react-spectrum/link/src/Link.tsx                | 4 ++--
 packages/@react-spectrum/list/src/DragPreview.tsx         | 4 ++--
 packages/@react-spectrum/list/src/InsertionIndicator.tsx  | 4 ++--
 packages/@react-spectrum/list/src/ListViewItem.tsx        | 4 ++--
 packages/@react-spectrum/list/src/RootDropIndicator.tsx   | 4 ++--
 packages/@react-spectrum/listbox/src/ListBoxOption.tsx    | 4 ++--
 packages/@react-spectrum/listbox/src/ListBoxSection.tsx   | 4 ++--
 packages/@react-spectrum/menu/src/MenuItem.tsx            | 4 ++--
 packages/@react-spectrum/menu/src/MenuSection.tsx         | 4 ++--
 packages/@react-spectrum/overlays/src/OpenTransition.tsx  | 8 ++++----
 packages/@react-spectrum/overlays/src/Underlay.tsx        | 4 ++--
 packages/react-aria-components/src/Autocomplete.tsx       | 4 ++--
 packages/react-aria-components/src/ColorPicker.tsx        | 4 ++--
 packages/react-aria-components/src/Dialog.tsx             | 4 ++--
 packages/react-aria-components/src/Menu.tsx               | 3 ++-
 packages/react-aria-components/src/Tooltip.tsx            | 4 ++--
 packages/react-aria-components/src/Virtualizer.tsx        | 4 ++--
 42 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/packages/@react-aria/collections/src/CollectionBuilder.tsx b/packages/@react-aria/collections/src/CollectionBuilder.tsx
index fe0b679343a..fd2c8b50cc5 100644
--- a/packages/@react-aria/collections/src/CollectionBuilder.tsx
+++ b/packages/@react-aria/collections/src/CollectionBuilder.tsx
@@ -157,9 +157,9 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
   return <Type ref={itemRef}>{children}</Type>;
 }
 
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactNode;
-export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactNode;
-export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement): (props: P & React.RefAttributes<any>) => ReactNode {
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<T extends object, P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement): (props: P & React.RefAttributes<T>) => ReactElement | null;
+export function createLeafComponent<P extends object, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node?: any) => ReactElement): (props: P & React.RefAttributes<any>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let focusableProps = useContext(FocusableContext);
@@ -190,7 +190,7 @@ export function createLeafComponent<P extends object, E extends Element>(type: s
   return Result;
 }
 
-export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactNode {
+export function createBranchComponent<T extends object, P extends {children?: any}, E extends Element>(type: string, render: (props: P, ref: ForwardedRef<E>, node: Node<T>) => ReactElement, useChildren: (props: P) => ReactNode = useCollectionChildren): (props: P & React.RefAttributes<E>) => ReactElement | null {
   let Component = ({node}) => render(node.props, node.props.ref, node);
   let Result = (forwardRef as forwardRefType)((props: P, ref: ForwardedRef<E>) => {
     let children = useChildren(props);
diff --git a/packages/@react-aria/collections/src/Hidden.tsx b/packages/@react-aria/collections/src/Hidden.tsx
index ca2c2c3a605..9e635025573 100644
--- a/packages/@react-aria/collections/src/Hidden.tsx
+++ b/packages/@react-aria/collections/src/Hidden.tsx
@@ -11,7 +11,7 @@
  */
 
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, forwardRef, ReactElement, ReactNode, useContext} from 'react';
+import React, {createContext, forwardRef, JSX, ReactElement, ReactNode, useContext} from 'react';
 
 // React doesn't understand the <template> element, which doesn't have children like a normal element.
 // It will throw an error during hydration when it expects the firstChild to contain content rendered
@@ -35,7 +35,7 @@ if (typeof HTMLTemplateElement !== 'undefined') {
 
 export const HiddenContext = createContext<boolean>(false);
 
-export function Hidden(props: {children: ReactNode}): ReactNode {
+export function Hidden(props: {children: ReactNode}): JSX.Element {
   let isHidden = useContext(HiddenContext);
   if (isHidden) {
     // Don't hide again if we are already hidden.
diff --git a/packages/@react-aria/focus/src/FocusRing.tsx b/packages/@react-aria/focus/src/FocusRing.tsx
index 8f10d6fcb8f..603b6abd3fd 100644
--- a/packages/@react-aria/focus/src/FocusRing.tsx
+++ b/packages/@react-aria/focus/src/FocusRing.tsx
@@ -12,7 +12,7 @@
 
 import clsx from 'clsx';
 import {mergeProps} from '@react-aria/utils';
-import React, {ReactElement, ReactNode} from 'react';
+import React, {ReactElement} from 'react';
 import {useFocusRing} from './useFocusRing';
 
 export interface FocusRingProps {
@@ -40,7 +40,7 @@ export interface FocusRingProps {
  * Focus rings are visible only when the user is interacting with a keyboard,
  * not with a mouse, touch, or other input methods.
  */
-export function FocusRing(props: FocusRingProps): ReactNode {
+export function FocusRing(props: FocusRingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> {
   let {children, focusClass, focusRingClass} = props;
   let {isFocused, isFocusVisible, focusProps} = useFocusRing(props);
   let child = React.Children.only(children);
diff --git a/packages/@react-aria/i18n/src/context.tsx b/packages/@react-aria/i18n/src/context.tsx
index 30d00cc25d6..34ffc5797c4 100644
--- a/packages/@react-aria/i18n/src/context.tsx
+++ b/packages/@react-aria/i18n/src/context.tsx
@@ -12,7 +12,7 @@
 
 import {isRTL} from './utils';
 import {Locale, useDefaultLocale} from './useDefaultLocale';
-import React, {ReactNode, useContext} from 'react';
+import React, {JSX, ReactNode, useContext} from 'react';
 
 export interface I18nProviderProps {
   /** Contents that should have the locale applied. */
@@ -26,7 +26,7 @@ const I18nContext = React.createContext<Locale | null>(null);
 /**
  * Provides the locale for the application to all child components.
  */
-export function I18nProvider(props: I18nProviderProps): ReactNode {
+export function I18nProvider(props: I18nProviderProps): JSX.Element {
   let {locale, children} = props;
   let defaultLocale = useDefaultLocale();
 
diff --git a/packages/@react-aria/i18n/src/server.tsx b/packages/@react-aria/i18n/src/server.tsx
index 6833a52f5d7..75916181b0a 100644
--- a/packages/@react-aria/i18n/src/server.tsx
+++ b/packages/@react-aria/i18n/src/server.tsx
@@ -11,7 +11,7 @@
  */
 
 import type {LocalizedString} from '@internationalized/string';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 
 type PackageLocalizedStrings = {
   [packageName: string]: Record<string, LocalizedString>
@@ -27,7 +27,7 @@ interface PackageLocalizationProviderProps {
  * A PackageLocalizationProvider can be rendered on the server to inject the localized strings
  * needed by the client into the initial HTML.
  */
-export function PackageLocalizationProvider(props: PackageLocalizationProviderProps): ReactNode | null {
+export function PackageLocalizationProvider(props: PackageLocalizationProviderProps): JSX.Element | null {
   if (typeof document !== 'undefined') {
     console.log('PackageLocalizationProvider should only be rendered on the server.');
     return null;
diff --git a/packages/@react-aria/interactions/src/PressResponder.tsx b/packages/@react-aria/interactions/src/PressResponder.tsx
index 6af070e9e24..086ebb1867b 100644
--- a/packages/@react-aria/interactions/src/PressResponder.tsx
+++ b/packages/@react-aria/interactions/src/PressResponder.tsx
@@ -14,7 +14,7 @@ import {FocusableElement} from '@react-types/shared';
 import {mergeProps, useObjectRef, useSyncRef} from '@react-aria/utils';
 import {PressProps} from './usePress';
 import {PressResponderContext} from './context';
-import React, {ForwardedRef, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {ForwardedRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 
 interface PressResponderProps extends PressProps {
   children: ReactNode
@@ -56,7 +56,7 @@ export const PressResponder = React.forwardRef(({children, ...props}: PressRespo
   );
 });
 
-export function ClearPressResponder({children}: {children: ReactNode}): ReactNode {
+export function ClearPressResponder({children}: {children: ReactNode}): JSX.Element {
   let context = useMemo(() => ({register: () => {}}), []);
   return (
     <PressResponderContext.Provider value={context}>
diff --git a/packages/@react-aria/overlays/src/DismissButton.tsx b/packages/@react-aria/overlays/src/DismissButton.tsx
index 6e6b38d0bb9..a3edd6ef82c 100644
--- a/packages/@react-aria/overlays/src/DismissButton.tsx
+++ b/packages/@react-aria/overlays/src/DismissButton.tsx
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, DOMProps} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import {useLabels} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -28,7 +28,7 @@ export interface DismissButtonProps extends AriaLabelingProps, DOMProps {
  * users to dismiss a modal or popup when there is no visual
  * affordance to do so.
  */
-export function DismissButton(props: DismissButtonProps): ReactNode {
+export function DismissButton(props: DismissButtonProps): JSX.Element {
   let {onDismiss, ...otherProps} = props;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/overlays');
 
diff --git a/packages/@react-aria/overlays/src/Overlay.tsx b/packages/@react-aria/overlays/src/Overlay.tsx
index 05de47ac90e..e6082d7720e 100644
--- a/packages/@react-aria/overlays/src/Overlay.tsx
+++ b/packages/@react-aria/overlays/src/Overlay.tsx
@@ -49,7 +49,7 @@ export const OverlayContext = React.createContext<{contain: boolean, setContain:
  * A container which renders an overlay such as a popover or modal in a portal,
  * and provides a focus scope for the child elements.
  */
-export function Overlay(props: OverlayProps): ReactNode | null {
+export function Overlay(props: OverlayProps): React.ReactPortal | null {
   let isSSR = useIsSSR();
   let {portalContainer = isSSR ? null : document.body, isExiting} = props;
   let [contain, setContain] = useState(false);
diff --git a/packages/@react-aria/overlays/src/PortalProvider.tsx b/packages/@react-aria/overlays/src/PortalProvider.tsx
index a705917130f..1f255516984 100644
--- a/packages/@react-aria/overlays/src/PortalProvider.tsx
+++ b/packages/@react-aria/overlays/src/PortalProvider.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {createContext, ReactNode, useContext} from 'react';
+import React, {createContext, JSX, ReactNode, useContext} from 'react';
 
 export interface PortalProviderProps {
   /** Should return the element where we should portal to. Can clear the context by passing null. */
@@ -26,7 +26,7 @@ export const PortalContext = createContext<PortalProviderContextValue>({});
 /**
  * Sets the portal container for all overlay elements rendered by its children.
  */
-export function UNSAFE_PortalProvider(props: PortalProviderProps): ReactNode {
+export function UNSAFE_PortalProvider(props: PortalProviderProps): JSX.Element {
   let {getContainer} = props;
   let {getContainer: ctxGetContainer} = useUNSAFE_PortalContext();
   return (
diff --git a/packages/@react-aria/overlays/src/useModal.tsx b/packages/@react-aria/overlays/src/useModal.tsx
index 5a5e8188b8a..0f922d19b9e 100644
--- a/packages/@react-aria/overlays/src/useModal.tsx
+++ b/packages/@react-aria/overlays/src/useModal.tsx
@@ -11,7 +11,7 @@
  */
 
 import {DOMAttributes} from '@react-types/shared';
-import React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
+import React, {AriaAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {useIsSSR} from '@react-aria/ssr';
 import {useUNSAFE_PortalContext} from './PortalProvider';
@@ -37,7 +37,7 @@ const Context = React.createContext<ModalContext | null>(null);
  * subtree from screen readers. This is done using React context in order to account for things
  * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.
  */
-export function ModalProvider(props: ModalProviderProps): ReactNode {
+export function ModalProvider(props: ModalProviderProps): JSX.Element {
   let {children} = props;
   let parent = useContext(Context);
   let [modalCount, setModalCount] = useState(0);
@@ -101,7 +101,7 @@ function OverlayContainerDOM(props: ModalProviderProps) {
  * if a modal or other overlay is opened. Only the top-most modal or
  * overlay should be accessible at once.
  */
-export function OverlayProvider(props: ModalProviderProps): ReactNode {
+export function OverlayProvider(props: ModalProviderProps): JSX.Element {
   return (
     <ModalProvider>
       <OverlayContainerDOM {...props} />
diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index fddc93a798d..b0d61ddc2aa 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement, RefObject} from '@react-types/shared';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, ReactNode, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
 import {useFormReset} from '@react-aria/utils';
@@ -109,7 +109,7 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
  * Renders a hidden native `<select>` element, which can be used to support browser
  * form autofill, mobile form navigation, and native form submission.
  */
-export function HiddenSelect<T>(props: HiddenSelectProps<T>): ReactNode | null {
+export function HiddenSelect<T>(props: HiddenSelectProps<T>): JSX.Element | null {
   let {state, triggerRef, label, name, isDisabled} = props;
   let selectRef = useRef(null);
   let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
diff --git a/packages/@react-aria/utils/src/openLink.tsx b/packages/@react-aria/utils/src/openLink.tsx
index e23a0ceb0ed..79981f735c9 100644
--- a/packages/@react-aria/utils/src/openLink.tsx
+++ b/packages/@react-aria/utils/src/openLink.tsx
@@ -13,7 +13,7 @@
 import {focusWithoutScrolling, isMac, isWebKit} from './index';
 import {Href, LinkDOMProps, RouterOptions} from '@react-types/shared';
 import {isFirefox, isIPad} from './platform';
-import React, {createContext, DOMAttributes, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, DOMAttributes, JSX, ReactNode, useContext, useMemo} from 'react';
 
 interface Router {
   isNative: boolean,
@@ -37,7 +37,7 @@ interface RouterProviderProps {
  * A RouterProvider accepts a `navigate` function from a framework or client side router,
  * and provides it to all nested React Aria links to enable client side navigation.
  */
-export function RouterProvider(props: RouterProviderProps): ReactNode {
+export function RouterProvider(props: RouterProviderProps): JSX.Element {
   let {children, navigate, useHref} = props;
 
   let ctx = useMemo(() => ({
diff --git a/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx b/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
index 0a7c8b012f2..feb14e50d76 100644
--- a/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
+++ b/packages/@react-aria/virtualizer/src/VirtualizerItem.tsx
@@ -12,7 +12,7 @@
 
 import {Direction} from '@react-types/shared';
 import {LayoutInfo} from '@react-stately/virtualizer';
-import React, {CSSProperties, ReactNode, useRef} from 'react';
+import React, {CSSProperties, JSX, ReactNode, useRef} from 'react';
 import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
@@ -24,7 +24,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
   children: ReactNode
 }
 
-export function VirtualizerItem(props: VirtualizerItemProps): ReactNode {
+export function VirtualizerItem(props: VirtualizerItemProps): JSX.Element {
   let {style, className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
   let ref = useRef<HTMLDivElement | null>(null);
diff --git a/packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx b/packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx
index 45af9a33fee..35fd53580ec 100644
--- a/packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx
+++ b/packages/@react-aria/visually-hidden/src/VisuallyHidden.tsx
@@ -12,7 +12,7 @@
 
 import {DOMAttributes} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import React, {CSSProperties, JSXElementConstructor, ReactNode, useMemo, useState} from 'react';
+import React, {CSSProperties, JSX, JSXElementConstructor, ReactNode, useMemo, useState} from 'react';
 import {useFocusWithin} from '@react-aria/interactions';
 
 export interface VisuallyHiddenProps extends DOMAttributes {
@@ -86,7 +86,7 @@ export function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHidd
  * VisuallyHidden hides its children visually, while keeping content visible
  * to screen readers.
  */
-export function VisuallyHidden(props: VisuallyHiddenProps): ReactNode {
+export function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let {children, elementType: Element = 'div', isFocusable, style, ...otherProps} = props;
   let {visuallyHiddenProps} = useVisuallyHidden(props);
diff --git a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx
index d311071f7ba..371895042e8 100644
--- a/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx
+++ b/packages/@react-spectrum/breadcrumbs/src/BreadcrumbItem.tsx
@@ -15,7 +15,7 @@ import ChevronRightSmall from '@spectrum-icons/ui/ChevronRightSmall';
 import {classNames} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
-import React, {Fragment, ReactNode, useRef} from 'react';
+import React, {Fragment, JSX, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/breadcrumb/vars.css';
 import {useBreadcrumbItem} from '@react-aria/breadcrumbs';
 import {useHover} from '@react-aria/interactions';
@@ -25,7 +25,7 @@ interface SpectrumBreadcrumbItemProps extends BreadcrumbItemProps {
   isMenu?: boolean
 }
 
-export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): ReactNode {
+export function BreadcrumbItem(props: SpectrumBreadcrumbItemProps): JSX.Element {
   let {
     children,
     isCurrent,
diff --git a/packages/@react-spectrum/calendar/src/CalendarBase.tsx b/packages/@react-spectrum/calendar/src/CalendarBase.tsx
index be8ad9bdb84..4a7360d94d8 100644
--- a/packages/@react-spectrum/calendar/src/CalendarBase.tsx
+++ b/packages/@react-spectrum/calendar/src/CalendarBase.tsx
@@ -23,7 +23,7 @@ import {DOMProps, RefObject, StyleProps} from '@react-types/shared';
 import {HelpText} from '@react-spectrum/label';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {HTMLAttributes, JSX, ReactNode} from 'react';
+import React, {HTMLAttributes, JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -38,7 +38,7 @@ interface CalendarBaseProps<T extends CalendarState | RangeCalendarState> extend
   calendarRef: RefObject<HTMLDivElement | null>
 }
 
-export function CalendarBase<T extends CalendarState | RangeCalendarState>(props: CalendarBaseProps<T>): ReactNode {
+export function CalendarBase<T extends CalendarState | RangeCalendarState>(props: CalendarBaseProps<T>): JSX.Element {
   let {
     state,
     calendarProps,
diff --git a/packages/@react-spectrum/calendar/src/CalendarCell.tsx b/packages/@react-spectrum/calendar/src/CalendarCell.tsx
index d3cecad0538..c657592087e 100644
--- a/packages/@react-spectrum/calendar/src/CalendarCell.tsx
+++ b/packages/@react-spectrum/calendar/src/CalendarCell.tsx
@@ -15,7 +15,7 @@ import {CalendarDate, getDayOfWeek, isSameDay, isSameMonth, isToday} from '@inte
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {classNames} from '@react-spectrum/utils';
 import {mergeProps} from '@react-aria/utils';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
@@ -27,7 +27,7 @@ interface CalendarCellProps extends AriaCalendarCellProps {
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
 }
 
-export function CalendarCell({state, currentMonth, firstDayOfWeek, ...props}: CalendarCellProps): ReactNode {
+export function CalendarCell({state, currentMonth, firstDayOfWeek, ...props}: CalendarCellProps): JSX.Element {
   let ref = useRef<HTMLElement>(null);
   let {
     cellProps,
diff --git a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx
index b272e30ecba..c8e03affda5 100644
--- a/packages/@react-spectrum/calendar/src/CalendarMonth.tsx
+++ b/packages/@react-spectrum/calendar/src/CalendarMonth.tsx
@@ -16,7 +16,7 @@ import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {classNames} from '@react-spectrum/utils';
 import {DOMProps, StyleProps} from '@react-types/shared';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useCalendarGrid} from '@react-aria/calendar';
 
@@ -25,7 +25,7 @@ interface CalendarMonthProps extends CalendarPropsBase, DOMProps, StyleProps {
   startDate: CalendarDate
 }
 
-export function CalendarMonth(props: CalendarMonthProps): ReactNode {
+export function CalendarMonth(props: CalendarMonthProps): JSX.Element {
   let {
     state,
     startDate,
diff --git a/packages/@react-spectrum/color/src/ColorThumb.tsx b/packages/@react-spectrum/color/src/ColorThumb.tsx
index 1c079d7e374..626c3dd58b0 100644
--- a/packages/@react-spectrum/color/src/ColorThumb.tsx
+++ b/packages/@react-spectrum/color/src/ColorThumb.tsx
@@ -14,7 +14,7 @@ import {classNames} from '@react-spectrum/utils';
 import {Color} from '@react-types/color';
 import {DOMProps, RefObject} from '@react-types/shared';
 import {Overlay} from '@react-spectrum/overlays';
-import React, {CSSProperties, ReactElement, ReactNode, useRef, useState} from 'react';
+import React, {CSSProperties, JSX, ReactElement, useRef, useState} from 'react';
 import stylesHandle from '@adobe/spectrum-css-temp/components/colorhandle/vars.css';
 import stylesLoupe from '@adobe/spectrum-css-temp/components/colorloupe/vars.css';
 import {useId, useLayoutEffect} from '@react-aria/utils';
@@ -31,7 +31,7 @@ interface ColorThumbProps extends DOMProps {
   containerRef?: RefObject<HTMLElement | null>
 }
 
-function ColorThumb(props: ColorThumbProps): ReactNode {
+function ColorThumb(props: ColorThumbProps): JSX.Element {
   let {value, isDisabled, isDragging, isFocused, children, className = '', style, containerRef, ...otherProps} = props;
 
   let valueCSS = value.toString('css');
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
index cd398368ae2..116567974f0 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerField.tsx
@@ -15,7 +15,7 @@ import {createCalendar} from '@internationalized/date';
 import {DatePickerSegment} from './DatePickerSegment';
 import datepickerStyles from './styles.css';
 import {DateValue, SpectrumDatePickerProps} from '@react-types/datepicker';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import {useDateField} from '@react-aria/datepicker';
 import {useDateFieldState} from '@react-stately/datepicker';
 import {useLocale} from '@react-aria/i18n';
@@ -26,7 +26,7 @@ interface DatePickerFieldProps<T extends DateValue> extends SpectrumDatePickerPr
   maxGranularity?: SpectrumDatePickerProps<T>['granularity']
 }
 
-export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>): ReactNode {
+export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps<T>): JSX.Element {
   let {
     isDisabled,
     isReadOnly,
diff --git a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
index 02cd52b8512..05597611dc5 100644
--- a/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
+++ b/packages/@react-spectrum/datepicker/src/DatePickerSegment.tsx
@@ -13,7 +13,7 @@
 import {classNames} from '@react-spectrum/utils';
 import {DateFieldState, DateSegment} from '@react-stately/datepicker';
 import {DatePickerBase, DateValue} from '@react-types/datepicker';
-import React, {ReactNode, useRef} from 'react';
+import React, {JSX, useRef} from 'react';
 import styles from './styles.css';
 import {useDateSegment} from '@react-aria/datepicker';
 
@@ -26,7 +26,7 @@ interface LiteralSegmentProps {
   segment: DateSegment
 }
 
-export function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps): ReactNode {
+export function DatePickerSegment({segment, state, ...otherProps}: DatePickerSegmentProps): JSX.Element {
   switch (segment.type) {
     // A separator, e.g. punctuation
     case 'literal':
diff --git a/packages/@react-spectrum/dialog/src/DialogContainer.tsx b/packages/@react-spectrum/dialog/src/DialogContainer.tsx
index 99646e1bbd4..e8baa85c408 100644
--- a/packages/@react-spectrum/dialog/src/DialogContainer.tsx
+++ b/packages/@react-spectrum/dialog/src/DialogContainer.tsx
@@ -12,7 +12,7 @@
 
 import {DialogContext} from './context';
 import {Modal} from '@react-spectrum/overlays';
-import React, {ReactElement, ReactNode, useState} from 'react';
+import React, {JSX, ReactElement, useState} from 'react';
 import {SpectrumDialogContainerProps} from '@react-types/dialog';
 import {useOverlayTriggerState} from '@react-stately/overlays';
 
@@ -21,7 +21,7 @@ import {useOverlayTriggerState} from '@react-stately/overlays';
  * it in a modal. Useful in cases where there is no trigger element
  * or when the trigger unmounts while the dialog is open.
  */
-export function DialogContainer(props: SpectrumDialogContainerProps): ReactNode {
+export function DialogContainer(props: SpectrumDialogContainerProps): JSX.Element {
   let {
     children,
     type = 'modal',
diff --git a/packages/@react-spectrum/icon/src/Icon.tsx b/packages/@react-spectrum/icon/src/Icon.tsx
index 8296a3f9676..66f0764505b 100644
--- a/packages/@react-spectrum/icon/src/Icon.tsx
+++ b/packages/@react-spectrum/icon/src/Icon.tsx
@@ -14,7 +14,7 @@ import {AriaLabelingProps, DOMProps, IconColorValue, StyleProps} from '@react-ty
 import {baseStyleProps, classNames, StyleHandlers, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {ProviderContext, useProvider} from '@react-spectrum/provider';
-import React, {ReactElement, ReactNode} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
 
 export interface IconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -59,7 +59,7 @@ const iconStyleProps: StyleHandlers = {
 /**
  * Spectrum icons are clear, minimal, and consistent across platforms. They follow the focused and rational principles of the design system in both metaphor and style.
  */
-export function Icon(props: IconProps): ReactNode {
+export function Icon(props: IconProps): JSX.Element {
   props = useSlotProps(props, 'icon');
   let {
     children,
diff --git a/packages/@react-spectrum/icon/src/Illustration.tsx b/packages/@react-spectrum/icon/src/Illustration.tsx
index 9ea19d0031e..7116c2bd382 100644
--- a/packages/@react-spectrum/icon/src/Illustration.tsx
+++ b/packages/@react-spectrum/icon/src/Illustration.tsx
@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {ReactElement, ReactNode} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import {useSlotProps, useStyleProps} from '@react-spectrum/utils';
 
 export interface IllustrationProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -40,7 +40,7 @@ export type IllustrationPropsWithoutChildren = Omit<IllustrationProps, 'children
 /**
  * Wrapper component for illustrations. Use this to wrap your svg element for a custom illustration.
  */
-export function Illustration(props: IllustrationProps): ReactNode {
+export function Illustration(props: IllustrationProps): JSX.Element {
   props = useSlotProps(props, 'illustration');
   let {
     children,
diff --git a/packages/@react-spectrum/icon/src/UIIcon.tsx b/packages/@react-spectrum/icon/src/UIIcon.tsx
index a0bd0de565d..96465175036 100644
--- a/packages/@react-spectrum/icon/src/UIIcon.tsx
+++ b/packages/@react-spectrum/icon/src/UIIcon.tsx
@@ -14,7 +14,7 @@ import {AriaLabelingProps, DOMProps, StyleProps} from '@react-types/shared';
 import {classNames, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {ProviderContext, useProvider} from '@react-spectrum/provider';
-import React, {ReactElement, ReactNode} from 'react';
+import React, {JSX, ReactElement} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/icon/vars.css';
 
 export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
@@ -28,7 +28,7 @@ export interface UIIconProps extends DOMProps, AriaLabelingProps, StyleProps {
 
 export type UIIconPropsWithoutChildren = Omit<UIIconProps, 'children'>;
 
-export function UIIcon(props: UIIconProps): ReactNode {
+export function UIIcon(props: UIIconProps): JSX.Element {
   props = useSlotProps(props, 'icon');
   let {
     children,
diff --git a/packages/@react-spectrum/link/src/Link.tsx b/packages/@react-spectrum/link/src/Link.tsx
index c993214d4f3..191a1e80b7b 100644
--- a/packages/@react-spectrum/link/src/Link.tsx
+++ b/packages/@react-spectrum/link/src/Link.tsx
@@ -13,7 +13,7 @@
 import {classNames, getWrappedElement, useSlotProps, useStyleProps} from '@react-spectrum/utils';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps, mergeRefs} from '@react-aria/utils';
-import React, {ForwardedRef, JSX, MutableRefObject, ReactNode, useRef} from 'react';
+import React, {ForwardedRef, JSX, MutableRefObject, useRef} from 'react';
 import {SpectrumLinkProps} from '@react-types/link';
 import styles from '@adobe/spectrum-css-temp/components/link/vars.css';
 import {useHover} from '@react-aria/interactions';
@@ -25,7 +25,7 @@ let isOldReact = parseInt(React.version, 10) <= 18;
  * Links allow users to navigate to a different location.
  * They can be presented inline inside a paragraph or as standalone text.
  */
-export function Link(props: SpectrumLinkProps): ReactNode {
+export function Link(props: SpectrumLinkProps): JSX.Element {
   props = useProviderProps(props);
   props = useSlotProps(props, 'link');
   let {
diff --git a/packages/@react-spectrum/list/src/DragPreview.tsx b/packages/@react-spectrum/list/src/DragPreview.tsx
index 6aaed78cebb..4952ec0006d 100644
--- a/packages/@react-spectrum/list/src/DragPreview.tsx
+++ b/packages/@react-spectrum/list/src/DragPreview.tsx
@@ -13,7 +13,7 @@ import {classNames, SlotProvider} from '@react-spectrum/utils';
 import {Grid} from '@react-spectrum/layout';
 import {GridNode} from '@react-types/grid';
 import listStyles from './styles.css';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import type {SpectrumListViewProps} from './ListView';
 import {Text} from '@react-spectrum/text';
 
@@ -24,7 +24,7 @@ interface DragPreviewProps<T> {
   density: SpectrumListViewProps<T>['density']
 }
 
-export function DragPreview(props: DragPreviewProps<unknown>): ReactNode {
+export function DragPreview(props: DragPreviewProps<unknown>): JSX.Element {
   let {
     item,
     itemCount,
diff --git a/packages/@react-spectrum/list/src/InsertionIndicator.tsx b/packages/@react-spectrum/list/src/InsertionIndicator.tsx
index 9776876e5ac..c79d32f2da5 100644
--- a/packages/@react-spectrum/list/src/InsertionIndicator.tsx
+++ b/packages/@react-spectrum/list/src/InsertionIndicator.tsx
@@ -2,7 +2,7 @@ import {classNames} from '@react-spectrum/utils';
 import {ItemDropTarget} from '@react-types/shared';
 import listStyles from './styles.css';
 import {ListViewContext} from './ListView';
-import React, {ReactNode, useContext, useRef} from 'react';
+import React, {JSX, useContext, useRef} from 'react';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 interface InsertionIndicatorProps {
@@ -10,7 +10,7 @@ interface InsertionIndicatorProps {
   isPresentationOnly?: boolean
 }
 
-export default function InsertionIndicator(props: InsertionIndicatorProps): ReactNode | null {
+export default function InsertionIndicator(props: InsertionIndicatorProps): JSX.Element | null {
   let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
   const {target, isPresentationOnly} = props;
 
diff --git a/packages/@react-spectrum/list/src/ListViewItem.tsx b/packages/@react-spectrum/list/src/ListViewItem.tsx
index c7653c94dd7..cc5c9283832 100644
--- a/packages/@react-spectrum/list/src/ListViewItem.tsx
+++ b/packages/@react-spectrum/list/src/ListViewItem.tsx
@@ -24,7 +24,7 @@ import listStyles from './styles.css';
 import {ListViewContext} from './ListView';
 import {mergeProps} from '@react-aria/utils';
 import {Provider} from '@react-spectrum/provider';
-import React, {ReactNode, useContext, useRef} from 'react';
+import React, {JSX, useContext, useRef} from 'react';
 import {Text} from '@react-spectrum/text';
 import {useButton} from '@react-aria/button';
 import {useGridListItem, useGridListSelectionCheckbox} from '@react-aria/gridlist';
@@ -37,7 +37,7 @@ interface ListViewItemProps<T> {
   hasActions: boolean
 }
 
-export function ListViewItem<T>(props: ListViewItemProps<T>): ReactNode {
+export function ListViewItem<T>(props: ListViewItemProps<T>): JSX.Element {
   let {
     item,
     isEmphasized
diff --git a/packages/@react-spectrum/list/src/RootDropIndicator.tsx b/packages/@react-spectrum/list/src/RootDropIndicator.tsx
index 319b8d60059..6996cb5e66a 100644
--- a/packages/@react-spectrum/list/src/RootDropIndicator.tsx
+++ b/packages/@react-spectrum/list/src/RootDropIndicator.tsx
@@ -1,8 +1,8 @@
 import {ListViewContext} from './ListView';
-import React, {ReactNode, useContext, useRef} from 'react';
+import React, {JSX, useContext, useRef} from 'react';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
-export default function RootDropIndicator(): ReactNode | null {
+export default function RootDropIndicator(): JSX.Element | null {
   let {dropState, dragAndDropHooks} = useContext(ListViewContext)!;
   let ref = useRef<HTMLDivElement | null>(null);
   let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
diff --git a/packages/@react-spectrum/listbox/src/ListBoxOption.tsx b/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
index 1e531b2ad49..eb760a9342e 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
+++ b/packages/@react-spectrum/listbox/src/ListBoxOption.tsx
@@ -18,7 +18,7 @@ import {isFocusVisible, useHover} from '@react-aria/interactions';
 import {ListBoxContext} from './ListBoxContext';
 import {mergeProps} from '@react-aria/utils';
 import {Node} from '@react-types/shared';
-import React, {ReactNode, useContext, useRef} from 'react';
+import React, {JSX, useContext, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {Text} from '@react-spectrum/text';
 import {useOption} from '@react-aria/listbox';
@@ -28,7 +28,7 @@ interface OptionProps<T> {
 }
 
 /** @private */
-export function ListBoxOption<T>(props: OptionProps<T>): ReactNode {
+export function ListBoxOption<T>(props: OptionProps<T>): JSX.Element {
   let {item} = props;
 
   let {
diff --git a/packages/@react-spectrum/listbox/src/ListBoxSection.tsx b/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
index a68b1b1ee85..93fa29ce5ed 100644
--- a/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
+++ b/packages/@react-spectrum/listbox/src/ListBoxSection.tsx
@@ -15,7 +15,7 @@ import {LayoutInfo} from '@react-stately/virtualizer';
 import {layoutInfoToStyle, useVirtualizerItem, VirtualizerItemOptions} from '@react-aria/virtualizer';
 import {ListBoxContext} from './ListBoxContext';
 import {Node} from '@react-types/shared';
-import React, {Fragment, ReactNode, useContext, useRef} from 'react';
+import React, {Fragment, JSX, ReactNode, useContext, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {useListBoxSection} from '@react-aria/listbox';
 import {useLocale} from '@react-aria/i18n';
@@ -28,7 +28,7 @@ interface ListBoxSectionProps<T> extends Omit<VirtualizerItemOptions, 'ref' | 'l
 }
 
 /** @private */
-export function ListBoxSection<T>(props: ListBoxSectionProps<T>): ReactNode {
+export function ListBoxSection<T>(props: ListBoxSectionProps<T>): JSX.Element {
   let {children, layoutInfo, headerLayoutInfo, virtualizer, item} = props;
   let {headingProps, groupProps} = useListBoxSection({
     heading: item.rendered,
diff --git a/packages/@react-spectrum/menu/src/MenuItem.tsx b/packages/@react-spectrum/menu/src/MenuItem.tsx
index 2b6ecd3e14f..7277dc253cc 100644
--- a/packages/@react-spectrum/menu/src/MenuItem.tsx
+++ b/packages/@react-spectrum/menu/src/MenuItem.tsx
@@ -21,7 +21,7 @@ import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';
-import React, {ReactNode, useMemo, useRef} from 'react';
+import React, {JSX, useMemo, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {Text} from '@react-spectrum/text';
 import {TreeState} from '@react-stately/tree';
@@ -36,7 +36,7 @@ interface MenuItemProps<T> {
 }
 
 /** @private */
-export function MenuItem<T>(props: MenuItemProps<T>): ReactNode {
+export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
   let {
     item,
     state,
diff --git a/packages/@react-spectrum/menu/src/MenuSection.tsx b/packages/@react-spectrum/menu/src/MenuSection.tsx
index f0014a0032d..edee3464b4e 100644
--- a/packages/@react-spectrum/menu/src/MenuSection.tsx
+++ b/packages/@react-spectrum/menu/src/MenuSection.tsx
@@ -14,7 +14,7 @@ import {classNames} from '@react-spectrum/utils';
 import {getChildNodes} from '@react-stately/collections';
 import {MenuItem} from './MenuItem';
 import {Node} from '@react-types/shared';
-import React, {Fragment, ReactNode} from 'react';
+import React, {Fragment, JSX} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {TreeState} from '@react-stately/tree';
 import {useMenuSection} from '@react-aria/menu';
@@ -26,7 +26,7 @@ interface MenuSectionProps<T> {
 }
 
 /** @private */
-export function MenuSection<T>(props: MenuSectionProps<T>): ReactNode {
+export function MenuSection<T>(props: MenuSectionProps<T>): JSX.Element {
   let {item, state} = props;
   let {itemProps, headingProps, groupProps} = useMenuSection({
     heading: item.rendered,
diff --git a/packages/@react-spectrum/overlays/src/OpenTransition.tsx b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
index 46807381fdc..72f3cf80089 100644
--- a/packages/@react-spectrum/overlays/src/OpenTransition.tsx
+++ b/packages/@react-spectrum/overlays/src/OpenTransition.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {ReactElement, ReactNode} from 'react';
+import React, {JSX, JSXElementConstructor, ReactElement} from 'react';
 import {Transition} from 'react-transition-group';
 // TODO install @types/react-transition-group
 
@@ -35,15 +35,15 @@ const OPEN_STATES = {
 export function OpenTransition(
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   props
-): ReactNode {
+): JSX.Element | ReactElement<any, string | JSXElementConstructor<any>>[] {
   // Do not apply any transition if in chromatic.
   if (process.env.CHROMATIC) {
-    return React.Children.map(props.children as ReactElement<any>, child => child && React.cloneElement(child, {isOpen: props.in}));
+    return React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: props.in}));
   }
 
   return (
     <Transition timeout={{enter: 0, exit: 350}} {...props}>
-      {(state) => React.Children.map(props.children, child => child && React.cloneElement(child as ReactElement<any>, {isOpen: !!OPEN_STATES[state]}))}
+      {(state) => React.Children.map(props.children, child => child && React.cloneElement(child, {isOpen: !!OPEN_STATES[state]}))}
     </Transition>
   );
 }
diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index 131de2719f2..d31ede0c542 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import React, {ReactNode} from 'react';
+import React, {JSX} from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
 interface UnderlayProps {
@@ -19,7 +19,7 @@ interface UnderlayProps {
   isTransparent?: boolean
 }
 
-export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): ReactNode {
+export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
   return (
     <div data-testid="underlay" {...otherProps} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
diff --git a/packages/react-aria-components/src/Autocomplete.tsx b/packages/react-aria-components/src/Autocomplete.tsx
index 9d273af4d2d..451598e5f40 100644
--- a/packages/react-aria-components/src/Autocomplete.tsx
+++ b/packages/react-aria-components/src/Autocomplete.tsx
@@ -15,7 +15,7 @@ import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomple
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
-import React, {createContext, ReactNode, RefObject, useRef} from 'react';
+import React, {createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
@@ -36,7 +36,7 @@ export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutoco
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
  */
-export function Autocomplete(props: AutocompleteProps): ReactNode {
+export function Autocomplete(props: AutocompleteProps): JSX.Element {
   let ctx = useSlottedContext(AutocompleteContext, props.slot);
   props = mergeProps(ctx, props);
   let {filter, disableAutoFocusFirst} = props;
diff --git a/packages/react-aria-components/src/ColorPicker.tsx b/packages/react-aria-components/src/ColorPicker.tsx
index 20fbaff1051..68a187c6427 100644
--- a/packages/react-aria-components/src/ColorPicker.tsx
+++ b/packages/react-aria-components/src/ColorPicker.tsx
@@ -16,7 +16,7 @@ import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
-import React, {createContext, ReactNode} from 'react';
+import React, {createContext, JSX} from 'react';
 
 export interface ColorPickerRenderProps {
   /** The currently selected color. */
@@ -32,7 +32,7 @@ export const ColorPickerStateContext = createContext<ColorPickerState | null>(nu
  * A ColorPicker synchronizes a color value between multiple React Aria color components.
  * It simplifies building color pickers with customizable layouts via composition.
  */
-export function ColorPicker(props: ColorPickerProps): ReactNode {
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
   let ctx = useSlottedContext(ColorPickerContext, props.slot);
   props = mergeProps(ctx, props);
   let state = useColorPickerState(props);
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 33c5db8eebe..9520550ba23 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -18,7 +18,7 @@ import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
@@ -40,7 +40,7 @@ export const OverlayTriggerStateContext = createContext<OverlayTriggerState | nu
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  */
-export function DialogTrigger(props: DialogTriggerProps): ReactNode {
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
   // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
   // This is needed to handle submenus.
   let state = useMenuTriggerState(props);
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 4bd7bf96871..ec734898577 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -27,6 +27,7 @@ import React, {
   createContext,
   ForwardedRef,
   forwardRef,
+  JSX,
   ReactElement,
   ReactNode,
   RefObject,
@@ -49,7 +50,7 @@ export interface MenuTriggerProps extends BaseMenuTriggerProps {
   children: ReactNode
 }
 
-export function MenuTrigger(props: MenuTriggerProps): ReactNode {
+export function MenuTrigger(props: MenuTriggerProps): JSX.Element {
   let state = useMenuTriggerState(props);
   let ref = useRef<HTMLButtonElement>(null);
   let {menuTriggerProps, menuProps} = useMenuTrigger({
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index 0e4302da8b0..48446807554 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -16,7 +16,7 @@ import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} fr
 import {FocusableProvider} from '@react-aria/focus';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
@@ -81,7 +81,7 @@ export const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivEl
  * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
  * relative to the trigger.
  */
-export function TooltipTrigger(props: TooltipTriggerComponentProps): ReactNode {
+export function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element {
   let state = useTooltipTriggerState(props);
   let ref = useRef<FocusableElement>(null);
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);
diff --git a/packages/react-aria-components/src/Virtualizer.tsx b/packages/react-aria-components/src/Virtualizer.tsx
index affe32c2442..d7073b645a7 100644
--- a/packages/react-aria-components/src/Virtualizer.tsx
+++ b/packages/react-aria-components/src/Virtualizer.tsx
@@ -13,7 +13,7 @@
 import {CollectionBranchProps, CollectionRenderer, CollectionRendererContext, CollectionRootProps} from './Collection';
 import {DropPosition, DropTarget, DropTargetDelegate, ItemDropTarget, Node} from '@react-types/shared';
 import {Layout, ReusableView, useVirtualizerState, VirtualizerState} from '@react-stately/virtualizer';
-import React, {createContext, ReactNode, useContext, useMemo} from 'react';
+import React, {createContext, JSX, ReactNode, useContext, useMemo} from 'react';
 import {useScrollView, VirtualizerItem} from '@react-aria/virtualizer';
 
 type View = ReusableView<Node<unknown>, ReactNode>;
@@ -50,7 +50,7 @@ const LayoutContext = createContext<LayoutContextValue | null>(null);
  * It supports very large collections by only rendering visible items to the DOM, reusing
  * them as the user scrolls.
  */
-export function Virtualizer<O>(props: VirtualizerProps<O>): ReactNode {
+export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   let {children, layout: layoutProp, layoutOptions} = props;
   let layout = useMemo(() => typeof layoutProp === 'function' ? new layoutProp() : layoutProp, [layoutProp]);
   let renderer: CollectionRenderer = useMemo(() => ({

From 0548d304a968078fd5aec2bff71a6563ffe216dc Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 7 May 2025 17:58:19 -0500
Subject: [PATCH 22/24] chore: Refactor codemods (#8056)

* initial codemod refactor

* fix TableView

* fix selectionStyle

* fix key to id

* clean up comments

* lint

* clean up

* update README.md

* improve transform function/option names

* update action group comments
---
 packages/dev/codemods/src/s1-to-s2/README.md  |    8 +
 .../src/s1-to-s2/src/codemods/button.ts       |   31 -
 .../src/s1-to-s2/src/codemods/changes.ts      | 1386 ----------------
 .../src/s1-to-s2/src/codemods/codemod.ts      |   32 +-
 .../components/ActionGroup/transform.ts       |  188 +++
 .../components/ActionMenu/transform.ts        |   16 +
 .../codemods/components/Avatar/transform.ts   |   49 +
 .../codemods/components/Badge/transform.ts    |   17 +
 .../components/Breadcrumbs/transform.ts       |   34 +
 .../codemods/components/Button/transform.ts   |   61 +
 .../components/CheckboxGroup/transform.ts     |   12 +
 .../components/ColorField/transform.ts        |   29 +
 .../components/ColorSlider/transform.ts       |   12 +
 .../codemods/components/Column/transform.ts   |   12 +
 .../codemods/components/ComboBox/transform.ts |   46 +
 .../components/ContextualHelp/transform.ts    |   16 +
 .../components/DialogContainer/transform.ts   |   17 +
 .../components/DialogTrigger/transform.ts     |   95 ++
 .../codemods/components/Divider/transform.ts  |   12 +
 .../src/codemods/components/Form/transform.ts |   24 +
 .../components/InlineAlert/transform.ts       |   17 +
 .../src/codemods/components/Item/transform.ts |   26 +
 .../src/codemods/components/Link/transform.ts |   49 +
 .../components/NumberField/transform.ts       |   25 +
 .../codemods/components/Picker/transform.ts   |   42 +
 .../components/ProgressBar/transform.ts       |   25 +
 .../components/ProgressCircle/transform.ts    |   17 +
 .../components/RadioGroup/transform.ts        |   25 +
 .../components/RangeSlider/transform.ts       |   20 +
 .../src/codemods/components/Row/transform.ts  |  107 ++
 .../components/SearchField/transform.ts       |   33 +
 .../codemods/components/Section/transform.ts  |   39 +
 .../codemods/components/Slider/transform.ts   |   28 +
 .../components/StatusLight/transform.ts       |   21 +
 .../components/TableView/transform.ts         |  175 ++
 .../src/codemods/components/Tabs/transform.ts |   99 ++
 .../codemods/components/TagGroup/transform.ts |   30 +
 .../codemods/components/TextArea/transform.ts |   33 +
 .../components/TextField/transform.ts         |   33 +
 .../codemods/components/Tooltip/transform.ts  |   32 +
 .../components/TooltipTrigger/transform.ts    |   15 +
 .../src/s1-to-s2/src/codemods/dialog.ts       |   47 -
 .../src/{ => codemods/icons}/iconMap.ts       |    0
 .../src/codemods/{ => shared}/colors.ts       |    0
 .../src/codemods/{ => shared}/dimensions.ts   |    0
 .../src/codemods/{ => shared}/styleProps.ts   |    4 +-
 .../src/codemods/shared/transforms.ts         |  794 +++++++++
 .../src/codemods/{ => shared}/unsafeStyle.ts  |    2 +-
 .../src/codemods/{ => shared}/utils.ts        |   18 +-
 .../src/s1-to-s2/src/codemods/transforms.ts   | 1446 -----------------
 50 files changed, 2359 insertions(+), 2940 deletions(-)
 delete mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/button.ts
 delete mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionGroup/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionMenu/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Avatar/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Badge/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Breadcrumbs/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Button/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/CheckboxGroup/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorSlider/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Column/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ContextualHelp/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogContainer/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogTrigger/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Divider/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Form/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/InlineAlert/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Link/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/NumberField/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Picker/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressBar/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressCircle/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/RadioGroup/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/RangeSlider/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Row/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Section/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Slider/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/StatusLight/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/TableView/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tabs/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/TagGroup/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tooltip/transform.ts
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/components/TooltipTrigger/transform.ts
 delete mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/dialog.ts
 rename packages/dev/codemods/src/s1-to-s2/src/{ => codemods/icons}/iconMap.ts (100%)
 rename packages/dev/codemods/src/s1-to-s2/src/codemods/{ => shared}/colors.ts (100%)
 rename packages/dev/codemods/src/s1-to-s2/src/codemods/{ => shared}/dimensions.ts (100%)
 rename packages/dev/codemods/src/s1-to-s2/src/codemods/{ => shared}/styleProps.ts (99%)
 create mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
 rename packages/dev/codemods/src/s1-to-s2/src/codemods/{ => shared}/unsafeStyle.ts (99%)
 rename packages/dev/codemods/src/s1-to-s2/src/codemods/{ => shared}/utils.ts (91%)
 delete mode 100644 packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts

diff --git a/packages/dev/codemods/src/s1-to-s2/README.md b/packages/dev/codemods/src/s1-to-s2/README.md
index c2db857dd15..0751b1c1a80 100644
--- a/packages/dev/codemods/src/s1-to-s2/README.md
+++ b/packages/dev/codemods/src/s1-to-s2/README.md
@@ -13,3 +13,11 @@ Run `npx @react-spectrum/codemods s1-to-s2` from the directory you want to upgra
 ## How it works
 
 The upgrade assistant use codemods written with [jscodeshift](https://github.com/facebook/jscodeshift).
+
+## Adding a new codemod
+
+To add a new codemod for `Button`, for example, you would:
+
+1. Create a new transform function in `src/codemods/components/Button/transform.ts` and export it as `default`
+2. Implement the transform logic
+3. Add tests for the transform in `__tests__/button.test.ts`
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/button.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/button.ts
deleted file mode 100644
index 62bbbebb0f7..00000000000
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/button.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {getPropValue} from './utils';
-import {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
-
-export function transformButton(path: NodePath<t.JSXElement>) {
-  path.traverse({
-    JSXAttribute(path) {
-      let value = getPropValue(path.node.value);
-      if (path.node.name.type !== 'JSXIdentifier' || !value) {
-        return;
-      }
-
-      switch (path.node.name.name) {
-        case 'variant': {
-          if (value.type === 'StringLiteral') {
-            if (value.value === 'cta') {
-              value.value = 'accent';
-            } else if (value.value === 'overBackground') {
-              value.value = 'primary';
-              path.insertAfter(t.jsxAttribute(
-                t.jsxIdentifier('staticColor'),
-                t.stringLiteral('white')
-              ));
-            }
-          }
-          break;
-        }
-      }
-    }
-  });
-}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
deleted file mode 100644
index 4f23d59e83d..00000000000
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts
+++ /dev/null
@@ -1,1386 +0,0 @@
-import {
-  AddCommentToElementOptions,
-  CommentOutPropOptions,
-  ConvertDimensionValueToPxOptions,
-  MovePropToNewChildComponentOptions,
-  MovePropToParentComponentOptions,
-  MoveRenderPropsOptions,
-  RemoveComponentIfWithinParentOptions,
-  RemovePropOptions,
-  UpdateComponentIfPropPresentOptions,
-  UpdateComponentWithinCollectionOptions,
-  UpdatePlacementToSingleValueProps,
-  UpdatePropNameAndValueOptions,
-  UpdatePropNameOptions,
-  UpdatePropValueAndAddNewPropOptions,
-  UpdateToNewComponentOptions
-} from './transforms';
-
-type FunctionInfo =
-  | { name: 'commentOutProp', args: CommentOutPropOptions }
-  | { name: 'removeProp', args: RemovePropOptions }
-  | { name: 'updatePropNameAndValue', args: UpdatePropNameAndValueOptions }
-  | {
-      name: 'updatePropValueAndAddNewProp',
-      args: UpdatePropValueAndAddNewPropOptions
-    }
-  | { name: 'updatePropName', args: UpdatePropNameOptions }
-  | {
-      name: 'updateComponentIfPropPresent',
-      args: UpdateComponentIfPropPresentOptions
-    }
-  | { name: 'updateToNewComponent', args: UpdateToNewComponentOptions }
-  | { name: 'moveRenderPropsToChild', args: MoveRenderPropsOptions }
-  | { name: 'removeProp', args: RemovePropOptions }
-  | {
-      name: 'updateComponentWithinCollection',
-      args: UpdateComponentWithinCollectionOptions
-    }
-  | {
-      name: 'updateTabs',
-      args: {}
-    }
-  | {
-      name: 'movePropToNewChildComponent',
-      args: MovePropToNewChildComponentOptions
-    }
-  | {
-      name: 'movePropToParentComponent',
-      args: MovePropToParentComponentOptions
-    }
-  | {
-    name: 'convertDimensionValueToPx',
-    args: ConvertDimensionValueToPxOptions
-  }
-  | {
-    name: 'updatePlacementToSingleValue',
-    args: UpdatePlacementToSingleValueProps
-  }
-  | {
-    name: 'removeComponentIfWithinParent',
-    args: RemoveComponentIfWithinParentOptions
-  }
-  | {
-    name: 'addCommentToElement',
-    args: AddCommentToElementOptions
-  }
-  | {
-    name: 'commentIfParentCollectionNotDetected',
-    args: {}
-  }
-  | {
-    name: 'updateAvatarSize',
-    args: {}
-  }
-  | {
-    name: 'updateLegacyLink',
-    args: {}
-  }
-  | {
-    name: 'addColumnsPropToRow',
-    args: {}
-  }
-  | {
-    name: 'updateRowFunctionArg',
-    args: {}
-  }
-  | {
-    name: 'updateKeyToId',
-    args: {}
-  }
-  | {
-    name: 'updateDialogChild',
-    args: {}
-  }
-  | {
-    name: 'updateActionGroup',
-    args: {}
-  } | {
-    name: 'commentIfNestedColumns',
-    args: {}
-  } | {
-    name: 'addRowHeader',
-    args: {}
-  }
-
-type Change = {
-  description: string,
-  reason: string,
-  function: FunctionInfo
-};
-
-type ComponentChanges = {
-  changes: Change[]
-};
-
-type ChangesJSON = {
-  [component: string]: ComponentChanges
-};
-
-export const changes: ChangesJSON = {
-  Avatar: {
-    changes: [
-      {
-        description: 'Comment out isDisabled',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'isDisabled'}
-        }
-      },
-      {
-        description: 'Update size prop',
-        reason: 'Updated naming convention',
-        function: {
-          name: 'updateAvatarSize',
-          args: {}
-        }
-      }
-    ]
-  },
-  ActionGroup: {
-    changes: [
-      {
-        description: 'Comment out overflowMode',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'overflowMode'}
-        }
-      },
-      {
-        description: 'Comment out buttonLabelBehavior',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'buttonLabelBehavior'}
-        }
-      },
-      {
-        description: 'Comment out summaryIcon',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'summaryIcon'}
-        }
-      },
-      {
-        description: 'Replace with ActionButtonGroup or ToggleButtonGroup',
-        reason: 'The API has changed',
-        function: {name: 'updateActionGroup', args: {}}
-      }
-    ]
-  },
-  ActionMenu: {
-    changes: [
-      {
-        description: 'Comment out closeOnSelect',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'closeOnSelect'}
-        }
-      },
-      {
-        description: 'Comment out trigger',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'trigger'}
-        }
-      }
-    ]
-  },
-  Badge: {
-    changes: [
-      {
-        description: "Change variant='info' to variant='informative'",
-        reason: 'Updated naming convention',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'info',
-            newProp: 'variant',
-            newValue: 'informative'
-          }
-        }
-      }
-    ]
-  },
-  Breadcrumbs: {
-    changes: [
-      {
-        description: 'Comment out showRoot',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'showRoot'}
-        }
-      },
-      {
-        description: 'Comment out isMultiline',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'isMultiline'}
-        }
-      },
-      {
-        description: 'Comment out autoFocusCurrent',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'autoFocusCurrent'}
-        }
-      },
-      {
-        description: 'Remove size="S"',
-        reason: 'Small is no longer a supported size in Spectrum 2',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'size', propValue: 'S'}
-        }
-      },
-      {
-        description: 'Add comment to wrap in nav element if needed',
-        reason: 'A nav element is no longer included inside Breadcrumbs by default. You can wrap the Breadcrumbs component in a nav element if needed.',
-        function: {
-          name: 'addCommentToElement',
-          args: {comment: 'S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed.'}
-        }
-      }
-    ]
-  },
-  Button: {
-    changes: [
-      {
-        description: 'Change variant="cta" to variant="accent"',
-        reason: 'Call-to-action was deprecated',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'cta',
-            newProp: 'variant',
-            newValue: 'accent'
-          }
-        }
-      },
-      {
-        description:
-          'Change variant="overBackground" to variant="primary" staticColor="white"',
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'updatePropValueAndAddNewProp',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'overBackground',
-            newProp: 'variant',
-            newValue: 'primary',
-            additionalProp: 'staticColor',
-            additionalValue: 'white'
-          }
-        }
-      },
-      {
-        description: 'Change style to fillStyle',
-        reason: 'To avoid confusion with HTMLElement style attribute',
-        function: {
-          name: 'updatePropName',
-          args: {oldProp: 'style', newProp: 'fillStyle'}
-        }
-      },
-      {
-        description: 'Comment out isPending',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'isPending'}
-        }
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description:
-          'If href is present, Button should be converted to a LinkButton',
-        reason: 'Improved API and behavior for links',
-        function: {
-          name: 'updateComponentIfPropPresent',
-          args: {
-            newComponent: 'LinkButton',
-            propToCheck: 'href'
-          }
-        }
-      },
-      {
-        description: 'Remove elementType',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'elementType'}}
-      }
-    ]
-  },
-  CheckboxGroup: {
-    changes: [
-      {
-        description: 'Remove showErrorIcon',
-        reason: 'It has been removed for accessibility reasons',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'showErrorIcon'}
-        }
-      }
-    ]
-  },
-  ColorArea: {
-    changes: []
-  },
-  ColorWheel: {
-    changes: []
-  },
-  ColorSlider: {
-    changes: [
-      {
-        description: 'Remove showValueLabel',
-        reason: 'It has been removed for accessibility reasons',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'showValueLabel'}
-        }
-      }
-    ]
-  },
-  ColorField: {
-    changes: [
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'isQuiet'}
-        }
-      },
-      {
-        description: 'Remove placeholder',
-        reason: 'It has been removed for accessibility reasons',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'placeholder'}
-        }
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  ComboBox: {
-    changes: [
-      {
-        description:
-          'Change menuWidth value from a DimensionValue to a pixel value',
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'convertDimensionValueToPx',
-          args: {
-            propToConvertValue: 'menuWidth'
-          }
-        }
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: 'Comment out loadingState',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'loadingState'}
-        }
-      },
-      {
-        description: 'Remove placeholder',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'placeholder'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      },
-      {
-        description: 'Comment out onLoadMore',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'onLoadMore'}
-        }
-      }
-    ]
-  },
-  Dialog: {
-    changes: []
-  },
-  DialogTrigger: {
-    changes: [
-      {
-        description: "Comment out type='tray'",
-        reason: 'Tray has not been implemented yet',
-        function: {name: 'commentOutProp', args: {propToComment: 'type', propValue: 'tray'}}
-      },
-      {
-        description: "Comment out mobileType='tray'",
-        reason: 'mobileType has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'mobileType'}
-        }
-      },
-      {
-        description: 'Remove targetRef',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'targetRef'}}
-      },
-      {
-        description:
-          'Update children to move render props from being the second child of DialogTrigger to being a child of Dialog',
-        reason: 'Updated API',
-        function: {
-          name: 'moveRenderPropsToChild',
-          args: {newChildComponent: 'Dialog'}
-        }
-      },
-      {
-        description: 'Rename isDismissable to isDismissible',
-        reason: 'Fixed spelling',
-        function: {name: 'updatePropName', args: {oldProp: 'isDismissable', newProp: 'isDismissible'}}
-      },
-      {
-        description: 'Update Dialog child to Popover or FullscreenDialog depending on type prop',
-        reason: 'Updated API',
-        function: {name: 'updateDialogChild', args: {}}
-      }
-    ]
-  },
-  DialogContainer: {
-    changes: [
-      {
-        description: 'Rename isDismissable to isDismissible',
-        reason: 'Fixed spelling',
-        function: {name: 'updatePropName', args: {oldProp: 'isDismissable', newProp: 'isDismissible'}}
-      },
-      {
-        description: 'Update Dialog child to Popover or FullscreenDialog depending on type prop',
-        reason: 'Updated API',
-        function: {name: 'updateDialogChild', args: {}}
-      }
-    ]
-  },
-  Divider: {
-    changes: [
-      {
-        description: 'Remove Divider if within a Dialog',
-        reason: 'Updated design',
-        function: {
-          name: 'removeComponentIfWithinParent',
-          args: {parentComponent: 'Dialog'}
-        }
-      }
-    ]
-  },
-  Form: {
-    changes: [
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: 'Remove isReadOnly',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isReadOnly'}}
-      },
-      {
-        description: 'Remove validationState',
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState'}
-        }
-      }
-    ]
-  },
-  InlineAlert: {
-    changes: [
-      {
-        description: "Change variant='info' to variant='informative'",
-        reason: 'Updated naming convention',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'info',
-            newProp: 'variant',
-            newValue: 'informative'
-          }
-        }
-      }
-    ]
-  },
-  Item: {
-    changes: [
-      {
-        description: 'If within Menu, update Item to be a MenuItem',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'Menu',
-            newComponent: 'MenuItem'
-          }
-        }
-      },
-      {
-        description: 'If within ActionMenu, update Item to be a MenuItem',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'ActionMenu',
-            newComponent: 'MenuItem'
-          }
-        }
-      },
-      {
-        description: 'If within TagGroup, update Item to be a Tag',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'TagGroup',
-            newComponent: 'Tag'
-          }
-        }
-      },
-      {
-        description: 'If within Breadcrumbs, update Item to be a Breadcrumb',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'Breadcrumbs',
-            newComponent: 'Breadcrumb'
-          }
-        }
-      },
-      {
-        description: 'If within Picker, update Item to be a PickerItem',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'Picker',
-            newComponent: 'PickerItem'
-          }
-        }
-      },
-      {
-        description: 'If within ComboBox, update Item to be a ComboBoxItem',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'ComboBox',
-            newComponent: 'ComboBoxItem'
-          }
-        }
-      },
-      {
-        description: 'Leave comment if we cannot determine parent collection component',
-        reason: 'No collection parent detected',
-        function: {
-          name: 'commentIfParentCollectionNotDetected',
-          args: {}
-        }
-      }
-      // TODO: Not yet implemented in S2
-      // {
-      //   description: 'If within ListBox, update Item to be a ListBoxItem',
-      //   reason: 'Updated collections API',
-      //   function: {
-      //     name: 'updateComponentWithinCollection',
-      //     args: {
-      //       parentComponent: 'ListBox',
-      //       newComponent: 'ListBoxItem'
-      //     }
-      //   }
-      // },
-    ]
-  },
-  Link: {
-    changes: [
-      {
-        description: "Change variant='overBackground' to staticColor='white'",
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'overBackground',
-            newProp: 'staticColor',
-            newValue: 'white'
-          }
-        }
-      },
-      {
-        description: 'Remove inner anchor element if used (legacy API)',
-        reason: 'Updated API',
-        function: {
-          name: 'updateLegacyLink',
-          args: {}
-        }
-      }
-    ]
-  },
-  MenuTrigger: {
-    changes: [
-      {
-        description: 'Comment out closeOnSelect',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'closeOnSelect'}
-        }
-      }
-    ]
-  },
-  SubmenuTrigger: {
-    changes: [
-      {
-        description: 'Remove targetKey',
-        reason: 'Potential v3 bug or API differ bug',
-        function: {name: 'removeProp', args: {propToRemove: 'targetKey'}}
-      }
-    ]
-  },
-  NumberField: {
-    changes: [
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  Picker: {
-    changes: [
-      {
-        description:
-          'Change menuWidth value from a DimensionValue to a pixel value',
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'convertDimensionValueToPx',
-          args: {
-            propToConvertValue: 'menuWidth'
-          }
-        }
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      },
-      {
-        description: 'Comment out isLoading',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'isLoading'}
-        }
-      },
-      {
-        description: 'Comment out onLoadMore',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'onLoadMore'}
-        }
-      }
-    ]
-  },
-  ProgressBar: {
-    changes: [
-      {
-        description: "Change variant='overBackground' to staticColor='white'",
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'overBackground',
-            newProp: 'staticColor',
-            newValue: 'white'
-          }
-        }
-      },
-      {
-        description: 'Comment out labelPosition',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'labelPosition'}
-        }
-      },
-      {
-        description: 'Remove showValueLabel',
-        reason: 'It was removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'showValueLabel'}}
-      }
-    ]
-  },
-  ProgressCircle: {
-    changes: [
-      {
-        description: "Change variant='overBackground' to staticColor='white'",
-        reason: 'Updated design guidelines',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'overBackground',
-            newProp: 'staticColor',
-            newValue: 'white'
-          }
-        }
-      }
-    ]
-  },
-  RadioGroup: {
-    changes: [
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      },
-      {
-        description: 'Remove showErrorIcon',
-        reason: 'It has been removed for accessibility reasons',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'showErrorIcon'}
-        }
-      }
-    ]
-  },
-  RangeSlider: {
-    changes: [
-      {
-        description: 'Remove showValueLabel',
-        reason: 'It was removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'showValueLabel'}}
-      },
-      {
-        description: 'Comment out getValueLabel',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'getValueLabel'}
-        }
-      },
-      {
-        description: 'Comment out orientation',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'orientation'}
-        }
-      }
-    ]
-  },
-  SearchField: {
-    changes: [
-      {
-        description: 'Remove placeholder',
-        reason: 'It has been removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'placeholder'}}
-      },
-      {
-        description: 'Comment out icon',
-        reason: 'It has not been implemented yet',
-        function: {name: 'commentOutProp', args: {propToComment: 'icon'}}
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  Section: {
-    changes: [
-      {
-        description: 'If within Menu, update Section to be a MenuSection',
-        reason: 'Updated component structure',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'Menu',
-            newComponent: 'MenuSection'
-          }
-        }
-      },
-      {
-        description: 'If within Picker, update Section to be a PickerSection',
-        reason: 'Updated component structure',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'Picker',
-            newComponent: 'PickerSection'
-          }
-        }
-      },
-      {
-        description: 'If within ComboBox, update Section to be a ComboBoxSection',
-        reason: 'Updated component structure',
-        function: {
-          name: 'updateComponentWithinCollection',
-          args: {
-            parentComponent: 'ComboBox',
-            newComponent: 'ComboBoxSection'
-          }
-        }
-      },
-      {
-        description:
-          'Move title prop string to be a child of new Heading within a Header',
-        reason: 'Updated API',
-        function: {
-          name: 'movePropToNewChildComponent',
-          args: {
-            parentComponent: 'Menu',
-            childComponent: 'MenuSection',
-            propToMove: 'title',
-            newChildComponent: 'Header'
-          }
-        }
-      },
-      {
-        description:
-          'Move title prop string to be a child of new Heading within a Header',
-        reason: 'Updated API',
-        function: {
-          name: 'movePropToNewChildComponent',
-          args: {
-            parentComponent: 'Picker',
-            childComponent: 'PickerSection',
-            propToMove: 'title',
-            newChildComponent: 'Header'
-          }
-        }
-      },
-      {
-        description:
-          'Move title prop string to be a child of new Heading within a Header',
-        reason: 'Updated API',
-        function: {
-          name: 'movePropToNewChildComponent',
-          args: {
-            parentComponent: 'ComboBox',
-            childComponent: 'ComboBoxSection',
-            propToMove: 'title',
-            newChildComponent: 'Header'
-          }
-        }
-      },
-      {
-        description: 'Leave comment if we cannot determine parent collection component',
-        reason: 'No collection parent detected',
-        function: {
-          name: 'commentIfParentCollectionNotDetected',
-          args: {}
-        }
-      }
-    ]
-  },
-  Slider: {
-    changes: [
-      {
-        description: 'Remove isFilled',
-        reason: 'Slider is always filled in Spectrum 2',
-        function: {name: 'removeProp', args: {propToRemove: 'isFilled'}}
-      },
-      {
-        description: 'Remove trackGradient',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'trackGradient'}}
-      },
-      {
-        description: 'Remove showValueLabel',
-        reason: 'It was removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'showValueLabel'}}
-      },
-      {
-        description: 'Comment out getValueLabel',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'getValueLabel'}
-        }
-      },
-      {
-        description: 'Comment out orientation',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'orientation'}
-        }
-      }
-    ]
-  },
-  StatusLight: {
-    changes: [
-      {
-        description: 'Remove isDisabled',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isDisabled'}}
-      },
-      {
-        description: "Change variant='info' to variant='informative'",
-        reason: 'Updated naming convention',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'variant',
-            oldValue: 'info',
-            newProp: 'variant',
-            newValue: 'informative'
-          }
-        }
-      }
-    ]
-  },
-  Tabs: {
-    changes: [
-      {
-        description: 'Remove TabPanels components and keep individual TabPanel components inside.',
-        reason: 'Updated collections API',
-        function: {
-          name: 'updateTabs',
-          args: {}
-        }
-      },
-      {
-        description: 'Remove isEmphasized',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isEmphasized'}}
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      }
-    ]
-  },
-  TagGroup: {
-    changes: [
-      {
-        description: 'Change actionLabel to groupActionLabel',
-        reason: 'To match new onGroupAction prop',
-        function: {
-          name: 'updatePropName',
-          args: {oldProp: 'actionLabel', newProp: 'groupActionLabel'}
-        }
-      },
-      {
-        description: 'Change onAction to onGroupAction',
-        reason: 'To avoid confusion with existing onAction prop on other collection components',
-        function: {
-          name: 'updatePropName',
-          args: {oldProp: 'onAction', newProp: 'onGroupAction'}
-        }
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  TextArea: {
-    changes: [
-      {
-        description: 'Comment out icon',
-        reason: 'It has not been implemented yet',
-        function: {name: 'commentOutProp', args: {propToComment: 'icon'}}
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: 'Remove placeholder',
-        reason: 'It has been removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'placeholder'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  TextField: {
-    changes: [
-      {
-        description: 'Comment out icon',
-        reason: 'It has not been implemented yet',
-        function: {name: 'commentOutProp', args: {propToComment: 'icon'}}
-      },
-      {
-        description: 'Remove isQuiet',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'isQuiet'}}
-      },
-      {
-        description: 'Remove placeholder',
-        reason: 'It has been removed for accessibility reasons',
-        function: {name: 'removeProp', args: {propToRemove: 'placeholder'}}
-      },
-      {
-        description: "Change validationState='invalid' to isInvalid",
-        reason: 'Updated API',
-        function: {
-          name: 'updatePropNameAndValue',
-          args: {
-            oldProp: 'validationState',
-            oldValue: 'invalid',
-            newProp: 'isInvalid',
-            newValue: true
-          }
-        }
-      },
-      {
-        description: "Remove validationState='valid'",
-        reason: 'It is no longer supported',
-        function: {
-          name: 'removeProp',
-          args: {propToRemove: 'validationState', propValue: 'valid'}
-        }
-      }
-    ]
-  },
-  Tooltip: {
-    changes: [
-      {
-        description: 'Remove variant',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'variant'}}
-      },
-      {
-        description:
-          'Remove placement and add to the parent TooltipTrigger instead',
-        reason: 'Updated API',
-        function: {
-          name: 'movePropToParentComponent',
-          args: {
-            parentComponent: 'TooltipTrigger',
-            childComponent: 'Tooltip',
-            propToMove: 'placement'
-          }
-        }
-      },
-      {
-        description: 'Remove showIcon',
-        reason: 'It is no longer supported',
-        function: {name: 'removeProp', args: {propToRemove: 'showIcon'}}
-      },
-      {
-        description:
-          'Remove isOpen and add to the parent TooltipTrigger instead',
-        reason: 'Updated API',
-        function: {
-          name: 'movePropToParentComponent',
-          args: {
-            parentComponent: 'TooltipTrigger',
-            childComponent: 'Tooltip',
-            propToMove: 'isOpen'
-          }
-        }
-      }
-    ]
-  },
-  TooltipTrigger: {
-    changes: [
-      {
-        description: 'Update placement to use single value',
-        reason: 'Updated API',
-        function: {
-          name: 'updatePlacementToSingleValue',
-          args: {
-            propToUpdate: 'placement',
-            childComponent: 'Tooltip'
-          }
-        }
-      }
-    ]
-  },
-  TableView: {
-    changes: [
-      {
-        description: 'Add columns prop to Row',
-        reason: 'Rows now require a columns prop from TableHeader',
-        function: {
-          name: 'addColumnsPropToRow',
-          args: {}
-        }
-      },
-      {
-        description: 'Leave comment if nested columns are used',
-        reason: 'Nested columns are not supported yet',
-        function: {
-          name: 'commentIfNestedColumns',
-          args: {}
-        }
-      },
-      {
-        description: 'Comment out dragAndDropHooks',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'dragAndDropHooks'}
-        }
-      },
-      {
-        description: 'Comment out selectionStyle="highlight"',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'selectionStyle'}
-        }
-      },
-      {
-        description: 'Comment out UNSTABLE_allowsExpandableRows',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'UNSTABLE_allowsExpandableRows'}
-        }
-      },
-      {
-        description: 'Comment out UNSTABLE_defaultExpandedKeys',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'UNSTABLE_defaultExpandedKeys'}
-        }
-      },
-      {
-        description: 'Comment out UNSTABLE_expandedKeys',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'UNSTABLE_expandedKeys'}
-        }
-      },
-      {
-        description: 'Comment out UNSTABLE_onExpandedChange',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'UNSTABLE_onExpandedChange'}
-        }
-      },
-      {
-        description: 'Add isRowHeader prop to fist Column if one doesn\'t eixst already',
-        reason: 'Updated API',
-        function: {
-          name: 'addRowHeader',
-          args: {}
-        }
-      }
-    ]
-  },
-  Column: {
-    changes: [
-      {
-        description: 'Update key prop to id',
-        reason: 'Updated API',
-        function: {
-          name: 'updateKeyToId',
-          args: {}
-        }
-      }
-    ]
-  },
-  Row: {
-    changes: [
-      {
-        description: 'Update key prop to id',
-        reason: 'Updated API',
-        function: {
-          name: 'updateKeyToId',
-          args: {}
-        }
-      },
-      {
-        description: 'Update child function to receive column object instead of column key',
-        reason: 'Updated API',
-        function: {
-          name: 'updateRowFunctionArg',
-          args: {}
-        }
-      }
-    ]
-  }
-};
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
index 1ed7c570c1c..157c583df41 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/codemod.ts
@@ -1,13 +1,11 @@
 /* eslint-disable max-depth */
-import {addComment} from './utils';
+import {addComment} from './shared/utils';
 import {API, FileInfo} from 'jscodeshift';
-import {changes as changesJSON} from './changes';
-import {functionMap} from './transforms';
 import {getComponents} from '../getComponents';
-import {iconMap} from '../iconMap';
+import {iconMap} from './icons/iconMap';
 import {parse as recastParse} from 'recast';
 import * as t from '@babel/types';
-import {transformStyleProps} from './styleProps';
+import transformStyleProps from './shared/styleProps';
 import traverse, {Binding, NodePath} from '@babel/traverse';
 
 // Determine list of available components in S2 from index.ts
@@ -192,20 +190,18 @@ export default function transformer(file: FileInfo, api: API, options: Options)
       addComment(path.node, ' TODO(S2-upgrade): Could not transform style prop automatically: ' + error);
     }
 
-    const componentInfo = changesJSON[elementName];
-    if (!componentInfo) {
-      return;
-    }
-    const {changes} = componentInfo;
-
-    changes.forEach((change) => {
-      const {function: functionInfo} = change;
-      let {name: functionName, args: functionArgs} = functionInfo;
-      // Call the respective transformation function
-      if (functionMap[functionName]) {
-        functionMap[functionName](path, functionArgs as any);
+    // Try to find a specific transform
+    try {
+      // Dynamically import the transform based on elementName
+      const transformPath = `./components/${elementName}/transform`;
+      // Use require for dynamic import in CommonJS context
+      const componentTransform = require(transformPath);
+      if (componentTransform && typeof componentTransform.default === 'function') {
+        componentTransform.default(path);
       }
-    });
+    } catch {
+      // Do nothing if the transform doesn't exist
+    }
   });
 
   if (hasMacros) {
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionGroup/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionGroup/transform.ts
new file mode 100644
index 00000000000..91f2fd15cfa
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionGroup/transform.ts
@@ -0,0 +1,188 @@
+import {addComponentImport} from '../../shared/utils';
+import {commentOutProp} from '../../shared/transforms';
+import {getComponents} from '../../../getComponents';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+let availableComponents = getComponents();
+
+/**
+ * Transforms ActionGroup:
+ * - Comment out overflowMode (it has not been implemented yet).
+ * - Comment out buttonLabelBehavior (it has not been implemented yet).
+ * - Comment out summaryIcon (it has not been implemented yet).
+ * - Use ActionButtonGroup if no selection.
+ * - Use ToggleButtonGroup if selection is used.
+ * - Update root level onAction to onPress on each ActionButton.
+ * - Apply isDisabled directly on each ActionButton/ToggleButton instead of disabledKeys.
+ * - Convert dynamic collections render function to items.map.
+ */
+export default function transformActionGroup(path: NodePath<t.JSXElement>) {
+  // Comment out overflowMode
+  commentOutProp(path, {propName: 'overflowMode'});
+
+  // Comment out buttonLabelBehavior
+  commentOutProp(path, {propName: 'buttonLabelBehavior'});
+
+  // Comment out summaryIcon
+  commentOutProp(path, {propName: 'summaryIcon'});
+
+  let selectionModePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'selectionMode') as NodePath<t.JSXAttribute> | undefined;
+  let selectionMode = t.isStringLiteral(selectionModePath?.node.value) ? selectionModePath.node.value.value : 'none';
+  let newComponentName, childComponentName;
+  if (selectionMode === 'none') {
+    // Use ActionButtonGroup if no selection
+    newComponentName = 'ActionButtonGroup';
+    childComponentName = 'ActionButton';
+    selectionModePath?.remove();
+  } else {
+    // Use ToggleButtonGroup if selection is used
+    newComponentName = 'ToggleButtonGroup';
+    childComponentName = 'ToggleButton';
+  }
+
+  let localName = newComponentName;
+  if (availableComponents.has(newComponentName)) {
+    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+    localName = addComponentImport(program, newComponentName);
+  }
+
+  let localChildName = childComponentName;
+  if (availableComponents.has(childComponentName)) {
+    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+    localChildName = addComponentImport(program, childComponentName);
+  }
+
+
+  // Convert dynamic collection to an array.map.
+  let items = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'items') as NodePath<t.JSXAttribute> | undefined;
+  let itemArg: t.Identifier | undefined;
+  if (items && t.isJSXExpressionContainer(items.node.value) && t.isExpression(items.node.value.expression)) {
+    let child = path.get('children').find(c => c.isJSXExpressionContainer());
+    if (child && child.isJSXExpressionContainer() && t.isFunction(child.node.expression)) {
+      let arg = child.node.expression.params[0];
+      if (t.isIdentifier(arg)) {
+        itemArg = arg;
+      }
+
+      child.replaceWith(
+        t.jsxExpressionContainer(
+          t.callExpression(
+            t.memberExpression(
+              items.node.value.expression,
+              t.identifier('map')
+            ),
+            [child.node.expression]
+          )
+        )
+      );
+    }
+  }
+  items?.remove();
+
+  let onAction = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'onAction') as NodePath<t.JSXAttribute> | undefined;
+
+  // Pull disabledKeys prop out into a variable, converted to a Set.
+  // Then we can check it in the isDisabled prop of each item.
+  let disabledKeysPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'disabledKeys') as NodePath<t.JSXAttribute> | undefined;
+  let disabledKeys: t.Identifier | undefined;
+  if (disabledKeysPath && t.isJSXExpressionContainer(disabledKeysPath.node.value) && t.isExpression(disabledKeysPath.node.value.expression)) {
+    disabledKeys = path.scope.generateUidIdentifier('disabledKeys');
+    path.scope.push({
+      id: disabledKeys,
+      init: t.newExpression(t.identifier('Set'), [disabledKeysPath.node.value.expression]),
+      kind: 'let'
+    });
+    disabledKeysPath.remove();
+  }
+
+  path.traverse({
+    JSXElement(child) {
+      if (t.isJSXIdentifier(child.node.openingElement.name) && child.node.openingElement.name.name === 'Item') {
+        // Replace Item with ActionButton or ToggleButton.
+        let childNode = t.cloneNode(child.node);
+        childNode.openingElement.name = t.jsxIdentifier(localChildName);
+        if (childNode.closingElement) {
+          childNode.closingElement.name = t.jsxIdentifier(localChildName);
+        }
+
+        // If there is no key prop and we are using dynamic collections, add a default computed from item.key ?? item.id.
+        let key = childNode.openingElement.attributes.find(attr => t.isJSXAttribute(attr) && attr.name.name === 'key') as t.JSXAttribute | undefined;
+        if (!key && itemArg) {
+          let id = t.jsxExpressionContainer(
+            t.logicalExpression(
+              '??',
+              t.memberExpression(itemArg, t.identifier('key')),
+              t.memberExpression(itemArg, t.identifier('id'))
+            )
+          );
+
+          key = t.jsxAttribute(
+            t.jsxIdentifier('key'),
+            id
+          );
+
+          childNode.openingElement.attributes.push(key);
+        }
+
+        // If this is a ToggleButtonGroup, add an id prop in addition to key when needed.
+        if (key && newComponentName === 'ToggleButtonGroup') {
+          // If we are in an array.map we need both key and id. Otherwise, we only need id.
+          if (itemArg) {
+            childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('id'), key.value));
+          } else {
+            key.name.name = 'id';
+          }
+        }
+
+        let keyValue: t.Expression | undefined = undefined;
+        if (key && t.isJSXExpressionContainer(key.value) && t.isExpression(key.value.expression)) {
+          keyValue = key.value.expression;
+        } else if (key && t.isStringLiteral(key.value)) {
+          keyValue = key.value;
+        }
+
+        // Add an onPress to each item that calls the previous onAction, passing in the key.
+        if (onAction && t.isJSXExpressionContainer(onAction.node.value) && t.isExpression(onAction.node.value.expression)) {
+          childNode.openingElement.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('onPress'),
+              t.jsxExpressionContainer(
+                keyValue 
+                  ? t.arrowFunctionExpression([], t.callExpression(onAction.node.value.expression, [keyValue]))
+                  : onAction.node.value.expression
+              )
+            )
+          );
+        }
+
+        // Add an isDisabled prop to each item, testing whether it is in disabledKeys.
+        if (disabledKeys && keyValue) {
+          childNode.openingElement.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier('isDisabled'),
+              t.jsxExpressionContainer(
+                t.callExpression(
+                  t.memberExpression(
+                    disabledKeys,
+                    t.identifier('has')
+                  ),
+                  [keyValue]
+                )
+              )
+            )
+          );
+        }
+
+        child.replaceWith(childNode);
+      }
+    }
+  });
+
+  onAction?.remove();
+
+  path.node.openingElement.name = t.jsxIdentifier(localName);
+  if (path.node.closingElement) {
+    path.node.closingElement.name = t.jsxIdentifier(localName);
+  }
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionMenu/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionMenu/transform.ts
new file mode 100644
index 00000000000..aab0489787c
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ActionMenu/transform.ts
@@ -0,0 +1,16 @@
+import {commentOutProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ActionMenu:
+ * - Comment out closeOnSelect (it has not been implemented yet).
+ * - Comment out trigger (it has not been implemented yet).
+ */
+export default function transformActionMenu(path: NodePath<t.JSXElement>) {
+  // Comment out closeOnSelect
+  commentOutProp(path, {propName: 'closeOnSelect'});
+
+  // Comment out trigger
+  commentOutProp(path, {propName: 'trigger'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Avatar/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Avatar/transform.ts
new file mode 100644
index 00000000000..4b4041517ae
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Avatar/transform.ts
@@ -0,0 +1,49 @@
+import {commentOutProp} from '../../shared/transforms';
+import {getName} from '../../shared/utils';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+function updateAvatarSize(
+  path: NodePath<t.JSXElement>
+) {
+  if (
+    t.isJSXElement(path.node) &&
+    t.isJSXIdentifier(path.node.openingElement.name) &&
+    getName(path, path.node.openingElement.name) === 'Avatar'
+  ) {
+    let sizeAttrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'size') as NodePath<t.JSXAttribute>;
+    if (sizeAttrPath) {
+      let value = sizeAttrPath.node.value;
+      if (value?.type === 'StringLiteral') {
+        const avatarDimensions = {
+          'avatar-size-50': 16,
+          'avatar-size-75': 18,
+          'avatar-size-100': 20,
+          'avatar-size-200': 22,
+          'avatar-size-300': 26,
+          'avatar-size-400': 28,
+          'avatar-size-500': 32,
+          'avatar-size-600': 36,
+          'avatar-size-700': 40
+        };
+        let val = avatarDimensions[value.value as keyof typeof avatarDimensions];
+        if (val != null) {
+          sizeAttrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(val));
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Transforms Avatar:
+ * - Comment out isDisabled (it has not been implemented yet).
+ * - Update size to be a pixel value if it currently matches 'avatar-size-*'.
+ */
+export default function transformAvatar(path: NodePath<t.JSXElement>) {
+  // Comment out isDisabled
+  commentOutProp(path, {propName: 'isDisabled'});
+
+  // Update size to be a pixel value if it currently matches 'avatar-size-*'
+  updateAvatarSize(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Badge/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Badge/transform.ts
new file mode 100644
index 00000000000..604c857ac78
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Badge/transform.ts
@@ -0,0 +1,17 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updatePropNameAndValue} from '../../shared/transforms';
+
+/**
+ * Transforms Badge:
+ * - Change variant="info" to variant="informative".
+ */
+export default function transformBadge(path: NodePath<t.JSXElement>) {
+  // Change variant="info" to variant="informative"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'info',
+    newPropName: 'variant',
+    newPropValue: 'informative'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Breadcrumbs/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Breadcrumbs/transform.ts
new file mode 100644
index 00000000000..1766a2e093b
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Breadcrumbs/transform.ts
@@ -0,0 +1,34 @@
+import {
+  addCommentToElement,
+  commentOutProp,
+  removeProp
+} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Breadcrumbs:
+ * - Comment out showRoot (it has not been implemented yet).
+ * - Comment out isMultiline (it has not been implemented yet).
+ * - Comment out autoFocusCurrent (it has not been implemented yet).
+ * - Remove size="S" (Small is no longer a supported size in Spectrum 2).
+ * - Add comment to wrap in nav element if needed.
+ */
+export default function transformBreadcrumbs(path: NodePath<t.JSXElement>) {
+  // Comment out showRoot
+  commentOutProp(path, {propName: 'showRoot'});
+
+  // Comment out isMultiline
+  commentOutProp(path, {propName: 'isMultiline'});
+
+  // Comment out autoFocusCurrent
+  commentOutProp(path, {propName: 'autoFocusCurrent'});
+
+  // Remove size="S"
+  removeProp(path, {propName: 'size', propValue: 'S'});
+
+  // Add comment to wrap in nav element if needed
+  addCommentToElement(path, {
+    comment: 'S2 Breadcrumbs no longer includes a nav element by default. You can wrap the Breadcrumbs component in a nav element if needed.'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Button/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Button/transform.ts
new file mode 100644
index 00000000000..2b7aea5409f
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Button/transform.ts
@@ -0,0 +1,61 @@
+import {
+  commentOutProp,
+  removeProp,
+  updateComponentIfPropPresent,
+  updatePropName,
+  updatePropNameAndValue,
+  updatePropValueAndAddNewPropName
+} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Button:
+ * - Change variant="cta" to variant="accent"
+ * - Change variant="overBackground" to variant="primary" staticColor="white"
+ * - Change style to fillStyle
+ * - Comment out isPending (it has not been implemented yet)
+ * - Remove isQuiet (it is no longer supported in Spectrum 2)
+ * - If href is present, the Button should be converted to a LinkButton
+ * - Remove elementType (it is no longer supported in Spectrum 2).
+ */
+export default function transformButton(path: NodePath<t.JSXElement>) {
+  // Change variant="cta" to variant="accent"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'cta',
+    newPropName: 'variant',
+    newPropValue: 'accent'
+  });
+
+  // Change variant="overBackground" to variant="primary" staticColor="white"
+  updatePropValueAndAddNewPropName(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'overBackground',
+    newPropName: 'variant',
+    newPropValue: 'primary',
+    additionalPropName: 'staticColor',
+    additionalPropValue: 'white'
+  });
+
+  // Change style to fillStyle
+  updatePropName(path, {
+    oldPropName: 'style',
+    newPropName: 'fillStyle'
+  });
+
+  // Comment out isPending
+  commentOutProp(path, {propName: 'isPending'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // If href is present, the Button should be converted to a LinkButton
+  updateComponentIfPropPresent(path, {
+    propName: 'href',
+    newComponentName: 'LinkButton'
+  });
+
+  // Remove elementType
+  removeProp(path, {propName: 'elementType'});
+}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/CheckboxGroup/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/CheckboxGroup/transform.ts
new file mode 100644
index 00000000000..8e660423b90
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/CheckboxGroup/transform.ts
@@ -0,0 +1,12 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms CheckboxGroup:
+ * - Remove showErrorIcon (it has been removed due to accessibility issues).
+ */
+export default function transformCheckboxGroup(path: NodePath<t.JSXElement>) {
+  // Remove showErrorIcon
+  removeProp(path, {propName: 'showErrorIcon'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
new file mode 100644
index 00000000000..716f3e47625
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorField/transform.ts
@@ -0,0 +1,29 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ColorField:
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove placeholder (it has been removed due to accessibility issues).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformColorField(path: NodePath<t.JSXElement>) {
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Remove placeholder
+  removeProp(path, {propName: 'placeholder'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorSlider/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorSlider/transform.ts
new file mode 100644
index 00000000000..04de2a6a01a
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ColorSlider/transform.ts
@@ -0,0 +1,12 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ColorSlider:
+ * - Remove showValueLabel (it has been removed due to accessibility issues).
+ */
+export default function transformColorSlider(path: NodePath<t.JSXElement>) {
+  // Remove showValueLabel
+  removeProp(path, {propName: 'showValueLabel'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Column/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Column/transform.ts
new file mode 100644
index 00000000000..c9a3d987dd2
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Column/transform.ts
@@ -0,0 +1,12 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updateKeyToId} from '../../shared/transforms';
+
+/**
+ * Transforms Column:
+ * - Update key to id.
+ */
+export default function transformColumn(path: NodePath<t.JSXElement>) {
+  // Update key to id
+  updateKeyToId(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
new file mode 100644
index 00000000000..7dcdaa3e228
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ComboBox/transform.ts
@@ -0,0 +1,46 @@
+import {
+  commentOutProp,
+  convertDimensionValueToPx,
+  removeProp,
+  updatePropNameAndValue
+} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ComboBox:
+ * - Change menuWidth value from a DimensionValue to a pixel value.
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Comment out loadingState (it has not been implemented yet).
+ * - Remove placeholder (it is no longer supported in Spectrum 2).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ * - Comment out onLoadMore (it has not been implemented yet).
+ */
+export default function transformComboBox(path: NodePath<t.JSXElement>) {
+  // Change menuWidth value from a DimensionValue to a pixel value
+  convertDimensionValueToPx(path, {propName: 'menuWidth'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Comment out loadingState
+  commentOutProp(path, {propName: 'loadingState'});
+
+  // Remove placeholder
+  removeProp(path, {propName: 'placeholder'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+
+  // Comment out onLoadMore
+  commentOutProp(path, {propName: 'onLoadMore'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ContextualHelp/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ContextualHelp/transform.ts
new file mode 100644
index 00000000000..a7f4bcb2081
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ContextualHelp/transform.ts
@@ -0,0 +1,16 @@
+import {commentOutProp, updatePlacementToSingleValue} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ContextualHelp:
+ * - Comment out variant="info" (informative variant is the only one supported).
+ * - Update placement prop to have only one value (e.g., "bottom left" becomes "bottom").
+ */
+export default function transformContextualHelp(path: NodePath<t.JSXElement>) {
+  // Comment out variant="info"
+  commentOutProp(path, {propName: 'variant', propValue: 'info'});
+
+  // Update placement prop to have only one value
+  updatePlacementToSingleValue(path, {propToUpdateName: 'placement'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogContainer/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogContainer/transform.ts
new file mode 100644
index 00000000000..de58d3ae0f9
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogContainer/transform.ts
@@ -0,0 +1,17 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updateDialogChild} from '../DialogTrigger/transform';
+import {updatePropName} from '../../shared/transforms';
+
+/**
+ * Transforms DialogContainer:
+ * - Remove type (dependent on the dialog level child used, e.g., Dialog, FullscreenDialog, Popover).
+ * - Move isDismissable (as isDismissible) to the dialog level component.
+ * - Move isKeyboardDismissDisabled to the dialog level component.
+ */
+export default function transformDialogContainer(path: NodePath<t.JSXElement>) {
+  // Move isDismissable (as isDismissible) to the dialog level component
+  updatePropName(path, {oldPropName: 'isDismissable', newPropName: 'isDismissible'});
+
+  updateDialogChild(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogTrigger/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogTrigger/transform.ts
new file mode 100644
index 00000000000..217c0ec0c5b
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/DialogTrigger/transform.ts
@@ -0,0 +1,95 @@
+import {addComponentImport, getName} from '../../shared/utils';
+import {
+  commentOutProp,
+  moveRenderPropsToChild,
+  removeProp,
+  updatePropName
+} from '../../shared/transforms';
+import {getComponents} from '../../../getComponents';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+let availableComponents = getComponents();
+
+/**
+ * Updates DialogTrigger and DialogContainer to the new API.
+ *
+ * Example:
+ * - When `type="popover"`, replaces Dialog with `<Popover>`.
+ * - When `type="fullscreen"`, replaces Dialog with `<FullscreenDialog>`.
+ * - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog variant="fullscreenTakeover">`.
+ */
+export function updateDialogChild(
+  path: NodePath<t.JSXElement>
+) {
+  let typePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'type') as NodePath<t.JSXAttribute> | undefined;
+  let type = typePath?.node.value?.type === 'StringLiteral' ? typePath.node.value?.value : 'modal';
+  let newComponentName = 'Dialog';
+  let props: t.JSXAttribute[] = [];
+  if (type === 'popover') {
+    newComponentName = 'Popover';
+  } else if (type === 'fullscreen' || type === 'fullscreenTakeover') {
+    newComponentName = 'FullscreenDialog';
+    if (type === 'fullscreenTakeover') {
+      props.push(t.jsxAttribute(t.jsxIdentifier('variant'), t.stringLiteral(type)));
+    }
+  }
+
+  for (let prop of ['isDismissible', 'mobileType', 'hideArrow', 'placement', 'shouldFlip', 'isKeyboardDismissDisabled', 'containerPadding', 'offset', 'crossOffset']) {
+    let attr = path.get('openingElement').get('attributes').find(attr => attr.isJSXAttribute() && attr.node.name.name === prop) as NodePath<t.JSXAttribute> | undefined;
+    if (attr) {
+      props.push(attr.node);
+      attr.remove();
+    }
+  }
+
+  typePath?.remove();
+
+  let localName = newComponentName;
+  if (newComponentName !== 'Dialog' && availableComponents.has(newComponentName)) {
+    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+    localName = addComponentImport(program, newComponentName);
+  }
+
+  path.traverse({
+    JSXElement(dialog) {
+      if (!t.isJSXIdentifier(dialog.node.openingElement.name) || getName(dialog, dialog.node.openingElement.name) !== 'Dialog') {
+        return;
+      }
+
+      dialog.node.openingElement.name = t.jsxIdentifier(localName);
+      if (dialog.node.closingElement) {
+        dialog.node.closingElement.name = t.jsxIdentifier(localName);
+      }
+
+      dialog.node.openingElement.attributes.push(...props);
+    }
+  });
+}
+
+/**
+ * Transforms DialogTrigger:
+ * - Comment out type="tray" (it has not been implemented yet).
+ * - Comment out mobileType (it has not been implemented yet).
+ * - Remove targetRef (it is no longer supported).
+ * - Move render props to the child component (updated API).
+ */
+export default function transformDialogTrigger(path: NodePath<t.JSXElement>) {
+  // Comment out type="tray"
+  commentOutProp(path, {propName: 'type', propValue: 'tray'});
+
+  // Comment out mobileType
+  commentOutProp(path, {propName: 'mobileType'});
+
+  // Remove targetRef
+  removeProp(path, {propName: 'targetRef'});
+
+  // Move render props to the child component
+  moveRenderPropsToChild(path, {newChildComponentName: 'Dialog'});
+
+  // Update isDismissable to isDismissible
+  updatePropName(path, {oldPropName: 'isDismissable', newPropName: 'isDismissible'});
+
+  // Update DialogTrigger to the new API
+  updateDialogChild(path);
+}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Divider/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Divider/transform.ts
new file mode 100644
index 00000000000..62af597fad3
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Divider/transform.ts
@@ -0,0 +1,12 @@
+import {NodePath} from '@babel/traverse';
+import {removeComponentIfWithinParent} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Divider:
+ * - Remove Divider component if within a Dialog (Updated design for Dialog in Spectrum 2).
+ */
+export default function transformDivider(path: NodePath<t.JSXElement>) {
+  // Remove Divider component if within a Dialog
+  removeComponentIfWithinParent(path, {parentComponentName: 'Dialog'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Form/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Form/transform.ts
new file mode 100644
index 00000000000..7b45947aaa8
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Form/transform.ts
@@ -0,0 +1,24 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Form:
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove isReadOnly (it is no longer supported in Spectrum 2).
+ * - Remove validationState (it is no longer supported in Spectrum 2).
+ * - Remove validationBehavior (it is no longer supported in Spectrum 2).
+ */
+export default function transformForm(path: NodePath<t.JSXElement>) {
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Remove isReadOnly
+  removeProp(path, {propName: 'isReadOnly'});
+
+  // Remove validationState
+  removeProp(path, {propName: 'validationState'});
+
+  // Remove validationBehavior
+  removeProp(path, {propName: 'validationBehavior'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/InlineAlert/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/InlineAlert/transform.ts
new file mode 100644
index 00000000000..797a63379c2
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/InlineAlert/transform.ts
@@ -0,0 +1,17 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updatePropNameAndValue} from '../../shared/transforms';
+
+/**
+ * Transforms InlineAlert:
+ * - Change variant="info" to variant="informative".
+ */
+export default function transformInlineAlert(path: NodePath<t.JSXElement>) {
+  // Change variant="info" to variant="informative"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'info',
+    newPropName: 'variant',
+    newPropValue: 'informative'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
new file mode 100644
index 00000000000..52a91535563
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Item/transform.ts
@@ -0,0 +1,26 @@
+import {commentIfParentCollectionNotDetected, updateComponentWithinCollection} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Item:
+ * - If within Menu: Update Item to be a MenuItem.
+ * - If within ActionMenu: Update Item to be a MenuItem.
+ * - If within TagGroup: Update Item to be a Tag.
+ * - If within Breadcrumbs: Update Item to be a Breadcrumb.
+ * - If within Picker: Update Item to be a PickerItem.
+ * - If within ComboBox: Update Item to be a ComboBoxItem.
+ * - Update key to id (and keep key if rendered inside array.map).
+ */
+export default function transformItem(path: NodePath<t.JSXElement>) {
+  // Update Items based on parent collection component
+  updateComponentWithinCollection(path, {parentComponentName: 'Menu', newComponentName: 'MenuItem'});
+  updateComponentWithinCollection(path, {parentComponentName: 'ActionMenu', newComponentName: 'MenuItem'});
+  updateComponentWithinCollection(path, {parentComponentName: 'TagGroup', newComponentName: 'Tag'});
+  updateComponentWithinCollection(path, {parentComponentName: 'Breadcrumbs', newComponentName: 'Breadcrumb'});
+  updateComponentWithinCollection(path, {parentComponentName: 'Picker', newComponentName: 'PickerItem'});
+  updateComponentWithinCollection(path, {parentComponentName: 'ComboBox', newComponentName: 'ComboBoxItem'});
+
+  // Comment if parent collection not detected
+  commentIfParentCollectionNotDetected(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Link/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Link/transform.ts
new file mode 100644
index 00000000000..8912afb005b
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Link/transform.ts
@@ -0,0 +1,49 @@
+import {addComment} from '../../shared/utils';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updatePropNameAndValue} from '../../shared/transforms';
+
+/**
+ * If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
+ */
+function updateLegacyLink(
+  path: NodePath<t.JSXElement>
+) {
+  let missingOuterHref = t.isJSXElement(path.node) && !path.node.openingElement.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === 'href');
+  if (missingOuterHref) {
+    let innerLink = path.node.children.find((child) => t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name));
+    if (innerLink && t.isJSXElement(innerLink)) {
+      let innerAttributes = innerLink.openingElement.attributes;
+      let outerAttributes = path.node.openingElement.attributes;
+      innerAttributes.forEach((attr) => {
+        outerAttributes.push(attr);
+      });
+
+      if (
+        t.isJSXIdentifier(innerLink.openingElement.name) &&
+        innerLink.openingElement.name.name !== 'a'
+      ) {
+        addComment(path.node, ' TODO(S2-upgrade): You may have been using a custom link component here. You\'ll need to update this manually.');
+      }
+      path.node.children = innerLink.children;
+    }
+  }
+}
+
+/**
+ * Transforms Link:
+ * - Change variant="overBackground" to staticColor="white".
+ * - If <a> was used inside Link (legacy API), remove the <a> and apply props directly to Link.
+ */
+export default function transformLink(path: NodePath<t.JSXElement>) {
+  // Change variant="overBackground" to staticColor="white"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'overBackground',
+    newPropName: 'staticColor',
+    newPropValue: 'white'
+  });
+
+  // Update legacy Link
+  updateLegacyLink(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/NumberField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/NumberField/transform.ts
new file mode 100644
index 00000000000..36dcab89a0b
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/NumberField/transform.ts
@@ -0,0 +1,25 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms NumberField:
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformNumberField(path: NodePath<t.JSXElement>) {
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Picker/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Picker/transform.ts
new file mode 100644
index 00000000000..0705f4f5011
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Picker/transform.ts
@@ -0,0 +1,42 @@
+import {
+  commentOutProp,
+  convertDimensionValueToPx,
+  removeProp,
+  updatePropNameAndValue
+} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Picker:
+ * - Change menuWidth value from a DimensionValue to a pixel value.
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ * - Comment out isLoading (it has not been implemented yet).
+ * - Comment out onLoadMore (it has not been implemented yet).
+ */
+export default function transformPicker(path: NodePath<t.JSXElement>) {
+  // Change menuWidth value from a DimensionValue to a pixel value
+  convertDimensionValueToPx(path, {propName: 'menuWidth'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+
+  // Comment out isLoading
+  commentOutProp(path, {propName: 'isLoading'});
+
+  // Comment out onLoadMore
+  commentOutProp(path, {propName: 'onLoadMore'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressBar/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressBar/transform.ts
new file mode 100644
index 00000000000..f9f6b1313c5
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressBar/transform.ts
@@ -0,0 +1,25 @@
+import {commentOutProp, removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms ProgressBar:
+ * - Change variant="overBackground" to staticColor="white".
+ * - Comment out labelPosition (it has not been implemented yet).
+ * - Comment out showValueLabel (it has not been implemented yet).
+ */
+export default function transformProgressBar(path: NodePath<t.JSXElement>) {
+  // Change variant="overBackground" to staticColor="white"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'overBackground',
+    newPropName: 'staticColor',
+    newPropValue: 'white'
+  });
+
+  // Comment out labelPosition
+  commentOutProp(path, {propName: 'labelPosition'});
+
+  // Comment out showValueLabel
+  removeProp(path, {propName: 'showValueLabel'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressCircle/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressCircle/transform.ts
new file mode 100644
index 00000000000..a0099b22b5a
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/ProgressCircle/transform.ts
@@ -0,0 +1,17 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updatePropNameAndValue} from '../../shared/transforms';
+
+/**
+ * Transforms ProgressCircle:
+ * - Change variant="overBackground" to staticColor="white".
+ */
+export default function transformProgressCircle(path: NodePath<t.JSXElement>) {
+  // Change variant="overBackground" to staticColor="white"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'overBackground',
+    newPropName: 'staticColor',
+    newPropValue: 'white'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RadioGroup/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RadioGroup/transform.ts
new file mode 100644
index 00000000000..0fedb73054c
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RadioGroup/transform.ts
@@ -0,0 +1,25 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms RadioGroup:
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ * - Remove showErrorIcon (it has been removed due to accessibility issues).
+ */
+export default function transformRadioGroup(path: NodePath<t.JSXElement>) {
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+
+  // Remove showErrorIcon
+  removeProp(path, {propName: 'showErrorIcon'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RangeSlider/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RangeSlider/transform.ts
new file mode 100644
index 00000000000..f5214765878
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/RangeSlider/transform.ts
@@ -0,0 +1,20 @@
+import {commentOutProp, removeProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms RangeSlider:
+ * - Remove showValueLabel (it has been removed due to accessibility issues).
+ * - Comment out getValueLabel (it has not been implemented yet).
+ * - Comment out orientation (it has not been implemented yet).
+ */
+export default function transformRangeSlider(path: NodePath<t.JSXElement>) {
+  // Remove showValueLabel
+  removeProp(path, {propName: 'showValueLabel'});
+
+  // Comment out getValueLabel
+  commentOutProp(path, {propName: 'getValueLabel'});
+
+  // Comment out orientation
+  commentOutProp(path, {propName: 'orientation'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Row/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Row/transform.ts
new file mode 100644
index 00000000000..0626424121e
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Row/transform.ts
@@ -0,0 +1,107 @@
+import {getName} from '../../shared/utils';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updateKeyToId} from '../../shared/transforms';
+
+/**
+ * Updates the function signature of the Row component.
+ */
+function updateRowFunctionArg(
+  path: NodePath<t.JSXElement>
+) {
+  // Find the export function passed as a child
+  let functionChild = path.get('children').find(childPath => 
+    childPath.isJSXExpressionContainer() && 
+    childPath.get('expression').isArrowFunctionExpression()
+  );
+
+  let tablePath = path.findParent((p) =>
+    t.isJSXElement(p.node) &&
+    t.isJSXIdentifier(p.node.openingElement.name) &&
+    getName(path, p.node.openingElement.name) === 'TableView'
+  );
+
+  let tableHeaderPath = tablePath?.get('children').find((child) =>
+    t.isJSXElement(child.node) &&
+    t.isJSXIdentifier(child.node.openingElement.name) &&
+    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
+  ) as NodePath<t.JSXElement> | undefined;
+
+  function findColumnKeyProp(path: NodePath<t.JSXElement>) {
+    let columnKeyProp = 'id';
+    path.traverse({
+      JSXElement(columnPath) {
+        if (
+          t.isArrowFunctionExpression(columnPath.parentPath.node) &&
+          t.isJSXElement(columnPath.node) &&
+          t.isJSXIdentifier(columnPath.node.openingElement.name) &&
+          getName(columnPath as NodePath<t.JSXElement>, columnPath.node.openingElement.name) === 'Column'
+        ) {
+          let openingElement = columnPath.get('openingElement');
+          let keyPropPath = openingElement.get('attributes').find(attr => 
+            t.isJSXAttribute(attr.node) && 
+            (attr.node.name.name === 'key' || attr.node.name.name === 'id')
+          );
+          keyPropPath?.traverse({
+            Identifier(innerPath) {
+              if (
+                innerPath.node.name === 'column' &&
+                innerPath.parentPath.node.type === 'MemberExpression' &&
+                t.isIdentifier(innerPath.parentPath.node.property)
+              ) {
+                columnKeyProp = innerPath.parentPath.node.property.name;
+              }
+            }
+          });
+        }
+      }
+    });
+    return columnKeyProp || 'id';
+  }
+
+  let columnKey = findColumnKeyProp(tableHeaderPath as NodePath<t.JSXElement>);
+
+  if (functionChild && functionChild.isJSXExpressionContainer()) {
+    let arrowFuncPath = functionChild.get('expression');
+    if (arrowFuncPath.isArrowFunctionExpression()) {
+      let params = arrowFuncPath.node.params;
+      if (params.length === 1 && t.isIdentifier(params[0])) {
+        let paramName = params[0].name;
+
+        // Rename parameter to 'column'
+        params[0].name = 'column';
+
+        // Replace references to the old parameter name inside the export function body
+        arrowFuncPath.get('body').traverse({
+          Identifier(innerPath) {
+            if (
+              innerPath.node.name === paramName &&
+              // Ensure we're not replacing the parameter declaration
+              innerPath.node !== params[0]
+            ) {
+              // Replace with column key
+              innerPath.replaceWith(
+                t.memberExpression(
+                  t.identifier('column'),
+                  t.identifier(columnKey ?? 'id')
+                )
+              );
+            }
+          }
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Transforms Row:
+ * - Update key to id.
+ * - Update function signature.
+ */
+export default function transformRow(path: NodePath<t.JSXElement>) {
+  // Update key to id
+  updateKeyToId(path);
+
+  updateRowFunctionArg(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
new file mode 100644
index 00000000000..8dc81df674f
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/SearchField/transform.ts
@@ -0,0 +1,33 @@
+import {commentOutProp, removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms SearchField:
+ * - Remove placeholder (it has been removed due to accessibility issues).
+ * - Comment out icon (it has not been implemented yet).
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformSearchField(path: NodePath<t.JSXElement>) {
+  // Remove placeholder
+  removeProp(path, {propName: 'placeholder'});
+
+  // Comment out icon
+  commentOutProp(path, {propName: 'icon'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Section/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Section/transform.ts
new file mode 100644
index 00000000000..84b0695bce2
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Section/transform.ts
@@ -0,0 +1,39 @@
+import {commentIfParentCollectionNotDetected, movePropToNewChildComponentName, updateComponentWithinCollection} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Section:
+ * - If within Menu: Update Section to be a MenuSection.
+ * - If within Picker: Update Section to be a PickerSection.
+ * - If within ComboBox: Update Section to be a ComboBoxSection.
+ */
+export default function transformSection(path: NodePath<t.JSXElement>) {
+  // Update Sections based on parent collection component
+  updateComponentWithinCollection(path, {parentComponentName: 'Menu', newComponentName: 'MenuSection'});
+  updateComponentWithinCollection(path, {parentComponentName: 'Picker', newComponentName: 'PickerSection'});
+  updateComponentWithinCollection(path, {parentComponentName: 'ComboBox', newComponentName: 'ComboBoxSection'});
+
+  // Move title prop to Header component
+  movePropToNewChildComponentName(path, {
+    parentComponentName: 'Menu',
+    childComponentName: 'MenuSection',
+    propName: 'title',
+    newChildComponentName: 'Header'
+  });
+  movePropToNewChildComponentName(path, {
+    parentComponentName: 'Picker',
+    childComponentName: 'PickerSection',
+    propName: 'title',
+    newChildComponentName: 'Header'
+  });
+  movePropToNewChildComponentName(path, {
+    parentComponentName: 'ComboBox',
+    childComponentName: 'ComboBoxSection',
+    propName: 'title',
+    newChildComponentName: 'Header'
+  });
+
+  // Comment if parent collection not detected
+  commentIfParentCollectionNotDetected(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Slider/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Slider/transform.ts
new file mode 100644
index 00000000000..3a69877db88
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Slider/transform.ts
@@ -0,0 +1,28 @@
+import {commentOutProp, removeProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Slider:
+ * - Remove isFilled (Slider is always filled in Spectrum 2).
+ * - Remove trackGradient (Not supported in S2 design).
+ * - Remove showValueLabel (it has been removed due to accessibility issues).
+ * - Comment out getValueLabel (it has not been implemented yet).
+ * - Comment out orientation (it has not been implemented yet).
+ */
+export default function transformSlider(path: NodePath<t.JSXElement>) {
+  // Remove isFilled
+  removeProp(path, {propName: 'isFilled'});
+
+  // Remove trackGradient
+  removeProp(path, {propName: 'trackGradient'});
+
+  // Remove showValueLabel
+  removeProp(path, {propName: 'showValueLabel'});
+
+  // Comment out getValueLabel
+  commentOutProp(path, {propName: 'getValueLabel'});
+
+  // Comment out orientation
+  commentOutProp(path, {propName: 'orientation'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/StatusLight/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/StatusLight/transform.ts
new file mode 100644
index 00000000000..e61ccdef010
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/StatusLight/transform.ts
@@ -0,0 +1,21 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms StatusLight:
+ * - Remove isDisabled (it is no longer supported in Spectrum 2).
+ * - Change variant="info" to variant="informative".
+ */
+export default function transformStatusLight(path: NodePath<t.JSXElement>) {
+  // Remove isDisabled
+  removeProp(path, {propName: 'isDisabled'});
+
+  // Change variant="info" to variant="informative"
+  updatePropNameAndValue(path, {
+    oldPropName: 'variant',
+    oldPropValue: 'info',
+    newPropName: 'variant',
+    newPropValue: 'informative'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TableView/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TableView/transform.ts
new file mode 100644
index 00000000000..9984fea9fab
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TableView/transform.ts
@@ -0,0 +1,175 @@
+import {addComment, getName} from '../../shared/utils';
+import {commentOutProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Copies the columns prop from the TableHeader to the Row component.
+ */
+function addColumnsPropToRow(
+  path: NodePath<t.JSXElement>
+) {
+  const tableHeaderPath = path.get('children').find((child) =>
+      t.isJSXElement(child.node) &&
+      t.isJSXIdentifier(child.node.openingElement.name) &&
+      getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
+    ) as NodePath<t.JSXElement> | undefined;
+
+  if (!tableHeaderPath) {
+    addComment(path.node, ' TODO(S2-upgrade): Could not find TableHeader within Table to retrieve columns prop.');
+    return;
+  }
+
+  const columnsProp = tableHeaderPath
+    .get('openingElement')
+    .get('attributes')
+    .find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'columns') as NodePath<t.JSXAttribute> | undefined;
+
+  if (columnsProp) {
+    path.traverse({
+      JSXElement(innerPath) {
+        if (
+          t.isJSXElement(innerPath.node) &&
+          t.isJSXIdentifier(innerPath.node.openingElement.name) &&
+          getName(innerPath as NodePath<t.JSXElement>, innerPath.node.openingElement.name) === 'Row'
+        ) {
+          let rowPath = innerPath as NodePath<t.JSXElement>;
+          rowPath.node.openingElement.attributes.push(columnsProp.node);
+
+          // If Row doesn't contain id prop, leave a comment for the user to check manually
+          let idProp = rowPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'id');
+          if (!idProp) {
+            addComment(rowPath.node, ' TODO(S2-upgrade): If the items do not have id properties, you\'ll need to add an id prop to the Row.');
+          }
+        }
+      }
+    });
+  }
+}
+
+function commentIfNestedColumns(
+  path: NodePath<t.JSXElement>
+) {
+  const headerPath = path.get('children').find((child) =>
+    t.isJSXElement(child.node) &&
+    t.isJSXIdentifier(child.node.openingElement.name) &&
+    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
+  ) as NodePath<t.JSXElement> | undefined;
+  const columns = headerPath?.get('children') || [];
+
+  let hasNestedColumns = false;
+
+  columns.forEach(column => {
+    let columnChildren = column.get('children');
+    if (
+        columnChildren.find(child => 
+          t.isJSXElement(child.node) &&
+          t.isJSXIdentifier(child.node.openingElement.name) &&
+          getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
+      )   
+    ) {
+      hasNestedColumns = true;
+    }
+  });
+
+  if (hasNestedColumns) {
+    addComment(path.node, ' TODO(S2-upgrade): Nested Column components are not supported yet.');
+  }
+}
+
+/**
+ * Adds isRowHeader to the first Column in a table if there isn't already a row header.
+ * @param path 
+ */
+function addRowHeader(
+  path: NodePath<t.JSXElement>
+) {
+  let tableHeaderPath = path.get('children').find((child) =>
+    t.isJSXElement(child.node) &&
+    t.isJSXIdentifier(child.node.openingElement.name) &&
+    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
+  ) as NodePath<t.JSXElement> | undefined;
+
+
+  // Check if isRowHeader is already set on a Column
+  let hasRowHeader = false;
+  tableHeaderPath?.get('children').forEach((child) => {
+    if (
+      t.isJSXElement(child.node) &&
+      t.isJSXIdentifier(child.node.openingElement.name) &&
+      getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
+    ) {
+      let isRowHeaderProp = (child.get('openingElement') as NodePath).get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'isRowHeader') as NodePath<t.JSXAttribute> | undefined;
+      if (isRowHeaderProp) {
+        hasRowHeader = true;
+      }
+    }
+  });
+
+  // If there isn't already a row header, add one to the first Column if possible
+  if (!hasRowHeader) {
+    tableHeaderPath?.get('children').forEach((child) => {
+      // Add to first Column if static
+      if (
+        !hasRowHeader &&
+        t.isJSXElement(child.node) &&
+        t.isJSXIdentifier(child.node.openingElement.name) &&
+        getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
+      ) {
+        child.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('isRowHeader'), t.jsxExpressionContainer(t.booleanLiteral(true))));
+        hasRowHeader = true;
+      }
+
+      // If render function is used, leave a comment to update manually
+      if (
+        t.isJSXExpressionContainer(child.node) &&
+        t.isArrowFunctionExpression(child.node.expression)
+      ) {
+        addComment(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
+      }
+
+      // If array.map is used, leave a comment to update manually
+      if (
+        t.isJSXExpressionContainer(child.node) &&
+        t.isCallExpression(child.node.expression) &&
+        t.isMemberExpression(child.node.expression.callee) &&
+        t.isIdentifier(child.node.expression.callee.property) &&
+        child.node.expression.callee.property.name === 'map'
+      ) {
+        addComment(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
+      }
+    });
+  }
+}
+
+/**
+ * Transforms TableView:
+ * - For Column and Row: Update key to be id (and keep key if rendered inside array.map).
+ * - For dynamic tables, pass a columns prop into Row.
+ * - For Row: Update dynamic render function to pass in column instead of columnKey.
+ * - Comment out UNSTABLE_allowsExpandableRows (it has not been implemented yet).
+ * - Comment out UNSTABLE_onExpandedChange (it has not been implemented yet).
+ * - Comment out UNSTABLE_expandedKeys (it has not been implemented yet).
+ * - Comment out UNSTABLE_defaultExpandedKeys (it has not been implemented yet).
+ */
+export default function transformTable(path: NodePath<t.JSXElement>) {
+  // Add columns prop to Row for dynamic tables
+  addColumnsPropToRow(path);
+
+  // Comment out nested columns
+  commentIfNestedColumns(path);
+
+  // Comment out dragAndDropHooks
+  commentOutProp(path, {propName: 'dragAndDropHooks'});
+
+  // Comment out selectionStyle="highlight"
+  commentOutProp(path, {propName: 'selectionStyle'});
+
+  // Comment out unstable expandable rows props
+  commentOutProp(path, {propName: 'UNSTABLE_allowsExpandableRows'});
+  commentOutProp(path, {propName: 'UNSTABLE_onExpandedChange'});
+  commentOutProp(path, {propName: 'UNSTABLE_expandedKeys'});
+  commentOutProp(path, {propName: 'UNSTABLE_defaultExpandedKeys'});
+
+  addRowHeader(path);
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tabs/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tabs/transform.ts
new file mode 100644
index 00000000000..dceba75b327
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tabs/transform.ts
@@ -0,0 +1,99 @@
+import {getName, removeComponentImport} from '../../shared/utils';
+import {NodePath} from '@babel/traverse';
+import {removeProp, updateComponentWithinCollection, updateToNewComponentName} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+function transformTabList(tabListPath: NodePath<t.JSXElement>): t.JSXElement {
+  tabListPath.get('children').forEach(itemPath => {
+    if (
+      t.isJSXElement(itemPath.node) &&
+      t.isJSXIdentifier(itemPath.node.openingElement.name) &&
+      getName(itemPath as NodePath<t.JSXElement>, itemPath.node.openingElement.name) === 'Item'
+    ) {
+      updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponentName: 'TabList', newComponentName: 'Tab'});
+    }
+  });
+  return tabListPath.node;
+}
+
+function transformTabPanels(tabPanelsPath: NodePath<t.JSXElement>, itemsProp: t.JSXAttribute | null): t.JSXElement[] {
+  // Dynamic case
+  let dynamicRender = tabPanelsPath.get('children').find(path => t.isJSXExpressionContainer(path.node));
+  if (dynamicRender) {
+    updateToNewComponentName(tabPanelsPath, {newComponentName: 'Collection'});
+    let itemPath = (dynamicRender.get('expression') as NodePath).get('body');
+    updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponentName: 'Collection', newComponentName: 'TabPanel'});
+    if (itemsProp) {
+      tabPanelsPath.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('items'), itemsProp.value));
+    }
+    return [tabPanelsPath.node];
+  }
+
+  // Static case
+  return tabPanelsPath.get('children').map(itemPath => {
+    if (
+      t.isJSXElement(itemPath.node) &&
+      t.isJSXIdentifier(itemPath.node.openingElement.name) &&
+      getName(itemPath as NodePath<t.JSXElement>, itemPath.node.openingElement.name) === 'Item'
+    ) {
+      updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponentName: 'TabPanels', newComponentName: 'TabPanel'});
+      return itemPath.node;
+    }
+    return null;
+  }).filter(Boolean) as t.JSXElement[];
+}
+
+/**
+ * Transforms Tabs props and structure:
+ * - Inside TabList: Update Item to be Tab.
+ * - Update items on Tabs to be on TabList.
+ * - Inside TabPanels: Update Item to be a TabPanel and remove the surrounding TabPanels.
+ * - Remove isEmphasized (it is no longer supported in Spectrum 2).
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ */
+export default function transformTabs(path: NodePath<t.JSXElement>) {
+
+  let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+  removeComponentImport(program, 'TabPanels');
+  
+  let tabListNode: t.JSXElement | null = null;
+  let tabPanelsNodes: t.JSXElement[] = [];
+  let itemsProp: t.JSXAttribute | null = null;
+
+  path.node.openingElement.attributes = path.node.openingElement.attributes.filter(attr => {
+    if (t.isJSXAttribute(attr) && attr.name.name === 'items') {
+      itemsProp = attr;
+      return false;
+    }
+    return true;
+  });
+
+  path.get('children').forEach(childPath => {
+    if (t.isJSXElement(childPath.node)) {
+      if (
+        t.isJSXIdentifier(childPath.node.openingElement.name) &&
+        getName(childPath as NodePath<t.JSXElement>, childPath.node.openingElement.name) === 'TabList'
+      ) {
+        tabListNode = transformTabList(childPath as NodePath<t.JSXElement>);
+        if (itemsProp) {
+          tabListNode.openingElement.attributes.push(itemsProp);
+        }
+      } else if (
+        t.isJSXIdentifier(childPath.node.openingElement.name) &&
+        getName(childPath as NodePath<t.JSXElement>, childPath.node.openingElement.name) === 'TabPanels'
+      ) {
+        tabPanelsNodes = transformTabPanels(childPath as NodePath<t.JSXElement>, itemsProp);
+      }
+    }
+  });
+
+  if (tabListNode) {
+    path.node.children = [tabListNode, ...tabPanelsNodes];
+  }
+  
+  // Remove isEmphasized
+  removeProp(path, {propName: 'isEmphasized'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TagGroup/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TagGroup/transform.ts
new file mode 100644
index 00000000000..1bbe3c13119
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TagGroup/transform.ts
@@ -0,0 +1,30 @@
+import {NodePath} from '@babel/traverse';
+import {removeProp, updatePropName, updatePropNameAndValue} from '../../shared/transforms';
+import * as t from '@babel/types';
+
+/**
+ * Transforms TagGroup:
+ * - Rename actionLabel to groupActionLabel.
+ * - Rename onAction to onGroupAction.
+ * - Change validationState="invalid" to isInvalid.
+ * - Update Item to be Tag.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformTagGroup(path: NodePath<t.JSXElement>) {
+  // Rename actionLabel to groupActionLabel
+  updatePropName(path, {oldPropName: 'actionLabel', newPropName: 'groupActionLabel'});
+
+  // Rename onAction to onGroupAction
+  updatePropName(path, {oldPropName: 'onAction', newPropName: 'onGroupAction'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
new file mode 100644
index 00000000000..585660efefa
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextArea/transform.ts
@@ -0,0 +1,33 @@
+import {commentOutProp, removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms TextArea:
+ * - Comment out icon (it has not been implemented yet).
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove placeholder (it has been removed due to accessibility issues).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformTextArea(path: NodePath<t.JSXElement>) {
+  // Comment out icon
+  commentOutProp(path, {propName: 'icon'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Remove placeholder
+  removeProp(path, {propName: 'placeholder'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
new file mode 100644
index 00000000000..1de2a30e21c
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TextField/transform.ts
@@ -0,0 +1,33 @@
+import {commentOutProp, removeProp, updatePropNameAndValue} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms TextField:
+ * - Comment out icon (it has not been implemented yet).
+ * - Remove isQuiet (it is no longer supported in Spectrum 2).
+ * - Remove placeholder (it has been removed due to accessibility issues).
+ * - Change validationState="invalid" to isInvalid.
+ * - Remove validationState="valid" (it is no longer supported in Spectrum 2).
+ */
+export default function transformTextField(path: NodePath<t.JSXElement>) {
+  // Comment out icon
+  commentOutProp(path, {propName: 'icon'});
+
+  // Remove isQuiet
+  removeProp(path, {propName: 'isQuiet'});
+
+  // Remove placeholder
+  removeProp(path, {propName: 'placeholder'});
+
+  // Change validationState="invalid" to isInvalid
+  updatePropNameAndValue(path, {
+    oldPropName: 'validationState',
+    oldPropValue: 'invalid',
+    newPropName: 'isInvalid',
+    newPropValue: true
+  });
+
+  // Remove validationState="valid"
+  removeProp(path, {propName: 'validationState', propValue: 'valid'});
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tooltip/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tooltip/transform.ts
new file mode 100644
index 00000000000..87f61303398
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/Tooltip/transform.ts
@@ -0,0 +1,32 @@
+import {movePropToParentComponent, removeProp} from '../../shared/transforms';
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+
+/**
+ * Transforms Tooltip:
+ * - Remove variant (it is no longer supported in Spectrum 2).
+ * - Move placement prop to the parent TooltipTrigger.
+ * - Remove showIcon (it is no longer supported in Spectrum 2).
+ * - Move isOpen prop to the parent TooltipTrigger.
+ */
+export default function transformTooltip(path: NodePath<t.JSXElement>) {
+  // Remove variant
+  removeProp(path, {propName: 'variant'});
+
+  // Move placement prop to the parent TooltipTrigger
+  movePropToParentComponent(path, {
+    parentComponentName: 'TooltipTrigger',
+    childComponentName: 'Tooltip',
+    propName: 'placement'
+  });
+
+  // Remove showIcon
+  removeProp(path, {propName: 'showIcon'});
+
+  // Move isOpen prop to the parent TooltipTrigger
+  movePropToParentComponent(path, {
+    parentComponentName: 'TooltipTrigger',
+    childComponentName: 'Tooltip',
+    propName: 'isOpen'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TooltipTrigger/transform.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TooltipTrigger/transform.ts
new file mode 100644
index 00000000000..fd1be7f9c9d
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/components/TooltipTrigger/transform.ts
@@ -0,0 +1,15 @@
+import {NodePath} from '@babel/traverse';
+import * as t from '@babel/types';
+import {updatePlacementToSingleValue} from '../../shared/transforms';
+
+/**
+ * Transforms TooltipTrigger:
+ * - Updates placement prop to single value.
+ */
+export default function transformTooltipTrigger(path: NodePath<t.JSXElement>) {
+  // Update placement prop to single value
+  updatePlacementToSingleValue(path, {
+    propToUpdateName: 'placement',
+    childComponentName: 'Tooltip'
+  });
+} 
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/dialog.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/dialog.ts
deleted file mode 100644
index 8b6fedb2443..00000000000
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/dialog.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {addComment} from './utils';
-import {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
-
-export function transformDialog(path: NodePath<t.JSXElement>) {
-  path.get('children').forEach(path => {
-    // S2 dialogs don't have a divider anymore.
-    if (path.isJSXElement()) {
-      let name = path.get('openingElement').get('name');
-      if (name.referencesImport('@adobe/react-spectrum', 'Divider') || name.referencesImport('@react-spectrum/divider', 'Divider')) {
-        path.remove();
-      }
-    }
-  });
-}
-
-export function transformDialogTrigger(path: NodePath<t.JSXElement>) {
-  path.get('children').forEach(path => {
-    // Move close function inside dialog.
-    // TODO: handle other types of functions too?
-    if (!path.isJSXExpressionContainer()) {
-      return;
-    }
-
-    let expression = path.get('expression');
-    if (!expression.isArrowFunctionExpression()) {
-      return;
-    }
-    
-    let body = expression.get('body');
-    if (body.isJSXElement()) {
-      let name = body.get('openingElement').get('name');
-      if ((name.referencesImport('@adobe/react-spectrum', 'Dialog') || name.referencesImport('@react-spectrum/dialog', 'Dialog'))) {
-        body.node.children = [t.jsxExpressionContainer(
-          t.arrowFunctionExpression(
-            expression.node.params,
-            t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), body.node.children)
-          )
-        )];
-        path.replaceWith(body.node);
-        return;
-      }
-    }
-
-    addComment(body.node, ' TODO(S2-upgrade): update this dialog to move the close function inside');
-  });
-}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/iconMap.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/icons/iconMap.ts
similarity index 100%
rename from packages/dev/codemods/src/s1-to-s2/src/iconMap.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/icons/iconMap.ts
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/colors.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/colors.ts
similarity index 100%
rename from packages/dev/codemods/src/s1-to-s2/src/codemods/colors.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/shared/colors.ts
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/dimensions.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/dimensions.ts
similarity index 100%
rename from packages/dev/codemods/src/s1-to-s2/src/codemods/dimensions.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/shared/dimensions.ts
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/styleProps.ts
similarity index 99%
rename from packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/shared/styleProps.ts
index 0752350b768..cbfaa937139 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/styleProps.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/styleProps.ts
@@ -3,7 +3,7 @@ import {convertColor} from './colors';
 import {convertDimension, convertGridTrack} from './dimensions';
 import {NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
-import {transformUnsafeStyle} from './unsafeStyle';
+import transformUnsafeStyle from './unsafeStyle';
 
 export const borderWidths = {
   none: 0,
@@ -591,7 +591,7 @@ function expandSpaceShorthand(
   }
 }
 
-export function transformStyleProps(path: NodePath<t.JSXElement>, element: string) {
+export default function transformStyleProps(path: NodePath<t.JSXElement>, element: string) {
   let macroValues = new Map<string, object | string | number | boolean>;
   let dynamicValues = new Map<string, t.ObjectProperty['value']>;
   let conditions = new Map<string, t.ObjectProperty['value']>;
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
new file mode 100644
index 00000000000..d9a07471eb9
--- /dev/null
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/transforms.ts
@@ -0,0 +1,794 @@
+import {addComment, addComponentImport, getName} from './utils';
+import {convertDimension} from './dimensions';
+import {getComponents} from '../../getComponents';
+import {NodePath} from '@babel/traverse';
+import type {ReactNode} from 'react';
+import * as t from '@babel/types';
+
+let availableComponents = getComponents();
+
+/**
+ * Update prop name and value to new prop name and value.
+ *
+ * Example:
+ * - Button: Change variant="cta" to variant="accent".
+ * - Link: Change `variant="overBackground"` to `staticColor="white"`.
+ */
+export function updatePropNameAndValue(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Prop name to replace. */
+    oldPropName: string,
+    /** Prop value to replace. */
+    oldPropValue: ReactNode,
+    /** Updated prop name. */
+    newPropName: string,
+    /** Updated prop value. */
+    newPropValue: ReactNode
+  }
+) {
+  const {oldPropName, oldPropValue, newPropName, newPropValue} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldPropName) {
+    if (
+      t.isStringLiteral(attrPath.node.value) &&
+      attrPath.node.value.value === oldPropValue
+    ) {
+      // Update old prop name to new prop name
+      attrPath.node.name.name = newPropName;
+
+      // If prop value is a string and matches the old value, replace it with the new value
+      if (typeof newPropValue === 'string') {
+        attrPath.node.value = t.stringLiteral(newPropValue);
+      } else if (typeof newPropValue === 'boolean') {
+        if (!newPropValue) {
+          attrPath.node.value = t.jsxExpressionContainer(t.booleanLiteral(newPropValue));
+        } else {
+          attrPath.node.value = null;
+        }
+      }
+    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
+      if (t.isIdentifier(attrPath.node.value.expression)) {
+        // @ts-ignore
+        if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
+          return;
+        }
+        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${oldPropName} could not be automatically updated because ${attrPath.node.value.expression.name} could not be followed.`);
+      } else {
+        // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
+        attrPath.traverse({
+          StringLiteral(stringPath) {
+            if (
+              t.isStringLiteral(stringPath.node) &&
+              stringPath.node.value === oldPropValue
+            ) {
+              // Update old prop name to new prop name
+              attrPath.node.name.name = newPropName;
+
+              if (typeof newPropValue === 'string') {
+                stringPath.replaceWith(t.stringLiteral(newPropValue));
+              } else if (typeof newPropValue === 'boolean') {
+                if (!newPropValue) {
+                  stringPath.replaceWith(t.booleanLiteral(newPropValue));
+                } else {
+                  attrPath.node.value = null;
+                }
+              }
+            }
+          }
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Updates a prop name and value to new prop name and value, and adds an additional prop.
+ *
+ * Example:
+ * - Button: Change `variant="overBackground"` to `variant="primary" staticColor="white"`.
+ */
+export function updatePropValueAndAddNewPropName(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Prop name to replace. */
+    oldPropName: string,
+    /** Prop value to replace. */
+    oldPropValue: ReactNode,
+    /** Updated prop name. */
+    newPropName: string,
+    /** Updated prop value. */
+    newPropValue: ReactNode,
+    /** Additional new prop name to add. */
+    additionalPropName: string,
+    /** Additional new prop value to use. */
+    additionalPropValue: string
+  }
+) {
+  const {
+    oldPropName,
+    oldPropValue,
+    newPropName,
+    newPropValue,
+    additionalPropName,
+    additionalPropValue
+  } = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === oldPropValue) {
+    // Update old prop name to new prop name
+    attrPath.node.name.name = newPropName;
+
+    // If prop value is a string and matches the old value, replace it with the new value
+    if (typeof newPropValue === 'string') {
+      attrPath.node.value = t.stringLiteral(newPropValue);
+    } else if (typeof newPropValue === 'boolean') {
+      attrPath.node.value = t.jsxExpressionContainer(t.booleanLiteral(newPropValue));
+    }
+
+    if (additionalPropName && additionalPropValue) {
+      attrPath.insertAfter(
+        t.jsxAttribute(t.jsxIdentifier(additionalPropName), t.stringLiteral(additionalPropValue as string))
+      );
+    }
+  } else if (attrPath && t.isJSXExpressionContainer(attrPath.node.value)) {
+    // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
+    attrPath.traverse({
+      StringLiteral(stringPath) {
+        if (
+          t.isStringLiteral(stringPath.node) &&
+          stringPath.node.value === oldPropValue
+        ) {
+          // Update old prop name to new prop name
+          attrPath.node.name.name = newPropName;
+
+          if (typeof newPropValue === 'string') {
+            stringPath.replaceWith(t.stringLiteral(newPropValue));
+          } else if (typeof newPropValue === 'boolean') {
+            stringPath.replaceWith(t.booleanLiteral(newPropValue));
+          }
+
+          if (additionalPropName && additionalPropValue) {
+            attrPath.insertAfter(
+              t.jsxAttribute(t.jsxIdentifier(additionalPropName), t.stringLiteral(additionalPropValue as string))
+            );
+          }
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Updates a prop name to new prop name.
+ *
+ * Example:
+ * - Button: Change style to fillStyle.
+ */
+export function updatePropName(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Prop name to replace. */
+    oldPropName: string,
+    /** Updated prop name. */
+    newPropName: string
+  }
+) {
+  const {oldPropName, newPropName} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldPropName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldPropName) {
+    attrPath.node.name.name = newPropName;
+  }
+}
+
+/**
+ * Removes a prop.
+ *
+ * Example:
+ * - Button: Remove isQuiet (it is no longer supported).
+ */
+export function removeProp(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Prop name to remove. */
+    propName: string,
+    /** If provided, prop will only be removed if set to this value. */
+    propValue?: string
+  }
+) {
+  const {propName, propValue} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
+    if (propValue) {
+      // If prop value is provided, remove prop only if it matches the value
+      if (t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === propValue) {
+        attrPath.remove();
+      } else if (
+        t.isJSXExpressionContainer(attrPath.node.value)
+      ) {
+        if (t.isIdentifier(attrPath.node.value.expression)) {
+          // @ts-ignore
+          // eslint-disable-next-line max-depth
+          if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
+            return;
+          }
+          addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propName} could not be automatically removed because ${attrPath.node.value.expression.name} could not be followed.`);
+        } else {
+          attrPath.traverse({
+            StringLiteral(stringPath) {
+              if (
+                t.isStringLiteral(stringPath.node) &&
+                stringPath.node.value === propValue
+              ) {
+                // Invalid prop value was found inside expression.
+                addComment(attrPath.node, ` TODO(S2-upgrade): ${propName}="${propValue}" is no longer supported. You'll need to update this manually.`);
+              }
+            }
+          });
+        }
+      }
+    } else {
+      // No prop value provided, so remove prop regardless of value
+      attrPath.remove();
+    }
+  }
+}
+
+/**
+ * Comments out a prop.
+ *
+ * Example:
+ * - Button: Comment out isPending (it has not been implemented yet).
+ */
+export function commentOutProp(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Prop to comment out. */
+    propName: string,
+    /** If provided, prop will only be commented out if set to this value. */
+    propValue?: string
+  }
+) {
+  const {propName, propValue} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
+    if (propValue) {
+      // If prop value is provided, comment out prop only if it matches the value
+      if (t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === propValue) {
+        addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propName}="${propValue}" has not been implemented yet.`);
+        attrPath.remove();
+      } else {
+        attrPath.traverse({
+          StringLiteral(stringPath) {
+            if (
+              t.isStringLiteral(stringPath.node) &&
+              stringPath.node.value === propValue
+            ) {
+              addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propName}="${propValue}" has not been implemented yet.`);
+              attrPath.remove();
+            }
+          }
+        });
+      }
+    } else {
+      addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propName} has not been implemented yet.`);
+      attrPath.remove();
+    }
+  }
+}
+
+/**
+ * Add a comment above an element.
+ *
+ * Example:
+ * - Breadcrumbs: Check if nav needs to be added around Bre.
+ */
+export function addCommentToElement(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Comment to leave. */
+    comment: string
+  }
+) {
+  const {comment} = options;
+  addComment(path.node, ` TODO(S2-upgrade): ${comment}`);
+}
+
+/**
+ * If a prop is present, updates to use a new component.
+ *
+ * Example:
+ * - Button: If `href` is present, Button should be converted to `LinkButton`.
+ */
+export function updateComponentIfPropPresent(
+  path: NodePath<t.JSXElement>,
+  options: {
+    /** Updated component to use. */
+    newComponentName: string,
+    /** Will update component if this prop is present. */
+    propName: string
+  }
+) {
+  const {newComponentName, propName} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
+    let node = attrPath.findParent((p) => t.isJSXElement(p.node))?.node;
+    if (node && t.isJSXElement(node)) {
+      let localName = newComponentName;
+      if (availableComponents.has(newComponentName)) {
+        let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+        localName = addComponentImport(program, newComponentName);
+      }
+      node.openingElement.name = t.jsxIdentifier(localName);
+      if (node.closingElement) {
+        node.closingElement.name = t.jsxIdentifier(localName);
+      }
+    }
+  }
+}
+
+
+/**
+ * Remove render props, and move usage to a child component.
+ *
+ * Example:
+ * - DialogTrigger: Update children to remove render props usage, and note that `close` export function moved from `DialogTrigger` to `Dialog`.
+ */
+export function moveRenderPropsToChild(
+  path: NodePath<t.JSXElement>,
+  options: {
+    newChildComponentName: string
+  }
+) {
+  const {newChildComponentName} = options;
+
+  const renderFunctionIndex = path.node.children.findIndex(
+    (child) => 
+      t.isJSXExpressionContainer(child) && 
+      t.isArrowFunctionExpression(child.expression) &&
+      t.isJSXElement(child.expression.body) &&
+      t.isJSXIdentifier(child.expression.body.openingElement.name));
+  
+  const renderFunction = path.node.children[renderFunctionIndex] as t.JSXExpressionContainer;
+
+  if (
+    t.isJSXExpressionContainer(renderFunction) && 
+    t.isArrowFunctionExpression(renderFunction.expression) &&
+    t.isJSXElement(renderFunction.expression.body) &&
+    t.isJSXIdentifier(renderFunction.expression.body.openingElement.name) &&
+    getName(path, renderFunction.expression.body.openingElement.name) !== newChildComponentName
+  ) {
+    addComment(renderFunction, ' TODO(S2-upgrade): update this dialog to move the close function inside');
+    return;
+  }
+
+  if (
+    renderFunction && 
+    t.isArrowFunctionExpression(renderFunction.expression) &&
+    t.isJSXElement(renderFunction.expression.body)
+  ) {
+    const dialogElement = renderFunction.expression.body;
+
+    const originalParam = renderFunction.expression.params[0];
+    if (!t.isIdentifier(originalParam)) {
+      addComment(path.node.children[renderFunctionIndex], ' TODO(S2-upgrade): Could not automatically move the render props. You\'ll need to update this manually.');
+      return;
+    }
+    const paramName = originalParam.name;
+    const objectPattern = t.objectPattern([
+      t.objectProperty(t.identifier(paramName),
+        t.identifier(paramName),
+        false,
+        true
+      )
+    ]);
+
+    const newRenderFunction = t.jsxExpressionContainer(
+      t.arrowFunctionExpression(
+        [objectPattern],
+        t.jsxFragment(
+          t.jsxOpeningFragment(),
+          t.jsxClosingFragment(),
+          dialogElement.children
+        )
+      )
+    );
+
+    let removedOnDismiss = false;
+    const attributes = dialogElement.openingElement.attributes.filter((attr) => {
+      if (t.isJSXAttribute(attr) && attr.name.name === 'onDismiss') {
+        removedOnDismiss = true;
+        return false;
+      }
+      return true;
+    });
+    
+    path.node.children[renderFunctionIndex] = t.jsxElement(
+      t.jsxOpeningElement(t.jsxIdentifier(newChildComponentName), attributes),
+      t.jsxClosingElement(t.jsxIdentifier(newChildComponentName)),
+      [newRenderFunction]
+    );
+
+    if (removedOnDismiss) {
+      addComment(path.node.children[renderFunctionIndex], ' onDismiss was removed from Dialog. Use onOpenChange on the DialogTrigger, or onDismiss on the DialogContainer instead');
+    }
+  }
+}
+
+
+/**
+ * If within a collection component, updates to use a new component.
+ *
+ * Example:
+ * - Item: If within `Menu`, update name from `Item` to `MenuItem`.
+ */
+export function updateComponentWithinCollection(
+  path: NodePath<t.JSXElement>,
+  options: {
+    parentComponentName: string,
+    newComponentName: string
+  }
+) {
+  const {parentComponentName, newComponentName} = options;
+
+  // Collections currently implemented
+  // TODO: Add 'ActionGroup', 'ListBox', 'ListView' once implemented
+  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'Collection']);
+
+  if (
+    t.isJSXElement(path.node) &&
+    t.isJSXIdentifier(path.node.openingElement.name)
+  ) {
+    // Find closest parent collection component
+    let closestParentCollection = path.findParent((p) => 
+      t.isJSXElement(p.node) &&
+      t.isJSXIdentifier(p.node.openingElement.name) &&
+      collectionItemParents.has(getName(path, p.node.openingElement.name))
+    );
+    if (
+      closestParentCollection &&
+      t.isJSXElement(closestParentCollection.node) &&
+      t.isJSXIdentifier(closestParentCollection.node.openingElement.name) &&
+      getName(path, closestParentCollection.node.openingElement.name) === parentComponentName
+    ) {
+      // If closest parent collection component matches parentComponentName, replace with newComponentName
+
+      updateKeyToId(path);
+
+      let localName = newComponentName;
+      if (availableComponents.has(newComponentName)) {
+        let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+        localName = addComponentImport(program, newComponentName);
+      }
+
+      let newNode = t.jsxElement(
+        t.jsxOpeningElement(t.jsxIdentifier(localName), path.node.openingElement.attributes),
+        t.jsxClosingElement(t.jsxIdentifier(localName)),
+        path.node.children
+      );
+      path.replaceWith(newNode);
+    }
+  }
+}
+
+/**
+ * If no parent collection detected, leave a comment for the user to check manually.
+ *
+ * Example: If they're declaring declaring Items somewhere above the collection.
+ */
+export function commentIfParentCollectionNotDetected(
+  path: NodePath<t.JSXElement>
+) {
+  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'ActionGroup', 'ActionButtonGroup', 'ToggleButtonGroup', 'ListBox', 'ListView', 'Collection', 'SearchAutocomplete', 'Accordion', 'ActionBar', 'StepList']);
+  if (
+    t.isJSXElement(path.node)
+  ) {
+    // Find closest parent collection component
+    let closestParentCollection = path.findParent((p) => 
+      t.isJSXElement(p.node) &&
+      t.isJSXIdentifier(p.node.openingElement.name) &&
+      collectionItemParents.has(getName(path, p.node.openingElement.name))
+    );
+    if (!closestParentCollection) {
+      // If we couldn't find a parent collection parent, leave a comment for them to check manually
+      addComment(path.node, ' TODO(S2-upgrade): Couldn\'t automatically detect what type of collection component this is rendered in. You\'ll need to update this manually.');
+    }
+  }
+}
+
+/**
+ * If within a component, moves prop to new child component.
+ *
+ * Example:
+ * - Section: If within `Menu`, move `title` prop string to be a child of new `Heading` within a `Header`.
+ */
+export function movePropToNewChildComponentName(
+  path: NodePath<t.JSXElement>,
+  options: {
+    parentComponentName: string,
+    childComponentName: string,
+    propName: string,
+    newChildComponentName: string
+  }
+) {
+  const {parentComponentName, childComponentName, propName, newChildComponentName} =
+    options;
+
+  if (
+    t.isJSXElement(path.node) &&
+    t.isJSXElement(path.parentPath.node) &&
+    t.isJSXIdentifier(path.node.openingElement.name) &&
+    t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
+    getName(path, path.node.openingElement.name) === childComponentName &&
+    getName(path, path.parentPath.node.openingElement.name) === parentComponentName
+  ) {
+    let propValue: t.JSXAttribute['value'] | void;
+    path.node.openingElement.attributes =
+      path.node.openingElement.attributes.filter((attr) => {
+        if (t.isJSXAttribute(attr) && attr.name.name === propName) {
+          propValue = attr.value;
+          return false;
+        }
+        return true;
+      });
+
+    if (propValue) {
+      path.node.children.unshift(
+        t.jsxElement(
+          t.jsxOpeningElement(t.jsxIdentifier(newChildComponentName), []),
+          t.jsxClosingElement(t.jsxIdentifier(newChildComponentName)),
+          [t.isStringLiteral(propValue) ? t.jsxText(propValue.value) : propValue]
+        )
+      );
+      // TODO: handle dynamic collections. Need to wrap export function child in <Collection> and move `items` prop down.
+    }
+  }
+}
+
+/**
+ * Updates prop to be on parent component.
+ *
+ * Example:
+ * - Tooltip: Remove `placement` and add to the parent `TooltipTrigger` instead.
+ */
+export function movePropToParentComponent(
+  path: NodePath<t.JSXElement>,
+  options: {
+    parentComponentName: string,
+    childComponentName: string,
+    propName: string
+  }
+) {
+  const {parentComponentName, childComponentName, propName} = options;
+
+  path.traverse({
+    JSXAttribute(attributePath) {
+      if (
+        t.isJSXElement(path.parentPath.node) &&
+        t.isJSXIdentifier(path.node.openingElement.name) &&
+        t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
+        attributePath.node.name.name === propName &&
+        getName(path, path.node.openingElement.name) === childComponentName &&
+        getName(path, path.parentPath.node.openingElement.name) === parentComponentName
+      ) {
+        path.parentPath.node.openingElement.attributes.push(
+          t.jsxAttribute(t.jsxIdentifier(propName), attributePath.node.value)
+        );
+        attributePath.remove();
+      }
+    }
+  });
+}
+
+/**
+ * Update to use a new component.
+ *
+ * Example:
+ * - Flex: Update `Flex` to be a `div` and apply flex styles using the style macro.
+ */
+export function updateToNewComponentName(
+  path: NodePath<t.JSXElement>,
+  options: {
+    newComponentName: string
+  }
+) {
+  const {newComponentName} = options;
+
+  let localName = newComponentName;
+  if (availableComponents.has(newComponentName)) {
+    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
+    localName = addComponentImport(program, newComponentName);
+  }
+
+  path.node.openingElement.name = t.jsxIdentifier(localName);
+  if (path.node.closingElement) {
+    path.node.closingElement.name = t.jsxIdentifier(localName);
+  }
+}
+
+const conversions = {
+  'cm': 37.8,
+  'mm': 3.78,
+  'in': 96,
+  'pt': 1.33,
+  'pc': 16
+};
+
+/**
+ * Updates prop to use pixel value instead.
+ * 
+ * Example:
+ * - ComboBox: Update `menuWidth` to a pixel value.
+ */
+export function convertDimensionValueToPx(
+  path: NodePath<t.JSXElement>,
+  options: {
+    propName: string
+  }
+) {
+  const {propName} = options;
+
+  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propName) {
+    if (t.isStringLiteral(attrPath.node.value)) {
+      try {
+        let value = convertDimension(attrPath.node.value.value, 'size');
+        if (value && typeof value === 'number') {
+          attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(value));
+        } else if (value && typeof value === 'string') {
+          // eslint-disable-next-line max-depth
+          if ((/%|vw|vh|auto|ex|ch|rem|vmin|vmax/).test(value)) {
+            addComment(attrPath.node, ' TODO(S2-upgrade): Unable to convert CSS unit to a pixel value');
+          } else if ((/cm|mm|in|pt|pc/).test(value)) {
+            let unit = value.replace(/\[|\]|\d+/g, '');
+            let conversion = conversions[unit as keyof typeof conversions];
+            value = Number(value.replace(/\[|\]|cm|mm|in|pt|pc/g, ''));
+            // eslint-disable-next-line max-depth
+            if (!isNaN(value)) {
+              let pixelValue = Math.round(conversion * value);
+              attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(pixelValue));
+            }
+          } else if ((/px/).test(value)) {
+            let pixelValue = Number(value.replace(/\[|\]|px/g, ''));
+            // eslint-disable-next-line max-depth
+            if (!isNaN(pixelValue)) {
+              attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(pixelValue));
+            }
+          }
+        }
+      } catch (error) {
+        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propName} could not be automatically updated due to error: ${error}`);
+      }
+    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
+      if (t.isIdentifier(attrPath.node.value.expression)) {
+        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propName} could not be automatically updated because ${attrPath.node.value.expression.name} could not be followed.`);
+      }
+    }
+  }
+}
+
+/**
+ * Updates double placement values to a single value.
+ * 
+ * Example:
+ * - TooltipTrigger: Update `placement="bottom left"` to `placement="bottom"`.
+ */
+export function updatePlacementToSingleValue(
+  path: NodePath<t.JSXElement>,
+  options: {
+    propToUpdateName: string,
+    /* If provided, updates the prop on the specified child component */
+    childComponentName?: string
+  }
+) {
+  const {propToUpdateName, childComponentName} = options;
+
+  const doublePlacementValues = new Set([
+    'bottom left',
+    'bottom right',
+    'bottom start',
+    'bottom end',
+    'top left',
+    'top right',
+    'top start',
+    'top end',
+    'left top',
+    'left bottom',
+    'start top',
+    'start bottom',
+    'right top',
+    'right bottom',
+    'end top',
+    'end bottom'
+  ]);
+
+  let elementPath = childComponentName ? 
+    path.get('children').find(
+      (child) => t.isJSXElement(child.node) &&
+      t.isJSXIdentifier(child.node.openingElement.name) &&
+      getName(path, child.node.openingElement.name) === childComponentName
+    ) as NodePath<t.JSXElement> : path;
+  let attrPath = elementPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToUpdateName) as NodePath<t.JSXAttribute>;
+  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToUpdateName) {
+    if (t.isStringLiteral(attrPath.node.value) && doublePlacementValues.has(attrPath.node.value.value)) {
+      attrPath.replaceWith(t.jsxAttribute(t.jsxIdentifier(propToUpdateName), t.stringLiteral(attrPath.node.value.value.split(' ')[0])));
+      return;
+    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
+      attrPath.traverse({
+        StringLiteral(stringPath) {
+          if (
+            t.isStringLiteral(stringPath.node) &&
+            doublePlacementValues.has(stringPath.node.value)
+          ) {
+            stringPath.replaceWith(t.stringLiteral(stringPath.node.value.split(' ')[0]));
+            return;
+          }
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Remove component if within a parent component.
+ * 
+ * Example:
+ * - Divider: Remove `Divider` if used within a `Dialog`.
+ */
+export function removeComponentIfWithinParent(
+  path: NodePath<t.JSXElement>,
+  options: {
+    parentComponentName: string
+  }
+) {
+  const {parentComponentName} = options;
+  if (
+    t.isJSXElement(path.node) &&
+    t.isJSXElement(path.parentPath.node) &&
+    t.isJSXIdentifier(path.node.openingElement.name) &&
+    t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
+    getName(path, path.parentPath.node.openingElement.name) === parentComponentName
+  ) {
+    path.remove();
+  }
+}
+
+/**
+ * Updates the key prop to id. Keeps the key prop if it's used in an array.map function.
+ */
+export function updateKeyToId(
+  path: NodePath<t.JSXElement>
+) {
+  let attributes = path.node.openingElement.attributes;
+  let keyProp = attributes.find((attr) => t.isJSXAttribute(attr) && attr.name.name === 'key');
+  if (
+    keyProp &&
+    t.isJSXAttribute(keyProp)
+  ) {
+    // Update key prop to be id
+    keyProp.name = t.jsxIdentifier('id');
+  }
+
+  if (
+    t.isArrowFunctionExpression(path.parentPath.node) &&
+    path.parentPath.parentPath &&
+    t.isCallExpression(path.parentPath.parentPath.node) &&
+    path.parentPath.parentPath.node.callee.type === 'MemberExpression' &&
+    path.parentPath.parentPath.node.callee.property.type === 'Identifier' &&
+    path.parentPath.parentPath.node.callee.property.name === 'map'
+  ) {
+    // If Array.map is used, keep the key prop
+    if (
+      keyProp &&
+      t.isJSXAttribute(keyProp)
+    ) {
+      let newKeyProp = t.jsxAttribute(t.jsxIdentifier('key'), keyProp.value);
+      attributes.push(newKeyProp);
+    }
+  }
+}
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/unsafeStyle.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts
similarity index 99%
rename from packages/dev/codemods/src/s1-to-s2/src/codemods/unsafeStyle.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts
index 83202fa37a2..8be657d42b0 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/unsafeStyle.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/unsafeStyle.ts
@@ -4,7 +4,7 @@ import {convertUnsafeDimension} from './dimensions';
 import {convertUnsafeStyleColor} from './colors';
 import * as t from '@babel/types';
 
-export function transformUnsafeStyle(
+export default function transformUnsafeStyle(
   value: t.ObjectExpression,
   element: string
 ): StylePropValue | null {
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/utils.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/utils.ts
similarity index 91%
rename from packages/dev/codemods/src/s1-to-s2/src/codemods/utils.ts
rename to packages/dev/codemods/src/s1-to-s2/src/codemods/shared/utils.ts
index 88365a5eefe..f3425a7f715 100644
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/utils.ts
+++ b/packages/dev/codemods/src/s1-to-s2/src/codemods/shared/utils.ts
@@ -73,15 +73,15 @@ export function addComment(node: any, comment: string) {
   });
 }
 
-export function addComponentImport(path: NodePath<t.Program>, newComponent: string) {
-  // If newComponent variable already exists in scope, alias new import to avoid conflict.
-  let existingBinding = path.scope.getBinding(newComponent);
-  let localName = newComponent;
+export function addComponentImport(path: NodePath<t.Program>, newComponentName: string) {
+  // If newComponentName variable already exists in scope, alias new import to avoid conflict.
+  let existingBinding = path.scope.getBinding(newComponentName);
+  let localName = newComponentName;
   if (existingBinding) {
-    let newName = newComponent;
+    let newName = newComponentName;
     let i = 1;
     while (path.scope.hasBinding(newName)) {
-      newName = newComponent + i;
+      newName = newComponentName + i;
       i++;
     }
     localName = newName;
@@ -93,7 +93,7 @@ export function addComponentImport(path: NodePath<t.Program>, newComponent: stri
       return (
         t.isImportSpecifier(specifier) &&
         specifier.imported.type === 'Identifier' &&
-        specifier.imported.name === newComponent
+        specifier.imported.name === newComponentName
       );
     });
     if (specifier) {
@@ -101,14 +101,14 @@ export function addComponentImport(path: NodePath<t.Program>, newComponent: stri
       return localName;
     }
     existingImport.specifiers.push(
-      t.importSpecifier(t.identifier(localName), t.identifier(newComponent))
+      t.importSpecifier(t.identifier(localName), t.identifier(newComponentName))
     );
   } else {
     let importDeclaration = t.importDeclaration(
       [
         t.importSpecifier(
           t.identifier(localName),
-          t.identifier(newComponent)
+          t.identifier(newComponentName)
         )
       ],
       t.stringLiteral('@react-spectrum/s2')
diff --git a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts b/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts
deleted file mode 100644
index a8cd465bb0a..00000000000
--- a/packages/dev/codemods/src/s1-to-s2/src/codemods/transforms.ts
+++ /dev/null
@@ -1,1446 +0,0 @@
-import {addComment, addComponentImport, getName, removeComponentImport} from './utils';
-import {convertDimension} from './dimensions';
-import {getComponents} from '../getComponents';
-import {NodePath} from '@babel/traverse';
-import type {ReactNode} from 'react';
-import * as t from '@babel/types';
-
-let availableComponents = getComponents();
-
-export interface UpdatePropNameAndValueOptions {
-  /** Prop name to replace. */
-  oldProp: string,
-  /** Prop value to replace. */
-  oldValue: ReactNode,
-  /** Updated prop name. */
-  newProp: string,
-  /** Updated prop value. */
-  newValue: ReactNode
-}
-
-/**
- * Update prop name and value to new prop name and value.
- *
- * Example:
- * - Button: Change variant="cta" to variant="accent".
- * - Link: Change `variant="overBackground"` to `staticColor="white"`.
- */
-function updatePropNameAndValue(
-  path: NodePath<t.JSXElement>,
-  options: UpdatePropNameAndValueOptions
-) {
-  const {oldProp, oldValue, newProp, newValue} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldProp) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldProp) {
-    if (
-      t.isStringLiteral(attrPath.node.value) &&
-      attrPath.node.value.value === oldValue
-    ) {
-      // Update old prop name to new prop name
-      attrPath.node.name.name = newProp;
-
-      // If prop value is a string and matches the old value, replace it with the new value
-      if (typeof newValue === 'string') {
-        attrPath.node.value = t.stringLiteral(newValue);
-      } else if (typeof newValue === 'boolean') {
-        if (!newValue) {
-          attrPath.node.value = t.jsxExpressionContainer(t.booleanLiteral(newValue));
-        } else {
-          attrPath.node.value = null;
-        }
-      }
-    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
-      if (t.isIdentifier(attrPath.node.value.expression)) {
-        // @ts-ignore
-        if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
-          return;
-        }
-        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${oldProp} could not be automatically updated because ${attrPath.node.value.expression.name} could not be followed.`);
-      } else {
-        // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
-        attrPath.traverse({
-          StringLiteral(stringPath) {
-            if (
-              t.isStringLiteral(stringPath.node) &&
-              stringPath.node.value === oldValue
-            ) {
-              // Update old prop name to new prop name
-              attrPath.node.name.name = newProp;
-
-              if (typeof newValue === 'string') {
-                stringPath.replaceWith(t.stringLiteral(newValue));
-              } else if (typeof newValue === 'boolean') {
-                if (!newValue) {
-                  stringPath.replaceWith(t.booleanLiteral(newValue));
-                } else {
-                  attrPath.node.value = null;
-                }
-              }
-            }
-          }
-        });
-      }
-    }
-  }
-}
-
-export interface UpdatePropValueAndAddNewPropOptions {
-  /** Prop name to replace. */
-  oldProp: string,
-  /** Prop value to replace. */
-  oldValue: ReactNode,
-  /** Updated prop name. */
-  newProp: string,
-  /** Updated prop value. */
-  newValue: ReactNode,
-  /** Additional new prop name to add. */
-  additionalProp: string,
-  /** Additional new prop value to use. */
-  additionalValue: string
-}
-
-/**
- * Updates a prop name and value to new prop name and value, and adds an additional prop.
- *
- * Example:
- * - Button: Change `variant="overBackground"` to `variant="primary" staticColor="white"`.
- */
-function updatePropValueAndAddNewProp(
-  path: NodePath<t.JSXElement>,
-  options: UpdatePropValueAndAddNewPropOptions
-) {
-  const {
-    oldProp,
-    oldValue,
-    newProp,
-    newValue,
-    additionalProp,
-    additionalValue
-  } = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldProp) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === oldValue) {
-    // Update old prop name to new prop name
-    attrPath.node.name.name = newProp;
-
-    // If prop value is a string and matches the old value, replace it with the new value
-    if (typeof newValue === 'string') {
-      attrPath.node.value = t.stringLiteral(newValue);
-    } else if (typeof newValue === 'boolean') {
-      attrPath.node.value = t.jsxExpressionContainer(t.booleanLiteral(newValue));
-    }
-
-    if (additionalProp && additionalValue) {
-      attrPath.insertAfter(
-        t.jsxAttribute(t.jsxIdentifier(additionalProp), t.stringLiteral(additionalValue as string))
-      );
-    }
-  } else if (attrPath && t.isJSXExpressionContainer(attrPath.node.value)) {
-    // If prop value is an expression, traverse to find a string literal that matches the old and replace it with the new value
-    attrPath.traverse({
-      StringLiteral(stringPath) {
-        if (
-          t.isStringLiteral(stringPath.node) &&
-          stringPath.node.value === oldValue
-        ) {
-          // Update old prop name to new prop name
-          attrPath.node.name.name = newProp;
-
-          if (typeof newValue === 'string') {
-            stringPath.replaceWith(t.stringLiteral(newValue));
-          } else if (typeof newValue === 'boolean') {
-            stringPath.replaceWith(t.booleanLiteral(newValue));
-          }
-
-          if (additionalProp && additionalValue) {
-            attrPath.insertAfter(
-              t.jsxAttribute(t.jsxIdentifier(additionalProp), t.stringLiteral(additionalValue as string))
-            );
-          }
-        }
-      }
-    });
-  }
-}
-
-export interface UpdatePropNameOptions {
-  /** Prop name to replace. */
-  oldProp: string,
-  /** Updated prop name. */
-  newProp: string
-}
-
-/**
- * Updates a prop name to new prop name.
- *
- * Example:
- * - Button: Change style to fillStyle.
- */
-function updatePropName(
-  path: NodePath<t.JSXElement>,
-  options: UpdatePropNameOptions
-) {
-  const {oldProp, newProp} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === oldProp) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === oldProp) {
-    attrPath.node.name.name = newProp;
-  }
-}
-
-export interface RemovePropOptions {
-  /** Prop name to remove. */
-  propToRemove: string,
-  /** If provided, prop will only be removed if set to this value. */
-  propValue?: string
-}
-
-/**
- * Removes a prop.
- *
- * Example:
- * - Button: Remove isQuiet (it is no longer supported).
- */
-function removeProp(path: NodePath<t.JSXElement>, options: RemovePropOptions) {
-  const {propToRemove, propValue} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToRemove) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToRemove) {
-    if (propValue) {
-      // If prop value is provided, remove prop only if it matches the value
-      if (t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === propValue) {
-        attrPath.remove();
-      } else if (
-        t.isJSXExpressionContainer(attrPath.node.value)
-      ) {
-        if (t.isIdentifier(attrPath.node.value.expression)) {
-          // @ts-ignore
-          // eslint-disable-next-line max-depth
-          if (attrPath.node.comments && [...attrPath.node.comments].some((comment) => comment.value.includes('could not be automatically'))) {
-            return;
-          }
-          addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propToRemove} could not be automatically removed because ${attrPath.node.value.expression.name} could not be followed.`);
-        } else {
-          attrPath.traverse({
-            StringLiteral(stringPath) {
-              if (
-                t.isStringLiteral(stringPath.node) &&
-                stringPath.node.value === propValue
-              ) {
-                // Invalid prop value was found inside expression.
-                addComment(attrPath.node, ` TODO(S2-upgrade): ${propToRemove}="${propValue}" is no longer supported. You'll need to update this manually.`);
-              }
-            }
-          });
-        }
-      }
-    } else {
-      // No prop value provided, so remove prop regardless of value
-      attrPath.remove();
-    }
-  }
-}
-
-export interface CommentOutPropOptions {
-  /** Prop to comment out. */
-  propToComment: string,
-  /** If provided, prop will only be commented out if set to this value. */
-  propValue?: string
-}
-
-/**
- * Comments out a prop.
- *
- * Example:
- * - Button: Comment out isPending (it has not been implemented yet).
- */
-function commentOutProp(
-  path: NodePath<t.JSXElement>,
-  options: CommentOutPropOptions
-) {
-  const {propToComment, propValue} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToComment) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToComment) {
-    if (propValue) {
-      // If prop value is provided, comment out prop only if it matches the value
-      if (t.isStringLiteral(attrPath.node.value) && attrPath.node.value.value === propValue) {
-        addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propToComment}="${propValue}" has not been implemented yet.`);
-        attrPath.remove();
-      } else {
-        attrPath.traverse({
-          StringLiteral(stringPath) {
-            if (
-              t.isStringLiteral(stringPath.node) &&
-              stringPath.node.value === propValue
-            ) {
-              addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propToComment}="${propValue}" has not been implemented yet.`);
-              attrPath.remove();
-            }
-          }
-        });
-      }
-    } else {
-      addComment(attrPath.parentPath.node, ` TODO(S2-upgrade): ${propToComment} has not been implemented yet.`);
-      attrPath.remove();
-    }
-  }
-}
-
-export interface AddCommentToElementOptions {
-  /** Comment to leave. */
-  comment: string
-}
-
-/**
- * Add a comment above an element.
- *
- * Example:
- * - Breadcrumbs: Check if nav needs to be added around Bre.
- */
-function addCommentToElement(
-  path: NodePath<t.JSXElement>,
-  options: AddCommentToElementOptions
-) {
-  const {comment} = options;
-  addComment(path.node, ` TODO(S2-upgrade): ${comment}`);
-}
-
-export interface UpdateComponentIfPropPresentOptions {
-  /** Updated component to use. */
-  newComponent: string,
-  /** Will update component if this prop is present. */
-  propToCheck: string
-}
-
-/**
- * If a prop is present, updates to use a new component.
- *
- * Example:
- * - Button: If `href` is present, Button should be converted to `LinkButton`.
- */
-function updateComponentIfPropPresent(
-  path: NodePath<t.JSXElement>,
-  options: UpdateComponentIfPropPresentOptions
-) {
-  const {newComponent, propToCheck} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToCheck) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToCheck) {
-    let node = attrPath.findParent((p) => t.isJSXElement(p.node))?.node;
-    if (node && t.isJSXElement(node)) {
-      let localName = newComponent;
-      if (availableComponents.has(newComponent)) {
-        let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-        localName = addComponentImport(program, newComponent);
-      }
-      node.openingElement.name = t.jsxIdentifier(localName);
-      if (node.closingElement) {
-        node.closingElement.name = t.jsxIdentifier(localName);
-      }
-    }
-  }
-}
-
-export interface MoveRenderPropsOptions {
-  newChildComponent: string
-}
-
-/**
- * Remove render props, and move usage to a child component.
- *
- * Example:
- * - DialogTrigger: Update children to remove render props usage, and note that `close` function moved from `DialogTrigger` to `Dialog`.
- */
-function moveRenderPropsToChild(
-  path: NodePath<t.JSXElement>,
-  options: MoveRenderPropsOptions
-) {
-  const {newChildComponent} = options;
-
-  const renderFunctionIndex = path.node.children.findIndex(
-    (child) => 
-      t.isJSXExpressionContainer(child) && 
-      t.isArrowFunctionExpression(child.expression) &&
-      t.isJSXElement(child.expression.body) &&
-      t.isJSXIdentifier(child.expression.body.openingElement.name));
-  
-  const renderFunction = path.node.children[renderFunctionIndex] as t.JSXExpressionContainer;
-
-  if (
-    t.isJSXExpressionContainer(renderFunction) && 
-    t.isArrowFunctionExpression(renderFunction.expression) &&
-    t.isJSXElement(renderFunction.expression.body) &&
-    t.isJSXIdentifier(renderFunction.expression.body.openingElement.name) &&
-    getName(path, renderFunction.expression.body.openingElement.name) !== newChildComponent
-  ) {
-    addComment(renderFunction, ' TODO(S2-upgrade): update this dialog to move the close function inside');
-    return;
-  }
-
-  if (
-    renderFunction && 
-    t.isArrowFunctionExpression(renderFunction.expression) &&
-    t.isJSXElement(renderFunction.expression.body)
-  ) {
-    const dialogElement = renderFunction.expression.body;
-
-    const originalParam = renderFunction.expression.params[0];
-    if (!t.isIdentifier(originalParam)) {
-      addComment(path.node.children[renderFunctionIndex], ' TODO(S2-upgrade): Could not automatically move the render props. You\'ll need to update this manually.');
-      return;
-    }
-    const paramName = originalParam.name;
-    const objectPattern = t.objectPattern([
-      t.objectProperty(t.identifier(paramName),
-        t.identifier(paramName),
-        false,
-        true
-      )
-    ]);
-
-    const newRenderFunction = t.jsxExpressionContainer(
-      t.arrowFunctionExpression(
-        [objectPattern],
-        t.jsxFragment(
-          t.jsxOpeningFragment(),
-          t.jsxClosingFragment(),
-          dialogElement.children
-        )
-      )
-    );
-
-    let removedOnDismiss = false;
-    const attributes = dialogElement.openingElement.attributes.filter((attr) => {
-      if (t.isJSXAttribute(attr) && attr.name.name === 'onDismiss') {
-        removedOnDismiss = true;
-        return false;
-      }
-      return true;
-    });
-    
-    path.node.children[renderFunctionIndex] = t.jsxElement(
-      t.jsxOpeningElement(t.jsxIdentifier(newChildComponent), attributes),
-      t.jsxClosingElement(t.jsxIdentifier(newChildComponent)),
-      [newRenderFunction]
-    );
-
-    if (removedOnDismiss) {
-      addComment(path.node.children[renderFunctionIndex], ' onDismiss was removed from Dialog. Use onOpenChange on the DialogTrigger, or onDismiss on the DialogContainer instead');
-    }
-  }
-}
-
-export interface UpdateComponentWithinCollectionOptions {
-  parentComponent: string,
-  newComponent: string
-}
-
-/**
- * If within a collection component, updates to use a new component.
- *
- * Example:
- * - Item: If within `Menu`, update name from `Item` to `MenuItem`.
- */
-function updateComponentWithinCollection(
-  path: NodePath<t.JSXElement>,
-  options: UpdateComponentWithinCollectionOptions
-) {
-  const {parentComponent, newComponent} = options;
-
-  // Collections currently implemented
-  // TODO: Add 'ActionGroup', 'ListBox', 'ListView' once implemented
-  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'Collection']);
-
-  if (
-    t.isJSXElement(path.node) &&
-    t.isJSXIdentifier(path.node.openingElement.name)
-  ) {
-    // Find closest parent collection component
-    let closestParentCollection = path.findParent((p) => 
-      t.isJSXElement(p.node) &&
-      t.isJSXIdentifier(p.node.openingElement.name) &&
-      collectionItemParents.has(getName(path, p.node.openingElement.name))
-    );
-    if (
-      closestParentCollection &&
-      t.isJSXElement(closestParentCollection.node) &&
-      t.isJSXIdentifier(closestParentCollection.node.openingElement.name) &&
-      getName(path, closestParentCollection.node.openingElement.name) === parentComponent
-    ) {
-      // If closest parent collection component matches parentComponent, replace with newComponent
-
-      updateKeyToId(path);
-
-      let localName = newComponent;
-      if (availableComponents.has(newComponent)) {
-        let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-        localName = addComponentImport(program, newComponent);
-      }
-
-      let newNode = t.jsxElement(
-        t.jsxOpeningElement(t.jsxIdentifier(localName), path.node.openingElement.attributes),
-        t.jsxClosingElement(t.jsxIdentifier(localName)),
-        path.node.children
-      );
-      path.replaceWith(newNode);
-    }
-  }
-}
-
-/**
- * If no parent collection detected, leave a comment for the user to check manually.
- *
- * Example: If they're declaring declaring Items somewhere above the collection.
- */
-function commentIfParentCollectionNotDetected(
-  path: NodePath<t.JSXElement>
-) {
-  const collectionItemParents = new Set(['Menu', 'ActionMenu', 'TagGroup', 'Breadcrumbs', 'Picker', 'ComboBox', 'ListBox', 'TabList', 'TabPanels', 'ActionGroup', 'ActionButtonGroup', 'ToggleButtonGroup', 'ListBox', 'ListView', 'Collection', 'SearchAutocomplete', 'Accordion', 'ActionBar', 'StepList']);
-  if (
-    t.isJSXElement(path.node)
-  ) {
-    // Find closest parent collection component
-    let closestParentCollection = path.findParent((p) => 
-      t.isJSXElement(p.node) &&
-      t.isJSXIdentifier(p.node.openingElement.name) &&
-      collectionItemParents.has(getName(path, p.node.openingElement.name))
-    );
-    if (!closestParentCollection) {
-      // If we couldn't find a parent collection parent, leave a comment for them to check manually
-      addComment(path.node, ' TODO(S2-upgrade): Couldn\'t automatically detect what type of collection component this is rendered in. You\'ll need to update this manually.');
-    }
-  }
-}
-
-/**
- * Updates Tabs to the new API.
- *
- * Example:
- * - Tabs: Remove TabPanels components and keep individual TabPanel components inside.
- */
-function updateTabs(
-  path: NodePath<t.JSXElement>
-) {
-  function transformTabs(path: NodePath<t.JSXElement>) {
-    let tabListNode: t.JSXElement | null = null;
-    let tabPanelsNodes: t.JSXElement[] = [];
-    let itemsProp: t.JSXAttribute | null = null;
-
-    path.node.openingElement.attributes = path.node.openingElement.attributes.filter(attr => {
-      if (t.isJSXAttribute(attr) && attr.name.name === 'items') {
-        itemsProp = attr;
-        return false;
-      }
-      return true;
-    });
-
-    path.get('children').forEach(childPath => {
-      if (t.isJSXElement(childPath.node)) {
-        if (
-          t.isJSXIdentifier(childPath.node.openingElement.name) &&
-          getName(childPath as NodePath<t.JSXElement>, childPath.node.openingElement.name) === 'TabList'
-        ) {
-          tabListNode = transformTabList(childPath as NodePath<t.JSXElement>);
-          if (itemsProp) {
-            tabListNode.openingElement.attributes.push(itemsProp);
-          }
-        } else if (
-          t.isJSXIdentifier(childPath.node.openingElement.name) &&
-          getName(childPath as NodePath<t.JSXElement>, childPath.node.openingElement.name) === 'TabPanels'
-        ) {
-          tabPanelsNodes = transformTabPanels(childPath as NodePath<t.JSXElement>, itemsProp);
-        }
-      }
-    });
-
-    if (tabListNode) {
-      path.node.children = [tabListNode, ...tabPanelsNodes];
-    }
-  }
-
-  function transformTabList(tabListPath: NodePath<t.JSXElement>): t.JSXElement {
-    tabListPath.get('children').forEach(itemPath => {
-      if (
-        t.isJSXElement(itemPath.node) &&
-        t.isJSXIdentifier(itemPath.node.openingElement.name) &&
-        getName(itemPath as NodePath<t.JSXElement>, itemPath.node.openingElement.name) === 'Item'
-      ) {
-        updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponent: 'TabList', newComponent: 'Tab'});
-      }
-    });
-    return tabListPath.node;
-  }
-
-  function transformTabPanels(tabPanelsPath: NodePath<t.JSXElement>, itemsProp: t.JSXAttribute | null): t.JSXElement[] {
-    // Dynamic case
-    let dynamicRender = tabPanelsPath.get('children').find(path => t.isJSXExpressionContainer(path.node));
-    if (dynamicRender) {
-      updateToNewComponent(tabPanelsPath, {newComponent: 'Collection'});
-      let itemPath = (dynamicRender.get('expression') as NodePath).get('body');
-      updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponent: 'Collection', newComponent: 'TabPanel'});
-      if (itemsProp) {
-        tabPanelsPath.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('items'), itemsProp.value));
-      }
-      return [tabPanelsPath.node];
-    }
-
-    // Static case
-    return tabPanelsPath.get('children').map(itemPath => {
-      if (
-        t.isJSXElement(itemPath.node) &&
-        t.isJSXIdentifier(itemPath.node.openingElement.name) &&
-        getName(itemPath as NodePath<t.JSXElement>, itemPath.node.openingElement.name) === 'Item'
-      ) {
-        updateComponentWithinCollection(itemPath as NodePath<t.JSXElement>, {parentComponent: 'TabPanels', newComponent: 'TabPanel'});
-        return itemPath.node;
-      }
-      return null;
-    }).filter(Boolean) as t.JSXElement[];
-  }
-
-  let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-  removeComponentImport(program, 'TabPanels');
-  transformTabs(path);
-}
-
-export interface MovePropToNewChildComponentOptions {
-  parentComponent: string,
-  childComponent: string,
-  propToMove: string,
-  newChildComponent: string
-}
-
-/**
- * If within a component, moves prop to new child component.
- *
- * Example:
- * - Section: If within `Menu`, move `title` prop string to be a child of new `Heading` within a `Header`.
- */
-function movePropToNewChildComponent(
-  path: NodePath<t.JSXElement>,
-  options: MovePropToNewChildComponentOptions
-) {
-  const {parentComponent, childComponent, propToMove, newChildComponent} =
-    options;
-
-  if (
-    t.isJSXElement(path.node) &&
-    t.isJSXElement(path.parentPath.node) &&
-    t.isJSXIdentifier(path.node.openingElement.name) &&
-    t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
-    getName(path, path.node.openingElement.name) === childComponent &&
-    getName(path, path.parentPath.node.openingElement.name) === parentComponent
-  ) {
-    let propValue: t.JSXAttribute['value'] | void;
-    path.node.openingElement.attributes =
-      path.node.openingElement.attributes.filter((attr) => {
-        if (t.isJSXAttribute(attr) && attr.name.name === propToMove) {
-          propValue = attr.value;
-          return false;
-        }
-        return true;
-      });
-
-    if (propValue) {
-      path.node.children.unshift(
-        t.jsxElement(
-          t.jsxOpeningElement(t.jsxIdentifier(newChildComponent), []),
-          t.jsxClosingElement(t.jsxIdentifier(newChildComponent)),
-          [t.isStringLiteral(propValue) ? t.jsxText(propValue.value) : propValue]
-        )
-      );
-      // TODO: handle dynamic collections. Need to wrap function child in <Collection> and move `items` prop down.
-    }
-  }
-}
-
-export interface MovePropToParentComponentOptions {
-  parentComponent: string,
-  childComponent: string,
-  propToMove: string
-}
-
-/**
- * Updates prop to be on parent component.
- *
- * Example:
- * - Tooltip: Remove `placement` and add to the parent `TooltipTrigger` instead.
- */
-function movePropToParentComponent(
-  path: NodePath<t.JSXElement>,
-  options: MovePropToParentComponentOptions
-) {
-  const {parentComponent, childComponent, propToMove} = options;
-
-  path.traverse({
-    JSXAttribute(attributePath) {
-      if (
-        t.isJSXElement(path.parentPath.node) &&
-        t.isJSXIdentifier(path.node.openingElement.name) &&
-        t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
-        attributePath.node.name.name === propToMove &&
-        getName(path, path.node.openingElement.name) === childComponent &&
-        getName(path, path.parentPath.node.openingElement.name) === parentComponent
-      ) {
-        path.parentPath.node.openingElement.attributes.push(
-          t.jsxAttribute(t.jsxIdentifier(propToMove), attributePath.node.value)
-        );
-        attributePath.remove();
-      }
-    }
-  });
-}
-
-export interface UpdateToNewComponentOptions {
-  newComponent: string
-}
-
-/**
- * Update to use a new component.
- *
- * Example:
- * - Flex: Update `Flex` to be a `div` and apply flex styles using the style macro.
- */
-function updateToNewComponent(
-  path: NodePath<t.JSXElement>,
-  options: UpdateToNewComponentOptions
-) {
-  const {newComponent} = options;
-
-  let localName = newComponent;
-  if (availableComponents.has(newComponent)) {
-    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-    localName = addComponentImport(program, newComponent);
-  }
-
-  path.node.openingElement.name = t.jsxIdentifier(localName);
-  if (path.node.closingElement) {
-    path.node.closingElement.name = t.jsxIdentifier(localName);
-  }
-}
-
-const conversions = {
-  'cm': 37.8,
-  'mm': 3.78,
-  'in': 96,
-  'pt': 1.33,
-  'pc': 16
-};
-
-export interface ConvertDimensionValueToPxOptions {
-  propToConvertValue: string
-}
-
-/**
- * Updates prop to use pixel value instead.
- * 
- * Example:
- * - ComboBox: Update `menuWidth` to a pixel value.
- */
-function convertDimensionValueToPx(
-  path: NodePath<t.JSXElement>,
-  options: ConvertDimensionValueToPxOptions
-) {
-  const {propToConvertValue} = options;
-
-  let attrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToConvertValue) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToConvertValue) {
-    if (t.isStringLiteral(attrPath.node.value)) {
-      try {
-        let value = convertDimension(attrPath.node.value.value, 'size');
-        if (value && typeof value === 'number') {
-          attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(value));
-        } else if (value && typeof value === 'string') {
-          // eslint-disable-next-line max-depth
-          if ((/%|vw|vh|auto|ex|ch|rem|vmin|vmax/).test(value)) {
-            addComment(attrPath.node, ' TODO(S2-upgrade): Unable to convert CSS unit to a pixel value');
-          } else if ((/cm|mm|in|pt|pc/).test(value)) {
-            let unit = value.replace(/\[|\]|\d+/g, '');
-            let conversion = conversions[unit as keyof typeof conversions];
-            value = Number(value.replace(/\[|\]|cm|mm|in|pt|pc/g, ''));
-            // eslint-disable-next-line max-depth
-            if (!isNaN(value)) {
-              let pixelValue = Math.round(conversion * value);
-              attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(pixelValue));
-            }
-          } else if ((/px/).test(value)) {
-            let pixelValue = Number(value.replace(/\[|\]|px/g, ''));
-            // eslint-disable-next-line max-depth
-            if (!isNaN(pixelValue)) {
-              attrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(pixelValue));
-            }
-          }
-        }
-      } catch (error) {
-        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propToConvertValue} could not be automatically updated due to error: ${error}`);
-      }
-    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
-      if (t.isIdentifier(attrPath.node.value.expression)) {
-        addComment(attrPath.node, ` TODO(S2-upgrade): Prop ${propToConvertValue} could not be automatically updated because ${attrPath.node.value.expression.name} could not be followed.`);
-      }
-    }
-  }
-}
-
-export interface UpdatePlacementToSingleValueProps {
-  propToUpdate: string,
-  /* If provided, updates the prop on the specified child component */
-  childComponent?: string
-}
-
-/**
- * Updates double placement values to a single value.
- * 
- * Example:
- * - TooltipTrigger: Update `placement="bottom left"` to `placement="bottom"`.
- */
-function updatePlacementToSingleValue(
-  path: NodePath<t.JSXElement>,
-  options: UpdatePlacementToSingleValueProps
-) {
-  const {propToUpdate, childComponent} = options;
-
-  const doublePlacementValues = new Set([
-    'bottom left',
-    'bottom right',
-    'bottom start',
-    'bottom end',
-    'top left',
-    'top right',
-    'top start',
-    'top end',
-    'left top',
-    'left bottom',
-    'start top',
-    'start bottom',
-    'right top',
-    'right bottom',
-    'end top',
-    'end bottom'
-  ]);
-
-  let elementPath = childComponent ? 
-    path.get('children').find(
-      (child) => t.isJSXElement(child.node) &&
-      t.isJSXIdentifier(child.node.openingElement.name) &&
-      getName(path, child.node.openingElement.name) === childComponent
-    ) as NodePath<t.JSXElement> : path;
-  let attrPath = elementPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === propToUpdate) as NodePath<t.JSXAttribute>;
-  if (attrPath && t.isJSXAttribute(attrPath.node) && attrPath.node.name.name === propToUpdate) {
-    if (t.isStringLiteral(attrPath.node.value) && doublePlacementValues.has(attrPath.node.value.value)) {
-      attrPath.replaceWith(t.jsxAttribute(t.jsxIdentifier(propToUpdate), t.stringLiteral(attrPath.node.value.value.split(' ')[0])));
-      return;
-    } else if (t.isJSXExpressionContainer(attrPath.node.value)) {
-      attrPath.traverse({
-        StringLiteral(stringPath) {
-          if (
-            t.isStringLiteral(stringPath.node) &&
-            doublePlacementValues.has(stringPath.node.value)
-          ) {
-            stringPath.replaceWith(t.stringLiteral(stringPath.node.value.split(' ')[0]));
-            return;
-          }
-        }
-      });
-    }
-  }
-}
-
-export interface RemoveComponentIfWithinParentOptions {
-  parentComponent: string
-}
-
-/**
- * Remove component if within a parent component.
- * 
- * Example:
- * - Divider: Remove `Divider` if used within a `Dialog`.
- */
-function removeComponentIfWithinParent(
-  path: NodePath<t.JSXElement>,
-  options: RemoveComponentIfWithinParentOptions
-) {
-  const {parentComponent} = options;
-  if (
-    t.isJSXElement(path.node) &&
-    t.isJSXElement(path.parentPath.node) &&
-    t.isJSXIdentifier(path.node.openingElement.name) &&
-    t.isJSXIdentifier(path.parentPath.node.openingElement.name) &&
-    getName(path, path.parentPath.node.openingElement.name) === parentComponent
-  ) {
-    path.remove();
-  }
-}
-
-function updateAvatarSize(
-  path: NodePath<t.JSXElement>
-) {
-  if (
-    t.isJSXElement(path.node) &&
-    t.isJSXIdentifier(path.node.openingElement.name) &&
-    getName(path, path.node.openingElement.name) === 'Avatar'
-  ) {
-    let sizeAttrPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'size') as NodePath<t.JSXAttribute>;
-    if (sizeAttrPath) {
-      let value = sizeAttrPath.node.value;
-      if (value?.type === 'StringLiteral') {
-        const avatarDimensions = {
-          'avatar-size-50': 16,
-          'avatar-size-75': 18,
-          'avatar-size-100': 20,
-          'avatar-size-200': 22,
-          'avatar-size-300': 26,
-          'avatar-size-400': 28,
-          'avatar-size-500': 32,
-          'avatar-size-600': 36,
-          'avatar-size-700': 40
-        };
-        let val = avatarDimensions[value.value as keyof typeof avatarDimensions];
-        if (val != null) {
-          sizeAttrPath.node.value = t.jsxExpressionContainer(t.numericLiteral(val));
-        }
-      }
-    }
-  }
-}
-
-/**
- * Handles the legacy `Link` API where an `a` tag or custom router component could be used within a `Link` component.
- * Removes the inner component and moves its attributes to the `Link` component.
- */
-function updateLegacyLink(
-  path: NodePath<t.JSXElement>
-) {
-  let missingOuterHref = t.isJSXElement(path.node) && !path.node.openingElement.attributes.some((attr) => t.isJSXAttribute(attr) && attr.name.name === 'href');
-  if (missingOuterHref) {
-    let innerLink = path.node.children.find((child) => t.isJSXElement(child) && t.isJSXIdentifier(child.openingElement.name));
-    if (innerLink && t.isJSXElement(innerLink)) {
-      let innerAttributes = innerLink.openingElement.attributes;
-      let outerAttributes = path.node.openingElement.attributes;
-      innerAttributes.forEach((attr) => {
-        outerAttributes.push(attr);
-      });
-
-      if (
-        t.isJSXIdentifier(innerLink.openingElement.name) &&
-        innerLink.openingElement.name.name !== 'a'
-      ) {
-        addComment(path.node, ' TODO(S2-upgrade): You may have been using a custom link component here. You\'ll need to update this manually.');
-      }
-      path.node.children = innerLink.children;
-    }
-  }
-}
-
-/**
- * Copies the columns prop from the TableHeader to the Row component.
- */
-function addColumnsPropToRow(
-  path: NodePath<t.JSXElement>
-) {
-  const tableHeaderPath = path.get('children').find((child) =>
-      t.isJSXElement(child.node) &&
-      t.isJSXIdentifier(child.node.openingElement.name) &&
-      getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
-    ) as NodePath<t.JSXElement> | undefined;
-
-  if (!tableHeaderPath) {
-    addComment(path.node, ' TODO(S2-upgrade): Could not find TableHeader within Table to retrieve columns prop.');
-    return;
-  }
-
-  const columnsProp = tableHeaderPath
-    .get('openingElement')
-    .get('attributes')
-    .find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'columns') as NodePath<t.JSXAttribute> | undefined;
-
-  if (columnsProp) {
-    path.traverse({
-      JSXElement(innerPath) {
-        if (
-          t.isJSXElement(innerPath.node) &&
-          t.isJSXIdentifier(innerPath.node.openingElement.name) &&
-          getName(innerPath as NodePath<t.JSXElement>, innerPath.node.openingElement.name) === 'Row'
-        ) {
-          let rowPath = innerPath as NodePath<t.JSXElement>;
-          rowPath.node.openingElement.attributes.push(columnsProp.node);
-
-          // If Row doesn't contain id prop, leave a comment for the user to check manually
-          let idProp = rowPath.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'id');
-          if (!idProp) {
-            addComment(rowPath.node, ' TODO(S2-upgrade): If the items do not have id properties, you\'ll need to add an id prop to the Row.');
-          }
-        }
-      }
-    });
-  }
-}
-
-/**
- * Updates the function signature of the Row component.
- */
-function updateRowFunctionArg(
-  path: NodePath<t.JSXElement>
-) {
-  // Find the function passed as a child
-  let functionChild = path.get('children').find(childPath => 
-    childPath.isJSXExpressionContainer() && 
-    childPath.get('expression').isArrowFunctionExpression()
-  );
-
-  let tablePath = path.findParent((p) =>
-    t.isJSXElement(p.node) &&
-    t.isJSXIdentifier(p.node.openingElement.name) &&
-    getName(path, p.node.openingElement.name) === 'TableView'
-  );
-
-  let tableHeaderPath = tablePath?.get('children').find((child) =>
-    t.isJSXElement(child.node) &&
-    t.isJSXIdentifier(child.node.openingElement.name) &&
-    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
-  ) as NodePath<t.JSXElement> | undefined;
-
-  function findColumnKeyProp(path: NodePath<t.JSXElement>) {
-    let columnKeyProp = 'id';
-    path.traverse({
-      JSXElement(columnPath) {
-        if (
-          t.isArrowFunctionExpression(columnPath.parentPath.node) &&
-          t.isJSXElement(columnPath.node) &&
-          t.isJSXIdentifier(columnPath.node.openingElement.name) &&
-          getName(columnPath as NodePath<t.JSXElement>, columnPath.node.openingElement.name) === 'Column'
-        ) {
-          let openingElement = columnPath.get('openingElement');
-          let keyPropPath = openingElement.get('attributes').find(attr => 
-            t.isJSXAttribute(attr.node) && 
-            (attr.node.name.name === 'key' || attr.node.name.name === 'id')
-          );
-          keyPropPath?.traverse({
-            Identifier(innerPath) {
-              if (
-                innerPath.node.name === 'column' &&
-                innerPath.parentPath.node.type === 'MemberExpression' &&
-                t.isIdentifier(innerPath.parentPath.node.property)
-              ) {
-                columnKeyProp = innerPath.parentPath.node.property.name;
-              }
-            }
-          });
-        }
-      }
-    });
-    return columnKeyProp || 'id';
-  }
-
-  let columnKey = findColumnKeyProp(tableHeaderPath as NodePath<t.JSXElement>);
-
-  if (functionChild && functionChild.isJSXExpressionContainer()) {
-    let arrowFuncPath = functionChild.get('expression');
-    if (arrowFuncPath.isArrowFunctionExpression()) {
-      let params = arrowFuncPath.node.params;
-      if (params.length === 1 && t.isIdentifier(params[0])) {
-        let paramName = params[0].name;
-
-        // Rename parameter to 'column'
-        params[0].name = 'column';
-
-        // Replace references to the old parameter name inside the function body
-        arrowFuncPath.get('body').traverse({
-          Identifier(innerPath) {
-            if (
-              innerPath.node.name === paramName &&
-              // Ensure we're not replacing the parameter declaration
-              innerPath.node !== params[0]
-            ) {
-              // Replace with column key
-              innerPath.replaceWith(
-                t.memberExpression(
-                  t.identifier('column'),
-                  t.identifier(columnKey ?? 'id')
-                )
-              );
-            }
-          }
-        });
-      }
-    }
-  }
-}
-
-/**
- * Updates the key prop to id. Keeps the key prop if it's used in an array.map function.
- */
-function updateKeyToId(
-  path: NodePath<t.JSXElement>
-) {
-  let attributes = path.node.openingElement.attributes;
-  let keyProp = attributes.find((attr) => t.isJSXAttribute(attr) && attr.name.name === 'key');
-  if (
-    keyProp &&
-    t.isJSXAttribute(keyProp)
-  ) {
-    // Update key prop to be id
-    keyProp.name = t.jsxIdentifier('id');
-  }
-
-  if (
-    t.isArrowFunctionExpression(path.parentPath.node) &&
-    path.parentPath.parentPath &&
-    t.isCallExpression(path.parentPath.parentPath.node) &&
-    path.parentPath.parentPath.node.callee.type === 'MemberExpression' &&
-    path.parentPath.parentPath.node.callee.property.type === 'Identifier' &&
-    path.parentPath.parentPath.node.callee.property.name === 'map'
-  ) {
-    // If Array.map is used, keep the key prop
-    if (
-      keyProp &&
-      t.isJSXAttribute(keyProp)
-    ) {
-      let newKeyProp = t.jsxAttribute(t.jsxIdentifier('key'), keyProp.value);
-      attributes.push(newKeyProp);
-    }
-  }
-}
-
-export function commentIfNestedColumns(
-  path: NodePath<t.JSXElement>
-) {
-  const headerPath = path.get('children').find((child) =>
-    t.isJSXElement(child.node) &&
-    t.isJSXIdentifier(child.node.openingElement.name) &&
-    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
-  ) as NodePath<t.JSXElement> | undefined;
-  const columns = headerPath?.get('children') || [];
-
-  let hasNestedColumns = false;
-
-  columns.forEach(column => {
-    let columnChildren = column.get('children');
-    if (
-        columnChildren.find(child => 
-          t.isJSXElement(child.node) &&
-          t.isJSXIdentifier(child.node.openingElement.name) &&
-          getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
-      )   
-    ) {
-      hasNestedColumns = true;
-    }
-  });
-
-  if (hasNestedColumns) {
-    addComment(path.node, ' TODO(S2-upgrade): Nested Column components are not supported yet.');
-  }
-}
-
-/**
- * Updates DialogTrigger and DialogContainer to the new API.
- *
- * Example:
- * - When `type="popover"`, replaces Dialog with `<Popover>`.
- * - When `type="fullscreen"`, replaces Dialog with `<FullscreenDialog>`.
- * - When `type="fullscreenTakeover"`, replaces Dialog with `<FullscreenDialog variant="fullscreenTakeover">`.
- */
-function updateDialogChild(
-  path: NodePath<t.JSXElement>
-) {
-  let typePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'type') as NodePath<t.JSXAttribute> | undefined;
-  let type = typePath?.node.value?.type === 'StringLiteral' ? typePath.node.value?.value : 'modal';
-  let newComponent = 'Dialog';
-  let props: t.JSXAttribute[] = [];
-  if (type === 'popover') {
-    newComponent = 'Popover';
-  } else if (type === 'fullscreen' || type === 'fullscreenTakeover') {
-    newComponent = 'FullscreenDialog';
-    if (type === 'fullscreenTakeover') {
-      props.push(t.jsxAttribute(t.jsxIdentifier('variant'), t.stringLiteral(type)));
-    }
-  }
-
-  for (let prop of ['isDismissible', 'mobileType', 'hideArrow', 'placement', 'shouldFlip', 'isKeyboardDismissDisabled', 'containerPadding', 'offset', 'crossOffset']) {
-    let attr = path.get('openingElement').get('attributes').find(attr => attr.isJSXAttribute() && attr.node.name.name === prop) as NodePath<t.JSXAttribute> | undefined;
-    if (attr) {
-      props.push(attr.node);
-      attr.remove();
-    }
-  }
-
-  typePath?.remove();
-
-  let localName = newComponent;
-  if (newComponent !== 'Dialog' && availableComponents.has(newComponent)) {
-    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-    localName = addComponentImport(program, newComponent);
-  }
-
-  path.traverse({
-    JSXElement(dialog) {
-      if (!t.isJSXIdentifier(dialog.node.openingElement.name) || getName(dialog, dialog.node.openingElement.name) !== 'Dialog') {
-        return;
-      }
-
-      dialog.node.openingElement.name = t.jsxIdentifier(localName);
-      if (dialog.node.closingElement) {
-        dialog.node.closingElement.name = t.jsxIdentifier(localName);
-      }
-
-      dialog.node.openingElement.attributes.push(...props);
-    }
-  });
-}
-
-function updateActionGroup(
-  path: NodePath<t.JSXElement>
-) {
-  let selectionModePath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'selectionMode') as NodePath<t.JSXAttribute> | undefined;
-  let selectionMode = t.isStringLiteral(selectionModePath?.node.value) ? selectionModePath.node.value.value : 'none';
-  let newComponent, childComponent;
-  if (selectionMode === 'none') {
-    newComponent = 'ActionButtonGroup';
-    childComponent = 'ActionButton';
-    selectionModePath?.remove();
-  } else {
-    newComponent = 'ToggleButtonGroup';
-    childComponent = 'ToggleButton';
-  }
-
-  let localName = newComponent;
-  if (availableComponents.has(newComponent)) {
-    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-    localName = addComponentImport(program, newComponent);
-  }
-
-  let localChildName = childComponent;
-  if (availableComponents.has(childComponent)) {
-    let program = path.findParent((p) => t.isProgram(p.node)) as NodePath<t.Program>;
-    localChildName = addComponentImport(program, childComponent);
-  }
-
-
-  // Convert dynamic collection to an array.map.
-  let items = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'items') as NodePath<t.JSXAttribute> | undefined;
-  let itemArg: t.Identifier | undefined;
-  if (items && t.isJSXExpressionContainer(items.node.value) && t.isExpression(items.node.value.expression)) {
-    let child = path.get('children').find(c => c.isJSXExpressionContainer());
-    if (child && child.isJSXExpressionContainer() && t.isFunction(child.node.expression)) {
-      let arg = child.node.expression.params[0];
-      if (t.isIdentifier(arg)) {
-        itemArg = arg;
-      }
-
-      child.replaceWith(
-        t.jsxExpressionContainer(
-          t.callExpression(
-            t.memberExpression(
-              items.node.value.expression,
-              t.identifier('map')
-            ),
-            [child.node.expression]
-          )
-        )
-      );
-    }
-  }
-  items?.remove();
-
-  let onAction = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'onAction') as NodePath<t.JSXAttribute> | undefined;
-
-  // Pull disabledKeys prop out into a variable, converted to a Set.
-  // Then we can check it in the isDisabled prop of each item.
-  let disabledKeysPath = path.get('openingElement').get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'disabledKeys') as NodePath<t.JSXAttribute> | undefined;
-  let disabledKeys: t.Identifier | undefined;
-  if (disabledKeysPath && t.isJSXExpressionContainer(disabledKeysPath.node.value) && t.isExpression(disabledKeysPath.node.value.expression)) {
-    disabledKeys = path.scope.generateUidIdentifier('disabledKeys');
-    path.scope.push({
-      id: disabledKeys,
-      init: t.newExpression(t.identifier('Set'), [disabledKeysPath.node.value.expression]),
-      kind: 'let'
-    });
-    disabledKeysPath.remove();
-  }
-
-  path.traverse({
-    JSXElement(child) {
-      if (t.isJSXIdentifier(child.node.openingElement.name) && child.node.openingElement.name.name === 'Item') {
-        // Replace Item with ActionButton or ToggleButton.
-        let childNode = t.cloneNode(child.node);
-        childNode.openingElement.name = t.jsxIdentifier(localChildName);
-        if (childNode.closingElement) {
-          childNode.closingElement.name = t.jsxIdentifier(localChildName);
-        }
-
-        // If there is no key prop and we are using dynamic collections, add a default computed from item.key ?? item.id.
-        let key = childNode.openingElement.attributes.find(attr => t.isJSXAttribute(attr) && attr.name.name === 'key') as t.JSXAttribute | undefined;
-        if (!key && itemArg) {
-          let id = t.jsxExpressionContainer(
-            t.logicalExpression(
-              '??',
-              t.memberExpression(itemArg, t.identifier('key')),
-              t.memberExpression(itemArg, t.identifier('id'))
-            )
-          );
-
-          key = t.jsxAttribute(
-            t.jsxIdentifier('key'),
-            id
-          );
-
-          childNode.openingElement.attributes.push(key);
-        }
-
-        // If this is a ToggleButtonGroup, add an id prop in addition to key when needed.
-        if (key && newComponent === 'ToggleButtonGroup') {
-          // If we are in an array.map we need both key and id. Otherwise, we only need id.
-          if (itemArg) {
-            childNode.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('id'), key.value));
-          } else {
-            key.name.name = 'id';
-          }
-        }
-
-        let keyValue: t.Expression | undefined = undefined;
-        if (key && t.isJSXExpressionContainer(key.value) && t.isExpression(key.value.expression)) {
-          keyValue = key.value.expression;
-        } else if (key && t.isStringLiteral(key.value)) {
-          keyValue = key.value;
-        }
-
-        // Add an onPress to each item that calls the previous onAction, passing in the key.
-        if (onAction && t.isJSXExpressionContainer(onAction.node.value) && t.isExpression(onAction.node.value.expression)) {
-          childNode.openingElement.attributes.push(
-            t.jsxAttribute(
-              t.jsxIdentifier('onPress'),
-              t.jsxExpressionContainer(
-                keyValue 
-                  ? t.arrowFunctionExpression([], t.callExpression(onAction.node.value.expression, [keyValue]))
-                  : onAction.node.value.expression
-              )
-            )
-          );
-        }
-
-        // Add an isDisabled prop to each item, testing whether it is in disabledKeys.
-        if (disabledKeys && keyValue) {
-          childNode.openingElement.attributes.push(
-            t.jsxAttribute(
-              t.jsxIdentifier('isDisabled'),
-              t.jsxExpressionContainer(
-                t.callExpression(
-                  t.memberExpression(
-                    disabledKeys,
-                    t.identifier('has')
-                  ),
-                  [keyValue]
-                )
-              )
-            )
-          );
-        }
-
-        child.replaceWith(childNode);
-      }
-    }
-  });
-
-  onAction?.remove();
-
-  path.node.openingElement.name = t.jsxIdentifier(localName);
-  if (path.node.closingElement) {
-    path.node.closingElement.name = t.jsxIdentifier(localName);
-  }
-}
-
-/**
- * Adds isRowHeader to the first Column in a table if there isn't already a row header.
- * @param path 
- */
-function addRowHeader(
-  path: NodePath<t.JSXElement>
-) {
-  let tableHeaderPath = path.get('children').find((child) =>
-    t.isJSXElement(child.node) &&
-    t.isJSXIdentifier(child.node.openingElement.name) &&
-    getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'TableHeader'
-  ) as NodePath<t.JSXElement> | undefined;
-
-
-  // Check if isRowHeader is already set on a Column
-  let hasRowHeader = false;
-  tableHeaderPath?.get('children').forEach((child) => {
-    if (
-      t.isJSXElement(child.node) &&
-      t.isJSXIdentifier(child.node.openingElement.name) &&
-      getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
-    ) {
-      let isRowHeaderProp = (child.get('openingElement') as NodePath).get('attributes').find((attr) => t.isJSXAttribute(attr.node) && attr.node.name.name === 'isRowHeader') as NodePath<t.JSXAttribute> | undefined;
-      if (isRowHeaderProp) {
-        hasRowHeader = true;
-      }
-    }
-  });
-
-  // If there isn't already a row header, add one to the first Column if possible
-  if (!hasRowHeader) {
-    tableHeaderPath?.get('children').forEach((child) => {
-      // Add to first Column if static
-      if (
-        !hasRowHeader &&
-        t.isJSXElement(child.node) &&
-        t.isJSXIdentifier(child.node.openingElement.name) &&
-        getName(child as NodePath<t.JSXElement>, child.node.openingElement.name) === 'Column'
-      ) {
-        child.node.openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier('isRowHeader'), t.jsxExpressionContainer(t.booleanLiteral(true))));
-        hasRowHeader = true;
-      }
-
-      // If render function is used, leave a comment to update manually
-      if (
-        t.isJSXExpressionContainer(child.node) &&
-        t.isArrowFunctionExpression(child.node.expression)
-      ) {
-        addComment(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
-      }
-
-      // If array.map is used, leave a comment to update manually
-      if (
-        t.isJSXExpressionContainer(child.node) &&
-        t.isCallExpression(child.node.expression) &&
-        t.isMemberExpression(child.node.expression.callee) &&
-        t.isIdentifier(child.node.expression.callee.property) &&
-        child.node.expression.callee.property.name === 'map'
-      ) {
-        addComment(child.node, ' TODO(S2-upgrade): You\'ll need to add isRowHeader to one of the columns manually.');
-      }
-    });
-  }
-}
-
-export const functionMap = {
-  updatePropNameAndValue,
-  updatePropValueAndAddNewProp,
-  updatePropName,
-  removeProp,
-  commentOutProp,
-  addCommentToElement,
-  updateComponentIfPropPresent,
-  moveRenderPropsToChild,
-  updateComponentWithinCollection,
-  commentIfParentCollectionNotDetected,
-  updateTabs,
-  movePropToNewChildComponent,
-  movePropToParentComponent,
-  updateToNewComponent,
-  convertDimensionValueToPx,
-  updatePlacementToSingleValue,
-  removeComponentIfWithinParent,
-  updateAvatarSize,
-  updateLegacyLink,
-  addColumnsPropToRow,
-  updateRowFunctionArg,
-  updateDialogChild,
-  updateActionGroup,
-  updateKeyToId,
-  commentIfNestedColumns,
-  addRowHeader
-};

From e8bf328fac3291ad566a63c1a1378c2f6c8defa2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 7 May 2025 16:47:14 -0700
Subject: [PATCH 23/24] fix(s2): Update dialog sizes (#8202)

---
 packages/@react-spectrum/s2/src/Modal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
index dc5a5af0812..67913f99699 100644
--- a/packages/@react-spectrum/s2/src/Modal.tsx
+++ b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -83,9 +83,9 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
           width: {
             size: {
               // Copied from designs, not sure if correct.
-              S: 336,
-              M: 416,
-              L: 576,
+              S: 400,
+              M: 480,
+              L: 640,
               fullscreen: 'calc(100% - 40px)',
               fullscreenTakeover: 'full'
             }

From 2a2d5713b9079ef4ad2795ce5727bd9813455634 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Wed, 7 May 2025 21:07:53 -0500
Subject: [PATCH 24/24] fix(usePress): add global touch-action style for
 pressable elements (#8200)

* add global touch-action style for pressable elements

* remove :where()

* add comment back

* add story to test

* check viewport meta tag

* update story

* move constant

* const for data attribute

* remove meta viewport check
---
 .../@react-aria/interactions/src/usePress.ts  | 35 ++++++++++++------
 .../stories/Button.stories.tsx                | 37 +++++++++++++++++++
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/packages/@react-aria/interactions/src/usePress.ts b/packages/@react-aria/interactions/src/usePress.ts
index e48240a10c3..f4caf99bdfd 100644
--- a/packages/@react-aria/interactions/src/usePress.ts
+++ b/packages/@react-aria/interactions/src/usePress.ts
@@ -157,6 +157,8 @@ class PressEvent implements IPressEvent {
 }
 
 const LINK_CLICKED = Symbol('linkClicked');
+const STYLE_ID = 'react-aria-pressable-style';
+const PRESSABLE_ATTRIBUTE = 'data-react-aria-pressable';
 
 /**
  * Handles press interactions across mouse, touch, keyboard, and screen readers.
@@ -815,17 +817,28 @@ export function usePress(props: PressHookProps): PressResult {
 
   // Avoid onClick delay for double tap to zoom by default.
   useEffect(() => {
-    let element = domRef?.current;
-    if (element && (element instanceof getOwnerWindow(element).Element)) {
-      // Only apply touch-action if not already set by another CSS rule.
-      let style = getOwnerWindow(element).getComputedStyle(element);
-      if (style.touchAction === 'auto') {
-        // touchAction: 'manipulation' is supposed to be equivalent, but in 
-        // Safari it causes onPointerCancel not to fire on scroll.
-        // https://bugs.webkit.org/show_bug.cgi?id=240917
-        (element as HTMLElement).style.touchAction = 'pan-x pan-y pinch-zoom';
-      }
+    if (!domRef || process.env.NODE_ENV === 'test') {
+      return;
+    }
+
+    const ownerDocument = getOwnerDocument(domRef.current);
+    if (!ownerDocument || !ownerDocument.head || ownerDocument.getElementById(STYLE_ID)) {
+      return;
     }
+
+    const style = ownerDocument.createElement('style');
+    style.id = STYLE_ID;
+    // touchAction: 'manipulation' is supposed to be equivalent, but in
+    // Safari it causes onPointerCancel not to fire on scroll.
+    // https://bugs.webkit.org/show_bug.cgi?id=240917
+    style.textContent = `
+@layer {
+  [${PRESSABLE_ATTRIBUTE}] {
+    touch-action: pan-x pan-y pinch-zoom;
+  }
+}
+    `.trim();
+    ownerDocument.head.prepend(style);
   }, [domRef]);
 
   // Remove user-select: none in case component unmounts immediately after pressStart
@@ -844,7 +857,7 @@ export function usePress(props: PressHookProps): PressResult {
 
   return {
     isPressed: isPressedProp || isPressed,
-    pressProps: mergeProps(domProps, pressProps)
+    pressProps: mergeProps(domProps, pressProps, {[PRESSABLE_ATTRIBUTE]: true})
   };
 }
 
diff --git a/packages/react-aria-components/stories/Button.stories.tsx b/packages/react-aria-components/stories/Button.stories.tsx
index bd69fa936d1..15b6642edce 100644
--- a/packages/react-aria-components/stories/Button.stories.tsx
+++ b/packages/react-aria-components/stories/Button.stories.tsx
@@ -119,3 +119,40 @@ function RippleButton(props) {
     </Button>
   );
 }
+
+function ButtonPerformanceExample() {
+  const [count, setCount] = useState(0);
+  const [showButtons, setShowButtons] = useState(false);
+
+  const handlePress = () => {
+    if (!showButtons) {
+      setShowButtons(true);
+    } else {
+      setCount(count + 1);
+    }
+  };
+
+  return (
+    <div>
+      <Button style={{marginTop: 24, marginBottom: 16}} onPress={handlePress}>
+        {showButtons ? 'Re-render' : 'Render'}
+      </Button>
+      {showButtons && (
+        <div style={{display: 'flex', gap: 2, flexWrap: 'wrap'}} key={count}>
+          {new Array(20000).fill(0).map((_, i) => (
+            <Button key={i}>Press me</Button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const ButtonPerformance = {
+  render: (args) => <ButtonPerformanceExample {...args} />,
+  parameters: {
+    description: {
+      data: 'When usePress is used on the page, there should be a <style> tag placed in the head of the document that applies touch-action: pan-x pan-y pinch-zoom to the [data-react-aria-pressable] elements.'
+    }
+  }
+};