@wealthx/ui 1.0.0 → 1.0.1

package/dist/table.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table.tsx
+var table_exports = {};
+__export(table_exports, {
+  Table: () => Table
+});
+module.exports = __toCommonJS(table_exports);
+var import_react = __toESM(require("react"));
+var import_Table = __toESM(require("@mui/material/Table"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Table = import_react.default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Table.default, __spreadValues({ ref }, props));
+  }
+);
+Table.displayName = "Table";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table
+});

package/dist/table.mjs

@@ -0,0 +1,17 @@
+import {
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/table.tsx
+import React from "react";
+import MuiTable from "@mui/material/Table";
+import { jsx } from "react/jsx-runtime";
+var Table = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(MuiTable, __spreadValues({ ref }, props));
+  }
+);
+Table.displayName = "Table";
+export {
+  Table
+};

package/dist/tabs.d.mts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+
+type TabsProps = TabsProps$1;
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, type TabsProps };

package/dist/tabs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TabsProps as TabsProps$1 } from '@mui/material/Tabs';
+
+type TabsProps = TabsProps$1;
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, type TabsProps };

package/dist/tabs.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tabs.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_react = __toESM(require("react"));
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tabs = import_react.default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.default, __spreadValues({ ref }, props));
+  }
+);
+Tabs.displayName = "Tabs";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs
+});

package/dist/tabs.mjs

@@ -0,0 +1,17 @@
+import {
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/tabs.tsx
+import React from "react";
+import MuiTabs from "@mui/material/Tabs";
+import { jsx } from "react/jsx-runtime";
+var Tabs = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(MuiTabs, __spreadValues({ ref }, props));
+  }
+);
+Tabs.displayName = "Tabs";
+export {
+  Tabs
+};

package/dist/text-field.d.mts

@@ -0,0 +1,8 @@
+import * as _mui_material_TextField from '@mui/material/TextField';
+import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
+import React from 'react';
+
+type TextFieldProps = TextFieldProps$1;
+declare const TextField: React.ForwardRefExoticComponent<(Omit<_mui_material_TextField.OutlinedTextFieldProps, "ref"> | Omit<_mui_material_TextField.StandardTextFieldProps, "ref"> | Omit<_mui_material_TextField.FilledTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+
+export { TextField, type TextFieldProps };

package/dist/text-field.d.ts

@@ -0,0 +1,8 @@
+import * as _mui_material_TextField from '@mui/material/TextField';
+import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
+import React from 'react';
+
+type TextFieldProps = TextFieldProps$1;
+declare const TextField: React.ForwardRefExoticComponent<(Omit<_mui_material_TextField.OutlinedTextFieldProps, "ref"> | Omit<_mui_material_TextField.StandardTextFieldProps, "ref"> | Omit<_mui_material_TextField.FilledTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+
+export { TextField, type TextFieldProps };

package/dist/text-field.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/text-field.tsx
+var text_field_exports = {};
+__export(text_field_exports, {
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(text_field_exports);
+var import_react = __toESM(require("react"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var TextField = import_react.default.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TextField.default, __spreadValues({ ref }, props));
+  }
+);
+TextField.displayName = "TextField";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextField
+});

package/dist/text-field.mjs

@@ -0,0 +1,17 @@
+import {
+  __spreadValues
+} from "./chunk-FWCSY2DS.mjs";
+
+// src/text-field.tsx
+import React from "react";
+import MuiTextField from "@mui/material/TextField";
+import { jsx } from "react/jsx-runtime";
+var TextField = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(MuiTextField, __spreadValues({ ref }, props));
+  }
+);
+TextField.displayName = "TextField";
+export {
+  TextField
+};

package/dist/theme/index.d.mts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as _mui_material_styles from '@mui/material/styles';
+import '../mui-augmentation-DKlyQ0kQ.mjs';
 
 /**
  * Build CSS variable set for :root from tenant primary/secondary.
@@ -35,10 +36,6 @@ declare namespace ThemeProvider {
     var displayName: string;
 }
 
-/**
- * Create MUI theme with design system palette.
- * Primary and secondary are tenant-based (dynamic).
- */
 interface DesignThemeConfig {
     primary: string;
     secondary: string;
@@ -150,6 +147,18 @@ declare const CHART_COLORS: {
     };
 };
 
+/**
+ * Design system – Spacing scale (4px base).
+ * Matches tokens.css reference: --space-1 … --space-12.
+ */
+/** Base unit in pixels. All spacing tokens are multiples of this. */
+declare const SPACING_BASE_PX = 4;
+/**
+ * Spacing scale: token name → CSS value (e.g. "1" → "4px").
+ * Keys match tokens.css: 1, 2, 3, 4, 5, 6, 8, 10, 12.
+ */
+declare const SPACING_SCALE: Record<string, string>;
+
 /**
  * Design system – Typography (rem-based).
  * Font: Proxima Nova. Base: 16px (1rem).
@@ -243,4 +252,4 @@ declare const VIEWPORT_MAX_WIDTH: Record<ViewportMode, number | undefined>;
 /** Responsive typography overrides for tablet/mobile. Desktop returns {}. */
 declare function getResponsiveFontOverrides(mode: ViewportMode): Record<string, string>;
 
