@recursica/adapter-mui-v7 1.0.4 → 1.3.0

package/src/components/Typography/Typography.module.css

@@ -2,6 +2,17 @@
  * HARDCODED VALUES
  * - `.root` `text-wrap: balance` — not a design token; a layout algorithm choice requested by
  *   UX (Matt Massey, 2026-08-28) to even out wrapped line lengths. See TEXT_IMPLEMENTATION_NOTES.md.
+ *
+ * Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Semantic text color and emphasis are layer/theme-level concerns with no per-component UI-kit
+ * token; Text and Heading both bind the brand layer text-element + text-emphasis tokens
+ * directly, by design.
+ *   recursica-allow-brand: --recursica_brand_layer_elements_text_color
+ *   recursica-allow-brand: --recursica_brand_layer_elements_text_warning
+ *   recursica-allow-brand: --recursica_brand_layer_elements_text_alert
+ *   recursica-allow-brand: --recursica_brand_layer_elements_text_success
+ *   recursica-allow-brand: --recursica_brand_text-emphasis_high
+ *   recursica-allow-brand: --recursica_brand_text-emphasis_low
  */
 
 .root {
@@ -11,3 +22,31 @@
      just ignore the declaration. */
   text-wrap: balance;
 }
+
+.root[data-color="default"] {
+  color: var(--recursica_brand_layer_elements_text_color);
+}
+
+.root[data-color="warning"] {
+  color: var(--recursica_brand_layer_elements_text_warning);
+}
+
+.root[data-color="alert"] {
+  color: var(--recursica_brand_layer_elements_text_alert);
+}
+
+.root[data-color="success"] {
+  color: var(--recursica_brand_layer_elements_text_success);
+}
+
+/*
+ * Emphasis — bound to the theme's text-emphasis opacity tokens via the `data-emphasis` attribute.
+ * `high` (the default) resolves to solid opacity, so only `low` needs to dim the text.
+ */
+.root[data-emphasis="high"] {
+  opacity: var(--recursica_brand_text-emphasis_high);
+}
+
+.root[data-emphasis="low"] {
+  opacity: var(--recursica_brand_text-emphasis_low);
+}

package/src/components/index.ts

@@ -24,7 +24,7 @@ export * from "./Flex";
 export * from "./FormControlLayout";
 export * from "./FormControlWrapper";
 export type { RecursicaFormControlWrapperProps } from "./FormControlWrapper";
-export * from "./Grid";
+export * from "./LayoutGrid";
 export * from "./Group";
 export * from "./Heading";
 export * from "./HoverCard";

package/src/index.ts

@@ -1,3 +1,4 @@
 import "@recursica/adapter-common/style.css";
 
 export * from "./components";
+export * from "./utils/breakpointsFromRecManifest";

package/src/utils/breakpointsFromRecManifest.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { breakpointsFromRecManifest } from "./breakpointsFromRecManifest";
+
+const grid = (width: Record<string, number>) =>
+  Object.fromEntries(Object.entries(width).map(([k, v]) => [k, { $value: v }]));
+
+describe("breakpointsFromRecManifest", () => {
+  it("starts each grid at its min-width and places default after the widest max-width", () => {
+    const manifest = {
+      brand: {
+        "layout-grids": {
+          default: {},
+          mobile: grid({ "max-width": 480 }),
+          tablet: grid({ "min-width": 481, "max-width": 780 }),
+        },
+      },
+    };
+    expect(breakpointsFromRecManifest(manifest)).toEqual({
+      mobile: 0,
+      tablet: 481,
+      default: 781,
+    });
+  });
+
+  it("returns an empty object when default is the only grid", () => {
+    expect(
+      breakpointsFromRecManifest({
+        brand: { "layout-grids": { default: {} } },
+      }),
+    ).toEqual({});
+  });
+
+  it("throws for a non-default grid with no width", () => {
+    expect(() =>
+      breakpointsFromRecManifest({
+        brand: { "layout-grids": { default: {}, odd: {} } },
+      }),
+    ).toThrow(/neither min-width nor max-width/);
+  });
+});

