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

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev63 = require("@pandacss/dev");
+var import_dev64 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -40,7 +40,7 @@ var conditions = {
   extend: {
     disabled: "&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])",
     invalid: "&:is([aria-invalid=true], [data-invalid])",
-    active: "&:is(:active, [data-active], [data-active=true])",
+    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])",
@@ -105,6 +105,11 @@ var keyframes = (0, import_dev2.defineKeyframes)({
   },
   spin: {
     "100%": { transform: "rotate(1turn)" }
+  },
+  "border-shine": {
+    "0%": { backgroundPosition: "0% 20%" },
+    "50%": { backgroundPosition: "100% 50%" },
+    "100%": { backgroundPosition: "0% 100%" }
   }
 });
 
@@ -144,7 +149,7 @@ var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
       right: "0",
       paddingTop: "1",
       padding: "0",
-      transition: "all 250ms!",
+      transition: "opacity 250ms!",
       visibility: "hidden",
       opacity: "0",
       _groupHover: {
@@ -207,9 +212,9 @@ var tagSlotRecipe = (0, import_dev3.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"
           }
         }
       }
@@ -373,20 +378,20 @@ var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
     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!" }
       }
     }
   },
@@ -443,7 +448,7 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
       zIndex: "0"
     },
     excess: {
-      marginLeft: "2",
+      marginLeft: "1",
       color: "blue.400",
       backgroundColor: "blue.50",
       fontWeight: "semiBold",
@@ -462,16 +467,44 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   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" }
       }
     }
   },
@@ -479,9 +512,128 @@ var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   defaultVariants: {}
 });
 
-// src/recipes/button.ts
+// src/recipes/airene-button.ts
 var import_dev5 = require("@pandacss/dev");
-var buttonRecipe = (0, import_dev5.defineRecipe)({
+var aireneButtonSlotRecipe = (0, import_dev5.defineSlotRecipe)({
+  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: {}
+});
+
+// src/recipes/button.ts
+var import_dev6 = require("@pandacss/dev");
+var buttonRecipe = (0, import_dev6.defineRecipe)({
   className: "button",
   jsx: ["MpButton", "mp-button"],
   base: {
@@ -621,7 +773,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
           background: "red.700",
           borderColor: "red.700"
         },
-        _focus: {
+        _focusVisible: {
           borderColor: "red.400",
           boxShadow: "0 0 0 3px #FDECEE"
         },
@@ -640,7 +792,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
             background: "background.danger.bold.pressed",
             borderColor: "background.danger.bold.pressed"
           },
-          _focus: {
+          _focusVisible: {
             borderColor: "border.focused",
             boxShadow: "focus"
           },
@@ -649,6 +801,38 @@ var buttonRecipe = (0, import_dev5.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",
@@ -685,13 +869,28 @@ var buttonRecipe = (0, import_dev5.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: {
@@ -704,18 +903,38 @@ var buttonRecipe = (0, import_dev5.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"
+              }
+            }
           }
         }
       },
@@ -728,18 +947,38 @@ var buttonRecipe = (0, import_dev5.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"
+              }
+            }
           }
         }
       }
@@ -750,7 +989,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
       variant: ["textLink"],
       css: {
         borderRadius: "sm",
-        _focus: {
+        _focusVisible: {
           borderColor: "white",
           boxShadow: "focus",
           _nextTheme: {
@@ -767,9 +1006,9 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
       }
     },
     {
-      variant: ["primary", "secondary", "ghost"],
+      variant: ["primary", "secondary", "ghost", "tertiary"],
       css: {
-        _focus: {
+        _focusVisible: {
           borderColor: "blue.400",
           boxShadow: "focus",
           _nextTheme: {
@@ -780,7 +1019,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
       }
     },
     {
-      variant: ["primary", "secondary", "ghost", "danger"],
+      variant: ["primary", "secondary", "ghost", "danger", "tertiary"],
       css: {
         _disabled: {
           cursor: "not-allowed",
@@ -789,7 +1028,15 @@ var buttonRecipe = (0, import_dev5.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",
@@ -797,7 +1044,15 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
             borderColor: "background.disabled",
             _hover: {
               background: "background.disabled",
-              borderColor: "background.disabled"
+              borderColor: "background.disabled",
+              _hasIcon: {
+                background: "transparent",
+                borderColor: "transparent"
+              }
+            },
+            _hasIcon: {
+              background: "transparent",
+              borderColor: "transparent"
             }
           }
         }
@@ -811,7 +1066,7 @@ var buttonRecipe = (0, import_dev5.defineRecipe)({
   // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
-var buttonGroupRecipe = (0, import_dev5.defineRecipe)({
+var buttonGroupRecipe = (0, import_dev6.defineRecipe)({
   className: "pixel-button-group",
   jsx: ["MpButtonGroup"],
   base: {
@@ -836,8 +1091,8 @@ var buttonGroupRecipe = (0, import_dev5.defineRecipe)({
 });
 
 // src/recipes/input.ts
-var import_dev6 = require("@pandacss/dev");
-var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
+var import_dev7 = require("@pandacss/dev");
+var inputSlotRecipe = (0, import_dev7.defineSlotRecipe)({
   className: "input",
   jsx: ["MpInput", "mp-input"],
   slots: ["root", "control", "clear"],
@@ -873,7 +1128,7 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       paddingInline: "3",
       appearance: "none",
       caretColor: "blue.500",
-      transition: "all 250ms",
+      transition: "border-color 250ms, background-color 250ms",
       _isFullWidth: {
         width: "full"
       },
@@ -1018,7 +1273,7 @@ var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
   // TODO: Check why this recipe need to generate statically
   staticCss: ["*"]
 });
-var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
+var inputGroupSlotRecipe = (0, import_dev7.defineSlotRecipe)({
   className: "input-group",
   jsx: ["MpInputGroup", "mp-input-group"],
   slots: ["root"],
@@ -1030,7 +1285,7 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       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]": {
@@ -1048,14 +1303,14 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
       },
       "&[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)"
           }
         }
       },
@@ -1089,7 +1344,7 @@ var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
+var inputAddonSlotRecipe = (0, import_dev7.defineSlotRecipe)({
   className: "input-addon",
   jsx: ["MpInputAddon", "mp-input-addon"],
   slots: ["root"],
@@ -1116,16 +1371,20 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
     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"
         }
       }
     },
@@ -1135,8 +1394,16 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
           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"
+            }
           }
         }
       },
@@ -1145,8 +1412,16 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
           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"
+            }
           }
         }
       }
@@ -1162,8 +1437,8 @@ var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
 });
 
 // src/recipes/select.ts
