@fragments-sdk/ui 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/ui",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "license": "MIT",
   "description": "Customizable UI components built on Base UI headless primitives",
   "author": "Conan McNicholl",
@@ -10,97 +10,25 @@
     "url": "https://github.com/ConanMcN/fragments"
   },
   "type": "module",
-  "main": "dist/index.cjs",
-  "types": "dist/index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "fragments": "fragments.json",
   "sideEffects": [
-    "*.scss",
-    "*.css"
+    "**/*.scss",
+    "**/*.css"
   ],
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./datepicker": {
-      "import": {
-        "types": "./dist/components/DatePicker/index.d.ts",
-        "default": "./dist/datepicker.js"
-      },
-      "require": {
-        "types": "./dist/components/DatePicker/index.d.ts",
-        "default": "./dist/datepicker.cjs"
-      }
-    },
-    "./chart": {
-      "import": {
-        "types": "./dist/components/Chart/index.d.ts",
-        "default": "./dist/chart.js"
-      },
-      "require": {
-        "types": "./dist/components/Chart/index.d.ts",
-        "default": "./dist/chart.cjs"
-      }
-    },
-    "./markdown": {
-      "import": {
-        "types": "./dist/components/Markdown/index.d.ts",
-        "default": "./dist/markdown.js"
-      },
-      "require": {
-        "types": "./dist/components/Markdown/index.d.ts",
-        "default": "./dist/markdown.cjs"
-      }
-    },
-    "./codeblock": {
-      "import": {
-        "types": "./dist/components/CodeBlock/index.d.ts",
-        "default": "./dist/codeblock.js"
-      },
-      "require": {
-        "types": "./dist/components/CodeBlock/index.d.ts",
-        "default": "./dist/codeblock.cjs"
-      }
-    },
-    "./colorpicker": {
-      "import": {
-        "types": "./dist/components/ColorPicker/index.d.ts",
-        "default": "./dist/colorpicker.js"
-      },
-      "require": {
-        "types": "./dist/components/ColorPicker/index.d.ts",
-        "default": "./dist/colorpicker.cjs"
-      }
-    },
-    "./table": {
-      "import": {
-        "types": "./dist/components/Table/index.d.ts",
-        "default": "./dist/table.js"
-      },
-      "require": {
-        "types": "./dist/components/Table/index.d.ts",
-        "default": "./dist/table.cjs"
-      }
-    },
+    ".": "./src/index.ts",
+    "./datepicker": "./src/components/DatePicker/index.tsx",
+    "./chart": "./src/components/Chart/index.tsx",
+    "./markdown": "./src/components/Markdown/index.tsx",
+    "./codeblock": "./src/components/CodeBlock/index.tsx",
+    "./colorpicker": "./src/components/ColorPicker/index.tsx",
+    "./table": "./src/components/Table/index.tsx",
     "./styles": "./src/styles/globals.scss",
     "./tokens": "./src/tokens/_variables.scss",
     "./mixins": "./src/tokens/_mixins.scss",
-    "./brand": {
-      "import": {
-        "types": "./dist/brand.d.ts",
-        "default": "./dist/brand.js"
-      },
-      "require": {
-        "types": "./dist/brand.d.ts",
-        "default": "./dist/brand.cjs"
-      }
-    },
+    "./brand": "./src/brand.ts",
     "./fragments.json": "./fragments.json",
     "./assets/*": "./src/assets/*",
     "./package.json": "./package.json"
@@ -119,7 +47,108 @@
     "react-components"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "dist/index.cjs",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.js"