package/src/utils/breakpointsFromRecManifest.ts

@@ -0,0 +1,72 @@
+interface ManifestNumber {
+  $value?: unknown;
+}
+
+interface ManifestLayoutGrid {
+  "min-width"?: ManifestNumber;
+  "max-width"?: ManifestNumber;
+}
+
+interface ManifestWithLayoutGrids {
+  brand?: { "layout-grids"?: Record<string, unknown> };
+}
+
+function width(grid: ManifestLayoutGrid, key: "min-width" | "max-width") {
+  const value = grid[key]?.$value;
+  if (value === undefined) return undefined;
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0) {
+    throw new Error(
+      `layout-grid ${key} must be a non-negative number, got ${String(value)}`,
+    );
+  }
+  return value;
+}
+
+/**
+ * Builds a `{ name: <start px> }` breakpoint values object from the manifest's layout grids, to
+ * merge into MUI's `createTheme({ breakpoints: { values } })`. Opt-in: nothing in the adapter
+ * calls this for you, and the result is a plain object you can edit.
+ *
+ * MUI breakpoints are mobile-first start widths, so each non-default grid maps to its
+ * `min-width`; a grid with only a `max-width` (e.g. `mobile`, up to 480px) starts at `0`. The
+ * `default` grid has no width of its own: when other grids exist it is included, named `default`,
+ * starting one pixel past the widest `max-width`. A manifest with only the `default` grid (the
+ * stock Forge export) returns `{}`. MUI's `values` replaces its defaults rather than merging, so
+ * spread MUI's own defaults first: `values: { ...createTheme().breakpoints.values, ...result }`.
+ *
+ * Throws for a non-default grid with neither width, for non-numeric widths, and when no other grid
+ * has a `max-width` for `default` to start after.
+ */
+export function breakpointsFromRecManifest(
+  manifest: ManifestWithLayoutGrids,
+): Record<string, number> {
+  const grids = (manifest.brand?.["layout-grids"] ?? {}) as Record<
+    string,
+    ManifestLayoutGrid
+  >;
+  const entries: [string, number][] = [];
+  let widestMax: number | undefined;
+  for (const [name, grid] of Object.entries(grids)) {
+    if (name === "default") continue;
+    const min = width(grid, "min-width");
+    const max = width(grid, "max-width");
+    if (min === undefined && max === undefined) {
+      throw new Error(
+        `layout-grid "${name}" has neither min-width nor max-width`,
+      );
+    }
+    if (max !== undefined && (widestMax === undefined || max > widestMax)) {
+      widestMax = max;
+    }
+    entries.push([name, min ?? 0]);
+  }
+  if (entries.length > 0) {
+    if (widestMax === undefined) {
+      throw new Error(
+        'Cannot place the "default" layout-grid: no other grid has a max-width to start after',
+      );
+    }
+    entries.push(["default", widestMax + 1]);
+  }
+  return Object.fromEntries(entries.sort((a, b) => a[1] - b[1]));
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
 export * from "./copyToClipboard";
+export * from "./breakpointsFromRecManifest";

package/src/components/Grid/Grid.stories.tsx

@@ -1,161 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Grid } from "./Grid";
-import { Card } from "../Card/Card";
-import { Text } from "../Text/Text";
-
-type GridStoryProps = React.ComponentProps<typeof Grid>;
-
-const meta: Meta<GridStoryProps> = {
-  title: "UI-Kit/Grid",
-  component: Grid,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Grid is a 12-column (by default) responsive grid layout hand-composed from MUI's own Grid, providing column sizing, offsets, ordering, and breakpoint-based visibility using MUI's native prop names.",
-      },
-    },
-    controls: {
-      include: ["children", "spacing", "columns", "direction", "wrap"],
-    },
-  },
-  args: {
-    spacing: "rec-default",
-    columns: 12,
-  },
-  argTypes: {
-    spacing: {
-      control: "select",
-      options: [
-        "rec-none",
-        "rec-sm",
-        "rec-default",
-        "rec-md",
-        "rec-lg",
-        "rec-xl",
-        "rec-2xl",
-      ],
-      description: "Space between columns",
-    },
-    columns: {
-      control: "number",
-      description: "Number of columns in each row",
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<GridStoryProps>;
-
-const Swatch = ({ children }: { children: React.ReactNode }) => (
-  <Card>
-    <Card.Content>
-      <Text>{children}</Text>
-    </Card.Content>
-  </Card>
-);
-
-export const Default: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={4}>
-        <Swatch>size 4</Swatch>
-      </Grid.Col>
-      <Grid.Col size={4}>
-        <Swatch>size 4</Swatch>
-      </Grid.Col>
-      <Grid.Col size={4}>
-        <Swatch>size 4</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};
-
-export const ResponsiveSizes: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={{ xs: 12, sm: 6, md: 3 }}>
-        <Swatch>xs 12 / sm 6 / md 3</Swatch>
-      </Grid.Col>
-      <Grid.Col size={{ xs: 12, sm: 6, md: 3 }}>
-        <Swatch>xs 12 / sm 6 / md 3</Swatch>
-      </Grid.Col>
-      <Grid.Col size={{ xs: 12, sm: 6, md: 3 }}>
-        <Swatch>xs 12 / sm 6 / md 3</Swatch>
-      </Grid.Col>
-      <Grid.Col size={{ xs: 12, sm: 6, md: 3 }}>
-        <Swatch>xs 12 / sm 6 / md 3</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};
-
-export const Offset: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={4} offset={4}>
-        <Swatch>size 4, offset 4</Swatch>
-      </Grid.Col>
-      <Grid.Col size={4}>
-        <Swatch>size 4</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};
-
-export const Grow: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={3}>
-        <Swatch>size 3</Swatch>
-      </Grid.Col>
-      <Grid.Col size={3}>
-        <Swatch>size 3</Swatch>
-      </Grid.Col>
-      <Grid.Col size="grow">
-        <Swatch>size &quot;grow&quot; (fills remaining space)</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};
-
-export const CustomColumnCount: Story = {
-  args: {
-    columns: 6,
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={2}>
-        <Swatch>size 2 of 6</Swatch>
-      </Grid.Col>
-      <Grid.Col size={2}>
-        <Swatch>size 2 of 6</Swatch>
-      </Grid.Col>
-      <Grid.Col size={2}>
-        <Swatch>size 2 of 6</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};
-
-export const VisibleHiddenFrom: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
-  render: ({ withLayer, layer, ...args }: any) => (
-    <Grid {...args}>
-      <Grid.Col size={6} hiddenFrom="sm">
-        <Swatch>hidden from sm and up</Swatch>
-      </Grid.Col>
-      <Grid.Col size={6} visibleFrom="sm">
-        <Swatch>visible from sm and up</Swatch>
-      </Grid.Col>
-    </Grid>
-  ),
-};

