Updating all pngs

Author: cdedreuille

docs/addons/addon-types.mdx

@@ -15,7 +15,7 @@ UI-based addons allow you to customize Storybook's UI with the following element
 
 Panel addons allow you to add your own UI in Storybook's addon panel. This is the most common type of addon in the ecosystem. For example, the official [`@storybook/actions`](../essentials/actions.md) and [`@storybook/a11y`](https://github.com/storybookjs/storybook/tree/next/code/addons/a11y) use this pattern.
 
-![Storybook panel](./storybook-panel.png)
+![Storybook panel](../_assets/addons/storybook-panel.png)
 
 Use this boilerplate code to add a new `Panel` to Storybook's UI:
 
@@ -29,7 +29,7 @@ Use this boilerplate code to add a new `Panel` to Storybook's UI:
 
 Toolbar addons allow you to add your own custom tools in Storybook's Toolbar. For example, the official [`@storybook/backgrounds`](../essentials/backgrounds.md) and the [`@storybook/addon-outline`](../essentials/measure-and-outline.md#outline-addon) use this pattern.
 
-![Storybook toolbar addon](./storybook-toolbar.png)
+![Storybook toolbar addon](../_assets/addons/storybook-toolbar.png)
 
 Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 
@@ -51,7 +51,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 
 Tab addons allow you to create your own custom tabs in Storybook. For example, the official [@storybook/addon-docs](../writing-docs/index.md) uses this pattern.
 
-![Storybook tab addon](./storybook-tab.png)
+![Storybook tab addon](../_assets/addons/storybook-tab.png)
 
 Use this boilerplate code to add a new `Tab` to Storybook's UI:
 

docs/addons/index.mdx

@@ -24,7 +24,7 @@ The **Manager** is the UI responsible for rendering the:
 
 The **Preview** area is an `iframe` where your stories are rendered.
 
-![Storybook detailed window](./manager-preview.png)
+![Storybook detailed window](../_assets/addons/manager-preview.png)
 
 Because both elements run in their own separate `iframes`, they use a communication channel to keep in sync. For example, when you select a story in the Manager an event is dispatched across the channel notifying the Preview to render the story.
 

docs/addons/install-addons.mdx

@@ -45,7 +45,7 @@ Next, update `.storybook/main.js|ts` to the following:
 
 When you run Storybook, the accessibility testing addon will be enabled.
 
-![Storybook addon installed and registered](./storybook-addon-installed-registered.png)
+![Storybook addon installed and registered](../_assets/addons/storybook-addon-installed-registered.png)
 
 ### Removing addons
 

docs/addons/integration-catalog.mdx

@@ -83,7 +83,7 @@ Use the list below as a reference when filling in the values for both the `suppo
 
 The `package.json` above appears like below in the catalog. See an example of a production package.json [here](https://github.com/chromaui/storybook-outline/blob/main/package.json).
 
-![Storybook addon in the catalog](./addon-display.png)
+![Storybook addon in the catalog](../_assets/addons/addon-display.png)
 
 #### How long does it take for my addon to show up in the catalog?
 

docs/addons/writing-addons.mdx

@@ -138,7 +138,7 @@ Notice the `match` property. It allows you to control the view mode (story or do
 
 Run the `start` script to build and start Storybook and verify that the addon is registered correctly and showing in the UI.
 
-![Addon registered in the toolbar](./storybook-addon-initial-state.png)
+![Addon registered in the toolbar](../_assets/addons/storybook-addon-initial-state.png)
 
 ### Style the addon
 
@@ -270,7 +270,7 @@ Finally, run the following command to create a release for your addon. This will
 
 By default, the Addon Kit comes pre-configured with a GitHub Actions workflow, enabling you to automate the release management process. This ensures that the package is always up to date with the latest changes and that the changelog is updated accordingly. However, you'll need additional configuration to use your NPM and GitHub tokens to publish the package successfully. In your repository, click the **Settings** tab, then the **Secrets and variables** dropdown, followed by the **Actions** item. You should see the following screen:
 
-![GitHub secrets page](./github-secrets-screen.png)
+![GitHub secrets page](../_assets/addons/github-secrets-screen.png)
 
 Then, click the **New repository secret**, name it `NPM_TOKEN`, and paste the token you generated earlier. Whenever you merge a pull request to the default branch, the workflow will run and publish a new release, automatically incrementing the version number and updating the changelog.
 

docs/api/arg-types.mdx

@@ -11,7 +11,7 @@ You can also use argTypes to “annotate” args with information used by addons
 
 The most concrete realization of argTypes is the [`ArgTypes` doc block](./doc-block-argtypes.md) ([`Controls`](./doc-block-controls.md) is similar). Each row in the table corresponds to a single argType and the current value of that arg.
 
-![ArgTypes table](./doc-block-argtypes.png)
+![ArgTypes table](../_assets/api/doc-block-argtypes.png)
 
 ## Automatic argType inference
 

docs/api/doc-blocks/doc-block-argtypes.mdx

@@ -13,7 +13,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](./argtype
   If you’re looking for a dynamic table that shows a story’s current arg values for a story and supports users changing them, see the [`Controls`](./doc-block-controls.md) block instead.
 </Callout>
 
-![Screenshot of ArgTypes block](./doc-block-argtypes.png)
+![Screenshot of ArgTypes block](../_assets/doc-blocks/doc-block-argtypes.png)
 
 {/* prettier-ignore-start */}
 

docs/api/doc-blocks/doc-block-canvas.mdx

@@ -9,7 +9,7 @@ sidebar:
 
 The `Canvas` block is a wrapper around a [`Story`](./doc-block-story.md), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](./doc-block-source.md) snippets.
 
-![Screenshot of Canvas block](./doc-block-canvas.png)
+![Screenshot of Canvas block](../_assets/doc-blocks/doc-block-canvas.png)
 
 When using the Canvas block in MDX, it references a story with the `of` prop:
 

docs/api/doc-blocks/doc-block-colorpalette.mdx

@@ -9,7 +9,7 @@ sidebar:
 
 The `ColorPalette` block allows you to document all color-related items (e.g., swatches) used throughout your project.
 
-![Screenshot of ColorPalette and ColorItem blocks](./doc-block-colorpalette.png)
+![Screenshot of ColorPalette and ColorItem blocks](../_assets/doc-blocks/doc-block-colorpalette.png)
 
 {/* prettier-ignore-start */}
 

docs/api/doc-blocks/doc-block-controls.mdx

@@ -13,7 +13,7 @@ The `Controls` block can be used to show a dynamic table of args for a given sto
   If you’re looking for a static table that shows a component's arg types with no controls, see the [`ArgTypes`](./doc-block-argtypes.md) block instead.
 </Callout>
 
-![Screenshot of Controls block](./doc-block-controls.png)
+![Screenshot of Controls block](../_assets/doc-blocks/doc-block-controls.png)
 
 {/* prettier-ignore-start */}