@recursica/mantine-adapter 0.53.0 → 0.55.0

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mantine-adapter"
   },
-  "version": "0.53.0",
+  "version": "0.55.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",
@@ -57,12 +57,13 @@
     "build": "vite build --mode library",
     "build-storybook": "storybook build -o storybook-static",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 6011",
+    "storybook": "storybook dev",
     "analyze-tokens": "analyze-tokens --css ./recursica_variables_scoped.css --dir src/components --output token-analysis.json",
     "prebuild": "npm run analyze-tokens",
     "test": "vitest run --project unit",
     "test:dom": "vitest run --project dom",
-    "adapter-tester:automated": "adapter-tester"
+    "adapter-tester:automated": "adapter-tester",
+    "adapter-tester:update-golden": "adapter-tester --update-golden"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -102,7 +103,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^0.26.0"
+    "@recursica/adapter-common": "^0.28.0"
   },
   "peerDependencies": {
     "@mantine/core": "^8.0.0",

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

@@ -96,14 +96,11 @@
       --recursica_ui-kit_components_accordion-header_properties_horizontal-padding
     );
 
-  /* 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) */
+  /* Closed (resting) background/border — swapped to the open appearance below when expanded */
   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
@@ -153,20 +150,32 @@
 }
 
 .item[data-active] .control {
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_border-color
+  );
   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 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. */
+/* Mantine natively places hover states on the control node. We explicitly re-apply our own real
+   background (Mantine's native :hover CSS would otherwise show through) — closed or open,
+   matching whichever appearance is currently active — 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:not(:disabled) {
   background-color: var(
     --recursica_ui-kit_components_accordion-header_variants_appearance_closed_properties_colors_background-color
   );
 }
+.item[data-active] .control:hover:not(:disabled) {
+  background-color: var(
+    --recursica_ui-kit_components_accordion-header_variants_appearance_open_properties_colors_background-color
+  );
+}
 .control::after {
   content: "";
   position: absolute;

package/src/components/AutoComplete/AutoComplete.module.css

@@ -37,12 +37,17 @@
 }
 
 /* HARDCODED VALUES:
-   - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
    - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
    - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
 */
 
