@dxos/react-ui-stack 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/src/exemplars/Card/Card.tsx

@@ -1,210 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, {
-  type ComponentPropsWithRef,
-  type ComponentPropsWithoutRef,
-  type FC,
-  type PropsWithChildren,
-  forwardRef,
-} from 'react';
-
-import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
-import { cardMinInlineSize, hoverableControls, mx } from '@dxos/react-ui-theme';
-
-import { Image, StackItem } from '../../components';
-import { translationKey } from '../../translations';
-
-import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './fragments';
-
-/**
- * The default width of cards. It should be no larger than 320px per WCAG 2.1 SC 1.4.10.
- */
-const cardDefaultInlineSize = cardMinInlineSize;
-
-/**
- * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
- */
-const cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
-
-type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
-
-const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps & { id?: string }>(
-  ({ children, classNames, id, asChild, role = 'group', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild ? { classNames: [cardRoot, classNames] } : { className: mx(cardRoot, classNames), role };
-    return (
-      <Root {...(id && { 'data-object-id': id })} {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-/**
- * This should be used by Surface fulfillments in cases where the content may or may not already be encapsulated (e.g., in a Popover) and knows this based on the `role` it receives.
- * This will render a `Card.StaticRoot` by default, otherwise it will render a `div` primitive with the appropriate styling for specific handled situations.
- */
-const CardSurfaceRoot = ({
-  id,
-  role = 'never',
-  children,
-  classNames,
-}: ThemedClassName<PropsWithChildren<{ id?: string; role?: string }>>) => {
-  if (['card--popover', 'card--intrinsic', 'card--extrinsic'].includes(role)) {
-    return (
-      <div
-        {...(id && { 'data-object-id': id })}
-        className={mx(
-          role === 'card--popover'
-            ? 'popover-card-width'
-            : ['card--intrinsic', 'card--extrinsic'].includes(role)
-              ? 'contents'
-              : '',
-          classNames,
-        )}
-      >
-        {children}
-      </div>
-    );
-  } else {
-    return (
-      <CardStaticRoot
-        id={id}
-        classNames={[
-          role === 'card--transclusion' && 'mlb-1',
-          role === 'card--transclusion' && hoverableControls,
-          classNames,
-        ]}
-      >
-        {children}
-      </CardStaticRoot>
-    );
-  }
-};
-
-const CardHeading = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardHeading, cardText, classNames] }
-      : { className: mx(cardHeading, cardText, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const CardToolbar = forwardRef<HTMLDivElement, ToolbarRootProps>(({ children, classNames, ...props }, forwardedRef) => {
-  return (
-    <Toolbar.Root {...props} classNames={['bg-transparent density-coarse', classNames]} ref={forwardedRef}>
-      {children}
-    </Toolbar.Root>
-  );
-});
-
-const CardToolbarIconButton = Toolbar.IconButton;
-const CardToolbarSeparator = Toolbar.Separator;
-
-const CardDragHandle = forwardRef<HTMLButtonElement, { toolbarItem?: boolean }>(({ toolbarItem }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  const Root = toolbarItem ? Toolbar.IconButton : IconButton;
-  return (
-    <Root
-      iconOnly
-      icon='ph--dots-six-vertical--regular'
-      variant='ghost'
-      label={t('drag handle label')}
-      classNames='pli-2'
-      ref={forwardedRef}
-    />
-  );
-});
-
-const CardDragPreview = StackItem.DragPreview;
-
-const CardMenu = Primitive.div as FC<ComponentPropsWithRef<'div'>>;
-
-type CardPosterProps = ThemedClassName<
-  {
-    alt: string;
-    aspect?: 'video' | 'auto';
-  } & Partial<{ image: string; icon: string }>
->;
-
-const CardPoster = (props: CardPosterProps) => {
-  const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
-  if (props.image) {
-    return (
-      <Image classNames={[`dx-card__poster is-full`, aspect, props.classNames]} src={props.image} alt={props.alt} />
-    );
-  }
-
-  if (props.icon) {
-    return (
-      <div
-        role='image'
-        className={mx(`dx-card__poster grid place-items-center bg-inputSurface text-subdued`, aspect, props.classNames)}
-        aria-label={props.alt}
-      >
-        <Icon icon={props.icon} size={10} />
-      </div>
-    );
-  }
-};
-
-const CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardChrome, classNames] }
-      : { className: mx(cardChrome, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const CardText = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-export const Card = {
-  StaticRoot: CardStaticRoot,
-  SurfaceRoot: CardSurfaceRoot,
-  Heading: CardHeading,
-  Toolbar: CardToolbar,
-  ToolbarIconButton: CardToolbarIconButton,
-  ToolbarSeparator: CardToolbarSeparator,
-  DragHandle: CardDragHandle,
-  DragPreview: CardDragPreview,
-  Menu: CardMenu,
-  Poster: CardPoster,
-  Chrome: CardChrome,
-  Text: CardText,
-};
-
-export {
-  cardRoot,
-  cardHeading,
-  cardText,
-  cardChrome,
-  cardSpacing,
-  cardStackDefaultInlineSizeRem,
-  cardDefaultInlineSize,
-};

package/src/exemplars/Card/CardDragPreview.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { cardRoot } from './fragments';
-
-const CardDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
-  return <div className='p-2'>{children}</div>;
-};
-
-const CardDragPreviewContent = ({ children }: PropsWithChildren<{}>) => {
-  return <div className={mx(cardRoot, 'ring-focusLine ring-neutralFocusIndicator')}>{children}</div>;
-};
-
-export const CardDragPreview = {
-  Root: CardDragPreviewRoot,
-  Content: CardDragPreviewContent,
-};

package/src/exemplars/Card/fragments.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export const cardRoot =
-  'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';
-
-export const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';
-export const cardNoSpacing = 'pli-0 mlb-0';
-export const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
-
-export const cardDialogContent = 'p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden';
-export const cardDialogHeader = 'pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between';
-export const cardDialogOverflow = 'overflow-y-auto min-bs-0 flex-1';
-export const cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
-export const cardDialogSearchListRoot =
-  'pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col';
-
-export const cardText = cardSpacing;
-
-export const cardHeading = 'text-lg font-medium line-clamp-2 grow';
-
-export const cardChrome =
-  'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full [&_.dx-button]:pis-[calc(var(--dx-cardSpacingInline)-var(--dx-cardSpacingChrome))]';

package/src/exemplars/Card/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Card';
-export * from './CardDragPreview';
-export * from './fragments';

package/src/exemplars/CardStack/CardStack.stories.tsx

@@ -1,173 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
-
-import { faker } from '@dxos/random';
-import { IconButton } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { StackItem } from '../../components';
-import { Card, CardDragPreview } from '../Card';
-
-import { CardStack } from './CardStack';
-
-faker.seed(0);
-
-type CardItem = {
-  id: string;
-  title: string;
-  description: string;
-  image: string;
-};
-
-type StackItemData = {
-  id: string;
-  type?: 'column' | 'card';
-};
-
-const CardStackStory = () => {
-  const [column, setColumn] = useState<CardItem[]>(
-    faker.helpers.multiple(
-      () => ({
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.lorem.paragraph(),
-        image: faker.image.url(),
-      }),
-      { count: 12 },
-    ),
-  );
-
-  const handleRearrange = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
-    setColumn((prevColumn) => {
-      const newColumns = [...prevColumn];
-      // Reordering cards within a column
-      const sourceCardIndex = prevColumn.findIndex((card) => card.id === source.id);
-      const targetCardIndex = prevColumn.findIndex((card) => card.id === target.id);
-
-      if (typeof sourceCardIndex === 'number' && typeof targetCardIndex === 'number') {
-        const [movedCard] = newColumns.splice(sourceCardIndex, 1);
-
-        let insertIndex;
-        if (sourceCardIndex < targetCardIndex) {
-          insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
-        } else {
-          insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
-        }
-        newColumns.splice(insertIndex, 0, movedCard);
-      }
-      return newColumns;
-    });
-  }, []);
-
-  const handleAddCard = useCallback(() => {
-    setColumn((prevColumn) => {
-      const newColumn = [...prevColumn];
-      const newCard = {
-        id: faker.string.uuid(),
-        title: faker.commerce.productName(),
-        description: faker.lorem.paragraph(),
-        image: faker.image.url(),
-      } satisfies CardItem;
-      newColumn.push(newCard);
-      console.log('[add card]', prevColumn.length, newColumn.length);
-      return newColumn;
-    });
-  }, []);
-
-  const handleRemoveCard = useCallback((cardId: string) => {
-    setColumn((prevColumn) => {
-      const newColumn = [...prevColumn];
-
-      const cardIndex = prevColumn.findIndex((card) => card.id === cardId);
-      if (cardIndex !== -1) {
-        newColumn.splice(cardIndex, 1);
-      }
-
-      return newColumn;
-    });
-  }, []);
-
-  return (
-    <CardStack.Root classNames='is-96'>
-      <CardStack.Content>
-        <CardStack.Stack id='story column' onRearrange={handleRearrange} itemsCount={column.length}>
-          {column.map((card, cardIndex, cardsArray) => {
-            const cardItem = { id: card.id, type: 'card' as const };
-            const prevCardId = cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined;
-            const nextCardId = cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined;
-
-            return (
-              <CardStack.Item asChild key={card.id}>
-                <StackItem.Root
-                  item={cardItem}
-                  focusIndicatorVariant='group'
-                  prevSiblingId={prevCardId}
-                  nextSiblingId={nextCardId}
-                >
-                  <Card.StaticRoot>
-                    <Card.Toolbar>
-                      <StackItem.DragHandle asChild>
-                        <Card.DragHandle toolbarItem />
-                      </StackItem.DragHandle>
-                      <Card.ToolbarSeparator variant='gap' />
-                      <Card.ToolbarIconButton
-                        iconOnly
-                        variant='ghost'
-                        icon='ph--x--regular'
-                        label='Remove card'
-                        onClick={() => handleRemoveCard(card.id)}
-                      />
-                    </Card.Toolbar>
-                    <Card.Poster alt={card.title} image={card.image} />
-                    <Card.Heading>{card.title}</Card.Heading>
-                    <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
-                  </Card.StaticRoot>
-                  <StackItem.DragPreview>
-                    {() => (
-                      <CardDragPreview.Root>
-                        <CardDragPreview.Content>
-                          <Card.Toolbar>
-                            <Card.DragHandle toolbarItem />
-                          </Card.Toolbar>
-                          <Card.Poster alt={card.title} image={card.image} />
-                          <Card.Heading>{card.title}</Card.Heading>
-                          <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
-                        </CardDragPreview.Content>
-                      </CardDragPreview.Root>
-                    )}
-                  </StackItem.DragPreview>
-                </StackItem.Root>
-              </CardStack.Item>
-            );
-          })}
-        </CardStack.Stack>
-
-        <CardStack.Footer>
-          <IconButton icon='ph--plus--regular' label='Add card' onClick={handleAddCard} classNames='is-full' />
-        </CardStack.Footer>
-
-        <CardStack.Heading>{faker.company.name()}</CardStack.Heading>
-      </CardStack.Content>
-    </CardStack.Root>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-stack/CardStack',
-  component: CardStackStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof CardStackStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof CardStackStory>;
-
-export const Default: Story = {};

package/src/exemplars/CardStack/CardStack.tsx

@@ -1,139 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
-
-import type { ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
-import { Card } from '../Card';
-
-type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
-
-const CardStackStack = forwardRef<
-  HTMLDivElement,
-  Omit<StackProps, 'orientation' | 'size' | 'rail' | 'separatorOnScroll'>
->(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
-  return (
-    <Stack
-      orientation='vertical'
-      size='contain'
-      rail={false}
-      classNames={
-        /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
-        ['plb-1', itemsCount > 0 && 'plb-2', classNames]
-      }
-      itemsCount={itemsCount}
-      separatorOnScroll={9}
-      data-density='fine'
-      {...props}
-      ref={forwardedRef}
-    >
-      {children}
-    </Stack>
-  );
-});
-
-const CardStackDragHandle = Card.DragHandle;
-
-const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
-
-const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackHeading, classNames] }
-      : { className: mx(cardStackHeading, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const cardStackFooter =
-  'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
-
-const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackFooter, classNames] }
-      : { className: mx(cardStackFooter, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const cardStackContent =
-  'shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop';
-
-type CardStackContentProps = SharedCardStackProps & {
-  footer?: boolean;
-};
-
-const CardStackContent = forwardRef<HTMLDivElement, CardStackContentProps>(
-  ({ children, classNames, asChild, role = 'none', footer = true, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const baseClassNames = footer ? [cardStackContent, railGridHorizontalContainFitContent] : [cardStackContent];
-    const rootProps = asChild
-      ? { classNames: [...baseClassNames, classNames] }
-      : { className: mx(...baseClassNames, classNames), role };
-    return (
-      <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const cardStackRoot = 'flex flex-col pli-2 plb-2';
-
-const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackRoot, classNames] }
-      : { className: mx(cardStackRoot, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
-
-const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackItem, classNames] }
-      : { className: mx(cardStackItem, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-export const CardStack = {
-  Root: CardStackRoot,
-  Content: CardStackContent,
-  Stack: CardStackStack,
-  Heading: CardStackHeading,
-  Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle,
-  Item: CardStackItem,
-};
-
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };

package/src/exemplars/CardStack/CardStackDragPreview.tsx

@@ -1,61 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type StackProps } from '../../components';
-import { translationKey } from '../../translations';
-
-const CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
-  return (
-    <div className='p-2'>
-      <div className='rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col'>
-        {children}
-      </div>
-    </div>
-  );
-};
-
-const CardStackDragPreviewHeading = ({ children }: PropsWithChildren<{}>) => {
-  const { t } = useTranslation(translationKey);
-  return (
-    <div className='flex items-center p-2'>
-      <IconButton
-        iconOnly
-        icon='ph--dots-six-vertical--regular'
-        variant='ghost'
-        label={t('column drag handle label')}
-        classNames='pli-2'
-      />
-      {children}
-    </div>
-  );
-};
-
-const CardStackDragPreviewContent = ({
-  children,
-  itemsCount = 0,
-}: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
-  return (
-    <div
-      className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
-    >
-      {children}
-    </div>
-  );
-};
-
-const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
-  return <div className='p-2 border-t border-separator'>{children}</div>;
-};
-
-export const CardStackDragPreview = {
-  Root: CardStackDragPreviewRoot,
-  Heading: CardStackDragPreviewHeading,
-  Content: CardStackDragPreviewContent,
-  Footer: CardStackDragPreviewFooter,
-};

package/src/exemplars/CardStack/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export * from './CardStack';
-export * from './CardStackDragPreview';

package/src/exemplars/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Card';
-export * from './CardStack';

package/src/testing/CardContainer.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { ExtrinsicCardContainer, IntrinsicCardContainer, PopoverCardContainer } from '@dxos/storybook-utils';
-
-import { Card } from '../exemplars';
-
-export const CardContainer = ({
-  children,
-  icon = 'ph--placeholder--regular',
-  role,
-}: PropsWithChildren<{ icon?: string; role?: string }>) => {
-  switch (role) {
-    case 'card--popover':
-      return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;
-
-    case 'card--extrinsic':
-      return (
-        <ExtrinsicCardContainer>
-          <Card.StaticRoot>{children}</Card.StaticRoot>
-        </ExtrinsicCardContainer>
-      );
-
-    case 'card--intrinsic':
-      return (
-        <IntrinsicCardContainer>
-          <Card.StaticRoot>{children}</Card.StaticRoot>
-        </IntrinsicCardContainer>
-      );
-
-    default:
-      return <Card.StaticRoot>{children}</Card.StaticRoot>;
-  }
-};