@dxos/brand 0.8.3 → 0.8.4-main.03d5cd7b56

package/package.json

@@ -1,23 +1,25 @@
 {
   "name": "@dxos/brand",
-  "version": "0.8.3",
+  "version": "0.8.4-main.03d5cd7b56",
   "description": "DXOS brand assets.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "assets",
     "dist",
@@ -28,20 +30,21 @@
   },
   "devDependencies": {
     "@fontsource/k2d": "^5.0.18",
-    "@phosphor-icons/react": "^2.1.5",
+    "@phosphor-icons/react": "2.1.10",
     "@rive-app/react-canvas": "^4.14.0",
     "@types/d3": "^7.4.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/log": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/storybook-utils": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@phosphor-icons/react": "2.1.10",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56"
   }
 }

package/src/components/experimental/ComposerLogo.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+// Brand icon colors, outer → inner.
+export const brandColors = ['rgb(5,40,61)', 'rgb(10,75,105)', 'rgb(1,122,183)', 'rgb(6,197,253)'];
+
+export const ComposerLogo = ({ classNames, size = 512 }: ThemedClassName<{ size?: number }>) => {
+  const n = brandColors.length;
+  const cx = size / 2;
+  const cy = size / 2;
+  const ringWidth = size / 2 / (n + 0.5);
+
+  return (
+    <svg aria-hidden='true' width={size} height={size} className={mx(classNames)}>
+      {brandColors.map((color, i) => {
+        const outerR = size / 2 - i * ringWidth;
+        const innerR = outerR - ringWidth;
+        // TODO(burdon): Animate bottom length.
+        const mirrorOuterR = size - (n - 1 - i) * ringWidth;
+        const mirrorInnerR = mirrorOuterR - ringWidth;
+        return <path key={i} fill={color} d={makeBrandLayerPath(cx, cy, outerR, innerR, mirrorOuterR, mirrorInnerR)} />;
+      })}
+    </svg>
+  );
+};
+
+/**
+ * Shape: left semicircle ring (6 → 9 → 12 o'clock) with a
+ * horizontal-then-diagonal stepped edge at each open end, matching the
+ * Composer brand icon geometry. Two 90° arcs avoid the 180° SVG ambiguity.
+ */
+const makeBrandLayerPath = (cx: number, cy: number, r1: number, r2: number, r3: number, r4: number): string => {
+  const frac = 0.3;
+  const topOuter = r1 * frac;
+  const topInner = r2 * frac;
+  const botOuter = r4 * frac;
+  const botInner = r3 * frac;
+  return [
+    // Start at outer top-right.
+    `M ${cx + topOuter} ${cy - r1}`,
+    // Move left to 12-oclock.
+    `L ${cx} ${cy - r1}`,
+    // Outer arc CW: 12 → 9 → 6 o'clock (through the west side).
+    `A ${r1} ${r1} 0 0 0 ${cx - r1} ${cy}`,
+    `A ${r1} ${r1} 0 0 0 ${cx} ${cy + r1}`,
+    // Bottom outer: extend right.
+    `L ${cx + botOuter} ${cy + r1}`,
+    // Diagonal to inner bottom-right.
+    `L ${cx + botInner} ${cy + r2}`,
+    // Move left to inner 6-oclock.
+    `L ${cx} ${cy + r2}`,
+    // Inner arc CCW: 6 → 9 → 12 o'clock (back through the west side).
+    `A ${r2} ${r2} 0 0 1 ${cx - r2} ${cy}`,
+    `A ${r2} ${r2} 0 0 1 ${cx} ${cy - r2}`,
+    // Top inner: extend right.
+    `L ${cx + topInner} ${cy - r2}`,
+    // Close: diagonal back to start.
+    'Z',
+  ].join(' ');
+};

package/src/components/experimental/Logo.stories.tsx

