From 3bbea20b91c172f4ab64c319a6f8be0c7de789c0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:04:04 +0200
Subject: [PATCH 1/9] Revert "Merge pull request #23680 from
 storybookjs/charles-icons-updates"

This reverts commit 3627472cc2a49ebf2814b280f39840aeaea82caa, reversing
changes made to 998926f115259ffe4e9afe03b25daf34556e4756.
---
 .../a11y/src/components/VisionSimulator.tsx   |  5 +--
 .../src/containers/BackgroundSelector.tsx     |  5 +--
 .../src/containers/GridSelector.tsx           |  5 +--
 .../src/components/Interaction.tsx            |  5 +--
 .../interactions/src/components/Subnav.tsx    | 12 +++---
 code/addons/measure/src/Tool.tsx              |  5 +--
 code/addons/outline/src/OutlineSelector.tsx   |  5 +--
 code/addons/themes/src/theme-switcher.tsx     |  6 +--
 code/addons/viewport/src/Tool.tsx             |  8 ++--
 code/ui/blocks/src/blocks/mdx.tsx             |  5 +--
 .../src/components/ArgsTable/ArgsTable.tsx    |  6 +--
 code/ui/blocks/src/components/Toolbar.tsx     |  9 ++---
 code/ui/blocks/src/controls/Object.tsx        |  3 +-
 .../ui/blocks/src/controls/options/Select.tsx | 31 ++++++++-------
 code/ui/components/package.json               |  2 +-
 code/ui/components/src/new/Icon/Icon.mdx      | 38 -------------------
 .../notifications/NotificationItem.tsx        |  3 +-
 .../src/components/panel/panel.stories.tsx    |  5 +--
 .../ui/manager/src/components/panel/panel.tsx |  7 ++--
 .../src/components/preview/toolbar.tsx        |  5 +--
 .../src/components/preview/tools/addons.tsx   |  5 +--
 .../src/components/preview/tools/copy.tsx     |  5 +--
 .../src/components/preview/tools/eject.tsx    |  5 +--
 .../src/components/preview/tools/menu.tsx     |  5 +--
 .../src/components/preview/tools/remount.tsx  |  5 +--
 .../src/components/preview/tools/zoom.tsx     |  9 ++---
 .../manager/src/components/sidebar/Menu.tsx   | 11 +++---
 .../src/components/sidebar/RefBlocks.tsx      |  9 ++---
 .../src/components/sidebar/RefIndicator.tsx   |  7 ++--
 .../manager/src/components/sidebar/Tree.tsx   |  3 +-
 code/ui/manager/src/containers/menu.tsx       | 11 +++---
 code/ui/manager/src/settings/index.tsx        |  5 +--
 code/ui/manager/src/settings/whats_new.tsx    |  9 ++---
 docs/addons/writing-addons.md                 |  5 +--
 ...addon-consume-and-update-globaltype.js.mdx |  5 +--
 .../storybook-addon-tool-initial-setup.ts.mdx |  5 +--
 .../storybook-addon-toolbar-example.js.mdx    |  5 +--
 ...don-toolkit-toolbar-example.toolbar.ts.mdx |  5 +--
 .../storybook-addons-api-getchannel.js.mdx    |  5 +--
 .../storybook-addons-api-useaddonstate.js.mdx |  4 +-
 .../common/storybook-addons-api-useapi.js.mdx |  6 +--
 41 files changed, 114 insertions(+), 185 deletions(-)
 delete mode 100644 code/ui/components/src/new/Icon/Icon.mdx

diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx
index b4375689736..b66f8eef297 100644
--- a/code/addons/a11y/src/components/VisionSimulator.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.tsx
@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { Filters } from './ColorFilters';
 
@@ -145,7 +144,7 @@ export const VisionSimulator = () => {
         onDoubleClick={() => setFilter(null)}
       >
         <IconButton key="filter" active={!!filter} title="Vision simulator">
-          <Icon.Accessibility />
+          <Icons icon="accessibility" />
         </IconButton>
       </WithTooltip>
       <Hidden>
diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
index d44d7f58ab6..078a2752a5e 100644
--- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -4,8 +4,7 @@ import memoize from 'memoizerific';
 
 import { useParameter, useGlobals } from '@storybook/manager-api';
 import { logger } from '@storybook/client-logger';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
@@ -141,7 +140,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
           title="Change the background of the preview"
           active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
         >
-          <Icon.Photo />
+          <Icons icon="photo" />
         </IconButton>
       </WithTooltip>
     </Fragment>
diff --git a/code/addons/backgrounds/src/containers/GridSelector.tsx b/code/addons/backgrounds/src/containers/GridSelector.tsx
index b860209ae0a..80d6477884b 100644
--- a/code/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/code/addons/backgrounds/src/containers/GridSelector.tsx
@@ -2,8 +2,7 @@ import type { FC } from 'react';
 import React, { memo } from 'react';
 
 import { useGlobals, useParameter } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
@@ -31,7 +30,7 @@ export const GridSelector: FC = memo(function GridSelector() {
         })
       }
     >
-      <Icon.Grid />
+      <Icons icon="grid" />
     </IconButton>
   );
 });
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
index c0bf532d907..bacaea0fe35 100644
--- a/code/addons/interactions/src/components/Interaction.tsx
+++ b/code/addons/interactions/src/components/Interaction.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -175,7 +174,7 @@ export const Interaction = ({
               tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
             >
               <StyledIconButton containsIcon onClick={toggleCollapsed}>
-                <Icon.ListUnordered />
+                <Icons icon="listunordered" />
               </StyledIconButton>
             </WithTooltip>
           )}
diff --git a/code/addons/interactions/src/components/Subnav.tsx b/code/addons/interactions/src/components/Subnav.tsx
index de78bf2c94b..3d2e5c41d1a 100644
--- a/code/addons/interactions/src/components/Subnav.tsx
+++ b/code/addons/interactions/src/components/Subnav.tsx
@@ -3,13 +3,13 @@ import React from 'react';
 import {
   Button,
   IconButton,
+  Icons,
   Separator,
   P,
   TooltipNote,
   WithTooltip,
   Bar,
 } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
 import type { Call, ControlStates } from '@storybook/instrumenter';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
@@ -135,7 +135,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.start}
                 disabled={!controlStates.start}
               >
-                <Icon.Rewind />
+                <Icons icon="rewind" />
               </RewindButton>
             </WithTooltip>
 
@@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.back}
                 disabled={!controlStates.back}
               >
-                <Icon.PlayBack />
+                <Icons icon="playback" />
               </StyledIconButton>
             </WithTooltip>
 
@@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.next}
                 disabled={!controlStates.next}
               >
-                <Icon.PlayNext />
+                <Icons icon="playnext" />
               </StyledIconButton>
             </WithTooltip>
 
@@ -168,13 +168,13 @@ export const Subnav: React.FC<SubnavProps> = ({
                 onClick={controls.end}
                 disabled={!controlStates.end}
               >
-                <Icon.FastForward />
+                <Icons icon="fastforward" />
               </StyledIconButton>
             </WithTooltip>
 
             <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
               <RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}>
-                <Icon.Sync />
+                <Icons icon="sync" />
               </RerunButton>
             </WithTooltip>
           </Group>
diff --git a/code/addons/measure/src/Tool.tsx b/code/addons/measure/src/Tool.tsx
index bb78447f852..2e68078aa06 100644
--- a/code/addons/measure/src/Tool.tsx
+++ b/code/addons/measure/src/Tool.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { TOOL_ID, ADDON_ID } from './constants';
 
 export const Tool = () => {
@@ -34,7 +33,7 @@ export const Tool = () => {
       title="Enable measure"
       onClick={toggleMeasure}
     >
-      <Icon.Ruler />
+      <Icons icon="ruler" />
     </IconButton>
   );
 };
diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx
index 63c826044ef..93bdf321df0 100644
--- a/code/addons/outline/src/OutlineSelector.tsx
+++ b/code/addons/outline/src/OutlineSelector.tsx
@@ -1,7 +1,6 @@
 import React, { memo, useCallback, useEffect } from 'react';
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
 export const OutlineSelector = memo(function OutlineSelector() {
@@ -35,7 +34,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
       title="Apply outlines to the preview"
       onClick={toggleOutline}
     >
-      <Icon.Outline />
+      <Icons icon="outline" />
     </IconButton>
   );
 });
diff --git a/code/addons/themes/src/theme-switcher.tsx b/code/addons/themes/src/theme-switcher.tsx
index b950f780c1d..3658a3ef78c 100644
--- a/code/addons/themes/src/theme-switcher.tsx
+++ b/code/addons/themes/src/theme-switcher.tsx
@@ -1,8 +1,8 @@
 import React, { Fragment, useMemo } from 'react';
 import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
 import type { ThemeAddonState, ThemeParameters } from './constants';
 import {
   PARAM_KEY,
@@ -74,7 +74,7 @@ export const ThemeSwitcher = () => {
         }}
       >
         <IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
-          <Icon.PaintBrush />
+          <Icons icon="paintbrush" />
           {label && <IconButtonLabel>{label}</IconButtonLabel>}
         </IconButton>
       </WithTooltip>
diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
index e62ce3543eb..df65988e509 100644
--- a/code/addons/viewport/src/Tool.tsx
+++ b/code/addons/viewport/src/Tool.tsx
@@ -4,8 +4,8 @@ import memoize from 'memoizerific';
 
 import { styled, Global, type Theme, withTheme } from '@storybook/theming';
 
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+
 import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
 import { registerShortcuts } from './shortcuts';
 import { PARAM_KEY, ADDON_ID } from './constants';
@@ -188,7 +188,7 @@ export const ViewportTool: FC = memo(
               setState({ ...state, selected: responsiveViewport.id });
             }}
           >
-            <Icon.Grow />
+            <Icons icon="grow" />
             {styles ? (
               <IconButtonLabel>
                 {isRotated ? `${item.title} (L)` : `${item.title} (P)`}
@@ -234,7 +234,7 @@ export const ViewportTool: FC = memo(
                 setState({ ...state, isRotated: !isRotated });
               }}
             >
-              <Icon.Transfer />
+              <Icons icon="transfer" />
             </IconButton>
             <ActiveViewportLabel title="Viewport height">
               {styles.height.replace('px', '')}
diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx
index eae97528ecb..3c1c69f87fc 100644
--- a/code/ui/blocks/src/blocks/mdx.tsx
+++ b/code/ui/blocks/src/blocks/mdx.tsx
@@ -1,8 +1,7 @@
 import type { FC, MouseEvent, PropsWithChildren, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { Code, components, nameSpaceClassNames } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Code, components, Icons, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
 import { Source } from '../components';
@@ -191,7 +190,7 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
           }
         }}
       >
-        <Icon.Link />
+        <Icons icon="link" />
       </OcticonAnchor>
       {children}
     </OcticonHeader>
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
index a528c292e25..74c849f9597 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -5,8 +5,8 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
-import { IconButton, ResetWrapper } from '@storybook/components';
-import { Icon, Link } from '@storybook/components/experimental';
+import { IconButton, Icons, ResetWrapper } from '@storybook/components';
+import { Link } from '@storybook/components/experimental';
 
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
@@ -380,7 +380,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
                   Control{' '}
                   {!isLoading && resetArgs && (
                     <StyledIconButton onClick={() => resetArgs()} title="Reset controls">
-                      <Icon.Undo aria-hidden />
+                      <Icons icon="undo" aria-hidden />
                     </StyledIconButton>
                   )}
                 </ControlHeadingWrapper>
diff --git a/code/ui/blocks/src/components/Toolbar.tsx b/code/ui/blocks/src/components/Toolbar.tsx
index b454dce0478..392cd7a8a76 100644
--- a/code/ui/blocks/src/components/Toolbar.tsx
+++ b/code/ui/blocks/src/components/Toolbar.tsx
@@ -1,8 +1,7 @@
 import type { FC, MouseEvent } from 'react';
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
-import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { FlexBar, Icons, IconButton, IconButtonSkeleton } from '@storybook/components';
 
 interface ZoomProps {
   zoom: (val: number) => void;
@@ -34,7 +33,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Zoom in"
     >
-      <Icon.Zoom />
+      <Icons icon="zoom" />
     </IconButton>
     <IconButton
       key="zoomout"
@@ -44,7 +43,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Zoom out"
     >
-      <Icon.ZoomOut />
+      <Icons icon="zoomout" />
     </IconButton>
     <IconButton
       key="zoomreset"
@@ -54,7 +53,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
       }}
       title="Reset zoom"
     >
-      <Icon.ZoomReset />
+      <Icons icon="zoomreset" />
     </IconButton>
   </>
 );
diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
index 8cd8c8bb7be..11c51f8f639 100644
--- a/code/ui/blocks/src/controls/Object.tsx
+++ b/code/ui/blocks/src/controls/Object.tsx
@@ -4,7 +4,6 @@ import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { styled, useTheme, type Theme } from '@storybook/theming';
 import { Form, Icons, type IconsProps, IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -295,7 +294,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
             setShowRaw((v) => !v);
           }}
         >
-          {showRaw ? <Icon.EyeClose /> : <Icon.Eye />}
+          <Icons icon={showRaw ? 'eyeclose' : 'eye'} />
           <span>RAW</span>
         </RawButton>
       )}
diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx
index 43c47cfc340..f033c131bd7 100644
--- a/code/ui/blocks/src/controls/options/Select.tsx
+++ b/code/ui/blocks/src/controls/options/Select.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import type { CSSObject } from '@storybook/theming';
 import { logger } from '@storybook/client-logger';
-import { Icon } from '@storybook/components/experimental';
+import { Icons } from '@storybook/components';
+
 import type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';
 
 import { selectedKey, selectedKeys, selectedValues } from './helpers';
@@ -72,17 +73,21 @@ const SelectWrapper = styled.span(({ theme }) => ({
   position: 'relative',
   verticalAlign: 'top',
   width: '100%',
-}));
 
-const SelectChevronDown = styled.div(({ theme }) => ({
-  position: 'absolute',
-  zIndex: 1,
-  pointerEvents: 'none',
-  height: '12px',
-  marginTop: '-6px',
-  right: '12px',
-  top: '50%',
-  color: theme.textMutedColor,
+  svg: {
+    position: 'absolute',
+    zIndex: 1,
+    pointerEvents: 'none',
+    height: '12px',
+    marginTop: '-6px',
+    right: '12px',
+    top: '50%',
+    fill: theme.textMutedColor,
+
+    path: {
+      fill: theme.textMutedColor,
+    },
+  },
 }));
 
 type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
@@ -99,9 +104,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
 
   return (
     <SelectWrapper>
-      <SelectChevronDown>
-        <Icon.ChevronDown />
-      </SelectChevronDown>
+      <Icons icon="arrowdown" />
       <OptionsSelect id={controlId} value={selection} onChange={handleChange}>
         <option key="no-selection" disabled>
           {NO_SELECTION}
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 65b38724e68..cf0ec5206a6 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -73,7 +73,6 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.1.6",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "memoizerific": "^1.11.3",
@@ -82,6 +81,7 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.6.0",
+    "@storybook/icons": "^1.1.6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",
diff --git a/code/ui/components/src/new/Icon/Icon.mdx b/code/ui/components/src/new/Icon/Icon.mdx
deleted file mode 100644
index 2b2488a21e4..00000000000
--- a/code/ui/components/src/new/Icon/Icon.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { IconGallery, IconItem } from '@storybook/blocks';
-import { Icon } from './Icon';
-
-<style>
-  {`
-    .spacer {
-      height: 24px
-    }
-  `}
-</style>
-
-# Icon
-
-An Icon is a piece of visual element, but we must ensure its accessibility while using it. It can have 2 purposes:
-
-- **Decorative only** — for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon.FaceHappy aria-hidden />`)
-- **Non-decorative** — it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon.Print aria-label="Print this document" />`)
-
-<div className="spacer" />
-
-{Icon.iconList.map((group) => (
-
-<div key={group.name}>
-
-<h2 style={{ marginTop: 32, marginBottom: 24 }}>{group.name}</h2>
-
-  <IconGallery>
-    {group.icons.map((item) => {
-      const MyIcon = Icon[item]
-      return (
-      <IconItem key={item} name={item}>
-        <MyIcon />
-      </IconItem>
-    )})}
-  </IconGallery>
-</div>
-
-))}
\ No newline at end of file
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index ddee4eb9717..b2c90a6a040 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -4,7 +4,6 @@ import { type State } from '@storybook/manager-api';
 import { Link } from '@storybook/router';
 import { styled, useTheme } from '@storybook/theming';
 import { Icons, IconButton, type IconsProps } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
 import { transparentize } from 'polished';
 
 const Notification = styled.div(({ theme }) => ({
@@ -116,7 +115,7 @@ const DismissNotificationItem: FC<{
       onDismiss();
     }}
   >
-    <Icon.CloseAlt size={12} />
+    <Icons icon="closeAlt" height={12} width={12} />
   </DismissButtonWrapper>
 );
 
diff --git a/code/ui/manager/src/components/panel/panel.stories.tsx b/code/ui/manager/src/components/panel/panel.stories.tsx
index 6fe0f00f833..f3f523f29c6 100644
--- a/code/ui/manager/src/components/panel/panel.stories.tsx
+++ b/code/ui/manager/src/components/panel/panel.stories.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Badge, Spaced } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Badge, Icons, Spaced } from '@storybook/components';
 import { Addon_TypesEnum } from '@storybook/types';
 import Panel from './panel';
 import { panels, shortcuts } from '../layout/app.mockdata';
