@park-ui/panda-preset/dist/index.js

Panda CSS Preset for Park UI

import {
  createRadii
} from "./chunk-LS3ONKWL.js";
import {
  red_default
} from "./chunk-6PNAIJUA.js";

// src/create-preset.ts
import { definePreset } from "@pandacss/dev";

// src/theme/breakpoints.ts
var breakpoints = {
  sm: "640px",
  md: "768px",
  lg: "1024px",
  xl: "1280px",
  "2xl": "1536px"
};

// src/theme/conditions.ts
var conditions = {
  extend: {
    collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
    current: "&:is([data-current])",
    hidden: "&:is([hidden])",
    hover: ["@media (hover: hover) and (pointer: fine)", "&:is(:hover, [data-hover])"],
    indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
    off: '&:is([data-state="off"])',
    on: '&:is([data-state="on"])',
    today: "&:is([data-today])",
    underValue: '&:is([data-state="under-value"])',
    dark: ".dark &",
    light: ":root &, .light &",
    invalid: "&:is([aria-invalid])"
  }
};

// src/theme/global-css.ts
import { defineGlobalStyles } from "@pandacss/dev";
var globalCss = defineGlobalStyles({
  body: {
    background: "bg.canvas",
    color: "fg.default",
    _dark: {
      colorScheme: "dark"
    }
  },
  "*, *::before, *::after": {
    borderColor: "border.subtle",
    borderStyle: "solid",
    boxSizing: "border-box"
  },
  "*::placeholder": {
    opacity: 1,
    color: "fg.subtle"
  },
  "*::selection": {
    bg: "accent.a4"
  }
});

// src/theme/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" }
  },
  "slide-in": {
    "0%": { opacity: "0", transform: "translateY(64px)" },
    "100%": { opacity: "1", transform: "translateY(0)" }
  },
  "slide-out": {
    "0%": { opacity: "1", transform: "translateY(0)" },
    "100%": { opacity: "0", transform: "translateY(64px)" }
  },
  "slide-in-left": {
    "0%": { transform: "translateX(-100%)" },
    "100%": { transform: "translateX(0%)" }
  },
  "slide-out-left": {
    "0%": { transform: "translateX(0%)" },
    "100%": { transform: "translateX(-100%)" }
  },
  "slide-in-right": {
    "0%": { transform: "translateX(100%)" },
    "100%": { transform: "translateX(0%)" }
  },
  "slide-out-right": {
    "0%": { transform: "translateX(0%)" },
    "100%": { transform: "translateX(100%)" }
  },
  "collapse-in": {
    "0%": { height: "0" },
    "100%": { height: "var(--height)" }
  },
  "collapse-out": {
    "0%": { height: "var(--height)" },
    "100%": { height: "0" }
  },
  fadeIn: {
    "0%": { opacity: "0", transform: "translateY(-4px)" },
    "100%": { opacity: "1", transform: "translateY(0)" }
  },
  fadeOut: {
    "0%": { opacity: "1", transform: "translateY(0)" },
    "100%": { opacity: "0", transform: "translateY(-4px)" }
  },
  "skeleton-pulse": {
    "50%": { opacity: "0.5" }
  },
  spin: {
    "0%": { transform: "rotate(0deg)" },
    "100%": { transform: "rotate(360deg)" }
  }
});

