@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,126 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  ToastProvider as ToastProviderPrimitive,
+  type ToastProviderProps as ToastProviderPrimitiveProps,
+  ToastViewport as ToastViewportPrimitive,
+  type ToastViewportProps as ToastViewportPrimitiveProps,
+  Root as ToastRootPrimitive,
+  type ToastProps as ToastRootPrimitiveProps,
+  ToastTitle as ToastTitlePrimitive,
+  type ToastTitleProps as ToastTitlePrimitiveProps,
+  ToastDescription as ToastDescriptionPrimitive,
+  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
+  ToastAction as ToastActionPrimitive,
+  type ToastActionProps as ToastActionPrimitiveProps,
+  ToastClose as ToastClosePrimitive,
+  type ToastCloseProps as ToastClosePrimitiveProps,
+} from '@radix-ui/react-toast';
+import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { DensityProvider } from '../DensityProvider';
+import { ElevationProvider } from '../ElevationProvider';
+
+type ToastProviderProps = ToastProviderPrimitiveProps;
+
+const ToastProvider: FunctionComponent<ToastProviderProps> = ToastProviderPrimitive;
+
+type ToastViewportProps = ThemedClassName<ToastViewportPrimitiveProps>;
+
+const ToastViewport = forwardRef<HTMLOListElement, ToastViewportProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ToastViewportPrimitive className={tx('toast.viewport', 'toast-viewport', {}, classNames)} ref={forwardedRef} />
+  );
+});
+
+type ToastRootProps = ThemedClassName<ToastRootPrimitiveProps>;
+
+const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
+      <ElevationProvider elevation='chrome'>
+        <DensityProvider density='fine'>{children}</DensityProvider>
+      </ElevationProvider>
+    </ToastRootPrimitive>
+  );
+});
+
+type ToastBodyProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
+
+const ToastBody = forwardRef<HTMLDivElement, ToastBodyProps>(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root = asChild ? Slot : Primitive.div;
+  return <Root {...props} className={tx('toast.body', 'toast__body', {}, classNames)} ref={forwardedRef} />;
+});
+
+type ToastTitleProps = ThemedClassName<ToastTitlePrimitiveProps>;
+
+const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : ToastTitlePrimitive;
+    return <Root {...props} className={tx('toast.title', 'toast__title', {}, classNames)} ref={forwardedRef} />;
+  },
+);
+
+type ToastDescriptionProps = ThemedClassName<ToastDescriptionPrimitiveProps>;
+
+const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : ToastDescriptionPrimitive;
+    return (
+      <Root {...props} className={tx('toast.description', 'toast__description', {}, classNames)} ref={forwardedRef} />
+    );
+  },
+);
+
+type ToastActionsProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
+
+const ToastActions = forwardRef<HTMLDivElement, ToastActionsProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return <Root {...props} className={tx('toast.actions', 'toast__actions', {}, classNames)} ref={forwardedRef} />;
+  },
+);
+
+type ToastActionProps = ToastActionPrimitiveProps;
+
+const ToastAction: FunctionComponent<ToastActionProps> = ToastActionPrimitive;
+
+type ToastCloseProps = ToastClosePrimitiveProps;
+
+const ToastClose: FunctionComponent<ToastCloseProps> = ToastClosePrimitive;
+
+export const Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root: ToastRoot,
+  Body: ToastBody,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  Action: ToastAction,
+  Close: ToastClose,
+};
+
+export type {
+  ToastProviderProps,
+  ToastViewportProps,
+  ToastRootProps,
+  ToastBodyProps,
+  ToastTitleProps,
+  ToastDescriptionProps,
+  ToastActionsProps,
+  ToastActionProps,
+  ToastCloseProps,
+};

