@mekari/pixel3-theme 0.0.0

package/dist/index.mjs

@@ -0,0 +1,2488 @@
+// src/index.ts
+import { definePreset } from "@pandacss/dev";
+
+// src/conditions.ts
+var conditions = {
+  extend: {
+    disabled: "&:is(:disabled, [disabled], [aria-disabled=true], [data-disabled])",
+    invalid: "&:is(:invalid, [aria-invalid=true], [data-invalid])",
+    checked: "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
+    indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
+    closed: "&:is([data-state=closed])",
+    open: "&:is([open], [data-state=open])",
+    hidden: "&:is([hidden])",
+    collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
+    loading: "& > [data-loading=true], &:is([data-loading], [aria-busy=true])",
+    hasIcon: "&[data-button-icon=true]",
+    active: "&[data-active=true], [data-active]",
+    highlight: "&[data-highlight=true], [data-highlight]",
+    hasBorder: "&[data-has-border=true]",
+    hasBackground: "&[data-has-background=true]",
+    isFullWidth: "&[data-is-full-width=true]",
+    placementLeft: "&[data-placement=left]",
+    placementRight: "&[data-placement=right]"
+  }
+};
+
+// src/global-css.ts
+import { defineGlobalStyles } from "@pandacss/dev";
+var globalCss = defineGlobalStyles({
+  html: {
+    MozOsxFontSmoothing: "grayscale",
+    textRendering: "optimizeLegibility",
+    WebkitFontSmoothing: "antialiased",
+    WebkitTextSizeAdjust: "100%"
+  },
+  body: {
+    background: "var(--mp-colors-white)",
+    color: "var(--mp-colors-dark)",
+    fontFamily: "var(--mp-fonts-body)",
+    fontSize: "14px",
+    _dark: {
+      colorScheme: "dark"
+    }
+  },
+  "*, *::before, *::after": {
+    borderStyle: "solid",
+    boxSizing: "border-box"
+  }
+});
+
+// src/tokens/index.ts
+import { defineTokens as defineTokens11 } from "@pandacss/dev";
+
+// src/tokens/borders.ts
+import { defineTokens } from "@pandacss/dev";
+var borders = defineTokens.borders({
+  none: { value: "none" },
+  sm: { value: "1px" },
+  md: { value: "1.5px" },
+  lg: { value: "2px" }
+});
+
+// src/tokens/colors.ts
+import { defineTokens as defineTokens2 } from "@pandacss/dev";
+var colors = defineTokens2.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" }
+  },
+  gray: {
+    25: {
+      value: "#F8F9FB",
+      description: "Background color in table header component"
+    },
+    50: {
+      value: "#EDF0F2",
+      description: "Disabled background color in components such as Input and Select backgrounds"
+    },
+    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"
+    },
+    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/tokens/durations.ts
+import { defineTokens as defineTokens3 } from "@pandacss/dev";
+var durations = defineTokens3.durations({
+  slow: { value: "100ms" },
+  normal: { value: "250ms" },
+  fast: { value: "300ms" }
+});
+
+// src/tokens/opacity.ts
+import { defineTokens as defineTokens4 } from "@pandacss/dev";
+var opacity = defineTokens4.opacity({
+  0: { value: 0 },
+  40: { value: 0.4 },
+  60: { value: 0.6 },
+  100: { value: 1 }
+});
+
+// src/tokens/radii.ts
+import { defineTokens as defineTokens5 } from "@pandacss/dev";
+var radii = defineTokens5.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
+import { defineTokens as defineTokens6 } from "@pandacss/dev";
+var shadows = defineTokens6.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
+import { defineTokens as defineTokens7 } from "@pandacss/dev";
+var sizes = defineTokens7.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" },
+  65: { value: "17.5rem", description: "280px" },
+  full: { value: "100%" }
+});
+
+// src/tokens/spacing.ts
+import { defineTokens as defineTokens8 } from "@pandacss/dev";
+var spacing = defineTokens8.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
+import { defineTokens as defineTokens9 } from "@pandacss/dev";
+var zIndex = defineTokens9.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
+import { defineTokens as defineTokens10 } from "@pandacss/dev";
+var fonts = defineTokens10.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 = defineTokens10.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 = defineTokens10.fontWeights({
+  regular: { value: "400" },
+  semiBold: { value: "600" },
+  bold: { value: "800" }
+});
+var lineHeights = defineTokens10.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 = defineTokens10.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 = defineTokens11({
+  borders,
+  colors,
+  durations,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  letterSpacings,
+  opacity,
+  radii,
+  shadows,
+  sizes,
+  spacing,
+  zIndex
+});
+
+// src/text-styles.ts
+import { defineTextStyles } from "@pandacss/dev";
+var textStyles = 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
+import { defineKeyframes } from "@pandacss/dev";
+var keyframes = 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
+import { defineSlotRecipe } from "@pandacss/dev";
+var tagSlotRecipe = defineSlotRecipe({
+  className: "tag",
+  jsx: ["MpTag", "mp-tag"],
+  slots: ["root", "close"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      userSelect: "none",
+      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
+import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
+var avatarSlotRecipe = defineSlotRecipe2({
+  className: "avatar",
+  jsx: ["MpAvatar", "mp-avatar"],
+  slots: ["root", "fallback", "image", "icon"],
+  base: {
+    root: {
+      color: "white",
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      verticalAlign: "top",
+      flexShrink: "0",
+      fontWeight: "semiBold",
+      textTransform: "uppercase",
+      userSelect: "none",
+      backgroundColor: "var(--mp-avatar--background-color)",
+      borderColor: "var(--mp-avatar--border-color)",
+      marginLeft: "var(--mp-avatar--margin-left)",
+      cursor: "var(--mp-avatar--cursor)",
+      _hasBorder: {
+        borderWidth: "0.125rem"
+      }
+    },
+    fallback: {
+      width: "100%",
+      height: "100%",
+      visibility: "var(--mp-avatar--visibility)",
+      display: "var(--mp-avatar--display)"
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    }
+  },
+  variants: {
+    variant: {
+      square: {
+        root: { borderRadius: "md" },
+        image: { borderRadius: "md" }
+      },
+      circle: {
+        root: { borderRadius: "full" },
+        image: { borderRadius: "full" }
+      }
+    },
+    variantColor: {
+      gray: {
+        root: { backgroundColor: "gray.50" }
+      },
+      sky: {
+        root: { backgroundColor: "sky.400" }
+      },
+      teal: {
+        root: { backgroundColor: "teal.400" }
+      },
+      violet: {
+        root: { backgroundColor: "violet.400" }
+      },
+      amber: {
+        root: { backgroundColor: "amber.400" }
+      },
+      rose: {
+        root: { backgroundColor: "rose.400" }
+      },
+      stone: {
+        root: { backgroundColor: "stone.400" }
+      },
+      lime: {
+        root: { backgroundColor: "lime.400" }
+      },
+      pink: {
+        root: { backgroundColor: "pink.400" }
+      }
+    },
+    size: {
+      sm: {
+        root: { width: "6", height: "6", fontSize: "xs" },
+        icon: { width: "4!", height: "4!" }
+      },
+      md: {
+        root: { width: "8", height: "8", fontSize: "sm" },
+        icon: { width: "5!", height: "5!" }
+      },
+      lg: {
+        root: { width: "12", height: "12", fontSize: "lg" },
+        icon: { width: "8!", height: "8!" }
+      },
+      xl: {
+        root: { width: "20", height: "20", fontSize: "2xl" },
+        icon: { width: "16!", height: "16!" }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: "sm",
+      variant: "square",
+      css: {
+        root: { borderRadius: "sm" },
+        image: { borderRadius: "sm" }
+      }
+    },
+    {
+      size: "lg",
+      variant: "square",
+      css: {
+        root: { borderRadius: "lg" },
+        image: { borderRadius: "lg" }
+      }
+    },
+    {
+      size: "xl",
+      variant: "square",
+      css: {
+        root: { borderRadius: "xl" },
+        image: { borderRadius: "xl" }
+      }
+    },
+    {
+      variantColor: "gray",
+      css: {
+        root: { color: "gray.600" }
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "circle"
+  }
+});
+var avatarGroupSlotRecipe = defineSlotRecipe2({
+  className: "avatar-group",
+  jsx: ["MpAvatarGroup", "mp-avatar-group"],
+  slots: ["root", "excess"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      zIndex: "0"
+    },
+    excess: {
+      marginLeft: "2",
+      color: "blue.400",
+      backgroundColor: "blue.50",
+      fontWeight: "semiBold",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "full",
+      userSelect: "none",
+      cursor: "var(--mp-avatar-group--cursor)"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        excess: { width: "6", height: "6", fontSize: "xs" }
+      },
+      md: {
+        excess: { width: "8", height: "8", fontSize: "sm" }
+      },
+      lg: {
+        excess: { width: "12", height: "12", fontSize: "lg" }
+      },
+      xl: {
+        excess: { width: "20", height: "20", fontSize: "2xl" }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {}
+});
+
+// src/recipes/button.ts
+import { defineRecipe } from "@pandacss/dev";
+var buttonRecipe = defineRecipe({
+  className: "button",
+  jsx: ["MpButton", "mp-button"],
+  base: {
+    position: "relative",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "start",
+    gap: "2",
+    borderWidth: "1px",
+    whiteSpace: "nowrap",
+    userSelect: "none",
+    appearance: "none",
+    outline: "none",
+    cursor: "pointer",
+    transitionDuration: "250ms",
+    transitionProperty: "background, border-color, color, box-shadow",
+    transitionTimingFunction: "linear",
+    _loading: {
+      cursor: "wait",
+      position: "absolute",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "full",
+      height: "full"
+    }
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "white",
+        background: "blue.400",
+        borderColor: "blue.400",
+        _hover: {
+          background: "blue.500",
+          borderColor: "blue.500"
+        },
+        _active: {
+          background: "blue.700",
+          borderColor: "blue.700"
+        },
+        _loading: {
+          background: "blue.400"
+        }
+      },
+      secondary: {
+        color: "blue.400",
+        background: "white",
+        borderColor: "gray.100",
+        _hover: {
+          background: "gray.50",
+          borderColor: "gray.100"
+        },
+        _active: {
+          background: "blue.50",
+          borderColor: "blue.50"
+        },
+        _loading: {
+          background: "white"
+        }
+      },
+      ghost: {
+        color: "gray.600",
+        background: "white",
+        borderColor: "white",
+        _hover: {
+          background: "gray.50",
+          borderColor: "gray.50"
+        },
+        _active: {
+          background: "gray.100",
+          borderColor: "gray.100"
+        },
+        _loading: {
+          background: "white"
+        }
+      },
+      danger: {
+        color: "white",
+        background: "red.400",
+        borderColor: "red.400",
+        _hover: {
+          background: "red.500",
+          borderColor: "red.500"
+        },
+        _active: {
+          background: "red.700",
+          borderColor: "red.700"
+        },
+        _focusVisible: {
+          borderColor: "red.400",
+          boxShadow: "0 0 0 3px #FDECEE"
+        },
+        _loading: {
+          background: "red.400"
+        }
+      },
+      textLink: {
+        color: "blue.400",
+        background: "white",
+        borderColor: "white",
+        _hover: {
+          color: "blue.500"
+        },
+        _active: {
+          color: "blue.700"
+        },
+        _disabled: {
+          cursor: "not-allowed",
+          color: "gray.400"
+        },
+        _loading: {
+          background: "white"
+        }
+      }
+    },
+    size: {
+      sm: {
+        paddingX: "2",
+        paddingY: "1",
+        borderRadius: "sm",
+        textStyle: "label.md",
+        fontWeight: "regular",
+        _loading: {
+          borderRadius: "sm"
+        },
+        _hasIcon: {
+          padding: "1 !important"
+        }
+      },
+      md: {
+        paddingX: "4",
+        paddingY: "2",
+        borderRadius: "md",
+        textStyle: "label.md",
+        fontWeight: "semiBold",
+        _loading: {
+          borderRadius: "md"
+        },
+        _hasIcon: {
+          padding: "2 !important"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["textLink"],
+      css: {
+        paddingX: "0",
+        paddingY: "0",
+        borderRadius: "sm",
+        _focusVisible: {
+          borderColor: "white",
+          boxShadow: "focus"
+        }
+      }
+    },
+    {
+      variant: ["ghost", "textLink"],
+      css: {
+        fontWeight: "regular"
+      }
+    },
+    {
+      variant: ["primary", "secondary", "ghost"],
+      css: {
+        _focusVisible: {
+          borderColor: "blue.400",
+          boxShadow: "focus"
+        }
+      }
+    },
+    {
+      variant: ["primary", "secondary", "ghost", "danger"],
+      css: {
+        _disabled: {
+          cursor: "not-allowed",
+          color: "gray.400",
+          background: "gray.50",
+          borderColor: "gray.50",
+          _hover: {
+            background: "gray.50",
+            borderColor: "gray.50"
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var buttonGroupRecipe = defineRecipe({
+  className: "pixel-button-group",
+  jsx: ["MpButtonGroup"],
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--mp-button-group-spacing)",
+    "&[data-split-button=true]": {
+      gap: "0",
+      "& > [data-pixel-component=MpButton]": {
+        _first: {
+          borderTopRightRadius: "none !important",
+          borderBottomRightRadius: "none !important",
+          borderRight: "0 !important"
+        },
+        _last: {
+          borderTopLeftRadius: "none !important",
+          borderBottomLeftRadius: "none !important"
+        }
+      }
+    }
+  }
+});
+
+// src/recipes/input.ts
+import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
+var inputSlotRecipe = defineSlotRecipe3({
+  className: "input",
+  jsx: ["MpInput", "mp-input"],
+  slots: ["root", "control", "clear"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      _isFullWidth: {
+        width: "full"
+      }
+    },
+    control: {
+      minWidth: "22",
+      fontWeight: "regular",
+      lineHeight: "md",
+      color: "dark",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      outline: "0",
+      borderWidth: "1px",
+      borderColor: "inherit",
+      borderRadius: "sm",
+      paddingRight: "var(--mp-input--padding-right)",
+      paddingLeft: "var(--mp-input--padding-left)",
+      appearance: "none",
+      transition: "all 250ms",
+      _isFullWidth: {
+        width: "full"
+      }
+    },
+    clear: {
+      position: "absolute!",
+      color: "gray.600",
+      border: "none",
+      top: "9px",
+      right: "var(--mp-input--right)",
+      width: "5",
+      height: "5",
+      minWidth: "5",
+      padding: "0",
+      transition: "all 250ms!",
+      visibility: "hidden",
+      opacity: "0",
+      _groupHover: {
+        visibility: "var(--mp-input--visibility)",
+        opacity: "var(--mp-input--opacity)"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      unstyled: {
+        control: {
+          backgroundColor: "transparent",
+          borderWidth: "0",
+          borderRadius: "none"
+        }
+      },
+      outline: {
+        control: {
+          backgroundColor: "white",
+          borderColor: "gray.100",
+          _hover: {
+            borderColor: "gray.400"
+          },
+          _focus: {
+            borderColor: "blue.500",
+            boxShadow: "outer",
+            _hover: {
+              borderColor: "blue.500"
+            },
+            _invalid: {
+              borderColor: "red.400"
+            }
+          },
+          _disabled: {
+            color: "gray.400",
+            backgroundColor: "gray.50",
+            borderColor: "gray.100",
+            cursor: "not-allowed"
+          },
+          _invalid: {
+            borderColor: "red.400"
+          },
+          _readOnly: {
+            boxShadow: "none",
+            userSelect: "all"
+          }
+        }
+      }
+    },
+    size: {
+      sm: {
+        control: {
+          height: "7.5",
+          fontSize: "sm",
+          borderRadius: "sm",
+          paddingY: "1"
+        }
+      },
+      md: {
+        control: {
+          height: "9.5",
+          fontSize: "md",
+          borderRadius: "md",
+          paddingY: "2"
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+var inputGroupSlotRecipe = defineSlotRecipe3({
+  className: "input-group",
+  jsx: ["MpInputGroup", "mp-input-group"],
+  slots: ["root"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      width: "full"
+    }
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+});
+var inputAddonSlotRecipe = defineSlotRecipe3({
+  className: "input-addon",
+  jsx: ["MpInputAddon", "mp-input-addon"],
+  slots: ["root"],
+  base: {
+    root: {
+      position: "absolute",
+      display: "flex",
+      alignItems: "center",
+      paddingX: "0",
+      whiteSpace: "nowrap",
+      zIndex: "2",
+      _hasBackground: {
+        backgroundColor: "gray.50"
+      }
+    }
+  },
+  variants: {
+    placement: {
+      left: {
+        root: {
+          left: "3",
+          borderTopRightRadius: "none!",
+          borderBottomRightRadius: "none!"
+        }
+      },
+      right: {
+        root: {
+          right: "3",
+          borderTopLeftRadius: "none!",
+          borderBottomLeftRadius: "none!"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          height: "6.5",
+          borderRadius: "2xs",
+          _hasBackground: {
+            _placementLeft: { left: "0.5" },
+            _placementRight: { right: "0.5" }
+          }
+        }
+      },
+      md: {
+        root: {
+          height: "7.5",
+          borderRadius: "sm",
+          _hasBackground: {
+            _placementLeft: { left: "1" },
+            _placementRight: { right: "1" }
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md",
+    placement: "left"
+  }
+});
+
+// src/recipes/select.ts
+import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
+var selectSlotRecipe = defineSlotRecipe4({
+  className: "select",
+  jsx: ["MpSelect", "mp-select"],
+  slots: ["root", "control", "clear", "arrow"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      _isFullWidth: {
+        width: "full"
+      }
+    },
+    control: {
+      minWidth: "22",
+      fontWeight: "regular",
+      lineHeight: "md",
+      color: "var(--mp-select--color)",
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      outline: "0",
+      borderWidth: "1px",
+      borderRadius: "sm",
+      paddingLeft: "3",
+      paddingRight: "var(--mp-select--padding-right)",
+      appearance: "none",
+      transition: "all 250ms",
+      backgroundColor: "white",
+      borderColor: "gray.100",
+      _hover: {
+        borderColor: "gray.400"
+      },
+      _focus: {
+        borderColor: "blue.500",
+        boxShadow: "outer",
+        _hover: {
+          borderColor: "blue.500"
+        },
+        _invalid: {
+          borderColor: "red.400"
+        }
+      },
+      _disabled: {
+        color: "gray.400",
+        backgroundColor: "gray.50",
+        borderColor: "gray.100",
+        cursor: "not-allowed"
+      },
+      _invalid: {
+        borderColor: "red.400"
+      },
+      _isFullWidth: {
+        width: "full"
+      }
+    },
+    clear: {
+      position: "absolute!",
+      color: "gray.600",
+      border: "none",
+      top: "9px",
+      right: "40px",
+      width: "5",
+      height: "5",
+      minWidth: "5",
+      padding: "0",
+      transition: "all 250ms!",
+      visibility: "hidden",
+      opacity: "0",
+      _groupHover: {
+        visibility: "var(--mp-select--visibility)",
+        opacity: "var(--mp-select--opacity)"
+      }
+    },
+    arrow: {
+      position: "absolute!",
+      display: "inline-flex",
+      alignItems: "center",
+      width: "6",
+      height: "6",
+      right: "2",
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        control: {
+          height: "7.5",
+          fontSize: "sm",
+          borderRadius: "sm",
+          paddingY: "1"
+        }
+      },
+      md: {
+        control: {
+          height: "9.5",
+          fontSize: "md",
+          borderRadius: "md",
+          paddingY: "2"
+        }
+      }
+    }
+  },
+  compoundVariants: [],
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/recipes/text.ts
+import { defineRecipe as defineRecipe2 } from "@pandacss/dev";
+var textRecipe = defineRecipe2({
+  className: "text",
+  jsx: ["MpText", "mp-text"],
+  base: {
+    color: "var(--mp-text-color)",
+    fontVariantNumeric: "lining-nums tabular-nums",
+    "&[data-text-strike=true]": {
+      textDecoration: "line-through"
+    },
+    "&[data-text-link=true]": {
+      textDecoration: "underline"
+    }
+  },
+  variants: {
+    size: {
+      h1: {
+        textStyle: "h1"
+      },
+      h2: {
+        textStyle: "h2"
+      },
+      h3: {
+        textStyle: "h3"
+      },
+      body: {
+        textStyle: "body.md"
+      },
+      "body-small": {
+        textStyle: "body.sm"
+      },
+      label: {
+        textStyle: "label.md"
+      },
+      "label-small": {
+        textStyle: "label.sm"
+      },
+      overline: {
+        textStyle: "overline"
+      }
+    },
+    weight: {
+      regular: {
+        fontWeight: "regular"
+      },
+      semiBold: {
+        fontWeight: "semiBold"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "label",
+    weight: "regular"
+  }
+});
+
+// src/recipes/icon.ts
+import { defineRecipe as defineRecipe3 } from "@pandacss/dev";
+var iconRecipe = defineRecipe3({
+  className: "icon",
+  jsx: ["MpIcon", "mp-icon"],
+  base: {
+    color: "var(--mp-icon-color)",
+    display: "inline-block",
+    verticalAlign: "middle",
+    backfaceVisibility: "hidden",
+    flexShrink: 0,
+    "&:not(:root)": {
+      overflow: "hidden"
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        width: "5",
+        height: "5"
+      },
+      md: {
+        width: "6",
+        height: "6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/recipes/spinner.ts
+import { defineRecipe as defineRecipe4 } from "@pandacss/dev";
+var spinnerRecipe = defineRecipe4({
+  className: "spinner",
+  jsx: ["MpSpinner", "mp-spinner"],
+  base: {
+    display: "inline-flex",
+    animation: "0.45s linear 0s infinite normal none running spin"
+  },
+  variants: {
+    size: {
+      sm: {
+        width: "5",
+        height: "5"
+      },
+      md: {
+        width: "6",
+        height: "6"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+
+// src/recipes/accordion.ts
+import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
+var accordion = defineSlotRecipe5({
+  className: "accordion",
+  slots: ["root", "item", "trigger", "content"],
+  base: {
+    root: {
+      divideY: "1px",
+      width: "full"
+    },
+    trigger: {
+      alignItems: "center",
+      color: "fg.default",
+      cursor: "pointer",
+      display: "flex",
+      fontWeight: "normal",
+      justifyContent: "space-between",
+      textStyle: "lg",
+      width: "full",
+      fontSize: "lg"
+    },
+    content: {
+      color: "fg.muted",
+      display: "grid",
+      gridTemplateRows: "0fr",
+      transitionProperty: "grid-template-rows, padding-bottom",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      _open: {
+        gridTemplateRows: "1fr"
+      },
+      "& > div": {
+        overflow: "hidden"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      md: {
+        trigger: {
+          py: "4"
+        },
+        content: {
+          pb: "6",
+          pr: "8",
+          _closed: {
+            pb: "0"
+          }
+        }
+      }
+    }
+  }
+});
+
+// src/recipes/popover.ts
+import { defineRecipe as defineRecipe5 } from "@pandacss/dev";
+var popoverContentRecipe = defineRecipe5({
+  className: "popover",
+  jsx: ["MpPopover", "mp-popover"],
+  base: {},
+  variants: {
+    isUnstyled: {
+      true: {},
+      false: {
+        rounded: "md",
+        shadow: "lg",
+        borderWidth: "1px",
+        borderColor: "gray.400",
+        zIndex: "popover"
+      }
+    },
+    isDark: {
+      true: {
+        background: "overlay",
+        color: "white"
+      },
+      false: {
+        background: "white"
+      }
+    }
+  },
+  defaultVariants: {
+    isDark: false,
+    isUnstyled: false
+  }
+});
+var popoverListRecipe = defineRecipe5({
+  className: "popover-list",
+  jsx: ["MpPopoverList", "mp-popover-list"],
+  base: {
+    pt: 3,
+    pb: 2,
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+var popoverListItemRecipe = defineRecipe5({
+  className: "popover-list-item",
+  jsx: ["MpPopoverListItem", "mp-popover-list-item"],
+  base: {
+    px: 3,
+    py: 2,
+    width: "full",
+    textDecoration: "none",
+    alignItems: "center",
+    textAlign: "left",
+    outline: "none",
+    fontSize: "md",
+    flex: " 0 0 auto",
+    userSelect: "none",
+    cursor: "pointer",
+    color: "dark",
+    _disabled: {
+      color: "gray.400",
+      bg: "white",
+      cursor: "not-allowed"
+    },
+    _highlight: {
+      background: "white",
+      bg: "gray.50",
+      color: "dark",
+      outline: 0
+    },
+    _active: {
+      background: "ice.50",
+      bg: "ice.50",
+      color: "dark",
+      outline: 0
+    }
+  }
+});
+
+// src/recipes/badge.ts
+import { defineRecipe as defineRecipe6 } from "@pandacss/dev";
+var badgeRecipe = defineRecipe6({
+  className: "badge",
+  jsx: ["MpBadge", "mp-badge"],
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "999px"
+  },
+  variants: {
+    variant: {
+      solid: {
+        color: "white"
+      },
+      subtle: {}
+    },
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    size: {
+      sm: {
+        fontSize: "xs",
+        fontWeight: "semibold",
+        lineHeight: "1sm",
+        letterSpacing: "normal",
+        height: "4"
+      },
+      md: {
+        fontSize: "md",
+        fontWeight: "regular",
+        lineHeight: "md",
+        letterSpacing: "normal",
+        height: "5"
+      }
+    }
+  },
+  compoundVariants: [
+    // Size
+    {
+      variant: "solid",
+      size: "md",
+      css: {
+        paddingX: "1.5",
+        paddingY: "0.5"
+      }
+    },
+    {
+      variant: "solid",
+      size: "sm",
+      css: {
+        paddingX: "1",
+        paddingY: "0.5"
+      }
+    },
+    {
+      variant: "subtle",
+      size: "md",
+      css: {
+        paddingX: "2",
+        paddingY: "0"
+      }
+    },
+    {
+      variant: "subtle",
+      size: "sm",
+      css: {
+        paddingX: "1",
+        paddingY: "0"
+      }
+    },
+    // Solid
+    {
+      variant: "solid",
+      variantColor: "blue",
+      css: {
+        backgroundColor: "sky.400"
+      }
+    },
+    {
+      variant: "solid",
+      variantColor: "green",
+      css: {
+        backgroundColor: "teal.400"
+      }
+    },
+    {
+      variant: "solid",
+      variantColor: "orange",
+      css: {
+        backgroundColor: "amber.400"
+      }
+    },
+    {
+      variant: "solid",
+      variantColor: "red",
+      css: {
+        backgroundColor: "rose.400"
+      }
+    },
+    {
+      variant: "solid",
+      variantColor: "gray",
+      css: {
+        backgroundColor: "stone.400"
+      }
+    },
+    // Subtle
+    {
+      variant: ["subtle"],
+      variantColor: "blue",
+      css: {
+        backgroundColor: "blue.50",
+        color: "blue.700"
+      }
+    },
+    {
+      variant: ["subtle"],
+      variantColor: "green",
+      css: {
+        backgroundColor: "green.50",
+        color: "green.700"
+      }
+    },
+    {
+      variant: ["subtle"],
+      variantColor: "orange",
+      css: {
+        backgroundColor: "orange.50",
+        color: "orange.700"
+      }
+    },
+    {
+      variant: ["subtle"],
+      variantColor: "red",
+      css: {
+        backgroundColor: "red.50",
+        color: "red.700"
+      }
+    },
+    {
+      variant: ["subtle"],
+      variantColor: "gray",
+      css: {
+        backgroundColor: "gray.50",
+        color: "black"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    variantColor: "blue"
+  }
+});
+
+// src/recipes/textarea.ts
+import { defineRecipe as defineRecipe7 } from "@pandacss/dev";
+var textareaRecipe = defineRecipe7({
+  className: "textarea",
+  jsx: ["MpTextarea", "mp-textarea"],
+  base: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    outline: "0",
+    borderWidth: "1px",
+    borderColor: "gray.100",
+    borderRadius: "md",
+    color: "dark",
+    backgroundColor: "white",
+    appearance: "none",
+    transition: "all 250ms",
+    minWidth: "65",
+    minHeight: "20",
+    fontSize: "md",
+    fontWeight: "regular",
+    lineHeight: "md",
+    paddingX: "3",
+    paddingTop: "2",
+    paddingBottom: "5",
+    resize: "both",
+    _hover: {
+      borderColor: "gray.400"
+    },
+    _focus: {
+      borderColor: "blue.500",
+      boxShadow: "outer",
+      _hover: {
+        borderColor: "blue.500"
+      }
+    },
+    _disabled: {
+      color: "gray.400",
+      backgroundColor: "gray.50",
+      borderColor: "gray.100",
+      cursor: "not-allowed"
+    },
+    _invalid: {
+      borderColor: "red.400"
+    },
+    _readOnly: {
+      boxShadow: "none",
+      userSelect: "all"
+    }
+  },
+  variants: {
+    isFullWidth: {
+      true: {
+        width: "100%"
+      }
+    }
+  }
+});
+
+// src/recipes/tooltip.ts
+import { defineRecipe as defineRecipe8 } from "@pandacss/dev";
+var tooltipRecipe = defineRecipe8({
+  className: "tooltip",
+  jsx: ["MpTooltip", "mp-tooltip"],
+  base: {
+    px: "2",
+    py: "1",
+    borderRadius: "sm",
+    fontWeight: "regular",
+    pointerEvents: "none",
+    fontSize: "sm",
+    shadow: "md",
+    maxW: "300px",
+    zIndex: "tooltip",
+    boxShadow: "sm",
+    bg: "overlay",
+    color: "white",
+    whiteSpace: "normal",
+    overflowWrap: "break-word"
+  }
+});
+
+// src/recipes/tabs.ts
+import { defineRecipe as defineRecipe9 } from "@pandacss/dev";
+var tabListRecipe = defineRecipe9({
+  className: "tab-list",
+  jsx: ["MpTabList", "mp-tab-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"
+  }
+});
+var tabRecipe = defineRecipe9({
+  className: "tab",
+  jsx: ["MpTab", "mp-tab"],
+  base: {
+    display: "flex",
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "all 0.2s",
+    position: "relative",
+    mb: "1px",
+    pt: "3",
+    pb: "4",
+    px: "1",
+    color: "gray.600",
+    _hover: {
+      color: "dark"
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    },
+    _focus: {
+      shadow: "0 0 0 2px #E0EEFF",
+      borderRadius: "sm"
+    }
+  },
+  variants: {
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    isSelected: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variantColor: "blue",
+      isSelected: true,
+      css: {
+        color: "blue.400",
+        _hover: {
+          color: "blue.500"
+        }
+      }
+    },
+    {
+      variantColor: "green",
+      isSelected: true,
+      css: {
+        color: "green.400",
+        _hover: {
+          color: "green.500"
+        }
+      }
+    },
+    {
+      variantColor: "orange",
+      isSelected: true,
+      css: {
+        color: "orange.400",
+        _hover: {
+          color: "orange.500"
+        }
+      }
+    },
+    {
+      variantColor: "red",
+      isSelected: true,
+      css: {
+        color: "red.400",
+        _hover: {
+          color: "red.500"
+        }
+      }
+    },
+    {
+      variantColor: "gray",
+      isSelected: true,
+      css: {
+        color: "gray.400",
+        _hover: {
+          color: "gray.500"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variantColor: "blue",
+    isSelected: false
+  }
+});
+var selectedBorderRecipe = defineRecipe9({
+  className: "selected-border",
+  jsx: ["MpSelectedBorder", "mp-selected-border"],
+  base: {
+    position: "absolute",
+    bottom: "-2px",
+    width: "calc(100% - 8px)",
+    height: "0.5"
+  },
+  variants: {
+    variantColor: {
+      blue: {},
+      green: {},
+      orange: {},
+      red: {},
+      gray: {}
+    },
+    isSelected: {
+      false: {
+        background: "transparent",
+        _groupHover: {
+          background: "gray.400"
+        }
+      },
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variantColor: "blue",
+      isSelected: true,
+      css: {
+        background: "blue.400",
+        _groupHover: {
+          background: "blue.500"
+        }
+      }
+    },
+    {
+      variantColor: "green",
+      isSelected: true,
+      css: {
+        background: "green.400",
+        _groupHover: {
+          background: "green.500"
+        }
+      }
+    },
+    {
+      variantColor: "orange",
+      isSelected: true,
+      css: {
+        background: "orange.400",
+        _groupHover: {
+          background: "orange.500"
+        }
+      }
+    },
+    {
+      variantColor: "red",
+      isSelected: true,
+      css: {
+        background: "red.400",
+        _groupHover: {
+          background: "red.500"
+        }
+      }
+    },
+    {
+      variantColor: "gray",
+      isSelected: true,
+      css: {
+        background: "gray.400",
+        _groupHover: {
+          background: "gray.500"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    variantColor: "blue",
+    isSelected: false
+  }
+});
+
+// src/recipes/checkbox.ts
+import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
+var checkboxSlotRecipe = defineSlotRecipe6({
+  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
+import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
+var radioSlotRecipe = defineSlotRecipe7({
+  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
+import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
+var sharedSlotRecipe = defineSlotRecipe8({
+  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/toggle.ts
+import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
+var toggleSlotRecipe = defineSlotRecipe9({
+  className: "toggle",
+  jsx: ["MpToggle", "mp-toggle"],
+  slots: ["root", "control", "label"],
+  base: {
+    root: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "3",
+      cursor: "pointer",
+      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"
+        }
+      },
+      _hover: {
+        "& .mp-toggle__control": {
+          borderColor: "gray.400",
+          background: "gray.400"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        "& .mp-toggle__control": {
+          borderColor: "gray.100 !important",
+          background: "gray.50 !important",
+          boxShadow: "none !important",
+          "& div": {
+            background: "gray.100"
+          }
+        }
+      },
+      _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))"
+          }
+        },
+        _hover: {
+          "& .mp-toggle__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
+import { defineRecipe as defineRecipe10 } from "@pandacss/dev";
+var tableRecipe = defineRecipe10({
+  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: {
+          "& > td": {
+            backgroundColor: "gray.50"
+          }
+        }
+      }
+    },
+    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 = defineRecipe10({
+  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
+import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
+var progressSlotRecipe = defineSlotRecipe10({
+  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/index.ts
+var recipes = {
+  buttonRecipe,
+  buttonGroupRecipe,
+  textRecipe,
+  iconRecipe,
+  spinnerRecipe,
+  popoverContentRecipe,
+  popoverListRecipe,
+  popoverListItemRecipe,
+  badgeRecipe,
+  textareaRecipe,
+  tooltipRecipe,
+  tabListRecipe,
+  tabRecipe,
+  selectedBorderRecipe,
+  tableRecipe,
+  tableContainerRecipe
+};
+var slotRecipes = {
+  accordion,
+  checkboxSlotRecipe,
+  radioSlotRecipe,
+  sharedSlotRecipe,
+  progressSlotRecipe,
+  toggleSlotRecipe,
+  tagSlotRecipe,
+  inputSlotRecipe,
+  inputGroupSlotRecipe,
+  inputAddonSlotRecipe,
+  avatarSlotRecipe,
+  avatarGroupSlotRecipe,
+  selectSlotRecipe
+};
+
+// src/breakpoints.ts
+var breakpoints = {
+  sm: "22.5em",
+  md: "48em",
+  lg: "64em",
+  xl: "80em"
+};
+
+// src/index.ts
+var preset = definePreset({
+  theme: {
+    extend: {
+      breakpoints,
+      keyframes,
+      textStyles,
+      tokens,
+      recipes,
+      slotRecipes
+    }
+  },
+  conditions,
+  globalCss
+});
+var src_default = preset;
+export {
+  src_default as default
+};