@umami/shiso 1.13.0 → 1.14.0

package/dist/chunks/ganttDiagram-EL5Y4UJY.js

@@ -1,4 +1,4 @@
-import { Nr as __commonJSMin, Pr as __toESM } from "./docs.js";
+import { Ar as __commonJSMin, jr as __toESM } from "./docs.js";
 import { n as __name } from "./chunk-Y2CYZVJY.js";
 import { a as nogamma, c as Rgb, d as define_default, f as extend, g as require_dayjs_min, i as hue, m as log, p as select_default, s as Color, u as rgbConvert } from "./src.js";
 import { H as setAccDescription, K as setDiagramTitle, U as setAccTitle, a as clear, c as configureSvgSize, s as common_default, v as getAccDescription, w as getDiagramTitle, x as getConfig2, y as getAccTitle } from "./chunk-DU6HZSFF.js";

package/dist/chunks/src.js

@@ -1,4 +1,4 @@
-import { Nr as __commonJSMin, Pr as __toESM } from "./docs.js";
+import { Ar as __commonJSMin, jr as __toESM } from "./docs.js";
 import { n as __name } from "./chunk-Y2CYZVJY.js";
 
 //#region ../../node_modules/.pnpm/dayjs@1.11.23/node_modules/dayjs/dayjs.min.js

package/dist/components.js

@@ -1,3 +1,3 @@
-import { $t as Accordion, Bt as Card, C as Tooltip, Ct as useSetPanelContent, Et as Frame, Gt as Info, Ht as Callout, Jt as Warning, Kt as Note, Mt as Column, Nt as Columns, Ot as Expandable, Pt as CodeGroup, Rt as Changelog, S as TreeFolder, Sn as mermaidSource, St as usePanelContent, Tt as Icon, Ut as Check, Vt as CardGroup, Wt as Danger, Xt as Button, Yt as WarningBanner, Zt as Badge, _ as FileTree, _t as PropertiesTable, b as Tree, bt as Panel, dt as Tiles, en as AccordionGroup, ft as Tab, gt as ResponseField, ht as Steps, mt as Step, n as ZoomableImage, pt as Tabs, qt as Tip, ut as Tile, v as FileTreeFile, vt as Param, wt as Link, x as TreeFile, xn as Mermaid, xt as PanelProvider, y as FileTreeFolder, yt as ParamField, zt as Update } from "./chunks/docs.js";
+import { At as Column, Bt as Callout, C as Tooltip, Ct as Icon, Et as Expandable, Gt as Tip, Ht as Danger, It as Changelog, Jt as Button, Kt as Warning, Lt as Update, Mt as CodeGroup, Qt as AccordionGroup, Rt as Card, S as TreeFolder, St as Link, Ut as Info, Vt as Check, Wt as Note, Yt as Badge, Zt as Accordion, _ as FileTree, _t as Param, b as Tree, bn as mermaidSource, bt as usePanelContent, dt as Tiles, ft as Tab, gt as PropertiesTable, ht as Steps, jt as Columns, mt as Step, n as ZoomableImage, pt as Tabs, qt as WarningBanner, ut as Tile, v as FileTreeFile, vt as Panel, wt as Frame, x as TreeFile, xt as useSetPanelContent, y as FileTreeFolder, yn as Mermaid, yt as PanelProvider, zt as CardGroup } from "./chunks/docs.js";
 
-export { Accordion, AccordionGroup, Badge, Button, Callout, Card, CardGroup, Changelog, Check, CodeGroup, Column, Columns, Danger, Expandable, FileTree, FileTreeFile, FileTreeFolder, Frame, Icon, Info, Link, Mermaid, Note, Panel, PanelProvider, Param, ParamField, PropertiesTable, ResponseField, Step, Steps, Tab, Tabs, Tile, Tiles, Tip, Tooltip, Tree, TreeFile, TreeFolder, Update, Warning, WarningBanner, ZoomableImage, mermaidSource, usePanelContent, useSetPanelContent };
+export { Accordion, AccordionGroup, Badge, Button, Callout, Card, CardGroup, Changelog, Check, CodeGroup, Column, Columns, Danger, Expandable, FileTree, FileTreeFile, FileTreeFolder, Frame, Icon, Info, Link, Mermaid, Note, Panel, PanelProvider, Param, PropertiesTable, Step, Steps, Tab, Tabs, Tile, Tiles, Tip, Tooltip, Tree, TreeFile, TreeFolder, Update, Warning, WarningBanner, ZoomableImage, mermaidSource, usePanelContent, useSetPanelContent };

