@ygor-ui/presets/dist/index.mjs

Panda CSS presets for Ark UI components

// src/index.ts
import { definePreset } from "@pandacss/dev";

// src/conditions.ts
var conditions = {
  extend: {
    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])",
    current: "&:is([data-current])",
    today: "&:is([data-today])"
  }
};

// src/global-css.ts
import { defineGlobalStyles } from "@pandacss/dev";
var globalCss = defineGlobalStyles({
  html: {
    lineHeight: 1.5,
    MozOsxFontSmoothing: "grayscale",
    textRendering: "optimizeLegibility",
    WebkitFontSmoothing: "antialiased",
    WebkitTextSizeAdjust: "100%"
  },
  body: {
    background: "bg.canvas",
    color: "fg.default",
    fontFamily: "var(--font-body), sans-serif",
    _dark: {
      colorScheme: "dark"
    }
  },
  "*, *::before, *::after": {
    borderColor: "border.default",
    borderStyle: "solid",
    boxSizing: "border-box"
  },
  "*::placeholder": {
    opacity: 1,
    color: "fg.subtle"
  }
});

// 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%)" }
  },
  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)" }
  },
  slideInFromBottom: {
    "0%": { opacity: "0", transform: "translateY(4px)" },
    "100%": { opacity: "1", transform: "translateY(0)" }
  },
  slideOutToBottom: {
    "0%": { opacity: "1", transform: "translateY(0)" },
    "100%": { opacity: "0", transform: "translateY(4px)" }
  }
});

