gladvn 0.2.35 → 0.2.37

package/src/dev/showcase/sheet.tsx

@@ -21,25 +21,18 @@ import {
   DocsCode,
   DocsP,
   ExampleGrid,
-  ExampleSection,
+  ShowcaseExample,
   Showcase,
   ShowcaseDocs
 } from "../../dev/components/showcase";
 import { type Size } from "../../lib/types";
 
-// ──────────────────────────────────────────────────────────
-// SECTION 2: Micro Content (không export)
-// ──────────────────────────────────────────────────────────
 function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className="space-y-10 mt-6">
-      {/* ── Sides ── */}
-      <ExampleSection
-        label="Hướng trượt (Side)"
-        description="Sheet có thể trượt ra từ bốn cạnh: right (mặc định), left, top, bottom."
-        codeString={`<Sheet>
+    <div className="space-y-10">
+      <ShowcaseExample title="Hướng trượt (Side)" description="Sheet có thể trượt ra từ bốn cạnh: right (mặc định), left, top, bottom." code={`<Sheet>
     <SheetTrigger
       render={
         <Button variant="outline" className="capitalize">
@@ -92,217 +85,210 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         </SheetFooter>
       </SheetContent>
     
-  </Sheet>`}
-      >
-        <div className="grid grid-cols-2 gap-2">
-          {/* top */}
-          <Sheet>
-            <SheetTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size={globalSize}
-                  className="w-full"
-                />
-              }
-            >
-              top
-            </SheetTrigger>
+  </Sheet>`} preview={
+                  <>
+          <div className="grid grid-cols-2 gap-2">
+                    <Sheet>
+                      <SheetTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size={globalSize}
+                            className="w-full"
+                          />
+                        }
+                      >
+                        top
+                      </SheetTrigger>
 
-              <SheetContent side="top">
-                <SheetHeader>
-                  <SheetTitle>Edit Profile</SheetTitle>
-                  <SheetDescription>
-                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
-                  </SheetDescription>
-                </SheetHeader>
-                <div className="grid gap-4 py-4 px-4">
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="name-top" className="text-right">
-                      Tên
-                    </Label>
-                    <Input
-                      id="name-top"
-                      defaultValue="Pedro Duarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                </div>
-                <SheetFooter>
-                  <SheetClose
-                    render={<Button variant="outline" size={globalSize} />}
-                  >
-                    Huỷ
-                  </SheetClose>
-                  <Button size={globalSize}>Lưu thay đổi</Button>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
+                        <SheetContent side="top">
+                          <SheetHeader>
+                            <SheetTitle>Edit Profile</SheetTitle>
+                            <SheetDescription>
+                              Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                            </SheetDescription>
+                          </SheetHeader>
+                          <div className="grid gap-4 py-4 px-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name-top" className="text-right">
+                                Tên
+                              </Label>
+                              <Input
+                                id="name-top"
+                                defaultValue="Pedro Duarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                          <SheetFooter>
+                            <SheetClose
+                              render={<Button variant="outline" size={globalSize} />}
+                            >
+                              Huỷ
+                            </SheetClose>
+                            <Button size={globalSize}>Lưu thay đổi</Button>
+                          </SheetFooter>
+                        </SheetContent>
+                      
+                    </Sheet>
 
-          {/* right */}
-          <Sheet>
-            <SheetTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size={globalSize}
-                  className="w-full"
-                />
-              }
-            >
-              right
-            </SheetTrigger>
+                    <Sheet>
+                      <SheetTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size={globalSize}
+                            className="w-full"
+                          />
+                        }
+                      >
+                        right
+                      </SheetTrigger>
 
