Use new Canvas everywhere

.storybook/components/canvas/Canvas.tsx

@@ -8,7 +8,7 @@ export const Canvas = (props: Props) => (
         {...props}
         additionalActions={[
             {
-                title: "Open in Stackblitz",
+                title: "Open Orbiter Sandbox",
                 onClick: () => {
                     window.open(
                         "https://stackblitz.com/edit/orbiter-sandbox?file=src%2FComponent.tsx",

.storybook/components/source/Source.tsx

@@ -1,10 +1,14 @@
-import React, { ComponentProps } from "react";
+import { ComponentProps } from "react";
 import { Source as StorybookSource } from "@storybook/addon-docs";
 
 type SourceProps = ComponentProps<typeof StorybookSource>;
 
 export const Source = (props: SourceProps) => {
     const { language = "tsx", ...otherProps } = props;
 
-    return <StorybookSource language={language} dark {...otherProps} />;
+    return <StorybookSource
+        language={language}
+        dark
+        {...otherProps}
+    />;
 };

docs/features/color-schemes/ColorSchemes.mdx

@@ -1,6 +1,6 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs";
 import * as ColorSchemesStories from  "./ColorSchemes.stories.tsx";
-import { Source } from "@stories/components";
+import { Canvas, Source } from "@stories/components";
 
 <Meta of={ColorSchemesStories} />
 

docs/features/style-props/StyleProps.mdx

@@ -1,9 +1,9 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
+import { Meta } from "@storybook/addon-docs";
 import { Div } from "@components/html/index.ts";
 import { Paragraph } from "@components/typography/index.ts";
 import { PropsReferenceTable } from "./PropsReferenceTable.tsx";
 import * as StylePropsStories from  "./StyleProps.stories.tsx";
-import { Table, Source } from "@stories/components";
+import { Canvas, Table, Source } from "@stories/components";
 
 <Meta of={StylePropsStories} />
 

packages/components/src/accordion/docs/Accordion.mdx

@@ -1,6 +1,6 @@
 import { Accordion, InnerAccordion, InnerAccordionHeader, InnerAccordionPanel } from "@components/accordion/index.ts";
-import { ArgTypes, Meta, Story, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { Content, InnerContent } from "@components/placeholders/index.ts";
 import { H3, Text } from "@components/typography/index.ts";
 import { SparklesIcon } from "@hopper-ui/icons";

packages/components/src/alert/docs/Alert.mdx

@@ -1,6 +1,6 @@
 import { Alert, AlertTrigger, InnerAlert } from "@components/alert/index.ts";
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerContent } from "@components/placeholders/index.ts";
 import { InnerHeading } from "@components/typography/index.ts";
 import * as AlertStories from "./Alert.stories.tsx";

packages/components/src/autocomplete/docs/Autocomplete.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import { InnerAutocomplete } from "@components/autocomplete/index.ts";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import { InnerItem, InnerSection } from "@components/collection/index.ts";
 import * as AutocompleteStories from "./Autocomplete.stories.tsx";
 

packages/components/src/avatar/docs/Avatar.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import { InnerAvatar, InnerAvatarGroup, InnerDeletedAvatar, InnerAnonymousAvatar } from "@components/avatar/index.ts";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import * as AvatarStories from "./Avatar.stories.tsx";
 
 <Meta of={AvatarStories} />

packages/components/src/badge/docs/Badge.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import { InnerBadge } from "@components/badge/index.ts";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 
 import * as BadgeStories from "./Badge.stories.tsx";
 

packages/components/src/box/docs/Box.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerBox } from "@components/box/index.ts";
 import * as BoxStories from "./Box.stories.tsx";
 

packages/components/src/button/docs/Button.mdx

@@ -1,13 +1,13 @@
 import { SparklesIcon } from "@hopper-ui/icons";
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import {
     InnerButton,
     InnerButtonGroup,
     InnerIconButton,
     InnerToggleButton,
     InnerToggleIconButton
 } from "@components/button/index.ts";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import * as ButtonStories from "./Button.stories.tsx";
 
 <Meta of={ButtonStories} />

packages/components/src/button/docs/CrossButton.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerCrossButton } from "@components/button/index.ts";
 
 import * as CrossButtonStories from "./CrossButton.stories.tsx";

packages/components/src/card/docs/Card.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import { InnerCard } from "@components/card/index.ts";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerContent, InnerHeader } from "@components/placeholders/index.ts";
 import { InnerHeading } from "@components/typography/index.ts";
 import * as CardStories from "./Card.stories.tsx";

packages/components/src/checkbox/docs/Checkbox.mdx

@@ -1,6 +1,6 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
 import { InnerCheckbox, InnerCheckboxGroup } from "@components/checkbox/index.ts";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 
 import * as CheckboxStories from "./Checkbox.stories.tsx"
 

packages/components/src/counter/docs/Counter.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import { InnerCounter } from "@components/counter/index.ts";
 import * as CounterStories from "./Counter.stories.tsx";
 

packages/components/src/date-input/docs/DateInput.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerDateInput } from "@components/date-input/index.ts";
 
 import * as DateInputStories from "./DateInput.stories.tsx";

packages/components/src/date-input/docs/DateRangeInput.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerDateRangeInput } from "@components/date-input/index.ts";
 
 import * as DateRangeInputStories from "./DateRangeInput.stories.tsx";

packages/components/src/disclosure/docs/Disclosure.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerDisclosure } from "@components/disclosure/index.ts";
 import { InnerContent } from "@components/placeholders/index.ts";
 

