@dxos/react-ui 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.f9ba587",
+  "version": "0.8.4-main.fd6878d",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
@@ -35,6 +37,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
+    "@phosphor-icons/react": "^2.1.5",
     "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
@@ -72,34 +75,33 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.f9ba587",
-    "@dxos/lit-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-hooks": "0.8.4-main.f9ba587",
-    "@dxos/log": "0.8.4-main.f9ba587",
-    "@dxos/react-input": "0.8.4-main.f9ba587",
-    "@dxos/react-list": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-types": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587"
+    "@dxos/debug": "0.8.4-main.fd6878d",
+    "@dxos/lit-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-hooks": "0.8.4-main.fd6878d",
+    "@dxos/react-input": "0.8.4-main.fd6878d",
+    "@dxos/log": "0.8.4-main.fd6878d",
+    "@dxos/react-list": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-types": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "@dxos/random": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -9,9 +9,10 @@ import { type HuePalette } from '@dxos/react-ui-theme';
 import { type Size } from '@dxos/react-ui-types';
 import { hexToFallback } from '@dxos/util';
 
-import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
 import { withTheme } from '../../testing';
 
+import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
+
 type StoryProps = {
   id?: string;
   imgSrc?: string;

package/src/components/Avatars/Avatar.tsx

@@ -7,12 +7,12 @@ import '@dxos/lit-ui/dx-avatar.pcss';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
+import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
 
 import {
-  type AvatarVariant,
-  type AvatarStatus,
   type AvatarAnimation,
+  type AvatarStatus,
+  type AvatarVariant,
   type DxAvatar as NaturalDxAvatar,
 } from '@dxos/lit-ui';
 import { DxAvatar } from '@dxos/lit-ui/react';

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
-import { Avatar } from './Avatar';
 import { withTheme } from '../../testing';
 
+import { Avatar } from './Avatar';
+
 const hues = ['lime', 'teal', 'purple', 'pink'];
 
 const AvatarItem = ({ n }: { n: number }) => {

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Breadcrumb } from './Breadcrumb';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Breadcrumb } from './Breadcrumb';
+
 const DefaultStory = () => {
   return (
     <Breadcrumb.Root aria-label='Breadcrumb'>

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Dot } from '@phosphor-icons/react';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 import { Link, type LinkProps } from '../Link';
 
 type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
@@ -100,7 +100,7 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       {...props}
       className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
     >
-      {children ?? <Dot weight='bold' />}
+      {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>
   );
 };

package/src/components/Buttons/Button.stories.tsx

