@12-apps/ui 6.18.0 → 6.19.0

package/dist/native/icons.js

@@ -1,103 +1,14 @@
 import {
-  COLOR_VALUES
-} from "./chunks/chunk-5WLOVHKK.js";
-import {
-  resolveTestId
-} from "./chunks/chunk-M4DTJDWU.js";
-import {
-  useUiTheme
-} from "./chunks/chunk-VGBKUL6D.js";
-import "./chunks/chunk-L2UUNK2M.js";
-
-// src/icons/Icon.native.tsx
-import Svg, { Path } from "react-native-svg";
-
-// src/icons/icon-color.ts
-var isColorValue = (color) => COLOR_VALUES.includes(color);
-function iconFill(theme, color, inherit) {
-  if (color === void 0 || color === "inherit") return inherit;
-  if (isColorValue(color)) {
-    return color === "neutral" ? theme.palette.text.secondary : theme.palette[color].main;
-  }
-  return color;
-}
-
-// src/icons/Icon.types.ts
-var ICON_SIZES = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 32,
-  xl: 40
-};
-var iconSize = (size) => typeof size === "number" ? size : ICON_SIZES[size ?? "md"];
-
-// src/icons/paths.generated.ts
-var ICON_PATHS = {
-  Add: ["M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"],
-  ArrowBack: ["M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"],
-  ArrowDownward: ["m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"],
-  ArrowForward: ["m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"],
-  ArrowUpward: ["m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z"],
-  Check: ["M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"],
-  CheckCircle: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z"],
-  ChevronLeft: ["M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"],
-  ChevronRight: ["M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"],
-  Close: ["M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"],
-  ContentCopy: ["M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"],
-  Delete: ["M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"],
-  Edit: ["M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"],
-  Error: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"],
-  ErrorOutline: ["M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"],
-  ExpandLess: ["m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"],
-  ExpandMore: ["M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"],
-  FilterList: ["M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z"],
-  Info: ["M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"],
-  InfoOutlined: ["M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"],
-  KeyboardArrowDown: ["M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"],
-  KeyboardArrowUp: ["M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"],
-  Menu: ["M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"],
-  MoreHoriz: ["M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"],
-  MoreVert: ["M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"],
-  NavigateBefore: ["M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"],
-  NavigateNext: ["M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"],
-  Person: ["M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"],
-  Refresh: ["M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"],
-  Remove: ["M19 13H5v-2h14z"],
-  Save: ["M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z"],
-  Search: ["M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"],
-  Settings: ["M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"],
-  Visibility: ["M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"],
-  VisibilityOff: ["M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"],
-  Warning: ["M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"],
-  WarningAmber: ["M12 5.99 19.53 19H4.47zM12 2 1 21h22z", "M13 16h-2v2h2zm0-6h-2v5h2z"]
-};
-var ICON_NAMES = Object.keys(ICON_PATHS);
-
-// src/icons/Icon.native.tsx
-import { jsx } from "react/jsx-runtime";
-function Icon({ name, size, color, label, style, ...rest }) {
-  const theme = useUiTheme();
-  const px = iconSize(size);
-  const fill = iconFill(theme, color, theme.palette.text.primary);
-  const testId = resolveTestId(rest, `icon-${name}`);
-  return /* @__PURE__ */ jsx(
-    Svg,
-    {
-      width: px,
-      height: px,
-      viewBox: "0 0 24 24",
-      fill,
-      style,
-      testID: testId,
-      role: "img",
-      "aria-label": label,
-      "aria-hidden": !label,
-      children: ICON_PATHS[name].map((d) => /* @__PURE__ */ jsx(Path, { d, fill }, d))
-    }
-  );
-}
-Icon.displayName = "Icon";
+  ICON_NAMES,
+  ICON_PATHS,
+  ICON_SIZES,
+  Icon,
+  iconSize
+} from "./chunks/chunk-YQGNMAJN.js";
+import "./chunks/chunk-5WLOVHKK.js";
+import "./chunks/chunk-M4DTJDWU.js";
+import "./chunks/chunk-YTHR4Y5P.js";
+import "./chunks/chunk-P3PL4WBO.js";
 export {
   ICON_NAMES,
   ICON_PATHS,

package/dist/native/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/icons/Icon.native.tsx","../../src/icons/icon-color.ts","../../src/icons/Icon.types.ts","../../src/icons/paths.generated.ts"],"sourcesContent":["import * as React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport Svg, { Path } from 'react-native-svg';\n\nimport { iconFill } from './icon-color';\nimport { iconSize, type IconBaseProps } from './Icon.types';\nimport { ICON_PATHS } from './paths.generated';\nimport { resolveTestId } from '../platform/test-id';\nimport { useUiTheme } from '../provider/use-ui-theme.native';\n\nexport interface IconProps extends IconBaseProps {\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The native `Icon`: `react-native-svg` drawing the same generated path the web\n * `SvgIcon` draws, in the same 24-unit box, at the same px size.\n */\nexport function Icon({ name, size, color, label, style, ...rest }: IconProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const px = iconSize(size);\n  const fill = iconFill(theme, color, theme.palette.text.primary);\n  const testId = resolveTestId(rest, `icon-${name}`);\n\n  return (\n    <Svg\n      width={px}\n      height={px}\n      viewBox=\"0 0 24 24\"\n      fill={fill}\n      style={style}\n      testID={testId}\n      role=\"img\"\n      aria-label={label}\n      aria-hidden={!label}\n    >\n      {ICON_PATHS[name].map((d) => (\n        <Path key={d} d={d} fill={fill} />\n      ))}\n    </Svg>\n  );\n}\n\nIcon.displayName = 'Icon';\n","import { COLOR_VALUES, type ColorValue } from '../tokens/vocabulary';\nimport type { UiTheme } from '../tokens/theme';\n\nconst isColorValue = (color: string): color is ColorValue =>\n  (COLOR_VALUES as readonly string[]).includes(color);\n\n/**\n * The fill for an icon's `color` prop, on either renderer.\n *\n * A house colour resolves to the palette slot's `main`; `inherit` is the\n * caller's problem (the web passes `currentColor`, native the text colour); any\n * other string is taken as a CSS colour and passed through.\n */\nexport function iconFill(theme: UiTheme, color: string | undefined, inherit: string): string {\n  if (color === undefined || color === 'inherit') return inherit;\n  if (isColorValue(color)) {\n    return color === 'neutral' ? theme.palette.text.secondary : theme.palette[color].main;\n  }\n  return color;\n}\n","import type { IconName } from './paths.generated';\nimport type { ColorValue, SizeValue } from '../tokens/vocabulary';\n\nexport type { IconName };\n\n/**\n * The glyph sizes, in px. `md` is MUI's `SvgIcon` default (24) and `sm` its\n * `small` (20); the rest continue the house scale in 4px steps either side.\n */\nexport const ICON_SIZES: Record<SizeValue, number> = {\n  xs: 16,\n  sm: 20,\n  md: 24,\n  lg: 32,\n  xl: 40,\n};\n\nexport interface IconBaseProps {\n  /** Which glyph. The list is `src/icons/glyphs.json`; both renderers draw the same paths. */\n  name: IconName;\n  /** A step of the house scale, or an exact px size. */\n  size?: SizeValue | number;\n  /**\n   * A house colour, `inherit` (the surrounding text's colour on the web, the\n   * theme's primary text on native, which has no `currentColor`), or any CSS\n   * colour string.\n   */\n  color?: ColorValue | 'inherit' | string;\n  /**\n   * The name a screen reader gives the glyph. Omit for a decorative icon: it\n   * is then hidden from assistive technology on both renderers.\n   */\n  label?: string;\n  testID?: string;\n  dataTestId?: string;\n}\n\n/** The px size for either spelling of `size`. */\nexport const iconSize = (size: SizeValue | number | undefined): number =>\n  typeof size === 'number' ? size : ICON_SIZES[size ?? 'md'];\n","// GENERATED by scripts/generate-icon-paths.mjs from src/icons/glyphs.json.\n// Do not edit: run `pnpm icons:generate`; `pnpm icons:check` fails CI on drift.\n//\n// Each entry is the `d` of every <path> in the matching @mui/icons-material\n// module, in a 24x24 viewBox — the SAME geometry the web renders through\n// SvgIcon, so the native Icon draws the identical glyph.\n\n/** Path data per glyph, in a 0 0 24 24 viewBox. */\nexport const ICON_PATHS = {\n  Add: [\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z\"],\n  ArrowBack: [\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z\"],\n  ArrowDownward: [\"m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z\"],\n  ArrowForward: [\"m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z\"],\n  ArrowUpward: [\"m4 12 1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8z\"],\n  Check: [\"M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"],\n  CheckCircle: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z\"],\n  ChevronLeft: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n  ChevronRight: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n  Close: [\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"],\n  ContentCopy: [\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z\"],\n  Delete: [\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z\"],\n  Edit: [\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z\"],\n  Error: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z\"],\n  ErrorOutline: [\"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8\"],\n  ExpandLess: [\"m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z\"],\n  ExpandMore: [\"M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z\"],\n  FilterList: [\"M10 18h4v-2h-4zM3 6v2h18V6zm3 7h12v-2H6z\"],\n  Info: [\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z\"],\n  InfoOutlined: [\"M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8\"],\n  KeyboardArrowDown: [\"M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z\"],\n  KeyboardArrowUp: [\"M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z\"],\n  Menu: [\"M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z\"],\n  MoreHoriz: [\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n  MoreVert: [\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2\"],\n  NavigateBefore: [\"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z\"],\n  NavigateNext: [\"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"],\n  Person: [\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4\"],\n  Refresh: [\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z\"],\n  Remove: [\"M19 13H5v-2h14z\"],\n  Save: [\"M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3m3-10H5V5h10z\"],\n  Search: [\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14\"],\n  Settings: [\"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6\"],\n  Visibility: [\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3\"],\n  VisibilityOff: [\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z\"],\n  Warning: [\"M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z\"],\n  WarningAmber: [\"M12 5.99 19.53 19H4.47zM12 2 1 21h22z\",\"M13 16h-2v2h2zm0-6h-2v5h2z\"],\n} as const;\n\nexport type IconName = keyof typeof ICON_PATHS;\n\nexport const ICON_NAMES = Object.keys(ICON_PATHS) as readonly IconName[];\n"],"mappings":";;;;;;;;;;;;AAEA,OAAO,OAAO,YAAY;;;ACC1B,IAAM,eAAe,CAAC,UACnB,aAAmC,SAAS,KAAK;AAS7C,SAAS,SAAS,OAAgB,OAA2B,SAAyB;AAC3F,MAAI,UAAU,UAAa,UAAU,UAAW,QAAO;AACvD,MAAI,aAAa,KAAK,GAAG;AACvB,WAAO,UAAU,YAAY,MAAM,QAAQ,KAAK,YAAY,MAAM,QAAQ,KAAK,EAAE;AAAA,EACnF;AACA,SAAO;AACT;;;ACVO,IAAM,aAAwC;AAAA,EACnD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAuBO,IAAM,WAAW,CAAC,SACvB,OAAO,SAAS,WAAW,OAAO,WAAW,QAAQ,IAAI;;;AC/BpD,IAAM,aAAa;AAAA,EACxB,KAAK,CAAC,mCAAmC;AAAA,EACzC,WAAW,CAAC,2DAA2D;AAAA,EACvE,eAAe,CAAC,2DAA2D;AAAA,EAC3E,cAAc,CAAC,0DAA0D;AAAA,EACzE,aAAa,CAAC,yDAAyD;AAAA,EACvE,OAAO,CAAC,mDAAmD;AAAA,EAC3D,aAAa,CAAC,gHAAgH;AAAA,EAC9H,aAAa,CAAC,+CAA+C;AAAA,EAC7D,cAAc,CAAC,gDAAgD;AAAA,EAC/D,OAAO,CAAC,uGAAuG;AAAA,EAC/G,aAAa,CAAC,2HAA2H;AAAA,EACzI,QAAQ,CAAC,0EAA0E;AAAA,EACnF,MAAM,CAAC,kIAAkI;AAAA,EACzI,OAAO,CAAC,6FAA6F;AAAA,EACrG,cAAc,CAAC,uKAAuK;AAAA,EACtL,YAAY,CAAC,+CAA+C;AAAA,EAC5D,YAAY,CAAC,8CAA8C;AAAA,EAC3D,YAAY,CAAC,0CAA0C;AAAA,EACvD,MAAM,CAAC,6FAA6F;AAAA,EACpG,cAAc,CAAC,oJAAoJ;AAAA,EACnK,mBAAmB,CAAC,+CAA+C;AAAA,EACnE,iBAAiB,CAAC,gDAAgD;AAAA,EAClE,MAAM,CAAC,yCAAyC;AAAA,EAChD,WAAW,CAAC,kJAAkJ;AAAA,EAC9J,UAAU,CAAC,gJAAgJ;AAAA,EAC3J,gBAAgB,CAAC,+CAA+C;AAAA,EAChE,cAAc,CAAC,gDAAgD;AAAA,EAC/D,QAAQ,CAAC,6GAA6G;AAAA,EACtH,SAAS,CAAC,iMAAiM;AAAA,EAC3M,QAAQ,CAAC,iBAAiB;AAAA,EAC1B,MAAM,CAAC,wIAAwI;AAAA,EAC/I,QAAQ,CAAC,mOAAmO;AAAA,EAC5O,UAAU,CAAC,irBAAirB;AAAA,EAC5rB,YAAY,CAAC,gNAAgN;AAAA,EAC7N,eAAe,CAAC,0eAA0e;AAAA,EAC1f,SAAS,CAAC,2CAA2C;AAAA,EACrD,cAAc,CAAC,yCAAwC,4BAA4B;AACrF;AAIO,IAAM,aAAa,OAAO,KAAK,UAAU;;;AHbxC;AAnBD,SAAS,KAAK,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO,GAAG,KAAK,GAAiC;AAC/F,QAAM,QAAQ,WAAW;AACzB,QAAM,KAAK,SAAS,IAAI;AACxB,QAAM,OAAO,SAAS,OAAO,OAAO,MAAM,QAAQ,KAAK,OAAO;AAC9D,QAAM,SAAS,cAAc,MAAM,QAAQ,IAAI,EAAE;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,eAAa,CAAC;AAAA,MAEb,qBAAW,IAAI,EAAE,IAAI,CAAC,MACrB,oBAAC,QAAa,GAAM,QAAT,CAAqB,CACjC;AAAA;AAAA,EACH;AAEJ;AAEA,KAAK,cAAc;","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/native/layout/Box.js

@@ -1,10 +1,10 @@
 import {
   Box,
   resolveBoxLayout
-} from "../chunks/chunk-QZ233LRH.js";
+} from "../chunks/chunk-EKKNUEA6.js";
 import "../chunks/chunk-M4DTJDWU.js";
-import "../chunks/chunk-VGBKUL6D.js";
-import "../chunks/chunk-L2UUNK2M.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
 export {
   Box,
   resolveBoxLayout

package/dist/native/layout/Container.js

@@ -0,0 +1,87 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Container/Container.native.tsx
+import * as React from "react";
+import { View, useWindowDimensions } from "react-native";
+
+// src/components/layout/Container/Container.metrics.ts
+var CONTAINER_MAX_WIDTHS = {
+  xs: 444,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536
+};
+var CONTAINER_DEFAULT_MAX_WIDTH = "lg";
+var CONTAINER_CENTERED_MAX_WIDTH = "md";
+var CONTAINER_PADDING_UNITS = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 6
+};
+var CONTAINER_DEFAULT_PADDING = "md";
+var CONTAINER_COMPACT_PADDING_UNITS = 2;
+var CONTAINER_COMPACT_BELOW = 600;
+var isMaxWidthKey = (value) => value in CONTAINER_MAX_WIDTHS;
+function resolveContainerMaxWidth(variant, maxWidth) {
+  if (variant === "fluid") return false;
+  if (variant === "centered") return CONTAINER_CENTERED_MAX_WIDTH;
+  if (typeof maxWidth === "string" && isMaxWidthKey(maxWidth)) return maxWidth;
+  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;
+}
+function containerPaddingUnits(padding, compact) {
+  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
+  const units = CONTAINER_PADDING_UNITS[padding];
+  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+
+// src/components/layout/Container/Container.native.tsx
+import { jsx } from "react/jsx-runtime";
+function containerStyle(theme, a) {
+  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;
+  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);
+  return {
+    width: "100%",
+    marginLeft: "auto",
+    marginRight: "auto",
+    maxWidth: limit === false ? void 0 : CONTAINER_MAX_WIDTHS[limit],
+    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    ...a.variant === "centered" ? { alignItems: "center", justifyContent: "center", minHeight: a.window.height } : null
+  };
+}
+var Container = React.forwardRef(
+  ({ children, maxWidth = "lg", variant = "default", padding = "md", responsive = true, style, ...others }, ref) => {
+    const theme = useUiTheme();
+    const window = useWindowDimensions();
+    const resolved = React.useMemo(
+      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),
+      [theme, variant, maxWidth, padding, responsive, window]
+    );
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ref,
+        style: [resolved, style],
+        testID: resolveTestId(others, "container"),
+        ...withoutTestIdProps(others),
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
+export {
+  Container,
+  containerStyle
+};
+//# sourceMappingURL=Container.js.map

package/dist/native/layout/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Container/Container.native.tsx","../../../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, useWindowDimensions, type ViewStyle } from 'react-native';\n\nimport {\n  CONTAINER_COMPACT_BELOW,\n  CONTAINER_MAX_WIDTHS,\n  containerPaddingUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\nexport interface ContainerStyleArgs {\n  variant: ContainerVariant;\n  maxWidth: ContainerMaxWidth | string;\n  padding: ContainerPadding;\n  responsive: boolean;\n  /** The window, for the two things CSS answers with a media query and `100vh`. */\n  window: { width: number; height: number };\n}\n\n/**\n * The style MUI's `Container` plus the web `sx` paint, in absolute numbers.\n *\n * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is\n * the breakpoint the web applies under `min-width` (below it the column is\n * narrower anyway); the `responsive` media query becomes a window-width test;\n * `centered`'s `100vh` becomes the window height. `padded` and `padding=\"none\"`\n * paint what the web paints — see `containerPaddingUnits`.\n */\nexport function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {\n  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;\n  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);\n  return {\n    width: '100%',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],\n    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),\n    ...(a.variant === 'centered'\n      ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }\n      : null),\n  };\n}\n\n/** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */\nexport const Container = React.forwardRef<View, ContainerProps>(\n  ({ children, maxWidth = 'lg', variant = 'default', padding = 'md', responsive = true, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const window = useWindowDimensions();\n    const resolved = React.useMemo(\n      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),\n      [theme, variant, maxWidth, padding, responsive, window],\n    );\n\n    return (\n      <View\n        ref={ref}\n        style={[resolved, style]}\n        testID={resolveTestId(others, 'container')}\n        {...withoutTestIdProps(others)}\n      >\n        {children}\n      </View>\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n","import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is PAINTED with, in spacing units.\n *\n * This is the web's painted result, not its declared intent, and two of its\n * rules are worth knowing before reaching for them:\n *\n * - `padding=\"none\"` paints the default. The web reads its map with `||`, so\n *   `none`'s 0 falls through to `md`.\n * - `variant=\"padded\"` paints the same inset as `default`. The web declares its\n *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the\n *   `padding` shorthand, which therefore overrides them.\n *\n * Both renderers read this one function so they agree today; either fix is a\n * change to the web's emitted CSS and to this function, made together.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,2BAA2C;;;ACiBnD,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAMpD,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAiBO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;;;AD5BM;AA1BC,SAAS,eAAe,OAAgB,GAAkC;AAC/E,QAAM,UAAU,EAAE,cAAc,EAAE,OAAO,QAAQ;AACjD,QAAM,QAAQ,yBAAyB,EAAE,SAAS,EAAE,QAAQ;AAC5D,SAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU,UAAU,QAAQ,SAAY,qBAAqB,KAAK;AAAA,IAClE,SAAS,MAAM,QAAQ,sBAAsB,EAAE,SAAS,OAAO,CAAC;AAAA,IAChE,GAAI,EAAE,YAAY,aACd,EAAE,YAAY,UAAU,gBAAgB,UAAU,WAAW,EAAE,OAAO,OAAO,IAC7E;AAAA,EACN;AACF;AAGO,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,MAAM,UAAU,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ;AAChH,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,oBAAoB;AACnC,UAAM,WAAiB;AAAA,MACrB,MAAM,eAAe,OAAO,EAAE,SAAS,UAAU,SAAS,YAAY,OAAO,CAAC;AAAA,MAC9E,CAAC,OAAO,SAAS,UAAU,SAAS,YAAY,MAAM;AAAA,IACxD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,QAAQ,WAAW;AAAA,QACxC,GAAG,mBAAmB,MAAM;AAAA,QAE5B;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/native/layout/Spacer.js

@@ -0,0 +1,80 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  cssLengthToPx
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/layout/Spacer/Spacer.native.tsx
+import * as React from "react";
+import { View } from "react-native";
+
+// src/components/layout/Spacer/Spacer.metrics.ts
+var SPACER_SIZE_UNITS = {
+  xs: 0.5,
+  sm: 1,
+  md: 2,
+  lg: 3,
+  xl: 4
+};
+var SPACER_DEFAULT_SIZE = "md";
+var SPACER_DEFAULT_DIRECTION = "both";
+var SPACER_FLEX_GROW = 1;
+var SPACER_FLEX_SHRINK = 0;
+function spacerDimensions(geometry, spacing) {
+  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;
+  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);
+  return {
+    width: direction === "vertical" ? width : width ?? step,
+    height: direction === "horizontal" ? height : height ?? step
+  };
+}
+
+// src/components/layout/Spacer/Spacer.native.tsx
+import { jsx } from "react/jsx-runtime";
+var PERCENTAGE = /^-?\d+(\.\d+)?%$/;
+var RESOLVABLE_LENGTH = /^-?\d+(\.\d+)?(px|rem|em)$/;
+function toNativeDimension(value) {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return void 0;
+  if (value === "auto") return "auto";
+  if (PERCENTAGE.test(value)) return value;
+  if (!RESOLVABLE_LENGTH.test(value)) return void 0;
+  const px = cssLengthToPx(value, Number.NaN);
+  return Number.isNaN(px) ? void 0 : px;
+}
+var Spacer = React.forwardRef(
+  ({ size, direction, width, height, flex = false, style, ...others }, ref) => {
+    const theme = useUiTheme();
+    const dimensions = spacerDimensions(
+      { size, direction, width: toNativeDimension(width), height: toNativeDimension(height) },
+      theme.spacing
+    );
+    const resolved = {
+      width: dimensions.width,
+      height: dimensions.height,
+      flex: flex ? SPACER_FLEX_GROW : void 0,
+      flexShrink: SPACER_FLEX_SHRINK,
+      pointerEvents: "none"
+    };
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ref,
+        "aria-hidden": true,
+        style: [resolved, style],
+        testID: resolveTestId(others),
+        ...withoutTestIdProps(others)
+      }
+    );
+  }
+);
+Spacer.displayName = "Spacer";
+export {
+  Spacer
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/native/layout/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layout/Spacer/Spacer.native.tsx","../../../src/components/layout/Spacer/Spacer.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, type ViewStyle } from 'react-native';\n\nimport { SPACER_FLEX_GROW, SPACER_FLEX_SHRINK, spacerDimensions } from './Spacer.metrics';\nimport type { SpacerDimension, SpacerProps } from './Spacer.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { cssLengthToPx } from '../../../tokens/css-units';\nimport type { BoxDimension } from '../Box/Box.base';\n\nconst PERCENTAGE = /^-?\\d+(\\.\\d+)?%$/;\n/** The lengths a 16px root can resolve. `vw`, `vh`, `ch`, `pt` and `calc()` cannot. */\nconst RESOLVABLE_LENGTH = /^-?\\d+(\\.\\d+)?(px|rem|em)$/;\n\n/**\n * A caller's dimension as React Native can take it. Numbers, percentages and\n * `auto` pass through; a CSS length (`2rem`, `1.5em`, `20px`) is read against\n * the 16px root the web would use, so the same string measures the same on\n * both sides. Anything else (`calc()`, `vw`) is not a length React Native has,\n * and yields to the size step — the same fallback an unset dimension takes.\n */\nexport function toNativeDimension(value: SpacerDimension | undefined): BoxDimension | undefined {\n  if (typeof value === 'number') return value;\n  if (typeof value !== 'string') return undefined;\n  if (value === 'auto') return 'auto';\n  if (PERCENTAGE.test(value)) return value as `${number}%`;\n  // Matched before conversion, because `cssLengthToPx` reads any string\n  // `parseFloat` can start — `50vw` would silently become 50 px.\n  if (!RESOLVABLE_LENGTH.test(value)) return undefined;\n  const px = cssLengthToPx(value, Number.NaN);\n  return Number.isNaN(px) ? undefined : px;\n}\n\n/**\n * The native `Spacer`: an empty `View` sized from the same metrics the web\n * puts in `sx`. Hidden from assistive technology and deaf to touches, as the\n * web one is to the pointer.\n */\nexport const Spacer = React.forwardRef<View, SpacerProps>(\n  ({ size, direction, width, height, flex = false, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const dimensions = spacerDimensions(\n      { size, direction, width: toNativeDimension(width), height: toNativeDimension(height) },\n      theme.spacing,\n    );\n    // `userSelect` is the one web declaration with no View equivalent: a\n    // React Native view holds no text to select.\n    const resolved: ViewStyle = {\n      width: dimensions.width,\n      height: dimensions.height,\n      flex: flex ? SPACER_FLEX_GROW : undefined,\n      flexShrink: SPACER_FLEX_SHRINK,\n      pointerEvents: 'none',\n    };\n\n    return (\n      <View\n        ref={ref}\n        aria-hidden\n        style={[resolved, style]}\n        testID={resolveTestId(others)}\n        {...withoutTestIdProps(others)}\n      />\n    );\n  },\n);\n\nSpacer.displayName = 'Spacer';\n","import type { SpacerDirection, SpacerSize } from './Spacer.base';\n\n/**\n * THE NUMBERS BOTH `Spacer` RENDERERS DRAW WITH.\n *\n * `Spacer.tsx` used to hold the size steps as a `switch` over\n * `theme.spacing(…)` calls, and `Spacer.native.tsx` would have held them again\n * as a second table. Now there is one, in SPACING UNITS, and each renderer\n * multiplies it out through its own `theme.spacing` — `'16px'` on the web,\n * `16` on native — so an `md` spacer is 16 wide on both sides by construction.\n */\nexport const SPACER_SIZE_UNITS: Record<SpacerSize, number> = {\n  xs: 0.5,\n  sm: 1,\n  md: 2,\n  lg: 3,\n  xl: 4,\n};\n\nexport const SPACER_DEFAULT_SIZE: SpacerSize = 'md';\nexport const SPACER_DEFAULT_DIRECTION: SpacerDirection = 'both';\n\n/** `flex` grows the spacer by one share of the free space; every spacer refuses to shrink. */\nexport const SPACER_FLEX_GROW = 1;\nexport const SPACER_FLEX_SHRINK = 0;\n\n/** The geometry props, with the dimension type left to the renderer. */\nexport interface SpacerGeometry<Dimension> {\n  size?: SpacerSize;\n  direction?: SpacerDirection;\n  width?: Dimension;\n  height?: Dimension;\n}\n\n/**\n * The width and height a spacer occupies, on either renderer.\n *\n * An explicit `width`/`height` wins on its axis whatever `direction` says; the\n * step fills only the axes `direction` names. `spacing` is the renderer's own\n * `theme.spacing`, so the same units come out as `'16px'` on the web and `16`\n * on native — the one resolver is what keeps the two from disagreeing.\n */\nexport function spacerDimensions<Dimension, Spacing>(\n  geometry: SpacerGeometry<Dimension>,\n  spacing: (units: number) => Spacing,\n): { width: Dimension | Spacing | undefined; height: Dimension | Spacing | undefined } {\n  const { size = SPACER_DEFAULT_SIZE, direction = SPACER_DEFAULT_DIRECTION, width, height } = geometry;\n  // A size outside the vocabulary (a story control, an untyped caller) draws `md`,\n  // exactly as the old `switch` did in its `default` arm.\n  const step = spacing(SPACER_SIZE_UNITS[size] ?? SPACER_SIZE_UNITS[SPACER_DEFAULT_SIZE]);\n  return {\n    width: direction === 'vertical' ? width : (width ?? step),\n    height: direction === 'horizontal' ? height : (height ?? step),\n  };\n}\n"],"mappings":";;;;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAA4B;;;ACU9B,IAAM,oBAAgD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,sBAAkC;AACxC,IAAM,2BAA4C;AAGlD,IAAM,mBAAmB;AACzB,IAAM,qBAAqB;AAkB3B,SAAS,iBACd,UACA,SACqF;AACrF,QAAM,EAAE,OAAO,qBAAqB,YAAY,0BAA0B,OAAO,OAAO,IAAI;AAG5F,QAAM,OAAO,QAAQ,kBAAkB,IAAI,KAAK,kBAAkB,mBAAmB,CAAC;AACtF,SAAO;AAAA,IACL,OAAO,cAAc,aAAa,QAAS,SAAS;AAAA,IACpD,QAAQ,cAAc,eAAe,SAAU,UAAU;AAAA,EAC3D;AACF;;;ADEM;AA9CN,IAAM,aAAa;AAEnB,IAAM,oBAAoB;AASnB,SAAS,kBAAkB,OAA8D;AAC9F,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,MAAI,UAAU,OAAQ,QAAO;AAC7B,MAAI,WAAW,KAAK,KAAK,EAAG,QAAO;AAGnC,MAAI,CAAC,kBAAkB,KAAK,KAAK,EAAG,QAAO;AAC3C,QAAM,KAAK,cAAc,OAAO,OAAO,GAAG;AAC1C,SAAO,OAAO,MAAM,EAAE,IAAI,SAAY;AACxC;AAOO,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,MAAM,WAAW,OAAO,QAAQ,OAAO,OAAO,OAAO,GAAG,OAAO,GAAG,QAAQ;AAC3E,UAAM,QAAQ,WAAW;AACzB,UAAM,aAAa;AAAA,MACjB,EAAE,MAAM,WAAW,OAAO,kBAAkB,KAAK,GAAG,QAAQ,kBAAkB,MAAM,EAAE;AAAA,MACtF,MAAM;AAAA,IACR;AAGA,UAAM,WAAsB;AAAA,MAC1B,OAAO,WAAW;AAAA,MAClB,QAAQ,WAAW;AAAA,MACnB,MAAM,OAAO,mBAAmB;AAAA,MAChC,YAAY;AAAA,MACZ,eAAe;AAAA,IACjB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,QACX,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,MAAM;AAAA,QAC3B,GAAG,mBAAmB,MAAM;AAAA;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/native/layout/Stack.js

@@ -1,9 +1,9 @@
 import {
   Box
-} from "../chunks/chunk-QZ233LRH.js";
+} from "../chunks/chunk-EKKNUEA6.js";
 import "../chunks/chunk-M4DTJDWU.js";