-export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };
+export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, SPACING_BASE_PX, SPACING_SCALE, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };

package/dist/theme/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import * as _mui_material_styles from '@mui/material/styles';
+import '../mui-augmentation-DKlyQ0kQ.js';
 
 /**
  * Build CSS variable set for :root from tenant primary/secondary.
@@ -35,10 +36,6 @@ declare namespace ThemeProvider {
     var displayName: string;
 }
 
-/**
- * Create MUI theme with design system palette.
- * Primary and secondary are tenant-based (dynamic).
- */
 interface DesignThemeConfig {
     primary: string;
     secondary: string;
@@ -150,6 +147,18 @@ declare const CHART_COLORS: {
     };
 };
 
+/**
+ * Design system – Spacing scale (4px base).
+ * Matches tokens.css reference: --space-1 … --space-12.
+ */
+/** Base unit in pixels. All spacing tokens are multiples of this. */
+declare const SPACING_BASE_PX = 4;
+/**
+ * Spacing scale: token name → CSS value (e.g. "1" → "4px").
+ * Keys match tokens.css: 1, 2, 3, 4, 5, 6, 8, 10, 12.
+ */
+declare const SPACING_SCALE: Record<string, string>;
+
 /**
  * Design system – Typography (rem-based).
  * Font: Proxima Nova. Base: 16px (1rem).
@@ -243,4 +252,4 @@ declare const VIEWPORT_MAX_WIDTH: Record<ViewportMode, number | undefined>;
 /** Responsive typography overrides for tablet/mobile. Desktop returns {}. */
 declare function getResponsiveFontOverrides(mode: ViewportMode): Record<string, string>;
 
-export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };
+export { ACCENTS, CHART_COLORS, type DesignThemeConfig, type DesignThemeOptions, FONT_FAMILY_SANS, FOUNDATION_COLORS, GRAY_SCALE, OPACITY_UTILITY, SPACING_BASE_PX, SPACING_SCALE, TYPOGRAPHY, TYPOGRAPHY_BODY, TYPOGRAPHY_DISPLAY, TYPOGRAPHY_EXTRA_CSS, TYPOGRAPHY_HEADING, TYPOGRAPHY_LABEL, TYPOGRAPHY_UTILITY, ThemeProvider, type ThemeProviderProps, type TypographyStyle, VIEWPORT_LABELS, VIEWPORT_MAX_WIDTH, type ViewportMode, buildCssVariables, buildOpacityScale, createDesignTheme, getContrastText, getLuminance, getResponsiveFontOverrides, getTypographyCssVars, hexToRgb, rgbToCssRgbString, rgba };

package/dist/theme/index.js

