npm - @xsolla/xui-core - Versions diffs - 0.100.0 → 0.101.0-pr167.1772008285 - Mend

@xsolla/xui-core 0.100.0 → 0.101.0-pr167.1772008285

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/index.js CHANGED Viewed

@@ -53,32 +53,32 @@ var import_react = __toESM(require("react"));
 // src/tokens/xsolla-dark.json
 var xsolla_dark_default = {
   background: {
-    primary: "#202a2c",
-    secondary: "#151c1e",
+    primary: "#1b2628",
+    secondary: "#141d1f",
     inverse: "#ffffff",
     brand: {
-      primary: "#66e6ff",
-      secondary: "#00aacc"
+      primary: "#80eaff",
+      secondary: "#0b3841"
     },
     brandExtra: {
-      primary: "#d9ff66",
-      secondary: "#bfff00"
+      primary: "#cef655",
+      secondary: "#566c13"
     },
     success: {
-      primary: "#80ffb5",
-      secondary: "#33ff88"
+      primary: "#95ff80",
+      secondary: "#14410b"
     },
     warning: {
-      primary: "#ffee99",
-      secondary: "#ffdd33"
+      primary: "#ffc380",
+      secondary: "#6c4313"
     },
     alert: {
-      primary: "#ff8066",
-      secondary: "#ff5533"
+      primary: "#e84f30",
+      secondary: "#6c2213"
     },
     neutral: {
-      primary: "#aa99ff",
-      secondary: "#5533ff"
+      primary: "#99aeb2",
+      secondary: "#34474b"
     }
   },
   content: {
@@ -87,28 +87,28 @@ var xsolla_dark_default = {
     tertiary: "rgba(255, 255, 255, 0.58)",
     inverse: "#000000",
     brand: {
-      primary: "#66e6ff",
-      secondary: "#00d4ff"
+      primary: "#55dcf6",
+      secondary: "#31cae8"
     },
     brandExtra: {
-      primary: "#d9ff66",
-      secondary: "#bfff00"
+      primary: "#cef655",
+      secondary: "#9bc323"
     },
     success: {
-      primary: "#66ffa6",
-      secondary: "#00ff6a"
+      primary: "#70f655",
+      secondary: "#3dc322"
     },
     warning: {
-      primary: "#ffe566",
-      secondary: "#ffd400"
+      primary: "#f6ab55",
+      secondary: "#c37822"
     },
     alert: {
-      primary: "#ff8066",
-      secondary: "#ff2b00"
+      primary: "#f67055",
+      secondary: "#e84f30"
     },
     neutral: {
-      primary: "#aa99ff",
-      secondary: "#8066ff"
+      primary: "#99aeb2",
+      secondary: "#607f85"
     },
     on: {
       brand: "#000000",
@@ -127,330 +127,1178 @@ var xsolla_dark_default = {
     primary: "#ffffff",
     secondary: "rgba(255, 255, 255, 0.16)",
     inverse: "rgba(0, 0, 0, 0.15)",
-    brand: "#66e6ff",
-    brandExtra: "#d9ff66",
-    success: "#66ffa6",
-    warning: "#ffe566",
-    alert: "#ff8066",
-    neutral: "#aa99ff"
+    brand: "#55dcf6",
+    brandExtra: "#cef655",
+    success: "#70f655",
+    warning: "#f6ab55",
+    alert: "#f67055",
+    neutral: "#9580ff"
   },
   overlay: {
     mono: "rgba(255, 255, 255, 0.1)",
-    brand: "rgba(102, 230, 255, 0.3)",
-    brandExtra: "rgba(217, 255, 102, 0.3)",
-    success: "rgba(0, 255, 106, 0.3)",
-    warning: "rgba(255, 221, 51, 0.3)",
-    alert: "rgba(255, 85, 51, 0.3)",
-    neutral: "rgba(128, 102, 255, 0.3)"
+    brand: "rgba(128, 234, 255, 0.2)",
+    brandExtra: "rgba(206, 246, 85, 0.3)",
+    success: "rgba(149, 255, 128, 0.2)",
+    warning: "rgba(255, 195, 128, 0.24)",
+    alert: "rgba(232, 79, 48, 0.32)",
+    neutral: "rgba(123, 152, 157, 0.28)"
   },
   layer: {
     scrim: "rgba(0, 0, 0, 0.5)",
-    float: "#202a2c"
+    float: "#1b2628"
   },
   control: {
     brand: {
       primary: {
-        bg: "#66e6ff",
-        bgHover: "#99eeff",
-        bgPress: "#33ddff",
-        bgDisable: "#557177",
+        bg: "#55dcf6",
+        bgHover: "#80eaff",
+        bgPress: "#31cae8",
+        bgDisable: "#666666",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "#a6bbbf"
-        }
+        borderDisable: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(102, 230, 255, 0.4)",
-        bgHover: "rgba(153, 238, 255, 0.4)",
-        bgPress: "rgba(51, 221, 255, 0.4)",
-        bgDisable: "rgba(102, 230, 255, 0.2)",
+        bg: "rgba(128, 234, 255, 0.4)",
+        bgHover: "rgba(178, 242, 255, 0.4)",
+        bgPress: "rgba(85, 220, 246, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
         bg: "rgba(255, 255, 255, 0)",
-        bgHover: "rgba(102, 230, 255, 0.12)",
-        bgPress: "rgba(102, 230, 255, 0.08)",
-        bgDisable: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(178, 242, 255, 0.07)",
+        bgPress: "rgba(85, 220, 246, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#66e6ff",
-          secondary: "#ffffff",
-          disable: "rgba(102, 230, 255, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#55dcf6",
+        disable: "#b3b3b3"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#ffffff",
+        bgHover: "#e8eced",
+        bgPress: "#f4f5f6",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(255, 255, 255, 0.4)",
+        bgHover: "rgba(255, 255, 255, 0.34)",
+        bgPress: "rgba(255, 255, 255, 0.44)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(255, 255, 255, 0.07)",
+        bgPress: "rgba(255, 255, 255, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#ffffff"
       }
     },
     brandExtra: {
       primary: {
-        bg: "#d9ff66",
-        bgHover: "#ccff33",
-        bgPress: "#e6ff99",
-        bgDisable: "#6b7755",
+        bg: "#cef655",
+        bgHover: "#bae831",
+        bgPress: "#dfff80",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "#a6b5a0"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(217, 255, 102, 0.4)",
-        bgHover: "rgba(204, 255, 51, 0.4)",
-        bgPress: "rgba(230, 255, 153, 0.4)",
-        bgDisable: "rgba(217, 255, 102, 0.2)",
+        bg: "rgba(186, 232, 49, 0.4)",
+        bgHover: "rgba(206, 246, 85, 0.4)",
+        bgPress: "rgba(186, 232, 49, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(186, 232, 49, 0)",
+        bgHover: "rgba(206, 246, 85, 0.07)",
+        bgPress: "rgba(186, 232, 49, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#cef655"
+      }
+    },
+    alert: {
+      bg: "#6c2213",
+      border: "#f67055",
+      primary: {
+        bg: "#f67055",
+        bgHover: "#ff9580",
+        bgPress: "#e84f30",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(232, 79, 48, 0.4)",
+        bgHover: "rgba(246, 112, 85, 0.4)",
+        bgPress: "rgba(195, 61, 34, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 43, 0, 0)",
+        bgHover: "rgba(255, 170, 153, 0.07)",
+        bgPress: "rgba(255, 85, 51, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#ffffff",
+        tertiary: "#f67055"
+      }
+    },
+    input: {
+      bg: "rgba(255, 255, 255, 0.12)",
+      bgHover: "rgba(255, 255, 255, 0.15)",
+      bgDisable: "rgba(255, 255, 255, 0.25)",
+      border: "rgba(255, 255, 255, 0.1)",
+      borderHover: "rgba(255, 255, 255, 0.15)",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#ffffff",
+      placeholder: "rgba(255, 255, 255, 0.56)",
+      textDisable: "rgba(255, 255, 255, 0.36)"
+    },
+    focus: {
+      bg: "#1b2628",
+      border: "#55dcf6"
+    },
+    check: {
+      bg: "#ffffff",
+      bgHover: "#e8eced",
+      bgDisable: "rgba(255, 255, 255, 0.2)",
+      border: "rgba(255, 255, 255, 0)",
+      borderHover: "rgba(255, 255, 255, 0)",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#000000"
+    },
+    faint: {
+      bg: "rgba(255, 255, 255, 0.15)",
+      bgHover: "rgba(255, 255, 255, 0.2)",
+      border: "rgba(255, 255, 255, 0)",
+      borderHover: "rgba(255, 255, 255, 0.16)"
+    },
+    switch: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      bgHover: "rgba(255, 255, 255, 0.15)"
+    },
+    text: {
+      primary: "#ffffff",
+      disable: "rgba(255, 255, 255, 0.4)"
+    },
+    link: {
+      primary: "#55dcf6",
+      primaryHover: "#80eaff",
+      secondary: "#cef655",
+      secondaryHover: "#dfff80"
+    },
+    segmented: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      bgHover: "rgba(255, 255, 255, 0.1)",
+      bgActive: "rgba(255, 255, 255, 0.1)",
+      border: "rgba(255, 255, 255, 0.1)",
+      borderHover: "rgba(255, 255, 255, 0.1)",
+      borderActive: "rgba(255, 255, 255, 0.1)",
+      text: "#ffffff",
+      textDisable: "#ffffff"
+    },
+    toggleButton: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      bgHover: "rgba(255, 255, 255, 0.15)",
+      bgPress: "#000000",
+      bgDisable: "rgba(255, 255, 255, 0.06)",
+      border: "rgba(255, 255, 255, 0.16)",
+      borderHover: "rgba(255, 255, 255, 0.16)",
+      borderPress: "rgba(255, 255, 255, 0)",
+      borderDisable: "rgba(255, 255, 255, 0.16)",
+      text: "#e8eced",
+      textDisable: "rgba(255, 255, 255, 0.4)"
+    }
+  }
+};
+// src/tokens/xsolla-light.json
+var xsolla_light_default = {
+  background: {
+    primary: "#ffffff",
+    secondary: "#f3f3f2",
+    inverse: "#000000",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#b2f2ff"
+    },
+    brandExtra: {
+      primary: "#cef655",
+      secondary: "#dfff80"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#bfffb2"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#ffdbb2"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#ffbfb2"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#d7dee0"
+    }
+  },
+  content: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.75)",
+    tertiary: "rgba(0, 0, 0, 0.6)",
+    inverse: "#ffffff",
+    brand: {
+      primary: "#22a8c3",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#79971b",
+      secondary: "#9bc323"
+    },
+    success: {
+      primary: "#30981b",
+      secondary: "#3dc322"
+    },
+    warning: {
+      primary: "#c37822",
+      secondary: "#f6ab55"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#f67055"
+    },
+    neutral: {
+      primary: "#34474b",
+      secondary: "#607f85"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#000000",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#ffffff"
+    },
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    }
+  },
+  border: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.1)",
+    inverse: "rgba(255, 255, 255, 0.15)",
+    brand: "#31cae8",
+    brandExtra: "#bae831",
+    success: "#30981b",
+    warning: "#e89331",
+    alert: "#e84f30",
+    neutral: "#3d22c3"
+  },
+  overlay: {
+    mono: "rgba(0, 0, 0, 0.05)",
+    brand: "rgba(128, 234, 255, 0.3)",
+    brandExtra: "rgba(206, 246, 85, 0.3)",
+    success: "rgba(149, 255, 128, 0.24)",
+    warning: "rgba(255, 195, 128, 0.28)",
+    alert: "rgba(232, 79, 48, 0.24)",
+    neutral: "rgba(96, 127, 133, 0.24)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.75)",
+    float: "#ffffff"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#55dcf6",
+        bgHover: "#80eaff",
+        bgPress: "#31cae8",
+        bgDisable: "#cccccc",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderDisable: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(128, 234, 255, 0.4)",
+        bgHover: "rgba(178, 242, 255, 0.4)",
+        bgPress: "rgba(85, 220, 246, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
         bg: "rgba(255, 255, 255, 0)",
-        bgHover: "rgba(217, 255, 102, 0.12)",
-        bgPress: "rgba(217, 255, 102, 0.08)",
-        bgDisable: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(178, 242, 255, 0.07)",
+        bgPress: "rgba(85, 220, 246, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#1b8398",
+        disable: "#999999"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#000000",
+        bgHover: "#141d1f",
+        bgPress: "#1b2628",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(0, 0, 0, 0.12)",
+        bgHover: "rgba(21, 28, 30, 0.12)",
+        bgPress: "rgba(32, 42, 44, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(21, 28, 30, 0.07)",
+        bgPress: "rgba(32, 42, 44, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#bae831",
+        bgHover: "#cef655",
+        bgPress: "#9bc323",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(186, 232, 49, 0.4)",
+        bgHover: "rgba(206, 246, 85, 0.4)",
+        bgPress: "rgba(186, 232, 49, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(186, 232, 49, 0)",
+        bgHover: "rgba(206, 246, 85, 0.07)",
+        bgPress: "rgba(186, 232, 49, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#79971b"
+      }
+    },
+    alert: {
+      bg: "#ffbfb2",
+      border: "#e84f30",
+      primary: {
+        bg: "#e84f30",
+        bgHover: "#f67055",
+        bgPress: "#c33d22",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(232, 79, 48, 0.4)",
+        bgHover: "rgba(246, 112, 85, 0.4)",
+        bgPress: "rgba(195, 61, 34, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 43, 0, 0)",
+        bgHover: "rgba(255, 85, 51, 0.07)",
+        bgPress: "rgba(204, 34, 0, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#c33d22"
+      }
+    },
+    input: {
+      bg: "rgba(0, 0, 0, 0.1)",
+      bgHover: "rgba(0, 0, 0, 0.15)",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      placeholder: "rgba(0, 0, 0, 0.6)",
+      textDisable: "rgba(0, 0, 0, 0.36)"
+    },
+    focus: {
+      bg: "#ffffff",
+      border: "#31cae8"
+    },
+    check: {
+      bg: "#000000",
+      bgHover: "#233134",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(255, 255, 255, 0)",
+      borderHover: "rgba(255, 255, 255, 0)",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#ffffff"
+    },
+    faint: {
+      bg: "rgba(0, 0, 0, 0.15)",
+      bgHover: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0.1)"
+    },
+    switch: {
+      bg: "rgba(0, 0, 0, 0.1)",
+      bgHover: "rgba(0, 0, 0, 0.15)"
+    },
+    text: {
+      primary: "#000000",
+      disable: "rgba(0, 0, 0, 0.4)"
+    },
+    link: {
+      primary: "#22a8c3",
+      primaryHover: "#31cae8",
+      secondary: "#9bc323",
+      secondaryHover: "#bae831"
+    },
+    segmented: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "#ffffff",
+      bgActive: "#ffffff",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.1)",
+      borderActive: "#ffffff",
+      text: "#000000",
+      textDisable: "#000000"
+    },
+    toggleButton: {
+      bg: "#ffffff",
+      bgHover: "rgba(0, 0, 0, 0.06)",
+      bgPress: "rgba(0, 0, 0, 0.1)",
+      bgDisable: "rgba(0, 0, 0, 0.15)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.1)",
+      borderPress: "rgba(0, 0, 0, 0.1)",
+      borderDisable: "rgba(0, 0, 0, 0.1)",
+      text: "#000000",
+      textDisable: "rgba(255, 255, 255, 0.4)"
+    }
+  }
+};
+// src/tokens/pentagram-dark.json
+var pentagram_dark_default = {
+  background: {
+    primary: "#1b2628",
+    secondary: "#141d1f",
+    inverse: "#ffffff",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#0b3841"
+    },
+    brandExtra: {
+      primary: "#cef655",
+      secondary: "#566c13"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#14410b"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#6c4313"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#6c2213"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#34474b"
+    }
+  },
+  content: {
+    primary: "#e8eced",
+    secondary: "rgba(232, 236, 237, 0.72)",
+    tertiary: "rgba(232, 236, 237, 0.58)",
+    inverse: "#000000",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#55dcf6"
+    },
+    brandExtra: {
+      primary: "#cef655",
+      secondary: "#9bc323"
+    },
+    success: {
+      primary: "#70f655",
+      secondary: "#3dc322"
+    },
+    warning: {
+      primary: "#f6ab55",
+      secondary: "#c37822"
+    },
+    alert: {
+      primary: "#f67055",
+      secondary: "#e84f30"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#4b6368"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#000000",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#ffffff"
+    },
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    }
+  },
+  border: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.16)",
+    inverse: "rgba(0, 0, 0, 0.15)",
+    brand: "#55dcf6",
+    brandExtra: "#cef655",
+    success: "#70f655",
+    warning: "#f6ab55",
+    alert: "#f67055",
+    neutral: "#9580ff"
+  },
+  overlay: {
+    mono: "rgba(255, 255, 255, 0.1)",
+    brand: "rgba(128, 234, 255, 0.2)",
+    brandExtra: "rgba(206, 246, 85, 0.3)",
+    success: "rgba(149, 255, 128, 0.2)",
+    warning: "rgba(255, 195, 128, 0.24)",
+    alert: "rgba(232, 79, 48, 0.32)",
+    neutral: "rgba(123, 152, 157, 0.28)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.5)",
+    float: "#000000"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#80eaff",
+        bgHover: "#b2f2ff",
+        bgPress: "#55dcf6",
+        bgDisable: "rgba(52, 71, 75, 0.85)",
+        border: "#31cae8",
+        borderHover: "#55dcf6",
         borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#d9ff66",
-          secondary: "#ffffff",
-          disable: "rgba(217, 255, 102, 0.4)"
-        }
+        borderDisable: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "#135d6c",
+        bgHover: "#1b8398",
+        bgPress: "#0b3841",
+        border: "#22a8c3",
+        borderHover: "#22a8c3",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "#34474b",
+        bgHover: "#4b6368",
+        bgPress: "#607f85",
+        border: "#4b6368",
+        borderHover: "#607f85",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#80eaff",
+        tertiary: "#b7c5c8",
+        disable: "rgba(232, 236, 237, 0.2)"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#ffffff",
+        bgHover: "#e8eced",
+        bgPress: "#f4f5f6",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(255, 255, 255, 0.4)",
+        bgHover: "rgba(255, 255, 255, 0.34)",
+        bgPress: "rgba(255, 255, 255, 0.44)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 255, 255, 0)",
+        bgHover: "rgba(255, 255, 255, 0.07)",
+        bgPress: "rgba(255, 255, 255, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#ffffff"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#cef655",
+        bgHover: "#bae831",
+        bgPress: "#dfff80",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(186, 232, 49, 0.4)",
+        bgHover: "rgba(206, 246, 85, 0.4)",
+        bgPress: "rgba(186, 232, 49, 0.4)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(186, 232, 49, 0)",
+        bgHover: "rgba(206, 246, 85, 0.07)",
+        bgPress: "rgba(186, 232, 49, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#cef655"
       }
     },
     alert: {
+      bg: "#6c2213",
+      border: "#f67055",
       primary: {
-        bg: "#ff8066",
-        bgHover: "#ffaa99",
-        bgPress: "#ff5533",
-        bgDisable: "#775555",
+        bg: "#f67055",
+        bgHover: "#ff9580",
+        bgPress: "#e84f30",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(232, 79, 48, 0.4)",
+        bgHover: "rgba(246, 112, 85, 0.4)",
+        bgPress: "rgba(195, 61, 34, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(255, 43, 0, 0)",
+        bgHover: "rgba(255, 170, 153, 0.07)",
+        bgPress: "rgba(255, 85, 51, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#ffffff",
+        tertiary: "#f67055"
+      }
+    },
+    input: {
+      bg: "#34474b",
+      bgHover: "#4b6368",
+      bgDisable: "#34474b",
+      border: "#4b6368",
+      borderHover: "#607f85",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#e8eced",
+      placeholder: "#7b989d",
+      textDisable: "rgba(215, 222, 224, 0.2)"
+    },
+    focus: {
+      bg: "#000000",
+      border: "#55dcf6"
+    },
+    check: {
+      bg: "#135d6c",
+      bgHover: "#1b8398",
+      bgDisable: "rgba(255, 255, 255, 0.25)",
+      border: "#22a8c3",
+      borderHover: "#22a8c3",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#80eaff"
+    },
+    faint: {
+      bg: "rgba(255, 255, 255, 0.15)",
+      bgHover: "rgba(255, 255, 255, 0.2)",
+      border: "rgba(255, 255, 255, 0.1)",
+      borderHover: "rgba(255, 255, 255, 0.15)"
+    },
+    switch: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      bgHover: "rgba(255, 255, 255, 0.15)"
+    },
+    text: {
+      primary: "#ffffff",
+      disable: "rgba(255, 255, 255, 0.4)"
+    },
+    link: {
+      primary: "#55dcf6",
+      primaryHover: "#80eaff",
+      secondary: "#cef655",
+      secondaryHover: "#dfff80"
+    },
+    segmented: {
+      bg: "rgba(0, 0, 0, 0.3)",
+      bgHover: "rgba(255, 255, 255, 0.1)",
+      bgActive: "rgba(255, 255, 255, 0.15)",
+      border: "rgba(255, 255, 255, 0.1)",
+      borderHover: "rgba(255, 255, 255, 0.1)",
+      borderActive: "rgba(255, 255, 255, 0)",
+      text: "#ffffff",
+      textDisable: "rgba(255, 255, 255, 0.4)"
+    },
+    toggleButton: {
+      bg: "#34474b",
+      bgHover: "#4b6368",
+      bgPress: "#2d4448",
+      bgDisable: "#34474b",
+      border: "#4b6368",
+      borderHover: "#607f85",
+      borderPress: "#b2f2ff",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#e8eced",
+      textDisable: "rgba(255, 255, 255, 0.4)"
+    }
+  }
+};
+// src/tokens/pentagram-light.json
+var pentagram_light_default = {
+  background: {
+    primary: "#ffffff",
+    secondary: "#f3f3f2",
+    inverse: "#000000",
+    brand: {
+      primary: "#80eaff",
+      secondary: "#b2f2ff"
+    },
+    brandExtra: {
+      primary: "#cef655",
+      secondary: "#dfff80"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#bfffb2"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#ffdbb2"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#ffbfb2"
+    },
+    neutral: {
+      primary: "#99aeb2",
+      secondary: "#d7dee0"
+    }
+  },
+  content: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.75)",
+    tertiary: "rgba(0, 0, 0, 0.6)",
+    inverse: "#ffffff",
+    brand: {
+      primary: "#22a8c3",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#79971b",
+      secondary: "#9bc323"
+    },
+    success: {
+      primary: "#30981b",
+      secondary: "#3dc322"
+    },
+    warning: {
+      primary: "#c37822",
+      secondary: "#f6ab55"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#f67055"
+    },
+    neutral: {
+      primary: "#34474b",
+      secondary: "#607f85"
+    },
+    on: {
+      brand: "#000000",
+      brandExtra: "#000000",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#ffffff"
+    },
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    }
+  },
+  border: {
+    primary: "#000000",
+    secondary: "rgba(0, 0, 0, 0.1)",
+    inverse: "rgba(255, 255, 255, 0.15)",
+    brand: "#31cae8",
+    brandExtra: "#bae831",
+    success: "#30981b",
+    warning: "#e89331",
+    alert: "#e84f30",
+    neutral: "#3d22c3"
+  },
+  overlay: {
+    mono: "rgba(0, 0, 0, 0.05)",
+    brand: "rgba(128, 234, 255, 0.3)",
+    brandExtra: "rgba(206, 246, 85, 0.3)",
+    success: "rgba(149, 255, 128, 0.24)",
+    warning: "rgba(255, 195, 128, 0.28)",
+    alert: "rgba(232, 79, 48, 0.24)",
+    neutral: "rgba(96, 127, 133, 0.24)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.75)",
+    float: "#ffffff"
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#80eaff",
+        bgHover: "#b2f2ff",
+        bgPress: "#55dcf6",
+        bgDisable: "#cccccc",
+        border: "#31cae8",
+        borderHover: "#55dcf6",
         borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ffffff",
-          secondary: "#ffffff",
-          disable: "#bfa6a6"
-        }
+        borderDisable: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(255, 128, 102, 0.4)",
-        bgHover: "rgba(255, 170, 153, 0.4)",
-        bgPress: "rgba(255, 85, 51, 0.4)",
-        bgDisable: "rgba(255, 128, 102, 0.2)",
+        bg: "#ccf6ff",
+        bgHover: "#e5fbff",
+        bgPress: "#b2f2ff",
+        border: "#80eaff",
+        borderHover: "#b2f2ff",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "#dadbd7",
+        bgHover: "#c1c2bc",
+        bgPress: "#a8aaa2",
+        border: "#c1c2bc",
+        borderHover: "#a8aaa2",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#000000",
+        disable: "#999999"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#000000",
+        bgHover: "#141d1f",
+        bgPress: "#1b2628",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(0, 0, 0, 0.12)",
+        bgHover: "rgba(21, 28, 30, 0.12)",
+        bgPress: "rgba(32, 42, 44, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      tertiary: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(21, 28, 30, 0.07)",
+        bgPress: "rgba(32, 42, 44, 0.12)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#bae831",
+        bgHover: "#cef655",
+        bgPress: "#9bc323",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      secondary: {
+        bg: "rgba(186, 232, 49, 0.4)",
+        bgHover: "rgba(206, 246, 85, 0.4)",
+        bgPress: "rgba(186, 232, 49, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ffffff",
-          secondary: "#ffffff",
-          disable: "rgba(255, 255, 255, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(255, 255, 255, 0)",
-        bgHover: "rgba(255, 128, 102, 0.12)",
-        bgPress: "rgba(255, 128, 102, 0.08)",
-        bgDisable: "rgba(255, 255, 255, 0)",
+        bg: "rgba(186, 232, 49, 0)",
+        bgHover: "rgba(206, 246, 85, 0.07)",
+        bgPress: "rgba(186, 232, 49, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ff8066",
-          secondary: "#ffffff",
-          disable: "rgba(255, 128, 102, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#79971b"
       }
     },