packages/components/src/disclosure/docs/DisclosureArrow.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerDisclosureArrow } from "@components/disclosure/index.ts";
 
 import * as DisclosureArrowStories from "./DisclosureArrow.stories.tsx";

packages/components/src/divider/docs/Divider.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerDivider } from "@components/divider/index.ts";
 import * as DividerStories from "./Divider.stories.tsx";
 

packages/components/src/dot/docs/Dot.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo } from "@stories/components";
 import { InnerDot } from "@components/dot/index.ts";
 import { Inline } from "@components/layout/index.ts";
 import * as DotStories from "./Dot.stories.tsx";

packages/components/src/field/docs/Field.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import { InnerErrorMessage, InnerField, InnerGroupField, InnerHelpMessage, InnerLabel, InnerValidMessage } from "@components/field/index.ts";
 import * as FieldStories from "./Field.stories.tsx";
 

packages/components/src/form/docs/Form.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerFieldset, InnerForm } from "@components/form/index.ts";
 import * as FormStories from "./Form.stories.tsx";
 

packages/components/src/html/docs/address.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as AddressStories from "./address.stories.tsx";
 
 <Meta of={AddressStories} />

packages/components/src/html/docs/anchor.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as AStories from "./anchor.stories.tsx";
 
 <Meta of={AStories} />

packages/components/src/html/docs/article.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as ArticleStories from "./article.stories.tsx";
 
 <Meta of={ArticleStories} />

packages/components/src/html/docs/aside.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as AsideStories from "./aside.stories.tsx";
 
 <Meta of={AsideStories} />

packages/components/src/html/docs/button.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas,  Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as ButtonStories from "./button.stories.tsx";
 
 <Meta of={ButtonStories} />

packages/components/src/html/docs/div.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as DivStories from "./div.stories.tsx";
 
 <Meta of={DivStories} />

packages/components/src/html/docs/footer.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as FooterStories from "./footer.stories.tsx";
 
 <Meta of={FooterStories} />

packages/components/src/html/docs/header.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as HeaderStories from "./header.stories.tsx";
 
 <Meta of={HeaderStories} />

packages/components/src/html/docs/img.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Preview, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Preview, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as ImgStories from "./img.stories.tsx";
 
 <Meta of={ImgStories} />

packages/components/src/html/docs/input.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as InputStories from "./input.stories.tsx";
 
 <Meta of={InputStories} />

packages/components/src/html/docs/list.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as ListStories from "./list.stories.tsx";
 
 <Meta of={ListStories} />

packages/components/src/html/docs/main.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as MainStories from "./main.stories.tsx";
 
 <Meta of={MainStories} />

packages/components/src/html/docs/nav.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as NavStories from "./nav.stories.tsx";
 
 <Meta of={NavStories} />

packages/components/src/html/docs/section.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as SectionStories from "./section.stories.tsx";
 
 <Meta of={SectionStories} />

packages/components/src/html/docs/span.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as SpanStories from "./span.stories.tsx";
 
 <Meta of={SpanStories} />

packages/components/src/html/docs/table.mdx

@@ -1,5 +1,5 @@
-import { ComponentInfo, Link, Preview, Tagline } from "@stories/components";
-import { Canvas, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Link, Preview, Tagline } from "@stories/components";
+import { Meta } from "@storybook/addon-docs";
 import * as TableStories from "./table.stories.tsx";
 
 <Meta of={TableStories} />

packages/components/src/illustrated-message/docs/IllustratedMessage.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import { InnerIllustratedMessage } from "@components/illustrated-message/index.ts";
 
 import * as IllustratedMessageStories from "./IllustratedMessage.stories.tsx";

packages/components/src/illustration/docs/Illustration.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerIllustration } from "@components/illustration/index.ts";
 import * as IllustrationStories from "./Illustration.stories.tsx";
 

packages/components/src/image/docs/Image.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerImage, InnerSvgImage } from "@components/image/index.ts";
 
 import * as ImageStories from "./Image.stories.tsx";

packages/components/src/input-group/docs/InputGroup.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Meta, Canvas } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerInputGroup, InnerTextAddon, InputGroup } from "@components/input-group/index.ts";
 
 import * as InputGroupStories from "./InputGroup.stories.tsx";

packages/components/src/layout/docs/Flex.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerFlex, InnerInline, InnerStack } from "@components/layout/index.ts";
 import * as FlexStories from "./Flex.stories.tsx";
 

packages/components/src/layout/docs/Grid.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Tagline } from "@stories/components";
 import { InnerGrid } from "@components/layout/index.ts";
 import * as GridStories from "./Grid.stories.tsx";
 

packages/components/src/link/docs/Link.mdx

@@ -1,5 +1,5 @@
-import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
-import { ComponentInfo, Preview, Tagline } from "@stories/components";
+import { ArgTypes, Meta } from "@storybook/addon-docs";
+import { Canvas, ComponentInfo, Preview, Tagline } from "@stories/components";
 import { InnerIconLink, InnerLink, InnerTextLink } from "@components/link/index.ts";
 import * as LinkStories from "./Link.stories.tsx";