@dxos/brand 0.6.2-main.8a232a5 → 0.6.2-main.bd4e5d2

package/dist/types/src/components/ComposerLogo/ComposerLogo.d.ts

@@ -0,0 +1,26 @@
+import React, { type FC, type HTMLAttributes } from 'react';
+export interface AnimationController {
+    spin: () => void;
+}
+export type ComposerLogoProps = {
+    animate?: boolean;
+    size?: number;
+    classNames?: string[];
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+export declare const ComposerLogo: React.ForwardRefExoticComponent<{
+    animate?: boolean | undefined;
+    size?: number | undefined;
+    classNames?: string[] | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & React.RefAttributes<AnimationController>>;
+/**
+ * Spinning Composer "C" logo.
+ */
+export declare const ComposerSpinner: FC<{
+    animate?: boolean;
+    size?: number;
+    gap?: number;
+    color?: string;
+    autoFade?: boolean;
+    onClick?: () => void;
+}>;
+//# sourceMappingURL=ComposerLogo.d.ts.map

package/dist/types/src/components/ComposerLogo/ComposerLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerLogo.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/ComposerLogo.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAEZ,KAAK,EAAE,EAEP,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAoCD,MAAM,MAAM,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,IAAI,CAChG,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,CACZ,CAAC;AAEF,eAAO,MAAM,YAAY;;;;uGAkCxB,CAAC;AAmDF;;GAEG;AAEH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CA6FA,CAAC"}

package/dist/types/src/components/ComposerLogo/ComposerLogo.stories.d.ts

@@ -0,0 +1,27 @@
+import '@dxosTheme';
+import '@fontsource/k2d/100-italic.css';
+import React from 'react';
+import { type AnimationController } from './ComposerLogo';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        animate?: boolean | undefined;
+        size?: number | undefined;
+        classNames?: string[] | undefined;
+    } & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & React.RefAttributes<AnimationController>>;
+    decorators: import("@storybook/react/*").Decorator[];
+};
+export default _default;
+export declare const Default: {
+    render: () => JSX.Element;
+};
+export declare const Colors: {
+    render: () => JSX.Element;
+};
+export declare const Pacman: {
+    render: () => JSX.Element;
+};
+export declare const Spinner: {
+    render: () => JSX.Element;
+};
+//# sourceMappingURL=ComposerLogo.stories.d.ts.map

package/dist/types/src/components/ComposerLogo/ComposerLogo.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerLogo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/ComposerLogo.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,gCAAgC,CAAC;AAGxC,OAAO,KAA2B,MAAM,OAAO,CAAC;AAMhD,OAAO,EAAE,KAAK,mBAAmB,EAAiC,MAAM,gBAAgB,CAAC;;;;;;;;;;AAOzF,wBAIE;AAWF,eAAO,MAAM,OAAO;;CAsCnB,CAAC;AAGF,eAAO,MAAM,MAAM;;CA0BlB,CAAC;AAEF,eAAO,MAAM,MAAM;;CAoClB,CAAC;AAuCF,eAAO,MAAM,OAAO;;CAQnB,CAAC"}

package/dist/types/src/components/ComposerLogo/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ComposerLogo';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/ComposerLogo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ComposerLogo/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ComposerLogo';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/dist/types/src/icons/Composer.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const Composer: Icon;
+//# sourceMappingURL=Composer.d.ts.map

package/dist/types/src/icons/Composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../../../src/icons/Composer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAY7E,eAAO,MAAM,QAAQ,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/DXNS.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const DXNS: Icon;
+//# sourceMappingURL=DXNS.d.ts.map

package/dist/types/src/icons/DXNS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DXNS.d.ts","sourceRoot":"","sources":["../../../../src/icons/DXNS.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAqC7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/DXOS.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const DXOS: Icon;
+//# sourceMappingURL=DXOS.d.ts.map

package/dist/types/src/icons/DXOS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DXOS.d.ts","sourceRoot":"","sources":["../../../../src/icons/DXOS.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAc7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/ECHO.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const ECHO: Icon;
+//# sourceMappingURL=ECHO.d.ts.map

package/dist/types/src/icons/ECHO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ECHO.d.ts","sourceRoot":"","sources":["../../../../src/icons/ECHO.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAc7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/HALO.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const HALO: Icon;
+//# sourceMappingURL=HALO.d.ts.map

package/dist/types/src/icons/HALO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HALO.d.ts","sourceRoot":"","sources":["../../../../src/icons/HALO.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAkB7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/KUBE.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const KUBE: Icon;
+//# sourceMappingURL=KUBE.d.ts.map

package/dist/types/src/icons/KUBE.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KUBE.d.ts","sourceRoot":"","sources":["../../../../src/icons/KUBE.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AA8C7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/MESH.d.ts

@@ -0,0 +1,3 @@
+import { type Icon } from '@phosphor-icons/react';
+export declare const MESH: Icon;
+//# sourceMappingURL=MESH.d.ts.map