package/src/components/Toast/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Toast';

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { ArrowClockwise, Bug, FileJs, FileTs, TextB, TextItalic, TextUnderline } from '@phosphor-icons/react';
+import React from 'react';
+
+import { Toolbar } from './Toolbar';
+import { Toggle } from '../Buttons';
+import { Select } from '../Select';
+
+type StorybookToolbarProps = {};
+
+const StorybookToolbar = (props: StorybookToolbarProps) => {
+  return (
+    <Toolbar.Root>
+      {/* TODO(burdon): Should be fixed width (regardless of selection). */}
+      <Select.Root>
+        <Toolbar.Button asChild>
+          <Select.TriggerButton placeholder={'Select value'} />
+        </Toolbar.Button>
+        <Select.Portal>
+          <Select.Content>
+            <Select.Viewport>
+              <Select.Option value={'a'}>A</Select.Option>
+              <Select.Option value={'b'}>B</Select.Option>
+              <Select.Option value={'c'}>C</Select.Option>
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+      {/* TODO(burdon): Highlight is cyan. */}
+      {/* TODO(burdon): Show vertical divider by default. */}
+      {/* TODO(burdon): Icon sizes should adapt to density. */}
+      <Toolbar.ToggleGroup type='multiple'>
+        <Toolbar.ToggleGroupItem value='a'>
+          <TextB />
+        </Toolbar.ToggleGroupItem>
+        <Toolbar.ToggleGroupItem value='b'>
+          <TextItalic />
+        </Toolbar.ToggleGroupItem>
+        <Toolbar.ToggleGroupItem value='c'>
+          <TextUnderline />
+        </Toolbar.ToggleGroupItem>
+      </Toolbar.ToggleGroup>
+      {/* TODO(burdon): Highlight isn't shown. */}
+      <Toolbar.ToggleGroup type='single' defaultValue='a'>
+        <Toolbar.ToggleGroupItem value='a'>
+          <FileTs />
+        </Toolbar.ToggleGroupItem>
+        <Toolbar.ToggleGroupItem value='b'>
+          <FileJs />
+        </Toolbar.ToggleGroupItem>
+      </Toolbar.ToggleGroup>
+      <Toolbar.Button asChild>
+        <Toggle>
+          <Bug />
+        </Toggle>
+      </Toolbar.Button>
+      <Toolbar.Separator />
+      <Toolbar.Button>Test</Toolbar.Button>
+      <Toolbar.Button>
+        <ArrowClockwise />
+      </Toolbar.Button>
+    </Toolbar.Root>
+  );
+};
+
+export default {
+  component: StorybookToolbar,
+};
+
+export const Default = {
+  args: {},
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,99 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
+import React, { forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps } from '../Buttons';
+import { Link, type LinkProps } from '../Link';
+import { Separator, type SeparatorProps } from '../Separator';
+
+type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps>;
+
+const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ToolbarPrimitive.Root {...props} className={tx('toolbar.root', 'toolbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </ToolbarPrimitive.Root>
+  );
+});
+
+type ToolbarButtonProps = ButtonProps;
+
+const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {
+  return (
+    <ToolbarPrimitive.Button asChild>
+      <Button {...props} ref={forwardedRef} />
+    </ToolbarPrimitive.Button>
+  );
+});
+
+type ToolbarLinkProps = LinkProps;
+
+const ToolbarLink = forwardRef<HTMLAnchorElement, ToolbarLinkProps>((props, forwardedRef) => {
+  return (
+    <ToolbarPrimitive.Link asChild>
+      <Link {...props} ref={forwardedRef} />
+    </ToolbarPrimitive.Link>
+  );
+});
+
+type ToolbarToggleGroupProps = (
+  | Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, 'className'>
+  | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps, 'className'>
+) &
+  ButtonGroupProps;
+
+const ToolbarToggleGroup = forwardRef<HTMLDivElement, ToolbarToggleGroupProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToolbarPrimitive.ToolbarToggleGroup {...props} asChild>
+        <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
+      </ToolbarPrimitive.ToolbarToggleGroup>
+    );
+  },
+);
+
+type ToolbarToggleGroupItemProps = ToggleGroupItemProps;
+
+const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupItemProps>(
+  ({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
+        <Button {...{ variant, density, elevation, classNames, children }} ref={forwardedRef} />
+      </ToolbarPrimitive.ToolbarToggleItem>
+    );
+  },
+);
+
+type ToolbarSeparatorProps = SeparatorProps;
+
+const ToolbarSeparator = (props: SeparatorProps) => {
+  return (
+    <ToolbarPrimitive.Separator asChild>
+      <Separator orientation='vertical' {...props} />
+    </ToolbarPrimitive.Separator>
+  );
+};
+
+export const Toolbar = {
+  Root: ToolbarRoot,
+  Button: ToolbarButton,
+  Link: ToolbarLink,
+  ToggleGroup: ToolbarToggleGroup,
+  ToggleGroupItem: ToolbarToggleGroupItem,
+  Separator: ToolbarSeparator,
+};
+
+export type {
+  ToolbarRootProps,
+  ToolbarButtonProps,
+  ToolbarLinkProps,
+  ToolbarToggleGroupProps,
+  ToolbarToggleGroupItemProps,
+  ToolbarSeparatorProps,
+};