@@ -0,0 +1,279 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { arc } from 'd3';
+import React, { useRef, useState } from 'react';
+
+import { Button, Icon, IconButton } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+import ident from '../../../assets/sounds/ident-2.mp3';
+import { DXOS } from '../icons';
+import { ComposerLogo as AltComposerLogo, brandColors } from './ComposerLogo';
+import { type AnimationController, ComposerLogo, ComposerSpinner } from './experimental';
+
+// https://pixabay.com/sound-effects/search/logo/?pagi=2
+
+const meta = {
+  title: 'ui/brand/experimental/Logo',
+  decorators: [withTheme()],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// TODO(burdon): Get from theme?
+const colors = {
+  gray: '#888888',
+  purple: '#AA23D3',
+  orange: '#CA6346',
+  green: '#4DA676',
+  blue: '#539ACD',
+};
+
+export const Default: Story = {
+  render: () => {
+    const controller = useRef<AnimationController>(null);
+    const [logo, setLogo] = useState(false);
+    const handleSpin = async () => {
+      const audio = new Audio(ident);
+      try {
+        await audio.play();
+      } catch (err) {
+        console.warn('Audio playback failed:', err);
+      }
+      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')} style={{ fontFamily: 'Poiret One' }}>
+              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>
+    );
+  },
+};
+
+export const Colors: Story = {
+  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: Story = {
+  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]'>
+              <Icon icon='ph--ghost--duotone' classNames='w-[180px] h-[180px] text-blue-500' />
+              <Icon icon='ph--ghost--duotone' classNames='w-[180px] h-[180px] text-purple-500' />
+              <Icon icon='ph--ghost--duotone' classNames='w-[180px] h-[180px] text-red-500' />
+            </div>
+
+            <div className='w-[180px]'>
+              <ComposerLogo size={145} classNames={['fill-yellow-200', 'fill-yellow-300', 'fill-yellow-400']} />
+            </div>
+
+            <div className='flex -ml-10'>
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className='p-4'>
+                  <Icon icon='ph--circle--duotone' classNames='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 className='flex flex-col gap-20'>
+      <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>
+      <div className='flex 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={100} color={colors.green} />
+        </div>
+        <div className='flex justify-center items-center'>
+          <ComposerSpinner animate={spinning} gap={1} size={40} color={colors.orange} />
+        </div>
+        <div className='flex justify-center items-center'>
+          <ComposerSpinner animate={spinning} gap={1} size={24} color={colors.orange} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Spinner: Story = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <SpinnerContainer />
+      </div>
+    );
+  },
+};
+
+// https://github.com/grafana/grafana/blob/main/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+export const Linear: Story = {
+  render: () => {
+    return (
+      <div className='absolute flex flex-col inset-0 bg-black'>
+        <div
+          className={'h-[1px] translateX(-100%) animate-progress-linear'}
+          style={{
+            background:
+              'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+export const Radial: Story = {
+  render: () => {
+    const size = 256;
+    const totalRadius = size / 2;
+    const n = brandColors.length;
+    const ringWidth = totalRadius / (n + 1);
+    const gap = 0;
+    const startAngle = (1 / 4) * Math.PI;
+    const endAngle = -(5 / 4) * Math.PI;
+
+    return (
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <svg width={size} height={size}>
+          <g transform={`translate(${totalRadius}, ${totalRadius})`}>
+            {brandColors.map((color, i) => {
+              const outerRadius = totalRadius - i * ringWidth;
+              const innerRadius = outerRadius - ringWidth + gap;
+              const d = arc<any, any>()
+                .innerRadius(innerRadius)
+                .outerRadius(outerRadius)
+                .startAngle(startAngle)
+                .endAngle(endAngle)({}) as string;
+              return <path key={i} d={d} fill={color} />;
+            })}
+          </g>
+        </svg>
+      </div>
+    );
+  },
+};
+
+const useToggle = (initial = false) => {
+  const [toggled, setToggled] = useState(initial);
+  return [toggled, () => setToggled(!toggled)] as const;
+};
+
+export const Oblique: Story = {
+  render: () => {
+    const [visible, setVisible] = useToggle(true);
+    const size = 512;
+
+    return (
+      <div className='absolute inset-0 grid place-items-center'>
+        <div className='absolute top-4 left-4'>
+          <IconButton icon='ph--square--duotone' label='Visibility' onClick={() => setVisible()} />
+        </div>
+        <div className='absolute grid place-items-center'>
+          <AltComposerLogo
+            size={size}
+            classNames={mx(
+              'opacity-0 scale-10 transition-all rotate-[540deg] __translate-x-[980px] duration-500 delay-0 ease-in',
+              visible && 'delay-200 opacity-10 scale-100 rotate-[180deg] translate-x-[8]',
+            )}
+          />
+        </div>
+        <div className='absolute grid place-items-center'>
+          <AltComposerLogo
+            size={size}
+            classNames={mx(
+              'opacity-0 blur-xs scale-10 rotate-360 __translate-y-[-100px]',
+              'transition-[opacity,filter,scale,rotate] duration-[500ms,500ms,500ms,750ms] ease-in-out',
+              visible && 'opacity-100 blur-none scale-100 rotate-0 translate-y-0',
+            )}
+          />
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/{ComposerLogo/ComposerLogo.tsx → experimental/experimental.tsx}

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
+import { type IconWeight } from '@phosphor-icons/react';
 import { arc, interpolateString, select } from 'd3';
 import React, {
   type CSSProperties,
@@ -17,7 +17,7 @@ import React, {
   useState,
 } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 const weights = new Map<IconWeight, ReactElement>([
   [
@@ -28,9 +28,23 @@ const weights = new Map<IconWeight, ReactElement>([
   ],
 ]);
 
-const Composer = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
-  <IconBase ref={ref} {...props} weights={weights} />
-));
+const Composer = forwardRef<SVGSVGElement, any>((props, ref) => {
+  const weight = props.weight || 'regular';
+  const size = props.size || 256;
+  return (
+    <svg
+      ref={ref}
+      {...props}
+      width={size}
+      height={size}
+      viewBox='0 0 256 256'
+      fill='currentColor'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {weights.get(weight)}
+    </svg>
+  );
+});
 
 export interface AnimationController {
   spin: () => void;
@@ -103,7 +117,7 @@ export const ComposerLogo = forwardRef<AnimationController, ComposerLogoProps>(
       >
         {layers.map(({ inset, spin, style, className }, i) => (
           <div key={i} className='absolute' style={{ inset: `${inset}px` }}>
-            <Composer className={mx('w-full h-full', animate && spin, className)} style={style} />
+            <Composer className={mx('h-full w-full', animate && spin, className)} style={style} />
           </div>
         ))}
       </div>
@@ -163,7 +177,6 @@ const createSlices = ({
 /**
  * Spinning Composer "C" logo.
  */
-// TODO(burdon): Configure stripes.
 export const ComposerSpinner: FC<{
   animate?: boolean;
   size?: number;
@@ -183,13 +196,17 @@ export const ComposerSpinner: FC<{
   }, [animate]);
 
   useEffect(() => {
-    const svg = select(ref.current)
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+
+    const svg = select(el)
       .attr('width', size)
       .attr('height', size)
       .append('g')
       .attr('transform', `translate(${size / 2}, ${size / 2})`);
 
-    // TODO(burdon): Pass in.
     const arcs = createSlices({ radius: size / 2, gap, color });
 
     let count = 0;
@@ -204,14 +221,6 @@ export const ComposerSpinner: FC<{
       }
     };
 
-    // const createArc = ({
-    //   innerRadius,
-    //   outerRadius,
-    //   startAngle = (1 / 4) * Math.PI,
-    //   endAngle = -(5 / 4) * Math.PI,
-    // }: Slice): ValueFn<SVGPathElement, DefaultArcObject, string | null> =>
-    //   arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle);
-
     const trigger = arcs.map(
       ({
         startAngle = (1 / 4) * Math.PI,
@@ -234,18 +243,11 @@ export const ComposerSpinner: FC<{
             .transition()
             .duration(duration)
             .attrTween('transform', (() => interpolateString('rotate(0)', 'rotate(360)')) as any)
-            .on('end', ((_: any, i: number, nodes: Node[]) => {
+            .on('end', (() => {
               if (animateRef.current) {
                 rotateArc();
               } else if (autoFade) {
                 fadeOut();
-                // d3.select(nodes[i])
-                //   .transition()
-                //   .duration(1000)
-                //   .attrTween('d', () => {
-                //     const interpolate = d3.interpolate(0, Math.PI);
-                //     return (t: number) => createArc(arc);
-                //   });
               }
             }) as any);
         };
@@ -264,9 +266,9 @@ export const ComposerSpinner: FC<{
     }
 
     return () => {
-      select(ref.current).selectChildren().remove();
+      select(el).selectChildren().remove();
     };
-  }, []);
+  }, [size, gap, color]);
 
   return <svg ref={ref} onClick={onClick} />;
 };

package/src/components/experimental/rive.stories.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Rive, useRive } from '@rive-app/react-canvas';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect } from 'react';
+
+import { log } from '@dxos/log';
+import { useAsyncState } from '@dxos/react-ui';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+const useFlash = (rive: Rive | null, name: string, delay: number, period: number) => {
+  useEffect(() => {
+    let t: any;
+    if (rive) {
+      t = setTimeout(() => {
+        t = setInterval(() => {
+          rive?.play(name);
+        }, period);
+      }, delay);
+    }
+
+    return () => clearTimeout(t);
+  }, [rive]);
+};
+
+const Component = ({ buffer }: { buffer: ArrayBuffer }) => {
+  // https://rive.app/community/doc/rive-parameters/docHI9ASztXP
+  const { rive, RiveComponent } = useRive({ buffer, autoplay: false });
+  useFlash(rive, 'flash-1', 500, 3_000);
+  useFlash(rive, 'flash-2', 2_000, 2_000);
+
+  return (
+    <div className='m-8 relative flex grow justify-center'>
+      <RiveComponent />
+      <div className='z-1 absolute inset-0' style={{ background: 'radial-gradient(transparent, black)' }} />
+    </div>
+  );
+};
+
+const DefaultStory = () => {
+  const [buffer] = useAsyncState<ArrayBuffer>(async () => {
+    // CORS set via dashboard.
+    // TODO(wittjosiah): Fetch to external url fails in headless storybook test.
+    const response = await fetch('https://dxos.network/dxos.riv', { mode: 'cors' }).catch((error) => {
+      log.catch(error);
+    });
+    if (response?.ok) {
+      return await response.arrayBuffer();
+    } else if (response) {
+      console.log(response.status);
+    }
+  });
+
+  if (!buffer) {
+    return <Loading data={{ buffer: !!buffer }} />;
+  }
+
+  return (
+    <>
+      <Component buffer={buffer} />
+      {false && (
+        <div className='flex absolute left-0 right-0 top-[120px] h-[320px] align-center'>
+          <div
+            className='z-1 absolute inset-0 w-[800px] m-auto'
+            style={{
+              background: 'radial-gradient(ellipse 200% 100% at center, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%)',
+            }}
+          />
+          <div
+            className={mx(
+              'z-2 absolute inset-0 items-center w-[720px] m-auto p-2',
+              'text-white text-[60px] leading-tight text-center font-thin',
+            )}
+          >
+            <div className='flex flex-col items-center opacity-0'>
+              <div>The new standard</div>
+              <div>for collaborative</div>
+              <div>local-first software</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+const meta = {
+  title: 'ui/brand/experimental/Rive',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/{icons → components/icons}/Composer.tsx

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconWeight } from '@phosphor-icons/react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [
@@ -36,8 +36,22 @@ const weights = new Map<IconWeight, ReactElement>([
   ],
 ]);
 
-export const Composer = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
-  <IconBase ref={ref} {...props} weights={weights} />
-));
+export const Composer = forwardRef<SVGSVGElement, any>((props, forwardedRef) => {
+  const weight = props.weight || 'regular';
+  const size = props.size || 256;
+  return (
+    <svg
+      {...props}
+      width={size}
+      height={size}
+      viewBox='0 0 256 256'
+      fill='currentColor'
+      xmlns='http://www.w3.org/2000/svg'
+      ref={forwardedRef}
+    >
+      {weights.get(weight)}
+    </svg>
+  );
+});
 
 Composer.displayName = 'Composer';

package/src/{icons → components/icons}/DXNS.tsx

@@ -2,8 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconProps, type IconWeight } from '@phosphor-icons/react';
+import IconBase from '@phosphor-icons/react/dist/lib/IconBase';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [