diff --git a/change/@fluentui-react-card-b12bffb2-b1c6-45bf-ba0b-23cb9108bd9e.json b/change/@fluentui-react-card-b12bffb2-b1c6-45bf-ba0b-23cb9108bd9e.json
new file mode 100644
index 00000000000000..fb14cd54d92610
--- /dev/null
+++ b/change/@fluentui-react-card-b12bffb2-b1c6-45bf-ba0b-23cb9108bd9e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: Migrate to new package structure.",
+  "packageName": "@fluentui/react-card",
+  "email": "tristan.watanabe@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/.npmignore b/packages/react-components/react-card/.npmignore
index 52d2a7273a151d..f7ce568a6dbf7c 100644
--- a/packages/react-components/react-card/.npmignore
+++ b/packages/react-components/react-card/.npmignore
@@ -3,10 +3,11 @@
 bundle-size/
 config/
 coverage/
-e2e/
+docs/
 etc/
 node_modules/
 src/
+stories/
 dist/types/
 temp/
 __fixtures__
@@ -16,7 +17,7 @@ __tests__
 *.api.json
 *.log
 *.spec.*
-*.stories.*
+*.cy.*
 *.test.*
 *.yml
 
diff --git a/packages/react-components/react-card/.storybook/main.js b/packages/react-components/react-card/.storybook/main.js
index f57cfd09509e78..26536b61b387f6 100644
--- a/packages/react-components/react-card/.storybook/main.js
+++ b/packages/react-components/react-card/.storybook/main.js
@@ -2,7 +2,7 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  stories: [...rootMain.stories, '../stories/**/*.stories.mdx', '../stories/**/index.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
diff --git a/packages/react-components/react-card/.storybook/tsconfig.json b/packages/react-components/react-card/.storybook/tsconfig.json
index f9f60e1234ed49..ea89218a3d916f 100644
--- a/packages/react-components/react-card/.storybook/tsconfig.json
+++ b/packages/react-components/react-card/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "checkJs": true,
     "types": ["static-assets", "environment", "storybook__addons"]
   },
-  "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"]
+  "include": ["../stories/**/*.stories.ts", "../stories/**/*.stories.tsx", "*.js"]
 }
diff --git a/packages/react-components/react-card/README.md b/packages/react-components/react-card/README.md
index 9780bd30e8d4d2..0137722d821f88 100644
--- a/packages/react-components/react-card/README.md
+++ b/packages/react-components/react-card/README.md
@@ -16,7 +16,7 @@ import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-compo
 
 Example Card usage:
 
