@recursica/adapter-mantine-v8 1.0.0

package/src/components/Timeline/USAGE.md

@@ -0,0 +1,49 @@
+# Timeline - Usage Guide
+
+This document describes how to integrate and use the `Timeline` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Timeline } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Timeline } from "@recursica/adapter-mantine-v8";
+
+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/adapter-mantine-v8` 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
+
+`Timeline.Item` accepts a `timestamp` prop that renders below the item's content, and a `bulletVariant` prop (`"default" | "avatar" | "icon" | "icon-alternative"`) to control the bullet's appearance. The `lineWidth` and `bulletSize` props are not configurable, since geometry is controlled by the design system tokens.
+
+A known limitation: when using `bulletVariant="avatar"`, the avatar bullet always renders at the default bullet size rather than a custom size.

package/src/components/Toast/TOAST_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,39 @@
+# Toast – Implementation Notes
+
+Decisions and design tweaks tailored for the UI Kit's Toast wrapped against `@mantine/core`'s `Notification` component.
+
+---
+
+## 1. Standalone Visual Wrapper
+
+**Decision:** We wrap `@mantine/core`'s standalone `Notification` component instead of wrapping the `@mantine/notifications` provider.
+
+**Implementation:** The UI Kit provides variables for the `Toast` component itself (e.g., `--recursica_ui-kit_components_toast_*`). We use these variables to style the standard Mantine `Notification` element. This allows developers to use `<Toast>` manually if they want a static or inline message.
+
+If dynamic popups are required, developers can configure `@mantine/notifications` to utilize this component or use its classes.
+
+---
+
+## 2. Variant Mapping via `data-variant`
+
+**Decision:** `variant` props (`"default" | "error" | "success"`) are mapped directly to `data-variant` on the Mantine root `Box`.
+
+**Implementation:** Mantine's `Notification` doesn't inherently support our custom variants out of the box in the way we want them styled. By passing `data-variant` directly to the `Box`, we can explicitly target the root element in our `Toast.module.css` (e.g., `.root[data-variant="success"]`) and pipe in the corresponding UI Kit layer colors.
+
+---
+
+## 3. Minimal CSS Override Philosophy
+
+**Decision:** The CSS module only overrides visual design tokens (colors, typography, padding, borders, shadows).
+
+**Implementation:** We defer layout structure, icon rendering, loader transitions, and close button mechanics to Mantine. The `border-style: none;` is hardcoded to reset any underlying styles from Mantine's defaults, ensuring a clean mapping of elevation and shadows.
+
+---
+
+## 4. Unsupported `loading` State
+
+**Decision:** The native `loading` state is explicitly stripped and bypassed from the `<Toast />` component wrapper.
+
+**Implementation:** Mantine's `Notification` inherently supports a `loading={true}` state that natively spins up a loader instead of an icon. However, Recursica's UI Kit strictly does not define structural tokens for loader states inside toasts.
+Instead of attempting to tightly couple the internal `Loader` abstraction or mapping variables incorrectly, the `loading` property is explicitly omitted and `false`-enforced from the public API.
+If consumers explicitly require a loading toast, they must manually inject a `<Loader />` component into the `icon` slot.

package/src/components/Toast/Toast.module.css

@@ -0,0 +1,184 @@
+/* HARDCODED VALUES:
+   - border-style: solid. Baseline so the per-variant border-color tokens actually render.
+ */
+
+/* EXEMPTIONS:
+   - elevation_layer-1/2/3 are ignored: a toast's elevation doesn't depend on the layer it's
+     summoned from — all four layer variants resolve to the same brand elevation value, so
+     layer-0 (already wired below) is the correct, layer-agnostic choice for all of them. */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-1 */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-2 */
+/* recursica-ignore: --recursica_ui-kit_components_toast_properties_elevation_layer-3 */
+
+/* ======================================
+   TOAST / NOTIFICATION ROOT
+   ====================================== */
+
+.root {
+  border-radius: var(
+    --recursica_ui-kit_components_toast_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_toast_properties_border-size);
+  border-style: solid;
+  border-color: var(
+    --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_border-color
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_toast_properties_elevation_layer-0
+  );
+  padding: var(--recursica_ui-kit_components_toast_properties_vertical-padding)
+    var(--recursica_ui-kit_components_toast_properties_horizontal-padding);
+  min-width: var(--recursica_ui-kit_components_toast_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_toast_properties_max-width);
+  min-height: var(--recursica_ui-kit_components_toast_properties_min-height);
+
+  /* Default Variant (Base) */
+  background-color: var(
+    --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_background-color
+  );
+  gap: var(--recursica_ui-kit_components_toast_properties_spacing);
+
+  /* Hide Mantine's native colored vertical line */
+  &::before {
+    display: none;
+    content: none;
+  }
+
+  & .icon {
+    width: var(--recursica_ui-kit_components_toast_properties_icon) !important;
+    height: var(--recursica_ui-kit_components_toast_properties_icon) !important;
+    margin-right: 0 !important; /* Override Mantine's native spacing in favor of flex gap */
+    background-color: transparent !important; /* Remove Mantine's native circle background */
+
+    color: var(
+      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text-color
+    );
+  }
+
+  & .loader {
+    margin-right: 0 !important; /* Override native spacing */
+  }
+  & .title,
+  & .description {
+    color: var(
+      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_text-color
+    );
+  }
+  & .closeButton {
+    color: var(
+      --recursica_ui-kit_components_toast_variants_styles_default_properties_colors_button
+    );
+  }
+
+  /* Error Variant styling */
+  &[data-variant="error"] {
+    background-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_background-color
+    );
+    border-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_border-color
+    );
+
+    & .icon {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text-color
+      ) !important;
+    }
+    & .title,
+    & .description {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_text-color
+      );
+    }
+    & .closeButton {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_error_properties_colors_button
+      );
+    }
+  }
+
+  /* Success Variant styling */
+  &[data-variant="success"] {
+    background-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_background-color
+    );
+    border-color: var(
+      --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_border-color
+    );
+
+    & .icon {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text-color
+      ) !important;
+    }
+    & .title,
+    & .description {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_text-color
+      );
+    }
+    & .closeButton {
+      color: var(
+        --recursica_ui-kit_components_toast_variants_styles_success_properties_colors_button
+      );
+    }
+  }
+}
+
+/* ======================================
+   TOAST BODY
+   ====================================== */
+
+.body {
+  /* No extra gap here, root handles icon-to-text, body can handle title-to-description if needed */
+}
+
+.title {
+  font-family: var(
+    --recursica_ui-kit_components_toast_properties_text_font-family
+  );
+  font-size: var(--recursica_ui-kit_components_toast_properties_text_font-size);
+  font-style: var(
+    --recursica_ui-kit_components_toast_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_toast_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_toast_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_toast_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_toast_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_toast_properties_text_text-transform
+  );
+}
+
+.description {
+  font-family: var(
+    --recursica_ui-kit_components_toast_properties_text_font-family
+  );
+  font-size: var(--recursica_ui-kit_components_toast_properties_text_font-size);
+  font-style: var(
+    --recursica_ui-kit_components_toast_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_toast_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_toast_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_toast_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_toast_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_toast_properties_text_text-transform
+  );
+}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "./Toast";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToastStoryArgs = Record<string, any>;
+
+const meta = {
+  title: "UI-Kit/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The `Toast` component is a standalone visual component wrapping Mantine's `Notification`. Note that this component is visually decoupled from `@mantine/notifications` and is meant to be used when you need to render a static or manually-controlled notification panel. If you need dynamic notification popups, you should use `@mantine/notifications` and configure its provider to use our styles.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "Title displayed above the message body",
+    },
+    children: {
+      control: "text",
+      description: "Main notification message",
+    },
+    withCloseButton: {
+      control: "boolean",
+      description: "Whether the close button is visible",
+    },
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+    title: "Update Available",
+    children:
+      "A new version of the application is available to download. Please restart your browser to apply the latest security patches and feature updates. If you ignore this message, the update will automatically install during your next session.",
+    withCloseButton: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: ToastStoryArgs) => {
+    return <Toast {...args} />;
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    variant: "default",
+    title: "Action Required",
+    children:
+      "You must complete your profile setup before accessing this feature.",
+    icon: "⚠️",
+  },
+  parameters: {
+    controls: { disable: true },
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: ToastStoryArgs) => {
+    return <Toast {...args} />;
+  },
+};

package/src/components/Toast/Toast.test.tsx

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

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import {
+  Notification as MantineNotification,
+  type NotificationProps as MantineNotificationProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Toast.module.css";
+
+import { type RecursicaToastProps } from "@recursica/adapter-common";
+
+/**
+ * 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 const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  function Toast(
+    {
+      overStyled = false,
+      variant = "default",
+      withCloseButton = true,
+      ...rest
+    },
+    ref,
+  ) {
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the `Omit<>` above.
+    const UNSUPPORTED_PROPS = [
+      "color", // Colors are token-driven via `data-variant`; Mantine's native palette isn't exposed.
+      "radius", // Toast corner radius is controlled by design tokens, not a raw radius prop.
+      "loading", // Toast never renders a loading state; always forced off via `loading={false}` below.
+    ] as const satisfies readonly (keyof MantineNotificationProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled),
+      UNSUPPORTED_PROPS,
+    );
+
+    // Bind CSS module classes to Mantine's internal classNames API
+    const mergedClassNames = mergeClassNames(
+      {
+        root: styles.root,
+        body: styles.body,
+        title: styles.title,
+        description: styles.description,
+        closeButton: styles.closeButton,
+        icon: styles.icon,
+        loader: styles.loader,
+      },
+      (sanitizedProps as Record<string, unknown>).classNames as
+        | Partial<Record<string, string>>
+        | undefined,
+    );
+
+    return (
+      <MantineNotification
+        ref={ref}
+        {...(sanitizedProps as unknown as Omit<
+          MantineNotificationProps,
+          "color" | "radius" | "variant" | "loading"
+        >)}
+        withCloseButton={withCloseButton}
+        withBorder={false} // Border is handled via CSS or tokens if needed
+        data-variant={variant}
+        classNames={mergedClassNames}
+        loading={false}
+      />
+    );
+  },
+);
+
+Toast.displayName = "Toast";

package/src/components/Toast/USAGE.md

@@ -0,0 +1,50 @@
+# Toast - Usage Guide
+
+This document describes how to integrate and use the `Toast` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Toast } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Toast } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return (
+    <Toast
+      title="Success"
+      message="Your action completed successfully"
+      variant="success"
+    />
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` 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
+
+`Toast` can be used directly for a static or inline message, or wired up to `@mantine/notifications` for dynamic popups. The `variant` prop (`"default" | "error" | "success"`) controls the toast's color treatment.
+
+The `loading` state is not supported. If a loading toast is needed, pass a `<Loader />` component into the `icon` slot instead.

