@recursica/mantine-adapter 0.35.1 → 0.36.1

package/dist/src/components/Tree/Tree.d.ts

@@ -1,9 +1,13 @@
 import { default as React } from 'react';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
-export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
-    overStyled?: boolean;
-}
+import { RecursicaTreeProps } from '@recursica/adapter-common';
+export type TreeProps = RecursicaOverStyled<RecursicaTreeProps & Omit<React.ComponentPropsWithoutRef<"ul">, "children">>;
 /**
- * Placeholder component for Tree (Coming Soon).
+ * Recursively renders hierarchical `data` as an expandable/selectable tree.
+ *
+ * **Recursica Abstract:**
+ * Wraps Mantine's `Tree` with a fully custom node renderer so every visual aspect (row box
+ * model, selected/unselected colors and typography, indent, item spacing) comes from
+ * Recursica's `tree` design tokens rather than Mantine's defaults.
  */
-export declare const Tree: React.ForwardRefExoticComponent<RecursicaOverStyled<TreeProps> & React.RefAttributes<HTMLDivElement>>;
+export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLUListElement>>;

package/docs/PHILOSOPHY.md

@@ -0,0 +1,39 @@
+# Recursica Mantine Adapter: Core Philosophy
+
+Recursica's component architecture isn't just a wrapper; it's a strict enforcing layer over Mantine's massive API surface. Our primary goal is to ensure consistency, eliminate "design system rot," and provide clear boundaries for application developers using the UI Kit.
+
+This document serves as the governing framework for why the `mantine-adapter` components are built the way they are.
+
+## 1. Strict Separation of Props (The Unified Recursica Prop Layer)
+
+Recursica has a **single universal API surface** internally regardless of whether we use Mantine or another underlying UI library.
+
+- We decouple our visual properties natively. Instead of mapping perfectly to Mantine's variants `(solid, outline)`, we intentionally use Recursica's semantic and behavioral structures (e.g., `<Badge variant="alert" />`).
+- We intentionally omit and strip complex underlying parameters if they collide with or circumvent our UI tokens (like stripping `--size` out of Mantine Badge when Recursica enforces a universal single size).
+
+## 2. Component Wrappers (Leaving Mantine Alone)
+
+We actively avoid mutating or patching Mantine source code or deeply hooking into the Mantine Theme object to apply our token system.
+
+- We rely on standard DOM `module.css` bridging with strictly targeted `className`/`classNames` overrides.
+- This creates total decoupled isolation: updating Mantine natively will not fracture our styles, and we avoid dealing with deep Emotion/styled-component theme clashing logic.
+
+## 3. The `overStyled` Property
+
+Mantine encourages deep styling access by injecting properties like `p` (padding), `bg` (background), `c` (color), or `styles`/`classNames` directly into component tags.
+
+- By default, **Recursica components block all arbitrary styling vectors**. `className` maps, system styles, and inline logic are proactively stripped before they hit Mantine using central utility functions.
+- **Why?** To prevent the design system from deteriorating over time as developers write one-off hotfixes into their TSX rendering blocks.
+- **The Caveat:** We allow _external DOM layout positioning props_ (e.g., margin `m`, `mt`, `mb`, etc.) to pass through so developers can still structure components organically within their parent layouts.
+
+### Escape Hatches
+
+If a developer _strictly must_ heavily alter a component, they are required to explicitly declare `<Component overStyled={true} />`. This immediately raises a visible red flag during code reviews.
+
+## 4. Expectations for External Developers (Modifying Recursica)
+
+If a developer finds that a component does not fit their needs and styling must be modified, their path of execution should follow these principles sequentially:
+
+1. **Leverage Native Mantine First:** If a Recursica component lacks the functionality or styling variant needed for a highly custom edge case (e.g., a massive marketing hero button), do not try to forcibly hack the Recursica component. Instead, import the raw underlying `Button` component directly from `@mantine/core` and style it manually. Use Recursica for standard systematic needs, and native libraries for isolated custom one-offs.
+2. **Accept `overStyled` as Technical Debt:** If you must override the Recursica component immediately but intend to roll it back, use `overStyled={true}`. The expectation is that `overStyled` uses will eventually be replaced once the actual Recursica Figma variants are natively updated to accommodate your usecase, at which point `overStyled={true}` can be safely removed.
+3. **Contribute to the Kit:** Avoid building private custom wrappers around Recursica components. If the system is missing a variant, that is a shared project deficit—raise a concern and have the variant integrated directly into the universal token libraries!

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.35.1",
+  "version": "0.36.1",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",
@@ -35,7 +35,8 @@
     "USAGE.md",
     "ARCHITECTURE.md",
     "SETUP.md",