package/dist/entry-client.js

@@ -1,4 +1,4 @@
-import { Sr as BrowserRouter } from "./chunks/docs.js";
+import { yr as BrowserRouter } from "./chunks/docs.js";
 import { h as BASE_URL, t as App } from "./chunks/App.js";
 import { jsx } from "react/jsx-runtime";
 

package/dist/entry-server.js

@@ -1,10 +1,10 @@
-import { Ar as createPath, Er as Router, Mr as ABSOLUTE_URL_REGEX, jr as parsePath } from "./chunks/docs.js";
+import { Cr as Router, Dr as createPath, Or as parsePath, kr as ABSOLUTE_URL_REGEX } from "./chunks/docs.js";
 import { a as docsSite, c as getSeo, d as standalonePages, f as getDocModule, g as toAbsoluteUrl, h as BASE_URL, i as docsHomeUrl, l as siteConfig, m as getScopeForPage, n as buildHead, o as getLocaleByPathname, p as getLastModified, r as renderHeadToString, s as getRedirects, t as App, u as siteName } from "./chunks/App.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { renderToString } from "react-dom/server";
 
-//#region ../../node_modules/.pnpm/react-router@8.3.0_react-do_c27277bcf657dc321048682bd02ab633/node_modules/react-router/dist/production/lib/dom/server.js
+//#region ../../node_modules/.pnpm/react-router@8.3.0_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/react-router/dist/production/lib/dom/server.js
 /**
 * react-router v8.3.0
 *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

package/scripts/lib/openapi.mjs

@@ -588,13 +588,26 @@ export function hasOperationParameters(operation) {
   );
 }
 
+function operationParameterSections(operation) {
+  return [
+    { location: 'header', heading: 'Headers', id: 'headers' },
+    { location: 'path', heading: 'Path parameters', id: 'path-parameters' },
+    { location: 'query', heading: 'Query parameters', id: 'query-parameters' },
+    { location: 'cookie', heading: 'Cookie parameters', id: 'cookie-parameters' },
+  ].filter(
+    ({ location }) =>
+      operation.parameters[location].length > 0 ||
+      (location === 'header' && operation.security.length > 0),
+  );
+}
+
 /**
  * Anchor ids for the generated sections, in render order. Mirrors
  * operationSections in src/lib/openapi.ts (asserted by tests/openapi.test.mjs).
  */
 export function operationAnchors(operation) {
   return [
-    ...(hasOperationParameters(operation) ? ['parameters'] : []),
+    ...operationParameterSections(operation).map(section => section.id),
     ...(operation.requestBody ? ['request-body'] : []),
     ...(operation.responses.length ? ['responses'] : []),
     ...(operation.samples.length ? ['code-samples'] : []),
@@ -617,13 +630,6 @@ export function normalizeOperationKey(value) {
 
 /** Search-index sections for an operation, matching operationAnchors ids. */
 export function operationSearchSections(operation) {
-  const allParameters = [
-    ...operation.parameters.path,
-    ...operation.parameters.query,
-    ...operation.parameters.header,
-    ...operation.parameters.cookie,
-  ];
-
   return [
     {
       heading: undefined,
@@ -632,11 +638,16 @@ export function operationSearchSections(operation) {
         .filter(Boolean)
         .join(' '),
     },
-    {
-      heading: 'Parameters',
-      id: 'parameters',
-      text: allParameters.map(schemaText).join(' '),
-    },
+    ...operationParameterSections(operation).map(({ location, heading, id }) => ({
+      heading,
+      id,
+      text: [
+        ...operation.parameters[location].map(schemaText),
+        ...(location === 'header' && operation.security.length > 0
+          ? ['Authorization Authentication credentials']
+          : []),
+      ].join(' '),
+    })),
     {
       heading: 'Request body',
       id: 'request-body',

package/src/components/OpenApiOperation.tsx

@@ -2,16 +2,10 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { Badge } from '@/components/docs/Badge';
 import { CodeGroup } from '@/components/docs/CodeGroup';
 import { Expandable } from '@/components/docs/Expandable';
-import { ParamField } from '@/components/docs/ParamField';
-import { ResponseField } from '@/components/docs/ResponseField';
-import { styles } from '@/components/docs/styles';
-import { operationSections, statusColor } from '@/lib/openapi';
+import { PropertiesTable } from '@/components/docs/PropertiesTable';
+import { operationParameterSections, operationSections, statusColor } from '@/lib/openapi';
 import type { NormalizedOperation, SchemaNode } from '@/lib/types';
 
-type ParamLocation = 'path' | 'query' | 'header' | 'cookie';
-
-const PARAM_LOCATIONS: ParamLocation[] = ['path', 'query', 'header', 'cookie'];
-
 function FieldChildren({ node }: { node: SchemaNode }) {
   return (
     <>
@@ -29,44 +23,35 @@ function FieldChildren({ node }: { node: SchemaNode }) {
       )}
       {node.children && node.children.length > 0 && (
         <Expandable title="properties">
-          {node.children.map(child => (
-            <SchemaField key={child.name || child.type} node={child} />
-          ))}
+          <SchemaTable nodes={node.children} />
         </Expandable>
       )}
     </>
   );
 }
 
-function SchemaField({ node }: { node: SchemaNode }) {
-  const hasDetails = Boolean(node.description || node.enum?.length || node.children?.length);
-
+function SchemaTable({ nodes }: { nodes: SchemaNode[] }) {
   return (
-    <ResponseField
-      name={node.name || node.type}
-      type={node.name ? node.type : undefined}
-      required={node.required}
-      deprecated={node.deprecated}
-      default={node.default}
-    >
-      {hasDetails ? <FieldChildren node={node} /> : null}
-    </ResponseField>
+    <PropertiesTable>
+      {nodes.map(node => (
+        <PropertiesTable.Row
+          key={node.name || node.type}
+          name={node.name || node.type}
+          type={node.type}
+          required={node.required}
+          deprecated={node.deprecated}
+          default={node.default}
+        >
+          <FieldChildren node={node} />
+        </PropertiesTable.Row>
+      ))}
+    </PropertiesTable>
   );
 }
 
 /** Renders a schema tree: a root object's properties, or the node itself. */
 function SchemaFields({ node }: { node: SchemaNode }) {
-  if (!node.name && node.children?.length) {
-    return (
-      <>
-        {node.children.map(child => (
-          <SchemaField key={child.name || child.type} node={child} />
-        ))}
-      </>
-    );
-  }
-
-  return <SchemaField node={node} />;
+  return <SchemaTable nodes={!node.name && node.children?.length ? node.children : [node]} />;
 }
 
 function HighlightedCode({
@@ -110,35 +95,33 @@ export interface OpenApiOperationProps {
 /** The generated reference for one API operation, rendered under the page body. */
 export function OpenApiOperation({ operation }: OpenApiOperationProps) {
   const sections = new Map(operationSections(operation).map(entry => [entry.name, entry.id]));
-  const showParameters = sections.has('Parameters');
 
   return (
     <div className="docs-markdown">
-      {showParameters && (
-        <section>
-          <h2 id={sections.get('Parameters')}>Parameters</h2>
-          <div className={styles.fieldGroup}>
-            {operation.security.length > 0 && (
-              <ParamField header="Authorization" type="string" required>
+      {operationParameterSections(operation).map(({ location, name }) => (
+        <section key={location}>
+          <h2 id={sections.get(name)}>{name}</h2>
+          <PropertiesTable>
+            {location === 'header' && operation.security.length > 0 && (
+              <PropertiesTable.Row name="Authorization" type="string" required>
                 Authentication credentials, e.g. <code>Bearer &lt;token&gt;</code>.
-              </ParamField>
-            )}
-            {PARAM_LOCATIONS.map(location =>
-              operation.parameters[location].map(parameter => (
-                <ParamField
-                  key={`${location}-${parameter.name}`}
-                  {...{ [location]: parameter.name }}
-                  type={parameter.type}
-                  required={parameter.required}
-                >
-                  <FieldChildren node={{ ...parameter, name: undefined, description: undefined }} />
-                  {parameter.description}
-                </ParamField>
-              )),
+              </PropertiesTable.Row>
             )}
-          </div>
+            {operation.parameters[location].map(parameter => (
+              <PropertiesTable.Row
+                key={parameter.name}
+                name={parameter.name || parameter.type}
+                type={parameter.type}
+                required={parameter.required}
+                deprecated={parameter.deprecated}
+                default={parameter.default}
+              >
+                <FieldChildren node={parameter} />
+              </PropertiesTable.Row>
+            ))}
+          </PropertiesTable>
         </section>
-      )}
+      ))}
       {operation.requestBody && (
         <section>
           <h2 id={sections.get('Request body')}>Request body</h2>
@@ -166,11 +149,7 @@ export function OpenApiOperation({ operation }: OpenApiOperationProps) {
                   <span className="text-muted-foreground text-sm">{response.description}</span>
                 )}
               </div>
-              {response.schema && (
-                <div className={styles.fieldGroup}>
-                  <SchemaFields node={response.schema} />
-                </div>
-              )}
+              {response.schema && <SchemaFields node={response.schema} />}
               {response.example && (
                 <HighlightedCode
                   language="json"

package/src/components/docs/Param.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { styles } from './styles';
+
+export function Param({ children }: { children?: ReactNode }) {
+  return <code className={styles.code}>{children}</code>;
+}

package/src/components/docs/PropertiesTable.tsx

@@ -1,13 +1,23 @@
 import type { ReactNode } from 'react';
 import { Badge } from './Badge';
-import type { ResponseFieldProps } from './ResponseField';
 import { decodeHtmlEntities, toElementArray } from './utils';
 
+type FieldValue = string | number | boolean | null | undefined;
+
+export interface PropertiesTableRowProps {
+  name: string;
+  type?: FieldValue;
+  default?: FieldValue;
+  required?: boolean;
+  deprecated?: boolean;
+  children?: ReactNode;
+}
+
 export interface PropertiesTableProps {
   children?: ReactNode;
 }
 
-function displayValue(value: ResponseFieldProps['type']): string | undefined {
+function displayValue(value: PropertiesTableRowProps['type']): string | undefined {
   if (typeof value === 'string') {
     return decodeHtmlEntities(value);
   }
@@ -16,7 +26,7 @@ function displayValue(value: ResponseFieldProps['type']): string | undefined {
 }
 
 export function PropertiesTable({ children }: PropertiesTableProps) {
-  const rows = toElementArray<ResponseFieldProps>(children);
+  const rows = toElementArray<PropertiesTableRowProps>(children);
 
   if (!rows.length) {
     return null;
@@ -29,43 +39,49 @@ export function PropertiesTable({ children }: PropertiesTableProps) {
       <table className="m-0 min-w-[40rem] table-fixed">
         <thead>
           <tr>
-            <th className="w-1/5">Name</th>
-            <th className="w-1/4">Type</th>
+            <th className="w-[30%]">Name</th>
+            <th className="w-[15%]">Type</th>
             <th>Description</th>
           </tr>
         </thead>
-        <tbody>
-          {rows.map(row => {
-            const { name, type, required, deprecated, children: description } = row.props;
-            const defaultValue = displayValue(row.props.default);
-
-            return (
-              <tr key={row.key ?? name}>
-                <td>
-                  <span className="inline-flex flex-wrap items-center gap-2">
-                    {name}
-                    {required ? (
-                      <Badge size="sm" tone="primary">
-                        required
-                      </Badge>
-                    ) : null}
-                    {deprecated ? <Badge size="sm">deprecated</Badge> : null}
-                  </span>
-                </td>
-                <td>{displayValue(type)}</td>
-                <td className="[&_p]:m-0">
-                  {description}
-                  {defaultValue ? (
-                    <span className="mt-1 block text-muted-foreground">
-                      Default: {defaultValue}
-                    </span>
-                  ) : null}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
+        <tbody>{rows}</tbody>
       </table>
     </div>
   );
 }
+
+function PropertiesTableRow({
+  name,
+  type,
+  required,
+  deprecated,
+  default: value,
+  children,
+}: PropertiesTableRowProps) {
+  const defaultValue = displayValue(value);
+
+  return (
+    <tr>
+      <td>
+        <span className="inline-flex flex-wrap items-center gap-2">
+          {name}
+          {required ? (
+            <Badge size="sm" tone="primary">
+              required
+            </Badge>
+          ) : null}
+          {deprecated ? <Badge size="sm">deprecated</Badge> : null}
+        </span>
+      </td>
+      <td>{displayValue(type)}</td>
+      <td className="[&_p]:m-0">
+        {children}
+        {defaultValue ? (
+          <span className="mt-1 block text-muted-foreground">Default: {defaultValue}</span>
+        ) : null}
+      </td>
+    </tr>
+  );
+}
+
+PropertiesTable.Row = PropertiesTableRow;

package/src/components/docs/index.ts

@@ -12,10 +12,9 @@ export * from './Icon';
 export * from './Link';
 export * from './Mermaid';
 export * from './Panel';
-export * from './panel-context';
-export * from './ParamField';
+export * from './Param';
 export * from './PropertiesTable';
-export * from './ResponseField';
+export * from './panel-context';
 export * from './Steps';
 export * from './Tabs';
 export * from './Tiles';

package/src/components/docs/styles.ts

@@ -67,14 +67,6 @@ export const styles = {
   frameCaption:
     'relative mt-3 px-4 pb-1 text-center text-sm leading-5 text-muted-foreground [&_p]:m-0 [&_a]:font-semibold',
 
-  field: 'my-3',
-  fieldGroup:
-    'my-4 divide-y divide-border overflow-hidden rounded-lg border border-border text-sm leading-6 [&>[data-slot=field-group-item]]:my-0 [&>[data-slot=field-group-item]]:px-4 [&>[data-slot=field-group-item]]:py-3 [&_[data-slot=field-group-body]]:mt-2 [&_[data-slot=field-group-type]]:text-xs',
-  paramField: 'my-3',
-  fieldHeader: 'flex flex-wrap items-center gap-2',
-  fieldBody: 'mt-3',
-  fieldType: 'text-[0.9rem] text-muted-foreground',
-  fieldName: 'font-bold text-foreground',
   code: 'rounded-sm bg-[color-mix(in_srgb,currentColor_4%,transparent)] px-[0.35rem] py-[0.1rem] text-sm text-foreground font-mono',
   steps:
     "relative my-4 flex flex-col gap-5 before:absolute before:top-4 before:bottom-4 before:left-4 before:w-px before:-translate-x-1/2 before:bg-border before:content-['']",

package/src/lib/openapi.ts

@@ -45,6 +45,22 @@ export function hasParameters(operation: NormalizedOperation): boolean {
   );
 }
 
+/** Parameter groups shared by the renderer and table of contents. */
+export function operationParameterSections(operation: NormalizedOperation) {
+  const groups = [
+    { location: 'header', name: 'Headers' },
+    { location: 'path', name: 'Path parameters' },
+    { location: 'query', name: 'Query parameters' },
+    { location: 'cookie', name: 'Cookie parameters' },
+  ] as const;
+
+  return groups.filter(
+    ({ location }) =>
+      operation.parameters[location].length > 0 ||
+      (location === 'header' && operation.security.length > 0),
+  );
+}
+
 /**
  * Section headings for an operation, in render order. The single source of
  * truth for section ids: the component, the table of contents, the content
@@ -53,7 +69,7 @@ export function hasParameters(operation: NormalizedOperation): boolean {
 export function operationSections(operation: NormalizedOperation): TocEntry[] {
   const slugger = createSlugger();
   const names = [
-    hasParameters(operation) ? 'Parameters' : undefined,
+    ...operationParameterSections(operation).map(section => section.name),
     operation.requestBody ? 'Request body' : undefined,
     operation.responses.length ? 'Responses' : undefined,
     operation.samples.length ? 'Code samples' : undefined,

package/types/components.d.ts

@@ -146,18 +146,6 @@ export interface IconProps {
 
 export declare function Icon(props: IconProps): ReactElement | null;
 
-export interface ParamFieldProps {
-  name?: string;
-  query?: string;
-  path?: string;
-  header?: string;
-  body?: string;
-  type?: string;
-  required?: boolean;
-  children?: ReactNode;
-}
-
-export declare function ParamField(props: ParamFieldProps): ReactElement;
 export declare function Param(props: ChildrenProps): ReactElement;
 
 export interface PropertiesTableProps {
@@ -168,7 +156,7 @@ export declare function PropertiesTable(props: PropertiesTableProps): ReactEleme
 
 type FieldValue = string | number | boolean | null | undefined;
 
-export interface ResponseFieldProps {
+export interface PropertiesTableRowProps {
   name: string;
   type?: FieldValue;
   default?: FieldValue;
@@ -177,7 +165,9 @@ export interface ResponseFieldProps {
   children?: ReactNode;
 }
 
-export declare function ResponseField(props: ResponseFieldProps): ReactElement;
+export declare namespace PropertiesTable {
+  function Row(props: PropertiesTableRowProps): ReactElement;
+}
 
 export interface StepProps {
   title?: ReactNode;

package/src/components/docs/ParamField.tsx

@@ -1,57 +0,0 @@
-import type { ReactNode } from 'react';
-import { Badge } from './Badge';
-import { styles } from './styles';
-import { decodeHtmlEntities } from './utils';
-
-export interface ParamFieldProps {
-  name?: string;
-  query?: string;
-  path?: string;
-  header?: string;
-  body?: string;
-  type?: string;
-  required?: boolean;
-  children?: ReactNode;
-}
-
-export function ParamField({
-  name,
-  query,
-  path,
-  header,
-  body,
-  type,
-  required,
-  children,
-}: ParamFieldProps) {
-  const label = name || query || path || header || body || 'parameter';
-  const location = query ? 'query' : path ? 'path' : header ? 'header' : body ? 'body' : undefined;
-
-  return (
-    <div className={styles.paramField} data-slot="field-group-item">
-      <div className={styles.fieldHeader}>
-        <span className={styles.fieldName}>{label}</span>
-        {location ? <Badge size="sm">{location}</Badge> : null}
-        {type ? (
-          <span className={styles.fieldType} data-slot="field-group-type">
-            {decodeHtmlEntities(type)}
-          </span>
-        ) : null}
-        {required ? (
-          <Badge size="sm" tone="primary">
-            required
-          </Badge>
-        ) : null}
-      </div>
-      {children ? (
-        <div className={styles.fieldBody} data-slot="field-group-body">
-          {children}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export function Param({ children }: { children?: ReactNode }) {
-  return <code className={styles.code}>{children}</code>;
-}

package/src/components/docs/ResponseField.tsx

@@ -1,48 +0,0 @@
-import type { ReactNode } from 'react';
-import { Badge } from './Badge';
-import { styles } from './styles';
-import { decodeHtmlEntities } from './utils';
-
-type FieldValue = string | number | boolean | null | undefined;
-
-export interface ResponseFieldProps {
-  name: string;
-  type?: FieldValue;
-  default?: FieldValue;
-  required?: boolean;
-  deprecated?: boolean;
-  children?: ReactNode;
-}
-
-export function ResponseField({ name, type, required, deprecated, children }: ResponseFieldProps) {
-  const normalizedType =
-    typeof type === 'string'
-      ? decodeHtmlEntities(type)
-      : type === undefined || type === null
-        ? undefined
-        : String(type);
-
-  return (
-    <div className={styles.field} data-slot="field-group-item">
-      <div className={styles.fieldHeader}>
-        <span className={styles.fieldName}>{name}</span>
-        {normalizedType ? (
-          <span className={styles.fieldType} data-slot="field-group-type">
-            {normalizedType}
-          </span>
-        ) : null}
-        {required ? (
-          <Badge size="sm" tone="primary">
-            required
-          </Badge>
-        ) : null}
-        {deprecated ? <Badge size="sm">deprecated</Badge> : null}
-      </div>
-      {children ? (
-        <div className={styles.fieldBody} data-slot="field-group-body">
-          {children}
-        </div>
-      ) : null}
-    </div>
-  );
-}