// src/theme/recipes/accordion.ts
import { accordionAnatomy } from "@ark-ui/react";
import { defineSlotRecipe } from "@pandacss/dev";
var accordion = defineSlotRecipe({
  className: "accordion",
  description: "An accordion style",
  slots: accordionAnatomy.keys(),
  base: {
    root: {
      divideY: "1px",
      width: "full"
    },
    trigger: {
      alignItems: "center",
      cursor: "pointer",
      display: "flex",
      fontWeight: "medium",
      justifyContent: "space-between",
      width: "full"
    },
    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/theme/recipes/alert.ts
import { defineRecipe } from "@pandacss/dev";
var alert = defineRecipe({
  className: "alert",
  description: "An alert style",
  base: {
    background: "bg.default",
    borderRadius: "l3",
    borderWidth: "1px",
    p: "4",
    textStyle: "sm",
    width: "full"
  }
});

// src/theme/recipes/article.ts
import { defineRecipe as defineRecipe2 } from "@pandacss/dev";
var article = defineRecipe2({
  className: "article",
  description: "An article style",
  base: {
    maxWidth: "65ch",
    "& :where(h1, h2)": {
      fontWeight: "bold"
    },
    "& :where(h3)": {
      fontWeight: "semibold"
    },
    "& :where(ul)": {
      listStyleType: "disc"
    },
    "& :where(a)": {
      color: "fg.emphasized",
      fontWeight: "medium",
      textDecoration: "underline",
      textDecorationColor: "accent.default",
      textUnderlineOffset: "0.2em"
    },
    "& :where(p, li)": {
      color: "fg.muted"
    },
    "& :where(li::marker)": {
      color: "bg.emphasized"
    },
    "& :where(strong)": {
      fontWeight: "semibold",
      color: "fg.default"
    },
    "& :where(code):not(:where(pre code))": {
      alignItems: "center",
      bg: "bg.subtle",
      borderRadius: "l2",
      borderWidth: "1px",
      display: "inline-flex",
      fontFamily: "var(--font-code)",
      fontWeight: "medium"
    },
    "& :where(pre)": {
      backgroundColor: "bg.subtle",
      borderRadius: "l3",
      borderWidth: "1px",
      overflowX: "auto"
    },
    "& :where(blockquote)": {
      borderLeftWidth: "4px"
    },
    "& :where(blockquote > p)": {
      color: "fg.default",
      fontWeight: "medium",
      _first: {
        fontStyle: "italic",
        _before: {
          content: "open-quote"
        },
        _after: {
          content: "close-quote"
        }
      }
    },
    "& :where(h1 + *)": {
      marginTop: "0!"
    },
    "& :where(h2 + *)": {
      marginTop: "0!"
    },
    "& :where(h3 + *)": {
      marginTop: "0!"
    },
    "& :where(hr + *)": {
      marginTop: "0!"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        "& :where(h1)": {
          fontSize: "3xl",
          lineHeight: "2.25rem",
          mb: "6"
        },
        "& :where(h2)": {
          fontSize: "xl",
          lineHeight: "1.75rem",
          mb: "4",
          mt: "8"
        },
        "& :where(h3)": {
          fontSize: "lg",
          lineHeight: "1.75rem",
          mb: "2",
          mt: "7"
        },
        "& :where(p)": {
          fontSize: "sm",
          lineHeight: "1.5rem",
          my: "4"
        },
        "& :where(hr)": {
          my: "10"
        },
        "& :where(ul)": {
          ps: "5"
        },
        "& :where(li)": {
          fontSize: "sm",
          lineHeight: "1.5rem",
          my: "1"
        },
        "& :where(code)": {
          height: "5",
          px: "0.5",
          textStyle: "xs"
        },
        "& :where(pre)": {
          my: "5",
          px: "3",
          py: "2"
        },
        "& :where(blockquote)": {
          my: "4",
          ps: "4"
        },
        "& :where(h1 + p)": {
          color: "fg.emphasized",
          fontSize: "lg",
          lineHeight: "1.75rem",
          mb: "4"
        }
      },
      md: {
        "& :where(h1)": {
          fontSize: "4xl",
          letterSpacing: "-0.02em",
          lineHeight: "2.5rem",
          mb: "8"
        },
        "& :where(h2)": {
          fontSize: "2xl",
          lineHeight: "2rem",
          mb: "6",
          mt: "12"
        },
        "& :where(h3)": {
          fontSize: "xl",
          lineHeight: "2rem",
          mt: "8",
          mb: "3"
        },
        "& :where(p)": {
          fontSize: "md",
          lineHeight: "relaxed",
          my: "5"
        },
        "& :where(hr)": {
          my: "12"
        },
        "& :where(ul)": {
          ps: "6"
        },
        "& :where(li)": {
          fontSize: "md",
          lineHeight: "relaxed",
          my: "2"
        },
        "& :where(code)": {
          fontSize: "sm",
          height: "6",
          px: "1"
        },
        "& :where(pre)": {
          my: "6",
          px: "4",
          py: "3"
        },
        "& :where(blockquote)": {
          my: "5",
          ps: "4"
        },
        "& :where(h1 + p)": {
          color: "fg.emphasized",
          fontSize: "xl",
          lineHeight: "2rem",
          mb: "6"
        }
      },
      lg: {
        "& :where(h1)": {
          fontSize: "5xl",
          letterSpacing: "-0.02em",
          lineHeight: "3rem",
          mb: "10"
        },
        "& :where(h2)": {
          fontSize: "3xl",
          lineHeight: "2.5rem",
          mb: "8",
          mt: "14"
        },
        "& :where(h3)": {
          fontSize: "2xl",
          lineHeight: "2.25rem",
          mb: "4",
          mt: "10"
        },
        "& :where(p)": {
          fontSize: "lg",
          lineHeight: "2rem",
          my: "6"
        },
        "& :where(hr)": {
          my: "14"
        },
        "& :where(ul)": {
          ps: "7"
        },
        "& :where(li)": {
          fontSize: "lg",
          lineHeight: "2rem",
          my: "3"
        },
        "& :where(code)": {
          height: "7",
          px: "1.5",
          textStyle: "md"
        },
        "& :where(pre)": {
          my: "8",
          px: "6",
          py: "4"
        },
        "& :where(blockquote)": {
          my: "6",
          ps: "4.5"
        },
        "& :where(h1 + p)": {
          color: "fg.emphasized",
          fontSize: "2xl",
          lineHeight: "2rem",
          mb: "6"
        }
      }
    }
  }
});

// src/theme/recipes/avatar.ts
import { avatarAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe2 } from "@pandacss/dev";
var avatar = defineSlotRecipe2({
  className: "avatar",
  description: "An avatar style",
  slots: avatarAnatomy.keys(),
  base: {
    root: {
      borderRadius: "full",
      borderWidth: "1px",
      flexShrink: 0
    },
    fallback: {
      alignItems: "center",
      background: "bg.subtle",
      borderWidth: "1px",
      display: "flex",
      fontWeight: "semibold",
      height: "inherit",
      justifyContent: "center"
    },
    image: {
      objectFit: "cover"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      xs: {
        root: {
          height: "8",
          width: "8"
        },
        fallback: {
          textStyle: "xs"
        }
      },
      sm: {
        root: {
          height: "9",
          width: "9"
        },
        fallback: {
          textStyle: "sm"
        }
      },
      md: {
        root: {
          height: "10",
          width: "10"
        },
        fallback: {
          textStyle: "md"
        }
      },
      lg: {
        root: {
          height: "11",
          width: "11"
        },
        fallback: {
          textStyle: "lg"
        }
      },
      xl: {
        root: {
          height: "12",
          width: "12"
        },
        fallback: {
          textStyle: "xl"
        }
      },
      "2xl": {
        root: {
          height: "16",
          width: "16"
        },
        fallback: {
          textStyle: "2xl"
        }
      }
    }
  }
});

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

// src/theme/recipes/button.ts
import { defineRecipe as defineRecipe4 } from "@pandacss/dev";
var button = defineRecipe4({
  className: "button",
  description: "A button style",
  base: {
    alignItems: "center",
    appearance: "none",
    borderRadius: "l2",
    cursor: "pointer",
    display: "inline-flex",
    fontWeight: "semibold",
    justifyContent: "center",
    outline: "none",
    position: "relative",
    transitionDuration: "normal",
    transitionProperty: "background, border-color, color, box-shadow",
    transitionTimingFunction: "default",
    userSelect: "none",
    verticalAlign: "middle",
    whiteSpace: "nowrap"
  },
  defaultVariants: {
    variant: "primary",
    size: "md"
  },
  variants: {
    variant: {
      primary: {
        background: "accent.default",
        color: "accent.fg",
        _hover: {
          background: "accent.emphasized"
        },
        _focusVisible: {
          outlineOffset: "2px",
          outline: "2px solid",
          outlineColor: "border.accent"
        },
        _disabled: {
          background: "bg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "bg.disabled"
          }
        }
      },
      secondary: {
        borderWidth: "1px",
        borderColor: "border.emphasized",
        background: "bg.default",
        color: "fg.emphasized",
        _hover: {
          color: "fg.default",
          background: "bg.subtle"
        },
        _selected: {
          background: "accent.default",
          borderColor: "border.accent",
          color: "accent.fg",
          _hover: {
            color: "accent.fg",
            background: "accent.default",
            borderColor: "border.accent"
          }
        },
        _disabled: {
          borderColor: "border.disabled",
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "transparent",
            borderColor: "border.disabled",
            color: "fg.disabled"
          }
        },
        _focusVisible: {
          outlineOffset: "2px",
          outline: "2px solid",
          outlineColor: "border.outline"
        }
      },
      tertiary: {
        color: "fg.emphasized",
        _hover: {
          color: "fg.default",
          background: "bg.subtle"
        },
        _disabled: {
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            background: "transparent",
            color: "fg.disabled"
          }
        },
        _focusVisible: {
          outline: "2px solid",
          outlineColor: "border.outline"
        },
        _selected: {
          background: "accent.default",
          color: "accent.fg",
          _hover: {
            color: "accent.fg",
            background: "accent.default"
          }
        }
      },
      link: {
        color: "fg.muted",
        _hover: {
          color: "fg.default"
        },
        _disabled: {
          color: "fg.disabled",
          cursor: "not-allowed",
          _hover: {
            color: "fg.disabled"
          }
        },
        height: "auto!",
        px: "0!",
        minW: "0!"
      }
    },
    size: {
      xs: {
        h: "8",
        minW: "8",
        textStyle: "xs",
        px: "3",
        gap: "2",
        "& svg": {
          fontSize: "md",
          width: "4",
          height: "4"
        }
      },
      sm: {
        h: "9",
        minW: "9",
        textStyle: "sm",
        px: "3.5",
        gap: "2",
        "& svg": {
          width: "4.5",
          height: "4.5"
        }
      },
      md: {
        h: "10",
        minW: "10",
        textStyle: "sm",
        px: "4",
        gap: "2",
        "& svg": {
          fontSize: "xl",
          width: "5",
          height: "5"
        }
      },
      lg: {
        h: "11",
        minW: "11",
        textStyle: "md",
        px: "4.5",
        gap: "2",
        "& svg": {
          width: "5",
          height: "5"
        }
      },
      xl: {
        h: "12",
        minW: "12",
        textStyle: "md",
        px: "5",
        gap: "2.5",
        "& svg": {
          width: "5",
          height: "5"
        }
      },
      "2xl": {
        h: "16",
        minW: "16",
        textStyle: "lg",
        px: "7",
        gap: "3",
        "& svg": {
          width: "6",
          height: "6"
        }
      }
    }
  }
});