-    "OVERSTYLING.md"
+    "OVERSTYLING.md",
+    "docs/PHILOSOPHY.md"
   ],
   "keywords": [
     "react",

package/src/components/Accordion/Accordion.module.css

@@ -1,3 +1,11 @@
+/* EXEMPTIONS:
+   - accordion-header open-appearance background-color/border-color are ignored because Forge does
+     not apply a visual swap on expand, even though the token schema defines "open" appearance
+     colors distinct from "closed" (see .control below, which intentionally keeps a constant
+     background/border across collapsed/expanded). */
+/* recursica-ignore: --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_background-color */
+/* recursica-ignore: --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_border-color */
+
 /* ==== ACCORDION CONTAINER ==== */
 .root {
   box-sizing: border-box;
@@ -16,7 +24,7 @@
     --recursica_ui-kit_components_accordion_properties_colors_border-color
   );
   background-color: var(
-    --recursica_ui-kit_components_accordion_properties_colors_background
+    --recursica_ui-kit_components_accordion_properties_colors_background-color
   );
   box-shadow: var(--recursica_ui-kit_components_accordion_properties_elevation);
 
@@ -31,7 +39,8 @@
 /* ==== ACCORDION ITEM ==== */
 .item {
   box-sizing: border-box;
-  margin: 0;
+  margin: var(--recursica_ui-kit_components_accordion-item_properties_margin);
+  padding: var(--recursica_ui-kit_components_accordion-item_properties_padding);
   position: relative;
   transition: all 0.2s ease;
 
@@ -40,13 +49,13 @@
 
   border-style: solid;
   border-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_item-border-color
+    --recursica_ui-kit_components_accordion-item_properties_colors_border-color
   );
   border-width: var(
-    --recursica_ui-kit_components_accordion-item_properties_item-border-size
+    --recursica_ui-kit_components_accordion-item_properties_border-size
   );
   border-bottom-color: var(
-    --recursica_ui-kit_components_accordion_properties_colors_divider
+    --recursica_ui-kit_components_accordion_properties_colors_divider-color
   );
   border-bottom-width: var(
     --recursica_ui-kit_components_accordion_properties_divider-size
@@ -55,18 +64,11 @@
     --recursica_ui-kit_components_accordion-item_properties_border-radius
   );
   box-shadow: var(
-    --recursica_ui-kit_components_accordion-item_properties_elevation-item
-  );
-
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_background-collapsed
-  );
-}
-.item[data-active] {
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_background-expanded
+    --recursica_ui-kit_components_accordion-item_properties_elevation
   );
 }
+/* The collapsed/expanded background now lives on accordion-header (open/closed appearance),
+   applied via .control below, rather than on the item wrapper itself. */
 .noDivider {
   border-bottom: none !important;
   border-bottom-width: 0 !important;
@@ -81,56 +83,86 @@
   justify-content: space-between;
 
   /* Re-apply gap defined by UI Kit for icons vs text */
-  gap: var(--recursica_ui-kit_components_accordion-item_properties_icon-gap);
+  gap: var(--recursica_ui-kit_components_accordion-header_properties_icon-gap);
 
   /* Strip Mantine's baked padding directly */
   padding: var(
-      --recursica_ui-kit_components_accordion-item_properties_header-vertical-padding
+      --recursica_ui-kit_components_accordion-header_properties_vertical-padding
     )
     var(
-      --recursica_ui-kit_components_accordion-item_properties_header-horizontal-padding
+      --recursica_ui-kit_components_accordion-header_properties_horizontal-padding
     );
-  background-color: transparent;
+
+  /* Background is intentionally constant across collapsed/expanded (Forge doesn't apply a
+     background swap on expand, even though the token schema defines an "open" appearance color) */
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
+  );
+
+  /* Header's own border box, constant across collapsed/expanded (only its closed-state
+     border-color is used, matching the background decision above) */
+  border-style: solid;
+  border-width: var(
+    --recursica_ui-kit_components_accordion-header_properties_border-size
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_accordion-header_properties_border-radius
+  );
+  border-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_border-color
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_accordion-header_properties_elevation
+  );
 
   transition: background-color 0.15s ease;
   position: relative;
   z-index: 1;
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_text
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_text-color
   );
 
   /* Header Typography */
   font-family: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-family