@@ -57,7 +56,7 @@ export const JSXTitles = () => {
             <div>
               <Spaced col={1}>
                 <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>Alert!</div>
-                <Icon.Bell />
+                <Icons icon="bell" />
               </Spaced>
             </div>
           ),
diff --git a/code/ui/manager/src/components/panel/panel.tsx b/code/ui/manager/src/components/panel/panel.tsx
index 2717af21525..6abcce50f0e 100644
--- a/code/ui/manager/src/components/panel/panel.tsx
+++ b/code/ui/manager/src/components/panel/panel.tsx
@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import { Tabs, IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Tabs, Icons, IconButton } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
@@ -67,14 +66,14 @@ const AddonPanel = React.memo<{
                   shortcuts.panelPosition
                 )}]`}
               >
-                {panelPosition === 'bottom' ? <Icon.SidebarAlt /> : <Icon.BottomBar />}
+                <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
               </IconButton>
               <IconButton
                 key="visibility"
                 onClick={actions.toggleVisibility}
                 title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
               >
-                <Icon.Close />
+                <Icons icon="close" />
               </IconButton>
             </Fragment>
           ) : undefined
diff --git a/code/ui/manager/src/components/preview/toolbar.tsx b/code/ui/manager/src/components/preview/toolbar.tsx
index 3a171b657db..b82e5cb2eb3 100644
--- a/code/ui/manager/src/components/preview/toolbar.tsx
+++ b/code/ui/manager/src/components/preview/toolbar.tsx
@@ -3,8 +3,7 @@ import React, { Fragment, useMemo } from 'react';
 
 import { styled } from '@storybook/theming';
 
-import { FlexBar, IconButton, Separator, TabButton, TabBar } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
 import {
   shortcutToHumanString,
   Consumer,
@@ -72,7 +71,7 @@ export const fullScreenTool: Addon_BaseType = {
             onClick={toggle as any}
             title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
           >
-            {value ? <Icon.Close /> : <Icon.Expand />}
+            <Icons icon={value ? 'close' : 'expand'} />
           </IconButton>
         )
       }
diff --git a/code/ui/manager/src/components/preview/tools/addons.tsx b/code/ui/manager/src/components/preview/tools/addons.tsx
index 898e24dd06d..53fe821ae4a 100644
--- a/code/ui/manager/src/components/preview/tools/addons.tsx
+++ b/code/ui/manager/src/components/preview/tools/addons.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons } from '@storybook/components';
 import { Consumer, types } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
@@ -24,7 +23,7 @@ export const addonsTool: Addon_BaseType = {
         !isVisible && (
           <>
             <IconButton aria-label="Show addons" key="addons" onClick={toggle} title="Show addons">
-              {panelPosition === 'bottom' ? <Icon.BottomBar /> : <Icon.SidebarAlt />}
+              <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
             </IconButton>
           </>
         )
diff --git a/code/ui/manager/src/components/preview/tools/copy.tsx b/code/ui/manager/src/components/preview/tools/copy.tsx
index 3e18a1d6d60..0b0084aae85 100644
--- a/code/ui/manager/src/components/preview/tools/copy.tsx
+++ b/code/ui/manager/src/components/preview/tools/copy.tsx
@@ -1,8 +1,7 @@
 import { global } from '@storybook/global';
 import React from 'react';
 import copy from 'copy-to-clipboard';
-import { getStoryHref, IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, types } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
@@ -38,7 +37,7 @@ export const copyTool: Addon_BaseType = {
             onClick={() => copy(getStoryHref(baseUrl, storyId, queryParams))}
             title="Copy canvas link"
           >
-            <Icon.Link />
+            <Icons icon="link" />
           </IconButton>
         ) : null
       }
diff --git a/code/ui/manager/src/components/preview/tools/eject.tsx b/code/ui/manager/src/components/preview/tools/eject.tsx
index dd7f3bb3f69..65688038b85 100644
--- a/code/ui/manager/src/components/preview/tools/eject.tsx
+++ b/code/ui/manager/src/components/preview/tools/eject.tsx
@@ -1,7 +1,6 @@
 import { global } from '@storybook/global';
 import React from 'react';
-import { getStoryHref, IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { getStoryHref, IconButton, Icons } from '@storybook/components';
 import { Consumer, types } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
@@ -35,7 +34,7 @@ export const ejectTool: Addon_BaseType = {
             target="_blank"
             title="Open canvas in new tab"
           >
-            <Icon.ShareAlt />
+            <Icons icon="sharealt" />
           </IconButton>
         ) : null
       }
diff --git a/code/ui/manager/src/components/preview/tools/menu.tsx b/code/ui/manager/src/components/preview/tools/menu.tsx
index 459c4e72a47..8512e9e16ab 100644
--- a/code/ui/manager/src/components/preview/tools/menu.tsx
+++ b/code/ui/manager/src/components/preview/tools/menu.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { IconButton, Separator } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons, Separator } from '@storybook/components';
 import { Consumer, types } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
@@ -23,7 +22,7 @@ export const menuTool: Addon_BaseType = {
         !isVisible && (
           <>
             <IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar">
-              <Icon.Menu />
+              <Icons icon="menu" />
             </IconButton>
             <Separator />
           </>
diff --git a/code/ui/manager/src/components/preview/tools/remount.tsx b/code/ui/manager/src/components/preview/tools/remount.tsx
index 435b059e8c7..6bf4c1f7553 100644
--- a/code/ui/manager/src/components/preview/tools/remount.tsx
+++ b/code/ui/manager/src/components/preview/tools/remount.tsx
@@ -1,7 +1,6 @@
 import type { ComponentProps } from 'react';
 import React, { useState } from 'react';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons } from '@storybook/components';
 import { Consumer, types } from '@storybook/manager-api';
 import type { Combo } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
@@ -57,7 +56,7 @@ export const remountTool: Addon_BaseType = {
             animating={isAnimating}
             disabled={!storyId}
           >
-            <Icon.Sync />
+            <Icons icon="sync" />
           </StyledAnimatedIconButton>
         );
       }}
diff --git a/code/ui/manager/src/components/preview/tools/zoom.tsx b/code/ui/manager/src/components/preview/tools/zoom.tsx
index be98293fd26..84e0f72bafa 100644
--- a/code/ui/manager/src/components/preview/tools/zoom.tsx
+++ b/code/ui/manager/src/components/preview/tools/zoom.tsx
@@ -1,8 +1,7 @@
 import type { SyntheticEvent, MouseEventHandler } from 'react';
 import React, { Component, useCallback } from 'react';
 
-import { IconButton, Separator } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton, Separator } from '@storybook/components';
 import type { Addon_BaseType } from '@storybook/types';
 import { types } from '@storybook/manager-api';
 
@@ -39,13 +38,13 @@ const Zoom = React.memo<{
   return (
     <>
       <IconButton key="zoomin" onClick={zoomIn} title="Zoom in">
-        <Icon.Zoom />
+        <Icons icon="zoom" />
       </IconButton>
       <IconButton key="zoomout" onClick={zoomOut} title="Zoom out">
-        <Icon.ZoomOut />
+        <Icons icon="zoomout" />
       </IconButton>
       <IconButton key="zoomreset" onClick={reset} title="Reset zoom">
-        <Icon.ZoomReset />
+        <Icons icon="zoomreset" />
       </IconButton>
     </>
   );
diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
index e9749a60186..3f66fc013a4 100644
--- a/code/ui/manager/src/components/sidebar/Menu.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.tsx
@@ -4,8 +4,7 @@ import React, { useMemo, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import type { Button, TooltipLinkListLink } from '@storybook/components';
-import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
 
@@ -17,7 +16,7 @@ const sharedStyles = {
   display: 'block',
 };
 
-const StyledIcon = styled(Icons)(sharedStyles, ({ theme }) => ({
+const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
   color: theme.color.secondary,
 }));
 
@@ -78,7 +77,7 @@ export interface ListItemIconProps {
  */
 export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
   if (icon) {
-    return <StyledIcon icon={icon} />;
+    return <Icon icon={icon} />;
   }
   if (imgSrc) {
     return <Img src={imgSrc} alt="image" />;
@@ -124,7 +123,7 @@ export const SidebarMenu: FC<{
         highlighted={isHighlighted}
         active={isTooltipVisible}
       >
-        <Icon.Cog />
+        <Icons icon="cog" />
       </SidebarIconButton>
     </WithTooltip>
   );
@@ -148,7 +147,7 @@ export const ToolbarMenu: FC<{
       tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
     >
       <IconButton title="Shortcuts" aria-label="Shortcuts">
-        <Icon.Menu />
+        <Icons icon="menu" />
       </IconButton>
     </WithTooltip>
   );
diff --git a/code/ui/manager/src/components/sidebar/RefBlocks.tsx b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
index e232ef24bcd..ddea8ed11aa 100644
--- a/code/ui/manager/src/components/sidebar/RefBlocks.tsx
+++ b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
@@ -2,8 +2,7 @@ import { global } from '@storybook/global';
 import type { FC } from 'react';
 import React, { useState, useCallback, Fragment } from 'react';
 
-import { WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
 
@@ -79,7 +78,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
             </Text>
             <div>
               <Button small gray onClick={refresh}>
-                <Icon.Sync />
+                <Icons icon="sync" />
                 Refresh now
               </Button>
             </div>
@@ -89,7 +88,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
             <Text>Sign in to browse this Storybook.</Text>
             <div>
               <Button small gray onClick={open}>
-                <Icon.Lock />
+                <Icons icon="lock" />
                 Sign in
               </Button>
             </div>
@@ -115,7 +114,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
         >
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <Link isButton>
-            View error <Icon.ChevronDown />
+            View error <Icons icon="arrowdown" />
           </Link>
         </WithTooltip>{' '}
         <Link withArrow href="https://storybook.js.org/docs" cancel={false} target="_blank">
diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
index 5c8b8f92c21..a46ba2c8964 100644
--- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx
+++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@@ -3,8 +3,7 @@ import type { FC } from 'react';
 import React, { useMemo, useCallback, forwardRef } from 'react';
 
 import type { TooltipLinkListLink } from '@storybook/components';
-import { WithTooltip, Spaced, TooltipLinkList, Icons } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { useStorybookApi } from '@storybook/manager-api';
@@ -160,7 +159,7 @@ const CurrentVersion: FC<CurrentVersionProps> = ({ url, versions }) => {
   return (
     <Version>
       <span>{currentVersionId}</span>
-      <Icon.ChevronDown />
+      <Icons icon="arrowdown" />
     </Version>
   );
 };
@@ -205,7 +204,7 @@ export const RefIndicator = React.memo(
             }
           >
             <IndicatorClickTarget data-action="toggle-indicator" aria-label="toggle indicator">
-              <Icon.Globe />
+              <Icons icon="globe" />
             </IndicatorClickTarget>
           </WithTooltip>
 
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index a2a17c84782..8d5ac50484e 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -9,7 +9,6 @@ import type {
 } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
 import { transparentize } from 'polished';
 import type { MutableRefObject } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
@@ -302,7 +301,7 @@ const Node = React.memo<NodeProps>(function Node({
               setFullyExpanded();
             }}
           >
-            {isFullyExpanded ? <Icon.Collapse /> : <Icon.ExpandAlt />}
+            <Icons icon={isFullyExpanded ? 'collapse' : 'expandalt'} />
           </Action>
         )}
       </RootNode>
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 8230b16aae0..a387cb24d5f 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -1,8 +1,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useMemo } from 'react';
 
-import { Badge } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Badge, Icons } from '@storybook/components';
 import type { API, State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
 import { styled, useTheme } from '@storybook/theming';
@@ -104,7 +103,7 @@ export const useMenu = (
       onClick: () => api.toggleNav(),
       active: showNav,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.toggleNav} /> : null,
-      left: showNav ? <Icon.Check /> : null,
+      left: showNav ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showNav]
   );
@@ -116,7 +115,7 @@ export const useMenu = (
       onClick: () => api.toggleToolbar(),
       active: showToolbar,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.toolbar} /> : null,
-      left: showToolbar ? <Icon.Check /> : null,
+      left: showToolbar ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showToolbar]
   );
@@ -128,7 +127,7 @@ export const useMenu = (
       onClick: () => api.togglePanel(),
       active: showPanel,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.togglePanel} /> : null,
-      left: showPanel ? <Icon.Check /> : null,
+      left: showPanel ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, showPanel]
   );
@@ -150,7 +149,7 @@ export const useMenu = (
       onClick: () => api.toggleFullscreen(),
       active: isFullscreen,
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.fullScreen} /> : null,
-      left: isFullscreen ? <Icon.Check /> : null,
+      left: isFullscreen ? <Icons icon="check" /> : null,
     }),
     [api, enableShortcuts, shortcutKeys, isFullscreen]
   );
diff --git a/code/ui/manager/src/settings/index.tsx b/code/ui/manager/src/settings/index.tsx
index 2d2f91d985c..24b0b12a822 100644
--- a/code/ui/manager/src/settings/index.tsx
+++ b/code/ui/manager/src/settings/index.tsx
@@ -1,6 +1,5 @@
 import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api';
-import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
 import { Location, Route } from '@storybook/router';
 import { styled } from '@storybook/theming';
 import { global } from '@storybook/global';
@@ -95,7 +94,7 @@ const Pages: FC<{
           }}
           title="Close settings page"
         >
-          <Icon.Close />
+          <Icons icon="close" />
         </IconButton>
       </FlexBar>
       <Content vertical horizontal={false}>
diff --git a/code/ui/manager/src/settings/whats_new.tsx b/code/ui/manager/src/settings/whats_new.tsx
index f66217f6f92..b9e11aea2a7 100644
--- a/code/ui/manager/src/settings/whats_new.tsx
+++ b/code/ui/manager/src/settings/whats_new.tsx
@@ -1,8 +1,7 @@
 import type { ComponentProps, FC } from 'react';
 import React, { Fragment, useEffect, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming';
-import { Button, IconButton, Loader, Icons } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Button, IconButton, Icons, Loader } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { global } from '@storybook/global';
 
@@ -78,7 +77,7 @@ export const WhatsNewFooter = ({
   return (
     <Container>
       <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        <Icon.Heart color={theme.color.mediumdark} />
+        <Icons icon="heart" color={theme.color.mediumdark} />
         <div>Share this with your team.</div>
         <CopyButton onClick={copyLink} small>
           {copyText}
@@ -87,12 +86,12 @@ export const WhatsNewFooter = ({
       <ToggleNotificationButton onClick={onToggleNotifications}>
         {isNotificationsEnabled ? (
           <>
-            <Icon.EyeClose />
+            <Icons icon="eyeclose" />
             &nbsp;Hide notifications
           </>
         ) : (
           <>
-            <Icon.Eye />
+            <Icons icon="eye" />
             &nbsp;Show notifications
           </>
         )}
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index a7b361f76f0..db951af3383 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -109,8 +109,7 @@ Going through the code blocks in sequence:
 ```ts
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 ```
 
 The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `Icons` and `IconButtons` components from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the icons and buttons in the toolbar.
@@ -145,7 +144,7 @@ export const Tool = memo(function MyAddonSelector() {
       title="Apply outlines to the preview"
       onClick={toggleMyTool}
     >
-      <Icon.Lightning />
+      <Icons icon="lightning" />
     </IconButton>
   );
 });
diff --git a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
index 161ebf75cd4..bc9e562e9b7 100644
--- a/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
+++ b/docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
@@ -6,8 +6,7 @@ import React, { useCallback } from 'react';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
 import { useGlobals } from '@storybook/manager-api';
 
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons } from '@storybook/components';
 
 import { addons } from '@storybook/preview-api';
 
@@ -35,7 +34,7 @@ const ExampleToolbar = () => {
       title="Show a Storybook toolbar"
       onClick={toggleOutline}
     >
-      <Icon.Outline />
+      <Icons icon="outline" />
     </IconButton>
   );
 };
diff --git a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
index f60538a1839..7300ceffa32 100644
--- a/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
+++ b/docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
@@ -4,8 +4,7 @@
 import React, { memo, useCallback, useEffect } from 'react';
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
 
 export const Tool = memo(function MyAddonSelector() {
@@ -37,7 +36,7 @@ export const Tool = memo(function MyAddonSelector() {
       title="Apply outlines to the preview"
       onClick={toggleMyTool}
     >
-      <Icon.Lightning />
+      <Icons icon="lightning" />
     </IconButton>
   );
 });
diff --git a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
index 87bf59f7199..553dc987096 100644
--- a/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
+++ b/docs/snippets/common/storybook-addon-toolbar-example.js.mdx
@@ -5,8 +5,7 @@ import React from 'react';
 
 import { addons, types } from '@storybook/manager-api';
 
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 
 addons.register('my/toolbar', () => {
   addons.add('my-toolbar-addon/toolbar', {
@@ -17,7 +16,7 @@ addons.register('my/toolbar', () => {
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: ({ active }) => (
       <IconButton active={active} title="Show a Storybook toolbar">
-        <Icon.Outline />
+        <Icons icon="outline" />
       </IconButton>
     ),
   });
diff --git a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
index 0cca8b42868..7894ddad1b9 100644
--- a/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
+++ b/docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
@@ -4,8 +4,7 @@
 import React, { memo, useCallback, useEffect } from 'react';
 
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
 
 export const Tool = memo(function MyAddonSelector() {
@@ -32,7 +31,7 @@ export const Tool = memo(function MyAddonSelector() {
 
   return (
     <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
-      <Icon.Lightning />
+      <Icons icon="lightning" />
     </IconButton>
   );
 });
diff --git a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
index 20768f6cfec..0478812b03d 100644
--- a/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-getchannel.js.mdx
@@ -9,8 +9,7 @@ import { addons } from '@storybook/preview-api';
 
 import { useGlobals } from '@storybook/manager-api';
 
-import { IconButton } from '@storybook/components';
-import { Icon } from '@storybook/components/experimental';
+import { IconButton, Icons } from '@storybook/components';
 
 const ExampleToolbar = () => {
   const [globals, updateGlobals] = useGlobals();
@@ -35,7 +34,7 @@ const ExampleToolbar = () => {
       title="Show the toolbar addon"
       onClick={toggleToolbarAddon}
     >
-      <Icon.Outline />
+      <Icons icon="outline" />
     </IconButton>
   );
 };
diff --git a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
index dae72e0bcb1..95341480697 100644
--- a/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
@@ -7,8 +7,6 @@ import { useAddonState } from '@storybook/manager-api';
 
 import { AddonPanel, Button, IconButton } from '@storybook/components';
 
-import { Icon } from '@storybook/components/experimental';
-
 export const Panel = () => {
   const [state, setState] = useAddonState('addon-unique-identifier', 'initial state');
 
@@ -30,7 +28,7 @@ export const Tool = () => {
       title="Enable my addon"
       onClick={() => setState('Example')}
     >
-      <Icon.Lightning />
+      <Icons icon="lightning" />
     </IconButton>
   );
 };
diff --git a/docs/snippets/common/storybook-addons-api-useapi.js.mdx b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
index d7418472e8a..f3b5b209180 100644
--- a/docs/snippets/common/storybook-addons-api-useapi.js.mdx
+++ b/docs/snippets/common/storybook-addons-api-useapi.js.mdx
@@ -3,9 +3,7 @@
 
 import React, { useEffect, useCallback } from 'react';
 
-import { IconButton } from '@storybook/components';
-
-import { Icon } from '@storybook/components/experimental';
+import { Icons, IconButton } from '@storybook/components';
 
 import { useStorybookApi } from '@storybook/manager-api';
 
@@ -28,7 +26,7 @@ export const Panel = () => {
 
   return (
     <IconButton key="custom-toolbar" active="true" title="Show a toolbar addon">
-      <Icon.ChevronDown />
+      <Icons icon="arrowdown" />
     </IconButton>
   );
 };

From df5b104f9feb848cb13fce0811fe6d72d61ccbc4 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:33:06 +0200
Subject: [PATCH 2/9] Revert "Merge pull request #23635 from
 storybookjs/charles-update-controls-addon"

This reverts commit 0005430a7d13d12840b4f1c4cac33580984628c6, reversing
changes made to a70dcab809679c92d1bcd0840eac96fb7c56f5c4.
---
 .../src/preview/iframe-webpack.config.ts      |   4 -
 .../src/components/ArgsTable/ArgControl.tsx   |   2 +-
 .../src/components/ArgsTable/ArgsTable.tsx    |   3 +-
 .../blocks/src/components/ArgsTable/Empty.tsx |   6 +-
 code/ui/components/package.json               |   4 +-
 code/ui/components/src/experimental.ts        |   6 -
 code/ui/components/src/new/Button/Button.tsx  |   4 -
 code/ui/components/src/new/Icon/Icon.tsx      |   1 -
 .../components/src/new/Link/Link.stories.tsx  | 103 ------------------
 code/ui/components/src/new/Link/Link.tsx      |  76 -------------
 .../components/src/new/Select/SelectItem.tsx  |   9 +-
 code/ui/manager/src/globals/exports.ts        |   9 --
 code/ui/manager/src/globals/runtime.ts        |   2 -
 code/ui/manager/src/globals/types.ts          |   1 -
 scripts/verdaccio.yaml                        |   4 -
 15 files changed, 14 insertions(+), 220 deletions(-)
 delete mode 100644 code/ui/components/src/new/Icon/Icon.tsx
 delete mode 100644 code/ui/components/src/new/Link/Link.stories.tsx
 delete mode 100644 code/ui/components/src/new/Link/Link.tsx

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index c99a1df1da8..d2f6ec6affb 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -31,10 +31,6 @@ const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
 const storybookPaths: Record<string, string> = {
-  // this is a temporary hack to get webpack to alias this correctly
-  [`@storybook/components/experimental`]: `${getAbsolutePath(
-    `@storybook/components`
-  )}/dist/experimental`,
   ...[
     // these packages are not pre-bundled because of react dependencies
     'components',
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx
index 7a1061f14e7..be9b7e1c8a4 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgControl.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useCallback, useState, useEffect } from 'react';
 
-import { Link } from '@storybook/components/experimental';
+import { Link } from '@storybook/components';
 import {
   BooleanControl,
   ColorControl,
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
index 74c849f9597..b28206becc4 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -5,8 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import { includeConditionalArg } from '@storybook/csf';
 import { once } from '@storybook/client-logger';
-import { IconButton, Icons, ResetWrapper } from '@storybook/components';
-import { Link } from '@storybook/components/experimental';
+import { IconButton, Icons, ResetWrapper, Link } from '@storybook/components';
 
 import { ArgRow } from './ArgRow';
 import { SectionRow } from './SectionRow';
diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
index ea8e3c2f17f..6cc4dbd4fe7 100644
--- a/code/ui/blocks/src/components/ArgsTable/Empty.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { styled } from '@storybook/theming';
-import { Link } from '@storybook/components/experimental';
+import { Icons, Link } from '@storybook/components';
 
 interface EmptyProps {
   inAddonPanel?: boolean;
@@ -85,8 +85,8 @@ export const Empty: FC<EmptyProps> = ({ inAddonPanel }) => {
       <Links>
         {inAddonPanel && (
           <>
-            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" icon="Video" withArrow>
-              Watch 5m video
+            <Link href="https://youtu.be/0gOfS6K0x0E" target="_blank" withArrow>
+              <Icons icon="video" /> Watch 5m video
             </Link>
             <Divider />
             <Link
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index cf0ec5206a6..e144975a4dc 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -52,7 +52,7 @@
         "dist/html.d.ts"
       ],
       "experimental": [
-        "dist/experimental.d.ts"
+        "dist/experimantal.d.ts"
       ]
     }
   },
@@ -105,7 +105,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
-      "./src/experimental.ts"
+      "./src/experimantal.ts"
     ],
     "platform": "neutral"
   },
diff --git a/code/ui/components/src/experimental.ts b/code/ui/components/src/experimental.ts
index a210f26c37a..6682e0ada3c 100644
--- a/code/ui/components/src/experimental.ts
+++ b/code/ui/components/src/experimental.ts
@@ -8,9 +8,3 @@
  */
 
 export { Button } from './new/Button/Button';
-export { Input } from './new/Input/Input';
-export { Select } from './new/Select/Select';
-export { Link } from './new/Link/Link';
-export { Icon } from './new/Icon/Icon';
-export { IconButton } from './new/IconButton/IconButton';
-export { Toolbar } from './new/Toolbar/Toolbar';
diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
index f36ea73379d..de19088bf5f 100644
--- a/code/ui/components/src/new/Button/Button.tsx
+++ b/code/ui/components/src/new/Button/Button.tsx
@@ -3,7 +3,6 @@ import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 import type { Icons } from '@storybook/icons';
 import type { PropsOf } from '../utils/types';
-import { Icon } from '../Icon/Icon';
 
 interface ButtonProps<T extends React.ElementType = React.ElementType> {
   children: string;
@@ -23,11 +22,8 @@ export const Button: {
   displayName?: string;
 } = forwardRef(
   ({ as, children, icon, ...props }: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
-    const LocalIcon = Icon[icon];
-
     return (
       <StyledButton as={as} ref={ref} {...props}>
-        {icon && <LocalIcon />}
         {children}
       </StyledButton>
     );
diff --git a/code/ui/components/src/new/Icon/Icon.tsx b/code/ui/components/src/new/Icon/Icon.tsx
deleted file mode 100644
index 14219a539c9..00000000000
--- a/code/ui/components/src/new/Icon/Icon.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * as Icon from '@storybook/icons';
diff --git a/code/ui/components/src/new/Link/Link.stories.tsx b/code/ui/components/src/new/Link/Link.stories.tsx
deleted file mode 100644
index 0fee3e095b8..00000000000
--- a/code/ui/components/src/new/Link/Link.stories.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Link } from './Link';
-
-const meta: Meta<typeof Link> = {
-  title: 'Link',
-  component: Link,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Link>;
-
-export const Base = {
-  args: { children: 'Link' },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Link href="https://storybook.js.org/" variant="primary">
-        Primary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary">
-        Secondary
-      </Link>
-    </div>
-  ),
-};
-
-export const Underline: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Link href="https://storybook.js.org/" variant="primary" underline="hover">
-        Primary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="primary" underline="always">
-        Secondary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary" underline="hover">
-        Secondary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary" underline="always">
-        Secondary
-      </Link>
-    </div>
-  ),
-};
-
-export const Weight: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Link href="https://storybook.js.org/" variant="primary" weight="regular">
-        Primary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="primary" weight="bold">
-        Secondary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary" weight="regular">
-        Secondary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary" weight="bold">
-        Secondary
-      </Link>
-    </div>
-  ),
-};
-
-export const WithIcon: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Link href="https://storybook.js.org/" variant="primary" icon="FaceHappy">
-        Primary
-      </Link>
-      <Link href="https://storybook.js.org/" variant="secondary" icon="FaceHappy">
-        Secondary
-      </Link>
-    </div>
-  ),
-};
-
-export const WithArrow: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <Link href="https://storybook.js.org/" variant="primary" withArrow>
-          Primary
-        </Link>
-        <Link href="https://storybook.js.org/" variant="secondary" withArrow>
-          Secondary
-        </Link>
-      </div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-        <Link href="https://storybook.js.org/" variant="primary" icon="FaceHappy" withArrow>
-          Primary
-        </Link>
-        <Link href="https://storybook.js.org/" variant="secondary" icon="FaceHappy" withArrow>
-          Secondary
-        </Link>
-      </div>
-    </div>
-  ),
-};
diff --git a/code/ui/components/src/new/Link/Link.tsx b/code/ui/components/src/new/Link/Link.tsx
deleted file mode 100644
index 3422ac6a7f3..00000000000
--- a/code/ui/components/src/new/Link/Link.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { MouseEvent } from 'react';
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import type { Icons } from '@storybook/icons';
-import { Icon } from '../Icon/Icon';
-import type { PropsOf } from '../utils/types';
-
-export interface LinkProps<T extends React.ElementType = React.ElementType> {
-  as?: T;
-  children: string;
-  variant?: 'primary' | 'secondary';
-  weight?: 'regular' | 'bold';
-  underline?: 'hover' | 'always';
-  icon?: Icons;
-  onClick?: (e: MouseEvent) => void;
-  withArrow?: boolean;
-}
-
-export const Link: {
-  <E extends React.ElementType = 'a'>(
-    props: LinkProps<E> & Omit<PropsOf<E>, keyof LinkProps>
-  ): JSX.Element;
-  displayName?: string;
-} = forwardRef(
-  ({ children, icon, withArrow, ...props }: LinkProps, ref: React.Ref<HTMLAnchorElement>) => {
-    const LocalIcon = Icon[icon];
-    return (
-      <StyledLink ref={ref} {...props}>
-        <StyledLeft>
-          {icon && <LocalIcon />}
-          {children}
-        </StyledLeft>
-        {withArrow && <Icon.ChevronRight size={8} />}
-      </StyledLink>
-    );
-  }
-);
-
-Link.displayName = 'Link';
-
-const StyledLink = styled.a<Omit<LinkProps, 'children'>>(
-  ({ theme, variant = 'primary', underline = 'hover', weight = 'regular' }) => ({
-    display: 'inline-flex',
-    gap: 4,
-    alignItems: 'center',
-    transition: 'all 150ms ease-out',
-    textDecoration: 'none',
-    lineHeight: 1,
-    color: `${(() => {
-      if (variant === 'primary') return theme.color.secondary;
-      if (variant === 'secondary') return theme.color.defaultText;
-      return theme.color.secondary;
-    })()}`,
-    fontWeight: `${(() => {
-      if (weight === 'regular') return theme.typography.weight.regular;
-      if (weight === 'bold') return theme.typography.weight.bold;
-      return theme.typography.weight.bold;
-    })()}`,
-    textDecorationLine: `${underline === 'always' ? 'underline' : 'none'}`,
-    textDecorationStyle: 'solid',
-    textDecorationThickness: '1px',
-    textUnderlineOffset: '2px',
-
-    '&:hover, &:focus': {
-      cursor: 'pointer',
-      textDecorationLine: 'underline',
-    },
-  })
-);
-
-const StyledLeft = styled.span(({ theme }) => ({
-  display: 'inline-flex',
-  gap: 6,
-  alignItems: 'center',
-  fontSize: theme.typography.size.s2 - 1,
-}));
diff --git a/code/ui/components/src/new/Select/SelectItem.tsx b/code/ui/components/src/new/Select/SelectItem.tsx
index f60f084cd3a..6206e76095c 100644
--- a/code/ui/components/src/new/Select/SelectItem.tsx
+++ b/code/ui/components/src/new/Select/SelectItem.tsx
@@ -1,20 +1,25 @@
 import * as RadixSelect from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 import { styled } from '@storybook/theming';
-import { Icon } from '@storybook/components/experimental';
 
 interface SelectItemProps {
   children: React.ReactNode;
   value: string;
 }
 
+const FakeIcon = styled.div(({ theme }) => ({
+  width: 12,
+  height: 12,
+  backgroundColor: theme.color.mediumdark,
+}));
+
 export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
   ({ children, ...props }, forwardedRef) => {
     return (
       <StyledItem {...props} ref={forwardedRef}>
         <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
         <StyledItemIndicator className="SelectItemIndicator">
-          <Icon.FaceHappy />
+          <FakeIcon />
         </StyledItemIndicator>
       </StyledItem>
     );
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index 793165aaf10..43b7c50f519 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -114,15 +114,6 @@ export default {
     'resetComponents',
     'withReset',
   ],
-  '@storybook/components/experimental': [
-    'Button',
-    'Icon',
-    'IconButton',
-    'Input',
-    'Link',
-    'Select',
-    'Toolbar',
-  ],
   '@storybook/channels': [
     'Channel',
     'PostMessageTransport',
diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts
index 391acebf3e9..5850699f171 100644
--- a/code/ui/manager/src/globals/runtime.ts
+++ b/code/ui/manager/src/globals/runtime.ts
@@ -2,7 +2,6 @@ import * as REACT from 'react';
 import * as REACTDOM from 'react-dom';
 
 import * as STORYBOOKCOMPONENTS from '@storybook/components';
-import * as STORYBOOKCOMPONENTSEXPERIMENTAL from '@storybook/components/experimental';
 import * as STORYBOOKCHANNELS from '@storybook/channels';
 import * as STORYBOOKEVENTS from '@storybook/core-events';
 import * as STORYBOOKROUTER from '@storybook/router';
@@ -17,7 +16,6 @@ export const values: Required<Record<keyof typeof Keys, any>> = {
   react: REACT as any,
   'react-dom': REACTDOM,
   '@storybook/components': STORYBOOKCOMPONENTS,
-  '@storybook/components/experimental': STORYBOOKCOMPONENTSEXPERIMENTAL,
   '@storybook/channels': STORYBOOKCHANNELS,
   '@storybook/core-events': STORYBOOKEVENTS,
   '@storybook/router': STORYBOOKROUTER,
diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts
index a499ea31bfa..2861e45f632 100644
--- a/code/ui/manager/src/globals/types.ts
+++ b/code/ui/manager/src/globals/types.ts
@@ -5,7 +5,6 @@ export enum Keys {
   'react' = '__REACT__',
   'react-dom' = '__REACTDOM__',
   '@storybook/components' = '__STORYBOOKCOMPONENTS__',
-  '@storybook/components/experimental' = '__STORYBOOKCOMPONENTSEXPERIMENTAL__',
   '@storybook/channels' = '__STORYBOOKCHANNELS__',
   '@storybook/core-events' = '__STORYBOOKCOREEVENTS__',
   '@storybook/router' = '__STORYBOOKROUTER__',
diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml
index c0ec0bd642d..aa59cf7d5e7 100644
--- a/scripts/verdaccio.yaml
+++ b/scripts/verdaccio.yaml
@@ -31,10 +31,6 @@ packages:
     access: $all
     publish: $all
     proxy: npmjs
-  '@storybook/icons':
-    access: $all
-    publish: $all
-    proxy: npmjs
   '@storybook/global':
     access: $all
     publish: $all

From 0e757d2085b87e2e7cb040eef6b54f3154d79ac9 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:34:05 +0200
Subject: [PATCH 3/9] remove export

---
 code/ui/components/package.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index e144975a4dc..376a6727e58 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -27,12 +27,6 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
-    "./experimental": {
-      "types": "./dist/experimental.d.ts",
-      "node": "./dist/experimental.js",
-      "require": "./dist/experimental.js",
-      "import": "./dist/experimental.mjs"
-    },
     "./html": {
       "types": "./dist/html.d.ts",
       "require": "./dist/html.js",

From 63b1a8da82067eb90279e1d33c32ffbdf7989ed3 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:46:22 +0200
Subject: [PATCH 4/9] remove code

---
 code/ui/components/src/experimental.ts        |  10 -
 .../src/new/Button/Button.stories.tsx         | 106 -----------
 code/ui/components/src/new/Button/Button.tsx  | 109 -----------
 .../src/new/IconButton/IconButton.stories.tsx |  76 --------
 .../src/new/IconButton/IconButton.tsx         | 141 --------------
 .../src/new/Input/Input.stories.tsx           |  32 ----
 code/ui/components/src/new/Input/Input.tsx    |  55 ------
 .../src/new/Select/Select.stories.tsx         |  91 ---------
 code/ui/components/src/new/Select/Select.tsx  | 180 ------------------
 .../components/src/new/Select/SelectItem.tsx  |  62 ------
 .../src/new/Select/icons/Arrowdown.tsx        |  29 ---
 .../src/new/Select/icons/Arrowup.tsx          |  29 ---
 .../components/src/new/Select/icons/Check.tsx |  29 ---
 .../src/new/Select/icons/ExpandAlt.tsx        |  29 ---
 .../src/new/Select/icons/IconWrapper.tsx      |  29 ---
 .../components/src/new/Select/icons/types.ts  |  10 -
 .../src/new/Textarea/Textarea.stories.tsx     |  33 ----
 .../components/src/new/Textarea/Textarea.tsx  |  58 ------
 .../src/new/Toolbar/Toolbar.stories.tsx       | 117 ------------
 .../ui/components/src/new/Toolbar/Toolbar.tsx |  83 --------
 code/ui/components/src/new/utils/types.ts     |   4 -
 21 files changed, 1312 deletions(-)
 delete mode 100644 code/ui/components/src/experimental.ts
 delete mode 100644 code/ui/components/src/new/Button/Button.stories.tsx
 delete mode 100644 code/ui/components/src/new/Button/Button.tsx
 delete mode 100644 code/ui/components/src/new/IconButton/IconButton.stories.tsx
 delete mode 100644 code/ui/components/src/new/IconButton/IconButton.tsx
 delete mode 100644 code/ui/components/src/new/Input/Input.stories.tsx
 delete mode 100644 code/ui/components/src/new/Input/Input.tsx
 delete mode 100644 code/ui/components/src/new/Select/Select.stories.tsx
 delete mode 100644 code/ui/components/src/new/Select/Select.tsx
 delete mode 100644 code/ui/components/src/new/Select/SelectItem.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/Arrowdown.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/Arrowup.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/Check.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/ExpandAlt.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/IconWrapper.tsx
 delete mode 100644 code/ui/components/src/new/Select/icons/types.ts
 delete mode 100644 code/ui/components/src/new/Textarea/Textarea.stories.tsx
 delete mode 100644 code/ui/components/src/new/Textarea/Textarea.tsx
 delete mode 100644 code/ui/components/src/new/Toolbar/Toolbar.stories.tsx
 delete mode 100644 code/ui/components/src/new/Toolbar/Toolbar.tsx
 delete mode 100644 code/ui/components/src/new/utils/types.ts

diff --git a/code/ui/components/src/experimental.ts b/code/ui/components/src/experimental.ts
deleted file mode 100644
index 6682e0ada3c..00000000000
--- a/code/ui/components/src/experimental.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="./typings.d.ts" />
-
-/* ABSOLUTELY DO NOT:
- * - EXPORT PROPS INTERFACES OF COMPONENTS
- * - EXPORT * FROM ANY FILES, EVERY EXPORT SHOULD BE DELIBERATE
- * - EXPORT IMPORT / EXPORT ANYTHING FROM LEGACY
- */
-
-export { Button } from './new/Button/Button';
diff --git a/code/ui/components/src/new/Button/Button.stories.tsx b/code/ui/components/src/new/Button/Button.stories.tsx
deleted file mode 100644
index 0bae84bdf8e..00000000000
--- a/code/ui/components/src/new/Button/Button.stories.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Button',
-  component: Button,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Base = {
-  args: { children: 'Button' },
-};
-
-export const Variants: Story = {
-  args: {
-    ...Base.args,
-  },
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button variant="solid">Solid</Button>
-      <Button variant="outline">Outline</Button>
-      <Button variant="ghost">Ghost</Button>
-    </div>
-  ),
-};
-
-export const Active: Story = {
-  args: {
-    ...Base.args,
-  },
-  render: (args) => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button variant="solid" active {...args}>
-        Solid
-      </Button>
-      <Button variant="outline" active {...args}>
-        Outline
-      </Button>
-      <Button variant="ghost" active {...args}>
-        Ghost
-      </Button>
-    </div>
-  ),
-};
-
-export const WithIcon: Story = {
-  args: {
-    ...Base.args,
-    icon: 'FaceHappy',
-  },
-  render: ({ icon, children }) => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button variant="solid" icon={icon}>
-        {children}
-      </Button>
-      <Button variant="outline" icon={icon}>
-        {children}
-      </Button>
-      <Button variant="ghost" icon={icon}>
-        {children}
-      </Button>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  args: {
-    ...Base.args,
-  },
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button size="small" icon="FaceHappy">
-        Small Button
-      </Button>
-      <Button size="medium" icon="FaceHappy">
-        Medium Button
-      </Button>
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Base.args,
-    disabled: true,
-    children: 'Disabled Button',
-  },
-};
-
-export const WithHref: Story = {
-  args: {
-    ...Base.args,
-  },
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <Button onClick={() => console.log('Hello')}>I am a button using onClick</Button>
-      <Button as="a" href="https://storybook.js.org/">
-        I am an anchor using Href
-      </Button>
-    </div>
-  ),
-};
diff --git a/code/ui/components/src/new/Button/Button.tsx b/code/ui/components/src/new/Button/Button.tsx
deleted file mode 100644
index de19088bf5f..00000000000
--- a/code/ui/components/src/new/Button/Button.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import { darken, lighten, rgba, transparentize } from 'polished';
-import type { Icons } from '@storybook/icons';
-import type { PropsOf } from '../utils/types';
-
-interface ButtonProps<T extends React.ElementType = React.ElementType> {
-  children: string;
-  as?: T;
-  size?: 'small' | 'medium';
-  variant?: 'solid' | 'outline' | 'ghost';
-  onClick?: () => void;
-  disabled?: boolean;
-  active?: boolean;
-  icon?: Icons;
-}
-
-export const Button: {
-  <E extends React.ElementType = 'button'>(
-    props: ButtonProps<E> & Omit<PropsOf<E>, keyof ButtonProps>
-  ): JSX.Element;
-  displayName?: string;
-} = forwardRef(
-  ({ as, children, icon, ...props }: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
-    return (
-      <StyledButton as={as} ref={ref} {...props}>
-        {children}
-      </StyledButton>
-    );
-  }
-);
-
-Button.displayName = 'Button';
-
-const StyledButton = styled.button<Omit<ButtonProps, 'children'>>(
-  ({ theme, variant = 'solid', size = 'medium', disabled = false, active = false }) => ({
-    border: 0,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    display: 'inline-flex',
-    gap: '6px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    padding: `${(() => {
-      if (size === 'small') return '0 10px';
-      if (size === 'medium') return '0 12px';
-      return 0;
-    })()}`,
-    height: size === 'small' ? '28px' : '32px',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transitionProperty: 'background, box-shadow',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease-out',
-    verticalAlign: 'top',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    opacity: disabled ? 0.5 : 1,
-    margin: 0,
-    fontSize: `${theme.typography.size.s1}px`,
-    fontWeight: theme.typography.weight.bold,
-    lineHeight: '1',
-    background: `${(() => {
-      if (variant === 'solid') return theme.color.secondary;
-      if (variant === 'outline') return theme.button.background;
-      if (variant === 'ghost' && active) return theme.background.hoverable;
-      return 'transparent';
-    })()}`,
-    color: `${(() => {
-      if (variant === 'solid') return theme.color.lightest;
-      if (variant === 'outline') return theme.input.color;
-      if (variant === 'ghost' && active) return theme.color.secondary;
-      if (variant === 'ghost') return theme.color.mediumdark;
-      return theme.input.color;
-    })()}`,
-    boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
-    borderRadius: theme.input.borderRadius,
-
-    '&:hover': {
-      color: variant === 'ghost' ? theme.color.secondary : null,
-      background: `${(() => {
-        let bgColor = theme.color.secondary;
-        if (variant === 'solid') bgColor = theme.color.secondary;
-        if (variant === 'outline') bgColor = theme.button.background;
-
-        if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
-        return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-      })()}`,
-    },
-
-    '&:active': {
-      color: variant === 'ghost' ? theme.color.secondary : null,
-      background: `${(() => {
-        let bgColor = theme.color.secondary;
-        if (variant === 'solid') bgColor = theme.color.secondary;
-        if (variant === 'outline') bgColor = theme.button.background;
-
-        if (variant === 'ghost') return theme.background.hoverable;
-        return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-      })()}`,
-    },
-
-    '&:focus': {
-      boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-      outline: 'none',
-    },
-  })
-);
diff --git a/code/ui/components/src/new/IconButton/IconButton.stories.tsx b/code/ui/components/src/new/IconButton/IconButton.stories.tsx
deleted file mode 100644
index 4e239b9fb1b..00000000000
--- a/code/ui/components/src/new/IconButton/IconButton.stories.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-import { IconButton } from './IconButton';
-
-const meta: Meta<typeof IconButton> = {
-  title: 'IconButton',
-  component: IconButton,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-export const Base = {
-  args: { icon: 'FaceHappy' },
-};
-
-export const Types: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <IconButton variant="solid" icon="FaceHappy" />
-      <IconButton variant="outline" icon="FaceHappy" />
-      <IconButton variant="ghost" icon="FaceHappy" />
-    </div>
-  ),
-};
-
-export const Active: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <IconButton variant="solid" icon="FaceHappy" active />
-      <IconButton variant="outline" icon="FaceHappy" active />
-      <IconButton variant="ghost" icon="FaceHappy" active />
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <IconButton size="small" icon="FaceHappy" />
-      <IconButton size="medium" icon="FaceHappy" />
-    </div>
-  ),
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Base.args,
-    icon: 'FaceHappy',
-    disabled: true,
-  },
-};
-
-export const Animated: Story = {
-  args: {
-    ...Base.args,
-    icon: 'FaceHappy',
-  },
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <IconButton icon="FaceHappy" onClickAnimation="glow" />
-      <IconButton icon="FaceHappy" onClickAnimation="rotate360" />
-      <IconButton icon="FaceHappy" onClickAnimation="jiggle" />
-    </div>
-  ),
-};
-
-export const WithHref: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-      <IconButton icon="FaceHappy" onClick={() => console.log('Hello')} />
-      <IconButton as="a" href="https://storybook.js.org/" icon="FaceHappy" />
-    </div>
-  ),
-};
diff --git a/code/ui/components/src/new/IconButton/IconButton.tsx b/code/ui/components/src/new/IconButton/IconButton.tsx
deleted file mode 100644
index 18385bf3609..00000000000
--- a/code/ui/components/src/new/IconButton/IconButton.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { SyntheticEvent } from 'react';
-import React, { forwardRef, useEffect, useState } from 'react';
-import { styled } from '@storybook/theming';
-import { darken, lighten, rgba, transparentize } from 'polished';
-import type { Icons } from '@storybook/icons';
-import type { PropsOf } from '../utils/types';
-import { Icon } from '../Icon/Icon';
-
-interface IconButtonProps<T extends React.ElementType = React.ElementType> {
-  icon: Icons;
-  as?: T;
-  size?: 'small' | 'medium';
-  variant?: 'solid' | 'outline' | 'ghost';
-  onClick?: (event: SyntheticEvent) => void;
-  disabled?: boolean;
-  active?: boolean;
-  onClickAnimation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
-}
-
-export const IconButton: {
-  <E extends React.ElementType = 'button'>(
-    props: IconButtonProps<E> & Omit<PropsOf<E>, keyof IconButtonProps>
-  ): JSX.Element;
-  displayName?: string;
-} = forwardRef(
-  (
-    { as, icon = 'FaceHappy', onClickAnimation = 'none', onClick, ...props }: IconButtonProps,
-    ref: React.Ref<HTMLButtonElement>
-  ) => {
-    const LocalIcon = Icon[icon];
-    const [isAnimating, setIsAnimating] = useState(false);
-
-    const handleClick = (event: SyntheticEvent) => {
-      if (onClick) onClick(event);
-      if (onClickAnimation === 'none') return;
-      setIsAnimating(true);
-    };
-
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        if (isAnimating) setIsAnimating(false);
-      }, 1000);
-      return () => clearTimeout(timer);
-    }, [isAnimating]);
-
-    return (
-      <StyledButton as={as} ref={ref} {...props} onClick={handleClick}>
-        <IconWrapper isAnimating={isAnimating} animation={onClickAnimation}>
-          <LocalIcon />
-        </IconWrapper>
-      </StyledButton>
-    );
-  }
-);
-
-IconButton.displayName = 'IconButton';
-
-const StyledButton = styled.button<Omit<IconButtonProps, 'icon'>>(
-  ({ theme, variant = 'solid', size = 'medium', disabled = false, active = false }) => ({
-    border: 0,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    display: 'inline-flex',
-    gap: '6px',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    width: `${(() => {
-      if (size === 'small') return '28px';
-      if (size === 'medium') return '32px';
-      return 'auto';
-    })()}`,
-    height: size === 'small' ? '28px' : '32px',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transitionProperty: 'background, box-shadow',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease-out',
-    verticalAlign: 'top',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    opacity: disabled ? 0.5 : 1,
-    margin: 0,
-    fontSize: `${theme.typography.size.s1}px`,
-    fontWeight: theme.typography.weight.bold,
-    lineHeight: '1',
-    background: `${(() => {
-      if (variant === 'solid') return theme.color.secondary;
-      if (variant === 'outline') return theme.button.background;
-      if (variant === 'ghost' && active) return theme.background.hoverable;
-      return 'transparent';
-    })()}`,
-    color: `${(() => {
-      if (variant === 'solid') return theme.color.lightest;
-      if (variant === 'outline') return theme.input.color;
-      if (variant === 'ghost' && active) return theme.color.secondary;
-      if (variant === 'ghost') return theme.color.mediumdark;
-      return theme.input.color;
-    })()}`,
-    boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
-    borderRadius: theme.input.borderRadius,
-
-    '&:hover': {
-      color: variant === 'ghost' ? theme.color.secondary : null,
-      background: `${(() => {
-        let bgColor = theme.color.secondary;
-        if (variant === 'solid') bgColor = theme.color.secondary;
-        if (variant === 'outline') bgColor = theme.button.background;
-
-        if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
-        return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-      })()}`,
-    },
-
-    '&:active': {
-      color: variant === 'ghost' ? theme.color.secondary : null,
-      background: `${(() => {
-        let bgColor = theme.color.secondary;
-        if (variant === 'solid') bgColor = theme.color.secondary;
-        if (variant === 'outline') bgColor = theme.button.background;
-
-        if (variant === 'ghost') return theme.background.hoverable;
-        return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
-      })()}`,
-    },
-
-    '&:focus': {
-      boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-      outline: 'none',
-    },
-  })
-);
-
-const IconWrapper = styled.div<{
-  isAnimating: boolean;
-  animation: IconButtonProps['onClickAnimation'];
-}>(({ theme, isAnimating, animation }) => ({
-  width: 14,
-  height: 14,
-  animation: isAnimating && animation !== 'none' && `${theme.animation[animation]} 1000ms ease-out`,
-}));
diff --git a/code/ui/components/src/new/Input/Input.stories.tsx b/code/ui/components/src/new/Input/Input.stories.tsx
deleted file mode 100644
index 8130f39aa72..00000000000
--- a/code/ui/components/src/new/Input/Input.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Input } from './Input';
-
-const meta: Meta<typeof Input> = {
-  title: 'Input',
-  component: Input,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Input>;
-
-export const Base: Story = {
-  args: {
-    placeholder: 'Hello World',
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    ...Base.args,
-    value: 'Hello World',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Base.args,
-    disabled: true,
-  },
-};
diff --git a/code/ui/components/src/new/Input/Input.tsx b/code/ui/components/src/new/Input/Input.tsx
deleted file mode 100644
index da10006c960..00000000000
--- a/code/ui/components/src/new/Input/Input.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-
-interface InputProps {
-  disabled?: boolean;
-  placeholder?: string;
-  value?: string;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(({ ...props }, ref) => {
-  return <StyledInput ref={ref} {...props} />;
-});
-
-Input.displayName = 'Input';
-
-const StyledInput = styled.input(({ theme }) => ({
-  // resets
-  appearance: 'none',
-  border: '0 none',
-  display: 'block',
-  margin: ' 0',
-  position: 'relative',
-
-  // styles
-  width: '100%',
-  height: '32px',
-  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
-  color: theme.input.color,
-  background: theme.input.background,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
-  padding: '6px 10px',
-  boxSizing: 'border-box',
-  lineHeight: '20px',
-
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none',
-  },
-
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5,
-  },
-
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`,
-  },
-
-  '&::placeholder': {
-    color: theme.textMutedColor,
-    opacity: 1,
-  },
-}));
diff --git a/code/ui/components/src/new/Select/Select.stories.tsx b/code/ui/components/src/new/Select/Select.stories.tsx
deleted file mode 100644
index 452fe113fba..00000000000
--- a/code/ui/components/src/new/Select/Select.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Select } from './Select';
-
-const meta: Meta<typeof Select.Root> = {
-  title: 'Select',
-  component: Select.Root,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Select.Root>;
-
-export const Base: Story = {
-  args: {},
-  render: (_, { args }) => (
-    <div style={{ width: 400 }}>
-      <Select.Root {...args}>
-        <Select.Trigger>
-          <Select.Value placeholder="Select a fruit…" />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="Avocado">Avocado</Select.Item>
-          <Select.Item value="Banana">Banana</Select.Item>
-          <Select.Item value="Bilberry">Bilberry</Select.Item>
-          <Select.Item value="Blackberry">Blackberry</Select.Item>
-          <Select.Item value="Blackcurrant">Blackcurrant</Select.Item>
-          <Select.Item value="Black sapote">Black sapote</Select.Item>
-          <Select.Item value="Blueberry">Blueberry</Select.Item>
-          <Select.Item value="Boysenberry">Boysenberry</Select.Item>
-          <Select.Item value="Breadfruit">Breadfruit</Select.Item>
-          <Select.Item value="Cacao">Cacao</Select.Item>
-          <Select.Item value="Cactus pear">Cactus pear</Select.Item>
-          <Select.Item value="Canistel">Canistel</Select.Item>
-          <Select.Item value="Catmon">Catmon</Select.Item>
-          <Select.Item value="Cempedak">Cempedak</Select.Item>
-          <Select.Item value="Cherimoya">Cherimoya</Select.Item>
-          <Select.Item value="Cherry">Cherry</Select.Item>
-          <Select.Item value="Chico fruit">Chico fruit</Select.Item>
-          <Select.Item value="Cloudberry">Cloudberry</Select.Item>
-          <Select.Item value="Coco de mer">Coco de mer</Select.Item>
-          <Select.Item value="Coconut">Coconut</Select.Item>
-          <Select.Item value="Crab apple">Crab apple</Select.Item>
-          <Select.Item value="Cranberry">Cranberry</Select.Item>
-          <Select.Item value="Currant">Currant</Select.Item>
-          <Select.Item value="Damson">Damson</Select.Item>
-          <Select.Item value="Date">Date</Select.Item>
-          <Select.Item value="Dragonfruit">Dragonfruit</Select.Item>
-          <Select.Item value="Durian">Durian</Select.Item>
-          <Select.Item value="Elderberry">Elderberry</Select.Item>
-          <Select.Item value="Feijoa">Feijoa</Select.Item>
-          <Select.Item value="Fig">Fig</Select.Item>
-          <Select.Item value="Finger Lime">Finger Lime</Select.Item>
-          <Select.Item value="Gac Fruit">Gac Fruit</Select.Item>
-          <Select.Item value="Goji berry">Goji berry</Select.Item>
-          <Select.Item value="Gooseberry">Gooseberry</Select.Item>
-          <Select.Item value="Grape">Grape</Select.Item>
-          <Select.Item value="Raisin">Raisin</Select.Item>
-          <Select.Item value="Grapefruit">Grapefruit</Select.Item>
-          <Select.Item value="Grewia asiatica">Grewia asiatica</Select.Item>
-          <Select.Item value="Guava">Guava</Select.Item>
-          <Select.Item value="Guyabano">Guyabano</Select.Item>
-          <Select.Item value="Hala Fruit">Hala Fruit</Select.Item>
-          <Select.Item value="Honeyberry">Honeyberry</Select.Item>
-          <Select.Item value="Huckleberry">Huckleberry</Select.Item>
-          <Select.Item value="Jabuticaba">Jabuticaba</Select.Item>
-          <Select.Item value="Jackfruit">Jackfruit</Select.Item>
-          <Select.Item value="Jambul">Jambul</Select.Item>
-          <Select.Item value="Japanese plum">Japanese plum</Select.Item>
-          <Select.Item value="Jostaberry">Jostaberry</Select.Item>
-          <Select.Item value="Jujube">Jujube</Select.Item>
-          <Select.Item value="Juniper berry">Juniper berry</Select.Item>
-          <Select.Item value="Kaffir Lime">Kaffir Lime</Select.Item>
-          <Select.Item value="Kiwano">Kiwano</Select.Item>
-          <Select.Item value="Kiwifruit">Kiwifruit</Select.Item>
-          <Select.Item value="Kumquat">Kumquat</Select.Item>
-          <Select.Item value="Lanzones">Lanzones</Select.Item>
-          <Select.Item value="Lemon">Lemon</Select.Item>
-          <Select.Item value="Lime">Lime</Select.Item>
-          <Select.Item value="Loganberry">Loganberry</Select.Item>
-          <Select.Item value="Longan">Longan</Select.Item>
-          <Select.Item value="Loquat">Loquat</Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  ),
-};
diff --git a/code/ui/components/src/new/Select/Select.tsx b/code/ui/components/src/new/Select/Select.tsx
deleted file mode 100644
index 0ae60687743..00000000000
--- a/code/ui/components/src/new/Select/Select.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { styled } from '@storybook/theming';
-import { ExpandAlt } from './icons/ExpandAlt';
-import { Arrowup } from './icons/Arrowup';
-import { Arrowdown } from './icons/Arrowdown';
-import { Check } from './icons/Check';
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <StyledTrigger ref={ref} {...props}>
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ExpandAlt size={12} />
-    </SelectPrimitive.Icon>
-  </StyledTrigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <StyledContent ref={ref} {...props}>
-      <StyledScrollUpButton>
-        <Arrowup size={12} />
-      </StyledScrollUpButton>
-      <StyledViewport>{children}</StyledViewport>
-      <StyledScrollDownButton>
-        <Arrowdown size={12} />
-      </StyledScrollDownButton>
-    </StyledContent>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => <SelectPrimitive.Label ref={ref} {...props} />);
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <StyledItem ref={ref} {...props}>
-    <StyledItemIndicator>
-      <Check size={12} />
-    </StyledItemIndicator>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </StyledItem>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => <SelectPrimitive.Separator ref={ref} {...props} />);
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export const Select = {
-  Root: SelectPrimitive.Root,
-  Group: SelectPrimitive.Group,
-  Value: SelectPrimitive.Value,
-  Trigger: SelectTrigger,
-  Content: SelectContent,
-  Label: SelectLabel,
-  Item: SelectItem,
-  Separator: SelectSeparator,
-};
-
-const StyledTrigger = styled(SelectPrimitive.Trigger)(({ theme }) => ({
-  all: 'unset',
-  display: 'flex',
-  width: '100%',
-  height: '32px',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
-  color: theme.input.color,
-  background: theme.input.background,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
-  padding: '6px 10px',
-  boxSizing: 'border-box',
-  lineHeight: '20px',
-
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none',
-  },
-
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5,
-  },
-
-  '&[data-placeholder]': {
-    color: theme.textMutedColor,
-  },
-
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`,
-  },
-}));
-
-const StyledContent = styled(SelectPrimitive.Content)(({ theme }) => ({
-  boxSizing: 'border-box',
-  overflow: 'hidden',
-  backgroundColor: theme.input.background,
-  borderRadius: '6px',
-  border: theme.base === 'dark' ? `1px solid ${theme.input.border}` : '1px solid transparent',
-  width: '100%',
-  boxShadow:
-    '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
-}));
-
-const StyledViewport = styled(SelectPrimitive.Viewport)(() => ({
-  boxSizing: 'border-box',
-  width: '100%',
-  padding: '5px',
-}));
-
-const StyledScrollUpButton = styled(SelectPrimitive.ScrollUpButton)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '25px',
-  backgroundColor: theme.input.background,
-  color: theme.input.color,
-  cursor: 'default',
-}));
-
-const StyledScrollDownButton = styled(SelectPrimitive.ScrollDownButton)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '25px',
-  backgroundColor: theme.input.background,
-  color: theme.input.color,
-  cursor: 'default',
-}));
-
-const StyledItem = styled(SelectPrimitive.Item)(({ theme }) => ({
-  fontSize: '13px',
-  lineHeight: 1,
-  color: theme.input.color,
-  borderRadius: '3px',
-  display: 'flex',
-  alignItems: 'center',
-  height: '25px',
-  padding: '0 35px 0 25px',
-  position: 'relative',
-  userSelect: 'none',
-
-  '&[data-disabled]': {
-    color: 'red',
-    pointerEvents: 'none',
-  },
-
-  '&[data-highlighted]': {
-    outline: 'none',
-    backgroundColor: theme.barSelectedColor,
-    color: theme.barBg,
-  },
-}));
-
-const StyledItemIndicator = styled(SelectPrimitive.ItemIndicator)(() => ({
-  position: 'absolute',
-  left: 0,
-  width: '25px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
diff --git a/code/ui/components/src/new/Select/SelectItem.tsx b/code/ui/components/src/new/Select/SelectItem.tsx
deleted file mode 100644
index 6206e76095c..00000000000
--- a/code/ui/components/src/new/Select/SelectItem.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as RadixSelect from '@radix-ui/react-select';
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-
-interface SelectItemProps {
-  children: React.ReactNode;
-  value: string;
-}
-
-const FakeIcon = styled.div(({ theme }) => ({
-  width: 12,
-  height: 12,
-  backgroundColor: theme.color.mediumdark,
-}));
-
-export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <StyledItem {...props} ref={forwardedRef}>
-        <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
-        <StyledItemIndicator className="SelectItemIndicator">
-          <FakeIcon />
-        </StyledItemIndicator>
-      </StyledItem>
-    );
-  }
-);
-
-SelectItem.displayName = 'SelectItem';
-
-const StyledItem = styled(RadixSelect.Item)(() => ({
-  fontSize: '13px',
-  lineHeight: 1,
-  color: 'blue',
-  borderRadius: '3px',
-  display: 'flex',
-  alignItems: 'center',
-  height: '25px',
-  padding: '0 35px 0 25px',
-  position: 'relative',
-  userSelect: 'none',
-
-  '&[data-disabled]': {
-    color: 'red',
-    pointerEvents: 'none',
-  },
-
-  '&[data-highlighted]': {
-    outline: 'none',
-    backgroundColor: 'green',
-    color: 'white',
-  },
-}));
-
-const StyledItemIndicator = styled(RadixSelect.ItemIndicator)(() => ({
-  position: 'absolute',
-  left: 0,
-  width: '25px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-}));
diff --git a/code/ui/components/src/new/Select/icons/Arrowdown.tsx b/code/ui/components/src/new/Select/icons/Arrowdown.tsx
deleted file mode 100644
index d8437ca5d12..00000000000
--- a/code/ui/components/src/new/Select/icons/Arrowdown.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from './types';
-import { IconWrapper } from './IconWrapper';
-
-export const Arrowdown = (allProps: IconProps) => {
-  const { svgProps: props, ...restProps } = allProps;
-  return (
-    <IconWrapper
-      icon={
-        <svg
-          width="inherit"
-          height="inherit"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          <path
-            d="M1.146 5.604l5.5 5.5a.5.5 0 00.708 0l5.5-5.5a.5.5 0 00-.708-.708L7 10.043 1.854 4.896a.5.5 0 10-.708.708z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-      {...restProps}
-    />
-  );
-};
-
-export default Arrowdown;
diff --git a/code/ui/components/src/new/Select/icons/Arrowup.tsx b/code/ui/components/src/new/Select/icons/Arrowup.tsx
deleted file mode 100644
index 24f722e410a..00000000000
--- a/code/ui/components/src/new/Select/icons/Arrowup.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from './types';
-import { IconWrapper } from './IconWrapper';
-
-export const Arrowup = (allProps: IconProps) => {
-  const { svgProps: props, ...restProps } = allProps;
-  return (
-    <IconWrapper
-      icon={
-        <svg
-          width="inherit"
-          height="inherit"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          <path
-            d="M7.354 2.896l5.5 5.5a.5.5 0 01-.708.708L7 3.957 1.854 9.104a.5.5 0 11-.708-.708l5.5-5.5a.5.5 0 01.708 0z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-      {...restProps}
-    />
-  );
-};
-
-export default Arrowup;
diff --git a/code/ui/components/src/new/Select/icons/Check.tsx b/code/ui/components/src/new/Select/icons/Check.tsx
deleted file mode 100644
index 4d5beb1531a..00000000000
--- a/code/ui/components/src/new/Select/icons/Check.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from './types';
-import { IconWrapper } from './IconWrapper';
-
-export const Check = (allProps: IconProps) => {
-  const { svgProps: props, ...restProps } = allProps;
-  return (
-    <IconWrapper
-      icon={
-        <svg
-          width="inherit"
-          height="inherit"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          <path
-            d="M13.854 3.354a.5.5 0 00-.708-.708L5 10.793.854 6.646a.5.5 0 10-.708.708l4.5 4.5a.5.5 0 00.708 0l8.5-8.5z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-      {...restProps}
-    />
-  );
-};
-
-export default Check;
diff --git a/code/ui/components/src/new/Select/icons/ExpandAlt.tsx b/code/ui/components/src/new/Select/icons/ExpandAlt.tsx
deleted file mode 100644
index 7f0626adcbe..00000000000
--- a/code/ui/components/src/new/Select/icons/ExpandAlt.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from './types';
-import { IconWrapper } from './IconWrapper';
-
-export const ExpandAlt = (allProps: IconProps) => {
-  const { svgProps: props, ...restProps } = allProps;
-  return (
-    <IconWrapper
-      icon={
-        <svg
-          width="inherit"
-          height="inherit"
-          viewBox="0 0 14 14"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          {...props}
-        >
-          <path
-            d="M7.354.146l4 4a.5.5 0 01-.708.708L7 1.207 3.354 4.854a.5.5 0 11-.708-.708l4-4a.5.5 0 01.708 0zM11.354 9.146a.5.5 0 010 .708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 11.708-.708L7 12.793l3.646-3.647a.5.5 0 01.708 0z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-      {...restProps}
-    />
-  );
-};
-
-export default ExpandAlt;
diff --git a/code/ui/components/src/new/Select/icons/IconWrapper.tsx b/code/ui/components/src/new/Select/icons/IconWrapper.tsx
deleted file mode 100644
index a4c60d6709f..00000000000
--- a/code/ui/components/src/new/Select/icons/IconWrapper.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from './types';
-
-export const IconWrapper: React.FC<{ icon: React.ReactNode } & IconProps> = ({
-  icon,
-  color: colorProp,
-  size: sizeProp,
-  ...restProps
-}) => {
-  const color = colorProp || 'currentColor';
-  const size = sizeProp || '14px';
-
-  return (
-    <span
-      role="img"
-      aria-hidden="true"
-      style={{
-        color,
-        width: size,
-        height: size,
-        display: 'inline-flex',
-        fontSize: 'inherit',
-      }}
-      {...restProps}
-    >
-      {icon}
-    </span>
-  );
-};
diff --git a/code/ui/components/src/new/Select/icons/types.ts b/code/ui/components/src/new/Select/icons/types.ts
deleted file mode 100644
index 142493c5ee5..00000000000
--- a/code/ui/components/src/new/Select/icons/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type React from 'react';
-
-export type IconProps = {
-  /** Set icon fill color from design system */
-  color?: string;
-  /** Set width and height of icon in pixels */
-  size?: number;
-  /** Props to pass directly to svg element */
-  svgProps?: React.SVGProps<SVGSVGElement>;
-} & Omit<React.HTMLProps<HTMLSpanElement>, 'color' | 'size'>;
diff --git a/code/ui/components/src/new/Textarea/Textarea.stories.tsx b/code/ui/components/src/new/Textarea/Textarea.stories.tsx
deleted file mode 100644
index b23516d8f2b..00000000000
--- a/code/ui/components/src/new/Textarea/Textarea.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Textarea } from './Textarea';
-
-const meta: Meta<typeof Textarea> = {
-  title: 'Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-
-export const Base: Story = {
-  args: {
-    placeholder: 'Hello World',
-  },
-};
-
-export const Filled: Story = {
-  args: {
-    ...Base.args,
-    value:
-      'Self ocean ultimate reason faith virtues evil eternal-return moral strong superiority. Society will christian god holiest evil virtues ultimate salvation aversion victorious strong eternal-return. Ascetic pious hope selfish battle pinnacle revaluation passion ocean passion chaos reason intentions. Hope hatred pious superiority ascetic chaos ultimate mountains ideal. Superiority good abstract hatred holiest passion ultimate evil inexpedient joy. Salvation war salvation ideal decieve good law ascetic hatred transvaluation horror good. Zarathustra aversion pious truth burying evil inexpedient spirit virtues virtues hope salvation transvaluation. Enlightenment chaos ascetic salvation god holiest play marvelous oneself ocean. Enlightenment faithful dead truth insofar fearful madness love.Inexpedient war hatred superiority disgust justice superiority. Chaos justice contradict christian decieve god. Revaluation suicide hope enlightenment decrepit truth hatred insofar gains sexuality merciful ocean revaluation depths. Revaluation ocean superiority endless of evil horror. Ultimate salvation joy good good endless will horror aversion superiority depths. Evil hatred ideal pious joy reason.',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Base.args,
-    disabled: true,
-  },
-};
diff --git a/code/ui/components/src/new/Textarea/Textarea.tsx b/code/ui/components/src/new/Textarea/Textarea.tsx
deleted file mode 100644
index 15a156bf8b1..00000000000
--- a/code/ui/components/src/new/Textarea/Textarea.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
-import TextareaAutoResize from 'react-textarea-autosize';
-
-interface TextareaProps {
-  disabled?: boolean;
-  placeholder?: string;
-  value?: string;
-}
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(({ ...props }, ref) => {
-  return <StyledTextarea ref={ref} {...props} />;
-});
-
-Textarea.displayName = 'Textarea';
-
-const StyledTextarea = styled(TextareaAutoResize)(({ theme }) => ({
-  // resets
-  appearance: 'none',
-  border: '0 none',
-  margin: ' 0',
-  position: 'relative',
-
-  // styles
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  height: '32px',
-  transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
-  color: theme.input.color,
-  background: theme.input.background,
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
-  padding: '6px 10px',
-  boxSizing: 'border-box',
-  minHeight: 32,
-  lineHeight: '20px',
-
-  '&:focus': {
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
-    outline: 'none',
-  },
-
-  '&[disabled]': {
-    cursor: 'not-allowed',
-    opacity: 0.5,
-  },
-
-  '&:-webkit-autofill': {
-    WebkitBoxShadow: `0 0 0 3em ${theme.color.lightest} inset`,
-  },
-
-  '&::placeholder': {
-    color: theme.textMutedColor,
-    opacity: 1,
-  },
-}));
diff --git a/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx b/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx
deleted file mode 100644
index d50a8f2bab2..00000000000
--- a/code/ui/components/src/new/Toolbar/Toolbar.stories.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
-
-import { Toolbar } from './Toolbar';
-import { IconButton } from '../IconButton/IconButton';
-import { Button } from '../Button/Button';
-
-const meta: Meta<typeof Toolbar.Root> = {
-  title: 'Toolbar',
-  component: Toolbar.Root,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Toolbar.Root>;
-
-export const Base: Story = {
-  args: {
-    hasPadding: true,
-    borderTop: false,
-    borderBottom: true,
-  },
-  render: (_, { args }) => (
-    <Toolbar.Root {...args}>
-      <Toolbar.Left>
-        <Toolbar.ToogleGroup type="single">
-          <Toolbar.ToggleItem value="item1">
-            <IconButton icon="Sync" size="small" variant="ghost" onClickAnimation="rotate360" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Zoom" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="ZoomOut" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="ZoomReset" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-        </Toolbar.ToogleGroup>
-        <Toolbar.Separator />
-        <Toolbar.ToogleGroup type="single">
-          <Toolbar.ToggleItem value="item1">
-            <IconButton icon="Photo" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Grid" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Grow" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-        </Toolbar.ToogleGroup>
-        <Toolbar.Separator />
-        <Toolbar.ToogleGroup type="single">
-          <Toolbar.ToggleItem value="item1">
-            <Button icon="CircleHollow" size="small" variant="ghost">
-              Theme
-            </Button>
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Ruler" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Outline" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-        </Toolbar.ToogleGroup>
-      </Toolbar.Left>
-      <Toolbar.Right>
-        <Toolbar.ToogleGroup type="single">
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Expand" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="ShareAlt" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-          <Toolbar.ToggleItem value="item2">
-            <IconButton icon="Link" size="small" variant="ghost" />
-          </Toolbar.ToggleItem>
-        </Toolbar.ToogleGroup>
-      </Toolbar.Right>
-    </Toolbar.Root>
-  ),
-};
-
-export const NoMargin: Story = {
-  args: {
-    ...Base.args,
-    hasPadding: false,
-  },
-  render: Base.render,
-};
-
-export const BorderTop: Story = {
-  args: {
-    ...Base.args,
-    borderTop: true,
-    borderBottom: false,
-  },
-  render: Base.render,
-};
-
-export const BorderBottom: Story = {
-  args: {
-    ...Base.args,
-    borderTop: false,
-    borderBottom: true,
-  },
-  render: Base.render,
-};
-
-export const BorderTopBottom: Story = {
-  args: {
-    ...Base.args,
-    borderTop: true,
-    borderBottom: true,
-  },
-  render: Base.render,
-};
diff --git a/code/ui/components/src/new/Toolbar/Toolbar.tsx b/code/ui/components/src/new/Toolbar/Toolbar.tsx
deleted file mode 100644
index 827011ba06f..00000000000
--- a/code/ui/components/src/new/Toolbar/Toolbar.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { ComponentPropsWithoutRef, ElementRef } from 'react';
-import React, { forwardRef } from 'react';
-import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import { styled } from '@storybook/theming';
-
-interface RootProps extends ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> {
-  hasPadding?: boolean;
-  borderBottom?: boolean;
-  borderTop?: boolean;
-}
-
-const ToolbarRoot = forwardRef<ElementRef<typeof ToolbarPrimitive.Root>, RootProps>(
-  ({ className, children, ...props }, ref) => (
-    <StyledRoot ref={ref} {...props}>
-      {children}
-    </StyledRoot>
-  )
-);
-ToolbarRoot.displayName = ToolbarPrimitive.Root.displayName;
-
-const ToolbarSeparator = React.forwardRef<
-  ElementRef<typeof ToolbarPrimitive.Separator>,
-  ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>
->(({ className, ...props }, ref) => <StyledSeparator ref={ref} {...props} />);
-ToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName;
-
-const ToolbarToggleGroup = React.forwardRef<
-  ElementRef<typeof ToolbarPrimitive.ToggleGroup>,
-  ToolbarPrimitive.ToolbarToggleGroupSingleProps | ToolbarPrimitive.ToolbarToggleGroupMultipleProps
->(({ className, ...props }, ref) => <StyledToggleGroup ref={ref} {...props} />);
-ToolbarToggleGroup.displayName = ToolbarPrimitive.ToggleGroup.displayName;
-
-const ToolbarToggleItem = React.forwardRef<
-  ElementRef<typeof ToolbarPrimitive.ToggleItem>,
-  ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem>
->(({ className, ...props }, ref) => <ToolbarPrimitive.ToggleItem ref={ref} {...props} asChild />);
-ToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName;
-
-const StyledRoot = styled(ToolbarPrimitive.Root)<RootProps>(
-  ({ theme, hasPadding = true, borderBottom = true, borderTop = false }) => ({
-    display: 'flex',
-    padding: hasPadding ? '0 10px' : 0,
-    justifyContent: 'space-between',
-    height: 40,
-    borderBottom: borderBottom ? `1px solid ${theme.appBorderColor}` : 'none',
-    borderTop: borderTop ? `1px solid ${theme.appBorderColor}` : 'none',
-    boxSizing: 'border-box',
-    backgroundColor: theme.barBg,
-  })
-);
-
-const StyledSeparator = styled(ToolbarPrimitive.Separator)(({ theme }) => ({
-  width: 1,
-  height: 20,
-  backgroundColor: theme.appBorderColor,
-}));
-
-const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup)({
-  display: 'flex',
-  gap: 5,
-  alignItems: 'center',
-});
-
-const Left = styled.div({
-  display: 'flex',
-  gap: 5,
-  alignItems: 'center',
-});
-
-const Right = styled.div({
-  display: 'flex',
-  gap: 5,
-  alignItems: 'center',
-});
-
-export const Toolbar = {
-  Root: ToolbarRoot,
-  Left,
-  Right,
-  ToogleGroup: ToolbarToggleGroup,
-  ToggleItem: ToolbarToggleItem,
-  Separator: ToolbarSeparator,
-};
diff --git a/code/ui/components/src/new/utils/types.ts b/code/ui/components/src/new/utils/types.ts
deleted file mode 100644
index f5713d0b347..00000000000
--- a/code/ui/components/src/new/utils/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import type React from 'react';
-
-export type PropsOf<T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>> =
-  JSX.LibraryManagedAttributes<T, React.ComponentPropsWithRef<T>>;

From 141a1ba3958c088829ab0c0c82eafa0c4040c99f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:47:39 +0200
Subject: [PATCH 5/9] remove the bundler entry

---
 code/ui/components/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 376a6727e58..13438d2e302 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -98,8 +98,7 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.ts",
-      "./src/experimantal.ts"
+      "./src/index.ts"
     ],
     "platform": "neutral"
   },

From c9dfbc6de977640bbe543d20ce1ac51181a9070d Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Mon, 21 Aug 2023 16:54:04 +0200
Subject: [PATCH 6/9] move `legacy` to `components` as it won't get replaced.

---
 .../ActionBar/ActionBar.stories.tsx           |   0
 .../ActionBar/ActionBar.tsx                   |   0
 .../Badge/Badge.stories.tsx                   |   0
 .../{legacy => components}/Badge/Badge.tsx    |   0
 .../Button/Button.stories.tsx                 |   0
 .../{legacy => components}/Button/Button.tsx  |   0
 .../Colors/SideBySide.tsx                     |   0
 .../Colors/colorpalette.mdx                   |   0
 .../ErrorFormatter/ErrorFormatter.stories.tsx |   0
 .../ErrorFormatter/ErrorFormatter.tsx         |   0
 .../Loader/Loader.stories.tsx                 |   0
 .../{legacy => components}/Loader/Loader.tsx  |   0
 .../ScrollArea/GlobalScrollAreaStyles.tsx     |   0
 .../ScrollArea/OverlayScrollbars.tsx          |   0
 .../ScrollArea/ScrollArea.stories.tsx         |   0
 .../ScrollArea/ScrollArea.tsx                 |   0
 .../Zoom/Zoom.stories.tsx                     |   0
 .../src/{legacy => components}/Zoom/Zoom.tsx  |   0
 .../Zoom/ZoomElement.tsx                      |   0
 .../Zoom/ZoomIFrame.tsx                       |   0
 .../addon-panel/addon-panel.tsx               |   0
 .../src/{legacy => components}/bar/bar.tsx    |   0
 .../bar/button.stories.tsx                    |   0
 .../src/{legacy => components}/bar/button.tsx |   0
 .../{legacy => components}/bar/separator.tsx  |   0
 .../brand/StorybookIcon.stories.tsx           |   0
 .../brand/StorybookIcon.tsx                   |   0
 .../brand/StorybookLogo.stories.tsx           |   0
 .../brand/StorybookLogo.tsx                   |   0
 .../clipboard/ClipboardCode.tsx               |   0
 .../form/field/field.tsx                      |   0
 .../form/form.stories.tsx                     |   0
 .../src/{legacy => components}/form/index.tsx |   0
 .../form/input/input.tsx                      |   0
 .../icon/icon.stories.tsx                     |   0
 .../src/{legacy => components}/icon/icon.tsx  |   0
 .../src/{legacy => components}/icon/icons.tsx |   0
 .../src/{legacy => components}/icon/svg.tsx   |   0
 .../placeholder/placeholder.stories.tsx       |   0
 .../placeholder/placeholder.tsx               |   0
 .../shared/animation.ts                       |   0
 .../spaced/Spaced.stories.tsx                 |   0
 .../{legacy => components}/spaced/Spaced.tsx  |   0
 .../syntaxhighlighter/formatter.test.ts       |   0
 .../syntaxhighlighter/formatter.ts            |   0
 .../lazy-syntaxhighlighter.tsx                |   0
 .../syntaxhighlighter-types.ts                |   0
 .../syntaxhighlighter.stories.tsx             |   0
 .../syntaxhighlighter/syntaxhighlighter.tsx   |   0
 .../tabs/tabs.helpers.tsx                     |   0
 .../tabs/tabs.hooks.tsx                       |   0
 .../tabs/tabs.stories.tsx                     |   0
 .../src/{legacy => components}/tabs/tabs.tsx  |   0
 .../tooltip/ListItem.stories.tsx              |   0
 .../tooltip/ListItem.tsx                      |   0
 .../tooltip/Tooltip.stories.tsx               |   0
 .../tooltip/Tooltip.tsx                       |   0
 .../tooltip/TooltipLinkList.stories.tsx       |   0
 .../tooltip/TooltipLinkList.tsx               |   0
 .../tooltip/TooltipMessage.stories.tsx        |   0
 .../tooltip/TooltipMessage.tsx                |   0
 .../tooltip/TooltipNote.stories.tsx           |   0
 .../tooltip/TooltipNote.tsx                   |   0
 .../tooltip/WithTooltip.stories.tsx           |   0
 .../tooltip/WithTooltip.tsx                   |   0
 .../tooltip/assets/ellipse.png                | Bin
 .../tooltip/lazy-WithTooltip.tsx              |   0
 .../typography/DocumentFormatting.tsx         |   0
 .../typography/DocumentFormattingSample.mdx   |   0
 .../typography/DocumentWrapper.stories.tsx    |   0
 .../typography/DocumentWrapper.tsx            |   0
 .../typography/ResetWrapper.tsx               |   0
 .../typography/components.tsx                 |   0
 .../typography/elements/A.tsx                 |   0
 .../typography/elements/Blockquote.tsx        |   0
 .../typography/elements/Code.tsx              |   0
 .../typography/elements/DL.tsx                |   0
 .../typography/elements/Div.tsx               |   0
 .../typography/elements/H1.tsx                |   0
 .../typography/elements/H2.tsx                |   0
 .../typography/elements/H3.tsx                |   0
 .../typography/elements/H4.tsx                |   0
 .../typography/elements/H5.tsx                |   0
 .../typography/elements/H6.tsx                |   0
 .../typography/elements/HR.tsx                |   0
 .../typography/elements/Img.tsx               |   0
 .../typography/elements/LI.tsx                |   0
 .../typography/elements/Link.tsx              |   0
 .../typography/elements/OL.tsx                |   0
 .../typography/elements/P.tsx                 |   0
 .../typography/elements/Pre.tsx               |   0
 .../typography/elements/Span.tsx              |   0
 .../typography/elements/TT.tsx                |   0
 .../typography/elements/Table.tsx             |   0
 .../typography/elements/UL.tsx                |   0
 .../typography/lib/common.tsx                 |   0
 .../typography/lib/isReactChildString.tsx     |   0
 .../typography/link/link.stories.tsx          |   0
 .../typography/link/link.test.tsx             |   0
 .../typography/link/link.tsx                  |   0
 .../typography/typography.stories.mdx         |   0
 .../utils/getStoryHref.ts                     |   0
 code/ui/components/src/index.ts               | 118 +++++++++---------
 103 files changed, 59 insertions(+), 59 deletions(-)
 rename code/ui/components/src/{legacy => components}/ActionBar/ActionBar.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ActionBar/ActionBar.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Badge/Badge.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Badge/Badge.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Button/Button.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Button/Button.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Colors/SideBySide.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Colors/colorpalette.mdx (100%)
 rename code/ui/components/src/{legacy => components}/ErrorFormatter/ErrorFormatter.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ErrorFormatter/ErrorFormatter.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Loader/Loader.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Loader/Loader.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ScrollArea/GlobalScrollAreaStyles.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ScrollArea/OverlayScrollbars.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ScrollArea/ScrollArea.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/ScrollArea/ScrollArea.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Zoom/Zoom.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Zoom/Zoom.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Zoom/ZoomElement.tsx (100%)
 rename code/ui/components/src/{legacy => components}/Zoom/ZoomIFrame.tsx (100%)
 rename code/ui/components/src/{legacy => components}/addon-panel/addon-panel.tsx (100%)
 rename code/ui/components/src/{legacy => components}/bar/bar.tsx (100%)
 rename code/ui/components/src/{legacy => components}/bar/button.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/bar/button.tsx (100%)
 rename code/ui/components/src/{legacy => components}/bar/separator.tsx (100%)
 rename code/ui/components/src/{legacy => components}/brand/StorybookIcon.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/brand/StorybookIcon.tsx (100%)
 rename code/ui/components/src/{legacy => components}/brand/StorybookLogo.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/brand/StorybookLogo.tsx (100%)
 rename code/ui/components/src/{legacy => components}/clipboard/ClipboardCode.tsx (100%)
 rename code/ui/components/src/{legacy => components}/form/field/field.tsx (100%)
 rename code/ui/components/src/{legacy => components}/form/form.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/form/index.tsx (100%)
 rename code/ui/components/src/{legacy => components}/form/input/input.tsx (100%)
 rename code/ui/components/src/{legacy => components}/icon/icon.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/icon/icon.tsx (100%)
 rename code/ui/components/src/{legacy => components}/icon/icons.tsx (100%)
 rename code/ui/components/src/{legacy => components}/icon/svg.tsx (100%)
 rename code/ui/components/src/{legacy => components}/placeholder/placeholder.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/placeholder/placeholder.tsx (100%)
 rename code/ui/components/src/{legacy => components}/shared/animation.ts (100%)
 rename code/ui/components/src/{legacy => components}/spaced/Spaced.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/spaced/Spaced.tsx (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/formatter.test.ts (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/formatter.ts (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/lazy-syntaxhighlighter.tsx (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/syntaxhighlighter-types.ts (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/syntaxhighlighter.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/syntaxhighlighter/syntaxhighlighter.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tabs/tabs.helpers.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tabs/tabs.hooks.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tabs/tabs.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tabs/tabs.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/ListItem.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/ListItem.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/Tooltip.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/Tooltip.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipLinkList.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipLinkList.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipMessage.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipMessage.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipNote.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/TooltipNote.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/WithTooltip.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/WithTooltip.tsx (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/assets/ellipse.png (100%)
 rename code/ui/components/src/{legacy => components}/tooltip/lazy-WithTooltip.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/DocumentFormatting.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/DocumentFormattingSample.mdx (100%)
 rename code/ui/components/src/{legacy => components}/typography/DocumentWrapper.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/DocumentWrapper.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/ResetWrapper.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/components.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/A.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Blockquote.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Code.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/DL.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Div.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H1.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H2.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H3.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H4.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H5.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/H6.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/HR.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Img.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/LI.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Link.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/OL.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/P.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Pre.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Span.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/TT.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/Table.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/elements/UL.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/lib/common.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/lib/isReactChildString.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/link/link.stories.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/link/link.test.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/link/link.tsx (100%)
 rename code/ui/components/src/{legacy => components}/typography/typography.stories.mdx (100%)
 rename code/ui/components/src/{legacy => components}/utils/getStoryHref.ts (100%)

diff --git a/code/ui/components/src/legacy/ActionBar/ActionBar.stories.tsx b/code/ui/components/src/components/ActionBar/ActionBar.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ActionBar/ActionBar.stories.tsx
rename to code/ui/components/src/components/ActionBar/ActionBar.stories.tsx
diff --git a/code/ui/components/src/legacy/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ActionBar/ActionBar.tsx
rename to code/ui/components/src/components/ActionBar/ActionBar.tsx
diff --git a/code/ui/components/src/legacy/Badge/Badge.stories.tsx b/code/ui/components/src/components/Badge/Badge.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Badge/Badge.stories.tsx
rename to code/ui/components/src/components/Badge/Badge.stories.tsx
diff --git a/code/ui/components/src/legacy/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Badge/Badge.tsx
rename to code/ui/components/src/components/Badge/Badge.tsx
diff --git a/code/ui/components/src/legacy/Button/Button.stories.tsx b/code/ui/components/src/components/Button/Button.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Button/Button.stories.tsx
rename to code/ui/components/src/components/Button/Button.stories.tsx
diff --git a/code/ui/components/src/legacy/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Button/Button.tsx
rename to code/ui/components/src/components/Button/Button.tsx
diff --git a/code/ui/components/src/legacy/Colors/SideBySide.tsx b/code/ui/components/src/components/Colors/SideBySide.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Colors/SideBySide.tsx
rename to code/ui/components/src/components/Colors/SideBySide.tsx
diff --git a/code/ui/components/src/legacy/Colors/colorpalette.mdx b/code/ui/components/src/components/Colors/colorpalette.mdx
similarity index 100%
rename from code/ui/components/src/legacy/Colors/colorpalette.mdx
rename to code/ui/components/src/components/Colors/colorpalette.mdx
diff --git a/code/ui/components/src/legacy/ErrorFormatter/ErrorFormatter.stories.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ErrorFormatter/ErrorFormatter.stories.tsx
rename to code/ui/components/src/components/ErrorFormatter/ErrorFormatter.stories.tsx
diff --git a/code/ui/components/src/legacy/ErrorFormatter/ErrorFormatter.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ErrorFormatter/ErrorFormatter.tsx
rename to code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx
diff --git a/code/ui/components/src/legacy/Loader/Loader.stories.tsx b/code/ui/components/src/components/Loader/Loader.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Loader/Loader.stories.tsx
rename to code/ui/components/src/components/Loader/Loader.stories.tsx
diff --git a/code/ui/components/src/legacy/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Loader/Loader.tsx
rename to code/ui/components/src/components/Loader/Loader.tsx
diff --git a/code/ui/components/src/legacy/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ScrollArea/GlobalScrollAreaStyles.tsx
rename to code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx
diff --git a/code/ui/components/src/legacy/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ScrollArea/OverlayScrollbars.tsx
rename to code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx
diff --git a/code/ui/components/src/legacy/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ScrollArea/ScrollArea.stories.tsx
rename to code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx
diff --git a/code/ui/components/src/legacy/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx
similarity index 100%
rename from code/ui/components/src/legacy/ScrollArea/ScrollArea.tsx
rename to code/ui/components/src/components/ScrollArea/ScrollArea.tsx
diff --git a/code/ui/components/src/legacy/Zoom/Zoom.stories.tsx b/code/ui/components/src/components/Zoom/Zoom.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Zoom/Zoom.stories.tsx
rename to code/ui/components/src/components/Zoom/Zoom.stories.tsx
diff --git a/code/ui/components/src/legacy/Zoom/Zoom.tsx b/code/ui/components/src/components/Zoom/Zoom.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Zoom/Zoom.tsx
rename to code/ui/components/src/components/Zoom/Zoom.tsx
diff --git a/code/ui/components/src/legacy/Zoom/ZoomElement.tsx b/code/ui/components/src/components/Zoom/ZoomElement.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Zoom/ZoomElement.tsx
rename to code/ui/components/src/components/Zoom/ZoomElement.tsx
diff --git a/code/ui/components/src/legacy/Zoom/ZoomIFrame.tsx b/code/ui/components/src/components/Zoom/ZoomIFrame.tsx
similarity index 100%
rename from code/ui/components/src/legacy/Zoom/ZoomIFrame.tsx
rename to code/ui/components/src/components/Zoom/ZoomIFrame.tsx
diff --git a/code/ui/components/src/legacy/addon-panel/addon-panel.tsx b/code/ui/components/src/components/addon-panel/addon-panel.tsx
similarity index 100%
rename from code/ui/components/src/legacy/addon-panel/addon-panel.tsx
rename to code/ui/components/src/components/addon-panel/addon-panel.tsx
diff --git a/code/ui/components/src/legacy/bar/bar.tsx b/code/ui/components/src/components/bar/bar.tsx
similarity index 100%
rename from code/ui/components/src/legacy/bar/bar.tsx
rename to code/ui/components/src/components/bar/bar.tsx
diff --git a/code/ui/components/src/legacy/bar/button.stories.tsx b/code/ui/components/src/components/bar/button.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/bar/button.stories.tsx
rename to code/ui/components/src/components/bar/button.stories.tsx
diff --git a/code/ui/components/src/legacy/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx
similarity index 100%
rename from code/ui/components/src/legacy/bar/button.tsx
rename to code/ui/components/src/components/bar/button.tsx
diff --git a/code/ui/components/src/legacy/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx
similarity index 100%
rename from code/ui/components/src/legacy/bar/separator.tsx
rename to code/ui/components/src/components/bar/separator.tsx
diff --git a/code/ui/components/src/legacy/brand/StorybookIcon.stories.tsx b/code/ui/components/src/components/brand/StorybookIcon.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/brand/StorybookIcon.stories.tsx
rename to code/ui/components/src/components/brand/StorybookIcon.stories.tsx
diff --git a/code/ui/components/src/legacy/brand/StorybookIcon.tsx b/code/ui/components/src/components/brand/StorybookIcon.tsx
similarity index 100%
rename from code/ui/components/src/legacy/brand/StorybookIcon.tsx
rename to code/ui/components/src/components/brand/StorybookIcon.tsx
diff --git a/code/ui/components/src/legacy/brand/StorybookLogo.stories.tsx b/code/ui/components/src/components/brand/StorybookLogo.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/brand/StorybookLogo.stories.tsx
rename to code/ui/components/src/components/brand/StorybookLogo.stories.tsx
diff --git a/code/ui/components/src/legacy/brand/StorybookLogo.tsx b/code/ui/components/src/components/brand/StorybookLogo.tsx
similarity index 100%
rename from code/ui/components/src/legacy/brand/StorybookLogo.tsx
rename to code/ui/components/src/components/brand/StorybookLogo.tsx
diff --git a/code/ui/components/src/legacy/clipboard/ClipboardCode.tsx b/code/ui/components/src/components/clipboard/ClipboardCode.tsx
similarity index 100%
rename from code/ui/components/src/legacy/clipboard/ClipboardCode.tsx
rename to code/ui/components/src/components/clipboard/ClipboardCode.tsx
diff --git a/code/ui/components/src/legacy/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx
similarity index 100%
rename from code/ui/components/src/legacy/form/field/field.tsx
rename to code/ui/components/src/components/form/field/field.tsx
diff --git a/code/ui/components/src/legacy/form/form.stories.tsx b/code/ui/components/src/components/form/form.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/form/form.stories.tsx
rename to code/ui/components/src/components/form/form.stories.tsx
diff --git a/code/ui/components/src/legacy/form/index.tsx b/code/ui/components/src/components/form/index.tsx
similarity index 100%
rename from code/ui/components/src/legacy/form/index.tsx
rename to code/ui/components/src/components/form/index.tsx
diff --git a/code/ui/components/src/legacy/form/input/input.tsx b/code/ui/components/src/components/form/input/input.tsx
similarity index 100%
rename from code/ui/components/src/legacy/form/input/input.tsx
rename to code/ui/components/src/components/form/input/input.tsx
diff --git a/code/ui/components/src/legacy/icon/icon.stories.tsx b/code/ui/components/src/components/icon/icon.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/icon/icon.stories.tsx
rename to code/ui/components/src/components/icon/icon.stories.tsx
diff --git a/code/ui/components/src/legacy/icon/icon.tsx b/code/ui/components/src/components/icon/icon.tsx
similarity index 100%
rename from code/ui/components/src/legacy/icon/icon.tsx
rename to code/ui/components/src/components/icon/icon.tsx
diff --git a/code/ui/components/src/legacy/icon/icons.tsx b/code/ui/components/src/components/icon/icons.tsx
similarity index 100%
rename from code/ui/components/src/legacy/icon/icons.tsx
rename to code/ui/components/src/components/icon/icons.tsx
diff --git a/code/ui/components/src/legacy/icon/svg.tsx b/code/ui/components/src/components/icon/svg.tsx
similarity index 100%
rename from code/ui/components/src/legacy/icon/svg.tsx
rename to code/ui/components/src/components/icon/svg.tsx
diff --git a/code/ui/components/src/legacy/placeholder/placeholder.stories.tsx b/code/ui/components/src/components/placeholder/placeholder.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/placeholder/placeholder.stories.tsx
rename to code/ui/components/src/components/placeholder/placeholder.stories.tsx
diff --git a/code/ui/components/src/legacy/placeholder/placeholder.tsx b/code/ui/components/src/components/placeholder/placeholder.tsx
similarity index 100%
rename from code/ui/components/src/legacy/placeholder/placeholder.tsx
rename to code/ui/components/src/components/placeholder/placeholder.tsx
diff --git a/code/ui/components/src/legacy/shared/animation.ts b/code/ui/components/src/components/shared/animation.ts
similarity index 100%
rename from code/ui/components/src/legacy/shared/animation.ts
rename to code/ui/components/src/components/shared/animation.ts
diff --git a/code/ui/components/src/legacy/spaced/Spaced.stories.tsx b/code/ui/components/src/components/spaced/Spaced.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/spaced/Spaced.stories.tsx
rename to code/ui/components/src/components/spaced/Spaced.stories.tsx
diff --git a/code/ui/components/src/legacy/spaced/Spaced.tsx b/code/ui/components/src/components/spaced/Spaced.tsx
similarity index 100%
rename from code/ui/components/src/legacy/spaced/Spaced.tsx
rename to code/ui/components/src/components/spaced/Spaced.tsx
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/formatter.test.ts b/code/ui/components/src/components/syntaxhighlighter/formatter.test.ts
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/formatter.test.ts
rename to code/ui/components/src/components/syntaxhighlighter/formatter.test.ts
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/formatter.ts b/code/ui/components/src/components/syntaxhighlighter/formatter.ts
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/formatter.ts
rename to code/ui/components/src/components/syntaxhighlighter/formatter.ts
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/lazy-syntaxhighlighter.tsx
rename to code/ui/components/src/components/syntaxhighlighter/lazy-syntaxhighlighter.tsx
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter-types.ts
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter-types.ts
rename to code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter-types.ts
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter.stories.tsx
rename to code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
diff --git a/code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
similarity index 100%
rename from code/ui/components/src/legacy/syntaxhighlighter/syntaxhighlighter.tsx
rename to code/ui/components/src/components/syntaxhighlighter/syntaxhighlighter.tsx
diff --git a/code/ui/components/src/legacy/tabs/tabs.helpers.tsx b/code/ui/components/src/components/tabs/tabs.helpers.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tabs/tabs.helpers.tsx
rename to code/ui/components/src/components/tabs/tabs.helpers.tsx
diff --git a/code/ui/components/src/legacy/tabs/tabs.hooks.tsx b/code/ui/components/src/components/tabs/tabs.hooks.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tabs/tabs.hooks.tsx
rename to code/ui/components/src/components/tabs/tabs.hooks.tsx
diff --git a/code/ui/components/src/legacy/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tabs/tabs.stories.tsx
rename to code/ui/components/src/components/tabs/tabs.stories.tsx
diff --git a/code/ui/components/src/legacy/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tabs/tabs.tsx
rename to code/ui/components/src/components/tabs/tabs.tsx
diff --git a/code/ui/components/src/legacy/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/ListItem.stories.tsx
rename to code/ui/components/src/components/tooltip/ListItem.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/ListItem.tsx
rename to code/ui/components/src/components/tooltip/ListItem.tsx
diff --git a/code/ui/components/src/legacy/tooltip/Tooltip.stories.tsx b/code/ui/components/src/components/tooltip/Tooltip.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/Tooltip.stories.tsx
rename to code/ui/components/src/components/tooltip/Tooltip.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/Tooltip.tsx b/code/ui/components/src/components/tooltip/Tooltip.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/Tooltip.tsx
rename to code/ui/components/src/components/tooltip/Tooltip.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipLinkList.stories.tsx
rename to code/ui/components/src/components/tooltip/TooltipLinkList.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipLinkList.tsx b/code/ui/components/src/components/tooltip/TooltipLinkList.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipLinkList.tsx
rename to code/ui/components/src/components/tooltip/TooltipLinkList.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipMessage.stories.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipMessage.stories.tsx
rename to code/ui/components/src/components/tooltip/TooltipMessage.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipMessage.tsx b/code/ui/components/src/components/tooltip/TooltipMessage.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipMessage.tsx
rename to code/ui/components/src/components/tooltip/TooltipMessage.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipNote.stories.tsx b/code/ui/components/src/components/tooltip/TooltipNote.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipNote.stories.tsx
rename to code/ui/components/src/components/tooltip/TooltipNote.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/TooltipNote.tsx b/code/ui/components/src/components/tooltip/TooltipNote.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/TooltipNote.tsx
rename to code/ui/components/src/components/tooltip/TooltipNote.tsx
diff --git a/code/ui/components/src/legacy/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/components/tooltip/WithTooltip.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/WithTooltip.stories.tsx
rename to code/ui/components/src/components/tooltip/WithTooltip.stories.tsx
diff --git a/code/ui/components/src/legacy/tooltip/WithTooltip.tsx b/code/ui/components/src/components/tooltip/WithTooltip.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/WithTooltip.tsx
rename to code/ui/components/src/components/tooltip/WithTooltip.tsx
diff --git a/code/ui/components/src/legacy/tooltip/assets/ellipse.png b/code/ui/components/src/components/tooltip/assets/ellipse.png
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/assets/ellipse.png
rename to code/ui/components/src/components/tooltip/assets/ellipse.png
diff --git a/code/ui/components/src/legacy/tooltip/lazy-WithTooltip.tsx b/code/ui/components/src/components/tooltip/lazy-WithTooltip.tsx
similarity index 100%
rename from code/ui/components/src/legacy/tooltip/lazy-WithTooltip.tsx
rename to code/ui/components/src/components/tooltip/lazy-WithTooltip.tsx
diff --git a/code/ui/components/src/legacy/typography/DocumentFormatting.tsx b/code/ui/components/src/components/typography/DocumentFormatting.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/DocumentFormatting.tsx
rename to code/ui/components/src/components/typography/DocumentFormatting.tsx
diff --git a/code/ui/components/src/legacy/typography/DocumentFormattingSample.mdx b/code/ui/components/src/components/typography/DocumentFormattingSample.mdx
similarity index 100%
rename from code/ui/components/src/legacy/typography/DocumentFormattingSample.mdx
rename to code/ui/components/src/components/typography/DocumentFormattingSample.mdx
diff --git a/code/ui/components/src/legacy/typography/DocumentWrapper.stories.tsx b/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/DocumentWrapper.stories.tsx
rename to code/ui/components/src/components/typography/DocumentWrapper.stories.tsx
diff --git a/code/ui/components/src/legacy/typography/DocumentWrapper.tsx b/code/ui/components/src/components/typography/DocumentWrapper.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/DocumentWrapper.tsx
rename to code/ui/components/src/components/typography/DocumentWrapper.tsx
diff --git a/code/ui/components/src/legacy/typography/ResetWrapper.tsx b/code/ui/components/src/components/typography/ResetWrapper.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/ResetWrapper.tsx
rename to code/ui/components/src/components/typography/ResetWrapper.tsx
diff --git a/code/ui/components/src/legacy/typography/components.tsx b/code/ui/components/src/components/typography/components.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/components.tsx
rename to code/ui/components/src/components/typography/components.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/A.tsx b/code/ui/components/src/components/typography/elements/A.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/A.tsx
rename to code/ui/components/src/components/typography/elements/A.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Blockquote.tsx b/code/ui/components/src/components/typography/elements/Blockquote.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Blockquote.tsx
rename to code/ui/components/src/components/typography/elements/Blockquote.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Code.tsx b/code/ui/components/src/components/typography/elements/Code.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Code.tsx
rename to code/ui/components/src/components/typography/elements/Code.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/DL.tsx b/code/ui/components/src/components/typography/elements/DL.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/DL.tsx
rename to code/ui/components/src/components/typography/elements/DL.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Div.tsx b/code/ui/components/src/components/typography/elements/Div.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Div.tsx
rename to code/ui/components/src/components/typography/elements/Div.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H1.tsx b/code/ui/components/src/components/typography/elements/H1.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H1.tsx
rename to code/ui/components/src/components/typography/elements/H1.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H2.tsx b/code/ui/components/src/components/typography/elements/H2.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H2.tsx
rename to code/ui/components/src/components/typography/elements/H2.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H3.tsx b/code/ui/components/src/components/typography/elements/H3.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H3.tsx
rename to code/ui/components/src/components/typography/elements/H3.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H4.tsx b/code/ui/components/src/components/typography/elements/H4.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H4.tsx
rename to code/ui/components/src/components/typography/elements/H4.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H5.tsx b/code/ui/components/src/components/typography/elements/H5.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H5.tsx
rename to code/ui/components/src/components/typography/elements/H5.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/H6.tsx b/code/ui/components/src/components/typography/elements/H6.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/H6.tsx
rename to code/ui/components/src/components/typography/elements/H6.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/HR.tsx b/code/ui/components/src/components/typography/elements/HR.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/HR.tsx
rename to code/ui/components/src/components/typography/elements/HR.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Img.tsx b/code/ui/components/src/components/typography/elements/Img.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Img.tsx
rename to code/ui/components/src/components/typography/elements/Img.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/LI.tsx b/code/ui/components/src/components/typography/elements/LI.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/LI.tsx
rename to code/ui/components/src/components/typography/elements/LI.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Link.tsx b/code/ui/components/src/components/typography/elements/Link.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Link.tsx
rename to code/ui/components/src/components/typography/elements/Link.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/OL.tsx b/code/ui/components/src/components/typography/elements/OL.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/OL.tsx
rename to code/ui/components/src/components/typography/elements/OL.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/P.tsx b/code/ui/components/src/components/typography/elements/P.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/P.tsx
rename to code/ui/components/src/components/typography/elements/P.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Pre.tsx b/code/ui/components/src/components/typography/elements/Pre.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Pre.tsx
rename to code/ui/components/src/components/typography/elements/Pre.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Span.tsx b/code/ui/components/src/components/typography/elements/Span.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Span.tsx
rename to code/ui/components/src/components/typography/elements/Span.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/TT.tsx b/code/ui/components/src/components/typography/elements/TT.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/TT.tsx
rename to code/ui/components/src/components/typography/elements/TT.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/Table.tsx b/code/ui/components/src/components/typography/elements/Table.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/Table.tsx
rename to code/ui/components/src/components/typography/elements/Table.tsx
diff --git a/code/ui/components/src/legacy/typography/elements/UL.tsx b/code/ui/components/src/components/typography/elements/UL.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/elements/UL.tsx
rename to code/ui/components/src/components/typography/elements/UL.tsx
diff --git a/code/ui/components/src/legacy/typography/lib/common.tsx b/code/ui/components/src/components/typography/lib/common.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/lib/common.tsx
rename to code/ui/components/src/components/typography/lib/common.tsx
diff --git a/code/ui/components/src/legacy/typography/lib/isReactChildString.tsx b/code/ui/components/src/components/typography/lib/isReactChildString.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/lib/isReactChildString.tsx
rename to code/ui/components/src/components/typography/lib/isReactChildString.tsx
diff --git a/code/ui/components/src/legacy/typography/link/link.stories.tsx b/code/ui/components/src/components/typography/link/link.stories.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/link/link.stories.tsx
rename to code/ui/components/src/components/typography/link/link.stories.tsx
diff --git a/code/ui/components/src/legacy/typography/link/link.test.tsx b/code/ui/components/src/components/typography/link/link.test.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/link/link.test.tsx
rename to code/ui/components/src/components/typography/link/link.test.tsx
diff --git a/code/ui/components/src/legacy/typography/link/link.tsx b/code/ui/components/src/components/typography/link/link.tsx
similarity index 100%
rename from code/ui/components/src/legacy/typography/link/link.tsx
rename to code/ui/components/src/components/typography/link/link.tsx
diff --git a/code/ui/components/src/legacy/typography/typography.stories.mdx b/code/ui/components/src/components/typography/typography.stories.mdx
similarity index 100%
rename from code/ui/components/src/legacy/typography/typography.stories.mdx
rename to code/ui/components/src/components/typography/typography.stories.mdx
diff --git a/code/ui/components/src/legacy/utils/getStoryHref.ts b/code/ui/components/src/components/utils/getStoryHref.ts
similarity index 100%
rename from code/ui/components/src/legacy/utils/getStoryHref.ts
rename to code/ui/components/src/components/utils/getStoryHref.ts
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index f0a15962f3f..44934fc3ad0 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -3,91 +3,91 @@
 
 import type { ElementType } from 'react';
 import { createElement, forwardRef } from 'react';
-import * as typography from './legacy/typography/components';
-
-export { A } from './legacy/typography/elements/A';
-export { Blockquote } from './legacy/typography/elements/Blockquote';
-export { Code } from './legacy/typography/elements/Code';
-export { Div } from './legacy/typography/elements/Div';
-export { DL } from './legacy/typography/elements/DL';
-export { H1 } from './legacy/typography/elements/H1';
-export { H2 } from './legacy/typography/elements/H2';
-export { H3 } from './legacy/typography/elements/H3';
-export { H4 } from './legacy/typography/elements/H4';
-export { H5 } from './legacy/typography/elements/H5';
-export { H6 } from './legacy/typography/elements/H6';
-export { HR } from './legacy/typography/elements/HR';
-export { Img } from './legacy/typography/elements/Img';
-export { LI } from './legacy/typography/elements/LI';
-export { OL } from './legacy/typography/elements/OL';
-export { P } from './legacy/typography/elements/P';
-export { Pre } from './legacy/typography/elements/Pre';
-export { Span } from './legacy/typography/elements/Span';
-export { Table } from './legacy/typography/elements/Table';
-export { TT } from './legacy/typography/elements/TT';
-export { UL } from './legacy/typography/elements/UL';
-export { Badge } from './legacy/Badge/Badge';
+import * as typography from './components/typography/components';
+
+export { A } from './components/typography/elements/A';
+export { Blockquote } from './components/typography/elements/Blockquote';
+export { Code } from './components/typography/elements/Code';
+export { Div } from './components/typography/elements/Div';
+export { DL } from './components/typography/elements/DL';
+export { H1 } from './components/typography/elements/H1';
+export { H2 } from './components/typography/elements/H2';
+export { H3 } from './components/typography/elements/H3';
+export { H4 } from './components/typography/elements/H4';
+export { H5 } from './components/typography/elements/H5';
+export { H6 } from './components/typography/elements/H6';
+export { HR } from './components/typography/elements/HR';
+export { Img } from './components/typography/elements/Img';
+export { LI } from './components/typography/elements/LI';
+export { OL } from './components/typography/elements/OL';
+export { P } from './components/typography/elements/P';
+export { Pre } from './components/typography/elements/Pre';
+export { Span } from './components/typography/elements/Span';
+export { Table } from './components/typography/elements/Table';
+export { TT } from './components/typography/elements/TT';
+export { UL } from './components/typography/elements/UL';
+export { Badge } from './components/Badge/Badge';
 
 // Typography
-export { Link } from './legacy/typography/link/link';
-export { DocumentWrapper } from './legacy/typography/DocumentWrapper';
+export { Link } from './components/typography/link/link';
+export { DocumentWrapper } from './components/typography/DocumentWrapper';
 export type {
   SyntaxHighlighterFormatTypes,
   SyntaxHighlighterProps,
   SyntaxHighlighterRendererProps,
-} from './legacy/syntaxhighlighter/syntaxhighlighter-types';
-export { SyntaxHighlighter } from './legacy/syntaxhighlighter/lazy-syntaxhighlighter';
-export { createCopyToClipboardFunction } from './legacy/syntaxhighlighter/syntaxhighlighter';
+} from './components/syntaxhighlighter/syntaxhighlighter-types';
+export { SyntaxHighlighter } from './components/syntaxhighlighter/lazy-syntaxhighlighter';
+export { createCopyToClipboardFunction } from './components/syntaxhighlighter/syntaxhighlighter';
 
 // UI
-export { ActionBar } from './legacy/ActionBar/ActionBar';
-export { Spaced } from './legacy/spaced/Spaced';
-export { Placeholder } from './legacy/placeholder/placeholder';
-export { ScrollArea } from './legacy/ScrollArea/ScrollArea';
-export { Zoom } from './legacy/Zoom/Zoom';
-export type { ActionItem } from './legacy/ActionBar/ActionBar';
-export { ErrorFormatter } from './legacy/ErrorFormatter/ErrorFormatter';
+export { ActionBar } from './components/ActionBar/ActionBar';
+export { Spaced } from './components/spaced/Spaced';
+export { Placeholder } from './components/placeholder/placeholder';
+export { ScrollArea } from './components/ScrollArea/ScrollArea';
+export { Zoom } from './components/Zoom/Zoom';
+export type { ActionItem } from './components/ActionBar/ActionBar';
+export { ErrorFormatter } from './components/ErrorFormatter/ErrorFormatter';
 
 // Forms
-export { Button } from './legacy/Button/Button';
-export { Form } from './legacy/form/index';
+export { Button } from './components/Button/Button';
+export { Form } from './components/form/index';
 
 // Tooltips
-export { WithTooltip, WithTooltipPure } from './legacy/tooltip/lazy-WithTooltip';
-export { TooltipMessage } from './legacy/tooltip/TooltipMessage';
-export { TooltipNote } from './legacy/tooltip/TooltipNote';
+export { WithTooltip, WithTooltipPure } from './components/tooltip/lazy-WithTooltip';
+export { TooltipMessage } from './components/tooltip/TooltipMessage';
+export { TooltipNote } from './components/tooltip/TooltipNote';
 export {
   TooltipLinkList,
   type Link as TooltipLinkListLink,
-} from './legacy/tooltip/TooltipLinkList';
-export { default as ListItem } from './legacy/tooltip/ListItem';
+} from './components/tooltip/TooltipLinkList';
+export { default as ListItem } from './components/tooltip/ListItem';
 
 // Toolbar and subcomponents
-export { Tabs, TabsState, TabBar, TabWrapper } from './legacy/tabs/tabs';
-export { IconButton, IconButtonSkeleton, TabButton } from './legacy/bar/button';
-export { Separator, interleaveSeparators } from './legacy/bar/separator';
-export { Bar, FlexBar } from './legacy/bar/bar';
-export { AddonPanel } from './legacy/addon-panel/addon-panel';
+export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs';
+export { IconButton, IconButtonSkeleton, TabButton } from './components/bar/button';
+export { Separator, interleaveSeparators } from './components/bar/separator';
+export { Bar, FlexBar } from './components/bar/bar';
+export { AddonPanel } from './components/addon-panel/addon-panel';
 
 // Graphics
-export type { IconsProps } from './legacy/icon/icon';
-export { Icons, Symbols } from './legacy/icon/icon';
-export { icons } from './legacy/icon/icons';
-export { StorybookLogo } from './legacy/brand/StorybookLogo';
-export { StorybookIcon } from './legacy/brand/StorybookIcon';
+export type { IconsProps } from './components/icon/icon';
+export { Icons, Symbols } from './components/icon/icon';
+export { icons } from './components/icon/icons';
+export { StorybookLogo } from './components/brand/StorybookLogo';
+export { StorybookIcon } from './components/brand/StorybookIcon';
 
 // Loader
-export { Loader } from './legacy/Loader/Loader';
+export { Loader } from './components/Loader/Loader';
 
 // Utils
-export { getStoryHref } from './legacy/utils/getStoryHref';
+export { getStoryHref } from './components/utils/getStoryHref';
 
-export * from './legacy/typography/DocumentFormatting';
-export * from './legacy/typography/ResetWrapper';
+export * from './components/typography/DocumentFormatting';
+export * from './components/typography/ResetWrapper';
 
-export { withReset, codeCommon } from './legacy/typography/lib/common';
+export { withReset, codeCommon } from './components/typography/lib/common';
 
-export { ClipboardCode } from './legacy/clipboard/ClipboardCode';
+export { ClipboardCode } from './components/clipboard/ClipboardCode';
 
 // eslint-disable-next-line prefer-destructuring
 export const components = typography.components;

From 9459c6f048e8bdddd6853ce83d50a5d3f09a7ca6 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 15:57:05 +0200
Subject: [PATCH 7/9] remove

---
 code/ui/components/package.json | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 13438d2e302..71d1425a6b5 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -44,9 +44,6 @@
       ],
       "html": [
         "dist/html.d.ts"
-      ],
-      "experimental": [
-        "dist/experimantal.d.ts"
       ]
     }
   },

From 337e4f6eaa6406a6e2a38a1a30e31138f57ead59 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 16:45:52 +0200
Subject: [PATCH 8/9] fixes

---
 code/ui/.storybook/main.ts                     |  6 +-----
 .../components/ArgsTable/ArgsTable.stories.tsx | 18 ++++++++++++++++--
 .../blocks/src/components/ArgsTable/Empty.tsx  |  5 +++--
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index b21c8b0f941..5f979898a5c 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -6,16 +6,12 @@ import type { StorybookConfig } from '../../frameworks/react-vite';
 const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 
 const allStories = [
-  {
-    directory: '../components/src/new',
-    titlePrefix: '@core-ui',
-  },
   {
     directory: '../manager/src',
     titlePrefix: '@manager',
   },
   {
-    directory: '../components/src/legacy',
+    directory: '../components/src/components',
     titlePrefix: '@components',
   },
   {
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index d575ddda916..7831d894e94 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -1,17 +1,22 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { styled } from '@storybook/theming';
+import type { Meta, StoryObj } from '@storybook/react';
 import { ArgsTable, ArgsTableError } from './ArgsTable';
 import * as ArgRow from './ArgRow.stories';
 
-export default {
+const meta = {
   component: ArgsTable,
   title: 'Components/ArgsTable/ArgsTable',
   args: {
     updateArgs: action('updateArgs'),
     resetArgs: action('resetArgs'),
   },
-};
+} satisfies Meta<typeof ArgsTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
 const propsSection = {
   category: 'props ',
 };
@@ -145,6 +150,15 @@ export const Empty = {
   },
 };
 
+export const EmptyInsideAddonPanel: Story = {
+  args: {
+    inAddonPanel: true,
+  },
+  parameters: {
+    layout: 'centered',
+  },
+};
+
 export const WithDefaultExpandedArgs = {
   args: {
     rows: {
diff --git a/code/ui/blocks/src/components/ArgsTable/Empty.tsx b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
index 6cc4dbd4fe7..7fa211bffc0 100644
--- a/code/ui/blocks/src/components/ArgsTable/Empty.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/Empty.tsx
@@ -42,10 +42,11 @@ const Description = styled.div(({ theme }) => ({
   color: theme.textMutedColor,
 }));
 
-const Links = styled.div({
+const Links = styled.div(({ theme }) => ({
   display: 'flex',
+  fontSize: theme.typography.size.s2 - 1,
   gap: 25,
-});
+}));
 
 const Divider = styled.div(({ theme }) => ({
   width: 1,

From 4337792202045035c7b0c47adb8ad947975d3756 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 22 Aug 2023 17:00:53 +0200
Subject: [PATCH 9/9] make types sound

---
 code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx | 1 +
 code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index 7831d894e94..39ed63dc629 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -152,6 +152,7 @@ export const Empty = {
 
 export const EmptyInsideAddonPanel: Story = {
   args: {
+    isLoading: false,
     inAddonPanel: true,
   },
   parameters: {
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
index b28206becc4..120cc7a2136 100644
--- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -210,7 +210,7 @@ interface ArgsTableErrorProps {
 }
 
 export interface ArgsTableLoadingProps {
-  isLoading: true;
+  isLoading: boolean;
 }
 
 export type ArgsTableProps = ArgsTableOptionProps &