+/* EXEMPTIONS:
+   - border-size is constant across disabled/error states — only border-color changes; the
+     disabled/error border-size tokens are never applied by design. */
+/* recursica-ignore: --recursica_ui-kit_components_autocomplete_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_autocomplete_variants_states_error_properties_border-size */
+
 .root {
   display: flex;
   position: relative;
@@ -89,7 +94,9 @@
   border-radius: var(
     --recursica_ui-kit_components_autocomplete_properties_border-radius
   );
-  border-width: 1px;
+  border-width: var(
+    --recursica_ui-kit_components_autocomplete_properties_border-size
+  );
   border-style: solid;
 
   /* Strict Typography Unification */

package/src/components/Chip/Chip.module.css

@@ -17,6 +17,24 @@
    background: transparent; (Override mantine default)
  */
 
+/* EXEMPTIONS:
+   - The leading icon and the selected/check icon are mutually exclusive (Chip.tsx only renders
+     the leading icon when `!checked`; Mantine's own check icon takes over when checked) — so for
+     any given state, exactly one of `leading-icon-color`/`selected-icon-color` ever applies. The
+     other one, and the non-state-specific base `properties_leading-icon-color`/
+     `properties_close-icon-color` (superseded by the per-selection-state values actually used),
+     are never referenced by design, not missing. Same for the generic (non-leading/selected)
+     `colors_icon-color` on the error variants — the more specific leading/selected token already
+     covers it. */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_close-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_properties_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_selected_variants_states_error_properties_colors_leading-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_properties_colors_selected-icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_icon-color */
+/* recursica-ignore: --recursica_ui-kit_components_chip_variants_selection-states_unselected_variants_states_error_properties_colors_selected-icon-color */
+
 .root.root {
   /* Set preset layout variables to override mantine defaults safely */
   box-sizing: border-box;

package/src/components/DatePicker/DatePicker.module.css

@@ -29,12 +29,17 @@
 }
 
 /* HARDCODED VALUES:
-   - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
    - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
    - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
 */
 
+/* EXEMPTIONS:
+   - border-size is constant across disabled/error states — only border-color changes; the
+     disabled/error border-size tokens are never applied by design. */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_date-picker_variants_states_error_properties_border-size */
+
 .root {
   display: flex;
   position: relative;
@@ -85,7 +90,9 @@
   border-radius: var(
     --recursica_ui-kit_components_date-picker_properties_border-radius
   );
-  border-width: 1px;
+  border-width: var(
+    --recursica_ui-kit_components_date-picker_properties_border-size
+  );
   border-style: solid;
 
   /* Strict Typography Unification */

package/src/components/Dropdown/Dropdown.module.css

@@ -37,13 +37,18 @@
 }
 
 /* HARDCODED VALUES:
-   - border-width: 1px. Native geometric boundary for the input box.
    - border-style: solid. Native structural rendering rule.
    - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
    - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
    - placeholder opacity: 0.5. The dropdown parameters currently lack a dedicated placeholder-opacity variable.
 */
 
+/* EXEMPTIONS:
+   - border-size is constant across disabled/error states — only border-color changes; the
+     disabled/error border-size tokens are never applied by design. */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_dropdown_variants_states_error_properties_border-size */
+
 .root {
   display: flex;
   position: relative;
@@ -86,7 +91,9 @@
   border-radius: var(
     --recursica_ui-kit_components_dropdown_properties_border-radius
   );
-  border-width: 1px;
+  border-width: var(
+    --recursica_ui-kit_components_dropdown_properties_border-size
+  );
   border-style: solid;
 
   /* Strict Typography Unification */

package/src/components/FileInput/FileInput.module.css

@@ -8,6 +8,12 @@
  *   recursica-allow-brand: --recursica_brand_states_hover_opacity
  */
 
+/* EXEMPTIONS:
+   - border-size is constant across disabled/error states — only border-color changes; the
+     disabled/error border-size tokens are never applied by design. */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_border-size */
+
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens.
    - Also sets the --file-input-control-{max,min}-width hooks consumed inline in FileInput.tsx,
@@ -205,6 +211,12 @@
 
 /* Structural placement only — the button's own "text" variant/size="small" tokens (including its
    own disabled state) own its visual appearance, same as Tree's .expandButton. */
+/* EXEMPTIONS:
+   - trailing-icon color (base/disabled/error) is ignored — the trailing icon is a nested Button
+     that owns its own color tokens per state; FileInput never recolors it directly. */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_disabled_properties_colors_trailing-icon */
+/* recursica-ignore: --recursica_ui-kit_components_file-input_variants_states_error_properties_colors_trailing-icon */
 .trailingIcon {
   position: relative;
   z-index: 1;

package/src/components/FileUpload/FileUpload.module.css

@@ -7,11 +7,16 @@
 /* HARDCODED VALUES:
    - .root: display: flex; flex-direction: column; width: 100% — structural layout, not a design
      token concern (matches how other block-level components like Layer are laid out).
-   - .dropzone: border-style: dashed — see EXEMPTIONS above.
+   - .dropzone: border-style: dashed — see EXEMPTIONS below.
    - .uploadIcon: width/height: 2rem — no icon-size token exists for file-upload (unlike
      TextField/DatePicker); sized to visually match the Figma reference. Revisit if a dedicated
      token is ever added. */
 
+/* EXEMPTIONS:
+   - border-style is ignored: the dropzone is deliberately dashed (conventional drop-target
+     affordance), not the UI Kit's solid-border default. */
+/* recursica-ignore: --recursica_ui-kit_components_file-upload_properties_border-style */
+
 /* LAYOUT SPACING OVERRIDES:
    - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
 .layoutOverride {

package/src/components/FormControlLayout/FormControlLayout.module.css

@@ -41,6 +41,18 @@
   );
 }
 
+.root[data-form-layout="stacked"] .leftSection[data-size="default"] {
+  width: var(
+    --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_default_properties_width
+  );
+}
+
+.root[data-form-layout="stacked"] .leftSection[data-size="small"] {
+  width: var(
+    --recursica_ui-kit_components_label_variants_layouts_stacked_variants_sizes_small_properties_width
+  );
+}
+
 /* SideBySide Layout constraints */
 .root[data-form-layout="side-by-side"] .leftSection {
   padding-top: var(

package/src/components/FormControlLayout/FormControlLayout.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormControlLayout } from "./FormControlLayout";
 import { Switch } from "../Switch/Switch";
+import { Label } from "../Label/Label";
 
 const meta: Meta<typeof FormControlLayout> = {
   title: "UI-Kit/FormControlLayout",
@@ -80,3 +81,38 @@ export const SideBySideLayout: Story = {
     children: <Switch label="Offset switch aligning with grid" />,
   },
 };
+
+/**
+ * A real Label (not a placeholder) in a stacked layout, at `labelSize="default"`. Even
+ * though the label sits above the field rather than beside it, its own column still caps
+ * to the design system's stacked-layout width (224px) rather than stretching to the full
+ * container — long label text wraps instead of spanning edge-to-edge.
+ */
+export const StackedLayoutWithLabelDefault: Story = {
+  args: {
+    formLayout: "stacked",
+    labelSize: "default",
+    leftSection: (
+      <Label labelSize="default">
+        A fairly long label to show the stacked-layout width cap in action
+      </Label>
+    ),
+    children: <Switch label="Input area content" />,
+  },
+};
+
+/**
+ * Same as above, at `labelSize="small"` — the stacked-layout width cap is narrower (80px).
+ */
+export const StackedLayoutWithLabelSmall: Story = {
+  args: {
+    formLayout: "stacked",
+    labelSize: "small",
+    leftSection: (
+      <Label labelSize="small">
+        A fairly long label to show the stacked-layout width cap in action
+      </Label>
+    ),
+    children: <Switch label="Input area content" />,
+  },
+};

package/src/components/HoverCard/HoverCard.module.css

@@ -3,10 +3,15 @@
      which may not set border-style natively). Same pattern as Menu.
    - arrowSize defaults to 16 in HoverCard.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). See COMPONENT_ISSUES.md for details.
+     the Recursica beak-size token (16px).
    - 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 is ignored: the arrow's size is Mantine's own `arrowSize` JS prop, not CSS-driven —
+     see HARDCODED VALUES above. */
+/* recursica-ignore: --recursica_ui-kit_components_hover-card-popover_properties_beak-size */
+
 /* ======================================
    DROPDOWN CONTAINER
    ====================================== */

package/src/components/Label/Label.stories.tsx

@@ -1,9 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Label } from "./Label";
-import { TextField } from "../TextField/TextField";
-import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+import { Button } from "../Button/Button";
 
 type LabelStoryProps = React.ComponentProps<typeof Label>;
 
@@ -15,12 +13,43 @@ const meta: Meta<LabelStoryProps> = {
     docs: {
       description: {
         component:
-          "The `Label` component is a strict Recursica-styled wrapper around Mantine's native `Input.Label`. It serves as the primary compositional primitive for all form fields, preserving Mantine's accessibility associations and context while strictly enforcing the Recursica atomic design system.\n\n### Usage with Form Inputs\nWhen working with form structures, render this `Label` component directly above your inputs or supply it to a component's overriding properties. The component automatically maps structural layout dimensions, dynamic alignment (`left` vs `right`), custom indicator gaps, and integrates a customized `optionalText` and `withEditIcon` flow that safely bypasses Mantine's native required asterisk mechanisms.",
+          "The `Label` component is a strict Recursica-styled wrapper around Mantine's native `Input.Label`. It serves as the primary compositional primitive for all form fields, preserving Mantine's accessibility associations and context while strictly enforcing the Recursica atomic design system.\n\n### Usage with Form Inputs\nThis component only renders the label itself — layout concerns like `stacked` vs `side-by-side` positioning relative to an input live on `FormControlLayout`/`FormControlWrapper`, not here. Render this `Label` in isolation to verify its own states, or see `UI-Kit/FormControlLayout` for how it composes into a full form field.",
       },
     },
   },
   argTypes: {
-    ...formControlArgTypes,
+    labelSize: {
+      control: "inline-radio",
+      options: ["default", "small", "md"],
+      description:
+        "Sizing metrics for the Label. Only visually distinguishable once composed inside a `side-by-side` FormControlLayout, which is where the resulting width constraint applies.",
+    },
+    labelAlignment: {
+      control: "inline-radio",
+      options: ["left", "right"],
+      description: "Text alignment of the label content.",
+    },
+    required: {
+      control: "boolean",
+      description:
+        "Renders the required asterisk (suppressed automatically when `labelWithEditIcon` is set, and mutually exclusive with `labelOptionalText`).",
+    },
+    labelOptionalText: {
+      control: "text",
+      description:
+        "Secondary text rendered beneath the label. Pass `true` for the default '(Optional)' string, or a custom node/string. Suppressed when `required` is true.",
+    },
+    labelWithEditIcon: {
+      control: "boolean",
+      description:
+        "Replaces the default edit icon slot with an interactive edit affordance; replaces the required asterisk visually when both are set.",
+    },
+    labelActionArea: {
+      table: { disable: true },
+    },
+    onLabelEditClick: {
+      table: { disable: true },
+    },
   },
 };
 