+    --recursica_ui-kit_components_accordion-header_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-size
+    --recursica_ui-kit_components_accordion-header_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-weight
+    --recursica_ui-kit_components_accordion-header_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_font-style
+    --recursica_ui-kit_components_accordion-header_properties_text_font-style
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_letter-spacing
+    --recursica_ui-kit_components_accordion-header_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_line-height
+    --recursica_ui-kit_components_accordion-header_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_text-decoration
+    --recursica_ui-kit_components_accordion-header_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_accordion-item_properties_header-text_text-transform
+    --recursica_ui-kit_components_accordion-header_properties_text_text-transform
+  );
+}
+
+.item[data-active] .control {
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_text-color
   );
 }
 
-/* Mantine natively places hover states on the control node. 
-   We explicitly override it with our layer hover tokens via an overlay ::after structure
-   so we can cleanly utilize the hover-opacity token! */
+/* Mantine natively places hover states on the control node. We explicitly re-apply our own
+   constant background (Mantine's native :hover CSS would otherwise show through) and use an
+   overlay ::after structure with the generic hover tokens for the actual hover tint; no per-item
+   hover-color/hover-opacity tokens exist anymore. */
 .control:hover {
-  background-color: transparent;
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
+  );
 }
 .control::after {
   content: "";
@@ -139,37 +171,58 @@
   border-radius: inherit;
   z-index: -1;
   pointer-events: none;
-  background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_hover-color
-  );
+  background-color: var(--recursica_brand_states_hover_color);
   opacity: 0;
   transition: opacity 150ms ease;
 }
 .control:hover:not(:disabled)::after {
-  opacity: var(
-    --recursica_ui-kit_components_accordion-item_properties_hover-opacity
-  );
+  opacity: var(--recursica_brand_states_hover_opacity);
+}
+
+/* Recursica focus ring instead of Mantine's default `.mantine-focus-auto:focus-visible` outline
+   (same class+pseudo-class specificity, so !important guarantees ours wins regardless of CSS
+   import order). */
+.control:focus-visible {
+  outline: none !important;
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color) !important;
 }
 
 /* Label logic inside the Control wrapper */
 .label {
   flex: 1;
+  min-width: 0; /* HARDCODE: required for text-overflow ellipsis to take effect on a flex child */
   text-align: left;
   color: inherit;
   padding: 0; /* Clear Mantine inner padding */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ==== ICON SLOT (Mantine's leading-icon wrapper) ==== */
+.icon {
+  /* HARDCODE: Mantine applies its own margin-inline-start/end around this slot; our own
+     icon-gap token (applied as flex `gap` on .control) already provides the spacing. */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 
 /* ==== CHEVRON / RIGHT ICON ==== */
 .chevron {
   flex-shrink: 0;
   width: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-right-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-right-size
   );
   height: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-right-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-right-size
   );
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_icon
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_icon-color
   );
   margin: 0;
   transition: transform 200ms ease;
@@ -184,6 +237,9 @@
 }
 .item[data-active] .chevron {
   transform: rotate(180deg);
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_icon-color
+  );
 }
 
 /* ==== LEFT ICON / CUSTOM ICONS ==== */