// src/theme/recipes/accordion.ts
import { accordionAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe } from "@pandacss/dev";
var accordion = defineSlotRecipe({
  className: "accordion",
  slots: accordionAnatomy.keys(),
  base: {
    root: {
      divideY: "1px",
      width: "full",
      borderTopWidth: "1px",
      borderBottomWidth: "1px"
    },
    itemTrigger: {
      alignItems: "center",
      color: "fg.default",
      cursor: "pointer",
      display: "flex",
      fontWeight: "semibold",
      gap: "3",
      justifyContent: "space-between",
      textStyle: "lg",
      textAlign: "left",
      width: "full",
      _disabled: {
        color: "fg.disabled",
        cursor: "not-allowed"
      }
    },
    itemIndicator: {
      color: "fg.muted",
      transformOrigin: "center",
      transitionDuration: "normal",
      transitionProperty: "transform",
      transitionTimingFunction: "default",
      _open: {
        transform: "rotate(-180deg)"
      }
    },
    itemContent: {
      color: "fg.muted",
      overflow: "hidden",
      transitionProperty: "padding-bottom",
      transitionDuration: "normal",
      transitionTimingFunction: "default",
      _open: {
        animation: "collapse-in"
      },
      _closed: {
        animation: "collapse-out"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      md: {
        itemTrigger: {
          py: "4"
        },
        itemContent: {
          pb: "6",
          pr: "8",
          _closed: {
            pb: "0"
          }
        }
      }
    }
  }
});

// src/theme/recipes/alert.ts
import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
var alert = defineSlotRecipe2({
  className: "alert",
  slots: ["root", "content", "description", "icon", "title"],
  base: {
    root: {
      background: "bg.default",
      borderWidth: "1px",
      borderRadius: "l3",
      display: "flex",
      gap: "3",
      p: "4",
      width: "full"
    },
    content: {
      display: "flex",
      flexDirection: "column",
      gap: "1"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    },
    icon: {
      color: "fg.default",
      flexShrink: "0",
      width: "5",
      height: "5"
    },
    title: {
      color: "fg.default",
      fontWeight: "semibold",
      textStyle: "sm"
    }
  }
});

// src/theme/recipes/avatar.ts
import { avatarAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
var avatar = defineSlotRecipe3({
  className: "avatar",
  slots: avatarAnatomy.keys(),
  base: {
    root: {
      borderRadius: "full",
      flexShrink: 0,
      overflow: "hidden"
    },
    fallback: {
      alignItems: "center",
      background: "bg.subtle",
      borderRadius: "full",
      borderWidth: "1px",
      color: "fg.default",
      display: "flex",
      fontWeight: "semibold",
      height: "inherit",
      justifyContent: "center",
      _hidden: {
        display: "none"
      }
    },
    image: {
      objectFit: "cover"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      xs: {
        root: {
          height: "8",
          width: "8"
        },
        image: {
          height: "8",
          width: "8"
        },
        fallback: {
          textStyle: "xs",
          "& svg": {
            width: "4",
            height: "4"
          }
        }
      },
      sm: {
        root: {
          height: "9",
          width: "9"
        },
        image: {
          height: "9",
          width: "9"
        },
        fallback: {
          textStyle: "sm",
          "& svg": {
            width: "4",
            height: "4"
          }
        }
      },
      md: {
        root: {
          height: "10",
          width: "10"
        },
        image: {
          height: "10",
          width: "10"
        },
        fallback: {
          textStyle: "md",
          "& svg": {
            width: "5",
            height: "5"
          }
        }
      },
      lg: {
        root: {
          height: "11",
          width: "11"
        },
        image: {
          height: "11",
          width: "11"
        },
        fallback: {
          textStyle: "lg",
          "& svg": {
            width: "6",
            height: "6"
          }
        }
      },
      xl: {
        root: {
          height: "12",
          width: "12"
        },
        image: {
          height: "12",
          width: "12"
        },
        fallback: {
          textStyle: "xl",
          "& svg": {
            width: "7",
            height: "7"
          }
        }
      },
      "2xl": {
        root: {
          height: "16",
          width: "16"
        },
        image: {
          height: "16",
          width: "16"
        },
        fallback: {
          textStyle: "2xl",
          "& svg": {
            width: "8",
            height: "8"
          }
        }
      }
    }
  }
});

// src/theme/recipes/badge.ts
import { defineRecipe } from "@pandacss/dev";
var badge = defineRecipe({
  className: "badge",
  base: {
    alignItems: "center",
    borderRadius: "full",
    display: "inline-flex",
    fontWeight: "medium",
    userSelect: "none",
    whiteSpace: "nowrap"
  },
  defaultVariants: {
    variant: "subtle",
    size: "md"
  },
  variants: {
    variant: {
      solid: {
        background: "colorPalette.default",
        color: "colorPalette.fg"
      },
      subtle: {
        background: "bg.subtle",
        borderColor: "border.subtle",
        borderWidth: "1px",
        color: "fg.default",
        "& svg": {
          color: "fg.muted"
        }
      },
      outline: {
        color: "fg.default",
        borderWidth: "2px",
        borderColor: "border.default"
      }
    },
    size: {
      sm: {
        textStyle: "xs",
        px: "2",
        h: "5",
        gap: "1",
        "& svg": {
          width: "3",
          height: "3"
        }
      },
      md: {
        textStyle: "xs",
        px: "2.5",
        h: "6",
        gap: "1.5",
        "& svg": {
          width: "4",
          height: "4"
        }
      },
      lg: {
        textStyle: "sm",
        px: "3",
        h: "7",
        gap: "1.5",
        "& svg": {
          width: "4",
          height: "4"
        }
      }
    }
  }
});

// src/theme/recipes/button.ts
import { defineRecipe as defineRecipe2 } from "@pandacss/dev";
var button = defineRecipe2({
  className: "button",
  jsx: ["Button", "IconButton", "SubmitButton"],
  base: {
    alignItems: "center",
    appearance: "none",
    borderRadius: "l2",
    cursor: "pointer",
    display: "inline-flex",
    flexShrink: "0",
    fontWeight: "semibold",
    isolation: "isolate",
    minWidth: "0",
    justifyContent: "center",
    outline: "none",
    position: "relative",
    transitionDuration: "normal",
    transitionProperty: "background, border-color, color, box-shadow",
    transitionTimingFunction: "default",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap",
    _hidden: {
      display: "none"
    },
    "& :where(svg)": {
      fontSize: "1.1em",
      width: "1.1em",
      height: "1.1em"
    }
  },
  defaultVariants: {
    variant: "solid",
    size: "md"
  },
  variants: {
    variant: {
      solid: {
        background: "colorPalette.default",
        color: "colorPalette.fg",
        _hover: {
          background: "colorPalette.emphasized"
        },
        _focusVisible: {
          outline: "2px solid",
          outlineColor: "colorPalette.default",
          outlineOffset: "2px"
        },
        _disabled: {
          color: "fg.disabled",
          background: "bg.disabled",
          cursor: "not-allowed",
          _hover: {
            color: "fg.disabled",
            background: "bg.disabled"
          }
        }
      },
      outline: {
        borderWidth: "1px",
        borderColor: "colorPalette.a7",
        color: "colorPalette.text",
        colorPalette: "gray",
        _hover: {
          background: "colorPalette.a2"
        },
        _disabled: {
          borderColor: "border.disabled",
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "transparent",
            borderColor: "border.disabled",
            color: "fg.disabled"
          }
        },
        _focusVisible: {
          outline: "2px solid",
          outlineColor: "colorPalette.default",
          outlineOffset: "2px"
        },
        _selected: {
          background: "accent.default",
          borderColor: "accent.default",
          color: "accent.fg",
          _hover: {
            background: "accent.emphasized",
            borderColor: "accent.emphasized"
          }
        }
      },
      ghost: {
        color: "colorPalette.text",
        colorPalette: "gray",
        _hover: {
          background: "colorPalette.a3"
        },
        _selected: {
          background: "colorPalette.a3"
        },
        _disabled: {
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "transparent",
            color: "fg.disabled"
          }
        },
        _focusVisible: {
          outline: "2px solid",
          outlineColor: "colorPalette.default",
          outlineOffset: "2px"
        }
      },
      link: {
        verticalAlign: "baseline",
        _disabled: {
          color: "border.disabled",
          cursor: "not-allowed",
          _hover: {
            color: "border.disabled"
          }
        },
        height: "auto!",
        px: "0!",
        minW: "0!"
      },
      subtle: {
        background: "colorPalette.a3",
        color: "colorPalette.text",
        colorPalette: "gray",
        _hover: {
          background: "colorPalette.a4"
        },
        _focusVisible: {
          outline: "2px solid",
          outlineColor: "colorPalette.default",
          outlineOffset: "2px"
        },
        _disabled: {
          background: "bg.disabled",
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "bg.disabled",
            color: "fg.disabled"
          }
        }
      }
    },
    size: {
      xs: {
        h: "8",
        minW: "8",
        textStyle: "xs",
        px: "3",
        gap: "2"
      },
      sm: {
        h: "9",
        minW: "9",
        textStyle: "sm",
        px: "3.5",
        gap: "2"
      },
      md: {
        h: "10",
        minW: "10",
        textStyle: "sm",
        px: "4",
        gap: "2"
      },
      lg: {
        h: "11",
        minW: "11",
        textStyle: "md",
        px: "4.5",
        gap: "2"
      },
      xl: {
        h: "12",
        minW: "12",
        textStyle: "md",
        px: "5",
        gap: "2.5"
      },
      "2xl": {
        h: "16",
        minW: "16",
        textStyle: "lg",
        px: "7",
        gap: "3"
      }
    }
  }
});

