@atlrdsgn/kit
Version:
An ever–expanding library of React components, primitives, and tools
1,010 lines (1,009 loc) • 174 kB
TypeScript
import { breakpoints, breakpointNames } from './constants';
import { ConditionalValue, RequiredConditionalValue, ResponsiveArray } from '@vanilla-extract/sprinkles';
type Breakpoint = keyof typeof breakpoints;
/**
* Responsive properties
*
* These properties are responsive, meaning
* they change at different breakpoints.
*/
declare const responsiveProperties: {
conditions: {
defaultCondition: "small";
conditionNames: string[];
responsiveArray: string[] & {
length: 4;
};
};
styles: {
all: {
responsiveArray: string[] & {
length: 4;
};
values: {
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
boxSizing: {
responsiveArray: string[] & {
length: 4;
};
values: {
"border-box": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
appearance: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
outline: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
userSelect: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
fontVariantNumeric: {
responsiveArray: string[] & {
length: 4;
};
values: {
"tabular-nums": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
WebkitTapHighlightColor: {
responsiveArray: string[] & {
length: 4;
};
values: {
"rgba(0,0,0,0)": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
display: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
flex: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
block: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
inline: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"inline-block": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"inline-flex": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
flex: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
1: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
flexDirection: {
responsiveArray: string[] & {
length: 4;
};
values: {
row: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
column: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"column-reverse": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"row-reverse": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
flexWrap: {
responsiveArray: string[] & {
length: 4;
};
values: {
nowrap: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
wrap: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"wrap-reverse": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
justifyContent: {
responsiveArray: string[] & {
length: 4;
};
values: {
"space-around": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"space-between": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
stretch: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
center: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-end": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-start": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
alignItems: {
responsiveArray: string[] & {
length: 4;
};
values: {
baseline: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
stretch: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
center: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-end": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-start": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
alignContent: {
responsiveArray: string[] & {
length: 4;
};
values: {
stretch: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
center: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-end": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"flex-start": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
verticalAlign: {
responsiveArray: string[] & {
length: 4;
};
values: {
bottom: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
top: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
baseline: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
middle: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"text-bottom": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"text-top": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
position: {
responsiveArray: string[] & {
length: 4;
};
values: {
inherit: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
fixed: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
absolute: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
relative: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
sticky: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
margin: {
responsiveArray: string[] & {
length: 4;
};
values: {
0: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
inherit: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
padding: {
responsiveArray: string[] & {
length: 4;
};
values: {
"16px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"20px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"8px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"10px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
0: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"4px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"12px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
inherit: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
width: {
responsiveArray: string[] & {
length: 4;
};
values: {
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"100%": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
height: {
responsiveArray: string[] & {
length: 4;
};
values: {
auto: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"100%": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
gap: {
responsiveArray: string[] & {
length: 4;
};
values: {
[x: number]: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"4px 4px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"8px 8px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"10px 10px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"12px 12px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"16px 16px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"20px 20px": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
mixBlendMode: {
responsiveArray: string[] & {
length: 4;
};
values: {
inherit: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
overlay: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
difference: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
multiply: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
screen: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
fontWeight: {
responsiveArray: string[] & {
length: 4;
};
values: {
inherit: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
bold: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
normal: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
strong: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
textTransform: {
responsiveArray: string[] & {
length: 4;
};
values: {
capitalize: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
lowercase: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
uppercase: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
transitionProperty: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
initial: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
all: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
transitionTimingFunction: {
responsiveArray: string[] & {
length: 4;
};
values: {
linear: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"cubic-bezier(0.4, 0, 1, 1)": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"cubic-bezier(0, 0, 0.2, 1)": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"cubic-bezier(0.42, 0, 0.58, 1)": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
transitionDuration: {
responsiveArray: string[] & {
length: 4;
};
values: {
"150ms": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"300ms": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"500ms": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"700ms": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
"1000ms": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
};
} & {
styles: {};
};
/**
* Non-responsive properties
*
* These properties are not responsive, meaning
* they do not change at different breakpoints.
*/
export declare const lightMode = "light";
export declare const darkMode = "dark";
export declare const sprinkles: ((props: {
all?: ("unset" | {
[x: string]: "unset" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "unset" | null>;
boxSizing?: ("border-box" | {
[x: string]: "border-box" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "border-box" | null>;
appearance?: ("none" | {
[x: string]: "none" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | null>;
outline?: ("none" | {
[x: string]: "none" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | null>;
userSelect?: ("none" | "auto" | {
[x: string]: "none" | "auto" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | "auto" | null>;
fontVariantNumeric?: ("tabular-nums" | {
[x: string]: "tabular-nums" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "tabular-nums" | null>;
WebkitTapHighlightColor?: ("rgba(0,0,0,0)" | {
[x: string]: "rgba(0,0,0,0)" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "rgba(0,0,0,0)" | null>;
display?: ("none" | "flex" | "block" | "inline" | "inline-block" | "inline-flex" | {
[x: string]: "none" | "flex" | "block" | "inline" | "inline-block" | "inline-flex" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | "flex" | "block" | "inline" | "inline-block" | "inline-flex" | null>;
flex?: ("none" | 1 | "initial" | "auto" | {
[x: string]: "none" | 1 | "initial" | "auto" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | 1 | "initial" | "auto" | null>;
flexDirection?: ("row" | "column" | "column-reverse" | "row-reverse" | {
[x: string]: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "row" | "column" | "column-reverse" | "row-reverse" | null>;
flexWrap?: ("nowrap" | "wrap" | "wrap-reverse" | {
[x: string]: "nowrap" | "wrap" | "wrap-reverse" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "nowrap" | "wrap" | "wrap-reverse" | null>;
justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
[x: string]: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
alignItems?: ("baseline" | "stretch" | "center" | "flex-end" | "flex-start" | {
[x: string]: "baseline" | "stretch" | "center" | "flex-end" | "flex-start" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "baseline" | "stretch" | "center" | "flex-end" | "flex-start" | null>;
alignContent?: ("stretch" | "center" | "flex-end" | "flex-start" | {
[x: string]: "stretch" | "center" | "flex-end" | "flex-start" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "stretch" | "center" | "flex-end" | "flex-start" | null>;
verticalAlign?: ("bottom" | "top" | "baseline" | "middle" | "text-bottom" | "text-top" | {
[x: string]: "bottom" | "top" | "baseline" | "middle" | "text-bottom" | "text-top" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "bottom" | "top" | "baseline" | "middle" | "text-bottom" | "text-top" | null>;
position?: ("inherit" | "fixed" | "initial" | "unset" | "absolute" | "relative" | "sticky" | {
[x: string]: "inherit" | "fixed" | "initial" | "unset" | "absolute" | "relative" | "sticky" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "inherit" | "fixed" | "initial" | "unset" | "absolute" | "relative" | "sticky" | null>;
margin?: ("0" | "none" | "inherit" | "initial" | "unset" | "auto" | {
[x: string]: "0" | "none" | "inherit" | "initial" | "unset" | "auto" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "0" | "none" | "inherit" | "initial" | "unset" | "auto" | null>;
padding?: ("16px" | "20px" | "8px" | "10px" | "0" | "4px" | "12px" | "none" | "inherit" | "initial" | "unset" | "auto" | {
[x: string]: "16px" | "20px" | "8px" | "10px" | "0" | "4px" | "12px" | "none" | "inherit" | "initial" | "unset" | "auto" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "16px" | "20px" | "8px" | "10px" | "0" | "4px" | "12px" | "none" | "inherit" | "initial" | "unset" | "auto" | null>;
width?: ("auto" | "100%" | {
[x: string]: "auto" | "100%" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "auto" | "100%" | null>;
height?: ("auto" | "100%" | {
[x: string]: "auto" | "100%" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "auto" | "100%" | null>;
gap?: (number | "4px 4px" | "8px 8px" | "10px 10px" | "12px 12px" | "16px 16px" | "20px 20px" | {
[x: string]: number | "4px 4px" | "8px 8px" | "10px 10px" | "12px 12px" | "16px 16px" | "20px 20px" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, number | "4px 4px" | "8px 8px" | "10px 10px" | "12px 12px" | "16px 16px" | "20px 20px" | null>;
mixBlendMode?: ("inherit" | "initial" | "unset" | "overlay" | "difference" | "multiply" | "screen" | {
[x: string]: "inherit" | "initial" | "unset" | "overlay" | "difference" | "multiply" | "screen" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "inherit" | "initial" | "unset" | "overlay" | "difference" | "multiply" | "screen" | null>;
fontWeight?: ("inherit" | "bold" | "normal" | "strong" | {
[x: string]: "inherit" | "bold" | "normal" | "strong" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "inherit" | "bold" | "normal" | "strong" | null>;
textTransform?: ("capitalize" | "lowercase" | "uppercase" | {
[x: string]: "capitalize" | "lowercase" | "uppercase" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "capitalize" | "lowercase" | "uppercase" | null>;
transitionProperty?: ("none" | "initial" | "all" | {
[x: string]: "none" | "initial" | "all" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "none" | "initial" | "all" | null>;
transitionTimingFunction?: ("linear" | "cubic-bezier(0.4, 0, 1, 1)" | "cubic-bezier(0, 0, 0.2, 1)" | "cubic-bezier(0.42, 0, 0.58, 1)" | {
[x: string]: "linear" | "cubic-bezier(0.4, 0, 1, 1)" | "cubic-bezier(0, 0, 0.2, 1)" | "cubic-bezier(0.42, 0, 0.58, 1)" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "linear" | "cubic-bezier(0.4, 0, 1, 1)" | "cubic-bezier(0, 0, 0.2, 1)" | "cubic-bezier(0.42, 0, 0.58, 1)" | null>;
transitionDuration?: ("150ms" | "300ms" | "500ms" | "700ms" | "1000ms" | {
[x: string]: "150ms" | "300ms" | "500ms" | "700ms" | "1000ms" | undefined;
} | undefined) | ResponsiveArray<2 | 1 | 4 | 3, "150ms" | "300ms" | "500ms" | "700ms" | "1000ms" | null>;
} & {
color?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | {
light?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
dark?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
} | undefined;
backgroundColor?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | {
light?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
dark?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
} | undefined;
borderColor?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | {
light?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
dark?: "transparent" | "current" | "white" | "black" | "jade0" | "jade1" | "jade2" | "jade3" | "jade4" | "jade5" | "jade6" | "jade7" | "jade8" | "jade9" | "jade10" | "jade11" | "jade12" | "sapphire0" | "sapphire1" | "sapphire2" | "sapphire3" | "sapphire4" | "sapphire5" | "sapphire6" | "sapphire7" | "sapphire8" | "sapphire9" | "sapphire10" | "sapphire11" | "sapphire12" | "orange0" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "orange11" | "orange12" | "mauve1" | "mauve2" | "mauve3" | "mauve4" | "mauve5" | "mauve6" | "mauve7" | "mauve8" | "mauve9" | "mauve10" | "mauve11" | "mauve12" | "whiteA0" | "whiteA1" | "whiteA2" | "whiteA3" | "whiteA4" | "whiteA5" | "whiteA6" | "whiteA7" | "whiteA8" | "whiteA9" | "whiteA10" | "whiteA11" | "whiteA12" | "blackA0" | "blackA1" | "blackA2" | "blackA3" | "blackA4" | "blackA5" | "blackA6" | "blackA7" | "blackA8" | "blackA9" | "blackA10" | "blackA11" | "blackA12" | "carbon0" | "carbon1" | "carbon2" | "carbon3" | "carbon4" | "carbon5" | "carbon6" | "carbon7" | "carbon8" | "carbon9" | "carbon10" | "carbon11" | "carbon12" | "slate0" | "slate1" | "slate2" | "slate3" | "slate4" | "slate5" | "slate6" | "slate7" | "slate8" | "slate9" | "slate10" | "slate11" | "slate12" | "azure0" | "azure1" | "azure2" | "azure3" | "azure4" | "azure5" | "azure6" | "azure7" | "azure8" | "azure9" | "azure10" | "azure11" | "azure12" | "lime0" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "lime11" | "lime12" | "hyper0" | "hyper1" | "hyper2" | "hyper3" | "hyper4" | "hyper5" | "hyper6" | "hyper7" | "hyper8" | "hyper9" | "hyper10" | "hyper11" | "hyper12" | undefined;
} | undefined;
}) => string) & {
properties: Set<"color" | "backgroundColor" | "margin" | "alignContent" | "alignItems" | "appearance" | "boxSizing" | "display" | "flexDirection" | "flexWrap" | "fontVariantNumeric" | "fontWeight" | "height" | "justifyContent" | "mixBlendMode" | "position" | "textTransform" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "userSelect" | "verticalAlign" | "width" | "all" | "borderColor" | "flex" | "gap" | "outline" | "padding" | "WebkitTapHighlightColor">;
};
export type Sprinkles = Parameters<typeof sprinkles>[0];
export declare const mapResponsiveValue: <OutputValue extends string | number | boolean | null | undefined, Value extends ConditionalValue<{
conditions: {
defaultCondition: "small";
conditionNames: string[];
responsiveArray: string[] & {
length: 4;
};
};
styles: {
all: {
responsiveArray: string[] & {
length: 4;
};
values: {
unset: {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
boxSizing: {
responsiveArray: string[] & {
length: 4;
};
values: {
"border-box": {
defaultClass: string;
conditions: {
[x: string]: string;
};
};
};
};
appearance: {
responsiveArray: string[] & {
length: 4;
};
values: {
none: {
defaultClass: string;
conditions: