@mekari/pixel3-theme 0.2.1 → 0.2.2-dev.0

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev54 = require("@pandacss/dev");
+var import_dev63 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -40,6 +40,7 @@ var conditions = {
   extend: {
     disabled: "&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])",
     invalid: "&:is([aria-invalid=true], [data-invalid])",
+    active: "&:is(:active, [data-active], [data-active=true])",
     checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
     indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
     closed: "&:is([data-state=closed])",
@@ -49,13 +50,15 @@ var conditions = {
     loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
     hasIcon: "&[data-has-icon=true]",
     hasLabel: "&[data-has-label=true]",
-    active: "&[data-active=true], [data-active]",
     highlight: "&[data-highlight=true], [data-highlight]",
     hasBorder: "&[data-has-border=true]",
     hasBackground: "&[data-has-background=true]",
     isFullWidth: "&[data-is-full-width=true]",
     placementLeft: "&[data-placement=left]",
-    placementRight: "&[data-placement=right]"
+    placementRight: "&[data-placement=right]",
+    nextTheme: "[data-panda-theme=next] &",
+    light: ".light &",
+    dark: ".dark &"
   }
 };
 
@@ -77,6 +80,10 @@ var globalCss = (0, import_dev.defineGlobalStyles)({
     lineHeight: "var(--mp-line-heights-lg)",
     _dark: {
       colorScheme: "dark"
+    },
+    _nextTheme: {
+      background: "var(--mp-colors-background-neutral)",
+      color: "var(--mp-colors-text-default)"
     }
   },
   "*, *::before, *::after": {
@@ -114,8 +121,7 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       alignItems: "center",
       userSelect: "auto",
       outline: "0px solid transparent",
-      borderWidth: "1px",
-      borderColor: "transparent",
+      borderWidth: "0",
       borderRadius: "sm",
       transition: "all 250ms",
       textAlign: "left",
@@ -127,16 +133,15 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       whiteSpace: "normal",
       overflowWrap: "anywhere",
       cursor: "var(--mp-tag--cursor)",
-      height: "fit-content"
+      height: "fit-content",
+      _nextTheme: {
+        paddingX: "1.5"
+      }
     },
     close: {
       position: "absolute!",
-      color: "gray.600",
       border: "none",
       right: "0",
-      width: "5",
-      height: "5",
-      minWidth: "5",
       paddingTop: "1",
       padding: "0",
       transition: "all 250ms!",
@@ -152,12 +157,20 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
     size: {
       sm: {
         root: {
-          paddingY: "0"
+          height: "5"
+        },
+        close: {
+          width: "5",
+          height: "5"
         }
       },
       md: {
         root: {
-          paddingY: "1"
+          height: "7"
+        },
+        close: {
+          width: "7",
+          height: "7"
         }
       }
     },
@@ -165,13 +178,21 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       gray: {
         root: {
           color: "gray.600",
-          background: "gray.50"
+          background: "gray.50",
+          _nextTheme: {
+            color: "text.secondary",
+            background: "background.neutral.subtle"
+          }
         }
       },
       red: {
         root: {
           color: "red.400",
-          backgroundColor: "red.50"
+          backgroundColor: "red.50",
+          _nextTheme: {
+            color: "text.danger",
+            background: "background.danger"
+          }
         }
       }
     }
@@ -181,7 +202,15 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       variant: "gray",
       css: {
         close: {
-          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)"
+          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)",
+          borderTopLeftRadius: "0",
+          borderBottomLeftRadius: "0",
+          color: "gray.600",
+          _nextTheme: {
+            background: "background.danger",
+            boxShadow: "-7px 0px 15px -3px #0000001A",
+            color: "icon.danger"
+          }
         }
       }
     },
@@ -189,7 +218,15 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       variant: "red",
       css: {
         close: {
-          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)"
+          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)",
+          borderTopLeftRadius: "0",
+          borderBottomLeftRadius: "0",
+          color: "red.400",
+          _nextTheme: {
+            background: "background.danger",
+            boxShadow: "-7px 0px 15px -3px #0000001A",
+            color: "icon.danger"
+          }
         }
       }
     },
@@ -210,31 +247,76 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
 var import_dev4 = require("@pandacss/dev");
 var variantColor = {
   gray: {
-    root: { backgroundColor: "gray.50" }
+    root: {
+      backgroundColor: "gray.50",
+      _nextTheme: {
+        backgroundColor: "background.neutral.subtle"
+      }
+    }
   },
   sky: {
-    root: { backgroundColor: "sky.400" }
+    root: {
+      backgroundColor: "sky.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat01"
+      }
+    }
   },
   teal: {
-    root: { backgroundColor: "teal.400" }
+    root: {
+      backgroundColor: "teal.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat02"
+      }
+    }
   },
   violet: {
-    root: { backgroundColor: "violet.400" }
+    root: {
+      backgroundColor: "violet.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat03"
+      }
+    }
   },
   amber: {
-    root: { backgroundColor: "amber.400" }
+    root: {
+      backgroundColor: "amber.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat04"
+      }
+    }
   },
   rose: {
-    root: { backgroundColor: "rose.400" }
+    root: {
+      backgroundColor: "rose.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat06"
+      }
+    }
   },
   stone: {
-    root: { backgroundColor: "stone.400" }
+    root: {
+      backgroundColor: "stone.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat05"
+      }
+    }
   },
   lime: {
-    root: { backgroundColor: "lime.400" }
+    root: {
+      backgroundColor: "lime.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat07"
+      }
+    }
   },
   pink: {
-    root: { backgroundColor: "pink.400" }
+    root: {
+      backgroundColor: "pink.400",
+      _nextTheme: {
+        backgroundColor: "chart.cat08"
+      }
+    }
   }
 };
 var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
@@ -259,6 +341,9 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
       cursor: "var(--mp-avatar--cursor)",
       _hasBorder: {
         borderWidth: "0.125rem"
+      },
+      _nextTheme: {
+        color: "text.inverse"
       }
     },
     fallback: {
@@ -333,7 +418,12 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
     {
       variantColor: "gray",
       css: {
-        root: { color: "gray.600" }
+        root: {
+          color: "gray.600",
+          _nextTheme: {
+            color: "text.secondary"
+          }
+        }
       }
     }
   ],
@@ -362,7 +452,11 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
       justifyContent: "center",
       borderRadius: "full",
       userSelect: "none",
-      cursor: "var(--mp-avatar-group--cursor)"
+      cursor: "var(--mp-avatar-group--cursor)",
+      _nextTheme: {
+        color: "text.inverse",
+        backgroundColor: "background.brand.bold"
+      }
     }
   },
   variants: {
@@ -398,7 +492,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     gap: "2",
     height: "fit-content",
     width: "fit-content",
-    borderWidth: "1px",
+    borderWidth: "sm",
     whiteSpace: "nowrap",
     userSelect: "none",
     appearance: "none",
@@ -433,6 +527,22 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _loading: {
           background: "blue.400"
+        },
+        _nextTheme: {
+          color: "text.inverse",
+          background: "background.brand.bold",
+          borderColor: "background.brand.bold",
+          _hover: {
+            background: "background.brand.bold.hovered",
+            borderColor: "background.brand.bold.hovered"
+          },
+          _active: {
+            background: "background.brand.bold.pressed",
+            borderColor: "background.brand.bold.pressed"
+          },
+          _loading: {
+            background: "background.brand.bold"
+          }
         }
       },
       secondary: {
@@ -449,6 +559,22 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _loading: {
           background: "white"
+        },
+        _nextTheme: {
+          color: "text.link",
+          background: "background.neutral",
+          borderColor: "border.default",
+          _hover: {
+            background: "background.neutral.hovered",
+            borderColor: "border.default"
+          },
+          _active: {
+            background: "background.neutral.pressed",
+            borderColor: "border.default"
+          },
+          _loading: {
+            background: "background.neutral"
+          }
         }
       },
       ghost: {
@@ -465,6 +591,22 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _loading: {
           background: "transparent"
+        },
+        _nextTheme: {
+          color: "text.secondary",
+          background: "transparent",
+          borderColor: "transparent",
+          _hover: {
+            background: "background.neutral.hovered",
+            borderColor: "background.neutral.hovered"
+          },
+          _active: {
+            background: "background.neutral.pressed",
+            borderColor: "background.neutral.pressed"
+          },
+          _loading: {
+            background: "transparent"
+          }
         }
       },
       danger: {
@@ -479,12 +621,32 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           background: "red.700",
           borderColor: "red.700"
         },
-        _focusVisible: {
+        _focus: {
           borderColor: "red.400",
           boxShadow: "0 0 0 3px #FDECEE"
         },
         _loading: {
           background: "red.400"
+        },
+        _nextTheme: {
+          color: "text.inverse",
+          background: "background.danger.bold",
+          borderColor: "background.danger.bold",
+          _hover: {
+            background: "background.danger.bold.hovered",
+            borderColor: "background.danger.bold.hovered"
+          },
+          _active: {
+            background: "background.danger.bold.pressed",
+            borderColor: "background.danger.bold.pressed"
+          },
+          _focus: {
+            borderColor: "border.focused",
+            boxShadow: "focus"
+          },
+          _loading: {
+            background: "background.danger.bold"
+          }
         }
       },
       textLink: {
@@ -508,6 +670,27 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _loading: {
           background: "white"
+        },
+        _nextTheme: {
+          color: "text.link",
+          background: "transparent",
+          borderColor: "transparent",
+          _hover: {
+            color: "text.link",
+            textDecoration: "underline"
+          },
+          _active: {
+            color: "text.link.pressed"
+          },
+          _disabled: {
+            color: "text.disabled",
+            _hover: {
+              color: "text.disabled"
+            }
+          },
+          _loading: {
+            background: "text.inverse"
+          }
         }
       }
     },
@@ -521,11 +704,19 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _hasIcon: {
           paddingX: "1",
-          paddingY: "1 !important"
+          paddingY: "1 !important",
+          _nextTheme: {
+            paddingX: "3xs !",
+            paddingY: "3xs !important"
+          }
         },
         _hasLabel: {
           paddingX: "2 !important",
-          paddingY: "1"
+          paddingY: "1",
+          _nextTheme: {
+            paddingX: "xs !important",
+            paddingY: "3xs"
+          }
         }
       },
       md: {
@@ -537,11 +728,19 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
         },
         _hasIcon: {
           paddingX: "1.5",
-          paddingY: "1.5 !important"
+          paddingY: "1.5 !important",
+          _nextTheme: {
+            paddingX: "2xs",
+            paddingY: "2xs !important"
+          }
         },
         _hasLabel: {
           paddingX: "4 !important",
-          paddingY: "2"
+          paddingY: "2",
+          _nextTheme: {
+            paddingX: "md !important",
+            paddingY: "xs"
+          }
         }
       }
     }
@@ -551,9 +750,13 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
       variant: ["textLink"],
       css: {
         borderRadius: "sm",
-        _focusVisible: {
+        _focus: {
           borderColor: "white",
-          boxShadow: "focus"
+          boxShadow: "focus",
+          _nextTheme: {
+            borderColor: "border.focused",
+            boxShadow: "focus"
+          }
         }
       }
     },
@@ -566,9 +769,13 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
     {
       variant: ["primary", "secondary", "ghost"],
       css: {
-        _focusVisible: {
+        _focus: {
           borderColor: "blue.400",
-          boxShadow: "focus"
+          boxShadow: "focus",
+          _nextTheme: {
+            borderColor: "border.focused",
+            boxShadow: "focus"
+          }
         }
       }
     },
@@ -583,6 +790,15 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           _hover: {
             background: "gray.50",
             borderColor: "gray.50"
+          },
+          _nextTheme: {
+            color: "text.disabled",
+            background: "background.disabled",
+            borderColor: "background.disabled",
+            _hover: {
+              background: "background.disabled",
+              borderColor: "background.disabled"
+            }
           }
         }
       }
@@ -654,11 +870,22 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "inherit",
       borderRadius: "sm",
-      paddingInline: "12px",
+      paddingInline: "3",
       appearance: "none",
+      caretColor: "blue.500",
       transition: "all 250ms",
       _isFullWidth: {
         width: "full"
+      },
+      _placeholder: {
+        color: "gray.400"
+      },
+      _nextTheme: {
+        color: "text.default",
+        caretColor: "border.selected",
+        _placeholder: {
+          borderColor: "text.placeholder"
+        }
       }
     },
     clear: {
@@ -677,6 +904,9 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       _groupHover: {
         visibility: "var(--mp-input--visibility)",
         opacity: "var(--mp-input--opacity)"
+      },
+      _nextTheme: {
+        color: "icon.default"
       }
     }
   },
@@ -721,6 +951,42 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
           _readOnly: {
             boxShadow: "none",
             userSelect: "all"
+          },
+          _nextTheme: {
+            backgroundColor: "background.neutral",
+            borderColor: "border.form",
+            _hover: {
+              borderColor: "border.form",
+              backgroundColor: "background.neutral.hovered",
+              _invalid: {
+                borderColor: "border.danger"
+              }
+            },
+            _focus: {
+              borderColor: "border.focused",
+              boxShadow: "focus",
+              _hover: {
+                borderColor: "border.focused"
+              },
+              _invalid: {
+                borderColor: "border.focused",
+                _hover: {
+                  borderColor: "border.focused"
+                }
+              }
+            },
+            _disabled: {
+              color: "text.disabled",
+              backgroundColor: "background.disabled",
+              borderColor: "border.disabled",
+              _hover: {
+                borderColor: "border.disabled",
+                backgroundColor: "background.disabled"
+              }
+            },
+            _invalid: {
+              borderColor: "border.danger"
+            }
           }
         }
       }
