@mekari/pixel3-theme 0.0.1 → 0.0.2

package/dist/index.js

@@ -18,7 +18,15 @@ var theme_exports = {};
 module.exports = __toCommonJS(theme_exports);
 
 // src/index.ts
-var import_dev38 = require("@pandacss/dev");
+var import_dev42 = require("@pandacss/dev");
+
+// src/breakpoints.ts
+var breakpoints = {
+  sm: "22.5em",
+  md: "48em",
+  lg: "64em",
+  xl: "80em"
+};
 
 // src/conditions.ts
 var conditions = {
@@ -67,492 +75,129 @@ var globalCss = (0, import_dev.defineGlobalStyles)({
   }
 });
 
-// src/tokens/index.ts
-var import_dev12 = require("@pandacss/dev");
-
-// src/tokens/borders.ts
+// src/keyframes.ts
 var import_dev2 = require("@pandacss/dev");
-var borders = import_dev2.defineTokens.borders({
-  none: { value: "none" },
-  sm: { value: "1px" },
-  md: { value: "1.5px" },
-  lg: { value: "2px" }
+var keyframes = (0, import_dev2.defineKeyframes)({
+  "fade-in": {
+    from: { opacity: "0" },
+    to: { opacity: "1" }
+  },
+  "fade-out": {
+    from: { opacity: "1" },
+    to: { opacity: "0" }
+  },
+  spin: {
+    "100%": { transform: "rotate(1turn)" }
+  }
 });
 
-// src/tokens/colors.ts
+// src/recipes/tag.ts
 var import_dev3 = require("@pandacss/dev");
-var colors = import_dev3.defineTokens.colors({
-  currentcolor: {
-    value: "currentcolor",
-    description: "Need to add this for Icon usage"
-  },
-  dark: { value: "#232933", description: "Default or primary text color" },
-  white: {
-    value: "#FFFFFF",
-    description: "Background color in components such as Card, Modal, and Popover"
-  },
-  background: { value: "#F1F5F9", description: "For use as background page" },
-  overlay: {
-    value: "rgba(22, 26, 32, 0.8)",
-    description: "For use as overlay"
-  },
-  brand: {
-    capital: { value: "#2F5573", description: "Mekari Capital" },
-    esign: { value: "#00C853", description: "Mekari e-Sign" },
-    expense: { value: "#183883", description: "Mekari Expense" },
-    flex: { value: "#7C4DFF", description: "Mekari Flex" },
-    jurnal: { value: "#40C3FF", description: "Mekari Jurnal" },
-    klikpajak: { value: "#FF9100", description: "Mekari Klikpajak" },
-    mekari: { value: "#651FFF", description: "Mekari" },
-    qontak: { value: "#2979FF", description: "Mekari Qontak" },
-    talenta: { value: "#F22929", description: "Mekari Talenta" },
-    university: { value: "#448AFF", description: "Mekari University" }
+var tagSlotRecipe = (0, import_dev3.defineSlotRecipe)({
+  className: "tag",
+  jsx: ["MpTag", "mp-tag"],
+  slots: ["root", "close"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      userSelect: "auto",
+      outline: "0px solid transparent",
+      borderWidth: "1px",
+      borderColor: "transparent",
+      borderRadius: "sm",
+      transition: "all 250ms",
+      textAlign: "left",
+      fontSize: "md",
+      fontWeight: "regular",
+      lineHeight: "md",
+      letterSpacing: "normal",
+      paddingX: "2",
+      whiteSpace: "normal",
+      overflowWrap: "anywhere",
+      cursor: "var(--mp-tag--cursor)"
+    },
+    close: {
+      position: "absolute!",
+      color: "gray.600",
+      border: "none",
+      right: "0",
+      width: "5",
+      height: "5",
+      minWidth: "5",
+      paddingTop: "1",
+      padding: "0",
+      transition: "all 250ms!",
+      visibility: "hidden",
+      opacity: "0",
+      _groupHover: {
+        visibility: "visible",
+        opacity: "1"
+      }
+    }
   },
-  gray: {
-    25: {
-      value: "#F8F9FB",
-      description: "Background color in table header component"
+  variants: {
+    size: {
+      sm: {
+        root: {
+          paddingY: "0"
+        }
+      },
+      md: {
+        root: {
+          paddingY: "1"
+        }
+      }
     },
-    50: {
-      value: "#EDF0F2",
-      description: "Disabled background color in components such as Input and Select backgrounds"
+    variant: {
+      gray: {
+        root: {
+          color: "gray.600",
+          background: "gray.50"
+        }
+      },
+      red: {
+        root: {
+          color: "red.400",
+          backgroundColor: "red.50"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "gray",
+      css: {
+        close: {
+          background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)"
+        }
+      }
     },
-    100: { value: "#D0D6DD", description: "Default stroke color or divider" },
-    400: {
-      value: "#8B95A5",
-      description: "Disabled and placeholder text color, icon or in components such as hover state Input, Select and stroke in Popover"
+    {
+      variant: "red",
+      css: {
+        close: {
+          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)"
+        }
+      }
     },
-    600: {
-      value: "#626B79",
-      description: "Description text color and default color for outline icon"
+    {
+      size: "sm",
+      css: {
+        close: { paddingTop: "0" }
+      }
     }
-  },
-  blue: {
-    50: { value: "#EAECFB" },
-    100: { value: "#D5DEFF" },
-    400: { value: "#4B61DD" },
-    500: { value: "#1C44D5" },
-    700: { value: "#0031BE" }
-  },
-  red: {
-    50: { value: "#FDECEE" },
-    400: { value: "#DA473F" },
-    500: { value: "#C83E39" },
-    700: { value: "#AB3129" }
-  },
-  green: {
-    50: { value: "#E8F5EB" },
-    400: { value: "#68BE79" },
-    500: { value: "#4FB262" },
-    700: { value: "#3C914D" }
-  },
-  orange: {
-    50: { value: "#FBF3DD" },
-    400: { value: "#E0AB00" },
-    500: { value: "#DE9400" },
-    700: { value: "#DB8000" }
-  },
-  sky: {
-    100: { value: "#60A5FA" },
-    400: { value: "#3B82F6" }
-  },
-  teal: {
-    100: { value: "#2DD4BF" },
-    400: { value: "#14B8A6" }
-  },
-  violet: {
-    100: { value: "#A78BFA" },
-    400: { value: "#8B5CF6" }
-  },
-  amber: {
-    100: { value: "#FBBF24" },
-    400: { value: "#F59E0B" }
-  },
-  rose: {
-    100: { value: "#F87171" },
-    400: { value: "#EF4444" }
-  },
-  stone: {
-    100: { value: "#A1A1AA" },
-    400: { value: "#71717A" }
-  },
-  lime: {
-    100: { value: "#A3E635" },
-    400: { value: "#84CC16" }
-  },
-  pink: {
-    100: { value: "#F472B6" },
-    400: { value: "#EC4899" }
-  },
-  apricot: {
-    100: { value: "#FB923C" },
-    400: { value: "#F97316" }
-  },
-  aqua: {
-    100: { value: "#22D3EE" },
-    400: { value: "#06B6D4" }
-  },
-  leaf: {
-    100: { value: "#4ADE80" },
-    400: { value: "#22C55E" }
-  },
-  fuchsia: {
-    100: { value: "#E879F9" },
-    400: { value: "#D946EF" }
-  },
-  ice: {
-    50: { value: "#E0EEFF" },
-    100: { value: "#B4D3F2" }
-  },
-  ash: {
-    100: { value: "#E7EDF5" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "gray"
   }
 });
 
-// src/tokens/durations.ts
+// src/recipes/avatar.ts
 var import_dev4 = require("@pandacss/dev");
-var durations = import_dev4.defineTokens.durations({
-  slow: { value: "100ms" },
-  normal: { value: "250ms" },
-  fast: { value: "300ms" }
-});
-
-// src/tokens/opacity.ts
-var import_dev5 = require("@pandacss/dev");
-var opacity = import_dev5.defineTokens.opacity({
-  0: { value: 0 },
-  40: { value: 0.4 },
-  60: { value: 0.6 },
-  100: { value: 1 }
-});
-
-// src/tokens/radii.ts
-var import_dev6 = require("@pandacss/dev");
-var radii = import_dev6.defineTokens.radii({
-  none: { value: "0" },
-  xs: { value: "0.125rem", description: "2px" },
-  sm: { value: "0.25rem", description: "4px" },
-  md: { value: "0.375rem", description: "6px" },
-  lg: { value: "0.5rem", description: "8px" },
-  xl: { value: "0.75rem", description: "12px" },
-  full: { value: "50%" }
-});
-
-// src/tokens/shadows.ts
-var import_dev7 = require("@pandacss/dev");
-var shadows = import_dev7.defineTokens.shadows({
-  xs: {
-    value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
-  },
-  sm: {
-    value: ["0px 4px 6px -2px rgba(0, 0, 0, 0.05)", "0px 10px 15px -3px rgba(0, 0, 0, 0.10)"]
-  },
-  md: {
-    value: ["0px 10px 10px -5px rgba(0, 0, 0, 0.04)", "0px 20px 25px -5px rgba(0, 0, 0, 0.10)"]
-  },
-  lg: {
-    value: ["0px 6px 16px 0px rgba(0, 0, 0, 0.08)", "0px 9px 28px 8px rgba(0, 0, 0, 0.05)"]
-  },
-  focus: {
-    value: "0 0 0 3px rgba(224, 238, 255, 1)"
-  },
-  xl: {
-    value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-  },
-  "2xl": {
-    value: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
-  },
-  outline: {
-    value: "0 0 0 3px #E0EEFF"
-  },
-  "outline-tab": {
-    value: "0 0 0 2px #E0EEFF"
-  },
-  outer: {
-    value: "0 0 0 3px rgba(224, 238, 255, 1)"
-  },
-  inner: {
-    value: "inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)"
-  },
-  none: {
-    value: "none"
-  }
-});
-
-// src/tokens/sizes.ts
-var import_dev8 = require("@pandacss/dev");
-var sizes = import_dev8.defineTokens.sizes({
-  0: { value: "0", description: "0px" },
-  0.25: { value: "0.0625rem", description: "1px" },
-  0.5: { value: "0.125rem", description: "2px" },
-  1: { value: "0.25rem", description: "4px" },
-  2: { value: "0.5rem", description: "8px" },
-  2.5: { value: "0.625rem", description: "10px" },
-  3: { value: "0.75rem", description: "12px" },
-  4: { value: "1rem", description: "16px" },
-  5: { value: "1.25rem", description: "20px" },
-  6: { value: "1.5rem", description: "24px" },
-  7: { value: "1.75rem", description: "28px" },
-  7.5: { value: "1.875rem", description: "30px" },
-  8: { value: "2rem", description: "32px" },
-  9: { value: "2.25rem", description: "36px" },
-  9.5: { value: "2.375rem", description: "38px" },
-  10: { value: "2.5rem", description: "40px" },
-  11: { value: "2.75rem", description: "44px" },
-  12: { value: "3rem", description: "48px" },
-  16: { value: "4rem", description: "64px" },
-  20: { value: "5rem", description: "80px" },
-  22: { value: "5.5rem", description: "96px" },
-  56: { value: "14rem", description: "224px" },
-  65: { value: "17.5rem", description: "280px" },
-  full: { value: "100%" }
-});
-
-// src/tokens/spacing.ts
-var import_dev9 = require("@pandacss/dev");
-var spacing = import_dev9.defineTokens.spacing({
-  0: { value: "0", description: "0px" },
-  0.5: { value: "0.125rem", description: "2px" },
-  1: { value: "0.25rem", description: "4px" },
-  1.5: { value: "0.375rem", description: "6px" },
-  2: { value: "0.5rem", description: "8px" },
-  3: { value: "0.75rem", description: "12px" },
-  4: { value: "1rem", description: "16px" },
-  5: { value: "1.3rem", description: "20px" },
-  6: { value: "1.5rem", description: "24px" },
-  8: { value: "2rem", description: "32px" },
-  12: { value: "3rem", description: "48px" },
-  16: { value: "4rem", description: "64px" },
-  20: { value: "5rem", description: "80px" },
-  24: { value: "6rem", description: "96px" },
-  32: { value: "8rem", description: "128px" },
-  40: { value: "10rem", description: "160px" },
-  64: { value: "16rem", description: "256px" }
-});
-
-// src/tokens/z-index.ts
-var import_dev10 = require("@pandacss/dev");
-var zIndex = import_dev10.defineTokens.zIndex({
-  hide: { value: -1 },
-  base: { value: 0 },
-  docked: { value: 10 },
-  sticky: { value: 1100 },
-  overlay: { value: 1300 },
-  modal: { value: 1400 },
-  popover: { value: 1500 },
-  tooltip: { value: 1800 }
-});
-
-// src/tokens/typography.ts
-var import_dev11 = require("@pandacss/dev");
-var fonts = import_dev11.defineTokens.fonts({
-  body: {
-    value: '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
-  },
-  mono: {
-    value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
-  }
-});
-var fontSizes = import_dev11.defineTokens.fontSizes({
-  xs: { value: "0.625rem", description: "10px" },
-  sm: { value: "0.75rem", description: "12px" },
-  md: { value: "0.875rem", description: "14px" },
-  lg: { value: "1rem", description: "16px" },
-  xl: { value: "1.25rem", description: "20px" },
-  "2xl": { value: "1.5rem", description: "24px" }
-});
-var fontWeights = import_dev11.defineTokens.fontWeights({
-  regular: { value: "400" },
-  semiBold: { value: "600" },
-  bold: { value: "800" }
-});
-var lineHeights = import_dev11.defineTokens.lineHeights({
-  xs: { value: 1.2, description: "12px/10px" },
-  sm: { value: 1.34, description: "16px/12px or 32px/24px" },
-  md: { value: 1.4, description: "28px/20px" },
-  lg: { value: 1.429, description: "20px/14px" },
-  xl: { value: 1.5, description: "24px/16px" },
-  "2xl": { value: 1.67, description: "20px/12px" },
-  "3xl": { value: 1.71, description: "24px/14px" }
-});
-var letterSpacings = import_dev11.defineTokens.letterSpacings({
-  tighter: { value: "-0.05em" },
-  tight: { value: "-0.025em" },
-  normal: { value: "0" },
-  wide: { value: "0.025em" },
-  wider: { value: "0.05em" },
-  widest: { value: "0.1em" }
-});
-
-// src/tokens/index.ts
-var tokens = (0, import_dev12.defineTokens)({
-  borders,
-  colors,
-  durations,
-  fonts,
-  fontSizes,
-  fontWeights,
-  lineHeights,
-  letterSpacings,
-  opacity,
-  radii,
-  shadows,
-  sizes,
-  spacing,
-  zIndex
-});
-
-// src/text-styles.ts
-var import_dev13 = require("@pandacss/dev");
-var textStyles = (0, import_dev13.defineTextStyles)({
-  overline: { value: { fontSize: "xs", lineHeight: "xs" } },
-  body: {
-    sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
-    md: { value: { fontSize: "md", lineHeight: "3xl" } }
-  },
-  label: {
-    sm: { value: { fontSize: "sm", lineHeight: "sm" } },
-    md: { value: { fontSize: "md", lineHeight: "lg" } }
-  },
-  h3: {
-    value: {
-      fontSize: "lg",
-      lineHeight: "xl",
-      fontWeight: "semiBold !important"
-    }
-  },
-  h2: {
-    value: {
-      fontSize: "xl",
-      lineHeight: "md",
-      fontWeight: "semiBold !important"
-    }
-  },
-  h1: {
-    value: {
-      fontSize: "2xl",
-      lineHeight: "sm",
-      fontWeight: "semiBold !important"
-    }
-  }
-});
-
-// src/keyframes.ts
-var import_dev14 = require("@pandacss/dev");
-var keyframes = (0, import_dev14.defineKeyframes)({
-  "fade-in": {
-    from: { opacity: "0" },
-    to: { opacity: "1" }
-  },
-  "fade-out": {
-    from: { opacity: "1" },
-    to: { opacity: "0" }
-  },
-  spin: {
-    "100%": { transform: "rotate(1turn)" }
-  }
-});
-
-// src/recipes/tag.ts
-var import_dev15 = require("@pandacss/dev");
-var tagSlotRecipe = (0, import_dev15.defineSlotRecipe)({
-  className: "tag",
-  jsx: ["MpTag", "mp-tag"],
-  slots: ["root", "close"],
-  base: {
-    root: {
-      position: "relative",
-      display: "inline-flex",
-      alignItems: "center",
-      userSelect: "auto",
-      outline: "0px solid transparent",
-      borderWidth: "1px",
-      borderColor: "transparent",
-      borderRadius: "sm",
-      transition: "all 250ms",
-      textAlign: "left",
-      fontSize: "md",
-      fontWeight: "regular",
-      lineHeight: "md",
-      letterSpacing: "normal",
-      paddingX: "2",
-      whiteSpace: "normal",
-      overflowWrap: "anywhere",
-      cursor: "var(--mp-tag--cursor)"
-    },
-    close: {
-      position: "absolute!",
-      color: "gray.600",
-      background: "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)!",
-      border: "none",
-      right: "0",
-      width: "5",
-      height: "5",
-      minWidth: "5",
-      paddingTop: "1",
-      padding: "0",
-      transition: "all 250ms!",
-      visibility: "hidden",
-      opacity: "0",
-      _groupHover: {
-        visibility: "visible",
-        opacity: "1"
-      }
-    }
-  },
-  variants: {
-    size: {
-      sm: {
-        root: {
-          paddingY: "0"
-        }
-      },
-      md: {
-        root: {
-          paddingY: "1"
-        }
-      }
-    },
-    variant: {
-      gray: {
-        root: {
-          color: "gray.600",
-          background: "gray.50"
-        }
-      },
-      red: {
-        root: {
-          color: "red.400",
-          backgroundColor: "red.50"
-        }
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "red",
-      css: {
-        close: {
-          background: "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)!"
-        }
-      }
-    },
-    {
-      size: "sm",
-      css: {
-        close: { paddingTop: "0" }
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "md",
-    variant: "gray"
-  }
-});
-
-// src/recipes/avatar.ts
-var import_dev16 = require("@pandacss/dev");
-var avatarSlotRecipe = (0, import_dev16.defineSlotRecipe)({
+var avatarSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   className: "avatar",
   jsx: ["MpAvatar", "mp-avatar"],
   slots: ["root", "fallback", "image", "icon"],
@@ -684,7 +329,7 @@ var avatarSlotRecipe = (0, import_dev16.defineSlotRecipe)({
     variant: "circle"
   }
 });
-var avatarGroupSlotRecipe = (0, import_dev16.defineSlotRecipe)({
+var avatarGroupSlotRecipe = (0, import_dev4.defineSlotRecipe)({
   className: "avatar-group",
   jsx: ["MpAvatarGroup", "mp-avatar-group"],
   slots: ["root", "excess"],
@@ -728,8 +373,8 @@ var avatarGroupSlotRecipe = (0, import_dev16.defineSlotRecipe)({
 });
 
 // src/recipes/button.ts
-var import_dev17 = require("@pandacss/dev");
-var buttonRecipe = (0, import_dev17.defineRecipe)({
+var import_dev5 = require("@pandacss/dev");
+var buttonRecipe = (0, import_dev5.defineRecipe)({
   className: "button",
   jsx: ["MpButton", "mp-button"],
   base: {
@@ -925,7 +570,7 @@ var buttonRecipe = (0, import_dev17.defineRecipe)({
     size: "md"
   }
 });
-var buttonGroupRecipe = (0, import_dev17.defineRecipe)({
+var buttonGroupRecipe = (0, import_dev5.defineRecipe)({
   className: "pixel-button-group",
   jsx: ["MpButtonGroup"],
   base: {
@@ -950,8 +595,8 @@ var buttonGroupRecipe = (0, import_dev17.defineRecipe)({
 });
 
 // src/recipes/input.ts
-var import_dev18 = require("@pandacss/dev");
-var inputSlotRecipe = (0, import_dev18.defineSlotRecipe)({
+var import_dev6 = require("@pandacss/dev");
+var inputSlotRecipe = (0, import_dev6.defineSlotRecipe)({
   className: "input",
   jsx: ["MpInput", "mp-input"],
   slots: ["root", "control", "clear"],
@@ -1070,7 +715,7 @@ var inputSlotRecipe = (0, import_dev18.defineSlotRecipe)({
     variant: "outline"
   }
 });
-var inputGroupSlotRecipe = (0, import_dev18.defineSlotRecipe)({
+var inputGroupSlotRecipe = (0, import_dev6.defineSlotRecipe)({
   className: "input-group",
   jsx: ["MpInputGroup", "mp-input-group"],
   slots: ["root"],
@@ -1086,7 +731,7 @@ var inputGroupSlotRecipe = (0, import_dev18.defineSlotRecipe)({
   compoundVariants: [],
   defaultVariants: {}
 });
-var inputAddonSlotRecipe = (0, import_dev18.defineSlotRecipe)({
+var inputAddonSlotRecipe = (0, import_dev6.defineSlotRecipe)({
   className: "input-addon",
   jsx: ["MpInputAddon", "mp-input-addon"],
   slots: ["root"],
@@ -1151,8 +796,8 @@ var inputAddonSlotRecipe = (0, import_dev18.defineSlotRecipe)({
 });
 
 // src/recipes/select.ts
-var import_dev19 = require("@pandacss/dev");
-var selectSlotRecipe = (0, import_dev19.defineSlotRecipe)({
+var import_dev7 = require("@pandacss/dev");
+var selectSlotRecipe = (0, import_dev7.defineSlotRecipe)({
   className: "select",
   jsx: ["MpSelect", "mp-select"],
   slots: ["root", "control", "clear", "arrow"],
@@ -1264,8 +909,8 @@ var selectSlotRecipe = (0, import_dev19.defineSlotRecipe)({
 });
 
 // src/recipes/text.ts
-var import_dev20 = require("@pandacss/dev");
-var textRecipe = (0, import_dev20.defineRecipe)({
+var import_dev8 = require("@pandacss/dev");
+var textRecipe = (0, import_dev8.defineRecipe)({
   className: "text",
   jsx: ["MpText", "mp-text"],
   base: {
@@ -1321,8 +966,8 @@ var textRecipe = (0, import_dev20.defineRecipe)({
 });
 
 // src/recipes/icon.ts
-var import_dev21 = require("@pandacss/dev");
-var iconRecipe = (0, import_dev21.defineRecipe)({
+var import_dev9 = require("@pandacss/dev");
+var iconRecipe = (0, import_dev9.defineRecipe)({
   className: "icon",
   jsx: ["MpIcon", "mp-icon"],
   base: {
@@ -1353,8 +998,8 @@ var iconRecipe = (0, import_dev21.defineRecipe)({
 });
 
 // src/recipes/spinner.ts
-var import_dev22 = require("@pandacss/dev");
-var spinnerRecipe = (0, import_dev22.defineRecipe)({
+var import_dev10 = require("@pandacss/dev");
+var spinnerRecipe = (0, import_dev10.defineRecipe)({
   className: "spinner",
   jsx: ["MpSpinner", "mp-spinner"],
   base: {
@@ -1379,8 +1024,8 @@ var spinnerRecipe = (0, import_dev22.defineRecipe)({
 });
 
 // src/recipes/accordion.ts
-var import_dev23 = require("@pandacss/dev");
-var accordion = (0, import_dev23.defineSlotRecipe)({
+var import_dev11 = require("@pandacss/dev");
+var accordion = (0, import_dev11.defineSlotRecipe)({
   className: "accordion",
   slots: ["root", "item", "trigger", "content"],
   base: {
@@ -1436,8 +1081,8 @@ var accordion = (0, import_dev23.defineSlotRecipe)({
 });
 
 // src/recipes/popover.ts
-var import_dev24 = require("@pandacss/dev");
-var popoverContentRecipe = (0, import_dev24.defineRecipe)({
+var import_dev12 = require("@pandacss/dev");
+var popoverContentRecipe = (0, import_dev12.defineRecipe)({
   className: "popover",
   jsx: ["MpPopover", "mp-popover"],
   base: {},
@@ -1467,7 +1112,7 @@ var popoverContentRecipe = (0, import_dev24.defineRecipe)({
     isUnstyled: false
   }
 });
-var popoverListRecipe = (0, import_dev24.defineRecipe)({
+var popoverListRecipe = (0, import_dev12.defineRecipe)({
   className: "popover-list",
   jsx: ["MpPopoverList", "mp-popover-list"],
   base: {
@@ -1478,7 +1123,7 @@ var popoverListRecipe = (0, import_dev24.defineRecipe)({
     flexDirection: "column"
   }
 });
-var popoverListItemRecipe = (0, import_dev24.defineRecipe)({
+var popoverListItemRecipe = (0, import_dev12.defineRecipe)({
   className: "popover-list-item",
   jsx: ["MpPopoverListItem", "mp-popover-list-item"],
   base: {
@@ -1515,8 +1160,8 @@ var popoverListItemRecipe = (0, import_dev24.defineRecipe)({
 });
 
 // src/recipes/badge.ts
-var import_dev25 = require("@pandacss/dev");
-var badgeRecipe = (0, import_dev25.defineRecipe)({
+var import_dev13 = require("@pandacss/dev");
+var badgeRecipe = (0, import_dev13.defineRecipe)({
   className: "badge",
   jsx: ["MpBadge", "mp-badge"],
   base: {
@@ -1675,8 +1320,8 @@ var badgeRecipe = (0, import_dev25.defineRecipe)({
 });
 
 // src/recipes/textarea.ts
-var import_dev26 = require("@pandacss/dev");
-var textareaRecipe = (0, import_dev26.defineRecipe)({
+var import_dev14 = require("@pandacss/dev");
+var textareaRecipe = (0, import_dev14.defineRecipe)({
   className: "textarea",
   jsx: ["MpTextarea", "mp-textarea"],
   base: {
@@ -1734,8 +1379,8 @@ var textareaRecipe = (0, import_dev26.defineRecipe)({
 });
 
 // src/recipes/tooltip.ts
-var import_dev27 = require("@pandacss/dev");
-var tooltipRecipe = (0, import_dev27.defineRecipe)({
+var import_dev15 = require("@pandacss/dev");
+var tooltipRecipe = (0, import_dev15.defineRecipe)({
   className: "tooltip",
   jsx: ["MpTooltip", "mp-tooltip"],
   base: {
@@ -1757,8 +1402,8 @@ var tooltipRecipe = (0, import_dev27.defineRecipe)({
 });
 
 // src/recipes/tabs.ts
-var import_dev28 = require("@pandacss/dev");
-var tabListRecipe = (0, import_dev28.defineRecipe)({
+var import_dev16 = require("@pandacss/dev");
+var tabListRecipe = (0, import_dev16.defineRecipe)({
   className: "tab-list",
   jsx: ["MpTabList", "mp-tab-list"],
   base: {
@@ -1774,7 +1419,7 @@ var tabListRecipe = (0, import_dev28.defineRecipe)({
     maxWidth: "full"
   }
 });
-var tabRecipe = (0, import_dev28.defineRecipe)({
+var tabRecipe = (0, import_dev16.defineRecipe)({
   className: "tab",
   jsx: ["MpTab", "mp-tab"],
   base: {
@@ -1870,7 +1515,7 @@ var tabRecipe = (0, import_dev28.defineRecipe)({
     isSelected: false
   }
 });
-var selectedBorderRecipe = (0, import_dev28.defineRecipe)({
+var selectedBorderRecipe = (0, import_dev16.defineRecipe)({
   className: "selected-border",
   jsx: ["MpSelectedBorder", "mp-selected-border"],
   base: {
@@ -1948,18 +1593,227 @@ var selectedBorderRecipe = (0, import_dev28.defineRecipe)({
         }
       }
     }
-  ],
-  defaultVariants: {
-    variantColor: "blue",
-    isSelected: false
+  ],
+  defaultVariants: {
+    variantColor: "blue",
+    isSelected: false
+  }
+});
+
+// src/recipes/checkbox.ts
+var import_dev17 = require("@pandacss/dev");
+var checkboxSlotRecipe = (0, import_dev17.defineSlotRecipe)({
+  className: "checkbox",
+  jsx: ["MpCheckbox", "mp-checkbox"],
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      cursor: "pointer",
+      outline: "none",
+      "&[data-has-description=true]": {
+        alignItems: "flex-start",
+        "& .mp-checkbox__control": {
+          marginTop: "1"
+        }
+      },
+      "& .mp-shared__hidden": {
+        "&:focus + .mp-checkbox__control": {
+          borderColor: "blue.400",
+          boxShadow: "focus"
+        }
+      },
+      _hover: {
+        "& .mp-checkbox__control": {
+          borderColor: "gray.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        "& .mp-checkbox__control": {
+          borderColor: "gray.100 !important",
+          background: "gray.50 !important",
+          boxShadow: "none !important"
+        }
+      },
+      _invalid: {
+        "& .mp-checkbox__control": {
+          borderColor: "red.400",
+          background: "white"
+        }
+      },
+      _checked: {
+        "& .mp-checkbox__control": {
+          borderColor: "blue.400",
+          background: "blue.400"
+        },
+        _hover: {
+          "& .mp-checkbox__control": {
+            borderColor: "blue.400"
+          }
+        }
+      },
+      _indeterminate: {
+        "& .mp-checkbox__control": {
+          borderColor: "blue.400",
+          background: "blue.400"
+        },
+        _hover: {
+          "& .mp-checkbox__control": {
+            borderColor: "blue.400"
+          }
+        }
+      }
+    },
+    control: {
+      flex: "none",
+      transitionDuration: "250ms",
+      transitionProperty: "background, border-color, box-shadow",
+      transitionTimingFunction: "linear",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "18px",
+      height: "18px",
+      borderWidth: "2px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      background: "white"
+    },
+    label: {
+      background: "transparent"
+    }
+  }
+});
+
+// src/recipes/radio.ts
+var import_dev18 = require("@pandacss/dev");
+var radioSlotRecipe = (0, import_dev18.defineSlotRecipe)({
+  className: "radio",
+  jsx: ["MpRadio", "mp-radio"],
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      cursor: "pointer",
+      outline: "none",
+      "&[data-has-description=true]": {
+        alignItems: "flex-start",
+        "& .mp-radio__control": {
+          marginTop: "1"
+        }
+      },
+      "& .mp-shared__hidden": {
+        "&:focus + .mp-radio__control": {
+          borderColor: "blue.400",
+          boxShadow: "focus"
+        }
+      },
+      _hover: {
+        "& .mp-radio__control": {
+          borderColor: "gray.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        "& .mp-radio__control": {
+          borderColor: "gray.100 !important",
+          background: "gray.50 !important",
+          boxShadow: "none !important",
+          "& div": {
+            background: "gray.400"
+          }
+        }
+      },
+      _invalid: {
+        "& .mp-radio__control": {
+          borderColor: "red.400",
+          background: "white"
+        }
+      },
+      _checked: {
+        "& .mp-radio__control": {
+          borderColor: "blue.400",
+          background: "blue.400"
+        },
+        _hover: {
+          "& .mp-radio__control": {
+            borderColor: "blue.400"
+          }
+        }
+      },
+      _indeterminate: {
+        "& .mp-radio__control": {
+          borderColor: "blue.400",
+          background: "blue.400"
+        },
+        _hover: {
+          "& .mp-radio__control": {
+            borderColor: "blue.400"
+          }
+        }
+      }
+    },
+    control: {
+      flex: "none",
+      transitionDuration: "250ms",
+      transitionProperty: "background, border-color, box-shadow",
+      transitionTimingFunction: "linear",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "18px",
+      height: "18px",
+      borderWidth: "2px",
+      borderColor: "gray.100",
+      borderRadius: "full",
+      background: "white",
+      "& div": {
+        width: "2.5",
+        height: "2.5",
+        background: "white",
+        borderRadius: "full"
+      }
+    },
+    label: {
+      background: "transparent"
+    }
+  }
+});
+
+// src/recipes/shared.ts
+var import_dev19 = require("@pandacss/dev");
+var sharedSlotRecipe = (0, import_dev19.defineSlotRecipe)({
+  className: "shared",
+  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
+  slots: ["hidden"],
+  base: {
+    hidden: {
+      clip: "rect(0px, 0px, 0px, 0px)",
+      height: "1px",
+      width: "1px",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      position: "absolute"
+    }
   }
 });
 
-// src/recipes/checkbox.ts
-var import_dev29 = require("@pandacss/dev");
-var checkboxSlotRecipe = (0, import_dev29.defineSlotRecipe)({
-  className: "checkbox",
-  jsx: ["MpCheckbox", "mp-checkbox"],
+// src/recipes/toggle.ts
+var import_dev20 = require("@pandacss/dev");
+var toggleSlotRecipe = (0, import_dev20.defineSlotRecipe)({
+  className: "toggle",
+  jsx: ["MpToggle", "mp-toggle"],
   slots: ["root", "control", "label"],
   base: {
     root: {
@@ -1967,718 +1821,1400 @@ var checkboxSlotRecipe = (0, import_dev29.defineSlotRecipe)({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "2",
+      gap: "3",
       cursor: "pointer",
       outline: "none",
       "&[data-has-description=true]": {
         alignItems: "flex-start",
-        "& .mp-checkbox__control": {
+        "& .mp-toggle__control": {
           marginTop: "1"
         }
       },
       "& .mp-shared__hidden": {
-        "&:focus + .mp-checkbox__control": {
+        "&:focus + .mp-toggle__control": {
           borderColor: "blue.400",
           boxShadow: "focus"
         }
       },
       _hover: {
-        "& .mp-checkbox__control": {
-          borderColor: "gray.400"
+        "& .mp-toggle__control": {
+          borderColor: "gray.400",
+          background: "gray.400"
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        "& .mp-checkbox__control": {
+        "& .mp-toggle__control": {
           borderColor: "gray.100 !important",
           background: "gray.50 !important",
-          boxShadow: "none !important"
+          boxShadow: "none !important",
+          "& div": {
+            background: "gray.100"
+          }
         }
       },
       _invalid: {
-        "& .mp-checkbox__control": {
+        "& .mp-toggle__control": {
           borderColor: "red.400",
-          background: "white"
+          background: "red.400"
         }
       },
       _checked: {
-        "& .mp-checkbox__control": {
+        "& .mp-toggle__control": {
           borderColor: "blue.400",
-          background: "blue.400"
+          background: "blue.400",
+          "& div": {
+            transform: "translateX(var(--mp-sizes-3))"
+          }
         },
         _hover: {
-          "& .mp-checkbox__control": {
-            borderColor: "blue.400"
+          "& .mp-toggle__control": {
+            borderColor: "blue.400",
+            background: "blue.400"
           }
         }
-      },
-      _indeterminate: {
-        "& .mp-checkbox__control": {
-          borderColor: "blue.400",
-          background: "blue.400"
-        },
+      }
+    },
+    control: {
+      flex: "none",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      width: "7",
+      height: "4",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "lg",
+      background: "gray.100",
+      "& div": {
+        transitionDuration: "250ms",
+        transitionProperty: "transform",
+        transitionTimingFunction: "linear",
+        transform: "translateX(2px)",
+        width: "3",
+        height: "3",
+        background: "white",
+        borderRadius: "full"
+      }
+    },
+    label: {
+      background: "transparent"
+    }
+  }
+});
+
+// src/recipes/table.ts
+var import_dev21 = require("@pandacss/dev");
+var tableRecipe = (0, import_dev21.defineRecipe)({
+  className: "table",
+  jsx: ["MpTable", "mp-table"],
+  base: {
+    position: "relative",
+    width: "full",
+    display: "table",
+    borderCollapse: "collapse",
+    borderSpacing: "0px",
+    whiteSpace: "nowrap",
+    "&[data-table-hoverable=true]": {
+      "& tr": {
         _hover: {
-          "& .mp-checkbox__control": {
-            borderColor: "blue.400"
+          "& > td": {
+            backgroundColor: "gray.50"
           }
         }
       }
     },
-    control: {
-      flex: "none",
-      transitionDuration: "250ms",
-      transitionProperty: "background, border-color, box-shadow",
-      transitionTimingFunction: "linear",
-      position: "relative",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "18px",
-      height: "18px",
-      borderWidth: "2px",
-      borderColor: "gray.100",
-      borderRadius: "md",
-      background: "white"
+    "& > thead": {
+      width: "full",
+      backgroundColor: "gray.25",
+      "&[data-table-head-fixed=true]": {
+        position: "sticky",
+        zIndex: "sticky",
+        top: "0",
+        boxShadow: "0px 2px var(--mp-colors-gray-100)"
+      }
+    },
+    "& > tbody": {
+      width: "full"
+    },
+    "& > tr": {
+      width: "full",
+      boxSizing: "border-box",
+      whiteSpace: "nowrap"
+    },
+    "& th, & td": {
+      cursor: "default",
+      paddingLeft: "2",
+      paddingRight: "4",
+      paddingY: "2",
+      height: "12",
+      textStyle: "label.md",
+      textAlign: "left",
+      borderBottom: "sm",
+      borderStyle: "solid",
+      borderColor: "gray.100",
+      transition: "background linear 120ms"
+    },
+    "& th": {
+      fontWeight: "semiBold",
+      backgroundColor: "gray.25"
+    },
+    "& td": {
+      fontWeight: "regular",
+      backgroundColor: "white"
+    },
+    "& th[data-table-cell-fixed=true], & td[data-table-cell-fixed=true]": {
+      position: "sticky",
+      zIndex: "docked",
+      left: "0",
+      right: "0"
+    }
+  }
+});
+var tableContainerRecipe = (0, import_dev21.defineRecipe)({
+  className: "table-container",
+  jsx: ["MpTableContainer", "mp-table-container"],
+  base: {
+    position: "relative",
+    overflow: "auto",
+    "&[data-table-has-left-shadow=true]": {
+      _before: {
+        boxShadow: "inset 10px 0 8px -8px rgba(5, 5, 5, 0.08)"
+      }
+    },
+    "&[data-table-has-right-shadow=true]": {
+      _after: {
+        boxShadow: "inset -10px 0 8px -8px rgba(5, 5, 5, 0.08)"
+      }
+    },
+    _before: {
+      content: '""',
+      position: "absolute",
+      zIndex: "docked",
+      boxShadow: "none",
+      transition: "box-shadow 300ms",
+      insetInlineStart: 0,
+      width: "30px",
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    },
+    _after: {
+      content: '""',
+      position: "absolute",
+      zIndex: "docked",
+      boxShadow: "none",
+      transition: "box-shadow linear 300ms",
+      insetInlineEnd: 0,
+      width: "30px",
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none"
+    }
+  }
+});
+
+// src/recipes/progress.ts
+var import_dev22 = require("@pandacss/dev");
+var progressSlotRecipe = (0, import_dev22.defineSlotRecipe)({
+  className: "progress",
+  jsx: ["MpProgress", "mp-progress"],
+  slots: ["root", "linear", "circularBase", "circularTrack"],
+  base: {
+    root: {
+      position: "relative",
+      width: "full",
+      borderRadius: "100px",
+      background: "gray.100",
+      transition: "all 250ms linear"
+    },
+    linear: {
+      transition: "all 250ms linear",
+      height: "full",
+      borderRadius: "100px",
+      background: "var(--mp-progress-color)",
+      width: "var(--mp-progress-width)"
+    },
+    circularBase: {
+      width: "full",
+      height: "full",
+      borderRadius: "full",
+      background: "conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)"
+    },
+    circularTrack: {
+      width: "calc(100% - 6px)",
+      height: "calc(100% - 6px)",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      backgroundColor: "white",
+      borderRadius: "full"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        linear: {
+          height: "3"
+        }
+      },
+      sm: {
+        linear: {
+          height: "2"
+        }
+      }
+    },
+    variant: {
+      linear: {
+        root: {
+          borderRadius: "100px"
+        }
+      },
+      circular: {
+        root: {
+          borderRadius: "full",
+          width: "22px",
+          height: "22px",
+          background: "transparent",
+          alignSelf: "start"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "linear",
+    size: "md"
+  }
+});
+
+// src/recipes/form-control.ts
+var import_dev23 = require("@pandacss/dev");
+var formControlSlotRecipe = (0, import_dev23.defineSlotRecipe)({
+  className: "form-control",
+  jsx: ["MpFormControl", "mp-form-control"],
+  slots: ["root", "label", "required", "helpText", "errorMessage"],
+  base: {
+    root: {},
+    label: {
+      fontSize: "md",
+      fontWeight: "semiBold",
+      marginBottom: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
+    },
+    required: {
+      color: "red.400",
+      marginLeft: "1"
     },
-    label: {
-      background: "transparent"
+    helpText: {
+      color: "gray.600",
+      fontSize: "sm",
+      marginTop: "1"
+    },
+    errorMessage: {
+      color: "red.400",
+      fontSize: "sm",
+      marginTop: "1",
+      textAlign: "left",
+      verticalAlign: "middle",
+      display: "flex"
     }
-  }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
 });
 
-// src/recipes/radio.ts
-var import_dev30 = require("@pandacss/dev");
-var radioSlotRecipe = (0, import_dev30.defineSlotRecipe)({
-  className: "radio",
-  jsx: ["MpRadio", "mp-radio"],
-  slots: ["root", "control", "label"],
+// src/recipes/input-tag.ts
+var import_dev24 = require("@pandacss/dev");
+var inputTagSlotRecipe = (0, import_dev24.defineSlotRecipe)({
+  className: "input-tag",
+  jsx: ["MpInputTag", "mp-input-tag"],
+  slots: [
+    "root",
+    "trigger",
+    "input",
+    "content",
+    "resetButton",
+    "dropdownButton",
+    "addButton",
+    "loading",
+    "empty",
+    "suggestionWrapper",
+    "suggestionLoading"
+  ],
   base: {
     root: {
       position: "relative",
-      display: "inline-flex",
+      width: "full"
+    },
+    trigger: {
+      overflowY: "auto",
+      position: "relative",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "center",
+      flexWrap: "wrap",
       gap: "2",
-      cursor: "pointer",
-      outline: "none",
-      "&[data-has-description=true]": {
-        alignItems: "flex-start",
-        "& .mp-radio__control": {
-          marginTop: "1"
-        }
-      },
-      "& .mp-shared__hidden": {
-        "&:focus + .mp-radio__control": {
-          borderColor: "blue.400",
-          boxShadow: "focus"
-        }
-      },
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      paddingTop: "2",
+      paddingBottom: "2",
+      paddingLeft: "3",
+      paddingRight: "8",
+      backgroundColor: "white",
+      transition: "all 250ms",
       _hover: {
-        "& .mp-radio__control": {
-          borderColor: "gray.400"
+        borderColor: "gray.400"
+      },
+      _focusVisible: {
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _hover: {
+          borderColor: "blue.400"
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        "& .mp-radio__control": {
-          borderColor: "gray.100 !important",
-          background: "gray.50 !important",
-          boxShadow: "none !important",
-          "& div": {
-            background: "gray.400"
-          }
-        }
+        background: "gray.50"
       },
       _invalid: {
-        "& .mp-radio__control": {
-          borderColor: "red.400",
-          background: "white"
-        }
-      },
-      _checked: {
-        "& .mp-radio__control": {
-          borderColor: "blue.400",
-          background: "blue.400"
-        },
+        borderColor: "red.400",
         _hover: {
-          "& .mp-radio__control": {
-            borderColor: "blue.400"
-          }
+          borderColor: "red.400"
         }
       },
-      _indeterminate: {
-        "& .mp-radio__control": {
-          borderColor: "blue.400",
-          background: "blue.400"
-        },
-        _hover: {
-          "& .mp-radio__control": {
-            borderColor: "blue.400"
-          }
-        }
+      _hasIcon: {
+        paddingRight: "52px"
       }
     },
-    control: {
-      flex: "none",
-      transitionDuration: "250ms",
-      transitionProperty: "background, border-color, box-shadow",
-      transitionTimingFunction: "linear",
-      position: "relative",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: "18px",
-      height: "18px",
-      borderWidth: "2px",
-      borderColor: "gray.100",
-      borderRadius: "full",
-      background: "white",
-      "& div": {
-        width: "2.5",
-        height: "2.5",
-        background: "white",
-        borderRadius: "full"
-      }
+    input: {
+      padding: "0 !important",
+      margin: "0 !important"
     },
-    label: {
-      background: "transparent"
+    content: {
+      maxHeight: "300px",
+      overflowY: "auto"
+    },
+    resetButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2"
+    },
+    dropdownButton: {
+      cursor: "pointer",
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    addButton: {
+      cursor: "pointer",
+      width: "full",
+      px: "3",
+      py: "2",
+      wordBreak: "break-all",
+      textAlign: "center"
+    },
+    loading: {
+      position: "absolute",
+      top: "2",
+      right: "3"
+    },
+    empty: {
+      px: "3",
+      py: "2",
+      width: "full",
+      textAlign: "left"
+    },
+    suggestionWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    },
+    suggestionLoading: {
+      display: "flex",
+      justifyContent: "flex-start",
+      gap: "3",
+      width: "full",
+      height: "9",
+      py: "2",
+      px: "3"
+    }
+  }
+});
+
+// src/recipes/divider.ts
+var import_dev25 = require("@pandacss/dev");
+var dividerRecipe = (0, import_dev25.defineRecipe)({
+  className: "divider",
+  jsx: ["MpDivider", "mp-divider"],
+  base: {
+    border: 0,
+    opacity: 0.6,
+    color: "rgb(208, 214, 221)"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        borderBottom: "0.0625rem solid",
+        height: "auto",
+        marginY: 2
+      },
+      vertical: {
+        borderLeft: "0.0625rem solid",
+        height: "auto",
+        marginX: 2
+      }
     }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    orientation: "horizontal"
   }
 });
 
-// src/recipes/shared.ts
-var import_dev31 = require("@pandacss/dev");
-var sharedSlotRecipe = (0, import_dev31.defineSlotRecipe)({
-  className: "shared",
-  jsx: ["MpCheckbox", "mp-checkbox", "MpRadio", "mp-radio"],
-  slots: ["hidden"],
+// src/recipes/modal.ts
+var import_dev26 = require("@pandacss/dev");
+var modalSlotRecipe = (0, import_dev26.defineSlotRecipe)({
+  className: "modal",
+  description: "The styles for the Modal component",
+  jsx: ["MpModal", "mp-modal"],
+  slots: ["root", "rootChild", "body", "contentRoot", "contentChild", "header", "footer", "body", "overlay", "closeButton"],
   base: {
-    hidden: {
-      clip: "rect(0px, 0px, 0px, 0px)",
-      height: "1px",
-      width: "1px",
-      overflow: "hidden",
-      whiteSpace: "nowrap",
-      position: "absolute"
+    root: {
+      position: "relative",
+      zIndex: "modal"
+    },
+    rootChild: {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    body: {
+      p: 4,
+      flex: 1
+    },
+    contentRoot: {
+      pos: "fixed",
+      left: "0",
+      w: "100%",
+      h: "100%",
+      zIndex: "modal"
+    },
+    contentChild: {
+      outline: 0,
+      width: "100%",
+      position: "relative",
+      display: "flex",
+      flexDir: "column",
+      zIndex: "modal",
+      fontFamily: "body",
+      borderColor: "gray.100",
+      bg: "white",
+      marginInline: "auto"
+    },
+    header: {
+      px: 4,
+      py: 3,
+      position: "relative",
+      fontSize: "md",
+      fontWeight: "semiBold",
+      bg: "background",
+      borderTopLeftRadius: "md",
+      borderTopRightRadius: "md",
+      borderBottom: "solid 1px",
+      borderBottomColor: "gray.100"
+    },
+    closeButton: {
+      position: "absolute",
+      top: "10px",
+      right: "12px",
+      bg: "transparent",
+      borderColor: "transparent"
+    },
+    footer: {
+      display: "flex",
+      pt: 2,
+      px: 4,
+      pb: 4,
+      justifyContent: "flex-end"
+    },
+    overlay: {
+      position: "fixed",
+      bg: "overlay",
+      left: "0",
+      top: "0",
+      w: "100vw",
+      h: "100vh",
+      zIndex: "overlay"
+    }
+  },
+  variants: {
+    full: {
+      true: {
+        contentRoot: {
+          top: "0"
+        },
+        contentChild: {
+          height: "100vh",
+          border: "none",
+          borderRadius: "none"
+        }
+      },
+      false: {
+        contentRoot: {
+          top: "3.75rem"
+        },
+        contentChild: {
+          height: "100%",
+          borderWidth: "1px",
+          borderRadius: "md"
+        }
+      }
     }
+  },
+  defaultVariants: {
+    full: false
   }
 });
 
-// src/recipes/toggle.ts
-var import_dev32 = require("@pandacss/dev");
-var toggleSlotRecipe = (0, import_dev32.defineSlotRecipe)({
-  className: "toggle",
-  jsx: ["MpToggle", "mp-toggle"],
-  slots: ["root", "control", "label"],
+// src/recipes/upload.ts
+var import_dev27 = require("@pandacss/dev");
+var uploadSlotRecipe = (0, import_dev27.defineSlotRecipe)({
+  className: "upload",
+  jsx: ["MpUpload", "mp-upload"],
+  slots: ["root", "resetButton"],
   base: {
     root: {
       position: "relative",
-      display: "inline-flex",
+      width: "full",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "center",
       gap: "3",
-      cursor: "pointer",
+      py: "1",
+      pl: "1",
+      pr: "3",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      backgroundColor: "white",
       outline: "none",
-      "&[data-has-description=true]": {
-        alignItems: "flex-start",
-        "& .mp-toggle__control": {
-          marginTop: "1"
-        }
-      },
-      "& .mp-shared__hidden": {
-        "&:focus + .mp-toggle__control": {
-          borderColor: "blue.400",
-          boxShadow: "focus"
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "gray.400",
+        "& .mp-upload__resetButton": {
+          display: "block"
         }
       },
-      _hover: {
-        "& .mp-toggle__control": {
-          borderColor: "gray.400",
-          background: "gray.400"
+      _focusVisible: {
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _hover: {
+          borderColor: "blue.400"
         }
       },
       _disabled: {
         cursor: "not-allowed",
-        "& .mp-toggle__control": {
-          borderColor: "gray.100 !important",
-          background: "gray.50 !important",
-          boxShadow: "none !important",
-          "& div": {
-            background: "gray.100"
-          }
-        }
+        background: "gray.50"
       },
       _invalid: {
-        "& .mp-toggle__control": {
-          borderColor: "red.400",
-          background: "red.400"
-        }
-      },
-      _checked: {
-        "& .mp-toggle__control": {
-          borderColor: "blue.400",
-          background: "blue.400",
-          "& div": {
-            transform: "translateX(var(--mp-sizes-3))"
-          }
-        },
+        borderColor: "red.400",
         _hover: {
-          "& .mp-toggle__control": {
-            borderColor: "blue.400",
-            background: "blue.400"
-          }
+          borderColor: "red.400"
         }
       }
     },
-    control: {
-      flex: "none",
+    resetButton: {
+      display: "none",
+      cursor: "pointer",
+      position: "absolute",
+      top: "2",
+      right: "3"
+    }
+  }
+});
+var uploadListSlotRecipe = (0, import_dev27.defineSlotRecipe)({
+  className: "upload-list",
+  jsx: ["MpUploadList", "mp-upload-list"],
+  slots: ["root", "titleWrapper", "actionWrapper"],
+  base: {
+    root: {
       position: "relative",
-      display: "inline-flex",
+      width: "full",
+      display: "flex",
       alignItems: "center",
-      justifyContent: "flex-start",
-      width: "7",
-      height: "4",
-      borderWidth: "1px",
-      borderColor: "gray.100",
-      borderRadius: "lg",
-      background: "gray.100",
-      "& div": {
-        transitionDuration: "250ms",
-        transitionProperty: "transform",
-        transitionTimingFunction: "linear",
-        transform: "translateX(2px)",
-        width: "3",
-        height: "3",
-        background: "white",
-        borderRadius: "full"
+      justifyContent: "start",
+      gap: "3",
+      py: "2",
+      px: "1",
+      borderRadius: "md",
+      backgroundColor: "white",
+      transition: "all 250ms",
+      _hover: {
+        backgroundColor: "background"
       }
     },
-    label: {
-      background: "transparent"
+    titleWrapper: {
+      display: "flex",
+      flexDirection: "column",
+      minWidth: "1px"
+    },
+    actionWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      gap: "0.5",
+      ml: "auto",
+      "& > button": {
+        // Remove hover style for Button Icon
+        _hover: {
+          background: "transparent!important",
+          borderColor: "transparent!important"
+        }
+      }
     }
   }
 });
 
-// src/recipes/table.ts
-var import_dev33 = require("@pandacss/dev");
-var tableRecipe = (0, import_dev33.defineRecipe)({
-  className: "table",
-  jsx: ["MpTable", "mp-table"],
+// src/recipes/dropzone.ts
+var import_dev28 = require("@pandacss/dev");
+var dropzoneSlotRecipe = (0, import_dev28.defineSlotRecipe)({
+  className: "dropzone",
+  jsx: ["MpDropzone", "mp-dropzone"],
+  slots: [
+    "root",
+    "wrapper",
+    "box",
+    "logoBox",
+    "productBox",
+    "avatarBox",
+    "overlayWrapper",
+    "overlay",
+    "preview",
+    "overlayPreview",
+    "clearButton"
+  ],
   base: {
-    position: "relative",
-    width: "full",
-    display: "table",
-    borderCollapse: "collapse",
-    borderSpacing: "0px",
-    whiteSpace: "nowrap",
-    "&[data-table-hoverable=true]": {
-      "& tr": {
-        _hover: {
-          "& > td": {
-            backgroundColor: "gray.50"
-          }
-        }
-      }
+    root: {
+      position: "relative",
+      width: "full",
+      height: "full"
     },
-    thead: {
+    wrapper: {
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
       width: "full",
-      backgroundColor: "gray.25",
-      "&[data-table-head-fixed=true]": {
-        position: "sticky",
-        zIndex: "sticky",
-        top: "0",
-        boxShadow: "0px 2px var(--mp-colors-gray-100)"
+      height: "inherit",
+      minHeight: "inherit",
+      borderWidth: "1px",
+      borderColor: "gray.100",
+      borderRadius: "md",
+      borderStyle: "dashed",
+      background: "white",
+      outline: "none",
+      transition: "all 250ms",
+      _hover: {
+        borderColor: "gray.400",
+        "& [data-overlay-preview=true]": {
+          display: "flex"
+        }
+      },
+      _focusVisible: {
+        boxShadow: "focus",
+        borderColor: "blue.400",
+        _hover: {
+          borderColor: "blue.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        background: "gray.50!"
+      },
+      _invalid: {
+        borderColor: "red.400",
+        backgroundColor: "red.50!",
+        _hover: {
+          borderColor: "red.400!"
+        }
       }
     },
-    tbody: {
-      width: "full"
+    box: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2"
     },
-    tr: {
+    logoBox: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
       width: "full",
-      boxSizing: "border-box",
-      whiteSpace: "nowrap"
+      height: "full",
+      borderRadius: "inherit",
+      cursor: "pointer"
     },
-    "th, td": {
-      cursor: "default",
-      paddingLeft: "2",
-      paddingRight: "4",
-      paddingY: "2",
-      height: "12",
-      textStyle: "label.md",
-      textAlign: "left",
-      borderBottom: "sm",
-      borderStyle: "solid",
-      borderColor: "gray.100",
-      transition: "background linear 120ms"
+    productBox: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      width: "full",
+      height: "full",
+      borderRadius: "inherit",
+      cursor: "pointer"
     },
-    th: {
-      fontWeight: "semiBold",
-      backgroundColor: "gray.25"
+    avatarBox: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "full",
+      height: "full",
+      borderRadius: "inherit",
+      cursor: "pointer"
     },
-    td: {
-      fontWeight: "regular",
-      backgroundColor: "white"
+    overlayWrapper: {
+      width: "full",
+      height: "inherit",
+      minHeight: "inherit",
+      borderRadius: "inherit"
     },
-    "th[data-table-cell-fixed=true], td[data-table-cell-fixed=true]": {
-      position: "sticky",
-      zIndex: "docked",
-      left: "0",
-      right: "0"
-    }
-  }
-});
-var tableContainerRecipe = (0, import_dev33.defineRecipe)({
-  className: "table-container",
-  jsx: ["MpTableContainer", "mp-table-container"],
-  base: {
-    position: "relative",
-    overflow: "auto",
-    "&[data-table-has-left-shadow=true]": {
-      _before: {
-        boxShadow: "inset 10px 0 8px -8px rgba(5, 5, 5, 0.08)"
-      }
+    overlay: {
+      position: "absolute",
+      zIndex: "1",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "2",
+      width: "full",
+      height: "full",
+      top: "0",
+      right: "0",
+      backdropFilter: "blur(12px)",
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderColor: "blue.400",
+      borderStyle: "dashed"
     },
-    "&[data-table-has-right-shadow=true]": {
-      _after: {
-        boxShadow: "inset -10px 0 8px -8px rgba(5, 5, 5, 0.08)"
-      }
+    preview: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      height: "full",
+      borderRadius: "inherit"
     },
-    _before: {
-      content: '""',
+    overlayPreview: {
+      display: "none",
+      cursor: "pointer",
       position: "absolute",
-      zIndex: "docked",
-      boxShadow: "none",
-      transition: "box-shadow 300ms",
-      insetInlineStart: 0,
-      width: "30px",
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none"
+      zIndex: "1",
+      width: "full",
+      height: "full",
+      background: "overlay",
+      backdropFilter: "blur(12px)",
+      borderRadius: "inherit",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "2"
     },
-    _after: {
-      content: '""',
+    clearButton: {
+      cursor: "pointer",
       position: "absolute",
-      zIndex: "docked",
-      boxShadow: "none",
-      transition: "box-shadow linear 300ms",
-      insetInlineEnd: 0,
-      width: "30px",
-      top: 0,
-      bottom: 0,
-      pointerEvents: "none"
+      zIndex: "2",
+      background: "white",
+      border: "2px solid white",
+      borderRadius: "full"
     }
   }
 });
 
-// src/recipes/progress.ts
-var import_dev34 = require("@pandacss/dev");
-var progressSlotRecipe = (0, import_dev34.defineSlotRecipe)({
-  className: "progress",
-  jsx: ["MpProgress", "mp-progress"],
-  slots: ["root", "linear", "circularBase", "circularTrack"],
+// src/recipes/banner.ts
+var import_dev29 = require("@pandacss/dev");
+var bannerSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+  className: "banner",
+  jsx: ["MpBanner", "mp-banner"],
+  slots: ["root", "body"],
   base: {
     root: {
+      display: "flex",
       position: "relative",
-      width: "full",
-      borderRadius: "100px",
-      background: "gray.100",
-      transition: "all 250ms linear"
-    },
-    linear: {
-      transition: "all 250ms linear",
-      height: "full",
-      borderRadius: "100px",
-      background: "var(--mp-progress-color)",
-      width: "var(--mp-progress-width)"
-    },
-    circularBase: {
-      width: "full",
-      height: "full",
-      borderRadius: "full",
-      background: "conic-gradient(var(--mp-progress-color) var(--mp-progress-width), var(--mp-colors-gray-100) 0deg)"
+      alignItems: "var(--mp-banner--align-items)",
+      borderRadius: "md",
+      paddingY: "var(--mp-banner--padding-y)",
+      paddingX: "var(--mp-banner--padding-x)"
     },
-    circularTrack: {
-      width: "calc(100% - 6px)",
-      height: "calc(100% - 6px)",
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      backgroundColor: "white",
-      borderRadius: "full"
+    body: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "full"
     }
   },
   variants: {
-    size: {
-      md: {
-        linear: {
-          height: "3"
-        }
-      },
-      sm: {
-        linear: {
-          height: "2"
-        }
-      }
-    },
     variant: {
-      linear: {
-        root: {
-          borderRadius: "100px"
-        }
+      info: {
+        root: { backgroundColor: "blue.50" }
       },
-      circular: {
-        root: {
-          borderRadius: "full",
-          width: "22px",
-          height: "22px",
-          background: "transparent",
-          alignSelf: "start"
-        }
+      success: {
+        root: { backgroundColor: "green.50" }
+      },
+      danger: {
+        root: { backgroundColor: "red.50" }
+      },
+      warning: {
+        root: { backgroundColor: "orange.50" }
       }
     }
   },
+  compoundVariants: [],
   defaultVariants: {
-    variant: "linear",
-    size: "md"
+    variant: "info"
   }
 });
-
-// src/recipes/form-control.ts
-var import_dev35 = require("@pandacss/dev");
-var formControlSlotRecipe = (0, import_dev35.defineSlotRecipe)({
-  className: "form-control",
-  jsx: ["MpFormControl", "mp-form-control"],
-  slots: ["root", "label", "required", "helpText", "errorMessage"],
+var bannerTitleRecipe = (0, import_dev29.defineRecipe)({
+  className: "banner-title",
+  jsx: ["MpBannerTitle", "mp-banner-title"],
   base: {
-    root: {},
-    label: {
-      fontSize: "md",
-      fontWeight: "semiBold",
-      marginBottom: "1",
-      textAlign: "left",
-      verticalAlign: "middle",
-      display: "flex"
-    },
-    required: {
-      color: "red.400",
-      marginLeft: "1"
-    },
-    helpText: {
-      color: "gray.600",
-      fontSize: "sm",
-      marginTop: "1"
+    fontFamily: "body",
+    fontSize: "md",
+    fontWeight: "semiBold",
+    lineHeight: "md",
+    letterSpacing: "normal",
+    color: "dark",
+    marginTop: "0.5",
+    marginBottom: "1.5"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var bannerDescriptionRecipe = (0, import_dev29.defineRecipe)({
+  className: "banner-description",
+  jsx: ["MpBannerDescription", "mp-banner-description"],
+  base: {
+    fontFamily: "body",
+    fontSize: "md",
+    fontWeight: "regular",
+    lineHeight: "md",
+    letterSpacing: "normal",
+    color: "dark"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var bannerIconSlotRecipe = (0, import_dev29.defineSlotRecipe)({
+  className: "banner-icon",
+  jsx: ["MpBannerIcon", "mp-banner-icon"],
+  slots: ["root", "custom"],
+  base: {
+    root: {
+      marginRight: "3"
     },
-    errorMessage: {
-      color: "red.400",
-      fontSize: "sm",
-      marginTop: "1",
-      textAlign: "left",
+    custom: {
+      flexShrink: "0",
+      backfaceVisibility: "hidden",
+      width: "6",
+      height: "6",
+      display: "inline-block",
       verticalAlign: "middle",
-      display: "flex"
+      marginRight: "3",
+      color: "var(--mp-banner-icon--color)"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var bannerLinkRecipe = (0, import_dev29.defineRecipe)({
+  className: "banner-link",
+  jsx: ["MpBannerLink", "mp-banner-link"],
+  base: {
+    display: "flex",
+    gap: "4",
+    marginBottom: "var(--mp-banner-link--margin-bottom)",
+    marginTop: "var(--mp-banner-link--margin-top)"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var bannerCloseButtonRecipe = (0, import_dev29.defineRecipe)({
+  className: "banner-close-button",
+  jsx: ["MpBannerCloseButton", "mp-banner-close-button"],
+  base: {
+    position: "absolute",
+    top: "var(--mp-banner-close-button--top)",
+    right: "var(--mp-banner-close-button--right)",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "6",
+    height: "6",
+    cursor: "pointer"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/index.ts
+var recipes = {
+  buttonRecipe,
+  buttonGroupRecipe,
+  textRecipe,
+  iconRecipe,
+  spinnerRecipe,
+  popoverContentRecipe,
+  popoverListRecipe,
+  popoverListItemRecipe,
+  badgeRecipe,
+  textareaRecipe,
+  tooltipRecipe,
+  tabListRecipe,
+  tabRecipe,
+  selectedBorderRecipe,
+  tableRecipe,
+  tableContainerRecipe,
+  dividerRecipe,
+  bannerTitleRecipe,
+  bannerDescriptionRecipe,
+  bannerLinkRecipe,
+  bannerCloseButtonRecipe
+};
+var slotRecipes = {
+  accordion,
+  checkboxSlotRecipe,
+  radioSlotRecipe,
+  sharedSlotRecipe,
+  progressSlotRecipe,
+  toggleSlotRecipe,
+  tagSlotRecipe,
+  inputSlotRecipe,
+  inputGroupSlotRecipe,
+  inputAddonSlotRecipe,
+  avatarSlotRecipe,
+  avatarGroupSlotRecipe,
+  selectSlotRecipe,
+  formControlSlotRecipe,
+  inputTagSlotRecipe,
+  modalSlotRecipe,
+  uploadSlotRecipe,
+  uploadListSlotRecipe,
+  dropzoneSlotRecipe,
+  bannerSlotRecipe,
+  bannerIconSlotRecipe
+};
+
+// src/text-styles.ts
+var import_dev30 = require("@pandacss/dev");
+var textStyles = (0, import_dev30.defineTextStyles)({
+  overline: { value: { fontSize: "xs", lineHeight: "xs" } },
+  body: {
+    sm: { value: { fontSize: "sm", lineHeight: "2xl" } },
+    md: { value: { fontSize: "md", lineHeight: "3xl" } }
+  },
+  label: {
+    sm: { value: { fontSize: "sm", lineHeight: "sm" } },
+    md: { value: { fontSize: "md", lineHeight: "lg" } }
+  },
+  h3: {
+    value: {
+      fontSize: "lg",
+      lineHeight: "xl",
+      fontWeight: "semiBold !important"
     }
   },
-  variants: {},
-  compoundVariants: [],
-  defaultVariants: {}
+  h2: {
+    value: {
+      fontSize: "xl",
+      lineHeight: "md",
+      fontWeight: "semiBold !important"
+    }
+  },
+  h1: {
+    value: {
+      fontSize: "2xl",
+      lineHeight: "sm",
+      fontWeight: "semiBold !important"
+    }
+  }
 });
 
-// src/recipes/input-tag.ts
-var import_dev36 = require("@pandacss/dev");
-var inputTagSlotRecipe = (0, import_dev36.defineSlotRecipe)({
-  className: "input-tag",
-  jsx: ["MpInputTag", "mp-input-tag"],
-  slots: [
-    "root",
-    "trigger",
-    "input",
-    "content",
-    "resetButton",
-    "dropdownButton",
-    "addButton",
-    "loading",
-    "empty",
-    "suggestionWrapper",
-    "suggestionLoading"
-  ],
-  base: {
-    root: {
-      position: "relative",
-      width: "full"
-    },
-    trigger: {
-      overflowY: "auto",
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "wrap",
-      gap: "2",
-      borderWidth: "1px",
-      borderColor: "gray.100",
-      borderRadius: "md",
-      paddingTop: "2",
-      paddingBottom: "2",
-      paddingLeft: "3",
-      paddingRight: "8",
-      backgroundColor: "white",
-      transition: "all 250ms",
-      _hover: {
-        borderColor: "gray.400"
-      },
-      _focusVisible: {
-        boxShadow: "focus",
-        borderColor: "blue.400",
-        _hover: {
-          borderColor: "blue.400"
-        }
-      },
-      _disabled: {
-        cursor: "not-allowed",
-        background: "gray.50"
-      },
-      _invalid: {
-        borderColor: "red.400",
-        _hover: {
-          borderColor: "red.400"
-        }
-      },
-      _hasIcon: {
-        paddingRight: "52px"
-      }
-    },
-    input: {
-      padding: "0 !important",
-      margin: "0 !important"
-    },
-    content: {
-      maxHeight: "300px",
-      overflowY: "auto"
-    },
-    resetButton: {
-      cursor: "pointer",
-      position: "absolute",
-      top: "2"
-    },
-    dropdownButton: {
-      cursor: "pointer",
-      position: "absolute",
-      top: "2",
-      right: "3"
-    },
-    addButton: {
-      cursor: "pointer",
-      width: "full",
-      px: "3",
-      py: "2",
-      wordBreak: "break-all",
-      textAlign: "center"
-    },
-    loading: {
-      position: "absolute",
-      top: "2",
-      right: "3"
+// src/tokens/index.ts
+var import_dev41 = require("@pandacss/dev");
+
+// src/tokens/borders.ts
+var import_dev31 = require("@pandacss/dev");
+var borders = import_dev31.defineTokens.borders({
+  none: { value: "none" },
+  sm: { value: "1px" },
+  md: { value: "1.5px" },
+  lg: { value: "2px" }
+});
+
+// src/tokens/colors.ts
+var import_dev32 = require("@pandacss/dev");
+var colors = import_dev32.defineTokens.colors({
+  currentcolor: {
+    value: "currentcolor",
+    description: "Need to add this for Icon usage"
+  },
+  dark: { value: "#232933", description: "Default or primary text color" },
+  white: {
+    value: "#FFFFFF",
+    description: "Background color in components such as Card, Modal, and Popover"
+  },
+  background: { value: "#F1F5F9", description: "For use as background page" },
+  overlay: {
+    value: "rgba(22, 26, 32, 0.8)",
+    description: "For use as overlay"
+  },
+  brand: {
+    capital: { value: "#2F5573", description: "Mekari Capital" },
+    esign: { value: "#00C853", description: "Mekari e-Sign" },
+    expense: { value: "#183883", description: "Mekari Expense" },
+    flex: { value: "#7C4DFF", description: "Mekari Flex" },
+    jurnal: { value: "#40C3FF", description: "Mekari Jurnal" },
+    klikpajak: { value: "#FF9100", description: "Mekari Klikpajak" },
+    mekari: { value: "#651FFF", description: "Mekari" },
+    qontak: { value: "#2979FF", description: "Mekari Qontak" },
+    talenta: { value: "#F22929", description: "Mekari Talenta" },
+    university: { value: "#448AFF", description: "Mekari University" }
+  },
+  whiteAlpha: {
+    50: { value: "rgba(255, 255, 255, 0.04)" },
+    100: { value: "rgba(255, 255, 255, 0.06)" },
+    200: { value: "rgba(255, 255, 255, 0.08)" },
+    300: { value: "rgba(255, 255, 255, 0.16)" },
+    400: { value: "rgba(255, 255, 255, 0.24)" },
+    500: { value: "rgba(255, 255, 255, 0.36)" },
+    600: { value: "rgba(255, 255, 255, 0.48)" },
+    700: { value: "rgba(255, 255, 255, 0.64)" },
+    800: { value: "rgba(255, 255, 255, 0.80)" },
+    900: { value: "rgba(255, 255, 255, 0.92)" }
+  },
+  blackAplpha: {
+    50: { value: "rgba(0, 0, 0, 0.04)" },
+    100: { value: "rgba(0, 0, 0, 0.06)" },
+    200: { value: "rgba(0, 0, 0, 0.08)" },
+    300: { value: "rgba(0, 0, 0, 0.16)" },
+    400: { value: "rgba(0, 0, 0, 0.24)" },
+    500: { value: "rgba(0, 0, 0, 0.36)" },
+    600: { value: "rgba(0, 0, 0, 0.48)" },
+    700: { value: "rgba(0, 0, 0, 0.64)" },
+    800: { value: "rgba(0, 0, 0, 0.80)" },
+    900: { value: "rgba(0, 0, 0, 0.92)" }
+  },
+  gray: {
+    25: {
+      value: "#F8F9FB",
+      description: "Background color in table header component"
     },
-    empty: {
-      px: "3",
-      py: "2",
-      width: "full",
-      textAlign: "left"
+    50: {
+      value: "#EDF0F2",
+      description: "Disabled background color in components such as Input and Select backgrounds"
     },
-    suggestionWrapper: {
-      display: "flex",
-      flexDirection: "column",
-      width: "100%"
+    100: { value: "#D0D6DD", description: "Default stroke color or divider" },
+    400: {
+      value: "#8B95A5",
+      description: "Disabled and placeholder text color, icon or in components such as hover state Input, Select and stroke in Popover"
     },
-    suggestionLoading: {
-      display: "flex",
-      justifyContent: "flex-start",
-      gap: "3",
-      width: "full",
-      height: "9",
-      py: "2",
-      px: "3"
+    600: {
+      value: "#626B79",
+      description: "Description text color and default color for outline icon"
     }
+  },
+  blue: {
+    50: { value: "#EAECFB" },
+    100: { value: "#D5DEFF" },
+    400: { value: "#4B61DD" },
+    500: { value: "#1C44D5" },
+    700: { value: "#0031BE" }
+  },
+  red: {
+    50: { value: "#FDECEE" },
+    400: { value: "#DA473F" },
+    500: { value: "#C83E39" },
+    700: { value: "#AB3129" }
+  },
+  green: {
+    50: { value: "#E8F5EB" },
+    400: { value: "#68BE79" },
+    500: { value: "#4FB262" },
+    700: { value: "#3C914D" }
+  },
+  orange: {
+    50: { value: "#FBF3DD" },
+    400: { value: "#E0AB00" },
+    500: { value: "#DE9400" },
+    700: { value: "#DB8000" }
+  },
+  sky: {
+    100: { value: "#60A5FA" },
+    400: { value: "#3B82F6" }
+  },
+  teal: {
+    100: { value: "#2DD4BF" },
+    400: { value: "#14B8A6" }
+  },
+  violet: {
+    100: { value: "#A78BFA" },
+    400: { value: "#8B5CF6" }
+  },
+  amber: {
+    100: { value: "#FBBF24" },
+    400: { value: "#F59E0B" }
+  },
+  rose: {
+    100: { value: "#F87171" },
+    400: { value: "#EF4444" }
+  },
+  stone: {
+    100: { value: "#A1A1AA" },
+    400: { value: "#71717A" }
+  },
+  lime: {
+    100: { value: "#A3E635" },
+    400: { value: "#84CC16" }
+  },
+  pink: {
+    100: { value: "#F472B6" },
+    400: { value: "#EC4899" }
+  },
+  apricot: {
+    100: { value: "#FB923C" },
+    400: { value: "#F97316" }
+  },
+  aqua: {
+    100: { value: "#22D3EE" },
+    400: { value: "#06B6D4" }
+  },
+  leaf: {
+    100: { value: "#4ADE80" },
+    400: { value: "#22C55E" }
+  },
+  fuchsia: {
+    100: { value: "#E879F9" },
+    400: { value: "#D946EF" }
+  },
+  ice: {
+    50: { value: "#E0EEFF" },
+    100: { value: "#B4D3F2" }
+  },
+  ash: {
+    100: { value: "#E7EDF5" }
   }
 });
 
-// src/recipes/divider.ts
-var import_dev37 = require("@pandacss/dev");
-var dividerRecipe = (0, import_dev37.defineRecipe)({
-  className: "divider",
-  jsx: ["MpDivider", "mp-divider"],
-  base: {
-    border: 0,
-    opacity: 0.6,
-    color: "rgb(208, 214, 221)"
+// src/tokens/durations.ts
+var import_dev33 = require("@pandacss/dev");
+var durations = import_dev33.defineTokens.durations({
+  slow: { value: "100ms" },
+  normal: { value: "250ms" },
+  fast: { value: "300ms" }
+});
+
+// src/tokens/opacity.ts
+var import_dev34 = require("@pandacss/dev");
+var opacity = import_dev34.defineTokens.opacity({
+  0: { value: 0 },
+  40: { value: 0.4 },
+  60: { value: 0.6 },
+  100: { value: 1 }
+});
+
+// src/tokens/radii.ts
+var import_dev35 = require("@pandacss/dev");
+var radii = import_dev35.defineTokens.radii({
+  none: { value: "0" },
+  xs: { value: "0.125rem", description: "2px" },
+  sm: { value: "0.25rem", description: "4px" },
+  md: { value: "0.375rem", description: "6px" },
+  lg: { value: "0.5rem", description: "8px" },
+  xl: { value: "0.75rem", description: "12px" },
+  full: { value: "50%" }
+});
+
+// src/tokens/shadows.ts
+var import_dev36 = require("@pandacss/dev");
+var shadows = import_dev36.defineTokens.shadows({
+  xs: {
+    value: ["0px 0px 2px 0px rgba(0, 0, 0, 0.12)", "0px 2px 4px 0px rgba(0, 0, 0, 0.14)"]
   },
-  variants: {
-    orientation: {
-      horizontal: {
-        borderBottom: "0.0625rem solid",
-        height: "auto",
-        marginY: 2
-      },
-      vertical: {
-        borderLeft: "0.0625rem solid",
-        height: "auto",
-        marginX: 2
-      }
-    }
+  sm: {
+    value: ["0px 4px 6px -2px rgba(0, 0, 0, 0.05)", "0px 10px 15px -3px rgba(0, 0, 0, 0.10)"]
   },
-  compoundVariants: [],
-  defaultVariants: {
-    orientation: "horizontal"
+  md: {
+    value: ["0px 10px 10px -5px rgba(0, 0, 0, 0.04)", "0px 20px 25px -5px rgba(0, 0, 0, 0.10)"]
+  },
+  lg: {
+    value: ["0px 6px 16px 0px rgba(0, 0, 0, 0.08)", "0px 9px 28px 8px rgba(0, 0, 0, 0.05)"]
+  },
+  focus: {
+    value: "0 0 0 3px rgba(224, 238, 255, 1)"
+  },
+  xl: {
+    value: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+  },
+  "2xl": {
+    value: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
+  },
+  outline: {
+    value: "0 0 0 3px #E0EEFF"
+  },
+  "outline-tab": {
+    value: "0 0 0 2px #E0EEFF"
+  },
+  outer: {
+    value: "0 0 0 3px rgba(224, 238, 255, 1)"
+  },
+  inner: {
+    value: "inset 0 2px 4px 0 rgba( 0, 0, 0, 0.06)"
+  },
+  none: {
+    value: "none"
   }
 });
 
-// src/recipes/index.ts
-var recipes = {
-  buttonRecipe,
-  buttonGroupRecipe,
-  textRecipe,
-  iconRecipe,
-  spinnerRecipe,
-  popoverContentRecipe,
-  popoverListRecipe,
-  popoverListItemRecipe,
-  badgeRecipe,
-  textareaRecipe,
-  tooltipRecipe,
-  tabListRecipe,
-  tabRecipe,
-  selectedBorderRecipe,
-  tableRecipe,
-  tableContainerRecipe,
-  dividerRecipe
-};
-var slotRecipes = {
-  accordion,
-  checkboxSlotRecipe,
-  radioSlotRecipe,
-  sharedSlotRecipe,
-  progressSlotRecipe,
-  toggleSlotRecipe,
-  tagSlotRecipe,
-  inputSlotRecipe,
-  inputGroupSlotRecipe,
-  inputAddonSlotRecipe,
-  avatarSlotRecipe,
-  avatarGroupSlotRecipe,
-  selectSlotRecipe,
-  formControlSlotRecipe,
-  inputTagSlotRecipe
-};
+// src/tokens/sizes.ts
+var import_dev37 = require("@pandacss/dev");
+var sizes = import_dev37.defineTokens.sizes({
+  0: { value: "0", description: "0px" },
+  0.25: { value: "0.0625rem", description: "1px" },
+  0.5: { value: "0.125rem", description: "2px" },
+  1: { value: "0.25rem", description: "4px" },
+  2: { value: "0.5rem", description: "8px" },
+  2.5: { value: "0.625rem", description: "10px" },
+  3: { value: "0.75rem", description: "12px" },
+  4: { value: "1rem", description: "16px" },
+  5: { value: "1.25rem", description: "20px" },
+  6: { value: "1.5rem", description: "24px" },
+  7: { value: "1.75rem", description: "28px" },
+  7.5: { value: "1.875rem", description: "30px" },
+  8: { value: "2rem", description: "32px" },
+  9: { value: "2.25rem", description: "36px" },
+  9.5: { value: "2.375rem", description: "38px" },
+  10: { value: "2.5rem", description: "40px" },
+  11: { value: "2.75rem", description: "44px" },
+  12: { value: "3rem", description: "48px" },
+  16: { value: "4rem", description: "64px" },
+  20: { value: "5rem", description: "80px" },
+  22: { value: "5.5rem", description: "96px" },
+  56: { value: "14rem", description: "224px" },
+  65: { value: "17.5rem", description: "280px" },
+  full: { value: "100%" },
+  sm: { value: "24rem" }
+});
 
-// src/breakpoints.ts
-var breakpoints = {
-  sm: "22.5em",
-  md: "48em",
-  lg: "64em",
-  xl: "80em"
-};
+// src/tokens/spacing.ts
+var import_dev38 = require("@pandacss/dev");
+var spacing = import_dev38.defineTokens.spacing({
+  0: { value: "0", description: "0px" },
+  0.5: { value: "0.125rem", description: "2px" },
+  1: { value: "0.25rem", description: "4px" },
+  1.5: { value: "0.375rem", description: "6px" },
+  2: { value: "0.5rem", description: "8px" },
+  3: { value: "0.75rem", description: "12px" },
+  4: { value: "1rem", description: "16px" },
+  5: { value: "1.3rem", description: "20px" },
+  6: { value: "1.5rem", description: "24px" },
+  8: { value: "2rem", description: "32px" },
+  12: { value: "3rem", description: "48px" },
+  16: { value: "4rem", description: "64px" },
+  20: { value: "5rem", description: "80px" },
+  24: { value: "6rem", description: "96px" },
+  32: { value: "8rem", description: "128px" },
+  40: { value: "10rem", description: "160px" },
+  64: { value: "16rem", description: "256px" }
+});
+
+// src/tokens/z-index.ts
+var import_dev39 = require("@pandacss/dev");
+var zIndex = import_dev39.defineTokens.zIndex({
+  hide: { value: -1 },
+  base: { value: 0 },
+  docked: { value: 10 },
+  sticky: { value: 1100 },
+  overlay: { value: 1300 },
+  modal: { value: 1400 },
+  popover: { value: 1500 },
+  tooltip: { value: 1800 }
+});
+
+// src/tokens/typography.ts
+var import_dev40 = require("@pandacss/dev");
+var fonts = import_dev40.defineTokens.fonts({
+  body: {
+    value: '"inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
+  },
+  mono: {
+    value: 'SFMono-Regular, Menlo, Monaco,Consolas, "Liberation Mono", "Courier New", monospace'
+  }
+});
+var fontSizes = import_dev40.defineTokens.fontSizes({
+  xs: { value: "0.625rem", description: "10px" },
+  sm: { value: "0.75rem", description: "12px" },
+  md: { value: "0.875rem", description: "14px" },
+  lg: { value: "1rem", description: "16px" },
+  xl: { value: "1.25rem", description: "20px" },
+  "2xl": { value: "1.5rem", description: "24px" }
+});
+var fontWeights = import_dev40.defineTokens.fontWeights({
+  regular: { value: "400" },
+  semiBold: { value: "600" },
+  bold: { value: "800" }
+});
+var lineHeights = import_dev40.defineTokens.lineHeights({
+  xs: { value: 1.2, description: "12px/10px" },
+  sm: { value: 1.34, description: "16px/12px or 32px/24px" },
+  md: { value: 1.4, description: "28px/20px" },
+  lg: { value: 1.429, description: "20px/14px" },
+  xl: { value: 1.5, description: "24px/16px" },
+  "2xl": { value: 1.67, description: "20px/12px" },
+  "3xl": { value: 1.71, description: "24px/14px" }
+});
+var letterSpacings = import_dev40.defineTokens.letterSpacings({
+  tighter: { value: "-0.05em" },
+  tight: { value: "-0.025em" },
+  normal: { value: "0" },
+  wide: { value: "0.025em" },
+  wider: { value: "0.05em" },
+  widest: { value: "0.1em" }
+});
+
+// src/tokens/index.ts
+var tokens = (0, import_dev41.defineTokens)({
+  borders,
+  colors,
+  durations,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+  opacity,
+  radii,
+  shadows,
+  sizes,
+  spacing,
+  zIndex
+});
 
 // src/index.ts
-var preset = (0, import_dev38.definePreset)({
+var preset = (0, import_dev42.definePreset)({
   theme: {
     extend: {
       breakpoints,