@@ -53,6 +53,8 @@ __export(theme_exports, {
   FOUNDATION_COLORS: () => FOUNDATION_COLORS,
   GRAY_SCALE: () => GRAY_SCALE,
   OPACITY_UTILITY: () => OPACITY_UTILITY,
+  SPACING_BASE_PX: () => SPACING_BASE_PX,
+  SPACING_SCALE: () => SPACING_SCALE,
   TYPOGRAPHY: () => TYPOGRAPHY,
   TYPOGRAPHY_BODY: () => TYPOGRAPHY_BODY,
   TYPOGRAPHY_DISPLAY: () => TYPOGRAPHY_DISPLAY,
@@ -398,10 +400,12 @@ function buildSecondaryScalePalette(secondaryHex) {
 function createDesignTheme(config) {
   const { primary, secondary } = config;
   const foundation = FOUNDATION_COLORS;
+  const primaryPalette = buildPrimaryScalePalette(primary);
+  const secondaryPalette = buildSecondaryScalePalette(secondary);
   const palette = {
     mode: "light",
-    primary: buildPrimaryScalePalette(primary),
-    secondary: buildSecondaryScalePalette(secondary),
+    primary: primaryPalette,
+    secondary: secondaryPalette,
     error: {
       main: FOUNDATION_COLORS.state.error
     },
@@ -506,6 +510,107 @@ function createDesignTheme(config) {
           }
         }
       },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: ({ ownerState }) => {
+            const palette2 = ownerState.color === "secondary" ? secondaryPalette : primaryPalette;
+            const outlined = ownerState.outlined === true;
+            return {
+              borderRadius: 0,
+              textTransform: "none",
+              color: CONTRAST_DARK,
+              "&:hover": {
+                backgroundColor: palette2[100]
+              },
+              "&.MuiToggleButtonGroup-lastButton, &.MuiToggleButtonGroup-middleButton": outlined ? {
+                borderLeft: `1px solid ${foundation.border.default}`,
+                borderTop: `1px solid ${foundation.border.default}`
+              } : {},
+              "&.Mui-disabled.MuiToggleButtonGroup-lastButton, &.Mui-disabled.MuiToggleButtonGroup-middleButton": outlined ? {
+                borderLeft: `1px solid ${foundation.border.default}`,
+                borderTop: `1px solid ${foundation.border.default}`
+              } : {},
+              "&.Mui-selected": outlined ? {
+                backgroundColor: palette2[100],
+                border: `1px solid ${palette2.main}`,
+                color: CONTRAST_DARK
+              } : {
+                backgroundColor: palette2.main,
+                color: palette2.contrastText,
+                "&:hover": {
+                  backgroundColor: palette2.dark,
+                  color: palette2.contrastText
+                }
+              }
+            };
+          }
+        }
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 46,
+                  height: 46,
+                  padding: (46 - 28) / 2,
+                  "& .MuiSvgIcon-root": { fontSize: 28 }
+                }
+              }
+            ]
+          }
+        }
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          root: {
+            variants: [
+              {
+                props: { size: "large" },
+                style: {
+                  width: 68,
+                  height: 44,
+                  padding: 8,
+                  "& .MuiSwitch-switchBase": {
+                    padding: 8,
+                    "&.Mui-checked": {
+                      transform: "translateX(24px)"
+                    }
+                  },
+                  "& .MuiSwitch-thumb": {
+                    width: 28,
+                    height: 28
+                  },
+                  "& .MuiSwitch-track": {
+                    height: 16,
+                    margin: "auto",
+                    borderRadius: 16 / 2
+                  }
+                }
+              }
+            ]
+          }
+        }
+      },
       MuiCssBaseline: {
         styleOverrides: {
           ":root": {
@@ -519,6 +624,20 @@ function createDesignTheme(config) {
   return (0, import_styles.createTheme)(themeOptions);
 }
 
+// src/theme/spacing.ts
+var SPACING_BASE_PX = 4;
+var SPACING_SCALE = {
+  "1": `${1 * SPACING_BASE_PX}px`,
+  "2": `${2 * SPACING_BASE_PX}px`,
+  "3": `${3 * SPACING_BASE_PX}px`,
+  "4": `${4 * SPACING_BASE_PX}px`,
+  "5": `${5 * SPACING_BASE_PX}px`,
+  "6": `${6 * SPACING_BASE_PX}px`,
+  "8": `${8 * SPACING_BASE_PX}px`,
+  "10": `${10 * SPACING_BASE_PX}px`,
+  "12": `${12 * SPACING_BASE_PX}px`
+};
+
 // src/theme/buildCssVariables.ts
 function entriesToVars(prefix, obj) {
   const out = {};
@@ -559,11 +678,13 @@ function buildCssVariables(options) {
   const secondaryRgb = hexToRgb(secondary);
   const primaryScale = buildPrimaryScale2(primary);
   const secondaryScale = buildSecondaryScale2(secondary);
-  return __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
+  return __spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
     // RGB triplets for opacity-based usage
     "--primary-rgb": rgbToCssRgbString(primaryRgb),
     "--secondary-rgb": rgbToCssRgbString(secondaryRgb),
     // Brand (tenant)
+    "--primary": primary,
+    "--secondary": secondary,
     "--color-brand-primary": primary,
     "--color-brand-secondary": secondary
   }, entriesToVars("--primary-", primaryScale)), entriesToVars("--secondary-", secondaryScale)), {
@@ -592,7 +713,8 @@ function buildCssVariables(options) {
     "--accent-dark-green": ACCENTS.darkGreen,
     // Opacity utility
     "--opacity-disabled": String(OPACITY_UTILITY.disabled),
-    "--opacity-hover": String(OPACITY_UTILITY.hover),
+    "--opacity-hover": String(OPACITY_UTILITY.hover)
+  }), entriesToVars("--space-", SPACING_SCALE)), {
     // Semantic aliases (component-level tokens that alias foundation/extended)
     "--input-background": foundation.background.primary,
     "--input-border": foundation.border.default,
@@ -664,6 +786,8 @@ ThemeProvider.displayName = "ThemeProvider";
   FOUNDATION_COLORS,
   GRAY_SCALE,
   OPACITY_UTILITY,
+  SPACING_BASE_PX,
+  SPACING_SCALE,
   TYPOGRAPHY,
   TYPOGRAPHY_BODY,
   TYPOGRAPHY_DISPLAY,