package/src/components/Grid/Grid.test.tsx

@@ -1 +0,0 @@
-// Placeholder for future Grid component tests. Add tests here if/when needed.

package/src/components/Grid/Grid.tsx

@@ -1,155 +0,0 @@
-/**
- * Grid layout wrapper.
- *
- * MUI merges "container" and "item" into a single `Grid` component (no separate Grid.Col,
- * unlike Mantine). To preserve the Grid/Grid.Col dot-notation shape across adapters, this
- * file splits MUI's single component back into two thin wrappers: Grid always renders MUI's
- * `<Grid container>`, GridCol always renders a plain MUI `<Grid>` (item mode).
- *
- * Per the layout-components rule, both wrappers simply pass through MUI's own Grid props
- * (`size`, `offset`, `spacing`, `columns`, `direction`, `wrap`) with no Recursica renaming.
- * MUI has no per-item "grow to fill remaining space" container flag like Mantine's `grow`;
- * use MUI's own `size="grow"` on individual columns instead. `visibleFrom`/`hiddenFrom`
- * don't exist in MUI at all, so — per the rule that a missing kit feature is built following
- * Mantine's own shape — they're added here via CSS classes, keyed on MUI's own breakpoint
- * scale (`xs`/`sm`/`md`/`lg`/`xl`).
- *
- * `justifyContent`/`alignItems` (container) and `order` (item) are typed on `MuiGridProps`
- * (inherited generically from `SystemProps`) but MUI's Grid style generator — verified by
- * reading `@mui/system`'s `gridGenerator.js`/`createGrid.js` — only wires up `size`, `offset`,
- * `columns`, `spacing`/`rowSpacing`/`columnSpacing`, `direction`, and `wrap`; passing these
- * three straight through would silently no-op. They're pulled out and applied via inline
- * `style` instead, still using MUI's own native names.
- *
- * Like Flex, Stack, Group, and Container, this is a primitive layout component and
- * does not use the `RecursicaOverStyled` gatekeeper — only the `sx` prop is stripped.
- */
-import { forwardRef, type CSSProperties } from "react";
-import { Grid as MuiGrid, type GridProps as MuiGridProps } from "@mui/material";
-import {
-  SPACING_MAP,
-  type OmitSx,
-  filterSxProp,
-  type WithRecursicaSpacing,
-} from "../../utils/filterStylingProps";
-import styles from "./Grid.module.css";
-
-type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
-
-const HIDDEN_FROM_CLASS: Record<Breakpoint, string> = {
-  xs: styles.hiddenFromXs,
-  sm: styles.hiddenFromSm,
-  md: styles.hiddenFromMd,
-  lg: styles.hiddenFromLg,
-  xl: styles.hiddenFromXl,
-};
-
-// "xs" intentionally absent: visible from the smallest breakpoint means never hidden.
-const VISIBLE_FROM_CLASS: Partial<Record<Breakpoint, string>> = {
-  sm: styles.visibleFromSm,
-  md: styles.visibleFromMd,
-  lg: styles.visibleFromLg,
-  xl: styles.visibleFromXl,
-};
-
-// ============================================================
-// GRID
-// ============================================================
-
-export type GridProps = WithRecursicaSpacing<
-  OmitSx<Omit<MuiGridProps, "container" | "justifyContent" | "alignItems">>
-> & {
-  /** Sets `justify-content` on the container. Applied via inline style — see notes above. */
-  justifyContent?: CSSProperties["justifyContent"];
-  /** Sets `align-items` on the container. Applied via inline style — see notes above. */
-  alignItems?: CSSProperties["alignItems"];
-};
-
-const GridBase = forwardRef<HTMLDivElement, GridProps>(function Grid(
-  {
-    children,
-    spacing = "rec-default",
-    justifyContent,
-    alignItems,
-    style,
-    ...rest
-  },
-  ref,
-) {
-  const safeProps = filterSxProp(rest as Record<string, unknown>);
-  const resolvedSpacing =
-    typeof spacing === "string" && spacing in SPACING_MAP
-      ? SPACING_MAP[spacing as keyof typeof SPACING_MAP]
-      : spacing;
-
-  return (
-    <MuiGrid
-      ref={ref}
-      {...(safeProps as unknown as MuiGridProps)}
-      container
-      spacing={resolvedSpacing}
-      className={styles.root}
-      style={{ justifyContent, alignItems, ...(style as CSSProperties) }}
-    >
-      {children}
-    </MuiGrid>
-  );
-});
-GridBase.displayName = "Grid";
-
-// ============================================================
-// GRID.COL
-// ============================================================
-
-export type GridColProps = WithRecursicaSpacing<
-  OmitSx<Omit<MuiGridProps, "container" | "order">>
-> & {
-  /** Sets the CSS `order` property. Applied via inline style — see notes above. */
-  order?: number;
-  /** Hides the column below the given breakpoint. MUI has no native equivalent. */
-  visibleFrom?: Breakpoint;
-  /** Hides the column above the given breakpoint. MUI has no native equivalent. */
-  hiddenFrom?: Breakpoint;
-};
-
-export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
-  function GridCol(
-    { children, order, visibleFrom, hiddenFrom, style, className, ...rest },
-    ref,
-  ) {
-    const safeProps = filterSxProp(rest as Record<string, unknown>);
-
-    const visibilityClass = visibleFrom
-      ? VISIBLE_FROM_CLASS[visibleFrom]
-      : hiddenFrom
-        ? HIDDEN_FROM_CLASS[hiddenFrom]
-        : undefined;
-
-    const finalClassName = [styles.col, visibilityClass, className]
-      .filter(Boolean)
-      .join(" ");
-
-    return (
-      <MuiGrid
-        ref={ref}
-        className={finalClassName}
-        {...(safeProps as unknown as MuiGridProps)}
-        style={{ order, ...(style as CSSProperties) }}
-      >
-        {children}
-      </MuiGrid>
-    );
-  },
-);
-GridCol.displayName = "GridCol";
-
-// ============================================================
-// DOT NOTATION EXPORT
-// ============================================================
-
-type GridComponent = typeof GridBase & {
-  Col: typeof GridCol;
-};
-
-export const Grid = GridBase as GridComponent;
-Grid.Col = GridCol;