// src/theme/recipes/carousel.ts
import { carouselAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe3 } from "@pandacss/dev";
var carousel = defineSlotRecipe3({
  className: "carousel",
  description: "A carousel style",
  slots: carouselAnatomy.keys(),
  base: {
    viewport: {
      overflowX: "hidden",
      position: "relative",
      borderRadius: "l2"
    },
    control: {
      alignItems: "center",
      background: "bg.default",
      borderRadius: "l2",
      bottom: "4",
      display: "flex",
      left: "50%",
      opacity: "0.9",
      position: "absolute",
      transform: "translateX(-50%)",
      zIndex: "docked"
    },
    indicatorGroup: {
      display: "flex"
    },
    indicator: {
      borderRadius: "full",
      background: "bg.emphasized",
      cursor: "pointer",
      _current: {
        background: "accent.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/react";
import { defineSlotRecipe as defineSlotRecipe4 } from "@pandacss/dev";
var checkbox = defineSlotRecipe4({
  className: "checkbox",
  description: "A checkbox style",
  slots: checkboxAnatomy.keys(),
  base: {
    root: {
      alignItems: "center",
      display: "flex"
    },
    label: {
      color: "fg.emphasized",
      fontWeight: "medium"
    },
    control: {
      alignItems: "center",
      borderColor: "border.emphasized",
      borderWidth: "1px",
      color: "accent.fg",
      cursor: "pointer",
      display: "flex",
      justifyContent: "center",
      transitionDuration: "normal",
      transitionProperty: "border-color, background",
      transitionTimingFunction: "default",
      _hover: {
        background: "bg.subtle"
      },
      _checked: {
        background: "accent.default",
        borderColor: "border.accent",
        _hover: {
          background: "accent.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/code.ts
import { defineRecipe as defineRecipe5 } from "@pandacss/dev";
var code = defineRecipe5({
  className: "code",
  description: "An code style",
  base: {
    alignItems: "center",
    bg: "bg.subtle",
    borderRadius: "l2",
    borderWidth: "1px",
    color: "fg.default",
    display: "inline-flex",
    fontFamily: "var(--font-code)",
    fontWeight: "medium"
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        height: "5",
        px: "0.5",
        textStyle: "xs"
      },
      md: {
        height: "6",
        px: "1",
        textStyle: "sm"
      },
      lg: {
        height: "7",
        px: "1.5",
        textStyle: "md"
      }
    }
  }
});

// src/theme/recipes/color-picker.ts
import { colorPickerAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe5 } from "@pandacss/dev";
var colorPicker = defineSlotRecipe5({
  className: "colorPicker",
  description: "A color picker style",
  slots: colorPickerAnatomy.keys(),
  base: {
    content: {
      borderRadius: "l3",
      borderWidth: "1px",
      boxShadow: "lg",
      padding: "4",
      maxW: "264px"
    },
    area: {
      height: "36",
      borderRadius: "l2",
      overflow: "hidden"
    },
    areaGradient: {
      height: "100%"
    },
    channelSliderTrack: {
      height: "2",
      borderRadius: "full"
    },
    channelSliderTrackBackground: {
      overflow: "hidden",
      borderRadius: "full"
    },
    swatchGroup: {
      display: "grid",
      gridTemplateColumns: "repeat(7, 1fr)",
      gap: "2",
      background: "bg.default"
    },
    swatch: {
      height: "6",
      width: "6",
      borderRadius: "full",
      boxShadow: "0 0 0 1px var(--colors-border-emphasized), 0 0 0 2px var(--colors-bg-default) inset"
    },
    areaThumb: {
      borderRadius: "full",
      height: "2.5",
      width: "2.5",
      boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
      outline: "none"
    },
    channelSliderThumb: {
      borderRadius: "full",
      height: "2.5",
      width: "2.5",
      boxShadow: "white 0px 0px 0px 2px, black 0px 0px 2px 1px",
      transform: "translate(-50%, -50%)",
      zIndex: "1",
      outline: "none"
    }
  }
});

// src/theme/recipes/combobox.ts
import { comboboxAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe6 } from "@pandacss/dev";
var combobox = defineSlotRecipe6({
  className: "combobox",
  description: "A combobox style",
  slots: comboboxAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: "column",
      gap: "1.5"
    },
    control: {
      position: "relative"
    },
    trigger: {
      position: "absolute!",
      right: "0",
      bottom: "0",
      top: "0"
    },
    content: {
      background: "bg.default",
      borderRadius: "l2",
      borderWidth: "1px",
      boxShadow: "lg",
      display: "flex",
      flexDirection: "column",
      _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"
      }
    },
    option: {
      alignItems: "center",
      borderRadius: "l1",
      cursor: "pointer",
      display: "flex",
      fontWeight: "medium",
      transitionDuration: "fast",
      transitionProperty: "background, color",
      transitionTimingFunction: "default",
      _hover: {
        background: "bg.subtle"
      },
      _highlighted: {
        background: "bg.subtle"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        content: { p: "0.5", gap: "1" },
        option: { textStyle: "sm", px: "2", height: "9" }
      },
      md: {
        content: { p: "1", gap: "1" },
        option: { textStyle: "sm", px: "2", height: "10" },
        trigger: { right: "4" }
      },
      lg: {
        content: { p: "1.5", gap: "1" },
        option: { textStyle: "md", px: "2", height: "11" }
      }
    }
  }
});

// src/theme/recipes/date-picker.ts
import { datePickerAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe7 } from "@pandacss/dev";
var datePicker = defineSlotRecipe7({
  className: "datePicker",
  description: "A date picker style",
  slots: [...datePickerAnatomy.keys()],
  base: {
    cellTrigger: {
      _today: {
        _before: {
          content: "'\u2212'",
          color: "accent.default",
          position: "absolute",
          marginTop: "6"
        }
      },
      "&[data-in-range]": {
        background: "bg.subtle"
      },
      _selected: {
        _before: {
          color: "accent.fg"
        }
      }
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      borderWidth: "1px",
      p: "4",
      width: "fit-content"
    },
    grid: {
      display: "flex",
      flexDirection: "column",
      gap: "1",
      '&[data-type="day"] [data-part="row"]': {
        gridTemplateColumns: "repeat(7, 1fr)"
      },
      '&[data-type="month"] [data-part="row"]': {
        gridTemplateColumns: "repeat(4, 1fr)"
      },
      '&[data-type="year"] [data-part="row"]': {
        gridTemplateColumns: "repeat(4, 1fr)"
      }
    },
    rowGroup: {
      display: "flex",
      flexDirection: "column",
      gap: "1"
    },
    row: {
      display: "grid"
    },
    rowHeader: {
      display: "grid",
      gridTemplateColumns: "repeat(7, 1fr)"
    },
    columnHeader: {
      alignItems: "center",
      color: "fg.subtle",
      display: "inline-flex",
      fontWeight: "semibold",
      height: "10",
      justifyContent: "center",
      textStyle: "sm",
      width: "10"
    }
  }
});

// src/theme/recipes/dialog.ts
import { dialogAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe8 } from "@pandacss/dev";
var dialog = defineSlotRecipe8({
  className: "dialog",
  description: "A dialog style",
  slots: dialogAnatomy.keys(),
  base: {
    backdrop: {
      backdropFilter: "blur(4px)",
      background: {
        // TODO: replace when supported in Panda: bg.canvas/80
        base: "rgba(250, 250, 250, 0.8)",
        _dark: "rgba(10, 10, 10, 0.8)"
      },
      inset: "0",
      position: "fixed",
      zIndex: "overlay",
      _open: {
        animation: "backdrop-in"
      },
      _closed: {
        animation: "backdrop-out"
      }
    },
    container: {
      alignItems: "center",
      display: "flex",
      inset: "0",
      justifyContent: "center",
      position: "fixed",
      zIndex: "modal"
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      borderWidth: "1px",
      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/react";
import { defineSlotRecipe as defineSlotRecipe9 } from "@pandacss/dev";
var drawer = defineSlotRecipe9({
  className: "drawer",
  description: "A drawer style",
  slots: dialogAnatomy2.keys(),
  base: {
    backdrop: {
      backdropFilter: "blur(4px)",
      background: {
        // TODO: replace when supported in Panda: bg.canvas/80
        base: "rgba(250, 250, 250, 0.8)",
        _dark: "rgba(10, 10, 10, 0.8)"
      },
      inset: "0",
      position: "fixed",
      zIndex: "overlay",
      _open: {
        animation: "backdrop-in"
      },
      _closed: {
        animation: "backdrop-out"
      }
    },
    container: {
      alignItems: "center",
      display: "flex",
      top: 0,
      bottom: 0,
      justifyContent: "center",
      position: "fixed",
      zIndex: "modal"
    },
    content: {
      background: "bg.default",
      boxShadow: "lg",
      height: "full",
      width: { base: "xs", sm: "sm" },
      overflowY: "auto",
      position: "relative",
      px: {
        base: "4",
        md: "6"
      },
      py: "6"
    },
    title: {
      fontWeight: "semibold",
      textStyle: "xl"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    }
  },
  defaultVariants: {
    placement: "right"
  },
  variants: {
    placement: {
      left: {
        container: {
          left: 0
        },
        content: {
          borderRightWidth: "1px",
          _open: {
            animation: "drawer-in-left"
          },
          _closed: {
            animation: "drawer-out-left"
          }
        }
      },
      right: {
        container: {
          right: 0
        },
        content: {
          borderLeftWidth: "1px",
          _open: {
            animation: "drawer-in-right"
          },
          _closed: {
            animation: "drawer-out-right"
          }
        }
      }
    }
  }
});

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

// src/theme/recipes/hover-card.ts
import { hoverCardAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe11 } from "@pandacss/dev";
var hoverCard = defineSlotRecipe11({
  className: "hoverCard",
  description: "A hover card style",
  slots: hoverCardAnatomy.keys(),
  base: {
    content: {
      "--hover-card-background": "colors.bg.default",
      background: "var(--hover-card-background)",
      borderRadius: "l3",
      borderWidth: "1px",
      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/input.ts
import { defineRecipe as defineRecipe6 } from "@pandacss/dev";
var input = defineRecipe6({
  className: "input",
  description: "An input style",
  base: {
    appearance: "none",
    backgroundColor: "bg.default",
    borderColor: "border.emphasized",
    borderRadius: "l2",
    borderWidth: "1px",
    outline: 0,
    position: "relative",
    transitionDuration: "normal",
    transitionProperty: "box-shadow, border-color",
    transitionTimingFunction: "default",
    width: "full",
    _disabled: {
      opacity: 0.4,
      cursor: "not-allowed"
    },
    _focus: {
      borderColor: "border.accent",
      boxShadow: "accent"
    }
  },
  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: "2", h: "16", minW: "16", textStyle: "3xl" }
    }
  }
});

// src/theme/recipes/label.ts
import { defineRecipe as defineRecipe7 } from "@pandacss/dev";
var label = defineRecipe7({
  className: "label",
  description: "A label style",
  base: {
    color: "fg.emphasized",
    fontWeight: "medium"
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        textStyle: "sm"
      },
      md: {
        textStyle: "sm"
      },
      lg: {
        textStyle: "sm"
      },
      xl: {
        textStyle: "md"
      }
    }
  }
});

// src/theme/recipes/link.ts
import { defineRecipe as defineRecipe8 } from "@pandacss/dev";
var link = defineRecipe8({
  className: "link",
  description: "A link style",
  base: {
    color: "fg.subtle",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    gap: "2",
    transitionDuration: "normal",
    transitionProperty: "color, font-weight",
    transitionTimingFunction: "default"
  },
  defaultVariants: {
    variant: "text"
  },
  variants: {
    variant: {
      text: {
        fontWeight: "medium",
        color: "fg.default",
        textDecoration: "underline"
      },
      toc: {
        fontWeight: "medium",
        textStyle: "sm",
        _hover: {
          color: "fg.muted"
        },
        _currentPage: {
          fontWeight: "semibold",
          color: "fg.emphasized",
          _hover: {
            color: "fg.emphasized"
          }
        }
      },
      navbar: {
        fontWeight: "semibold",
        textStyle: "md",
        _hover: {
          color: "fg.muted"
        },
        _currentPage: {
          color: "fg.emphasized",
          _hover: {
            color: "fg.emphasized"
          }
        }
      }
    }
  }
});

// src/theme/recipes/menu.ts
import { menuAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe12 } from "@pandacss/dev";
var itemStyle = {
  alignItems: "center",
  borderRadius: "l1",
  color: "fg.emphasized",
  cursor: "pointer",
  display: "flex",
  fontWeight: "medium",
  textStyle: "sm",
  transitionDuration: "fast",
  transitionProperty: "background, color",
  transitionTimingFunction: "default",
  _hover: {
    color: "fg.default",
    background: "bg.subtle"
  },
  _highlighted: {
    color: "fg.default",
    background: "bg.subtle"
  }
};
var menu = defineSlotRecipe12({
  className: "menu",
  description: "A menu style",
  slots: menuAnatomy.keys(),
  base: {
    itemGroupLabel: {
      fontWeight: "semibold",
      textStyle: "sm"
    },
    content: {
      background: "bg.default",
      borderRadius: "l2",
      borderWidth: "1px",
      boxShadow: "lg",
      _hidden: {
        display: "none"
      },
      display: "flex",
      flexDirection: "column",
      outline: "none"
    },
    itemGroup: {
      display: "flex",
      flexDirection: "column"
    },
    item: itemStyle,
    optionItem: 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",
          minW: "24"
        },
        item: {
          h: "8",
          px: "1.5",
          mx: "1"
        },
        optionItem: {
          h: "8",
          px: "1.5",
          mx: "1"
        },
        triggerItem: {
          h: "8",
          px: "1.5",
          mx: "1.5"
        }
      },
      sm: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "2",
          px: "2",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1",
          minW: "32"
        },
        item: {
          h: "9",
          px: "2",
          mx: "1"
        },
        optionItem: {
          h: "9",
          px: "2",
          mx: "1"
        },
        triggerItem: {
          h: "9",
          px: "2",
          mx: "1.5"
        }
      },
      md: {
        itemGroup: {
          gap: "1"
        },
        itemGroupLabel: {
          py: "2.5",
          px: "2.5",
          mx: "1"
        },
        content: {
          py: "1",
          gap: "1",
          minW: "44"
        },
        item: {
          h: "10",
          px: "2.5",
          mx: "1"
        },
        optionItem: {
          h: "10",
          px: "2.5",
          mx: "1"
        },
        triggerItem: {
          h: "10",
          px: "2.5",
          mx: "1.5"
        }
      }
    }
  }
});

// src/theme/recipes/number-input.ts
import { numberInputAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe13 } from "@pandacss/dev";
var numberInput = defineSlotRecipe13({
  className: "numberInput",
  description: "A number input style",
  slots: numberInputAnatomy.keys(),
  base: {
    root: {
      borderColor: "border.emphasized",
      borderRadius: "l2",
      borderWidth: "1px",
      display: "flex",
      overflow: "hidden",
      width: "full",
      transitionDuration: "normal",
      transitionProperty: "border-color, box-shadow",
      transitionTimingFunction: "default",
      _focusWithin: {
        borderColor: "border.accent",
        boxShadow: "accent"
      }
    },
    control: {
      borderLeftWidth: "1px",
      borderColor: "border.emphasized",
      display: "flex",
      flexDirection: "column"
    },
    input: {
      outline: "none",
      background: "transparent",
      width: "full"
    },
    decrementTrigger: {
      borderRadius: "0"
    },
    incrementTrigger: {
      borderRadius: "0"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      md: {
        root: {
          ps: "3",
          h: "10",
          minW: "10",
          fontSize: "md"
        }
      },
      lg: {
        root: {
          ps: "3.5",
          h: "11",
          minW: "11",
          fontSize: "md"
        }
      },
      xl: {
        root: {
          ps: "4",
          h: "12",
          minW: "12",
          fontSize: "lg"
        }
      }
    }
  }
});

// src/theme/recipes/pagination.ts
import { paginationAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe14 } from "@pandacss/dev";
var pagination = defineSlotRecipe14({
  className: "pagination",
  description: "A pagination style",
  slots: paginationAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      justifyContent: "space-between",
      gap: "4"
    },
    list: {
      display: "flex",
      gap: "2"
    },
    pageTrigger: {
      fontVariantNumeric: "tabular-nums"
    },
    ellipsis: {
      alignItems: "center",
      color: "fg.emphasized",
      display: "inline-flex",
      fontWeight: "semibold",
      px: "2"
    }
  }
});

// src/theme/recipes/pin-input.ts
import { pinInputAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe15 } from "@pandacss/dev";
var pinInput = defineSlotRecipe15({
  className: "pinInput",
  description: "An pin input style",
  slots: pinInputAnatomy.keys(),
  base: {
    control: {
      display: "flex",
      gap: "2"
    }
  }
});

// src/theme/recipes/popover.ts
import { popoverAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe16 } from "@pandacss/dev";
var popover = defineSlotRecipe16({
  className: "popover",
  description: "A popover style",
  slots: popoverAnatomy.keys(),
  base: {
    positioner: {
      position: "relative",
      zIndex: "popover"
    },
    content: {
      background: "bg.default",
      borderRadius: "l3",
      borderWidth: "1px",
      boxShadow: "lg",
      maxWidth: "sm",
      zIndex: "1",
      p: "4",
      _open: {
        animation: "fadeIn 0.25s ease-out"
      },
      _closed: {
        animation: "fadeOut 0.2s ease-out"
      }
    },
    title: {
      fontWeight: "medium",
      textStyle: "sm"
    },
    description: {
      color: "fg.muted",
      textStyle: "sm"
    },
    closeTrigger: {
      color: "fg.muted"
    },
    arrow: {
      "--arrow-size": "var(--sizes-3)",
      "--arrow-background": "var(--colors-bg-default)"
    },
    arrowTip: {
      borderTopWidth: "1px",
      borderLeftWidth: "1px"
    }
  }
});

// src/theme/recipes/radio-button-group.ts
import { radioGroupAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe17 } from "@pandacss/dev";
var radioButtonGroup = defineSlotRecipe17({
  className: "radioButtonGroup",
  description: "A radio button group style",
  slots: radioGroupAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexWrap: "wrap"
    },
    radio: {
      alignItems: "center",
      appearance: "none",
      borderColor: "border.emphasized",
      borderRadius: "l2",
      borderWidth: "1px",
      color: "fg.emphasized",
      cursor: "pointer",
      display: "inline-flex",
      fontWeight: "semibold",
      justifyContent: "center",
      outline: "none",
      position: "relative",
      transitionDuration: "normal",
      transitionProperty: "background, border-color, color",
      transitionTimingFunction: "default",
      userSelect: "none",
      verticalAlign: "middle",
      whiteSpace: "nowrap",
      _hover: {
        color: "fg.default",
        background: "bg.subtle"
      },
      _checked: {
        cursor: "default",
        color: "accent.fg",
        borderColor: "border.accent",
        background: "accent.default",
        _hover: {
          color: "accent.fg",
          background: "accent.default"
        }
      },
      _disabled: {
        borderColor: "border.disabled",
        color: "fg.disabled",
        cursor: "not-allowed",
        backgroundImage: "linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)",
        _hover: {
          background: "transparent",
          backgroundImage: "linear-gradient(315deg, transparent 49%, var(--colors-border-disabled) 49%, var(--colors-border-disabled) 51%, transparent 51%)",
          borderColor: "border.disabled",
          color: "fg.disabled"
        }
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        root: {
          gap: "2"
        },
        radio: {
          h: "9",
          w: "9",
          textStyle: "sm",
          "& svg": {
            fontSize: "xl"
          }
        }
      },
      md: {
        root: {
          gap: "3"
        },
        radio: {
          h: "10",
          w: "10",
          textStyle: "sm",
          "& svg": {
            fontSize: "xl"
          }
        }
      },
      lg: {
        root: {
          gap: "3"
        },
        radio: {
          h: "11",
          w: "11",
          textStyle: "md",
          "& svg": {
            fontSize: "xl"
          }
        }
      },
      xl: {
        root: {
          gap: "3"
        },
        radio: {
          h: "12",
          w: "12",
          textStyle: "md",
          "& svg": {
            fontSize: "xl"
          }
        }
      }
    }
  }
});

