@mekari/pixel3-styled-system 0.1.2-dev.0 → 0.1.2-dev.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @mekari/pixel3-styled-system
 
+## 0.1.2-dev.2
+
+### Patch Changes
+
+- b2f5f87: Fix position close button when size sm
+- 68b6f80: - Update recipe for MpDivider.
+- 7cf4e2f: - Update styled system.
+
+## 0.1.2-dev.1
+
+### Patch Changes
+
+- 5bba679: - Updated recipe for `MpAvatar`.
+- 2dfe3f6: - Updated recipe for `MpInput`.
+- bf2a9b1: - Added new `aireneButtonSlotRecipe` recipe.
+  - Added new token `vibrantPurple`.
+- dd11e3c: - Updated recipe for `MpTag`.
+  - Updated recipe for `MpSegmentedControl`.
+- e6090e0: - Updated recipe for `MpToast`.
+- 083aee7: Generate new styled-system
+- 387ae21: Fix Types
+- a9efd3d: - Updated recipe for `MpText`.
+  - Updated recipe for `MpBanner`.
+  - Updated recipe for `MpIcon`.
+- d52234c: - Update recipe.
+
 ## 0.1.2-dev.0
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-styled-system",
   "description": "This package is auto-generated by Panda CSS",
-  "version": "0.1.2-dev.0",
+  "version": "0.1.2-dev.2",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/recipes/accordion-slot-recipe.d.ts