-var import_dev7 = require("@pandacss/dev");
-var selectSlotRecipe = (0, import_dev7.defineSlotRecipe)({
+var import_dev8 = require("@pandacss/dev");
+var selectSlotRecipe = (0, import_dev8.defineSlotRecipe)({
   className: "select",
   jsx: ["MpSelect", "mp-select"],
   slots: ["root", "control", "clear", "arrow"],
@@ -1317,13 +1592,12 @@ var selectSlotRecipe = (0, import_dev7.defineSlotRecipe)({
 });
 
 // src/recipes/text.ts
-var import_dev8 = require("@pandacss/dev");
-var textRecipe = (0, import_dev8.defineRecipe)({
+var import_dev9 = require("@pandacss/dev");
+var textRecipe = (0, import_dev9.defineRecipe)({
   className: "text",
   jsx: ["MpText", "mp-text"],
   base: {
     color: "var(--mp-text-color)",
-    fontVariantNumeric: "lining-nums tabular-nums",
     "&[data-text-strike=true]": {
       textDecoration: "line-through"
     },
@@ -1375,8 +1649,8 @@ var textRecipe = (0, import_dev8.defineRecipe)({
 });
 
 // src/recipes/icon.ts
-var import_dev9 = require("@pandacss/dev");
-var iconRecipe = (0, import_dev9.defineRecipe)({
+var import_dev10 = require("@pandacss/dev");
+var iconRecipe = (0, import_dev10.defineRecipe)({
   className: "icon",
   jsx: ["MpIcon", "mp-icon"],
   base: {
@@ -1387,7 +1661,9 @@ var iconRecipe = (0, import_dev9.defineRecipe)({
     flexShrink: 0,
     "&:not(:root)": {
       overflow: "hidden"
-    }
+    },
+    width: "var(--mp-icon-size)",
+    height: "var(--mp-icon-size)"
   },
   variants: {
     size: {
@@ -1409,8 +1685,8 @@ var iconRecipe = (0, import_dev9.defineRecipe)({
 });
 
 // src/recipes/spinner.ts
-var import_dev10 = require("@pandacss/dev");
-var spinnerRecipe = (0, import_dev10.defineRecipe)({
+var import_dev11 = require("@pandacss/dev");
+var spinnerRecipe = (0, import_dev11.defineRecipe)({
   className: "spinner",
   jsx: ["MpSpinner", "mp-spinner"],
   base: {
@@ -1435,10 +1711,10 @@ var spinnerRecipe = (0, import_dev10.defineRecipe)({
 });
 
 // src/recipes/accordion.ts
-var import_dev11 = require("@pandacss/dev");
-var accordionSlotRecipe = (0, import_dev11.defineSlotRecipe)({
+var import_dev12 = require("@pandacss/dev");
+var accordionSlotRecipe = (0, import_dev12.defineSlotRecipe)({
   className: "accordion",
-  slots: ["header", "item", "panel"],
+  slots: ["header", "headerTitle", "headerDescription", "item", "panel"],
   jsx: [
     "MpAccordionHeader",
     "MpAccordionItem",
@@ -1449,35 +1725,52 @@ var accordionSlotRecipe = (0, import_dev11.defineSlotRecipe)({
   ],
   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: {
@@ -1492,16 +1785,39 @@ var accordionSlotRecipe = (0, import_dev11.defineSlotRecipe)({
           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
-var import_dev12 = require("@pandacss/dev");
-var popoverContentRecipe = (0, import_dev12.defineRecipe)({
+var import_dev13 = require("@pandacss/dev");
+var popoverContentRecipe = (0, import_dev13.defineRecipe)({
   className: "popover",
   jsx: ["MpPopover", "mp-popover"],
   base: {},
@@ -1537,7 +1853,7 @@ var popoverContentRecipe = (0, import_dev12.defineRecipe)({
     isUnstyled: false
   }
 });
-var popoverListRecipe = (0, import_dev12.defineRecipe)({
+var popoverListRecipe = (0, import_dev13.defineRecipe)({
   className: "popover-list",
   jsx: ["MpPopoverList", "mp-popover-list"],
   base: {
@@ -1548,7 +1864,7 @@ var popoverListRecipe = (0, import_dev12.defineRecipe)({
     flexDirection: "column"
   }
 });
-var popoverListItemRecipe = (0, import_dev12.defineRecipe)({
+var popoverListItemRecipe = (0, import_dev13.defineRecipe)({
   className: "popover-list-item",
   jsx: ["MpPopoverListItem", "mp-popover-list-item"],
   base: {
@@ -1598,8 +1914,8 @@ var popoverListItemRecipe = (0, import_dev12.defineRecipe)({
 });
 
 // src/recipes/badge.ts
-var import_dev13 = require("@pandacss/dev");
-var badgeRecipe = (0, import_dev13.defineRecipe)({
+var import_dev14 = require("@pandacss/dev");
+var badgeRecipe = (0, import_dev14.defineRecipe)({
   className: "badge",
   jsx: ["MpBadge", "mp-badge"],
   base: {
@@ -1882,8 +2198,8 @@ var badgeRecipe = (0, import_dev13.defineRecipe)({
 });
 
 // src/recipes/textarea.ts
-var import_dev14 = require("@pandacss/dev");
-var textareaRecipe = (0, import_dev14.defineRecipe)({
+var import_dev15 = require("@pandacss/dev");
+var textareaRecipe = (0, import_dev15.defineRecipe)({
   className: "textarea",
   jsx: ["MpTextarea", "mp-textarea"],
   base: {
@@ -1893,8 +2209,8 @@ var textareaRecipe = (0, import_dev14.defineRecipe)({
 });
 
 // src/recipes/tooltip.ts
-var import_dev15 = require("@pandacss/dev");
-var tooltipRecipe = (0, import_dev15.defineRecipe)({
+var import_dev16 = require("@pandacss/dev");
+var tooltipRecipe = (0, import_dev16.defineRecipe)({
   className: "tooltip",
   jsx: ["MpTooltip", "mp-tooltip"],
   base: {
@@ -1904,6 +2220,7 @@ var tooltipRecipe = (0, import_dev15.defineRecipe)({
     fontWeight: "regular",
     pointerEvents: "none",
     fontSize: "sm",
+    lineHeight: "20px",
     shadow: "md",
     maxW: "300px",
     zIndex: "tooltip",
@@ -1920,8 +2237,8 @@ var tooltipRecipe = (0, import_dev15.defineRecipe)({
 });
 
 // src/recipes/tabs.ts
-var import_dev16 = require("@pandacss/dev");
-var tabListSlotRecipe = (0, import_dev16.defineSlotRecipe)({
+var import_dev17 = require("@pandacss/dev");
+var tabListSlotRecipe = (0, import_dev17.defineSlotRecipe)({
   className: "tab-list",
   jsx: ["MpTabList", "mp-tab-list"],
   slots: ["root", "list"],
@@ -1960,7 +2277,7 @@ var tabListSlotRecipe = (0, import_dev16.defineSlotRecipe)({
     }
   }
 });
-var tabRecipe = (0, import_dev16.defineRecipe)({
+var tabRecipe = (0, import_dev17.defineRecipe)({
   className: "tab",
   jsx: ["MpTab", "mp-tab"],
   base: {
@@ -1982,7 +2299,7 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
       opacity: 0.4,
       cursor: "not-allowed"
     },
-    _focus: {
+    _focusVisible: {
       shadow: "0 0 0 2px #E0EEFF",
       borderRadius: "sm"
     },
@@ -1991,7 +2308,7 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
       _hover: {
         color: "text.default"
       },
-      _focus: {
+      _focusVisible: {
         shadow: "0 0 0 2px var(--mp-colors-border-focused)"
       }
     }
@@ -2071,7 +2388,7 @@ var tabRecipe = (0, import_dev16.defineRecipe)({
     isSelected: false
   }
 });
-var tabSelectedBorderRecipe = (0, import_dev16.defineRecipe)({
+var tabSelectedBorderRecipe = (0, import_dev17.defineRecipe)({
   className: "tab-selected-border",
   jsx: ["MpTabSelectedBorder", "mp-tab-selected-border"],
   base: {
@@ -2168,8 +2485,8 @@ var tabSelectedBorderRecipe = (0, import_dev16.defineRecipe)({
 });
 
 // src/recipes/checkbox.ts
-var import_dev17 = require("@pandacss/dev");
-var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
+var import_dev18 = require("@pandacss/dev");
+var checkboxSlotRecipe = (0, import_dev18.defineSlotRecipe)({
   className: "checkbox",
   jsx: ["MpCheckbox", "mp-checkbox"],
   slots: ["root", "control", "label"],
@@ -2190,12 +2507,14 @@ var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
         }
       },
       "& .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}"
+            }
           }
         }
       },
@@ -2314,8 +2633,8 @@ var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
 });
 
 // src/recipes/radio.ts
-var import_dev18 = require("@pandacss/dev");
-var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
+var import_dev19 = require("@pandacss/dev");
+var radioSlotRecipe = (0, import_dev19.defineSlotRecipe)({
   className: "radio",
   jsx: ["MpRadio", "mp-radio"],
   slots: ["root", "control", "label"],
@@ -2336,12 +2655,14 @@ var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
         }
       },
       "& .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}"
+            }
           }
         }
       },
@@ -2445,8 +2766,8 @@ var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
 });
 
 // src/recipes/shared.ts
-var import_dev19 = require("@pandacss/dev");
-var sharedSlotRecipe = (0, import_dev19.defineSlotRecipe)({
+var import_dev20 = require("@pandacss/dev");
+var sharedSlotRecipe = (0, import_dev20.defineSlotRecipe)({
   className: "shared",
   jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
   slots: ["hidden"],
@@ -2463,8 +2784,8 @@ var sharedSlotRecipe = (0, import_dev19.defineSlotRecipe)({
 });
 
 // src/recipes/toggle.ts
-var import_dev20 = require("@pandacss/dev");
-var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
+var import_dev21 = require("@pandacss/dev");
+var toggleSlotRecipe = (0, import_dev21.defineSlotRecipe)({
   className: "toggle",
   jsx: ["MpToggle", "mp-toggle"],
   slots: ["root", "control", "label"],
@@ -2485,12 +2806,14 @@ var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
         }
       },
       "& .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}"
+            }
           }
         }
       },
@@ -2606,8 +2929,8 @@ var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
 });
 
 // src/recipes/table.ts
-var import_dev21 = require("@pandacss/dev");
-var tableRecipe = (0, import_dev21.defineRecipe)({
+var import_dev22 = require("@pandacss/dev");
+var tableRecipe = (0, import_dev22.defineRecipe)({
   className: "table",
   jsx: ["MpTable", "mp-table"],
   base: {
@@ -2688,7 +3011,7 @@ var tableRecipe = (0, import_dev21.defineRecipe)({
     }
   }
 });
-var tableContainerRecipe = (0, import_dev21.defineRecipe)({
+var tableContainerRecipe = (0, import_dev22.defineRecipe)({
   className: "table-container",
   jsx: ["MpTableContainer", "mp-table-container"],
   base: {
@@ -2732,8 +3055,8 @@ var tableContainerRecipe = (0, import_dev21.defineRecipe)({
 });
 
 // src/recipes/progress.ts
-var import_dev22 = require("@pandacss/dev");
-var progressSlotRecipe = (0, import_dev22.defineSlotRecipe)({
+var import_dev23 = require("@pandacss/dev");
+var progressSlotRecipe = (0, import_dev23.defineSlotRecipe)({
   className: "progress",
   jsx: ["MpProgress", "mp-progress"],
   slots: ["root", "linear", "circularBase", "circularTrack"],
@@ -2812,8 +3135,8 @@ var progressSlotRecipe = (0, import_dev22.defineSlotRecipe)({
 });
 
 // src/recipes/form-control.ts
-var import_dev23 = require("@pandacss/dev");
-var formControlSlotRecipe = (0, import_dev23.defineSlotRecipe)({
+var import_dev24 = require("@pandacss/dev");
+var formControlSlotRecipe = (0, import_dev24.defineSlotRecipe)({
   className: "form-control",
   jsx: ["MpFormControl", "mp-form-control"],
   slots: ["root", "label", "required", "helpText", "errorMessage"],
@@ -2860,8 +3183,8 @@ var formControlSlotRecipe = (0, import_dev23.defineSlotRecipe)({
 });
 
 // src/recipes/input-tag.ts
-var import_dev24 = require("@pandacss/dev");
-var inputTagSlotRecipe = (0, import_dev24.defineSlotRecipe)({
+var import_dev25 = require("@pandacss/dev");
+var inputTagSlotRecipe = (0, import_dev25.defineSlotRecipe)({
   className: "input-tag",
   jsx: ["MpInputTag", "mp-input-tag"],
   slots: [
@@ -3017,8 +3340,8 @@ var inputTagSlotRecipe = (0, import_dev24.defineSlotRecipe)({
 });
 
 // src/recipes/divider.ts
-var import_dev25 = require("@pandacss/dev");
-var dividerRecipe = (0, import_dev25.defineRecipe)({
+var import_dev26 = require("@pandacss/dev");
+var dividerRecipe = (0, import_dev26.defineRecipe)({
   className: "divider",
   jsx: ["MpDivider", "mp-divider"],
   base: {
@@ -3059,8 +3382,8 @@ var dividerRecipe = (0, import_dev25.defineRecipe)({
 });
 
 // src/recipes/modal.ts
-var import_dev26 = require("@pandacss/dev");
-var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
+var import_dev27 = require("@pandacss/dev");
+var modalSlotRecipe = (0, import_dev27.defineSlotRecipe)({
   className: "modal",
   description: "The styles for the Modal component",
   jsx: ["MpModal", "mp-modal"],
@@ -3113,7 +3436,10 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
       _nextTheme: {
         background: "background.stage",
         borderColor: "border.bold",
-        color: "text.default"
+        color: "text.default",
+        '&[data-modal-type="drawer"]': {
+          borderColor: "border.default"
+        }
       }
     },
     header: {
@@ -3131,6 +3457,10 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
         color: "text.default",
         background: "background.neutral.subtle",
         borderBottomColor: "border.default"
+      },
+      '&[data-modal-presentation="drawer"]': {
+        borderTopLeftRadius: "none",
+        borderTopRightRadius: "none"
       }
     },
     closeButton: {
@@ -3187,8 +3517,8 @@ var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
 });
 
 // src/recipes/upload.ts
-var import_dev27 = require("@pandacss/dev");
-var uploadSlotRecipe = (0, import_dev27.defineSlotRecipe)({
+var import_dev28 = require("@pandacss/dev");
+var uploadSlotRecipe = (0, import_dev28.defineSlotRecipe)({
   className: "upload",
   jsx: ["MpUpload", "mp-upload"],
   slots: ["root", "resetButton"],
@@ -3273,7 +3603,7 @@ var uploadSlotRecipe = (0, import_dev27.defineSlotRecipe)({
     }
   }
 });
-var uploadListSlotRecipe = (0, import_dev27.defineSlotRecipe)({
+var uploadListSlotRecipe = (0, import_dev28.defineSlotRecipe)({
   className: "upload-list",
   jsx: ["MpUploadList", "mp-upload-list"],
   slots: ["root", "titleWrapper", "actionWrapper"],
@@ -3316,8 +3646,8 @@ var uploadListSlotRecipe = (0, import_dev27.defineSlotRecipe)({
 });
 
 // src/recipes/dropzone.ts
-var import_dev28 = require("@pandacss/dev");
-var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
+var import_dev29 = require("@pandacss/dev");
+var dropzoneSlotRecipe = (0, import_dev29.defineSlotRecipe)({
   className: "dropzone",
   jsx: ["MpDropzone", "mp-dropzone"],
   slots: [
@@ -3386,7 +3716,7 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
         boxShadow: "focus",
         borderColor: "blue.400",
         _nextTheme: {
-          boxShadow: "focus",
+          boxShadow: "none",
           borderColor: "border.focused"
         },
         _hover: {
@@ -3546,8 +3876,8 @@ var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
 });
 
 // src/recipes/segmented-control.ts
-var import_dev29 = require("@pandacss/dev");
-var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+var import_dev30 = require("@pandacss/dev");
+var segmentedControlSlotRecipe = (0, import_dev30.defineSlotRecipe)({
   className: "segmented-control",
   jsx: ["MpSegmentedControl", "mp-segmented-control"],
   slots: ["root", "item", "hidden", "control", "label", "icon"],
@@ -3633,7 +3963,7 @@ var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
       "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: {
@@ -3674,8 +4004,8 @@ var segmentedControlSlotRecipe = (0, import_dev29.defineSlotRecipe)({
 });
 
 // src/recipes/toast.ts
-var import_dev30 = require("@pandacss/dev");
-var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
+var import_dev31 = require("@pandacss/dev");
+var toastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
   className: "toast",
   jsx: ["MpToast", "mp-toast"],
   slots: ["root", "icon", "label"],
@@ -3684,13 +4014,12 @@ var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
       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"
       }
@@ -3739,8 +4068,8 @@ var toastSlotRecipe = (0, import_dev30.defineSlotRecipe)({
 });
 
 // src/recipes/broadcast.ts
-var import_dev31 = require("@pandacss/dev");
-var broadcastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
+var import_dev32 = require("@pandacss/dev");
+var broadcastSlotRecipe = (0, import_dev32.defineSlotRecipe)({
   className: "broadcast",
   jsx: ["MpBroadcast", "mp-broadcast"],
   slots: ["root", "container", "wrapper", "icon", "label", "textLink", "action", "close"],
@@ -3876,8 +4205,8 @@ var broadcastSlotRecipe = (0, import_dev31.defineSlotRecipe)({
 });
 
 // src/recipes/rich-text-editor.ts
-var import_dev32 = require("@pandacss/dev");
-var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
+var import_dev33 = require("@pandacss/dev");
+var richTextEditorSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   className: "rich-text-editor",
   jsx: ["MpRichTextEditor", "mp-rich-text-editor"],
   slots: ["root", "toolbar", "area"],
@@ -3982,7 +4311,7 @@ var richTextEditorSlotRecipe = (0, import_dev32.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
+var RTEStyleProviderRecipe = (0, import_dev33.defineRecipe)({
   className: "typography-style-provider",
   jsx: ["MpTypographyStyleProvider", "mp-typography-style-provider"],
   base: {
@@ -4039,8 +4368,8 @@ var RTEStyleProviderRecipe = (0, import_dev32.defineRecipe)({
 });
 
 // src/recipes/date-picker.ts
-var import_dev33 = require("@pandacss/dev");
-var datePickerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var import_dev34 = require("@pandacss/dev");
+var datePickerSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "datepicker",
   jsx: ["MpDatePicker", "mp-date-picker"],
   slots: ["root", "popoverContent"],
@@ -4067,14 +4396,14 @@ var datePickerSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var calendarPanelRangeRecipe = (0, import_dev33.defineRecipe)({
+var calendarPanelRangeRecipe = (0, import_dev34.defineRecipe)({
   className: "calendarPanelRange",
   base: {
     display: "grid",
     gridTemplateColumns: "repeat(2, 1fr)"
   }
 });
-var timePanelSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var timePanelSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "timePanel",
   slots: ["root", "column"],
   jsx: ["TimePanel", "time-panel"],
@@ -4094,7 +4423,7 @@ var timePanelSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var tableDateSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var tableDateSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
   slots: [
@@ -4123,7 +4452,7 @@ var tableDateSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var tableMonthSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var tableMonthSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "tableMonth",
   jsx: ["TableMonth", "table-month"],
   slots: ["headerRoot", "headerLabel", "monthItemRoot", "monthItemWrapper", "shortcutLabelWrapper"],
@@ -4144,7 +4473,7 @@ var tableMonthSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var tableYearSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var tableYearSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "tableYear",
   jsx: ["TableYear", "table-year"],
   slots: ["headerRoot", "headerLabel", "yearItemRoot", "yearItemWrapper", "shortcutLabelWrapper"],
@@ -4164,7 +4493,7 @@ var tableYearSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var dayItemRecipe = (0, import_dev33.defineRecipe)({
+var dayItemRecipe = (0, import_dev34.defineRecipe)({
   className: "day",
   jsx: ["Day", "day"],
   base: {
@@ -4186,7 +4515,7 @@ var dayItemRecipe = (0, import_dev33.defineRecipe)({
     }
   }
 });
-var dateItemRecipe = (0, import_dev33.defineRecipe)({
+var dateItemRecipe = (0, import_dev34.defineRecipe)({
   className: "dateItem",
   jsx: ["DateItem", "date-item", "Date", "date"],
   base: {
@@ -4336,7 +4665,7 @@ var dateItemRecipe = (0, import_dev33.defineRecipe)({
   },
   staticCss: ["*"]
 });
-var pinbarSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+var pinbarSlotRecipe = (0, import_dev34.defineSlotRecipe)({
   className: "pinbar",
   slots: ["root", "pinbar"],
   base: {
@@ -4355,7 +4684,7 @@ var pinbarSlotRecipe = (0, import_dev33.defineSlotRecipe)({
     }
   }
 });
-var monthItemRecipe = (0, import_dev33.defineRecipe)({
+var monthItemRecipe = (0, import_dev34.defineRecipe)({
   className: "monthItem",
   jsx: ["MonthItem", "month-item"],
   base: {
@@ -4434,7 +4763,7 @@ var monthItemRecipe = (0, import_dev33.defineRecipe)({
   },
   staticCss: ["*"]
 });
-var yearItemRecipe = (0, import_dev33.defineRecipe)({
+var yearItemRecipe = (0, import_dev34.defineRecipe)({
   className: "yearItem",
   jsx: ["YearItem", "year-item"],
   base: {
@@ -4513,7 +4842,7 @@ var yearItemRecipe = (0, import_dev33.defineRecipe)({
   },
   staticCss: ["*"]
 });
-var timeItemRecipe = (0, import_dev33.defineRecipe)({
+var timeItemRecipe = (0, import_dev34.defineRecipe)({
   className: "timeItem",
   jsx: ["TimeItem", "time-item"],
   base: {
@@ -4576,8 +4905,8 @@ var timeItemRecipe = (0, import_dev33.defineRecipe)({
 });
 
 // src/recipes/carousel.ts
-var import_dev34 = require("@pandacss/dev");
-var carouselSlotRecipe = (0, import_dev34.defineSlotRecipe)({
+var import_dev35 = require("@pandacss/dev");
+var carouselSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   className: "carousel",
   jsx: ["MpCarousel", "mp-carousel"],
   slots: [
@@ -4630,8 +4959,8 @@ var carouselSlotRecipe = (0, import_dev34.defineSlotRecipe)({
 });
 
 // src/recipes/chart.ts
-var import_dev35 = require("@pandacss/dev");
-var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
+var import_dev36 = require("@pandacss/dev");
+var chartSlotRecipe = (0, import_dev36.defineSlotRecipe)({
   className: "chart",
   jsx: ["MpChart", "mp-chart"],
   slots: [
@@ -4736,8 +5065,8 @@ var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
 });
 
 // src/recipes/autocomplete.ts
-var import_dev36 = require("@pandacss/dev");
-var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
+var import_dev37 = require("@pandacss/dev");
+var autocompleteSlotRecipe = (0, import_dev37.defineSlotRecipe)({
   className: "autocomplete",
   jsx: ["MpAutocomplete", "mp-autocomplete"],
   slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading", "input"],
@@ -4791,8 +5120,8 @@ var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
 });
 
 // src/recipes/timeline.ts
-var import_dev37 = require("@pandacss/dev");
-var timelineSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+var import_dev38 = require("@pandacss/dev");
+var timelineSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "timeline",
   jsx: [
     "MpTimeline",
@@ -4834,7 +5163,7 @@ var timelineSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     }
   }
 });
-var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+var timelineDocumentSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "timelineDocument",
   jsx: ["MpTimelineDocument", "mp-timeline-document"],
   slots: ["root", "content", "title", "description", "fileSize"],
@@ -4892,7 +5221,7 @@ var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     icon: false
   }
 });
-var timelineLogSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+var timelineLogSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "timelineLog",
   jsx: ["MpTimelineLog", "MpTimelineLogItem", "mp-timeline-log", "mp-timeline-log-item"],
   slots: ["root", "log", "logText", "logIcon", "content", "logItem"],
@@ -4924,7 +5253,7 @@ var timelineLogSlotRecipe = (0, import_dev37.defineSlotRecipe)({
     }
   }
 });
-var timelineSeparatorSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+var timelineSeparatorSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "timelineSeparetor",
   jsx: ["MpTimelineSeparator", "mp-timeline-separator"],
   slots: ["root", "topConnector", "bottomConnector"],
@@ -4956,12 +5285,15 @@ var timelineSeparatorSlotRecipe = (0, import_dev37.defineSlotRecipe)({
         backgroundColor: "transparent"
       },
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=last]": {
+          backgroundColor: "transparent"
+        }
       }
     }
   }
 });
-var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+var timelineAccordionSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "timelineAccordion",
   jsx: ["MpTimelineAccordion", "mp-timeline-accordion"],
   slots: ["body", "separator", "icon", "topConnector", "bottomConnector", "title", "label"],
@@ -4999,7 +5331,10 @@ var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
       },
       roundedTop: "full",
       _nextTheme: {
-        backgroundColor: "border.default"
+        backgroundColor: "border.default",
+        "&[data-position=last]": {
+          backgroundColor: "transparent"
+        }
       }
     },
     title: {
@@ -5019,8 +5354,8 @@ var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
 });
 
 // src/recipes/banner.ts
-var import_dev38 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev38.defineSlotRecipe)({
+var import_dev39 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -5081,7 +5416,7 @@ var bannerSlotRecipe = (0, import_dev38.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev38.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev39.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -5091,7 +5426,6 @@ var bannerTitleRecipe = (0, import_dev38.defineRecipe)({
     lineHeight: "md",
     letterSpacing: "normal",
     color: "dark",
-    marginTop: "0.5",
     marginBottom: "1",
     _nextTheme: {
       color: "text.default"
@@ -5101,7 +5435,7 @@ var bannerTitleRecipe = (0, import_dev38.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev38.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev39.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -5119,7 +5453,7 @@ var bannerDescriptionRecipe = (0, import_dev38.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev38.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev39.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -5142,7 +5476,7 @@ var bannerIconSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev38.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev39.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -5154,7 +5488,7 @@ var bannerLinkRecipe = (0, import_dev38.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev38.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev39.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -5174,8 +5508,8 @@ var bannerCloseButtonRecipe = (0, import_dev38.defineRecipe)({
 });
 
 // src/recipes/color-picker.ts
-var import_dev39 = require("@pandacss/dev");
-var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
+var import_dev40 = require("@pandacss/dev");
+var colorPickerSlotRecipe = (0, import_dev40.defineSlotRecipe)({
   className: "color-picker",
   jsx: ["MpColorPicker", "mp-color-picker"],
   slots: [
@@ -5348,8 +5682,8 @@ var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
 });
 
 // src/recipes/slider.ts
-var import_dev40 = require("@pandacss/dev");
-var sliderSlotRecipe = (0, import_dev40.defineSlotRecipe)({
+var import_dev41 = require("@pandacss/dev");
+var sliderSlotRecipe = (0, import_dev41.defineSlotRecipe)({
   className: "slider",
   jsx: ["MpSlider", "mp-slider"],
   slots: [
@@ -5458,8 +5792,8 @@ var sliderSlotRecipe = (0, import_dev40.defineSlotRecipe)({
 });
 
 // src/recipes/tour.ts
-var import_dev41 = require("@pandacss/dev");
-var tourSlotRecipe = (0, import_dev41.defineSlotRecipe)({
+var import_dev42 = require("@pandacss/dev");
+var tourSlotRecipe = (0, import_dev42.defineSlotRecipe)({
   className: "tour",
   jsx: ["MpTour", "mp-tour"],
   slots: ["root", "overlay", "panel"],
@@ -5558,12 +5892,13 @@ var slotRecipes = {
   tabListSlotRecipe,
   colorPickerSlotRecipe,
   sliderSlotRecipe,
-  tourSlotRecipe
+  tourSlotRecipe,
+  aireneButtonSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev42 = require("@pandacss/dev");
-var textStyles = (0, import_dev42.defineTextStyles)({
+var import_dev43 = require("@pandacss/dev");
+var textStyles = (0, import_dev43.defineTextStyles)({
   overline: {
     value: {
       fontFamily: "var(--font-inter)",
@@ -5577,7 +5912,7 @@ var textStyles = (0, import_dev42.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: {
@@ -5606,11 +5941,11 @@ var textStyles = (0, import_dev42.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev53 = require("@pandacss/dev");
+var import_dev54 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev43 = require("@pandacss/dev");
-var borderWidths = import_dev43.defineTokens.borderWidths({
+var import_dev44 = require("@pandacss/dev");
+var borderWidths = import_dev44.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -5618,14 +5953,15 @@ var borderWidths = import_dev43.defineTokens.borderWidths({
 });
 
 // src/tokens/colors.ts
-var import_dev44 = require("@pandacss/dev");
-var colors = import_dev44.defineTokens.colors({
+var import_dev45 = require("@pandacss/dev");
+var colors = import_dev45.defineTokens.colors({
   debug: { value: "blue" },
   currentcolor: { value: "currentcolor" },
   dark: { value: "#232933" },
   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)" },
@@ -5760,16 +6096,16 @@ var colors = import_dev44.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev45 = require("@pandacss/dev");
-var durations = import_dev45.defineTokens.durations({
+var import_dev46 = require("@pandacss/dev");
+var durations = import_dev46.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev46 = require("@pandacss/dev");
-var opacity = import_dev46.defineTokens.opacity({
+var import_dev47 = require("@pandacss/dev");
+var opacity = import_dev47.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -5777,8 +6113,8 @@ var opacity = import_dev46.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev47 = require("@pandacss/dev");
-var radii = import_dev47.defineTokens.radii({
+var import_dev48 = require("@pandacss/dev");
+var radii = import_dev48.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem", description: "2px" },
   sm: { value: "0.25rem", description: "4px" },
@@ -5789,8 +6125,8 @@ var radii = import_dev47.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev48 = require("@pandacss/dev");
-var shadows = import_dev48.defineTokens.shadows({
+var import_dev49 = require("@pandacss/dev");
+var shadows = import_dev49.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -5830,8 +6166,8 @@ var shadows = import_dev48.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev49 = require("@pandacss/dev");
-var sizes = import_dev49.defineTokens.sizes({
+var import_dev50 = require("@pandacss/dev");
+var sizes = import_dev50.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -5860,8 +6196,8 @@ var sizes = import_dev49.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev50 = require("@pandacss/dev");
-var spacing = import_dev50.defineTokens.spacing({
+var import_dev51 = require("@pandacss/dev");
+var spacing = import_dev51.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -5882,8 +6218,8 @@ var spacing = import_dev50.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev51 = require("@pandacss/dev");
-var zIndex = import_dev51.defineTokens.zIndex({
+var import_dev52 = require("@pandacss/dev");
+var zIndex = import_dev52.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -5895,8 +6231,8 @@ var zIndex = import_dev51.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev52 = require("@pandacss/dev");
-var fonts = import_dev52.defineTokens.fonts({
+var import_dev53 = require("@pandacss/dev");
+var fonts = import_dev53.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -5904,7 +6240,7 @@ var fonts = import_dev52.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev52.defineTokens.fontSizes({
+var fontSizes = import_dev53.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -5912,12 +6248,12 @@ var fontSizes = import_dev52.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev52.defineTokens.fontWeights({
+var fontWeights = import_dev53.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev52.defineTokens.lineHeights({
+var lineHeights = import_dev53.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.4 },
@@ -5926,7 +6262,7 @@ var lineHeights = import_dev52.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev52.defineTokens.letterSpacings({
+var letterSpacings = import_dev53.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -5936,7 +6272,7 @@ var letterSpacings = import_dev52.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev53.defineTokens)({
+var tokens = (0, import_dev54.defineTokens)({
   borderWidths,
   colors,
   durations,
@@ -5954,11 +6290,11 @@ var tokens = (0, import_dev53.defineTokens)({
 });
 
 // src/tokens-next/index.ts
-var import_dev59 = require("@pandacss/dev");
+var import_dev60 = require("@pandacss/dev");
 
 // src/tokens-next/borders.ts
-var import_dev54 = require("@pandacss/dev");
-var borderWidths2 = import_dev54.defineTokens.borderWidths({
+var import_dev55 = require("@pandacss/dev");
+var borderWidths2 = import_dev55.defineTokens.borderWidths({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -5968,11 +6304,12 @@ var borderWidths2 = import_dev54.defineTokens.borderWidths({
 });
 
 // src/tokens-next/colors.ts
-var import_dev55 = require("@pandacss/dev");
-var colors2 = import_dev55.defineTokens.colors({
+var import_dev56 = require("@pandacss/dev");
+var colors2 = import_dev56.defineTokens.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"
@@ -6140,8 +6477,8 @@ var colors2 = import_dev55.defineTokens.colors({
 });
 
 // src/tokens-next/radii.ts
-var import_dev56 = require("@pandacss/dev");
-var radii2 = import_dev56.defineTokens.radii({
+var import_dev57 = require("@pandacss/dev");
+var radii2 = import_dev57.defineTokens.radii({
   none: { value: "0" },
   sm: { value: "0.25rem", description: "4px" },
   md: { value: "0.375rem", description: "6px" },
@@ -6151,8 +6488,8 @@ var radii2 = import_dev56.defineTokens.radii({
 });
 
 // src/tokens-next/spacing.ts
-var import_dev57 = require("@pandacss/dev");
-var spacing2 = import_dev57.defineTokens.spacing({
+var import_dev58 = require("@pandacss/dev");
+var spacing2 = import_dev58.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem", description: "2px" },
   1: { value: "0.25rem", description: "4px" },
@@ -6168,8 +6505,8 @@ var spacing2 = import_dev57.defineTokens.spacing({
 });
 
 // src/tokens-next/shadows.ts
-var import_dev58 = require("@pandacss/dev");
-var shadows2 = import_dev58.defineTokens.shadows({
+var import_dev59 = require("@pandacss/dev");
+var shadows2 = import_dev59.defineTokens.shadows({
   xs: {
     value: ["0px 2px 4px 0px {colors.background.shadow}", "0px 0px 2px 0px {colors.background.shadow}"]
   },
@@ -6197,7 +6534,7 @@ var shadows2 = import_dev58.defineTokens.shadows({
 });
 
 // src/tokens-next/index.ts
-var tokensNext = (0, import_dev59.defineTokens)({
+var tokensNext = (0, import_dev60.defineTokens)({
   borderWidths: borderWidths2,
   colors: colors2,
   durations,
@@ -6215,11 +6552,11 @@ var tokensNext = (0, import_dev59.defineTokens)({
 });
 
 // src/semanticTokens/index.ts
-var import_dev62 = require("@pandacss/dev");
+var import_dev63 = require("@pandacss/dev");
 
 // src/semanticTokens/colors.ts
-var import_dev60 = require("@pandacss/dev");
-var colors3 = import_dev60.defineSemanticTokens.colors({
+var import_dev61 = require("@pandacss/dev");
+var colors3 = import_dev61.defineSemanticTokens.colors({
   background: {
     surface: {
       value: {
@@ -7135,8 +7472,8 @@ var colors3 = import_dev60.defineSemanticTokens.colors({
 });
 
 // src/semanticTokens/spacing.ts
-var import_dev61 = require("@pandacss/dev");
-var spacing3 = import_dev61.defineSemanticTokens.spacing({
+var import_dev62 = require("@pandacss/dev");
+var spacing3 = import_dev62.defineSemanticTokens.spacing({
   "4xs": {
     value: {
       base: "0.125rem"
@@ -7195,7 +7532,7 @@ var spacing3 = import_dev61.defineSemanticTokens.spacing({
 });
 
 // src/semanticTokens/index.ts
-var semanticTokens = (0, import_dev62.defineSemanticTokens)({
+var semanticTokens = (0, import_dev63.defineSemanticTokens)({
   colors: colors3,
   spacing: spacing3
 });
@@ -7234,7 +7571,7 @@ var globalFontface = {
 };
 
 // src/index.ts
-var preset = (0, import_dev63.definePreset)({
+var preset = (0, import_dev64.definePreset)({
   name: "@mekari/pixel3-theme",
   // Main Theme
   theme: {