@dxos/react-ui 0.7.4 → 0.7.5-main.937ce75

package/src/components/Lists/ListDropIndicator.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/types';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
+
+type Orientation = 'horizontal' | 'vertical';
+
+const edgeToOrientationMap: Record<Edge, Orientation> = {
+  top: 'horizontal',
+  bottom: 'horizontal',
+  left: 'vertical',
+  right: 'vertical',
+};
+
+const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
+  horizontal: 'h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]',
+  vertical: 'w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]',
+};
+
+const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
+  top: 'top-[--line-offset] before:top-[--offset-terminal]',
+  right: 'right-[--line-offset] before:right-[--offset-terminal]',
+  bottom: 'bottom-[--line-offset] before:bottom-[--offset-terminal]',
+  left: 'left-[--line-offset] before:left-[--offset-terminal]',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+
+export type DropIndicatorProps = {
+  edge: Edge;
+  gap?: number;
+};
+
+/**
+ * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
+ */
+export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+
+  const orientation = edgeToOrientationMap[edge];
+
+  return (
+    <div
+      role='none'
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+        } as CSSProperties
+      }
+      className={`absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
+    />
+  );
+};

package/src/components/Lists/Tree.tsx

@@ -16,6 +16,7 @@ import {
   LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
+import { TreeDropIndicator } from './TreeDropIndicator';
 import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
@@ -60,12 +61,14 @@ export const TreeItem: {
   Body: ForwardRefExoticComponent<TreeItemBodyProps>;
   OpenTrigger: ForwardRefExoticComponent<TreeItemOpenTriggerProps>;
   MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+  DropIndicator: typeof TreeDropIndicator;
 } = {
   Root: TreeItemRoot,
   Heading: TreeItemHeading,
   Body: TreeItemBody,
   OpenTrigger: TreeItemOpenTrigger,
   MockOpenTrigger: MockTreeItemOpenTrigger,
+  DropIndicator: TreeDropIndicator,
 };
 
 export type { TreeRootProps, TreeItemProps, TreeItemHeadingProps, TreeItemBodyProps, TreeItemOpenTriggerProps };

package/src/components/Lists/TreeDropIndicator.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { type HTMLAttributes, type CSSProperties } from 'react';
+
+// Tree item hitbox
+// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
+
+type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
+type Orientation = 'sibling' | 'child';
+
+const edgeToOrientationMap: Record<InstructionType, Orientation> = {
+  'reorder-above': 'sibling',
+  'reorder-below': 'sibling',
+  'make-child': 'child',
+  reparent: 'child',
+};
+
+const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling:
+    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
+  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
+};
+
+const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
+  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
+  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
+  'make-child': 'border-accentSurface',
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: '',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+
+export type DropIndicatorProps = {
+  instruction: Instruction;
+  gap?: number;
+};
+
+export const TreeDropIndicator = ({ instruction, gap = 0 }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+  const isBlocked = instruction.type === 'instruction-blocked';
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap[desiredInstruction.type];
+  if (isBlocked) {
+    return null;
+  }
+
+  return (
+    <div
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
+        } as CSSProperties
+      }
+      className={`absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${instructionStyles[desiredInstruction.type]}`}
+    ></div>
+  );
+};

package/src/components/Main/Main.tsx

@@ -29,7 +29,6 @@ import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
 
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
@@ -227,7 +226,7 @@ const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
           {...(!open && { inert: 'true' })}
           ref={ref}
         >
-          <ElevationProvider elevation='group'>{children}</ElevationProvider>
+          {children}
         </Root>
       </DialogRoot>
     );

package/src/components/Menus/ContextMenu.tsx

@@ -6,9 +6,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
 
 type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
 
@@ -29,14 +28,15 @@ type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuC
 const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
     return (
       <ContextMenuPrimitive.Content
         collisionPadding={8}
         {...props}
-        className={tx('menu.content', 'menu', {}, classNames)}
+        className={tx('menu.content', 'menu', { elevation }, classNames)}
         ref={forwardedRef}
       >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+        {children}
       </ContextMenuPrimitive.Content>
     );
   },

package/src/components/Menus/DropdownMenu.tsx

@@ -28,7 +28,7 @@ import React, {
   type RefObject,
 } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -235,6 +235,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
     const { __scopeDropdownMenu, classNames, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+    const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
 
@@ -261,7 +262,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
             hasInteractedOutsideRef.current = true;
           }
         })}
-        className={tx('menu.content', 'menu', {}, classNames)}
+        className={tx('menu.content', 'menu', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties

package/src/components/Popover/Popover.tsx

@@ -36,7 +36,7 @@ import React, {
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 /* -------------------------------------------------------------------------------------------------
@@ -258,6 +258,7 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
     const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
     const { forceMount = portalContext.forceMount, ...contentProps } = props;
     const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+
     return (
       <Presence present={forceMount || context.open}>
         {context.modal ? (
@@ -433,6 +434,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const context = usePopoverContext(CONTENT_NAME, __scopePopover);
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
 
     // Make sure the whole tree has focus guards as our `Popover` may be
     // the last element in the DOM (because of the `Portal`)
@@ -461,7 +463,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             id={context.contentId}
             {...popperScope}
             {...contentProps}
-            className={tx('popover.content', 'popover', {}, classNames)}
+            className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
               ...contentProps.style,

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
-import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
+import { groupSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
@@ -17,7 +17,7 @@ faker.seed(1234);
 const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceElevation({ elevation: 'group' })]}
+      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
     >
       <ScrollArea.Viewport classNames='rounded p-4'>
         <p>{children}</p>

package/src/components/Select/Select.tsx

@@ -6,7 +6,7 @@ import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
@@ -55,10 +55,11 @@ type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const elevation = useElevationContext();
     return (
       <SelectPrimitive.Content
         {...props}
-        className={tx('select.content', 'select__content', {}, classNames)}
+        className={tx('select.content', 'select__content', { elevation }, classNames)}
         position='popper'
         ref={forwardedRef}
       >

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -41,7 +41,6 @@ export const ThemeProvider = ({
   tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
   themeMode = 'dark',
   rootDensity = 'fine',
-  rootElevation = 'base',
   ...rest
 }: ThemeProviderProps) => {
   useEffect(() => {
@@ -61,7 +60,7 @@ export const ThemeProvider = ({
           appNs,
         }}
       >
-        <ElevationProvider elevation={rootElevation}>
+        <ElevationProvider elevation='base'>
           <DensityProvider density={rootDensity}>{children}</DensityProvider>
         </ElevationProvider>
       </TranslationsProvider>

package/src/components/Toast/Toast.tsx

@@ -45,7 +45,7 @@ const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, child
   const { tx } = useThemeContext();
   return (
     <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
-      <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      <ElevationProvider elevation='toast'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
 });

package/src/components/Toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React, { forwardRef } from 'react';
 
@@ -15,6 +16,8 @@ import {
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
+  IconButton,
+  type IconButtonProps,
 } from '../Buttons';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
@@ -40,6 +43,16 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props,
   );
 });
 
+type ToolbarIconButtonProps = IconButtonProps;
+
+const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
+  return (
+    <ToolbarPrimitive.Button asChild>
+      <IconButton {...props} ref={forwardedRef} />
+    </ToolbarPrimitive.Button>
+  );
+});
+
 type ToolbarToggleProps = ToggleProps;
 
 const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props, forwardedRef) => {
@@ -88,35 +101,50 @@ const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupI
   },
 );
 
-type ToolbarSeparatorProps = SeparatorProps;
+type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
 
-const ToolbarSeparator = (props: SeparatorProps) => {
-  return (
+const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupIconItemProps>(
+  ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+    return (
+      <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
+        <IconButton {...{ variant, density, elevation, classNames, icon, label, iconOnly }} ref={forwardedRef} />
+      </ToolbarPrimitive.ToolbarToggleItem>
+    );
+  },
+);
+
+type ToolbarSeparatorProps = SeparatorProps & { variant?: 'gap' | 'line' };
+
+const ToolbarSeparator = ({ variant = 'line', ...props }: ToolbarSeparatorProps) => {
+  return variant === 'line' ? (
     <ToolbarPrimitive.Separator asChild>
-      <Separator orientation='vertical' {...props} />
+      <Separator {...props} />
     </ToolbarPrimitive.Separator>
+  ) : (
+    <ToolbarPrimitive.Separator className='grow' />
   );
 };
 
-const ToolbarExpander = () => <div className={'grow'} />;
-
 export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup,
   ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
   Separator: ToolbarSeparator,
-  Expander: ToolbarExpander,
 };
 
 export type {
   ToolbarRootProps,
   ToolbarButtonProps,
+  ToolbarIconButtonProps,
   ToolbarLinkProps,
   ToolbarToggleProps,
   ToolbarToggleGroupProps,
   ToolbarToggleGroupItemProps,
+  ToolbarToggleGroupIconItemProps,
   ToolbarSeparatorProps,
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -18,7 +18,7 @@ import {
 } from '@radix-ui/react-tooltip';
 import React, { forwardRef, type FunctionComponent } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type TooltipProviderProps = TooltipProviderPrimitiveProps;
@@ -54,12 +54,13 @@ type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
 
 const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
+  const elevation = useElevationContext();
   return (
     <TooltipContentPrimitive
       sideOffset={4}
       collisionPadding={8}
       {...props}
-      className={tx('tooltip.content', 'tooltip', {}, classNames)}
+      className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
       ref={forwardedRef}
     />
   );

package/src/testing/decorators/withVariants.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Decorator } from '@storybook/react';
 import React from 'react';
 
-import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
 import { DensityProvider, ElevationProvider } from '../../components';
@@ -20,8 +20,8 @@ type Config = {
 export const withVariants = ({
   elevations = [
     { elevation: 'base' },
-    { elevation: 'group', surface: groupSurface },
-    { elevation: 'chrome', surface: modalSurface },
+    { elevation: 'positioned', surface: groupSurface },
+    { elevation: 'dialog', surface: modalSurface },
   ],
   densities = ['coarse', 'fine'],
 }: Config = {}): Decorator => {
@@ -32,7 +32,7 @@ export const withVariants = ({
           <div className='flex flex-col gap-8'>
             {densities.map((density) => (
               <DensityProvider key={density} density={density}>
-                <div className={mx('p-4 rounded-lg', surface, surfaceElevation({ elevation }))}>
+                <div className={mx('p-4 rounded-lg', surface, surfaceShadow({ elevation }))}>
                   <Story />
                 </div>
               </DensityProvider>

package/dist/types/src/playground/Surfaces.stories.d.ts

@@ -1,21 +0,0 @@
-import '@dxos-theme';
-import React, { type PropsWithChildren } from 'react';
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-declare const _default: {
-    title: string;
-    component: ({ children, level }: PropsWithChildren & {
-        level: SurfaceLevel;
-    }) => React.JSX.Element;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {};
-};
-//# sourceMappingURL=Surfaces.stories.d.ts.map

package/dist/types/src/playground/Surfaces.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBtD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;;;qCAEzC,iBAAiB,GAAG;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE;;;;;;;;;AAsCjF,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/src/playground/Surfaces.stories.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { type PropsWithChildren } from 'react';
-
-import {
-  baseSurface,
-  modalSurface,
-  groupSurface,
-  mx,
-  surfaceElevation,
-  fixedSurface,
-  fixedBorder,
-  attentionSurface,
-  accentSurface,
-} from '@dxos/react-ui-theme';
-
-import { withTheme } from '../testing';
-
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-
-const Surface = ({ children, level }: PropsWithChildren & { level: SurfaceLevel }) => {
-  const surface =
-    level === 'chrome'
-      ? [modalSurface, surfaceElevation({ elevation: 'chrome' })]
-      : level === 'group'
-        ? [groupSurface, surfaceElevation({ elevation: 'group' })]
-        : level === 'input'
-          ? [attentionSurface, surfaceElevation({ elevation: 'group' })]
-          : level === 'fixed'
-            ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
-            : level === 'accent'
-              ? [accentSurface, surfaceElevation({ elevation: 'chrome' })]
-              : [baseSurface];
-
-  return (
-    <div
-      role='region'
-      className={mx('flex justify-center items-center m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}
-    >
-      <div>{level}</div>
-      {children}
-    </div>
-  );
-};
-
-const SurfaceStory = () => {
-  return (
-    <div className='bg-cubes p-10 m-0'>
-      <Surface level='fixed' />
-      <Surface level='base' />
-      <Surface level='group' />
-      <Surface level='chrome' />
-      <Surface level='input' />
-      <Surface level='accent' />
-    </div>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-core/Playground/Surfaces',
-  component: Surface,
-  render: SurfaceStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export const Default = {
-  args: {},
-};