// src/theme/recipes/radio-group.ts
import { radioGroupAnatomy as radioGroupAnatomy2 } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe18 } from "@pandacss/dev";
var radioGroup = defineSlotRecipe18({
  className: "radioGroup",
  description: "A radio group style",
  slots: radioGroupAnatomy2.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: {
        _vertical: "column",
        _horizontal: "row"
      }
    },
    radioControl: {
      background: "transparent",
      borderColor: "border.emphasized",
      borderRadius: "full",
      borderWidth: "1px",
      transitionDuration: "normal",
      transitionProperty: "background",
      transitionTimingFunction: "default",
      _hover: {
        background: "bg.subtle"
      },
      _checked: {
        background: "accent.default",
        borderColor: "border.accent",
        outlineColor: "bg.default",
        outlineStyle: "solid",
        _hover: {
          background: "accent.default"
        }
      }
    },
    radio: {
      alignItems: "center",
      cursor: "pointer",
      display: "flex"
    },
    radioLabel: {
      color: "fg.emphasized",
      fontWeight: "medium"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        root: {
          gap: {
            _vertical: "3",
            _horizontal: "4"
          }
        },
        radio: {
          gap: "2"
        },
        radioControl: {
          width: "4",
          height: "4",
          _checked: {
            outlineWidth: "3px",
            outlineOffset: "-4px"
          }
        },
        radioLabel: {
          textStyle: "sm"
        }
      },
      md: {
        root: {
          gap: {
            _vertical: "4",
            _horizontal: "6"
          }
        },
        radio: {
          gap: "3"
        },
        radioControl: {
          width: "5",
          height: "5",
          _checked: {
            outlineWidth: "4px",
            outlineOffset: "-5px"
          }
        },
        radioLabel: {
          textStyle: "md"
        }
      },
      lg: {
        root: {
          gap: {
            _vertical: "5",
            _horizontal: "8"
          }
        },
        radio: {
          gap: "4"
        },
        radioControl: {
          width: "6",
          height: "6",
          _checked: {
            outlineWidth: "5px",
            outlineOffset: "-6px"
          }
        },
        radioLabel: {
          textStyle: "lg"
        }
      }
    }
  }
});

