@blockadegames/pizza-juice
Version:
Pizza Juice Design System
1,586 lines (1,585 loc) • 665 kB
TypeScript
import * as React$1 from 'react';
import React__default, { HTMLAttributes, ImgHTMLAttributes, ComponentProps as ComponentProps$1, InputHTMLAttributes, ReactElement, SelectHTMLAttributes } from 'react';
import * as _stitches_react_types_css from '@stitches/react/types/css';
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
import * as _stitches_react_types_stitches from '@stitches/react/types/stitches';
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
import * as _stitches_react_types_util from '@stitches/react/types/util';
import * as Stitches from '@stitches/react';
import { PropertyValue, ScaleValue } from '@stitches/react';
import * as CheckboxBase from '@radix-ui/react-checkbox';
import * as RadioProps from '@radix-ui/react-radio-group';
export { RadioProps as BaseRadioProps };
import * as Tabs from '@radix-ui/react-tabs';
import * as _radix_ui_react_switch from '@radix-ui/react-switch';
import { SwitchProps } from '@radix-ui/react-switch';
import { TextareaAutosizeProps } from 'react-textarea-autosize';
import * as RVisuallyHidden from '@radix-ui/react-visually-hidden';
import * as RTooltip from '@radix-ui/react-tooltip';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import * as RAccordion from '@radix-ui/react-accordion';
import * as toastify from 'react-toastify';
import * as BaseSliderProps from '@radix-ui/react-slider';
declare type VariantProps<T> = Stitches.VariantProps<T>;
declare type CSS = Stitches.CSS<typeof config>;
declare type ComponentProps<T> = Stitches.ComponentProps<T>;
declare const config: {
prefix: "";
media: {
sm: "(min-width: 576px)";
md: "(min-width: 768px)";
lg: "(min-width: 992px)";
xl: "(min-width: 1200px)";
'2xl': "(min-width: 1400px)";
motion: "(prefers-reduced-motion: reduce)";
hover: "(any-hover: hover)";
dark: "(prefers-color-scheme: dark)";
light: "(prefers-color-scheme: light)";
};
theme: {
colors: {
white: string;
black: string;
'pink-500': string;
'pink-600': string;
'pink-700': string;
'grey-400': string;
'grey-600': string;
'grey-700': string;
'grey-800': string;
'grey-850': string;
'grey-900': string;
'red-500': string;
'red-550': string;
'red-600': string;
'red-650': string;
'red-900': string;
'teal-500': string;
'yellow-500': string;
'yellow-550': string;
'yellow-600': string;
'yellow-700': string;
'yellow-900': string;
'green-500': string;
'green-550': string;
'green-600': string;
'green-700': string;
'green-900': string;
common: string;
uncommon: string;
rare: string;
'ultra-rare': string;
legendary: string;
'ability-100': string;
'ability-200': string;
'ability-300': string;
'ability-400': string;
'ability-500': string;
'ability-550': string;
'ability-600': string;
'ability-650': string;
'ability-700': string;
'ability-750': string;
'ability-800': string;
'ability-850': string;
'ability-900': string;
'ability-950': string;
'ability-975': string;
'interact-100': string;
'interact-200': string;
'interact-300': string;
'interact-400': string;
'interact-500': string;
'interact-550': string;
'interact-600': string;
'interact-650': string;
'interact-700': string;
'interact-750': string;
'interact-800': string;
'interact-850': string;
'interact-900': string;
'interact-950': string;
'interact-975': string;
'attack-100': string;
'attack-200': string;
'attack-300': string;
'attack-400': string;
'attack-500': string;
'attack-550': string;
'attack-600': string;
'attack-650': string;
'attack-700': string;
'attack-750': string;
'attack-800': string;
'attack-850': string;
'attack-900': string;
'attack-950': string;
'attack-975': string;
'effect-100': string;
'effect-200': string;
'effect-300': string;
'effect-400': string;
'effect-500': string;
'effect-550': string;
'effect-600': string;
'effect-650': string;
'effect-700': string;
'effect-750': string;
'effect-800': string;
'effect-850': string;
'effect-900': string;
'effect-950': string;
'effect-975': string;
taunt: string;
'counter-attack': string;
poison: string;
regeneration: string;
shield: string;
'neon-pink-100': string;
'neon-pink-200': string;
'neon-pink-300': string;
'neon-pink-400': string;
'neon-pink-500': string;
'neon-pink-550': string;
'neon-pink-600': string;
'neon-pink-650': string;
'neon-pink-700': string;
'neon-pink-750': string;
'neon-pink-800': string;
'neon-pink-850': string;
'neon-pink-900': string;
'neon-pink-950': string;
'neon-pink-975': string;
'neon-blue-100': string;
'neon-blue-200': string;
'neon-blue-300': string;
'neon-blue-400': string;
'neon-blue-500': string;
'neon-blue-550': string;
'neon-blue-600': string;
'neon-blue-650': string;
'neon-blue-700': string;
'neon-blue-750': string;
'neon-blue-800': string;
'neon-blue-850': string;
'neon-blue-900': string;
'neon-blue-950': string;
'neon-blue-975': string;
};
transitions: {
fast: string;
};
fonts: {
system: string;
};
fontSizes: {
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
};
fontWeights: {
thin: number;
normal: number;
medium: number;
bold: number;
extrabold: number;
};
radii: {
full: string;
half: string;
sm: string;
md: string;
};
sizes: {
full: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
space: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
};
zIndices: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
shadows: unknown;
blurs: {
sm: string;
md: string;
lg: string;
};
};
themeMap: {
gap: "space";
gridGap: "space";
columnGap: "space";
gridColumnGap: "space";
rowGap: "space";
gridRowGap: "space";
inset: "space";
insetBlock: "space";
insetBlockEnd: "space";
insetBlockStart: "space";
insetInline: "space";
insetInlineEnd: "space";
insetInlineStart: "space";
margin: "space";
marginTop: "space";
marginRight: "space";
marginBottom: "space";
marginLeft: "space";
marginBlock: "space";
marginBlockEnd: "space";
marginBlockStart: "space";
marginInline: "space";
marginInlineEnd: "space";
marginInlineStart: "space";
padding: "space";
paddingTop: "space";
paddingRight: "space";
paddingBottom: "space";
paddingLeft: "space";
paddingBlock: "space";
paddingBlockEnd: "space";
paddingBlockStart: "space";
paddingInline: "space";
paddingInlineEnd: "space";
paddingInlineStart: "space";
scrollMargin: "space";
scrollMarginTop: "space";
scrollMarginRight: "space";
scrollMarginBottom: "space";
scrollMarginLeft: "space";
scrollMarginBlock: "space";
scrollMarginBlockEnd: "space";
scrollMarginBlockStart: "space";
scrollMarginInline: "space";
scrollMarginInlineEnd: "space";
scrollMarginInlineStart: "space";
scrollPadding: "space";
scrollPaddingTop: "space";
scrollPaddingRight: "space";
scrollPaddingBottom: "space";
scrollPaddingLeft: "space";
scrollPaddingBlock: "space";
scrollPaddingBlockEnd: "space";
scrollPaddingBlockStart: "space";
scrollPaddingInline: "space";
scrollPaddingInlineEnd: "space";
scrollPaddingInlineStart: "space";
top: "space";
right: "space";
bottom: "space";
left: "space";
fontSize: "fontSizes";
background: "colors";
backgroundColor: "colors";
backgroundImage: "colors";
borderImage: "colors";
border: "colors";
borderBlock: "colors";
borderBlockEnd: "colors";
borderBlockStart: "colors";
borderBottom: "colors";
borderBottomColor: "colors";
borderColor: "colors";
borderInline: "colors";
borderInlineEnd: "colors";
borderInlineStart: "colors";
borderLeft: "colors";
borderLeftColor: "colors";
borderRight: "colors";
borderRightColor: "colors";
borderTop: "colors";
borderTopColor: "colors";
caretColor: "colors";
color: "colors";
columnRuleColor: "colors";
outline: "colors";
outlineColor: "colors";
fill: "colors";
stroke: "colors";
textDecorationColor: "colors";
fontFamily: "fonts";
fontWeight: "fontWeights";
lineHeight: "lineHeights";
letterSpacing: "letterSpacings";
blockSize: "sizes";
minBlockSize: "sizes";
maxBlockSize: "sizes";
inlineSize: "sizes";
minInlineSize: "sizes";
maxInlineSize: "sizes";
width: "sizes";
minWidth: "sizes";
maxWidth: "sizes";
height: "sizes";
minHeight: "sizes";
maxHeight: "sizes";
flexBasis: "sizes";
gridTemplateColumns: "sizes";
gridTemplateRows: "sizes";
borderWidth: "borderWidths";
borderTopWidth: "borderWidths";
borderLeftWidth: "borderWidths";
borderRightWidth: "borderWidths";
borderBottomWidth: "borderWidths";
borderStyle: "borderStyles";
borderTopStyle: "borderStyles";
borderLeftStyle: "borderStyles";
borderRightStyle: "borderStyles";
borderBottomStyle: "borderStyles";
borderRadius: "radii";
borderTopLeftRadius: "radii";
borderTopRightRadius: "radii";
borderBottomRightRadius: "radii";
borderBottomLeftRadius: "radii";
boxShadow: "shadows";
textShadow: "shadows";
transition: "transitions";
zIndex: "zIndices";
};
utils: {
m: (v: PropertyValue<'margin'>) => {
margin: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mt: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mr: (v: PropertyValue<'margin'>) => {
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mb: (v: PropertyValue<'margin'>) => {
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
ml: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mx: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
my: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
p: (v: PropertyValue<'padding'>) => {
padding: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pt: (v: PropertyValue<'padding'>) => {
paddingTop: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pr: (v: PropertyValue<'padding'>) => {
paddingRight: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pb: (v: PropertyValue<'padding'>) => {
paddingBottom: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pl: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
px: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding";
};
paddingRight: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
py: (v: PropertyValue<'padding'>) => {
paddingTop: {
readonly [Stitches.$$PropertyValue]: "padding";
};
paddingBottom: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
bg: (v: PropertyValue<'background'>) => {
background: {
readonly [Stitches.$$PropertyValue]: "background";
};
};
size: (v: PropertyValue<'width'>) => {
width: {
readonly [Stitches.$$PropertyValue]: "width";
};
height: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
maxSize: (v: PropertyValue<'width'>) => {
maxWidth: {
readonly [Stitches.$$PropertyValue]: "width";
};
maxHeight: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
minSize: (v: PropertyValue<'width'>) => {
minWidth: {
readonly [Stitches.$$PropertyValue]: "width";
};
minHeight: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
br: (v: PropertyValue<'borderRadius'>) => {
borderRadius: {
readonly [Stitches.$$PropertyValue]: "borderRadius";
};
};
bs: (v: PropertyValue<'boxShadow'>) => {
boxShadow: {
readonly [Stitches.$$PropertyValue]: "boxShadow";
};
};
justify: (v: PropertyValue<'justifyContent'>) => {
justifyContent: {
readonly [Stitches.$$PropertyValue]: "justifyContent";
};
};
align: (v: PropertyValue<'alignItems'>) => {
alignItems: {
readonly [Stitches.$$PropertyValue]: "alignItems";
};
};
h: (v: PropertyValue<'height'>) => {
height: {
readonly [Stitches.$$PropertyValue]: "height";
};
};
maxH: (v: PropertyValue<'maxHeight'>) => {
maxHeight: {
readonly [Stitches.$$PropertyValue]: "maxHeight";
};
};
minH: (v: PropertyValue<'minHeight'>) => {
minHeight: {
readonly [Stitches.$$PropertyValue]: "minHeight";
};
};
w: (v: PropertyValue<'width'>) => {
width: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
maxW: (v: PropertyValue<'maxWidth'>) => {
maxWidth: {
readonly [Stitches.$$PropertyValue]: "maxWidth";
};
};
minW: (v: PropertyValue<'minWidth'>) => {
minWidth: {
readonly [Stitches.$$PropertyValue]: "minWidth";
};
};
d: (v: PropertyValue<'display'>) => {
display: {
readonly [Stitches.$$PropertyValue]: "display";
};
};
columns: (v: PropertyValue<'gridTemplateColumns'>) => {
gridTemplateColumns: {
readonly [Stitches.$$PropertyValue]: "gridTemplateColumns";
};
};
rows: (v: PropertyValue<'gridTemplateRows'>) => {
gridTemplateRows: {
readonly [Stitches.$$PropertyValue]: "gridTemplateRows";
};
};
blur: (v: ScaleValue<'blurs'>) => {
filter: string;
};
textGradient: (v: PropertyValue<'backgroundImage'>) => {
backgroundImage: string;
WebkitBackgroundClip: string;
WebkitTextFillColor: string;
'&::selection': {
WebkitTextFillColor: string;
};
};
};
};
declare const css: <Composers extends (string | _stitches_react_types_util.Function | React$1.JSXElementConstructor<any> | React$1.ExoticComponent<any> | {
[name: string]: unknown;
})[], CSS_1 = _stitches_react_types_css_util.CSS<{
sm: "(min-width: 576px)";
md: "(min-width: 768px)";
lg: "(min-width: 992px)";
xl: "(min-width: 1200px)";
'2xl': "(min-width: 1400px)";
motion: "(prefers-reduced-motion: reduce)";
hover: "(any-hover: hover)";
dark: "(prefers-color-scheme: dark)";
light: "(prefers-color-scheme: light)";
}, {
colors: {
white: string;
black: string;
'pink-500': string;
'pink-600': string;
'pink-700': string;
'grey-400': string;
'grey-600': string;
'grey-700': string;
'grey-800': string;
'grey-850': string;
'grey-900': string;
'red-500': string;
'red-550': string;
'red-600': string;
'red-650': string;
'red-900': string;
'teal-500': string;
'yellow-500': string;
'yellow-550': string;
'yellow-600': string;
'yellow-700': string;
'yellow-900': string;
'green-500': string;
'green-550': string;
'green-600': string;
'green-700': string;
'green-900': string;
common: string;
uncommon: string;
rare: string;
'ultra-rare': string;
legendary: string;
'ability-100': string;
'ability-200': string;
'ability-300': string;
'ability-400': string;
'ability-500': string;
'ability-550': string;
'ability-600': string;
'ability-650': string;
'ability-700': string;
'ability-750': string;
'ability-800': string;
'ability-850': string;
'ability-900': string;
'ability-950': string;
'ability-975': string;
'interact-100': string;
'interact-200': string;
'interact-300': string;
'interact-400': string;
'interact-500': string;
'interact-550': string;
'interact-600': string;
'interact-650': string;
'interact-700': string;
'interact-750': string;
'interact-800': string;
'interact-850': string;
'interact-900': string;
'interact-950': string;
'interact-975': string;
'attack-100': string;
'attack-200': string;
'attack-300': string;
'attack-400': string;
'attack-500': string;
'attack-550': string;
'attack-600': string;
'attack-650': string;
'attack-700': string;
'attack-750': string;
'attack-800': string;
'attack-850': string;
'attack-900': string;
'attack-950': string;
'attack-975': string;
'effect-100': string;
'effect-200': string;
'effect-300': string;
'effect-400': string;
'effect-500': string;
'effect-550': string;
'effect-600': string;
'effect-650': string;
'effect-700': string;
'effect-750': string;
'effect-800': string;
'effect-850': string;
'effect-900': string;
'effect-950': string;
'effect-975': string;
taunt: string;
'counter-attack': string;
poison: string;
regeneration: string;
shield: string;
'neon-pink-100': string;
'neon-pink-200': string;
'neon-pink-300': string;
'neon-pink-400': string;
'neon-pink-500': string;
'neon-pink-550': string;
'neon-pink-600': string;
'neon-pink-650': string;
'neon-pink-700': string;
'neon-pink-750': string;
'neon-pink-800': string;
'neon-pink-850': string;
'neon-pink-900': string;
'neon-pink-950': string;
'neon-pink-975': string;
'neon-blue-100': string;
'neon-blue-200': string;
'neon-blue-300': string;
'neon-blue-400': string;
'neon-blue-500': string;
'neon-blue-550': string;
'neon-blue-600': string;
'neon-blue-650': string;
'neon-blue-700': string;
'neon-blue-750': string;
'neon-blue-800': string;
'neon-blue-850': string;
'neon-blue-900': string;
'neon-blue-950': string;
'neon-blue-975': string;
};
transitions: {
fast: string;
};
fonts: {
system: string;
};
fontSizes: {
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
};
fontWeights: {
thin: number;
normal: number;
medium: number;
bold: number;
extrabold: number;
};
radii: {
full: string;
half: string;
sm: string;
md: string;
};
sizes: {
full: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
space: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
};
zIndices: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
shadows: unknown;
blurs: {
sm: string;
md: string;
lg: string;
};
}, {
gap: "space";
gridGap: "space";
columnGap: "space";
gridColumnGap: "space";
rowGap: "space";
gridRowGap: "space";
inset: "space";
insetBlock: "space";
insetBlockEnd: "space";
insetBlockStart: "space";
insetInline: "space";
insetInlineEnd: "space";
insetInlineStart: "space";
margin: "space";
marginTop: "space";
marginRight: "space";
marginBottom: "space";
marginLeft: "space";
marginBlock: "space";
marginBlockEnd: "space";
marginBlockStart: "space";
marginInline: "space";
marginInlineEnd: "space";
marginInlineStart: "space";
padding: "space";
paddingTop: "space";
paddingRight: "space";
paddingBottom: "space";
paddingLeft: "space";
paddingBlock: "space";
paddingBlockEnd: "space";
paddingBlockStart: "space";
paddingInline: "space";
paddingInlineEnd: "space";
paddingInlineStart: "space";
scrollMargin: "space";
scrollMarginTop: "space";
scrollMarginRight: "space";
scrollMarginBottom: "space";
scrollMarginLeft: "space";
scrollMarginBlock: "space";
scrollMarginBlockEnd: "space";
scrollMarginBlockStart: "space";
scrollMarginInline: "space";
scrollMarginInlineEnd: "space";
scrollMarginInlineStart: "space";
scrollPadding: "space";
scrollPaddingTop: "space";
scrollPaddingRight: "space";
scrollPaddingBottom: "space";
scrollPaddingLeft: "space";
scrollPaddingBlock: "space";
scrollPaddingBlockEnd: "space";
scrollPaddingBlockStart: "space";
scrollPaddingInline: "space";
scrollPaddingInlineEnd: "space";
scrollPaddingInlineStart: "space";
top: "space";
right: "space";
bottom: "space";
left: "space";
fontSize: "fontSizes";
background: "colors";
backgroundColor: "colors";
backgroundImage: "colors";
borderImage: "colors";
border: "colors";
borderBlock: "colors";
borderBlockEnd: "colors";
borderBlockStart: "colors";
borderBottom: "colors";
borderBottomColor: "colors";
borderColor: "colors";
borderInline: "colors";
borderInlineEnd: "colors";
borderInlineStart: "colors";
borderLeft: "colors";
borderLeftColor: "colors";
borderRight: "colors";
borderRightColor: "colors";
borderTop: "colors";
borderTopColor: "colors";
caretColor: "colors";
color: "colors";
columnRuleColor: "colors";
outline: "colors";
outlineColor: "colors";
fill: "colors";
stroke: "colors";
textDecorationColor: "colors";
fontFamily: "fonts";
fontWeight: "fontWeights";
lineHeight: "lineHeights";
letterSpacing: "letterSpacings";
blockSize: "sizes";
minBlockSize: "sizes";
maxBlockSize: "sizes";
inlineSize: "sizes";
minInlineSize: "sizes";
maxInlineSize: "sizes";
width: "sizes";
minWidth: "sizes";
maxWidth: "sizes";
height: "sizes";
minHeight: "sizes";
maxHeight: "sizes";
flexBasis: "sizes";
gridTemplateColumns: "sizes";
gridTemplateRows: "sizes";
borderWidth: "borderWidths";
borderTopWidth: "borderWidths";
borderLeftWidth: "borderWidths";
borderRightWidth: "borderWidths";
borderBottomWidth: "borderWidths";
borderStyle: "borderStyles";
borderTopStyle: "borderStyles";
borderLeftStyle: "borderStyles";
borderRightStyle: "borderStyles";
borderBottomStyle: "borderStyles";
borderRadius: "radii";
borderTopLeftRadius: "radii";
borderTopRightRadius: "radii";
borderBottomRightRadius: "radii";
borderBottomLeftRadius: "radii";
boxShadow: "shadows";
textShadow: "shadows";
transition: "transitions";
zIndex: "zIndices";
}, {
m: (v: PropertyValue<'margin'>) => {
margin: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mt: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mr: (v: PropertyValue<'margin'>) => {
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mb: (v: PropertyValue<'margin'>) => {
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
ml: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mx: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
my: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
p: (v: PropertyValue<'padding'>) => {
padding: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pt: (v: PropertyValue<'padding'>) => {
paddingTop: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pr: (v: PropertyValue<'padding'>) => {
paddingRight: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pb: (v: PropertyValue<'padding'>) => {
paddingBottom: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pl: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
px: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding";
};
paddingRight: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
py: (v: PropertyValue<'padding'>) => {
paddingTop: {
readonly [Stitches.$$PropertyValue]: "padding";
};
paddingBottom: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
bg: (v: PropertyValue<'background'>) => {
background: {
readonly [Stitches.$$PropertyValue]: "background";
};
};
size: (v: PropertyValue<'width'>) => {
width: {
readonly [Stitches.$$PropertyValue]: "width";
};
height: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
maxSize: (v: PropertyValue<'width'>) => {
maxWidth: {
readonly [Stitches.$$PropertyValue]: "width";
};
maxHeight: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
minSize: (v: PropertyValue<'width'>) => {
minWidth: {
readonly [Stitches.$$PropertyValue]: "width";
};
minHeight: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
br: (v: PropertyValue<'borderRadius'>) => {
borderRadius: {
readonly [Stitches.$$PropertyValue]: "borderRadius";
};
};
bs: (v: PropertyValue<'boxShadow'>) => {
boxShadow: {
readonly [Stitches.$$PropertyValue]: "boxShadow";
};
};
justify: (v: PropertyValue<'justifyContent'>) => {
justifyContent: {
readonly [Stitches.$$PropertyValue]: "justifyContent";
};
};
align: (v: PropertyValue<'alignItems'>) => {
alignItems: {
readonly [Stitches.$$PropertyValue]: "alignItems";
};
};
h: (v: PropertyValue<'height'>) => {
height: {
readonly [Stitches.$$PropertyValue]: "height";
};
};
maxH: (v: PropertyValue<'maxHeight'>) => {
maxHeight: {
readonly [Stitches.$$PropertyValue]: "maxHeight";
};
};
minH: (v: PropertyValue<'minHeight'>) => {
minHeight: {
readonly [Stitches.$$PropertyValue]: "minHeight";
};
};
w: (v: PropertyValue<'width'>) => {
width: {
readonly [Stitches.$$PropertyValue]: "width";
};
};
maxW: (v: PropertyValue<'maxWidth'>) => {
maxWidth: {
readonly [Stitches.$$PropertyValue]: "maxWidth";
};
};
minW: (v: PropertyValue<'minWidth'>) => {
minWidth: {
readonly [Stitches.$$PropertyValue]: "minWidth";
};
};
d: (v: PropertyValue<'display'>) => {
display: {
readonly [Stitches.$$PropertyValue]: "display";
};
};
columns: (v: PropertyValue<'gridTemplateColumns'>) => {
gridTemplateColumns: {
readonly [Stitches.$$PropertyValue]: "gridTemplateColumns";
};
};
rows: (v: PropertyValue<'gridTemplateRows'>) => {
gridTemplateRows: {
readonly [Stitches.$$PropertyValue]: "gridTemplateRows";
};
};
blur: (v: ScaleValue<'blurs'>) => {
filter: string;
};
textGradient: (v: PropertyValue<'backgroundImage'>) => {
backgroundImage: string;
WebkitBackgroundClip: string;
WebkitTextFillColor: string;
'&::selection': {
WebkitTextFillColor: string;
};
};
}>>(...composers: { [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | _stitches_react_types_util.Function | React$1.JSXElementConstructor<any> | React$1.ExoticComponent<any> ? Composers[K] : _stitches_react_types_stitches.RemoveIndex<CSS_1> & {
variants?: {
[x: string]: {
[x: string]: CSS_1;
[x: number]: CSS_1;
};
} | undefined;
compoundVariants?: (("variants" extends keyof Composers[K] ? { [Name in keyof Composers[K][keyof Composers[K] & "variants"]]?: _stitches_react_types_util.String | _stitches_react_types_util.Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name]> | undefined; } : _stitches_react_types_util.WideObject) & {
css: CSS_1;
})[] | undefined;
defaultVariants?: ("variants" extends keyof Composers[K] ? { [Name_1 in keyof Composers[K][keyof Composers[K] & "variants"]]?: _stitches_react_types_util.String | _stitches_react_types_util.Widen<keyof Composers[K][keyof Composers[K] & "variants"][Name_1]> | undefined; } : _stitches_react_types_util.WideObject) | undefined;
} & CSS_1 & { [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS_1 ? CSS_1[K2] : unknown; }; }) => _stitches_react_types_styled_component.CssComponent<_stitches_react_types_styled_component.StyledComponentType<Composers>, _stitches_react_types_styled_component.StyledComponentProps<Composers>, {
sm: "(min-width: 576px)";
md: "(min-width: 768px)";
lg: "(min-width: 992px)";
xl: "(min-width: 1200px)";
'2xl': "(min-width: 1400px)";
motion: "(prefers-reduced-motion: reduce)";
hover: "(any-hover: hover)";
dark: "(prefers-color-scheme: dark)";
light: "(prefers-color-scheme: light)";
}, CSS_1>;
declare const globalCss: <Styles extends {
[K: string]: any;
}>(...styles: ({
'@import'?: unknown;
'@font-face'?: unknown;
} & { [K in keyof Styles]: K extends "@import" ? string | string[] : K extends "@font-face" ? _stitches_react_types_css.AtRule.FontFace | _stitches_react_types_css.AtRule.FontFace[] : K extends `@keyframes ${string}` ? {
[x: string]: _stitches_react_types_css_util.CSS<{
sm: "(min-width: 576px)";
md: "(min-width: 768px)";
lg: "(min-width: 992px)";
xl: "(min-width: 1200px)";
'2xl': "(min-width: 1400px)";
motion: "(prefers-reduced-motion: reduce)";
hover: "(any-hover: hover)";
dark: "(prefers-color-scheme: dark)";
light: "(prefers-color-scheme: light)";
}, {
colors: {
white: string;
black: string;
'pink-500': string;
'pink-600': string;
'pink-700': string;
'grey-400': string;
'grey-600': string;
'grey-700': string;
'grey-800': string;
'grey-850': string;
'grey-900': string;
'red-500': string;
'red-550': string;
'red-600': string;
'red-650': string;
'red-900': string;
'teal-500': string;
'yellow-500': string;
'yellow-550': string;
'yellow-600': string;
'yellow-700': string;
'yellow-900': string;
'green-500': string;
'green-550': string;
'green-600': string;
'green-700': string;
'green-900': string;
common: string;
uncommon: string;
rare: string;
'ultra-rare': string;
legendary: string;
'ability-100': string;
'ability-200': string;
'ability-300': string;
'ability-400': string;
'ability-500': string;
'ability-550': string;
'ability-600': string;
'ability-650': string;
'ability-700': string;
'ability-750': string;
'ability-800': string;
'ability-850': string;
'ability-900': string;
'ability-950': string;
'ability-975': string;
'interact-100': string;
'interact-200': string;
'interact-300': string;
'interact-400': string;
'interact-500': string;
'interact-550': string;
'interact-600': string;
'interact-650': string;
'interact-700': string;
'interact-750': string;
'interact-800': string;
'interact-850': string;
'interact-900': string;
'interact-950': string;
'interact-975': string;
'attack-100': string;
'attack-200': string;
'attack-300': string;
'attack-400': string;
'attack-500': string;
'attack-550': string;
'attack-600': string;
'attack-650': string;
'attack-700': string;
'attack-750': string;
'attack-800': string;
'attack-850': string;
'attack-900': string;
'attack-950': string;
'attack-975': string;
'effect-100': string;
'effect-200': string;
'effect-300': string;
'effect-400': string;
'effect-500': string;
'effect-550': string;
'effect-600': string;
'effect-650': string;
'effect-700': string;
'effect-750': string;
'effect-800': string;
'effect-850': string;
'effect-900': string;
'effect-950': string;
'effect-975': string;
taunt: string;
'counter-attack': string;
poison: string;
regeneration: string;
shield: string;
'neon-pink-100': string;
'neon-pink-200': string;
'neon-pink-300': string;
'neon-pink-400': string;
'neon-pink-500': string;
'neon-pink-550': string;
'neon-pink-600': string;
'neon-pink-650': string;
'neon-pink-700': string;
'neon-pink-750': string;
'neon-pink-800': string;
'neon-pink-850': string;
'neon-pink-900': string;
'neon-pink-950': string;
'neon-pink-975': string;
'neon-blue-100': string;
'neon-blue-200': string;
'neon-blue-300': string;
'neon-blue-400': string;
'neon-blue-500': string;
'neon-blue-550': string;
'neon-blue-600': string;
'neon-blue-650': string;
'neon-blue-700': string;
'neon-blue-750': string;
'neon-blue-800': string;
'neon-blue-850': string;
'neon-blue-900': string;
'neon-blue-950': string;
'neon-blue-975': string;
};
transitions: {
fast: string;
};
fonts: {
system: string;
};
fontSizes: {
'3xs': string;
'2xs': string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
};
fontWeights: {
thin: number;
normal: number;
medium: number;
bold: number;
extrabold: number;
};
radii: {
full: string;
half: string;
sm: string;
md: string;
};
sizes: {
full: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
space: {
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
};
zIndices: {
hide: number;
auto: string;
base: number;
docked: number;
dropdown: number;
sticky: number;
banner: number;
overlay: number;
modal: number;
popover: number;
skipLink: number;
toast: number;
tooltip: number;
};
breakpoints: {
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
};
shadows: unknown;
blurs: {
sm: string;
md: string;
lg: string;
};
}, {
gap: "space";
gridGap: "space";
columnGap: "space";
gridColumnGap: "space";
rowGap: "space";
gridRowGap: "space";
inset: "space";
insetBlock: "space";
insetBlockEnd: "space";
insetBlockStart: "space";
insetInline: "space";
insetInlineEnd: "space";
insetInlineStart: "space";
margin: "space";
marginTop: "space";
marginRight: "space";
marginBottom: "space";
marginLeft: "space";
marginBlock: "space";
marginBlockEnd: "space";
marginBlockStart: "space";
marginInline: "space";
marginInlineEnd: "space";
marginInlineStart: "space";
padding: "space";
paddingTop: "space";
paddingRight: "space";
paddingBottom: "space";
paddingLeft: "space";
paddingBlock: "space";
paddingBlockEnd: "space";
paddingBlockStart: "space";
paddingInline: "space";
paddingInlineEnd: "space";
paddingInlineStart: "space";
scrollMargin: "space";
scrollMarginTop: "space";
scrollMarginRight: "space";
scrollMarginBottom: "space";
scrollMarginLeft: "space";
scrollMarginBlock: "space";
scrollMarginBlockEnd: "space";
scrollMarginBlockStart: "space";
scrollMarginInline: "space";
scrollMarginInlineEnd: "space";
scrollMarginInlineStart: "space";
scrollPadding: "space";
scrollPaddingTop: "space";
scrollPaddingRight: "space";
scrollPaddingBottom: "space";
scrollPaddingLeft: "space";
scrollPaddingBlock: "space";
scrollPaddingBlockEnd: "space";
scrollPaddingBlockStart: "space";
scrollPaddingInline: "space";
scrollPaddingInlineEnd: "space";
scrollPaddingInlineStart: "space";
top: "space";
right: "space";
bottom: "space";
left: "space";
fontSize: "fontSizes";
background: "colors";
backgroundColor: "colors";
backgroundImage: "colors";
borderImage: "colors";
border: "colors";
borderBlock: "colors";
borderBlockEnd: "colors";
borderBlockStart: "colors";
borderBottom: "colors";
borderBottomColor: "colors";
borderColor: "colors";
borderInline: "colors";
borderInlineEnd: "colors";
borderInlineStart: "colors";
borderLeft: "colors";
borderLeftColor: "colors";
borderRight: "colors";
borderRightColor: "colors";
borderTop: "colors";
borderTopColor: "colors";
caretColor: "colors";
color: "colors";
columnRuleColor: "colors";
outline: "colors";
outlineColor: "colors";
fill: "colors";
stroke: "colors";
textDecorationColor: "colors";
fontFamily: "fonts";
fontWeight: "fontWeights";
lineHeight: "lineHeights";
letterSpacing: "letterSpacings";
blockSize: "sizes";
minBlockSize: "sizes";
maxBlockSize: "sizes";
inlineSize: "sizes";
minInlineSize: "sizes";
maxInlineSize: "sizes";
width: "sizes";
minWidth: "sizes";
maxWidth: "sizes";
height: "sizes";
minHeight: "sizes";
maxHeight: "sizes";
flexBasis: "sizes";
gridTemplateColumns: "sizes";
gridTemplateRows: "sizes";
borderWidth: "borderWidths";
borderTopWidth: "borderWidths";
borderLeftWidth: "borderWidths";
borderRightWidth: "borderWidths";
borderBottomWidth: "borderWidths";
borderStyle: "borderStyles";
borderTopStyle: "borderStyles";
borderLeftStyle: "borderStyles";
borderRightStyle: "borderStyles";
borderBottomStyle: "borderStyles";
borderRadius: "radii";
borderTopLeftRadius: "radii";
borderTopRightRadius: "radii";
borderBottomRightRadius: "radii";
borderBottomLeftRadius: "radii";
boxShadow: "shadows";
textShadow: "shadows";
transition: "transitions";
zIndex: "zIndices";
}, {
m: (v: PropertyValue<'margin'>) => {
margin: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mt: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mr: (v: PropertyValue<'margin'>) => {
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mb: (v: PropertyValue<'margin'>) => {
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
ml: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
mx: (v: PropertyValue<'margin'>) => {
marginLeft: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginRight: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
my: (v: PropertyValue<'margin'>) => {
marginTop: {
readonly [Stitches.$$PropertyValue]: "margin";
};
marginBottom: {
readonly [Stitches.$$PropertyValue]: "margin";
};
};
p: (v: PropertyValue<'padding'>) => {
padding: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pt: (v: PropertyValue<'padding'>) => {
paddingTop: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pr: (v: PropertyValue<'padding'>) => {
paddingRight: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pb: (v: PropertyValue<'padding'>) => {
paddingBottom: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
pl: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding";
};
};
px: (v: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [Stitches.$$PropertyValue]: "padding