-    mono: {
+    alert: {
+      bg: "#ffbfb2",
+      border: "#e84f30",
       primary: {
-        bg: "#ffffff",
-        bgHover: "#f0f4f4",
-        bgPress: "#f6f8f9",
-        bgDisable: "#707777",
+        bg: "#e84f30",
+        bgHover: "#f67055",
+        bgPress: "#c33d22",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "#a6b5b5"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(255, 255, 255, 0.4)",
-        bgHover: "rgba(255, 255, 255, 0.34)",
-        bgPress: "rgba(255, 255, 255, 0.44)",
-        bgDisable: "rgba(255, 255, 255, 0.2)",
+        bg: "rgba(232, 79, 48, 0.4)",
+        bgHover: "rgba(246, 112, 85, 0.4)",
+        bgPress: "rgba(195, 61, 34, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#ffffff",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(255, 255, 255, 0)",
-        bgHover: "rgba(255, 255, 255, 0.12)",
-        bgPress: "rgba(255, 255, 255, 0.08)",
-        bgDisable: "rgba(255, 255, 255, 0)",
+        bg: "rgba(255, 43, 0, 0)",
+        bgHover: "rgba(255, 85, 51, 0.07)",
+        bgPress: "rgba(204, 34, 0, 0.12)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ffffff",
-          secondary: "#ffffff",
-          disable: "rgba(255, 255, 255, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#c33d22"
       }
     },
     input: {
-      bg: "rgba(255, 255, 255, 0.12)",
-      bgHover: "rgba(255, 255, 255, 0.15)",
-      bgDisable: "rgba(255, 255, 255, 0.25)",
-      border: "rgba(255, 255, 255, 0)",
-      borderHover: "rgba(255, 255, 255, 0.1)",
-      borderDisable: "rgba(255, 255, 255, 0)",
-      text: "#ffffff",
-      textDisable: "rgba(255, 255, 255, 0.36)",
-      placeholder: "rgba(255, 255, 255, 0.55)"
+      bg: "#dadbd7",
+      bgHover: "#c1c2bc",
+      bgDisable: "#dadbd7",
+      border: "#c1c2bc",
+      borderHover: "#a8aaa2",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#050505",
+      placeholder: "#8e9187",
+      textDisable: "rgba(5, 5, 5, 0.2)"
     },
     focus: {
-      bg: "rgba(255, 255, 255, 1)"
+      bg: "#ffffff",
+      border: "#31cae8"
     },
     check: {
-      bg: "#ffffff",
-      bgHover: "#f0f4f4",
-      bgDisable: "rgba(255, 255, 255, 0.2)"
+      bg: "#ccf6ff",
+      bgHover: "#e5fbff",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "#80eaff",
+      borderHover: "#b2f2ff",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#000000"
     },
     faint: {
-      bg: "rgba(255, 255, 255, 0.15)",
-      bgHover: "rgba(255, 255, 255, 0.2)",
-      border: "rgba(255, 255, 255, 0)",
-      borderHover: "rgba(255, 255, 255, 0.16)"
+      bg: "rgba(0, 0, 0, 0.15)",
+      bgHover: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.15)"
     },
     switch: {
-      bg: "rgba(255, 255, 255, 0.1)",
-      bgHover: "rgba(255, 255, 255, 0.15)"
-    },
-    segmented: {
-      bg: "rgba(255, 255, 255, 0.08)",
-      bgHover: "rgba(255, 255, 255, 0.10)",
-      bgActive: "#ffffff",
-      textActive: "#1a1a1a"
+      bg: "rgba(0, 0, 0, 0.1)",
+      bgHover: "rgba(0, 0, 0, 0.15)"
     },
     text: {
-      primary: "#ffffff",
-      secondary: "#ffffff",
-      faint: "#000000",
-      disable: "rgba(255, 255, 255, 0.4)"
+      primary: "#000000",
+      disable: "rgba(0, 0, 0, 0.4)"
     },
     link: {
-      primary: "#66e6ff",
-      primaryHover: "rgba(102, 230, 255, 0.7)",
-      secondary: "#d9ff66",
-      secondaryHover: "rgba(217, 255, 102, 0.7)"
+      primary: "#22a8c3",
+      primaryHover: "#31cae8",
+      secondary: "#9bc323",
+      secondaryHover: "#bae831"
+    },
+    segmented: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.08)",
+      bgActive: "#ffffff",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.1)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.4)"
+    },
+    toggleButton: {
+      bg: "#dadbd7",
+      bgHover: "#c1c2bc",
+      bgPress: "#d2e4e2",
+      bgDisable: "#dadbd7",
+      border: "#c1c2bc",
+      borderHover: "#a8aaa2",
+      borderPress: "#b2f2ff",
+      borderDisable: "rgba(0, 0, 0, 0.1)",
+      text: "#000000",
+      textDisable: "rgba(255, 255, 255, 0.4)"
     }
   }
 };