-              <SheetContent side="right">
-                <SheetHeader>
-                  <SheetTitle>Edit Profile</SheetTitle>
-                  <SheetDescription>
-                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
-                  </SheetDescription>
-                </SheetHeader>
-                <div className="grid gap-4 py-4 px-4">
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="name-right" className="text-right">
-                      Tên
-                    </Label>
-                    <Input
-                      id="name-right"
-                      defaultValue="Pedro Duarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="username-right" className="text-right">
-                      Username
-                    </Label>
-                    <Input
-                      id="username-right"
-                      defaultValue="@peduarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                </div>
-                <SheetFooter>
-                  <SheetClose
-                    render={<Button variant="outline" size={globalSize} />}
-                  >
-                    Huỷ
-                  </SheetClose>
-                  <Button size={globalSize}>Lưu thay đổi</Button>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
+                        <SheetContent side="right">
+                          <SheetHeader>
+                            <SheetTitle>Edit Profile</SheetTitle>
+                            <SheetDescription>
+                              Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                            </SheetDescription>
+                          </SheetHeader>
+                          <div className="grid gap-4 py-4 px-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name-right" className="text-right">
+                                Tên
+                              </Label>
+                              <Input
+                                id="name-right"
+                                defaultValue="Pedro Duarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username-right" className="text-right">
+                                Username
+                              </Label>
+                              <Input
+                                id="username-right"
+                                defaultValue="@peduarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                          <SheetFooter>
+                            <SheetClose
+                              render={<Button variant="outline" size={globalSize} />}
+                            >
+                              Huỷ
+                            </SheetClose>
+                            <Button size={globalSize}>Lưu thay đổi</Button>
+                          </SheetFooter>
+                        </SheetContent>
+                      
+                    </Sheet>
 
-          {/* bottom */}
-          <Sheet>
-            <SheetTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size={globalSize}
-                  className="w-full"
-                />
-              }
-            >
-              bottom
-            </SheetTrigger>
+                    <Sheet>
+                      <SheetTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size={globalSize}
+                            className="w-full"
+                          />
+                        }
+                      >
+                        bottom
+                      </SheetTrigger>
 
-              <SheetContent side="bottom">
-                <SheetHeader>
-                  <SheetTitle>Edit Profile</SheetTitle>
-                  <SheetDescription>
-                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
-                  </SheetDescription>
-                </SheetHeader>
-                <div className="grid gap-4 py-4 px-4">
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="name-bottom" className="text-right">
-                      Tên
-                    </Label>
-                    <Input
-                      id="name-bottom"
-                      defaultValue="Pedro Duarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                </div>
-                <SheetFooter>
-                  <SheetClose
-                    render={<Button variant="outline" size={globalSize} />}
-                  >
-                    Huỷ
-                  </SheetClose>
-                  <Button size={globalSize}>Lưu thay đổi</Button>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
+                        <SheetContent side="bottom">
+                          <SheetHeader>
+                            <SheetTitle>Edit Profile</SheetTitle>
+                            <SheetDescription>
+                              Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                            </SheetDescription>
+                          </SheetHeader>
+                          <div className="grid gap-4 py-4 px-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name-bottom" className="text-right">
+                                Tên
+                              </Label>
+                              <Input
+                                id="name-bottom"
+                                defaultValue="Pedro Duarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                          <SheetFooter>
+                            <SheetClose
+                              render={<Button variant="outline" size={globalSize} />}
+                            >
+                              Huỷ
+                            </SheetClose>
+                            <Button size={globalSize}>Lưu thay đổi</Button>
+                          </SheetFooter>
+                        </SheetContent>
+                      
+                    </Sheet>
 
-          {/* left */}
-          <Sheet>
-            <SheetTrigger
-              render={
-                <Button
-                  variant="outline"
-                  size={globalSize}
-                  className="w-full"
-                />
-              }
-            >
-              left
-            </SheetTrigger>
+                    <Sheet>
+                      <SheetTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size={globalSize}
+                            className="w-full"
+                          />
+                        }
+                      >
+                        left
+                      </SheetTrigger>
 
-              <SheetContent side="left">
-                <SheetHeader>
-                  <SheetTitle>Edit Profile</SheetTitle>
-                  <SheetDescription>
-                    Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
-                  </SheetDescription>
-                </SheetHeader>
-                <div className="grid gap-4 py-4 px-4">
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="name-left" className="text-right">
-                      Tên
-                    </Label>
-                    <Input
-                      id="name-left"
-                      defaultValue="Pedro Duarte"
-                      className="col-span-3"
-                    />
+                        <SheetContent side="left">
+                          <SheetHeader>
+                            <SheetTitle>Edit Profile</SheetTitle>
+                            <SheetDescription>
+                              Thay đổi thông tin tài khoản của bạn và nhấn Lưu.
+                            </SheetDescription>
+                          </SheetHeader>
+                          <div className="grid gap-4 py-4 px-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name-left" className="text-right">
+                                Tên
+                              </Label>
+                              <Input
+                                id="name-left"
+                                defaultValue="Pedro Duarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username-left" className="text-right">
+                                Username
+                              </Label>
+                              <Input
+                                id="username-left"
+                                defaultValue="@peduarte"
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                          <SheetFooter>
+                            <SheetClose
+                              render={<Button variant="outline" size={globalSize} />}
+                            >
+                              Huỷ
+                            </SheetClose>
+                            <Button size={globalSize}>Lưu thay đổi</Button>
+                          </SheetFooter>
+                        </SheetContent>
+                      
+                    </Sheet>
                   </div>