// src/theme/recipes/range-slider.ts
import { rangeSliderAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe19 } from "@pandacss/dev";
var rangeSlider = defineSlotRecipe19({
  className: "range-slider",
  description: "A range slider style",
  slots: rangeSliderAnatomy.keys(),
  base: {
    root: {
      width: "full"
    },
    control: {
      position: "relative",
      display: "flex",
      alignItems: "center"
    },
    track: {
      backgroundColor: "bg.muted",
      borderRadius: "l2",
      flex: "1"
    },
    range: {
      background: "accent.default",
      borderRadius: "l2"
    },
    thumb: {
      background: "bg.default",
      borderColor: "border.accent",
      borderRadius: "full",
      borderWidth: "2px",
      boxShadow: "sm",
      outline: "none"
    },
    label: {
      color: "fg.emphasized",
      fontWeight: "semibold"
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      md: {
        control: {
          py: "2"
        },
        range: {
          height: "2"
        },
        track: {
          height: "2"
        },
        thumb: {
          height: "6",
          width: "6"
        },
        marker: {
          mt: "2",
          textStyle: "sm"
        },
        label: {
          textStyle: "sm"
        }
      }
    }
  }
});

// src/theme/recipes/rating-group.ts
import { ratingGroupAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe20 } from "@pandacss/dev";
var ratingGroup = defineSlotRecipe20({
  className: "ratingGroup",
  description: "A rating group style",
  slots: ratingGroupAnatomy.keys(),
  base: {
    control: {
      display: "flex"
    },
    rating: {
      cursor: "pointer",
      transitionDuration: "normal",
      transitionProperty: "color, fill",
      transitionTimingFunction: "default",
      color: "var(--colors-bg-emphasized)",
      fill: "var(--colors-bg-emphasized)",
      _highlighted: {
        color: "var(--colors-accent-default)",
        fill: "var(--colors-accent-default)"
      },
      _focusVisible: {
        outline: "2px solid",
        outlineColor: "border.accent"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        control: {
          gap: "0"
        },
        rating: {
          "& svg": {
            width: "4",
            height: "4"
          }
        }
      },
      md: {
        control: {
          gap: "0.5"
        },
        rating: {
          "& svg": {
            width: "5",
            height: "5"
          }
        }
      },
      lg: {
        control: {
          gap: "0.5"
        },
        rating: {
          "& svg": {
            width: "6",
            height: "6"
          }
        }
      }
    }
  }
});