@@ -193,13 +249,18 @@
   align-items: center;
   justify-content: center;
   width: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-left-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-left-size
   );
   height: var(
-    --recursica_ui-kit_components_accordion-item_properties_icon-left-size
+    --recursica_ui-kit_components_accordion-header_properties_icon-left-size
+  );
+  color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_icon-color
   );
+}
+.item[data-active] .iconLeftWrapper {
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_icon
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_icon-color
   );
 }
 .iconLeftWrapper > * {
@@ -212,24 +273,24 @@
 .panel {
   box-sizing: border-box;
   margin: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-margin
+    --recursica_ui-kit_components_accordion-content_properties_margin
   );
   padding: 0; /* Overriding dynamic layout structure */
   background-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-background
+    --recursica_ui-kit_components_accordion-content_properties_colors_background-color
   );
   border-style: solid;
   border-color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-border-color
+    --recursica_ui-kit_components_accordion-content_properties_colors_border-color
   );
   border-width: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-border-size
+    --recursica_ui-kit_components_accordion-content_properties_border-size
   );
   border-radius: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-border-radius
+    --recursica_ui-kit_components_accordion-content_properties_border-radius
   );
   box-shadow: var(
-    --recursica_ui-kit_components_accordion-item_properties_elevation-content
+    --recursica_ui-kit_components_accordion-content_properties_elevation
   );
 }
 
@@ -238,44 +299,44 @@
   /* Strip Mantine padding and apply logic directly mapped */
   padding: 0
     var(
-      --recursica_ui-kit_components_accordion-item_properties_content-horizontal-padding
+      --recursica_ui-kit_components_accordion-content_properties_horizontal-padding
     )
     var(
-      --recursica_ui-kit_components_accordion-item_properties_content-bottom-padding
+      --recursica_ui-kit_components_accordion-content_properties_bottom-padding
     );
 
   /* Apply offset gap explicitly calculated below header */
   padding-top: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-top-padding
+    --recursica_ui-kit_components_accordion-content_properties_top-padding
   );
 
   color: var(
-    --recursica_ui-kit_components_accordion-item_properties_colors_content-text
+    --recursica_ui-kit_components_accordion-content_properties_colors_text-color
   );
 
   /* Content Typography */
   font-family: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-family
+    --recursica_ui-kit_components_accordion-content_properties_text_font-family
   );
   font-size: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-size
+    --recursica_ui-kit_components_accordion-content_properties_text_font-size
   );
   font-weight: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-weight
+    --recursica_ui-kit_components_accordion-content_properties_text_font-weight
   );
   font-style: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_font-style
+    --recursica_ui-kit_components_accordion-content_properties_text_font-style
   );
   letter-spacing: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_letter-spacing
+    --recursica_ui-kit_components_accordion-content_properties_text_letter-spacing
   );
   line-height: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_line-height
+    --recursica_ui-kit_components_accordion-content_properties_text_line-height
   );
   text-decoration: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_text-decoration
+    --recursica_ui-kit_components_accordion-content_properties_text_text-decoration
   );
   text-transform: var(
-    --recursica_ui-kit_components_accordion-item_properties_content-text_text-transform
+    --recursica_ui-kit_components_accordion-content_properties_text_text-transform
   );
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -65,31 +65,29 @@ export default meta;
 export const Default: StoryObj<typeof Accordion> = {
   render: () => {
     return (
-      <Layer layer={0} style={{ padding: "24px" }}>
-        <Accordion defaultValue="item-1" chevron={<ChevronIcon />}>
-          <Accordion.Item value="item-1">
-            <Accordion.Control>Billing and Membership</Accordion.Control>
-            <Accordion.Panel>
-              You can manage your billing directly from the dashboard tab. All
-              payments are processed automatically.
-            </Accordion.Panel>
-          </Accordion.Item>
+      <Accordion defaultValue="item-1" chevron={<ChevronIcon />}>
+        <Accordion.Item value="item-1">
+          <Accordion.Control>Billing and Membership</Accordion.Control>
+          <Accordion.Panel>
+            You can manage your billing directly from the dashboard tab. All
+            payments are processed automatically.
+          </Accordion.Panel>
+        </Accordion.Item>
 
-          <Accordion.Item value="item-2">
-            <Accordion.Control>Refund Policy</Accordion.Control>
-            <Accordion.Panel>
-              We offer a 30-day money-back guarantee for all new subscriptions.
-            </Accordion.Panel>
-          </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Control>Refund Policy</Accordion.Control>
+          <Accordion.Panel>
+            We offer a 30-day money-back guarantee for all new subscriptions.
+          </Accordion.Panel>
+        </Accordion.Item>
 
-          <Accordion.Item value="item-3">
-            <Accordion.Control>Technical Support</Accordion.Control>
-            <Accordion.Panel>
-              Our support team is available 24/7 via live chat or email.
-            </Accordion.Panel>
-          </Accordion.Item>
-        </Accordion>
-      </Layer>
+        <Accordion.Item value="item-3">
+          <Accordion.Control>Technical Support</Accordion.Control>
+          <Accordion.Panel>
+            Our support team is available 24/7 via live chat or email.
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
     );
   },
 };
