@mekari/pixel3-theme 0.0.11 → 0.1.0

package/dist/index.js

@@ -25,7 +25,7 @@ __export(theme_exports, {
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev49 = require("@pandacss/dev");
+var import_dev53 = require("@pandacss/dev");
 
 // src/breakpoints.ts
 var breakpoints = {
@@ -1055,58 +1055,56 @@ var spinnerRecipe = (0, import_dev10.defineRecipe)({
 
 // src/recipes/accordion.ts
 var import_dev11 = require("@pandacss/dev");
-var accordion = (0, import_dev11.defineSlotRecipe)({
+var accordionSlotRecipe = (0, import_dev11.defineSlotRecipe)({
   className: "accordion",
-  slots: ["root", "item", "trigger", "content"],
+  slots: ["header", "item", "panel"],
+  jsx: [
+    "MpAccordionHeader",
+    "MpAccordionItem",
+    "MpAccordionPanel",
+    "mp-accordion-header",
+    "mp-accordion-item",
+    "mp-accordion-panel"
+  ],
   base: {
-    root: {
-      divideY: "1px",
-      width: "full"
-    },
-    trigger: {
-      alignItems: "center",
-      color: "fg.default",
-      cursor: "pointer",
+    header: {
       display: "flex",
-      fontWeight: "normal",
-      justifyContent: "space-between",
-      textStyle: "lg",
-      width: "full",
-      fontSize: "lg"
+      alignItems: "center",
+      width: "100%",
+      outline: 0,
+      gap: 4,
+      transition: "all 0.2s",
+      py: 3,
+      fontWeight: "semiBold",
+      fontSize: "md",
+      color: "dark",
+      _disabled: { opacity: "0.4", cursor: "not-allowed" }
     },
-    content: {
-      color: "fg.muted",
-      display: "grid",
-      gridTemplateRows: "0fr",
-      transitionProperty: "grid-template-rows, padding-bottom",
-      transitionDuration: "normal",
-      transitionTimingFunction: "default",
-      _open: {
-        gridTemplateRows: "1fr"
-      },
-      "& > div": {
-        overflow: "hidden"
-      }
+    item: {
+      borderBottomWidth: "1px",
+      borderColor: "gray.100",
+      _last: { borderBottomWidth: "1px", borderColor: "gray.100" }
+    },
+    panel: {
+      py: 3
     }
   },
-  defaultVariants: {
-    size: "md"
-  },
   variants: {
-    size: {
-      md: {
-        trigger: {
-          py: "4"
-        },
-        content: {
-          pb: "6",
-          pr: "8",
-          _closed: {
-            pb: "0"
-          }
+    isClickable: {
+      true: {
+        header: {
+          cursor: "pointer"
+        }
+      },
+      false: {
+        header: {
+          cursor: "default"
         }
       }
     }
+  },
+  defaultVariants: {
+    isClickable: true
   }
 });
 
@@ -1431,20 +1429,37 @@ var tooltipRecipe = (0, import_dev15.defineRecipe)({
 
 // src/recipes/tabs.ts
 var import_dev16 = require("@pandacss/dev");
-var tabListRecipe = (0, import_dev16.defineRecipe)({
+var tabListSlotRecipe = (0, import_dev16.defineSlotRecipe)({
   className: "tab-list",
   jsx: ["MpTabList", "mp-tab-list"],
+  slots: ["root", "list"],
   base: {
-    display: "flex",
-    overflow: "auto",
-    gap: "1.5rem",
-    fontSize: "md",
-    color: "gray.600",
-    marginBottom: 6,
-    padding: 0.5,
-    alignItems: "center",
-    justifyContent: "flex-start",
-    maxWidth: "full"
+    root: {
+      position: "relative",
+      "&[data-border=true]": {
+        _before: {
+          content: '""',
+          height: "1px",
+          background: "gray.100",
+          position: "absolute",
+          right: 0,
+          left: 0,
+          bottom: "1px"
+        }
+      }
+    },
+    list: {
+      display: "flex",
+      overflow: "auto",
+      gap: "1.5rem",
+      fontSize: "md",
+      color: "gray.600",
+      marginBottom: 6,
+      padding: 0.5,
+      alignItems: "center",
+      justifyContent: "flex-start",
+      maxWidth: "full"
+    }
   }
 });
 var tabRecipe = (0, import_dev16.defineRecipe)({
@@ -3038,6 +3053,26 @@ var calendarPanelRangeRecipe = (0, import_dev33.defineRecipe)({
     gridTemplateColumns: "repeat(2, 1fr)"
   }
 });
+var timePanelSlotRecipe = (0, import_dev33.defineSlotRecipe)({
+  className: "timePanel",
+  slots: ["root", "column"],
+  jsx: ["TimePanel", "time-panel"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "0.5"
+    },
+    column: {
+      display: "flex",
+      flexDirection: "column",
+      height: "224px",
+      overflowY: "scroll",
+      overflowX: "hidden",
+      py: "10px"
+    }
+  }
+});
 var tableDateSlotRecipe = (0, import_dev33.defineSlotRecipe)({
   className: "tableDate",
   jsx: ["TableDate", "table-date"],
@@ -3535,9 +3570,256 @@ var chartSlotRecipe = (0, import_dev35.defineSlotRecipe)({
   }
 });
 
-// src/recipes/banner.ts
+// src/recipes/autocomplete.ts
 var import_dev36 = require("@pandacss/dev");
-var bannerSlotRecipe = (0, import_dev36.defineSlotRecipe)({
+var autocompleteSlotRecipe = (0, import_dev36.defineSlotRecipe)({
+  className: "autocomplete",
+  jsx: ["MpAutocomplete", "mp-autocomplete"],
+  slots: ["groupText", "popoverContent", "buttonAction", "emptyText", "contentLoading"],
+  base: {
+    groupText: {
+      px: 3,
+      py: 2
+    },
+    popoverContent: {
+      maxHeight: "300px",
+      overflowY: "auto",
+      position: "relative"
+    },
+    buttonAction: {
+      cursor: "pointer",
+      width: "full",
+      textAlign: "center",
+      roundedTop: "0",
+      borderTopWidth: "1px",
+      borderColor: "blue.50",
+      color: "blue.400",
+      position: "sticky",
+      bottom: "0px",
+      bg: "white",
+      fontSize: "md",
+      zIndex: "999",
+      py: 2,
+      height: "9.5",
+      _hover: { color: "blue.500" }
+    },
+    emptyText: {
+      px: 3,
+      py: 2
+    },
+    contentLoading: {
+      px: 3,
+      py: 2,
+      display: "flex",
+      alignItems: "center",
+      gap: 3
+    }
+  }
+});
+
+// src/recipes/timeline.ts
+var import_dev37 = require("@pandacss/dev");
+var timelineSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+  className: "timeline",
+  jsx: [
+    "MpTimeline",
+    "MpTimelineBody",
+    "MpTimelineCaption",
+    "MpTimelineContent",
+    "MpTimelineItem",
+    "mp-timeline",
+    "mp-timeline-body",
+    "mp-timeline-caption",
+    "mp-timeline-content",
+    "mp-timeline-item"
+  ],
+  slots: ["root", "body", "caption", "content", "item"],
+  base: {
+    root: {
+      maxWidth: "sm"
+    },
+    body: {
+      marginLeft: "3",
+      paddingTop: "6px",
+      paddingBottom: "3",
+      width: "full"
+    },
+    caption: {
+      fontSize: "sm",
+      color: "gray.400",
+      lineHeight: "sm",
+      marginTop: "0.5"
+    },
+    content: {
+      paddingTop: 3
+    },
+    item: {
+      display: "flex"
+    }
+  }
+});
+var timelineDocumentSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+  className: "timelineDocument",
+  jsx: ["MpTimelineDocument", "mp-timeline-document"],
+  slots: ["root", "content", "title", "description", "fileSize"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      paddingX: "3",
+      paddingY: "2",
+      borderRadius: "lg",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      width: "full",
+      gap: "3"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    title: {
+      fontSize: "sm",
+      lineHeight: "md",
+      fontWeight: "regular",
+      letterSpacing: "normal",
+      color: "dark"
+    },
+    description: {
+      display: "flex",
+      alignItems: "center"
+    },
+    fileSize: {
+      fontSize: "sm",
+      lineHeight: "md",
+      fontWeight: "regular",
+      letterSpacing: "normal",
+      color: "gray.400"
+    }
+  },
+  variants: {
+    icon: {
+      true: { content: { marginLeft: "3" } },
+      false: { content: { marginLeft: "0" } }
+    }
+  },
+  defaultVariants: {
+    icon: false
+  }
+});
+var timelineLogSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+  className: "timelineLog",
+  jsx: ["MpTimelineLog", "MpTimelineLogItem", "mp-timeline-log", "mp-timeline-log-item"],
+  slots: ["root", "log", "logText", "logIcon", "content", "logItem"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    log: {
+      display: "flex",
+      cursor: "pointer"
+    },
+    logText: {
+      color: "gray.400",
+      _groupHover: {
+        color: "blue.500"
+      }
+    },
+    logIcon: {
+      color: "gray.400",
+      _groupHover: { color: "blue.500" }
+    },
+    content: {
+      listStyleType: "disc",
+      paddingLeft: 5
+    },
+    logItem: {
+      color: "gray.600"
+    }
+  }
+});
+var timelineSeparatorSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+  className: "timelineSeparetor",
+  jsx: ["MpTimelineSeparator", "mp-timeline-separator"],
+  slots: ["root", "topConnector", "bottomConnector"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    topConnector: {
+      height: "6px",
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=first]": {
+        backgroundColor: "transparent"
+      }
+    },
+    bottomConnector: {
+      height: "100%",
+      flexGrow: 1,
+      width: "2px",
+      roundedTop: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=last]": {
+        backgroundColor: "transparent"
+      }
+    }
+  }
+});
+var timelineAccordionSlotRecipe = (0, import_dev37.defineSlotRecipe)({
+  className: "timelineAccordion",
+  jsx: ["MpTimelineAccordion", "mp-timeline-accordion"],
+  slots: ["body", "separator", "icon", "topConnector", "bottomConnector", "title", "label"],
+  base: {
+    body: {
+      display: "flex"
+    },
+    separator: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    },
+    icon: {
+      my: 1,
+      cursor: "pointer"
+    },
+    topConnector: {
+      height: "4px",
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=first]": {
+        backgroundColor: "transparent"
+      },
+      roundedBottom: "full"
+    },
+    bottomConnector: {
+      flexGrow: 1,
+      width: "2px",
+      backgroundColor: "gray.100",
+      "&[data-position=last]": {
+        backgroundColor: "transparent"
+      },
+      roundedTop: "full"
+    },
+    title: {
+      paddingTop: 1
+    },
+    label: {
+      fontSize: "md",
+      lineHeight: "md",
+      color: "dark",
+      fontWeight: "semibold",
+      letterSpacing: "normal"
+    }
+  }
+});
+
+// src/recipes/banner.ts
+var import_dev38 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "banner",
   jsx: ["MpBanner", "mp-banner"],
   slots: ["root", "body"],
@@ -3578,7 +3860,7 @@ var bannerSlotRecipe = (0, import_dev36.defineSlotRecipe)({
     variant: "info"
   }
 });
-var bannerTitleRecipe = (0, import_dev36.defineRecipe)({
+var bannerTitleRecipe = (0, import_dev38.defineRecipe)({
   className: "banner-title",
   jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
@@ -3595,7 +3877,7 @@ var bannerTitleRecipe = (0, import_dev36.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerDescriptionRecipe = (0, import_dev36.defineRecipe)({
+var bannerDescriptionRecipe = (0, import_dev38.defineRecipe)({
   className: "banner-description",
   jsx: ["MpBannerDescription", "mp-banner-description"],
   base: {
@@ -3610,7 +3892,7 @@ var bannerDescriptionRecipe = (0, import_dev36.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerIconSlotRecipe = (0, import_dev36.defineSlotRecipe)({
+var bannerIconSlotRecipe = (0, import_dev38.defineSlotRecipe)({
   className: "banner-icon",
   jsx: ["MpBannerIcon", "mp-banner-icon"],
   slots: ["root", "custom"],
@@ -3633,7 +3915,7 @@ var bannerIconSlotRecipe = (0, import_dev36.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerLinkRecipe = (0, import_dev36.defineRecipe)({
+var bannerLinkRecipe = (0, import_dev38.defineRecipe)({
   className: "banner-link",
   jsx: ["MpBannerLink", "mp-banner-link"],
   base: {
@@ -3646,7 +3928,7 @@ var bannerLinkRecipe = (0, import_dev36.defineRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var bannerCloseButtonRecipe = (0, import_dev36.defineRecipe)({
+var bannerCloseButtonRecipe = (0, import_dev38.defineRecipe)({
   className: "banner-close-button",
   jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
   base: {
@@ -3665,6 +3947,208 @@ var bannerCloseButtonRecipe = (0, import_dev36.defineRecipe)({
   defaultVariants: {}
 });
 
+// src/recipes/color-picker.ts
+var import_dev39 = require("@pandacss/dev");
+var colorPickerSlotRecipe = (0, import_dev39.defineSlotRecipe)({
+  className: "color-picker",
+  jsx: ["MpColorPicker", "mp-color-picker"],
+  slots: [
+    "root",
+    "popoverTrigger",
+    "boxColor",
+    "inputTrigger",
+    "iconDropdown",
+    "popoverContent",
+    "wrapperAdvance",
+    "wrapperBasic",
+    "wrapperSaturation",
+    "wrapperHue",
+    "wrapperInput",
+    "boxPreset",
+    "wrapperPreset",
+    "wrapperBasicPreset"
+  ],
+  base: {
+    root: {
+      width: "280px",
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    popoverTrigger: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      position: "relative",
+      height: "38px",
+      pl: "2",
+      pr: "3",
+      borderRadius: "md",
+      border: "1px solid",
+      _focus: {
+        boxShadow: "outline !important",
+        borderColor: "blue.400 !important",
+        outline: "none"
+      }
+    },
+    boxColor: {
+      flex: "none",
+      width: "6",
+      height: "6",
+      borderWidth: "1px",
+      borderColor: "gray.50",
+      borderRadius: "sm",
+      mr: "2"
+    },
+    inputTrigger: {
+      margin: "-12px",
+      textTransform: "uppercase"
+    },
+    iconDropdown: {
+      position: "absolute",
+      right: "3",
+      ml: "2",
+      _focus: {
+        outline: "none"
+      }
+    },
+    popoverContent: {
+      bg: "white",
+      rounded: "md",
+      shadow: "lg",
+      borderWidth: "1px",
+      borderColor: "gray.400"
+    },
+    wrapperAdvance: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "280px",
+      padding: "3",
+      gap: "3"
+    },
+    wrapperBasic: {
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      width: "188px",
+      padding: "3",
+      gap: "3"
+    },
+    wrapperSaturation: {
+      position: "relative",
+      width: "100%",
+      height: "144px",
+      overflow: "hidden"
+    },
+    wrapperHue: {
+      position: "relative",
+      height: "28px"
+    },
+    wrapperInput: {
+      position: "relative",
+      display: "flex",
+      gap: "2"
+    },
+    boxPreset: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      position: "relative"
+    },
+    wrapperPreset: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "5px"
+    },
+    wrapperBasicPreset: {
+      position: "relative",
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "4px"
+    }
+  }
+});
+
+// src/recipes/slider.ts
+var import_dev40 = require("@pandacss/dev");
+var sliderSlotRecipe = (0, import_dev40.defineSlotRecipe)({
+  className: "slider",
+  jsx: ["MpSlider", "mp-slider"],
+  slots: [
+    "root",
+    "labelWrapper",
+    "sliderWrapper",
+    "progress",
+    "slider",
+    "inputWrapper",
+    "input",
+    "legendWrapper"
+  ],
+  base: {
+    root: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column",
+      gap: "10px"
+    },
+    labelWrapper: {
+      display: "flex",
+      justifyContent: "space-between"
+    },
+    sliderWrapper: {
+      position: "relative",
+      width: "full",
+      display: "flex",
+      flexDirection: "column"
+    },
+    progress: {
+      position: "relative",
+      height: "2",
+      borderRadius: "100px"
+    },
+    slider: {
+      position: "absolute",
+      height: "2",
+      borderRadius: "100px"
+    },
+    inputWrapper: {
+      position: "relative"
+    },
+    input: {
+      appearance: "none",
+      position: "absolute",
+      width: "full",
+      height: "2",
+      top: "-8px",
+      background: "none",
+      outline: "none",
+      _focusVisible: {
+        borderRadius: "100px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "blue.400",
+        boxShadow: "focus"
+      },
+      "&::-webkit-slider-thumb": {
+        appearance: "none",
+        width: "5",
+        height: "5",
+        borderRadius: "full",
+        borderStyle: "solid",
+        borderColor: "gray.100",
+        boxShadow: "sm",
+        filter: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.05)) drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.10))",
+        transition: "border-color 250ms",
+        pointerEvents: "auto"
+      }
+    }
+  }
+});
+
 // src/recipes/index.ts
 var recipes = {
   buttonRecipe,
@@ -3678,7 +4162,6 @@ var recipes = {
   badgeRecipe,
   textareaRecipe,
   tooltipRecipe,
-  tabListRecipe,
   tabRecipe,
   selectedBorderRecipe,
   tableRecipe,
@@ -3697,7 +4180,7 @@ var recipes = {
   timeItemRecipe
 };
 var slotRecipes = {
-  accordion,
+  accordionSlotRecipe,
   checkboxSlotRecipe,
   radioSlotRecipe,
   sharedSlotRecipe,
@@ -3723,17 +4206,27 @@ var slotRecipes = {
   broadcastSlotRecipe,
   richTextEditorSlotRecipe,
   datePickerSlotRecipe,
+  timePanelSlotRecipe,
   tableDateSlotRecipe,
   tableMonthSlotRecipe,
   tableYearSlotRecipe,
   pinbarSlotRecipe,
   carouselSlotRecipe,
-  chartSlotRecipe
+  chartSlotRecipe,
+  autocompleteSlotRecipe,
+  timelineSlotRecipe,
+  timelineDocumentSlotRecipe,
+  timelineLogSlotRecipe,
+  timelineSeparatorSlotRecipe,
+  timelineAccordionSlotRecipe,
+  tabListSlotRecipe,
+  colorPickerSlotRecipe,
+  sliderSlotRecipe
 };
 
 // src/text-styles.ts
-var import_dev37 = require("@pandacss/dev");
-var textStyles = (0, import_dev37.defineTextStyles)({
+var import_dev41 = require("@pandacss/dev");
+var textStyles = (0, import_dev41.defineTextStyles)({
   overline: { value: { fontSize: "xs", lineHeight: "xs" } },
   body: {
     sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
@@ -3767,11 +4260,11 @@ var textStyles = (0, import_dev37.defineTextStyles)({
 });
 
 // src/tokens/index.ts
-var import_dev48 = require("@pandacss/dev");
+var import_dev52 = require("@pandacss/dev");
 
 // src/tokens/borders.ts
-var import_dev38 = require("@pandacss/dev");
-var borders = import_dev38.defineTokens.borders({
+var import_dev42 = require("@pandacss/dev");
+var borders = import_dev42.defineTokens.borders({
   none: { value: "none" },
   sm: { value: "1px" },
   md: { value: "1.5px" },
@@ -3779,8 +4272,8 @@ var borders = import_dev38.defineTokens.borders({
 });
 
 // src/tokens/colors.ts
-var import_dev39 = require("@pandacss/dev");
-var colors = import_dev39.defineTokens.colors({
+var import_dev43 = require("@pandacss/dev");
+var colors = import_dev43.defineTokens.colors({
   currentcolor: {
     value: "currentcolor"
   },
@@ -3926,16 +4419,16 @@ var colors = import_dev39.defineTokens.colors({
 });
 
 // src/tokens/durations.ts
-var import_dev40 = require("@pandacss/dev");
-var durations = import_dev40.defineTokens.durations({
+var import_dev44 = require("@pandacss/dev");
+var durations = import_dev44.defineTokens.durations({
   slow: { value: "100ms" },
   normal: { value: "250ms" },
   fast: { value: "300ms" }
 });
 
 // src/tokens/opacity.ts
-var import_dev41 = require("@pandacss/dev");
-var opacity = import_dev41.defineTokens.opacity({
+var import_dev45 = require("@pandacss/dev");
+var opacity = import_dev45.defineTokens.opacity({
   0: { value: 0 },
   40: { value: 0.4 },
   60: { value: 0.6 },
@@ -3943,8 +4436,8 @@ var opacity = import_dev41.defineTokens.opacity({
 });
 
 // src/tokens/radii.ts
-var import_dev42 = require("@pandacss/dev");
-var radii = import_dev42.defineTokens.radii({
+var import_dev46 = require("@pandacss/dev");
+var radii = import_dev46.defineTokens.radii({
   none: { value: "0" },
   xs: { value: "0.125rem" },
   sm: { value: "0.25rem" },
@@ -3955,8 +4448,8 @@ var radii = import_dev42.defineTokens.radii({
 });
 
 // src/tokens/shadows.ts
-var import_dev43 = require("@pandacss/dev");
-var shadows = import_dev43.defineTokens.shadows({
+var import_dev47 = require("@pandacss/dev");
+var shadows = import_dev47.defineTokens.shadows({
   xs: {
     value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
@@ -3996,8 +4489,8 @@ var shadows = import_dev43.defineTokens.shadows({
 });
 
 // src/tokens/sizes.ts
-var import_dev44 = require("@pandacss/dev");
-var sizes = import_dev44.defineTokens.sizes({
+var import_dev48 = require("@pandacss/dev");
+var sizes = import_dev48.defineTokens.sizes({
   0: { value: "0" },
   0.25: { value: "0.0625rem" },
   0.5: { value: "0.125rem" },
@@ -4026,8 +4519,8 @@ var sizes = import_dev44.defineTokens.sizes({
 });
 
 // src/tokens/spacing.ts
-var import_dev45 = require("@pandacss/dev");
-var spacing = import_dev45.defineTokens.spacing({
+var import_dev49 = require("@pandacss/dev");
+var spacing = import_dev49.defineTokens.spacing({
   0: { value: "0" },
   0.5: { value: "0.125rem" },
   1: { value: "0.25rem" },
@@ -4048,8 +4541,8 @@ var spacing = import_dev45.defineTokens.spacing({
 });
 
 // src/tokens/z-index.ts
-var import_dev46 = require("@pandacss/dev");
-var zIndex = import_dev46.defineTokens.zIndex({
+var import_dev50 = require("@pandacss/dev");
+var zIndex = import_dev50.defineTokens.zIndex({
   hide: { value: -1 },
   base: { value: 0 },
   docked: { value: 10 },
@@ -4061,8 +4554,8 @@ var zIndex = import_dev46.defineTokens.zIndex({
 });
 
 // src/tokens/typography.ts
-var import_dev47 = require("@pandacss/dev");
-var fonts = import_dev47.defineTokens.fonts({
+var import_dev51 = require("@pandacss/dev");
+var fonts = import_dev51.defineTokens.fonts({
   body: {
     value: '"Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
   },
@@ -4070,7 +4563,7 @@ var fonts = import_dev47.defineTokens.fonts({
     value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
   }
 });
-var fontSizes = import_dev47.defineTokens.fontSizes({
+var fontSizes = import_dev51.defineTokens.fontSizes({
   xs: { value: "0.625rem" },
   sm: { value: "0.75rem" },
   md: { value: "0.875rem" },
@@ -4078,12 +4571,12 @@ var fontSizes = import_dev47.defineTokens.fontSizes({
   xl: { value: "1.25rem" },
   "2xl": { value: "1.5rem" }
 });
-var fontWeights = import_dev47.defineTokens.fontWeights({
+var fontWeights = import_dev51.defineTokens.fontWeights({
   regular: { value: "400" },
   semiBold: { value: "600" },
   bold: { value: "800" }
 });
-var lineHeights = import_dev47.defineTokens.lineHeights({
+var lineHeights = import_dev51.defineTokens.lineHeights({
   xs: { value: 1.2 },
   sm: { value: 1.34 },
   md: { value: 1.4 },
@@ -4092,7 +4585,7 @@ var lineHeights = import_dev47.defineTokens.lineHeights({
   "2xl": { value: 1.67 },
   "3xl": { value: 1.71 }
 });
-var letterSpacings = import_dev47.defineTokens.letterSpacings({
+var letterSpacings = import_dev51.defineTokens.letterSpacings({
   tighter: { value: "-0.05em" },
   tight: { value: "-0.025em" },
   normal: { value: "0" },
@@ -4102,7 +4595,7 @@ var letterSpacings = import_dev47.defineTokens.letterSpacings({
 });
 
 // src/tokens/index.ts
-var tokens = (0, import_dev48.defineTokens)({
+var tokens = (0, import_dev52.defineTokens)({
   borders,
   colors,
   durations,
@@ -4120,7 +4613,7 @@ var tokens = (0, import_dev48.defineTokens)({
 });
 
 // src/index.ts
-var preset = (0, import_dev49.definePreset)({
+var preset = (0, import_dev53.definePreset)({
   theme: {
     extend: {
       breakpoints,