// src/theme/recipes/card.ts
import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
var card = defineSlotRecipe4({
  className: "card",
  slots: ["root", "header", "body", "footer", "title", "description"],
  base: {
    root: {
      bg: "bg.default",
      borderRadius: "l3",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      overflow: "hidden",
      position: "relative"
    },
    header: {
      display: "flex",
      flexDirection: "column",
      gap: "1",
      p: "6"
    },
    body: {
      display: "flex",
      flex: "1",
      flexDirection: "column",
      pb: "6",
      px: "6"
    },
    footer: {
      display: "flex",
      justifyContent: "flex-end",
      pb: "6",
      pt: "2",
      px: "6"
    },
    title: {
      color: "fg.default",
      textStyle: "lg",
      fontWeight: "semibold"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    }
  }
});

// src/theme/recipes/carousel.ts
import { carouselAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
var carousel = defineSlotRecipe5({
  className: "carousel",
  slots: carouselAnatomy.keys(),
  base: {
    viewport: {
      overflowX: "hidden",
      position: "relative",
      borderRadius: "l2"
    },
    control: {
      alignItems: "center",
      background: { _light: "gray.dark.a12", _dark: "gray.light.a12" },
      borderRadius: "l2",
      bottom: "4",
      display: "flex",
      left: "50%",
      position: "absolute",
      transform: "translateX(-50%)"
    },
    indicatorGroup: {
      display: "flex"
    },
    indicator: {
      borderRadius: "full",
      background: "gray.6",
      cursor: "pointer",
      _current: {
        background: "colorPalette.default"
      },
      _focusVisible: {
        outlineOffset: "2px",
        outline: "2px solid",
        outlineColor: "border.outline"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        control: {
          gap: "1",
          p: "1"
        },
        indicatorGroup: {
          gap: "2"
        },
        indicator: {
          width: "2",
          height: "2"
        }
      },
      md: {
        control: {
          gap: "2",
          p: "2.5"
        },
        indicatorGroup: {
          gap: "3"
        },
        indicator: {
          width: "2.5",
          height: "2.5"
        }
      }
    }
  }
});

// src/theme/recipes/checkbox.ts
import { checkboxAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
var checkbox = defineSlotRecipe6({
  className: "checkbox",
  slots: checkboxAnatomy.keys(),
  base: {
    root: {
      alignItems: "center",
      display: "flex"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium"
    },
    control: {
      alignItems: "center",
      borderColor: "border.default",
      borderWidth: "1px",
      color: "colorPalette.fg",
      cursor: "pointer",
      display: "flex",
      justifyContent: "center",
      transitionDuration: "normal",
      transitionProperty: "border-color, background",
      transitionTimingFunction: "default",
      _hover: {
        background: "bg.subtle"
      },
      _checked: {
        background: "colorPalette.default",
        borderColor: "colorPalette.default",
        _hover: {
          background: "colorPalette.default"
        }
      },
      _indeterminate: {
        background: "colorPalette.default",
        borderColor: "colorPalette.default",
        _hover: {
          background: "colorPalette.default"
        }
      },
      "&:has(+ :focus-visible)": {
        outlineOffset: "2px",
        outline: "2px solid",
        outlineColor: "border.outline",
        _checked: {
          outlineColor: "colorPalette.default"
        }
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        root: {
          gap: "2"
        },
        control: {
          width: "4",
          height: "4",
          borderRadius: "l1",
          "& svg": {
            width: "3",
            height: "3"
          }
        },
        label: {
          textStyle: "sm"
        }
      },
      md: {
        root: {
          gap: "3"
        },
        control: {
          width: "5",
          height: "5",
          borderRadius: "l1",
          "& svg": {
            width: "3.5",
            height: "3.5"
          }
        },
        label: {
          textStyle: "md"
        }
      },
      lg: {
        root: {
          gap: "4"
        },
        control: {
          width: "6",
          height: "6",
          borderRadius: "l1",
          "& svg": {
            width: "4",
            height: "4"
          }
        },
        label: {
          textStyle: "lg"
        }
      }
    }
  }
});

// src/theme/recipes/clipboard.ts
import { clipboardAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
var clipboard = defineSlotRecipe7({
  className: "clipboard",
  slots: clipboardAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    control: {
      display: "flex",
      gap: "3"
    }
  }
});

// src/theme/recipes/code.ts
import { defineRecipe as defineRecipe3 } from "@pandacss/dev";
var code = defineRecipe3({
  className: "code",
  base: {
    alignItems: "center",
    bg: "bg.subtle",
    borderRadius: "l2",
    color: "fg.default",
    display: "inline-flex",
    fontWeight: "medium!",
    fontFamily: "var(--fonts-code)",
    whiteSpace: "pre"
  },
  defaultVariants: {
    size: "md",
    variant: "outline"
  },
  variants: {
    variant: {
      outline: {
        borderWidth: "1px"
      },
      ghost: {}
    },
    size: {
      sm: {
        minHeight: "5",
        px: "0.5",
        textStyle: "xs"
      },
      md: {
        minHeight: "6",
        textStyle: "sm",
        px: "1",
        py: "1px"
      },
      lg: {
        minHeight: "7",
        px: "1.5",
        py: "1px",
        textStyle: "md"
      }
    }
  }
});

// src/theme/recipes/collapsible.ts
import { collapsibleAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
var collapsible = defineSlotRecipe8({
  className: "collapsible",
  slots: collapsibleAnatomy.keys(),
  base: {
    root: {
      alignItems: "flex-start",
      display: "flex",
      flexDirection: "column",
      width: "full"
    },
    content: {
      overflow: "hidden",
      width: "full",
      _open: {
        animation: "collapse-in"
      },
      _closed: {
        animation: "collapse-out"
      }
    }
  }
});

// src/theme/recipes/color-picker.ts
import { colorPickerAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
var colorPicker = defineSlotRecipe9({
  className: "colorPicker",
  slots: colorPickerAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium",
      textStyle: "sm"
    },
    control: {
      display: "flex",
      flexDirection: "row",
      gap: "2"
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      maxWidth: "sm",
      p: "4",
      zIndex: "dropdown",
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      },
      _hidden: {
        display: "none"
      }
    },
    area: {
      height: "36",
      borderRadius: "l2",
      overflow: "hidden"
    },
    areaThumb: {
      borderRadius: "full",
      height: "2.5",
      width: "2.5",
      boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
      outline: "none"
    },
    areaBackground: {
      height: "full"
    },
    channelSlider: {
      borderRadius: "l2"
    },
    channelSliderTrack: {
      height: "3",
      borderRadius: "l2"
    },
    swatchGroup: {
      display: "grid",
      gridTemplateColumns: "repeat(7, 1fr)",
      gap: "2",
      background: "bg.default"
    },
    swatch: {
      height: "6",
      width: "6",
      borderRadius: "l2",
      boxShadow: "0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset"
    },
    channelSliderThumb: {
      borderRadius: "full",
      height: "2.5",
      width: "2.5",
      boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
      transform: "translate(-50%, -50%)",
      outline: "none"
    },
    transparencyGrid: {
      borderRadius: "l2"
    }
  }
});

// src/theme/recipes/combobox.ts
import { comboboxAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe10 } from "@pandacss/dev";
var combobox = defineSlotRecipe10({
  className: "combobox",
  slots: comboboxAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5",
      width: "full"
    },
    control: {
      position: "relative"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium"
    },
    trigger: {
      bottom: "0",
      color: "fg.muted",
      position: "absolute",
      right: "0",
      top: "0"
    },
    content: {
      background: "bg.default",
      borderRadius: "l2",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      zIndex: "dropdown",
      _hidden: {
        display: "none"
      },
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      },
      _focusVisible: {
        outlineOffset: "2px",
        outline: "2px solid",
        outlineColor: "border.outline"
      }
    },
    item: {
      alignItems: "center",
      borderRadius: "l1",
      cursor: "pointer",
      display: "flex",
      justifyContent: "space-between",
      transitionDuration: "fast",
      transitionProperty: "background, color",
      transitionTimingFunction: "default",
      _hover: {
        background: "bg.muted"
      },
      _highlighted: {
        background: "bg.muted"
      },
      _disabled: {
        color: "fg.disabled",
        cursor: "not-allowed",
        _hover: {
          background: "transparent"
        }
      }
    },
    itemGroupLabel: {
      fontWeight: "semibold",
      textStyle: "sm"
    },
    itemIndicator: {
      color: "colorPalette.default"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        content: { p: "0.5", gap: "1" },
        item: { textStyle: "sm", px: "2", height: "9" },
        itemIndicator: {
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        itemGroupLabel: {
          px: "2",
          py: "1.5"
        },
        label: { textStyle: "sm" },
        trigger: { right: "2.5" }
      },
      md: {
        content: { p: "1", gap: "1" },
        item: { textStyle: "md", px: "2", height: "10" },
        itemIndicator: {
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        itemGroupLabel: {
          px: "2",
          py: "1.5"
        },
        label: { textStyle: "sm" },
        trigger: { right: "3" }
      },
      lg: {
        content: { p: "1.5", gap: "1" },
        item: { textStyle: "md", px: "2", height: "11" },
        itemIndicator: {
          "& :where(svg)": {
            width: "5",
            height: "5"
          }
        },
        itemGroupLabel: {
          px: "2",
          py: "1.5"
        },
        label: { textStyle: "sm" },
        trigger: { right: "3.5" }
      }
    }
  }
});