package/src/components/Toast/index.ts

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

package/src/components/Tooltip/TOOLTIP_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,85 @@
+# Tooltip – Implementation Notes
+
+Decisions and design tweaks strictly tailored for the UI Kit's Tooltip wrapped against `@mantine/core`. This is a living document that tracks _why_ specific logic decisions exist.
+
+---
+
+## 1. Single Component API (Not Composable)
+
+**Decision:** Unlike HoverCard (which uses `HoverCard` + `HoverCard.Target` + `HoverCard.Dropdown`), Tooltip is a single wrapper component.
+
+**Implementation:** Mantine's `Tooltip` takes content via a `label` prop and wraps the trigger element as `children`. There are no separate Target/Dropdown sub-components. The Recursica wrapper preserves this exact API.
+
+**Static sub-components:** `Tooltip.Floating` and `Tooltip.Group` are exposed as pass-through references to Mantine's implementations. These do not receive Recursica styling treatment — they are utility wrappers for cursor-following tooltips and shared delay grouping respectively.
+
+---
+
+## 2. Token Namespace: `tooltip`
+
+**Decision:** The CSS module exclusively uses variables from the `--recursica_ui-kit_components_tooltip_*` namespace.
+
+**Implementation:** The Recursica token system defines the `tooltip` namespace covering:
+
+- Geometry: border-radius, border-size, min-width, min-height, max-width, padding
+- Typography: text_font-\* (family, size, style, weight, letter-spacing, line-height, text-decoration, text-transform)
+- Colors (layer-aware): background, border-color, text
+- Elevation: box-shadow
+- Beak: beak-size (16px), beak-inset (8px)
+
+No tokens from other component namespaces are referenced.
+
+---
+
+## 3. Hardcoded Values
+
+### `border-style: solid` (CSS module)
+
+Mantine renders the tooltip using its `Box` component, which does not set `border-style` natively. Without this hardcoded value, the border-width and border-color tokens would have no visible effect. Same pattern as Menu and HoverCard dropdowns.
+
+### `arrowSize` defaulted to `16` (Tooltip.tsx)
+
+Mantine's `arrowSize` prop is a JavaScript number used for inline style calculations: it sets `width`, `height`, and a positioning offset (`-arrowSize/2`) directly on the arrow `<div>` element. These inline styles cannot be overridden via CSS without `!important`, and the positioning offset has no CSS equivalent. The beak size cannot be fully CSS-driven.
+
+The default value `16` matches the Recursica `beak-size` token (`--recursica_ui-kit_components_tooltip_properties_beak-size: 16px`). Developers can override `arrowSize` if needed. This is documented as an open issue in `docs/COMPONENT_ISSUES.md`.
+
+**Note:** Mantine calls this the "arrow"; Recursica calls it the "beak". The Recursica prop `withBeak` (defaulting to `true`) maps to Mantine's `withArrow`. Both are accepted; `withBeak` takes precedence.
+
+### `multiline={true}` (Tooltip.tsx)
+
+Mantine's `multiline` prop controls whether tooltip text wraps (`white-space: nowrap` when false). Recursica always enables multiline because the design system defines a `max-width` token (300px) — text should wrap naturally within that constraint rather than overflowing. The `multiline` prop is not exposed to developers.
+
+### Flexbox centering (CSS module)
+
+`display: flex; align-items: center; justify-content: center;` is applied to the `.tooltip` class. This ensures text is vertically and horizontally centered within the `min-height: 48px` container defined by the design token. Without this, text sits at the top of the tooltip.
+
+---
+
+## 4. Recursica `withBeak` Prop
+
+**Decision:** `withBeak` is the official Recursica prop for controlling beak visibility, defaulting to `true`.
+
+**Implementation:** Both `withBeak` and Mantine's `withArrow` are accepted. Resolution order: `withBeak ?? withArrow`. When both are provided, `withBeak` takes precedence. The default of `true` means tooltips show the beak by default, matching the Recursica design intent.
+
+---
+
+## 5. ClassNames Binding
+
+**Decision:** CSS module classes are bound via the `classNames` prop on Mantine's Tooltip root.
+
+**Implementation:** The stylesNames for Tooltip are `tooltip` (the container) and `arrow` (the beak). Both are mapped to their respective CSS module classes: `{ tooltip: styles.tooltip, arrow: styles.arrow }`. Consumer-provided `classNames` are merged additively when `overStyled` is true.
+
+---
+
+## 6. Tooltip.Floating and Tooltip.Group
+
+**Decision:** These static sub-components are direct pass-throughs to Mantine with no Recursica styling.
+
+**Implementation:** `Tooltip.Floating` follows the cursor and uses a different rendering mechanism than standard Tooltip. `Tooltip.Group` is a utility for shared delay timing. Neither has Recursica design tokens defined, so they remain unstyled pass-throughs. If tokens are added in the future, they can be wrapped independently.
+
+---
+
+## 7. Default Position Override
+
+**Decision:** Recursica defaults `position` to `"top"`. Mantine defaults to `"bottom"`.
+
+**Implementation:** The `position="top"` default is set on the Mantine root element before the prop spread, so developer-provided `position` values still take precedence. This aligns with Recursica's design intent for overlay components to appear above their trigger by default.

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,91 @@
+/* HARDCODED VALUES:
+   - border-style: solid. Structural rendering rule for the tooltip border (Mantine uses Box
+     which may not set border-style natively). Same pattern as Menu / HoverCard.
+   - arrowSize defaults to 16 in Tooltip.tsx. Mantine uses arrowSize for inline width/height
+     and positioning (-arrowSize/2) calculations that cannot be CSS-driven. The default matches
+     the Recursica beak-size token (16px).
+   - arrow inset/offset is Mantine's own default (no arrowOffset override) — same "must be a JS
+     prop, not CSS-driven" constraint as arrowSize.
+   - All structural layout (display, position, overflow) is deferred to Mantine's native
+     behavior. We only override visual design tokens (colors, typography, spacing, borders).
+*/
+
+/* EXEMPTIONS:
+   - beak-size/beak-inset are ignored: the arrow's size and position are Mantine's own
+     `arrowSize`/`arrowOffset` JS props, not CSS-driven — see HARDCODED VALUES above. */
+/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-size */
+/* recursica-ignore: --recursica_ui-kit_components_tooltip_properties_beak-inset */
+
+/* ======================================
+   TOOLTIP CONTAINER
+   ====================================== */
+
+.tooltip {
+  background-color: var(
+    --recursica_ui-kit_components_tooltip_properties_colors_background-color
+  );
+  border-style: solid; /* HARDCODE: Mantine Box does not set border-style natively */
+  border-width: var(
+    --recursica_ui-kit_components_tooltip_properties_border-size
+  );
+  border-color: var(
+    --recursica_ui-kit_components_tooltip_properties_colors_border-color
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_tooltip_properties_border-radius
+  );
+  box-shadow: var(--recursica_ui-kit_components_tooltip_properties_elevation);
+
+  min-width: var(--recursica_ui-kit_components_tooltip_properties_min-width);
+  min-height: var(--recursica_ui-kit_components_tooltip_properties_min-height);
+  max-width: var(--recursica_ui-kit_components_tooltip_properties_max-width);
+
+  padding: var(
+      --recursica_ui-kit_components_tooltip_properties_vertical-padding
+    )
+    var(--recursica_ui-kit_components_tooltip_properties_horizontal-padding);
+
+  /* Vertically center text within min-height container */
+  display: flex;
+  align-items: center;
+
+  /* Typography */
+  font-family: var(
+    --recursica_ui-kit_components_tooltip_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_tooltip_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_tooltip_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_tooltip_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_tooltip_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_tooltip_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_tooltip_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_tooltip_properties_text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_tooltip_properties_colors_text-color
+  );
+}
+
+/* ======================================
+   ARROW / BEAK
+   ====================================== */
+
+.arrow {
+  border-color: var(
+    --recursica_ui-kit_components_tooltip_properties_colors_border-color
+  );
+}