@mekari/pixel3-theme 0.7.0-dev.1 → 0.7.1-dev.0

package/dist/index.js

@@ -1141,7 +1141,7 @@ var inputSlotRecipe = (0, import_dev7.defineSlotRecipe)({
         width: "full"
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInputControl]": {
+        "&:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInputClear]": {
@@ -1316,7 +1316,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
         }
       },
       "&[data-with-clearable=true]": {
-        "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+        "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
           paddingRight: "44px"
         },
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1333,7 +1333,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1346,7 +1346,7 @@ var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
           paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
-          "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
+          "& > [data-pixel-component=MpInput]:hover > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 46px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
@@ -1475,6 +1475,11 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
       alignItems: "center",
       _isFullWidth: {
         width: "full"
+      },
+      "&[data-with-clearable=true]:hover": {
+        "& > [data-pixel-component=MpSelectControl]": {
+          paddingRight: "62px!"
+        }
       }
     },
     control: {
@@ -1491,7 +1496,7 @@ var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
       paddingLeft: "3",
       paddingRight: "var(--mp-select--padding-right)",
       appearance: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       backgroundColor: "white",
       borderColor: "gray.100",
       _hover: {
@@ -3206,7 +3211,7 @@ var import_dev24 = require("@pandacss/dev");
 var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
-  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  slots: ["root", "label", "required", "labelIcon", "helpText", "errorMessage"],
   base: {
     root: {},
     label: {
@@ -3215,7 +3220,8 @@ var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
       marginBottom: "1",
       textAlign: "left",
       verticalAlign: "middle",
-      display: "flex"
+      display: "flex",
+      alignItems: "center"
     },
     required: {
       color: "red.400",
@@ -3223,6 +3229,11 @@ var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
         color: "text.danger"
       }
     },
+    labelIcon: {
+      display: "inline-flex",
+      alignItems: "center",
+      marginLeft: "0.5"
+    },
     helpText: {
       color: "gray.600",
       fontSize: "sm",
@@ -3286,8 +3297,8 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
       paddingTop: "2",
       paddingBottom: "2",
       paddingLeft: "3",
-      paddingRight: "8",
-      transition: "all 250ms",
+      paddingRight: "3",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.form",
@@ -3340,6 +3351,9 @@ var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
           }
         }
       },
+      "&[data-show-clear=true]:not([data-has-icon=true])": {
+        paddingRight: "32px"
+      },
       _hasIcon: {
         paddingRight: "52px"
       }
@@ -3645,7 +3659,7 @@ var uploadSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       borderRadius: "md",
       background: "white",
       outline: "none",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms, box-shadow 250ms",
       _nextTheme: {
         borderRadius: "md",
         borderColor: "border.default",
@@ -3653,14 +3667,17 @@ var uploadSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       },
       _hover: {
         borderColor: "gray.400",
-        "& .mp-upload__resetButton": {
-          display: "block"
-        },
         _nextTheme: {
           borderColor: "border.form",
           background: "background.neutral.hovered"
         }
       },
+      "&[data-has-reset=true]:hover": {
+        paddingRight: "44px",
+        "& [data-pixel-component=MpUploadResetButton]": {
+          display: "block"
+        }
+      },
       _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",