// src/theme/recipes/date-picker.ts
import { datePickerAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
var datePicker = defineSlotRecipe11({
  className: "datePicker",
  slots: [...datePickerAnatomy.keys()],
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      gap: "3",
      p: "4",
      width: "344px",
      zIndex: "dropdown",
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      },
      _hidden: {
        display: "none"
      }
    },
    control: {
      display: "flex",
      flexDirection: "row",
      gap: "2"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium",
      textStyle: "sm"
    },
    tableHeader: {
      color: "fg.muted",
      fontWeight: "semibold",
      height: "10",
      textStyle: "sm"
    },
    viewControl: {
      display: "flex",
      gap: "2",
      justifyContent: "space-between"
    },
    table: {
      width: "full",
      borderCollapse: "separate",
      borderSpacing: "1",
      m: "-1"
    },
    tableCell: {
      textAlign: "center"
    },
    tableCellTrigger: {
      width: "100%",
      _today: {
        _before: {
          content: "'\u2212'",
          color: "colorPalette.default",
          position: "absolute",
          marginTop: "6"
        }
      },
      "&[data-in-range]": {
        background: "bg.muted"
      },
      _selected: {
        _before: {
          color: "colorPalette.fg"
        }
      }
    },
    view: {
      display: "flex",
      flexDirection: "column",
      gap: "3",
      _hidden: {
        display: "none"
      }
    }
  }
});