-import "../chunks/chunk-VGBKUL6D.js";
-import "../chunks/chunk-L2UUNK2M.js";
+import "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
 
 // src/components/layout/Stack/Stack.native.tsx
 import * as React2 from "react";

package/dist/native/provider.js

@@ -1,10 +1,10 @@
 import {
   UiThemeContext,
   useUiTheme
-} from "./chunks/chunk-VGBKUL6D.js";
+} from "./chunks/chunk-YTHR4Y5P.js";
 import {
   createUiTheme
-} from "./chunks/chunk-L2UUNK2M.js";
+} from "./chunks/chunk-P3PL4WBO.js";
 
 // src/provider/UiProvider.native.tsx
 import * as React from "react";

package/dist/native/tokens.js

@@ -30,7 +30,7 @@ import {
   lighten,
   px,
   recomposeColor
-} from "./chunks/chunk-L2UUNK2M.js";
+} from "./chunks/chunk-P3PL4WBO.js";
 export {
   COLOR_VALUES,
   DEFAULT_BRAND,

package/dist/native/typography/Heading.js

@@ -0,0 +1,110 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import {
+  FONT_WEIGHTS,
+  HEADING_SCALE
+} from "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/typography/Heading/Heading.native.tsx
+import * as React from "react";
+import { Text as RNText } from "react-native";
+
+// src/components/typography/Heading/Heading.metrics.ts
+var HEADING_WEIGHTS = FONT_WEIGHTS;
+var HEADING_DEFAULT_LEVEL = "h2";
+var HEADING_DEFAULT_WEIGHT = "bold";
+var HEADING_DEFAULT_COLOR = "neutral";
+var HEADING_RANK = {
+  display: 1,
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+var stepOf = (value) => value !== void 0 && value in HEADING_SCALE ? value : HEADING_DEFAULT_LEVEL;
+var isHeadingWeight = (value) => value in HEADING_WEIGHTS;
+function headingWeight(weight, normalWeight) {
+  if (weight === "normal") return normalWeight;
+  return HEADING_WEIGHTS[isHeadingWeight(weight) ? weight : HEADING_DEFAULT_WEIGHT];
+}
+var NEUTRAL_GRADIENT_STEPS = { from: 500, to: 900 };
+function headingGradientStops(theme, color) {
+  switch (color) {
+    case "primary":
+      return [theme.palette.primary.main, theme.palette.secondary.main];
+    case "secondary":
+      return [theme.palette.secondary.main, theme.palette.primary.main];
+    case "neutral":
+      return [theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from], theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to]];
+    default:
+      return [theme.palette[color].light, theme.palette[color].dark];
+  }
+}
+
+// src/components/typography/Heading/Heading.native.tsx
+import { jsx } from "react/jsx-runtime";
+var inkFor = (theme, color) => color === "neutral" ? theme.palette.text.primary : theme.palette[color].main;
+function headingStyle(theme, a) {
+  const step = theme.typography.heading[a.size];
+  return {
+    fontFamily: theme.typography.fontFamily,
+    fontSize: step.fontSize,
+    lineHeight: step.fontSize * step.lineHeight,
+    letterSpacing: step.letterSpacing === void 0 ? void 0 : step.letterSpacing * step.fontSize,
+    fontWeight: String(headingWeight(a.weight, step.normalWeight)),
+    color: a.gradient ? headingGradientStops(theme, a.color)[0] : inkFor(theme, a.color)
+  };
+}
+var Heading = React.forwardRef(
+  ({
+    level = HEADING_DEFAULT_LEVEL,
+    size,
+    color = HEADING_DEFAULT_COLOR,
+    weight = HEADING_DEFAULT_WEIGHT,
+    gradient = false,
+    children,
+    style,
+    onClick,
+    onPress,
+    ...others
+  }, ref) => {
+    const rest = withoutTestIdProps(others);
+    const theme = useUiTheme();
+    const rank = HEADING_RANK[stepOf(level)];
+    const step = stepOf(size ?? level);
+    const resolved = React.useMemo(
+      () => headingStyle(theme, { size: step, color, weight, gradient }),
+      [theme, step, color, weight, gradient]
+    );
+    const handlePress = onClick || onPress ? (event) => {
+      onClick?.(event);
+      onPress?.(event);
+    } : void 0;
+    return /* @__PURE__ */ jsx(
+      RNText,
+      {
+        ref,
+        role: "heading",
+        "aria-level": rank,
+        style: [resolved, style],
+        testID: resolveTestId(others),
+        onPress: handlePress,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+export {
+  Heading,
+  headingStyle
+};
+//# sourceMappingURL=Heading.js.map

package/dist/native/typography/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/typography/Heading/Heading.native.tsx","../../../src/components/typography/Heading/Heading.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { Text as RNText, type GestureResponderEvent, type TextStyle } from 'react-native';\n\nimport type { HeadingWeight } from './Heading.base';\nimport {\n  HEADING_DEFAULT_COLOR,\n  HEADING_DEFAULT_LEVEL,\n  HEADING_DEFAULT_WEIGHT,\n  HEADING_RANK,\n  headingGradientStops,\n  headingWeight,\n  stepOf,\n} from './Heading.metrics';\nimport type { HeadingProps } from './Heading.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { HeadingLevel } from '../../../tokens/heading-scale';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/** Same mapping as the web `getColorFromTheme`: neutral is body ink, every other colour its slot's main. */\nconst inkFor = (theme: UiTheme, color: ColorValue): string =>\n  color === 'neutral' ? theme.palette.text.primary : theme.palette[color].main;\n\nexport interface HeadingStyleArgs {\n  /** The step to DRAW — `size ?? level`, already resolved to a name the scale has. */\n  size: HeadingLevel;\n  color: ColorValue;\n  weight: HeadingWeight;\n  gradient: boolean;\n}\n\n/**\n * The style the web `headingSx` computes, in absolute numbers. The step comes\n * from the theme's heading scale (`HEADING_SCALE` unless the host built its\n * own), and its `lineHeight` ratio and `letterSpacing` em are multiplied out\n * because React Native has neither unit.\n *\n * `gradient` is the one honest gap: React Native has no `background-clip:\n * text` and no gradient fill in core, so the glyphs take the gradient's first\n * stop as a flat colour — the same choice the native `Button` makes.\n */\nexport function headingStyle(theme: UiTheme, a: HeadingStyleArgs): TextStyle {\n  const step = theme.typography.heading[a.size];\n  return {\n    fontFamily: theme.typography.fontFamily,\n    fontSize: step.fontSize,\n    lineHeight: step.fontSize * step.lineHeight,\n    letterSpacing: step.letterSpacing === undefined ? undefined : step.letterSpacing * step.fontSize,\n    fontWeight: String(headingWeight(a.weight, step.normalWeight)) as TextStyle['fontWeight'],\n    color: a.gradient ? headingGradientStops(theme, a.color)[0] : inkFor(theme, a.color),\n  };\n}\n\nexport const Heading = React.forwardRef<RNText, HeadingProps>(\n  (\n    {\n      level = HEADING_DEFAULT_LEVEL,\n      size,\n      color = HEADING_DEFAULT_COLOR,\n      weight = HEADING_DEFAULT_WEIGHT,\n      gradient = false,\n      children,\n      style,\n      onClick,\n      onPress,\n      ...others\n    },\n    ref,\n  ) => {\n    const rest = withoutTestIdProps(others);\n    const theme = useUiTheme();\n    // The rank is `level`'s; the drawn step is `size`'s, falling back to the\n    // rank's — the same two derivations the web makes from the same two props.\n    const rank = HEADING_RANK[stepOf(level)];\n    const step = stepOf(size ?? level);\n    const resolved = React.useMemo(\n      () => headingStyle(theme, { size: step, color, weight, gradient }),\n      [theme, step, color, weight, gradient],\n    );\n    const handlePress =\n      onClick || onPress\n        ? (event: GestureResponderEvent): void => {\n            onClick?.(event);\n            onPress?.(event);\n          }\n        : undefined;\n\n    return (\n      <RNText\n        ref={ref}\n        role=\"heading\"\n        aria-level={rank}\n        style={[resolved, style]}\n        testID={resolveTestId(others)}\n        onPress={handlePress}\n        {...rest}\n      >\n        {children}\n      </RNText>\n    );\n  },\n);\n\nHeading.displayName = 'Heading';\n","import type { HeadingWeight } from './Heading.base';\nimport { HEADING_SCALE, type HeadingLevel } from '../../../tokens/heading-scale';\nimport { FONT_WEIGHTS, type UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Heading` RENDERERS DRAW WITH.\n *\n * The type scale itself is `HEADING_SCALE` in `tokens/heading-scale.ts` (the\n * web reads it through the MUI theme's `headingScale` overrides, native\n * through `UiTheme.typography.heading`). What lives here is everything ELSE\n * `Heading.styles.ts` used to declare inline: the weight table, the defaults,\n * the rank each level announces, and the gradient's angle and stops.\n */\nexport const HEADING_WEIGHTS: Record<HeadingWeight, number> = FONT_WEIGHTS;\n\nexport const HEADING_DEFAULT_LEVEL: HeadingLevel = 'h2';\nexport const HEADING_DEFAULT_WEIGHT: HeadingWeight = 'bold';\nexport const HEADING_DEFAULT_COLOR: ColorValue = 'neutral';\n\nexport type HeadingRank = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * The outline rank each level announces — the tag on the web, `aria-level` on\n * native. `display` is a SIZE, not a rank, so it is an h1: the document still\n * gets one level-one heading rather than an unnamed tag outside the outline.\n */\nexport const HEADING_RANK: Record<HeadingLevel, HeadingRank> = {\n  display: 1,\n  h1: 1,\n  h2: 2,\n  h3: 3,\n  h4: 4,\n  h5: 5,\n  h6: 6,\n};\n\n/** A step name the scale actually has, or the documented default (`h2`). */\nexport const stepOf = (value: string | undefined): HeadingLevel =>\n  value !== undefined && value in HEADING_SCALE ? (value as HeadingLevel) : HEADING_DEFAULT_LEVEL;\n\nconst isHeadingWeight = (value: string): value is HeadingWeight => value in HEADING_WEIGHTS;\n\n/**\n * The weight a heading draws: `normal` is the weight the step was designed to\n * carry (heavier as the step gets larger), anything else its table entry, and\n * a name outside the vocabulary the default — as `Heading.styles.ts` has\n * always fallen back.\n */\nexport function headingWeight(weight: string, normalWeight: number): number {\n  if (weight === 'normal') return normalWeight;\n  return HEADING_WEIGHTS[isHeadingWeight(weight) ? weight : HEADING_DEFAULT_WEIGHT];\n}\n\n/** The gradient runs corner to corner. */\nexport const HEADING_GRADIENT_ANGLE = 135;\n\n/**\n * `neutral` has no light/dark pair, so its gradient runs between two steps of\n * the grey ramp.\n */\nexport const NEUTRAL_GRADIENT_STEPS = { from: 500, to: 900 } as const;\n\n/** The CSS the web paints the glyphs with, from the two stops. */\nexport const headingGradient = (from: string, to: string): string =>\n  `linear-gradient(${HEADING_GRADIENT_ANGLE}deg, ${from} 0%, ${to} 100%)`;\n\n/**\n * The two stops each colour paints its glyphs with, read off a `UiTheme`. The\n * web's `Heading.styles.ts` keeps its MUI-typed twin of this table; the pairs\n * are the same, and `Heading.native.test.tsx` asserts as much.\n */\nexport function headingGradientStops(theme: UiTheme, color: ColorValue): [string, string] {\n  switch (color) {\n    case 'primary':\n      return [theme.palette.primary.main, theme.palette.secondary.main];\n    case 'secondary':\n      return [theme.palette.secondary.main, theme.palette.primary.main];\n    case 'neutral':\n      return [theme.palette.grey[NEUTRAL_GRADIENT_STEPS.from], theme.palette.grey[NEUTRAL_GRADIENT_STEPS.to]];\n    default:\n      return [theme.palette[color].light, theme.palette[color].dark];\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/native/typography/Paragraph.js

@@ -0,0 +1,86 @@
+import {
+  resolveTestId,
+  withoutTestIdProps
+} from "../chunks/chunk-M4DTJDWU.js";
+import {
+  useUiTheme
+} from "../chunks/chunk-YTHR4Y5P.js";
+import "../chunks/chunk-P3PL4WBO.js";
+
+// src/components/typography/Paragraph/Paragraph.native.tsx
+import * as React from "react";
+import { Text as RNText } from "react-native";
+
+// src/components/typography/Paragraph/Paragraph.metrics.ts
+var PARAGRAPH_SIZES = {
+  xs: { fontSize: 12, lineHeight: 1.4 },
+  sm: { fontSize: 14, lineHeight: 1.5 },
+  md: { fontSize: 16, lineHeight: 1.6 },
+  lg: { fontSize: 18, lineHeight: 1.6 },
+  xl: { fontSize: 20, lineHeight: 1.7 }
+};
+var PARAGRAPH_FONT_WEIGHT = 400;
+var PARAGRAPH_MARGIN_BOTTOM_EM = 1;
+var LEAD_FONT_SIZE = 18;
+var LEAD_LINE_HEIGHT = 1.7;
+var LEAD_LETTER_SPACING_EM = 0.01;
+var MUTED_OPACITY = 0.8;
+var SMALL_FONT_SIZE = 14;
+var SMALL_LINE_HEIGHT = 1.5;
+
+// src/components/typography/Paragraph/Paragraph.native.tsx
+import { jsx } from "react/jsx-runtime";
+var inkFor = (theme, color) => color === "neutral" ? theme.palette.text.primary : theme.palette[color].main;
+var sizeOverride = (size, atDefault) => size === "md" ? atDefault : PARAGRAPH_SIZES[size].fontSize;
+var WEIGHT = String(PARAGRAPH_FONT_WEIGHT);
+function paragraphStyle(theme, a) {
+  const step = PARAGRAPH_SIZES[a.size];
+  const metrics = (fontSize, lineHeight) => ({
+    fontFamily: theme.typography.fontFamily,
+    fontSize,
+    lineHeight: fontSize * lineHeight,
+    marginBottom: fontSize * PARAGRAPH_MARGIN_BOTTOM_EM,
+    fontWeight: WEIGHT
+  });
+  switch (a.variant) {
+    case "lead": {
+      const fontSize = sizeOverride(a.size, LEAD_FONT_SIZE);
+      return {
+        ...metrics(fontSize, LEAD_LINE_HEIGHT),
+        color: inkFor(theme, a.color),
+        letterSpacing: LEAD_LETTER_SPACING_EM * fontSize
+      };
+    }
+    case "muted":
+      return {
+        ...metrics(step.fontSize, step.lineHeight),
+        color: theme.palette.text.secondary,
+        opacity: MUTED_OPACITY
+      };
+    case "small":
+      return {
+        ...metrics(sizeOverride(a.size, SMALL_FONT_SIZE), SMALL_LINE_HEIGHT),
+        color: theme.palette.text.secondary
+      };
+    default:
+      return { ...metrics(step.fontSize, step.lineHeight), color: inkFor(theme, a.color) };
+  }
+}
+var Paragraph = React.forwardRef(
+  ({ variant = "default", color = "neutral", size = "md", children, style, onClick, onPress, ...others }, ref) => {
+    const rest = withoutTestIdProps(others);
+    const theme = useUiTheme();
+    const resolved = React.useMemo(() => paragraphStyle(theme, { variant, color, size }), [theme, variant, color, size]);
+    const handlePress = onClick || onPress ? (event) => {
+      onClick?.(event);
+      onPress?.(event);
+    } : void 0;
+    return /* @__PURE__ */ jsx(RNText, { ref, style: [resolved, style], testID: resolveTestId(others), onPress: handlePress, ...rest, children });
+  }
+);
+Paragraph.displayName = "Paragraph";
+export {
+  Paragraph,
+  paragraphStyle
+};
+//# sourceMappingURL=Paragraph.js.map

package/dist/native/typography/Paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/typography/Paragraph/Paragraph.native.tsx","../../../src/components/typography/Paragraph/Paragraph.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { Text as RNText, type GestureResponderEvent, type TextStyle } from 'react-native';\n\nimport {\n  LEAD_FONT_SIZE,\n  LEAD_LETTER_SPACING_EM,\n  LEAD_LINE_HEIGHT,\n  MUTED_OPACITY,\n  PARAGRAPH_FONT_WEIGHT,\n  PARAGRAPH_MARGIN_BOTTOM_EM,\n  PARAGRAPH_SIZES,\n  SMALL_FONT_SIZE,\n  SMALL_LINE_HEIGHT,\n} from './Paragraph.metrics';\nimport type { ParagraphProps, ParagraphVariant } from './Paragraph.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\n\n/** Same mapping as the web `getColorFromTheme`: neutral is body ink, every other colour its slot's main. */\nconst inkFor = (theme: UiTheme, color: ColorValue): string =>\n  color === 'neutral' ? theme.palette.text.primary : theme.palette[color].main;\n\n/** `lead` and `small` step up or down relative to the scale, but only at the default size. */\nconst sizeOverride = (size: SizeValue, atDefault: number): number =>\n  size === 'md' ? atDefault : PARAGRAPH_SIZES[size].fontSize;\n\n/** React Native wants the weight as a string. */\nconst WEIGHT = String(PARAGRAPH_FONT_WEIGHT) as TextStyle['fontWeight'];\n\nexport interface ParagraphStyleArgs {\n  variant: ParagraphVariant;\n  color: ColorValue;\n  size: SizeValue;\n}\n\n/**\n * The style the web `Paragraph` computes, in absolute numbers. `lineHeight`,\n * `letterSpacing` and the `1em` bottom margin are multiplied out here because\n * React Native has no ratio or `em` unit — the web keeps them relative and the\n * browser does this step.\n */\nexport function paragraphStyle(theme: UiTheme, a: ParagraphStyleArgs): TextStyle {\n  const step = PARAGRAPH_SIZES[a.size];\n  const metrics = (fontSize: number, lineHeight: number): TextStyle => ({\n    fontFamily: theme.typography.fontFamily,\n    fontSize,\n    lineHeight: fontSize * lineHeight,\n    marginBottom: fontSize * PARAGRAPH_MARGIN_BOTTOM_EM,\n    fontWeight: WEIGHT,\n  });\n\n  switch (a.variant) {\n    case 'lead': {\n      const fontSize = sizeOverride(a.size, LEAD_FONT_SIZE);\n      return {\n        ...metrics(fontSize, LEAD_LINE_HEIGHT),\n        color: inkFor(theme, a.color),\n        letterSpacing: LEAD_LETTER_SPACING_EM * fontSize,\n      };\n    }\n    case 'muted':\n      return {\n        ...metrics(step.fontSize, step.lineHeight),\n        color: theme.palette.text.secondary,\n        opacity: MUTED_OPACITY,\n      };\n    case 'small':\n      return {\n        ...metrics(sizeOverride(a.size, SMALL_FONT_SIZE), SMALL_LINE_HEIGHT),\n        color: theme.palette.text.secondary,\n      };\n    default:\n      return { ...metrics(step.fontSize, step.lineHeight), color: inkFor(theme, a.color) };\n  }\n}\n\nexport const Paragraph = React.forwardRef<RNText, ParagraphProps>(\n  ({ variant = 'default', color = 'neutral', size = 'md', children, style, onClick, onPress, ...others }, ref) => {\n    const rest = withoutTestIdProps(others);\n    const theme = useUiTheme();\n    const resolved = React.useMemo(() => paragraphStyle(theme, { variant, color, size }), [theme, variant, color, size]);\n    const handlePress =\n      onClick || onPress\n        ? (event: GestureResponderEvent): void => {\n            onClick?.(event);\n            onPress?.(event);\n          }\n        : undefined;\n\n    return (\n      <RNText ref={ref} style={[resolved, style]} testID={resolveTestId(others)} onPress={handlePress} {...rest}>\n        {children}\n      </RNText>\n    );\n  },\n);\n\nParagraph.displayName = 'Paragraph';\n","import type { UiTypeStep } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Paragraph` RENDERERS DRAW WITH.\n *\n * `Paragraph.tsx` used to hold these as rem strings inside its styled\n * callback, and `Paragraph.native.tsx` would have held them again as numbers.\n * Now there is one table, in px, and the web derives its rem from it (`px()`\n * in the theme). Ratios and `em` values stay relative; the native side\n * multiplies them out because React Native's `lineHeight`, `letterSpacing` and\n * margins are absolute.\n *\n * NOT `TYPE_SIZES`: a paragraph is set looser than `Text`'s body scale (1.6\n * against 1.5 at `md`), because it is read in runs of lines rather than as a\n * label. The font sizes are the same five steps.\n */\nexport const PARAGRAPH_SIZES: Record<SizeValue, UiTypeStep> = {\n  xs: { fontSize: 12, lineHeight: 1.4 },\n  sm: { fontSize: 14, lineHeight: 1.5 },\n  md: { fontSize: 16, lineHeight: 1.6 },\n  lg: { fontSize: 18, lineHeight: 1.6 },\n  xl: { fontSize: 20, lineHeight: 1.7 },\n};\n\nexport const PARAGRAPH_FONT_WEIGHT = 400;\n\n/** `margin: 0 0 1em 0` — one line of its own type below each paragraph. */\nexport const PARAGRAPH_MARGIN_BOTTOM_EM = 1;\n\n/** The `lead` variant: a step up at the default size, looser leading and tracking. */\nexport const LEAD_FONT_SIZE = 18;\nexport const LEAD_LINE_HEIGHT = 1.7;\nexport const LEAD_LETTER_SPACING_EM = 0.01;\n\n/** The `muted` variant: the secondary ink, faded further. */\nexport const MUTED_OPACITY = 0.8;\n\n/** The `small` variant: a step down at the default size, on the secondary ink. */\nexport const SMALL_FONT_SIZE = 14;\nexport const SMALL_LINE_HEIGHT = 1.5;\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,QAAQ,cAA0D;;;ACgBpE,IAAM,kBAAiD;AAAA,EAC5D,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AAAA,EACpC,IAAI,EAAE,UAAU,IAAI,YAAY,IAAI;AACtC;AAEO,IAAM,wBAAwB;AAG9B,IAAM,6BAA6B;AAGnC,IAAM,iBAAiB;AACvB,IAAM,mBAAmB;AACzB,IAAM,yBAAyB;AAG/B,IAAM,gBAAgB;AAGtB,IAAM,kBAAkB;AACxB,IAAM,oBAAoB;;;ADoD3B;AAvEN,IAAM,SAAS,CAAC,OAAgB,UAC9B,UAAU,YAAY,MAAM,QAAQ,KAAK,UAAU,MAAM,QAAQ,KAAK,EAAE;AAG1E,IAAM,eAAe,CAAC,MAAiB,cACrC,SAAS,OAAO,YAAY,gBAAgB,IAAI,EAAE;AAGpD,IAAM,SAAS,OAAO,qBAAqB;AAcpC,SAAS,eAAe,OAAgB,GAAkC;AAC/E,QAAM,OAAO,gBAAgB,EAAE,IAAI;AACnC,QAAM,UAAU,CAAC,UAAkB,gBAAmC;AAAA,IACpE,YAAY,MAAM,WAAW;AAAA,IAC7B;AAAA,IACA,YAAY,WAAW;AAAA,IACvB,cAAc,WAAW;AAAA,IACzB,YAAY;AAAA,EACd;AAEA,UAAQ,EAAE,SAAS;AAAA,IACjB,KAAK,QAAQ;AACX,YAAM,WAAW,aAAa,EAAE,MAAM,cAAc;AACpD,aAAO;AAAA,QACL,GAAG,QAAQ,UAAU,gBAAgB;AAAA,QACrC,OAAO,OAAO,OAAO,EAAE,KAAK;AAAA,QAC5B,eAAe,yBAAyB;AAAA,MAC1C;AAAA,IACF;AAAA,IACA,KAAK;AACH,aAAO;AAAA,QACL,GAAG,QAAQ,KAAK,UAAU,KAAK,UAAU;AAAA,QACzC,OAAO,MAAM,QAAQ,KAAK;AAAA,QAC1B,SAAS;AAAA,MACX;AAAA,IACF,KAAK;AACH,aAAO;AAAA,QACL,GAAG,QAAQ,aAAa,EAAE,MAAM,eAAe,GAAG,iBAAiB;AAAA,QACnE,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,IACF;AACE,aAAO,EAAE,GAAG,QAAQ,KAAK,UAAU,KAAK,UAAU,GAAG,OAAO,OAAO,OAAO,EAAE,KAAK,EAAE;AAAA,EACvF;AACF;AAEO,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,MAAM,UAAU,OAAO,SAAS,SAAS,GAAG,OAAO,GAAG,QAAQ;AAC9G,UAAM,OAAO,mBAAmB,MAAM;AACtC,UAAM,QAAQ,WAAW;AACzB,UAAM,WAAiB,cAAQ,MAAM,eAAe,OAAO,EAAE,SAAS,OAAO,KAAK,CAAC,GAAG,CAAC,OAAO,SAAS,OAAO,IAAI,CAAC;AACnH,UAAM,cACJ,WAAW,UACP,CAAC,UAAuC;AACtC,gBAAU,KAAK;AACf,gBAAU,KAAK;AAAA,IACjB,IACA;AAEN,WACE,oBAAC,UAAO,KAAU,OAAO,CAAC,UAAU,KAAK,GAAG,QAAQ,cAAc,MAAM,GAAG,SAAS,aAAc,GAAG,MAClG,UACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}