@@ -777,7 +1043,7 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       },
       "&[data-with-left-bg-addon=true]": {
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
-          paddingLeft: "calc(var(--mp-input-offset--left) + 12px)"
+          paddingLeft: "calc(var(--mp-input-offset--left) + 14px)"
         }
       },
       "&[data-with-right-addon=true]": {
@@ -795,7 +1061,7 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       },
       "&[data-with-right-bg-addon=true]": {
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
-          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+          paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
@@ -805,6 +1071,17 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
             "--mp-input--right": "calc(var(--mp-input-offset--right) + 16px)"
           }
         }
+      },
+      _nextTheme: {
+        "&:has(input:hover) [data-pixel-component=MpInputAddon][data-has-background=true]": {
+          backgroundColor: "background.neutral.subtle.hovered"
+        },
+        "&:has(input:focus) [data-pixel-component=MpInputAddon][data-has-background=true]": {
+          backgroundColor: "background.neutral.subtle.pressed"
+        },
+        "&:has(input:disabled) [data-pixel-component=MpInputAddon][data-has-background=true]": {
+          backgroundColor: "background.neutral.subtle.pressed"
+        }
       }
     }
   },
@@ -824,8 +1101,14 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       paddingX: "0",
       whiteSpace: "nowrap",
       zIndex: "2",
+      transition: "all 250ms",
       _hasBackground: {
         backgroundColor: "gray.50"
+      },
+      _nextTheme: {
+        _hasBackground: {
+          backgroundColor: "background.neutral.subtle"
+        }
       }
     }
   },
@@ -859,11 +1142,11 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       },
       md: {
         root: {
-          height: "7.5",
+          height: "32px",
           borderRadius: "sm",
           _hasBackground: {
-            _placementLeft: { left: "1" },
-            _placementRight: { right: "1" }
+            _placementLeft: { left: "3px" },
+            _placementRight: { right: "3px" }
           }
         }
       }
@@ -934,6 +1217,48 @@ var selectSlotRecipe = (0, import_dev7.defineSlotRecipe)({
       },
       _isFullWidth: {
         width: "full"
+      },
+      _placeholder: {
+        color: "gray.400"
+      },
+      _nextTheme: {
+        backgroundColor: "background.neutral",
+        borderColor: "border.form",
+        _hover: {
+          borderColor: "border.form",
+          backgroundColor: "background.neutral.hovered",
+          _invalid: {
+            borderColor: "border.danger"
+          }
+        },
+        _focus: {
+          borderColor: "transparent",
+          boxShadow: "focus",
+          _hover: {
+            borderColor: "transparent"
+          },
+          _invalid: {
+            borderColor: "transparent",
+            _hover: {
+              borderColor: "transparent"
+            }
+          }
+        },
+        _disabled: {
+          color: "text.disabled",
+          backgroundColor: "background.disabled",
+          borderColor: "border.disabled",
+          _hover: {
+            borderColor: "border.disabled",
+            backgroundColor: "background.disabled"
+          }
+        },
+        _invalid: {
+          borderColor: "border.danger"
+        },
+        _placeholder: {
+          borderColor: "text.placeholder"
+        }
       }
     },
     clear: {
@@ -1134,12 +1459,22 @@ var accordionSlotRecipe = (0, import_dev11.defineSlotRecipe)({
       fontWeight: "semiBold",
       fontSize: "md",
       color: "dark",
-      _disabled: { opacity: "0.4", cursor: "not-allowed" }
+      _disabled: { opacity: "0.4", cursor: "not-allowed" },
+      _nextTheme: {
+        color: "text.default"
+      }
     },
     item: {
       borderBottomWidth: "1px",
       borderColor: "gray.100",
-      _last: { borderBottomWidth: "1px", borderColor: "gray.100" }
+      _last: {
+        borderBottomWidth: "1px",
+        borderColor: "gray.100",
+        _nextTheme: { borderColor: "border.default" }
+      },
+      _nextTheme: {
+        borderColor: "border.default"
+      }
     },
     panel: {
       py: 3
@@ -1178,7 +1513,10 @@ var popoverContentRecipe = (0, import_dev12.defineRecipe)({
         shadow: "lg",
         borderWidth: "1px",
         borderColor: "gray.400",
-        zIndex: "popover"
+        zIndex: "popover",
+        _nextTheme: {
+          borderColor: "border.bold"
+        }
       }
     },
     isDark: {
@@ -1187,7 +1525,10 @@ var popoverContentRecipe = (0, import_dev12.defineRecipe)({
         color: "white"
       },
       false: {
-        background: "white"
+        background: "white",
+        _nextTheme: {
+          background: "background.stage"
+        }
       }
     }
   },
@@ -1226,19 +1567,32 @@ var popoverListItemRecipe = (0, import_dev12.defineRecipe)({
     _disabled: {
       color: "gray.400",
       bg: "white",
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      _nextTheme: {
+        background: "background.disabled",
+        color: "text.disabled"
+      }
     },
     _highlight: {
-      background: "white",
-      bg: "gray.50",
+      background: "gray.50",
       color: "dark",
-      outline: 0
+      outline: 0,
+      _nextTheme: {
+        background: "background.neutral.hovered",
+        color: "text.default"
+      }
     },
     _active: {
       background: "ice.50",
-      bg: "ice.50",
       color: "dark",
-      outline: 0
+      outline: 0,
+      _nextTheme: {
+        background: "background.brand.selected",
+        color: "text.default"
+      }
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   }
 });
@@ -1259,150 +1613,271 @@ var badgeRecipe = (0, import_dev13.defineRecipe)({
       solid: {
         color: "white"
       },
-      subtle: {}
+      subtle: {},
+      "additionalInformation": {},
+      "tableStatus": {},
+      indicator: {}
     },
     variantColor: {
       blue: {},
       green: {},
       orange: {},
       red: {},
-      gray: {}
+      gray: {},
+      announcement: {},
+      information: {},
+      warning: {},
+      completed: {},
+      critical: {}
     },
     size: {
       sm: {
         fontSize: "xs",
         fontWeight: "semiBold",
         lineHeight: "0",
-        letterSpacing: "normal",
-        minWidth: "4",
-        height: "4"
+        letterSpacing: "normal"
       },
       md: {
         fontSize: "md",
         fontWeight: "regular",
         lineHeight: "0",
-        letterSpacing: "normal",
-        minWidth: "5",
-        height: "5"
+        letterSpacing: "normal"
       }
     }
   },
   compoundVariants: [
     // Size
     {
-      variant: "solid",
+      variant: ["solid", "additionalInformation", "tableStatus"],
       size: "md",
       css: {
         paddingX: "1.5",
-        paddingY: "0.5"
+        paddingY: "0.5",
+        minWidth: "5",
+        height: "5"
       }
     },
     {
-      variant: "solid",
+      variant: ["solid", "additionalInformation", "tableStatus"],
       size: "sm",
       css: {
         paddingX: "1",
-        paddingY: "0.5"
+        paddingY: "0.5",
+        minWidth: "4",
+        height: "4"
       }
     },
     {
-      variant: "subtle",
+      variant: ["subtle", "additionalInformation", "tableStatus"],
       size: "md",
       css: {
         paddingX: "2",
-        paddingY: "0"
+        paddingY: "0",
+        minWidth: "5",
+        height: "5"
       }
     },
     {
-      variant: "subtle",
+      variant: ["subtle", "additionalInformation", "tableStatus"],
       size: "sm",
       css: {
         paddingX: "1",
-        paddingY: "0"
+        paddingY: "0",
+        minWidth: "4",
+        height: "4"
       }
     },
-    // Solid
     {
-      variant: "solid",
-      variantColor: "blue",
+      variant: "indicator",
+      size: ["sm", "md"],
       css: {
-        backgroundColor: "sky.400"
+        width: "3",
+        height: "3"
       }
     },
+    // Solid / Additional Information
     {
-      variant: "solid",
-      variantColor: "green",
+      variant: ["solid", "additionalInformation"],
+      variantColor: ["blue", "information"],
       css: {
-        backgroundColor: "teal.400"
+        backgroundColor: "sky.400",
+        color: "white",
+        _nextTheme: {
+          backgroundColor: "background.brand.bold",
+          color: "text.inverse"
+        }
       }
     },
     {
-      variant: "solid",
-      variantColor: "orange",
+      variant: ["solid", "additionalInformation"],
+      variantColor: ["green", "completed"],
       css: {
-        backgroundColor: "amber.400"
+        backgroundColor: "teal.400",
+        color: "white",
+        _nextTheme: {
+          backgroundColor: "background.success.bold",
+          color: "text.inverse"
+        }
       }
     },
     {
-      variant: "solid",
-      variantColor: "red",
+      variant: ["solid", "additionalInformation"],
+      variantColor: ["orange", "warning"],
       css: {
-        backgroundColor: "rose.400"
+        backgroundColor: "amber.400",
+        color: "white",
+        _nextTheme: {
+          backgroundColor: "background.warning.bold",
+          color: "text.warning.inverse"
+        }
       }
     },
     {
-      variant: "solid",
-      variantColor: "gray",
+      variant: ["solid", "additionalInformation"],
+      variantColor: ["red", "critical"],
       css: {
-        backgroundColor: "stone.400"
+        backgroundColor: "rose.400",
+        color: "white",
+        _nextTheme: {
+          backgroundColor: "background.danger.bold",
+          color: "text.inverse"
+        }
       }
     },
-    // Subtle
     {
-      variant: ["subtle"],
-      variantColor: "blue",
+      variant: ["solid", "additionalInformation"],
+      variantColor: ["gray", "announcement"],
+      css: {
+        backgroundColor: "stone.400",
+        color: "white",
+        _nextTheme: {
+          backgroundColor: "background.neutral.bold",
+          color: "text.inverse"
+        }
+      }
+    },
+    // Subtle / Table Status
+    {
+      variant: ["subtle", "tableStatus"],
+      variantColor: ["blue", "information"],
       css: {
         backgroundColor: "blue.50",
-        color: "blue.700"
+        color: "blue.700",
+        _nextTheme: {
+          backgroundColor: "background.brand",
+          color: "text.information"
+        }
       }
     },
     {
-      variant: ["subtle"],
-      variantColor: "green",
+      variant: ["subtle", "tableStatus"],
+      variantColor: ["green", "completed"],
       css: {
         backgroundColor: "green.50",
-        color: "green.700"
+        color: "green.700",
+        _nextTheme: {
+          backgroundColor: "background.success",
+          color: "text.success"
+        }
       }
     },
     {
-      variant: ["subtle"],
-      variantColor: "orange",
+      variant: ["subtle", "tableStatus"],
+      variantColor: ["orange", "warning"],
       css: {
         backgroundColor: "orange.50",
-        color: "orange.700"
+        color: "orange.700",
+        _nextTheme: {
+          backgroundColor: "background.warning",
+          color: "text.warning"
+        }
       }
     },
     {
-      variant: ["subtle"],
-      variantColor: "red",
+      variant: ["subtle", "tableStatus"],
+      variantColor: ["red", "critical"],
       css: {
         backgroundColor: "red.50",
-        color: "red.700"
+        color: "red.700",
+        _nextTheme: {
+          backgroundColor: "background.danger",
+          color: "text.danger"
+        }
       }
     },
     {
-      variant: ["subtle"],
-      variantColor: "gray",
+      variant: ["subtle", "tableStatus"],
+      variantColor: ["gray", "announcement"],
       css: {
         backgroundColor: "gray.50",
-        color: "black"
+        color: "black",
+        _nextTheme: {
+          color: "text.default",
+          backgroundColor: "background.neutral.subtle"
+        }
+      }
+    },
+    // Indicator
+    {
+      variant: "indicator",
+      variantColor: ["blue", "information"],
+      css: {
+        backgroundColor: "sky.400",
+        _nextTheme: {
+          backgroundColor: "icon.brand",
+          color: "text.inverse"
+        }
+      }
+    },
+    {
+      variant: "indicator",
+      variantColor: ["green", "completed"],
+      css: {
+        backgroundColor: "teal.400",
+        _nextTheme: {
+          backgroundColor: "icon.success",
+          color: "text.inverse"
+        }
+      }
+    },
+    {
+      variant: "indicator",
+      variantColor: ["orange", "warning"],
+      css: {
+        backgroundColor: "amber.400",
+        _nextTheme: {
+          backgroundColor: "icon.warning",
+          color: "text.warning.inverse"
+        }
+      }
+    },
+    {
+      variant: "indicator",
+      variantColor: ["red", "critical"],
+      css: {
+        backgroundColor: "rose.400",
+        _nextTheme: {
+          backgroundColor: "icon.danger",
+          color: "text.inverse"
+        }
+      }
+    },
+    {
+      variant: "indicator",
+      variantColor: ["gray", "announcement"],
+      css: {
+        backgroundColor: "stone.400",
+        _nextTheme: {
+          color: "text.inverse",
+          backgroundColor: "icon.default"
+        }
       }
     }
   ],
   defaultVariants: {
-    variant: "solid",
+    variant: "additionalInformation",
     size: "md",
-    variantColor: "blue"
+    variantColor: "information"
   }
 });
 
@@ -1412,54 +1887,8 @@ var textareaRecipe = (0, import_dev14.defineRecipe)({
   className: "textarea",
   jsx: ["MpTextarea", "mp-textarea"],
   base: {
-    position: "relative",
-    display: "flex",
-    alignItems: "center",
-    outline: "0",
-    borderWidth: "1px",
-    borderColor: "gray.100",
-    borderRadius: "md",
-    color: "dark",
-    backgroundColor: "white",
-    appearance: "none",
-    transition: "all 250ms",
     minHeight: "20",
-    fontSize: "md",
-    fontWeight: "regular",
-    lineHeight: "md",
-    paddingX: "3",
-    paddingTop: "2",
-    paddingBottom: "5",
-    resize: "both",
-    _isFullWidth: {
-      width: "full"
-    },
-    _hover: {
-      borderColor: "gray.400"
-    },
-    _focus: {
-      borderColor: "blue.500",
-      boxShadow: "outer",
-      _hover: {
-        borderColor: "blue.500"
-      },
-      _invalid: {
-        borderColor: "red.400"
-      }
-    },
-    _disabled: {
-      color: "gray.400",
-      backgroundColor: "gray.50",
-      borderColor: "gray.100",
-      cursor: "not-allowed"
-    },
-    _invalid: {
-      borderColor: "red.400"
-    },
-    _readOnly: {
-      boxShadow: "none",
-      userSelect: "all"
-    }
+    resize: "both"
   }
 });
 
@@ -1482,7 +1911,11 @@ var tooltipRecipe = (0, import_dev15.defineRecipe)({
     bg: "overlay",
     color: "white",
     whiteSpace: "normal",
-    overflowWrap: "break-word"
+    overflowWrap: "break-word",
+    _nextTheme: {
+      background: "background.overlay",
+      color: "text.inverse.static"
+    }
   }
 });
 