+        },
+        "require": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.cjs"
+        }
+      },
+      "./datepicker": {
+        "import": {
+          "types": "./dist/components/DatePicker/index.d.ts",
+          "default": "./dist/datepicker.js"
+        },
+        "require": {
+          "types": "./dist/components/DatePicker/index.d.ts",
+          "default": "./dist/datepicker.cjs"
+        }
+      },
+      "./chart": {
+        "import": {
+          "types": "./dist/components/Chart/index.d.ts",
+          "default": "./dist/chart.js"
+        },
+        "require": {
+          "types": "./dist/components/Chart/index.d.ts",
+          "default": "./dist/chart.cjs"
+        }
+      },
+      "./markdown": {
+        "import": {
+          "types": "./dist/components/Markdown/index.d.ts",
+          "default": "./dist/markdown.js"
+        },
+        "require": {
+          "types": "./dist/components/Markdown/index.d.ts",
+          "default": "./dist/markdown.cjs"
+        }
+      },
+      "./codeblock": {
+        "import": {
+          "types": "./dist/components/CodeBlock/index.d.ts",
+          "default": "./dist/codeblock.js"
+        },
+        "require": {
+          "types": "./dist/components/CodeBlock/index.d.ts",
+          "default": "./dist/codeblock.cjs"
+        }
+      },
+      "./colorpicker": {
+        "import": {
+          "types": "./dist/components/ColorPicker/index.d.ts",
+          "default": "./dist/colorpicker.js"
+        },
+        "require": {
+          "types": "./dist/components/ColorPicker/index.d.ts",
+          "default": "./dist/colorpicker.cjs"
+        }
+      },
+      "./table": {
+        "import": {
+          "types": "./dist/components/Table/index.d.ts",
+          "default": "./dist/table.js"
+        },
+        "require": {
+          "types": "./dist/components/Table/index.d.ts",
+          "default": "./dist/table.cjs"
+        }
+      },
+      "./styles": {
+        "sass": "./src/styles/globals.scss",
+        "default": "./dist/assets/ui.css"
+      },
+      "./tokens": "./src/tokens/_variables.scss",
+      "./mixins": "./src/tokens/_mixins.scss",
+      "./brand": {
+        "import": {
+          "types": "./dist/brand.d.ts",
+          "default": "./dist/brand.js"
+        },
+        "require": {
+          "types": "./dist/brand.d.ts",
+          "default": "./dist/brand.cjs"
+        }
+      },
+      "./fragments.json": "./fragments.json",
+      "./assets/*": "./src/assets/*",
+      "./package.json": "./package.json"
+    }
+  },
+  "scripts": {
+    "dev": "node ../../packages/cli/dist/bin.js dev",
+    "build": "node ../../packages/cli/dist/bin.js build && vite build && tsc -p tsconfig.build.json",
+    "lint": "eslint src",
+    "validate": "node ../../packages/cli/dist/bin.js validate",
+    "test": "vitest run"
   },
   "peerDependencies": {
     "@tanstack/react-table": ">=8.0.0",
@@ -168,6 +197,7 @@
     "@scarf/scarf": "^1.4.0"
   },
   "devDependencies": {
+    "@fragments-sdk/cli": "workspace:*",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.1.0",
@@ -187,20 +217,11 @@
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vitest": "^2.1.8",
-    "vitest-axe": "^0.1.0",
-    "@fragments-sdk/cli": "0.7.15"
+    "vitest-axe": "^0.1.0"
   },
   "files": [
     "src",
     "dist",
     "fragments.json"
-  ],
-  "scripts": {
-    "dev": "node ../../packages/cli/dist/bin.js dev",
-    "build": "node ../../packages/cli/dist/bin.js build && vite build && tsc -p tsconfig.build.json",
-    "lint": "eslint src",
-    "validate": "node ../../packages/cli/dist/bin.js validate",
-    "test": "vitest run"
-  },
-  "module": "dist/index.js"
-}
+  ]
+}

package/src/components/Loading/Loading.fragment.tsx