// src/theme/recipes/dialog.ts
import { dialogAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
var dialog = defineSlotRecipe12({
  className: "dialog",
  slots: dialogAnatomy.keys(),
  base: {
    backdrop: {
      backdropFilter: "blur(4px)",
      background: {
        _light: "white.a10",
        _dark: "black.a10"
      },
      height: "100vh",
      left: "0",
      position: "fixed",
      top: "0",
      width: "100vw",
      zIndex: "overlay",
      _open: {
        animation: "backdrop-in"
      },
      _closed: {
        animation: "backdrop-out"
      }
    },
    positioner: {
      alignItems: "center",
      display: "flex",
      justifyContent: "center",
      left: "0",
      overflow: "auto",
      position: "fixed",
      top: "0",
      width: "100vw",
      height: "100dvh",
      zIndex: "modal"
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      boxShadow: "lg",
      minW: "sm",
      position: "relative",
      _open: {
        animation: "dialog-in"
      },
      _closed: {
        animation: "dialog-out"
      }
    },
    title: {
      fontWeight: "semibold",
      textStyle: "lg"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    }
  }
});

// src/theme/recipes/drawer.ts
import { dialogAnatomy as dialogAnatomy2 } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
var anatomy = dialogAnatomy2.extendWith("header", "body", "footer");
var drawer = defineSlotRecipe13({
  className: "drawer",
  slots: [...anatomy.keys()],
  base: {
    backdrop: {
      backdropFilter: "blur(4px)",
      background: {
        _light: "white.a10",
        _dark: "black.a10"
      },
      height: "100vh",
      left: "0",
      position: "fixed",
      top: "0",
      width: "100vw",
      zIndex: "overlay",
      _open: {
        animation: "backdrop-in"
      },
      _closed: {
        animation: "backdrop-out"
      }
    },
    positioner: {
      alignItems: "center",
      display: "flex",
      height: "100dvh",
      justifyContent: "center",
      position: "fixed",
      top: 0,
      width: { base: "100vw", sm: "sm" },
      zIndex: "modal"
    },
    content: {
      background: "bg.default",
      boxShadow: "lg",
      display: "grid",
      divideY: "1px",
      gridTemplateColumns: "1fr",
      gridTemplateRows: "auto 1fr auto",
      gridTemplateAreas: `
        'header'
        'body'
        'footer'
      `,
      height: "full",
      width: "full",
      _hidden: {
        display: "none"
      }
    },
    header: {
      display: "flex",
      flexDirection: "column",
      gap: "1",
      gridArea: "header",
      pt: { base: "4", md: "6" },
      pb: "4",
      px: { base: "4", md: "6" }
    },
    body: {
      display: "flex",
      flexDirection: "column",
      gridArea: "body",
      overflow: "auto",
      p: { base: "4", md: "6" }
    },
    footer: {
      display: "flex",
      gridArea: "footer",
      justifyContent: "flex-end",
      py: "4",
      px: { base: "4", md: "6" }
    },
    title: {
      color: "fg.default",
      fontWeight: "semibold",
      textStyle: "xl"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    }
  },
  defaultVariants: {
    variant: "right"
  },
  variants: {
    variant: {
      left: {
        positioner: {
          left: 0
        },
        content: {
          _open: {
            animation: "drawer-in-left"
          },
          _closed: {
            animation: "drawer-out-left"
          }
        }
      },
      right: {
        positioner: {
          right: 0
        },
        content: {
          _open: {
            animation: "drawer-in-right"
          },
          _closed: {
            animation: "drawer-out-right"
          }
        }
      }
    }
  }
});

// src/theme/recipes/editable.ts
import { editableAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
var editable = defineSlotRecipe14({
  className: "editable",
  slots: editableAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5",
      width: "100%"
    },
    control: {
      display: "flex",
      gap: "2"
    }
  }
});