-                  <div className="grid grid-cols-4 items-center gap-4">
-                    <Label htmlFor="username-left" className="text-right">
-                      Username
-                    </Label>
-                    <Input
-                      id="username-left"
-                      defaultValue="@peduarte"
-                      className="col-span-3"
-                    />
-                  </div>
-                </div>
-                <SheetFooter>
-                  <SheetClose
-                    render={<Button variant="outline" size={globalSize} />}
-                  >
-                    Huỷ
-                  </SheetClose>
-                  <Button size={globalSize}>Lưu thay đổi</Button>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
-        </div>
-      </ExampleSection>
+                  </>
+                } />
 
-      {/* ── showCloseButton ── */}
       <ExampleGrid>
-        <ExampleSection
-          label="Có nút đóng (mặc định)"
-          description="showCloseButton={true} — nút X tự động hiển thị ở góc trên phải."
-          codeString={`<Sheet>
+        <ShowcaseExample title="Có nút đóng (mặc định)" description="showCloseButton={true} — nút X tự động hiển thị ở góc trên phải." code={`<Sheet>
     <SheetTrigger render={<Button variant="outline" />}>
       <PanelRightIcon />
       Mở Sheet
@@ -317,30 +303,28 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         </SheetHeader>
       </SheetContent>
     
-  </Sheet>`}
-        >
-          <Sheet>
-            <SheetTrigger
-              render={<Button variant="outline" size={globalSize} />}
-            >
-              <PanelRightIcon aria-hidden="true" />
-              Mở Sheet
-            </SheetTrigger>
+  </Sheet>`} preview={
+                      <>
+              <Sheet>
+                          <SheetTrigger
+                            render={<Button variant="outline" size={globalSize} />}
+                          >
+                            <PanelRightIcon aria-hidden="true" />
+                            Mở Sheet
+                          </SheetTrigger>
 
-              <SheetContent side="right">
-                <SheetHeader>
-                  <SheetTitle>Có nút đóng</SheetTitle>
-                  <SheetDescription>Nút X xuất hiện tự động.</SheetDescription>
-                </SheetHeader>
-              </SheetContent>
-            
-          </Sheet>
-        </ExampleSection>
+                            <SheetContent side="right">
+                              <SheetHeader>
+                                <SheetTitle>Có nút đóng</SheetTitle>
+                                <SheetDescription>Nút X xuất hiện tự động.</SheetDescription>
+                              </SheetHeader>
+                            </SheetContent>
+                          
+                        </Sheet>
+                      </>
+                    } />
 
-        <ExampleSection
-          label="Ẩn nút đóng"
-          description="showCloseButton={false} — dùng khi muốn tự control nút đóng bên trong nội dung."
-          codeString={`<Sheet>
+        <ShowcaseExample title="Ẩn nút đóng" description="showCloseButton={false} — dùng khi muốn tự control nút đóng bên trong nội dung." code={`<Sheet>
     <SheetTrigger render={<Button variant="outline" />}>
       <PanelRightIcon />
       Không có X
@@ -367,47 +351,44 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         </SheetFooter>
       </SheetContent>
     
-  </Sheet>`}
-        >
-          <Sheet>
-            <SheetTrigger
-              render={<Button variant="outline" size={globalSize} />}
-            >
-              <PanelRightIcon aria-hidden="true" />
-              Không có X
-            </SheetTrigger>
+  </Sheet>`} preview={
+                      <>
+              <Sheet>
+                          <SheetTrigger
+                            render={<Button variant="outline" size={globalSize} />}
+                          >
+                            <PanelRightIcon aria-hidden="true" />
+                            Không có X
+                          </SheetTrigger>
 
-              <SheetContent side="right" showCloseButton={false}>
-                <SheetHeader>
-                  <SheetTitle>Ẩn nút đóng</SheetTitle>
-                  <SheetDescription>
-                    Consumer tự render nút đóng trong footer.
-                  </SheetDescription>
-                </SheetHeader>
-                <SheetFooter>
-                  <SheetClose
-                    render={
-                      <Button
-                        variant="outline"
-                        size={globalSize}
-                        className="w-full"
-                      />
-                    }
-                  >
-                    Đóng thủ công
-                  </SheetClose>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
-        </ExampleSection>
+                            <SheetContent side="right" showCloseButton={false}>
+                              <SheetHeader>
+                                <SheetTitle>Ẩn nút đóng</SheetTitle>
+                                <SheetDescription>
+                                  Consumer tự render nút đóng trong footer.
+                                </SheetDescription>
+                              </SheetHeader>
+                              <SheetFooter>
+                                <SheetClose
+                                  render={
+                                    <Button
+                                      variant="outline"
+                                      size={globalSize}
+                                      className="w-full"
+                                    />
+                                  }
+                                >
+                                  Đóng thủ công
+                                </SheetClose>
+                              </SheetFooter>
+                            </SheetContent>
+                          
+                        </Sheet>
+                      </>
+                    } />
       </ExampleGrid>
 
