@zentrades-ui/components 0.1.0 → 0.1.6

package/README.md

@@ -0,0 +1,39 @@
+# @zentrades-ui/components
+
+React component library for the Zen UI kit.
+
+## Installation
+
+```bash
+pnpm add @zentrades-ui/components @zentrades-ui/theme @zentrades-ui/tokens
+```
+
+## Usage
+
+```tsx
+import { ThemeProvider } from "@zentrades-ui/theme";
+import { Button, Input, Stack } from "@zentrades-ui/components";
+
+export function Example() {
+  return (
+    <ThemeProvider>
+      <Stack gap="md">
+        <Input placeholder="Email" />
+        <Button>Submit</Button>
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Exports
+
+```ts
+import * as Components from "@zentrades-ui/components";
+import * as ThemeEntries from "@zentrades-ui/components/theme";
+import * as IconEntries from "@zentrades-ui/components/icons";
+```
+
+## Notes
+- This package ships compiled output in `dist/`.
+- CSS side effects are included for component styles.

package/dist/components.js

@@ -442,635 +442,9 @@ function formatSpanValue(value) {
 
 // src/atoms/Text.tsx
 import { forwardRef as forwardRef5 } from "react";
-
-// ../tokens/src/constants.ts
-var SPACING_STEPS = [
-  1,
-  2,
-  4,
-  6,
-  8,
-  10,
-  12,
-  14,
-  16,
-  18,
-  20,
-  24,
-  26,
-  28,
-  32,
-  36,
-  40,
-  48,
-  56,
-  64,
-  72,
-  80,
-  88,
-  96,
-  104,
-  112,
-  120,
-  220
-];
-var pxToRem = (px) => `${px / 16}rem`;
-var SPACING_UNITS = Object.fromEntries(
-  SPACING_STEPS.map((step) => [`${step}`, step])
-);
-var SPACING_TOKENS = Object.fromEntries(
-  SPACING_STEPS.map((step) => {
-    const key = `${step}`;
-    return [key, pxToRem(SPACING_UNITS[key])];
-  })
-);
-var SEMANTIC_SPACING = {
-  none: "0",
-  "2xs": SPACING_TOKENS["2"],
-  xs: SPACING_TOKENS["4"],
-  sm: SPACING_TOKENS["8"],
-  md: SPACING_TOKENS["12"],
-  lg: SPACING_TOKENS["16"],
-  xl: SPACING_TOKENS["24"],
-  "2xl": SPACING_TOKENS["32"],
-  "3xl": SPACING_TOKENS["40"],
-  "4xl": SPACING_TOKENS["48"],
-  "5xl": SPACING_TOKENS["56"],
-  "6xl": SPACING_TOKENS["64"],
-  "7xl": SPACING_TOKENS["72"],
-  "8xl": SPACING_TOKENS["80"],
-  "9xl": SPACING_TOKENS["88"],
-  "10xl": SPACING_TOKENS["96"],
-  "11xl": SPACING_TOKENS["104"],
-  "12xl": SPACING_TOKENS["112"],
-  section: SPACING_TOKENS["72"],
-  page: SPACING_TOKENS["96"],
-  container: SPACING_TOKENS["120"]
-};
-var COLORS = {
-  brand: {
-    100: "#fcdde0",
-    200: "#f8bbc2",
-    300: "#f599a3",
-    400: "#f17785",
-    500: "#ee5566",
-    600: "#be4452",
-    700: "#8f333d",
-    800: "#5f2229",
-    900: "#301114"
-  },
-  secondaryBrand: {
-    50: "#EFF8FF",
-    100: "#cde6f9",
-    200: "#9ccef4",
-    300: "#6ab5ee",
-    400: "#399de9",
-    500: "#0784e3",
-    600: "#066ab6",
-    700: "#044f88",
-    800: "#03355b",
-    900: "#011a2d"
-  },
-  blue: {
-    25: "#f3f6ff",
-    100: "#cfdaff",
-    200: "#9eb4ff",
-    300: "#6e8fff",
-    400: "#3d69ff",
-    500: "#0d44ff",
-    600: "#0a36cc",
-    700: "#082999",
-    800: "#051b66",
-    900: "#030e33"
-  },
-  purple: {
-    25: "#F9ECFF",
-    100: "#e2d1ff",
-    200: "#c6a3ff",
-    300: "#a975ff",
-    400: "#8d47ff",
-    450: "#ab00f5",
-    500: "#7019ff",
-    600: "#5a14cc",
-    700: "#430f99",
-    800: "#2d0a66",
-    900: "#160533"
-  },
-  violet: {
-    100: "#f4d1ff",
-    200: "#eaa2ff",
-    300: "#df74ff",
-    400: "#d545ff",
-    500: "#ca17ff",
-    600: "#a212cc",
-    700: "#790e99",
-    800: "#510966",
-    900: "#280533"
-  },
-  red: {
-    25: "#fff2f2",
-    100: "#fecccc",
-    200: "#fd9999",
-    300: "#fc6666",
-    400: "#fb3333",
-    500: "#fa0000",
-    600: "#c80000",
-    700: "#960000",
-    800: "#640000",
-    900: "#320000"
-  },
-  pink: {
-    100: "#ffcce7",
-    200: "#ff99cf",
-    300: "#ff66b8",
-    400: "#ff33a0",
-    500: "#ff0088",
-    600: "#cc006d",
-    700: "#990052",
-    800: "#660036",
-    900: "#33001b"
-  },
-  orange: {
-    25: "#fff8f2",
-    100: "#ffe4cc",
-    200: "#ffc999",
-    300: "#ffad66",
-    400: "#ff9233",
-    500: "#ff7700",
-    600: "#cc5f00",
-    700: "#994700",
-    800: "#663000",
-    900: "#331800"
-  },
-  yellow: {
-    100: "#fff4cc",
-    200: "#ffea99",
-    300: "#ffdf66",
-    400: "#ffd533",
-    500: "#ffca00",
-    600: "#cca200",
-    700: "#997900",
-    800: "#665100",
-    900: "#332800"
-  },
-  green: {
-    25: "#f2fbf3",
-    100: "#ccefd1",
-    200: "#99dea3",
-    300: "#66ce75",
-    400: "#33bd47",
-    500: "#00ad19",
-    600: "#008a14",
-    700: "#00680f",
-    800: "#00450a",
-    900: "#002305"
-  },
-  teal: {
-    100: "#ccfaf9",
-    200: "#99f5f3",
-    300: "#66f0ee",
-    400: "#33ebe8",
-    500: "#00e6e2",
-    600: "#00b8b5",
-    700: "#008a88",
-    800: "#005c5a",
-    900: "#002e2d"
-  },
-  cyan: {
-    25: "#f2fbff",
-    50: "#effeff",
-    100: "#ccefff",
-    200: "#99dfff",
-    300: "#66ceff",
-    400: "#33beff",
-    500: "#00aeff",
-    600: "#008bcc",
-    650: "#007d84",
-    700: "#006899",
-    800: "#004666",
-    900: "#002333"
-  },
-  neutral: {
-    25: "#F7F8F8",
-    50: "#f0f1f1",
-    100: "#e2e2e2",
-    150: "#d3d4d4",
-    200: "#c4c5c6",
-    250: "#b5b7b8",
-    300: "#a7a8a9",
-    350: "#989a9b",
-    400: "#898b8d",
-    450: "#7a7d7e",
-    500: "#6c6e70",
-    550: "#616365",
-    600: "#56585a",
-    650: "#4b4d4f",
-    700: "#414243",
-    750: "#363738",
-    800: "#2b2c2d",
-    850: "#202122",
-    900: "#161616",
-    950: "#0b0b0b"
-  },
-  primary: {
-    black: "#000000",
-    white: "#ffffff",
-    black50: "rgba(0, 0, 0, 0.50)",
-    white50: "rgba(255, 255, 255, 0.50)"
-  }
-};
-var themedColorVars = {
-  // Contents
-  contentPrimary: { light: COLORS.neutral[950], dark: COLORS.primary.white },
-  contentSecondary: { light: COLORS.neutral[800], dark: COLORS.neutral[100] },
-  contentTertiary: { light: COLORS.neutral[600], dark: COLORS.neutral[300] },
-  contentQuaternary: { light: COLORS.neutral[400], dark: COLORS.neutral[500] },
-  contentDefaultWhite: {
-    light: COLORS.primary.white,
-    dark: COLORS.primary.white
-  },
-  contentPrimaryInverse: {
-    light: COLORS.primary.white,
-    dark: COLORS.neutral[950]
-  },
-  contentSecondaryInverse: {
-    light: COLORS.neutral[100],
-    dark: COLORS.neutral[800]
-  },
-  contentTertiaryInverse: {
-    light: COLORS.neutral[300],
-    dark: COLORS.neutral[600]
-  },
-  contentDisabled: { light: COLORS.neutral[250], dark: COLORS.neutral[700] },
-  contentBrand: { light: COLORS.brand[500], dark: COLORS.brand[500] },
-  contentSecondaryBrand: {
-    light: COLORS.secondaryBrand[500],
-    dark: COLORS.secondaryBrand[500]
-  },
-  contentLink: { light: COLORS.blue[500], dark: COLORS.blue[400] },
-  contentLinkHover: { light: COLORS.blue[600], dark: COLORS.blue[300] },
-  contentLinkPressed: { light: COLORS.blue[700], dark: COLORS.blue[200] },
-  contentInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
-  contentInfoBold: { light: COLORS.blue[600], dark: COLORS.blue[300] },
-  contentNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
-  contentNoticeBold: { light: COLORS.orange[700], dark: COLORS.orange[300] },
-  contentNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
-  contentNegativeBold: { light: COLORS.red[700], dark: COLORS.red[300] },
-  contentPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
-  contentPositiveBold: { light: COLORS.green[700], dark: COLORS.green[200] },
-  contentAttention: { light: COLORS.purple[450], dark: COLORS.purple[300] },
-  contentActive: { light: COLORS.cyan[650], dark: COLORS.cyan[200] },
-  // Backgrounds
-  backgroundPrimary: { light: COLORS.primary.white, dark: COLORS.neutral[950] },
-  backgroundSecondary: { light: COLORS.neutral[25], dark: COLORS.neutral[900] },
-  backgroundHover: { light: COLORS.neutral[100], dark: COLORS.neutral[800] },
-  backgroundPressed: { light: COLORS.neutral[100], dark: COLORS.neutral[700] },
-  backgroundSelected: { light: COLORS.brand[100], dark: COLORS.brand[700] },
-  backgroundSecondarySelected: {
-    light: COLORS.secondaryBrand[100],
-    dark: COLORS.secondaryBrand[800]
-  },
-  backgroundDisabled: { light: COLORS.neutral[50], dark: COLORS.neutral[800] },
-  backgroundBrand: { light: COLORS.brand[500], dark: COLORS.brand[400] },
-  backgroundBrandHover: { light: COLORS.brand[600], dark: COLORS.brand[300] },
-  backgroundBrandPressed: { light: COLORS.brand[700], dark: COLORS.brand[200] },
-  backgroundSecondaryBrand: {
-    light: COLORS.secondaryBrand[500],
-    dark: COLORS.secondaryBrand[400]
-  },
-  backgroundSecondaryBrandHover: {
-    light: COLORS.secondaryBrand[600],
-    dark: COLORS.secondaryBrand[300]
-  },
-  backgroundSecondaryBrandPressed: {
-    light: COLORS.secondaryBrand[700],
-    dark: COLORS.secondaryBrand[200]
-  },
-  backgroundInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
-  backgroundInfoSubtle: { light: COLORS.blue[25], dark: COLORS.blue[900] },
-  backgroundNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
-  backgroundNoticeSubtle: { light: COLORS.orange[25], dark: COLORS.orange[900] },
-  backgroundNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
-  backgroundNegativeHover: { light: COLORS.red[600], dark: COLORS.red[300] },
-  backgroundNegativePressed: { light: COLORS.red[700], dark: COLORS.red[200] },
-  backgroundNegativeSubtle: { light: COLORS.red[25], dark: COLORS.red[900] },
-  backgroundPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
-  backgroundPositiveSubtle: { light: COLORS.green[25], dark: COLORS.green[900] },
-  backgroundInverse: { light: COLORS.neutral[900], dark: COLORS.primary.white },
-  backgroundInverseHover: { light: COLORS.neutral[800], dark: COLORS.neutral[50] },
-  backgroundAttention: { light: COLORS.purple[25], dark: COLORS.purple[900] },
-  backgroundActive: { light: COLORS.cyan[50], dark: COLORS.cyan[900] },
-  backgroundSecondaryBrandSubtle: {
-    light: COLORS.secondaryBrand[50],
-    dark: COLORS.secondaryBrand[50]
-  },
-  // Borders
-  borderPrimary: { light: COLORS.neutral[600], dark: COLORS.neutral[400] },
-  borderSecondary: { light: COLORS.neutral[400], dark: COLORS.neutral[600] },
-  borderTertiary: { light: COLORS.neutral[200], dark: COLORS.neutral[800] },
-  borderQuaternary: { light: COLORS.neutral[100], dark: COLORS.neutral[900] },
-  borderDisabled: { light: COLORS.neutral[150], dark: COLORS.neutral[700] },
-  borderBrand: { light: COLORS.brand[500], dark: COLORS.brand[400] },
-  borderSecondaryBrand: {
-    light: COLORS.secondaryBrand[500],
-    dark: COLORS.secondaryBrand[400]
-  },
-  borderInverse: { light: COLORS.primary.white, dark: COLORS.neutral[900] },
-  borderFocus: { light: COLORS.blue[500], dark: COLORS.blue[400] },
-  borderInfo: { light: COLORS.blue[500], dark: COLORS.blue[400] },
-  borderNotice: { light: COLORS.orange[500], dark: COLORS.orange[400] },
-  borderNegative: { light: COLORS.red[500], dark: COLORS.red[400] },
-  borderPositive: { light: COLORS.green[500], dark: COLORS.green[400] },
-  borderMono: { light: COLORS.neutral[900], dark: COLORS.primary.white },
-  borderAttention: { light: COLORS.purple[450], dark: COLORS.purple[400] },
-  borderActive: { light: COLORS.cyan[650], dark: COLORS.cyan[400] },
-  // Surfaces
-  surfaceL0: { light: COLORS.primary.white, dark: COLORS.neutral[950] },
-  surfaceL1: { light: COLORS.primary.white, dark: COLORS.neutral[900] },
-  surfaceL2: { light: COLORS.primary.white, dark: COLORS.neutral[850] },
-  surfaceL3: { light: COLORS.primary.white, dark: COLORS.neutral[800] },
-  surfaceL4: { light: COLORS.primary.white, dark: COLORS.neutral[750] },
-  surfaceL5: { light: COLORS.primary.white, dark: COLORS.neutral[700] },
-  surfaceL6: { light: COLORS.primary.white, dark: COLORS.neutral[650] },
-  // Overlays
-  overlay50: { light: COLORS.primary.black50, dark: COLORS.primary.white50 },
-  overlay50Inverse: { light: COLORS.primary.white50, dark: COLORS.primary.black50 }
-};
-var FONT_FAMILIES = {
-  geist: [
-    "Geist",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    "Segoe UI",
-    "Roboto",
-    "sans-serif"
-  ],
-  mono: [
-    "Geist Mono",
-    "SF Mono",
-    "Monaco",
-    "Inconsolata",
-    "Roboto Mono",
-    "monospace"
-  ]
-};
-var FONT_WEIGHTS = {
-  regular: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700
-};
-var FONT_SIZES = {
-  xs: SPACING_TOKENS["10"],
-  s: SPACING_TOKENS["12"],
-  m: SPACING_TOKENS["14"],
-  l: SPACING_TOKENS["16"],
-  xl: SPACING_TOKENS["18"],
-  "2xl": SPACING_TOKENS["20"],
-  "3xl": SPACING_TOKENS["24"],
-  "4xl": SPACING_TOKENS["28"],
-  "5xl": SPACING_TOKENS["32"],
-  "6xl": SPACING_TOKENS["40"],
-  "7xl": SPACING_TOKENS["48"],
-  "8xl": SPACING_TOKENS["56"]
-};
-var LINE_HEIGHTS = {
-  xs: SPACING_TOKENS["14"],
-  s: SPACING_TOKENS["16"],
-  m: SPACING_TOKENS["20"],
-  l: SPACING_TOKENS["24"],
-  xl: SPACING_TOKENS["26"],
-  "2xl": SPACING_TOKENS["28"],
-  "3xl": SPACING_TOKENS["32"],
-  "4xl": SPACING_TOKENS["36"],
-  "5xl": SPACING_TOKENS["40"],
-  "6xl": SPACING_TOKENS["48"],
-  "7xl": SPACING_TOKENS["56"],
-  "8xl": SPACING_TOKENS["64"]
-};
-var LETTER_SPACINGS = {
-  none: "0em",
-  xs: pxToRem(-1),
-  s: pxToRem(-0.5),
-  m: pxToRem(-0.25)
-};
-var BORDER_RADIUS = {
-  circle: "50%",
-  pill: pxToRem(999),
-  xl: pxToRem(24),
-  lg: pxToRem(16),
-  md: pxToRem(12),
-  sm: pxToRem(8),
-  xs: pxToRem(4)
-};
-var BORDER_WIDTH = {
-  none: pxToRem(0),
-  xs: pxToRem(0.75),
-  s: pxToRem(1),
-  m: pxToRem(1.5),
-  l: pxToRem(2),
-  xl: pxToRem(4)
-};
-var LABEL_FONT_SIZES = {
-  "2xs": pxToRem(14)
-};
-var LABEL_LINE_HEIGHTS = {
-  "2xs": pxToRem(14)
-};
-var TYPOGRAPHY_STYLES = {
-  label: {
-    "2xs": {
-      medium: {
-        fontSize: LABEL_FONT_SIZES["2xs"],
-        lineHeight: LABEL_LINE_HEIGHTS["2xs"],
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    }
-  },
-  heading: {
-    "3xl": {
-      semibold: {
-        fontSize: FONT_SIZES["8xl"],
-        lineHeight: LINE_HEIGHTS["8xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.xs,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    "2xl": {
-      semibold: {
-        fontSize: FONT_SIZES["7xl"],
-        lineHeight: LINE_HEIGHTS["7xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.xs,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    xl: {
-      semibold: {
-        fontSize: FONT_SIZES["6xl"],
-        lineHeight: LINE_HEIGHTS["6xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.xs,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    l: {
-      semibold: {
-        fontSize: FONT_SIZES["5xl"],
-        lineHeight: LINE_HEIGHTS["5xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.s,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    m: {
-      semibold: {
-        fontSize: FONT_SIZES["3xl"],
-        lineHeight: LINE_HEIGHTS["3xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.s,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    s: {
-      semibold: {
-        fontSize: FONT_SIZES["2xl"],
-        lineHeight: LINE_HEIGHTS["2xl"],
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.s,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    xs: {
-      semibold: {
-        fontSize: FONT_SIZES.l,
-        lineHeight: LINE_HEIGHTS.l,
-        fontWeight: FONT_WEIGHTS.semibold,
-        letterSpacing: LETTER_SPACINGS.m,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      medium: {
-        fontSize: FONT_SIZES.l,
-        lineHeight: LINE_HEIGHTS.l,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.m,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    "2xs": {
-      medium: {
-        fontSize: FONT_SIZES.m,
-        lineHeight: LINE_HEIGHTS.m,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    }
-  },
-  text: {
-    "2xl": {
-      medium: {
-        fontSize: FONT_SIZES["3xl"],
-        lineHeight: LINE_HEIGHTS["3xl"],
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES["3xl"],
-        lineHeight: LINE_HEIGHTS["3xl"],
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    xl: {
-      medium: {
-        fontSize: FONT_SIZES["2xl"],
-        lineHeight: LINE_HEIGHTS["2xl"],
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES["2xl"],
-        lineHeight: LINE_HEIGHTS["2xl"],
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    l: {
-      medium: {
-        fontSize: FONT_SIZES.l,
-        lineHeight: LINE_HEIGHTS.l,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES.l,
-        lineHeight: LINE_HEIGHTS.l,
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    m: {
-      medium: {
-        fontSize: FONT_SIZES.m,
-        lineHeight: LINE_HEIGHTS.m,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES.m,
-        lineHeight: LINE_HEIGHTS.m,
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    s: {
-      medium: {
-        fontSize: FONT_SIZES.s,
-        lineHeight: LINE_HEIGHTS.s,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES.s,
-        lineHeight: LINE_HEIGHTS.s,
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    },
-    xs: {
-      medium: {
-        fontSize: FONT_SIZES.xs,
-        lineHeight: LINE_HEIGHTS.xs,
-        fontWeight: FONT_WEIGHTS.medium,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      },
-      regular: {
-        fontSize: FONT_SIZES.xs,
-        lineHeight: LINE_HEIGHTS.xs,
-        fontWeight: FONT_WEIGHTS.regular,
-        letterSpacing: LETTER_SPACINGS.none,
-        fontFamily: FONT_FAMILIES.geist
-      }
-    }
-  }
-};
-
-// src/atoms/Text.tsx
+import {
+  TYPOGRAPHY_STYLES
+} from "@zentrades-ui/tokens";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var DefaultTextElement = "p";
 function applyTextVariantStyles(fontVariant) {
@@ -2264,9 +1638,7 @@ Avatar.displayName = "Avatar";
 
 // src/components/Loader/Spinner.tsx
 import { forwardRef as forwardRef14 } from "react";
-
-// ../theme/src/theme.css.ts
-var colorVars = { contentPrimary: "var(--contentPrimary__1gvjbin0)", contentSecondary: "var(--contentSecondary__1gvjbin1)", contentTertiary: "var(--contentTertiary__1gvjbin2)", contentQuaternary: "var(--contentQuaternary__1gvjbin3)", contentDefaultWhite: "var(--contentDefaultWhite__1gvjbin4)", contentPrimaryInverse: "var(--contentPrimaryInverse__1gvjbin5)", contentSecondaryInverse: "var(--contentSecondaryInverse__1gvjbin6)", contentTertiaryInverse: "var(--contentTertiaryInverse__1gvjbin7)", contentDisabled: "var(--contentDisabled__1gvjbin8)", contentBrand: "var(--contentBrand__1gvjbin9)", contentSecondaryBrand: "var(--contentSecondaryBrand__1gvjbina)", contentLink: "var(--contentLink__1gvjbinb)", contentLinkHover: "var(--contentLinkHover__1gvjbinc)", contentLinkPressed: "var(--contentLinkPressed__1gvjbind)", contentInfo: "var(--contentInfo__1gvjbine)", contentInfoBold: "var(--contentInfoBold__1gvjbinf)", contentNotice: "var(--contentNotice__1gvjbing)", contentNoticeBold: "var(--contentNoticeBold__1gvjbinh)", contentNegative: "var(--contentNegative__1gvjbini)", contentNegativeBold: "var(--contentNegativeBold__1gvjbinj)", contentPositive: "var(--contentPositive__1gvjbink)", contentPositiveBold: "var(--contentPositiveBold__1gvjbinl)", contentAttention: "var(--contentAttention__1gvjbinm)", contentActive: "var(--contentActive__1gvjbinn)", backgroundPrimary: "var(--backgroundPrimary__1gvjbino)", backgroundSecondary: "var(--backgroundSecondary__1gvjbinp)", backgroundHover: "var(--backgroundHover__1gvjbinq)", backgroundPressed: "var(--backgroundPressed__1gvjbinr)", backgroundSelected: "var(--backgroundSelected__1gvjbins)", backgroundSecondarySelected: "var(--backgroundSecondarySelected__1gvjbint)", backgroundDisabled: "var(--backgroundDisabled__1gvjbinu)", backgroundBrand: "var(--backgroundBrand__1gvjbinv)", backgroundBrandHover: "var(--backgroundBrandHover__1gvjbinw)", backgroundBrandPressed: "var(--backgroundBrandPressed__1gvjbinx)", backgroundSecondaryBrand: "var(--backgroundSecondaryBrand__1gvjbiny)", backgroundSecondaryBrandHover: "var(--backgroundSecondaryBrandHover__1gvjbinz)", backgroundSecondaryBrandPressed: "var(--backgroundSecondaryBrandPressed__1gvjbin10)", backgroundInfo: "var(--backgroundInfo__1gvjbin11)", backgroundInfoSubtle: "var(--backgroundInfoSubtle__1gvjbin12)", backgroundNotice: "var(--backgroundNotice__1gvjbin13)", backgroundNoticeSubtle: "var(--backgroundNoticeSubtle__1gvjbin14)", backgroundNegative: "var(--backgroundNegative__1gvjbin15)", backgroundNegativeHover: "var(--backgroundNegativeHover__1gvjbin16)", backgroundNegativePressed: "var(--backgroundNegativePressed__1gvjbin17)", backgroundNegativeSubtle: "var(--backgroundNegativeSubtle__1gvjbin18)", backgroundPositive: "var(--backgroundPositive__1gvjbin19)", backgroundPositiveSubtle: "var(--backgroundPositiveSubtle__1gvjbin1a)", backgroundInverse: "var(--backgroundInverse__1gvjbin1b)", backgroundInverseHover: "var(--backgroundInverseHover__1gvjbin1c)", backgroundAttention: "var(--backgroundAttention__1gvjbin1d)", backgroundActive: "var(--backgroundActive__1gvjbin1e)", backgroundSecondaryBrandSubtle: "var(--backgroundSecondaryBrandSubtle__1gvjbin1f)", borderPrimary: "var(--borderPrimary__1gvjbin1g)", borderSecondary: "var(--borderSecondary__1gvjbin1h)", borderTertiary: "var(--borderTertiary__1gvjbin1i)", borderQuaternary: "var(--borderQuaternary__1gvjbin1j)", borderDisabled: "var(--borderDisabled__1gvjbin1k)", borderBrand: "var(--borderBrand__1gvjbin1l)", borderSecondaryBrand: "var(--borderSecondaryBrand__1gvjbin1m)", borderInverse: "var(--borderInverse__1gvjbin1n)", borderFocus: "var(--borderFocus__1gvjbin1o)", borderInfo: "var(--borderInfo__1gvjbin1p)", borderNotice: "var(--borderNotice__1gvjbin1q)", borderNegative: "var(--borderNegative__1gvjbin1r)", borderPositive: "var(--borderPositive__1gvjbin1s)", borderMono: "var(--borderMono__1gvjbin1t)", borderAttention: "var(--borderAttention__1gvjbin1u)", borderActive: "var(--borderActive__1gvjbin1v)", surfaceL0: "var(--surfaceL0__1gvjbin1w)", surfaceL1: "var(--surfaceL1__1gvjbin1x)", surfaceL2: "var(--surfaceL2__1gvjbin1y)", surfaceL3: "var(--surfaceL3__1gvjbin1z)", surfaceL4: "var(--surfaceL4__1gvjbin20)", surfaceL5: "var(--surfaceL5__1gvjbin21)", surfaceL6: "var(--surfaceL6__1gvjbin22)", overlay50: "var(--overlay50__1gvjbin23)", overlay50Inverse: "var(--overlay50Inverse__1gvjbin24)", transparent: "var(--transparent__1gvjbin25)" };
+import { colorVars } from "@zentrades-ui/theme";
 
 // src/components/Loader/spinner.css.ts
 import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";