@recursica/mui-adapter 0.15.0 → 0.17.0

package/src/components/Stack/USAGE.md

@@ -0,0 +1,41 @@
+# Stack - Usage Guide
+
+This document describes how to integrate and use the `Stack` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Stack } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Stack } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Stack gap="md" align="stretch">
+      <Text>Item 1</Text>
+      <Text>Item 2</Text>
+    </Stack>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Stepper/USAGE.md

@@ -0,0 +1,48 @@
+# Stepper - Usage Guide
+
+This document describes how to integrate and use the `Stepper` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Stepper } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Stepper } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Stepper active={1}>
+      <Stepper.Step label="First step" description="Create account" />
+      <Stepper.Step label="Second step" description="Verify email" />
+    </Stepper>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+- **Compositional API Dropped:** Mantine manages stepper state and content via `<Stepper.Step>` and `<Stepper.Completed>`. MUI delegates content rendering to the developer and focuses purely on the stepper visual layout using `<Step>`, `<StepLabel>`, etc.
+- **Monolithic API Adopted:** Following architectural review, we have abandoned the fabricated context wrappers for `mui-adapter`. We now natively export `Stepper`, `Step`, `StepLabel`, `StepButton`, and `StepConnector` wrapping their `@mui/material` counterparts. Developers are expected to manage the active step logic and content rendering outside the `Stepper` component, consistent with MUI patterns. Storybook tests have been updated to reflect this divergence while retaining core visual compatibility.

package/src/components/Switch/USAGE.md

@@ -0,0 +1,36 @@
+# Switch - Usage Guide
+
+This document describes how to integrate and use the `Switch` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Switch } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Switch } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <Switch label="Enable notifications" defaultChecked />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Table/Table.tsx

@@ -3,12 +3,19 @@ import {
   Table as MuiTable,
   type TableProps as MuiTableProps,
   TableBody as MuiTableBody,
+  type TableBodyProps as MuiTableBodyProps,
   TableCell as MuiTableCell,
+  type TableCellProps as MuiTableCellProps,
   TableContainer as MuiTableContainer,
+  type TableContainerProps as MuiTableContainerProps,
   TableHead as MuiTableHead,
+  type TableHeadProps as MuiTableHeadProps,
   TableRow as MuiTableRow,
+  type TableRowProps as MuiTableRowProps,
   TableFooter as MuiTableFooter,
+  type TableFooterProps as MuiTableFooterProps,
   TableSortLabel as MuiTableSortLabel,
+  type TableSortLabelProps as MuiTableSortLabelProps,
 } from "@mui/material";
 import {
   filterStylingProps,
@@ -45,21 +52,142 @@ const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
 
 TableBase.displayName = "Table";
 
+// ==== EXPLICIT DOT-NOTATION SUB-COMPONENTS ====
+// Each sub-component is wrapped independently so it goes through
+// filterStylingProps/overStyled the same way the root Table does.
+
+export type TableBodyPropsRecursica = RecursicaOverStyled<MuiTableBodyProps>;
+
+export const TableBodyComponent = forwardRef<
+  HTMLTableSectionElement,
+  TableBodyPropsRecursica
+>(function TableBody({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableBody
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableBodyProps)}
+    />
+  );
+});
+TableBodyComponent.displayName = "TableBody";
+
+export type TableCellPropsRecursica = RecursicaOverStyled<MuiTableCellProps>;
+
+export const TableCellComponent = forwardRef<
+  HTMLTableCellElement,
+  TableCellPropsRecursica
+>(function TableCell({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableCell
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableCellProps)}
+    />
+  );
+});
+TableCellComponent.displayName = "TableCell";
+
+export type TableContainerPropsRecursica =
+  RecursicaOverStyled<MuiTableContainerProps>;
+
+export const TableContainerComponent = forwardRef<
+  HTMLDivElement,
+  TableContainerPropsRecursica
+>(function TableContainer({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableContainer
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableContainerProps)}
+    />
+  );
+});
+TableContainerComponent.displayName = "TableContainer";
+
+export type TableHeadPropsRecursica = RecursicaOverStyled<MuiTableHeadProps>;
+
+export const TableHeadComponent = forwardRef<
+  HTMLTableSectionElement,
+  TableHeadPropsRecursica
+>(function TableHead({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableHead
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableHeadProps)}
+    />
+  );
+});
+TableHeadComponent.displayName = "TableHead";
+
+export type TableRowPropsRecursica = RecursicaOverStyled<MuiTableRowProps>;
+
+export const TableRowComponent = forwardRef<
+  HTMLTableRowElement,
+  TableRowPropsRecursica
+>(function TableRow({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableRow
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableRowProps)}
+    />
+  );
+});
+TableRowComponent.displayName = "TableRow";
+
+export type TableFooterPropsRecursica =
+  RecursicaOverStyled<MuiTableFooterProps>;
+
+export const TableFooterComponent = forwardRef<
+  HTMLTableSectionElement,
+  TableFooterPropsRecursica
+>(function TableFooter({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableFooter
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableFooterProps)}
+    />
+  );
+});
+TableFooterComponent.displayName = "TableFooter";
+
+export type TableSortLabelPropsRecursica =
+  RecursicaOverStyled<MuiTableSortLabelProps>;
+
+export const TableSortLabelComponent = forwardRef<
+  HTMLSpanElement,
+  TableSortLabelPropsRecursica
+>(function TableSortLabel({ overStyled = false, ...rest }, ref) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  return (
+    <MuiTableSortLabel
+      ref={ref}
+      {...(sanitizedProps as unknown as MuiTableSortLabelProps)}
+    />
+  );
+});
+TableSortLabelComponent.displayName = "TableSortLabel";
+
+// ==== DOT NOTATION EXPORT ====
+
 type TableComponent = typeof TableBase & {
-  Body: typeof MuiTableBody;
-  Cell: typeof MuiTableCell;
-  Container: typeof MuiTableContainer;
-  Head: typeof MuiTableHead;
-  Row: typeof MuiTableRow;
-  Footer: typeof MuiTableFooter;
-  SortLabel: typeof MuiTableSortLabel;
+  Body: typeof TableBodyComponent;
+  Cell: typeof TableCellComponent;
+  Container: typeof TableContainerComponent;
+  Head: typeof TableHeadComponent;
+  Row: typeof TableRowComponent;
+  Footer: typeof TableFooterComponent;
+  SortLabel: typeof TableSortLabelComponent;
 };
 
 export const Table = TableBase as TableComponent;