// src/theme/recipes/segment-group.ts
import { segmentGroupAnatomy } from "@ark-ui/react";
import { defineSlotRecipe as defineSlotRecipe21 } from "@pandacss/dev";
var segmentGroup = defineSlotRecipe21({
  className: "segmentGroup",
  description: "A segment group style",
  slots: segmentGroupAnatomy.keys(),
  base: {
    root: {
      display: "flex",
      flexDirection: {
        _horizontal: "row",
        _vertical: "column"
      },
      gap: {
        _horizontal: "4",
        _vertical: "1"
      },
      borderBottomWidth: {
        _horizontal: "1px"
      },
      borderLeftWidth: {
        _vertical: "1px"
      }
    },
    indicator: {
      borderBottomWidth: {
        _horizontal: "2px"
      },
      borderLeftWidth: {
        _vertical: "2px"
      },
      borderColor: "accent.default",
      transform: {
        _horizontal: "translateY(1px)",
        _vertical: "translateX(-1px)"
      }
    },
    radio: {
      color: "fg.subtle",
      cursor: "pointer",
      fontWeight: "medium",
      transitionDuration: "normal",
      transitionProperty: "color",
      transitionTimingFunction: "default",
      _hover: {
        color: "fg.muted"
      },
      _checked: {
        fontWeight: "semibold",
        color: "fg.emphasized",
        _hover: {
          color: "fg.emphasized"
        }
      },
      px: {
        _horizontal: "1",
        _vertical: "3"
      },
      pb: {
        _horizontal: "3"
      },
      py: {
        _vertical: "1.5"
      }
    }
  },
  defaultVariants: {
    size: "md"
  },
  variants: {
    size: {
      sm: {
        radio: {
          textStyle: "sm"
        }