nave-ui-library 1.0.0-beta.29 → 1.0.0-beta.30

package/dist/react/index.cjs

@@ -3185,7 +3185,7 @@ function EmptyState({
   size = "medium",
   tokens
 }) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const theme = useTheme();
   const mergedTokens = (_a2 = resolveTokens(
     {
@@ -3195,30 +3195,30 @@ function EmptyState({
     theme
   )) != null ? _a2 : {};
   const isCenter = align === "center";
-  const iconSize = mergedTokens.icon.size[size];
-  const titleSize = mergedTokens.title.size[size];
-  const descriptionSize = mergedTokens.description.size[size];
+  const iconSize = (_d = (_c = (_b = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _b.size) == null ? void 0 : _c[size]) != null ? _d : {};
+  const titleSize = (_g = (_f = (_e = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _e.size) == null ? void 0 : _f[size]) != null ? _g : {};
+  const descriptionSize = (_j = (_i = (_h = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _h.size) == null ? void 0 : _i[size]) != null ? _j : {};
   const styles = {
     /* Container */
-    "--es-bg": (_b = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _b.background,
-    "--es-padding": (_c = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _c.padding,
-    "--es-min-height": (_e = (_d = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _d.minHeight) != null ? _e : "300px",
-    "--es-width": (_g = (_f = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _f.width) != null ? _g : "380px",
-    "--es-gap": (_i = (_h = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _h.gap) != null ? _i : "24px",
+    "--es-bg": (_k = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _k.background,
+    "--es-padding": (_l = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _l.padding,
+    "--es-min-height": (_n = (_m = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _m.minHeight) != null ? _n : "300px",
+    "--es-width": (_p = (_o = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _o.width) != null ? _p : "380px",
+    "--es-gap": (_r = (_q = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _q.gap) != null ? _r : "24px",
     /* Icon */
     "--es-icon-size": iconSize,
-    "--es-icon-color": (_j = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _j.color,
-    "--es-icon-radius": (_k = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _k.containerRadius,
+    "--es-icon-color": (_s = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _s.color,
+    "--es-icon-radius": (_t = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _t.containerRadius,
     /* Title */
-    "--es-title-color": (_l = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _l.color,
-    "--es-title-weight": (_m = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _m.fontWeight,
+    "--es-title-color": (_u = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _u.color,
+    "--es-title-weight": (_v = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _v.fontWeight,
     "--es-title-size": titleSize,
     /* Description */
-    "--es-desc-color": (_n = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _n.color,
-    "--es-desc-weight": (_o = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _o.fontWeight,
+    "--es-desc-color": (_w = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _w.color,
+    "--es-desc-weight": (_x = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _x.fontWeight,
     "--es-desc-size": descriptionSize,
     /* Actions */
-    "--es-actions-gap": (_q = (_p = mergedTokens == null ? void 0 : mergedTokens.actions) == null ? void 0 : _p.gap) != null ? _q : "8px"
+    "--es-actions-gap": (_z = (_y = mergedTokens == null ? void 0 : mergedTokens.actions) == null ? void 0 : _y.gap) != null ? _z : "8px"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "section",
@@ -3528,7 +3528,7 @@ function FileUpload({
   onFilesChange,
   onError
 }) {
-  var _a2;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const theme = useTheme();
   const mergedTokens = (_a2 = resolveTokens(
     {
@@ -3539,28 +3539,28 @@ function FileUpload({
   )) != null ? _a2 : {};
   const styles = {
     /* Container */
-    "--fu-bg": mergedTokens.container.background,
-    "--fu-padding": mergedTokens.container.padding,
-    "--fu-radius": mergedTokens.container.radius,
+    "--fu-bg": (_b = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _b.background,
+    "--fu-padding": (_c = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _c.padding,
+    "--fu-radius": (_d = mergedTokens == null ? void 0 : mergedTokens.container) == null ? void 0 : _d.radius,
     /* Dropzone */
-    "--fu-border-color": mergedTokens.dropzone.borderColor[state],
-    "--fu-border-width": mergedTokens.dropzone.borderWidth,
-    "--fu-border-style": mergedTokens.dropzone.borderStyle,
-    "--fu-gap": mergedTokens.dropzone.gap,
+    "--fu-border-color": (_f = (_e = mergedTokens == null ? void 0 : mergedTokens.dropzone) == null ? void 0 : _e.borderColor) == null ? void 0 : _f[state],
+    "--fu-border-width": (_g = mergedTokens == null ? void 0 : mergedTokens.dropzone) == null ? void 0 : _g.borderWidth,
+    "--fu-border-style": (_h = mergedTokens == null ? void 0 : mergedTokens.dropzone) == null ? void 0 : _h.borderStyle,
+    "--fu-gap": (_i = mergedTokens == null ? void 0 : mergedTokens.dropzone) == null ? void 0 : _i.gap,
     /* Icon */
-    "--fu-icon-size": mergedTokens.icon.size,
-    "--fu-icon-wrapper-size": mergedTokens.icon.wrapperSize,
-    "--fu-icon-color": mergedTokens.icon.color,
-    "--fu-icon-bg": mergedTokens.icon.wrapperBg,
-    "--fu-icon-radius": mergedTokens.icon.wrapperRadius,
+    "--fu-icon-size": (_j = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _j.size,
+    "--fu-icon-wrapper-size": (_k = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _k.wrapperSize,
+    "--fu-icon-color": (_l = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _l.color,
+    "--fu-icon-bg": (_m = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _m.wrapperBg,
+    "--fu-icon-radius": (_n = mergedTokens == null ? void 0 : mergedTokens.icon) == null ? void 0 : _n.wrapperRadius,
     /* Title */
-    "--fu-title-color": mergedTokens.title.color,
-    "--fu-title-size": mergedTokens.title.fontSize,
-    "--fu-title-weight": mergedTokens.title.fontWeight,
+    "--fu-title-color": (_o = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _o.color,
+    "--fu-title-size": (_p = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _p.fontSize,
+    "--fu-title-weight": (_q = mergedTokens == null ? void 0 : mergedTokens.title) == null ? void 0 : _q.fontWeight,
     /* Description */
-    "--fu-desc-color": mergedTokens.description.color,
-    "--fu-desc-size": mergedTokens.description.fontSize,
-    "--fu-desc-weight": mergedTokens.description.fontWeight
+    "--fu-desc-color": (_r = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _r.color,
+    "--fu-desc-size": (_s = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _s.fontSize,
+    "--fu-desc-weight": (_t = mergedTokens == null ? void 0 : mergedTokens.description) == null ? void 0 : _t.fontWeight
   };
   const inputRef = React2.useRef(null);
   const isDisabled = state === "disabled";
@@ -8319,89 +8319,237 @@ var themeDefault = {
   version: "1.0.0",
   tokens: {
     meta: {
-      theme: "default"
+      theme: "default-v-4.0.1"
     },
     foundations: {
       colors: {
         brand: {
-          primary: "#4B5563",
-          hover: "#374151",
-          secondary: "#6B7280"
-        },
-        semantic: {
-          success: "#16A34A",
-          warning: "#D97706",
-          danger: "#DC2626",
-          info: "#2563EB"
+          50: "#F6F2FD",
+          100: "#E6DCFA",
+          200: "#F4F0FF",
+          // Agregado: Para active states
+          300: "#A78BFA",
+          500: "#652BDF",
+          // primary
+          700: "#3C168E",
+          // hover
+          900: "#1E0A52"
         },
         neutral: {
           0: "#FFFFFF",
-          50: "#FAFAFA",
-          100: "#F4F4F5",
-          200: "#E4E4E7",
-          300: "#D4D4D8",
-          400: "#A1A1AA",
-          500: "#71717A",
-          700: "#3F3F46",
-          900: "#18181B"
-        }
-      },
-      radius: {
-        sm: "4px",
-        md: "8px",
-        lg: "12px",
-        full: "9999px"
-      },
-      spacing: {
-        xxs: "2px",
-        xs: "4px",
-        sm: "8px",
-        md: "12px",
-        lg: "16px",
-        xl: "24px",
-        "2xl": "32px",
-        inline: {
-          sm: "8px 12px",
-          md: "12px 16px"
+          50: "#F9FAFB",
+          100: "#F3F4F6",
+          125: "#F0F0F0",
+          // Agregado: Para icon wrappers
+          150: "#E2E5E9",
+          200: "#E5E7EB",
+          225: "#EEF2F7",
+          // Agregado: Para subtle borders
+          300: "#D1D5DB",
+          350: "#C3C7D1",
+          400: "#9CA3AF",
+          450: "#A3AAB8",
+          500: "#6B7280",
+          550: "#9DA5B5",
+          600: "#4B5563",
+          650: "#6E7991",
+          700: "#374151",
+          750: "#3A3F4B",
+          800: "#1F2937",
+          850: "#020303",
+          900: "#111827",
+          950: "#F9F9FA"
+        },
+        feedback: {
+          success: {
+            50: "#F2FDF8",
+            500: "#16A34A",
+            700: "#128751"
+          },
+          warning: {
+            50: "#FEFAF0",
+            100: "#FEF3C7",
+            // Agregado: Para promo banner
+            500: "#F59E0B",
+            700: "#C26E04"
+          },
+          error: {
+            50: "#FEEEEB",
+            100: "#FEF2F2",
+            // Agregado: Para destructive alerts
+            500: "#DC2626",
+            600: "#FB3131",
+            700: "#C2040C",
+            800: "#FECFCD"
+          },
+          info: {
+            50: "#F0F5FE",
+            500: "#2563EB",
+            700: "#0465C2"
+          }
         }
       },
-      borderWidths: {
-        sm: "1px",
-        md: "2px"
-      },
       typography: {
-        sizes: {
-          xs: "12px",
-          sm: "14px",
-          md: "16px",
-          lg: "18px",
-          xl: "20px"
+        fontFamily: {
+          base: "inherit"
         },
-        weights: {
-          regular: 400,
-          medium: 500,
-          semibold: 600,
-          bold: 700
+        size: {
+          10: "10px",
+          12: "12px",
+          13: "13px",
+          // Agregado: Para dropdown icons
+          14: "14px",
+          16: "16px",
+          18: "18px",
+          20: "20px",
+          24: "24px",
+          30: "30px",
+          // Agregado: Para file upload icons
+          32: "32px"
+          // Agregado: Para cifras destacadas (overview)
         },
-        lineHeights: {
+        weight: {
+          400: 400,
+          500: 500,
+          550: 550,
+          600: 600,
+          700: 700
+        },
+        lineHeight: {
           tight: "1.2",
           normal: "1.4",
           relaxed: "1.6"
+        },
+        letterSpacing: {
+          normal: "0",
+          tight: "-0.02em",
+          tighter: "-0.04em"
+        }
+      },
+      spacing: {
+        0: "0px",
+        0.5: "2px",
+        // Agregado: Para padding compacto
+        1: "4px",
+        1.25: "5px",
+        // Agregado: Para micro desplazamientos
+        1.5: "6px",
+        // Agregado: Para gaps compactos
+        1.75: "7px",
+        // Agregado: Para offsets pequeños
+        2: "8px",
+        2.5: "10px",
+        3: "12px",
+        4: "16px",
+        4.5: "18px",
+        // Agregado: Para separator vertical
+        5: "20px",
+        6: "24px",
+        6.5: "26px",
+        // Agregado: Para switch small
+        7: "28px",
+        8: "32px",
+        8.5: "34px",
+        // Agregado: Para switch regular
+        9: "36px",
+        10: "40px",
+        11: "44px",
+        12: "48px",
+        14: "56px",
+        // Agregado: Para file upload padding
+        16: "64px",
+        // Agregado: Para navbar height y sidebar collapsed
+        60: "240px"
+        // Agregado: Para sidebar width
+      },
+      maxWidth: {
+        compact: "360px",
+        // Agregado: Para banner compact
+        full: "1184px",
+        // Agregado: Para banner full
+        container: "1440px",
+        // Agregado: Para navbar container
+        dashboardMain: "767px",
+        // Agregado: Para cards principales
+        dashboardRight: "337px",
+        // Agregado: Para columna derecha
+        dashboardAccred: "347px",
+        // Agregado: Para acreditaciones (columna)
+        sidebar: "240px",
+        // Agregado: Para sidebar
+        dropdown: "12rem"
+        // Agregado: Para dropdown minWidth
+      },
+      radius: {
+        none: "0px",
+        xs: "2px",
+        sm: "6px",
+        md: "8px",
+        lg: "12px",
+        xl: "16px",
+        "2xl": "18px",
+        full: "9999px"
+      },
+      shadow: {
+        none: "none",
+        xs: "0 1px 2px rgba(0,0,0,0.04)",
+        sm: "0 1px 3px rgba(0,0,0,0.08)",
+        md: "0 4px 12px rgba(0,0,0,0.1)",
+        lg: "0 8px 24px rgba(0,0,0,0.12)",
+        focus: "0px 0px 0px 4px",
+        focusSm: "0px 0px 0px 2px",
+        dropdown: "0px 2px 4px -1px rgba(0,0,0,0.06), 0px 4px 6px -1px rgba(0,0,0,0.1)",
+        drawer: "0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 6px 12px -4px rgba(0, 0, 0, 0.1)"
+      },
+      border: {
+        width: {
+          0: "0",
+          1: "1px",
+          2: "2px",
+          4: "4px"
         }
       },
       motion: {
         duration: {
-          fast: "150ms",
-          normal: "250ms"
+          fast: "120ms",
+          normal: "200ms",
+          slow: "300ms"
         },
         easing: {
-          standard: "ease",
-          out: "ease-out"
+          in: "ease-in",
+          out: "ease-out",
+          inOut: "ease-in-out",
+          standard: "cubic-bezier(0.2, 0, 0, 1)"
         }
       },
-      shadow: {
-        sm: "0 1px 2px rgba(0,0,0,0.05)",
-        md: "0 4px 12px rgba(0,0,0,0.1)"
+      opacity: {
+        disabled: 0.4,
+        muted: 0.7,
+        overlay: 0.5
+      },
+      zIndex: {
+        base: 1,
+        dropdown: 1e3,
+        modal: 1100,
+        overlay: 1200,
+        toast: 1300,
+        tooltip: 1400
+      },
+      other: {
+        backdropBlur: "4px",
+        // Agregado: Para drawer overlay
+        cursor: {
+          grab: "grab",
+          grabbing: "grabbing"
+        },
+        borderStyle: {
+          dashed: "dashed"
+        },
+        scrollBehavior: "smooth",
+        maxHeight: "80vh",
+        // Agregado: Para drawer content
+        transparent: "transparent",
+        auto: "auto"
       }
     },
     semanticTokens: {
@@ -8413,118 +8561,517 @@ var themeDefault = {
       },
       surface: {
         default: "{foundations.colors.neutral.0}",
-        muted: "{foundations.colors.neutral.100}",
-        hover: "{foundations.colors.neutral.200}"
+        muted: "{foundations.colors.neutral.50}",
+        hover: "{foundations.colors.neutral.100}",
+        selected: "{foundations.colors.brand.50}"
       },
       border: {
-        default: "{foundations.colors.neutral.300}",
-        focus: "{foundations.colors.neutral.500}"
+        default: "{foundations.colors.neutral.200}",
+        focus: "{foundations.colors.brand.500}",
+        subtle: "{foundations.colors.neutral.100}"
       },
       action: {
-        primary: "{foundations.colors.neutral.700}",
-        primaryHover: "{foundations.colors.neutral.900}",
-        secondary: "{foundations.colors.neutral.500}",
+        primary: "{foundations.colors.brand.500}",
+        primaryHover: "{foundations.colors.brand.700}",
+        secondary: "{foundations.colors.neutral.100}",
         disabled: "{foundations.colors.neutral.300}"
       },
-      overlay: {
-        background: "rgba(0,0,0,0.5)",
-        opacity: "0.5",
-        backdropBlur: "4px"
+      feedback: {
+        success: {
+          bg: "{foundations.colors.feedback.success.50}",
+          text: "{foundations.colors.feedback.success.700}",
+          border: "{foundations.colors.feedback.success.500}",
+          iconBg: "{semanticTokens.surface.muted}",
+          action: "{semanticTokens.text.primary}"
+        },
+        error: {
+          bg: "{foundations.colors.feedback.error.50}",
+          text: "{foundations.colors.feedback.error.700}",
+          border: "{foundations.colors.feedback.error.500}"
+        },
+        warning: {
+          bg: "{foundations.colors.feedback.warning.50}",
+          text: "{foundations.colors.feedback.warning.700}",
+          border: "{foundations.colors.feedback.warning.500}"
+        },
+        info: {
+          bg: "{foundations.colors.feedback.info.50}",
+          text: "{foundations.colors.feedback.info.700}",
+          border: "{foundations.colors.feedback.info.500}"
+        }
+      },
+      state: {
+        disabled: {
+          bg: "{foundations.colors.neutral.200}",
+          text: "{foundations.colors.neutral.400}",
+          border: "{foundations.colors.neutral.300}"
+        }
       }
     },
     components: {
       button: {
         base: {
           radius: "{foundations.radius.md}",
-          fontWeight: "{foundations.typography.weights.regular}",
-          transition: "{foundations.motion.duration.fast}"
+          fontWeight: "{foundations.typography.weight.400}",
+          transition: "{foundations.motion.duration.fast}",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "{foundations.spacing.2}",
+          outline: "none"
+        },
+        sizes: {
+          small: {
+            height: "{foundations.spacing.9}",
+            paddingX: '{foundations.spacing.["2.5"]}',
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.550}"
+          },
+          medium: {
+            height: "{foundations.spacing.10}",
+            paddingX: "{foundations.spacing.3}",
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.550}"
+          },
+          large: {
+            height: "{foundations.spacing.11}",
+            paddingX: "{foundations.spacing.4}",
+            fontSize: "{foundations.typography.size.16}",
+            fontWeight: "{foundations.typography.weight.550}"
+          }
         },
         variants: {
           primary: {
-            background: "{semanticTokens.action.primary}",
-            backgroundHover: "{semanticTokens.action.primaryHover}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.brand.500}",
+            color: "{foundations.colors.neutral.0}",
+            hover: {
+              background: "{foundations.colors.brand.700}"
+            },
+            focus: {
+              boxShadow: "{foundations.shadow.focus} {foundations.colors.brand.500}"
+            },
+            disabled: {
+              background: "{foundations.colors.neutral.150}",
+              color: "{foundations.colors.neutral.450}"
+            }
           },
           secondary: {
-            background: "{semanticTokens.surface.muted}",
-            color: "{semanticTokens.text.primary}"
+            background: "{foundations.colors.neutral.0}",
+            color: "{foundations.colors.brand.500}",
+            hover: {
+              background: "{foundations.colors.brand.100}",
+              color: "{foundations.colors.brand.700}"
+            },
+            focus: {
+              boxShadow: "{foundations.shadow.focus} {foundations.colors.brand.500}"
+            },
+            disabled: {
+              background: "{foundations.other.transparent}",
+              color: "{foundations.colors.neutral.450}",
+              border: "{foundations.colors.neutral.150}"
+            }
+          },
+          tertiary: {
+            background: "{foundations.other.transparent}",
+            color: "{foundations.colors.brand.500}",
+            hover: {
+              background: "{foundations.other.transparent}",
+              color: "{foundations.colors.brand.700}"
+            },
+            focus: {
+              boxShadow: "{foundations.shadow.focus} {foundations.colors.brand.500}",
+              color: "{foundations.colors.brand.500}"
+            },
+            disabled: {
+              color: "{foundations.colors.neutral.450}",
+              background: "{foundations.other.transparent}"
+            }
           }
         }
       },
       label: {
-        fontSize: "{foundations.typography.sizes.sm}",
+        fontSize: "{foundations.typography.size.14}",
         color: "{semanticTokens.text.primary}",
-        padding: "{foundations.spacing.xs} {foundations.spacing.sm}",
-        fontWeight: "{foundations.typography.weights.medium}"
+        padding: "{foundations.spacing.2} {foundations.spacing.3}",
+        fontWeight: "{foundations.typography.weight.500}"
       },
       input: {
-        background: "{semanticTokens.surface.default}",
-        color: "{semanticTokens.text.primary}",
-        border: "{semanticTokens.border.default}",
-        focusBorder: "{semanticTokens.border.focus}",
-        radius: "{foundations.radius.md}"
+        base: {
+          background: "{foundations.colors.neutral.0}",
+          boxShadow: "{foundations.shadow.xs}",
+          color: "{foundations.colors.neutral.850}",
+          border: "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
+          radius: "{foundations.radius.md}",
+          hover: {
+            color: "{foundations.colors.neutral.850}",
+            background: "{foundations.colors.neutral.0}",
+            border: "{foundations.border.width.1} solid {foundations.colors.neutral.350}"
+          },
+          focus: {
+            border: "{foundations.border.width.1} solid {foundations.colors.brand.500}",
+            boxShadow: "{foundations.shadow.focusSm} {foundations.colors.brand.100}",
+            color: "{foundations.colors.neutral.850}"
+          },
+          filled: {
+            color: "{foundations.colors.neutral.850}",
+            background: "{foundations.colors.neutral.950}",
+            boxShadow: "{foundations.shadow.xs}"
+          },
+          disabled: {
+            background: "{foundations.colors.neutral.150}",
+            color: "{foundations.colors.neutral.550}",
+            border: "{foundations.border.width.1} solid {foundations.colors.neutral.350}",
+            boxShadow: "{foundations.shadow.xs}"
+          },
+          error: {
+            background: "{foundations.colors.neutral.0}",
+            border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+            color: "{foundations.colors.feedback.error.600}",
+            boxShadow: "{foundations.shadow.xs}",
+            filled: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+              color: "{foundations.colors.neutral.850}",
+              boxShadow: "{foundations.shadow.xs}"
+            },
+            focus: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+              boxShadow: "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
+              color: "{foundations.colors.neutral.850}"
+            },
+            hover: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.700}",
+              boxShadow: "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
+              color: "{foundations.colors.neutral.850}"
+            }
+          }
+        },
+        sizes: {
+          medium: {
+            height: "{foundations.spacing.11}",
+            padding: "{foundations.spacing.3}",
+            labelFontSize: "{foundations.typography.size.14}",
+            inputFontSize: "{foundations.typography.size.16}",
+            helperFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            inputFontWeight: "{foundations.typography.weight.400}",
+            helperFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            helperColor: "{foundations.colors.neutral.650}",
+            iconSize: "{foundations.typography.size.16}"
+          },
+          small: {
+            height: "{foundations.spacing.8}",
+            padding: '{foundations.spacing.3} {foundations.spacing.["2.5"]}',
+            labelFontSize: "{foundations.typography.size.14}",
+            inputFontSize: "{foundations.typography.size.14}",
+            helperFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            inputFontWeight: "{foundations.typography.weight.400}",
+            helperFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            helperColor: "{foundations.colors.neutral.650}",
+            iconSize: "{foundations.typography.size.16}"
+          }
+        }
+      },
+      emptyState: {
+        base: {
+          container: {
+            background: "{foundations.other.transparent}",
+            padding: "{foundations.spacing.6}"
+          },
+          icon: {
+            size: {
+              small: "{foundations.spacing.5}",
+              medium: "{foundations.spacing.6}"
+            },
+            color: "{foundations.colors.neutral.650}",
+            containerRadius: "{foundations.radius.xs}"
+          },
+          title: {
+            color: "{foundations.colors.neutral.850}",
+            fontWeight: "{foundations.typography.weight.550}",
+            size: {
+              small: "{foundations.typography.size.16}",
+              medium: "{foundations.typography.size.18}"
+            }
+          },
+          description: {
+            color: "{foundations.colors.neutral.650}",
+            fontWeight: "{foundations.typography.weight.400}",
+            size: {
+              small: "{foundations.typography.size.12}",
+              medium: "{foundations.typography.size.14}"
+            }
+          },
+          actions: {
+            gap: "{foundations.spacing.2}"
+          }
+        }
+      },
+      fileUpload: {
+        base: {
+          container: {
+            background: "{foundations.other.transparent}",
+            padding: "{foundations.spacing.6}"
+          },
+          dropzone: {
+            radius: "{foundations.radius.xl}",
+            borderStyle: "{foundations.other.borderStyle.dashed}",
+            borderWidth: "{foundations.border.width.1}",
+            borderColor: "{semanticTokens.border.default}",
+            paddingX: "{foundations.spacing.10}",
+            paddingY: "{foundations.spacing.14}",
+            gap: "{foundations.spacing.4}"
+          },
+          icon: {
+            size: "{foundations.typography.size.30}",
+            color: "{foundations.colors.neutral.650}",
+            wrapperSize: "{foundations.spacing.12}",
+            wrapperRadius: "{foundations.spacing.6}",
+            wrapperBg: "{foundations.colors.neutral.125}"
+          },
+          title: {
+            color: "{foundations.colors.neutral.850}",
+            fontSize: "{foundations.typography.size.16}",
+            fontWeight: "{foundations.typography.weight.550}"
+          },
+          description: {
+            color: "{foundations.colors.neutral.650}",
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.400}"
+          },
+          actions: {
+            gap: "{foundations.spacing.2}"
+          }
+        }
       },
       select: {
-        background: "{semanticTokens.surface.default}",
-        color: "{semanticTokens.text.primary}",
-        border: "{semanticTokens.border.default}",
-        focusBorder: "{semanticTokens.border.focus}",
-        radius: "{foundations.radius.md}"
+        base: {
+          background: "{foundations.colors.neutral.0}",
+          boxShadow: "{foundations.shadow.xs}",
+          color: "{foundations.colors.neutral.850}",
+          border: "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
+          radius: "{foundations.radius.md}",
+          hover: {
+            color: "{foundations.colors.neutral.850}",
+            background: "{foundations.colors.neutral.0}",
+            border: "{foundations.border.width.1} solid {foundations.colors.neutral.350}"
+          },
+          focus: {
+            border: "{foundations.border.width.1} solid {foundations.colors.brand.500}",
+            boxShadow: "{foundations.shadow.focusSm} {foundations.colors.brand.100}",
+            color: "{foundations.colors.neutral.850}"
+          },
+          filled: {
+            color: "{foundations.colors.neutral.850}",
+            background: "{foundations.colors.neutral.950}",
+            boxShadow: "{foundations.shadow.xs}"
+          },
+          disabled: {
+            background: "{foundations.colors.neutral.150}",
+            color: "{foundations.colors.neutral.550}",
+            border: "{foundations.border.width.1} solid {foundations.colors.neutral.350}",
+            boxShadow: "{foundations.shadow.xs}"
+          },
+          error: {
+            background: "{foundations.colors.neutral.0}",
+            border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+            color: "{foundations.colors.feedback.error.600}",
+            boxShadow: "{foundations.shadow.xs}",
+            filled: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+              color: "{foundations.colors.neutral.850}",
+              boxShadow: "{foundations.shadow.xs}"
+            },
+            focus: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.600}",
+              boxShadow: "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
+              color: "{foundations.colors.neutral.850}"
+            },
+            hover: {
+              border: "{foundations.border.width.1} solid {foundations.colors.feedback.error.700}",
+              boxShadow: "{foundations.shadow.focusSm} {foundations.colors.feedback.error.800}",
+              color: "{foundations.colors.neutral.850}"
+            }
+          }
+        },
+        sizes: {
+          medium: {
+            height: "{foundations.spacing.11}",
+            padding: "{foundations.spacing.3}",
+            labelFontSize: "{foundations.typography.size.14}",
+            inputFontSize: "{foundations.typography.size.16}",
+            helperFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            inputFontWeight: "{foundations.typography.weight.400}",
+            helperFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            helperColor: "{foundations.colors.neutral.650}",
+            iconSize: "{foundations.typography.size.16}"
+          },
+          small: {
+            height: "{foundations.spacing.8}",
+            padding: '{foundations.spacing.3} {foundations.spacing.["2.5"]}',
+            labelFontSize: "{foundations.typography.size.14}",
+            inputFontSize: "{foundations.typography.size.14}",
+            helperFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            inputFontWeight: "{foundations.typography.weight.400}",
+            helperFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            helperColor: "{foundations.colors.neutral.650}",
+            iconSize: "{foundations.typography.size.16}"
+          }
+        }
       },
       tooltip: {
-        background: "{foundations.colors.neutral.700}",
-        color: "{semanticTokens.text.inverse}",
-        radius: "{foundations.radius.sm}"
+        background: "{foundations.colors.neutral.850}",
+        color: "{foundations.colors.neutral.0}",
+        radius: "{foundations.radius.sm}",
+        fontSize: "{foundations.typography.size.14}",
+        fontWeight: "{foundations.typography.weight.400}",
+        lineHeight: "{foundations.typography.lineHeight.tight}",
+        letterSpacing: "{foundations.typography.letterSpacing.tighter}",
+        textAlign: "center",
+        caretColor: "{foundations.colors.neutral.850}"
       },
       accordion: {
-        text: "{semanticTokens.text.primary}",
-        border: "{semanticTokens.border.default}",
-        radius: "{foundations.radius.sm}",
-        focusBorder: "{semanticTokens.border.focus}"
+        base: {
+          radius: "{foundations.radius.sm}",
+          borderWidth: "{foundations.border.width.1}",
+          borderColor: "{foundations.colors.neutral.150}",
+          background: "{foundations.colors.neutral.0}",
+          transition: "{foundations.motion.duration.fast}",
+          text: {
+            title: "{foundations.colors.neutral.850}",
+            content: "{foundations.colors.neutral.750}",
+            icon: "{foundations.colors.neutral.650}"
+          },
+          states: {
+            default: {
+              background: "{foundations.colors.neutral.0}",
+              borderColor: "{foundations.other.transparent}",
+              text: "{foundations.colors.neutral.850}"
+            },
+            hover: {
+              text: "{foundations.colors.brand.500}",
+              icon: "{foundations.colors.brand.500}"
+            },
+            focus: {
+              borderColor: "{foundations.colors.brand.500}",
+              ring: "{foundations.shadow.focus} {foundations.colors.brand.500}"
+            }
+          }
+        },
+        sizes: {
+          small: {
+            trigger: {
+              paddingY: "{foundations.spacing.3}",
+              fontSize: "{foundations.typography.size.14}"
+            },
+            content: {
+              fontSize: "{foundations.typography.size.14}",
+              paddingTop: "{foundations.spacing.2}",
+              paddingBottom: "{foundations.spacing.3}"
+            },
+            icon: {
+              size: "{foundations.typography.size.14}"
+            }
+          },
+          medium: {
+            trigger: {
+              paddingY: "{foundations.spacing.4}",
+              fontSize: "{foundations.typography.size.16}"
+            },
+            content: {
+              fontSize: "{foundations.typography.size.16}",
+              paddingTop: "{foundations.spacing.3}",
+              paddingBottom: "{foundations.spacing.4}"
+            },
+            icon: {
+              size: "{foundations.typography.size.16}"
+            }
+          }
+        }
       },
       checkbox: {
-        track: {
-          width: "36px",
-          height: "20px",
-          radius: "{foundations.radius.md}",
-          background: "{semanticTokens.surface.muted}",
-          border: "{semanticTokens.border.default}",
-          focusBorder: "{semanticTokens.border.focus}"
-        },
-        checked: {
-          background: "{semanticTokens.action.primary}",
-          backgroundHover: "{semanticTokens.action.primaryHover}"
-        },
-        disabled: {
-          background: "{semanticTokens.surface.muted}",
-          thumb: "{semanticTokens.surface.default}"
-        },
-        thumb: {
-          size: "16px",
-          color: "{semanticTokens.surface.default}"
+        base: {
+          fontWeight: "{foundations.typography.weight.400}",
+          lineHeight: "{foundations.typography.lineHeight.normal}",
+          gap: "{foundations.spacing.3}",
+          track: {
+            radius: "{foundations.radius.sm}",
+            background: "{semanticTokens.surface.muted}",
+            border: "{semanticTokens.border.default}",
+            focusBorder: "{semanticTokens.border.focus}"
+          },
+          checked: {
+            background: "{foundations.colors.brand.500}",
+            backgroundHover: "{foundations.colors.brand.700}"
+          },
+          disabled: {
+            background: "{foundations.colors.neutral.150}",
+            border: "{foundations.colors.neutral.150}",
+            text: "{foundations.colors.neutral.450}"
+          },
+          thumb: {
+            color: "{semanticTokens.surface.default}"
+          },
+          motion: {
+            duration: "{foundations.motion.duration.fast}"
+          }
         },
-        motion: {
-          duration: "{foundations.motion.duration.fast}"
+        sizes: {
+          regular: {
+            control: "{foundations.spacing.5}",
+            labelFontSize: "{foundations.typography.size.16}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}",
+            icon: "{foundations.typography.size.16}"
+          },
+          small: {
+            control: "{foundations.spacing.4}",
+            labelFontSize: "{foundations.typography.size.14}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}",
+            icon: "{foundations.typography.size.14}"
+          },
+          extraSmall: {
+            control: "{foundations.typography.size.14}",
+            labelFontSize: "{foundations.typography.size.12}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}",
+            icon: "{foundations.typography.size.12}"
+          }
         }
       },
       badge: {
-        typography: {
-          fontWeight: "{foundations.typography.weights.semibold}",
-          fontSize: "{foundations.typography.sizes.sm}",
-          lineHeight: "{foundations.typography.lineHeights.tight}"
+        base: {
+          fontWeight: "{foundations.typography.weight.550}",
+          lineHeight: "{foundations.typography.lineHeight.normal}"
         },
         sizes: {
           small: {
-            fontSize: "{foundations.typography.sizes.xs}",
-            padding: "{foundations.spacing.xxs} {foundations.spacing.sm}"
+            fontSize: "{foundations.typography.size.12}",
+            padding: '{foundations.spacing.["0.5"]} {foundations.spacing.2}'
           },
           medium: {
-            fontSize: "{foundations.typography.sizes.sm}",
-            padding: "{foundations.spacing.xs} {foundations.spacing.md}"
+            fontSize: "{foundations.typography.size.14}",
+            padding: '{foundations.spacing.1} {foundations.spacing.["2.5"]}'
           },
           large: {
-            fontSize: "{foundations.typography.sizes.md}",
-            padding: "{foundations.spacing.sm} {foundations.spacing.lg}"
+            fontSize: "{foundations.typography.size.16}",
+            padding: '{foundations.spacing.["1.5"]} {foundations.spacing.3}'
           }
         },
         shapes: {
@@ -8537,92 +9084,93 @@ var themeDefault = {
         },
         tones: {
           success: {
-            background: "{foundations.colors.semantic.success}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.feedback.success.50}",
+            color: "{foundations.colors.feedback.success.700}"
           },
           warning: {
-            background: "{foundations.colors.semantic.warning}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.feedback.warning.50}",
+            color: "{foundations.colors.feedback.warning.700}"
           },
           error: {
-            background: "{foundations.colors.semantic.danger}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.feedback.error.50}",
+            color: "{foundations.colors.feedback.error.700}"
           },
           info: {
-            background: "{foundations.colors.semantic.info}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.feedback.info.50}",
+            color: "{foundations.colors.feedback.info.700}"
           },
           neutral: {
-            background: "{semanticTokens.surface.muted}",
-            color: "{semanticTokens.text.primary}",
-            border: "{semanticTokens.border.default}"
+            background: "{foundations.colors.neutral.950}",
+            color: "{foundations.colors.neutral.750}",
+            border: "{foundations.colors.neutral.150}"
           },
           brand: {
-            background: "{foundations.colors.brand.primary}",
-            color: "{semanticTokens.text.inverse}"
+            background: "{foundations.colors.brand.50}",
+            color: "{foundations.colors.brand.500}"
           }
         }
       },
       banner: {
         base: {
           radius: "{foundations.radius.lg}",
-          paddingX: "16px",
-          paddingY: "16px"
+          paddingX: "{foundations.spacing.4}",
+          paddingY: "{foundations.spacing.4}"
         },
         sizes: {
           full: {
-            maxWidth: "1184px"
+            maxWidth: "{foundations.maxWidth.full}"
           },
           compact: {
-            maxWidth: "360px"
+            maxWidth: "{foundations.maxWidth.compact}"
           }
         },
         tones: {
           success: {
-            background: "{foundations.colors.semantic.success}",
-            border: "#128751",
+            background: "{foundations.colors.feedback.success.50}",
+            border: "{foundations.colors.feedback.success.700}",
             text: "{semanticTokens.text.primary}",
-            iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "#128751",
-            action: "{semanticTokens.text.primary}"
+            iconBg: "{semanticTokens.feedback.success.iconBg}",
+            iconColor: "{foundations.colors.feedback.success.700}",
+            action: "{semanticTokens.feedback.success.action}"
           },
           warning: {
-            background: "{foundations.colors.semantic.warning}",
-            border: "#C26E04",
+            background: "{foundations.colors.feedback.warning.50}",
+            border: "{foundations.colors.feedback.warning.700}",
             text: "{semanticTokens.text.primary}",
             iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "#C26E04",
+            iconColor: "{foundations.colors.feedback.warning.700}",
             action: "{semanticTokens.text.primary}"
           },
           error: {
-            background: "{foundations.colors.semantic.danger}",
-            border: "#C2040C",
+            background: "{foundations.colors.feedback.error.50}",
+            border: "{foundations.colors.feedback.error.700}",
             text: "{semanticTokens.text.primary}",
             iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "#C2040C",
+            iconColor: "{foundations.colors.feedback.error.700}",
             action: "{semanticTokens.text.primary}"
           },
           info: {
-            background: "{foundations.colors.semantic.info}",
-            border: "#0465C2",
+            background: "{foundations.colors.feedback.info.50}",
+            border: "{foundations.colors.feedback.info.700}",
             text: "{semanticTokens.text.primary}",
             iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "#0465C2",
+            iconColor: "{foundations.colors.feedback.info.700}",
             action: "{semanticTokens.text.primary}"
           },
           neutral: {
-            background: "{semanticTokens.surface.muted}",
-            border: "#E2E5E9",
+            background: "{foundations.colors.neutral.950}",
+            border: "{foundations.colors.neutral.150}",
             text: "{semanticTokens.text.primary}",
             iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "{semanticTokens.text.muted}",
+            iconColor: "{foundations.colors.neutral.750}",
             action: "{semanticTokens.text.primary}"
           },
           brand: {
-            background: "{foundations.colors.brand.primary}",
+            background: "{foundations.colors.brand.50}",
+            color: "{foundations.colors.brand.500}",
             text: "{semanticTokens.text.primary}",
             iconBg: "{semanticTokens.surface.muted}",
-            iconColor: "{foundations.colors.brand.primary}",
+            iconColor: "{foundations.colors.brand.500}",
             action: "{semanticTokens.text.primary}"
           }
         }
@@ -8633,42 +9181,82 @@ var themeDefault = {
           color: "{semanticTokens.text.inverse}",
           linkColor: "{semanticTokens.text.inverse}",
           linkUnderline: true,
-          borderRadius: "16px",
-          padding: "{foundations.spacing.inline.md}",
-          imageBg: "lightgray"
+          borderRadius: "{foundations.radius.xl}",
+          padding: "{foundations.spacing.3} {foundations.spacing.4}",
+          imageBg: "{foundations.colors.neutral.200}"
         },
         secondary: {
-          background: "{foundations.colors.brand.secondary}",
+          background: "{foundations.colors.brand.100}",
           color: "{semanticTokens.text.primary}",
-          linkColor: "{foundations.colors.brand.primary}",
+          linkColor: "{foundations.colors.brand.500}",
           linkUnderline: false,
-          borderRadius: "{foundations.radius.lg}",
-          padding: "{foundations.spacing.inline.md}",
+          borderRadius: "{foundations.radius.xl}",
+          padding: "{foundations.spacing.3} {foundations.spacing.4}",
           imageBg: "{foundations.colors.neutral.200}"
         },
         tertiary: {
-          background: "{foundations.colors.semantic.warning}",
+          background: "{foundations.colors.feedback.warning.50}",
           color: "{semanticTokens.text.primary}",
-          linkColor: "{foundations.colors.semantic.warning}",
+          linkColor: "{foundations.colors.feedback.warning.500}",
           linkUnderline: true,
-          borderRadius: "{foundations.radius.lg}",
-          padding: "{foundations.spacing.inline.md}",
-          imageBg: "{foundations.colors.neutral.200}"
+          borderRadius: "{foundations.radius.xl}",
+          padding: "{foundations.spacing.3} {foundations.spacing.4}",
+          imageBg: "{foundations.colors.feedback.warning.100}"
         }
       },
       alert: {
         base: {
           radius: "{foundations.radius.lg}",
-          paddingX: "16px",
-          paddingY: "12px"
+          paddingX: "{foundations.spacing.4}",
+          paddingY: "{foundations.spacing.3}"
         },
         tones: {
+          success: {
+            background: "{foundations.colors.feedback.success.50}",
+            border: "{foundations.colors.feedback.success.700}",
+            text: "{semanticTokens.text.primary}",
+            iconBg: "{semanticTokens.feedback.success.iconBg}",
+            iconColor: "{foundations.colors.feedback.success.700}",
+            action: "{semanticTokens.feedback.success.action}"
+          },
+          warning: {
+            background: "{foundations.colors.feedback.warning.50}",
+            border: "{foundations.colors.feedback.warning.700}",
+            text: "{semanticTokens.text.primary}",
+            iconBg: "{semanticTokens.surface.muted}",
+            iconColor: "{foundations.colors.feedback.warning.700}",
+            action: "{semanticTokens.text.primary}"
+          },
+          error: {
+            background: "{foundations.colors.feedback.error.50}",
+            border: "{foundations.colors.feedback.error.700}",
+            text: "{semanticTokens.text.primary}",
+            iconBg: "{semanticTokens.surface.muted}",
+            iconColor: "{foundations.colors.feedback.error.700}",
+            action: "{semanticTokens.text.primary}"
+          },
+          info: {
+            background: "{foundations.colors.feedback.info.50}",
+            border: "{foundations.colors.feedback.info.700}",
+            text: "{semanticTokens.text.primary}",
+            iconBg: "{semanticTokens.surface.muted}",
+            iconColor: "{foundations.colors.feedback.info.700}",
+            action: "{semanticTokens.text.primary}"
+          },
           neutral: {
-            background: "{semanticTokens.surface.muted}",
-            border: "{semanticTokens.border.default}",
+            background: "{foundations.colors.neutral.950}",
+            border: "{foundations.colors.neutral.150}",
             text: "{semanticTokens.text.primary}",
-            iconBg: "{semanticTokens.surface.default}",
-            iconColor: "{semanticTokens.text.muted}",
+            iconBg: "{semanticTokens.surface.muted}",
+            iconColor: "{foundations.colors.neutral.750}",
+            action: "{semanticTokens.text.primary}"
+          },
+          destructive: {
+            background: "{foundations.colors.feedback.error.100}",
+            border: "{foundations.colors.feedback.error.500}",
+            text: "{semanticTokens.text.primary}",
+            iconBg: "{semanticTokens.surface.muted}",
+            iconColor: "{foundations.colors.feedback.error.500}",
             action: "{semanticTokens.text.primary}"
           }
         }
@@ -8676,107 +9264,253 @@ var themeDefault = {
       avatar: {
         sizes: {
           sm: {
-            size: "{foundations.spacing.lg}",
-            fontSize: "{foundations.typography.sizes.xs}"
+            size: "{foundations.spacing.8}",
+            fontSize: "{foundations.typography.size.12}"
           },
           md: {
-            size: "{foundations.spacing.xl}",
-            fontSize: "{foundations.typography.sizes.md}"
+            size: "{foundations.spacing.9}",
+            fontSize: "{foundations.typography.size.14}"
           },
           lg: {
-            size: '{foundations.spacing["2xl"]}',
-            fontSize: "{foundations.typography.sizes.lg}"
+            size: "{foundations.spacing.11}",
+            fontSize: "{foundations.typography.size.14}"
           }
         },
-        shape: {
-          radius: "{foundations.radius.full}"
+        base: {
+          fallback: {
+            background: "{foundations.colors.neutral.950}",
+            color: "{foundations.colors.neutral.850}",
+            fontWeight: "{foundations.typography.weight.550}"
+          }
         },
-        fallback: {
-          background: "{semanticTokens.surface.muted}",
-          color: "{semanticTokens.text.primary}",
-          fontWeight: "{foundations.typography.weights.medium}"
+        shapes: {
+          radius: "{foundations.radius.full}"
         }
       },
       radio: {
-        outer: {
-          size: "16px",
-          radius: "50%",
-          background: "{semanticTokens.surface.default}",
-          border: "{semanticTokens.border.default}",
-          focusBorder: "{semanticTokens.border.focus}"
-        },
-        checked: {
-          background: "{semanticTokens.action.primary}",
-          backgroundHover: "{semanticTokens.action.primaryHover}"
-        },
-        dot: {
-          size: "8px",
-          color: "{semanticTokens.surface.default}"
-        },
-        disabled: {
-          background: "{semanticTokens.surface.muted}",
-          border: "{semanticTokens.border.default}",
-          dot: "{semanticTokens.surface.default}"
+        base: {
+          fontWeight: "{foundations.typography.weight.400}",
+          lineHeight: "{foundations.typography.lineHeight.normal}",
+          gap: "{foundations.spacing.3}",
+          outer: {
+            radius: "{foundations.radius.full}",
+            background: "{foundations.colors.neutral.0}",
+            border: "{foundations.colors.neutral.150}",
+            hoverBorder: "{foundations.colors.neutral.350}",
+            focusBorder: "{semanticTokens.border.focus}"
+          },
+          checked: {
+            background: "{foundations.colors.brand.500}",
+            backgroundHover: "{foundations.colors.brand.700}"
+          },
+          disabled: {
+            background: "{foundations.colors.neutral.150}",
+            border: "{foundations.colors.neutral.350}",
+            dot: "{foundations.colors.neutral.450}"
+          },
+          motion: {
+            duration: "{foundations.motion.duration.fast}"
+          }
         },
-        motion: {
-          duration: "{foundations.motion.duration.fast}"
+        sizes: {
+          regular: {
+            outer: {
+              size: "{foundations.spacing.5}"
+            },
+            dot: {
+              size: "{foundations.spacing.3}"
+            },
+            labelFontSize: "{foundations.typography.size.16}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          small: {
+            outer: {
+              size: "{foundations.spacing.4}"
+            },
+            dot: {
+              size: "{foundations.spacing.2}"
+            },
+            labelFontSize: "{foundations.typography.size.14}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          extraSmall: {
+            outer: {
+              size: "{foundations.spacing.4}"
+            },
+            dot: {
+              size: "{foundations.spacing.2}"
+            },
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.14}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          }
         }
       },
       switch: {
-        track: {
-          width: "36px",
-          height: "20px",
-          radius: "{foundations.radius.full}",
-          offBackground: "{foundations.colors.neutral.300}",
-          onBackground: "{semanticTokens.action.primary}",
-          focusBorder: "{semanticTokens.border.focus}"
-        },
-        handle: {
-          size: "12px",
-          color: "{semanticTokens.text.inverse}"
-        },
-        disabled: {
-          track: "{semanticTokens.surface.muted}",
-          handle: "{semanticTokens.surface.default}"
+        base: {
+          fontWeight: "{foundations.typography.weight.400}",
+          lineHeight: "{foundations.typography.lineHeight.normal}",
+          gap: "{foundations.spacing.3}",
+          background: "{foundations.colors.neutral.350}",
+          track: {
+            offBackground: "{foundations.colors.neutral.150}",
+            offBackgroundHover: "{foundations.colors.neutral.450}",
+            onBackground: "{foundations.colors.brand.500}",
+            onBackgroundHover: "{foundations.colors.brand.700}"
+          },
+          disabled: {
+            track: "{foundations.colors.neutral.450}",
+            handle: "{foundations.colors.neutral.150}",
+            background: "{foundations.colors.neutral.150}"
+          },
+          motion: {
+            duration: "{foundations.motion.duration.fast}"
+          }
         },
-        motion: {
-          duration: "{foundations.motion.duration.fast}"
+        sizes: {
+          regular: {
+            track: {
+              width: '{foundations.spacing.["8.5"]}',
+              height: "{foundations.spacing.5}"
+            },
+            handle: {
+              size: "{foundations.spacing.4}",
+              translate: '{foundations.spacing.["1.75"]}'
+            },
+            labelFontSize: "{foundations.typography.size.16}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          small: {
+            track: {
+              width: '{foundations.spacing.["6.5"]}',
+              height: "{foundations.spacing.4}"
+            },
+            handle: {
+              size: "{foundations.spacing.3}",
+              translate: '{foundations.spacing.["1.25"]}'
+            },
+            labelFontSize: "{foundations.typography.size.12}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          extraSmall: {
+            track: {
+              width: '{foundations.spacing.["6.5"]}',
+              height: "{foundations.spacing.4}"
+            },
+            handle: {
+              size: "{foundations.spacing.3}",
+              translate: '{foundations.spacing.["1.25"]}'
+            },
+            labelFontWeight: "{foundations.typography.weight.400}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.12}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          }
         }
       },
       dropdown: {
-        background: "{semanticTokens.surface.default}",
-        border: "{semanticTokens.border.default}",
+        background: "{foundations.colors.neutral.0}",
+        color: "{foundations.colors.neutral.850}",
+        border: "{foundations.border.width.1} solid {foundations.colors.neutral.150}",
         radius: "{foundations.radius.md}",
-        shadow: "{foundations.shadow.md}"
-      },
-      alertDialog: {
-        overlay: {
-          background: "rgba(0,0,0,0.5)"
-        },
-        content: {
-          background: "{semanticTokens.surface.default}",
-          radius: "{foundations.radius.lg}",
-          border: "{semanticTokens.border.default}"
+        shadow: "{foundations.shadow.dropdown}",
+        paddingX: "{foundations.spacing.2}",
+        paddingY: "{foundations.spacing.1}",
+        minWidth: "{foundations.maxWidth.dropdown}",
+        fontSize: "{foundations.typography.size.14}",
+        fontWeight: "{foundations.typography.weight.400}",
+        lineHeight: "{foundations.typography.lineHeight.normal}",
+        animation: {
+          duration: "{foundations.motion.duration.fast}",
+          easing: "{foundations.motion.easing.out}"
         },
-        title: {
-          color: "{semanticTokens.text.primary}",
-          fontWeight: "{foundations.typography.weights.semibold}"
+        item: {
+          height: "{foundations.spacing.9}",
+          gap: "{foundations.spacing.1}",
+          color: "{foundations.colors.neutral.850}",
+          background: "{foundations.colors.neutral.0}",
+          hoverBackground: "{foundations.colors.neutral.950}",
+          activeBackground: "{foundations.colors.neutral.150}",
+          disabledOpacity: "{foundations.opacity.disabled}",
+          borderRadius: "{foundations.radius.md}",
+          iconSize: "{foundations.typography.size.13}",
+          iconColor: "{foundations.colors.brand.500}",
+          fontSize: "{foundations.typography.size.14}",
+          fontWeight: "{foundations.typography.weight.400}"
         },
-        description: {
-          color: "{semanticTokens.text.secondary}"
+        section: {
+          labelColor: "{foundations.colors.neutral.650}",
+          separatorColor: "{foundations.colors.neutral.150}"
+        }
+      },
+      separator: {
+        base: {
+          orientation: {
+            vertical: {
+              width: "{foundations.border.width.1}",
+              height: '{foundations.spacing.["4.5"]}'
+            },
+            horizontal: {
+              width: "{foundations.other.auto}",
+              height: "{foundations.border.width.1}"
+            }
+          },
+          color: "{foundations.colors.neutral.150}",
+          opacity: "{foundations.opacity.muted}"
+        }
+      },
+      alertDialog: {
+        base: {
+          overlay: {
+            background: "rgba(0,0,0,{foundations.opacity.overlay})"
+          },
+          content: {
+            background: "{foundations.colors.neutral.0}",
+            radius: "{foundations.radius.2xl}",
+            borderColor: "{foundations.colors.neutral.150}"
+          },
+          title: {
+            color: "{foundations.colors.neutral.850}",
+            fontSize: "{foundations.typography.size.18}"
+          },
+          description: {
+            color: "{foundations.colors.neutral.650}",
+            fontSize: "{foundations.typography.size.16}"
+          }
         }
       },
       card: {
         backgroundColor: "{semanticTokens.surface.default}",
         borderColor: "{semanticTokens.border.default}",
-        color: "{semanticTokens.text.primary}",
+        color: "{foundations.colors.neutral.900}",
         borderRadius: "{foundations.radius.lg}",
-        padding: "16px",
+        padding: "{foundations.spacing.4}",
         title: {
-          fontSize: "{foundations.typography.sizes.lg}",
-          fontWeight: "{foundations.typography.weights.semibold}",
-          lineHeight: "130%",
-          letterSpacing: "-0.04em"
+          fontSize: "{foundations.typography.size.18}",
+          fontWeight: "{foundations.typography.weight.550}",
+          lineHeight: "{foundations.typography.lineHeight.tight}",
+          letterSpacing: "{foundations.typography.letterSpacing.tighter}"
         },
         variants: {
           primary: {
@@ -8784,264 +9518,470 @@ var themeDefault = {
             borderColor: "{foundations.colors.neutral.200}"
           },
           secondary: {
-            backgroundColor: "{foundations.colors.neutral.100}",
-            borderColor: "transparent"
+            backgroundColor: "{foundations.colors.neutral.50}",
+            borderColor: "{foundations.other.transparent}"
           },
           tertiary: {
             backgroundColor: "{foundations.colors.neutral.0}",
-            borderColor: "transparent"
+            borderColor: "{foundations.colors.brand.500}"
           }
         }
       },
       integrationCard: {
-        backgroundColor: "{foundations.colors.neutral.0}",
+        backgroundColor: "{foundations.colors.neutral.950}",
         borderColor: "{foundations.colors.neutral.200}",
-        borderRadius: "{foundations.radius.lg}",
+        borderRadius: "{foundations.radius.xl}",
         title: {
-          color: "{semanticTokens.text.primary}",
-          fontSize: "{foundations.typography.sizes.lg}",
-          fontWeight: "{foundations.typography.weights.semibold}"
+          color: "{foundations.colors.neutral.900}",
+          fontSize: "{foundations.typography.size.16}",
+          fontWeight: "{foundations.typography.weight.550}"
         },
         description: {
           color: "{foundations.colors.neutral.500}",
-          fontSize: "{foundations.typography.sizes.md}"
+          fontSize: "{foundations.typography.size.14}"
         },
         link: {
-          color: "{foundations.colors.brand.primary}",
-          fontSize: "{foundations.typography.sizes.md}",
-          fontWeight: "{foundations.typography.weights.semibold}"
+          color: "{foundations.colors.brand.500}",
+          fontSize: "{foundations.typography.size.14}",
+          fontWeight: "{foundations.typography.weight.550}"
         },
         variants: {
-          default: { borderColor: "{foundations.colors.neutral.200}" },
-          subtle: { borderColor: "{foundations.colors.neutral.100}" },
-          none: { borderColor: "transparent" }
+          default: {
+            borderColor: "{foundations.colors.neutral.200}"
+          },
+          subtle: {
+            borderColor: "{foundations.colors.neutral.225}"
+          },
+          none: {
+            borderColor: "{foundations.other.transparent}"
+          }
         }
       },
       dragslider: {
-        gap: "16px",
-        cursorGrab: "grab",
-        cursorGrabbing: "grabbing",
-        scrollBehavior: "smooth"
+        gap: "{foundations.spacing.4}",
+        cursorGrab: "{foundations.other.cursor.grab}",
+        cursorGrabbing: "{foundations.other.cursor.grabbing}",
+        scrollBehavior: "{foundations.other.scrollBehavior}"
       },
       calendar: {
-        background: "{semanticTokens.surface.default}",
-        text: "{semanticTokens.text.primary}",
-        mutedText: "{semanticTokens.text.muted}",
-        accent: "{semanticTokens.action.primary}",
-        accentForeground: "{semanticTokens.text.inverse}",
-        radius: "{foundations.radius.md}"
+        base: {
+          background: "{semanticTokens.surface.default}",
+          radius: "{foundations.radius.md}",
+          text: "{semanticTokens.text.primary}",
+          muted: "{semanticTokens.text.muted}",
+          border: "{semanticTokens.border.default}",
+          item: {
+            size: "{foundations.spacing.8}",
+            radius: "{foundations.radius.sm}",
+            default: {
+              color: "{semanticTokens.text.primary}",
+              background: "{foundations.other.transparent}"
+            },
+            hover: {
+              background: "{foundations.colors.neutral.150}",
+              color: "{semanticTokens.text.primary}"
+            },
+            current: {
+              background: "{foundations.colors.neutral.150}",
+              color: "{semanticTokens.text.primary}"
+            },
+            active: {
+              background: "{foundations.colors.brand.500}",
+              color: "{semanticTokens.text.inverse}"
+            }
+          }
+        }
       },
       popover: {
-        background: "{semanticTokens.surface.default}",
-        border: "{semanticTokens.border.default}",
-        radius: "{foundations.radius.md}",
-        shadow: "{foundations.shadow.md}"
+        background: "{foundations.colors.neutral.0}",
+        color: "{foundations.colors.neutral.850}",
+        border: "{foundations.colors.neutral.150}",
+        radius: "{foundations.radius.lg}",
+        shadow: "{foundations.shadow.dropdown}",
+        padding: "{foundations.spacing.3}",
+        fontSize: "{foundations.typography.size.16}",
+        fontWeight: "{foundations.typography.weight.400}",
+        lineHeight: "{foundations.typography.lineHeight.normal}",
+        header: {
+          fontSize: "{foundations.typography.size.16}",
+          fontWeight: "{foundations.typography.weight.400}",
+          color: "{foundations.colors.neutral.850}"
+        },
+        description: {
+          fontSize: "{foundations.typography.size.14}",
+          fontWeight: "{foundations.typography.weight.400}",
+          color: "{foundations.colors.neutral.650}"
+        },
+        divider: {
+          color: "{foundations.colors.neutral.150}"
+        },
+        motion: {
+          duration: "{foundations.motion.duration.normal}",
+          easing: "{foundations.motion.easing.out}"
+        },
+        zIndex: "{foundations.zIndex.dropdown}"
       },
       pagination: {
-        background: "{semanticTokens.surface.default}",
-        activeBackground: "{foundations.colors.neutral.100}",
-        activeText: "{semanticTokens.action.primary}",
-        hoverBackground: "{semanticTokens.surface.hover}",
-        border: "{semanticTokens.border.default}",
-        radius: "{foundations.radius.md}"
+        base: {
+          // Contenedor y General
+          radius: "{foundations.radius.md}",
+          gap: "{foundations.spacing.2}",
+          // Espacio entre botones
+          // Botón de número de página (PageNumber - Required)
+          pageNumber: {
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.500}",
+            color: "{semanticTokens.text.primary}"
+          },
+          // Iconos (Previous/Next/Ellipsis Icons - Required)
+          icon: {
+            size: "{foundations.typography.size.16}",
+            color: "{foundations.colors.neutral.500}"
+          },
+          // Estados de los items (Links)
+          item: {
+            default: {
+              background: "{semanticTokens.surface.default}",
+              border: "{semanticTokens.border.default}",
+              color: "{semanticTokens.text.primary}"
+            },
+            hover: {
+              background: "{foundations.colors.brand.100}",
+              border: "{semanticTokens.border.default}"
+            },
+            active: {
+              // Current Page - Required
+              background: "{foundations.colors.brand.200}",
+              text: "{semanticTokens.action.primary}",
+              border: "{foundations.other.transparent}"
+            },
+            focus: {
+              // Active Focus - Required
+              border: "{semanticTokens.border.focus}"
+            },
+            disabled: {
+              // Disabled state - Required
+              background: "{foundations.colors.neutral.0}",
+              text: "{foundations.colors.neutral.400}",
+              opacity: "{foundations.opacity.overlay}"
+            }
+          }
+        }
       },
       tabs: {
-        tabsList: {
-          background: "{semanticTokens.surface.muted}",
-          color: "{semanticTokens.text.primary}",
-          border: "{foundations.radius.md}"
-        },
-        tabsTrigger: {
-          color: "{semanticTokens.text.primary}",
-          active: {
-            background: "{semanticTokens.action.primary}",
-            border: "{semanticTokens.border.default}",
-            color: "{semanticTokens.text.inverse}"
+        base: {
+          tabsList: {
+            background: "{foundations.colors.neutral.150}",
+            color: "{foundations.colors.neutral.750}",
+            radius: "{foundations.radius.sm}"
           },
-          disabled: {
-            opacity: 0.5
+          tabsTrigger: {
+            color: "{foundations.colors.neutral.750}",
+            hover: {
+              background: "{foundations.colors.neutral.950}",
+              color: "{foundations.colors.neutral.850}"
+            },
+            active: {
+              background: "{foundations.colors.neutral.0}",
+              color: "{foundations.colors.neutral.850}"
+            },
+            disabled: {
+              background: "{foundations.colors.neutral.0}",
+              color: "{foundations.colors.neutral.550}",
+              opacity: "{foundations.opacity.overlay}"
+            }
+          },
+          tabsFocusRing: {
+            innerColor: "{foundations.colors.neutral.0}",
+            outerColor: "{foundations.colors.brand.500}",
+            innerSize: "{foundations.border.width.2}",
+            outerSize: "{foundations.border.width.4}"
           }
         },
-        tabsFocusRing: {
-          innerColor: "{semanticTokens.surface.default}",
-          outerColor: "{semanticTokens.border.focus}",
-          innerSize: "2px",
-          outerSize: "4px"
+        sizes: {
+          medium: {
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.500}"
+          },
+          small: {
+            fontSize: "{foundations.typography.size.12}",
+            fontWeight: "{foundations.typography.weight.500}"
+          }
         }
       },
       table: {
-        background: "{semanticTokens.surface.default}",
-        color: "{semanticTokens.text.primary}",
-        border: "{semanticTokens.border.default}",
-        radius: "{foundations.radius.md}",
-        hoverBackground: "{semanticTokens.surface.hover}",
-        selectedBackground: "{foundations.colors.neutral.100}",
-        shadow: "{foundations.shadow.md}"
+        base: {
+          // Estilos del contenedor
+          background: "{semanticTokens.surface.default}",
+          border: "{semanticTokens.border.default}",
+          radius: "{foundations.radius.md}",
+          shadow: "{foundations.shadow.md}",
+          // Header (Cabeceras)
+          headerBackground: "{foundations.colors.neutral.950}",
+          headerTextColor: "{foundations.colors.neutral.650}",
+          headerFontSize: "{foundations.typography.size.12}",
+          headerFontWeight: "{foundations.typography.weight.600}",
+          // Filas y Celdas
+          rowHoverBackground: "{semanticTokens.surface.hover}",
+          rowSelectedBackground: "{foundations.colors.brand.200}",
+          cellTextColor: "{semanticTokens.text.primary}",
+          cellFontSize: "{foundations.typography.size.14}",
+          // Subtítulo de celda (Cell Description)
+          descriptionColor: "{foundations.colors.neutral.650}",
+          descriptionFontSize: "{foundations.typography.size.12}",
+          descriptionFontWeight: "{foundations.typography.weight.400}"
+        }
       },
       breadcrumb: {
-        link: {
-          color: "{semanticTokens.action.primary}",
-          fontWeight: "{foundations.typography.weights.semibold}",
-          hoverBackground: "{semanticTokens.surface.hover}"
-        },
-        page: {
-          color: "{semanticTokens.text.muted}"
+        base: {
+          gap: "{foundations.spacing.3}",
+          link: {
+            default: {
+              color: "{foundations.colors.brand.500}",
+              fontWeight: "{foundations.typography.weight.600}"
+            },
+            hover: {
+              color: "{foundations.colors.brand.700}"
+            }
+          },
+          page: {
+            color: "{foundations.colors.neutral.650}",
+            fontWeight: "{foundations.typography.weight.550}"
+          },
+          separator: {
+            color: "{foundations.colors.neutral.400}",
+            size: "{foundations.typography.size.14}"
+          }
         },
-        separator: {
-          color: "{foundations.colors.neutral.400}"
+        sizes: {
+          medium: {
+            fontSize: "{foundations.typography.size.14}",
+            gap: "{foundations.spacing.3}"
+          },
+          small: {
+            fontSize: "{foundations.typography.size.12}",
+            gap: "{foundations.spacing.2}"
+          }
         }
       },
       loader: {
         sizes: {
-          sm: 16,
-          md: 24,
-          lg: 32
-        },
-        base: {
-          color: "{semanticTokens.text.muted}"
+          small: {
+            size: "{foundations.typography.size.16}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.16}",
+            descriptionFontSize: "{foundations.typography.size.12}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          medium: {
+            size: "{foundations.typography.size.20}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.18}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          large: {
+            size: "{foundations.typography.size.24}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.18}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          },
+          extraLarge: {
+            size: "{foundations.typography.size.32}",
+            labelFontWeight: "{foundations.typography.weight.550}",
+            descriptionFontWeight: "{foundations.typography.weight.400}",
+            labelFontSize: "{foundations.typography.size.18}",
+            descriptionFontSize: "{foundations.typography.size.14}",
+            labelColor: "{foundations.colors.neutral.850}",
+            descriptionColor: "{foundations.colors.neutral.650}"
+          }
         },
         variants: {
           default: {
-            color: "{semanticTokens.text.muted}"
+            color: "{foundations.colors.brand.500}"
           },
           primary: {
-            color: "{semanticTokens.action.primary}"
-          },
-          secondary: {
-            color: "{foundations.colors.brand.secondary}"
+            color: "{foundations.colors.brand.500}"
           }
         }
       },
       progress: {
+        base: {
+          // Título y Porcentaje (Arriba)
+          labelColor: "{semanticTokens.text.primary}",
+          labelFontSize: "{foundations.typography.size.14}",
+          labelFontWeight: "{foundations.typography.weight.550}",
+          // Semi Bold según Figma
+          // Descripción / Tiempo (Abajo)
+          descriptionColor: "{semanticTokens.text.muted}",
+          descriptionFontSize: "{foundations.typography.size.12}",
+          descriptionFontWeight: "{foundations.typography.weight.400}",
+          // Espaciado entre la barra y los textos
+          gap: '{foundations.spacing.["1.5"]}'
+        },
         track: {
-          height: "4px",
-          radius: "{foundations.radius.md}",
+          height: '{foundations.spacing.["1.5"]}',
+          // Grosor de la barra según Figma
+          radius: "{foundations.radius.full}",
           background: "{semanticTokens.surface.muted}"
+          // Color del Track (fondo)
         },
         indicator: {
           background: "{semanticTokens.action.primary}"
+          // Color del Filled Track (relleno)
         },
         motion: {
-          duration: "{foundations.motion.duration.fast}",
-          easing: "{foundations.motion.easing.out}"
+          duration: "{foundations.motion.duration.normal}",
+          easing: "{foundations.motion.easing.standard}"
         }
       },
       sidebar: {
-        container: {
-          background: "{semanticTokens.surface.default}",
-          border: "{semanticTokens.border.default}",
-          width: "240px",
-          collapsedWidth: "64px"
-        },
-        header: {
-          titleColor: "{semanticTokens.text.muted}"
-        },
-        item: {
-          color: "{semanticTokens.text.muted}",
-          hover: {
-            background: "{semanticTokens.surface.hover}",
-            color: "{semanticTokens.text.primary}"
+        base: {
+          container: {
+            background: "{semanticTokens.surface.default}",
+            border: "{semanticTokens.border.default}",
+            width: "{foundations.maxWidth.sidebar}",
+            collapsedWidth: "{foundations.spacing.16}",
+            padding: "{foundations.spacing.2}"
           },
-          active: {
-            background: "{foundations.colors.neutral.100}",
-            color: "{semanticTokens.action.primary}"
+          header: {
+            minHeight: "{foundations.spacing.14}",
+            titleColor: "{semanticTokens.text.muted}",
+            titleFontSize: "{foundations.typography.size.14}",
+            titleFontWeight: "{foundations.typography.weight.500}"
+          },
+          item: {
+            radius: "{foundations.radius.md}",
+            height: "{foundations.spacing.9}",
+            paddingX: "{foundations.spacing.2}",
+            gap: "{foundations.spacing.3}",
+            fontSize: "{foundations.typography.size.14}",
+            fontWeight: "{foundations.typography.weight.500}",
+            color: "{semanticTokens.text.muted}",
+            hover: {
+              background: "{semanticTokens.surface.hover}",
+              color: "{semanticTokens.text.primary}"
+            },
+            active: {
+              background: "{foundations.colors.brand.200}",
+              color: "{semanticTokens.action.primary}"
+            }
+          },
+          section: {
+            titleColor: "{foundations.colors.neutral.400}",
+            titleFontSize: "{foundations.typography.size.10}",
+            gap: "{foundations.spacing.4}"
+          },
+          toggle: {
+            color: "{foundations.colors.neutral.400}",
+            hoverColor: "{foundations.colors.neutral.500}"
+          },
+          motion: {
+            duration: "{foundations.motion.duration.normal}"
           }
-        },
-        toggle: {
-          color: "{foundations.colors.neutral.400}",
-          hoverColor: "{foundations.colors.neutral.500}"
-        },
-        motion: {
-          duration: "{foundations.motion.duration.normal}"
         }
       },
       navbar: {
         container: {
-          height: "64px",
-          background: "{semanticTokens.surface.default}",
-          border: "{semanticTokens.border.default}",
-          radius: "{foundations.radius.md}"
+          height: "{foundations.spacing.16}",
+          background: "{foundations.colors.neutral.0}",
+          border: "{foundations.colors.neutral.150}",
+          radius: "{foundations.radius.md}",
+          iconColor: "{foundations.colors.neutral.550}"
         },
         content: {
-          maxWidth: "1440px",
-          paddingX: "{foundations.spacing.lg}"
+          maxWidth: "{foundations.maxWidth.container}",
+          paddingX: "{foundations.spacing.6}"
         },
         merchant: {
-          color: "{semanticTokens.text.primary}",
-          chevronColor: "{semanticTokens.text.muted}"
+          color: "{foundations.colors.neutral.850}",
+          fontSize: "{foundations.typography.size.14}",
+          fontWeight: "{foundations.typography.weight.550}"
         },
         action: {
-          gap: "{foundations.spacing.sm}"
+          gap: "{foundations.spacing.3}"
         },
         user: {
-          nameColor: "{semanticTokens.text.primary}",
-          roleColor: "{semanticTokens.text.muted}"
+          nameColor: "{foundations.colors.neutral.850}",
+          roleColor: "{foundations.colors.neutral.650}",
+          roleFontSize: "{foundations.typography.size.12}",
+          nameFontSize: "{foundations.typography.size.12}",
+          nameFontWeight: "{foundations.typography.weight.550}",
+          roleFontWeight: "{foundations.typography.weight.400}"
         },
         motion: {
           duration: "{foundations.motion.duration.fast}"
         }
       },
       drawer: {
-        container: {
-          background: "{semanticTokens.surface.default}",
-          color: "{semanticTokens.text.primary}",
-          radius: "{foundations.radius.sm}",
-          borderWidth: "{foundations.borderWidths.sm}",
-          borderColor: "{semanticTokens.border.default}",
-          shadow: "{foundations.shadow.md}",
-          padding: "24px",
-          maxHeight: "80vh"
-        },
-        overlay: {
-          background: "{semanticTokens.overlay.background}",
-          opacity: "{semanticTokens.overlay.opacity}",
-          backdropBlur: "{semanticTokens.overlay.backdropBlur}"
-        },
-        title: {
-          fontSize: "{foundations.typography.sizes.xl}",
-          fontWeight: "{foundations.typography.weights.semibold}",
-          lineHeight: "{foundations.typography.lineHeights.relaxed}",
-          color: "{semanticTokens.text.primary}"
-        },
-        description: {
-          fontSize: "{foundations.typography.sizes.md}",
-          lineHeight: "{foundations.typography.lineHeights.normal}",
-          color: "{semanticTokens.text.secondary}"
-        },
-        close: {
-          size: "{foundations.spacing.lg}",
-          radius: "{foundations.radius.md}",
-          color: "{semanticTokens.text.secondary}",
-          hoverBackground: "{foundations.colors.neutral.100}",
-          focusRing: "{foundations.colors.neutral.200}"
+        base: {
+          overlay: {
+            background: "rgba(0,0,0,{foundations.opacity.overlay})",
+            opacity: "{foundations.opacity.disabled}",
+            backdropBlur: "{foundations.other.backdropBlur}"
+          },
+          content: {
+            background: "{foundations.colors.neutral.0}",
+            radius: "{foundations.radius.xs}",
+            borderColor: "{foundations.colors.neutral.150}",
+            color: "{semanticTokens.text.primary}",
+            borderWidth: "{foundations.border.width.1}",
+            shadow: "{foundations.shadow.drawer}",
+            padding: "{foundations.spacing.6}",
+            maxHeight: "{foundations.other.maxHeight}"
+          },
+          header: {
+            gap: "{foundations.spacing.2}"
+          },
+          footer: {
+            paddingTop: "{foundations.spacing.4}",
+            gap: "{foundations.spacing.2}",
+            align: "end"
+          },
+          title: {
+            color: "{foundations.colors.neutral.850}",
+            fontSize: "{foundations.typography.size.24}"
+          },
+          description: {
+            color: "{foundations.colors.neutral.650}",
+            fontSize: "{foundations.typography.size.16}"
+          },
+          close: {
+            size: "{foundations.typography.size.12}",
+            color: "{foundations.colors.neutral.850}"
+          }
         }
       },
       icon: {
         base: {
-          color: "{semanticTokens.text.muted}"
+          color: "{semanticTokens.action.primary}"
         },
         sizes: {
-          xs: 12,
-          sm: 16,
-          md: 20,
-          lg: 24,
-          xl: 32
+          xs: "{foundations.typography.size.12}",
+          sm: "{foundations.typography.size.16}",
+          md: "{foundations.typography.size.20}",
+          lg: "{foundations.typography.size.24}",
+          xl: "{foundations.typography.size.32}"
         },
         variants: {
           default: {
-            color: "{semanticTokens.text.muted}"
+            color: "{semanticTokens.action.primary}"
           },
           muted: {
             color: "{semanticTokens.text.muted}"
           },
           danger: {
-            color: "{foundations.colors.semantic.danger}"
+            color: "{foundations.colors.feedback.error.500}"
           },
           success: {
-            color: "{foundations.colors.semantic.success}"
-          },
-          primary: {
-            color: "{semanticTokens.action.primary}"
+            color: "{foundations.colors.feedback.success.500}"
           }
         }
       }
@@ -9049,44 +9989,6 @@ var themeDefault = {
   }
 };
 
-// src/theme/resolver/ApiThemeResolver.ts
-var CACHE = /* @__PURE__ */ new Map();
-var ApiThemeResolver = class {
-  async resolve(channelId) {
-    var _a2;
-    if (CACHE.has(channelId)) {
-      return CACHE.get(channelId);
-    }
-    try {
-      const res = await fetch(
-        `https://theme-central.free.beeceptor.com/themes/${channelId}`,
-        { cache: "force-cache" }
-      );
-      if (!res.ok) {
-        throw new Error(`Theme fetch failed: ${res.status}`);
-      }
-      const contentType = (_a2 = res.headers.get("content-type")) != null ? _a2 : "";
-      if (!contentType.includes("application/json")) {
-        console.warn(
-          "[ThemeResolver] non-json content-type, attempting parse anyway:",
-          contentType
-        );
-      }
-      const theme = await res.json();
-      CACHE.set(channelId, theme);
-      return theme;
-    } catch (err) {
-      console.warn("[ThemeResolver] fallback default", err);
-      return themeDefault;
-    }
-  }
-};
-
-// src/theme/server/fetchThemeFromApi.ts
-async function fetchThemeFromApi(channelId) {
-  return new ApiThemeResolver().resolve(channelId);
-}
-
 // src/theme/config.ts
 var _a;
 var THEME_CDN_BASE_URL = (_a = process.env.NEXT_PUBLIC_THEME_CDN) != null ? _a : "https://e3-ranty-sdk-js.naranjax.com/theme";
@@ -9134,13 +10036,12 @@ async function resolveTheme(channelId) {
   const cdnTheme = await fetchThemeFromCdn(channelId);
   console.log("CDN Theme:", cdnTheme);
   if (cdnTheme) return cdnTheme;
-  return fetchThemeFromApi(channelId);
 }
 
 // src/theme/server/setTheme.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var themeCache = /* @__PURE__ */ new Map();
-var EMPTY_THEME = {};
+var EMPTY_THEME = themeDefault;
 function setTheme({ channelId, theme, children }) {
   const [finalTheme, setFinalTheme] = (0, import_react2.useState)(theme);
   (0, import_react2.useEffect)(() => {
@@ -9166,7 +10067,7 @@ function setTheme({ channelId, theme, children }) {
     };
   }, [channelId, theme]);
   console.log("Rendering setTheme with channelId:", channelId, "and finalTheme:", finalTheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThemeContext.Provider, { value: finalTheme != null ? finalTheme : EMPTY_THEME, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ThemeContext.Provider, { value: finalTheme != null ? finalTheme : EMPTY_THEME.tokens, children });
 }
 
 // src/theme/client/ThemeProvider.tsx