-// src/tokens/xsolla-light.json
-var xsolla_light_default = {
+// src/tokens/ltg-dark.json
+var ltg_dark_default = {
   background: {
-    primary: "#ffffff",
-    secondary: "#f3f3f1",
+    primary: "#0d143a",
+    secondary: "#161d45",
     inverse: "#000000",
     brand: {
-      primary: "#66e6ff",
-      secondary: "#99eeff"
+      primary: "#454f88",
+      secondary: "#2b335e"
     },
     brandExtra: {
-      primary: "#d9ff66",
-      secondary: "#e6ff99"
+      primary: "#292f52",
+      secondary: "#2d3358"
     },
     success: {
-      primary: "#33ff88",
-      secondary: "#ccffe1"
+      primary: "#14b87e",
+      secondary: "#75f0b9"
     },
     warning: {
-      primary: "#ffdd33",
-      secondary: "#fff7cc"
+      primary: "#ffee99",
+      secondary: "#ffdd33"
     },
     alert: {
-      primary: "#ff5533",
-      secondary: "#ffd5cc"
+      primary: "#e80000",
+      secondary: "#f53d3d"
     },
     neutral: {
-      primary: "#5533ff",
-      secondary: "#eae5ff"
+      primary: "#7f8bc9",
+      secondary: "#b0baee"
     }
   },
   content: {
-    primary: "#000000",
-    secondary: "rgba(0, 0, 0, 0.75)",
-    tertiary: "rgba(0, 0, 0, 0.6)",
-    inverse: "#ffffff",
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.76)",
+    tertiary: "rgba(255, 255, 255, 0.5)",
+    inverse: "#000000",
     brand: {
-      primary: "#00aacc",
-      secondary: "#00d4ff"
+      primary: "#ffffff",
+      secondary: "rgba(255, 255, 255, 0.76)"
     },
     brandExtra: {
-      primary: "#739900",
-      secondary: "#99cc00"
+      primary: "#8576fd",
+      secondary: "#aea0ff"
     },
     success: {
-      primary: "#009940",
-      secondary: "#00cc55"
+      primary: "#66ffa6",
+      secondary: "#00ff6a"
     },
     warning: {
-      primary: "#ccaa00",
-      secondary: "#ffdd33"
+      primary: "#ffe566",
+      secondary: "#ffd400"
     },
     alert: {
-      primary: "#cc2200",
-      secondary: "#ff5533"
+      primary: "#e80000",
+      secondary: "#f53d3d"
     },
     neutral: {
-      primary: "#2200cc",
-      secondary: "#2b00ff"
+      primary: "#aa99ff",
+      secondary: "#8066ff"
     },
     on: {
-      brand: "#000000",
-      brandExtra: "#000000",
-      success: "#000000",
-      warning: "#000000",
+      brand: "#ffffff",
+      brandExtra: "#ffffff",
+      success: "#ffffff",
+      warning: "#ffffff",
       alert: "#ffffff",
       neutral: "#ffffff"
     },
@@ -460,272 +1308,243 @@ var xsolla_light_default = {
     }
   },
   border: {
-    primary: "#000000",
-    secondary: "rgba(0, 0, 0, 0.1)",
-    inverse: "rgba(255, 255, 255, 0.15)",
-    brand: "#00d4ff",
-    brandExtra: "#bfff00",
-    success: "#009940",
-    warning: "#ffd400",
-    alert: "#ff2b00",
-    neutral: "#2200cc"
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.24)",
+    inverse: "rgba(0, 0, 0, 0.15)",
+    brand: "#ffffff",
+    brandExtra: "#8576fd",
+    success: "#14b87e",
+    warning: "#ffe566",
+    alert: "#f53d3d",
+    neutral: "#7f8bc9"
   },
   overlay: {
-    mono: "rgba(0, 0, 0, 0.05)",
-    brand: "rgba(102, 230, 255, 0.3)",
-    brandExtra: "rgba(194, 255, 102, 0.3)",
-    success: "rgba(0, 153, 92, 0.3)",
-    warning: "rgba(255, 178, 0, 0.3)",
-    alert: "rgba(255, 17, 0, 0.3)",
-    neutral: "rgba(0, 7, 204, 0.3)"
+    mono: "rgba(255, 255, 255, 0.1)",
+    brand: "rgba(255, 255, 255, 0.3)",
+    brandExtra: "rgba(133, 118, 253, 0.3)",
+    success: "rgba(20, 184, 126, 0.3)",
+    warning: "rgba(255, 229, 102, 0.3)",
+    alert: "rgba(245, 61, 61, 0.3)",
+    neutral: "rgba(127, 139, 201, 0.3)"
   },
   layer: {
-    scrim: "rgba(0, 0, 0, 0.75)",
-    float: "#ffffff"
+    scrim: "rgba(0, 0, 0, 0.5)",
+    float: "#161d45"
   },
   control: {
     brand: {
       primary: {
-        bg: "#33ddff",
-        bgHover: "#66e6ff",
-        bgPress: "#00d4ff",
-        bgDisable: "#c4d1d4",
+        bg: "#ffca43",
+        bgHover: "#f2c173",
+        bgPress: "#ffbb33",
+        bgDisable: "#484848",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
         borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "#89a4a9"
-        }
+        borderDisable: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(51, 221, 255, 0.4)",
-        bgHover: "rgba(51, 221, 255, 0.2)",
-        bgPress: "rgba(51, 221, 255, 0.5)",
-        bgDisable: "rgba(51, 221, 255, 0.2)",
+        bg: "#ffffff",
+        bgHover: "rgba(255, 255, 255, 0.76)",
+        bgPress: "rgba(255, 255, 255, 0.5)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(0, 0, 0, 0)",
-        bgHover: "rgba(51, 221, 255, 0.12)",
-        bgPress: "rgba(51, 221, 255, 0.08)",
-        bgDisable: "rgba(0, 0, 0, 0)",
-        border: "rgba(0, 0, 0, 0)",
-        borderHover: "rgba(0, 0, 0, 0)",
-        borderPress: "rgba(0, 0, 0, 0)",
-        borderDisable: "rgba(0, 0, 0, 0)",
-        text: {
-          primary: "#00aacc",
-          secondary: "#000000",
-          disable: "rgba(0, 170, 204, 0.4)"
-        }
+        bg: "#ffffff",
+        bgHover: "rgba(255, 255, 255, 0.76)",
+        bgPress: "rgba(255, 255, 255, 0.5)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#000000",
+        disable: "#c4d1d4"
       }
     },