@@ -28,95 +57,75 @@ export default meta;
 
 type Story = StoryObj<LabelStoryProps>;
 
-// Utility mapping to pipe raw Label args structurally into TextField accurately
-const renderWithTextField = ({ children, ...args }: LabelStoryProps) => (
-  <TextField
-    label={children as React.ReactNode}
-    placeholder="Form Control primitive mapped..."
-    {...(args as any)}
-  />
-);
-
 export const Default: Story = {
   args: {
-    children: "Dynamic Label (Controls)",
-
+    children: "Label",
     labelSize: "default",
     labelAlignment: "left",
     required: false,
     labelOptionalText: "",
     labelWithEditIcon: false,
   },
-  render: renderWithTextField,
 };
 
-export const StackedDefault: Story = {
+export const Required: Story = {
   args: {
-    children: "Email Address",
+    children: "Required Field",
+    required: true,
   },
-  render: renderWithTextField,
 };
 
-export const StackedRequired: Story = {
+export const RequiredSuppressesOptionalText: Story = {
   args: {
-    children: "Primary Network Node",
-
+    children: "Full Name",
     required: true,
+    labelOptionalText: "This should not render",
   },
-  render: renderWithTextField,
 };
 
-export const StackedWithEditIcon: Story = {
+export const WithOptionalText: Story = {
   args: {
-    children: "Environment Variables",
-
-    labelWithEditIcon: true,
+    children: "Bio",
+    labelOptionalText: "Max 100 characters",
   },
-  render: renderWithTextField,
 };
 
-export const SideBySideDefault: Story = {
+export const BooleanOptionalText: Story = {
   args: {
-    children: "Status",
-
-    labelSize: "default",
+    children: "Middle Initial",
+    labelOptionalText: true,
   },
-  render: renderWithTextField,
 };
 
-export const RequiredSuppressesOptionalText: Story = {
+export const WithEditIcon: Story = {
   args: {
-    children: "Full Name",
-
-    required: true,
-    labelOptionalText: "This should not render",
+    children: "Shipping Address",
+    labelWithEditIcon: true,
   },
-  render: renderWithTextField,
 };
 
-export const BooleanOptionalText: Story = {
+export const RequiredWithEditIcon: Story = {
   args: {
-    children: "Middle Initial",
-
-    labelOptionalText: true,
+    children: "Primary Network Node",
+    required: true,
+    labelWithEditIcon: true,
   },
-  render: renderWithTextField,
 };
 
-export const WithEditIcon: Story = {
+export const RightAligned: Story = {
   args: {
-    children: "Shipping Address",
-
-    labelWithEditIcon: true,
+    children: "Status",
+    labelAlignment: "right",
   },
-  render: renderWithTextField,
 };
 
-export const LayerOneSideBySide: Story = {
+export const WithActionArea: Story = {
   args: {
     children: "Configuration",
-
-    labelWithEditIcon: true,
+    labelActionArea: (
+      <Button variant="text" size="small">
+        Edit
+      </Button>
+    ),
   },
-  render: renderWithTextField,
 };

package/src/components/Link/Link.module.css

@@ -3,6 +3,11 @@
  *   recursica-allow-brand: --recursica_brand_states_link_decoration
  */
 
+/* EXEMPTIONS:
+   - text_text-transform is ignored because links naturally inherit casing directly from text
+     children rather than requiring custom CSS transforms. */
+/* recursica-ignore: --recursica_ui-kit_components_link_properties_text_text-transform */
+
 /*
 HARDCODED VALUES:
 - display: inline-flex; (Base layout to align icon and text correctly)

package/src/components/Loader/Loader.animate.dom.test.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import { Loader } from "./Loader";
+
+function mount(node: React.ReactElement): {
+  container: HTMLElement;
+  root: Root;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  flushSync(() => root.render(node));
+  return { container, root };
+}
+
+function unmount({ container, root }: { container: HTMLElement; root: Root }) {
+  root.unmount();
+  container.remove();
+}
+
+/**
+ * `animate={false}` must deterministically freeze every variant — including
+ * the bars'/dots' individually-animated child spans that Mantine renders
+ * without our own class names, so they can only be reached by a descendant
+ * selector, not the `data-variant`-scoped rules the size/thickness CSS uses.
+ */
+describe("Loader animate prop", () => {
+  it.each(["oval", "bars", "dots"] as const)(
+    "freezes every animated element for variant=%s when animate is false, and animates by default",
+    (variant) => {
+      const animated = mount(
+        <MantineProvider defaultColorScheme="light">
+          <Loader variant={variant} />
+        </MantineProvider>,
+      );
+      const frozen = mount(
+        <MantineProvider defaultColorScheme="light">
+          <Loader variant={variant} animate={false} />
+        </MantineProvider>,
+      );
+
+      try {
+        const animatedRoot =
+          animated.container.querySelector("[data-variant]")!;
+        const frozenRoot = frozen.container.querySelector("[data-variant]")!;
+
+        const animatedTargets = [
+          animatedRoot,
+          ...Array.from(animatedRoot.querySelectorAll("*")),
+        ];
+        const frozenTargets = [
+          frozenRoot,
+          ...Array.from(frozenRoot.querySelectorAll("*")),
+        ];
+
+        // At least one element (or the root's own ::after, for oval) actually
+        // animates by default — otherwise this test would trivially pass.
+        const hasAnimation = (el: Element, pseudo?: string) =>
+          getComputedStyle(el, pseudo).animationName !== "none";
+        const animatedHasMotion =
+          animatedTargets.some((el) => hasAnimation(el)) ||
+          hasAnimation(animatedRoot, "::after");
+        expect(animatedHasMotion).toBe(true);
+
+        // Frozen: nothing animates, root included, pseudo-element included.
+        for (const el of frozenTargets) {
+          expect(getComputedStyle(el).animationName).toBe("none");
+        }
+        expect(getComputedStyle(frozenRoot, "::after").animationName).toBe(
+          "none",
+        );
+      } finally {
+        unmount(animated);
+        unmount(frozen);
+      }
+    },
+  );
+});

package/src/components/Loader/Loader.module.css

@@ -5,6 +5,16 @@
   );
 }
 
+/* `animate={false}` — freezes every variant's animation (the oval's own
+ * spinning ::after, and the bars'/dots' individually-animated child spans)
+ * so the loader renders deterministically, e.g. for a visual-regression
+ * snapshot that would otherwise diff differently every run. */
+.root[data-animate="false"],
+.root[data-animate="false"] *,
+.root[data-animate="false"]::after {
+  animation: none !important;
+}
+
 /* data-size mapping */
 
 /* SMALL */