@@ -6965,7 +6982,7 @@ var tokens = (0, import_dev60.defineTokens)({
 // src/tokens-next/index.ts
 var import_dev66 = require("@pandacss/dev");
 
-// src/tokens-next/borders.ts
+// src/tokens-next/borderWidths.ts
 var import_dev61 = require("@pandacss/dev");
 var borderWidths2 = import_dev61.defineTokens.borderWidths({
   none: { value: "none" },
@@ -6980,217 +6997,211 @@ var borderWidths2 = import_dev61.defineTokens.borderWidths({
 var import_dev62 = require("@pandacss/dev");
 var colors2 = import_dev62.defineTokens.colors({
   debug: { value: "red" },
+  transparent: { value: "#ffffff00" },
   currentcolor: { value: "currentcolor" },
-  transparent: { value: "#FFFFFF00" },
-  white: { value: "#FFFFFF" },
   vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
-  lightPurple: {
-    value: "radial-gradient(108.28% 139.29% at 0% 0%, {colors.background.brand} 0%, {colors.background.highlight} 100%)"
-  },
+  lightPurple: { value: "radial-gradient(108.28% 139.29% at 0% 0%, {colors.background.brand} 0%, {colors.background.highlight} 100%)" },
+  white: { value: "#ffffff" },
   dark: {
-    "-100": {
-      value: "#101214"
-    },
-    DEFAULT: {
-      value: "#161A1D"
-    },
-    100: { value: "#1D2125" },
-    200: { value: "#22272B" },
-    250: { value: "#282E33" },
-    300: { value: "#2C333A" },
-    350: { value: "#38414A" },
-    400: { value: "#454F59" },
-    500: { value: "#596773" },
-    600: { value: "#738496" },
-    700: { value: "#8C9BAB" },
-    800: { value: "#9FADBC" },
-    900: { value: "#B6C2CF" },
-    1e3: { value: "#C7D1DB" },
+    "-100": { value: "#101214" },
+    100: { value: "#1d2125" },
+    1e3: { value: "#c7d1db" },
     "100a": { value: "#bcd6f00a" },
+    200: { value: "#22272b" },
     "200a": { value: "#a1bdd914" },
+    250: { value: "#282e33" },
     "250a": { value: "#c8e1f91f" },
+    300: { value: "#2c333a" },
     "300a": { value: "#a6c5e229" },
+    350: { value: "#38414a" },
     "350a": { value: "#c3defe33" },
+    400: { value: "#454f59" },
     "400a": { value: "#bfdbf847" },
-    "500a": { value: "#9bb4ca85" }
+    500: { value: "#596773" },
+    "500a": { value: "#9bb4ca85" },
+    600: { value: "#738496" },
+    700: { value: "#8c9bab" },
+    800: { value: "#9fadbc" },
+    900: { value: "#b6c2cf" },
+    DEFAULT: { value: "#161a1d" }
   },
   neutral: {
-    100: { value: "#F7F8F9" },
-    200: { value: "#F0F1F3" },
-    300: { value: "#DCDFE4" },
-    400: { value: "#B2B9C4" },
-    500: { value: "#8690A2" },
-    600: { value: "#758195" },
-    700: { value: "#656F80" },
-    800: { value: "#4C5460" },
-    900: { value: "#383E48" },
-    1e3: { value: "#272B32" },
+    100: { value: "#f7f8f9" },
+    1e3: { value: "#272b32" },
     "100a": { value: "#1d1f240a" },
+    200: { value: "#f0f1f3" },
     "200a": { value: "#1d1f2414" },
+    300: { value: "#dcdfe4" },
     "300a": { value: "#1d1f2429" },
+    400: { value: "#b2b9c4" },
     "400a": { value: "#1d1f2452" },
-    "500a": { value: "#1d1f247a" }
+    500: { value: "#8690a2" },
+    "500a": { value: "#1d1f247a" },
+    600: { value: "#758195" },
+    700: { value: "#656f80" },
+    800: { value: "#4c5460" },
+    900: { value: "#383e48" }
   },
   slate: {
-    100: { value: "#F8F9F9" },
-    200: { value: "#EBF0F1" },
-    300: { value: "#E3E7E9" },
-    400: { value: "#8C9596" },
-    500: { value: "#6E7A7C" },
-    600: { value: "#536062" },
-    700: { value: "#3A4749" },
-    800: { value: "#243032" },
-    900: { value: "#121C1E" },
-    1e3: { value: "#080D0E" },
+    100: { value: "#f8f9f9" },
+    1e3: { value: "#080d0e" },
     "100a": { value: "#1d1f240a" },
+    200: { value: "#ebf0f1" },
     "200a": { value: "#1d1f2414" },
+    300: { value: "#e3e7e9" },
     "300a": { value: "#1d1f2429" },
+    400: { value: "#8c9596" },
     "400a": { value: "#1d1f2452" },
-    "500a": { value: "#1d1f247a" }
+    500: { value: "#6e7a7c" },
+    "500a": { value: "#1d1f247a" },
+    600: { value: "#536062" },
+    700: { value: "#3a4749" },
+    800: { value: "#243032" },
+    900: { value: "#121c1e" }
   },
   blue: {
-    100: { value: "#ECF3FE" },
-    200: { value: "#CEE0FD" },
-    300: { value: "#8EB7FA" },
-    400: { value: "#649CF8" },
-    500: { value: "#488BF7" },
-    600: { value: "#387CEB" },
-    700: { value: "#306AC8" },
-    800: { value: "#295AAA" },
-    900: { value: "#173361" },
-    1e3: { value: "#132A4F" }
+    100: { value: "#ecf3fe" },
+    1e3: { value: "#132a4f" },
+    200: { value: "#cee0fd" },
+    300: { value: "#8eb7fa" },
+    400: { value: "#649cf8" },
+    500: { value: "#488bf7" },
+    600: { value: "#387ceb" },
+    700: { value: "#306ac8" },
+    800: { value: "#295aaa" },
+    900: { value: "#173361" }
   },
   indigo: {
-    100: { value: "#EEF0FC" },
-    200: { value: "#D6DBF7" },
-    300: { value: "#A8B2EF" },
-    400: { value: "#8997E9" },
-    500: { value: "#7586E5" },
-    600: { value: "#6577E2" },
-    700: { value: "#4B61DC" },
-    800: { value: "#4053BC" },
-    900: { value: "#242F6A" },
-    1e3: { value: "#1D2656" }
+    100: { value: "#eef0fc" },
+    1e3: { value: "#1d2656" },
+    200: { value: "#d6dbf7" },
+    300: { value: "#a8b2ef" },
+    400: { value: "#8997e9" },
+    500: { value: "#7586e5" },
+    600: { value: "#6577e2" },
+    700: { value: "#4b61dc" },
+    800: { value: "#4053bc" },
+    900: { value: "#242f6a" }
   },
   violet: {
-    100: { value: "#F3F1FC" },
-    200: { value: "#DEDAF6" },
-    300: { value: "#B8AEEB" },
-    400: { value: "#9F91E3" },
-    500: { value: "#8F7FDF" },
-    600: { value: "#8270DB" },
-    700: { value: "#6F5FBA" },
-    800: { value: "#5F519F" },
-    900: { value: "#352E5A" },
-    1e3: { value: "#2B2549" }
+    100: { value: "#f3f1fc" },
+    1e3: { value: "#2b2549" },
+    200: { value: "#dedaf6" },
+    300: { value: "#b8aeeb" },
+    400: { value: "#9f91e3" },
+    500: { value: "#8f7fdf" },
+    600: { value: "#8270db" },
+    700: { value: "#6f5fba" },
+    800: { value: "#5f519f" },
+    900: { value: "#352e5a" }
+  },
+  lime: {
+    100: { value: "#f4faea" },
+    1e3: { value: "#213306" },
+    200: { value: "#d8efb5" },
+    300: { value: "#b1df6b" },
+    400: { value: "#83ca16" },
+    500: { value: "#77b814" },
+    600: { value: "#649b11" },
+    700: { value: "#53800e" },
+    800: { value: "#466c0c" },
+    900: { value: "#304a08" }
+  },
+  emerald: {
+    100: { value: "#f0fbf7" },
+    1e3: { value: "#142d26" },
+    200: { value: "#d6f4e9" },
+    300: { value: "#b7e9d8" },
+    400: { value: "#7edac0" },
+    500: { value: "#41c6a0" },
+    600: { value: "#1fb088" },
+    700: { value: "#029861" },
+    800: { value: "#0f6d4d" },
+    900: { value: "#0e4f3a" }
+  },
+  green: {
+    100: { value: "#f2f9f6" },
+    1e3: { value: "#0b3524" },
+    200: { value: "#d2ebe1" },
+    300: { value: "#a7d9c4" },
+    400: { value: "#7dc7a8" },
+    500: { value: "#56b78e" },
+    600: { value: "#23a06b" },
+    700: { value: "#1c8459" },
+    800: { value: "#186f4a" },
+    900: { value: "#104b32" }
+  },
+  teal: {
+    100: { value: "#eaf9f7" },
+    1e3: { value: "#06342f" },
+    200: { value: "#c4ede9" },
+    300: { value: "#92ded6" },
+    400: { value: "#4fcabc" },
+    500: { value: "#19b9a8" },
+    600: { value: "#119e8f" },
+    700: { value: "#0e8275" },
+    800: { value: "#0c6e63" },
+    900: { value: "#084841" }
   },
   fuchsia: {
-    100: { value: "#FBEEFE" },
-    200: { value: "#F6D1FB" },
-    300: { value: "#EA98F6" },
-    400: { value: "#E16CF2" },
-    500: { value: "#DA4DF0" },
-    600: { value: "#C841DC" },
-    700: { value: "#AC37BD" },
-    800: { value: "#932FA2" },
-    900: { value: "#531B5C" },
-    1e3: { value: "#45164C" }
+    100: { value: "#fbeefe" },
+    1e3: { value: "#45164c" },
+    200: { value: "#f6d1fb" },
+    300: { value: "#ea98f6" },
+    400: { value: "#e16cf2" },
+    500: { value: "#da4df0" },
+    600: { value: "#c841dc" },
+    700: { value: "#ac37bd" },
+    800: { value: "#932fa2" },
+    900: { value: "#531b5c" }
   },
   red: {
-    100: { value: "#FCEEED" },
-    200: { value: "#F9D7D5" },
-    300: { value: "#F09E99" },
-    400: { value: "#EA7A72" },
-    500: { value: "#E6645B" },
-    600: { value: "#E2483D" },
-    700: { value: "#C33E35" },
-    800: { value: "#A8352D" },
-    900: { value: "#5E1E19" },
-    1e3: { value: "#4E1915" }
+    100: { value: "#fceeed" },
+    1e3: { value: "#4e1915" },
+    200: { value: "#f9d7d5" },
+    300: { value: "#f09e99" },
+    400: { value: "#ea7a72" },
+    500: { value: "#e6645b" },
+    600: { value: "#e2483d" },
+    700: { value: "#c33e35" },
+    800: { value: "#a8352d" },
+    900: { value: "#5e1e19" }
   },
   orange: {
-    100: { value: "#FDF3EC" },
-    200: { value: "#F9DECB" },
-    300: { value: "#F5C39F" },
-    400: { value: "#F0A875" },
-    500: { value: "#EB8E4B" },
-    600: { value: "#E46910" },
-    700: { value: "#BC560D" },
-    800: { value: "#A14A0B" },
-    900: { value: "#6B3108" },
-    1e3: { value: "#492105" }
+    100: { value: "#fdf3ec" },
+    1e3: { value: "#492105" },
+    200: { value: "#f9decb" },
+    300: { value: "#f5c39f" },
+    400: { value: "#f0a875" },
+    500: { value: "#eb8e4b" },
+    600: { value: "#e46910" },
+    700: { value: "#bc560d" },
+    800: { value: "#a14a0b" },
+    900: { value: "#6b3108" }
   },
   yellow: {
-    100: { value: "#FDF6DD" },
-    200: { value: "#F9E399" },
-    300: { value: "#F5CD47" },
-    400: { value: "#D8B53F" },
-    500: { value: "#C2A338" },
-    600: { value: "#A68A30" },
+    100: { value: "#fdf6dd" },
+    1e3: { value: "#362d10" },
+    200: { value: "#f9e399" },
+    300: { value: "#f5cd47" },
+    400: { value: "#d8b53f" },
+    500: { value: "#c2a338" },
+    600: { value: "#a68a30" },
     700: { value: "#897228" },
     800: { value: "#766222" },
-    900: { value: "#4D4016" },
-    1e3: { value: "#362D10" }
-  },
-  lime: {
-    100: { value: "#F4FAEA" },
-    200: { value: "#D8EFB5" },
-    300: { value: "#B1DF6B" },
-    400: { value: "#83CA16" },
-    500: { value: "#77B814" },
-    600: { value: "#649B11" },
-    700: { value: "#53800E" },
-    800: { value: "#466C0C" },
-    900: { value: "#304A08" },
-    1e3: { value: "#213306" }
-  },
-  green: {
-    100: { value: "#F2F9F6" },
-    200: { value: "#D2EBE1" },
-    300: { value: "#A7D9C4" },
-    400: { value: "#7DC7A8" },
-    500: { value: "#56B78E" },
-    600: { value: "#23A06B" },
-    700: { value: "#1C8459" },
-    800: { value: "#186F4A" },
-    900: { value: "#104B32" },
-    1e3: { value: "#0B3524" }
-  },
-  teal: {
-    100: { value: "#EAF9F7" },
-    200: { value: "#C4EDE9" },
-    300: { value: "#92DED6" },
-    400: { value: "#4FCABC" },
-    500: { value: "#19B9A8" },
-    600: { value: "#119E8F" },
-    700: { value: "#0E8275" },
-    800: { value: "#0C6E63" },
-    900: { value: "#084841" },
-    1e3: { value: "#06342F" }
-  },
-  emerald: {
-    100: { value: "#F0FBF7" },
-    200: { value: "#D6F4E9" },
-    300: { value: "#B7E9D8" },
-    400: { value: "#7EDAC0" },
-    500: { value: "#41C6A0" },
-    600: { value: "#1FB088" },
-    700: { value: "#029861" },
-    800: { value: "#0F6D4D" },
-    900: { value: "#0E4F3A" },
-    1e3: { value: "#142D26" }
+    900: { value: "#4d4016" }
   },
   brand: {
-    capital: { value: "#2F5573" },
-    esign: { value: "#00C853" },
+    capital: { value: "#2f5573" },
+    esign: { value: "#00c853" },
     expense: { value: "#183883" },
-    flex: { value: "#7C4DFF" },
-    jurnal: { value: "#40C3FF" },
-    klikpajak: { value: "#FF9100" },
-    mekari: { value: "#651FFF" },
-    qontak: { value: "#2979FF" },
-    talenta: { value: "#F22929" },
-    university: { value: "#448AFF" }
+    flex: { value: "#7c4dff" },
+    jurnal: { value: "#40c3ff" },
+    klikpajak: { value: "#ff9100" },
+    mekari: { value: "#651fff" },
+    qontak: { value: "#2979ff" },
+    talenta: { value: "#f22929" },
+    university: { value: "#448aff" }
   }
 });
 
@@ -7198,10 +7209,10 @@ var colors2 = import_dev62.defineTokens.colors({
 var import_dev63 = require("@pandacss/dev");
 var radii2 = import_dev63.defineTokens.radii({
   none: { value: "0" },
-  sm: { value: "0.25rem", description: "4px" },
-  md: { value: "0.375rem", description: "6px" },
-  lg: { value: "0.5rem", description: "8px" },
-  xl: { value: "0.75rem", description: "12px" },
+  sm: { value: "0.25rem" },
+  md: { value: "0.375rem" },
+  lg: { value: "0.5rem" },
+  xl: { value: "0.75rem" },
   full: { value: "999px" }
 });
 
@@ -7209,17 +7220,17 @@ var radii2 = import_dev63.defineTokens.radii({
 var import_dev64 = require("@pandacss/dev");
 var spacing2 = import_dev64.defineTokens.spacing({
   0: { value: "0" },
-  0.5: { value: "0.125rem", description: "2px" },
-  1: { value: "0.25rem", description: "4px" },
-  1.5: { value: "0.375rem", description: "6px" },
-  2: { value: "0.5rem", description: "8px" },
-  3: { value: "0.75rem", description: "12px" },
-  4: { value: "1rem", description: "16px" },
-  5: { value: "1.3rem", description: "20px" },
-  6: { value: "1.5rem", description: "24px" },
-  8: { value: "2rem", description: "32px" },
-  10: { value: "2.5rem", description: "40px" },
-  20: { value: "5rem", description: "80px" }
+  0.5: { value: "0.125rem" },
+  1: { value: "0.25rem" },
+  1.5: { value: "0.375rem" },
+  2: { value: "0.5rem" },
+  3: { value: "0.75rem" },
+  4: { value: "1rem" },
+  5: { value: "1.25rem" },
+  6: { value: "1.5rem" },
+  8: { value: "2rem" },
+  10: { value: "2.5rem" },
+  20: { value: "5rem" }
 });
 
 // src/tokens-next/shadows.ts
@@ -7287,435 +7298,445 @@ var import_dev69 = require("@pandacss/dev");
 // src/semanticTokens/colors.ts
 var import_dev67 = require("@pandacss/dev");
 var colors3 = import_dev67.defineSemanticTokens.colors({
-  // BACKGROUND SEMANTIC TOKENS
   background: {
-    surface: {
-      DEFAULT: {
-        value: {
-          base: "#F1F5F9",
-          // Doesn't have raw token
-          _light: "#F1F5F9",
-          // Doesn't have raw token
-          _dark: "{colors.dark}",
-          _enterprise: "{colors.slate.100}"
-        }
-      },
-      bold: {
-        value: {
-          base: "{colors.neutral.1000}",
-          _light: "{colors.neutral.1000}",
-          _dark: "{colors.neutral.100}",
-          _enterprise: "{colors.emerald.1000}"
-        }
+    airene: {
+      value: {
+        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
+        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)",
+        _enterprise: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)"
       }
     },
-    information: {
+    brand: {
       DEFAULT: {
         value: {
           base: "{colors.indigo.100}",
           _light: "{colors.indigo.100}",
           _dark: "{colors.indigo.1000}",
-          _enterprise: "{colors.indigo.100}"
+          _enterprise: "{colors.emerald.100}"
         }
       },
       bold: {
-        value: {
-          base: "{colors.indigo.700}",
-          _light: "{colors.indigo.700}",
-          _dark: "{colors.indigo.400}",
-          _enterprise: "{colors.indigo.700}"
-        }
-      }
-    },
-    stage: {
-      value: {
-        base: "{colors.white}",
-        _light: "{colors.white}",
-        _dark: "{colors.dark.100}",
-        _enterprise: "{colors.white}"
-      }
-    },
-    overlay: {
-      value: {
-        base: "#232933CC",
-        // Doesn't have raw token
-        _light: "#232933CC",
-        // Doesn't have raw token
-        _dark: "#657F9980",
-        // Doesn't have raw token
-        _enterprise: "#222222CC"
-        // Doesn't have raw token
-      }
-    },
-    disabled: {
-      value: {
-        base: "{colors.neutral.100a}",
-        _light: "{colors.neutral.100a}",
-        _dark: "{colors.dark.100a}",
-        _enterprise: "{colors.slate.100}"
-      }
-    },
-    inverse: {
-      value: {
-        base: "{colors.dark.100}",
-        _light: "{colors.dark.100}",
-        _dark: "{colors.white}",
-        _enterprise: "{colors.dark.100}"
-      }
-    },
-    shadow: {
-      value: {
-        base: "#1D1F2429",
-        // Doesn't have raw token
-        _light: "#1D1F2429",
-        // Doesn't have raw token
-        _dark: "{colors.dark}",
-        _enterprise: "#1D1F2429"
-        // Doesn't have raw token
-      }
-    },
-    neutral: {
-      DEFAULT: {
-        value: {
-          base: "{colors.white}",
-          _light: "{colors.white}",
-          _dark: "{colors.dark.200}",
-          _enterprise: "{colors.white}"
+        DEFAULT: {
+          value: {
+            base: "{colors.indigo.700}",
+            _light: "{colors.indigo.700}",
+            _dark: "{colors.indigo.400}",
+            _enterprise: "{colors.emerald.700}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.indigo.800}",
+            _light: "{colors.indigo.800}",
+            _dark: "{colors.indigo.300}",
+            _enterprise: "{colors.emerald.800}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.indigo.900}",
+            _light: "{colors.indigo.900}",
+            _dark: "{colors.indigo.200}",
+            _enterprise: "{colors.emerald.900}"
+          }
+        },
+        selected: {
+          DEFAULT: {
+            value: {
+              base: "{colors.indigo.800}",
+              _light: "{colors.indigo.800}",
+              _dark: "{colors.indigo.300}",
+              _enterprise: "{colors.emerald.800}"
+            }
+          },
+          disabled: {
+            value: {
+              base: "{colors.indigo.200}",
+              _light: "{colors.indigo.200}",
+              _dark: "{colors.indigo.900}",
+              _enterprise: "{colors.emerald.200}"
+            }
+          }
         }
       },
       hovered: {
         value: {
-          base: "{colors.neutral.100}",
-          _light: "{colors.neutral.100}",
-          _dark: "{colors.dark.250}",
-          _enterprise: "{colors.slate.100}"
+          base: "{colors.indigo.200}",
+          _light: "{colors.indigo.200}",
+          _dark: "{colors.indigo.900}",
+          _enterprise: "{colors.emerald.200}"
         }
       },
       pressed: {
         value: {
-          base: "{colors.neutral.200}",
-          _light: "{colors.neutral.200}",
-          _dark: "{colors.dark.300}",
-          _enterprise: "{colors.slate.200}"
+          base: "{colors.indigo.300}",
+          _light: "{colors.indigo.300}",
+          _dark: "{colors.indigo.800}",
+          _enterprise: "{colors.emerald.300}"
         }
       },
       selected: {
         value: {
-          base: "{colors.neutral.100}",
-          _light: "{colors.neutral.100}",
-          _dark: "{colors.dark.250}",
-          _enterprise: "{colors.slate.100}"
+          base: "{colors.indigo.200}",
+          _light: "{colors.indigo.200}",
+          _dark: "{colors.indigo.900}",
+          _enterprise: "{colors.emerald.200}"
+        }
+      }
+    },
+    danger: {
+      DEFAULT: {
+        value: {
+          base: "{colors.red.100}",
+          _light: "{colors.red.100}",
+          _dark: "{colors.red.1000}",
+          _enterprise: "{colors.red.100}"
         }
       },
-      subtle: {
+      bold: {
         DEFAULT: {
           value: {
-            base: "{colors.neutral.200}",
-            _light: "{colors.neutral.200}",
-            _dark: "{colors.dark.300}",
-            _enterprise: "{colors.slate.100}"
+            base: "{colors.red.700}",
+            _light: "{colors.red.700}",
+            _dark: "{colors.red.400}",
+            _enterprise: "{colors.red.700}"
           }
         },
         hovered: {
           value: {
-            base: "{colors.neutral.300}",
-            _light: "{colors.neutral.300}",
-            _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.200}"
+            base: "{colors.red.800}",
+            _light: "{colors.red.800}",
+            _dark: "{colors.red.300}",
+            _enterprise: "{colors.red.800}"
           }
         },
         pressed: {
           value: {
-            base: "{colors.neutral.400}",
-            _light: "{colors.neutral.400}",
-            _dark: "{colors.dark.400}",
-            _enterprise: "{colors.slate.300}"
+            base: "{colors.red.900}",
+            _light: "{colors.red.900}",
+            _dark: "{colors.red.200}",
+            _enterprise: "{colors.red.900}"
           }
         },
         selected: {
           value: {
-            base: "{colors.neutral.300}",
-            _light: "{colors.neutral.300}",
-            _dark: "{colors.dark.350}",
-            _enterprise: "{colors.slate.200}"
-          }
+            base: "{colors.red.800}",
+            _light: "{colors.red.800}",
+            _dark: "{colors.red.300}",
+            _enterprise: "{colors.red.800}"
+          }
         }
       },
-      bold: {
-        DEFAULT: {
-          value: {
-            base: "{colors.neutral.800}",
-            _light: "{colors.neutral.800}",
-            _dark: "{colors.dark.800}",
-            _enterprise: "{colors.slate.800}"
-          }
-        },
+      hovered: {
+        value: {
+          base: "{colors.red.200}",
+          _light: "{colors.red.200}",
+          _dark: "{colors.red.900}",
+          _enterprise: "{colors.red.200}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.red.300}",
+          _light: "{colors.red.300}",
+          _dark: "{colors.red.800}",
+          _enterprise: "{colors.red.300}"
+        }
+      },
+      selected: {
+        value: {
+          base: "{colors.red.200}",
+          _light: "{colors.red.200}",
+          _dark: "{colors.red.900}",
+          _enterprise: "{colors.red.200}"
+        }
+      }
+    },
+    disabled: {
+      value: {
+        base: "{colors.neutral.100a}",
+        _light: "{colors.neutral.100a}",
+        _dark: "{colors.dark.100a}",
+        _enterprise: "{colors.slate.100}"
+      }
+    },
+    header: {
+      DEFAULT: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.dark.100}",
+          _enterprise: "{colors.emerald.1000}"
+        }
+      },
+      menu: {
         hovered: {
           value: {
-            base: "{colors.neutral.900}",
-            _light: "{colors.neutral.900}",
-            _dark: "{colors.dark.900}",
-            _enterprise: "{colors.slate.900}"
-          }
-        },
-        pressed: {
-          value: {
-            base: "{colors.neutral.1000}",
-            _light: "{colors.neutral.1000}",
-            _dark: "{colors.dark.1000}",
-            _enterprise: "{colors.slate.1000}"
+            base: "{colors.transparent}",
+            _light: "{colors.transparent}",
+            _dark: "{colors.transparent}",
+            _enterprise: "#265c5880"
           }
         },
         selected: {
           value: {
-            base: "{colors.neutral.900}",
-            _light: "{colors.neutral.900}",
-            _dark: "{colors.dark.900}",
-            _enterprise: "{colors.slate.900}"
+            base: "{colors.transparent}",
+            _light: "{colors.transparent}",
+            _dark: "{colors.transparent}",
+            _enterprise: "{colors.lime.300}"
           }
         }
       }
     },
-    brand: {
+    highlight: {
       DEFAULT: {
         value: {
-          base: "{colors.indigo.100}",
-          _light: "{colors.indigo.100}",
-          _dark: "{colors.indigo.1000}",
-          _enterprise: "{colors.emerald.100}"
-        }
-      },
-      hovered: {
-        value: {
-          base: "{colors.indigo.200}",
-          _light: "{colors.indigo.200}",
-          _dark: "{colors.indigo.900}",
-          _enterprise: "{colors.emerald.200}"
-        }
-      },
-      pressed: {
-        value: {
-          base: "{colors.indigo.300}",
-          _light: "{colors.indigo.300}",
-          _dark: "{colors.indigo.800}",
-          _enterprise: "{colors.emerald.300}"
-        }
-      },
-      selected: {
-        value: {
-          base: "{colors.indigo.200}",
-          _light: "{colors.indigo.200}",
-          _dark: "{colors.indigo.900}",
-          _enterprise: "{colors.emerald.200}"
+          base: "{colors.violet.100}",
+          _light: "{colors.violet.100}",
+          _dark: "{colors.violet.1000}",
+          _enterprise: "{colors.violet.100}"
         }
       },
       bold: {
         DEFAULT: {
           value: {
-            base: "{colors.indigo.700}",
-            _light: "{colors.indigo.700}",
-            _dark: "{colors.indigo.400}",
-            _enterprise: "{colors.emerald.700}"
+            base: "{colors.violet.700}",
+            _light: "{colors.violet.700}",
+            _dark: "{colors.violet.400}",
+            _enterprise: "{colors.violet.700}"
           }
         },
         hovered: {
           value: {
-            base: "{colors.indigo.800}",
-            _light: "{colors.indigo.800}",
-            _dark: "{colors.indigo.300}",
-            _enterprise: "{colors.emerald.800}"
+            base: "{colors.violet.800}",
+            _light: "{colors.violet.800}",
+            _dark: "{colors.violet.300}",
+            _enterprise: "{colors.violet.800}"
           }
         },
         pressed: {
           value: {
-            base: "{colors.indigo.900}",
-            _light: "{colors.indigo.900}",
-            _dark: "{colors.indigo.200}",
-            _enterprise: "{colors.emerald.900}"
+            base: "{colors.violet.900}",
+            _light: "{colors.violet.900}",
+            _dark: "{colors.violet.200}",
+            _enterprise: "{colors.violet.900}"
           }
         },
         selected: {
-          DEFAULT: {
-            value: {
-              base: "{colors.indigo.800}",
-              _light: "{colors.indigo.800}",
-              _dark: "{colors.indigo.300}",
-              _enterprise: "{colors.emerald.800}"
-            }
-          },
-          disabled: {
-            value: {
-              base: "{colors.indigo.200}",
-              _light: "{colors.indigo.200}",
-              _dark: "{colors.indigo.900}",
-              _enterprise: "{colors.emerald.200}"
-            }
+          value: {
+            base: "{colors.violet.800}",
+            _light: "{colors.violet.800}",
+            _dark: "{colors.violet.300}",
+            _enterprise: "{colors.violet.800}"
           }
         }
-      }
-    },
-    tertiary: {
-      DEFAULT: {
-        value: {
-          base: "{colors.dark.200}",
-          _light: "{colors.dark.200}",
-          _dark: "{colors.dark.200}",
-          _enterprise: "{colors.dark.250}"
-        }
       },
       hovered: {
         value: {
-          base: "{colors.dark.300}",
-          _light: "{colors.dark.300}",
-          _dark: "{colors.dark.300}",
-          _enterprise: "{colors.dark.300}"
+          base: "{colors.violet.200}",
+          _light: "{colors.violet.200}",
+          _dark: "{colors.violet.900}",
+          _enterprise: "{colors.violet.200}"
         }
       },
       pressed: {
         value: {
-          base: "{colors.dark.400}",
-          _light: "{colors.dark.400}",
-          _dark: "{colors.dark.400}",
-          _enterprise: "{colors.dark.400}"
+          base: "{colors.violet.300}",
+          _light: "{colors.violet.300}",
+          _dark: "{colors.violet.800}",
+          _enterprise: "{colors.violet.300}"
+        }
+      },
+      selected: {
+        value: {
+          base: "{colors.violet.200}",
+          _light: "{colors.violet.200}",
+          _dark: "{colors.violet.900}",
+          _enterprise: "{colors.violet.200}"
         }
       }
     },
-    danger: {
+    information: {
       DEFAULT: {
         value: {
-          base: "{colors.red.100}",
-          _light: "{colors.red.100}",
-          _dark: "{colors.red.1000}",
-          _enterprise: "{colors.red.100}"
+          base: "{colors.indigo.100}",
+          _light: "{colors.indigo.100}",
+          _dark: "{colors.indigo.1000}",
+          _enterprise: "{colors.indigo.100}"
         }
       },
-      hovered: {
+      bold: {
         value: {
-          base: "{colors.red.200}",
-          _light: "{colors.red.200}",
-          _dark: "{colors.red.900}",
-          _enterprise: "{colors.red.200}"
+          base: "{colors.indigo.700}",
+          _light: "{colors.indigo.700}",
+          _dark: "{colors.indigo.400}",
+          _enterprise: "{colors.indigo.700}"
         }
-      },
-      pressed: {
+      }
+    },
+    inverse: {
+      value: {
+        base: "{colors.dark.100}",
+        _light: "{colors.dark.100}",
+        _dark: "{colors.white}",
+        _enterprise: "{colors.dark.100}"
+      }
+    },
+    nav: {
+      parent: {
         value: {
-          base: "{colors.red.300}",
-          _light: "{colors.red.300}",
-          _dark: "{colors.red.800}",
-          _enterprise: "{colors.red.300}"
+          base: "#e7edf5",
+          _light: "#e7edf5",
+          _dark: "{colors.dark.-100}",
+          _enterprise: "{colors.emerald.1000}"
         }
       },
-      selected: {
+      stack: {
+        DEFAULT: {
+          value: {
+            base: "#f1f5f9",
+            _light: "#f1f5f9",
+            _dark: "{colors.dark.DEFAULT}",
+            _enterprise: "{colors.emerald.100}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "#e7edf5",
+            _light: "#e7edf5",
+            _dark: "{colors.dark.-100}",
+            _enterprise: "{colors.emerald.200}"
+          }
+        }
+      }
+    },
+    neutral: {
+      DEFAULT: {
         value: {
-          base: "{colors.red.200}",
-          _light: "{colors.red.200}",
-          _dark: "{colors.red.900}",
-          _enterprise: "{colors.red.200}"
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.dark.200}",
+          _enterprise: "{colors.white}"
         }
       },
       bold: {
         DEFAULT: {
           value: {
-            base: "{colors.red.700}",
-            _light: "{colors.red.700}",
-            _dark: "{colors.red.400}",
-            _enterprise: "{colors.red.700}"
+            base: "{colors.neutral.800}",
+            _light: "{colors.neutral.800}",
+            _dark: "{colors.dark.800}",
+            _enterprise: "{colors.slate.800}"
           }
         },
         hovered: {
           value: {
-            base: "{colors.red.800}",
-            _light: "{colors.red.800}",
-            _dark: "{colors.red.300}",
-            _enterprise: "{colors.red.800}"
+            base: "{colors.neutral.900}",
+            _light: "{colors.neutral.900}",
+            _dark: "{colors.dark.900}",
+            _enterprise: "{colors.slate.900}"
           }
         },
         pressed: {
           value: {
-            base: "{colors.red.900}",
-            _light: "{colors.red.900}",
-            _dark: "{colors.red.200}",
-            _enterprise: "{colors.red.900}"
+            base: "{colors.neutral.1000}",
+            _light: "{colors.neutral.1000}",
+            _dark: "{colors.dark.1000}",
+            _enterprise: "{colors.slate.1000}"
           }
         },
         selected: {
           value: {
-            base: "{colors.red.800}",
-            _light: "{colors.red.800}",
-            _dark: "{colors.red.300}",
-            _enterprise: "{colors.red.800}"
+            base: "{colors.neutral.900}",
+            _light: "{colors.neutral.900}",
+            _dark: "{colors.dark.900}",
+            _enterprise: "{colors.slate.900}"
           }
         }
-      }
-    },
-    warning: {
-      DEFAULT: {
-        value: {
-          base: "{colors.yellow.100}",
-          _light: "{colors.yellow.100}",
-          _dark: "{colors.yellow.1000}",
-          _enterprise: "{colors.yellow.100}"
-        }
       },
       hovered: {
         value: {
-          base: "{colors.yellow.200}",
-          _light: "{colors.yellow.200}",
-          _dark: "{colors.yellow.900}",
-          _enterprise: "{colors.yellow.200}"
+          base: "{colors.neutral.100}",
+          _light: "{colors.neutral.100}",
+          _dark: "{colors.dark.250}",
+          _enterprise: "{colors.slate.100}"
         }
       },
       pressed: {
         value: {
-          base: "{colors.yellow.300}",
-          _light: "{colors.yellow.300}",
-          _dark: "{colors.yellow.800}",
-          _enterprise: "{colors.yellow.300}"
+          base: "{colors.neutral.200}",
+          _light: "{colors.neutral.200}",
+          _dark: "{colors.dark.300}",
+          _enterprise: "{colors.slate.200}"
         }
       },
       selected: {
         value: {
-          base: "{colors.yellow.200}",
-          _light: "{colors.yellow.200}",
-          _dark: "{colors.yellow.900}",
-          _enterprise: "{colors.yellow.200}"
+          base: "{colors.neutral.100}",
+          _light: "{colors.neutral.100}",
+          _dark: "{colors.dark.250}",
+          _enterprise: "{colors.slate.100}"
         }
       },
-      bold: {
+      subtle: {
         DEFAULT: {
           value: {
-            base: "{colors.yellow.300}",
-            _light: "{colors.yellow.300}",
-            _dark: "{colors.yellow.300}",
-            _enterprise: "{colors.yellow.300}"
+            base: "{colors.neutral.200}",
+            _light: "{colors.neutral.200}",
+            _dark: "{colors.dark.300}",
+            _enterprise: "{colors.slate.100}"
           }
         },
         hovered: {
           value: {
-            base: "{colors.yellow.400}",
-            _light: "{colors.yellow.400}",
-            _dark: "{colors.yellow.400}",
-            _enterprise: "{colors.yellow.400}"
+            base: "{colors.neutral.300}",
+            _light: "{colors.neutral.300}",
+            _dark: "{colors.dark.350}",
+            _enterprise: "{colors.slate.200}"
           }
         },
         pressed: {
           value: {
-            base: "{colors.yellow.500}",
-            _light: "{colors.yellow.500}",
-            _dark: "{colors.yellow.500}",
-            _enterprise: "{colors.yellow.500}"
+            base: "{colors.neutral.400}",
+            _light: "{colors.neutral.400}",
+            _dark: "{colors.dark.400}",
+            _enterprise: "{colors.slate.300}"
           }
         },
         selected: {
           value: {
-            base: "{colors.yellow.400}",
-            _light: "{colors.yellow.400}",
-            _dark: "{colors.yellow.400}",
-            _enterprise: "{colors.yellow.400}"
+            base: "{colors.neutral.300}",
+            _light: "{colors.neutral.300}",
+            _dark: "{colors.dark.350}",
+            _enterprise: "{colors.slate.200}"
           }
         }
       }
     },
+    overlay: {
+      value: {
+        base: "#232933cc",
+        _light: "#232933cc",
+        _dark: "#657f99cc",
+        _enterprise: "#222222cc"
+      }
+    },
+    shadow: {
+      value: {
+        base: "#1d1f2429",
+        _light: "#1d1f2429",
+        _dark: "{colors.dark.DEFAULT}",
+        _enterprise: "#1d1f2429"
+      }
+    },
+    stage: {
+      value: {
+        base: "{colors.white}",
+        _light: "{colors.white}",
+        _dark: "{colors.dark.100}",
+        _enterprise: "{colors.white}"
+      }
+    },
     success: {
       DEFAULT: {
         value: {
@@ -7725,36 +7746,12 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           _enterprise: "{colors.green.100}"
         }
       },
-      hovered: {
-        value: {
-          base: "{colors.green.200}",
-          _light: "{colors.green.200}",
-          _dark: "{colors.green.900}",
-          _enterprise: "{colors.green.200}"
-        }
-      },
-      pressed: {
-        value: {
-          base: "{colors.green.300}",
-          _light: "{colors.green.300}",
-          _dark: "{colors.green.800}",
-          _enterprise: "{colors.green.300}"
-        }
-      },
-      selected: {
-        value: {
-          base: "{colors.green.200}",
-          _light: "{colors.green.200}",
-          _dark: "{colors.green.900}",
-          _enterprise: "{colors.green.200}"
-        }
-      },
       bold: {
         DEFAULT: {
           value: {
             base: "{colors.green.700}",
             _light: "{colors.green.700}",
-            _dark: "{colors.green.400}",
+            _dark: "{colors.green.500}",
             _enterprise: "{colors.green.700}"
           }
         },
@@ -7762,7 +7759,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           value: {
             base: "{colors.green.800}",
             _light: "{colors.green.800}",
-            _dark: "{colors.green.300}",
+            _dark: "{colors.green.400}",
             _enterprise: "{colors.green.800}"
           }
         },
@@ -7770,7 +7767,7 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           value: {
             base: "{colors.green.900}",
             _light: "{colors.green.900}",
-            _dark: "{colors.green.200}",
+            _dark: "{colors.green.300}",
             _enterprise: "{colors.green.900}"
           }
         },
@@ -7782,188 +7779,164 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
             _enterprise: "{colors.green.800}"
           }
         }
+      },
+      hovered: {
+        value: {
+          base: "{colors.green.200}",
+          _light: "{colors.green.200}",
+          _dark: "{colors.green.900}",
+          _enterprise: "{colors.green.200}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.green.300}",
+          _light: "{colors.green.300}",
+          _dark: "{colors.green.800}",
+          _enterprise: "{colors.green.300}"
+        }
+      },
+      selected: {
+        value: {
+          base: "{colors.green.200}",
+          _light: "{colors.green.200}",
+          _dark: "{colors.green.900}",
+          _enterprise: "{colors.green.200}"
+        }
+      }
+    },
+    surface: {
+      DEFAULT: {
+        value: {
+          base: "#f1f5f9",
+          _light: "#f1f5f9",
+          _dark: "{colors.dark.DEFAULT}",
+          _enterprise: "{colors.slate.100}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.neutral.1000}",
+          _light: "{colors.neutral.1000}",
+          _dark: "{colors.neutral.100}",
+          _enterprise: "{colors.emerald.1000}"
+        }
       }
     },
-    highlight: {
+    tertiary: {
       DEFAULT: {
         value: {
-          base: "{colors.violet.100}",
-          _light: "{colors.violet.100}",
-          _dark: "{colors.violet.1000}",
-          _enterprise: "{colors.violet.100}"
+          base: "{colors.dark.250}",
+          _light: "{colors.dark.250}",
+          _dark: "{colors.dark.250}",
+          _enterprise: "{colors.dark.250}"
         }
       },
       hovered: {
         value: {
-          base: "{colors.violet.200}",
-          _light: "{colors.violet.200}",
-          _dark: "{colors.violet.900}",
-          _enterprise: "{colors.violet.200}"
+          base: "{colors.dark.350}",
+          _light: "{colors.dark.350}",
+          _dark: "{colors.dark.350}",
+          _enterprise: "{colors.dark.300}"
         }
       },
       pressed: {
         value: {
-          base: "{colors.violet.300}",
-          _light: "{colors.violet.300}",
-          _dark: "{colors.violet.800}",
-          _enterprise: "{colors.violet.300}"
+          base: "{colors.dark.400}",
+          _light: "{colors.dark.400}",
+          _dark: "{colors.dark.400}",
+          _enterprise: "{colors.dark.400}"
         }
-      },
-      selected: {
+      }
+    },
+    warning: {
+      DEFAULT: {
         value: {
-          base: "{colors.violet.200}",
-          _light: "{colors.violet.200}",
-          _dark: "{colors.violet.900}",
-          _enterprise: "{colors.violet.200}"
+          base: "{colors.yellow.100}",
+          _light: "{colors.yellow.100}",
+          _dark: "{colors.yellow.1000}",
+          _enterprise: "{colors.yellow.100}"
         }
       },
       bold: {
         DEFAULT: {
           value: {
-            base: "{colors.violet.700}",
-            _light: "{colors.violet.700}",
-            _dark: "{colors.violet.400}",
-            _enterprise: "{colors.violet.700}"
+            base: "{colors.yellow.300}",
+            _light: "{colors.yellow.300}",
+            _dark: "{colors.yellow.300}",
+            _enterprise: "{colors.yellow.300}"
           }
         },
         hovered: {
           value: {
-            base: "{colors.violet.800}",
-            _light: "{colors.violet.800}",
-            _dark: "{colors.violet.300}",
-            _enterprise: "{colors.violet.800}"
+            base: "{colors.yellow.400}",
+            _light: "{colors.yellow.400}",
+            _dark: "{colors.yellow.400}",
+            _enterprise: "{colors.yellow.400}"
           }
         },
         pressed: {
           value: {
-            base: "{colors.violet.900}",
-            _light: "{colors.violet.900}",
-            _dark: "{colors.violet.200}",
-            _enterprise: "{colors.violet.900}"
+            base: "{colors.yellow.500}",
+            _light: "{colors.yellow.500}",
+            _dark: "{colors.yellow.500}",
+            _enterprise: "{colors.yellow.500}"
           }
         },
         selected: {
           value: {
-            base: "{colors.violet.800}",
-            _light: "{colors.violet.800}",
-            _dark: "{colors.violet.300}",
-            _enterprise: "{colors.violet.800}"
+            base: "{colors.yellow.400}",
+            _light: "{colors.yellow.400}",
+            _dark: "{colors.yellow.400}",
+            _enterprise: "{colors.yellow.400}"
           }
         }
-      }
-    },
-    nav: {
-      parent: {
+      },
+      hovered: {
         value: {
-          base: "#E7EDF5",
-          // Doesn't have raw token
-          _light: "#E7EDF5",
-          // Doesn't have raw token
-          _dark: "{colors.dark.100}",
-          _enterprise: "{colors.emerald.1000}"
+          base: "{colors.yellow.200}",
+          _light: "{colors.yellow.200}",
+          _dark: "{colors.yellow.900}",
+          _enterprise: "{colors.yellow.200}"
         }
       },
-      stack: {
-        DEFAULT: {
-          value: {
-            base: "{colors.neutral.100}",
-            _light: "{colors.neutral.100}",
-            _dark: "{colors.dark}",
-            _enterprise: "{colors.neutral.100}"
-          }
-        },
-        hovered: {
-          value: {
-            base: "#E7EDF5",
-            // Doesn't have raw token
-            _light: "#E7EDF5",
-            // Doesn't have raw token
-            _dark: "{colors.dark.100}",
-            _enterprise: "{colors.emerald.200}"
-          }
-        }
-      }
-    },
-    header: {
-      DEFAULT: {
+      pressed: {
         value: {
-          base: "{colors.white}",
-          _light: "{colors.white}",
-          _dark: "{colors.dark.100}",
-          _enterprise: "{colors.emerald.1000}"
+          base: "{colors.yellow.300}",
+          _light: "{colors.yellow.300}",
+          _dark: "{colors.yellow.800}",
+          _enterprise: "{colors.yellow.300}"
         }
       },
-      menu: {
-        hovered: {
-          value: {
-            base: "{colors.transparent}",
-            _light: "{colors.transparent}",
-            _dark: "{colors.transparent}",
-            _enterprise: "#265C5880"
-            // Doesn't have raw token
-          }
-        },
-        selected: {
-          value: {
-            base: "{colors.transparent}",
-            _light: "{colors.transparent}",
-            _dark: "{colors.transparent}",
-            _enterprise: "{colors.lime.300}"
-          }
+      selected: {
+        value: {
+          base: "{colors.yellow.200}",
+          _light: "{colors.yellow.200}",
+          _dark: "{colors.yellow.900}",
+          _enterprise: "{colors.yellow.200}"
         }
       }
-    },
-    airene: {
-      value: {
-        base: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
-        // Doesn't have raw token
-        _light: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)",
-        // Doesn't have raw token
-        _dark: "radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)",
-        // Doesn't have raw token
-        _enterprise: "radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)"
-        // Doesn't have raw token
-      }
     }
   },
-  // NAVIGATION SEMANTIC TOKENS (REMOVE AFTER NAV IN BACKGROUND IS UPDATED)
-  nav: {
-    parent: {
-      deprecated: "use `background.nav.parent` instead",
-      value: {
-        base: "#E7EDF5",
-        // Doesn't have raw token
-        _light: "#E7EDF5",
-        // Doesn't have raw token
-        _dark: "{colors.dark.100}",
-        _enterprise: "{colors.emerald.1000}"
-      }
-    },
-    stack: {
+  text: {
+    danger: {
       DEFAULT: {
-        deprecated: "use `background.nav.stack` instead",
         value: {
-          base: "{colors.neutral.100}",
-          _light: "{colors.neutral.100}",
-          _dark: "{colors.dark}",
-          _enterprise: "{colors.neutral.100}"
+          base: "{colors.red.800}",
+          _light: "{colors.red.800}",
+          _dark: "{colors.red.300}",
+          _enterprise: "{colors.red.800}"
         }
       },
-      hovered: {
-        deprecated: "use `background.nav.stack.hovered` instead",
+      pressed: {
         value: {
-          base: "#E7EDF5",
-          // Doesn't have raw token
-          _light: "#E7EDF5",
-          // Doesn't have raw token
-          _dark: "{colors.dark.100}",
-          _enterprise: "{colors.emerald.200}"
+          base: "{colors.red.900}",
+          _light: "{colors.red.900}",
+          _dark: "{colors.red.200}",
+          _enterprise: "{colors.red.900}"
         }
       }
-    }
-  },
-  // TEXT SEMANTIC TOKENS
-  text: {
+    },
     default: {
       DEFAULT: {
         value: {
@@ -7975,39 +7948,13 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
       },
       static: {
         value: {
-          base: "{colors.neutral.1000}",
-          _light: "{colors.neutral.1000}",
-          _dark: "{colors.neutral.1000}",
+          base: "{colors.dark.100}",
+          _light: "{colors.dark.100}",
+          _dark: "{colors.dark.100}",
           _enterprise: "{colors.dark.100}"
         }
       }
     },
-    secondary: {
-      DEFAULT: {
-        value: {
-          base: "{colors.neutral.700}",
-          _light: "{colors.neutral.700}",
-          _dark: "{colors.dark.700}",
-          _enterprise: "{colors.slate.700}"
-        }
-      },
-      pressed: {
-        value: {
-          base: "{colors.neutral.800}",
-          _light: "{colors.neutral.800}",
-          _dark: "{colors.dark.800}",
-          _enterprise: "{colors.slate.800}"
-        }
-      }
-    },
-    placeholder: {
-      value: {
-        base: "{colors.neutral.600}",
-        _light: "{colors.neutral.600}",
-        _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.500}"
-      }
-    },
     disabled: {
       value: {
         base: "{colors.neutral.400a}",
@@ -8016,6 +7963,22 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         _enterprise: "{colors.slate.400}"
       }
     },
+    highlight: {
+      value: {
+        base: "{colors.violet.800}",
+        _light: "{colors.violet.800}",
+        _dark: "{colors.violet.300}",
+        _enterprise: "{colors.violet.800}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}",
+        _enterprise: "{colors.indigo.700}"
+      }
+    },
     inverse: {
       DEFAULT: {
         value: {
@@ -8034,6 +7997,50 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       }
     },
+    link: {
+      DEFAULT: {
+        value: {
+          base: "{colors.indigo.700}",
+          _light: "{colors.indigo.700}",
+          _dark: "{colors.indigo.400}",
+          _enterprise: "#165082"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.indigo.800}",
+          _light: "{colors.indigo.800}",
+          _dark: "{colors.indigo.300}",
+          _enterprise: "#0d4372"
+        }
+      }
+    },
+    placeholder: {
+      value: {
+        base: "{colors.neutral.500}",
+        _light: "{colors.neutral.500}",
+        _dark: "{colors.dark.500}",
+        _enterprise: "{colors.slate.500}"
+      }
+    },
+    secondary: {
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.700}",
+          _light: "{colors.neutral.700}",
+          _dark: "{colors.dark.700}",
+          _enterprise: "{colors.slate.700}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.neutral.800}",
+          _light: "{colors.neutral.800}",
+          _dark: "{colors.dark.800}",
+          _enterprise: "{colors.slate.800}"
+        }
+      }
+    },
     selected: {
       value: {
         base: "{colors.indigo.700}",
@@ -8042,22 +8049,12 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         _enterprise: "{colors.emerald.800}"
       }
     },
-    danger: {
-      DEFAULT: {
-        value: {
-          base: "{colors.red.800}",
-          _light: "{colors.red.800}",
-          _dark: "{colors.red.300}",
-          _enterprise: "{colors.red.800}"
-        }
-      },
-      pressed: {
-        value: {
-          base: "{colors.red.900}",
-          _light: "{colors.red.900}",
-          _dark: "{colors.red.200}",
-          _enterprise: "{colors.red.900}"
-        }
+    success: {
+      value: {
+        base: "{colors.green.800}",
+        _light: "{colors.green.800}",
+        _dark: "{colors.green.300}",
+        _enterprise: "{colors.emerald.800}"
       }
     },
     warning: {
@@ -8077,54 +8074,25 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           _enterprise: "{colors.slate.1000}"
         }
       }
-    },
-    success: {
-      value: {
-        base: "{colors.green.800}",
-        _light: "{colors.green.800}",
-        _dark: "{colors.green.300}",
-        _enterprise: "{colors.emerald.800}"
-      }
-    },
-    highlight: {
+    }
+  },
+  icon: {
+    brand: {
       value: {
-        base: "{colors.violet.800}",
-        _light: "{colors.violet.800}",
-        _dark: "{colors.violet.300}",
-        _enterprise: "{colors.violet.800}"
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}",
+        _enterprise: "{colors.emerald.700}"
       }
     },
-    information: {
+    danger: {
       value: {
-        base: "{colors.indigo.800}",
-        _light: "{colors.indigo.800}",
-        _dark: "{colors.indigo.300}",
-        _enterprise: "{colors.indigo.700}"
+        base: "{colors.red.700}",
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.500}",
+        _enterprise: "{colors.red.700}"
       }
     },
-    link: {
-      DEFAULT: {
-        value: {
-          base: "{colors.indigo.700}",
-          _light: "{colors.indigo.700}",
-          _dark: "{colors.indigo.400}",
-          _enterprise: "#165082"
-          // Doesn't have raw token
-        }
-      },
-      pressed: {
-        value: {
-          base: "{colors.indigo.800}",
-          _light: "{colors.indigo.800}",
-          _dark: "{colors.indigo.300}",
-          _enterprise: "#0D4372"
-          // Doesn't have raw token
-        }
-      }
-    }
-  },
-  // ICON SEMANTIC TOKENS
-  icon: {
     default: {
       value: {
         base: "{colors.neutral.600}",
@@ -8138,7 +8106,23 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         base: "{colors.neutral.400}",
         _light: "{colors.neutral.400}",
         _dark: "{colors.dark.400}",
-        _enterprise: "{colors.neutral.400}"
+        _enterprise: "{colors.slate.400}"
+      }
+    },
+    highlight: {
+      value: {
+        base: "{colors.violet.600}",
+        _light: "{colors.violet.600}",
+        _dark: "{colors.violet.500}",
+        _enterprise: "{colors.orange.700}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.600}",
+        _light: "{colors.indigo.600}",
+        _dark: "{colors.indigo.500}",
+        _enterprise: "{colors.indigo.600}"
       }
     },
     inverse: {
@@ -8159,6 +8143,14 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       }
     },
+    logo: {
+      value: {
+        base: "#000000",
+        _light: "#000000",
+        _dark: "{colors.white}",
+        _enterprise: "#000000"
+      }
+    },
     selected: {
       value: {
         base: "{colors.indigo.700}",
@@ -8167,29 +8159,29 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         _enterprise: "{colors.emerald.700}"
       }
     },
-    brand: {
+    subtle: {
       value: {
-        base: "{colors.indigo.700}",
-        _light: "{colors.indigo.700}",
-        _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.700}"
+        base: "{colors.neutral.300}",
+        _light: "{colors.neutral.300}",
+        _dark: "{colors.dark.300}",
+        _enterprise: "{colors.slate.300}"
       }
     },
-    danger: {
+    success: {
       value: {
-        base: "{colors.red.700}",
-        _light: "{colors.red.700}",
-        _dark: "{colors.red.400}",
-        _enterprise: "{colors.red.700}"
+        base: "{colors.green.600}",
+        _light: "{colors.green.600}",
+        _dark: "{colors.green.500}",
+        _enterprise: "{colors.emerald.600}"
       }
     },
     warning: {
       DEFAULT: {
         value: {
-          base: "{colors.orange.700}",
-          _light: "{colors.orange.700}",
+          base: "{colors.orange.600}",
+          _light: "{colors.orange.600}",
           _dark: "{colors.yellow.300}",
-          _enterprise: "{colors.orange.700}"
+          _enterprise: "{colors.orange.600}"
         }
       },
       inverse: {
@@ -8200,53 +8192,33 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           _enterprise: "{colors.slate.1000}"
         }
       }
-    },
-    success: {
-      value: {
-        base: "{colors.green.700}",
-        _light: "{colors.green.700}",
-        _dark: "{colors.green.400}",
-        _enterprise: "{colors.emerald.600}"
-      }
-    },
-    highlight: {
+    }
+  },
+  border: {
+    bold: {
       value: {
-        base: "{colors.violet.700}",
-        _light: "{colors.violet.700}",
-        _dark: "{colors.violet.400}",
-        _enterprise: "{colors.orange.700}"
+        base: "{colors.neutral.600}",
+        _light: "{colors.neutral.600}",
+        _dark: "{colors.dark.600}",
+        _enterprise: "{colors.slate.400}"
       }
     },
-    information: {
+    brand: {
       value: {
         base: "{colors.indigo.700}",
         _light: "{colors.indigo.700}",
         _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.indigo.600}"
+        _enterprise: "{colors.emerald.800}"
       }
     },
-    subtle: {
+    danger: {
       value: {
-        base: "{colors.neutral.300}",
-        _light: "{colors.neutral.300}",
-        _dark: "{colors.dark.300}",
-        _enterprise: "{colors.slate.300}"
+        base: "{colors.red.600}",
+        _light: "{colors.red.600}",
+        _dark: "{colors.red.500}",
+        _enterprise: "{colors.red.600}"
       }
     },
-    logo: {
-      value: {
-        base: "#000000",
-        // Doesn't have raw token
-        _light: "#000000",
-        // Doesn't have raw token
-        _dark: "{colors.white}",
-        _enterprise: "#000000"
-        // Doesn't have raw token
-      }
-    }
-  },
-  // BORDER SEMANTIC TOKENS
-  border: {
     default: {
       DEFAULT: {
         value: {
@@ -8265,14 +8237,6 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       }
     },
-    bold: {
-      value: {
-        base: "{colors.neutral.600}",
-        _light: "{colors.neutral.600}",
-        _dark: "{colors.dark.600}",
-        _enterprise: "{colors.slate.400}"
-      }
-    },
     disabled: {
       value: {
         base: "{colors.neutral.200a}",
@@ -8281,6 +8245,14 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         _enterprise: "{colors.slate.200}"
       }
     },
+    focused: {
+      value: {
+        base: "{colors.indigo.500}",
+        _light: "{colors.indigo.500}",
+        _dark: "{colors.indigo.300}",
+        _enterprise: "{colors.emerald.500}"
+      }
+    },
     form: {
       value: {
         base: "{colors.neutral.300a}",
@@ -8289,12 +8261,20 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         _enterprise: "{colors.slate.300a}"
       }
     },
-    focused: {
+    highlight: {
       value: {
-        base: "{colors.indigo.500}",
-        _light: "{colors.indigo.500}",
-        _dark: "{colors.indigo.300}",
-        _enterprise: "{colors.emerald.500}"
+        base: "{colors.violet.600}",
+        _light: "{colors.violet.600}",
+        _dark: "{colors.violet.500}",
+        _enterprise: "{colors.orange.700}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.600}",
+        _light: "{colors.indigo.600}",
+        _dark: "{colors.indigo.500}",
+        _enterprise: "{colors.indigo.600}"
       }
     },
     inverse: {
@@ -8314,14 +8294,6 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           _enterprise: "{colors.emerald.700}"
         }
       },
-      hovered: {
-        value: {
-          base: "{colors.indigo.800}",
-          _light: "{colors.indigo.800}",
-          _dark: "{colors.indigo.300}",
-          _enterprise: "{colors.emerald.800}"
-        }
-      },
       disabled: {
         value: {
           base: "{colors.indigo.200}",
@@ -8329,58 +8301,35 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
           _dark: "{colors.indigo.900}",
           _enterprise: "{colors.emerald.200}"
         }
-      }
-    },
-    brand: {
-      value: {
-        base: "{colors.indigo.700}",
-        _light: "{colors.indigo.700}",
-        _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.emerald.800}"
-      }
-    },
-    danger: {
-      value: {
-        base: "{colors.red.700}",
-        _light: "{colors.red.700}",
-        _dark: "{colors.red.400}",
-        _enterprise: "{colors.red.600}"
-      }
-    },
-    warning: {
-      value: {
-        base: "{colors.yellow.300}",
-        _light: "{colors.yellow.300}",
-        _dark: "{colors.yellow.300}",
-        _enterprise: "{colors.yellow.300}"
+      },
+      hovered: {
+        value: {
+          base: "{colors.indigo.800}",
+          _light: "{colors.indigo.800}",
+          _dark: "{colors.indigo.300}",
+          _enterprise: "{colors.emerald.800}"
+        }
       }
     },
     success: {
       value: {
-        base: "{colors.green.700}",
-        _light: "{colors.green.700}",
-        _dark: "{colors.green.400}",
+        base: "{colors.green.600}",
+        _light: "{colors.green.600}",
+        _dark: "{colors.green.500}",
         _enterprise: "{colors.emerald.700}"
       }
     },
-    highlight: {
-      value: {
-        base: "{colors.violet.700}",
-        _light: "{colors.violet.700}",
-        _dark: "{colors.violet.400}",
-        _enterprise: "{colors.orange.700}"
-      }
-    },
-    information: {
-      value: {
-        base: "{colors.indigo.700}",
-        _light: "{colors.indigo.700}",
-        _dark: "{colors.indigo.400}",
-        _enterprise: "{colors.indigo.600}"
+    warning: {
+      DEFAULT: {
+        value: {
+          base: "{colors.yellow.300}",
+          _light: "{colors.yellow.300}",
+          _dark: "{colors.yellow.300}",
+          _enterprise: "{colors.yellow.300}"
+        }
       }
     }
   },
-  // CHART SEMANTIC TOKENS
   chart: {
     cat01: {
       DEFAULT: {
@@ -8459,16 +8408,16 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         value: {
           base: "{colors.neutral.400}",
           _light: "{colors.neutral.400}",
-          _dark: "{colors.neutral.300}",
+          _dark: "{colors.dark.600}",
           _enterprise: "{colors.neutral.400}"
         }
       },
       bold: {
         value: {
-          base: "{colors.neutral.600}",
-          _light: "{colors.neutral.600}",
-          _dark: "{colors.neutral.500}",
-          _enterprise: "{colors.slate.600}"
+          base: "{colors.neutral.500}",
+          _light: "{colors.neutral.500}",
+          _dark: "{colors.dark.400}",
+          _enterprise: "{colors.neutral.500}"
         }
       }
     },
@@ -8526,6 +8475,37 @@ var colors3 = import_dev67.defineSemanticTokens.colors({
         }
       }
     }
+  },
+  nav: {
+    parent: {
+      deprecated: "use `background.nav.parent` instead",
+      value: {
+        base: "#e7edf5",
+        _light: "#e7edf5",
+        _dark: "{colors.dark.100}",
+        _enterprise: "{colors.emerald.1000}"
+      }
+    },
+    stack: {
+      DEFAULT: {
+        deprecated: "use `background.nav.stack` instead",
+        value: {
+          base: "{colors.neutral.100}",
+          _light: "{colors.neutral.100}",
+          _dark: "{colors.dark.DEFAULT}",
+          _enterprise: "{colors.neutral.100}"
+        }
+      },
+      hovered: {
+        deprecated: "use `background.nav.stack.hovered` instead",
+        value: {
+          base: "#e7edf5",
+          _light: "#e7edf5",
+          _dark: "{colors.dark.100}",
+          _enterprise: "{colors.emerald.200}"
+        }
+      }
+    }
   }
 });
 
@@ -8534,57 +8514,90 @@ var import_dev68 = require("@pandacss/dev");
 var spacing3 = import_dev68.defineSemanticTokens.spacing({
   "4xs": {
     value: {
-      base: "0.125rem"
+      base: "{spacing.0.5}",
+      _light: "{spacing.0.5}",
+      _dark: "{spacing.0.5}",
+      _enterprise: "{spacing.0.5}"
     }
   },
   "3xs": {
     value: {
-      base: "{spacing.1}"
+      base: "{spacing.1}",
+      _light: "{spacing.1}",
+      _dark: "{spacing.1}",
+      _enterprise: "{spacing.1}"
     }
   },
   "2xs": {
     value: {
-      base: "0.375rem"
+      base: "{spacing.1.5}",
+      _light: "{spacing.1.5}",
+      _dark: "{spacing.1.5}",
+      _enterprise: "{spacing.1.5}"
     }
   },
   xs: {
     value: {
-      base: "{spacing.2}"
+      base: "{spacing.2}",
+      _light: "{spacing.2}",
+      _dark: "{spacing.2}",
+      _enterprise: "{spacing.2}"
     }
   },
   sm: {
     value: {
-      base: "{spacing.3}"
+      base: "{spacing.3}",
+      _light: "{spacing.3}",
+      _dark: "{spacing.3}",
+      _enterprise: "{spacing.3}"
     }
   },
   md: {
     value: {
-      base: "{spacing.4}"
+      base: "{spacing.4}",
+      _light: "{spacing.4}",
+      _dark: "{spacing.4}",
+      _enterprise: "{spacing.4}"
     }
   },
   lg: {
     value: {
-      base: "{spacing.5}"
+      base: "{spacing.5}",
+      _light: "{spacing.5}",
+      _dark: "{spacing.5}",
+      _enterprise: "{spacing.5}"
     }
   },
   xl: {
     value: {
-      base: "{spacing.6}"
+      base: "{spacing.6}",
+      _light: "{spacing.6}",
+      _dark: "{spacing.6}",
+      _enterprise: "{spacing.6}"
     }
   },
   "2xl": {
     value: {
-      base: "{spacing.8}"
+      base: "{spacing.8}",
+      _light: "{spacing.8}",
+      _dark: "{spacing.8}",
+      _enterprise: "{spacing.8}"
     }
   },
   "3xl": {
     value: {
-      base: "{spacing.10}"
+      base: "{spacing.10}",
+      _light: "{spacing.10}",
+      _dark: "{spacing.10}",
+      _enterprise: "{spacing.10}"
     }
   },
   "4xl": {
     value: {
-      base: "{spacing.20}"
+      base: "{spacing.20}",
+      _light: "{spacing.20}",
+      _dark: "{spacing.20}",
+      _enterprise: "{spacing.20}"
     }
   }
 });