package/dist/types/src/icons/MESH.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MESH.d.ts","sourceRoot":"","sources":["../../../../src/icons/MESH.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,IAAI,EAA6B,MAAM,uBAAuB,CAAC;AAe7E,eAAO,MAAM,IAAI,EAAE,IAAsF,CAAC"}

package/dist/types/src/icons/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Composer';
+export * from './DXNS';
+export * from './DXOS';
+export * from './ECHO';
+export * from './HALO';
+export * from './KUBE';
+export * from './MESH';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/icons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/icons/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './icons';
+export * from './logotypes';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/types/src/logotypes/DXOSHorizontalType.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+export declare const DXOSHorizontalType: FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=DXOSHorizontalType.d.ts.map

package/dist/types/src/logotypes/DXOSHorizontalType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DXOSHorizontalType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSHorizontalType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgCzD,CAAC"}

package/dist/types/src/logotypes/DXOSType.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+export declare const DXOSType: FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=DXOSType.d.ts.map

package/dist/types/src/logotypes/DXOSType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DXOSType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CA6B/C,CAAC"}

package/dist/types/src/logotypes/DXOSVerticalType.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+export declare const DXOSVerticalType: FC<{
+    className?: string;
+}>;
+//# sourceMappingURL=DXOSVerticalType.d.ts.map

package/dist/types/src/logotypes/DXOSVerticalType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DXOSVerticalType.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/DXOSVerticalType.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAgCvD,CAAC"}

package/dist/types/src/logotypes/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DXOSHorizontalType';
+export * from './DXOSType';
+export * from './DXOSVerticalType';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/logotypes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/logotypes/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/brand",
-  "version": "0.6.2-main.8a232a5",
+  "version": "0.6.2-main.bd4e5d2",
   "description": "DXOS brand assets.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,8 +9,14 @@
   "main": "dist/lib/browser/index.mjs",
   "types": "dist/types/src/index.d.ts",
   "files": [
-    "assets"
+    "assets",
+    "dist",
+    "src"
   ],