package/src/components/Toolbar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Toolbar';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Tooltip } from './Tooltip';
+import { Button } from '../Buttons';
+
+type StoryTooltipProps = {
+  content: string;
+};
+
+const StoryTooltip = ({ content }: StoryTooltipProps) => (
+  <Tooltip.Provider>
+    <Tooltip.Root defaultOpen>
+      <Tooltip.Trigger asChild>
+        <Button>Trigger tooltip</Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='right'>
+        <Tooltip.Arrow />
+        {content}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+);
+
+export default {
+  component: StoryTooltip,
+};
+
+export const Default = {
+  args: {
+    content: 'This is the tooltip content',
+  },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,84 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Provider as TooltipProviderPrimitive,
+  type TooltipProviderProps as TooltipProviderPrimitiveProps,
+  Root as TooltipRootPrimitive,
+  type TooltipProps as TooltipRootPrimitiveProps,
+  type TooltipContentProps as TooltipContentPrimitiveProps,
+  TooltipContent as TooltipContentPrimitive,
+  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
+  TooltipTrigger as TooltipTriggerPrimitive,
+  type TooltipPortalProps as TooltipPortalPrimitiveProps,
+  TooltipPortal as TooltipPortalPrimitive,
+  type TooltipArrowProps as TooltipArrowPrimitiveProps,
+  TooltipArrow as TooltipArrowPrimitive,
+} from '@radix-ui/react-tooltip';
+import React, { forwardRef, type FunctionComponent } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type TooltipProviderProps = TooltipProviderPrimitiveProps;
+
+const TooltipProvider: FunctionComponent<TooltipProviderProps> = TooltipProviderPrimitive;
+
+type TooltipRootProps = TooltipRootPrimitiveProps;
+
+const TooltipRoot: FunctionComponent<TooltipRootProps> = TooltipRootPrimitive;
+
+type TooltipPortalProps = TooltipPortalPrimitiveProps;
+
+const TooltipPortal = TooltipPortalPrimitive;
+
+type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
+
+const TooltipTrigger = TooltipTriggerPrimitive;
+
+type TooltipArrowProps = ThemedClassName<TooltipArrowPrimitiveProps>;
+
+const TooltipArrow = forwardRef<SVGSVGElement, TooltipArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <TooltipArrowPrimitive
+      {...props}
+      className={tx('tooltip.arrow', 'tooltip__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
+
+const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <TooltipContentPrimitive
+      sideOffset={4}
+      collisionPadding={8}
+      {...props}
+      className={tx('tooltip.content', 'tooltip', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+export const Tooltip = {
+  Provider: TooltipProvider,
+  Root: TooltipRoot,
+  Portal: TooltipPortal,
+  Trigger: TooltipTrigger,
+  Arrow: TooltipArrow,
+  Content: TooltipContent,
+};
+
+export type {
+  TooltipProviderProps,
+  TooltipRootProps,
+  TooltipPortalProps,
+  TooltipTriggerProps,
+  TooltipArrowProps,
+  TooltipContentProps,
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Tooltip';

package/src/components/index.ts

@@ -1,10 +1,30 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2022 DXOS.org
 //
 
-export * from './Clipboard';
-export * from './IdentityList';
-export * from './InvitationEmoji';
-export * from './InvitationList';
-export * from './PanelSeparator';
-export * from './SpaceList';
+export * from './Avatars';
+export * from './Breadcrumb';
+export * from './Buttons';
+export * from './Card';
+export * from './Center';
+export * from './ComboBox';
+export * from './Dialogs';
+export * from './DropdownMenu';
+export * from './Input';
+export * from './Link';
+export * from './List';
+export * from './Main';
+export * from './Message';
+export * from './Popover';
+export * from './ProgressBar';
+export * from './ScrollArea';
+export * from './Select';
+export * from './Separator';
+export * from './Tag';
+export * from './Toast';
+export * from './Toolbar';
+export * from './Tooltip';
+
+export * from './DensityProvider';
+export * from './ElevationProvider';
+export * from './ThemeProvider';

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './useDensityContext';
+export * from './useElevationContext';
+export * from './useTranslationsContext';
+export * from './useThemeContext';
+export * from './useVisualViewport';

package/src/hooks/useDensityContext.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { type Density } from '@dxos/react-ui-types';
+
+import { DensityContext } from '../components';
+
+export const useDensityContext = (propsDensity?: Density) => {
+  const { density } = useContext(DensityContext);
+  return propsDensity ?? density;
+};

package/src/hooks/useElevationContext.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { type Elevation } from '@dxos/react-ui-types';
+
+import { ElevationContext } from '../components';
+
+export const useElevationContext = (propsElevation?: Elevation) => {
+  const { elevation } = useContext(ElevationContext);
+  return propsElevation ?? elevation;
+};

package/src/hooks/useThemeContext.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { ThemeContext } from '../components';
+
+export const useThemeContext = () => useContext(ThemeContext);

package/src/hooks/useTranslationsContext.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { TranslationsContext } from '../components/ThemeProvider/TranslationsProvider';
+
+export const useTranslationsContext = () => useContext(TranslationsContext);

package/src/hooks/useVisualViewport.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
+  const [width, setWidth] = useState<number | null>(null);
+  const [height, setHeight] = useState<number | null>(null);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.visualViewport) {
+        setWidth(window.visualViewport.width);
+        setHeight(window.visualViewport.height);
+      }
+    };
+    window.visualViewport?.addEventListener('resize', handleResize);
+    handleResize();
+    return () => window.visualViewport?.removeEventListener('resize', handleResize);
+  }, deps ?? []);
+
+  return { width, height };
+};

package/src/index.ts

@@ -1,10 +1,12 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2023 DXOS.org
 //
 
+export type { TFunction } from 'i18next';
+export { useTranslation, Trans } from 'react-i18next';
+export * from '@dxos/react-ui-types';
+export * from '@dxos/react-hooks';
+
 export * from './components';
-export * from './composites';
-export * from './layouts';
-export * from './panels';
-export * from './styles';
-export * from './translations';
+export * from './hooks';
+export * from './util';

package/src/playground/Controls.stories.tsx

@@ -0,0 +1,90 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic } from '@phosphor-icons/react';
+import React, { useState } from 'react';
+
+import { createScenarios } from './helpers';
+import { Input, Select, Toggle, Toolbar } from '../components';
+
+const Story = () => {
+  const [checked, setChecked] = useState<boolean>(false);
+  const [select, setSelect] = useState<string>();
+
+  return (
+    <div className='flex flex-col gap-2'>
+      <Toolbar.Root>
+        {/* TODO(burdon): Should be fixed width (regardless of selection). */}
+        <Select.Root value={select} onValueChange={setSelect}>
+          <Toolbar.Button asChild>
+            <Select.TriggerButton placeholder={'Select value'} />
+          </Toolbar.Button>
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                <Select.Option value={'a'}>A</Select.Option>
+                <Select.Option value={'b'}>B</Select.Option>
+                <Select.Option value={'c'}>C</Select.Option>
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        {/* TODO(burdon): Highlight is cyan. */}
+        {/* TODO(burdon): Show vertical divider by default. */}
+        {/* TODO(burdon): Icon sizes should adapt to density. */}
+        <Toolbar.ToggleGroup type='multiple'>
+          <Toolbar.ToggleGroupItem value='a'>
+            <TextB />
+          </Toolbar.ToggleGroupItem>
+          <Toolbar.ToggleGroupItem value='b'>
+            <TextItalic />
+          </Toolbar.ToggleGroupItem>
+          <Toolbar.ToggleGroupItem value='c'>
+            <TextUnderline />
+          </Toolbar.ToggleGroupItem>
+        </Toolbar.ToggleGroup>
+        {/* TODO(burdon): Highlight isn't shown. */}
+        <Toolbar.ToggleGroup type='single' defaultValue='a'>
+          <Toolbar.ToggleGroupItem value='a'>
+            <FileTs />
+          </Toolbar.ToggleGroupItem>
+          <Toolbar.ToggleGroupItem value='b'>
+            <FileJs />
+          </Toolbar.ToggleGroupItem>
+        </Toolbar.ToggleGroup>
+        <Toolbar.Button asChild>
+          <Toggle>
+            <Bug />
+          </Toggle>
+        </Toolbar.Button>
+        {/* TODO(burdon): Should not be 'is-full' by default. */}
+        <Input.Root>
+          <Input.TextInput placeholder='Enter text...' />
+        </Input.Root>
+        {/* TODO(burdon): Checkbox collapsed. */}
+        <Input.Root>
+          <Input.Checkbox checked={checked} onCheckedChange={(value) => setChecked(!!value)} />
+          <Input.Label>Checkbox</Input.Label>
+        </Input.Root>
+        <Toolbar.Button>Test</Toolbar.Button>
+        <Toolbar.Button>
+          <ArrowClockwise />
+        </Toolbar.Button>
+      </Toolbar.Root>
+      <Input.Root>
+        <Input.TextArea placeholder='Enter text...' rows={3} classNames='resize-none' />
+      </Input.Root>
+    </div>
+  );
+};
+
+export default {
+  component: Story,
+};
+
+export const Default = {
+  render: createScenarios(Story),
+};