// src/theme/recipes/field.ts
import { fieldAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
var field = defineSlotRecipe15({
  className: "field",
  slots: fieldAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium",
      textStyle: "sm",
      _disabled: {
        color: "fg.disabled"
      }
    },
    helperText: {
      color: "fg.muted",
      textStyle: "sm",
      _disabled: {
        color: "fg.disabled"
      }
    },
    errorText: {
      alignItems: "center",
      color: "fg.error",
      display: "inline-flex",
      gap: "2",
      textStyle: "sm",
      _disabled: {
        color: "fg.disabled"
      }
    }
  }
});

// src/theme/recipes/fieldset.ts
import { fieldsetAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
var fieldset = defineSlotRecipe16({
  className: "fieldset",
  slots: [...fieldsetAnatomy.keys(), "control"],
  base: {
    root: {
      display: "grid",
      borderTopWidth: "1px",
      py: "6",
      columnGap: "8",
      rowGap: "1.5",
      gridTemplateAreas: {
        base: `
        "legend legend" 
        "helperText helperText"
        "control control"
        "errorText errorText"
        `,
        md: `
        "legend control"
        "helperText control"
        "errorText errorText"`
      },
      gridTemplateRows: "auto 1fr",
      gridTemplateColumns: "1fr auto",
      width: "full"
    },
    control: {
      gridArea: "control",
      display: "grid",
      gap: "4"
    },
    legend: {
      color: "fg.default",
      fontWeight: "medium",
      gridArea: "legend",
      textStyle: "sm",
      float: "left",
      "+ *": {
        clear: "both"
      },
      _disabled: {
        color: "fg.disabled"
      }
    },
    helperText: {
      color: "fg.muted",
      gridArea: "helperText",
      textStyle: "sm",
      _disabled: {
        color: "fg.disabled"
      }
    },
    errorText: {
      alignItems: "center",
      color: "fg.error",
      display: "inline-flex",
      gap: "2",
      gridArea: "errorText",
      mt: "4",
      textStyle: "sm",
      _disabled: {
        color: "fg.disabled"
      }
    }
  }
});

// src/theme/recipes/file-upload.ts
import { fileUploadAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
var fileUpload = defineSlotRecipe17({
  className: "fileUpload",
  slots: fileUploadAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "4",
      width: "100%"
    },
    label: {
      fontWeight: "medium",
      textStyle: "sm"
    },
    dropzone: {
      alignItems: "center",
      background: "bg.default",
      borderRadius: "l3",
      borderWidth: "1px",
      display: "flex",
      flexDirection: "column",
      gap: "3",
      justifyContent: "center",
      minHeight: "xs",
      px: "6",
      py: "4"
    },
    item: {
      animation: "fadeIn 0.25s ease-out",
      background: "bg.default",
      borderRadius: "l3",
      borderWidth: "1px",
      columnGap: "3",
      display: "grid",
      gridTemplateColumns: "auto 1fr auto",
      gridTemplateAreas: `
        "preview name delete"
        "preview size delete"
        `,
      p: "4"
    },
    itemGroup: {
      display: "flex",
      flexDirection: "column",
      gap: "3"
    },
    itemName: {
      color: "fg.default",
      fontWeight: "medium",
      gridArea: "name",
      textStyle: "sm"
    },
    itemSizeText: {
      color: "fg.muted",
      gridArea: "size",
      textStyle: "sm"
    },
    itemDeleteTrigger: {
      alignSelf: "flex-start",
      gridArea: "delete"
    },
    itemPreview: {
      gridArea: "preview"
    },
    itemPreviewImage: {
      aspectRatio: "1",
      height: "10",
      objectFit: "scale-down",
      width: "10"
    }
  }
});

// src/theme/recipes/form-label.ts
import { defineRecipe as defineRecipe4 } from "@pandacss/dev";
var formLabel = defineRecipe4({
  className: "formLabel",
  base: {
    color: "fg.default",
    fontWeight: "medium"
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        textStyle: "sm"
      },
      md: {
        textStyle: "sm"
      },
      lg: {
        textStyle: "sm"
      },
      xl: {
        textStyle: "md"
      }
    }
  }
});