@@ -4,12 +4,13 @@
 
 import '@dxos-theme';
 
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Button, ButtonGroup, type ButtonProps } from './Button';
 import { withSurfaceVariantsLayout, withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { Button, ButtonGroup, type ButtonProps } from './Button';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
@@ -21,10 +22,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
       {(args.variant === 'default' || args.variant === 'primary') && (
         <ButtonGroup>
           <Button {...args}>
-            <CaretLeft />
+            <Icon icon='ph--caret-left--regular' />
           </Button>
           <Button {...args}>
-            <CaretRight />
+            <Icon icon='ph--caret-right--regular' />
           </Button>
         </ButtonGroup>
       )}

package/src/components/Buttons/IconButton.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
+import { IconButton, type IconButtonProps } from './IconButton';
+
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>

package/src/components/Buttons/IconButton.tsx

@@ -4,12 +4,13 @@
 
 import React, { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
 import { Tooltip, type TooltipSide } from '../Tooltip';
 
+import { Button, type ButtonProps } from './Button';
+
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
     label: string;

package/src/components/Buttons/Toggle.stories.tsx

@@ -4,18 +4,19 @@
 
 import '@dxos-theme';
 
-import { TextB } from '@phosphor-icons/react';
 import React from 'react';
 
-import { Toggle } from './Toggle';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { Toggle } from './Toggle';
 
 type StorybookToggleProps = {};
 
 const DefaultStory = (props: StorybookToggleProps) => {
   return (
     <Toggle {...props}>
-      <TextB />
+      <Icon icon='ph--text-b--regular' />
     </Toggle>
   );
 };

package/src/components/Buttons/ToggleGroup.stories.tsx

@@ -4,21 +4,22 @@
 
 import '@dxos-theme';
 
-import { TextB, TextItalic } from '@phosphor-icons/react';
 import React from 'react';
 
-import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 
 // TODO(burdon): Create Radix-style Root, Item, etc?
 const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
-        <TextB />
+        <Icon icon='ph--text-b--regular' />
       </ToggleGroupItem>
       <ToggleGroupItem value='texti'>
-        <TextItalic />
+        <Icon icon='ph--text-italic--regular' />
       </ToggleGroupItem>
     </ToggleGroup>
   );

package/src/components/Buttons/ToggleGroup.tsx

@@ -3,11 +3,11 @@
 //
 
 import {
+  ToggleGroupItem as ToggleGroupItemPrimitive,
+  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
+  type ToggleGroupMultipleProps,
   ToggleGroup as ToggleGroupPrimitive,
   type ToggleGroupSingleProps,
-  type ToggleGroupMultipleProps,
-  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
-  ToggleGroupItem as ToggleGroupItemPrimitive,
 } from '@radix-ui/react-toggle-group';
 import React, { forwardRef } from 'react';
 

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 export type ClipboardContextValue = {
   textValue: string;

package/src/components/Clipboard/CopyButton.tsx

@@ -6,12 +6,13 @@ import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { useClipboard } from './ClipboardProvider';
 import { Button, type ButtonProps, IconButton } from '../Buttons';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
+import { useClipboard } from './ClipboardProvider';
+
 export type CopyButtonProps = ButtonProps &
   Pick<IconProps, 'size'> & {
     value: string;
@@ -57,7 +58,7 @@ export const CopyButtonIconOnly = ({
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t('copy success label') : props.label ?? t('copy label');
+  const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));
   const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
     <IconButton

package/src/components/DensityProvider/DensityProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, createContext } from 'react';
 
 import { type Density } from '@dxos/react-ui-types';
 

package/src/components/Dialogs/AlertDialog.stories.tsx

@@ -6,11 +6,12 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { AlertDialog } from './AlertDialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
+import { AlertDialog } from './AlertDialog';
+
 type StoryProps = Partial<{
   title: string;
   description: string;

package/src/components/Dialogs/AlertDialog.tsx

@@ -3,27 +3,27 @@
 //
 
 import {
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
   AlertDialogAction as AlertDialogActionPrimitive,
   type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
   AlertDialogCancel as AlertDialogCancelPrimitive,
   type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
   AlertDialogContent as AlertDialogContentPrimitive,
   type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
+  AlertDialogDescription as AlertDialogDescriptionPrimitive,
+  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
+  AlertDialogOverlay as AlertDialogOverlayPrimitive,
+  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
+  AlertDialogPortal as AlertDialogPortalPrimitive,
+  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
+  Root as AlertDialogRootPrimitive,
+  type AlertDialogProps as AlertDialogRootPrimitiveProps,
+  AlertDialogTitle as AlertDialogTitlePrimitive,
+  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
+  AlertDialogTrigger as AlertDialogTriggerPrimitive,
+  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
 } from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Dialogs/Dialog.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Dialog } from './Dialog';
+
 type StoryProps = Partial<{
   title: string;
   description: string;

package/src/components/Dialogs/Dialog.tsx

@@ -4,24 +4,24 @@
 
 import { createContext } from '@radix-ui/react-context';
 import {
-  type DialogProps as DialogRootPrimitiveProps,
-  Root as DialogRootPrimitive,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
   DialogClose as DialogClosePrimitive,
   type DialogCloseProps as DialogClosePrimitiveProps,
   DialogContent as DialogContentPrimitive,
   type DialogContentProps as DialogContentPrimitiveProps,
+  DialogDescription as DialogDescriptionPrimitive,
+  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
+  DialogOverlay as DialogOverlayPrimitive,
+  type DialogOverlayProps as DialogOverlayPrimitiveProps,
+  DialogPortal as DialogPortalPrimitive,
+  type DialogPortalProps as DialogPortalPrimitiveProps,
+  Root as DialogRootPrimitive,
+  type DialogProps as DialogRootPrimitiveProps,
+  DialogTitle as DialogTitlePrimitive,
+  type DialogTitleProps as DialogTitlePrimitiveProps,
+  DialogTrigger as DialogTriggerPrimitive,
+  type DialogTriggerProps as DialogTriggerPrimitiveProps,
 } from '@radix-ui/react-dialog';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/ElevationProvider/ElevationProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, createContext } from 'react';
 
 import { type Elevation } from '@dxos/react-ui-types';
 

package/src/components/Input/Input.stories.tsx

@@ -4,21 +4,22 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { activeSurface, baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
+import { withTheme } from '../../testing';
+
 import {
   type CheckboxProps,
   Input,
   type PinInputProps,
   type SwitchProps,
-  type TextInputProps,
   type TextAreaProps,
+  type TextInputProps,
 } from './Input';
-import { withTheme } from '../../testing';
 
 type VariantMap = {
   text: TextInputProps;

package/src/components/Input/Input.tsx

@@ -5,31 +5,31 @@
 import { type IconWeight } from '@phosphor-icons/react';
 import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, forwardRef, type ForwardRefExoticComponent, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';
 
 import {
+  DescriptionAndValidation as DescriptionAndValidationPrimitive,
+  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
+  Description as DescriptionPrimitive,
+  type DescriptionProps as DescriptionPrimitiveProps,
+  INPUT_NAME,
   InputRoot,
   type InputRootProps,
+  type InputScopedProps,
+  Label as LabelPrimitive,
+  type LabelProps as LabelPrimitiveProps,
   PinInput as PinInputPrimitive,
   type PinInputProps as PinInputPrimitiveProps,
-  TextInput as TextInputPrimitive,
-  type TextInputProps as TextInputPrimitiveProps,
   TextArea as TextAreaPrimitive,
   type TextAreaProps as TextAreaPrimitiveProps,
-  useInputContext,
-  INPUT_NAME,
-  type InputScopedProps,
-  Description as DescriptionPrimitive,
-  DescriptionAndValidation as DescriptionAndValidationPrimitive,
-  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
-  type DescriptionProps as DescriptionPrimitiveProps,
-  Label as LabelPrimitive,
-  type LabelProps as LabelPrimitiveProps,
+  TextInput as TextInputPrimitive,
+  type TextInputProps as TextInputPrimitiveProps,
   Validation as ValidationPrimitive,
   type ValidationProps as ValidationPrimitiveProps,
+  useInputContext,
 } from '@dxos/react-input';
 import { mx } from '@dxos/react-ui-theme';
-import { type Density, type Elevation, type ClassNameValue, type Size } from '@dxos/react-ui-types';
+import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/react-ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Link/Link.stories.tsx

@@ -4,9 +4,10 @@
 
 import '@dxos-theme';
 
-import { Link } from './Link';
 import { withTheme } from '../../testing';
 
+import { Link } from './Link';
+
 export default {
   title: 'ui/react-ui-core/Link',
   component: Link,

package/src/components/Lists/List.stories.tsx

@@ -5,10 +5,9 @@
 import '@dxos-theme';
 
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
-import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
 import React, { type ReactNode, useState } from 'react';
 
 import {
@@ -20,8 +19,10 @@ import {
   surfaceShadow,
 } from '@dxos/react-ui-theme';
 
-import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { List, ListItem, type ListScopedProps } from './List';
 
 export default {
   title: 'ui/react-ui-core/List',
@@ -41,11 +42,11 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
       style={{ transform: CSS.Transform.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
       <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
       <ListItem.Endcap>
-        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -103,13 +104,13 @@ const ManySizesDraggableListItem = ({
       style={{ transform: CSS.Translate.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
       <ListItem.Heading classNames='grow pbs-2' asChild>
         {text}
       </ListItem.Heading>
       <ListItem.Endcap>
-        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -181,7 +182,7 @@ export const Collapsible = {
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
               <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>
-                <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
               </ListItem.Endcap>
             </div>
             {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}