package/src/components/Grid/IMPLEMENTATION_NOTES.md

@@ -1,24 +0,0 @@
-# Grid Implementation Notes
-
-MUI has no native Grid/Grid.Col split — MUI's own `Grid` component merges "container" and "item" behavior into one component (toggled by the `container` boolean and a `size` prop). To keep the same `Grid` + `Grid.Col` dot-notation shape as the mantine-adapter, this file hand-composes two thin wrappers around that single underlying component: `Grid` always renders `<MuiGrid container>`, `Grid.Col` always renders `<MuiGrid>` in item mode. This is a structural convenience only — the props on each wrapper are MUI's own, not a Recursica-defined contract.
-
-Per the layout-components rule (no formal Recursica common props definition — layout components simply pass through the underlying kit's own props), this Grid does **not** attempt prop-name parity with the mantine-adapter's Grid. Its public API is MUI's own vocabulary:
-
-- **`spacing`** (not Mantine's `gutter`/the old Recursica `gap` alias) — MUI's own container-spacing prop. Still accepts `rec-*` tokens, resolved through the same `SPACING_MAP` lookup used elsewhere in this adapter.
-- **`size`** (not Mantine's `span`) — MUI's own item-sizing prop on `Grid.Col`: a column count, `"auto"` (size to content), `"grow"` (fill remaining space), or a responsive object keyed by MUI's own breakpoints. No inversion/translation against Mantine's `span` semantics.
-- **`offset`** — MUI's own prop, used as-is.
-- **Breakpoint objects** use MUI's own scale (`xs`/`sm`/`md`/`lg`/`xl`) directly. There is no `"base"` alias — `xs` is MUI's smallest breakpoint, same role Mantine's own smallest breakpoint plays.
-- **`grow` (container-level)**: not implemented. Mantine's container `grow` flag ("last row's columns expand to fill available space") has no MUI equivalent, but MUI's own `size="grow"` on individual `Grid.Col`s already covers the same real-world need — set it per-column instead of on the container.
-- **`order`**: MUI types `order` generically (via `SystemProps`) but its Grid style generator (`gridGenerator.js`/`createGrid.js`, read directly to confirm) never wires it up — passing it straight through silently no-ops. Applied here via inline `style.order` instead, single value only (no per-breakpoint object).
-- **`justifyContent` / `alignItems`** (container only): same issue as `order` — typed but not read by MUI's Grid generator (confirmed by reading `gridGenerator.js`: only `size`, `offset`, `columns`, spacing, `direction`, and `wrap` have generator functions). Applied via inline `style` instead, using MUI's own prop names (not Mantine's `justify`/`align`).
-- **`visibleFrom` / `hiddenFrom`**: no native MUI Grid mechanism at all, so — per the rule that a missing kit feature is built following Mantine's own shape — implemented via `Grid.module.css` media-query classes, hardcoded to MUI's own default `theme.breakpoints` pixel values (`xs:0, sm:600, md:900, lg:1200, xl:1536`). If the consuming app customizes its MUI theme breakpoints, these thresholds won't follow — structural layout mechanics, not a design token.
-
-**Cross-adapter parity caveat**: `visibleFrom`/`hiddenFrom` are pinned to MUI's default breakpoints here, while the mantine-adapter's equivalent behavior is driven by Mantine's own default breakpoints (576/768/992/1200/1408). The two adapters' Grid stories may show different columns at the exact same viewport width in the `adapter-tester` visual-regression suite as a result — a real, structural difference between the two underlying libraries' breakpoint scales, not a bug in either adapter. The two adapters' Grid APIs are also no longer prop-name-identical (`spacing`/`size` here vs. `gutter`/`span` in mantine-adapter) — this is intentional per the layout-components rule; each adapter's Grid speaks its own kit's vocabulary.
-
-**Story parity exclude**: for the same `size`/`span` reason above, this story is named `ResponsiveSizes` here vs. mantine-adapter's `ResponsiveSpans` — different story ids. `ui-kit-grid--responsive-spans` is marked `exclude: true` in `adapter-tester.config.json`'s `story parity with source of truth` check rather than renamed to match, per developer direction (2026-08-30).
-
-**Update (2026-08-30):** mantine-adapter now also has its own `ResponsiveSizes` story (using its
-own `span` prop, same breakpoints/content as this one) purely so this adapter's `responsive-sizes`
-story id has a source-of-truth golden to diff against — see mantine-adapter's own
-`GRID_IMPLEMENTATION_NOTES.md`. The `responsive-spans`/`responsive-sizes` naming split itself is
-unchanged/still intentional; this just closes the one-directional story-parity gap.

package/src/components/Grid/USAGE.md

@@ -1,53 +0,0 @@
-# Grid - Usage Guide
-
-This document describes how to integrate and use the `Grid` component in your projects using `@recursica/adapter-mui-v7`.
-
----
-
-## 1. Import Reference
-
-```tsx
-import { Grid } from "@recursica/adapter-mui-v7";
-```
-
----
-
-## 2. Basic Example
-
-```tsx
-import React from "react";
-import { Grid } from "@recursica/adapter-mui-v7";
-
-export default function Demo() {
-  return (
-    <Grid spacing="rec-default">
-      <Grid.Col size={6}>Half width</Grid.Col>
-      <Grid.Col size={{ xs: 12, sm: 6, md: 3 }}>Responsive width</Grid.Col>
-    </Grid>
-  );
-}
-```
-
----
-
-## 3. Design System Integration
-
-All Recursica components in the `@recursica/adapter-mui-v7` package adhere strictly to design system spacing, scaling, and behavior patterns.
-
-> [!IMPORTANT]
->
-> - **Anti-override protection**: `Grid` is a primitive layout component (see [OVERSTYLING.md](../../../OVERSTYLING.md)) — only the `sx` prop is stripped, everything else passes through freely without needing `overStyled`.
-> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
-> - **Variables and Theming**: Spacing is entirely determined by the `rec-*` token scale, mapped transparently to MUI's `spacing` value.
-
----
-
-## 4. Key Integration Features & Constraints
-
-This Grid uses MUI's own prop vocabulary directly (see [IMPLEMENTATION_NOTES.md](./IMPLEMENTATION_NOTES.md)) — it is not name-for-name identical to the mantine-adapter's Grid.
-
-- `spacing` controls the space between grid items (accepts `rec-*` tokens).
-- `size` accepts a column count, `"auto"`, `"grow"`, or a responsive object (`{ xs, sm, md, ... }`).
-- `offset` shifts a column by a number of columns.
-- `order` accepts a fixed number to control a column's visual order (single value only, no responsive object).
-- `visibleFrom`/`hiddenFrom` show or hide a column at the standard breakpoints (600/900/1200/1536px).

package/src/components/Grid/index.ts

@@ -1 +0,0 @@
-export * from "./Grid";