-Table.Body = MuiTableBody;
-Table.Cell = MuiTableCell;
-Table.Container = MuiTableContainer;
-Table.Head = MuiTableHead;
-Table.Row = MuiTableRow;
-Table.Footer = MuiTableFooter;
-Table.SortLabel = MuiTableSortLabel;
+Table.Body = TableBodyComponent;
+Table.Cell = TableCellComponent;
+Table.Container = TableContainerComponent;
+Table.Head = TableHeadComponent;
+Table.Row = TableRowComponent;
+Table.Footer = TableFooterComponent;
+Table.SortLabel = TableSortLabelComponent;

package/src/components/Table/USAGE.md

@@ -0,0 +1,51 @@
+# Table - Usage Guide
+
+This document describes how to integrate and use the `Table` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Table } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from 'react';
+import { Table } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Table>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Name</Table.Th>
+          <Table.Th>Email</Table.Tr>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        <Table.Tr>
+          <Table.Td>Jane Doe</Table.Tr>
+          <Table.Td>jane@example.com</Table.Tr>
+        </Table.Tr>
+      </Table.Tbody>
+    </Table>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Tabs/USAGE.md

@@ -0,0 +1,52 @@
+# Tabs - Usage Guide
+
+This document describes how to integrate and use the `Tabs` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Tabs } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Tabs } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Tabs defaultValue="home">
+      <Tabs.List>
+        <Tabs.Tab value="home">Home</Tabs.Tab>
+        <Tabs.Tab value="profile">Profile</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="home">Home content</Tabs.Panel>
+      <Tabs.Panel value="profile">Profile content</Tabs.Panel>
+    </Tabs>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+- **Compositional API Dropped:** Mantine uses `<Tabs.List>`, `<Tabs.Tab>`, and `<Tabs.Panel>` natively with implicit context from `<Tabs>`. MUI relies on `@mui/lab/TabContext` and separates `Tabs` and `TabPanel`.
+- **Monolithic API Adopted:** Following architectural review, we have opted to drop the broken dot-notation wrappers for `mui-adapter`. We now natively export `Tabs` (MUI List), `Tab` (MUI Item), and `TabPanel` (from `@mui/lab`). Developers must use `TabContext` (from `@mui/lab`) to manage state, just like native MUI. Storybook and visual regression tests have been updated to reflect this divergence while retaining core property mapping compatibility.

package/src/components/Text/USAGE.md

@@ -0,0 +1,40 @@
+# Text - Usage Guide
+
+This document describes how to integrate and use the `Text` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Text } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Text } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Text size="md" color="dimmed">
+      This is some styled body text.
+    </Text>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TextArea/USAGE.md

@@ -0,0 +1,38 @@
+# TextArea - Usage Guide
+
+This document describes how to integrate and use the `TextArea` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TextArea } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TextArea } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <TextArea label="Comments" placeholder="Leave your comments here..." />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TextField/USAGE.md

@@ -0,0 +1,38 @@
+# TextField - Usage Guide
+
+This document describes how to integrate and use the `TextField` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TextField } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TextField } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <TextField label="Username" placeholder="Enter your username" required />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/TimePicker/USAGE.md

@@ -0,0 +1,36 @@
+# TimePicker - Usage Guide
+
+This document describes how to integrate and use the `TimePicker` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { TimePicker } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { TimePicker } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <TimePicker label="Select Time" placeholder="Pick a time" />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Timeline/USAGE.md

@@ -0,0 +1,41 @@
+# Timeline - Usage Guide
+
+This document describes how to integrate and use the `Timeline` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Timeline } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Timeline } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Timeline active={1}>
+      <Timeline.Item title="Step 1">Created branch</Timeline.Item>
+      <Timeline.Item title="Step 2">Pushed changes</Timeline.Item>
+    </Timeline>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Title/USAGE.md

@@ -0,0 +1,36 @@
+# Title - Usage Guide
+
+This document describes how to integrate and use the `Title` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Title } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Title } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return <Title order={1}>This is a Heading 1</Title>;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.

package/src/components/Toast/USAGE.md

@@ -0,0 +1,42 @@
+# Toast - Usage Guide
+
+This document describes how to integrate and use the `Toast` component in your projects using `@recursica/mui-adapter`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Toast } from "@recursica/mui-adapter";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Toast } from "@recursica/mui-adapter";
+
+export default function Demo() {
+  return (
+    <Toast
+      title="Success"
+      message="Your action completed successfully"
+      state="success"
+    />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/mui-adapter` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **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**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.