-![example of a Card component in usage](./assets/card-example.png)
+![example of a Card component in usage](./docs/assets/card-example.png)
 
 ```jsx
 import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
diff --git a/packages/react-components/react-card/config/api-extractor.json b/packages/react-components/react-card/config/api-extractor.json
index eee94ff6de902d..637d9797ae3e6e 100644
--- a/packages/react-components/react-card/config/api-extractor.json
+++ b/packages/react-components/react-card/config/api-extractor.json
@@ -1,5 +1,9 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/types/index.d.ts"
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "",
+    "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
+  }
 }
diff --git a/packages/react-components/react-card/config/api-extractor.local.json b/packages/react-components/react-card/config/api-extractor.local.json
deleted file mode 100644
index 69e764bce3a592..00000000000000
--- a/packages/react-components/react-card/config/api-extractor.local.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
-  "extends": "./api-extractor.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/types/packages/react-components/<unscopedPackageName>/src/index.d.ts"
-}
diff --git a/packages/react-components/react-card/MIGRATION.md b/packages/react-components/react-card/docs/MIGRATION.md
similarity index 100%
rename from packages/react-components/react-card/MIGRATION.md
rename to packages/react-components/react-card/docs/MIGRATION.md
diff --git a/packages/react-components/react-card/Spec.md b/packages/react-components/react-card/docs/Spec.md
similarity index 100%
rename from packages/react-components/react-card/Spec.md
rename to packages/react-components/react-card/docs/Spec.md
diff --git a/packages/react-components/react-card/assets/Card.png b/packages/react-components/react-card/docs/assets/Card.png
similarity index 100%
rename from packages/react-components/react-card/assets/Card.png
rename to packages/react-components/react-card/docs/assets/Card.png
diff --git a/packages/react-components/react-card/assets/CardHeader.png b/packages/react-components/react-card/docs/assets/CardHeader.png
similarity index 100%
rename from packages/react-components/react-card/assets/CardHeader.png
rename to packages/react-components/react-card/docs/assets/CardHeader.png
diff --git a/packages/react-components/react-card/assets/CardPreview.png b/packages/react-components/react-card/docs/assets/CardPreview.png
similarity index 100%
rename from packages/react-components/react-card/assets/CardPreview.png
rename to packages/react-components/react-card/docs/assets/CardPreview.png
diff --git a/packages/react-components/react-card/assets/ai_deck_template.png b/packages/react-components/react-card/docs/assets/ai_deck_template.png
similarity index 100%
rename from packages/react-components/react-card/assets/ai_deck_template.png
rename to packages/react-components/react-card/docs/assets/ai_deck_template.png
diff --git a/packages/react-components/react-card/assets/avatar_mauricio.svg b/packages/react-components/react-card/docs/assets/avatar_mauricio.svg
similarity index 100%
rename from packages/react-components/react-card/assets/avatar_mauricio.svg
rename to packages/react-components/react-card/docs/assets/avatar_mauricio.svg
diff --git a/packages/react-components/react-card/assets/card-example.png b/packages/react-components/react-card/docs/assets/card-example.png
similarity index 100%
rename from packages/react-components/react-card/assets/card-example.png
rename to packages/react-components/react-card/docs/assets/card-example.png
diff --git a/packages/react-components/react-card/assets/context-interaction-keyboard.png b/packages/react-components/react-card/docs/assets/context-interaction-keyboard.png
similarity index 100%
rename from packages/react-components/react-card/assets/context-interaction-keyboard.png
rename to packages/react-components/react-card/docs/assets/context-interaction-keyboard.png
diff --git a/packages/react-components/react-card/assets/context-interaction-mouse.png b/packages/react-components/react-card/docs/assets/context-interaction-mouse.png
similarity index 100%
rename from packages/react-components/react-card/assets/context-interaction-mouse.png
rename to packages/react-components/react-card/docs/assets/context-interaction-mouse.png
diff --git a/packages/react-components/react-card/assets/context-narrator.png b/packages/react-components/react-card/docs/assets/context-narrator.png
similarity index 100%
rename from packages/react-components/react-card/assets/context-narrator.png
rename to packages/react-components/react-card/docs/assets/context-narrator.png
diff --git a/packages/react-components/react-card/assets/disabled-narrator.png b/packages/react-components/react-card/docs/assets/disabled-narrator.png
similarity index 100%
rename from packages/react-components/react-card/assets/disabled-narrator.png
rename to packages/react-components/react-card/docs/assets/disabled-narrator.png
diff --git a/packages/react-components/react-card/assets/disabled.png b/packages/react-components/react-card/docs/assets/disabled.png
similarity index 100%
rename from packages/react-components/react-card/assets/disabled.png
rename to packages/react-components/react-card/docs/assets/disabled.png
diff --git a/packages/react-components/react-card/assets/interactive-interaction-keyboard.png b/packages/react-components/react-card/docs/assets/interactive-interaction-keyboard.png
similarity index 100%
rename from packages/react-components/react-card/assets/interactive-interaction-keyboard.png
rename to packages/react-components/react-card/docs/assets/interactive-interaction-keyboard.png
diff --git a/packages/react-components/react-card/assets/interactive-interaction-mouse.png b/packages/react-components/react-card/docs/assets/interactive-interaction-mouse.png
similarity index 100%
rename from packages/react-components/react-card/assets/interactive-interaction-mouse.png
rename to packages/react-components/react-card/docs/assets/interactive-interaction-mouse.png
diff --git a/packages/react-components/react-card/assets/interactive-narrator.png b/packages/react-components/react-card/docs/assets/interactive-narrator.png
similarity index 100%
rename from packages/react-components/react-card/assets/interactive-narrator.png
rename to packages/react-components/react-card/docs/assets/interactive-narrator.png
diff --git a/packages/react-components/react-card/assets/non-interactive-interaction-keyboard.png b/packages/react-components/react-card/docs/assets/non-interactive-interaction-keyboard.png
similarity index 100%
rename from packages/react-components/react-card/assets/non-interactive-interaction-keyboard.png
rename to packages/react-components/react-card/docs/assets/non-interactive-interaction-keyboard.png
diff --git a/packages/react-components/react-card/assets/non-interactive-interaction-mouse.png b/packages/react-components/react-card/docs/assets/non-interactive-interaction-mouse.png
similarity index 100%
rename from packages/react-components/react-card/assets/non-interactive-interaction-mouse.png
rename to packages/react-components/react-card/docs/assets/non-interactive-interaction-mouse.png
diff --git a/packages/react-components/react-card/assets/non-interactive-narrator.png b/packages/react-components/react-card/docs/assets/non-interactive-narrator.png
similarity index 100%
rename from packages/react-components/react-card/assets/non-interactive-narrator.png
rename to packages/react-components/react-card/docs/assets/non-interactive-narrator.png
diff --git a/packages/react-components/react-card/assets/non-interactive-selectable-interaction-keyboard.png b/packages/react-components/react-card/docs/assets/non-interactive-selectable-interaction-keyboard.png
similarity index 100%
rename from packages/react-components/react-card/assets/non-interactive-selectable-interaction-keyboard.png
rename to packages/react-components/react-card/docs/assets/non-interactive-selectable-interaction-keyboard.png
diff --git a/packages/react-components/react-card/assets/non-interactive-selectable-interaction-mouse.png b/packages/react-components/react-card/docs/assets/non-interactive-selectable-interaction-mouse.png
similarity index 100%
rename from packages/react-components/react-card/assets/non-interactive-selectable-interaction-mouse.png
rename to packages/react-components/react-card/docs/assets/non-interactive-selectable-interaction-mouse.png
diff --git a/packages/react-components/react-card/assets/selectable-interaction-keyboard.png b/packages/react-components/react-card/docs/assets/selectable-interaction-keyboard.png
similarity index 100%
rename from packages/react-components/react-card/assets/selectable-interaction-keyboard.png
rename to packages/react-components/react-card/docs/assets/selectable-interaction-keyboard.png
diff --git a/packages/react-components/react-card/assets/selectable-interaction-mouse.png b/packages/react-components/react-card/docs/assets/selectable-interaction-mouse.png
similarity index 100%
rename from packages/react-components/react-card/assets/selectable-interaction-mouse.png
rename to packages/react-components/react-card/docs/assets/selectable-interaction-mouse.png
diff --git a/packages/react-components/react-card/assets/selectable-narrator.png b/packages/react-components/react-card/docs/assets/selectable-narrator.png
similarity index 100%
rename from packages/react-components/react-card/assets/selectable-narrator.png
rename to packages/react-components/react-card/docs/assets/selectable-narrator.png
diff --git a/packages/react-components/react-card/package.json b/packages/react-components/react-card/package.json
index 5b881ae036b15a..2c008de000037a 100644
--- a/packages/react-components/react-card/package.json
+++ b/packages/react-components/react-card/package.json
@@ -5,7 +5,7 @@
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -23,10 +23,9 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-card/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -58,9 +57,10 @@
   },
   "exports": {
     ".": {
-      "types": "./lib/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
-    }
+    },
+    "./package.json": "./package.json"
   }
 }
diff --git a/packages/react-components/react-card/e2e/Card.e2e.tsx b/packages/react-components/react-card/src/components/Card/Card.cy.tsx
similarity index 98%
rename from packages/react-components/react-card/e2e/Card.e2e.tsx
rename to packages/react-components/react-card/src/components/Card/Card.cy.tsx
index 66c7bfa324e0db..eb6393c8358c18 100644
--- a/packages/react-components/react-card/e2e/Card.e2e.tsx
+++ b/packages/react-components/react-card/src/components/Card/Card.cy.tsx
@@ -14,7 +14,7 @@ const mountFluent = (element: JSX.Element) => {
 const CardSample = (props: CardProps) => {
   const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-card';
 
-  const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
+  const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
 
   return (
     <>
diff --git a/packages/react-components/react-card/src/components/Card/Card.test.tsx b/packages/react-components/react-card/src/components/Card/Card.test.tsx
index 5c791958cff0a2..cff120190e4d85 100644
--- a/packages/react-components/react-card/src/components/Card/Card.test.tsx
+++ b/packages/react-components/react-card/src/components/Card/Card.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Card } from './Card';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('Card', () => {
   isConformant({
diff --git a/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx b/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
index faf4af2bb6342c..119c955d5593ab 100644
--- a/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
+++ b/packages/react-components/react-card/src/components/CardFooter/CardFooter.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { CardFooter } from './CardFooter';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('CardFooter', () => {
   isConformant({
diff --git a/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
index d70c8f7d3a9894..4f1a171daa2168 100644
--- a/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-components/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { CardHeader } from './CardHeader';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('CardHeader', () => {
   isConformant({
diff --git a/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
index 4aa45bb0642c3a..adc5afdc0aab89 100644
--- a/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-components/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { CardPreview } from './CardPreview';
-import { isConformant } from '../../common/isConformant';
+import { isConformant } from '../../testing/isConformant';
 
 describe('CardPreview', () => {
   isConformant({
diff --git a/packages/react-components/react-card/src/common/isConformant.ts b/packages/react-components/react-card/src/testing/isConformant.ts
similarity index 100%
rename from packages/react-components/react-card/src/common/isConformant.ts
rename to packages/react-components/react-card/src/testing/isConformant.ts
diff --git a/packages/react-components/react-card/src/stories/Card/CardAppearance.stories.tsx b/packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
similarity index 100%
rename from packages/react-components/react-card/src/stories/Card/CardAppearance.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardAppearance.stories.tsx
diff --git a/packages/react-components/react-card/src/stories/Card/CardDefault.stories.tsx b/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
similarity index 84%
rename from packages/react-components/react-card/src/stories/Card/CardDefault.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
index 7422527281c3ba..7a3f426b87b8ea 100644
--- a/packages/react-components/react-card/src/stories/Card/CardDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardDefault.stories.tsx
@@ -5,9 +5,9 @@ import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
 import { Card, CardFooter, CardHeader, CardPreview } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const avatarElviaURL = ASSET_URL + '/assets/avatar_elvia.svg';
-const wordLogoURL = ASSET_URL + '/assets/word_logo.svg';
-const docTemplateURL = ASSET_URL + '/assets/doc_template.png';
+const avatarElviaURL = ASSET_URL + '/stories/assets/avatar_elvia.svg';
+const wordLogoURL = ASSET_URL + '/stories/assets/word_logo.svg';
+const docTemplateURL = ASSET_URL + '/stories/assets/doc_template.png';
 
 export const Default = () => {
   return (
diff --git a/packages/react-components/react-card/src/stories/Card/CardDescription.md b/packages/react-components/react-card/stories/Card/CardDescription.md
similarity index 100%
rename from packages/react-components/react-card/src/stories/Card/CardDescription.md
rename to packages/react-components/react-card/stories/Card/CardDescription.md
diff --git a/packages/react-components/react-card/src/stories/Card/CardFocusMode.stories.tsx b/packages/react-components/react-card/stories/Card/CardFocusMode.stories.tsx
similarity index 100%
rename from packages/react-components/react-card/src/stories/Card/CardFocusMode.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardFocusMode.stories.tsx
diff --git a/packages/react-components/react-card/src/stories/Card/CardOrientation.stories.tsx b/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
similarity index 95%
rename from packages/react-components/react-card/src/stories/Card/CardOrientation.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
index fdf655c20eaa77..af2add1cc94ba7 100644
--- a/packages/react-components/react-card/src/stories/Card/CardOrientation.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardOrientation.stories.tsx
@@ -6,7 +6,7 @@ import { SampleCard, Title } from './SampleCard.stories';
 import Logo from '../../../assets/logo.svg';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const avatarElviaURL = ASSET_URL + '/assets/avatar_elvia.svg';
+const avatarElviaURL = ASSET_URL + '/stories/assets/avatar_elvia.svg';
 
 const useStyles = makeStyles({
   root: {
diff --git a/packages/react-components/react-card/src/stories/Card/CardSize.stories.tsx b/packages/react-components/react-card/stories/Card/CardSize.stories.tsx
similarity index 100%
rename from packages/react-components/react-card/src/stories/Card/CardSize.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardSize.stories.tsx
diff --git a/packages/react-components/react-card/src/stories/Card/CardTemplates.stories.tsx b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
similarity index 94%
rename from packages/react-components/react-card/src/stories/Card/CardTemplates.stories.tsx
rename to packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
index ae04ba444df20c..2ca604c36912a9 100644
--- a/packages/react-components/react-card/src/stories/Card/CardTemplates.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/CardTemplates.stories.tsx
@@ -24,14 +24,14 @@ import {
   MoreHorizontal48Regular,
 } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview } from '@fluentui/react-card';
-import appLogo from '../../../assets/app_logo.svg';
-import logo1 from '../../../assets/logo.svg';
-import logo2 from '../../../assets/logo2.svg';
-import logo3 from '../../../assets/logo3.svg';
-import excelLogo from '../../../assets/excel_logo.svg';
-import office1 from '../../../assets/office1.png';
-import office2 from '../../../assets/office2.png';
-import avatarColin from '../../../assets/avatar_colin.svg';
+import appLogo from '../assets/app_logo.svg';
+import logo1 from '../assets/logo.svg';
+import logo2 from '../assets/logo2.svg';
+import logo3 from '../assets/logo3.svg';
+import excelLogo from '../assets/excel_logo.svg';
+import office1 from '../assets/office1.png';
+import office2 from '../assets/office2.png';
+import avatarColin from '../assets/avatar_colin.svg';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
 const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
diff --git a/packages/react-components/react-card/src/stories/Card/SampleCard.stories.tsx b/packages/react-components/react-card/stories/Card/SampleCard.stories.tsx
similarity index 91%
rename from packages/react-components/react-card/src/stories/Card/SampleCard.stories.tsx
rename to packages/react-components/react-card/stories/Card/SampleCard.stories.tsx
index c5999ae4c6429a..9b2c2427167929 100644
--- a/packages/react-components/react-card/src/stories/Card/SampleCard.stories.tsx
+++ b/packages/react-components/react-card/stories/Card/SampleCard.stories.tsx
@@ -5,8 +5,8 @@ import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card'
 import type { CardProps } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
-const salesPresentationTemplateURL = ASSET_URL + '/assets/sales_template.png';
+const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
+const salesPresentationTemplateURL = ASSET_URL + '/stories/assets/sales_template.png';
 
 export const SampleCard = (props: CardProps) => (
   <Card {...props}>
diff --git a/packages/react-components/react-card/src/stories/Card/index.stories.tsx b/packages/react-components/react-card/stories/Card/index.stories.tsx
similarity index 100%
rename from packages/react-components/react-card/src/stories/Card/index.stories.tsx
rename to packages/react-components/react-card/stories/Card/index.stories.tsx
diff --git a/packages/react-components/react-card/src/stories/CardFooter/CardFooterDefault.stories.tsx b/packages/react-components/react-card/stories/CardFooter/CardFooterDefault.stories.tsx
similarity index 92%
rename from packages/react-components/react-card/src/stories/CardFooter/CardFooterDefault.stories.tsx
rename to packages/react-components/react-card/stories/CardFooter/CardFooterDefault.stories.tsx
index 288ebd05abd1d9..8349ec5e29a152 100644
--- a/packages/react-components/react-card/src/stories/CardFooter/CardFooterDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/CardFooter/CardFooterDefault.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles, Button } from '@fluentui/react-components';
 import { ArrowReply16Regular, MoreHorizontal16Filled, Share16Regular } from '@fluentui/react-icons';
-import { CardFooter } from '../../index';
+import { CardFooter } from '@fluentui/react-card';
 
 const useStyles = makeStyles({
   footer: {
diff --git a/packages/react-components/react-card/src/stories/CardFooter/CardFooterDescription.md b/packages/react-components/react-card/stories/CardFooter/CardFooterDescription.md
similarity index 100%
rename from packages/react-components/react-card/src/stories/CardFooter/CardFooterDescription.md
rename to packages/react-components/react-card/stories/CardFooter/CardFooterDescription.md
diff --git a/packages/react-components/react-card/src/stories/CardFooter/index.stories.tsx b/packages/react-components/react-card/stories/CardFooter/index.stories.tsx
similarity index 86%
rename from packages/react-components/react-card/src/stories/CardFooter/index.stories.tsx
rename to packages/react-components/react-card/stories/CardFooter/index.stories.tsx
index f7869cc4380e5d..d06cde1636407c 100644
--- a/packages/react-components/react-card/src/stories/CardFooter/index.stories.tsx
+++ b/packages/react-components/react-card/stories/CardFooter/index.stories.tsx
@@ -1,4 +1,4 @@
-import { CardFooter } from '../../index';
+import { CardFooter } from '@fluentui/react-card';
 import descriptionMd from './CardFooterDescription.md';
 
 export { Default } from './CardFooterDefault.stories';
diff --git a/packages/react-components/react-card/src/stories/CardHeader/CardHeaderDefault.stories.tsx b/packages/react-components/react-card/stories/CardHeader/CardHeaderDefault.stories.tsx
similarity index 95%
rename from packages/react-components/react-card/src/stories/CardHeader/CardHeaderDefault.stories.tsx
rename to packages/react-components/react-card/stories/CardHeader/CardHeaderDefault.stories.tsx
index 38a95693e15b1e..59dfa5e7a2b487 100644
--- a/packages/react-components/react-card/src/stories/CardHeader/CardHeaderDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/CardHeader/CardHeaderDefault.stories.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { CardHeader } from '../../index';
+import { CardHeader } from '@fluentui/react-card';
 import { makeStyles, shorthands, Button, Body1, Caption1 } from '@fluentui/react-components';
 import { MoreHorizontal20Filled } from '@fluentui/react-icons';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
 
-const powerpointLogoURL = ASSET_URL + '/assets/powerpoint_logo.svg';
+const powerpointLogoURL = ASSET_URL + '/stories/assets/powerpoint_logo.svg';
 
 const useStyles = makeStyles({
   container: {
diff --git a/packages/react-components/react-card/src/stories/CardHeader/CardHeaderDescription.md b/packages/react-components/react-card/stories/CardHeader/CardHeaderDescription.md
similarity index 100%
rename from packages/react-components/react-card/src/stories/CardHeader/CardHeaderDescription.md
rename to packages/react-components/react-card/stories/CardHeader/CardHeaderDescription.md
diff --git a/packages/react-components/react-card/src/stories/CardHeader/index.stories.tsx b/packages/react-components/react-card/stories/CardHeader/index.stories.tsx
similarity index 86%
rename from packages/react-components/react-card/src/stories/CardHeader/index.stories.tsx
rename to packages/react-components/react-card/stories/CardHeader/index.stories.tsx
index 5df747bf210ff4..4f2a2cc6f1302a 100644
--- a/packages/react-components/react-card/src/stories/CardHeader/index.stories.tsx
+++ b/packages/react-components/react-card/stories/CardHeader/index.stories.tsx
@@ -1,4 +1,4 @@
-import { CardHeader } from '../../index';
+import { CardHeader } from '@fluentui/react-card';
 import descriptionMd from './CardHeaderDescription.md';
 
 export { Default } from './CardHeaderDefault.stories';
diff --git a/packages/react-components/react-card/src/stories/CardPreview/CardPreviewDefault.stories.tsx b/packages/react-components/react-card/stories/CardPreview/CardPreviewDefault.stories.tsx
similarity index 64%
rename from packages/react-components/react-card/src/stories/CardPreview/CardPreviewDefault.stories.tsx
rename to packages/react-components/react-card/stories/CardPreview/CardPreviewDefault.stories.tsx
index 10367d71a3508a..7c74c65cf0c49d 100644
--- a/packages/react-components/react-card/src/stories/CardPreview/CardPreviewDefault.stories.tsx
+++ b/packages/react-components/react-card/stories/CardPreview/CardPreviewDefault.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { CardPreview } from '../../index';
+import { CardPreview } from '@fluentui/react-card';
 
 const ASSET_URL = 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card';
-const wordLogoURL = ASSET_URL + '/assets/word_logo.svg';
-const docTemplateURL = ASSET_URL + '/assets/doc_template.png';
+const wordLogoURL = ASSET_URL + '/stories/assets/word_logo.svg';
+const docTemplateURL = ASSET_URL + '/stories/assets/doc_template.png';
 
 export const Default = () => (
   <CardPreview logo={<img src={wordLogoURL} alt="Microsoft Word logo" />}>
diff --git a/packages/react-components/react-card/src/stories/CardPreview/CardPreviewDescription.md b/packages/react-components/react-card/stories/CardPreview/CardPreviewDescription.md
similarity index 100%
rename from packages/react-components/react-card/src/stories/CardPreview/CardPreviewDescription.md
rename to packages/react-components/react-card/stories/CardPreview/CardPreviewDescription.md
diff --git a/packages/react-components/react-card/src/stories/CardPreview/index.stories.tsx b/packages/react-components/react-card/stories/CardPreview/index.stories.tsx
similarity index 86%
rename from packages/react-components/react-card/src/stories/CardPreview/index.stories.tsx
rename to packages/react-components/react-card/stories/CardPreview/index.stories.tsx
index 9d0f61bd6555e1..29cb88293d2329 100644
--- a/packages/react-components/react-card/src/stories/CardPreview/index.stories.tsx
+++ b/packages/react-components/react-card/stories/CardPreview/index.stories.tsx
@@ -1,4 +1,4 @@
-import { CardPreview } from '../../index';
+import { CardPreview } from '@fluentui/react-card';
 import descriptionMd from './CardPreviewDescription.md';
 
 export { Default } from './CardPreviewDefault.stories';
diff --git a/packages/react-components/react-card/assets/app_logo.svg b/packages/react-components/react-card/stories/assets/app_logo.svg
similarity index 100%
rename from packages/react-components/react-card/assets/app_logo.svg
rename to packages/react-components/react-card/stories/assets/app_logo.svg
diff --git a/packages/react-components/react-card/assets/avatar_colin.svg b/packages/react-components/react-card/stories/assets/avatar_colin.svg
similarity index 100%
rename from packages/react-components/react-card/assets/avatar_colin.svg
rename to packages/react-components/react-card/stories/assets/avatar_colin.svg
diff --git a/packages/react-components/react-card/assets/avatar_elvia.svg b/packages/react-components/react-card/stories/assets/avatar_elvia.svg
similarity index 100%
rename from packages/react-components/react-card/assets/avatar_elvia.svg
rename to packages/react-components/react-card/stories/assets/avatar_elvia.svg
diff --git a/packages/react-components/react-card/assets/doc_template.png b/packages/react-components/react-card/stories/assets/doc_template.png
similarity index 100%
rename from packages/react-components/react-card/assets/doc_template.png
rename to packages/react-components/react-card/stories/assets/doc_template.png
diff --git a/packages/react-components/react-card/assets/excel_logo.svg b/packages/react-components/react-card/stories/assets/excel_logo.svg
similarity index 100%
rename from packages/react-components/react-card/assets/excel_logo.svg
rename to packages/react-components/react-card/stories/assets/excel_logo.svg
diff --git a/packages/react-components/react-card/assets/logo.svg b/packages/react-components/react-card/stories/assets/logo.svg
similarity index 100%
rename from packages/react-components/react-card/assets/logo.svg
rename to packages/react-components/react-card/stories/assets/logo.svg
diff --git a/packages/react-components/react-card/assets/logo2.svg b/packages/react-components/react-card/stories/assets/logo2.svg
similarity index 100%
rename from packages/react-components/react-card/assets/logo2.svg
rename to packages/react-components/react-card/stories/assets/logo2.svg
diff --git a/packages/react-components/react-card/assets/logo3.svg b/packages/react-components/react-card/stories/assets/logo3.svg
similarity index 100%
rename from packages/react-components/react-card/assets/logo3.svg
rename to packages/react-components/react-card/stories/assets/logo3.svg
diff --git a/packages/react-components/react-card/assets/office1.png b/packages/react-components/react-card/stories/assets/office1.png
similarity index 100%
rename from packages/react-components/react-card/assets/office1.png
rename to packages/react-components/react-card/stories/assets/office1.png
diff --git a/packages/react-components/react-card/assets/office2.png b/packages/react-components/react-card/stories/assets/office2.png
similarity index 100%
rename from packages/react-components/react-card/assets/office2.png
rename to packages/react-components/react-card/stories/assets/office2.png
diff --git a/packages/react-components/react-card/assets/powerpoint_logo.svg b/packages/react-components/react-card/stories/assets/powerpoint_logo.svg
similarity index 100%
rename from packages/react-components/react-card/assets/powerpoint_logo.svg
rename to packages/react-components/react-card/stories/assets/powerpoint_logo.svg
diff --git a/packages/react-components/react-card/assets/sales_template.png b/packages/react-components/react-card/stories/assets/sales_template.png
similarity index 100%
rename from packages/react-components/react-card/assets/sales_template.png
rename to packages/react-components/react-card/stories/assets/sales_template.png
diff --git a/packages/react-components/react-card/assets/word_logo.svg b/packages/react-components/react-card/stories/assets/word_logo.svg
similarity index 100%
rename from packages/react-components/react-card/assets/word_logo.svg
rename to packages/react-components/react-card/stories/assets/word_logo.svg
diff --git a/packages/react-components/react-card/e2e/tsconfig.json b/packages/react-components/react-card/tsconfig.cy.json
similarity index 70%
rename from packages/react-components/react-card/e2e/tsconfig.json
rename to packages/react-components/react-card/tsconfig.cy.json
index f6b23b30d510ba..93a140885851da 100644
--- a/packages/react-components/react-card/e2e/tsconfig.json
+++ b/packages/react-components/react-card/tsconfig.cy.json
@@ -1,9 +1,9 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "isolatedModules": false,
     "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"],
     "lib": ["ES2019", "dom"]
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.cy.ts", "**/*.cy.tsx"]
 }
diff --git a/packages/react-components/react-card/tsconfig.json b/packages/react-components/react-card/tsconfig.json
index 9087bac77cc8d7..1317f81620ca5e 100644
--- a/packages/react-components/react-card/tsconfig.json
+++ b/packages/react-components/react-card/tsconfig.json
@@ -22,7 +22,7 @@
       "path": "./.storybook/tsconfig.json"
     },
     {
-      "path": "./e2e/tsconfig.json"
+      "path": "./tsconfig.cy.json"
     }
   ]
 }
diff --git a/packages/react-components/react-card/tsconfig.lib.json b/packages/react-components/react-card/tsconfig.lib.json
index 5d7b14f1e0b70c..e17f808c039339 100644
--- a/packages/react-components/react-card/tsconfig.lib.json
+++ b/packages/react-components/react-card/tsconfig.lib.json
@@ -3,20 +3,22 @@
   "compilerOptions": {
     "noEmit": false,
     "lib": ["ES2019", "dom"],
-    "outDir": "dist",
     "declaration": true,
-    "declarationDir": "dist/types",
+    "declarationDir": "../../../dist/out-tsc/types",
+    "outDir": "../../../dist/out-tsc",
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },
   "exclude": [
-    "./src/common/**",
+    "./src/testing/**",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
     "**/*.test.tsx",
     "**/*.stories.ts",
-    "**/*.stories.tsx"
+    "**/*.stories.tsx",
+    "**/*.cy.ts",
+    "**/*.cy.tsx"
   ],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/packages/react-components/react-card/tsconfig.spec.json b/packages/react-components/react-card/tsconfig.spec.json
index 469fcba4d7ba75..911456fe4b4d91 100644
--- a/packages/react-components/react-card/tsconfig.spec.json
+++ b/packages/react-components/react-card/tsconfig.spec.json
@@ -5,5 +5,13 @@
     "outDir": "dist",
     "types": ["jest", "node"]
   },
-  "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.d.ts",
+    "./src/testing/**/*.ts",
+    "./src/testing/**/*.tsx"
+  ]
 }