radix-native 0.0.1

package/dist/index.mjs

@@ -0,0 +1,4285 @@
+import React, { useState, useCallback, useMemo, useContext, createContext } from 'react';
+import { useColorScheme, Platform, View, Text as Text$1, Linking, Pressable, ActivityIndicator, Animated, useWindowDimensions, ScrollView, StyleSheet } from 'react-native';
+
+const ThemeContext = React.createContext(void 0);
+
+function resolveGrayColor(accentColor) {
+  switch (accentColor) {
+    case "tomato":
+    case "red":
+    case "ruby":
+    case "crimson":
+    case "pink":
+    case "plum":
+    case "purple":
+    case "violet":
+      return "mauve";
+    case "iris":
+    case "indigo":
+    case "blue":
+    case "sky":
+    case "cyan":
+      return "slate";
+    case "teal":
+    case "jade":
+    case "mint":
+    case "green":
+      return "sage";
+    case "grass":
+    case "lime":
+      return "olive";
+    case "gray":
+      return "gray";
+    case "yellow":
+    case "amber":
+    case "orange":
+    case "brown":
+    case "gold":
+    case "bronze":
+      return "sand";
+  }
+}
+
+function ThemeRoot({
+  appearance: appearanceProp = "inherit",
+  accentColor: accentColorProp = "indigo",
+  grayColor: grayColorProp = "auto",
+  radius: radiusProp = "medium",
+  scaling: scalingProp = "100%",
+  fonts: fontsProp = {},
+  colorOverrides: colorOverridesProp = {},
+  children
+}) {
+  const systemColorScheme = useColorScheme();
+  const [appearance, setAppearance] = React.useState(
+    () => appearanceProp === "inherit" ? systemColorScheme === "dark" ? "dark" : "light" : appearanceProp
+  );
+  const [accentColor, setAccentColor] = React.useState(accentColorProp);
+  const [grayColor, setGrayColor] = React.useState(grayColorProp);
+  const [radius, setRadius] = React.useState(radiusProp);
+  const [scaling, setScaling] = React.useState(scalingProp);
+  React.useEffect(() => {
+    setAppearance(
+      appearanceProp === "inherit" ? systemColorScheme === "dark" ? "dark" : "light" : appearanceProp
+    );
+  }, [appearanceProp, systemColorScheme]);
+  React.useEffect(() => {
+    setAccentColor(accentColorProp);
+  }, [accentColorProp]);
+  React.useEffect(() => {
+    setGrayColor(grayColorProp);
+  }, [grayColorProp]);
+  React.useEffect(() => {
+    setRadius(radiusProp);
+  }, [radiusProp]);
+  React.useEffect(() => {
+    setScaling(scalingProp);
+  }, [scalingProp]);
+  const resolvedGrayColor = grayColor === "auto" ? resolveGrayColor(accentColor) : grayColor;
+  const value = React.useMemo(
+    () => ({
+      appearance,
+      accentColor,
+      grayColor,
+      resolvedGrayColor,
+      radius,
+      scaling,
+      fonts: fontsProp,
+      colorOverrides: colorOverridesProp,
+      onAppearanceChange: setAppearance,
+      onAccentColorChange: setAccentColor,
+      onGrayColorChange: setGrayColor,
+      onRadiusChange: setRadius,
+      onScalingChange: setScaling
+    }),
+    [appearance, accentColor, grayColor, resolvedGrayColor, radius, scaling, fontsProp, colorOverridesProp]
+  );
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value }, children);
+}
+ThemeRoot.displayName = "ThemeRoot";
+
+function ThemeImpl({
+  appearance: appearanceProp,
+  accentColor: accentColorProp,
+  grayColor: grayColorProp,
+  radius: radiusProp,
+  scaling: scalingProp,
+  fonts: fontsProp,
+  colorOverrides: colorOverridesProp,
+  children
+}) {
+  const parent = React.useContext(ThemeContext);
+  const appearance = appearanceProp !== void 0 && appearanceProp !== "inherit" ? appearanceProp : parent.appearance;
+  const accentColor = accentColorProp ?? parent.accentColor;
+  const grayColor = grayColorProp ?? parent.resolvedGrayColor;
+  const radius = radiusProp ?? parent.radius;
+  const scaling = scalingProp ?? parent.scaling;
+  const resolvedGrayColor = grayColor === "auto" ? resolveGrayColor(accentColor) : grayColor;
+  const value = React.useMemo(
+    () => ({
+      appearance,
+      accentColor,
+      grayColor,
+      resolvedGrayColor,
+      radius,
+      scaling,
+      fonts: fontsProp ?? parent.fonts,
+      colorOverrides: colorOverridesProp ?? parent.colorOverrides,
+      // Handlers always bubble up to ThemeRoot
+      onAppearanceChange: parent.onAppearanceChange,
+      onAccentColorChange: parent.onAccentColorChange,
+      onGrayColorChange: parent.onGrayColorChange,
+      onRadiusChange: parent.onRadiusChange,
+      onScalingChange: parent.onScalingChange
+    }),
+    [appearance, accentColor, grayColor, resolvedGrayColor, radius, scaling, fontsProp, colorOverridesProp, parent]
+  );
+  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value }, children);
+}
+ThemeImpl.displayName = "ThemeImpl";
+
+function Theme(props) {
+  const context = React.useContext(ThemeContext);
+  const isRoot = context === void 0;
+  return isRoot ? /* @__PURE__ */ React.createElement(ThemeRoot, { ...props }) : /* @__PURE__ */ React.createElement(ThemeImpl, { ...props });
+}
+Theme.displayName = "Theme";
+
+function createTheme(config) {
+  function ThemeProvider({ children }) {
+    return /* @__PURE__ */ React.createElement(Theme, { ...config }, children);
+  }
+  ThemeProvider.displayName = "ThemeProvider";
+  return ThemeProvider;
+}
+
+function useThemeContext() {
+  const context = React.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("`useThemeContext` must be used within a `Theme`");
+  }
+  return context;
+}
+
+const tomato = {
+  light: {
+    1: "#fffcfc",
+    2: "#fff8f7",
+    3: "#feebe7",
+    4: "#ffdcd3",
+    5: "#ffcdc2",
+    6: "#fdbdaf",
+    7: "#f5a898",
+    8: "#ec8e7b",
+    9: "#e54d2e",
+    10: "#dd4425",
+    11: "#d13415",
+    12: "#5c271f",
+    a1: "#ff000003",
+    a2: "#ff200008",
+    a3: "#f52b0018",
+    a4: "#ff35002c",
+    a5: "#ff2e003d",
+    a6: "#f92d0050",
+    a7: "#e7280067",
+    a8: "#db250084",
+    a9: "#df2600d1",
+    a10: "#d72400da",
+    a11: "#cd2200ea",
+    a12: "#460900e0",
+    contrast: "#ffffff",
+    surface: "#fff6f5cc",
+    indicator: "#e54d2e",
+    track: "#e54d2e"
+  },
+  dark: {
+    1: "#181111",
+    2: "#1f1513",
+    3: "#391714",
+    4: "#4e1511",
+    5: "#5e1c16",
+    6: "#6e2920",
+    7: "#853a2d",
+    8: "#ac4d39",
+    9: "#e54d2e",
+    10: "#ec6142",
+    11: "#ff977d",
+    12: "#fbd3cb",
+    a1: "#f1121208",
+    a2: "#ff55330f",
+    a3: "#ff35232b",
+    a4: "#fd201142",
+    a5: "#fe332153",
+    a6: "#ff4f3864",
+    a7: "#fd644a7d",
+    a8: "#fe6d4ea7",
+    a9: "#fe5431e4",
+    a10: "#ff6847eb",
+    a11: "#ff977d",
+    a12: "#ffd6cefb",
+    contrast: "#ffffff",
+    surface: "#2d191580",
+    indicator: "#e54d2e",
+    track: "#e54d2e"
+  }
+};
+
+const red = {
+  light: {
+    1: "#fffcfc",
+    2: "#fff7f7",
+    3: "#feebec",
+    4: "#ffdbdc",
+    5: "#ffcdce",
+    6: "#fdbdbe",
+    7: "#f4a9aa",
+    8: "#eb8e90",
+    9: "#e5484d",
+    10: "#dc3e42",
+    11: "#ce2c31",
+    12: "#641723",
+    a1: "#ff000003",
+    a2: "#ff000008",
+    a3: "#f3000d14",
+    a4: "#ff000824",
+    a5: "#ff000632",
+    a6: "#f8000442",
+    a7: "#df000356",
+    a8: "#d2000571",
+    a9: "#db0007b7",
+    a10: "#d10005c1",
+    a11: "#c40006d3",
+    a12: "#55000de8",
+    contrast: "#ffffff",
+    surface: "#fff5f5cc",
+    indicator: "#e5484d",
+    track: "#e5484d"
+  },
+  dark: {
+    1: "#191111",
+    2: "#201314",
+    3: "#3b1219",
+    4: "#500f1c",
+    5: "#611623",
+    6: "#72232d",
+    7: "#8c333a",
+    8: "#b54548",
+    9: "#e5484d",
+    10: "#ec5d5e",
+    11: "#ff9592",
+    12: "#ffd1d9",
+    a1: "#f4121209",
+    a2: "#f22f3e11",
+    a3: "#ff173f2d",
+    a4: "#fe0a3b44",
+    a5: "#ff204756",
+    a6: "#ff3e5668",
+    a7: "#ff536184",
+    a8: "#ff5d61b0",
+    a9: "#fe4e54e4",
+    a10: "#ff6465eb",
+    a11: "#ff9592",
+    a12: "#ffd1d9",
+    contrast: "#ffffff",
+    surface: "#2f151780",
+    indicator: "#e5484d",
+    track: "#e5484d"
+  }
+};
+
+const ruby = {
+  light: {
+    1: "#fffcfd",
+    2: "#fff7f8",
+    3: "#feeaed",
+    4: "#ffdce1",
+    5: "#ffced6",
+    6: "#f8bfc8",
+    7: "#efacb8",
+    8: "#e592a3",
+    9: "#e54666",
+    10: "#dc3b5d",
+    11: "#ca244d",
+    12: "#64172b",
+    a1: "#ff005503",
+    a2: "#ff002008",
+    a3: "#f3002515",
+    a4: "#ff002523",
+    a5: "#ff002a31",
+    a6: "#e4002440",
+    a7: "#ce002553",
+    a8: "#c300286d",
+    a9: "#db002cb9",
+    a10: "#d2002cc4",
+    a11: "#c10030db",
+    a12: "#550016e8",
+    contrast: "#ffffff",
+    surface: "#fff5f6cc",
+    indicator: "#e54666",
+    track: "#e54666"
+  },
+  dark: {
+    1: "#191113",
+    2: "#1e1517",
+    3: "#3a141e",
+    4: "#4e1325",
+    5: "#5e1a2e",
+    6: "#6f2539",
+    7: "#883447",
+    8: "#b3445a",
+    9: "#e54666",
+    10: "#ec5a72",
+    11: "#ff949d",
+    12: "#fed2e1",
+    a1: "#f4124a09",
+    a2: "#fe5a7f0e",
+    a3: "#ff235d2c",
+    a4: "#fd195e42",
+    a5: "#fe2d6b53",
+    a6: "#ff447665",
+    a7: "#ff577d80",
+    a8: "#ff5c7cae",
+    a9: "#fe4c70e4",
+    a10: "#ff617beb",
+    a11: "#ff949d",
+    a12: "#ffd3e2fe",
+    contrast: "#ffffff",
+    surface: "#2b191d80",
+    indicator: "#e54666",
+    track: "#e54666"
+  }
+};
+
+const crimson = {
+  light: {
+    1: "#fffcfd",
+    2: "#fef7f9",
+    3: "#ffe9f0",
+    4: "#fedce7",
+    5: "#facedd",
+    6: "#f3bed1",
+    7: "#eaacc3",
+    8: "#e093b2",
+    9: "#e93d82",
+    10: "#df3478",
+    11: "#cb1d63",
+    12: "#621639",
+    a1: "#ff005503",
+    a2: "#e0004008",
+    a3: "#ff005216",
+    a4: "#f8005123",
+    a5: "#e5004f31",
+    a6: "#d0004b41",
+    a7: "#bf004753",
+    a8: "#b6004a6c",
+    a9: "#e2005bc2",
+    a10: "#d70056cb",
+    a11: "#c4004fe2",
+    a12: "#530026e9",
+    contrast: "#ffffff",
+    surface: "#fef5f8cc",
+    indicator: "#e93d82",
+    track: "#e93d82"
+  },
+  dark: {
+    1: "#191114",
+    2: "#201318",
+    3: "#381525",
+    4: "#4d122f",
+    5: "#5c1839",
+    6: "#6d2545",
+    7: "#873356",
+    8: "#b0436e",
+    9: "#e93d82",
+    10: "#ee518a",
+    11: "#ff92ad",
+    12: "#fdd3e8",
+    a1: "#f4126709",
+    a2: "#f22f7a11",
+    a3: "#fe2a8b2a",
+    a4: "#fd158741",
+    a5: "#fd278f51",
+    a6: "#fe459763",
+    a7: "#fd559b7f",
+    a8: "#fe5b9bab",
+    a9: "#fe418de8",
+    a10: "#ff5693ed",
+    a11: "#ff92ad",
+    a12: "#ffd5eafd",
+    contrast: "#ffffff",
+    surface: "#2f151f80",
+    indicator: "#e93d82",
+    track: "#e93d82"
+  }
+};
+
+const pink = {
+  light: {
+    1: "#fffcfe",
+    2: "#fef7fb",
+    3: "#fee9f5",
+    4: "#fbdcef",
+    5: "#f6cee7",
+    6: "#efbfdd",
+    7: "#e7acd0",
+    8: "#dd93c2",
+    9: "#d6409f",
+    10: "#cf3897",
+    11: "#c2298a",
+    12: "#651249",
+    a1: "#ff00aa03",
+    a2: "#e0008008",
+    a3: "#f4008c16",
+    a4: "#e2008b23",
+    a5: "#d1008331",
+    a6: "#c0007840",
+    a7: "#b6006f53",
+    a8: "#af006f6c",
+    a9: "#c8007fbf",
+    a10: "#c2007ac7",
+    a11: "#b60074d6",
+    a12: "#59003bed",
+    contrast: "#ffffff",
+    surface: "#fef5facc",
+    indicator: "#d6409f",
+    track: "#d6409f"
+  },
+  dark: {
+    1: "#191117",
+    2: "#21121d",
+    3: "#37172f",
+    4: "#4b143d",
+    5: "#591c47",
+    6: "#692955",
+    7: "#833869",
+    8: "#a84885",
+    9: "#d6409f",
+    10: "#de51a8",
+    11: "#ff8dcc",
+    12: "#fdd1ea",
+    a1: "#f412bc09",
+    a2: "#f420bb12",
+    a3: "#fe37cc29",
+    a4: "#fc1ec43f",
+    a5: "#fd35c24e",
+    a6: "#fd51c75f",
+    a7: "#fd62c87b",
+    a8: "#ff68c8a2",
+    a9: "#fe49bcd4",
+    a10: "#ff5cc0dc",
+    a11: "#ff8dcc",
+    a12: "#ffd3ecfd",
+    contrast: "#ffffff",
+    surface: "#31132980",
+    indicator: "#d6409f",
+    track: "#d6409f"
+  }
+};
+
+const plum = {
+  light: {
+    1: "#fefcff",
+    2: "#fdf7fd",
+    3: "#fbebfb",
+    4: "#f7def8",
+    5: "#f2d1f3",
+    6: "#e9c2ec",
+    7: "#deade3",
+    8: "#cf91d8",
+    9: "#ab4aba",
+    10: "#a144af",
+    11: "#953ea3",
+    12: "#53195d",
+    a1: "#aa00ff03",
+    a2: "#c000c008",
+    a3: "#cc00cc14",
+    a4: "#c200c921",
+    a5: "#b700bd2e",
+    a6: "#a400b03d",
+    a7: "#9900a852",
+    a8: "#9000a56e",
+    a9: "#89009eb5",
+    a10: "#7f0092bb",
+    a11: "#730086c1",
+    a12: "#40004be6",
+    contrast: "#ffffff",
+    surface: "#fdf5fdcc",
+    indicator: "#ab4aba",
+    track: "#ab4aba"
+  },
+  dark: {
+    1: "#181118",
+    2: "#201320",
+    3: "#351a35",
+    4: "#451d47",
+    5: "#512454",
+    6: "#5e3061",
+    7: "#734079",
+    8: "#92549c",
+    9: "#ab4aba",
+    10: "#b658c4",
+    11: "#e796f3",
+    12: "#f4d4f4",
+    a1: "#f112f108",
+    a2: "#f22ff211",
+    a3: "#fd4cfd27",
+    a4: "#f646ff3a",
+    a5: "#f455ff48",
+    a6: "#f66dff56",
+    a7: "#f07cfd70",
+    a8: "#ee84ff95",
+    a9: "#e961feb6",
+    a10: "#ed70ffc0",
+    a11: "#f19cfef3",
+    a12: "#feddfef4",
+    contrast: "#ffffff",
+    surface: "#2f152f80",
+    indicator: "#ab4aba",
+    track: "#ab4aba"
+  }
+};
+
+const purple = {
+  light: {
+    1: "#fefcfe",
+    2: "#fbf7fe",
+    3: "#f7edfe",
+    4: "#f2e2fc",
+    5: "#ead5f9",
+    6: "#e0c4f4",
+    7: "#d1afec",
+    8: "#be93e4",
+    9: "#8e4ec6",
+    10: "#8347b9",
+    11: "#8145b5",
+    12: "#402060",
+    a1: "#aa00aa03",
+    a2: "#8000e008",
+    a3: "#8e00f112",
+    a4: "#8d00e51d",
+    a5: "#8000db2a",
+    a6: "#7a01d03b",
+    a7: "#6d00c350",
+    a8: "#6600c06c",
+    a9: "#5c00adb1",
+    a10: "#53009eb8",
+    a11: "#52009aba",
+    a12: "#250049df",
+    contrast: "#ffffff",
+    surface: "#faf5fecc",
+    indicator: "#8e4ec6",
+    track: "#8e4ec6"
+  },
+  dark: {
+    1: "#18111b",
+    2: "#1e1523",
+    3: "#301c3b",
+    4: "#3d224e",
+    5: "#48295c",
+    6: "#54346b",
+    7: "#664282",
+    8: "#8457aa",
+    9: "#8e4ec6",
+    10: "#9a5cd0",
+    11: "#d19dff",
+    12: "#ecd9fa",
+    a1: "#b412f90b",
+    a2: "#b744f714",
+    a3: "#c150ff2d",
+    a4: "#bb53fd42",
+    a5: "#be5cfd51",
+    a6: "#c16dfd61",
+    a7: "#c378fd7a",
+    a8: "#c47effa4",
+    a9: "#b661ffc2",
+    a10: "#bc6fffcd",
+    a11: "#d19dff",
+    a12: "#f1ddfffa",
+    contrast: "#ffffff",
+    surface: "#2b173580",
+    indicator: "#8e4ec6",
+    track: "#8e4ec6"
+  }
+};
+
+const violet = {
+  light: {
+    1: "#fdfcfe",
+    2: "#faf8ff",
+    3: "#f4f0fe",
+    4: "#ebe4ff",
+    5: "#e1d9ff",
+    6: "#d4cafe",
+    7: "#c2b5f5",
+    8: "#aa99ec",
+    9: "#6e56cf",
+    10: "#654dc4",
+    11: "#6550b9",
+    12: "#2f265f",
+    a1: "#5500aa03",
+    a2: "#4900ff07",
+    a3: "#4400ee0f",
+    a4: "#4300ff1b",
+    a5: "#3600ff26",
+    a6: "#3100fb35",
+    a7: "#2d01dd4a",
+    a8: "#2b00d066",
+    a9: "#2400b7a9",
+    a10: "#2300abb2",
+    a11: "#1f0099af",
+    a12: "#0b0043d9",
+    contrast: "#ffffff",
+    surface: "#f9f6ffcc",
+    indicator: "#6e56cf",
+    track: "#6e56cf"
+  },
+  dark: {
+    1: "#14121f",
+    2: "#1b1525",
+    3: "#291f43",
+    4: "#33255b",
+    5: "#3c2e69",
+    6: "#473876",
+    7: "#56468b",
+    8: "#6958ad",
+    9: "#6e56cf",
+    10: "#7d66d9",
+    11: "#baa7ff",
+    12: "#e2ddfe",
+    a1: "#4422ff0f",
+    a2: "#853ff916",
+    a3: "#8354fe36",
+    a4: "#7d51fd50",
+    a5: "#845ffd5f",
+    a6: "#8f6cfd6d",
+    a7: "#9879ff83",
+    a8: "#977dfea8",
+    a9: "#8668ffcc",
+    a10: "#9176fed7",
+    a11: "#baa7ff",
+    a12: "#e3defffe",
+    contrast: "#ffffff",
+    surface: "#25193980",
+    indicator: "#6e56cf",
+    track: "#6e56cf"
+  }
+};
+
+const iris = {
+  light: {
+    1: "#fdfdff",
+    2: "#f8f8ff",
+    3: "#f0f1fe",
+    4: "#e6e7ff",
+    5: "#dadcff",
+    6: "#cbcdff",
+    7: "#b8baf8",
+    8: "#9b9ef0",
+    9: "#5b5bd6",
+    10: "#5151cd",
+    11: "#5753c6",
+    12: "#272962",
+    a1: "#0000ff02",
+    a2: "#0000ff07",
+    a3: "#0011ee0f",
+    a4: "#000bff19",
+    a5: "#000eff25",
+    a6: "#000aff34",
+    a7: "#0008e647",
+    a8: "#0008d964",
+    a9: "#0000c0a4",
+    a10: "#0000b6ae",
+    a11: "#0600abac",
+    a12: "#000246d8",
+    contrast: "#ffffff",
+    surface: "#f6f6ffcc",
+    indicator: "#5b5bd6",
+    track: "#5b5bd6"
+  },
+  dark: {
+    1: "#13131e",
+    2: "#171625",
+    3: "#202248",
+    4: "#262a65",
+    5: "#303374",
+    6: "#3d3e82",
+    7: "#4a4a95",
+    8: "#5958b1",
+    9: "#5b5bd6",
+    10: "#6e6ade",
+    11: "#b1a9ff",
+    12: "#e0dffe",
+    a1: "#3636fe0e",
+    a2: "#564bf916",
+    a3: "#525bff3b",
+    a4: "#4d58ff5a",
+    a5: "#5b62fd6b",
+    a6: "#6d6ffd7a",
+    a7: "#7777fe8e",
+    a8: "#7b7afeac",
+    a9: "#6a6afed4",
+    a10: "#7d79ffdc",
+    a11: "#b1a9ff",
+    a12: "#e1e0fffe",
+    contrast: "#ffffff",
+    surface: "#1d1b3980",
+    indicator: "#5b5bd6",
+    track: "#5b5bd6"
+  }
+};
+
+const indigo = {
+  light: {
+    1: "#fdfdfe",
+    2: "#f7f9ff",
+    3: "#edf2fe",
+    4: "#e1e9ff",
+    5: "#d2deff",
+    6: "#c1d0ff",
+    7: "#abbdf9",
+    8: "#8da4ef",
+    9: "#3e63dd",
+    10: "#3358d4",
+    11: "#3a5bc7",
+    12: "#1f2d5c",
+    a1: "#00008002",
+    a2: "#0040ff08",
+    a3: "#0047f112",
+    a4: "#0044ff1e",
+    a5: "#0044ff2d",
+    a6: "#003eff3e",
+    a7: "#0037ed54",
+    a8: "#0034dc72",
+    a9: "#0031d2c1",
+    a10: "#002ec9cc",
+    a11: "#002bb7c5",
+    a12: "#001046e0",
+    contrast: "#ffffff",
+    surface: "#f5f8ffcc",
+    indicator: "#3e63dd",
+    track: "#3e63dd"
+  },
+  dark: {
+    1: "#11131f",
+    2: "#141726",
+    3: "#182449",
+    4: "#1d2e62",
+    5: "#253974",
+    6: "#304384",
+    7: "#3a4f97",
+    8: "#435db1",
+    9: "#3e63dd",
+    10: "#5472e4",
+    11: "#9eb1ff",
+    12: "#d6e1ff",
+    a1: "#1133ff0f",
+    a2: "#3354fa17",
+    a3: "#2f62ff3c",
+    a4: "#3566ff57",
+    a5: "#4171fd6b",
+    a6: "#5178fd7c",
+    a7: "#5a7fff90",
+    a8: "#5b81feac",
+    a9: "#4671ffdb",
+    a10: "#5c7efee3",
+    a11: "#9eb1ff",
+    a12: "#d6e1ff",
+    contrast: "#ffffff",
+    surface: "#171d3b80",
+    indicator: "#3e63dd",
+    track: "#3e63dd"
+  }
+};
+
+const blue = {
+  light: {
+    1: "#fbfdff",
+    2: "#f4faff",
+    3: "#e6f4fe",
+    4: "#d5efff",
+    5: "#c2e5ff",
+    6: "#acd8fc",
+    7: "#8ec8f6",
+    8: "#5eb1ef",
+    9: "#0090ff",
+    10: "#0588f0",
+    11: "#0d74ce",
+    12: "#113264",
+    a1: "#0080ff04",
+    a2: "#008cff0b",
+    a3: "#008ff519",
+    a4: "#009eff2a",
+    a5: "#0093ff3d",
+    a6: "#0088f653",
+    a7: "#0083eb71",
+    a8: "#0084e6a1",
+    a9: "#0090ff",
+    a10: "#0086f0fa",
+    a11: "#006dcbf2",
+    a12: "#002359ee",
+    contrast: "#ffffff",
+    surface: "#f1f9ffcc",
+    indicator: "#0090ff",
+    track: "#0090ff"
+  },
+  dark: {
+    1: "#0d1520",
+    2: "#111927",
+    3: "#0d2847",
+    4: "#003362",
+    5: "#004074",
+    6: "#104d87",
+    7: "#205d9e",
+    8: "#2870bd",
+    9: "#0090ff",
+    10: "#3b9eff",
+    11: "#70b8ff",
+    12: "#c2e6ff",
+    a1: "#004df211",
+    a2: "#1166fb18",
+    a3: "#0077ff3a",
+    a4: "#0075ff57",
+    a5: "#0081fd6b",
+    a6: "#0f89fd7f",
+    a7: "#2a91fe98",
+    a8: "#3094feb9",
+    a9: "#0090ff",
+    a10: "#3b9eff",
+    a11: "#70b8ff",
+    a12: "#c2e6ff",
+    contrast: "#ffffff",
+    surface: "#11213d80",
+    indicator: "#0090ff",
+    track: "#0090ff"
+  }
+};
+
+const cyan = {
+  light: {
+    1: "#fafdfe",
+    2: "#f2fafb",
+    3: "#def7f9",
+    4: "#caf1f6",
+    5: "#b5e9f0",
+    6: "#9ddde7",
+    7: "#7dcedc",
+    8: "#3db9cf",
+    9: "#00a2c7",
+    10: "#0797b9",
+    11: "#107d98",
+    12: "#0d3c48",
+    a1: "#0099cc05",
+    a2: "#009db10d",
+    a3: "#00c2d121",
+    a4: "#00bcd435",
+    a5: "#01b4cc4a",
+    a6: "#00a7c162",
+    a7: "#009fbb82",
+    a8: "#00a3c0c2",
+    a9: "#00a2c7",
+    a10: "#0094b7f8",
+    a11: "#007491ef",
+    a12: "#00323ef2",
+    contrast: "#ffffff",
+    surface: "#eff9facc",
+    indicator: "#00a2c7",
+    track: "#00a2c7"
+  },
+  dark: {
+    1: "#0b161a",
+    2: "#101b20",
+    3: "#082c36",
+    4: "#003848",
+    5: "#004558",
+    6: "#045468",
+    7: "#12677e",
+    8: "#11809c",
+    9: "#00a2c7",
+    10: "#23afd0",
+    11: "#4ccce6",
+    12: "#b6ecf7",
+    a1: "#0091f70a",
+    a2: "#02a7f211",
+    a3: "#00befd28",
+    a4: "#00baff3b",
+    a5: "#00befd4d",
+    a6: "#00c7fd5e",
+    a7: "#14cdff75",
+    a8: "#11cfff95",
+    a9: "#00cfffc3",
+    a10: "#28d6ffcd",
+    a11: "#52e1fee5",
+    a12: "#bbf3fef7",
+    contrast: "#ffffff",
+    surface: "#11252d80",
+    indicator: "#00a2c7",
+    track: "#00a2c7"
+  }
+};
+
+const teal = {
+  light: {
+    1: "#fafefd",
+    2: "#f3fbf9",
+    3: "#e0f8f3",
+    4: "#ccf3ea",
+    5: "#b8eae0",
+    6: "#a1ded2",
+    7: "#83cdc1",
+    8: "#53b9ab",
+    9: "#12a594",
+    10: "#0d9b8a",
+    11: "#008573",
+    12: "#0d3d38",
+    a1: "#00cc9905",
+    a2: "#00aa800c",
+    a3: "#00c69d1f",
+    a4: "#00c39633",
+    a5: "#00b49047",
+    a6: "#00a6855e",
+    a7: "#0099807c",
+    a8: "#009783ac",
+    a9: "#009e8ced",
+    a10: "#009684f2",
+    a11: "#008573",
+    a12: "#00332df2",
+    contrast: "#ffffff",
+    surface: "#f0faf8cc",
+    indicator: "#12a594",
+    track: "#12a594"
+  },
+  dark: {
+    1: "#0d1514",
+    2: "#111c1b",
+    3: "#0d2d2a",
+    4: "#023b37",
+    5: "#084843",
+    6: "#145750",
+    7: "#1c6961",
+    8: "#207e73",
+    9: "#12a594",
+    10: "#0eb39e",
+    11: "#0bd8b6",
+    12: "#adf0dd",
+    a1: "#00deab05",
+    a2: "#12fbe60c",
+    a3: "#00ffe61e",
+    a4: "#00ffe92d",
+    a5: "#00ffea3b",
+    a6: "#1cffe84b",
+    a7: "#2efde85f",
+    a8: "#32ffe775",
+    a9: "#13ffe49f",
+    a10: "#0dffe0ae",
+    a11: "#0afed5d6",
+    a12: "#b8ffebef",
+    contrast: "#ffffff",
+    surface: "#13272580",
+    indicator: "#12a594",
+    track: "#12a594"
+  }
+};
+
+const jade = {
+  light: {
+    1: "#fbfefd",
+    2: "#f4fbf7",
+    3: "#e6f7ed",
+    4: "#d6f1e3",
+    5: "#c3e9d7",
+    6: "#acdec8",
+    7: "#8bceb6",
+    8: "#56ba9f",
+    9: "#29a383",
+    10: "#26997b",
+    11: "#208368",
+    12: "#1d3b31",
+    a1: "#00c08004",
+    a2: "#00a3460b",
+    a3: "#00ae4819",
+    a4: "#00a85129",
+    a5: "#00a2553c",
+    a6: "#009a5753",
+    a7: "#00945f74",
+    a8: "#00976ea9",
+    a9: "#00916bd6",
+    a10: "#008764d9",
+    a11: "#007152df",
+    a12: "#002217e2",
+    contrast: "#ffffff",
+    surface: "#f1faf5cc",
+    indicator: "#29a383",
+    track: "#29a383"
+  },
+  dark: {
+    1: "#0d1512",
+    2: "#121c18",
+    3: "#0f2e22",
+    4: "#0b3b2c",
+    5: "#114837",
+    6: "#1b5745",
+    7: "#246854",
+    8: "#2a7e68",
+    9: "#29a383",
+    10: "#27b08b",
+    11: "#1fd8a4",
+    12: "#adf0d4",
+    a1: "#00de4505",
+    a2: "#27fba60c",
+    a3: "#02f99920",
+    a4: "#00ffaa2d",
+    a5: "#11ffb63b",
+    a6: "#34ffc24b",
+    a7: "#45fdc75e",
+    a8: "#48ffcf75",
+    a9: "#38feca9d",
+    a10: "#31fec7ab",
+    a11: "#21fec0d6",
+    a12: "#b8ffe1ef",
+    contrast: "#ffffff",
+    surface: "#13271f80",
+    indicator: "#29a383",
+    track: "#29a383"
+  }
+};
+
+const green = {
+  light: {
+    1: "#fbfefc",
+    2: "#f4fbf6",
+    3: "#e6f6eb",
+    4: "#d6f1df",
+    5: "#c4e8d1",
+    6: "#adddc0",
+    7: "#8eceaa",
+    8: "#5bb98b",
+    9: "#30a46c",
+    10: "#2b9a66",
+    11: "#218358",
+    12: "#193b2d",
+    a1: "#00c04004",
+    a2: "#00a32f0b",
+    a3: "#00a43319",
+    a4: "#00a83829",
+    a5: "#019c393b",
+    a6: "#00963c52",
+    a7: "#00914071",
+    a8: "#00924ba4",
+    a9: "#008f4acf",
+    a10: "#008647d4",
+    a11: "#00713fde",
+    a12: "#002616e6",
+    contrast: "#ffffff",
+    surface: "#f1faf4cc",
+    indicator: "#30a46c",
+    track: "#30a46c"
+  },
+  dark: {
+    1: "#0e1512",
+    2: "#121b17",
+    3: "#132d21",
+    4: "#113b29",
+    5: "#174933",
+    6: "#20573e",
+    7: "#28684a",
+    8: "#2f7c57",
+    9: "#30a46c",
+    10: "#33b074",
+    11: "#3dd68c",
+    12: "#b1f1cb",
+    a1: "#00de4505",
+    a2: "#29f99d0b",
+    a3: "#22ff991e",
+    a4: "#11ff992d",
+    a5: "#2bffa23c",
+    a6: "#44ffaa4b",
+    a7: "#50fdac5e",
+    a8: "#54ffad73",
+    a9: "#44ffa49e",
+    a10: "#43fea4ab",
+    a11: "#46fea5d4",
+    a12: "#bbffd7f0",
+    contrast: "#ffffff",
+    surface: "#15251d80",
+    indicator: "#30a46c",
+    track: "#30a46c"
+  }
+};
+
+const grass = {
+  light: {
+    1: "#fbfefb",
+    2: "#f5fbf5",
+    3: "#e9f6e9",
+    4: "#daf1db",
+    5: "#c9e8ca",
+    6: "#b2ddb5",
+    7: "#94ce9a",
+    8: "#65ba74",
+    9: "#46a758",
+    10: "#3e9b4f",
+    11: "#2a7e3b",
+    12: "#203c25",
+    a1: "#00c00004",
+    a2: "#0099000a",
+    a3: "#00970016",
+    a4: "#009f0725",
+    a5: "#00930536",
+    a6: "#008f0a4d",
+    a7: "#018b0f6b",
+    a8: "#008d199a",
+    a9: "#008619b9",
+    a10: "#007b17c1",
+    a11: "#006514d5",
+    a12: "#002006df",
+    contrast: "#ffffff",
+    surface: "#f3faf3cc",
+    indicator: "#46a758",
+    track: "#46a758"
+  },
+  dark: {
+    1: "#0e1511",
+    2: "#141a15",
+    3: "#1b2a1e",
+    4: "#1d3a24",
+    5: "#25482d",
+    6: "#2d5736",
+    7: "#366740",
+    8: "#3e7949",
+    9: "#46a758",
+    10: "#53b365",
+    11: "#71d083",
+    12: "#c2f0c2",
+    a1: "#00de1205",
+    a2: "#5ef7780a",
+    a3: "#70fe8c1b",
+    a4: "#57ff802c",
+    a5: "#68ff8b3b",
+    a6: "#71ff8f4b",
+    a7: "#77fd925d",
+    a8: "#77fd9070",
+    a9: "#65ff82a1",
+    a10: "#72ff8dae",
+    a11: "#89ff9fcd",
+    a12: "#ceffceef",
+    contrast: "#ffffff",
+    surface: "#19231b80",
+    indicator: "#46a758",
+    track: "#46a758"
+  }
+};
+
+const bronze = {
+  light: {
+    1: "#fdfcfc",
+    2: "#fdf7f5",
+    3: "#f6edea",
+    4: "#efe4df",
+    5: "#e7d9d3",
+    6: "#dfcdc5",
+    7: "#d3bcb3",
+    8: "#c2a499",
+    9: "#a18072",
+    10: "#957468",
+    11: "#7d5e54",
+    12: "#43302b",
+    a1: "#55000003",
+    a2: "#cc33000a",
+    a3: "#92250015",
+    a4: "#80280020",
+    a5: "#7423002c",
+    a6: "#7324003a",
+    a7: "#6c1f004c",
+    a8: "#671c0066",
+    a9: "#551a008d",
+    a10: "#4c150097",
+    a11: "#3d0f00ab",
+    a12: "#1d0600d4",
+    contrast: "#ffffff",
+    surface: "#fdf5f3cc",
+    indicator: "#a18072",
+    track: "#a18072"
+  },
+  dark: {
+    1: "#141110",
+    2: "#1c1917",
+    3: "#262220",
+    4: "#302a27",
+    5: "#3b3330",
+    6: "#493e3a",
+    7: "#5a4c47",
+    8: "#6f5f58",
+    9: "#a18072",
+    10: "#ae8c7e",
+    11: "#d4b3a5",
+    12: "#ede0d9",
+    a1: "#d1110004",
+    a2: "#fbbc910c",
+    a3: "#faceb817",
+    a4: "#facdb622",
+    a5: "#ffd2c12d",
+    a6: "#ffd1c03c",
+    a7: "#fdd0c04f",
+    a8: "#ffd6c565",
+    a9: "#fec7b09b",
+    a10: "#fecab5a9",
+    a11: "#ffd7c6d1",
+    a12: "#fff1e9ec",
+    contrast: "#ffffff",
+    surface: "#27211d80",
+    indicator: "#a18072",
+    track: "#a18072"
+  }
+};
+
+const gold = {
+  light: {
+    1: "#fdfdfc",
+    2: "#faf9f2",
+    3: "#f2f0e7",
+    4: "#eae6db",
+    5: "#e1dccf",
+    6: "#d8d0bf",
+    7: "#cbc0aa",
+    8: "#b9a88d",
+    9: "#978365",
+    10: "#8c7a5e",
+    11: "#71624b",
+    12: "#3b352b",
+    a1: "#55550003",
+    a2: "#9d8a000d",
+    a3: "#75600018",
+    a4: "#6b4e0024",
+    a5: "#60460030",
+    a6: "#64440040",
+    a7: "#63420055",
+    a8: "#633d0072",
+    a9: "#5332009a",
+    a10: "#492d00a1",
+    a11: "#362100b4",
+    a12: "#130c00d4",
+    contrast: "#ffffff",
+    surface: "#f9f8efcc",
+    indicator: "#978365",
+    track: "#978365"
+  },
+  dark: {
+    1: "#121211",
+    2: "#1b1a17",
+    3: "#24231f",
+    4: "#2d2b26",
+    5: "#38352e",
+    6: "#444039",
+    7: "#544f46",
+    8: "#696256",
+    9: "#978365",
+    10: "#a39073",
+    11: "#cbb99f",
+    12: "#e8e2d9",
+    a1: "#91911102",
+    a2: "#f9e29d0b",
+    a3: "#f8ecbb15",
+    a4: "#ffeec41e",
+    a5: "#feecc22a",
+    a6: "#feebcb37",
+    a7: "#ffedcd48",
+    a8: "#fdeaca5f",
+    a9: "#ffdba690",
+    a10: "#fedfb09d",
+    a11: "#fee7c6c8",
+    a12: "#fef7ede7",
+    contrast: "#ffffff",
+    surface: "#25231d80",
+    indicator: "#978365",
+    track: "#978365"
+  }
+};
+
+const brown = {
+  light: {
+    1: "#fefdfc",
+    2: "#fcf9f6",
+    3: "#f6eee7",
+    4: "#f0e4d9",
+    5: "#ebdaca",
+    6: "#e4cdb7",
+    7: "#dcbc9f",
+    8: "#cea37e",
+    9: "#ad7f58",
+    10: "#a07553",
+    11: "#815e46",
+    12: "#3e332e",
+    a1: "#aa550003",
+    a2: "#aa550009",
+    a3: "#a04b0018",
+    a4: "#9b4a0026",
+    a5: "#9f4d0035",
+    a6: "#a04e0048",
+    a7: "#a34e0060",
+    a8: "#9f4a0081",
+    a9: "#823c00a7",
+    a10: "#723300ac",
+    a11: "#522100b9",
+    a12: "#140600d1",
+    contrast: "#ffffff",
+    surface: "#fbf8f4cc",
+    indicator: "#ad7f58",
+    track: "#ad7f58"
+  },
+  dark: {
+    1: "#12110f",
+    2: "#1c1816",
+    3: "#28211d",
+    4: "#322922",
+    5: "#3e3128",
+    6: "#4d3c2f",
+    7: "#614a39",
+    8: "#7c5f46",
+    9: "#ad7f58",
+    10: "#b88c67",
+    11: "#dbb594",
+    12: "#f2e1ca",
+    a1: "#91110002",
+    a2: "#fba67c0c",
+    a3: "#fcb58c19",
+    a4: "#fbbb8a24",
+    a5: "#fcb88931",
+    a6: "#fdba8741",
+    a7: "#ffbb8856",
+    a8: "#ffbe8773",
+    a9: "#feb87da8",
+    a10: "#ffc18cb3",
+    a11: "#fed1aad9",
+    a12: "#feecd4f2",
+    contrast: "#ffffff",
+    surface: "#271f1b80",
+    indicator: "#ad7f58",
+    track: "#ad7f58"
+  }
+};
+
+const orange = {
+  light: {
+    1: "#fefcfb",
+    2: "#fff7ed",
+    3: "#ffefd6",
+    4: "#ffdfb5",
+    5: "#ffd19a",
+    6: "#ffc182",
+    7: "#f5ae73",
+    8: "#ec9455",
+    9: "#f76b15",
+    10: "#ef5f00",
+    11: "#cc4e00",
+    12: "#582d1d",
+    a1: "#c0400004",
+    a2: "#ff8e0012",
+    a3: "#ff9c0029",
+    a4: "#ff91014a",
+    a5: "#ff8b0065",
+    a6: "#ff81007d",
+    a7: "#ed6c008c",
+    a8: "#e35f00aa",
+    a9: "#f65e00ea",
+    a10: "#ef5f00",
+    a11: "#cc4e00",
+    a12: "#431200e2",
+    contrast: "#ffffff",
+    surface: "#fff5e9cc",
+    indicator: "#f76b15",
+    track: "#f76b15"
+  },
+  dark: {
+    1: "#17120e",
+    2: "#1e160f",
+    3: "#331e0b",
+    4: "#462100",
+    5: "#562800",
+    6: "#66350c",
+    7: "#7e451d",
+    8: "#a35829",
+    9: "#f76b15",
+    10: "#ff801f",
+    11: "#ffa057",
+    12: "#ffe0c2",
+    a1: "#ec360007",
+    a2: "#fe6d000e",
+    a3: "#fb6a0025",
+    a4: "#ff590039",
+    a5: "#ff61004a",
+    a6: "#fd75045c",
+    a7: "#ff832c75",
+    a8: "#fe84389d",
+    a9: "#fe6d15f7",
+    a10: "#ff801f",
+    a11: "#ffa057",
+    a12: "#ffe0c2",
+    contrast: "#ffffff",
+    surface: "#271d1d80",
+    indicator: "#f76b15",
+    track: "#f76b15"
+  }
+};
+
+const amber = {
+  light: {
+    1: "#fefdfb",
+    2: "#fefbe9",
+    3: "#fff7c2",
+    4: "#ffee9c",
+    5: "#fbe577",
+    6: "#f3d673",
+    7: "#e9c162",
+    8: "#e2a336",
+    9: "#ffc53d",
+    10: "#ffba18",
+    11: "#ab6400",
+    12: "#4f3422",
+    a1: "#c0800004",
+    a2: "#f4d10016",
+    a3: "#ffde003d",
+    a4: "#ffd40063",
+    a5: "#f8cf0088",
+    a6: "#eab5008c",
+    a7: "#dc9b009d",
+    a8: "#da8a00c9",
+    a9: "#ffb300c2",
+    a10: "#ffb300e7",
+    a11: "#ab6400",
+    a12: "#341500dd",
+    contrast: "#21201c",
+    surface: "#fefae4cc",
+    indicator: "#ffc53d",
+    track: "#ffc53d"
+  },
+  dark: {
+    1: "#16120c",
+    2: "#1d180f",
+    3: "#302008",
+    4: "#3f2700",
+    5: "#4d3000",
+    6: "#5c3d05",
+    7: "#714f19",
+    8: "#8f6424",
+    9: "#ffc53d",
+    10: "#ffd60a",
+    11: "#ffca16",
+    12: "#ffe7b3",
+    a1: "#e63c0006",
+    a2: "#fd9b000d",
+    a3: "#fa820022",
+    a4: "#fc820032",
+    a5: "#fd8b0041",
+    a6: "#fd9b0051",
+    a7: "#ffab2567",
+    a8: "#ffae3587",
+    a9: "#ffc53d",
+    a10: "#ffd60a",
+    a11: "#ffca16",
+    a12: "#ffe7b3",
+    contrast: "#21201c",
+    surface: "#271f1380",
+    indicator: "#ffc53d",
+    track: "#ffc53d"
+  }
+};
+
+const yellow = {
+  light: {
+    1: "#fdfdf9",
+    2: "#fefce9",
+    3: "#fffab8",
+    4: "#fff394",
+    5: "#ffe770",
+    6: "#f3d768",
+    7: "#e4c767",
+    8: "#d5ae39",
+    9: "#ffe629",
+    10: "#ffdc00",
+    11: "#9e6c00",
+    12: "#473b1f",
+    a1: "#aaaa0006",
+    a2: "#f4dd0016",
+    a3: "#ffee0047",
+    a4: "#ffe3016b",
+    a5: "#ffd5008f",
+    a6: "#ebbc0097",
+    a7: "#d2a10098",
+    a8: "#c99700c6",
+    a9: "#ffe100d6",
+    a10: "#ffdc00",
+    a11: "#9e6c00",
+    a12: "#2e2000e0",
+    contrast: "#21201c",
+    surface: "#fefbe4cc",
+    indicator: "#ffe629",
+    track: "#ffe629"
+  },
+  dark: {
+    1: "#14120b",
+    2: "#1b180f",
+    3: "#2d2305",
+    4: "#362b00",
+    5: "#433500",
+    6: "#524202",
+    7: "#665417",
+    8: "#836a21",
+    9: "#ffe629",
+    10: "#ffff57",
+    11: "#f5e147",
+    12: "#f6eeb4",
+    a1: "#d1510004",
+    a2: "#f9b4000b",
+    a3: "#ffaa001e",
+    a4: "#fdb70028",
+    a5: "#febb0036",
+    a6: "#fec40046",
+    a7: "#fdcb225c",
+    a8: "#fdca327b",
+    a9: "#ffe629",
+    a10: "#ffff57",
+    a11: "#fee949f5",
+    a12: "#fef6baf6",
+    contrast: "#21201c",
+    surface: "#231f1380",
+    indicator: "#ffe629",
+    track: "#ffe629"
+  }
+};
+
+const lime = {
+  light: {
+    1: "#fcfdfa",
+    2: "#f8faf3",
+    3: "#eef6d6",
+    4: "#e2f0bd",
+    5: "#d3e7a6",
+    6: "#c2da91",
+    7: "#abc978",
+    8: "#8db654",
+    9: "#bdee63",
+    10: "#b0e64c",
+    11: "#5c7c2f",
+    12: "#37401c",
+    a1: "#66990005",
+    a2: "#6b95000c",
+    a3: "#96c80029",
+    a4: "#8fc60042",
+    a5: "#81bb0059",
+    a6: "#72aa006e",
+    a7: "#61990087",
+    a8: "#559200ab",
+    a9: "#93e4009c",
+    a10: "#8fdc00b3",
+    a11: "#375f00d0",
+    a12: "#1e2900e3",
+    contrast: "#21201c",
+    surface: "#f6f9f0cc",
+    indicator: "#bdee63",
+    track: "#bdee63"
+  },
+  dark: {
+    1: "#11130c",
+    2: "#151a10",
+    3: "#1f2917",
+    4: "#29371d",
+    5: "#334423",
+    6: "#3d522a",
+    7: "#496231",
+    8: "#577538",
+    9: "#bdee63",
+    10: "#d4ff70",
+    11: "#bde56c",
+    12: "#e3f7ba",
+    a1: "#11bb0003",
+    a2: "#78f7000a",
+    a3: "#9bfd4c1a",
+    a4: "#a7fe5c29",
+    a5: "#affe6537",
+    a6: "#b2fe6d46",
+    a7: "#b6ff6f57",
+    a8: "#b6fd6d6c",
+    a9: "#caff69ed",
+    a10: "#d4ff70",
+    a11: "#d1fe77e4",
+    a12: "#e9febff7",
+    contrast: "#21201c",
+    surface: "#1b211580",
+    indicator: "#bdee63",
+    track: "#bdee63"
+  }
+};
+
+const mint = {
+  light: {
+    1: "#f9fefd",
+    2: "#f2fbf9",
+    3: "#ddf9f2",
+    4: "#c8f4e9",
+    5: "#b3ecde",
+    6: "#9ce0d0",
+    7: "#7ecfbd",
+    8: "#4cbba5",
+    9: "#86ead4",
+    10: "#7de0cb",
+    11: "#027864",
+    12: "#16433c",
+    a1: "#00d5aa06",
+    a2: "#00b18a0d",
+    a3: "#00d29e22",
+    a4: "#00cc9937",
+    a5: "#00c0914c",
+    a6: "#00b08663",
+    a7: "#00a17d81",
+    a8: "#009e7fb3",
+    a9: "#00d3a579",
+    a10: "#00c39982",
+    a11: "#007763fd",
+    a12: "#00312ae9",
+    contrast: "#21201c",
+    surface: "#effaf8cc",
+    indicator: "#86ead4",
+    track: "#86ead4"
+  },
+  dark: {
+    1: "#0e1515",
+    2: "#0f1b1b",
+    3: "#092c2b",
+    4: "#003a38",
+    5: "#004744",
+    6: "#105650",
+    7: "#1e685f",
+    8: "#277f70",
+    9: "#86ead4",
+    10: "#a8f5e5",
+    11: "#58d5ba",
+    12: "#c4f5e1",
+    a1: "#00dede05",
+    a2: "#00f9f90b",
+    a3: "#00fff61d",
+    a4: "#00fff42c",
+    a5: "#00fff23a",
+    a6: "#0effeb4a",
+    a7: "#34fde55e",
+    a8: "#41ffdf76",
+    a9: "#92ffe7e9",
+    a10: "#aefeedf5",
+    a11: "#67ffded2",
+    a12: "#cbfee9f5",
+    contrast: "#21201c",
+    surface: "#15272780",
+    indicator: "#86ead4",
+    track: "#86ead4"
+  }
+};
+
+const sky = {
+  light: {
+    1: "#f9feff",
+    2: "#f1fafd",
+    3: "#e1f6fd",
+    4: "#d1f0fa",
+    5: "#bee7f5",
+    6: "#a9daed",
+    7: "#8dcae3",
+    8: "#60b3d7",
+    9: "#7ce2fe",
+    10: "#74daf8",
+    11: "#00749e",
+    12: "#1d3e56",
+    a1: "#00d5ff06",
+    a2: "#00a4db0e",
+    a3: "#00b3ee1e",
+    a4: "#00ace42e",
+    a5: "#00a1d841",
+    a6: "#0092ca56",
+    a7: "#0089c172",
+    a8: "#0085bf9f",
+    a9: "#00c7fe83",
+    a10: "#00bcf38b",
+    a11: "#00749e",
+    a12: "#002540e2",
+    contrast: "#21201c",
+    surface: "#eef9fdcc",
+    indicator: "#7ce2fe",
+    track: "#7ce2fe"
+  },
+  dark: {
+    1: "#0d141f",
+    2: "#111a27",
+    3: "#112840",
+    4: "#113555",
+    5: "#154467",
+    6: "#1b537b",
+    7: "#1f6692",
+    8: "#197cae",
+    9: "#7ce2fe",
+    10: "#a8eeff",
+    11: "#75c7f0",
+    12: "#c2f3ff",
+    a1: "#0044ff0f",
+    a2: "#1171fb18",
+    a3: "#1184fc33",
+    a4: "#128fff49",
+    a5: "#1c9dfd5d",
+    a6: "#28a5ff72",
+    a7: "#2badfe8b",
+    a8: "#1db2fea9",
+    a9: "#7ce3fffe",
+    a10: "#a8eeff",
+    a11: "#7cd3ffef",
+    a12: "#c2f3ff",
+    contrast: "#21201c",
+    surface: "#13233b80",
+    indicator: "#7ce2fe",
+    track: "#7ce2fe"
+  }
+};
+
+const gray = {
+  light: {
+    1: "#fcfcfc",
+    2: "#f9f9f9",
+    3: "#f0f0f0",
+    4: "#e8e8e8",
+    5: "#e0e0e0",
+    6: "#d9d9d9",
+    7: "#cecece",
+    8: "#bbbbbb",
+    9: "#8d8d8d",
+    10: "#838383",
+    11: "#646464",
+    12: "#202020",
+    a1: "#00000003",
+    a2: "#00000006",
+    a3: "#0000000f",
+    a4: "#00000017",
+    a5: "#0000001f",
+    a6: "#00000026",
+    a7: "#00000031",
+    a8: "#00000044",
+    a9: "#00000072",
+    a10: "#0000007c",
+    a11: "#0000009b",
+    a12: "#000000df",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#8d8d8d",
+    track: "#8d8d8d"
+  },
+  dark: {
+    1: "#111111",
+    2: "#191919",
+    3: "#222222",
+    4: "#2a2a2a",
+    5: "#313131",
+    6: "#3a3a3a",
+    7: "#484848",
+    8: "#606060",
+    9: "#6e6e6e",
+    10: "#7b7b7b",
+    11: "#b4b4b4",
+    12: "#eeeeee",
+    a1: "#00000000",
+    a2: "#ffffff09",
+    a3: "#ffffff12",
+    a4: "#ffffff1b",
+    a5: "#ffffff22",
+    a6: "#ffffff2c",
+    a7: "#ffffff3b",
+    a8: "#ffffff55",
+    a9: "#ffffff64",
+    a10: "#ffffff72",
+    a11: "#ffffffaf",
+    a12: "#ffffffed",
+    contrast: "#ffffff",
+    surface: "#21212180",
+    indicator: "#6e6e6e",
+    track: "#6e6e6e"
+  }
+};
+
+const mauve = {
+  light: {
+    1: "#fdfcfd",
+    2: "#faf9fb",
+    3: "#f2eff3",
+    4: "#eae7ec",
+    5: "#e3dfe6",
+    6: "#dbd8e0",
+    7: "#d0cdd7",
+    8: "#bcbac7",
+    9: "#8e8c99",
+    10: "#84828e",
+    11: "#65636d",
+    12: "#211f26",
+    a1: "#55005503",
+    a2: "#2b005506",
+    a3: "#30004010",
+    a4: "#20003618",
+    a5: "#20003820",
+    a6: "#14003527",
+    a7: "#10003332",
+    a8: "#08003145",
+    a9: "#05001d73",
+    a10: "#0500197d",
+    a11: "#0400119c",
+    a12: "#020008e0",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#8e8c99",
+    track: "#8e8c99"
+  },
+  dark: {
+    1: "#121113",
+    2: "#1a191b",
+    3: "#232225",
+    4: "#2b292d",
+    5: "#323035",
+    6: "#3c393f",
+    7: "#49474e",
+    8: "#625f69",
+    9: "#6f6d78",
+    10: "#7c7a85",
+    11: "#b5b2bc",
+    12: "#eeeef0",
+    a1: "#00000000",
+    a2: "#f5f4f609",
+    a3: "#ebeaf814",
+    a4: "#eee5f81d",
+    a5: "#efe6fe25",
+    a6: "#f1e6fd30",
+    a7: "#eee9ff40",
+    a8: "#eee7ff5d",
+    a9: "#eae6fd6e",
+    a10: "#ece9fd7c",
+    a11: "#f5f1ffb7",
+    a12: "#fdfdffef",
+    contrast: "#ffffff",
+    surface: "#22212380",
+    indicator: "#6f6d78",
+    track: "#6f6d78"
+  }
+};
+
+const slate = {
+  light: {
+    1: "#fcfcfd",
+    2: "#f9f9fb",
+    3: "#f0f0f3",
+    4: "#e8e8ec",
+    5: "#e0e1e6",
+    6: "#d9d9e0",
+    7: "#cdced6",
+    8: "#b9bbc6",
+    9: "#8b8d98",
+    10: "#80838d",
+    11: "#60646c",
+    12: "#1c2024",
+    a1: "#00005503",
+    a2: "#00005506",
+    a3: "#0000330f",
+    a4: "#00002d17",
+    a5: "#0009321f",
+    a6: "#00002f26",
+    a7: "#00062e32",
+    a8: "#00083046",
+    a9: "#00051d74",
+    a10: "#00071b7f",
+    a11: "#0007149f",
+    a12: "#000509e3",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#8b8d98",
+    track: "#8b8d98"
+  },
+  dark: {
+    1: "#111113",
+    2: "#18191b",
+    3: "#212225",
+    4: "#272a2d",
+    5: "#2e3135",
+    6: "#363a3f",
+    7: "#43484e",
+    8: "#5a6169",
+    9: "#696e77",
+    10: "#777b84",
+    11: "#b0b4ba",
+    12: "#edeef0",
+    a1: "#00000000",
+    a2: "#d8f4f609",
+    a3: "#ddeaf814",
+    a4: "#d3edf81d",
+    a5: "#d9edfe25",
+    a6: "#d6ebfd30",
+    a7: "#d9edff40",
+    a8: "#d9edff5d",
+    a9: "#dfebfd6d",
+    a10: "#e5edfd7b",
+    a11: "#f1f7feb5",
+    a12: "#fcfdffef",
+    contrast: "#ffffff",
+    surface: "#1f212380",
+    indicator: "#696e77",
+    track: "#696e77"
+  }
+};
+
+const sage = {
+  light: {
+    1: "#fbfdfc",
+    2: "#f7f9f8",
+    3: "#eef1f0",
+    4: "#e6e9e8",
+    5: "#dfe2e0",
+    6: "#d7dad9",
+    7: "#cbcfcd",
+    8: "#b8bcba",
+    9: "#868e8b",
+    10: "#7c8481",
+    11: "#5f6563",
+    12: "#1a211e",
+    a1: "#00804004",
+    a2: "#00402008",
+    a3: "#002d1e11",
+    a4: "#001f1519",
+    a5: "#00180820",
+    a6: "#00140d28",
+    a7: "#00140a34",
+    a8: "#000f0847",
+    a9: "#00110b79",
+    a10: "#00100a83",
+    a11: "#000a07a0",
+    a12: "#000805e5",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#868e8b",
+    track: "#868e8b"
+  },
+  dark: {
+    1: "#101211",
+    2: "#171918",
+    3: "#202221",
+    4: "#272a29",
+    5: "#2e3130",
+    6: "#373b39",
+    7: "#444947",
+    8: "#5b625f",
+    9: "#63706b",
+    10: "#717d79",
+    11: "#adb5b2",
+    12: "#eceeed",
+    a1: "#00000000",
+    a2: "#f0f2f108",
+    a3: "#f3f5f412",
+    a4: "#f2fefd1a",
+    a5: "#f1fbfa22",
+    a6: "#edfbf42d",
+    a7: "#edfcf73c",
+    a8: "#ebfdf657",
+    a9: "#dffdf266",
+    a10: "#e5fdf674",
+    a11: "#f4fefbb0",
+    a12: "#fdfffeed",
+    contrast: "#ffffff",
+    surface: "#1e201f80",
+    indicator: "#63706b",
+    track: "#63706b"
+  }
+};
+
+const olive = {
+  light: {
+    1: "#fcfdfc",
+    2: "#f8faf8",
+    3: "#eff1ef",
+    4: "#e7e9e7",
+    5: "#dfe2df",
+    6: "#d7dad7",
+    7: "#cccfcc",
+    8: "#b9bcb8",
+    9: "#898e87",
+    10: "#7f847d",
+    11: "#60655f",
+    12: "#1d211c",
+    a1: "#00550003",
+    a2: "#00490007",
+    a3: "#00200010",
+    a4: "#00160018",
+    a5: "#00180020",
+    a6: "#00140028",
+    a7: "#000f0033",
+    a8: "#040f0047",
+    a9: "#050f0078",
+    a10: "#040e0082",
+    a11: "#020a00a0",
+    a12: "#010600e3",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#898e87",
+    track: "#898e87"
+  },
+  dark: {
+    1: "#111210",
+    2: "#181917",
+    3: "#212220",
+    4: "#282a27",
+    5: "#2f312e",
+    6: "#383a36",
+    7: "#454843",
+    8: "#5c625b",
+    9: "#687066",
+    10: "#767d74",
+    11: "#afb5ad",
+    12: "#eceeec",
+    a1: "#00000000",
+    a2: "#f1f2f008",
+    a3: "#f4f5f312",
+    a4: "#f3fef21a",
+    a5: "#f2fbf122",
+    a6: "#f4faed2c",
+    a7: "#f2fced3b",
+    a8: "#edfdeb57",
+    a9: "#ebfde766",
+    a10: "#f0fdec74",
+    a11: "#f6fef4b0",
+    a12: "#fdfffded",
+    contrast: "#ffffff",
+    surface: "#1f201e80",
+    indicator: "#687066",
+    track: "#687066"
+  }
+};
+
+const sand = {
+  light: {
+    1: "#fdfdfc",
+    2: "#f9f9f8",
+    3: "#f1f0ef",
+    4: "#e9e8e6",
+    5: "#e2e1de",
+    6: "#dad9d6",
+    7: "#cfceca",
+    8: "#bcbbb5",
+    9: "#8d8d86",
+    10: "#82827c",
+    11: "#63635e",
+    12: "#21201c",
+    a1: "#55550003",
+    a2: "#25250007",
+    a3: "#20100010",
+    a4: "#1f150019",
+    a5: "#1f180021",
+    a6: "#19130029",
+    a7: "#19140035",
+    a8: "#1915014a",
+    a9: "#0f0f0079",
+    a10: "#0c0c0083",
+    a11: "#080800a1",
+    a12: "#060500e3",
+    contrast: "#ffffff",
+    surface: "#ffffffcc",
+    indicator: "#8d8d86",
+    track: "#8d8d86"
+  },
+  dark: {
+    1: "#111110",
+    2: "#191918",
+    3: "#222221",
+    4: "#2a2a28",
+    5: "#31312e",
+    6: "#3b3a37",
+    7: "#494844",
+    8: "#62605b",
+    9: "#6f6d66",
+    10: "#7c7b74",
+    11: "#b5b3ad",
+    12: "#eeeeec",
+    a1: "#00000000",
+    a2: "#f4f4f309",
+    a3: "#f6f6f513",
+    a4: "#fefef31b",
+    a5: "#fbfbeb23",
+    a6: "#fffaed2d",
+    a7: "#fffbed3c",
+    a8: "#fff9eb57",
+    a9: "#fffae965",
+    a10: "#fffdee73",
+    a11: "#fffcf4b0",
+    a12: "#fffffded",
+    contrast: "#ffffff",
+    surface: "#21212080",
+    indicator: "#6f6d66",
+    track: "#6f6d66"
+  }
+};
+
+const colorMap = {
+  tomato,
+  red,
+  ruby,
+  crimson,
+  pink,
+  plum,
+  purple,
+  violet,
+  iris,
+  indigo,
+  blue,
+  cyan,
+  teal,
+  jade,
+  green,
+  grass,
+  bronze,
+  gold,
+  brown,
+  orange,
+  amber,
+  yellow,
+  lime,
+  mint,
+  sky,
+  gray,
+  mauve,
+  slate,
+  sage,
+  olive,
+  sand
+};
+function resolveColor(color, appearance, accentColor, resolvedGrayColor, colorOverrides) {
+  let colorName;
+  let step;
+  if (color.startsWith("accent-")) {
+    colorName = accentColor;
+    step = color.slice("accent-".length);
+  } else if (color.startsWith("gray-")) {
+    colorName = resolvedGrayColor;
+    step = color.slice("gray-".length);
+  } else {
+    const dashIdx = color.lastIndexOf("-");
+    if (dashIdx <= 0) return color;
+    colorName = color.slice(0, dashIdx);
+    step = color.slice(dashIdx + 1);
+  }
+  if (colorOverrides) {
+    const scaleOverride = colorOverrides[colorName];
+    if (scaleOverride) {
+      const modeOverride = scaleOverride[appearance];
+      if (modeOverride) {
+        const value = modeOverride[step];
+        if (value !== void 0) return value;
+      }
+    }
+  }
+  const scale = colorMap[colorName]?.[appearance];
+  if (!scale) return color;
+  return scale[step] ?? color;
+}
+
+function useResolveColor() {
+  const { appearance, accentColor, resolvedGrayColor, colorOverrides } = useThemeContext();
+  return React.useCallback(
+    (color) => resolveColor(color, appearance, accentColor, resolvedGrayColor, colorOverrides),
+    [appearance, accentColor, resolvedGrayColor, colorOverrides]
+  );
+}
+
+const scalingMap = {
+  "90%": 0.9,
+  "95%": 0.95,
+  "100%": 1,
+  "105%": 1.05,
+  "110%": 1.1
+};
+
+function applyScaling(value, scaling) {
+  return Math.round(value * scalingMap[scaling]);
+}
+
+const space = {
+  0: 0,
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 24,
+  6: 32,
+  7: 40,
+  8: 48,
+  9: 64
+};
+
+function resolveSpace(token, scaling) {
+  if (token === 0) return 0;
+  const sign = token < 0 ? -1 : 1;
+  const abs = Math.abs(token);
+  return sign * Math.round(space[abs] * scalingMap[scaling]);
+}
+
+function getClassicEffect(appearance, options) {
+  const isLight = appearance === "light";
+  const pressed = options?.pressed ?? false;
+  const isDisabled = options?.disabled ?? false;
+  if (isDisabled) return {};
+  if (pressed) {
+    return Platform.select({
+      ios: {
+        shadowColor: "transparent",
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0,
+        shadowRadius: 0
+      },
+      default: { elevation: 0 }
+    });
+  }
+  return Platform.select({
+    ios: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: isLight ? 0.15 : 0.3,
+      shadowRadius: 2
+    },
+    default: { elevation: 2 }
+  });
+}
+
+const BASE_RADIUS = {
+  1: 3,
+  2: 4,
+  3: 6,
+  4: 8,
+  5: 12,
+  6: 16
+};
+const RADIUS_FACTOR = {
+  none: 0,
+  small: 0.75,
+  medium: 1,
+  large: 1.5,
+  full: 1.5
+};
+const RADIUS_FULL = {
+  none: 0,
+  small: 0,
+  medium: 0,
+  large: 0,
+  full: 9999
+};
+function getRadius(token, level) {
+  return Math.round(BASE_RADIUS[level] * RADIUS_FACTOR[token]);
+}
+function getFullRadius(token) {
+  return RADIUS_FULL[token];
+}
+
+function Box({
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  overflow,
+  flexBasis,
+  flexShrink,
+  flexGrow,
+  bg,
+  radius,
+  style,
+  ...rest
+}) {
+  const { scaling } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const boxStyle = {
+    // Padding — specific > axis > all
+    paddingTop: sp(pt ?? py ?? p),
+    paddingBottom: sp(pb ?? py ?? p),
+    paddingLeft: sp(pl ?? px ?? p),
+    paddingRight: sp(pr ?? px ?? p),
+    // Margin — specific > axis > all
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m),
+    // Size
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    // Position
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    // Layout
+    overflow,
+    flexBasis,
+    flexShrink,
+    flexGrow,
+    // Theme
+    backgroundColor: bg ? rc(bg) : void 0,
+    borderRadius: radius ? radius === "full" ? getFullRadius(radius) : getRadius(radius, 4) : void 0
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [boxStyle, style], ...rest });
+}
+Box.displayName = "Box";
+
+const ALIGN_MAP$1 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+const JUSTIFY_MAP$1 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+function Flex({
+  direction,
+  align,
+  justify,
+  wrap,
+  gap,
+  gapX,
+  gapY,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  overflow,
+  flexBasis,
+  flexShrink,
+  flexGrow,
+  bg,
+  radius,
+  style,
+  ...rest
+}) {
+  const { scaling } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const flexStyle = {
+    // Flex-specific
+    flexDirection: direction,
+    alignItems: align ? ALIGN_MAP$1[align] : void 0,
+    justifyContent: justify ? JUSTIFY_MAP$1[justify] : void 0,
+    flexWrap: wrap,
+    rowGap: sp(gapY ?? gap),
+    columnGap: sp(gapX ?? gap),
+    // Padding — specific > axis > all
+    paddingTop: sp(pt ?? py ?? p),
+    paddingBottom: sp(pb ?? py ?? p),
+    paddingLeft: sp(pl ?? px ?? p),
+    paddingRight: sp(pr ?? px ?? p),
+    // Margin — specific > axis > all
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m),
+    // Size
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    // Position
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    // Layout
+    overflow,
+    flexBasis,
+    flexShrink,
+    flexGrow,
+    // Theme
+    backgroundColor: bg ? rc(bg) : void 0,
+    borderRadius: radius ? radius === "full" ? getFullRadius(radius) : getRadius(radius, 4) : void 0
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [flexStyle, style], ...rest });
+}
+Flex.displayName = "Flex";
+
+const ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+const JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+function Grid({
+  columns = 1,
+  gap,
+  gapX,
+  gapY,
+  align,
+  justify,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  overflow,
+  flexBasis,
+  flexShrink,
+  flexGrow,
+  bg,
+  radius,
+  style,
+  children,
+  onLayout: onLayoutProp,
+  ...rest
+}) {
+  const { scaling } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const columnGap = sp(gapX ?? gap) ?? 0;
+  const rowGap = sp(gapY ?? gap) ?? 0;
+  const [containerWidth, setContainerWidth] = useState(0);
+  const handleLayout = useCallback(
+    (e) => {
+      setContainerWidth(e.nativeEvent.layout.width);
+      onLayoutProp?.(e);
+    },
+    [onLayoutProp]
+  );
+  const cols = Math.max(1, Math.round(columns));
+  const cellWidth = containerWidth > 0 ? (containerWidth - (cols - 1) * columnGap) / cols : void 0;
+  const containerStyle = {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: ALIGN_MAP[align ?? "stretch"],
+    justifyContent: justify ? JUSTIFY_MAP[justify] : void 0,
+    rowGap,
+    columnGap,
+    // Padding
+    paddingTop: sp(pt ?? py ?? p),
+    paddingBottom: sp(pb ?? py ?? p),
+    paddingLeft: sp(pl ?? px ?? p),
+    paddingRight: sp(pr ?? px ?? p),
+    // Margin
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m),
+    // Size
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    // Position
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    // Layout
+    overflow,
+    flexBasis,
+    flexShrink,
+    flexGrow,
+    // Theme
+    backgroundColor: bg ? rc(bg) : void 0,
+    borderRadius: radius ? radius === "full" ? getFullRadius(radius) : getRadius(radius, 4) : void 0
+  };
+  const items = React.Children.toArray(children);
+  return /* @__PURE__ */ React.createElement(View, { style: [containerStyle, style], onLayout: handleLayout, ...rest }, items.map((child, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: { width: cellWidth } }, child)));
+}
+Grid.displayName = "Grid";
+
+const fontSize = {
+  1: 12,
+  2: 14,
+  3: 16,
+  4: 18,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 35,
+  9: 60
+};
+const lineHeight = {
+  1: 16,
+  2: 20,
+  3: 24,
+  4: 26,
+  5: 28,
+  6: 30,
+  7: 36,
+  8: 40,
+  9: 60
+};
+const headingLineHeight = {
+  1: 16,
+  2: 18,
+  3: 22,
+  4: 24,
+  5: 26,
+  6: 30,
+  7: 36,
+  8: 40,
+  9: 60
+};
+const letterSpacingEm = {
+  1: 25e-4,
+  2: 0,
+  3: 0,
+  4: -25e-4,
+  5: -5e-3,
+  6: -625e-5,
+  7: -75e-4,
+  8: -0.01,
+  9: -0.025
+};
+
+const FONT_WEIGHT$4 = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+function Text({
+  size = 3,
+  weight,
+  align,
+  truncate,
+  wrap,
+  color,
+  highContrast,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { scaling, fonts } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor);
+  const resolvedLineHeight = Math.round(lineHeight[size] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize;
+  const textColor = color ? rc(highContrast ? `${color}-12` : `${color}-a11`) : rc("gray-12");
+  const effectiveWeight = weight ?? "regular";
+  const fontFamily = fonts[effectiveWeight] ?? fonts.regular;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const textStyle = {
+    fontSize: resolvedSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color: textColor,
+    textAlign: align,
+    fontWeight: weight ? FONT_WEIGHT$4[weight] : void 0,
+    fontFamily,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: [textStyle, style],
+      ...rest
+    }
+  );
+}
+Text.displayName = "Text";
+
+const FONT_WEIGHT$3 = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+function Heading({
+  size = 6,
+  weight = "bold",
+  align,
+  truncate,
+  wrap,
+  color,
+  highContrast,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  children,
+  ...rest
+}) {
+  const { scaling, fonts } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor);
+  const resolvedLineHeight = Math.round(headingLineHeight[size] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize;
+  const textColor = color ? rc(highContrast ? `${color}-12` : `${color}-a11`) : rc("gray-12");
+  const effectiveWeight = weight ?? "bold";
+  const fontFamily = fonts.heading ?? fonts[effectiveWeight] ?? fonts.bold ?? fonts.regular;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const headingStyle = {
+    fontSize: resolvedSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color: textColor,
+    textAlign: align,
+    fontWeight: FONT_WEIGHT$3[weight],
+    fontFamily,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      accessibilityRole: "header",
+      numberOfLines,
+      ellipsizeMode,
+      style: [headingStyle, style],
+      ...rest
+    },
+    children
+  );
+}
+Heading.displayName = "Heading";
+
+const FONT_WEIGHT$2 = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+function Link({
+  size = 3,
+  weight,
+  truncate,
+  wrap,
+  underline = "auto",
+  color,
+  highContrast,
+  href,
+  onPress,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { scaling, fonts } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor);
+  const resolvedLineHeight = Math.round(lineHeight[size] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize;
+  const prefix = color ?? "accent";
+  const isGray = color === "gray";
+  const linkColor = rc(
+    isGray || highContrast ? `${prefix}-12` : `${prefix}-a11`
+  );
+  const effectiveWeight = weight ?? "regular";
+  const fontFamily = fonts[effectiveWeight] ?? fonts.regular;
+  const showUnderline = underline === "always" || underline === "auto" && !!highContrast;
+  const textDecorationLine = showUnderline ? "underline" : "none";
+  const textDecorationColor = showUnderline ? rc(highContrast ? `${prefix}-a6` : `${prefix}-a5`) : void 0;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const handlePress = React.useCallback(
+    (e) => {
+      if (onPress) {
+        onPress(e);
+      } else if (href) {
+        void Linking.openURL(href);
+      }
+    },
+    [onPress, href]
+  );
+  const linkStyle = {
+    fontSize: resolvedSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color: linkColor,
+    fontWeight: weight ? FONT_WEIGHT$2[weight] : void 0,
+    fontFamily,
+    textDecorationLine,
+    textDecorationColor,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      accessibilityRole: "link",
+      numberOfLines,
+      ellipsizeMode,
+      onPress: handlePress,
+      style: [linkStyle, style],
+      ...rest
+    }
+  );
+}
+Link.displayName = "Link";
+
+const FONT_WEIGHT$1 = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+function Blockquote({
+  size = 3,
+  weight = "regular",
+  color,
+  highContrast,
+  truncate,
+  wrap,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  children
+}) {
+  const { scaling, fonts } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor);
+  const resolvedLineHeight = Math.round(lineHeight[size] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize;
+  const borderColor = rc(color ? `${color}-a6` : "accent-a6");
+  const textColor = color ? rc(highContrast ? `${color}-12` : `${color}-a11`) : rc("gray-12");
+  const fontFamily = fonts[weight] ?? fonts.regular;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const s1 = space[1] * scalingFactor;
+  const s3 = space[3] * scalingFactor;
+  const s5 = space[5] * scalingFactor;
+  const borderWidth = Math.max(s1, resolvedSize * 0.25);
+  const paddingLeft = Math.min(s5, Math.max(s3, resolvedSize * 0.5));
+  const containerStyle = {
+    borderLeftWidth: borderWidth,
+    borderLeftColor: borderColor,
+    paddingLeft,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  const textStyle = {
+    fontSize: resolvedSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    fontWeight: FONT_WEIGHT$1[weight],
+    fontFamily,
+    color: textColor
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [containerStyle, style] }, /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: textStyle
+    },
+    children
+  ));
+}
+Blockquote.displayName = "Blockquote";
+
+function Em({
+  truncate,
+  wrap,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { scaling } = useThemeContext();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const emStyle = {
+    fontStyle: "italic",
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: [emStyle, style],
+      ...rest
+    }
+  );
+}
+Em.displayName = "Em";
+
+function Strong({
+  truncate,
+  wrap,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { scaling, fonts } = useThemeContext();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const strongStyle = {
+    fontWeight: "700",
+    fontFamily: fonts.bold ?? fonts.regular,
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: [strongStyle, style],
+      ...rest
+    }
+  );
+}
+Strong.displayName = "Strong";
+
+const FONT_WEIGHT = {
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700"
+};
+function Code({
+  size = 3,
+  variant = "soft",
+  weight,
+  color,
+  highContrast,
+  truncate,
+  wrap,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { scaling, fonts, radius } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const resolvedSize = Math.round(fontSize[size] * scalingFactor * 0.85);
+  const resolvedLetterSpacing = letterSpacingEm[size] * resolvedSize;
+  const prefix = color ?? "accent";
+  const textColor = (() => {
+    switch (variant) {
+      case "solid":
+        return rc(`${prefix}-contrast`);
+      case "soft":
+      case "outline":
+      case "ghost":
+      default:
+        return rc(highContrast ? `${prefix}-12` : `${prefix}-a11`);
+    }
+  })();
+  const backgroundColor = (() => {
+    switch (variant) {
+      case "solid":
+        return rc(`${prefix}-9`);
+      case "soft":
+        return rc(`${prefix}-a3`);
+      default:
+        return void 0;
+    }
+  })();
+  const borderColor = variant === "outline" ? rc(`${prefix}-a7`) : void 0;
+  const effectiveWeight = weight ?? "regular";
+  const fontFamily = fonts.code ?? fonts[effectiveWeight] ?? fonts.regular;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const paddingVertical = Math.round(resolvedSize * 0.1);
+  const paddingHorizontal = Math.round(resolvedSize * 0.35);
+  const codeStyle = {
+    fontSize: resolvedSize,
+    letterSpacing: resolvedLetterSpacing,
+    fontWeight: weight ? FONT_WEIGHT[weight] : void 0,
+    fontFamily,
+    color: textColor,
+    backgroundColor,
+    borderRadius: getRadius(radius, 1),
+    borderWidth: borderColor ? 1 : void 0,
+    borderColor,
+    paddingVertical,
+    paddingHorizontal,
+    // Shrink to content width when used standalone (no-op when nested inline in Text).
+    alignSelf: variant !== "ghost" ? "flex-start" : void 0,
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: [codeStyle, style],
+      ...rest
+    }
+  );
+}
+Code.displayName = "Code";
+
+function Kbd({
+  size = 2,
+  variant = "classic",
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  children
+}) {
+  const { scaling, fonts, radius } = useThemeContext();
+  const rc = useResolveColor();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const sf = scalingMap[scaling];
+  const kbdFontSize = Math.round(fontSize[size] * sf * 0.8);
+  const borderR = Math.max(2, Math.round(getRadius(radius, 2) * 0.35 * (kbdFontSize / 14)));
+  const minW = Math.round(kbdFontSize * 1.75);
+  const kbdHeight = Math.round(kbdFontSize * 1.7);
+  const ph = Math.round(kbdFontSize * 0.5);
+  const pb = Math.round(kbdFontSize * 0.05);
+  const parentFontSize = Math.round(fontSize[size] * sf);
+  const ascender = Math.round(parentFontSize * 0.82);
+  const translateY = Math.round((kbdHeight - ascender) * 0.5);
+  const isClassic = variant === "classic";
+  const containerStyle = {
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: kbdHeight,
+    minWidth: minW,
+    paddingHorizontal: ph,
+    paddingBottom: pb,
+    borderRadius: borderR,
+    backgroundColor: isClassic ? rc("gray-1") : rc("gray-a3"),
+    // Classic uses border to approximate box-shadow outline + bottom shadow
+    ...isClassic ? {
+      borderWidth: 1,
+      borderColor: rc("gray-a5"),
+      borderBottomWidth: 2,
+      borderBottomColor: rc("gray-a7")
+    } : {},
+    transform: [{ translateY }],
+    // iOS shadow approximates the outer drop shadow from Radix box-shadow
+    ...isClassic ? Platform.select({
+      ios: {
+        shadowColor: rc("gray-12"),
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.12,
+        shadowRadius: 1
+      },
+      android: {
+        elevation: 1
+      }
+    }) : {},
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  const textStyle = {
+    fontSize: kbdFontSize,
+    // Radix uses the default (body) font, NOT monospace
+    fontFamily: fonts.regular,
+    fontWeight: "normal",
+    color: rc("gray-12"),
+    letterSpacing: letterSpacingEm[size] * kbdFontSize
+  };
+  const highlightStyle = isClassic ? {
+    position: "absolute",
+    top: 0,
+    left: 1,
+    right: 1,
+    height: 1,
+    backgroundColor: rc("gray-a3"),
+    borderTopLeftRadius: Math.max(0, borderR - 1),
+    borderTopRightRadius: Math.max(0, borderR - 1)
+  } : null;
+  return /* @__PURE__ */ React.createElement(View, { style: [containerStyle, style] }, highlightStyle && /* @__PURE__ */ React.createElement(View, { style: highlightStyle }), /* @__PURE__ */ React.createElement(Text$1, { style: textStyle }, children));
+}
+Kbd.displayName = "Kbd";
+
+function Quote({
+  truncate,
+  wrap,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  children,
+  ...rest
+}) {
+  const { scaling } = useThemeContext();
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const numberOfLines = truncate ? 1 : wrap === "nowrap" ? 1 : void 0;
+  const ellipsizeMode = truncate ? "tail" : wrap === "nowrap" ? "clip" : void 0;
+  const quoteStyle = {
+    fontStyle: "italic",
+    // RN defaults flexShrink to 0; CSS defaults to 1. Without this, text
+    // inside a Flex row overflows instead of wrapping to the available width.
+    flexShrink: 1,
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  return /* @__PURE__ */ React.createElement(
+    Text$1,
+    {
+      numberOfLines,
+      ellipsizeMode,
+      style: [quoteStyle, style],
+      ...rest
+    },
+    "\u201C",
+    children,
+    "\u201D"
+  );
+}
+Quote.displayName = "Quote";
+
+const SIZE_HEIGHT = { 1: 24, 2: 32, 3: 40, 4: 48 };
+const SIZE_PADDING_X = { 1: 8, 2: 12, 3: 16, 4: 24 };
+const GHOST_PADDING_X = { 1: 8, 2: 8, 3: 12, 4: 16 };
+const GHOST_PADDING_Y = { 1: 4, 2: 4, 3: 6, 4: 8 };
+const SIZE_GAP = { 1: 4, 2: 8, 3: 12, 4: 12 };
+const GHOST_GAP = { 1: 4, 2: 4, 3: 8, 4: 8 };
+const SIZE_FONT = { 1: 1, 2: 2, 3: 3, 4: 4 };
+const SIZE_RADIUS_LEVEL = { 1: 1, 2: 2, 3: 3, 4: 4 };
+function Button({
+  size = 2,
+  variant = "solid",
+  color,
+  highContrast,
+  radius: radiusProp,
+  loading = false,
+  disabled = false,
+  children,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  onPress,
+  ...rest
+}) {
+  const { appearance, scaling, fonts, radius: themeRadius } = useThemeContext();
+  const rc = useResolveColor();
+  const effectiveRadius = radiusProp ?? themeRadius;
+  const isDisabled = disabled || loading;
+  const prefix = color ?? "accent";
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const fontIdx = SIZE_FONT[size];
+  const resolvedFontSize = Math.round(fontSize[fontIdx] * scalingFactor);
+  const resolvedLineHeight = Math.round(lineHeight[fontIdx] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[fontIdx] * resolvedFontSize;
+  const isGhost = variant === "ghost";
+  const resolvedHeight = Math.round(SIZE_HEIGHT[size] * scalingFactor);
+  const resolvedPaddingX = Math.round(
+    (isGhost ? GHOST_PADDING_X[size] : SIZE_PADDING_X[size]) * scalingFactor
+  );
+  const resolvedPaddingY = isGhost ? Math.round(GHOST_PADDING_Y[size] * scalingFactor) : 0;
+  const resolvedGap = Math.round(
+    (isGhost ? GHOST_GAP[size] : SIZE_GAP[size]) * scalingFactor
+  );
+  const level = SIZE_RADIUS_LEVEL[size];
+  const borderRadius = Math.max(getRadius(effectiveRadius, level), getFullRadius(effectiveRadius));
+  const colors = useMemo(() => {
+    if (isDisabled) {
+      const disabledText = rc("gray-a8");
+      switch (variant) {
+        case "classic":
+          return {
+            bg: rc("gray-2"),
+            text: disabledText,
+            border: void 0,
+            pressedBg: rc("gray-2")
+          };
+        case "solid":
+        case "soft":
+          return {
+            bg: rc("gray-a3"),
+            text: disabledText,
+            border: void 0,
+            pressedBg: rc("gray-a3")
+          };
+        case "surface":
+          return {
+            bg: rc("gray-a2"),
+            text: disabledText,
+            border: rc("gray-a6"),
+            pressedBg: rc("gray-a2")
+          };
+        case "outline":
+          return {
+            bg: "transparent",
+            text: disabledText,
+            border: rc("gray-a7"),
+            pressedBg: "transparent"
+          };
+        case "ghost":
+          return {
+            bg: "transparent",
+            text: disabledText,
+            border: void 0,
+            pressedBg: "transparent"
+          };
+      }
+    }
+    const hc = highContrast;
+    switch (variant) {
+      case "classic":
+      case "solid": {
+        const bg = hc ? rc(`${prefix}-12`) : rc(`${prefix}-9`);
+        const text = hc ? rc("gray-1") : rc(`${prefix}-contrast`);
+        const pressedBg = hc ? rc(`${prefix}-12`) : rc(`${prefix}-10`);
+        const pressedOpacity = hc ? 0.88 : void 0;
+        return { bg, text, border: void 0, pressedBg, pressedOpacity };
+      }
+      case "soft": {
+        const bg = rc(`${prefix}-a3`);
+        const text = hc ? rc(`${prefix}-12`) : rc(`${prefix}-a11`);
+        const pressedBg = rc(`${prefix}-a5`);
+        return { bg, text, border: void 0, pressedBg };
+      }
+      case "surface": {
+        const bg = rc(`${prefix}-surface`);
+        const text = hc ? rc(`${prefix}-12`) : rc(`${prefix}-a11`);
+        const border = rc(`${prefix}-a7`);
+        const pressedBg = rc(`${prefix}-a3`);
+        return { bg, text, border, pressedBg };
+      }
+      case "outline": {
+        const text = hc ? rc(`${prefix}-12`) : rc(`${prefix}-a11`);
+        const border = hc ? rc("gray-a11") : rc(`${prefix}-a8`);
+        const pressedBg = hc ? rc(`${prefix}-a3`) : rc(`${prefix}-a2`);
+        return { bg: "transparent", text, border, pressedBg };
+      }
+      case "ghost": {
+        const text = hc ? rc(`${prefix}-12`) : rc(`${prefix}-a11`);
+        const pressedBg = rc(`${prefix}-a4`);
+        return { bg: "transparent", text, border: void 0, pressedBg };
+      }
+    }
+  }, [variant, prefix, highContrast, isDisabled, loading, rc]);
+  const fontFamily = isGhost ? fonts.regular : fonts.medium ?? fonts.regular;
+  const handlePress = useCallback(
+    (e) => {
+      if (!isDisabled && onPress) onPress(e);
+    },
+    [isDisabled, onPress]
+  );
+  const isClassic = variant === "classic";
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isDisabled, busy: loading },
+      style: ({ pressed }) => {
+        const bg = pressed && !isDisabled ? colors.pressedBg : colors.bg;
+        const opacity = pressed && !isDisabled && colors.pressedOpacity != null ? colors.pressedOpacity : isDisabled && !loading ? 1 : void 0;
+        const containerStyle = {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          alignSelf: "flex-start",
+          overflow: "hidden",
+          height: isGhost ? void 0 : resolvedHeight,
+          paddingHorizontal: resolvedPaddingX,
+          paddingVertical: isGhost ? resolvedPaddingY : void 0,
+          gap: resolvedGap,
+          backgroundColor: bg,
+          borderRadius,
+          borderWidth: colors.border ? 1 : void 0,
+          borderColor: colors.border,
+          opacity,
+          // Margins
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m)
+        };
+        const classicStyle = isClassic ? getClassicEffect(appearance, { pressed, disabled: isDisabled && !loading }) : void 0;
+        return [containerStyle, classicStyle, style];
+      },
+      ...rest
+    },
+    isClassic && !isDisabled && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: "50%",
+          backgroundColor: "rgba(255,255,255,0.12)"
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      View,
+      {
+        pointerEvents: "none",
+        style: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "50%",
+          backgroundColor: "rgba(0,0,0,0.08)"
+        }
+      }
+    )),
+    loading ? /* @__PURE__ */ React.createElement(View, { style: { position: "relative", flexDirection: "row", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0, flexDirection: "row", alignItems: "center", gap: resolvedGap } }, renderContent(children, {
+      fontSize: resolvedFontSize,
+      lineHeight: resolvedLineHeight,
+      letterSpacing: resolvedLetterSpacing,
+      color: colors.text,
+      fontWeight: isGhost ? "400" : "500",
+      fontFamily
+    })), /* @__PURE__ */ React.createElement(View, { style: { position: "absolute", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: colors.text }))) : renderContent(children, {
+      fontSize: resolvedFontSize,
+      lineHeight: resolvedLineHeight,
+      letterSpacing: resolvedLetterSpacing,
+      color: colors.text,
+      fontWeight: isGhost ? "400" : "500",
+      fontFamily
+    })
+  );
+}
+Button.displayName = "Button";
+function renderContent(children, textStyle) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ React.createElement(Text$1, { style: textStyle }, children);
+  }
+  return children;
+}
+
+const SIZE_PX = { 1: 14, 2: 16, 3: 20 };
+const INDICATOR_SIZE = { 1: 9, 2: 10, 3: 12 };
+const RADIUS_MULT = { 1: 0.875, 2: 1, 3: 1.25 };
+function Checkbox({
+  size = 2,
+  variant = "surface",
+  color,
+  highContrast,
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style,
+  ...rest
+}) {
+  const { appearance, scaling, radius } = useThemeContext();
+  const rc = useResolveColor();
+  const [internal, setInternal] = React.useState(defaultChecked);
+  const isControlled = checkedProp !== void 0;
+  const checkedState = isControlled ? checkedProp : internal;
+  const isChecked = checkedState === true;
+  const isIndeterminate = checkedState === "indeterminate";
+  const isActive = isChecked || isIndeterminate;
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const boxSize = Math.round(SIZE_PX[size] * scalingFactor);
+  const indicatorSize = Math.round(INDICATOR_SIZE[size] * scalingFactor);
+  const borderRadius = Math.round(getRadius(radius, 1) * RADIUS_MULT[size]);
+  const prefix = color ?? "accent";
+  const colors = useMemo(() => {
+    if (disabled) {
+      const indicator = isActive ? rc("gray-a8") : void 0;
+      switch (variant) {
+        case "classic":
+        case "surface":
+          return {
+            bg: rc("gray-a3"),
+            border: rc("gray-a6"),
+            indicator,
+            showBorder: true
+          };
+        case "soft":
+          return {
+            bg: rc("gray-a3"),
+            border: void 0,
+            indicator,
+            showBorder: false
+          };
+      }
+    }
+    const hc = highContrast;
+    switch (variant) {
+      case "classic":
+      case "surface": {
+        if (isActive) {
+          const bg = hc ? rc(`${prefix}-12`) : rc(`${prefix}-9`);
+          const indicator = hc ? rc(`${prefix}-1`) : rc(`${prefix}-contrast`);
+          return { bg, border: void 0, indicator, showBorder: false };
+        }
+        return {
+          bg: rc("gray-surface"),
+          border: rc("gray-a7"),
+          indicator: void 0,
+          showBorder: true
+        };
+      }
+      case "soft": {
+        const bg = rc(`${prefix}-a5`);
+        const indicator = isActive ? hc ? rc(`${prefix}-12`) : rc(`${prefix}-a11`) : void 0;
+        return { bg, border: void 0, indicator, showBorder: false };
+      }
+    }
+  }, [variant, prefix, highContrast, isActive, disabled, rc]);
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    const next = isChecked ? false : true;
+    if (!isControlled) setInternal(next);
+    onCheckedChange?.(next);
+  }, [disabled, isChecked, isControlled, onCheckedChange]);
+  const isClassic = variant === "classic";
+  const classicStyle = isClassic ? getClassicEffect(appearance, { disabled }) : void 0;
+  const boxStyle = {
+    width: boxSize,
+    height: boxSize,
+    borderRadius,
+    backgroundColor: colors.bg,
+    borderWidth: colors.showBorder ? 1 : void 0,
+    borderColor: colors.border,
+    alignItems: "center",
+    justifyContent: "center",
+    // Margins
+    marginTop: sp(mt ?? my ?? m),
+    marginBottom: sp(mb ?? my ?? m),
+    marginLeft: sp(ml ?? mx ?? m),
+    marginRight: sp(mr ?? mx ?? m)
+  };
+  const indicatorStyle = {
+    fontSize: indicatorSize,
+    lineHeight: indicatorSize + 2,
+    color: colors.indicator,
+    fontWeight: "700"
+  };
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked: isIndeterminate ? "mixed" : isChecked,
+        disabled
+      },
+      style: [boxStyle, classicStyle, style],
+      ...rest
+    },
+    isClassic && isActive && !disabled && /* @__PURE__ */ React.createElement(View, { pointerEvents: "none", style: { position: "absolute", inset: 0, overflow: "hidden", borderRadius } }, /* @__PURE__ */ React.createElement(View, { style: { position: "absolute", top: 0, left: 0, right: 0, height: "50%", backgroundColor: "rgba(255,255,255,0.12)" } }), /* @__PURE__ */ React.createElement(View, { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: "50%", backgroundColor: "rgba(0,0,0,0.08)" } })),
+    isActive && /* @__PURE__ */ React.createElement(Text$1, { style: indicatorStyle }, isIndeterminate ? "\u2013" : "\u2713")
+  );
+}
+Checkbox.displayName = "Checkbox";
+
+const CheckboxGroupContext = createContext(null);
+const LABEL_FONT_SIZE = { 1: 1, 2: 2, 3: 3 };
+const LABEL_GAP = { 1: 4, 2: 6, 3: 8 };
+function CheckboxGroupRoot({
+  size = 2,
+  variant = "surface",
+  color,
+  highContrast,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  disabled = false,
+  children,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style
+}) {
+  const { scaling } = useThemeContext();
+  const [internal, setInternal] = React.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : internal;
+  const onItemToggle = useCallback((itemValue) => {
+    const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  }, [value, isControlled, onValueChange]);
+  const ctx = useMemo(() => ({
+    size,
+    variant,
+    color,
+    highContrast,
+    disabled,
+    value,
+    onItemToggle
+  }), [size, variant, color, highContrast, disabled, value, onItemToggle]);
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  return /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      accessibilityRole: "none",
+      style: [
+        { flexDirection: "column", gap: resolveSpace(2, scaling) },
+        {
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m)
+        },
+        style
+      ]
+    },
+    children
+  ));
+}
+CheckboxGroupRoot.displayName = "CheckboxGroup.Root";
+function CheckboxGroupItem({
+  value: itemValue,
+  disabled: disabledProp,
+  children,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style
+}) {
+  const ctx = useContext(CheckboxGroupContext);
+  if (!ctx) throw new Error("CheckboxGroup.Item must be used within CheckboxGroup.Root");
+  const { size, variant, color, highContrast, disabled: groupDisabled, value, onItemToggle } = ctx;
+  const { scaling, fonts } = useThemeContext();
+  const rc = useResolveColor();
+  const isDisabled = disabledProp ?? groupDisabled;
+  const isChecked = value.includes(itemValue);
+  const handlePress = useCallback(() => {
+    if (!isDisabled) onItemToggle(itemValue);
+  }, [isDisabled, onItemToggle, itemValue]);
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const scalingFactor = scalingMap[scaling];
+  const fontIdx = LABEL_FONT_SIZE[size];
+  const resolvedFontSize = Math.round(fontSize[fontIdx] * scalingFactor);
+  const resolvedLineHeight = Math.round(lineHeight[fontIdx] * scalingFactor);
+  const resolvedLetterSpacing = letterSpacingEm[fontIdx] * resolvedFontSize;
+  const gap = Math.round(LABEL_GAP[size] * scalingFactor);
+  const textColor = rc("gray-12");
+  const fontFamily = fonts.regular;
+  const hasLabel = children != null;
+  if (!hasLabel) {
+    return /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        size,
+        variant,
+        color,
+        highContrast,
+        checked: isChecked,
+        onCheckedChange: () => onItemToggle(itemValue),
+        disabled: isDisabled,
+        m,
+        mx,
+        my,
+        mt,
+        mr,
+        mb,
+        ml,
+        style
+      }
+    );
+  }
+  const labelStyle = {
+    fontSize: resolvedFontSize,
+    lineHeight: resolvedLineHeight,
+    letterSpacing: resolvedLetterSpacing,
+    color: isDisabled ? rc("gray-a8") : textColor,
+    fontFamily
+  };
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: isChecked, disabled: isDisabled },
+      style: [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          gap,
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m)
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        size,
+        variant,
+        color,
+        highContrast,
+        checked: isChecked,
+        onCheckedChange: () => onItemToggle(itemValue),
+        disabled: isDisabled
+      }
+    ),
+    typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ React.createElement(Text$1, { style: labelStyle }, children) : children
+  );
+}
+CheckboxGroupItem.displayName = "CheckboxGroup.Item";
+const CheckboxGroup = Object.assign(CheckboxGroupRoot, {
+  Root: CheckboxGroupRoot,
+  Item: CheckboxGroupItem
+});
+
+const CheckboxCardsContext = createContext(null);
+const SIZE_CONFIG = {
+  1: { paddingLeft: 12, paddingY: 10, checkboxSize: 14, radiusLevel: 3 },
+  2: { paddingLeft: 16, paddingY: 14, checkboxSize: 16, radiusLevel: 3 },
+  3: { paddingLeft: 24, paddingY: 20, checkboxSize: 20, radiusLevel: 4 }
+};
+function CheckboxCardsRoot({
+  size = 2,
+  variant = "surface",
+  color,
+  highContrast,
+  columns = 1,
+  gap: gapProp = 4,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  disabled = false,
+  children,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  style
+}) {
+  const { scaling } = useThemeContext();
+  const [internal, setInternal] = React.useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : internal;
+  const onItemToggle = useCallback((itemValue) => {
+    const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  }, [value, isControlled, onValueChange]);
+  const ctx = useMemo(() => ({
+    size,
+    variant,
+    color,
+    highContrast,
+    disabled,
+    value,
+    onItemToggle
+  }), [size, variant, color, highContrast, disabled, value, onItemToggle]);
+  const sp = (token) => token !== void 0 ? resolveSpace(token, scaling) : void 0;
+  const resolvedGap = resolveSpace(gapProp, scaling);
+  return /* @__PURE__ */ React.createElement(CheckboxCardsContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        {
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: resolvedGap,
+          marginTop: sp(mt ?? my ?? m),
+          marginBottom: sp(mb ?? my ?? m),
+          marginLeft: sp(ml ?? mx ?? m),
+          marginRight: sp(mr ?? mx ?? m)
+        },
+        style
+      ]
+    },
+    React.Children.map(children, (child) => /* @__PURE__ */ React.createElement(View, { style: {
+      flexBasis: columns > 1 ? `${100 / columns}%` : void 0,
+      flexGrow: 1,
+      flexShrink: 1,
+      minWidth: 0
+    } }, child))
+  ));
+}
+CheckboxCardsRoot.displayName = "CheckboxCards.Root";
+function CheckboxCardsItem({
+  value: itemValue,
+  disabled: disabledProp,
+  children,
+  style
+}) {
+  const ctx = useContext(CheckboxCardsContext);
+  if (!ctx) throw new Error("CheckboxCards.Item must be used within CheckboxCards.Root");
+  const { size, variant, color, highContrast, disabled: groupDisabled, value, onItemToggle } = ctx;
+  const { scaling, radius } = useThemeContext();
+  const rc = useResolveColor();
+  const isDisabled = disabledProp ?? groupDisabled;
+  const isChecked = value.includes(itemValue);
+  const handlePress = useCallback(() => {
+    if (!isDisabled) onItemToggle(itemValue);
+  }, [isDisabled, onItemToggle, itemValue]);
+  const scalingFactor = scalingMap[scaling];
+  const cfg = SIZE_CONFIG[size];
+  const paddingLeft = Math.round(cfg.paddingLeft * scalingFactor);
+  const paddingY = Math.round(cfg.paddingY * scalingFactor);
+  const checkboxSize = Math.round(cfg.checkboxSize * scalingFactor);
+  const paddingRight = paddingLeft * 2 + checkboxSize;
+  const borderRadius = getRadius(radius, cfg.radiusLevel);
+  const borderColor = rc("gray-a5");
+  const bgColor = rc("gray-surface");
+  const cardStyle = {
+    position: "relative",
+    overflow: "hidden",
+    paddingLeft,
+    paddingRight,
+    paddingTop: paddingY,
+    paddingBottom: paddingY,
+    borderRadius,
+    borderWidth: 1,
+    borderColor,
+    backgroundColor: bgColor,
+    opacity: isDisabled ? 0.5 : void 0
+  };
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: isChecked, disabled: isDisabled },
+      style: [cardStyle, style]
+    },
+    children,
+    /* @__PURE__ */ React.createElement(View, { style: {
+      position: "absolute",
+      right: paddingLeft,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center"
+    } }, /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        size,
+        variant: "surface",
+        color,
+        highContrast,
+        checked: isChecked,
+        onCheckedChange: () => onItemToggle(itemValue),
+        disabled: isDisabled
+      }
+    ))
+  );
+}
+CheckboxCardsItem.displayName = "CheckboxCards.Item";
+const CheckboxCards = Object.assign(CheckboxCardsRoot, {
+  Root: CheckboxCardsRoot,
+  Item: CheckboxCardsItem
+});
+
+const ACCENT_COLORS = [
+  "gray",
+  "gold",
+  "bronze",
+  "brown",
+  "yellow",
+  "amber",
+  "orange",
+  "tomato",
+  "red",
+  "ruby",
+  "crimson",
+  "pink",
+  "plum",
+  "purple",
+  "violet",
+  "iris",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "jade",
+  "green",
+  "grass",
+  "lime",
+  "mint",
+  "sky"
+];
+const GRAY_OPTIONS = ["auto", "gray", "mauve", "slate", "sage", "olive", "sand"];
+const RADIUS_OPTIONS = ["none", "small", "medium", "large", "full"];
+const SCALING_OPTIONS = ["90%", "95%", "100%", "105%", "110%"];
+const PANEL_WIDTH = 280;
+function ThemeControls({ showCopyTheme, onCopyTheme, defaultOpen = false } = {}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const slideAnim = React.useRef(new Animated.Value(defaultOpen ? 0 : PANEL_WIDTH + 20)).current;
+  const { height: windowHeight } = useWindowDimensions();
+  const {
+    appearance,
+    accentColor,
+    grayColor,
+    resolvedGrayColor,
+    radius,
+    scaling,
+    onAppearanceChange,
+    onAccentColorChange,
+    onGrayColorChange,
+    onRadiusChange,
+    onScalingChange
+  } = useThemeContext();
+  const rc = useResolveColor();
+  const toggle = () => {
+    const toValue = open ? PANEL_WIDTH + 20 : 0;
+    Animated.spring(slideAnim, {
+      toValue,
+      useNativeDriver: true,
+      damping: 20,
+      stiffness: 200
+    }).start();
+    setOpen(!open);
+  };
+  const handleCopyTheme = () => {
+    const config = `<Theme accentColor="${accentColor}" grayColor="${grayColor}" appearance="${appearance}" radius="${radius}" scaling="${scaling}">`;
+    onCopyTheme?.(config);
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: styles.container, pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: toggle,
+      accessibilityRole: "button",
+      accessibilityLabel: "Toggle theme panel",
+      style: [
+        styles.toggleButton,
+        {
+          backgroundColor: rc("gray-2"),
+          borderColor: rc("gray-6")
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { size: 2, weight: "bold", style: { color: rc("gray-12") } }, "T")
+  ), /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.panelWrapper,
+        { maxHeight: windowHeight - 120, transform: [{ translateX: slideAnim }] }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollView,
+      {
+        style: [styles.panel, { backgroundColor: rc("gray-2"), borderColor: rc("gray-6") }],
+        contentContainerStyle: styles.panelContent,
+        showsVerticalScrollIndicator: false
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, /* @__PURE__ */ React.createElement(Heading, { size: 5, style: { color: rc("gray-12") } }, "Theme"), /* @__PURE__ */ React.createElement(
+        Pressable,
+        {
+          onPress: toggle,
+          accessibilityRole: "button",
+          accessibilityLabel: "Close theme panel",
+          style: [styles.closeButton, { borderColor: rc("gray-6") }]
+        },
+        /* @__PURE__ */ React.createElement(Text, { size: 2, weight: "bold", style: { color: rc("gray-12") } }, "T")
+      )),
+      /* @__PURE__ */ React.createElement(SectionLabel, { rc }, "Accent color"),
+      /* @__PURE__ */ React.createElement(View, { style: styles.dotGrid }, ACCENT_COLORS.map((c) => /* @__PURE__ */ React.createElement(
+        ColorDot,
+        {
+          key: c,
+          color: `${c}-9`,
+          selected: accentColor === c,
+          onPress: () => onAccentColorChange(c),
+          rc,
+          label: c
+        }
+      ))),
+      /* @__PURE__ */ React.createElement(SectionLabel, { rc }, "Gray color"),
+      /* @__PURE__ */ React.createElement(View, { style: styles.dotGrid }, GRAY_OPTIONS.map((g) => {
+        const dotColor = g === "auto" ? `${resolvedGrayColor}-9` : `${g}-9`;
+        return /* @__PURE__ */ React.createElement(
+          ColorDot,
+          {
+            key: g,
+            color: dotColor,
+            selected: grayColor === g,
+            onPress: () => onGrayColorChange(g),
+            rc,
+            label: g
+          }
+        );
+      })),
+      /* @__PURE__ */ React.createElement(SectionLabel, { rc }, "Appearance"),
+      /* @__PURE__ */ React.createElement(View, { style: styles.segmentedRow }, /* @__PURE__ */ React.createElement(
+        SegmentedButton,
+        {
+          label: "Light",
+          icon: "\u2600\uFE0E",
+          selected: appearance === "light",
+          onPress: () => onAppearanceChange("light"),
+          rc
+        }
+      ), /* @__PURE__ */ React.createElement(
+        SegmentedButton,
+        {
+          label: "Dark",
+          icon: "\u263E",
+          selected: appearance === "dark",
+          onPress: () => onAppearanceChange("dark"),
+          rc
+        }
+      )),
+      /* @__PURE__ */ React.createElement(SectionLabel, { rc }, "Radius"),
+      /* @__PURE__ */ React.createElement(View, { style: styles.radiusRow }, RADIUS_OPTIONS.map((r) => /* @__PURE__ */ React.createElement(
+        RadiusPreview,
+        {
+          key: r,
+          token: r,
+          selected: radius === r,
+          onPress: () => onRadiusChange(r),
+          rc
+        }
+      ))),
+      /* @__PURE__ */ React.createElement(SectionLabel, { rc }, "Scaling"),
+      /* @__PURE__ */ React.createElement(View, { style: styles.chipRow }, SCALING_OPTIONS.map((s) => /* @__PURE__ */ React.createElement(
+        Chip,
+        {
+          key: s,
+          label: s,
+          selected: scaling === s,
+          onPress: () => onScalingChange(s),
+          rc
+        }
+      ))),
+      showCopyTheme && /* @__PURE__ */ React.createElement(
+        Pressable,
+        {
+          style: [styles.copyButton, { backgroundColor: rc("accent-9") }],
+          onPress: handleCopyTheme
+        },
+        /* @__PURE__ */ React.createElement(Text, { size: 2, weight: "bold", style: { color: rc("accent-contrast") } }, "Copy Theme")
+      )
+    )
+  ));
+}
+ThemeControls.displayName = "ThemeControls";
+function SectionLabel({ children, rc }) {
+  return /* @__PURE__ */ React.createElement(Text, { size: 2, weight: "medium", style: { color: rc("accent-11"), marginTop: 4 } }, children);
+}
+function ColorDot({
+  color,
+  selected,
+  onPress,
+  rc,
+  label
+}) {
+  const bg = rc(color);
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles.dotOuter,
+        selected && { borderColor: rc("gray-12") }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: [styles.dotInner, { backgroundColor: bg }] })
+  );
+}
+function SegmentedButton({
+  label,
+  icon,
+  selected,
+  onPress,
+  rc
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress,
+      accessibilityRole: "button",
+      style: [
+        styles.segmentedButton,
+        {
+          borderColor: selected ? rc("gray-12") : rc("gray-6"),
+          backgroundColor: selected ? rc("gray-3") : "transparent"
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { size: 2, style: { color: rc("gray-12") } }, icon),
+    /* @__PURE__ */ React.createElement(Text, { size: 2, weight: "medium", style: { color: rc("gray-12") } }, label)
+  );
+}
+function RadiusPreview({
+  token,
+  selected,
+  onPress,
+  rc
+}) {
+  const previewRadius = token === "full" ? 26 : getRadius(token, 5);
+  const label = token.charAt(0).toUpperCase() + token.slice(1);
+  const borderAccent = rc("accent-a8");
+  return /* @__PURE__ */ React.createElement(Pressable, { onPress, accessibilityRole: "button", style: styles.radiusItem }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.radiusCard,
+        {
+          borderColor: selected ? rc("gray-12") : rc("gray-6"),
+          backgroundColor: selected ? rc("gray-3") : "transparent"
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.radiusPreviewShape,
+          {
+            backgroundColor: rc("accent-4"),
+            borderTopLeftRadius: previewRadius,
+            borderTopWidth: 2,
+            borderLeftWidth: 2,
+            borderTopColor: borderAccent,
+            borderLeftColor: borderAccent
+          }
+        ]
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(Text, { size: 1, style: { color: rc("gray-11"), textAlign: "center" } }, label));
+}
+function Chip({
+  label,
+  selected,
+  onPress,
+  rc
+}) {
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress,
+      accessibilityRole: "button",
+      style: [
+        styles.chip,
+        {
+          borderColor: selected ? rc("gray-12") : rc("gray-6"),
+          backgroundColor: selected ? rc("gray-3") : "transparent"
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        size: 2,
+        weight: selected ? "bold" : "regular",
+        style: { color: rc("gray-12") }
+      },
+      label
+    )
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 54,
+    right: 12,
+    zIndex: 1e3,
+    alignItems: "flex-end"
+  },
+  toggleButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  panelWrapper: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: PANEL_WIDTH,
+    marginTop: 44
+  },
+  panel: {
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  panelContent: {
+    padding: 20,
+    rowGap: 10
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 4
+  },
+  dotOuter: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2,
+    borderColor: "transparent",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotInner: {
+    width: 20,
+    height: 20,
+    borderRadius: 10
+  },
+  segmentedRow: {
+    flexDirection: "row",
+    gap: 8
+  },
+  segmentedButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    borderWidth: 1
+  },
+  chipRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6
+  },
+  chip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  radiusRow: {
+    flexDirection: "row",
+    gap: 6
+  },
+  radiusItem: {
+    flex: 1,
+    alignItems: "center",
+    gap: 6
+  },
+  radiusCard: {
+    width: "100%",
+    aspectRatio: 1,
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  radiusPreviewShape: {
+    width: 32,
+    height: 32
+  },
+  copyButton: {
+    marginTop: 6,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export { Blockquote, Box, Button, Checkbox, CheckboxCards, CheckboxGroup, Code, Em, Flex, Grid, Heading, Kbd, Link, Quote, Strong, Text, Theme, ThemeControls, applyScaling, createTheme, fontSize, getClassicEffect, getFullRadius, getRadius, headingLineHeight, letterSpacingEm, lineHeight, resolveColor, resolveSpace, scalingMap, space, useResolveColor, useThemeContext };