@stonedogcode/style 0.9.0

package/src/components/StyledFooter.tsx

@@ -0,0 +1,399 @@
+"use client";
+
+import React, { useCallback, useId, useState } from "react";
+import { styled } from "styled-system/jsx";
+import StyledBox from "./StyledBox";
+import StyledText from "./StyledText";
+
+/**
+ * The application footer: a bar that is always on screen, and a panel that
+ * opens to show version and service status (NEH-394).
+ *
+ * Shared by HopperGuard, rozcards.com and optimafilings.com, which is what
+ * every decision below follows from.
+ *
+ * ## It knows nothing about any product
+ *
+ * Copyright text, trademark legend, version strings, status content and the
+ * action buttons all arrive as props. In particular **the actions are a prop,
+ * not built in**: HopperGuard passes a row of controls, while rozcards and
+ * Optima pass a single dark-mode toggle. A component that knew what the buttons
+ * were could not be shared, which is the whole point.
+ *
+ * ## The toggle is its own control, and the actions are NOT inside it
+ *
+ * The obvious shape — make the whole bar the trigger — nests the action buttons
+ * inside a clickable region, so pressing "dark mode" also toggles the panel and
+ * screen readers announce a button inside a button. Here the trigger is one
+ * explicit control with `aria-expanded` / `aria-controls`, and the actions sit
+ * beside it as siblings.
+ *
+ * It opens on click, never hover: a panel that closes when the pointer drifts
+ * fails anyone whose hand is unsteady, and the harder they try the more it
+ * moves.
+ *
+ * ## No Chakra
+ *
+ * HopperGuard's version is built on a Chakra `Collapsible`. This package cannot
+ * take that dependency, so the disclosure is rebuilt here on a button and a
+ * region. It is deliberately NOT `<details>`/`<summary>` either — a `<summary>`
+ * would have to contain the action buttons to keep them on the collapsed bar,
+ * which is the nested-interactive problem again.
+ *
+ * ## Sizing lives in inline `style`
+ *
+ * Panda extracts LITERAL values only, so a metric passed as a prop resolves to
+ * no CSS while the class name still lands in the DOM. Anything dimensional here
+ * is an inline style reaching the host's scale through custom properties, which
+ * also makes it immune to a consumer's Panda `include` glob being wrong.
+ */
+
+const Bar = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 2,
+    width: "100%",
+    flexWrap: "wrap",
+  },
+});
+
+/**
+ * `minHeight`/`minWidth` are stated rather than left to emerge from padding, so
+ * no density rung or font scale can erode the target below the house floor of
+ * 48px (above WCAG 2.5.5 AAA's 44, deliberately — our readers mis-aim more).
+ */
+const ToggleButton = styled("button", {
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 2,
+    minHeight: "48px",
+    minWidth: "48px",
+    paddingInline: 3,
+    borderRadius: "md",
+    border: "1px solid transparent",
+    backgroundColor: "transparent",
+    color: "textMain",
+    cursor: "pointer",
+    _hover: { textDecoration: "underline" },
+    _focusVisible: { outline: "2px solid", outlineOffset: "2px" },
+  },
+});
+
+/** Rotates rather than swapping glyphs, so there is one element to label. */
+const Chevron = styled("span", {
+  base: {
+    display: "inline-block",
+    lineHeight: 1,
+    transition: "transform 150ms ease",
+  },
+});
+
+/**
+ * Links get their OWN line inside the panel rather than sharing the meta row.
+ *
+ * `width: 100%` is what forces the break: Panel wraps, so a full-width child
+ * necessarily starts a new line. HopperGuard's row is seven-plus links with
+ * separators, and inlining it beside the version chips leaves the two reading
+ * as one run-on sentence.
+ */
+const LinkRow = styled("div", {
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 2,
+    width: "100%",
+  },
+});
+
+const Panel = styled("div", {
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 4,
+    width: "100%",
+    paddingBlockStart: 2,
+  },
+});
+
+export interface StyledFooterVersion {
+  /** Human-facing release name, e.g. "Spring 2026". */
+  name?: string | undefined;
+  /** Build identifier, e.g. the package version. */
+  build?: string | undefined;
+}
+
+export interface StyledFooterStatusBadge {
+  /**
+   * Where to load the badge image from.
+   *
+   * **A SAME-ORIGIN path, not the monitoring vendor's URL.** This is the whole
+   * reason the prop takes a URL rather than a monitor id, and it is not a
+   * preference:
+   *
+   * A cross-origin image that fails to load logs a console error, and nothing
+   * the element does can suppress it — `onError` can hide the picture but
+   * cannot un-log the request. HopperGuard's post-deploy smoke asserts zero
+   * console errors, so a monitoring host having a bad day **withholds a
+   * production release tag**. That has already happened twice (NEH-387), which
+   * is why an embedded status page was removed from that app entirely.
+   *
+   * The shape that works is a route on your own origin that proxies the vendor
+   * and **always answers with an image** — a placeholder SVG on failure, never
+   * a 4xx/5xx. HopperGuard's `/api/status-badge` does exactly that, and reads
+   * its `UPTIMESIGNAL_MONITOR_ID` from server env, so the id never reaches the
+   * browser and this component never needs to know it.
+   */
+  src: string;
+  /**
+   * Accessible name, used as the image's `alt`. Default: "Service status".
+   *
+   * Not empty by default: the badge carries information (a service is up or it
+   * is not), so it is not decorative, and `alt=""` would hide that from a
+   * screen reader entirely.
+   */
+  label?: string | undefined;
+  /** Optional link to a fuller status page, wrapped around the badge. */
+  href?: string | undefined;
+}
+
+export interface StyledFooterProps {
+  /** Always visible. The consumer's own line — no product is named here. */
+  copyright: string;
+  /**
+   * Always visible, on its OWN line beneath the copyright.
+   *
+   * Rendered as a block: `StyledText` is a `<span>`, and two inline siblings
+   * share a line however their container is styled — the defect NEH-388 fixed
+   * in HopperGuard's footer, reproduced here if this were left inline.
+   */
+  legend?: string | undefined;
+  /** Always visible, at the end of the bar. Whatever controls the product has. */
+  actions?: React.ReactNode | undefined;
+  /** Shown in the panel when open. */
+  version?: StyledFooterVersion | undefined;
+  /**
+   * An uptime badge, shown in the panel when open.
+   *
+   * **Optional, and the footer is complete without it.** Every product using
+   * this today has a monitor, but a page that has none — a marketing site, a
+   * preview build, a product before its monitor exists — must still render a
+   * correct footer rather than a gap or a broken image. Omitting it renders
+   * nothing at all, and a test pins that.
+   *
+   * See `StyledFooterStatusBadge.src` for why this is a URL and not a monitor
+   * id. It is the difference between a badge and a withheld release tag.
+   */
+  statusBadge?: StyledFooterStatusBadge | undefined;
+  /**
+   * A row of links, shown in the panel when open, on its own line.
+   *
+   * **Optional, and two of the three products have none.** HopperGuard carries
+   * Privacy, Terms, its compliance pages and (only when signed in) Release
+   * Notes; rozcards and Optima pass nothing and no empty row is rendered.
+   *
+   * A slot rather than a `{href,label}[]`: HopperGuard interleaves separators,
+   * gates one entry on session state, and builds part of the list from config.
+   * A data-shaped prop would have to grow a predicate and a separator strategy
+   * to express that, and would still be wrong for the next consumer.
+   */
+  links?: React.ReactNode | undefined;
+  /**
+   * Anything else for the panel — extra links, a build date, a region.
+   *
+   * The general escape hatch, kept alongside `statusBadge` rather than replaced
+   * by it. `statusBadge` exists because three products would otherwise each
+   * hand-roll the same `<img>` and each get the failure handling subtly
+   * different; this is for the cases it does not cover.
+   */
+  status?: React.ReactNode | undefined;
+  /** Controlled open state. Omit to let the component own it. */
+  open?: boolean | undefined;
+  /** Initial state when uncontrolled. Closed by default: the bar is the point. */
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
+  /** Visible toggle text. Icons alone assume the reader already knows. */
+  showDetailsLabel?: string | undefined;
+  hideDetailsLabel?: string | undefined;
+  "data-testid"?: string | undefined;
+}
+
+/**
+ * The badge, or nothing.
+ *
+ * Hides itself if the image fails rather than leaving a broken-image icon in
+ * the footer. Note what this does NOT do: it cannot prevent the browser logging
+ * the failed request. That is why `src` must be a same-origin route that always
+ * answers with an image — see `StyledFooterStatusBadge.src`. This handles the
+ * cosmetic half; the src choice handles the half that breaks deploys.
+ */
+function StatusBadge({ src, label, href }: StyledFooterStatusBadge) {
+  const [failed, setFailed] = useState(false);
+  if (failed) return null;
+
+  const img = (
+    <img
+      src={src}
+      alt={label ?? "Service status"}
+      // Height only: a badge's width varies with its text ("99.98% uptime" is
+      // wider than "up"), so constraining both would distort it. A literal in
+      // inline style rather than a Panda prop, because a consumer's `include`
+      // glob being wrong would otherwise leave this unsized.
+      style={{ height: "20px", display: "block" }}
+      onError={() => setFailed(true)}
+      data-testid="footer-status-badge"
+    />
+  );
+
+  if (!href) return img;
+  return (
+    <a href={href} target="_blank" rel="noreferrer noopener" data-testid="footer-status-link">
+      {img}
+    </a>
+  );
+}
+
+export function StyledFooter({
+  copyright,
+  legend,
+  actions,
+  version,
+  statusBadge,
+  status,
+  links,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  showDetailsLabel = "Details",
+  hideDetailsLabel = "Hide details",
+  "data-testid": testId = "styled-footer",
+}: StyledFooterProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const panelId = useId();
+
+  // Controlled when `open` is supplied, uncontrolled otherwise — both, because
+  // HopperGuard drives this from app state while a marketing site does not want
+  // to hold state it has no other use for.
+  const isOpen = open ?? uncontrolledOpen;
+
+  const toggle = useCallback(() => {
+    const next = !isOpen;
+    if (open === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [isOpen, open, onOpenChange]);
+
+  return (
+    <StyledBox as="footer" width="100%" p={2} data-testid={testId}>
+      <Bar>
+        {/*
+          `flex: 1 1 auto` / `width: auto` are LOAD-BEARING, not tidying.
+
+          boxRecipe's base is `width: 100%` — right for the many places
+          StyledBox is a layout container, wrong for exactly this one. As a flex
+          item it claimed the whole line, and because the Bar wraps, the actions
+          and toggle were pushed to a SECOND ROW, where the Bar's
+          `space-between` no longer governs them and they bunched left. That is
+          the reported defect: on Optima the "Details" button sat under the
+          copyright with the action beside it, at a width where everything fits
+          on one row.
+
+          `minWidth: 0` lets a long copyright shrink instead of forcing the wrap
+          back — a flex item otherwise refuses to go below its content width,
+          and the second row returns at narrower viewports.
+        */}
+        <StyledBox
+          p={0}
+          data-testid="footer-identity"
+          style={{ flex: "1 1 auto", width: "auto", minWidth: 0 }}
+        >
+          <StyledText size="lg" display="block" data-testid="footer-copyright">
+            {copyright}
+          </StyledText>
+          {legend && (
+            <StyledText
+              size="sm"
+              color="textSecondary"
+              display="block"
+              data-testid="footer-legend"
+            >
+              {legend}
+            </StyledText>
+          )}
+        </StyledBox>
+
+        {/*
+          `marginInlineStart: auto` pins this group right even when the
+          copyright is short — `space-between` alone only does that while the
+          left column is the sole other child, which stops being true the
+          moment anything else is added.
+
+          ACTIONS COME FIRST, TOGGLE LAST. The expander belongs at the far
+          right: it is the control that changes the footer's shape, and a
+          reader scanning right-to-left for "how do I see more" should find it
+          at the edge rather than between the product's own buttons. Previously
+          the toggle rendered before `actions`, so it could never be the
+          rightmost element however the row was laid out.
+        */}
+        <Bar style={{ width: "auto", flex: "0 0 auto", marginInlineStart: "auto" }}>
+          {actions}
+          <ToggleButton
+            type="button"
+            onClick={toggle}
+            aria-expanded={isOpen}
+            // Only while the panel EXISTS. It is unmounted when closed
+            // (deliberately — see the panel below), and aria-controls pointing
+            // at an absent id is invalid ARIA that some screen readers announce
+            // oddly. Spread rather than `aria-controls={undefined}` so the
+            // attribute is genuinely absent rather than present-and-empty.
+            {...(isOpen ? { "aria-controls": panelId } : {})}
+            data-testid="footer-toggle"
+          >
+            <Chevron
+              aria-hidden="true"
+              style={{ transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}
+            >
+              ›
+            </Chevron>
+            {/* Visible, not just an aria-label: a label a sighted reader
+                cannot see is no label for the audience this serves. */}
+            <StyledText size="sm">
+              {isOpen ? hideDetailsLabel : showDetailsLabel}
+            </StyledText>
+          </ToggleButton>
+        </Bar>
+      </Bar>
+
+      {/* Unmounted rather than hidden: nothing in the panel should be tabbable,
+          announced, or fetching while it is closed. */}
+      {isOpen && (
+        <Panel id={panelId} data-testid="footer-panel">
+          {version?.name && (
+            <StyledText size="sm" data-testid="footer-version-name">
+              {version.name}
+            </StyledText>
+          )}
+          {version?.build && (
+            <StyledText size="sm" color="textSecondary" data-testid="footer-version-build">
+              {`build ${version.build}`}
+            </StyledText>
+          )}
+          {/* `key` on src: StatusBadge latches `failed` so a broken image does
+              not leave a torn icon in the footer, but that latch must not
+              outlive the URL that failed. Re-keying remounts it, which is the
+              cheapest correct reset — without it a badge that failed once
+              stays hidden after the src is fixed. */}
+          {statusBadge && <StatusBadge key={statusBadge.src} {...statusBadge} />}
+          {status}
+          {links && <LinkRow data-testid="footer-links">{links}</LinkRow>}
+        </Panel>
+      )}
+    </StyledBox>
+  );
+}
+
+export default StyledFooter;

package/src/components/StyledFormLabel.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import React from "react";
+import { styled } from "styled-system/jsx";
+import type { HTMLStyledProps } from "styled-system/types";
+import { useFontSizeProfile } from "../config/style-config";
+import { fontSizeMap } from "../config/font-size";
+
+/**
+ * The label above a form control.
+ *
+ * Clicking it focuses the control, which is most of the point: it turns a
+ * 14×14px checkbox into a target the size of its own text, and that is the
+ * difference between usable and not for anyone with a tremor. Always pass
+ * `htmlFor` — without it the association is lost and so is the tap target.
+ *
+ * ## Three hardcoded colours were fixed on the way in
+ *
+ * The originating version painted itself with literals — a dark grey label, a
+ * `#e53e3e` required asterisk, a `#888` "(optional)". Each looks right on a
+ * light theme and wrong on every other, and none of them respond to dark mode
+ * or a high-contrast theme at all. They are now `textPrimary`, `textError` and
+ * `textSecondary`, which is the same defect class as NEH-165/166/171.
+ *
+ * The label colour was the interesting one. It read
+ * `var(--chakra-colors-gray-700, #2D3748)` — a **Chakra** custom property, in
+ * an app that finished removing Chakra. Nothing had defined that property for
+ * some time, so every label in the product was silently painted by the
+ * fallback. It was invisible because it *worked*: the fallback is a reasonable
+ * grey, so nothing looked broken, and the label simply sat outside theming.
+ *
+ * ## It follows the app-wide text size (NEH-233)
+ *
+ * The label used to declare a flat `fontSize: "1rem"`, which opted it out of
+ * the type scale. In a product whose default body text is 1.375rem that made
+ * the label the *smaller* text — the caption under its own field — and, worse,
+ * it did not move when a user raised their text-size setting. That setting is
+ * the accommodation a low-vision reader actually reaches for, so a control
+ * ignoring it is ignoring them.
+ *
+ * It now reads the profile the same way `StyledText` does. Note that plain
+ * inheritance would NOT have worked: nothing puts a font size on the DOM, so
+ * dropping the declaration just pinned the label to the browser's 16px — still
+ * fixed, and no longer even declared. The profile has to be read.
+ *
+ * Callers wanting a specific size still pass `fontSize`, which wins. That is
+ * the right way round: the deviation is visible at the call site instead of
+ * baked into every label in every consumer.
+ *
+ * **This visibly resizes existing labels** — that was the whole reason it was
+ * split out of the migration rather than smuggled into it.
+ *
+ * ## `required` and `optional` are not symmetric, deliberately
+ *
+ * `optional` renders visible text, because "(optional)" is information the
+ * reader needs and there is no other channel carrying it.
+ *
+ * `required` renders an asterisk marked `aria-hidden`. That is correct **only
+ * when the control itself is `required` or `aria-required`** — then assistive
+ * tech announces the requirement from the input, and an announced "star" on top
+ * of it is noise. If your control does not set that attribute, the asterisk is
+ * decoration and screen-reader users are told nothing, so set it. This is the
+ * one thing about this component worth checking at a call site.
+ */
+
+const PandaFormLabel = styled("label", {
+  base: {
+    display: "block",
+    fontWeight: "bold",
+    marginBottom: "0.5rem",
+    color: "textPrimary",
+    // No fontSize — the label inherits, so it follows the app-wide text size.
+    // See the NEH-233 note above.
+    lineHeight: "1.25",
+    cursor: "pointer",
+  },
+});
+
+export interface StyledFormLabelProps extends HTMLStyledProps<"label"> {
+  children: React.ReactNode;
+  /** The `id` of the control this labels. Pass it — see above. */
+  htmlFor?: string;
+  /** Append a muted "(optional)". */
+  optional?: boolean;
+  /** Append a red asterisk. Mark the control `required` too — see above. */
+  required?: boolean;
+}
+
+const StyledFormLabel: React.FC<StyledFormLabelProps> = ({
+  children,
+  htmlFor,
+  optional,
+  required,
+  fontSize,
+  style,
+  ...props
+}) => {
+  // Unconditional, at the top: inlining this into the expression below reads
+  // fine and is a hooks-order violation the moment `fontSize` is passed.
+  const profile = useFontSizeProfile();
+
+  // An inline style, not a Panda prop — and this is the part that is easy to
+  // get wrong twice. Panda extracts styles by parsing source at BUILD time, so
+  // a prop whose value is only known at runtime produces a class name with no
+  // rule behind it: the element renders at the browser default and nothing
+  // errors. `StyledText` reaches for an inline style for exactly this reason.
+  //
+  // Applied only when the caller named no size, so their Panda `fontSize` class
+  // is not beaten by an inline declaration.
+  const sized = fontSize ? undefined : fontSizeMap[profile] ?? fontSizeMap.md;
+
+  return (
+  <PandaFormLabel
+    htmlFor={htmlFor}
+    fontSize={fontSize}
+    style={{ ...(sized ? { fontSize: sized } : {}), ...style }}
+    {...props}
+  >
+    {children}
+    {required && (
+      <styled.span color="textError" marginLeft="0.25em" aria-hidden="true">
+        *
+      </styled.span>
+    )}
+    {optional && (
+      <>
+        {/* A real space, not a margin. The margin separated the words visually
+            but not in the accessible name, which came out "Middle
+            name(optional)" — the space has to be a text node to be announced. */}{" "}
+        <styled.span fontWeight="normal" color="textSecondary" fontSize="0.95em">
+          (optional)
+        </styled.span>
+      </>
+    )}
+  </PandaFormLabel>
+  );
+};
+
+StyledFormLabel.displayName = "StyledFormLabel";
+
+export default StyledFormLabel;

package/src/components/StyledGrid.tsx

@@ -0,0 +1,109 @@
+import { styled, type HTMLStyledProps } from "styled-system/jsx";
+import { cx, css } from "styled-system/css";
+import { stripedRecipe } from "styled-system/recipes";
+import React from "react";
+import { log } from "../config/logger";
+import type { ConditionalValue } from "styled-system/types";
+
+const PandaGrid = styled("div", {
+  base: {
+    display: "grid",
+  },
+});
+
+export interface StyledGridProps extends Omit<HTMLStyledProps<"div">, "columns"> {
+  children?: React.ReactNode;
+  isStriped?: boolean;
+  showGridLines?: boolean;
+  templateColumns?: ConditionalValue<string>;
+  templateRows?: ConditionalValue<string>;
+  templateAreas?: ConditionalValue<string>;
+  columns?: ConditionalValue<number | { base?: number; sm?: number; md?: number; lg?: number; xl?: number }>;
+}
+
+const StyledGrid = React.forwardRef<HTMLDivElement, StyledGridProps>(
+  ({
+    isStriped,
+    showGridLines,
+    className,
+    templateColumns,
+    templateRows,
+    templateAreas,
+    columns, ...props }, ref) => {
+    const combinedClassName = cx(
+      isStriped ? stripedRecipe() : undefined,
+      showGridLines
+        ? css({
+          "& > *": {
+            outline: "1px solid",
+            outlineColor: "borderBgPrimary",
+            backgroundColor: "boxBgPrimary",
+            borderRadius: "15px",
+          },
+        })
+        : undefined,
+      className,
+    );
+
+    // Map shorthand props to CSS grid properties
+    const gridTemplateColumns = props.gridTemplateColumns ?? templateColumns;
+    const gridTemplateRows = props.gridTemplateRows ?? templateRows;
+    const gridTemplateAreas = props.gridTemplateAreas ?? templateAreas;
+    delete props.gridTemplateColumns;
+    delete props.gridTemplateRows;
+    delete props.gridTemplateAreas;
+
+    // Handle columns prop (responsive column count)
+    let resolvedColumns = gridTemplateColumns;
+    if (columns !== undefined && !resolvedColumns) {
+      if (typeof columns === "number") {
+        resolvedColumns = `repeat(${columns}, 1fr)`;
+      } else if (typeof columns === "object" && columns !== null) {
+        const colObj = columns as { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
+        // For responsive objects, we need to generate a responsive value
+        const responsive: Record<string, string> = {};
+        if (colObj.base !== undefined) responsive.base = `repeat(${colObj.base}, 1fr)`;
+        if (colObj.sm !== undefined) responsive.sm = `repeat(${colObj.sm}, 1fr)`;
+        if (colObj.md !== undefined) responsive.md = `repeat(${colObj.md}, 1fr)`;
+        if (colObj.lg !== undefined) responsive.lg = `repeat(${colObj.lg}, 1fr)`;
+        if (colObj.xl !== undefined) responsive.xl = `repeat(${colObj.xl}, 1fr)`;
+        resolvedColumns = responsive as ConditionalValue<string>;
+      }
+    }
+
+    const childrenDetails = React.Children.map(props.children, (child) => {
+      if (React.isValidElement(child)) {
+        const element = child as React.ReactElement<{ id?: string }>;
+        const params = element.props;
+        return {
+          key: child.key,
+          id: params?.id,
+          type: typeof child.type === 'string' ? child.type : (child.type as React.FunctionComponent).displayName || (child.type as React.FunctionComponent).name || 'Unknown',
+          isNull: child === null
+        };
+      }
+      return "Non-Element Child";
+    });
+
+    log.debug("[StyledGrid] Rendering Grid", {
+      childCount: React.Children.count(props.children),
+      showGridLines,
+      childrenDetails
+    });
+
+    return (
+      <PandaGrid
+        ref={ref}
+        className={combinedClassName}
+        gridTemplateColumns={resolvedColumns}
+        gridTemplateRows={gridTemplateRows}
+        gridTemplateAreas={gridTemplateAreas}
+        {...props}
+      />
+    );
+  },
+);
+
+StyledGrid.displayName = "StyledGrid";
+
+export default StyledGrid;

package/src/components/StyledGridItem.tsx

@@ -0,0 +1,19 @@
+import { styled } from "styled-system/jsx";
+import type { HTMLStyledProps } from "styled-system/types";
+
+const PandaGridItem = styled("div", {
+  base: {
+    gridColumn: "auto",
+    gridRow: "auto",
+    minWidth: 0,
+    minHeight: 0,
+  },
+});
+
+export type StyledGridItemProps = HTMLStyledProps<"div">;
+
+const StyledGridItem = PandaGridItem;
+
+StyledGridItem.displayName = "StyledGridItem";
+
+export default StyledGridItem;