// src/theme/recipes/hover-card.ts
import { hoverCardAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
var hoverCard = defineSlotRecipe18({
  className: "hoverCard",
  slots: hoverCardAnatomy.keys(),
  base: {
    content: {
      "--hover-card-background": "colors.bg.default",
      background: "var(--hover-card-background)",
      borderRadius: "l3",
      boxShadow: "lg",
      maxW: "80",
      p: "4",
      position: "relative",
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      }
    },
    arrow: {
      "--arrow-size": "12px",
      "--arrow-background": "var(--hover-card-background)"
    },
    arrowTip: {
      borderTopWidth: "1px",
      borderLeftWidth: "1px"
    }
  }
});

// src/theme/recipes/icon.ts
import { defineRecipe as defineRecipe5 } from "@pandacss/dev";
var icon = defineRecipe5({
  className: "icon",
  base: {
    color: "currentcolor",
    display: "inline-block",
    flexShrink: "0",
    verticalAlign: "middle",
    lineHeight: "1em"
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      xs: {
        w: "3",
        h: "3"
      },
      sm: {
        w: "4",
        h: "4"
      },
      md: {
        w: "5",
        h: "5"
      },
      lg: {
        w: "6",
        h: "6"
      },
      xl: {
        w: "7",
        h: "7"
      },
      "2xl": {
        w: "8",
        h: "8"
      }
    }
  }
});

// src/theme/recipes/input.ts
import { defineRecipe as defineRecipe6 } from "@pandacss/dev";
var input = defineRecipe6({
  className: "input",
  jsx: ["Input", "Field.Input"],
  base: {
    appearance: "none",
    background: "none",
    borderColor: "border.default",
    borderRadius: "l2",
    borderWidth: "1px",
    color: "fg.default",
    outline: 0,
    position: "relative",
    transitionDuration: "normal",
    transitionProperty: "box-shadow, border-color",
    transitionTimingFunction: "default",
    width: "full",
    _disabled: {
      opacity: 0.4,
      cursor: "not-allowed"
    },
    _focus: {
      borderColor: "colorPalette.default",
      boxShadow: "0 0 0 1px var(--colors-color-palette-default)"
    },
    _invalid: {
      borderColor: "fg.error",
      _focus: {
        borderColor: "fg.error",
        boxShadow: "0 0 0 1px var(--colors-border-error)"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      "2xs": { px: "1.5", h: "7", minW: "7", fontSize: "xs" },
      xs: { px: "2", h: "8", minW: "8", fontSize: "xs" },
      sm: { px: "2.5", h: "9", minW: "9", fontSize: "sm" },
      md: { px: "3", h: "10", minW: "10", fontSize: "md" },
      lg: { px: "3.5", h: "11", minW: "11", fontSize: "md" },
      xl: { px: "4", h: "12", minW: "12", fontSize: "lg" },
      "2xl": { px: "4.5", h: "16", minW: "16", textStyle: "3xl" }
    }
  }
});

// src/theme/recipes/kbd.ts
import { defineRecipe as defineRecipe7 } from "@pandacss/dev";
var kbd = defineRecipe7({
  className: "kbd",
  base: {
    alignItems: "center",
    bg: "bg.subtle",
    borderRadius: "l2",
    boxShadow: "0 -2px 0 0 inset var(--colors-border-muted), 0 0 0 1px inset var(--colors-border-muted)",
    color: "fg.default",
    display: "inline-flex",
    fontFamily: "var(--fonts-code)",
    fontWeight: "medium",
    whiteSpace: "pre"
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        minHeight: "5",
        px: "0.5",
        textStyle: "xs"
      },
      md: {
        minHeight: "6",
        textStyle: "sm",
        px: "1",
        py: "1px"
      },
      lg: {
        minHeight: "7",
        px: "1.5",
        py: "1px",
        textStyle: "md"
      }
    }
  }
});

// src/theme/recipes/link.ts
import { defineRecipe as defineRecipe8 } from "@pandacss/dev";
var link = defineRecipe8({
  className: "link",
  base: {
    alignItems: "center",
    color: "fg.default",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "medium",
    gap: "2",
    textDecoration: "underline 0.1em transparent",
    textUnderlineOffset: "0.125em",
    transitionDuration: "normal",
    transitionProperty: "text-decoration-color",
    transitionTimingFunction: "default",
    _hover: {
      textDecorationColor: "colorPalette.default"
    },
    "& svg": {
      width: "1em",
      height: "1em"
    }
  }
});