-    brandExtra: {
+    mono: {
       primary: {
-        bg: "#bfff00",
-        bgHover: "#ccff33",
-        bgPress: "#99cc00",
-        bgDisable: "#d4d9c4",
+        bg: "#ffffff",
+        bgHover: "#f0f4f4",
+        bgPress: "#f6f8f9",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "#8a9480"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(191, 255, 0, 0.4)",
-        bgHover: "rgba(204, 255, 51, 0.4)",
-        bgPress: "rgba(153, 204, 0, 0.4)",
-        bgDisable: "rgba(191, 255, 0, 0.2)",
+        bg: "rgba(255, 255, 255, 0.1)",
+        bgHover: "rgba(255, 255, 255, 0.34)",
+        bgPress: "rgba(255, 255, 255, 0.44)",
+        border: "#ffffff",
+        borderHover: "#ffffff",
+        borderPress: "#ffffff"
+      },
+      tertiary: {
+        bg: "#ffffff",
+        bgHover: "rgba(255, 255, 255, 0.76)",
+        bgPress: "rgba(255, 255, 255, 0.5)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
-      tertiary: {
-        bg: "rgba(0, 0, 0, 0)",
-        bgHover: "rgba(191, 255, 0, 0.12)",
-        bgPress: "rgba(191, 255, 0, 0.08)",
-        bgDisable: "rgba(0, 0, 0, 0)",
-        border: "rgba(0, 0, 0, 0)",
-        borderHover: "rgba(0, 0, 0, 0)",
-        borderPress: "rgba(0, 0, 0, 0)",
-        borderDisable: "rgba(0, 0, 0, 0)",
-        text: {
-          primary: "#739900",
-          secondary: "#000000",
-          disable: "rgba(115, 153, 0, 0.4)"
-        }
+      text: {
+        primary: "#000000",
+        secondary: "#ffffff",
+        tertiary: "#000000"
       }
     },
-    alert: {
+    brandExtra: {
       primary: {
-        bg: "#ff2b00",
-        bgHover: "#ff5533",
-        bgPress: "#cc2200",
-        bgDisable: "#d9c4c4",
+        bg: "#292f52",
+        bgHover: "#ccff33",
+        bgPress: "#e6ff99",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ffffff",
-          secondary: "#000000",
-          disable: "#a08080"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(255, 43, 0, 0.4)",
-        bgHover: "rgba(255, 85, 51, 0.4)",
-        bgPress: "rgba(204, 34, 0, 0.4)",
-        bgDisable: "rgba(255, 43, 0, 0.2)",
+        bg: "rgba(186, 232, 49, 0.4)",
+        bgHover: "rgba(206, 246, 85, 0.4)",
+        bgPress: "rgba(186, 232, 49, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(0, 0, 0, 0)",
-        bgHover: "rgba(255, 43, 0, 0.12)",
-        bgPress: "rgba(255, 43, 0, 0.08)",
-        bgDisable: "rgba(0, 0, 0, 0)",
-        border: "rgba(0, 0, 0, 0)",
-        borderHover: "rgba(0, 0, 0, 0)",
-        borderPress: "rgba(0, 0, 0, 0)",
-        borderDisable: "rgba(0, 0, 0, 0)",
-        text: {
-          primary: "#cc2200",
-          secondary: "#000000",
-          disable: "rgba(204, 34, 0, 0.4)"
-        }
+        bg: "#ffffff",
+        bgHover: "rgba(255, 255, 255, 0.76)",
+        bgPress: "rgba(255, 255, 255, 0.5)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#000000",
+        secondary: "#000000",
+        tertiary: "#000000"
       }
     },
-    mono: {
+    alert: {
+      bg: "#e80000",
+      border: "#f53d3d",
       primary: {
-        bg: "#000000",
-        bgHover: "#151c1e",
-        bgPress: "#202a2c",
-        bgDisable: "#b0b0b0",
+        bg: "#ff8066",
+        bgHover: "#ffaa99",
+        bgPress: "#ff5533",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#ffffff",
-          secondary: "#000000",
-          disable: "#707070"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       secondary: {
-        bg: "rgba(0, 0, 0, 0.12)",
-        bgHover: "rgba(0, 0, 0, 0.08)",
-        bgPress: "rgba(0, 0, 0, 0.15)",
-        bgDisable: "rgba(0, 0, 0, 0.06)",
+        bg: "rgba(255, 128, 102, 0.4)",
+        bgHover: "rgba(255, 170, 153, 0.4)",
+        bgPress: "rgba(255, 85, 51, 0.4)",
         border: "rgba(255, 255, 255, 0)",
         borderHover: "rgba(255, 255, 255, 0)",
-        borderPress: "rgba(255, 255, 255, 0)",
-        borderDisable: "rgba(255, 255, 255, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        borderPress: "rgba(255, 255, 255, 0)"
       },
       tertiary: {
-        bg: "rgba(0, 0, 0, 0)",
-        bgHover: "rgba(0, 0, 0, 0.08)",
-        bgPress: "rgba(0, 0, 0, 0.05)",
-        bgDisable: "rgba(0, 0, 0, 0)",
-        border: "rgba(0, 0, 0, 0)",
-        borderHover: "rgba(0, 0, 0, 0)",
-        borderPress: "rgba(0, 0, 0, 0)",
-        borderDisable: "rgba(0, 0, 0, 0)",
-        text: {
-          primary: "#000000",
-          secondary: "#000000",
-          disable: "rgba(0, 0, 0, 0.4)"
-        }
+        bg: "#ffffff",
+        bgHover: "rgba(255, 255, 255, 0.76)",
+        bgPress: "rgba(255, 255, 255, 0.5)",
+        border: "rgba(255, 255, 255, 0)",
+        borderHover: "rgba(255, 255, 255, 0)",
+        borderPress: "rgba(255, 255, 255, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000"
       }
     },
     input: {
-      bg: "rgba(0, 0, 0, 0.07)",
-      bgHover: "rgba(0, 0, 0, 0.1)",
-      bgDisable: "rgba(0, 0, 0, 0.15)",
-      border: "rgba(0, 0, 0, 0)",
-      borderHover: "rgba(0, 0, 0, 0.1)",
-      borderDisable: "rgba(0, 0, 0, 0)",
-      text: "#000000",
-      textDisable: "rgba(0, 0, 0, 0.36)",
-      placeholder: "rgba(0, 0, 0, 0.6)"
+      bg: "rgba(255, 255, 255, 0.12)",
+      bgHover: "rgba(255, 255, 255, 0.15)",
+      bgDisable: "rgba(255, 255, 255, 0.25)",
+      border: "rgba(255, 255, 255, 0)",
+      borderHover: "rgba(255, 255, 255, 0.1)",
+      borderDisable: "rgba(255, 255, 255, 0)",
+      text: "#ffffff",
+      placeholder: "rgba(255, 255, 255, 0.55)",
+      textDisable: "rgba(255, 255, 255, 0.36)"
     },
     focus: {
-      bg: "rgba(255, 255, 255, 1)"
+      bg: "rgba(255, 255, 255, 0.2)",
+      border: "#8576fd"
     },
     check: {
-      bg: "#000000",
-      bgHover: "#2b383b",
-      bgDisable: "rgba(0, 0, 0, 0.2)"
+      bg: "#ffffff",
+      bgHover: "#f6f8f9",
+      bgDisable: "rgba(255, 255, 255, 0.2)",
+      border: "#ffffff",
+      borderHover: "#ffffff",
+      borderDisable: "#ffffff",
+      text: "#ffffff"
     },
     faint: {
-      bg: "rgba(0, 0, 0, 0.15)",
-      bgHover: "rgba(0, 0, 0, 0.2)",
-      border: "rgba(0, 0, 0, 0)",
-      borderHover: "rgba(0, 0, 0, 0.1)"
+      bg: "rgba(255, 255, 255, 0.15)",
+      bgHover: "rgba(255, 255, 255, 0.2)",
+      border: "rgba(255, 255, 255, 0)",
+      borderHover: "rgba(255, 255, 255, 0.24)"
     },
     switch: {
-      bg: "rgba(0, 0, 0, 0.1)",
-      bgHover: "rgba(0, 0, 0, 0.15)"
-    },
-    segmented: {
-      bg: "rgba(0, 0, 0, 0.08)",
-      bgHover: "rgba(0, 0, 0, 0.10)",
-      bgActive: "#ffffff",
-      textActive: "#1a1a1a"
+      bg: "rgba(255, 255, 255, 0.1)",
+      bgHover: "rgba(255, 255, 255, 0.15)"
     },
     text: {
-      primary: "#000000",
-      secondary: "#000000",
-      faint: "#ffffff",
-      disable: "rgba(0, 0, 0, 0.4)"
+      primary: "#ffffff",
+      disable: "#8c8b9a"
     },
     link: {
-      primary: "#008099",
-      primaryHover: "rgba(0, 128, 153, 0.5)",
-      secondary: "#739900",
-      secondaryHover: "rgba(77, 102, 0, 0.5)"
+      primary: "#ffffff",
+      primaryHover: "rgba(255, 255, 255, 0.7)",
+      secondary: "#8576fd",
+      secondaryHover: "rgba(157, 149, 222, 0.7)"
+    },
+    segmented: {
+      bg: "#ffffff",
+      bgHover: "#ffffff",
+      bgActive: "#ffffff",
+      border: "#ffffff",
+      borderHover: "#ffffff",
+      borderActive: "#ffffff",
+      text: "#ffffff",
+      textDisable: "#ffffff"
+    },
+    toggleButton: {
+      bg: "#ffffff",
+      bgHover: "#ffffff",
+      bgPress: "#ffffff",
+      bgDisable: "#ffffff",
+      border: "#ffffff",
+      borderHover: "#ffffff",
+      borderPress: "#ffffff",
+      borderDisable: "#ffffff",
+      text: "#ffffff",
+      textDisable: "#ffffff"
     }
   }
 };
 // src/tokens/colors.ts
 var colors = {
-  dark: xsolla_dark_default,
-  light: xsolla_light_default
+  // Default themes (Pentagram)
+  dark: pentagram_dark_default,
+  light: pentagram_light_default,
+  // Pentagram theme aliases
+  "pentagram-dark": pentagram_dark_default,
+  "pentagram-light": pentagram_light_default,
+  // Xsolla themes
+  "xsolla-dark": xsolla_dark_default,
+  "xsolla-light": xsolla_light_default,
+  xsollaDark: xsolla_dark_default,
+  xsollaLight: xsolla_light_default,
+  // LTG themes
+  "ltg-dark": ltg_dark_default
 };
 // src/tokens/spacing.ts
@@ -798,7 +1617,7 @@ var themeConfig = (mode = "dark") => ({
           iconContainerSize: 64,
           iconPadding: 20,
           loadingPadding: 40,
-          borderRadius: 4,
+          borderRadius: 8,
           labelIconSize: 18,
           labelIconGap: 6
         },
@@ -812,7 +1631,7 @@ var themeConfig = (mode = "dark") => ({
           iconContainerSize: 56,
           iconPadding: 20,
           loadingPadding: 36,
-          borderRadius: 4,
+          borderRadius: 8,
           labelIconSize: 16,
           labelIconGap: 6
         },
@@ -826,7 +1645,7 @@ var themeConfig = (mode = "dark") => ({
           iconContainerSize: 48,
           iconPadding: 20,
           loadingPadding: 32,
-          borderRadius: 2,
+          borderRadius: 8,
           labelIconSize: 14,
           labelIconGap: 4
         },
@@ -840,7 +1659,7 @@ var themeConfig = (mode = "dark") => ({
           iconContainerSize: 40,
           iconPadding: 20,
           loadingPadding: 28,
-          borderRadius: 2,
+          borderRadius: 4,
           labelIconSize: 12,
           labelIconGap: 4
         },
@@ -854,7 +1673,7 @@ var themeConfig = (mode = "dark") => ({
           iconContainerSize: 32,
           iconPadding: 20,
           loadingPadding: 28,
-          borderRadius: 2,
+          borderRadius: 4,
           labelIconSize: 10,
           labelIconGap: 4
         }
@@ -1280,31 +2099,55 @@ var themeConfig = (mode = "dark") => ({
       const configs = {
         xl: {
           height: 64,
+          containerPadding: 4,
+          containerRadius: 8,
+          itemHeight: 56,
+          itemPaddingHorizontal: 20,
+          itemPaddingVertical: 10,
+          itemRadius: 6,
           fontSize: 20,
+          lineHeight: 22,
           iconSize: 24,
-          gap: 8,
-          padding: 20
+          gap: 8
         },
         lg: {
           height: 56,
+          containerPadding: 4,
+          containerRadius: 8,
+          itemHeight: 48,
+          itemPaddingHorizontal: 20,
+          itemPaddingVertical: 10,
+          itemRadius: 6,
           fontSize: 18,
+          lineHeight: 20,
           iconSize: 24,
-          gap: 8,
-          padding: 16
+          gap: 8
         },
         md: {
           height: 48,
+          containerPadding: 4,
+          containerRadius: 8,
+          itemHeight: 40,
+          itemPaddingHorizontal: 16,
+          itemPaddingVertical: 8,
+          itemRadius: 6,
           fontSize: 16,
+          lineHeight: 18,
           iconSize: 24,
-          gap: 8,
-          padding: 12
+          gap: 6
         },
         sm: {
           height: 40,
+          containerPadding: 4,
+          containerRadius: 4,
+          itemHeight: 32,
+          itemPaddingHorizontal: 12,
+          itemPaddingVertical: 6,
+          itemRadius: 2,
           fontSize: 14,
+          lineHeight: 16,
           iconSize: 20,
-          gap: 6,
-          padding: 8
+          gap: 4
         }
       };
       return configs[size];
@@ -1618,6 +2461,51 @@ var themeConfig = (mode = "dark") => ({
         containerPadding: 12,
         groupGap: 4
       };
+    },
+    toggleButtonGroup: (size) => {
+      const configs = {
+        xl: {
+          height: 64,
+          paddingHorizontal: 20,
+          fontSize: 20,
+          lineHeight: 22,
+          iconSize: 24,
+          gap: 4,
+          borderRadius: 8,
+          itemGap: 8
+        },
+        lg: {
+          height: 56,
+          paddingHorizontal: 20,
+          fontSize: 18,
+          lineHeight: 20,
+          iconSize: 24,
+          gap: 4,
+          borderRadius: 8,
+          itemGap: 8
+        },
+        md: {
+          height: 48,
+          paddingHorizontal: 20,
+          fontSize: 16,
+          lineHeight: 18,
+          iconSize: 24,
+          gap: 4,
+          borderRadius: 8,
+          itemGap: 8
+        },
+        sm: {
+          height: 40,
+          paddingHorizontal: 20,
+          fontSize: 14,
+          lineHeight: 16,
+          iconSize: 20,
+          gap: 4,
+          borderRadius: 4,
+          itemGap: 8
+        }
+      };
+      return configs[size];
     }
   }
 });