@@ -97,32 +95,66 @@ export const Default: StoryObj<typeof Accordion> = {
 export const WithIcons: StoryObj<typeof Accordion> = {
   render: () => {
     return (
-      <Layer layer={0} style={{ padding: "24px" }}>
-        <Accordion defaultValue="security" chevron={<ChevronIcon />}>
-          <Accordion.Item value="security">
+      <Accordion defaultValue="security" chevron={<ChevronIcon />}>
+        <Accordion.Item value="security">
+          <Accordion.Control leftIcon={<SVGIcon />}>
+            Security Settings
+          </Accordion.Control>
+          <Accordion.Panel>
+            Enable two-factor authentication (2FA) and monitor active sessions
+            below.
+          </Accordion.Panel>
+        </Accordion.Item>
+
+        <Accordion.Item value="privacy">
+          <Accordion.Control leftIcon={<SVGIcon />}>
+            Privacy Configuration
+          </Accordion.Control>
+          <Accordion.Panel>
+            Choose what data is shared with our analytics partners.
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    );
+  },
+};
+
+export const LongTitleTruncation: StoryObj<typeof Accordion> = {
+  render: () => {
+    return (
+      // `style` is stripped from Accordion itself (only passes through with overStyled);
+      // constrain width on a plain wrapper div instead to force truncation.
+      <div style={{ maxWidth: 320 }}>
+        <Accordion defaultValue="long-title" chevron={<ChevronIcon />}>
+          <Accordion.Item value="long-title">
             <Accordion.Control leftIcon={<SVGIcon />}>
-              Security Settings
+              This is a deliberately very long accordion item title used to
+              verify that overflowing text truncates with a CSS ellipsis instead
+              of wrapping or overflowing the header
             </Accordion.Control>
             <Accordion.Panel>
-              Enable two-factor authentication (2FA) and monitor active sessions
-              below.
+              The header label above should truncate to a single line with a
+              trailing ellipsis (…) rather than wrapping onto multiple lines or
+              pushing the chevron out of view.
             </Accordion.Panel>
           </Accordion.Item>
 
-          <Accordion.Item value="privacy">
+          <Accordion.Item value="short-title">
             <Accordion.Control leftIcon={<SVGIcon />}>
-              Privacy Configuration
+              Short Title
             </Accordion.Control>
             <Accordion.Panel>
-              Choose what data is shared with our analytics partners.
+              A short title in the same accordion for visual comparison.
             </Accordion.Panel>
           </Accordion.Item>
         </Accordion>
-      </Layer>
+      </div>
     );
   },
 };
 
+/** Demonstrates the component nested inside a non-default layer — the one case where an
+ * explicit `<Layer>` wrap belongs in a story (see COMPONENT_STORYBOOK_GUIDE.md §9). */
 export const LayerOne: StoryObj<typeof Accordion> = {
   render: () => {
     return (

package/src/components/Accordion/Accordion.tsx

@@ -41,6 +41,7 @@ const AccordionBase = function Accordion({
     control: styles.control,
     label: styles.label,
     chevron: styles.chevron,
+    icon: styles.icon,
     panel: styles.panel,
     content: styles.content,
   };