@@ -7,6 +7,10 @@ interface AccordionSlotRecipeVariant {
  * @default true
  */
 isClickable: boolean
+/**
+ * @default "end"
+ */
+iconPosition: "start" | "end"
 }
 
 type AccordionSlotRecipeVariantMap = {
@@ -19,7 +23,7 @@ export type AccordionSlotRecipeVariantProps = {
 
 export interface AccordionSlotRecipeRecipe {
   __type: AccordionSlotRecipeVariantProps
-  (props?: AccordionSlotRecipeVariantProps): Pretty<Record<"header" | "item" | "panel", string>>
+  (props?: AccordionSlotRecipeVariantProps): Pretty<Record<"header" | "headerTitle" | "headerDescription" | "item" | "panel", string>>
   raw: (props?: AccordionSlotRecipeVariantProps) => AccordionSlotRecipeVariantProps
   variantMap: AccordionSlotRecipeVariantMap
   variantKeys: Array<keyof AccordionSlotRecipeVariant>

package/recipes/accordion-slot-recipe.mjs

@@ -2,7 +2,8 @@ import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mj
 import { createRecipe } from './create-recipe.mjs';
 
 const accordionSlotRecipeDefaultVariants = {
-  "isClickable": true
+  "isClickable": true,
+  "iconPosition": "end"
 }
 const accordionSlotRecipeCompoundVariants = []
 
@@ -11,6 +12,14 @@ const accordionSlotRecipeSlotNames = [
     "header",
     "accordion__header"
   ],
+  [
+    "headerTitle",
+    "accordion__headerTitle"
+  ],
+  [
+    "headerDescription",
+    "accordion__headerDescription"
+  ],
   [
     "item",
     "accordion__item"
@@ -27,7 +36,8 @@ const accordionSlotRecipeFn = memo((props = {}) => {
 })
 
 const accordionSlotRecipeVariantKeys = [
-  "isClickable"
+  "isClickable",
+  "iconPosition"
 ]
 const getVariantProps = (variants) => ({ ...accordionSlotRecipeDefaultVariants, ...compact(variants) })
 
@@ -40,6 +50,10 @@ export const accordionSlotRecipe = /* @__PURE__ */ Object.assign(accordionSlotRe
   "isClickable": [
     "true",
     "false"
+  ],
+  "iconPosition": [
+    "start",
+    "end"
   ]
 },
   splitVariantProps(props) {

package/recipes/airene-button-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AireneButtonRecipeVariant {
+  
+}
+
+type AireneButtonRecipeVariantMap = {
+  [key in keyof AireneButtonRecipeVariant]: Array<AireneButtonRecipeVariant[key]>
+}
+
+export type AireneButtonRecipeVariantProps = {
+  [key in keyof AireneButtonRecipeVariant]?: ConditionalValue<AireneButtonRecipeVariant[key]> | undefined
+}
+
+export interface AireneButtonRecipeRecipe {
+  __type: AireneButtonRecipeVariantProps
+  (props?: AireneButtonRecipeVariantProps): Pretty<Record<"root" | "badge", string>>
+  raw: (props?: AireneButtonRecipeVariantProps) => AireneButtonRecipeVariantProps
+  variantMap: AireneButtonRecipeVariantMap
+  variantKeys: Array<keyof AireneButtonRecipeVariant>
+  splitVariantProps<Props extends AireneButtonRecipeVariantProps>(props: Props): [AireneButtonRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AireneButtonRecipeVariantProps>>]
+  getVariantProps: (props?: AireneButtonRecipeVariantProps) => AireneButtonRecipeVariantProps
+}
+
+
+export declare const aireneButtonRecipe: AireneButtonRecipeRecipe

package/recipes/airene-button-recipe.mjs

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aireneButtonRecipeDefaultVariants = {}
+const aireneButtonRecipeCompoundVariants = []
+
+const aireneButtonRecipeSlotNames = [
+  [
+    "root",
+    "airene-button__root"
+  ],
+  [
+    "badge",
+    "airene-button__badge"
+  ]
+]
+const aireneButtonRecipeSlotFns = /* @__PURE__ */ aireneButtonRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aireneButtonRecipeDefaultVariants, getSlotCompoundVariant(aireneButtonRecipeCompoundVariants, slotName))])
+
+const aireneButtonRecipeFn = memo((props = {}) => {
+  return Object.fromEntries(aireneButtonRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aireneButtonRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...aireneButtonRecipeDefaultVariants, ...compact(variants) })
+
+export const aireneButtonRecipe = /* @__PURE__ */ Object.assign(aireneButtonRecipeFn, {
+  __recipe__: false,
+  __name__: 'aireneButtonRecipe',
+  raw: (props) => props,
+  variantKeys: aireneButtonRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aireneButtonRecipeVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/airene-button-slot-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AireneButtonSlotRecipeVariant {
+  
+}
+
+type AireneButtonSlotRecipeVariantMap = {
+  [key in keyof AireneButtonSlotRecipeVariant]: Array<AireneButtonSlotRecipeVariant[key]>
+}
+
+export type AireneButtonSlotRecipeVariantProps = {
+  [key in keyof AireneButtonSlotRecipeVariant]?: ConditionalValue<AireneButtonSlotRecipeVariant[key]> | undefined
+}
+
+export interface AireneButtonSlotRecipeRecipe {
+  __type: AireneButtonSlotRecipeVariantProps
+  (props?: AireneButtonSlotRecipeVariantProps): Pretty<Record<"root" | "badge", string>>
+  raw: (props?: AireneButtonSlotRecipeVariantProps) => AireneButtonSlotRecipeVariantProps
+  variantMap: AireneButtonSlotRecipeVariantMap
+  variantKeys: Array<keyof AireneButtonSlotRecipeVariant>
+  splitVariantProps<Props extends AireneButtonSlotRecipeVariantProps>(props: Props): [AireneButtonSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof AireneButtonSlotRecipeVariantProps>>]
+  getVariantProps: (props?: AireneButtonSlotRecipeVariantProps) => AireneButtonSlotRecipeVariantProps
+}
+
+
+export declare const aireneButtonSlotRecipe: AireneButtonSlotRecipeRecipe

package/recipes/airene-button-slot-recipe.mjs

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aireneButtonSlotRecipeDefaultVariants = {}
+const aireneButtonSlotRecipeCompoundVariants = []
+
+const aireneButtonSlotRecipeSlotNames = [
+  [
+    "root",
+    "airene-button__root"
+  ],
+  [
+    "badge",
+    "airene-button__badge"
+  ]
+]
+const aireneButtonSlotRecipeSlotFns = /* @__PURE__ */ aireneButtonSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aireneButtonSlotRecipeDefaultVariants, getSlotCompoundVariant(aireneButtonSlotRecipeCompoundVariants, slotName))])
+
+const aireneButtonSlotRecipeFn = memo((props = {}) => {
+  return Object.fromEntries(aireneButtonSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aireneButtonSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...aireneButtonSlotRecipeDefaultVariants, ...compact(variants) })
+
+export const aireneButtonSlotRecipe = /* @__PURE__ */ Object.assign(aireneButtonSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'aireneButtonSlotRecipe',
+  raw: (props) => props,
+  variantKeys: aireneButtonSlotRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aireneButtonSlotRecipeVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/button-recipe.d.ts

@@ -6,7 +6,7 @@ interface ButtonRecipeVariant {
   /**
  * @default "primary"
  */
-variant: "primary" | "secondary" | "ghost" | "danger" | "textLink"
+variant: "primary" | "secondary" | "ghost" | "danger" | "tertiary" | "textLink" | "unstyled"
 /**
  * @default "md"
  */

package/recipes/button-recipe.mjs

@@ -11,7 +11,7 @@ const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
     ],
     "css": {
       "borderRadius": "sm",
-      "_focus": {
+      "_focusVisible": {
         "borderColor": "white",
         "boxShadow": "focus",
         "_nextTheme": {
@@ -34,10 +34,11 @@ const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
     "variant": [
       "primary",
       "secondary",
-      "ghost"
+      "ghost",
+      "tertiary"
     ],
     "css": {
-      "_focus": {
+      "_focusVisible": {
         "borderColor": "blue.400",
         "boxShadow": "focus",
         "_nextTheme": {
@@ -52,7 +53,8 @@ const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
       "primary",
       "secondary",
       "ghost",
-      "danger"
+      "danger",
+      "tertiary"
     ],
     "css": {
       "_disabled": {
@@ -62,7 +64,15 @@ const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
         "borderColor": "gray.50",
         "_hover": {
           "background": "gray.50",
-          "borderColor": "gray.50"
+          "borderColor": "gray.50",
+          "_hasIcon": {
+            "background": "transparent",
+            "borderColor": "transparent"
+          }
+        },
+        "_hasIcon": {
+          "background": "transparent",
+          "borderColor": "transparent"
         },
         "_nextTheme": {
           "color": "text.disabled",
@@ -70,7 +80,15 @@ const buttonRecipeFn = /* @__PURE__ */ createRecipe('button', {
           "borderColor": "background.disabled",
           "_hover": {
             "background": "background.disabled",
-            "borderColor": "background.disabled"
+            "borderColor": "background.disabled",
+            "_hasIcon": {
+              "background": "transparent",
+              "borderColor": "transparent"
+            }
+          },
+          "_hasIcon": {
+            "background": "transparent",
+            "borderColor": "transparent"
           }
         }
       }
@@ -84,7 +102,9 @@ const buttonRecipeVariantMap = {
     "secondary",
     "ghost",
     "danger",
-    "textLink"
+    "tertiary",
+    "textLink",
+    "unstyled"
   ],
   "size": [
     "sm",

package/recipes/divider-slot-recipe.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface DividerSlotRecipeVariant {
+  
+}
+
+type DividerSlotRecipeVariantMap = {
+  [key in keyof DividerSlotRecipeVariant]: Array<DividerSlotRecipeVariant[key]>
+}
+
+export type DividerSlotRecipeVariantProps = {
+  [key in keyof DividerSlotRecipeVariant]?: ConditionalValue<DividerSlotRecipeVariant[key]> | undefined
+}
+
+export interface DividerSlotRecipeRecipe {
+  __type: DividerSlotRecipeVariantProps
+  (props?: DividerSlotRecipeVariantProps): Pretty<Record<"root" | "label", string>>
+  raw: (props?: DividerSlotRecipeVariantProps) => DividerSlotRecipeVariantProps
+  variantMap: DividerSlotRecipeVariantMap
+  variantKeys: Array<keyof DividerSlotRecipeVariant>
+  splitVariantProps<Props extends DividerSlotRecipeVariantProps>(props: Props): [DividerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DividerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: DividerSlotRecipeVariantProps) => DividerSlotRecipeVariantProps
+}
+
+
+export declare const dividerSlotRecipe: DividerSlotRecipeRecipe

package/recipes/divider-slot-recipe.mjs

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const dividerSlotRecipeDefaultVariants = {}
+const dividerSlotRecipeCompoundVariants = []
+
+const dividerSlotRecipeSlotNames = [
+  [
+    "root",
+    "divider__root"
+  ],
+  [
+    "label",
+    "divider__label"
+  ]
+]
+const dividerSlotRecipeSlotFns = /* @__PURE__ */ dividerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dividerSlotRecipeDefaultVariants, getSlotCompoundVariant(dividerSlotRecipeCompoundVariants, slotName))])
+
+const dividerSlotRecipeFn = memo((props = {}) => {
+  return Object.fromEntries(dividerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const dividerSlotRecipeVariantKeys = []
+const getVariantProps = (variants) => ({ ...dividerSlotRecipeDefaultVariants, ...compact(variants) })
+
+export const dividerSlotRecipe = /* @__PURE__ */ Object.assign(dividerSlotRecipeFn, {
+  __recipe__: false,
+  __name__: 'dividerSlotRecipe',
+  raw: (props) => props,
+  variantKeys: dividerSlotRecipeVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, dividerSlotRecipeVariantKeys)
+  },
+  getVariantProps
+})

package/recipes/index.d.ts

@@ -14,7 +14,6 @@ export * from './tab-recipe';
 export * from './tab-selected-border-recipe';
 export * from './table-recipe';
 export * from './table-container-recipe';
-export * from './divider-recipe';
 export * from './banner-title-recipe';
 export * from './banner-description-recipe';
 export * from './banner-link-recipe';
@@ -28,6 +27,7 @@ export * from './year-item-recipe';
 export * from './time-item-recipe';
 export * from './accordion-slot-recipe';
 export * from './checkbox-slot-recipe';
+export * from './divider-slot-recipe';
 export * from './radio-slot-recipe';
 export * from './shared-slot-recipe';
 export * from './progress-slot-recipe';
@@ -68,4 +68,5 @@ export * from './timeline-accordion-slot-recipe';
 export * from './tab-list-slot-recipe';
 export * from './color-picker-slot-recipe';
 export * from './slider-slot-recipe';
-export * from './tour-slot-recipe';
+export * from './tour-slot-recipe';
+export * from './airene-button-slot-recipe';

package/recipes/index.mjs

@@ -13,7 +13,6 @@ export * from './tab-recipe.mjs';
 export * from './tab-selected-border-recipe.mjs';
 export * from './table-recipe.mjs';
 export * from './table-container-recipe.mjs';
-export * from './divider-recipe.mjs';
 export * from './banner-title-recipe.mjs';
 export * from './banner-description-recipe.mjs';
 export * from './banner-link-recipe.mjs';
@@ -27,6 +26,7 @@ export * from './year-item-recipe.mjs';
 export * from './time-item-recipe.mjs';
 export * from './accordion-slot-recipe.mjs';
 export * from './checkbox-slot-recipe.mjs';
+export * from './divider-slot-recipe.mjs';
 export * from './radio-slot-recipe.mjs';
 export * from './shared-slot-recipe.mjs';
 export * from './progress-slot-recipe.mjs';
@@ -67,4 +67,5 @@ export * from './timeline-accordion-slot-recipe.mjs';
 export * from './tab-list-slot-recipe.mjs';
 export * from './color-picker-slot-recipe.mjs';
 export * from './slider-slot-recipe.mjs';
-export * from './tour-slot-recipe.mjs';
+export * from './tour-slot-recipe.mjs';
+export * from './airene-button-slot-recipe.mjs';

package/recipes/tag-slot-recipe.mjs

@@ -15,9 +15,9 @@ const tagSlotRecipeCompoundVariants = [
         "borderBottomLeftRadius": "0",
         "color": "gray.600",
         "_nextTheme": {
-          "background": "background.danger",
+          "background": "background.neutral.subtle",
           "boxShadow": "-7px 0px 15px -3px #0000001A",
-          "color": "icon.danger"
+          "color": "icon.default"
         }
       }
     }
@@ -37,14 +37,6 @@ const tagSlotRecipeCompoundVariants = [
         }
       }
     }
-  },
-  {
-    "size": "sm",
-    "css": {
-      "close": {
-        "paddingTop": "0"
-      }
-    }
   }
 ]
 

package/themes/next.json

@@ -1,5 +1,5 @@
 {
   "name": "next",
   "id": "panda-theme-next",
-  "css": " [data-panda-theme=next] {\n    --mp-border-widths-none: none;\n    --mp-border-widths-sm: 1px;\n    --mp-border-widths-md: 1.5px;\n    --mp-border-widths-lg: 2px;\n    --mp-border-widths-xl: 3px;\n    --mp-border-widths-2xl: 4px;\n    --mp-colors-debug: red;\n    --mp-colors-currentcolor: currentcolor;\n    --mp-colors-white: #FFFFFF;\n    --mp-colors-dark-100: #1D2125;\n    --mp-colors-dark-200: #22272B;\n    --mp-colors-dark-250: #282E33;\n    --mp-colors-dark-300: #2C333A;\n    --mp-colors-dark-350: #38414A;\n    --mp-colors-dark-400: #454F59;\n    --mp-colors-dark-500: #596773;\n    --mp-colors-dark-600: #738496;\n    --mp-colors-dark-700: #8C9BAB;\n    --mp-colors-dark-800: #9FADBC;\n    --mp-colors-dark-900: #B6C2CF;\n    --mp-colors-dark-1000: #C7D1DB;\n    --mp-colors-dark--100: #101214;\n    --mp-colors-dark: #161A1D;\n    --mp-colors-neutral-100: #F7F8F9;\n    --mp-colors-neutral-200: #F0F1F3;\n    --mp-colors-neutral-300: #DCDFE4;\n    --mp-colors-neutral-400: #B2B9C4;\n    --mp-colors-neutral-500: #8690A2;\n    --mp-colors-neutral-600: #758195;\n    --mp-colors-neutral-700: #656F80;\n    --mp-colors-neutral-800: #4C5460;\n    --mp-colors-neutral-900: #383E48;\n    --mp-colors-neutral-1000: #272B32;\n    --mp-colors-blue-100: #ECF3FE;\n    --mp-colors-blue-200: #CEE0FD;\n    --mp-colors-blue-300: #8EB7FA;\n    --mp-colors-blue-400: #649CF8;\n    --mp-colors-blue-500: #488BF7;\n    --mp-colors-blue-600: #387CEB;\n    --mp-colors-blue-700: #306AC8;\n    --mp-colors-blue-800: #295AAA;\n    --mp-colors-blue-900: #173361;\n    --mp-colors-blue-1000: #132A4F;\n    --mp-colors-indigo-100: #EEF0FC;\n    --mp-colors-indigo-200: #D6DBF7;\n    --mp-colors-indigo-300: #A8B2EF;\n    --mp-colors-indigo-400: #8997E9;\n    --mp-colors-indigo-500: #7586E5;\n    --mp-colors-indigo-600: #6577E2;\n    --mp-colors-indigo-700: #4B61DC;\n    --mp-colors-indigo-800: #4053BC;\n    --mp-colors-indigo-900: #242F6A;\n    --mp-colors-indigo-1000: #1D2656;\n    --mp-colors-violet-100: #F3F1FC;\n    --mp-colors-violet-200: #DEDAF6;\n    --mp-colors-violet-300: #B8AEEB;\n    --mp-colors-violet-400: #9F91E3;\n    --mp-colors-violet-500: #8F7FDF;\n    --mp-colors-violet-600: #8270DB;\n    --mp-colors-violet-700: #6F5FBA;\n    --mp-colors-violet-800: #5F519F;\n    --mp-colors-violet-900: #352E5A;\n    --mp-colors-violet-1000: #2B2549;\n    --mp-colors-fuchsia-100: #FBEEFE;\n    --mp-colors-fuchsia-200: #F6D1FB;\n    --mp-colors-fuchsia-300: #EA98F6;\n    --mp-colors-fuchsia-400: #E16CF2;\n    --mp-colors-fuchsia-500: #DA4DF0;\n    --mp-colors-fuchsia-600: #C841DC;\n    --mp-colors-fuchsia-700: #AC37BD;\n    --mp-colors-fuchsia-800: #932FA2;\n    --mp-colors-fuchsia-900: #531B5C;\n    --mp-colors-fuchsia-1000: #45164C;\n    --mp-colors-red-100: #FCEEED;\n    --mp-colors-red-200: #F9D7D5;\n    --mp-colors-red-300: #F09E99;\n    --mp-colors-red-400: #EA7A72;\n    --mp-colors-red-500: #E6645B;\n    --mp-colors-red-600: #E2483D;\n    --mp-colors-red-700: #C33E35;\n    --mp-colors-red-800: #A8352D;\n    --mp-colors-red-900: #5E1E19;\n    --mp-colors-red-1000: #4E1915;\n    --mp-colors-orange-100: #FDF3EC;\n    --mp-colors-orange-200: #F9DECB;\n    --mp-colors-orange-300: #F5C39F;\n    --mp-colors-orange-400: #F0A875;\n    --mp-colors-orange-500: #EB8E4B;\n    --mp-colors-orange-600: #E46910;\n    --mp-colors-orange-700: #BC560D;\n    --mp-colors-orange-800: #A14A0B;\n    --mp-colors-orange-900: #6B3108;\n    --mp-colors-orange-1000: #492105;\n    --mp-colors-yellow-100: #FDF6DD;\n    --mp-colors-yellow-200: #F9E399;\n    --mp-colors-yellow-300: #F5CD47;\n    --mp-colors-yellow-400: #D8B53F;\n    --mp-colors-yellow-500: #C2A338;\n    --mp-colors-yellow-600: #A68A30;\n    --mp-colors-yellow-700: #897228;\n    --mp-colors-yellow-800: #766222;\n    --mp-colors-yellow-900: #4D4016;\n    --mp-colors-yellow-1000: #362D10;\n    --mp-colors-lime-100: #F4FAEA;\n    --mp-colors-lime-200: #D8EFB5;\n    --mp-colors-lime-300: #B1DF6B;\n    --mp-colors-lime-400: #83CA16;\n    --mp-colors-lime-500: #77B814;\n    --mp-colors-lime-600: #649B11;\n    --mp-colors-lime-700: #53800E;\n    --mp-colors-lime-800: #466C0C;\n    --mp-colors-lime-900: #304A08;\n    --mp-colors-lime-1000: #213306;\n    --mp-colors-green-100: #F2F9F6;\n    --mp-colors-green-200: #D2EBE1;\n    --mp-colors-green-300: #A7D9C4;\n    --mp-colors-green-400: #7DC7A8;\n    --mp-colors-green-500: #56B78E;\n    --mp-colors-green-600: #23A06B;\n    --mp-colors-green-700: #1C8459;\n    --mp-colors-green-800: #186F4A;\n    --mp-colors-green-900: #104B32;\n    --mp-colors-green-1000: #0B3524;\n    --mp-colors-teal-100: #F2F9F6;\n    --mp-colors-teal-200: #C4EDE9;\n    --mp-colors-teal-300: #92DED6;\n    --mp-colors-teal-400: #4FCABC;\n    --mp-colors-teal-500: #19B9A8;\n    --mp-colors-teal-600: #119E8F;\n    --mp-colors-teal-700: #0E8275;\n    --mp-colors-teal-800: #0C6E63;\n    --mp-colors-teal-900: #084841;\n    --mp-colors-teal-1000: #06342F;\n    --mp-colors-brand-capital: #2F5573;\n    --mp-colors-brand-esign: #00C853;\n    --mp-colors-brand-expense: #183883;\n    --mp-colors-brand-flex: #7C4DFF;\n    --mp-colors-brand-jurnal: #40C3FF;\n    --mp-colors-brand-klikpajak: #FF9100;\n    --mp-colors-brand-mekari: #651FFF;\n    --mp-colors-brand-qontak: #2979FF;\n    --mp-colors-brand-talenta: #F22929;\n    --mp-colors-brand-university: #448AFF;\n    --mp-durations-slow: 100ms;\n    --mp-durations-normal: 250ms;\n    --mp-durations-fast: 300ms;\n    --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n    --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n    --mp-font-sizes-xs: 0.625rem;\n    --mp-font-sizes-sm: 0.75rem;\n    --mp-font-sizes-md: 0.875rem;\n    --mp-font-sizes-lg: 1rem;\n    --mp-font-sizes-xl: 1.25rem;\n    --mp-font-sizes-2xl: 1.5rem;\n    --mp-font-weights-regular: 400;\n    --mp-font-weights-semi-bold: 600;\n    --mp-font-weights-bold: 800;\n    --mp-line-heights-xs: 1.2;\n    --mp-line-heights-sm: 1.34;\n    --mp-line-heights-md: 1.4;\n    --mp-line-heights-lg: 1.429;\n    --mp-line-heights-xl: 1.5;\n    --mp-line-heights-2xl: 1.67;\n    --mp-line-heights-3xl: 1.71;\n    --mp-letter-spacings-tighter: -0.05em;\n    --mp-letter-spacings-tight: -0.025em;\n    --mp-letter-spacings-normal: 0;\n    --mp-letter-spacings-wide: 0.025em;\n    --mp-letter-spacings-wider: 0.05em;\n    --mp-letter-spacings-widest: 0.1em;\n    --mp-opacity-0: 0;\n    --mp-opacity-40: 0.4;\n    --mp-opacity-60: 0.6;\n    --mp-opacity-100: 1;\n    --mp-radii-none: 0;\n    --mp-radii-sm: 0.25rem;\n    --mp-radii-md: 0.375rem;\n    --mp-radii-lg: 0.5rem;\n    --mp-radii-xl: 0.75rem;\n    --mp-radii-full: 999px;\n    --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n    --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n    --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n    --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n    --mp-shadows-focus: 0 0 0 1px var(--mp-colors-border-focused);\n    --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n    --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n    --mp-shadows-none: none;\n    --mp-sizes-0: 0;\n    --mp-sizes-1: 0.25rem;\n    --mp-sizes-2: 0.5rem;\n    --mp-sizes-3: 0.75rem;\n    --mp-sizes-4: 1rem;\n    --mp-sizes-5: 1.25rem;\n    --mp-sizes-6: 1.5rem;\n    --mp-sizes-7: 1.75rem;\n    --mp-sizes-8: 2rem;\n    --mp-sizes-9: 2.25rem;\n    --mp-sizes-10: 2.5rem;\n    --mp-sizes-11: 2.75rem;\n    --mp-sizes-12: 3rem;\n    --mp-sizes-16: 4rem;\n    --mp-sizes-20: 5rem;\n    --mp-sizes-22: 5.5rem;\n    --mp-sizes-56: 14rem;\n    --mp-sizes-65: 17.5rem;\n    --mp-sizes-0\\.25: 0.0625rem;\n    --mp-sizes-0\\.5: 0.125rem;\n    --mp-sizes-2\\.5: 0.625rem;\n    --mp-sizes-7\\.5: 1.875rem;\n    --mp-sizes-9\\.5: 2.375rem;\n    --mp-sizes-full: 100%;\n    --mp-sizes-sm: 24rem;\n    --mp-spacing-0: 0;\n    --mp-spacing-1: 0.25rem;\n    --mp-spacing-2: 0.5rem;\n    --mp-spacing-3: 0.75rem;\n    --mp-spacing-4: 1rem;\n    --mp-spacing-5: 1.3rem;\n    --mp-spacing-6: 1.5rem;\n    --mp-spacing-8: 2rem;\n    --mp-spacing-10: 2.5rem;\n    --mp-spacing-20: 5rem;\n    --mp-spacing-0\\.5: 0.125rem;\n    --mp-spacing-1\\.5: 0.375rem;\n    --mp-z-index-hide: -1;\n    --mp-z-index-base: 0;\n    --mp-z-index-docked: 10;\n    --mp-z-index-sticky: 1100;\n    --mp-z-index-overlay: 1300;\n    --mp-z-index-modal: 1400;\n    --mp-z-index-popover: 1500;\n    --mp-z-index-tooltip: 1800;\n    --mp-colors-background-surface: #F1F5F9;\n    --mp-colors-background-stage: var(--mp-colors-white);\n    --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n    --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n    --mp-colors-background-inverse: var(--mp-colors-dark-100);\n    --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n    --mp-colors-background-neutral: var(--mp-colors-white);\n    --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n    --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n    --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n    --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n    --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n    --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n    --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n    --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n    --mp-colors-background-brand: var(--mp-colors-indigo-100);\n    --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n    --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n    --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n    --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n    --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n    --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n    --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-700);\n    --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n    --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n    --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n    --mp-colors-background-danger: var(--mp-colors-red-100);\n    --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n    --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n    --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n    --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n    --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n    --mp-colors-background-warning: var(--mp-colors-yellow-100);\n    --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n    --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n    --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n    --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n    --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n    --mp-colors-background-success: var(--mp-colors-green-100);\n    --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n    --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n    --mp-colors-background-success-bold: var(--mp-colors-green-700);\n    --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n    --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n    --mp-colors-background-highlight: var(--mp-colors-violet-100);\n    --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n    --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n    --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n    --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n    --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n    --mp-colors-nav-parent: #E7EDF5;\n    --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n    --mp-colors-nav-stack-hovered: #E7EDF5;\n    --mp-colors-text-default: var(--mp-colors-neutral-1000);\n    --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n    --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n    --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n    --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n    --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n    --mp-colors-text-inverse: var(--mp-colors-white);\n    --mp-colors-text-inverse-static: var(--mp-colors-white);\n    --mp-colors-text-selected: var(--mp-colors-indigo-700);\n    --mp-colors-text-danger: var(--mp-colors-red-800);\n    --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n    --mp-colors-text-warning: var(--mp-colors-orange-800);\n    --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n    --mp-colors-text-success: var(--mp-colors-green-800);\n    --mp-colors-text-highlight: var(--mp-colors-violet-800);\n    --mp-colors-text-information: var(--mp-colors-indigo-800);\n    --mp-colors-text-link: var(--mp-colors-indigo-700);\n    --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n    --mp-colors-icon-default: var(--mp-colors-neutral-600);\n    --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n    --mp-colors-icon-inverse: var(--mp-colors-white);\n    --mp-colors-icon-inverse-static: var(--mp-colors-white);\n    --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n    --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n    --mp-colors-icon-danger: var(--mp-colors-red-700);\n    --mp-colors-icon-warning: var(--mp-colors-orange-700);\n    --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n    --mp-colors-icon-success: var(--mp-colors-green-700);\n    --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n    --mp-colors-icon-information: var(--mp-colors-indigo-700);\n    --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n    --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n    --mp-colors-border-default: var(--mp-colors-neutral-300);\n    --mp-colors-border-bold: var(--mp-colors-neutral-600);\n    --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n    --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n    --mp-colors-border-focused: var(--mp-colors-indigo-500);\n    --mp-colors-border-inverse: var(--mp-colors-white);\n    --mp-colors-border-selected: var(--mp-colors-indigo-700);\n    --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n    --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n    --mp-colors-border-brand: var(--mp-colors-indigo-700);\n    --mp-colors-border-danger: var(--mp-colors-red-700);\n    --mp-colors-border-warning: var(--mp-colors-yellow-300);\n    --mp-colors-border-success: var(--mp-colors-green-700);\n    --mp-colors-border-highlight: var(--mp-colors-violet-700);\n    --mp-colors-border-information: var(--mp-colors-indigo-700);\n    --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n    --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n    --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n    --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n    --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n    --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n    --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n    --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n    --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n    --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n    --mp-colors-chart-cat06: var(--mp-colors-red-400);\n    --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n    --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n    --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n    --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n    --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600);\n    --mp-spacing-4xs: 0.125rem;\n    --mp-spacing-3xs: var(--mp-spacing-1);\n    --mp-spacing-2xs: 0.375rem;\n    --mp-spacing-xs: var(--mp-spacing-2);\n    --mp-spacing-sm: var(--mp-spacing-3);\n    --mp-spacing-md: var(--mp-spacing-4);\n    --mp-spacing-lg: var(--mp-spacing-5);\n    --mp-spacing-xl: var(--mp-spacing-6);\n    --mp-spacing-2xl: var(--mp-spacing-8);\n    --mp-spacing-3xl: var(--mp-spacing-10);\n    --mp-spacing-4xl: var(--mp-spacing-20)\n}\n\n[data-panda-theme=next].light {\n      --mp-colors-background-surface: #F1F5F9;\n      --mp-colors-background-stage: var(--mp-colors-white);\n      --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n      --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n      --mp-colors-background-inverse: var(--mp-colors-dark-100);\n      --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n      --mp-colors-background-neutral: var(--mp-colors-white);\n      --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n      --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n      --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n      --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n      --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n      --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n      --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n      --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n      --mp-colors-background-brand: var(--mp-colors-indigo-100);\n      --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n      --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n      --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n      --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n      --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n      --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-danger: var(--mp-colors-red-100);\n      --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n      --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n      --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n      --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n      --mp-colors-background-warning: var(--mp-colors-yellow-100);\n      --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n      --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n      --mp-colors-background-success: var(--mp-colors-green-100);\n      --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n      --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n      --mp-colors-background-success-bold: var(--mp-colors-green-700);\n      --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n      --mp-colors-background-highlight: var(--mp-colors-violet-100);\n      --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n      --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n      --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n      --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n      --mp-colors-nav-parent: #E7EDF5;\n      --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n      --mp-colors-nav-stack-hovered: #E7EDF5;\n      --mp-colors-text-default: var(--mp-colors-neutral-1000);\n      --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n      --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n      --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n      --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n      --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n      --mp-colors-text-inverse: var(--mp-colors-white);\n      --mp-colors-text-inverse-static: var(--mp-colors-white);\n      --mp-colors-text-selected: var(--mp-colors-indigo-700);\n      --mp-colors-text-danger: var(--mp-colors-red-800);\n      --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n      --mp-colors-text-warning: var(--mp-colors-orange-800);\n      --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-text-success: var(--mp-colors-green-800);\n      --mp-colors-text-highlight: var(--mp-colors-violet-800);\n      --mp-colors-text-information: var(--mp-colors-indigo-800);\n      --mp-colors-text-link: var(--mp-colors-indigo-700);\n      --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n      --mp-colors-icon-default: var(--mp-colors-neutral-600);\n      --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n      --mp-colors-icon-inverse: var(--mp-colors-white);\n      --mp-colors-icon-inverse-static: var(--mp-colors-white);\n      --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n      --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n      --mp-colors-icon-danger: var(--mp-colors-red-700);\n      --mp-colors-icon-warning: var(--mp-colors-orange-700);\n      --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-icon-success: var(--mp-colors-green-700);\n      --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n      --mp-colors-icon-information: var(--mp-colors-indigo-700);\n      --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n      --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n      --mp-colors-border-default: var(--mp-colors-neutral-300);\n      --mp-colors-border-bold: var(--mp-colors-neutral-600);\n      --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n      --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n      --mp-colors-border-focused: var(--mp-colors-indigo-500);\n      --mp-colors-border-inverse: var(--mp-colors-white);\n      --mp-colors-border-selected: var(--mp-colors-indigo-700);\n      --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n      --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n      --mp-colors-border-brand: var(--mp-colors-indigo-700);\n      --mp-colors-border-danger: var(--mp-colors-red-700);\n      --mp-colors-border-warning: var(--mp-colors-yellow-300);\n      --mp-colors-border-success: var(--mp-colors-green-700);\n      --mp-colors-border-highlight: var(--mp-colors-violet-700);\n      --mp-colors-border-information: var(--mp-colors-indigo-700);\n      --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n      --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n      --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n      --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n      --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n      --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n      --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n      --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n      --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n      --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n      --mp-colors-chart-cat06: var(--mp-colors-red-400);\n      --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n      --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n      --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n      --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n      --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n        }\n\n[data-panda-theme=next].dark {\n      --mp-colors-background-surface: var(--mp-colors-dark);\n      --mp-colors-background-stage: var(--mp-colors-dark-100);\n      --mp-colors-background-overlay: rgba(101, 127, 153, 0.8);\n      --mp-colors-background-disabled: rgba(188, 214, 240, 0.04);\n      --mp-colors-background-inverse: var(--mp-colors-white);\n      --mp-colors-background-shadow: rgba(22, 26, 29, 1);\n      --mp-colors-background-neutral: var(--mp-colors-dark-200);\n      --mp-colors-background-neutral-hovered: var(--mp-colors-dark-250);\n      --mp-colors-background-neutral-pressed: var(--mp-colors-dark-300);\n      --mp-colors-background-neutral-subtle: var(--mp-colors-dark-300);\n      --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-dark-350);\n      --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-neutral-bold: var(--mp-colors-dark-800);\n      --mp-colors-background-neutral-bold-hovered: var(--mp-colors-dark-900);\n      --mp-colors-background-neutral-bold-pressed: var(--mp-colors-dark-1000);\n      --mp-colors-background-brand: var(--mp-colors-indigo-1000);\n      --mp-colors-background-brand-hovered: var(--mp-colors-indigo-900);\n      --mp-colors-background-brand-pressed: var(--mp-colors-indigo-800);\n      --mp-colors-background-brand-selected: var(--mp-colors-indigo-900);\n      --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n      --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n      --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-400);\n      --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n      --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n      --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-danger: var(--mp-colors-red-1000);\n      --mp-colors-background-danger-hovered: var(--mp-colors-red-900);\n      --mp-colors-background-danger-pressed: var(--mp-colors-red-800);\n      --mp-colors-background-danger-bold: var(--mp-colors-red-400);\n      --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-300);\n      --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-200);\n      --mp-colors-background-warning: var(--mp-colors-yellow-1000);\n      --mp-colors-background-warning-hovered: var(--mp-colors-yellow-900);\n      --mp-colors-background-warning-pressed: var(--mp-colors-yellow-800);\n      --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n      --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n      --mp-colors-background-success: var(--mp-colors-green-1000);\n      --mp-colors-background-success-hovered: var(--mp-colors-green-900);\n      --mp-colors-background-success-pressed: var(--mp-colors-green-800);\n      --mp-colors-background-success-bold: var(--mp-colors-green-400);\n      --mp-colors-background-success-bold-hovered: var(--mp-colors-green-300);\n      --mp-colors-background-success-bold-pressed: var(--mp-colors-green-200);\n      --mp-colors-background-highlight: var(--mp-colors-violet-1000);\n      --mp-colors-background-highlight-hovered: var(--mp-colors-violet-900);\n      --mp-colors-background-highlight-pressed: var(--mp-colors-violet-800);\n      --mp-colors-background-highlight-bold: var(--mp-colors-violet-400);\n      --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-300);\n      --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-200);\n      --mp-colors-nav-parent: var(--mp-colors-dark-100);\n      --mp-colors-nav-stack: var(--mp-colors-dark);\n      --mp-colors-nav-stack-hovered: var(--mp-colors-dark-100);\n      --mp-colors-text-default: var(--mp-colors-dark-900);\n      --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n      --mp-colors-text-secondary: var(--mp-colors-dark-700);\n      --mp-colors-text-secondary-pressed: var(--mp-colors-dark-800);\n      --mp-colors-text-placeholder: var(--mp-colors-dark-600);\n      --mp-colors-text-disabled: rgba(191, 219, 248, 0.28);\n      --mp-colors-text-inverse: var(--mp-colors-dark-100);\n      --mp-colors-text-inverse-static: var(--mp-colors-white);\n      --mp-colors-text-selected: var(--mp-colors-indigo-400);\n      --mp-colors-text-danger: var(--mp-colors-red-300);\n      --mp-colors-text-danger-pressed: var(--mp-colors-red-200);\n      --mp-colors-text-warning: var(--mp-colors-yellow-300);\n      --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-text-success: var(--mp-colors-green-300);\n      --mp-colors-text-highlight: var(--mp-colors-violet-300);\n      --mp-colors-text-information: var(--mp-colors-indigo-300);\n      --mp-colors-text-link: var(--mp-colors-indigo-400);\n      --mp-colors-text-link-pressed: var(--mp-colors-indigo-300);\n      --mp-colors-icon-default: var(--mp-colors-dark-600);\n      --mp-colors-icon-disabled: var(--mp-colors-dark-400);\n      --mp-colors-icon-inverse: var(--mp-colors-dark-100);\n      --mp-colors-icon-inverse-static: var(--mp-colors-white);\n      --mp-colors-icon-selected: var(--mp-colors-indigo-400);\n      --mp-colors-icon-brand: var(--mp-colors-indigo-400);\n      --mp-colors-icon-danger: var(--mp-colors-red-400);\n      --mp-colors-icon-warning: var(--mp-colors-yellow-300);\n      --mp-colors-icon-warning-inverse: var(--mp-colors-dark-100);\n      --mp-colors-icon-success: var(--mp-colors-green-400);\n      --mp-colors-icon-highlight: var(--mp-colors-violet-400);\n      --mp-colors-icon-information: var(--mp-colors-indigo-400);\n      --mp-colors-icon-subtle: var(--mp-colors-dark-300);\n      --mp-colors-icon-logo: var(--mp-colors-neutral-100);\n      --mp-colors-border-default: var(--mp-colors-dark-300);\n      --mp-colors-border-bold: var(--mp-colors-dark-600);\n      --mp-colors-border-disabled: rgba(161, 189, 217, 0.08);\n      --mp-colors-border-form: rgba(166, 197, 226, 0.16);\n      --mp-colors-border-focused: var(--mp-colors-indigo-300);\n      --mp-colors-border-inverse: var(--mp-colors-dark-100);\n      --mp-colors-border-selected: var(--mp-colors-indigo-400);\n      --mp-colors-border-selected-hovered: var(--mp-colors-indigo-300);\n      --mp-colors-border-selected-disabled: var(--mp-colors-indigo-900);\n      --mp-colors-border-brand: var(--mp-colors-indigo-400);\n      --mp-colors-border-danger: var(--mp-colors-red-400);\n      --mp-colors-border-warning: var(--mp-colors-yellow-300);\n      --mp-colors-border-success: var(--mp-colors-green-400);\n      --mp-colors-border-highlight: var(--mp-colors-violet-400);\n      --mp-colors-border-information: var(--mp-colors-indigo-400);\n      --mp-colors-chart-cat01: var(--mp-colors-blue-300);\n      --mp-colors-chart-cat01-bold: var(--mp-colors-blue-500);\n      --mp-colors-chart-cat02: var(--mp-colors-teal-300);\n      --mp-colors-chart-cat02-bold: var(--mp-colors-teal-500);\n      --mp-colors-chart-cat03: var(--mp-colors-violet-300);\n      --mp-colors-chart-cat03-bold: var(--mp-colors-violet-500);\n      --mp-colors-chart-cat04: var(--mp-colors-orange-300);\n      --mp-colors-chart-cat04-bold: var(--mp-colors-orange-500);\n      --mp-colors-chart-cat05: var(--mp-colors-neutral-300);\n      --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-500);\n      --mp-colors-chart-cat06: var(--mp-colors-red-300);\n      --mp-colors-chart-cat06-bold: var(--mp-colors-red-500);\n      --mp-colors-chart-cat07: var(--mp-colors-lime-300);\n      --mp-colors-chart-cat07-bold: var(--mp-colors-lime-500);\n      --mp-colors-chart-cat08: var(--mp-colors-fuchsia-300);\n      --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-500)\n        }"
+  "css": " [data-panda-theme=next] {\n    --mp-border-widths-none: none;\n    --mp-border-widths-sm: 1px;\n    --mp-border-widths-md: 1.5px;\n    --mp-border-widths-lg: 2px;\n    --mp-border-widths-xl: 3px;\n    --mp-border-widths-2xl: 4px;\n    --mp-colors-debug: red;\n    --mp-colors-currentcolor: currentcolor;\n    --mp-colors-white: #FFFFFF;\n    --mp-colors-vibrant-purple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);\n    --mp-colors-dark-100: #1D2125;\n    --mp-colors-dark-200: #22272B;\n    --mp-colors-dark-250: #282E33;\n    --mp-colors-dark-300: #2C333A;\n    --mp-colors-dark-350: #38414A;\n    --mp-colors-dark-400: #454F59;\n    --mp-colors-dark-500: #596773;\n    --mp-colors-dark-600: #738496;\n    --mp-colors-dark-700: #8C9BAB;\n    --mp-colors-dark-800: #9FADBC;\n    --mp-colors-dark-900: #B6C2CF;\n    --mp-colors-dark-1000: #C7D1DB;\n    --mp-colors-dark--100: #101214;\n    --mp-colors-dark: #161A1D;\n    --mp-colors-neutral-100: #F7F8F9;\n    --mp-colors-neutral-200: #F0F1F3;\n    --mp-colors-neutral-300: #DCDFE4;\n    --mp-colors-neutral-400: #B2B9C4;\n    --mp-colors-neutral-500: #8690A2;\n    --mp-colors-neutral-600: #758195;\n    --mp-colors-neutral-700: #656F80;\n    --mp-colors-neutral-800: #4C5460;\n    --mp-colors-neutral-900: #383E48;\n    --mp-colors-neutral-1000: #272B32;\n    --mp-colors-blue-100: #ECF3FE;\n    --mp-colors-blue-200: #CEE0FD;\n    --mp-colors-blue-300: #8EB7FA;\n    --mp-colors-blue-400: #649CF8;\n    --mp-colors-blue-500: #488BF7;\n    --mp-colors-blue-600: #387CEB;\n    --mp-colors-blue-700: #306AC8;\n    --mp-colors-blue-800: #295AAA;\n    --mp-colors-blue-900: #173361;\n    --mp-colors-blue-1000: #132A4F;\n    --mp-colors-indigo-100: #EEF0FC;\n    --mp-colors-indigo-200: #D6DBF7;\n    --mp-colors-indigo-300: #A8B2EF;\n    --mp-colors-indigo-400: #8997E9;\n    --mp-colors-indigo-500: #7586E5;\n    --mp-colors-indigo-600: #6577E2;\n    --mp-colors-indigo-700: #4B61DC;\n    --mp-colors-indigo-800: #4053BC;\n    --mp-colors-indigo-900: #242F6A;\n    --mp-colors-indigo-1000: #1D2656;\n    --mp-colors-violet-100: #F3F1FC;\n    --mp-colors-violet-200: #DEDAF6;\n    --mp-colors-violet-300: #B8AEEB;\n    --mp-colors-violet-400: #9F91E3;\n    --mp-colors-violet-500: #8F7FDF;\n    --mp-colors-violet-600: #8270DB;\n    --mp-colors-violet-700: #6F5FBA;\n    --mp-colors-violet-800: #5F519F;\n    --mp-colors-violet-900: #352E5A;\n    --mp-colors-violet-1000: #2B2549;\n    --mp-colors-fuchsia-100: #FBEEFE;\n    --mp-colors-fuchsia-200: #F6D1FB;\n    --mp-colors-fuchsia-300: #EA98F6;\n    --mp-colors-fuchsia-400: #E16CF2;\n    --mp-colors-fuchsia-500: #DA4DF0;\n    --mp-colors-fuchsia-600: #C841DC;\n    --mp-colors-fuchsia-700: #AC37BD;\n    --mp-colors-fuchsia-800: #932FA2;\n    --mp-colors-fuchsia-900: #531B5C;\n    --mp-colors-fuchsia-1000: #45164C;\n    --mp-colors-red-100: #FCEEED;\n    --mp-colors-red-200: #F9D7D5;\n    --mp-colors-red-300: #F09E99;\n    --mp-colors-red-400: #EA7A72;\n    --mp-colors-red-500: #E6645B;\n    --mp-colors-red-600: #E2483D;\n    --mp-colors-red-700: #C33E35;\n    --mp-colors-red-800: #A8352D;\n    --mp-colors-red-900: #5E1E19;\n    --mp-colors-red-1000: #4E1915;\n    --mp-colors-orange-100: #FDF3EC;\n    --mp-colors-orange-200: #F9DECB;\n    --mp-colors-orange-300: #F5C39F;\n    --mp-colors-orange-400: #F0A875;\n    --mp-colors-orange-500: #EB8E4B;\n    --mp-colors-orange-600: #E46910;\n    --mp-colors-orange-700: #BC560D;\n    --mp-colors-orange-800: #A14A0B;\n    --mp-colors-orange-900: #6B3108;\n    --mp-colors-orange-1000: #492105;\n    --mp-colors-yellow-100: #FDF6DD;\n    --mp-colors-yellow-200: #F9E399;\n    --mp-colors-yellow-300: #F5CD47;\n    --mp-colors-yellow-400: #D8B53F;\n    --mp-colors-yellow-500: #C2A338;\n    --mp-colors-yellow-600: #A68A30;\n    --mp-colors-yellow-700: #897228;\n    --mp-colors-yellow-800: #766222;\n    --mp-colors-yellow-900: #4D4016;\n    --mp-colors-yellow-1000: #362D10;\n    --mp-colors-lime-100: #F4FAEA;\n    --mp-colors-lime-200: #D8EFB5;\n    --mp-colors-lime-300: #B1DF6B;\n    --mp-colors-lime-400: #83CA16;\n    --mp-colors-lime-500: #77B814;\n    --mp-colors-lime-600: #649B11;\n    --mp-colors-lime-700: #53800E;\n    --mp-colors-lime-800: #466C0C;\n    --mp-colors-lime-900: #304A08;\n    --mp-colors-lime-1000: #213306;\n    --mp-colors-green-100: #F2F9F6;\n    --mp-colors-green-200: #D2EBE1;\n    --mp-colors-green-300: #A7D9C4;\n    --mp-colors-green-400: #7DC7A8;\n    --mp-colors-green-500: #56B78E;\n    --mp-colors-green-600: #23A06B;\n    --mp-colors-green-700: #1C8459;\n    --mp-colors-green-800: #186F4A;\n    --mp-colors-green-900: #104B32;\n    --mp-colors-green-1000: #0B3524;\n    --mp-colors-teal-100: #F2F9F6;\n    --mp-colors-teal-200: #C4EDE9;\n    --mp-colors-teal-300: #92DED6;\n    --mp-colors-teal-400: #4FCABC;\n    --mp-colors-teal-500: #19B9A8;\n    --mp-colors-teal-600: #119E8F;\n    --mp-colors-teal-700: #0E8275;\n    --mp-colors-teal-800: #0C6E63;\n    --mp-colors-teal-900: #084841;\n    --mp-colors-teal-1000: #06342F;\n    --mp-colors-brand-capital: #2F5573;\n    --mp-colors-brand-esign: #00C853;\n    --mp-colors-brand-expense: #183883;\n    --mp-colors-brand-flex: #7C4DFF;\n    --mp-colors-brand-jurnal: #40C3FF;\n    --mp-colors-brand-klikpajak: #FF9100;\n    --mp-colors-brand-mekari: #651FFF;\n    --mp-colors-brand-qontak: #2979FF;\n    --mp-colors-brand-talenta: #F22929;\n    --mp-colors-brand-university: #448AFF;\n    --mp-durations-slow: 100ms;\n    --mp-durations-normal: 250ms;\n    --mp-durations-fast: 300ms;\n    --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n    --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n    --mp-font-sizes-xs: 0.625rem;\n    --mp-font-sizes-sm: 0.75rem;\n    --mp-font-sizes-md: 0.875rem;\n    --mp-font-sizes-lg: 1rem;\n    --mp-font-sizes-xl: 1.25rem;\n    --mp-font-sizes-2xl: 1.5rem;\n    --mp-font-weights-regular: 400;\n    --mp-font-weights-semi-bold: 600;\n    --mp-font-weights-bold: 800;\n    --mp-line-heights-xs: 1.2;\n    --mp-line-heights-sm: 1.34;\n    --mp-line-heights-md: 1.4;\n    --mp-line-heights-lg: 1.429;\n    --mp-line-heights-xl: 1.5;\n    --mp-line-heights-2xl: 1.67;\n    --mp-line-heights-3xl: 1.71;\n    --mp-letter-spacings-tighter: -0.05em;\n    --mp-letter-spacings-tight: -0.025em;\n    --mp-letter-spacings-normal: 0;\n    --mp-letter-spacings-wide: 0.025em;\n    --mp-letter-spacings-wider: 0.05em;\n    --mp-letter-spacings-widest: 0.1em;\n    --mp-opacity-0: 0;\n    --mp-opacity-40: 0.4;\n    --mp-opacity-60: 0.6;\n    --mp-opacity-100: 1;\n    --mp-radii-none: 0;\n    --mp-radii-sm: 0.25rem;\n    --mp-radii-md: 0.375rem;\n    --mp-radii-lg: 0.5rem;\n    --mp-radii-xl: 0.75rem;\n    --mp-radii-full: 999px;\n    --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n    --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n    --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n    --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n    --mp-shadows-focus: 0 0 0 1px var(--mp-colors-border-focused);\n    --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n    --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n    --mp-shadows-none: none;\n    --mp-sizes-0: 0;\n    --mp-sizes-1: 0.25rem;\n    --mp-sizes-2: 0.5rem;\n    --mp-sizes-3: 0.75rem;\n    --mp-sizes-4: 1rem;\n    --mp-sizes-5: 1.25rem;\n    --mp-sizes-6: 1.5rem;\n    --mp-sizes-7: 1.75rem;\n    --mp-sizes-8: 2rem;\n    --mp-sizes-9: 2.25rem;\n    --mp-sizes-10: 2.5rem;\n    --mp-sizes-11: 2.75rem;\n    --mp-sizes-12: 3rem;\n    --mp-sizes-16: 4rem;\n    --mp-sizes-20: 5rem;\n    --mp-sizes-22: 5.5rem;\n    --mp-sizes-56: 14rem;\n    --mp-sizes-65: 17.5rem;\n    --mp-sizes-0\\.25: 0.0625rem;\n    --mp-sizes-0\\.5: 0.125rem;\n    --mp-sizes-2\\.5: 0.625rem;\n    --mp-sizes-7\\.5: 1.875rem;\n    --mp-sizes-9\\.5: 2.375rem;\n    --mp-sizes-full: 100%;\n    --mp-sizes-sm: 24rem;\n    --mp-spacing-0: 0;\n    --mp-spacing-1: 0.25rem;\n    --mp-spacing-2: 0.5rem;\n    --mp-spacing-3: 0.75rem;\n    --mp-spacing-4: 1rem;\n    --mp-spacing-5: 1.3rem;\n    --mp-spacing-6: 1.5rem;\n    --mp-spacing-8: 2rem;\n    --mp-spacing-10: 2.5rem;\n    --mp-spacing-20: 5rem;\n    --mp-spacing-0\\.5: 0.125rem;\n    --mp-spacing-1\\.5: 0.375rem;\n    --mp-z-index-hide: -1;\n    --mp-z-index-base: 0;\n    --mp-z-index-docked: 10;\n    --mp-z-index-sticky: 1100;\n    --mp-z-index-overlay: 1300;\n    --mp-z-index-modal: 1400;\n    --mp-z-index-popover: 1500;\n    --mp-z-index-tooltip: 1800;\n    --mp-colors-background-surface: #F1F5F9;\n    --mp-colors-background-stage: var(--mp-colors-white);\n    --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n    --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n    --mp-colors-background-inverse: var(--mp-colors-dark-100);\n    --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n    --mp-colors-background-neutral: var(--mp-colors-white);\n    --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n    --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n    --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n    --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n    --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n    --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n    --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n    --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n    --mp-colors-background-brand: var(--mp-colors-indigo-100);\n    --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n    --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n    --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n    --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n    --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n    --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n    --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-700);\n    --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n    --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n    --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n    --mp-colors-background-danger: var(--mp-colors-red-100);\n    --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n    --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n    --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n    --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n    --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n    --mp-colors-background-warning: var(--mp-colors-yellow-100);\n    --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n    --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n    --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n    --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n    --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n    --mp-colors-background-success: var(--mp-colors-green-100);\n    --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n    --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n    --mp-colors-background-success-bold: var(--mp-colors-green-700);\n    --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n    --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n    --mp-colors-background-highlight: var(--mp-colors-violet-100);\n    --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n    --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n    --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n    --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n    --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n    --mp-colors-nav-parent: #E7EDF5;\n    --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n    --mp-colors-nav-stack-hovered: #E7EDF5;\n    --mp-colors-text-default: var(--mp-colors-neutral-1000);\n    --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n    --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n    --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n    --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n    --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n    --mp-colors-text-inverse: var(--mp-colors-white);\n    --mp-colors-text-inverse-static: var(--mp-colors-white);\n    --mp-colors-text-selected: var(--mp-colors-indigo-700);\n    --mp-colors-text-danger: var(--mp-colors-red-800);\n    --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n    --mp-colors-text-warning: var(--mp-colors-orange-800);\n    --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n    --mp-colors-text-success: var(--mp-colors-green-800);\n    --mp-colors-text-highlight: var(--mp-colors-violet-800);\n    --mp-colors-text-information: var(--mp-colors-indigo-800);\n    --mp-colors-text-link: var(--mp-colors-indigo-700);\n    --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n    --mp-colors-icon-default: var(--mp-colors-neutral-600);\n    --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n    --mp-colors-icon-inverse: var(--mp-colors-white);\n    --mp-colors-icon-inverse-static: var(--mp-colors-white);\n    --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n    --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n    --mp-colors-icon-danger: var(--mp-colors-red-700);\n    --mp-colors-icon-warning: var(--mp-colors-orange-700);\n    --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n    --mp-colors-icon-success: var(--mp-colors-green-700);\n    --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n    --mp-colors-icon-information: var(--mp-colors-indigo-700);\n    --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n    --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n    --mp-colors-border-default: var(--mp-colors-neutral-300);\n    --mp-colors-border-bold: var(--mp-colors-neutral-600);\n    --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n    --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n    --mp-colors-border-focused: var(--mp-colors-indigo-500);\n    --mp-colors-border-inverse: var(--mp-colors-white);\n    --mp-colors-border-selected: var(--mp-colors-indigo-700);\n    --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n    --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n    --mp-colors-border-brand: var(--mp-colors-indigo-700);\n    --mp-colors-border-danger: var(--mp-colors-red-700);\n    --mp-colors-border-warning: var(--mp-colors-yellow-300);\n    --mp-colors-border-success: var(--mp-colors-green-700);\n    --mp-colors-border-highlight: var(--mp-colors-violet-700);\n    --mp-colors-border-information: var(--mp-colors-indigo-700);\n    --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n    --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n    --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n    --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n    --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n    --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n    --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n    --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n    --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n    --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n    --mp-colors-chart-cat06: var(--mp-colors-red-400);\n    --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n    --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n    --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n    --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n    --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600);\n    --mp-spacing-4xs: 0.125rem;\n    --mp-spacing-3xs: var(--mp-spacing-1);\n    --mp-spacing-2xs: 0.375rem;\n    --mp-spacing-xs: var(--mp-spacing-2);\n    --mp-spacing-sm: var(--mp-spacing-3);\n    --mp-spacing-md: var(--mp-spacing-4);\n    --mp-spacing-lg: var(--mp-spacing-5);\n    --mp-spacing-xl: var(--mp-spacing-6);\n    --mp-spacing-2xl: var(--mp-spacing-8);\n    --mp-spacing-3xl: var(--mp-spacing-10);\n    --mp-spacing-4xl: var(--mp-spacing-20)\n}\n\n[data-panda-theme=next].light {\n      --mp-colors-background-surface: #F1F5F9;\n      --mp-colors-background-stage: var(--mp-colors-white);\n      --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n      --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n      --mp-colors-background-inverse: var(--mp-colors-dark-100);\n      --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n      --mp-colors-background-neutral: var(--mp-colors-white);\n      --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n      --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n      --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n      --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n      --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n      --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n      --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n      --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n      --mp-colors-background-brand: var(--mp-colors-indigo-100);\n      --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n      --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n      --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n      --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n      --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-700);\n      --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n      --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n      --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-danger: var(--mp-colors-red-100);\n      --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n      --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n      --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n      --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n      --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n      --mp-colors-background-warning: var(--mp-colors-yellow-100);\n      --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n      --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n      --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n      --mp-colors-background-success: var(--mp-colors-green-100);\n      --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n      --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n      --mp-colors-background-success-bold: var(--mp-colors-green-700);\n      --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n      --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n      --mp-colors-background-highlight: var(--mp-colors-violet-100);\n      --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n      --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n      --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n      --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n      --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n      --mp-colors-nav-parent: #E7EDF5;\n      --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n      --mp-colors-nav-stack-hovered: #E7EDF5;\n      --mp-colors-text-default: var(--mp-colors-neutral-1000);\n      --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n      --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n      --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n      --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n      --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n      --mp-colors-text-inverse: var(--mp-colors-white);\n      --mp-colors-text-inverse-static: var(--mp-colors-white);\n      --mp-colors-text-selected: var(--mp-colors-indigo-700);\n      --mp-colors-text-danger: var(--mp-colors-red-800);\n      --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n      --mp-colors-text-warning: var(--mp-colors-orange-800);\n      --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-text-success: var(--mp-colors-green-800);\n      --mp-colors-text-highlight: var(--mp-colors-violet-800);\n      --mp-colors-text-information: var(--mp-colors-indigo-800);\n      --mp-colors-text-link: var(--mp-colors-indigo-700);\n      --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n      --mp-colors-icon-default: var(--mp-colors-neutral-600);\n      --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n      --mp-colors-icon-inverse: var(--mp-colors-white);\n      --mp-colors-icon-inverse-static: var(--mp-colors-white);\n      --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n      --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n      --mp-colors-icon-danger: var(--mp-colors-red-700);\n      --mp-colors-icon-warning: var(--mp-colors-orange-700);\n      --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-icon-success: var(--mp-colors-green-700);\n      --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n      --mp-colors-icon-information: var(--mp-colors-indigo-700);\n      --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n      --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n      --mp-colors-border-default: var(--mp-colors-neutral-300);\n      --mp-colors-border-bold: var(--mp-colors-neutral-600);\n      --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n      --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n      --mp-colors-border-focused: var(--mp-colors-indigo-500);\n      --mp-colors-border-inverse: var(--mp-colors-white);\n      --mp-colors-border-selected: var(--mp-colors-indigo-700);\n      --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n      --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n      --mp-colors-border-brand: var(--mp-colors-indigo-700);\n      --mp-colors-border-danger: var(--mp-colors-red-700);\n      --mp-colors-border-warning: var(--mp-colors-yellow-300);\n      --mp-colors-border-success: var(--mp-colors-green-700);\n      --mp-colors-border-highlight: var(--mp-colors-violet-700);\n      --mp-colors-border-information: var(--mp-colors-indigo-700);\n      --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n      --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n      --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n      --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n      --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n      --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n      --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n      --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n      --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n      --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n      --mp-colors-chart-cat06: var(--mp-colors-red-400);\n      --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n      --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n      --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n      --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n      --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n        }\n\n[data-panda-theme=next].dark {\n      --mp-colors-background-surface: var(--mp-colors-dark);\n      --mp-colors-background-stage: var(--mp-colors-dark-100);\n      --mp-colors-background-overlay: rgba(101, 127, 153, 0.8);\n      --mp-colors-background-disabled: rgba(188, 214, 240, 0.04);\n      --mp-colors-background-inverse: var(--mp-colors-white);\n      --mp-colors-background-shadow: rgba(22, 26, 29, 1);\n      --mp-colors-background-neutral: var(--mp-colors-dark-200);\n      --mp-colors-background-neutral-hovered: var(--mp-colors-dark-250);\n      --mp-colors-background-neutral-pressed: var(--mp-colors-dark-300);\n      --mp-colors-background-neutral-subtle: var(--mp-colors-dark-300);\n      --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-dark-350);\n      --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-neutral-bold: var(--mp-colors-dark-800);\n      --mp-colors-background-neutral-bold-hovered: var(--mp-colors-dark-900);\n      --mp-colors-background-neutral-bold-pressed: var(--mp-colors-dark-1000);\n      --mp-colors-background-brand: var(--mp-colors-indigo-1000);\n      --mp-colors-background-brand-hovered: var(--mp-colors-indigo-900);\n      --mp-colors-background-brand-pressed: var(--mp-colors-indigo-800);\n      --mp-colors-background-brand-selected: var(--mp-colors-indigo-900);\n      --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n      --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n      --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n      --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-400);\n      --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n      --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n      --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n      --mp-colors-background-danger: var(--mp-colors-red-1000);\n      --mp-colors-background-danger-hovered: var(--mp-colors-red-900);\n      --mp-colors-background-danger-pressed: var(--mp-colors-red-800);\n      --mp-colors-background-danger-bold: var(--mp-colors-red-400);\n      --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-300);\n      --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-200);\n      --mp-colors-background-warning: var(--mp-colors-yellow-1000);\n      --mp-colors-background-warning-hovered: var(--mp-colors-yellow-900);\n      --mp-colors-background-warning-pressed: var(--mp-colors-yellow-800);\n      --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n      --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n      --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n      --mp-colors-background-success: var(--mp-colors-green-1000);\n      --mp-colors-background-success-hovered: var(--mp-colors-green-900);\n      --mp-colors-background-success-pressed: var(--mp-colors-green-800);\n      --mp-colors-background-success-bold: var(--mp-colors-green-400);\n      --mp-colors-background-success-bold-hovered: var(--mp-colors-green-300);\n      --mp-colors-background-success-bold-pressed: var(--mp-colors-green-200);\n      --mp-colors-background-highlight: var(--mp-colors-violet-1000);\n      --mp-colors-background-highlight-hovered: var(--mp-colors-violet-900);\n      --mp-colors-background-highlight-pressed: var(--mp-colors-violet-800);\n      --mp-colors-background-highlight-bold: var(--mp-colors-violet-400);\n      --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-300);\n      --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-200);\n      --mp-colors-nav-parent: var(--mp-colors-dark-100);\n      --mp-colors-nav-stack: var(--mp-colors-dark);\n      --mp-colors-nav-stack-hovered: var(--mp-colors-dark-100);\n      --mp-colors-text-default: var(--mp-colors-dark-900);\n      --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n      --mp-colors-text-secondary: var(--mp-colors-dark-700);\n      --mp-colors-text-secondary-pressed: var(--mp-colors-dark-800);\n      --mp-colors-text-placeholder: var(--mp-colors-dark-600);\n      --mp-colors-text-disabled: rgba(191, 219, 248, 0.28);\n      --mp-colors-text-inverse: var(--mp-colors-dark-100);\n      --mp-colors-text-inverse-static: var(--mp-colors-white);\n      --mp-colors-text-selected: var(--mp-colors-indigo-400);\n      --mp-colors-text-danger: var(--mp-colors-red-300);\n      --mp-colors-text-danger-pressed: var(--mp-colors-red-200);\n      --mp-colors-text-warning: var(--mp-colors-yellow-300);\n      --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n      --mp-colors-text-success: var(--mp-colors-green-300);\n      --mp-colors-text-highlight: var(--mp-colors-violet-300);\n      --mp-colors-text-information: var(--mp-colors-indigo-300);\n      --mp-colors-text-link: var(--mp-colors-indigo-400);\n      --mp-colors-text-link-pressed: var(--mp-colors-indigo-300);\n      --mp-colors-icon-default: var(--mp-colors-dark-600);\n      --mp-colors-icon-disabled: var(--mp-colors-dark-400);\n      --mp-colors-icon-inverse: var(--mp-colors-dark-100);\n      --mp-colors-icon-inverse-static: var(--mp-colors-white);\n      --mp-colors-icon-selected: var(--mp-colors-indigo-400);\n      --mp-colors-icon-brand: var(--mp-colors-indigo-400);\n      --mp-colors-icon-danger: var(--mp-colors-red-400);\n      --mp-colors-icon-warning: var(--mp-colors-yellow-300);\n      --mp-colors-icon-warning-inverse: var(--mp-colors-dark-100);\n      --mp-colors-icon-success: var(--mp-colors-green-400);\n      --mp-colors-icon-highlight: var(--mp-colors-violet-400);\n      --mp-colors-icon-information: var(--mp-colors-indigo-400);\n      --mp-colors-icon-subtle: var(--mp-colors-dark-300);\n      --mp-colors-icon-logo: var(--mp-colors-neutral-100);\n      --mp-colors-border-default: var(--mp-colors-dark-300);\n      --mp-colors-border-bold: var(--mp-colors-dark-600);\n      --mp-colors-border-disabled: rgba(161, 189, 217, 0.08);\n      --mp-colors-border-form: rgba(166, 197, 226, 0.16);\n      --mp-colors-border-focused: var(--mp-colors-indigo-300);\n      --mp-colors-border-inverse: var(--mp-colors-dark-100);\n      --mp-colors-border-selected: var(--mp-colors-indigo-400);\n      --mp-colors-border-selected-hovered: var(--mp-colors-indigo-300);\n      --mp-colors-border-selected-disabled: var(--mp-colors-indigo-900);\n      --mp-colors-border-brand: var(--mp-colors-indigo-400);\n      --mp-colors-border-danger: var(--mp-colors-red-400);\n      --mp-colors-border-warning: var(--mp-colors-yellow-300);\n      --mp-colors-border-success: var(--mp-colors-green-400);\n      --mp-colors-border-highlight: var(--mp-colors-violet-400);\n      --mp-colors-border-information: var(--mp-colors-indigo-400);\n      --mp-colors-chart-cat01: var(--mp-colors-blue-300);\n      --mp-colors-chart-cat01-bold: var(--mp-colors-blue-500);\n      --mp-colors-chart-cat02: var(--mp-colors-teal-300);\n      --mp-colors-chart-cat02-bold: var(--mp-colors-teal-500);\n      --mp-colors-chart-cat03: var(--mp-colors-violet-300);\n      --mp-colors-chart-cat03-bold: var(--mp-colors-violet-500);\n      --mp-colors-chart-cat04: var(--mp-colors-orange-300);\n      --mp-colors-chart-cat04-bold: var(--mp-colors-orange-500);\n      --mp-colors-chart-cat05: var(--mp-colors-neutral-300);\n      --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-500);\n      --mp-colors-chart-cat06: var(--mp-colors-red-300);\n      --mp-colors-chart-cat06-bold: var(--mp-colors-red-500);\n      --mp-colors-chart-cat07: var(--mp-colors-lime-300);\n      --mp-colors-chart-cat07-bold: var(--mp-colors-lime-500);\n      --mp-colors-chart-cat08: var(--mp-colors-fuchsia-300);\n      --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-500)\n        }"
 }

package/tokens/index.mjs

@@ -39,6 +39,10 @@ const tokens = {
     "value": "var(--mp-colors-white)",
     "variable": "var(--mp-colors-white)"
   },
+  "colors.vibrantPurple": {
+    "value": "var(--mp-colors-vibrant-purple)",
+    "variable": "var(--mp-colors-vibrant-purple)"
+  },
   "colors.whiteAlpha.50": {
     "value": "rgba(255, 255, 255, 0.04)",
     "variable": "var(--mp-colors-white-alpha-50)"

package/tokens/tokens.d.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
-export type Token = "borderWidths.none" | "borderWidths.sm" | "borderWidths.md" | "borderWidths.lg" | "colors.debug" | "colors.currentcolor" | "colors.dark" | "colors.background" | "colors.overlay" | "colors.white" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "borderWidths.xl" | "borderWidths.2xl" | "colors.dark.100" | "colors.dark.200" | "colors.dark.250" | "colors.dark.300" | "colors.dark.350" | "colors.dark.400" | "colors.dark.500" | "colors.dark.600" | "colors.dark.700" | "colors.dark.800" | "colors.dark.900" | "colors.dark.1000" | "colors.dark.-100" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.1000" | "colors.blue.200" | "colors.blue.300" | "colors.blue.600" | "colors.blue.800" | "colors.blue.900" | "colors.blue.1000" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.1000" | "colors.violet.200" | "colors.violet.300" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.1000" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.1000" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.600" | "colors.red.800" | "colors.red.900" | "colors.red.1000" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.600" | "colors.orange.800" | "colors.orange.900" | "colors.orange.1000" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.1000" | "colors.lime.200" | "colors.lime.300" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.1000" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.600" | "colors.green.800" | "colors.green.900" | "colors.green.1000" | "colors.teal.200" | "colors.teal.300" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.1000" | "spacing.10" | "colors.background.surface" | "colors.background.stage" | "colors.background.overlay" | "colors.background.disabled" | "colors.background.inverse" | "colors.background.shadow" | "colors.background.neutral" | "colors.background.neutral.hovered" | "colors.background.neutral.pressed" | "colors.background.neutral.subtle" | "colors.background.neutral.subtle.hovered" | "colors.background.neutral.subtle.pressed" | "colors.background.neutral.bold" | "colors.background.neutral.bold.hovered" | "colors.background.neutral.bold.pressed" | "colors.background.brand" | "colors.background.brand.hovered" | "colors.background.brand.pressed" | "colors.background.brand.selected" | "colors.background.brand.bold" | "colors.background.brand.bold.hovered" | "colors.background.brand.bold.pressed" | "colors.background.brand.bold.selected" | "colors.background.tertiary" | "colors.background.tertiary.hovered" | "colors.background.tertiary.pressed" | "colors.background.danger" | "colors.background.danger.hovered" | "colors.background.danger.pressed" | "colors.background.danger.bold" | "colors.background.danger.bold.hovered" | "colors.background.danger.bold.pressed" | "colors.background.warning" | "colors.background.warning.hovered" | "colors.background.warning.pressed" | "colors.background.warning.bold" | "colors.background.warning.bold.hovered" | "colors.background.warning.bold.pressed" | "colors.background.success" | "colors.background.success.hovered" | "colors.background.success.pressed" | "colors.background.success.bold" | "colors.background.success.bold.hovered" | "colors.background.success.bold.pressed" | "colors.background.highlight" | "colors.background.highlight.hovered" | "colors.background.highlight.pressed" | "colors.background.highlight.bold" | "colors.background.highlight.bold.hovered" | "colors.background.highlight.bold.pressed" | "colors.nav.parent" | "colors.nav.stack" | "colors.nav.stack.hovered" | "colors.text.default" | "colors.text.default.static" | "colors.text.secondary" | "colors.text.secondary.pressed" | "colors.text.placeholder" | "colors.text.disabled" | "colors.text.inverse" | "colors.text.inverse.static" | "colors.text.selected" | "colors.text.danger" | "colors.text.danger.pressed" | "colors.text.warning" | "colors.text.warning.inverse" | "colors.text.success" | "colors.text.highlight" | "colors.text.information" | "colors.text.link" | "colors.text.link.pressed" | "colors.icon.default" | "colors.icon.disabled" | "colors.icon.inverse" | "colors.icon.inverse.static" | "colors.icon.selected" | "colors.icon.brand" | "colors.icon.danger" | "colors.icon.warning" | "colors.icon.warning.inverse" | "colors.icon.success" | "colors.icon.highlight" | "colors.icon.information" | "colors.icon.subtle" | "colors.icon.logo" | "colors.border.default" | "colors.border.bold" | "colors.border.disabled" | "colors.border.form" | "colors.border.focused" | "colors.border.inverse" | "colors.border.selected" | "colors.border.selected.hovered" | "colors.border.selected.disabled" | "colors.border.brand" | "colors.border.danger" | "colors.border.warning" | "colors.border.success" | "colors.border.highlight" | "colors.border.information" | "colors.chart.cat01" | "colors.chart.cat01.bold" | "colors.chart.cat02" | "colors.chart.cat02.bold" | "colors.chart.cat03" | "colors.chart.cat03.bold" | "colors.chart.cat04" | "colors.chart.cat04.bold" | "colors.chart.cat05" | "colors.chart.cat05.bold" | "colors.chart.cat06" | "colors.chart.cat06.bold" | "colors.chart.cat07" | "colors.chart.cat07.bold" | "colors.chart.cat08" | "colors.chart.cat08.bold" | "spacing.4xs" | "spacing.3xs" | "spacing.2xs" | "spacing.xs" | "spacing.sm" | "spacing.md" | "spacing.lg" | "spacing.xl" | "spacing.2xl" | "spacing.3xl" | "spacing.4xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-10" | "spacing.-4xs" | "spacing.-3xs" | "spacing.-2xs" | "spacing.-xs" | "spacing.-sm" | "spacing.-md" | "spacing.-lg" | "spacing.-xl" | "spacing.-2xl" | "spacing.-3xl" | "spacing.-4xl" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university"
+export type Token = "borderWidths.none" | "borderWidths.sm" | "borderWidths.md" | "borderWidths.lg" | "colors.debug" | "colors.currentcolor" | "colors.dark" | "colors.background" | "colors.overlay" | "colors.white" | "colors.vibrantPurple" | "colors.whiteAlpha.50" | "colors.whiteAlpha.100" | "colors.whiteAlpha.200" | "colors.whiteAlpha.300" | "colors.whiteAlpha.400" | "colors.whiteAlpha.500" | "colors.whiteAlpha.600" | "colors.whiteAlpha.700" | "colors.whiteAlpha.800" | "colors.whiteAlpha.900" | "colors.blackAlpha.50" | "colors.blackAlpha.100" | "colors.blackAlpha.200" | "colors.blackAlpha.300" | "colors.blackAlpha.400" | "colors.blackAlpha.500" | "colors.blackAlpha.600" | "colors.blackAlpha.700" | "colors.blackAlpha.800" | "colors.blackAlpha.900" | "colors.gray.25" | "colors.gray.50" | "colors.gray.100" | "colors.gray.400" | "colors.gray.600" | "colors.blue.50" | "colors.blue.100" | "colors.blue.400" | "colors.blue.500" | "colors.blue.700" | "colors.red.50" | "colors.red.400" | "colors.red.500" | "colors.red.700" | "colors.green.50" | "colors.green.400" | "colors.green.500" | "colors.green.700" | "colors.orange.50" | "colors.orange.400" | "colors.orange.500" | "colors.orange.700" | "colors.sky.100" | "colors.sky.400" | "colors.teal.100" | "colors.teal.400" | "colors.violet.100" | "colors.violet.400" | "colors.amber.100" | "colors.amber.400" | "colors.rose.100" | "colors.rose.400" | "colors.stone.100" | "colors.stone.400" | "colors.lime.100" | "colors.lime.400" | "colors.pink.100" | "colors.pink.400" | "colors.apricot.100" | "colors.apricot.400" | "colors.aqua.100" | "colors.aqua.400" | "colors.leaf.100" | "colors.leaf.400" | "colors.fuchsia.100" | "colors.fuchsia.400" | "colors.ice.50" | "colors.ice.100" | "colors.ash.100" | "colors.brand.capital" | "colors.brand.esign" | "colors.brand.expense" | "colors.brand.flex" | "colors.brand.jurnal" | "colors.brand.klikpajak" | "colors.brand.mekari" | "colors.brand.qontak" | "colors.brand.talenta" | "colors.brand.university" | "durations.slow" | "durations.normal" | "durations.fast" | "fonts.body" | "fonts.mono" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontWeights.regular" | "fontWeights.semiBold" | "fontWeights.bold" | "lineHeights.xs" | "lineHeights.sm" | "lineHeights.md" | "lineHeights.lg" | "lineHeights.xl" | "lineHeights.2xl" | "lineHeights.3xl" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "opacity.0" | "opacity.40" | "opacity.60" | "opacity.100" | "radii.none" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.full" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.focus" | "shadows.xl" | "shadows.2xl" | "shadows.outline" | "shadows.outline-tab" | "shadows.outer" | "shadows.inner" | "shadows.none" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.16" | "sizes.20" | "sizes.22" | "sizes.56" | "sizes.65" | "sizes.0.25" | "sizes.0.5" | "sizes.2.5" | "sizes.7.5" | "sizes.9.5" | "sizes.full" | "sizes.sm" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.8" | "spacing.12" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.32" | "spacing.40" | "spacing.64" | "spacing.0.5" | "spacing.1.5" | "zIndex.hide" | "zIndex.base" | "zIndex.docked" | "zIndex.sticky" | "zIndex.overlay" | "zIndex.modal" | "zIndex.popover" | "zIndex.tooltip" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "borderWidths.xl" | "borderWidths.2xl" | "colors.dark.100" | "colors.dark.200" | "colors.dark.250" | "colors.dark.300" | "colors.dark.350" | "colors.dark.400" | "colors.dark.500" | "colors.dark.600" | "colors.dark.700" | "colors.dark.800" | "colors.dark.900" | "colors.dark.1000" | "colors.dark.-100" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.1000" | "colors.blue.200" | "colors.blue.300" | "colors.blue.600" | "colors.blue.800" | "colors.blue.900" | "colors.blue.1000" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.1000" | "colors.violet.200" | "colors.violet.300" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.1000" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.1000" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.600" | "colors.red.800" | "colors.red.900" | "colors.red.1000" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.600" | "colors.orange.800" | "colors.orange.900" | "colors.orange.1000" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.1000" | "colors.lime.200" | "colors.lime.300" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.1000" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.600" | "colors.green.800" | "colors.green.900" | "colors.green.1000" | "colors.teal.200" | "colors.teal.300" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.1000" | "spacing.10" | "colors.background.surface" | "colors.background.stage" | "colors.background.overlay" | "colors.background.disabled" | "colors.background.inverse" | "colors.background.shadow" | "colors.background.neutral" | "colors.background.neutral.hovered" | "colors.background.neutral.pressed" | "colors.background.neutral.subtle" | "colors.background.neutral.subtle.hovered" | "colors.background.neutral.subtle.pressed" | "colors.background.neutral.bold" | "colors.background.neutral.bold.hovered" | "colors.background.neutral.bold.pressed" | "colors.background.brand" | "colors.background.brand.hovered" | "colors.background.brand.pressed" | "colors.background.brand.selected" | "colors.background.brand.bold" | "colors.background.brand.bold.hovered" | "colors.background.brand.bold.pressed" | "colors.background.brand.bold.selected" | "colors.background.tertiary" | "colors.background.tertiary.hovered" | "colors.background.tertiary.pressed" | "colors.background.danger" | "colors.background.danger.hovered" | "colors.background.danger.pressed" | "colors.background.danger.bold" | "colors.background.danger.bold.hovered" | "colors.background.danger.bold.pressed" | "colors.background.warning" | "colors.background.warning.hovered" | "colors.background.warning.pressed" | "colors.background.warning.bold" | "colors.background.warning.bold.hovered" | "colors.background.warning.bold.pressed" | "colors.background.success" | "colors.background.success.hovered" | "colors.background.success.pressed" | "colors.background.success.bold" | "colors.background.success.bold.hovered" | "colors.background.success.bold.pressed" | "colors.background.highlight" | "colors.background.highlight.hovered" | "colors.background.highlight.pressed" | "colors.background.highlight.bold" | "colors.background.highlight.bold.hovered" | "colors.background.highlight.bold.pressed" | "colors.nav.parent" | "colors.nav.stack" | "colors.nav.stack.hovered" | "colors.text.default" | "colors.text.default.static" | "colors.text.secondary" | "colors.text.secondary.pressed" | "colors.text.placeholder" | "colors.text.disabled" | "colors.text.inverse" | "colors.text.inverse.static" | "colors.text.selected" | "colors.text.danger" | "colors.text.danger.pressed" | "colors.text.warning" | "colors.text.warning.inverse" | "colors.text.success" | "colors.text.highlight" | "colors.text.information" | "colors.text.link" | "colors.text.link.pressed" | "colors.icon.default" | "colors.icon.disabled" | "colors.icon.inverse" | "colors.icon.inverse.static" | "colors.icon.selected" | "colors.icon.brand" | "colors.icon.danger" | "colors.icon.warning" | "colors.icon.warning.inverse" | "colors.icon.success" | "colors.icon.highlight" | "colors.icon.information" | "colors.icon.subtle" | "colors.icon.logo" | "colors.border.default" | "colors.border.bold" | "colors.border.disabled" | "colors.border.form" | "colors.border.focused" | "colors.border.inverse" | "colors.border.selected" | "colors.border.selected.hovered" | "colors.border.selected.disabled" | "colors.border.brand" | "colors.border.danger" | "colors.border.warning" | "colors.border.success" | "colors.border.highlight" | "colors.border.information" | "colors.chart.cat01" | "colors.chart.cat01.bold" | "colors.chart.cat02" | "colors.chart.cat02.bold" | "colors.chart.cat03" | "colors.chart.cat03.bold" | "colors.chart.cat04" | "colors.chart.cat04.bold" | "colors.chart.cat05" | "colors.chart.cat05.bold" | "colors.chart.cat06" | "colors.chart.cat06.bold" | "colors.chart.cat07" | "colors.chart.cat07.bold" | "colors.chart.cat08" | "colors.chart.cat08.bold" | "spacing.4xs" | "spacing.3xs" | "spacing.2xs" | "spacing.xs" | "spacing.sm" | "spacing.md" | "spacing.lg" | "spacing.xl" | "spacing.2xl" | "spacing.3xl" | "spacing.4xl" | "spacing.-0" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-8" | "spacing.-12" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-32" | "spacing.-40" | "spacing.-64" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-10" | "spacing.-4xs" | "spacing.-3xs" | "spacing.-2xs" | "spacing.-xs" | "spacing.-sm" | "spacing.-md" | "spacing.-lg" | "spacing.-xl" | "spacing.-2xl" | "spacing.-3xl" | "spacing.-4xl" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.25" | "colors.colorPalette.capital" | "colors.colorPalette.esign" | "colors.colorPalette.expense" | "colors.colorPalette.flex" | "colors.colorPalette.jurnal" | "colors.colorPalette.klikpajak" | "colors.colorPalette.mekari" | "colors.colorPalette.qontak" | "colors.colorPalette.talenta" | "colors.colorPalette.university"
 
-export type ColorPalette = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand"
+export type ColorPalette = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand"
 
 export type BorderWidthToken = "none" | "sm" | "md" | "lg" | "xl" | "2xl"
 
-export type ColorToken = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "dark.100" | "dark.200" | "dark.250" | "dark.300" | "dark.350" | "dark.400" | "dark.500" | "dark.600" | "dark.700" | "dark.800" | "dark.900" | "dark.1000" | "dark.-100" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.1000" | "blue.200" | "blue.300" | "blue.600" | "blue.800" | "blue.900" | "blue.1000" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.1000" | "violet.200" | "violet.300" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.1000" | "fuchsia.200" | "fuchsia.300" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.1000" | "red.100" | "red.200" | "red.300" | "red.600" | "red.800" | "red.900" | "red.1000" | "orange.100" | "orange.200" | "orange.300" | "orange.600" | "orange.800" | "orange.900" | "orange.1000" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.1000" | "lime.200" | "lime.300" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.1000" | "green.100" | "green.200" | "green.300" | "green.600" | "green.800" | "green.900" | "green.1000" | "teal.200" | "teal.300" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.1000" | "background.surface" | "background.stage" | "background.overlay" | "background.disabled" | "background.inverse" | "background.shadow" | "background.neutral" | "background.neutral.hovered" | "background.neutral.pressed" | "background.neutral.subtle" | "background.neutral.subtle.hovered" | "background.neutral.subtle.pressed" | "background.neutral.bold" | "background.neutral.bold.hovered" | "background.neutral.bold.pressed" | "background.brand" | "background.brand.hovered" | "background.brand.pressed" | "background.brand.selected" | "background.brand.bold" | "background.brand.bold.hovered" | "background.brand.bold.pressed" | "background.brand.bold.selected" | "background.tertiary" | "background.tertiary.hovered" | "background.tertiary.pressed" | "background.danger" | "background.danger.hovered" | "background.danger.pressed" | "background.danger.bold" | "background.danger.bold.hovered" | "background.danger.bold.pressed" | "background.warning" | "background.warning.hovered" | "background.warning.pressed" | "background.warning.bold" | "background.warning.bold.hovered" | "background.warning.bold.pressed" | "background.success" | "background.success.hovered" | "background.success.pressed" | "background.success.bold" | "background.success.bold.hovered" | "background.success.bold.pressed" | "background.highlight" | "background.highlight.hovered" | "background.highlight.pressed" | "background.highlight.bold" | "background.highlight.bold.hovered" | "background.highlight.bold.pressed" | "nav.parent" | "nav.stack" | "nav.stack.hovered" | "text.default" | "text.default.static" | "text.secondary" | "text.secondary.pressed" | "text.placeholder" | "text.disabled" | "text.inverse" | "text.inverse.static" | "text.selected" | "text.danger" | "text.danger.pressed" | "text.warning" | "text.warning.inverse" | "text.success" | "text.highlight" | "text.information" | "text.link" | "text.link.pressed" | "icon.default" | "icon.disabled" | "icon.inverse" | "icon.inverse.static" | "icon.selected" | "icon.brand" | "icon.danger" | "icon.warning" | "icon.warning.inverse" | "icon.success" | "icon.highlight" | "icon.information" | "icon.subtle" | "icon.logo" | "border.default" | "border.bold" | "border.disabled" | "border.form" | "border.focused" | "border.inverse" | "border.selected" | "border.selected.hovered" | "border.selected.disabled" | "border.brand" | "border.danger" | "border.warning" | "border.success" | "border.highlight" | "border.information" | "chart.cat01" | "chart.cat01.bold" | "chart.cat02" | "chart.cat02.bold" | "chart.cat03" | "chart.cat03.bold" | "chart.cat04" | "chart.cat04.bold" | "chart.cat05" | "chart.cat05.bold" | "chart.cat06" | "chart.cat06.bold" | "chart.cat07" | "chart.cat07.bold" | "chart.cat08" | "chart.cat08.bold" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.25" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university"
+export type ColorToken = "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | "whiteAlpha.400" | "whiteAlpha.500" | "whiteAlpha.600" | "whiteAlpha.700" | "whiteAlpha.800" | "whiteAlpha.900" | "blackAlpha.50" | "blackAlpha.100" | "blackAlpha.200" | "blackAlpha.300" | "blackAlpha.400" | "blackAlpha.500" | "blackAlpha.600" | "blackAlpha.700" | "blackAlpha.800" | "blackAlpha.900" | "gray.25" | "gray.50" | "gray.100" | "gray.400" | "gray.600" | "blue.50" | "blue.100" | "blue.400" | "blue.500" | "blue.700" | "red.50" | "red.400" | "red.500" | "red.700" | "green.50" | "green.400" | "green.500" | "green.700" | "orange.50" | "orange.400" | "orange.500" | "orange.700" | "sky.100" | "sky.400" | "teal.100" | "teal.400" | "violet.100" | "violet.400" | "amber.100" | "amber.400" | "rose.100" | "rose.400" | "stone.100" | "stone.400" | "lime.100" | "lime.400" | "pink.100" | "pink.400" | "apricot.100" | "apricot.400" | "aqua.100" | "aqua.400" | "leaf.100" | "leaf.400" | "fuchsia.100" | "fuchsia.400" | "ice.50" | "ice.100" | "ash.100" | "brand.capital" | "brand.esign" | "brand.expense" | "brand.flex" | "brand.jurnal" | "brand.klikpajak" | "brand.mekari" | "brand.qontak" | "brand.talenta" | "brand.university" | "dark.100" | "dark.200" | "dark.250" | "dark.300" | "dark.350" | "dark.400" | "dark.500" | "dark.600" | "dark.700" | "dark.800" | "dark.900" | "dark.1000" | "dark.-100" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.1000" | "blue.200" | "blue.300" | "blue.600" | "blue.800" | "blue.900" | "blue.1000" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.1000" | "violet.200" | "violet.300" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.1000" | "fuchsia.200" | "fuchsia.300" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.1000" | "red.100" | "red.200" | "red.300" | "red.600" | "red.800" | "red.900" | "red.1000" | "orange.100" | "orange.200" | "orange.300" | "orange.600" | "orange.800" | "orange.900" | "orange.1000" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.1000" | "lime.200" | "lime.300" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.1000" | "green.100" | "green.200" | "green.300" | "green.600" | "green.800" | "green.900" | "green.1000" | "teal.200" | "teal.300" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.1000" | "background.surface" | "background.stage" | "background.overlay" | "background.disabled" | "background.inverse" | "background.shadow" | "background.neutral" | "background.neutral.hovered" | "background.neutral.pressed" | "background.neutral.subtle" | "background.neutral.subtle.hovered" | "background.neutral.subtle.pressed" | "background.neutral.bold" | "background.neutral.bold.hovered" | "background.neutral.bold.pressed" | "background.brand" | "background.brand.hovered" | "background.brand.pressed" | "background.brand.selected" | "background.brand.bold" | "background.brand.bold.hovered" | "background.brand.bold.pressed" | "background.brand.bold.selected" | "background.tertiary" | "background.tertiary.hovered" | "background.tertiary.pressed" | "background.danger" | "background.danger.hovered" | "background.danger.pressed" | "background.danger.bold" | "background.danger.bold.hovered" | "background.danger.bold.pressed" | "background.warning" | "background.warning.hovered" | "background.warning.pressed" | "background.warning.bold" | "background.warning.bold.hovered" | "background.warning.bold.pressed" | "background.success" | "background.success.hovered" | "background.success.pressed" | "background.success.bold" | "background.success.bold.hovered" | "background.success.bold.pressed" | "background.highlight" | "background.highlight.hovered" | "background.highlight.pressed" | "background.highlight.bold" | "background.highlight.bold.hovered" | "background.highlight.bold.pressed" | "nav.parent" | "nav.stack" | "nav.stack.hovered" | "text.default" | "text.default.static" | "text.secondary" | "text.secondary.pressed" | "text.placeholder" | "text.disabled" | "text.inverse" | "text.inverse.static" | "text.selected" | "text.danger" | "text.danger.pressed" | "text.warning" | "text.warning.inverse" | "text.success" | "text.highlight" | "text.information" | "text.link" | "text.link.pressed" | "icon.default" | "icon.disabled" | "icon.inverse" | "icon.inverse.static" | "icon.selected" | "icon.brand" | "icon.danger" | "icon.warning" | "icon.warning.inverse" | "icon.success" | "icon.highlight" | "icon.information" | "icon.subtle" | "icon.logo" | "border.default" | "border.bold" | "border.disabled" | "border.form" | "border.focused" | "border.inverse" | "border.selected" | "border.selected.hovered" | "border.selected.disabled" | "border.brand" | "border.danger" | "border.warning" | "border.success" | "border.highlight" | "border.information" | "chart.cat01" | "chart.cat01.bold" | "chart.cat02" | "chart.cat02.bold" | "chart.cat03" | "chart.cat03.bold" | "chart.cat04" | "chart.cat04.bold" | "chart.cat05" | "chart.cat05.bold" | "chart.cat06" | "chart.cat06.bold" | "chart.cat07" | "chart.cat07.bold" | "chart.cat08" | "chart.cat08.bold" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.25" | "colorPalette.capital" | "colorPalette.esign" | "colorPalette.expense" | "colorPalette.flex" | "colorPalette.jurnal" | "colorPalette.klikpajak" | "colorPalette.mekari" | "colorPalette.qontak" | "colorPalette.talenta" | "colorPalette.university"
 
 export type DurationToken = "slow" | "normal" | "fast"
 

package/types/conditions.d.ts

@@ -12,7 +12,7 @@ export interface Conditions {
 	"_focusVisible": string
 	/** `&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])` */
 	"_disabled": string
-	/** `&:is(:active, [data-active], [data-active=true])` */
+	/** `&:is(:active, [data-active=true])` */
 	"_active": string
 	/** `&:visited` */
 	"_visited": string

package/types/prop-type.d.ts

@@ -143,7 +143,7 @@ export interface UtilityValues {
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
-	animationName: "fade-in" | "fade-out" | "spin";
+	animationName: "fade-in" | "fade-out" | "spin" | "border-shine";
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
 	rotate: "auto" | "auto-3d" | CssProperties["rotate"];
@@ -196,7 +196,7 @@ export interface UtilityValues {
 	srOnly: boolean;
 	debug: boolean;
 	containerName: CssProperties["containerName"];
-	colorPalette: "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand";
+	colorPalette: "debug" | "currentcolor" | "dark" | "background" | "overlay" | "white" | "vibrantPurple" | "whiteAlpha" | "blackAlpha" | "gray" | "blue" | "red" | "green" | "orange" | "sky" | "teal" | "violet" | "amber" | "rose" | "stone" | "lime" | "pink" | "apricot" | "aqua" | "leaf" | "fuchsia" | "ice" | "ash" | "brand";
 	textStyle: "overline" | "body.sm" | "body.md" | "label.sm" | "label.md" | "h3" | "h2" | "h1";
 }