-      {/* ── Controlled ── */}
-      <ExampleSection
-        label="Controlled State"
-        description="Quản lý trạng thái đóng/mở qua React state với open và onOpenChange."
-        codeString={`const [open, setOpen] = useState(false);
+      <ShowcaseExample title="Controlled State" description="Quản lý trạng thái đóng/mở qua React state với open và onOpenChange." code={`const [open, setOpen] = useState(false);
   <div className="flex items-center gap-4">
     <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger render={<Button variant="outline" />}>
@@ -440,49 +421,46 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         {open ? "Mở" : "Đóng"}
       </strong>
     </p>
-  </div>`}
-      >
-        <div className="flex items-center gap-4">
-          <Sheet open={open} onOpenChange={setOpen}>
-            <SheetTrigger
-              render={<Button variant="outline" size={globalSize} />}
-            >
-              <SettingsIcon aria-hidden="true" />
-              Toggle Controlled
-            </SheetTrigger>
+  </div>`} preview={
+                  <>
+          <div className="flex items-center gap-4">
+                    <Sheet open={open} onOpenChange={setOpen}>
+                      <SheetTrigger
+                        render={<Button variant="outline" size={globalSize} />}
+                      >
+                        <SettingsIcon aria-hidden="true" />
+                        Toggle Controlled
+                      </SheetTrigger>
 
-              <SheetContent side="right">
-                <SheetHeader>
-                  <SheetTitle>Controlled Mode</SheetTitle>
-                  <SheetDescription>
-                    Sheet được điều khiển hoàn toàn bởi React state.
-                  </SheetDescription>
-                </SheetHeader>
-                <SheetFooter>
-                  <Button size={globalSize} onClick={() => setOpen(false)}>
-                    Đóng bằng state
-                  </Button>
-                </SheetFooter>
-              </SheetContent>
-            
-          </Sheet>
-          <p className="text-sm text-muted-foreground">
-            Trạng thái:{" "}
-            <strong
-              data-active={open ? "" : undefined}
-              className="data-active:text-primary"
-            >
-              {open ? "Mở" : "Đóng"}
-            </strong>
-          </p>
-        </div>
-      </ExampleSection>
+                        <SheetContent side="right">
+                          <SheetHeader>
+                            <SheetTitle>Controlled Mode</SheetTitle>
+                            <SheetDescription>
+                              Sheet được điều khiển hoàn toàn bởi React state.
+                            </SheetDescription>
+                          </SheetHeader>
+                          <SheetFooter>
+                            <Button size={globalSize} onClick={() => setOpen(false)}>
+                              Đóng bằng state
+                            </Button>
+                          </SheetFooter>
+                        </SheetContent>
+                      
+                    </Sheet>
+                    <p className="text-sm text-muted-foreground">
+                      Trạng thái:{" "}
+                      <strong
+                        data-active={open ? "" : undefined}
+                        className="data-active:text-primary"
+                      >
+                        {open ? "Mở" : "Đóng"}
+                      </strong>
+                    </p>
+                  </div>
+                  </>
+                } />
 