@@ -144,7 +144,7 @@ export default defineFragment({
       name: 'Screen',
       description: 'Full-screen loading state with optional label',
       render: () => (
-        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
+        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', transform: 'scale(1)' }}>
           <Loading.Screen size="lg" label="Loading application..." showLabel />
         </div>
       ),

package/src/components/Sidebar/Sidebar.fragment.tsx

@@ -86,44 +86,56 @@ const demoContainerStyle: React.CSSProperties = {
   width: '100%',
 };
 
+// Isolate preview sidebar state from any parent SidebarProvider (e.g., docs app's AppShell)
+function PreviewIsolation({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider enableKeyboardShortcut={false}>
+      {children}
+    </SidebarProvider>
+  );
+}
+
 // Stateful demo for collapsed state
 function CollapsedDemo() {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
-        <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-          <LogoIcon size={32} />
-          <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-        </Sidebar.Header>
-        <Sidebar.Nav>
-          <Sidebar.Section>
-            <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-            <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-            <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
-            <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-          </Sidebar.Section>
-          <Sidebar.Section label="Settings">
-            <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
-            <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
-          </Sidebar.Section>
-        </Sidebar.Nav>
-        <Sidebar.Footer>
-          <Sidebar.CollapseToggle />
-        </Sidebar.Footer>
-      </Sidebar>
-      <main style={mainContentStyle}>
-        Hover over icons to see tooltips. Click toggle to expand.
-      </main>
-    </div>
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
+      <div style={demoContainerStyle}>
+        <Sidebar>
+          <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+            <LogoIcon size={32} />
+            <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+          </Sidebar.Header>
+          <Sidebar.Nav>
+            <Sidebar.Section>
+              <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+              <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+              <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
+              <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+            </Sidebar.Section>
+            <Sidebar.Section label="Settings">
+              <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
+              <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
+            </Sidebar.Section>
+          </Sidebar.Nav>
+          <Sidebar.Footer>
+            <Sidebar.CollapseToggle />
+          </Sidebar.Footer>
+        </Sidebar>
+        <main style={mainContentStyle}>
+          Hover over icons to see tooltips. Click toggle to expand.
+        </main>
+      </div>
+    </SidebarProvider>
   );
 }
 
 // Demo for submenu expansion using uncontrolled defaultExpanded
 function SubmenuDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -156,6 +168,7 @@ function SubmenuDemo() {
         Click on "Projects" or "Team" to toggle their submenus
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -182,7 +195,7 @@ function ExternalTriggerContent() {
 function ProviderDemo() {
   return (
     <div style={demoContainerStyle}>
-      <SidebarProvider>
+      <SidebarProvider enableKeyboardShortcut={false}>
         <Sidebar>
           <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
             <LogoIcon size={32} />
@@ -206,8 +219,9 @@ function ProviderDemo() {
 // Demo for asChild pattern with mock Link
 function AsChildDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -236,14 +250,16 @@ function AsChildDemo() {
         Items rendered as Link components using asChild pattern
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
 // Demo for section with action button
 function SectionActionDemo() {
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -274,6 +290,7 @@ function SectionActionDemo() {
         Section header has an "Add" action button
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -282,8 +299,9 @@ function SkeletonDemo() {
   const [loading, setLoading] = useState(true);
 
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar>
+    <PreviewIsolation>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -317,6 +335,7 @@ function SkeletonDemo() {
         </div>
       </main>
     </div>
+    </PreviewIsolation>
   );
 }
 
@@ -324,8 +343,9 @@ function SkeletonDemo() {
 function OffcanvasDemo() {
   const [collapsed, setCollapsed] = useState(true);
   return (
-    <div style={demoContainerStyle}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas">
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas" enableKeyboardShortcut={false}>
+      <div style={demoContainerStyle}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -346,6 +366,7 @@ function OffcanvasDemo() {
         Offcanvas mode hides sidebar completely. Toggle stays visible to re-open.
       </main>
     </div>
+    </SidebarProvider>
   );
 }
 
@@ -354,8 +375,9 @@ function RailDemo() {
   const [collapsed, setCollapsed] = useState(false);
 
   return (
-    <div style={{ ...demoContainerStyle, position: 'relative' }}>
-      <Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
+    <SidebarProvider collapsed={collapsed} onCollapsedChange={setCollapsed} enableKeyboardShortcut={false}>
+      <div style={{ ...demoContainerStyle, position: 'relative' }}>
+        <Sidebar>
         <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
           <LogoIcon size={32} />
           <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
@@ -380,6 +402,7 @@ function RailDemo() {
         </div>
       </main>
     </div>
+    </SidebarProvider>
   );
 }
 
@@ -544,32 +567,34 @@ export default defineFragment({
   </Sidebar.Footer>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-              </Sidebar.Section>
-              <Sidebar.Section label="Settings">
-                <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
-                <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Dashboard content goes here
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+                </Sidebar.Section>
+                <Sidebar.Section label="Settings">
+                  <Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
+                  <Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Dashboard content goes here
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {
@@ -612,28 +637,30 @@ export default defineFragment({
   </Sidebar.Nav>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Badges indicate unread items or notifications
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Badges indicate unread items or notifications
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {
@@ -683,28 +710,30 @@ export default defineFragment({
   </Sidebar.Nav>
 </Sidebar>`,
       render: () => (
-        <div style={demoContainerStyle}>
-          <Sidebar>
-            <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
-              <LogoIcon size={32} />
-              <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
-            </Sidebar.Header>
-            <Sidebar.Nav>
-              <Sidebar.Section>
-                <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
-                <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
-                <Sidebar.Item icon={<UsersIcon />} disabled>Team (Coming Soon)</Sidebar.Item>
-                <Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>
-              </Sidebar.Section>
-            </Sidebar.Nav>
-            <Sidebar.Footer>
-              <Sidebar.CollapseToggle />
-            </Sidebar.Footer>
-          </Sidebar>
-          <main style={mainContentStyle}>
-            Disabled items cannot be clicked
-          </main>
-        </div>
+        <PreviewIsolation>
+          <div style={demoContainerStyle}>
+            <Sidebar>
+              <Sidebar.Header collapsedContent={<LogoIcon size={32} />}>
+                <LogoIcon size={32} />
+                <span style={{ fontWeight: 600, fontSize: '16px' }}>Acme App</span>
+              </Sidebar.Header>
+              <Sidebar.Nav>
+                <Sidebar.Section>
+                  <Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
+                  <Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
+                  <Sidebar.Item icon={<UsersIcon />} disabled>Team (Coming Soon)</Sidebar.Item>
+                  <Sidebar.Item icon={<FolderIcon />} disabled>Projects (Upgrade)</Sidebar.Item>
+                </Sidebar.Section>
+              </Sidebar.Nav>
+              <Sidebar.Footer>
+                <Sidebar.CollapseToggle />
+              </Sidebar.Footer>
+            </Sidebar>
+            <main style={mainContentStyle}>
+              Disabled items cannot be clicked
+            </main>
+          </div>
+        </PreviewIsolation>
       ),
     },
     {