@recursica/mantine-adapter 0.18.0 → 0.20.0

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

@@ -1,3 +1,40 @@
 import { default as React } from 'react';
-export type ModalProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Modal: React.FC<ModalProps>;
+import { Modal as MantineModal, ModalProps as MantineModalProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+/**
+ * Properties for the strictly-tokenized Modal component.
+ * Native Mantine abstract properties like `size`, `radius`, and `shadow` have been stripped out
+ * because they directly conflict with the non-negotiable pixel boundaries defined in the Recursica UI Kit.
+ */
+export type ModalProps = RecursicaOverStyled<Omit<MantineModalProps, "size" | "radius" | "shadow">>;
+/**
+ * The `Modal.Footer` provides a perfectly padded container for modal actions.
+ *
+ * **Recursica Abstract:**
+ * By default, this container aligns its children to the right (`justify-content: flex-end`)
+ * and applies the standard Figma button-gap spacing.
+ *
+ * > [!IMPORTANT]
+ * > **Button Hierarchy:** Recursica design language explicitly requires that the
+ * > primary action button MUST be the right-most element, with the secondary
+ * > (outline variant) action placed immediately to the left of it.
+ */
+declare const ModalFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ModalBody: React.ForwardRefExoticComponent<Omit<import('@mantine/core').ModalBodyProps & React.RefAttributes<HTMLDivElement> & {
+    component?: any;
+    renderRoot?: (props: Record<string, any>) => React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface ModalComponent extends React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> {
+    Root: typeof MantineModal.Root;
+    Overlay: typeof MantineModal.Overlay;
+    Content: typeof MantineModal.Content;
+    Header: typeof MantineModal.Header;
+    Title: typeof MantineModal.Title;
+    CloseButton: typeof MantineModal.CloseButton;
+    Body: typeof ModalBody;
+    Footer: typeof ModalFooter;
+}
+export declare const Modal: ModalComponent & {
+    Footer: typeof ModalFooter;
+};
+export {};

package/dist/src/components/Modal/index.d.ts

@@ -0,0 +1 @@
+export * from './Modal';

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

@@ -0,0 +1,55 @@
+import { PopoverProps as MantinePopoverProps, PopoverTargetProps as MantinePopoverTargetProps, PopoverDropdownProps as MantinePopoverDropdownProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+/**
+ * Recursica-specific props for Popover.
+ */
+export interface RecursicaPopoverProps {
+    /**
+     * Whether to display a beak (arrow) pointing from the dropdown to the target.
+     * This is the Recursica equivalent of Mantine's `withArrow`.
+     * When both `withBeak` and `withArrow` are provided, `withBeak` takes precedence.
+     */
+    withBeak?: boolean;
+}
+/**
+ * Recursica Popover component wrapping Mantine's composable Popover.
+ *
+ * Displays a dropdown panel when the user clicks or interacts with a target element.
+ * Uses the composable dot-notation pattern:
+ * ```tsx
+ * <Popover withBeak>
+ *   <Popover.Target>
+ *     <Button>Click me</Button>
+ *   </Popover.Target>
+ *   <Popover.Dropdown>
+ *     Content displayed in popover
+ *   </Popover.Dropdown>
+ * </Popover>
+ * ```
+ */
+export type PopoverProps = RecursicaOverStyled<MantinePopoverProps & RecursicaPopoverProps>;
+declare const PopoverBase: {
+    ({ overStyled, withBeak, ...rest }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Wrapper for the element that triggers the popover.
+ * Requires a single child element that supports ref forwarding.
+ */
+export type PopoverTargetProps = MantinePopoverTargetProps;
+declare const PopoverTarget: {
+    (props: PopoverTargetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/** The dropdown panel displayed from the popover. */
+export type PopoverDropdownProps = RecursicaOverStyled<MantinePopoverDropdownProps>;
+declare const PopoverDropdown: {
+    ({ overStyled, ...rest }: PopoverDropdownProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type PopoverComponent = typeof PopoverBase & {
+    Target: typeof PopoverTarget;
+    Dropdown: typeof PopoverDropdown;
+};
+export declare const Popover: PopoverComponent;
+export {};

package/dist/src/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './Popover';

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

@@ -15,4 +15,12 @@ export interface RecursicaStackProps {
  * width, height, padding, margins, and flexbox alignment props to construct structural layouts.
  */
 export type StackProps = MantineStackProps & RecursicaStackProps;
-export declare const Stack: import('react').ForwardRefExoticComponent<MantineStackProps & RecursicaStackProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Stack: (<C = "div">(props: import('@mantine/core').PolymorphicComponentProps<C, StackProps>) => React.ReactElement) & Omit<import('react').FunctionComponent<(MantineStackProps & RecursicaStackProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "className" | "classNames" | "style" | "styles" | "vars" | "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "bg" | "c" | "opacity" | "ff" | "fz" | "fw" | "lts" | "ta" | "lh" | "fs" | "tt" | "td" | "bd" | "w" | "miw" | "maw" | "h" | "mih" | "mah" | "m" | "my" | "mx" | "mt" | "mb" | "ml" | "mr" | "gap" | "top" | "left" | "bottom" | "right" | "key" | "defaultValue" | "onChange" | "slot" | "title" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "__vars" | "__size" | "hiddenFrom" | "visibleFrom" | "lightHidden" | "darkHidden" | "mod" | "ms" | "me" | "ps" | "pe" | "bdrs" | "bgsz" | "bgp" | "bgr" | "bga" | "pos" | "inset" | "display" | "flex" | "unstyled" | "variant" | "attributes" | "justify" | "component" | "align"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (MantineStackProps & RecursicaStackProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & Record<string, never>;

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

@@ -1,3 +1,15 @@
 import { default as React } from 'react';
-export type TimelineProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Timeline: React.FC<TimelineProps>;
+import { TimelineProps as MantineTimelineProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+import { TimelineItem } from './TimelineItem';
+/**
+ * Properties for the strictly-tokenized Timeline component.
+ * Native Mantine abstract properties like `color`, `radius`, `bulletSize`, and `lineWidth`
+ * have been stripped out to strictly enforce the structural mappings of the Recursica UI Kit.
+ */
+export type TimelineProps = RecursicaOverStyled<Omit<MantineTimelineProps, "color" | "radius" | "bulletSize" | "lineWidth">>;
+interface TimelineComponent extends React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLDivElement>> {
+    Item: typeof TimelineItem;
+}
+export declare const Timeline: TimelineComponent;
+export {};

package/dist/src/components/Timeline/TimelineItem.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { TimelineItemProps as MantineTimelineItemProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface RecursicaTimelineItemProps {
+    /**
+     * Timestamp text displayed below the description.
+     */
+    timestamp?: React.ReactNode;
+    /**
+     * The structural styling variant of the bullet container.
+     * Maps to the UI Kit structural tokens.
+     * @default "default"
+     */
+    bulletVariant?: "default" | "avatar" | "icon" | "icon-alternative";
+}
+export type TimelineItemProps = RecursicaOverStyled<Omit<MantineTimelineItemProps, "radius" | "color" | "lineVariant"> & RecursicaTimelineItemProps>;
+/**
+ * The individual item component for the Timeline.
+ *
+ * **Recursica Abstract:**
+ * The `Timeline.Item` has been extended to support a `timestamp` string natively,
+ * rendering it below the body content. It also accepts a `bulletVariant` to morph
+ * the structural dimensions of the node circle automatically.
+ */
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,3 +1,22 @@
 import { default as React } from 'react';
-export type ToastProps = React.HTMLAttributes<HTMLDivElement>;
-export declare const Toast: React.FC<ToastProps>;
+import { NotificationProps as MantineNotificationProps } from '@mantine/core';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface RecursicaToastProps {
+    /**
+     * The visual variant of the toast.
+     * @default "default"
+     */
+    variant?: "default";
+    /**
+     * Loading state is natively unsupported by Recursica UI Kit.
+     * If a loading state is required, pass a `<Loader size="sm" />` directly into the `icon` prop.
+     */
+    loading?: false;
+}
+/**
+ * Toast component wrapping Mantine's Notification.
+ *
+ * Can be used as a standalone visual component to display a notification or message.
+ */
+export type ToastProps = RecursicaOverStyled<Omit<MantineNotificationProps, "color" | "radius" | "variant" | "loading"> & RecursicaToastProps>;
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Toast/index.d.ts

@@ -0,0 +1 @@
+export * from './Toast';

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

@@ -24,6 +24,7 @@ export * from './Modal/Modal';
 export * from './NumberInput/NumberInput';
 export * from './Pagination/Pagination';
 export * from './Panel/Panel';
+export * from './Popover';
 export * from './Radio/Radio';
 export * from './Radio/RadioGroup';
 export * from './ReadOnlyField';
@@ -41,6 +42,6 @@ export * from './TextField/TextField';
 export * from './TimePicker/TimePicker';
 export * from './Timeline/Timeline';
 export * from './Title/Title';
-export * from './Toast/Toast';
+export * from './Toast';
 export * from './Tooltip/Tooltip';
 export * from './TransferList/TransferList';

package/dist/src/utils/filterStylingProps.d.ts

@@ -25,6 +25,7 @@ export declare const BLOCKED_STYLING_KEYS: readonly ["className", "classNames",
 export type BlockedStylingKeys = (typeof BLOCKED_STYLING_KEYS)[number];
 export type RecursicaSpacing = "rec-none" | "rec-sm" | "rec-default" | "rec-md" | "rec-lg" | "rec-xl" | "rec-2xl";
 export type RecursicaSize = "small" | "default" | "large";
+export declare const SPACING_MAP: Record<string, string>;
 export type ForbiddenStyles = {
     [K in BlockedStylingKeys]?: never;
 };
@@ -33,4 +34,5 @@ export type RecursicaOverStyled<T> = (Omit<T, BlockedStylingKeys> & ForbiddenSty
 }) | (T & {
     overStyled: true;
 });
+export declare function mapLayoutProps<T extends Record<string, unknown>>(props: T): T;
 export declare function filterStylingProps<T extends Record<string, unknown>>(props: T, overStyled?: boolean): Partial<T>;

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.18.0",
+  "version": "0.20.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/Introduction.stories.tsx

@@ -1,75 +1,49 @@
 import type { Meta } from "@storybook/react-vite";
 import { AdaptersContent, MantineLogo } from "@recursica/storybook-template";
-import { Button } from "./components/Button/Button";
 import { VersionInfo } from "./Version";
 import { OverStylingInfo } from "./OverStyling";
+import {
+  Container,
+  Stack,
+  Group,
+  Title,
+  Text,
+  Link,
+  Button,
+} from "./components";
 
 const DOCS_URL = "https://recursica.com";
 const FORGE_URL = "https://forge.recursica.com";
 
-const sectionStyle: React.CSSProperties = {
-  marginBottom: 32,
-};
-
-const headingStyle: React.CSSProperties = {
-  fontSize: 14,
-  fontWeight: 600,
-  color: "#333",
-  marginBottom: 8,
-  marginTop: 0,
-};
-
-const bodyStyle: React.CSSProperties = {
-  fontSize: 14,
-  lineHeight: 1.6,
-  color: "#444",
-  margin: 0,
-};
-
-const linkStyle: React.CSSProperties = {
-  color: "#0066cc",
-  textDecoration: "none",
-};
-
 function IntroductionContent() {
   return (
-    <div style={{ padding: 24, maxWidth: 640 }}>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "16px",
-          marginBottom: "16px",
-        }}
-      >
-        <MantineLogo width={40} height={40} />
-        <div>
-          <h1 style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>
+    <Container size="md" style={{ padding: "32px 0", maxWidth: 640 }}>
+      <Group gap="rec-md" mb="rec-xl" align="flex-start" wrap="nowrap">
+        <MantineLogo width={80} height={80} />
+        <Stack gap={0}>
+          <Title order={1} m={0}>
             Recursica Design System (Mantine Adapter)
-          </h1>
-          <a
-            href="https://mantine.dev"
-            target="_blank"
-            rel="noreferrer"
-            style={linkStyle}
-          >
+          </Title>
+          <Link href="https://mantine.dev" target="_blank" rel="noreferrer">
             mantine.dev
-          </a>
-        </div>
-      </div>
-      <p style={{ ...bodyStyle, marginBottom: 24 }}>
+          </Link>
+        </Stack>
+      </Group>
+      <Text mb="rec-xl">
         This Storybook showcases the Recursica design system implemented for the{" "}
         <strong>Mantine UI Kit</strong>. It provides reusable components that
         map our design tokens to Mantine's robust component layer.
-      </p>
+      </Text>
 
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Looking for another UI Kit?</h2>
-        <p style={bodyStyle}>
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Looking for another UI Kit?
+        </Title>
+        <Text mb="rec-md">
           Are you using a different UI Kit (like Material UI)? Recursica
           provides multiple adapters for different frameworks.
-        </p>
-        <div style={{ marginTop: "16px" }}>
+        </Text>
+        <Group mt="rec-md">
           <Button
             component="a"
             href="./?path=/story/introduction--adapters"
@@ -78,15 +52,17 @@ function IntroductionContent() {
           >
             View Supported Adapters
           </Button>
-        </div>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Installation</h2>
-        <p style={bodyStyle}>
+        </Group>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Installation
+        </Title>
+        <Text mb="rec-md">
           To install the Mantine adapter in your project, run:
-        </p>
-        <pre
+        </Text>
+        <Stack
           style={{
             padding: 12,
             backgroundColor: "#f5f5f5",
@@ -98,60 +74,58 @@ function IntroductionContent() {
           <code>
             npm install @recursica/mantine-adapter @mantine/core @mantine/hooks
           </code>
-        </pre>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Tokens</h2>
-        <p style={bodyStyle}>
+        </Stack>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Tokens
+        </Title>
+        <Text mb="rec-md">
           Raw design tokens (colors, sizes, font weights, opacities, etc.) that
           feed the theme and components. These are the primitive values defined
           in your token set and exposed as CSS custom properties.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Theme</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Theme
+        </Title>
+        <Text mb="rec-md">
           Brand and theme layer built on top of tokens. Typography types,
           dimensions, and layout grids are defined here. Theme uses the tokens
           and exposes both CSS variables and helper classes (e.g. typography
           classes) for consistent styling across the product.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Configuring Recursica</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Configuring Recursica
+        </Title>
+        <Text mb="rec-md">
           To modify the Recursica configuration (tokens, brand, theme), go to{" "}
-          <a
-            href={FORGE_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={linkStyle}
-          >
+          <Link href={FORGE_URL} target="_blank" rel="noopener noreferrer">
             {FORGE_URL}
-          </a>
+          </Link>
           . Changes there drive the tokens and theme you see in this Storybook.
-        </p>
-      </section>
-
-      <section style={sectionStyle}>
-        <h2 style={headingStyle}>Documentation</h2>
-        <p style={bodyStyle}>
+        </Text>
+      </Stack>
+
+      <Stack mb="rec-xl">
+        <Title order={2} mb="rec-md">
+          Documentation
+        </Title>
+        <Text mb="rec-md">
           For full documentation, guides, and API reference, visit{" "}
-          <a
-            href={DOCS_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            style={linkStyle}
-          >
+          <Link href={DOCS_URL} target="_blank" rel="noopener noreferrer">
             {DOCS_URL}
-          </a>
+          </Link>
           .
-        </p>
-      </section>
-    </div>
+        </Text>
+      </Stack>
+    </Container>
   );
 }