-      {/* ── Real-world: Filter Panel ── */}
-      <ExampleSection
-        label="Use case — Filter Panel"
-        description="Sheet dùng làm bảng lọc dữ liệu bên phải — pattern phổ biến trong dashboard, table view."
-        codeString={`<Sheet>
+      <ShowcaseExample title="Use case — Filter Panel" description="Sheet dùng làm bảng lọc dữ liệu bên phải — pattern phổ biến trong dashboard, table view." code={`<Sheet>
     <SheetTrigger render={<Button variant="outline" />}>
       <FilterIcon />
       Lọc dữ liệu
@@ -524,61 +502,59 @@ function SheetMicroShowcase({ globalSize }: { globalSize: Size }) {
         </SheetFooter>
       </SheetContent>
     
-  </Sheet>`}
-      >
-        <Sheet>
-          <SheetTrigger render={<Button variant="outline" size={globalSize} />}>
-            <FilterIcon aria-hidden="true" />
-            Lọc dữ liệu
-          </SheetTrigger>
+  </Sheet>`} preview={
+                  <>
+          <Sheet>
+                    <SheetTrigger render={<Button variant="outline" size={globalSize} />}>
+                      <FilterIcon aria-hidden="true" />
+                      Lọc dữ liệu
+                    </SheetTrigger>
 
-            <SheetContent side="right">
-              <SheetHeader>
-                <SheetTitle>Bộ lọc</SheetTitle>
-                <SheetDescription>
-                  Tinh chỉnh kết quả hiển thị theo điều kiện.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="flex flex-col gap-4 p-4">
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="filter-status">Trạng thái</Label>
-                  <Input id="filter-status" placeholder="Tất cả" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="filter-date-from">Từ ngày</Label>
-                  <Input id="filter-date-from" type="date" />
-                </div>
-                <div className="flex flex-col gap-2">
-                  <Label htmlFor="filter-date-to">Đến ngày</Label>
-                  <Input id="filter-date-to" type="date" />
-                </div>
-              </div>
-              <SheetFooter>
-                <SheetClose
-                  render={<Button variant="outline" size={globalSize} />}
-                >
-                  Xoá bộ lọc
-                </SheetClose>
-                <Button size={globalSize}>Áp dụng</Button>
-              </SheetFooter>
-            </SheetContent>
-          
-        </Sheet>
-      </ExampleSection>
+                      <SheetContent side="right">
+                        <SheetHeader>
+                          <SheetTitle>Bộ lọc</SheetTitle>
+                          <SheetDescription>
+                            Tinh chỉnh kết quả hiển thị theo điều kiện.
+                          </SheetDescription>
+                        </SheetHeader>
+                        <div className="flex flex-col gap-4 p-4">
+                          <div className="flex flex-col gap-2">
+                            <Label htmlFor="filter-status">Trạng thái</Label>
+                            <Input id="filter-status" placeholder="Tất cả" />
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            <Label htmlFor="filter-date-from">Từ ngày</Label>
+                            <Input id="filter-date-from" type="date" />
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            <Label htmlFor="filter-date-to">Đến ngày</Label>
+                            <Input id="filter-date-to" type="date" />
+                          </div>
+                        </div>
+                        <SheetFooter>
+                          <SheetClose
+                            render={<Button variant="outline" size={globalSize} />}
+                          >
+                            Xoá bộ lọc
+                          </SheetClose>
+                          <Button size={globalSize}>Áp dụng</Button>
+                        </SheetFooter>
+                      </SheetContent>
+                    
+                  </Sheet>
+                  </>
+                } />
     </div>
   );
 }
 
-// ──────────────────────────────────────────────────────────
-// SECTION 3: Entry point (export default)
-// ──────────────────────────────────────────────────────────
 export default function SheetShowcase() {
   const { size: globalSize } = useDevContext();
   return (
     <Showcase
       title="Sheet"
       description="Panel trượt từ cạnh màn hình — mở rộng Dialog để hiển thị nội dung bổ sung mà không rời trang."
-      generalConcept={
+      guideline={
         <ShowcaseDocs>
           <DocsP>
             <DocsCode>Sheet</DocsCode> là một variant của Dialog, nhưng thay vì
@@ -595,11 +571,7 @@ export default function SheetShowcase() {
           </DocsP>
         </ShowcaseDocs>
       }
-      tabs={[
-        {
-          label: "Micro (Primitive)",
-          content: <SheetMicroShowcase globalSize={globalSize} /> },
-      ]}
+      micro={{ content: <SheetMicroShowcase globalSize={globalSize} /> }}
     />
   );
 }