@@ -1503,7 +1936,10 @@ var tabListSlotRecipe = (0, import_dev16.defineSlotRecipe)({
           position: "absolute",
           right: 0,
           left: 0,
-          bottom: "1px"
+          bottom: "1px",
+          _nextTheme: {
+            background: "border.default"
+          }
         }
       }
     },
@@ -1517,7 +1953,10 @@ var tabListSlotRecipe = (0, import_dev16.defineSlotRecipe)({
       padding: 0.5,
       alignItems: "center",
       justifyContent: "flex-start",
-      maxWidth: "full"
+      maxWidth: "full",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     }
   }
 });
@@ -1546,6 +1985,15 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
     _focus: {
       shadow: "0 0 0 2px #E0EEFF",
       borderRadius: "sm"
+    },
+    _nextTheme: {
+      color: "text.secondary",
+      _hover: {
+        color: "text.default"
+      },
+      _focus: {
+        shadow: "0 0 0 2px var(--mp-colors-border-focused)"
+      }
     }
   },
   variants: {
@@ -1568,6 +2016,12 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
         color: "blue.400",
         _hover: {
           color: "blue.500"
+        },
+        _nextTheme: {
+          color: "text.selected",
+          _hover: {
+            color: "text.selected"
+          }
         }
       }
     },