// src/theme/recipes/menu.ts
import { menuAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
var itemStyle = {
  alignItems: "center",
  borderRadius: "l1",
  cursor: "pointer",
  display: "flex",
  fontWeight: "medium",
  textStyle: "sm",
  transitionDuration: "fast",
  transitionProperty: "background, color",
  transitionTimingFunction: "default",
  _hover: {
    background: "bg.muted",
    "& :where(svg)": {
      color: "fg.default"
    }
  },
  _highlighted: {
    background: "bg.muted"
  },
  "& :where(svg)": {
    color: "fg.muted"
  },
  _disabled: {
    color: "fg.disabled",
    cursor: "not-allowed",
    _hover: {
      color: "fg.disabled",
      background: "none"
    }
  }
};
var menu = defineSlotRecipe19({
  className: "menu",
  slots: menuAnatomy.keys(),
  base: {
    itemGroupLabel: {
      fontWeight: "semibold",
      textStyle: "sm"
    },
    content: {
      background: "bg.default",
      borderRadius: "l2",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      outline: "none",
      width: "calc(100% + 2rem)",
      zIndex: "dropdown",
      _hidden: {
        display: "none"
      },
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      }
    },
    itemGroup: {
      display: "flex",
      flexDirection: "column"
    },
    positioner: {
      zIndex: "dropdown"
    },
    item: itemStyle,
    triggerItem: itemStyle
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      xs: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "1.5",
          px: "1.5",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1"
        },
        item: {
          h: "8",
          px: "1.5",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        optionItem: {
          h: "8",
          px: "1.5",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        triggerItem: {
          h: "8",
          px: "1.5",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        }
      },
      sm: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "2",
          px: "2",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1"
        },
        item: {
          h: "9",
          px: "2",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        optionItem: {
          h: "9",
          px: "2",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        triggerItem: {
          h: "9",
          px: "2",
          mx: "1.5",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        }
      },
      md: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "2.5",
          px: "2.5",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1"
        },
        item: {
          h: "10",
          px: "2.5",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        optionItem: {
          h: "10",
          px: "2.5",
          mx: "1",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        },
        triggerItem: {
          h: "10",
          px: "2.5",
          mx: "1.5",
          "& :where(svg)": {
            width: "4",
            height: "4"
          }
        }
      },
      lg: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "2.5",
          px: "2.5",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1"
        },
        item: {
          h: "11",
          px: "2.5",
          mx: "1",
          "& :where(svg)": {
            width: "5",
            height: "5"
          }
        },
        optionItem: {
          h: "11",
          px: "2.5",
          mx: "1",
          "& :where(svg)": {
            width: "5",
            height: "5"
          }
        },
        triggerItem: {
          h: "11",
          px: "2.5",
          mx: "1.5",
          "& :where(svg)": {
            width: "5",
            height: "5"
          }
        }
      }
    }
  }
});

// src/theme/recipes/number-input.ts
import { numberInputAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
var trigger = {
  alignItems: "center",
  borderColor: "border.default",
  color: "fg.muted",
  cursor: "pointer",
  display: "inline-flex",
  justifyContent: "center",
  transitionDuration: "normal",
  transitionProperty: "background, border-color, color, box-shadow",
  transitionTimingFunction: "default",
  "& :where(svg)": {
    width: "4",
    height: "4"
  },
  _hover: {
    background: "gray.a2",
    color: "fg.default"
  },
  _disabled: {
    color: "fg.disabled",
    cursor: "not-allowed",
    _hover: {
      background: "transparent",
      color: "fg.disabled"
    }
  }
};
var numberInput = defineSlotRecipe20({
  className: "numberInput",
  slots: numberInputAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    control: {
      borderColor: "border.default",
      borderRadius: "l2",
      borderWidth: "1px",
      display: "grid",
      divideX: "1px",
      gridTemplateColumns: "1fr 32px",
      gridTemplateRows: "1fr 1fr",
      overflow: "hidden",
      transitionDuration: "normal",
      transitionProperty: "border-color, box-shadow",
      transitionTimingFunction: "default",
      _focusWithin: {
        borderColor: "colorPalette.default",
        boxShadow: "0 0 0 1px var(--colors-color-palette-default)"
      },
      _disabled: {
        opacity: 0.4,
        cursor: "not-allowed"
      }
    },
    input: {
      background: "transparent",
      border: "none",
      gridRow: "span 2 / span 2",
      outline: "none",
      width: "full",
      _disabled: {
        cursor: "not-allowed"
      }
    },
    label: {
      color: "fg.default",
      fontWeight: "medium"
    },
    decrementTrigger: { ...trigger, borderTopWidth: "1px" },
    incrementTrigger: trigger
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      md: {
        control: {
          ps: "3",
          h: "10",
          minW: "10",
          fontSize: "md"
        },
        label: {
          textStyle: "sm"
        }
      },
      lg: {
        control: {
          ps: "3.5",
          h: "11",
          minW: "11",
          fontSize: "md"
        },
        label: {
          textStyle: "sm"
        }
      },
      xl: {
        control: {
          ps: "4",
          h: "12",
          minW: "12",
          fontSize: "lg"
        },
        label: {
          textStyle: "md"
        }
      }
    }
  }
});

// src/theme/recipes/pagination.ts
import { paginationAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
var pagination = defineSlotRecipe21({
  className: "pagination",
  slots: paginationAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      gap: "2.5"
    },
    item: {
      fontVariantNumeric: "tabular-nums"
    },
    ellipsis: {
      alignItems: "center",
      color: "fg.default",
      display: "inline-flex",
      fontWeight: "semibold",
      px: "2"
    }
  }
});

// src/theme/recipes/pin-input.ts
import { pinInputAnatomy } from "@ark-ui/anatomy";
import { defineSlotRecipe as defineSlotRecipe22 } from "@pandacss/dev";
var pinInput = defineSlotRecipe22({
  className: "pinInput",
  slots: pinInputAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    control: {
      display: "flex",
      gap: "2"
    },
    label: {
      color: "fg.default",
      fontWeight: "medium"
    },
    input: {
      px: "0!",
      textAlign: "center"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      xs: {
        label: {
          textStyle: "sm"
        },
        input: {
          width: "8"
        }
      },
      sm: {
        label: {
          textStyle: "sm"
        },
        input: {
          width: "9"
        }
      },
      md: {
        label: {
          textStyle: "sm"
        },
        input: {
          width: "10"
        }
      },
      lg: {
        label: {
          textSty