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

package/dist/index.mjs

@@ -14,7 +14,7 @@ var conditions = {
   extend: {
     disabled: "&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])",
     invalid: "&:is([aria-invalid=true], [data-invalid])",
-    active: "&:is(:active, [data-active], [data-active=true])",
+    active: "&:is(:active, [data-active=true])",
     checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
     indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
     closed: "&:is([data-state=closed])",
@@ -79,6 +79,11 @@ var keyframes = defineKeyframes({
   },
   spin: {
     "100%": { transform: "rotate(1turn)" }
+  },
+  "border-shine": {
+    "0%": { backgroundPosition: "0% 20%" },
+    "50%": { backgroundPosition: "100% 50%" },
+    "100%": { backgroundPosition: "0% 100%" }
   }
 });
 
@@ -118,7 +123,7 @@ var tagSlotRecipe = defineSlotRecipe({
       right: "0",
       paddingTop: "1",
       padding: "0",
-      transition: "all 250ms!",
+      transition: "opacity 250ms!",
       visibility: "hidden",
       opacity: "0",
       _groupHover: {
@@ -181,9 +186,9 @@ var tagSlotRecipe = defineSlotRecipe({
           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"
           }
         }
       }
@@ -347,20 +352,20 @@ var avatarSlotRecipe = defineSlotRecipe2({
     variantColor,
     size: {
       sm: {
-        root: { width: "6", height: "6", fontSize: "xs" },
-        icon: { width: "4!", height: "4!" }
+        root: { width: "5", height: "5", fontSize: "sm" },
+        icon: { width: "3!", height: "3!" }
       },
       md: {
-        root: { width: "8", height: "8", fontSize: "sm" },
-        icon: { width: "5!", height: "5!" }
+        root: { width: "6", height: "6", fontSize: "md" },
+        icon: { width: "4!", height: "4!" }
       },
       lg: {
-        root: { width: "12", height: "12", fontSize: "lg" },
-        icon: { width: "8!", height: "8!" }
+        root: { width: "9", height: "9", fontSize: "sm" },
+        icon: { width: "5!", height: "5!" }
       },
       xl: {
-        root: { width: "20", height: "20", fontSize: "2xl" },
-        icon: { width: "16!", height: "16!" }
+        root: { width: "20", height: "20", fontSize: "32px" },
+        icon: { width: "12!", height: "12!" }
       }
     }
   },
@@ -417,7 +422,7 @@ var avatarGroupSlotRecipe = defineSlotRecipe2({
       zIndex: "0"
     },
     excess: {
-      marginLeft: "2",
+      marginLeft: "1",
       color: "blue.400",
       backgroundColor: "blue.50",
       fontWeight: "semiBold",
@@ -436,19 +441,166 @@ var avatarGroupSlotRecipe = defineSlotRecipe2({
   variants: {
     size: {
       sm: {
-        excess: { width: "6", height: "6", fontSize: "xs" }
+        root: {
+          "& > [data-pixel-component=MpAvatar]": {
+            width: "6.5",
+            height: "6.5",
+            fontSize: "sm"
+          }
+        },
+        excess: { width: "5", height: "5", fontSize: "sm" }
       },
       md: {
-        excess: { width: "8", height: "8", fontSize: "sm" }
+        root: {
+          "& > [data-pixel-component=MpAvatar]": {
+            width: "7",
+            height: "7",
+            fontSize: "md"
+          }
+        },
+        excess: { width: "6", height: "6", fontSize: "md" }
       },
       lg: {
-        excess: { width: "12", height: "12", fontSize: "lg" }
+        root: {
+          "& > [data-pixel-component=MpAvatar]": {
+            width: "9.5",
+            height: "9.5",
+            fontSize: "sm"
+          }
+        },
+        excess: { width: "9", height: "9", fontSize: "sm" }
       },
       xl: {
-        excess: { width: "20", height: "20", fontSize: "2xl" }
+        root: {
+          "& > [data-pixel-component=MpAvatar]": {
+            width: "82px",
+            height: "82px",
+            fontSize: "32px"
+          }
+        },
+        excess: { width: "20", height: "20", fontSize: "32px" }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/airene-button.ts
+import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
+var aireneButtonSlotRecipe = defineSlotRecipe3({
+  className: "airene-button",
+  jsx: ["MpAireneButton", "mp-airene-button"],
+  slots: ["root", "badge"],
+  base: {
+    root: {
+      display: "inline-flex!",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative",
+      backgroundColor: "white",
+      color: "blue.400!",
+      borderRadius: "25px!",
+      fontSize: "md",
+      fontWeight: "semiBold",
+      paddingLeft: "0.625rem!",
+      paddingRight: "0.625rem!",
+      overflow: "hidden",
+      paddingTop: "7.5px!",
+      paddingBottom: "7.5px!",
+      height: "auto",
+      zIndex: "1",
+      gap: "0!",
+      transition: "color 0.3s ease, background-color 0.3s ease",
+      _nextTheme: {
+        backgroundColor: "background.neutral",
+        color: "text.link!"
+      },
+      _before: {
+        content: '""',
+        position: "absolute",
+        top: "-2px",
+        left: "-2px",
+        right: "-2px",
+        bottom: "-2px",
+        borderRadius: "23px",
+        background: "vibrantPurple",
+        backgroundSize: "200% 200%",
+        animation: "border-shine 4s linear infinite",
+        transition: "background-color 0.3s ease",
+        zIndex: "-1"
+      },
+      _after: {
+        content: '""',
+        position: "absolute",
+        top: "2px",
+        left: "2px",
+        right: "2px",
+        bottom: "2px",
+        borderRadius: "999px",
+        backgroundColor: "white",
+        zIndex: "-1",
+        _nextTheme: {
+          backgroundColor: "background.neutral"
+        }
+      },
+      _hover: {
+        _before: {
+          background: "linear-gradient(90deg, var(--mp-colors-blue-400), var(--mp-colors-blue-400), var(--mp-colors-blue-400))",
+          _nextTheme: {
+            background: "linear-gradient(90deg, var(--mp-colors-background-brand-bold), var(--mp-colors-background-brand-bold), var(--mp-colors-background-brand-bold))"
+          }
+        }
+      },
+      _active: {
+        _before: {
+          background: "linear-gradient(90deg, var(--mp-colors-blue-400), var(--mp-colors-blue-400), var(--mp-colors-blue-400))"
+        },
+        _after: {
+          background: "blue.50"
+        }
+      },
+      _disabled: {
+        color: "gray.400!",
+        cursor: "not-allowed",
+        _nextTheme: {
+          color: "text.placeholder!"
+        },
+        _before: {
+          background: "gray.50!"
+        },
+        _after: {
+          background: "gray.50!",
+          _nextTheme: {
+            background: "#F0F1F3!"
+          }
+        }
+      }
+    },
+    badge: {
+      display: "flex",
+      backgroundColor: "var(--mp-airene-button-badge-background)",
+      borderRadius: "999px",
+      paddingRight: "1",
+      paddingLeft: "0.5",
+      paddingY: "0.5",
+      height: "4",
+      marginLeft: "1",
+      "& > [data-pixel-component=MpIcon]": {
+        width: "3!",
+        height: "3!",
+        "& > path": {
+          fill: "var(--mp-airene-button-badge-icon)"
+        }
+      },
+      "& > [data-pixel-component=MpText]": {
+        fontSize: "0.625rem!",
+        fontWeight: "semiBold!",
+        color: "var(--mp-airene-button-badge-text)"
       }
     }
   },
+  variants: {},
   compoundVariants: [],
   defaultVariants: {}
 });
@@ -595,7 +747,7 @@ var buttonRecipe = defineRecipe({
           background: "red.700",
           borderColor: "red.700"
         },
-        _focus: {
+        _focusVisible: {
           borderColor: "red.400",
           boxShadow: "0 0 0 3px #FDECEE"
         },
@@ -614,7 +766,7 @@ var buttonRecipe = defineRecipe({
             background: "background.danger.bold.pressed",
             borderColor: "background.danger.bold.pressed"
           },
-          _focus: {
+          _focusVisible: {
             borderColor: "border.focused",
             boxShadow: "focus"
           },
@@ -623,6 +775,38 @@ var buttonRecipe = defineRecipe({
           }
         }
       },
+      tertiary: {
+        color: "white",
+        background: "#282E33",
+        borderColor: "#282E33",
+        _hover: {
+          background: "#38414A",
+          borderColor: "#38414A"
+        },
+        _active: {
+          background: "#454F59",
+          borderColor: "#454F59"
+        },
+        _loading: {
+          background: "#282E33"
+        },
+        _nextTheme: {
+          color: "text.inverse.static",
+          background: "background.tertiary",
+          borderColor: "background.tertiary",
+          _hover: {
+            background: "background.tertiary.hovered",
+            borderColor: "background.tertiary.hovered"
+          },
+          _active: {
+            background: "background.tertiary.pressed",
+            borderColor: "background.tertiary.pressed"
+          },
+          _loading: {
+            background: "background.tertiary"
+          }
+        }
+      },
       textLink: {
         color: "blue.400",
         background: "transparent",
@@ -659,13 +843,28 @@ var buttonRecipe = defineRecipe({
           _disabled: {
             color: "text.disabled",
             _hover: {
-              color: "text.disabled"
+              color: "text.disabled",
+              textDecoration: "none"
             }
           },
           _loading: {
             background: "text.inverse"
           }
         }
+      },
+      unstyled: {
+        display: "inline",
+        color: "inherit",
+        backgroundColor: "transparent",
+        border: "none",
+        outline: "none",
+        margin: "0",
+        padding: "0",
+        fontSize: "inherit",
+        fontWeight: "inherit",
+        lineHeight: "inherit",
+        userSelect: "inherit",
+        textAlign: "inherit"
       }
     },
     size: {
@@ -678,18 +877,38 @@ var buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: "1",
-          paddingY: "1 !important",
+          paddingY: "1",
           _nextTheme: {
-            paddingX: "3xs !",
-            paddingY: "3xs !important"
+            paddingX: "3xs",
+            paddingY: "3xs"
           }
         },
         _hasLabel: {
-          paddingX: "2 !important",
+          paddingX: "2",
           paddingY: "1",
+          _hasIcon: {
+            "[data-icon-position=left]": {
+              paddingLeft: "1.5",
+              paddingRight: "2"
+            },
+            "[data-icon-position=right]": {
+              paddingLeft: "2",
+              paddingRight: "1.5"
+            }
+          },
           _nextTheme: {
-            paddingX: "xs !important",
-            paddingY: "3xs"
+            paddingX: "xs",
+            paddingY: "3xs",
+            _hasIcon: {
+              "[data-icon-position=left]": {
+                paddingLeft: "2xs",
+                paddingRight: "xs"
+              },
+              "[data-icon-position=right]": {
+                paddingLeft: "xs",
+                paddingRight: "2xs"
+              }
+            }
           }
         }
       },
@@ -702,18 +921,38 @@ var buttonRecipe = defineRecipe({
         },
         _hasIcon: {
           paddingX: "1.5",
-          paddingY: "1.5 !important",
+          paddingY: "1.5",
           _nextTheme: {
-            paddingX: "2xs",
-            paddingY: "2xs !important"
+            paddingX: "xs",
+            paddingY: "xs"
           }
         },
         _hasLabel: {
-          paddingX: "4 !important",
+          paddingX: "4",
           paddingY: "2",
+          _hasIcon: {
+            "&[data-icon-position=left]": {
+              paddingLeft: "3 !important",
+              paddingRight: "4 !important"
+            },
+            "& [data-icon-position=right]": {
+              paddingLeft: "4 !important",
+              paddingRight: "3 !important"
+            }
+          },
           _nextTheme: {
-            paddingX: "md !important",
-            paddingY: "xs"
+            paddingX: "md",
+            paddingY: "xs",
+            _hasIcon: {
+              "[data-icon-position=left]": {
+                paddingLeft: "sm !important",
+                paddingRight: "md !important"
+              },
+              "[data-icon-position=right]": {
+                paddingLeft: "md !important",
+                paddingRight: "sm !important"
+              }
+            }
           }
         }
       }
@@ -724,7 +963,7 @@ var buttonRecipe = defineRecipe({
       variant: ["textLink"],
       css: {
         borderRadius: "sm",
-        _focus: {
+        _focusVisible: {
           borderColor: "white",
           boxShadow: "focus",
           _nextTheme: {
@@ -741,9 +980,9 @@ var buttonRecipe = defineRecipe({
       }
     },
     {
-      variant: ["primary", "secondary", "ghost"],
+      variant: ["primary", "secondary", "ghost", "tertiary"],
       css: {
-        _focus: {
+        _focusVisible: {
           borderColor: "blue.400",
           boxShadow: "focus",
           _nextTheme: {
@@ -754,7 +993,7 @@ var buttonRecipe = defineRecipe({
       }
     },
     {
-      variant: ["primary", "secondary", "ghost", "danger"],
+      variant: ["primary", "secondary", "ghost", "danger", "tertiary"],
       css: {
         _disabled: {
           cursor: "not-allowed",
@@ -763,7 +1002,15 @@ var buttonRecipe = defineRecipe({
           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",
@@ -771,7 +1018,15 @@ var buttonRecipe = defineRecipe({
             borderColor: "background.disabled",
             _hover: {
               background: "background.disabled",
-              borderColor: "background.disabled"
+              borderColor: "background.disabled",
+              _hasIcon: {
+                background: "transparent",
+                borderColor: "transparent"
+              }
+            },
+            _hasIcon: {
+              background: "transparent",
+              borderColor: "transparent"
             }
           }
         }
@@ -810,8 +1065,8 @@ var buttonGroupRecipe = defineRecipe({
 });
 
 // src/recipes/input.ts
-import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
-var inputSlotRecipe = defineSlotRecipe3({
+import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
+var inputSlotRecipe = defineSlotRecipe4({
   className: "input",
   jsx: ["MpInput", "mp-input"],
   slots: ["root", "control", "clear"],
@@ -847,7 +1102,7 @@ var inputSlotRecipe = defineSlotRecipe3({
       paddingInline: "3",
       appearance: "none",
       caretColor: "blue.500",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms",
       _isFullWidth: {
         width: "full"
       },
@@ -992,7 +1247,7 @@ var inputSlotRecipe = defineSlotRecipe3({
   // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
-var inputGroupSlotRecipe = defineSlotRecipe3({
+var inputGroupSlotRecipe = defineSlotRecipe4({
   className: "input-group",
   jsx: ["MpInputGroup", "mp-input-group"],
   slots: ["root"],
@@ -1004,7 +1259,7 @@ var inputGroupSlotRecipe = defineSlotRecipe3({
       width: "full",
       "&[data-with-left-addon=true]": {
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
-          paddingLeft: "calc(var(--mp-input-offset--left) + 24px)"
+          paddingLeft: "calc(var(--mp-input-offset--left) + 14px)"
         }
       },
       "&[data-with-clearable=true]": {
@@ -1022,14 +1277,14 @@ var inputGroupSlotRecipe = defineSlotRecipe3({
       },
       "&[data-with-right-addon=true]": {
         "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
-          paddingRight: "calc(var(--mp-input-offset--right) + 24px)"
+          paddingRight: "calc(var(--mp-input-offset--right) + 14px)"
         },
         "&[data-with-clearable=true]": {
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputControl]": {
             paddingRight: "calc(var(--mp-input-offset--right) + 54px)"
           },
           "& > [data-pixel-component=MpInput] > [data-pixel-component=MpInputClear]": {
-            "--mp-input--right": "calc(var(--mp-input-offset--right) + 24px)"
+            "--mp-input--right": "calc(var(--mp-input-offset--right) + 14px)"
           }
         }
       },
@@ -1063,7 +1318,7 @@ var inputGroupSlotRecipe = defineSlotRecipe3({
   compoundVariants: [],
   defaultVariants: {}
 });
-var inputAddonSlotRecipe = defineSlotRecipe3({
+var inputAddonSlotRecipe = defineSlotRecipe4({
   className: "input-addon",
   jsx: ["MpInputAddon", "mp-input-addon"],
   slots: ["root"],
@@ -1090,16 +1345,20 @@ var inputAddonSlotRecipe = defineSlotRecipe3({
     placement: {
       left: {
         root: {
-          left: "3",
+          left: "2",
           borderTopRightRadius: "none!",
-          borderBottomRightRadius: "none!"
+          borderBottomRightRadius: "none!",
+          minWidth: "32px",
+          justifyContent: "center"
         }
       },
       right: {
         root: {
-          right: "3",
+          right: "2",
           borderTopLeftRadius: "none!",
-          borderBottomLeftRadius: "none!"
+          borderBottomLeftRadius: "none!",
+          minWidth: "32px",
+          justifyContent: "center"
         }
       }
     },
@@ -1109,8 +1368,16 @@ var inputAddonSlotRecipe = defineSlotRecipe3({
           height: "6.5",
           borderRadius: "2xs",
           _hasBackground: {
-            _placementLeft: { left: "0.5" },
-            _placementRight: { right: "0.5" }
+            _placementLeft: {
+              left: "0.5",
+              minWidth: "24px",
+              justifyContent: "center"
+            },
+            _placementRight: {
+              right: "0.5",
+              minWidth: "24px",
+              justifyContent: "center"
+            }
           }
         }
       },
@@ -1119,8 +1386,16 @@ var inputAddonSlotRecipe = defineSlotRecipe3({
           height: "32px",
           borderRadius: "sm",
           _hasBackground: {
-            _placementLeft: { left: "3px" },
-            _placementRight: { right: "3px" }
+            _placementLeft: {
+              left: "3px",
+              minWidth: "32px",
+              justifyContent: "center"
+            },
+            _placementRight: {
+              right: "3px",
+              minWidth: "32px",
+              justifyContent: "center"
+            }
           }
         }
       }
@@ -1136,8 +1411,8 @@ var inputAddonSlotRecipe = defineSlotRecipe3({
 });
 
 // src/recipes/select.ts
-import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
-var selectSlotRecipe = defineSlotRecipe4({
+import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
+var selectSlotRecipe = defineSlotRecipe5({
   className: "select",
   jsx: ["MpSelect", "mp-select"],
   slots: ["root", "control", "clear", "arrow"],
@@ -1297,7 +1572,6 @@ var textRecipe = defineRecipe2({
   jsx: ["MpText", "mp-text"],
   base: {
     color: "var(--mp-text-color)",
-    fontVariantNumeric: "lining-nums tabular-nums",
     "&[data-text-strike=true]": {
       textDecoration: "line-through"
     },
@@ -1361,7 +1635,9 @@ var iconRecipe = defineRecipe3({
     flexShrink: 0,
     "&:not(:root)": {
       overflow: "hidden"
-    }
+    },
+    width: "var(--mp-icon-size)",
+    height: "var(--mp-icon-size)"
   },
   variants: {
     size: {
@@ -1409,10 +1685,10 @@ var spinnerRecipe = defineRecipe4({
 });
 
 // src/recipes/accordion.ts
-import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
-var accordionSlotRecipe = defineSlotRecipe5({
+import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
+var accordionSlotRecipe = defineSlotRecipe6({
   className: "accordion",
-  slots: ["header", "item", "panel"],
+  slots: ["header", "headerTitle", "headerDescription", "item", "panel"],
   jsx: [
     "MpAccordionHeader",
     "MpAccordionItem",
@@ -1423,35 +1699,52 @@ var accordionSlotRecipe = defineSlotRecipe5({
   ],
   base: {
     header: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      pt: 3,
+      _disabled: { opacity: "0.4", cursor: "not-allowed" }
+    },
+    headerTitle: {
       display: "flex",
       alignItems: "center",
+      gap: 2,
       width: "100%",
       outline: 0,
-      gap: 4,
-      transition: "all 0.2s",
-      py: 3,
       fontWeight: "semiBold",
-      fontSize: "md",
+      fontSize: "xl",
       color: "dark",
-      _disabled: { opacity: "0.4", cursor: "not-allowed" },
+      transition: "all 0.2s",
       _nextTheme: {
         color: "text.default"
       }
     },
+    headerDescription: {
+      color: "gray.600",
+      lineHeight: "md",
+      _nextTheme: {
+        color: "text.secondary"
+      }
+    },
     item: {
       borderBottomWidth: "1px",
       borderColor: "gray.100",
+      pb: 3,
       _last: {
         borderBottomWidth: "1px",
         borderColor: "gray.100",
-        _nextTheme: { borderColor: "border.default" }
+        _nextTheme: { borderColor: "transparent" }
       },
       _nextTheme: {
         borderColor: "border.default"
       }
     },
     panel: {
-      py: 3
+      pt: 2,
+      color: "gray.600",
+      _nextTheme: {
+        color: "text.secondary"
+      }
     }
   },
   variants: {
@@ -1466,11 +1759,34 @@ var accordionSlotRecipe = defineSlotRecipe5({
           cursor: "default"
         }
       }
+    },
+    iconPosition: {
+      start: {
+        headerDescription: {
+          pl: 8
+        },
+        panel: {
+          pl: 8
+        }
+      },
+      end: {
+        headerDescription: {
+          pl: 0
+        },
+        panel: {
+          pl: 0
+        }
+      }
     }
   },
   defaultVariants: {
-    isClickable: true
-  }
+    isClickable: true,
+    iconPosition: "end"
+  },
+  staticCss: [
+    // Need to generate statically as `start` and `end` values are runtime-determined.
+    { iconPosition: ["*"] }
+  ]
 });
 
 // src/recipes/popover.ts
@@ -1878,6 +2194,7 @@ var tooltipRecipe = defineRecipe8({
     fontWeight: "regular",
     pointerEvents: "none",
     fontSize: "sm",
+    lineHeight: "20px",
     shadow: "md",
     maxW: "300px",
     zIndex: "tooltip",
@@ -1894,8 +2211,8 @@ var tooltipRecipe = defineRecipe8({
 });
 
 // src/recipes/tabs.ts
-import { defineRecipe as defineRecipe9, defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
-var tabListSlotRecipe = defineSlotRecipe6({
+import { defineRecipe as defineRecipe9, defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
+var tabListSlotRecipe = defineSlotRecipe7({
   className: "tab-list",
   jsx: ["MpTabList", "mp-tab-list"],
   slots: ["root", "list"],
@@ -1956,7 +2273,7 @@ var tabRecipe = defineRecipe9({
       opacity: 0.4,
       cursor: "not-allowed"
     },
-    _focus: {
+    _focusVisible: {
       shadow: "0 0 0 2px #E0EEFF",
       borderRadius: "sm"
     },
@@ -1965,7 +2282,7 @@ var tabRecipe = defineRecipe9({
       _hover: {
         color: "text.default"
       },
-      _focus: {
+      _focusVisible: {
         shadow: "0 0 0 2px var(--mp-colors-border-focused)"
       }
     }
@@ -2142,8 +2459,8 @@ var tabSelectedBorderRecipe = defineRecipe9({
 });
 
 // src/recipes/checkbox.ts
-import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
-var checkboxSlotRecipe = defineSlotRecipe7({
+import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
+var checkboxSlotRecipe = defineSlotRecipe8({
   className: "checkbox",
   jsx: ["MpCheckbox", "mp-checkbox"],
   slots: ["root", "control", "label"],
@@ -2164,12 +2481,14 @@ var checkboxSlotRecipe = defineSlotRecipe7({
         }
       },
       "& .mp-shared__hidden": {
-        "&:focus + .mp-checkbox__control": {
-          borderColor: "blue.400",
-          boxShadow: "focus",
-          _nextTheme: {
-            borderColor: "border.focused",
-            boxShadow: "0 0 0 1px {colors.border.focused}"
+        _focusVisible: {
+          "& + .mp-checkbox__control": {
+            borderColor: "blue.400",
+            boxShadow: "focus",
+            _nextTheme: {
+              borderColor: "border.focused",
+              boxShadow: "0 0 0 1px {colors.border.focused}"
+            }
           }
         }
       },
@@ -2288,8 +2607,8 @@ var checkboxSlotRecipe = defineSlotRecipe7({
 });
 
 // src/recipes/radio.ts
-import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
-var radioSlotRecipe = defineSlotRecipe8({
+import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
+var radioSlotRecipe = defineSlotRecipe9({
   className: "radio",
   jsx: ["MpRadio", "mp-radio"],
   slots: ["root", "control", "label"],
@@ -2310,12 +2629,14 @@ var radioSlotRecipe = defineSlotRecipe8({
         }
       },
       "& .mp-shared__hidden": {
-        "&:focus + .mp-radio__control": {
-          borderColor: "blue.400",
-          boxShadow: "focus",
-          _nextTheme: {
-            borderColor: "border.focused",
-            boxShadow: "0 0 0 1px {colors.border.focused}"
+        _focusVisible: {
+          "& + .mp-radio__control": {
+            borderColor: "blue.400",
+            boxShadow: "focus",
+            _nextTheme: {
+              borderColor: "border.focused",
+              boxShadow: "0 0 0 1px {colors.border.focused}"
+            }
           }
         }
       },
@@ -2419,8 +2740,8 @@ var radioSlotRecipe = defineSlotRecipe8({
 });
 
 // src/recipes/shared.ts
-import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
-var sharedSlotRecipe = defineSlotRecipe9({
+import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
+var sharedSlotRecipe = defineSlotRecipe10({
   className: "shared",
   jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
   slots: ["hidden"],
@@ -2437,8 +2758,8 @@ var sharedSlotRecipe = defineSlotRecipe9({
 });
 
 // src/recipes/toggle.ts
-import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
-var toggleSlotRecipe = defineSlotRecipe10({
+import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
+var toggleSlotRecipe = defineSlotRecipe11({
   className: "toggle",
   jsx: ["MpToggle", "mp-toggle"],
   slots: ["root", "control", "label"],
@@ -2459,12 +2780,14 @@ var toggleSlotRecipe = defineSlotRecipe10({
         }
       },
       "& .mp-shared__hidden": {
-        "&:focus + .mp-toggle__control": {
-          borderColor: "blue.400",
-          boxShadow: "focus",
-          _nextTheme: {
-            borderColor: "border.focused",
-            boxShadow: "0 0 0 1px {colors.border.focused}"
+        _focusVisible: {
+          "& + .mp-toggle__control": {
+            borderColor: "blue.400",
+            boxShadow: "focus",
+            _nextTheme: {
+              borderColor: "border.focused",
+              boxShadow: "0 0 0 1px {colors.border.focused}"
+            }
           }
         }
       },
@@ -2706,8 +3029,8 @@ var tableContainerRecipe = defineRecipe10({
 });
 
 // src/recipes/progress.ts
-import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
-var progressSlotRecipe = defineSlotRecipe11({
+import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
+var progressSlotRecipe = defineSlotRecipe12({
   className: "progress",
   jsx: ["MpProgress", "mp-progress"],
   slots: ["root", "linear", "circularBase", "circularTrack"],
@@ -2786,8 +3109,8 @@ var progressSlotRecipe = defineSlotRecipe11({
 });
 
 // src/recipes/form-control.ts
-import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
-var formControlSlotRecipe = defineSlotRecipe12({
+import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
+var formControlSlotRecipe = defineSlotRecipe13({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
   slots: ["root", "label", "required", "helpText", "errorMessage"],
@@ -2834,8 +3157,8 @@ var formControlSlotRecipe = defineSlotRecipe12({
 });
 
 // src/recipes/input-tag.ts
-import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
-var inputTagSlotRecipe = defineSlotRecipe13({
+import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
+var inputTagSlotRecipe = defineSlotRecipe14({
   className: "input-tag",
   jsx: ["MpInputTag", "mp-input-tag"],
   slots: [
@@ -3033,8 +3356,8 @@ var dividerRecipe = defineRecipe11({
 });
 
 // src/recipes/modal.ts
-import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
-var modalSlotRecipe = defineSlotRecipe14({
+import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
+var modalSlotRecipe = defineSlotRecipe15({
   className: "modal",
   description: "The styles for the Modal component",
   jsx: ["MpModal", "mp-modal"],
@@ -3087,7 +3410,10 @@ var modalSlotRecipe = defineSlotRecipe14({
       _nextTheme: {
         background: "background.stage",
         borderColor: "border.bold",
-        color: "text.default"
+        color: "text.default",
+        '&[data-modal-type="drawer"]': {
+          borderColor: "border.default"
+        }
       }
     },
     header: {
@@ -3105,6 +3431,10 @@ var modalSlotRecipe = defineSlotRecipe14({
         color: "text.default",
         background: "background.neutral.subtle",
         borderBottomColor: "border.default"
+      },
+      '&[data-modal-presentation="drawer"]': {
+        borderTopLeftRadius: "none",
+        borderTopRightRadius: "none"
       }
     },
     closeButton: {
@@ -3161,8 +3491,8 @@ var modalSlotRecipe = defineSlotRecipe14({
 });
 
 // src/recipes/upload.ts
-import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
-var uploadSlotRecipe = defineSlotRecipe15({
+import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
+var uploadSlotRecipe = defineSlotRecipe16({
   className: "upload",
   jsx: ["MpUpload", "mp-upload"],
   slots: ["root", "resetButton"],
@@ -3247,7 +3577,7 @@ var uploadSlotRecipe = defineSlotRecipe15({
     }
   }
 });
-var uploadListSlotRecipe = defineSlotRecipe15({
+var uploadListSlotRecipe = defineSlotRecipe16({
   className: "upload-list",
   jsx: ["MpUploadList", "mp-upload-list"],
   slots: ["root", "titleWrapper", "actionWrapper"],
@@ -3290,8 +3620,8 @@ var uploadListSlotRecipe = defineSlotRecipe15({
 });
 
 // src/recipes/dropzone.ts
-import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
-var dropzoneSlotRecipe = defineSlotRecipe16({
+import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
+var dropzoneSlotRecipe = defineSlotRecipe17({
   className: "dropzone",
   jsx: ["MpDropzone", "mp-dropzone"],
   slots: [
@@ -3360,7 +3690,7 @@ var dropzoneSlotRecipe = defineSlotRecipe16({
         boxShadow: "focus",
         borderColor: "blue.400",
         _nextTheme: {
-          boxShadow: "focus",
+          boxShadow: "none",
           borderColor: "border.focused"
         },
         _hover: {
@@ -3520,8 +3850,8 @@ var dropzoneSlotRecipe = defineSlotRecipe16({
 });
 
 // src/recipes/segmented-control.ts
-import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
-var segmentedControlSlotRecipe = defineSlotRecipe17({
+import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
+var segmentedControlSlotRecipe = defineSlotRecipe18({
   className: "segmented-control",
   jsx: ["MpSegmentedControl", "mp-segmented-control"],
   slots: ["root", "item", "hidden", "control", "label", "icon"],
@@ -3607,7 +3937,7 @@ var segmentedControlSlotRecipe = defineSlotRecipe17({
       "input[type=radio]:checked:hover:not(:disabled) + &, input[type=radio][aria-checked=mixed]:hover:not(:disabled) + &": {
         color: "blue.700"
       },
-      "input[type=radio]:checked:focus + &, input[type=radio][aria-checked=mixed]:focus + &": {
+      "input[type=radio]:checked:focus-visible + &, input[type=radio][aria-checked=mixed]:focus-visible + &": {
         color: "blue.700",
         boxShadow: "outer",
         _nextTheme: {
@@ -3648,8 +3978,8 @@ var segmentedControlSlotRecipe = defineSlotRecipe17({
 });
 
 // src/recipes/toast.ts
-import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
-var toastSlotRecipe = defineSlotRecipe18({
+import { defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
+var toastSlotRecipe = defineSlotRecipe19({
   className: "toast",
   jsx: ["MpToast", "mp-toast"],
   slots: ["root", "icon", "label"],
@@ -3658,13 +3988,12 @@ var toastSlotRecipe = defineSlotRecipe18({
       display: "flex",
       alignItems: "center",
       gap: "2",
-      width: "356px",
       border: "1.5px solid",
       borderRadius: "md",
       backgroundColor: "white",
       padding: "3",
       boxShadow: "lg",
-      zIndex: "9999",
+      zIndex: "1700",
       _nextTheme: {
         backgroundColor: "background.neutral"
       }
@@ -3713,8 +4042,8 @@ var toastSlotRecipe = defineSlotRecipe18({
 });
 
 // src/recipes/broadcast.ts
-import { defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
-var broadcastSlotRecipe = defineSlotRecipe19({
+import { defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
+var broadcastSlotRecipe = defineSlotRecipe20({
   className: "broadcast",
   jsx: ["MpBroadcast", "mp-broadcast"],
   slots: ["root", "container", "wrapper", "icon", "label", "textLink", "action", "close"],
@@ -3850,8 +4179,8 @@ var broadcastSlotRecipe = defineSlotRecipe19({
 });
 
 // src/recipes/rich-text-editor.ts
-import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
-var richTextEditorSlotRecipe = defineSlotRecipe20({
+import { defineRecipe as defineRecipe12, defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
+var richTextEditorSlotRecipe = defineSlotRecipe21({
   className: "rich-text-editor",
   jsx: ["MpRichTextEditor", "mp-rich-text-editor"],
   slots: ["root", "toolbar", "area"],
@@ -4013,8 +4342,8 @@ var RTEStyleProviderRecipe = defineRecipe12({
 });
 
 // src/recipes/date-picker.ts
-import { defineSlotRecipe as defineSlotRecipe21, defineRecipe as defineRecipe13 } from "@pandacss/dev";
-var datePickerSlotRecipe = defineSlotRecipe21({
+import { defineSlotRecipe as defineSlotRecipe22, defineRecipe as defineRecipe13 } from "@pandacss/dev";
+var datePickerSlotRecipe = defineSlotRecipe22({
   className: "datepicker",
   jsx: ["MpDatePicker", "mp-date-picker"],
   slots: ["root", "popoverContent"],
@@ -4048,7 +4377,7 @@ var calendarPanelRangeRecipe = defineRecipe13({
     gridTemplateColumns: "repeat(2, 1fr)"
   }
 });
-var timePanelSlotRecipe = defineSlotRecipe21({
+var timePanelSlotRecipe = defineSlotRecipe22({
   className: "timePanel",
   slots: ["root", "column"],
   jsx: ["TimePanel", "time-panel"],
@@ -4068,7 +4397,7 @@ var timePanelSlotRecipe = defineSlotRecipe21({
     }
   }
 });
-var tableDateSlotRecipe = defineSlotRecipe21({
+var tableDateSlotRecipe = defineSlotRecipe22({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
   slots: [
@@ -4097,7 +4426,7 @@ var tableDateSlotRecipe = defineSlotRecipe21({
     }
   }
 });
-var tableMonthSlotRecipe = defineSlotRecipe21({
+var tableMonthSlotRecipe = defineSlotRecipe22({
   className: "tableMonth",
   jsx: ["TableMonth", "table-month"],
   slots: ["headerRoot", "headerLabel", "monthItemRoot", "monthItemWrapper", "shortcutLabelWrapper"],
@@ -4118,7 +4447,7 @@ var tableMonthSlotRecipe = defineSlotRecipe21({
     }
   }
 });
-var tableYearSlotRecipe = defineSlotRecipe21({
+var tableYearSlotRecipe = defineSlotRecipe22({
   className: "tableYear",
   jsx: ["TableYear", "table-year"],
   slots: ["headerRoot", "headerLabel", "yearItemRoot", "yearItemWrapper", "shortcutLabelWrapper"],
@@ -4310,7 +4639,7 @@ var dateItemRecipe = defineRecipe13({
   },
   staticCss: ["*"]
 });
-var pinbarSlotRecipe = defineSlotRecipe21({
+var pinbarSlotRecipe = defineSlotRecipe22({
   className: "pinbar",
   slots: ["root", "pinbar"],
   base: {
@@ -4550,8 +4879,8 @@ var timeItemRecipe = defineRecipe13({
 });
 
 // src/recipes/carousel.ts
-import { defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
-var carouselSlotRecipe = defineSlotRecipe22({
+import { defineSlotRecipe as defineSlotRecipe23 } from "@pandacss/dev";
+var carouselSlotRecipe = defineSlotRecipe23({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
   slots: [
@@ -4604,8 +4933,8 @@ var carouselSlotRecipe = defineSlotRecipe22({
 });
 
 // src/recipes/chart.ts
-import { defineSlotRecipe as defineSlotRecipe23 } from "@pandacss/dev";
-var chartSlotRecipe = defineSlotRecipe23({
+import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
+var chartSlotRecipe = defineSlotRecipe24({
   className: "chart",
   jsx: ["MpChart", "mp-chart"],
   slots: [
@@ -4710,8 +5039,8 @@ var chartSlotRecipe = defineSlotRecipe23({
 });
 
 // src/recipes/autocomplete.ts
-import { defineSlotRecipe as defineSlotRecipe24 } from "@pandacss/dev";
-var autocompleteSlotRecipe = defineSlotRecipe24({
+import { defineSlotRecipe as defineSlotRecipe25 } from "@pandacss/dev";
+var autocompleteSlotRecipe = defineSlotRecipe25({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
@@ -4765,8 +5094,8 @@ var autocompleteSlotRecipe = defineSlotRecipe24({
 });
 
 // src/recipes/timeline.ts
-import { defineSlotRecipe as defineSlotRecipe25 } from "@pandacss/dev";
-var timelineSlotRecipe = defineSlotRecipe25({
+import { defineSlotRecipe as defineSlotRecipe26 } from "@pandacss/dev";
+var timelineSlotRecipe = defineSlotRecipe26({
   className: "timeline",
   jsx: [
     "MpTimeline",
@@ -4808,7 +5137,7 @@ var timelineSlotRecipe = defineSlotRecipe25({
     }
   }
 });
-var timelineDocumentSlotRecipe = defineSlotRecipe25({
+var timelineDocumentSlotRecipe = defineSlotRecipe26({
   className: "timelineDocument",
   jsx: ["MpTimelineDocument", "mp-timeline-document"],
   slots: ["root", "content", "title", "description", "fileSize"],
@@ -4866,7 +5195,7 @@ var timelineDocumentSlotRecipe = defineSlotRecipe25({
     icon: false
   }
 });
-var timelineLogSlotRecipe = defineSlotRecipe25({
+var timelineLogSlotRecipe = defineSlotRecipe26({
   className: "timelineLog",
   jsx: ["MpTimelineLog", "MpTimelineLogItem", "mp-timeline-log", "mp-timeline-log-item"],
   slots: ["root", "log", "logText", "logIcon", "content", "logItem"],
@@ -4898,7 +5227,7 @@ var timelineLogSlotRecipe = defineSlotRecipe25({
     }
   }
 });
-var timelineSeparatorSlotRecipe = defineSlotRecipe25({
+var timelineSeparatorSlotRecipe = defineSlotRecipe26({
   className: "timelineSeparetor",
   jsx: ["MpTimelineSeparator", "mp-timeline-separator"],
   slots: ["root", "topConnector", "bottomConnector"],
@@ -4930,12 +5259,15 @@ var timelineSeparatorSlotRecipe = defineSlotRecipe25({
         backgroundColor: "transparent"
       },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=last]": {
+          backgroundColor: "transparent"
+        }
       }
     }
   }
 });
-var timelineAccordionSlotRecipe = defineSlotRecipe25({
+var timelineAccordionSlotRecipe = defineSlotRecipe26({
   className: "timelineAccordion",
   jsx: ["MpTimelineAccordion", "mp-timeline-accordion"],
   slots: ["body", "separator", "icon", "topConnector", "bottomConnector", "title", "label"],
@@ -4973,7 +5305,10 @@ var timelineAccordionSlotRecipe = defineSlotRecipe25({
       },
       roundedTop: "full",
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=last]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     title: {
@@ -4993,8 +5328,8 @@ var timelineAccordionSlotRecipe = defineSlotRecipe25({
 });
 
 // src/recipes/banner.ts
-import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe26 } from "@pandacss/dev";
-var bannerSlotRecipe = defineSlotRecipe26({
+import { defineRecipe as defineRecipe14, defineSlotRecipe as defineSlotRecipe27 } from "@pandacss/dev";
+var bannerSlotRecipe = defineSlotRecipe27({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -5065,7 +5400,6 @@ var bannerTitleRecipe = defineRecipe14({
     lineHeight: "md",
     letterSpacing: "normal",
     color: "dark",
-    marginTop: "0.5",
     marginBottom: "1",
     _nextTheme: {
       color: "text.default"
@@ -5093,7 +5427,7 @@ var bannerDescriptionRecipe = defineRecipe14({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = defineSlotRecipe26({
+var bannerIconSlotRecipe = defineSlotRecipe27({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -5148,8 +5482,8 @@ var bannerCloseButtonRecipe = defineRecipe14({
 });
 
 // src/recipes/color-picker.ts
-import { defineSlotRecipe as defineSlotRecipe27 } from "@pandacss/dev";
-var colorPickerSlotRecipe = defineSlotRecipe27({
+import { defineSlotRecipe as defineSlotRecipe28 } from "@pandacss/dev";
+var colorPickerSlotRecipe = defineSlotRecipe28({
   className: "color-picker",
   jsx: ["MpColorPicker", "mp-color-picker"],
   slots: [
@@ -5322,8 +5656,8 @@ var colorPickerSlotRecipe = defineSlotRecipe27({
 });
 
 // src/recipes/slider.ts
-import { defineSlotRecipe as defineSlotRecipe28 } from "@pandacss/dev";
-var sliderSlotRecipe = defineSlotRecipe28({
+import { defineSlotRecipe as defineSlotRecipe29 } from "@pandacss/dev";
+var sliderSlotRecipe = defineSlotRecipe29({
   className: "slider",
   jsx: ["MpSlider", "mp-slider"],
   slots: [
@@ -5432,8 +5766,8 @@ var sliderSlotRecipe = defineSlotRecipe28({
 });
 
 // src/recipes/tour.ts
-import { defineSlotRecipe as defineSlotRecipe29 } from "@pandacss/dev";
-var tourSlotRecipe = defineSlotRecipe29({
+import { defineSlotRecipe as defineSlotRecipe30 } from "@pandacss/dev";
+var tourSlotRecipe = defineSlotRecipe30({
   className: "tour",
   jsx: ["MpTour", "mp-tour"],
   slots: ["root", "overlay", "panel"],
@@ -5532,7 +5866,8 @@ var slotRecipes = {
   tabListSlotRecipe,
   colorPickerSlotRecipe,
   sliderSlotRecipe,
-  tourSlotRecipe
+  tourSlotRecipe,
+  aireneButtonSlotRecipe
 };
 
 // src/text-styles.ts
@@ -5551,7 +5886,7 @@ var textStyles = defineTextStyles({
   },
   label: {
     sm: { value: { fontFamily: "var(--font-inter)", fontSize: "sm", lineHeight: "sm" } },
-    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "lg" } }
+    md: { value: { fontFamily: "var(--font-inter)", fontSize: "md", lineHeight: "md" } }
   },
   h3: {
     value: {
@@ -5600,6 +5935,7 @@ var colors = defineTokens2.colors({
   background: { value: "#F1F5F9" },
   overlay: { value: "rgba(22, 26, 32, 0.8)" },
   white: { value: "#FFFFFF" },
+  vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
   whiteAlpha: {
     50: { value: "rgba(255, 255, 255, 0.04)" },
     100: { value: "rgba(255, 255, 255, 0.06)" },
@@ -5947,6 +6283,7 @@ var colors2 = defineTokens13.colors({
   debug: { value: "red" },
   currentcolor: { value: "currentcolor" },
   white: { value: "#FFFFFF" },
+  vibrantPurple: { value: "linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%)" },
   dark: {
     "-100": {
       value: "#101214"