+  "dependencies": {
+    "d3": "^7.9.0",
+    "@dxos/react-ui-theme": "0.6.2-main.bd4e5d2"
+  },
   "devDependencies": {
     "@fontsource/k2d": "^5.0.18",
     "@phosphor-icons/react": "^2.1.5",
@@ -19,11 +25,11 @@
     "@storybook/components": "^7.0.6",
     "@storybook/core-events": "^7.0.6",
     "@storybook/theming": "^7.0.6",
+    "@types/d3": "^7.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-ui": "0.6.2-main.8a232a5",
-    "@dxos/storybook-utils": "0.6.2-main.8a232a5",
-    "@dxos/react-ui-theme": "0.6.2-main.8a232a5"
+    "@dxos/storybook-utils": "0.6.2-main.bd4e5d2",
+    "@dxos/react-ui": "0.6.2-main.bd4e5d2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",

package/src/Icons.stories.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { DXNS, DXOS, ECHO, HALO, KUBE, MESH } from './icons';
+
+const Icon = () => null;
+
+export default {
+  title: 'brand/Icons',
+  component: Icon,
+  decorators: [withTheme],
+};
+
+export const Default = {
+  render: () => {
+    const size = 'w-[128px] h-[128px]';
+    return (
+      <div className='absolute flex w-full h-full items-center justify-center'>
+        <div className='grid grid-cols-3 gap-16'>
+          <DXNS className={mx(size, 'fill-orange-700')} />
+          <DXOS className={mx(size, 'fill-teal-700')} />
+          <ECHO className={mx(size, 'fill-violet-700')} />
+          <HALO className={mx(size, 'fill-purple-700')} />
+          <KUBE className={mx(size, 'fill-sky-700')} />
+          <MESH className={mx(size, 'fill-green-700')} />
+        </div>
+      </div>
+    );
+  },
+};

package/src/Logotypes.stories.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type FC, type ReactNode } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { DXOSType, DXOSHorizontalType, DXOSVerticalType } from './logotypes';
+
+const Icon = () => null;
+
+export default {
+  title: 'brand/LogoTypes',
+  component: Icon,
+  decorators: [withTheme],
+};
+
+const Cell: FC<{ children: ReactNode; dark?: boolean }> = ({ children, dark }) => (
+  <div className={mx('flex p-4 justify-center rounded-lg', dark ? 'bg-zinc-800 fill-zinc-50' : 'bg-white')}>
+    {children}
+  </div>
+);
+
+export const Default = {
+  render: () => {
+    return (
+      <div className='absolute flex w-full h-full items-center justify-center'>
+        <div className='flex grid grid-cols-2 gap-16'>
+          <Cell>
+            <DXOSType className='w-[256px]' />
+          </Cell>
+          <Cell dark>
+            <DXOSType className='w-[128px]' />
+          </Cell>
+
+          <Cell>
+            <DXOSHorizontalType className='w-[256px]' />
+          </Cell>
+          <Cell dark>
+            <DXOSHorizontalType className='w-[128px]' />
+          </Cell>
+
+          <Cell>
+            <DXOSVerticalType className='w-[256px]' />
+          </Cell>
+          <Cell dark>
+            <DXOSVerticalType className='w-[128px]' />
+          </Cell>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/ComposerLogo/ComposerLogo.stories.tsx

@@ -0,0 +1,190 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import '@fontsource/k2d/100-italic.css';
+
+import { Ghost, Square } from '@phosphor-icons/react';
+import React, { useRef, useState } from 'react';
+
+import { Button } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { type AnimationController, ComposerLogo, ComposerSpinner } from './ComposerLogo';
+import { DXOS } from '../../icons';
+
+// import ident from '../../../assets/sounds/ident-1.mp3';
+
+// https://pixabay.com/sound-effects/search/logo/?pagi=2
+
+export default {
+  title: 'brand/Logo',
+  component: ComposerLogo,
+  decorators: [withTheme],
+};
+
+// TODO(burdon): Get from theme?
+const colors = {
+  gray: '#888888',
+  purple: '#AA23D3',
+  orange: '#CA6346',
+  green: '#4DA676',
+  blue: '#539ACD',
+};
+
+export const Default = {
+  render: () => {
+    const controller = useRef<AnimationController>(null);
+    const [logo, setLogo] = useState(false);
+    const handleSpin = async () => {
+      // const audio = new Audio(ident);
+      // await audio.play();
+      setTimeout(() => {
+        setLogo(true);
+      }, 1_500);
+
+      controller.current?.spin();
+    };
+
+    return (
+      <div className='absolute flex inset-0 items-center justify-center'>
+        <div className='absolute left-4 top-4'>
+          <Button onClick={handleSpin}>Spin</Button>
+        </div>
+
+        <div>
+          <div className='flex justify-center'>
+            <ComposerLogo ref={controller} size={256} />
+          </div>
+
+          <div className={mx('transition opacity-0 duration-1000', logo && 'opacity-100')}>
+            <div className={mx('text-[100px] text-teal-400 font-[k2d] italic')}>composer</div>
+            <div className={mx('flex items-center -mt-[20px] text-neutral-700')}>
+              <span className='ml-[210px] mt-[2px] mr-2'>Powered by DXOS</span>
+              <div>
+                <DXOS className='w-[32px] h-[32px]' />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// TODO(burdon): Camo.
+export const Colors = {
+  render: () => {
+    const colors = [
+      ['fill-teal-400', 'fill-teal-500', 'fill-teal-600'],
+      ['fill-orange-400', 'fill-orange-500', 'fill-orange-600'],
+      ['fill-cyan-400', 'fill-cyan-500', 'fill-cyan-600'],
+      ['fill-purple-400', 'fill-purple-500', 'fill-purple-600'],
+      ['fill-blue-500', 'fill-blue-600', 'fill-blue-700'],
+      ['fill-slate-500', 'fill-slate-600', 'fill-slate-700'],
+      ['fill-blue-500', 'fill-neutral-100', 'fill-red-500'],
+      ['fill-stone-400', 'fill-stone-500', 'fill-stone-600'],
+      ['fill-neutral-500', 'fill-neutral-600', 'fill-neutral-700'],
+    ];
+
+    return (
+      <div className='absolute inset-0 flex justify-center items-center'>
+        <div className='grid grid-cols-3 gap-20 w-[800px]'>
+          {colors.map((classNames, i) => (
+            <div key={i} className='flex justify-center items-center'>
+              <ComposerLogo animate={false} size={160} classNames={classNames} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Pacman = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 flex flex-col justify-center'>
+        <div className='flex flex-col'>
+          <div className='flex items-center p-4'>
+            <div className='flex ml-8 mr-[100px]'>
+              <div>
+                <Ghost weight='duotone' className='w-[180px] h-[180px] text-blue-500' />
+              </div>
+              <div>
+                <Ghost weight='duotone' className='w-[180px] h-[180px] text-purple-500' />
+              </div>
+              <div>
+                <Ghost weight='duotone' className='w-[180px] h-[180px] text-red-500' />
+              </div>
+            </div>
+
+            <ComposerLogo size={145} classNames={['fill-yellow-200', 'fill-yellow-300', 'fill-yellow-400']} />
+
+            <div className='flex -ml-10'>
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className='p-4'>
+                  <Square weight='duotone' className='w-6 h-6 text-yellow-200' />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='flex justify-center font-mono font-light text-[60px] mt-8 text-neutral-200'>
+            <div>Ready Player 1</div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+const SpinnerContainer = () => {
+  const [spinning, setSpinning] = useState(false);
+  return (
+    <div>
+      <div className='absolute left-4 top-4'>
+        {(spinning && <Button onClick={() => setSpinning(false)}>Stop</Button>) || (
+          <Button onClick={() => setSpinning(true)}>Start</Button>
+        )}
+      </div>
+      <div className='grid grid-cols-3 gap-20'>
+        <>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.green} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.orange} />
+          </div>
+        </>
+        <>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={100} color={colors.green} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={40} color={colors.orange} />
+          </div>
+        </>
+      </div>
+    </div>
+  );
+};
+
+export const Spinner = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <SpinnerContainer />
+      </div>
+    );
+  },
+};