@@ -1639,6 +2093,11 @@ var tabSelectedBorderRecipe = (0, import_dev16.defineRecipe)({
         background: "transparent",
         _groupHover: {
           background: "gray.400"
+        },
+        _nextTheme: {
+          _groupHover: {
+            background: "border.bold"
+          }
         }
       },
       true: {}
@@ -1651,7 +2110,13 @@ var tabSelectedBorderRecipe = (0, import_dev16.defineRecipe)({
       css: {
         background: "blue.400",
         _groupHover: {
-          background: "blue.500"
+          background: "border.selected"
+        },
+        _nextTheme: {
+          background: "border.selected",
+          _groupHover: {
+            background: "border.selected"
+          }
         }
       }
     },
@@ -1711,27 +2176,36 @@ var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
   base: {
     root: {
       position: "relative",
-      display: "inline-flex",
+      width: "fit-content",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
+      justifyContent: "flex-start",
+      gap: "3",
       cursor: "pointer",
       outline: "none",
       "&[data-has-description=true]": {
         alignItems: "flex-start",
         "& .mp-checkbox__control": {
-          marginTop: "1"
+          marginTop: "2px"
         }
       },
       "& .mp-shared__hidden": {
         "&:focus + .mp-checkbox__control": {
           borderColor: "blue.400",
-          boxShadow: "focus"
+          boxShadow: "focus",
+          _nextTheme: {
+            borderColor: "border.focused",
+            boxShadow: "0 0 0 1px {colors.border.focused}"
+          }
         }
       },
       _hover: {
         "& .mp-checkbox__control": {
-          borderColor: "gray.400"
+          borderColor: "gray.400",
+          _nextTheme: {
+            borderColor: "border.form",
+            background: "background.neutral.hovered"
+          }
         }
       },
       _disabled: {
@@ -1739,34 +2213,72 @@ var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
         "& .mp-checkbox__control": {
           borderColor: "gray.100 !important",
           background: "gray.50 !important",
-          boxShadow: "none !important"
+          boxShadow: "none !important",
+          color: "gray.100",
+          _nextTheme: {
+            borderColor: "border.disabled !important",
+            background: "background.disabled !important",
+            color: "icon.disabled"
+          }
         }
       },
       _invalid: {
         "& .mp-checkbox__control": {
           borderColor: "red.400",
-          background: "white"
+          background: "white",
+          _nextTheme: {
+            borderColor: "border.danger !important",
+            background: "background.neutral"
+          }
         }
       },
       _checked: {
         "& .mp-checkbox__control": {
           borderColor: "blue.400",
-          background: "blue.400"
+          background: "blue.400",
+          color: "white",
+          _nextTheme: {
+            borderColor: "border.selected",
+            background: "background.brand.bold.selected",
+            color: "icon.inverse"
+          }
         },
         _hover: {
           "& .mp-checkbox__control": {
-            borderColor: "blue.400"
+            borderColor: "blue.400",
+            _nextTheme: {
+              borderColor: "border.selected.hovered",
+              background: "background.brand.bold.hovered"
+            }
           }
         }
       },
       _indeterminate: {
         "& .mp-checkbox__control": {
           borderColor: "blue.400",
-          background: "blue.400"
+          background: "blue.400",
+          color: "white",
+          _nextTheme: {
+            borderColor: "border.selected",
+            background: "background.brand.bold.selected",
+            color: "icon.inverse"
+          }
         },
         _hover: {
           "& .mp-checkbox__control": {
-            borderColor: "blue.400"
+            borderColor: "blue.400",
+            _nextTheme: {
+              borderColor: "border.selected.hovered",
+              background: "background.brand.bold.hovered"
+            }
+          }
+        },
+        _disabled: {
+          "& .mp-checkbox__control": {
+            color: "gray.600",
+            _nextTheme: {
+              color: "icon.disabled"
+            }
           }
         }
       }
@@ -1785,7 +2297,15 @@ var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
       borderWidth: "2px",
       borderColor: "gray.100",
       borderRadius: "md",
-      background: "white"
+      background: "white",
+      _nextTheme: {
+        width: "4",
+        height: "4",
+        borderWidth: "sm",
+        borderColor: "border.form",
+        borderRadius: "sm",
+        background: "background.neutral"
+      }
     },
     label: {
       background: "transparent"
@@ -1802,27 +2322,36 @@ var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
   base: {
     root: {
       position: "relative",
-      display: "inline-flex",
+      width: "fit-content",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      gap: "2",
+      justifyContent: "flex-start",
+      gap: "3",
       cursor: "pointer",
       outline: "none",
       "&[data-has-description=true]": {
         alignItems: "flex-start",
         "& .mp-radio__control": {
-          marginTop: "1"
+          marginTop: "2px"
         }
       },
       "& .mp-shared__hidden": {
         "&:focus + .mp-radio__control": {
           borderColor: "blue.400",
-          boxShadow: "focus"
+          boxShadow: "focus",
+          _nextTheme: {
+            borderColor: "border.focused",
+            boxShadow: "0 0 0 1px {colors.border.focused}"
+          }
         }
       },
       _hover: {
         "& .mp-radio__control": {
-          borderColor: "gray.400"
+          borderColor: "gray.400",
+          _nextTheme: {
+            borderColor: "border.form",
+            background: "background.neutral.hovered"
+          }
         }
       },
       _disabled: {
@@ -1831,36 +2360,44 @@ var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
           borderColor: "gray.100 !important",
           background: "gray.50 !important",
           boxShadow: "none !important",
+          _nextTheme: {
+            borderColor: "border.disabled !important",
+            background: "background.disabled !important"
+          },
           "& div": {
-            background: "gray.400"
+            background: "gray.400",
+            _nextTheme: {
+              color: "icon.disabled"
+            }
           }
         }
       },
       _invalid: {
         "& .mp-radio__control": {
           borderColor: "red.400",
-          background: "white"
+          background: "white",
+          _nextTheme: {
+            borderColor: "border.danger !important",
+            background: "background.neutral"
+          }
         }
       },
       _checked: {
         "& .mp-radio__control": {
           borderColor: "blue.400",
-          background: "blue.400"
-        },
-        _hover: {
-          "& .mp-radio__control": {
-            borderColor: "blue.400"
+          background: "blue.400",
+          _nextTheme: {
+            borderColor: "border.selected",
+            background: "background.brand.bold.selected"
           }
-        }
-      },
-      _indeterminate: {
-        "& .mp-radio__control": {
-          borderColor: "blue.400",
-          background: "blue.400"
         },
         _hover: {
           "& .mp-radio__control": {
-            borderColor: "blue.400"
+            borderColor: "blue.400",
+            _nextTheme: {
+              borderColor: "border.selected.hovered",
+              background: "background.brand.bold.hovered"
+            }
           }
         }
       }
@@ -1880,11 +2417,25 @@ var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
       borderColor: "gray.100",
       borderRadius: "full",
       background: "white",
+      _nextTheme: {
+        width: "4",
+        height: "4",
+        borderWidth: "sm",
+        borderColor: "border.form",
+        borderRadius: "full",
+        background: "background.neutral"
+      },
       "& div": {
         width: "2.5",
         height: "2.5",
         background: "white",
-        borderRadius: "full"
+        borderRadius: "full",
+        _nextTheme: {
+          width: "2",
+          height: "2",
+          background: "icon.inverse",
+          borderRadius: "full"
+        }
       }
     },
     label: {
@@ -1920,28 +2471,37 @@ var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
   base: {
     root: {
       position: "relative",
-      display: "inline-flex",
+      width: "fit-content",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "flex-start",
       gap: "3",
       cursor: "pointer",
       outline: "none",
       "&[data-has-description=true]": {
         alignItems: "flex-start",
         "& .mp-toggle__control": {
-          marginTop: "1"
+          marginTop: "2px"
         }
       },
       "& .mp-shared__hidden": {
         "&:focus + .mp-toggle__control": {
           borderColor: "blue.400",
-          boxShadow: "focus"
+          boxShadow: "focus",
+          _nextTheme: {
+            borderColor: "border.focused",
+            boxShadow: "0 0 0 1px {colors.border.focused}"
+          }
         }
       },
       _hover: {
         "& .mp-toggle__control": {
           borderColor: "gray.400",
-          background: "gray.400"
+          background: "gray.400",
+          _nextTheme: {
+            borderColor: "border.form",
+            background: "background.neutral.hovered"
+          }
         }
       },
       _disabled: {
@@ -1950,35 +2510,61 @@ var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
           borderColor: "gray.100 !important",
           background: "gray.50 !important",
           boxShadow: "none !important",
+          _nextTheme: {
+            borderColor: "border.disabled !important",
+            background: "background.disabled !important"
+          },
           "& div": {
-            background: "gray.100"
+            background: "gray.100",
+            _nextTheme: {
+              color: "icon.disabled"
+            }
           }
         }
       },
       _invalid: {
         "& .mp-toggle__control": {
           borderColor: "red.400",
-          background: "red.400"
+          background: "red.400",
+          _nextTheme: {
+            borderColor: "border.danger !important",
+            background: "background.neutral"
+          }
         }
       },
       _checked: {
         "& .mp-toggle__control": {
           borderColor: "blue.400",
           background: "blue.400",
+          _nextTheme: {
+            borderColor: "border.selected",
+            background: "background.brand.bold.selected"
+          },
           "& div": {
-            transform: "translateX(var(--mp-sizes-3))"
+            transform: "translateX(13px)",
+            _nextTheme: {
+              transform: "translateX(14px)",
+              background: "icon.inverse"
+            }
           }
         },
         _hover: {
           "& .mp-toggle__control": {
             borderColor: "blue.400",
-            background: "blue.400"
+            background: "blue.400",
+            _nextTheme: {
+              borderColor: "border.selected.hovered",
+              background: "background.brand.bold.hovered"
+            }
           }
         }
       }
     },
     control: {
       flex: "none",
+      transitionDuration: "250ms",
+      transitionProperty: "background, border-color, box-shadow",
+      transitionTimingFunction: "linear",
       position: "relative",
       display: "inline-flex",
       alignItems: "center",
@@ -1989,15 +2575,28 @@ var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
       borderColor: "gray.100",
       borderRadius: "lg",
       background: "gray.100",
+      _nextTheme: {
+        width: "30px",
+        height: "18px",
+        borderWidth: "sm",
+        borderColor: "border.form",
+        borderRadius: "full",
+        background: "background.neutral"
+      },
       "& div": {
         transitionDuration: "250ms",
         transitionProperty: "transform",
         transitionTimingFunction: "linear",
-        transform: "translateX(2px)",
+        transform: "translateX(1px)",
         width: "3",
         height: "3",
         background: "white",
-        borderRadius: "full"
+        borderRadius: "full",
+        _nextTheme: {
+          transform: "translateX(2px)",
+          background: "icon.subtle",
+          borderRadius: "full"
+        }
       }
     },
     label: {
@@ -2022,19 +2621,24 @@ var tableRecipe = (0, import_dev21.defineRecipe)({
       "& tr": {
         _hover: {
           "& > td": {
-            backgroundColor: "gray.50"
+            backgroundColor: "gray.50",
+            _nextTheme: {
+              background: "background.neutral.hovered"
+            }
           }
         }
       }
     },
     "& > thead": {
       width: "full",
-      backgroundColor: "gray.25",
       "&[data-table-head-fixed=true]": {
         position: "sticky",
         zIndex: "sticky",
         top: "0",
-        boxShadow: "0px 2px var(--mp-colors-gray-100)"
+        boxShadow: "0px 2px var(--mp-colors-gray-100)",
+        _nextTheme: {
+          boxShadow: "0px 2px var(--mp-colors-border-default)"
+        }
       }
     },
     "& > tbody": {
@@ -2049,22 +2653,32 @@ var tableRecipe = (0, import_dev21.defineRecipe)({
       cursor: "default",
       paddingLeft: "2",
       paddingRight: "4",
-      paddingY: "2",
-      height: "12",
+      height: "52px",
       textStyle: "label.md",
       textAlign: "left",
-      borderBottom: "sm",
-      borderStyle: "solid",
+      color: "dark",
+      borderBottomWidth: "sm",
       borderColor: "gray.100",
-      transition: "background linear 120ms"
+      transition: "background linear 120ms",
+      _nextTheme: {
+        color: "text.default",
+        borderBottomWidth: "sm",
+        borderColor: "border.default"
+      }
     },
     "& th": {
       fontWeight: "semiBold",
-      backgroundColor: "gray.25"
+      background: "gray.25",
+      _nextTheme: {
+        background: "background.surface"
+      }
     },
     "& td": {
       fontWeight: "regular",
-      backgroundColor: "white"
+      backgroundColor: "white",
+      _nextTheme: {
+        background: "background.neutral"
+      }
     },
     "& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]": {
       position: "sticky",
@@ -2129,7 +2743,10 @@ var progressSlotRecipe = (0, import_dev22.defineSlotRecipe)({
       width: "full",
       borderRadius: "100px",
       background: "gray.100",
-      transition: "all 250ms linear"
+      transition: "all 250ms linear",
+      _nextTheme: {
+        background: "background.subtle"
+      }
     },
     linear: {
       transition: "all 250ms linear",
@@ -2142,7 +2759,10 @@ var progressSlotRecipe = (0, import_dev22.defineSlotRecipe)({
       width: "full",
       height: "full",
       borderRadius: "full",
-      background: "conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)"
+      background: "conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)",
+      _nextTheme: {
+        background: "conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-background-neutral-subtle) 0deg)"
+      }
     },
     circularTrack: {
       width: "calc(100% - 6px)",
@@ -2209,12 +2829,18 @@ var formControlSlotRecipe = (0, import_dev23.defineSlotRecipe)({
     },
     required: {
       color: "red.400",
-      marginLeft: "1"
+      marginLeft: "1",
+      _nextTheme: {
+        color: "text.danger"
+      }
     },
     helpText: {
       color: "gray.600",
       fontSize: "sm",
-      marginTop: "1"
+      marginTop: "1",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     },
     errorMessage: {
       color: "red.400",
@@ -2222,7 +2848,10 @@ var formControlSlotRecipe = (0, import_dev23.defineSlotRecipe)({
       marginTop: "1",
       textAlign: "left",
       verticalAlign: "middle",
-      display: "flex"
+      display: "flex",
+      _nextTheme: {
+        color: "text.danger"
+      }
     }
   },
   variants: {},
@@ -2263,30 +2892,62 @@ var inputTagSlotRecipe = (0, import_dev24.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "gray.100",
       borderRadius: "md",
+      backgroundColor: "white",
       paddingTop: "2",
       paddingBottom: "2",
       paddingLeft: "3",
       paddingRight: "8",
-      backgroundColor: "white",
       transition: "all 250ms",
+      _nextTheme: {
+        borderRadius: "md",
+        borderColor: "border.form",
+        background: "background.neutral"
+      },
       _hover: {
-        borderColor: "gray.400"
+        borderColor: "gray.400",
+        _nextTheme: {
+          borderColor: "border.form",
+          background: "background.neutral.hovered"
+        }
       },
-      _focusVisible: {
+      _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",
+        _nextTheme: {
+          boxShadow: "focus",
+          borderColor: "border.focused"
+        },
         _hover: {
-          borderColor: "blue.400"
+          borderColor: "blue.400",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "gray.50"
+        background: "gray.50",
+        _nextTheme: {
+          background: "background.disabled",
+          borderColor: "border.disabled"
+        },
+        _hover: {
+          _nextTheme: {
+            background: "background.disabled",
+            borderColor: "border.disabled"
+          }
+        }
       },
       _invalid: {
         borderColor: "red.400",
+        _nextTheme: {
+          borderColor: "border.danger"
+        },
         _hover: {
-          borderColor: "red.400"
+          borderColor: "red.400",
+          _nextTheme: {
+            borderColor: "border.danger"
+          }
         }
       },
       _hasIcon: {
@@ -2296,7 +2957,13 @@ var inputTagSlotRecipe = (0, import_dev24.defineSlotRecipe)({
     input: {
       padding: "0 !important",
       margin: "0 !important",
-      borderWidth: "0 !important"
+      borderWidth: "0 !important",
+      _placeholder: {
+        color: "gray.400",
+        _nextTheme: {
+          borderColor: "text.placeholder"
+        }
+      }
     },
     content: {
       maxHeight: "300px",
@@ -2357,7 +3024,11 @@ var dividerRecipe = (0, import_dev25.defineRecipe)({
   base: {
     border: 0,
     opacity: 0.6,
-    color: "rgb(208, 214, 221)"
+    color: "rgb(208, 214, 221)",
+    _nextTheme: {
+      color: "border.default",
+      opacity: 1
+    }
   },
   variants: {
     variant: {
@@ -2393,7 +3064,18 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
   className: "modal",
   description: "The styles for the Modal component",
   jsx: ["MpModal", "mp-modal"],
-  slots: ["root", "rootChild", "body", "contentRoot", "contentChild", "header", "footer", "body", "overlay", "closeButton"],
+  slots: [
+    "root",
+    "rootChild",
+    "body",
+    "contentRoot",
+    "contentChild",
+    "header",
+    "footer",
+    "body",
+    "overlay",
+    "closeButton"
+  ],
   base: {
     root: {
       position: "relative",
@@ -2427,7 +3109,12 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
       fontFamily: "body",
       borderColor: "gray.100",
       bg: "white",
-      marginInline: "auto"
+      marginInline: "auto",
+      _nextTheme: {
+        background: "background.stage",
+        borderColor: "border.bold",
+        color: "text.default"
+      }
     },
     header: {
       px: 4,
@@ -2439,7 +3126,12 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
       borderTopLeftRadius: "md",
       borderTopRightRadius: "md",
       borderBottom: "solid 1px",
-      borderBottomColor: "gray.100"
+      borderBottomColor: "gray.100",
+      _nextTheme: {
+        color: "text.default",
+        background: "background.neutral.subtle",
+        borderBottomColor: "border.default"
+      }
     },
     closeButton: {
       position: "absolute",
@@ -2513,30 +3205,62 @@ var uploadSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "gray.100",
       borderRadius: "md",
-      backgroundColor: "white",
+      background: "white",
       outline: "none",
       transition: "all 250ms",
+      _nextTheme: {
+        borderRadius: "md",
+        borderColor: "border.default",
+        background: "background.neutral"
+      },
       _hover: {
         borderColor: "gray.400",
         "& .mp-upload__resetButton": {
           display: "block"
+        },
+        _nextTheme: {
+          borderColor: "border.form",
+          background: "background.neutral.hovered"
         }
       },
-      _focusVisible: {
+      _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",
+        _nextTheme: {
+          boxShadow: "focus",
+          borderColor: "border.focused"
+        },
         _hover: {
-          borderColor: "blue.400"
+          borderColor: "blue.400",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "gray.50"
+        background: "gray.50",
+        _nextTheme: {
+          background: "background.disabled",
+          borderColor: "border.disabled"
+        },
+        _hover: {
+          _nextTheme: {
+            background: "background.disabled",
+            borderColor: "border.disabled"
+          }
+        }
       },
       _invalid: {
         borderColor: "red.400",
+        _nextTheme: {
+          borderColor: "border.danger"
+        },
         _hover: {
-          borderColor: "red.400"
+          borderColor: "red.400",
+          _nextTheme: {
+            borderColor: "border.danger"
+          }
         }
       }
     },
@@ -2564,10 +3288,17 @@ var uploadListSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       py: "2",
       px: "1",
       borderRadius: "md",
-      backgroundColor: "white",
+      background: "white",
       transition: "all 250ms",
+      _nextTheme: {
+        borderRadius: "md",
+        background: "background.neutral"
+      },
       _hover: {
-        backgroundColor: "background"
+        background: "background",
+        _nextTheme: {
+          background: "background.neutral.hovered"
+        }
       }
     },
     titleWrapper: {
@@ -2579,14 +3310,7 @@ var uploadListSlotRecipe = (0, import_dev27.defineSlotRecipe)({
       display: "flex",
       flexDirection: "row",
       gap: "0.5",
-      ml: "auto",
-      "& > button": {
-        // Remove hover style for Button Icon
-        _hover: {
-          background: "transparent!important",
-          borderColor: "transparent!important"
-        }
-      }
+      ml: "auto"
     }
   }
 });
@@ -2628,31 +3352,77 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       borderColor: "gray.100",
       borderRadius: "md",
       borderStyle: "dashed",
-      background: "white",
+      background: "background",
       outline: "none",
       transition: "all 250ms",
+      "&[data-variant=avatar]": {
+        borderRadius: "full"
+      },
+      "&[data-variant=default]": {
+        background: "white"
+      },
+      _nextTheme: {
+        borderRadius: "md",
+        borderColor: "border.default",
+        background: "background.neutral.subtle",
+        "&[data-variant=avatar]": {
+          borderRadius: "full"
+        },
+        "&[data-variant=default]": {
+          background: "background.neutral"
+        }
+      },
       _hover: {
         borderColor: "gray.400",
         "& [data-overlay-preview=true]": {
           display: "flex"
+        },
+        _nextTheme: {
+          borderColor: "border.default",
+          background: "background.neutral.hovered"
         }
       },
-      _focusVisible: {
+      _focus: {
         boxShadow: "focus",
         borderColor: "blue.400",
+        _nextTheme: {
+          boxShadow: "focus",
+          borderColor: "border.focused"
+        },
         _hover: {
-          borderColor: "blue.400"
+          borderColor: "blue.400",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "gray.50!"
+        background: "gray.50!",
+        _nextTheme: {
+          background: "background.disabled!",
+          borderColor: "border.disabled"
+        },
+        _hover: {
+          _nextTheme: {
+            background: "background.disabled!",
+            borderColor: "border.disabled"
+          }
+        }
       },
       _invalid: {
         borderColor: "red.400",
-        backgroundColor: "red.50!",
+        background: "red.50!",
+        _nextTheme: {
+          borderColor: "border.danger",
+          background: "background.danger"
+        },
         _hover: {
-          borderColor: "red.400!"
+          borderColor: "red.400!",
+          _nextTheme: {
+            borderColor: "border.danger",
+            background: "background.danger"
+          }
         }
       }
     },
@@ -2715,7 +3485,20 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       borderRadius: "md",
       borderWidth: "1px",
       borderColor: "blue.400",
-      borderStyle: "dashed"
+      borderStyle: "dashed",
+      background: "overlay",
+      "&[data-overlay=white]": {
+        background: "whiteAlpha.300"
+      },
+      _nextTheme: {
+        borderColor: "border.brand",
+        background: "background.overlay.dark",
+        // force overlay dark since this variant is black
+        "&[data-overlay=white]": {
+          background: "background.overlay.light"
+          // force overlay light since this variant is white
+        }
+      }
     },
     preview: {
       display: "flex",
@@ -2745,8 +3528,19 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
       position: "absolute",
       zIndex: "2",
       background: "white",
-      border: "2px solid white",
-      borderRadius: "full"
+      borderWidth: "2px",
+      borderColor: "white",
+      borderRadius: "full",
+      top: "-10px",
+      right: "-10px",
+      "&[data-variant=avatar]": {
+        top: "-4px",
+        right: "-4px"
+      },
+      _nextTheme: {
+        background: "background.neutral",
+        borderColor: "background.neutral"
+      }
     }
   }
 });
@@ -2771,7 +3565,10 @@ var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
       borderColor: "gray.100",
       borderRadius: "md",
       outline: "0px solid transparent",
-      padding: "1"
+      padding: "1",
+      _nextTheme: {
+        borderColor: "border.form"
+      }
     },
     item: {
       flex: "var(--mp-segmented-control--flex)",
@@ -2798,29 +3595,66 @@ var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
       borderRadius: "sm",
       transition: "all 250ms",
       color: "gray.600",
-      backgroundColor: "white",
+      backgroundColor: "transparent",
       gap: "var(--mp-segmented-control--gap)",
       paddingX: "var(--mp-segmented-control--padding-x)",
       "input[type=radio]:hover:not(:disabled):not(:checked) + &": {
-        color: "blue.700"
+        color: "blue.700",
+        _nextTheme: {
+          color: "text.secondary",
+          backgroundColor: "background.neutral.hovered",
+          "& > svg": {
+            color: "icon.default"
+          }
+        }
       },
       "input[type=radio]:checked + &, input[type=radio][aria-checked=mixed] + &": {
         color: "blue.400",
-        backgroundColor: "blue.50"
+        backgroundColor: "blue.50",
+        _nextTheme: {
+          color: "text.selected",
+          backgroundColor: "background.brand.selected",
+          "& > svg": {
+            color: "icon.selected"
+          }
+        }
       },
       "input[type=radio]:disabled + &": {
-        color: "gray.400"
+        color: "gray.400",
+        cursor: "not-allowed",
+        _nextTheme: {
+          color: "text.disabled",
+          backgroundColor: "background.disabled",
+          "& > svg": {
+            color: "icon.disabled"
+          }
+        }
       },
       "input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &": {
         color: "blue.700"
       },
       "input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &": {
         color: "blue.700",
-        boxShadow: "outer"
+        boxShadow: "outer",
+        _nextTheme: {
+          color: "text.selected",
+          boxShadow: "0 0 0 2px {colors.border.focused}"
+        }
       },
       "input[type=radio]:checked:disabled + &, input[type=radio][aria-checked=mixed]:disabled + &": {
         color: "gray.400",
-        backgroundColor: "gray.50"
+        backgroundColor: "gray.50",
+        cursor: "not-allowed",
+        _nextTheme: {
+          color: "text.disabled",
+          backgroundColor: "background.disabled"
+        }
+      },
+      _nextTheme: {
+        color: "text.secondary",
+        "& > svg": {
+          color: "icon.default"
+        }
       }
     },
     label: {
@@ -2856,10 +3690,17 @@ var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
       backgroundColor: "white",
       padding: "3",
       boxShadow: "lg",
-      zIndex: "9999"
+      zIndex: "9999",
+      _nextTheme: {
+        backgroundColor: "background.neutral"
+      }
     },
     label: {
-      fontSize: "md"
+      color: "dark",
+      fontSize: "md",
+      _nextTheme: {
+        color: "text.default"
+      }
     }
   },
   variants: {
@@ -2872,13 +3713,23 @@ var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
     {
       variant: "success",
       css: {
-        root: { borderColor: "green.700" }
+        root: {
+          borderColor: "green.700",
+          _nextTheme: {
+            borderColor: "border.success"
+          }
+        }
       }
     },
     {
       variant: "error",
       css: {
-        root: { borderColor: "red.700" }
+        root: {
+          borderColor: "red.700",
+          _nextTheme: {
+            borderColor: "border.danger"
+          }
+        }
       }
     }
   ],
@@ -2927,28 +3778,94 @@ var broadcastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
       marginLeft: "3",
       _hover: {
         color: "white!"
+      },
+      _nextTheme: {
+        color: "icon.inverse!",
+        _hover: {
+          color: "icon.inverse!"
+        }
       }
     }
   },
   variants: {
     variant: {
       announcement: {
-        container: { backgroundColor: "stone.400" },
-        icon: { color: "white" },
-        label: { color: "white" },
-        textLink: { color: "white" }
-      },
-      information: {
-        container: { backgroundColor: "violet.400" },
-        icon: { color: "white" },
-        label: { color: "white" },
-        textLink: { color: "white" }
-      },
+        container: {
+          backgroundColor: "stone.400",
+          _nextTheme: {
+            backgroundColor: "background.neutral.bold"
+          }
+        },
+        icon: {
+          color: "white",
+          _nextTheme: {
+            color: "icon.inverse"
+          }
+        },
+        label: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse"
+          }
+        },
+        textLink: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse"
+          }
+        }
+      },
+      information: {
+        container: {
+          backgroundColor: "violet.400",
+          _nextTheme: {
+            backgroundColor: "background.highlight.bold"
+          }
+        },
+        icon: {
+          color: "white",
+          _nextTheme: {
+            color: "icon.inverse.static"
+          }
+        },
+        label: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse"
+          }
+        },
+        textLink: {
+          color: "white",
+          _nextTheme: {
+            color: "text.inverse"
+          }
+        }
+      },
       important: {
-        container: { backgroundColor: "amber.100" },
-        icon: { color: "dark" },
-        label: { color: "dark" },
-        textLink: { color: "dark" }
+        container: {
+          backgroundColor: "amber.100",
+          _nextTheme: {
+            backgroundColor: "background.warning.bold"
+          }
+        },
+        icon: {
+          color: "dark",
+          _nextTheme: {
+            color: "icon.warning.inverse"
+          }
+        },
+        label: {
+          color: "dark",
+          _nextTheme: {
+            color: "text.warning.inverse"
+          }
+        },
+        textLink: {
+          color: "dark",
+          _nextTheme: {
+            color: "text.warning.inverse"
+          }
+        }
       }
     }
   },
@@ -2990,6 +3907,10 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
       paddingY: "1",
       paddingX: "3",
       marginBottom: "1",
+      _nextTheme: {
+        backgroundColor: "background.neutral.subtle",
+        border: "0px solid"
+      },
       "& button": {
         display: "flex",
         justifyContent: "center",
@@ -3002,10 +3923,19 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
           borderRadius: "md",
           color: "blue.400",
           backgroundColor: "blue.50",
-          cursor: "pointer"
+          _nextTheme: {
+            color: "icon.brand",
+            backgroundColor: "background.brand.hovered"
+          }
         },
         "&.is-active": {
-          color: "blue.400"
+          color: "blue.400",
+          _nextTheme: {
+            color: "icon.brand"
+          }
+        },
+        _nextTheme: {
+          color: "icon.default"
         }
       },
       "& button.mp-popover-list-item": {
@@ -3013,7 +3943,10 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
         "&:hover": {
           borderRadius: "0",
           color: "blue.400",
-          backgroundColor: "transparent"
+          backgroundColor: "transparent",
+          _nextTheme: {
+            color: "icon.brand"
+          }
         },
         "& div": {
           justifyContent: "center!",
@@ -3038,7 +3971,10 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
         content: "attr(data-placeholder)",
         float: "left",
         height: "0",
-        pointerEvents: "none"
+        pointerEvents: "none",
+        _nextTheme: {
+          color: "text.placeholder"
+        }
       }
     }
   },
@@ -3050,6 +3986,7 @@ var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
   className: "typography-style-provider",
   jsx: ["MpTypographyStyleProvider", "mp-typography-style-provider"],
   base: {
+    color: "dark",
     "& h1": {
       textStyle: "h1"
     },
@@ -3087,7 +4024,13 @@ var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
     "& blockquote": {
       borderLeft: "4px solid",
       borderColor: "dark",
-      padding: "2"
+      padding: "2",
+      _nextTheme: {
+        borderColor: "text.default"
+      }
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   },
   variants: {},
@@ -3164,7 +4107,11 @@ var tableDateSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   ],
   base: {
     headerRoot: { display: "flex", justifyContent: "space-between", alignItems: "center" },
-    headerLabel: { cursor: "pointer", fontWeight: "semiBold" },
+    headerLabel: {
+      cursor: "pointer",
+      fontWeight: "semiBold",
+      _nextTheme: { color: "text.default" }
+    },
     dayWrapper: { display: "flex", marginTop: 3 },
     dateItemRoot: { display: "flex", flexDirection: "column", gap: 1, marginTop: "1.5" },
     dateItemWrapper: { display: "flex" },
@@ -3182,7 +4129,11 @@ var tableMonthSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   slots: ["headerRoot", "headerLabel", "monthItemRoot", "monthItemWrapper", "shortcutLabelWrapper"],
   base: {
     headerRoot: { display: "flex", justifyContent: "space-between", alignItems: "center" },
-    headerLabel: { cursor: "pointer", fontWeight: "semiBold" },
+    headerLabel: {
+      cursor: "pointer",
+      fontWeight: "semiBold",
+      _nextTheme: { color: "text.default" }
+    },
     monthItemRoot: { display: "flex", flexDirection: "column", gap: 1, marginTop: "3" },
     monthItemWrapper: { display: "grid", gridTemplateColumns: "3" },
     shortcutLabelWrapper: {
@@ -3199,7 +4150,10 @@ var tableYearSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   slots: ["headerRoot", "headerLabel", "yearItemRoot", "yearItemWrapper", "shortcutLabelWrapper"],
   base: {
     headerRoot: { display: "flex", justifyContent: "space-between", alignItems: "center" },
-    headerLabel: { fontWeight: "semiBold" },
+    headerLabel: {
+      fontWeight: "semiBold",
+      _nextTheme: { color: "text.default" }
+    },
     yearItemRoot: { display: "flex", flexDirection: "column", gap: 1, marginTop: "3" },
     yearItemWrapper: { display: "grid", gridTemplateColumns: "4" },
     shortcutLabelWrapper: {
@@ -3226,7 +4180,10 @@ var dayItemRecipe = (0, import_dev33.defineRecipe)({
     cursor: "pointer",
     color: "gray.600",
     fontSize: "sm",
-    textAlign: "center"
+    textAlign: "center",
+    _nextTheme: {
+      color: "text.default"
+    }
   }
 });
 var dateItemRecipe = (0, import_dev33.defineRecipe)({
@@ -3250,7 +4207,13 @@ var dateItemRecipe = (0, import_dev33.defineRecipe)({
       color: "gray.400",
       cursor: "not-allowed",
       borderColor: "transparent",
-      backgroundColor: "transparent"
+      backgroundColor: "transparent",
+      _nextTheme: {
+        color: "text.disabled"
+      }
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   },
   variants: {
@@ -3259,64 +4222,115 @@ var dateItemRecipe = (0, import_dev33.defineRecipe)({
         rounded: "sm",
         _hover: {
           borderColor: "gray.50",
-          background: "gray.50"
+          background: "gray.50",
+          _nextTheme: {
+            borderColor: "background.neutral.hovered",
+            background: "background.neutral.hovered"
+          }
         },
         _focus: {
           borderColor: "blue.400",
           background: "transparent",
-          shadow: "outer"
+          shadow: "outer",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       selected: {
         rounded: "sm",
         borderColor: "blue.400",
         backgroundColor: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       },
       range: {
         borderColor: "ice.50",
-        backgroundColor: "ice.50"
+        backgroundColor: "ice.50",
+        _nextTheme: {
+          borderColor: "background.brand.selected",
+          backgroundColor: "background.brand.selected"
+        }
       },
       today: {
         rounded: "sm",
         borderColor: "orange.50",
-        backgroundColor: "orange.50"
+        backgroundColor: "orange.50",
+        _nextTheme: {
+          borderColor: "background.warning.bold",
+          backgroundColor: "background.warning.bold",
+          color: "text.warning.inverse"
+        }
       },
       notThisMonth: {
-        color: "gray.600"
+        color: "gray.600",
+        _nextTheme: {
+          color: "text.disabled"
+        }
       },
       disabled: {},
       // Week
       weekHoveredStart: {
         roundedLeft: "sm",
         borderColor: "gray.50",
-        background: "gray.50"
+        background: "gray.50",
+        _nextTheme: {
+          borderColor: "background.neutral.hovered",
+          background: "background.neutral.hovered"
+        }
       },
       weekHoveredMiddle: {
         borderColor: "gray.50",
-        background: "gray.50"
+        background: "gray.50",
+        _nextTheme: {
+          borderColor: "background.neutral.hovered",
+          background: "background.neutral.hovered"
+        }
       },
       weekHoveredEnd: {
         roundedRight: "sm",
         borderColor: "gray.50",
-        background: "gray.50"
+        background: "gray.50",
+        _nextTheme: {
+          borderColor: "background.neutral.hovered",
+          background: "background.neutral.hovered"
+        }
       },
       weekSelectedStart: {
         roundedLeft: "sm",
         borderColor: "blue.400",
         background: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       },
       weekSelectedMiddle: {
         borderColor: "blue.400",
         background: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       },
       weekSelectedEnd: {
         roundedRight: "sm",
         borderColor: "blue.400",
         background: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       }
     }
   },
@@ -3360,6 +4374,9 @@ var monthItemRecipe = (0, import_dev33.defineRecipe)({
       cursor: "not-allowed",
       borderColor: "transparent",
       backgroundColor: "transparent"
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   },
   variants: {
@@ -3369,28 +4386,49 @@ var monthItemRecipe = (0, import_dev33.defineRecipe)({
         rounded: "sm",
         _hover: {
           borderColor: "gray.50",
-          background: "gray.50"
+          background: "gray.50",
+          _nextTheme: {
+            borderColor: "background.neutral.hovered",
+            background: "background.neutral.hovered"
+          }
         },
         _focus: {
           borderColor: "blue.400",
           background: "transparent",
-          shadow: "outer"
+          shadow: "outer",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       selected: {
         rounded: "sm",
         borderColor: "blue.400",
         backgroundColor: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       },
       range: {
         borderColor: "ice.50",
-        backgroundColor: "ice.50"
+        backgroundColor: "ice.50",
+        _nextTheme: {
+          borderColor: "background.brand.selected",
+          backgroundColor: "background.brand.selected"
+        }
       },
       today: {
         rounded: "sm",
         borderColor: "orange.50",
-        backgroundColor: "orange.50"
+        backgroundColor: "orange.50",
+        _nextTheme: {
+          borderColor: "background.warning.bold",
+          backgroundColor: "background.warning.bold",
+          color: "text.warning.inverse"
+        }
       }
     }
   },
@@ -3415,6 +4453,9 @@ var yearItemRecipe = (0, import_dev33.defineRecipe)({
       cursor: "not-allowed",
       borderColor: "transparent",
       backgroundColor: "transparent"
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   },
   variants: {
@@ -3424,28 +4465,49 @@ var yearItemRecipe = (0, import_dev33.defineRecipe)({
         rounded: "sm",
         _hover: {
           borderColor: "gray.50",
-          background: "gray.50"
+          background: "gray.50",
+          _nextTheme: {
+            borderColor: "background.neutral.hovered",
+            background: "background.neutral.hovered"
+          }
         },
         _focus: {
           borderColor: "blue.400",
           background: "transparent",
-          shadow: "outer"
+          shadow: "outer",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       selected: {
         rounded: "sm",
         borderColor: "blue.400",
         backgroundColor: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       },
       range: {
         borderColor: "ice.50",
-        backgroundColor: "ice.50"
+        backgroundColor: "ice.50",
+        _nextTheme: {
+          borderColor: "background.brand.selected",
+          backgroundColor: "background.brand.selected"
+        }
       },
       today: {
         rounded: "sm",
         borderColor: "orange.50",
-        backgroundColor: "orange.50"
+        backgroundColor: "orange.50",
+        _nextTheme: {
+          borderColor: "background.warning.bold",
+          backgroundColor: "background.warning.bold",
+          color: "text.warning.inverse"
+        }
       }
     }
   },
@@ -3470,6 +4532,9 @@ var timeItemRecipe = (0, import_dev33.defineRecipe)({
       cursor: "not-allowed",
       borderColor: "transparent",
       backgroundColor: "transparent"
+    },
+    _nextTheme: {
+      color: "text.default"
     }
   },
   variants: {
@@ -3479,19 +4544,31 @@ var timeItemRecipe = (0, import_dev33.defineRecipe)({
         rounded: "sm",
         _hover: {
           borderColor: "gray.50",
-          background: "gray.50"
+          background: "gray.50",
+          _nextTheme: {
+            borderColor: "background.neutral.hovered",
+            background: "background.neutral.hovered"
+          }
         },
         _focus: {
           borderColor: "blue.400",
           background: "transparent",
-          shadow: "outer"
+          shadow: "outer",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
         }
       },
       selected: {
         rounded: "sm",
         borderColor: "blue.400",
         backgroundColor: "blue.400",
-        color: "white"
+        color: "white",
+        _nextTheme: {
+          borderColor: "background.brand.bold.selected",
+          backgroundColor: "background.brand.bold.selected",
+          color: "text.inverse"
+        }
       }
     }
   },
@@ -3518,7 +4595,12 @@ var carouselSlotRecipe = (0, import_dev34.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "gray.100",
       overflow: "hidden",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      _nextTheme: {
+        background: "background.neutral.subtle",
+        borderRadius: "md",
+        borderColor: "border.default"
+      }
     },
     buttonRight: {
       display: "flex",
@@ -3595,7 +4677,6 @@ var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
       flexDirection: "row",
       flexWrap: "wrap",
       alignItems: "center",
-      wrap: "wrap",
       width: "full",
       gap: "4",
       py: "2",
@@ -3613,14 +4694,20 @@ var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
     },
     chartTooltip: {
       position: "absolute",
-      backgroundColor: "white",
-      border: "1px solid",
-      borderColor: "gray.400",
       borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "gray.400",
+      background: "white",
       boxShadow: "sm",
       zIndex: "popover",
       pointerEvents: "none",
-      transition: "all 0.1s ease 0s"
+      transition: "all 0.1s ease 0s",
+      _nextTheme: {
+        borderRadius: "xl",
+        borderColor: "border.default",
+        background: "background.stage",
+        boxShadow: "sm"
+      }
     },
     tooltipWrapper: {
       display: "flex",
@@ -3679,7 +4766,12 @@ var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
       zIndex: "999",
       py: 2,
       height: "9.5",
-      _hover: { color: "blue.500" }
+      _hover: { color: "blue.500", _nextTheme: { color: "text.link" } },
+      _nextTheme: {
+        background: "background.stage",
+        borderColor: "border.default",
+        color: "text.link"
+      }
     },
     emptyText: {
       px: 3,
@@ -3729,7 +4821,10 @@ var timelineSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       fontSize: "sm",
       color: "gray.400",
       lineHeight: "sm",
-      marginTop: "0.5"
+      marginTop: "0.5",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     },
     content: {
       paddingTop: 3
@@ -3753,7 +4848,10 @@ var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       borderWidth: "1px",
       borderColor: "gray.100",
       width: "full",
-      gap: "3"
+      gap: "3",
+      _nextTheme: {
+        borderColor: "border.default"
+      }
     },
     content: {
       display: "flex",
@@ -3764,7 +4862,10 @@ var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       lineHeight: "md",
       fontWeight: "regular",
       letterSpacing: "normal",
-      color: "dark"
+      color: "dark",
+      _nextTheme: {
+        color: "text.default"
+      }
     },
     description: {
       display: "flex",
@@ -3775,7 +4876,10 @@ var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       lineHeight: "md",
       fontWeight: "regular",
       letterSpacing: "normal",
-      color: "gray.400"
+      color: "gray.400",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     }
   },
   variants: {
@@ -3833,9 +4937,13 @@ var timelineSeparatorSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     topConnector: {
       height: "6px",
       width: "2px",
+      roundedBottom: "2px",
       backgroundColor: "gray.100",
       "&[data-position=first]": {
         backgroundColor: "transparent"
+      },
+      _nextTheme: {
+        backgroundColor: "border.default"
       }
     },
     bottomConnector: {
@@ -3846,6 +4954,9 @@ var timelineSeparatorSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       backgroundColor: "gray.100",
       "&[data-position=last]": {
         backgroundColor: "transparent"
+      },
+      _nextTheme: {
+        backgroundColor: "border.default"
       }
     }
   }
@@ -3874,7 +4985,10 @@ var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       "&[data-position=first]": {
         backgroundColor: "transparent"
       },
-      roundedBottom: "full"
+      roundedBottom: "full",
+      _nextTheme: {
+        backgroundColor: "border.default"
+      }
     },
     bottomConnector: {
       flexGrow: 1,
@@ -3883,7 +4997,10 @@ var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       "&[data-position=last]": {
         backgroundColor: "transparent"
       },
-      roundedTop: "full"
+      roundedTop: "full",
+      _nextTheme: {
+        backgroundColor: "border.default"
+      }
     },
     title: {
       paddingTop: 1
@@ -3893,7 +5010,10 @@ var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       lineHeight: "md",
       color: "dark",
       fontWeight: "semibold",
-      letterSpacing: "normal"
+      letterSpacing: "normal",
+      _nextTheme: {
+        color: "text.default"
+      }
     }
   }
 });
@@ -3910,8 +5030,8 @@ var bannerSlotRecipe = (0, import_dev38.defineSlotRecipe)({
       position: "relative",
       alignItems: "var(--mp-banner--align-items)",
       borderRadius: "md",
-      paddingY: "var(--mp-banner--padding-y)",
-      paddingX: "var(--mp-banner--padding-x)"
+      paddingY: "3",
+      paddingX: "4"
     },
     body: {
       display: "flex",
@@ -3923,16 +5043,36 @@ var bannerSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   variants: {
     variant: {
       info: {
-        root: { backgroundColor: "blue.50" }
+        root: {
+          backgroundColor: "blue.50",
+          _nextTheme: {
+            backgroundColor: "background.brand"
+          }
+        }
       },
       success: {
-        root: { backgroundColor: "green.50" }
+        root: {
+          backgroundColor: "green.50",
+          _nextTheme: {
+            backgroundColor: "background.success"
+          }
+        }
       },
       danger: {
-        root: { backgroundColor: "red.50" }
+        root: {
+          backgroundColor: "red.50",
+          _nextTheme: {
+            backgroundColor: "background.danger"
+          }
+        }
       },
       warning: {
-        root: { backgroundColor: "orange.50" }
+        root: {
+          backgroundColor: "orange.50",
+          _nextTheme: {
+            backgroundColor: "background.warning"
+          }
+        }
       }
     }
   },
@@ -3952,7 +5092,10 @@ var bannerTitleRecipe = (0, import_dev38.defineRecipe)({
     letterSpacing: "normal",
     color: "dark",
     marginTop: "0.5",
-    marginBottom: "1.5"
+    marginBottom: "1",
+    _nextTheme: {
+      color: "text.default"
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -3967,7 +5110,10 @@ var bannerDescriptionRecipe = (0, import_dev38.defineRecipe)({
     fontWeight: "regular",
     lineHeight: "md",
     letterSpacing: "normal",
-    color: "dark"
+    color: "dark",
+    _nextTheme: {
+      color: "text.default"
+    }
   },
   variants: {},
   compoundVariants: [],
@@ -4002,7 +5148,6 @@ var bannerLinkRecipe = (0, import_dev38.defineRecipe)({
   base: {
     display: "flex",
     gap: "4",
-    marginBottom: "var(--mp-banner-link--margin-bottom)",
     marginTop: "var(--mp-banner-link--margin-top)"
   },
   variants: {},
@@ -4014,8 +5159,8 @@ var bannerCloseButtonRecipe = (0, import_dev38.defineRecipe)({
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
     position: "absolute",
-    top: "var(--mp-banner-close-button--top)",
-    right: "var(--mp-banner-close-button--right)",
+    top: "3",
+    right: "4",
     display: "inline-flex",
     justifyContent: "center",
     alignItems: "center",
@@ -4058,29 +5203,84 @@ var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
       gap: "2"
     },
     popoverTrigger: {
-      display: "flex",
-      alignItems: "center",
       cursor: "pointer",
       position: "relative",
-      height: "38px",
-      pl: "2",
-      pr: "3",
+      display: "flex",
+      alignItems: "center",
+      borderWidth: "1px",
+      borderColor: "gray.100",
       borderRadius: "md",
-      border: "1px solid",
+      backgroundColor: "white",
+      paddingTop: "1.5",
+      paddingBottom: "1.5",
+      paddingLeft: "3",
+      paddingRight: "4",
+      transition: "all 250ms",
+      outline: "none",
+      _nextTheme: {
+        borderRadius: "md",
+        borderColor: "border.form",
+        background: "background.neutral"
+      },
+      _hover: {
+        borderColor: "gray.400",
+        _nextTheme: {
+          borderColor: "border.form",
+          background: "background.neutral.hovered"
+        }
+      },
       _focus: {
-        boxShadow: "outline !important",
-        borderColor: "blue.400 !important",
-        outline: "none"
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _nextTheme: {
+          boxShadow: "focus",
+          borderColor: "border.focused"
+        },
+        _hover: {
+          borderColor: "blue.400",
+          _nextTheme: {
+            borderColor: "border.focused"
+          }
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        background: "gray.50",
+        _nextTheme: {
+          background: "background.disabled",
+          borderColor: "border.disabled"
+        },
+        _hover: {
+          _nextTheme: {
+            background: "background.disabled",
+            borderColor: "border.disabled"
+          }
+        }
+      },
+      _invalid: {
+        borderColor: "red.400",
+        _nextTheme: {
+          borderColor: "border.danger"
+        },
+        _hover: {
+          borderColor: "red.400",
+          _nextTheme: {
+            borderColor: "border.danger"
+          }
+        }
       }
     },
     boxColor: {
       flex: "none",
       width: "6",
       height: "6",
+      mr: "2",
       borderWidth: "1px",
       borderColor: "gray.50",
       borderRadius: "sm",
-      mr: "2"
+      _nextTheme: {
+        borderColor: "border.default"
+      }
     },
     inputTrigger: {
       margin: "-12px",
@@ -4094,26 +5294,20 @@ var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
         outline: "none"
       }
     },
-    popoverContent: {
-      bg: "white",
-      rounded: "md",
-      shadow: "lg",
-      borderWidth: "1px",
-      borderColor: "gray.400"
-    },
+    popoverContent: {},
     wrapperAdvance: {
-      display: "flex",
-      flexDirection: "column",
       position: "relative",
       width: "280px",
+      display: "flex",
+      flexDirection: "column",
       padding: "3",
       gap: "3"
     },
     wrapperBasic: {
-      display: "flex",
-      flexDirection: "column",
       position: "relative",
       width: "188px",
+      display: "flex",
+      flexDirection: "column",
       padding: "3",
       gap: "3"
     },
@@ -4133,10 +5327,10 @@ var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
       gap: "2"
     },
     boxPreset: {
+      position: "relative",
       display: "flex",
       flexDirection: "column",
-      gap: "2",
-      position: "relative"
+      gap: "2"
     },
     wrapperPreset: {
       position: "relative",
@@ -4148,7 +5342,7 @@ var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
       position: "relative",
       display: "flex",
       flexWrap: "wrap",
-      gap: "4px"
+      gap: "1"
     }
   }
 });
@@ -4207,24 +5401,57 @@ var sliderSlotRecipe = (0, import_dev40.defineSlotRecipe)({
       top: "-8px",
       background: "none",
       outline: "none",
-      _focusVisible: {
+      _focus: {
         borderRadius: "100px",
         borderWidth: "1px",
         borderStyle: "solid",
         borderColor: "blue.400",
-        boxShadow: "focus"
+        boxShadow: "focus",
+        _nextTheme: {
+          borderColor: "border.focused",
+          boxShadow: "focus"
+        }
+      },
+      _disabled: {
+        "&::-webkit-slider-thumb": {
+          cursor: "not-allowed",
+          background: "radial-gradient(circle, var(--mp-colors-gray-100) 40%, var(--mp-colors-white) 50%)",
+          _nextTheme: {
+            background: "radial-gradient(circle, var(--mp-colors-icon-disabled) 40%, var(--mp-colors-background-neutral) 50%)"
+          }
+        }
+      },
+      "&[minpressed=true], &[maxpressed=true]": {
+        "&::-webkit-slider-thumb": {
+          borderColor: "blue.400",
+          _nextTheme: {
+            borderColor: "border.brand"
+          }
+        }
       },
       "&::-webkit-slider-thumb": {
+        cursor: "pointer",
         appearance: "none",
+        pointerEvents: "auto",
         width: "5",
         height: "5",
         borderRadius: "full",
         borderStyle: "solid",
         borderColor: "gray.100",
+        background: "radial-gradient(circle, var(--mp-colors-blue-400) 40%, var(--mp-colors-white) 50%)",
         boxShadow: "sm",
         filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))",
         transition: "border-color 250ms",
-        pointerEvents: "auto"
+        _hover: {
+          borderColor: "gray.600",
+          _nextTheme: {
+            borderColor: "border.bold"
+          }
+        },
+        _nextTheme: {
+          borderColor: "border.default",
+          background: "radial-gradient(circle, var(--mp-colors-border-brand) 40%, var(--mp-colors-background-neutral) 50%)"
+        }
       }
     }
   }
@@ -4383,7 +5610,7 @@ var import_dev53 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
 var import_dev43 = require("@pandacss/dev");
-var borders = import_dev43.defineTokens.borders({
+var borderWidths = import_dev43.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -4393,29 +5620,12 @@ var borders = import_dev43.defineTokens.borders({
 // src/tokens/colors.ts
 var import_dev44 = require("@pandacss/dev");
 var colors = import_dev44.defineTokens.colors({
-  currentcolor: {
-    value: "currentcolor"
-  },
+  debug: { value: "blue" },
+  currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
-  white: {
-    value: "#FFFFFF"
-  },
   background: { value: "#F1F5F9" },
-  overlay: {
-    value: "rgba(22, 26, 32, 0.8)"
-  },
-  brand: {
-    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" }
-  },
+  overlay: { value: "rgba(22, 26, 32, 0.8)" },
+  white: { value: "#FFFFFF" },
   whiteAlpha: {
     50: { value: "rgba(255, 255, 255, 0.04)" },
     100: { value: "rgba(255, 255, 255, 0.06)" },
@@ -4534,6 +5744,18 @@ var colors = import_dev44.defineTokens.colors({
   },
   ash: {
     100: { value: "#E7EDF5" }
+  },
+  brand: {
+    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" }
   }
 });
 
@@ -4558,11 +5780,11 @@ var opacity = import_dev46.defineTokens.opacity({
 var import_dev47 = require("@pandacss/dev");
 var radii = import_dev47.defineTokens.radii({
   none: { value: "0" },
-  xs: { value: "0.125rem" },
-  sm: { value: "0.25rem" },
-  md: { value: "0.375rem" },
-  lg: { value: "0.5rem" },
-  xl: { value: "0.75rem" },
+  xs: { value: "0.125rem", description: "2px" },
+  sm: { value: "0.25rem", description: "4px" },
+  md: { value: "0.375rem", description: "6px" },
+  lg: { value: "0.5rem", description: "8px" },
+  xl: { value: "0.75rem", description: "12px" },
   full: { value: "50%" }
 });
 
@@ -4641,22 +5863,22 @@ var sizes = import_dev49.defineTokens.sizes({
 var import_dev50 = require("@pandacss/dev");
 var spacing = import_dev50.defineTokens.spacing({
   0: { value: "0" },
-  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.3rem" },
-  6: { value: "1.5rem" },
-  8: { value: "2rem" },
-  12: { value: "3rem" },
-  16: { value: "4rem" },
-  20: { value: "5rem" },
-  24: { value: "6rem" },
-  32: { value: "8rem" },
-  40: { value: "10rem" },
-  64: { value: "16rem" }
+  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" },
+  12: { value: "3rem", description: "48px" },
+  16: { value: "4rem", description: "64px" },
+  20: { value: "5rem", description: "80px" },
+  24: { value: "6rem", description: "96px" },
+  32: { value: "8rem", description: "112px" },
+  40: { value: "10rem", description: "160px" },
+  64: { value: "16rem", description: "256px" }
 });
 
 // src/tokens/z-index.ts
@@ -4715,7 +5937,7 @@ var letterSpacings = import_dev52.defineTokens.letterSpacings({
 
 // src/tokens/index.ts
 var tokens = (0, import_dev53.defineTokens)({
-  borders,
+  borderWidths,
   colors,
   durations,
   fonts,
@@ -4731,6 +5953,1253 @@ var tokens = (0, import_dev53.defineTokens)({
   zIndex
 });
 
+// src/tokens-next/index.ts
+var import_dev59 = require("@pandacss/dev");
+
+// src/tokens-next/borders.ts
+var import_dev54 = require("@pandacss/dev");
+var borderWidths2 = import_dev54.defineTokens.borderWidths({
+  none: { value: "none" },
+  sm: { value: "1px" },
+  md: { value: "1.5px" },
+  lg: { value: "2px" },
+  xl: { value: "3px" },
+  "2xl": { value: "4px" }
+});
+
+// src/tokens-next/colors.ts
+var import_dev55 = require("@pandacss/dev");
+var colors2 = import_dev55.defineTokens.colors({
+  debug: { value: "red" },
+  currentcolor: { value: "currentcolor" },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  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" }
+  },
+  yellow: {
+    100: { value: "#FDF6DD" },
+    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: "#F2F9F6" },
+    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" }
+  },
+  brand: {
+    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" }
+  }
+});
+
+// src/tokens-next/radii.ts
+var import_dev56 = require("@pandacss/dev");
+var radii2 = import_dev56.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" },
+  full: { value: "999px" }
+});
+
+// src/tokens-next/spacing.ts
+var import_dev57 = require("@pandacss/dev");
+var spacing2 = import_dev57.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" }
+});
+
+// src/tokens-next/shadows.ts
+var import_dev58 = require("@pandacss/dev");
+var shadows2 = import_dev58.defineTokens.shadows({
+  xs: {
+    value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
+  },
+  sm: {
+    value: ["0px 10px 15px -3px {colors.background.shadow}", "0px 4px 6px -2px {colors.background.shadow}"]
+  },
+  md: {
+    value: ["0px 20px 25px -5px {colors.background.shadow}", "0px 10px 10px -5px {colors.background.shadow}"]
+  },
+  lg: {
+    value: ["0px 25px 30px -10px {colors.background.shadow}", "0px 15px 15px -10px {colors.background.shadow}"]
+  },
+  focus: {
+    value: "0 0 0 1px {colors.border.focused}"
+  },
+  outline: {
+    value: "0 0 0 3px #E0EEFF"
+  },
+  outer: {
+    value: "0 0 0 3px rgba(224, 238, 255, 1)"
+  },
+  none: {
+    value: "none"
+  }
+});
+
+// src/tokens-next/index.ts
+var tokensNext = (0, import_dev59.defineTokens)({
+  borderWidths: borderWidths2,
+  colors: colors2,
+  durations,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+  opacity,
+  radii: radii2,
+  shadows: shadows2,
+  sizes,
+  spacing: spacing2,
+  zIndex
+});
+
+// src/semanticTokens/index.ts
+var import_dev62 = require("@pandacss/dev");
+
+// src/semanticTokens/colors.ts
+var import_dev60 = require("@pandacss/dev");
+var colors3 = import_dev60.defineSemanticTokens.colors({
+  background: {
+    surface: {
+      value: {
+        base: "#F1F5F9",
+        // Doens't have raw token
+        _light: "#F1F5F9",
+        // Doesn't have raw token
+        _dark: "{colors.dark}"
+      }
+    },
+    stage: {
+      value: {
+        base: "{colors.white}",
+        _light: "{colors.white}",
+        _dark: "{colors.dark.100}"
+      }
+    },
+    overlay: {
+      value: {
+        base: "rgba(35, 41, 51, 0.80)",
+        // Doens't have raw token
+        _light: "rgba(35, 41, 51, 0.80)",
+        // Doesn't have raw token
+        _dark: "rgba(101, 127, 153, 0.8)"
+        // Doesn't have raw token
+      }
+    },
+    disabled: {
+      value: {
+        base: "rgba(29, 31, 36, 0.04)",
+        // Doesn't have raw token
+        _light: "rgba(29, 31, 36, 0.04)",
+        // Doesn't have raw token
+        _dark: "rgba(188, 214, 240, 0.04)"
+        // Doesn't have raw token
+      }
+    },
+    inverse: {
+      value: {
+        base: "{colors.dark.100}",
+        _light: "{colors.dark.100}",
+        _dark: "{colors.white}"
+      }
+    },
+    shadow: {
+      value: {
+        base: "rgba(29, 31, 36, 0.16)",
+        // Doesn't have raw token
+        _light: "rgba(29, 31, 36, 0.16)",
+        // Doesn't have raw token
+        _dark: "rgba(22, 26, 29, 1)"
+        // Doesn't have raw token
+      }
+    },
+    neutral: {
+      DEFAULT: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.dark.200}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.neutral.100}",
+          _light: "{colors.neutral.100}",
+          _dark: "{colors.dark.250}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.neutral.200}",
+          _light: "{colors.neutral.200}",
+          _dark: "{colors.dark.300}"
+        }
+      },
+      subtle: {
+        DEFAULT: {
+          value: {
+            base: "{colors.neutral.200}",
+            _light: "{colors.neutral.200}",
+            _dark: "{colors.dark.300}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.neutral.300}",
+            _light: "{colors.neutral.300}",
+            _dark: "{colors.dark.350}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.neutral.400}",
+            _light: "{colors.neutral.400}",
+            _dark: "{colors.dark.400}"
+          }
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.neutral.800}",
+            _light: "{colors.neutral.800}",
+            _dark: "{colors.dark.800}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.neutral.900}",
+            _light: "{colors.neutral.900}",
+            _dark: "{colors.dark.900}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.neutral.1000}",
+            _light: "{colors.neutral.1000}",
+            _dark: "{colors.dark.1000}"
+          }
+        }
+      }
+    },
+    brand: {
+      DEFAULT: {
+        value: {
+          base: "{colors.indigo.100}",
+          _light: "{colors.indigo.100}",
+          _dark: "{colors.indigo.1000}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.indigo.200}",
+          _light: "{colors.indigo.200}",
+          _dark: "{colors.indigo.900}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.indigo.300}",
+          _light: "{colors.indigo.300}",
+          _dark: "{colors.indigo.800}"
+        }
+      },
+      selected: {
+        value: {
+          base: "{colors.indigo.200}",
+          _light: "{colors.indigo.200}",
+          _dark: "{colors.indigo.900}"
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.indigo.700}",
+            _light: "{colors.indigo.700}",
+            _dark: "{colors.indigo.400}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.indigo.800}",
+            _light: "{colors.indigo.800}",
+            _dark: "{colors.indigo.300}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.indigo.900}",
+            _liht: "{colors.indigo.900}",
+            _dark: "{colors.indigo.200}"
+          }
+        },
+        selected: {
+          value: {
+            base: "{colors.indigo.700}",
+            _liht: "{colors.indigo.700}",
+            _dark: "{colors.indigo.400}"
+          }
+        }
+      }
+    },
+    tertiary: {
+      DEFAULT: {
+        value: {
+          base: "{colors.dark.200}",
+          _light: "{colors.dark.200}",
+          _dark: "{colors.dark.200}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.dark.300}",
+          _light: "{colors.dark.300}",
+          _dark: "{colors.dark.300}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.dark.400}",
+          _light: "{colors.dark.400}",
+          _dark: "{colors.dark.400}"
+        }
+      }
+    },
+    danger: {
+      DEFAULT: {
+        value: {
+          base: "{colors.red.100}",
+          _light: "{colors.red.100}",
+          _dark: "{colors.red.1000}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.red.200}",
+          _light: "{colors.red.200}",
+          _dark: "{colors.red.900}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.red.300}",
+          _light: "{colors.red.300}",
+          _dark: "{colors.red.800}"
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.red.700}",
+            _light: "{colors.red.700}",
+            _dark: "{colors.red.400}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.red.800}",
+            _light: "{colors.red.800}",
+            _dark: "{colors.red.300}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.red.900}",
+            _liht: "{colors.red.900}",
+            _dark: "{colors.red.200}"
+          }
+        }
+      }
+    },
+    warning: {
+      DEFAULT: {
+        value: {
+          base: "{colors.yellow.100}",
+          _light: "{colors.yellow.100}",
+          _dark: "{colors.yellow.1000}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.yellow.200}",
+          _light: "{colors.yellow.200}",
+          _dark: "{colors.yellow.900}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.yellow.300}",
+          _light: "{colors.yellow.300}",
+          _dark: "{colors.yellow.800}"
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.yellow.300}",
+            _light: "{colors.yellow.300}",
+            _dark: "{colors.yellow.300}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.yellow.400}",
+            _light: "{colors.yellow.400}",
+            _dark: "{colors.yellow.400}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.yellow.500}",
+            _liht: "{colors.yellow.500}",
+            _dark: "{colors.yellow.500}"
+          }
+        }
+      }
+    },
+    success: {
+      DEFAULT: {
+        value: {
+          base: "{colors.green.100}",
+          _light: "{colors.green.100}",
+          _dark: "{colors.green.1000}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.green.200}",
+          _light: "{colors.green.200}",
+          _dark: "{colors.green.900}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.green.300}",
+          _light: "{colors.green.300}",
+          _dark: "{colors.green.800}"
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.green.700}",
+            _light: "{colors.green.700}",
+            _dark: "{colors.green.400}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.green.800}",
+            _light: "{colors.green.800}",
+            _dark: "{colors.green.300}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.green.900}",
+            _liht: "{colors.green.900}",
+            _dark: "{colors.green.200}"
+          }
+        }
+      }
+    },
+    highlight: {
+      DEFAULT: {
+        value: {
+          base: "{colors.violet.100}",
+          _light: "{colors.violet.100}",
+          _dark: "{colors.violet.1000}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.violet.200}",
+          _light: "{colors.violet.200}",
+          _dark: "{colors.violet.900}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.violet.300}",
+          _light: "{colors.violet.300}",
+          _dark: "{colors.violet.800}"
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: "{colors.violet.700}",
+            _light: "{colors.violet.700}",
+            _dark: "{colors.violet.400}"
+          }
+        },
+        hovered: {
+          value: {
+            base: "{colors.violet.800}",
+            _light: "{colors.violet.800}",
+            _dark: "{colors.violet.300}"
+          }
+        },
+        pressed: {
+          value: {
+            base: "{colors.violet.900}",
+            _liht: "{colors.violet.900}",
+            _dark: "{colors.violet.200}"
+          }
+        }
+      }
+    }
+  },
+  nav: {
+    parent: {
+      value: {
+        base: "#E7EDF5",
+        // Doesn't have raw token
+        _light: "#E7EDF5",
+        // Doesn't have raw token
+        _dark: "{colors.dark.100}"
+      }
+    },
+    stack: {
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.100}",
+          _light: "{colors.neutral.100}",
+          _dark: "{colors.dark}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "#E7EDF5",
+          // Doesn't have raw token
+          _light: "#E7EDF5",
+          // Doesn't have raw token
+          _dark: "{colors.dark.100}"
+        }
+      }
+    }
+  },
+  text: {
+    default: {
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.1000}",
+          _light: "{colors.neutral.1000}",
+          _dark: "{colors.dark.900}"
+        }
+      },
+      static: {
+        value: {
+          base: "{colors.neutral.1000}",
+          _light: "{colors.neutral.1000}",
+          _dark: "{colors.neutral.1000}"
+        }
+      }
+    },
+    secondary: {
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.700}",
+          _light: "{colors.neutral.700}",
+          _dark: "{colors.dark.700}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.neutral.800}",
+          _light: "{colors.neutral.800}",
+          _dark: "{colors.dark.800}"
+        }
+      }
+    },
+    placeholder: {
+      value: {
+        base: "{colors.neutral.600}",
+        _light: "{colors.neutral.600}",
+        _dark: "{colors.dark.600}"
+      }
+    },
+    disabled: {
+      value: {
+        base: "rgba(29, 31, 36, 0.32)",
+        // Doesn't have raw token
+        _light: "rgba(29, 31, 36, 0.32)",
+        // Doesn't have raw token
+        _dark: "rgba(191, 219, 248, 0.28)"
+        // Doesn't have raw token
+      }
+    },
+    inverse: {
+      DEFAULT: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.dark.100}"
+        }
+      },
+      static: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.white}"
+        }
+      }
+    },
+    selected: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    },
+    danger: {
+      DEFAULT: {
+        value: {
+          base: "{colors.red.800}",
+          _light: "{colors.red.800}",
+          _dark: "{colors.red.300}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.red.900}",
+          _light: "{colors.red.900}",
+          _dark: "{colors.red.200}"
+        }
+      }
+    },
+    warning: {
+      DEFAULT: {
+        value: {
+          base: "{colors.orange.800}",
+          _light: "{colors.orange.800}",
+          _dark: "{colors.yellow.300}"
+        }
+      },
+      inverse: {
+        value: {
+          base: "{colors.neutral.1000}",
+          _light: "{colors.neutral.1000}",
+          _dark: "{colors.neutral.1000}"
+        }
+      }
+    },
+    success: {
+      value: {
+        base: "{colors.green.800}",
+        _light: "{colors.green.800}",
+        _dark: "{colors.green.300}"
+      }
+    },
+    highlight: {
+      value: {
+        base: "{colors.violet.800}",
+        _light: "{colors.violet.800}",
+        _dark: "{colors.violet.300}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.800}",
+        _light: "{colors.indigo.800}",
+        _dark: "{colors.indigo.300}"
+      }
+    },
+    link: {
+      DEFAULT: {
+        value: {
+          base: "{colors.indigo.700}",
+          _light: "{colors.indigo.700}",
+          _dark: "{colors.indigo.400}"
+        }
+      },
+      pressed: {
+        value: {
+          base: "{colors.indigo.800}",
+          _light: "{colors.indigo.800}",
+          _dark: "{colors.indigo.300}"
+        }
+      }
+    }
+  },
+  icon: {
+    default: {
+      value: {
+        base: "{colors.neutral.600}",
+        _light: "{colors.neutral.600}",
+        _dark: "{colors.dark.600}"
+      }
+    },
+    disabled: {
+      value: {
+        base: "{colors.neutral.400}",
+        _light: "{colors.neutral.400}",
+        _dark: "{colors.dark.400}"
+      }
+    },
+    inverse: {
+      DEFAULT: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.dark.100}"
+        }
+      },
+      static: {
+        value: {
+          base: "{colors.white}",
+          _light: "{colors.white}",
+          _dark: "{colors.white}"
+        }
+      }
+    },
+    selected: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    },
+    brand: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    },
+    danger: {
+      value: {
+        base: "{colors.red.700}",
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.400}"
+      }
+    },
+    warning: {
+      DEFAULT: {
+        value: {
+          base: "{colors.orange.700}",
+          _light: "{colors.orange.700}",
+          _dark: "{colors.yellow.300}"
+        }
+      },
+      inverse: {
+        value: {
+          base: "{colors.neutral.1000}",
+          _light: "{colors.neutral.1000}",
+          _dark: "{colors.dark.100}"
+        }
+      }
+    },
+    success: {
+      value: {
+        base: "{colors.green.700}",
+        _light: "{colors.green.700}",
+        _dark: "{colors.green.400}"
+      }
+    },
+    highlight: {
+      value: {
+        base: "{colors.violet.700}",
+        _light: "{colors.violet.700}",
+        _dark: "{colors.violet.400}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    },
+    subtle: {
+      value: {
+        base: "{colors.neutral.300}",
+        _light: "{colors.neutral.300}",
+        _dark: "{colors.dark.300}"
+      }
+    },
+    logo: {
+      value: {
+        base: "{colors.neutral.1000}",
+        _light: "{colors.neutral.1000}",
+        _dark: "{colors.neutral.100}"
+      }
+    }
+  },
+  border: {
+    default: {
+      value: {
+        base: "{colors.neutral.300}",
+        _light: "{colors.neutral.300}",
+        _dark: "{colors.dark.300}"
+      }
+    },
+    bold: {
+      value: {
+        base: "{colors.neutral.600}",
+        _light: "{colors.neutral.600}",
+        _dark: "{colors.dark.600}"
+      }
+    },
+    disabled: {
+      value: {
+        base: "rgba(29, 31, 36, 0.08)",
+        // Doens't have raw token
+        _light: "rgba(29, 31, 36, 0.08)",
+        // Doens't have raw token
+        _dark: "rgba(161, 189, 217, 0.08)"
+        // Doens't have raw token
+      }
+    },
+    form: {
+      value: {
+        base: "rgba(29, 31, 36, 0.16)",
+        // Doens't have raw token
+        _light: "rgba(29, 31, 36, 0.16)",
+        // Doens't have raw token
+        _dark: "rgba(166, 197, 226, 0.16)"
+        // Doens't have raw token
+      }
+    },
+    focused: {
+      value: {
+        base: "{colors.indigo.500}",
+        _light: "{colors.indigo.500}",
+        _dark: "{colors.indigo.300}"
+      }
+    },
+    inverse: {
+      value: {
+        base: "{colors.white}",
+        _light: "{colors.white}",
+        _dark: "{colors.dark.100}"
+      }
+    },
+    selected: {
+      DEFAULT: {
+        value: {
+          base: "{colors.indigo.700}",
+          _light: "{colors.indigo.700}",
+          _dark: "{colors.indigo.400}"
+        }
+      },
+      hovered: {
+        value: {
+          base: "{colors.indigo.800}",
+          _light: "{colors.indigo.800}",
+          _dark: "{colors.indigo.300}"
+        }
+      },
+      disabled: {
+        value: {
+          base: "{colors.indigo.200}",
+          _light: "{colors.indigo.200}",
+          _dark: "{colors.indigo.900}"
+        }
+      }
+    },
+    brand: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    },
+    danger: {
+      value: {
+        base: "{colors.red.700}",
+        _light: "{colors.red.700}",
+        _dark: "{colors.red.400}"
+      }
+    },
+    warning: {
+      value: {
+        base: "{colors.yellow.300}",
+        _light: "{colors.yellow.300}",
+        _dark: "{colors.yellow.300}"
+      }
+    },
+    success: {
+      value: {
+        base: "{colors.green.700}",
+        _light: "{colors.green.700}",
+        _dark: "{colors.green.400}"
+      }
+    },
+    highlight: {
+      value: {
+        base: "{colors.violet.700}",
+        _light: "{colors.violet.700}",
+        _dark: "{colors.violet.400}"
+      }
+    },
+    information: {
+      value: {
+        base: "{colors.indigo.700}",
+        _light: "{colors.indigo.700}",
+        _dark: "{colors.indigo.400}"
+      }
+    }
+  },
+  chart: {
+    cat01: {
+      DEFAULT: {
+        value: {
+          base: "{colors.blue.400}",
+          _light: "{colors.blue.400}",
+          _dark: "{colors.blue.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.blue.600}",
+          _light: "{colors.blue.600}",
+          _dark: "{colors.blue.500}"
+        }
+      }
+    },
+    cat02: {
+      DEFAULT: {
+        value: {
+          base: "{colors.teal.400}",
+          _light: "{colors.teal.400}",
+          _dark: "{colors.teal.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.teal.600}",
+          _light: "{colors.teal.600}",
+          _dark: "{colors.teal.500}"
+        }
+      }
+    },
+    cat03: {
+      DEFAULT: {
+        value: {
+          base: "{colors.violet.400}",
+          _light: "{colors.violet.400}",
+          _dark: "{colors.violet.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.violet.600}",
+          _light: "{colors.violet.600}",
+          _dark: "{colors.violet.500}"
+        }
+      }
+    },
+    cat04: {
+      DEFAULT: {
+        value: {
+          base: "{colors.orange.400}",
+          _light: "{colors.orange.400}",
+          _dark: "{colors.orange.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.orange.600}",
+          _light: "{colors.orange.600}",
+          _dark: "{colors.orange.500}"
+        }
+      }
+    },
+    cat05: {
+      DEFAULT: {
+        value: {
+          base: "{colors.neutral.400}",
+          _light: "{colors.neutral.400}",
+          _dark: "{colors.neutral.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.neutral.600}",
+          _light: "{colors.neutral.600}",
+          _dark: "{colors.neutral.500}"
+        }
+      }
+    },
+    cat06: {
+      DEFAULT: {
+        value: {
+          base: "{colors.red.400}",
+          _light: "{colors.red.400}",
+          _dark: "{colors.red.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.red.600}",
+          _light: "{colors.red.600}",
+          _dark: "{colors.red.500}"
+        }
+      }
+    },
+    cat07: {
+      DEFAULT: {
+        value: {
+          base: "{colors.lime.400}",
+          _light: "{colors.lime.400}",
+          _dark: "{colors.lime.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.lime.600}",
+          _light: "{colors.lime.600}",
+          _dark: "{colors.lime.500}"
+        }
+      }
+    },
+    cat08: {
+      DEFAULT: {
+        value: {
+          base: "{colors.fuchsia.400}",
+          _light: "{colors.fuchsia.400}",
+          _dark: "{colors.fuchsia.300}"
+        }
+      },
+      bold: {
+        value: {
+          base: "{colors.fuchsia.600}",
+          _light: "{colors.fuchsia.600}",
+          _dark: "{colors.fuchsia.500}"
+        }
+      }
+    }
+  }
+});
+
+// src/semanticTokens/spacing.ts
+var import_dev61 = require("@pandacss/dev");
+var spacing3 = import_dev61.defineSemanticTokens.spacing({
+  "4xs": {
+    value: {
+      base: "0.125rem"
+    }
+  },
+  "3xs": {
+    value: {
+      base: "{spacing.1}"
+    }
+  },
+  "2xs": {
+    value: {
+      base: "0.375rem"
+    }
+  },
+  xs: {
+    value: {
+      base: "{spacing.2}"
+    }
+  },
+  sm: {
+    value: {
+      base: "{spacing.3}"
+    }
+  },
+  md: {
+    value: {
+      base: "{spacing.4}"
+    }
+  },
+  lg: {
+    value: {
+      base: "{spacing.5}"
+    }
+  },
+  xl: {
+    value: {
+      base: "{spacing.6}"
+    }
+  },
+  "2xl": {
+    value: {
+      base: "{spacing.8}"
+    }
+  },
+  "3xl": {
+    value: {
+      base: "{spacing.10}"
+    }
+  },
+  "4xl": {
+    value: {
+      base: "{spacing.20}"
+    }
+  }
+});
+
+// src/semanticTokens/index.ts
+var semanticTokens = (0, import_dev62.defineSemanticTokens)({
+  colors: colors3,
+  spacing: spacing3
+});
+
 // src/fonts.ts
 var globalFontface = {
   Inter: [
@@ -4765,21 +7234,32 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev54.definePreset)({
+var preset = (0, import_dev63.definePreset)({
   name: "@mekari/pixel3-theme",
+  // Main Theme
   theme: {
     extend: {
+      tokens,
       breakpoints,
       keyframes,
       textStyles,
-      tokens,
       recipes,
       slotRecipes
     }
   },
+  // Alternate Theme
+  themes: {
+    next: {
+      tokens: tokensNext,
+      semanticTokens
+    }
+  },
   conditions,
-  globalFontface,
   globalCss,
+  staticCss: {
+    themes: ["next"]
+  },
+  globalFontface,
   globalVars: {
     "--font-inter": "Inter, sans-serif"
   }