@slashid/bento-design-system
Version:
1,593 lines (1,592 loc) • 738 kB
text/typescript
import * as react from 'react';
import { ComponentProps, AnchorHTMLAttributes, FunctionComponent, ForwardRefRenderFunction, ComponentType } from 'react';
import * as _vanilla_extract_sprinkles_dist_declarations_src_createSprinkles from '@vanilla-extract/sprinkles/dist/declarations/src/createSprinkles';
import { ConditionalValue, RequiredConditionalValue } from '@vanilla-extract/sprinkles';
import { AriaButtonProps } from '@react-types/button';
import { GroupBase } from 'react-select';
import { CellProps, Column as Column$1 } from 'react-table';
import { ClassValue } from 'clsx';
import * as _vanilla_extract_private from '@vanilla-extract/private';
declare const bentoSprinkles: _vanilla_extract_sprinkles_dist_declarations_src_createSprinkles.SprinklesFn<[{
conditions: never;
styles: {
readonly borderRadius: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
circled: {
defaultClass: string;
};
circledX: {
defaultClass: string;
};
};
};
readonly borderTopLeftRadius: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
circled: {
defaultClass: string;
};
circledX: {
defaultClass: string;
};
};
};
readonly borderTopRightRadius: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
circled: {
defaultClass: string;
};
circledX: {
defaultClass: string;
};
};
};
readonly borderBottomLeftRadius: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
circled: {
defaultClass: string;
};
circledX: {
defaultClass: string;
};
};
};
readonly borderBottomRightRadius: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
circled: {
defaultClass: string;
};
circledX: {
defaultClass: string;
};
};
};
readonly textTransform: {
values: {
none: {
defaultClass: string;
};
capitalize: {
defaultClass: string;
};
lowercase: {
defaultClass: string;
};
uppercase: {
defaultClass: string;
};
};
};
readonly fontFamily: {
values: {
default: {
defaultClass: string;
};
};
};
readonly fontWeight: {
values: {
display: {
defaultClass: string;
};
body: {
defaultClass: string;
};
label: {
defaultClass: string;
};
title: {
defaultClass: string;
};
bodyStrong: {
defaultClass: string;
};
headline: {
defaultClass: string;
};
};
};
readonly fontSize: {
values: {
bodySmall: {
defaultClass: string;
};
bodyMedium: {
defaultClass: string;
};
bodyLarge: {
defaultClass: string;
};
displaySmall: {
defaultClass: string;
};
displayMedium: {
defaultClass: string;
};
displayLarge: {
defaultClass: string;
};
headlineSmall: {
defaultClass: string;
};
headlineMedium: {
defaultClass: string;
};
headlineLarge: {
defaultClass: string;
};
labelSmall: {
defaultClass: string;
};
labelMedium: {
defaultClass: string;
};
labelLarge: {
defaultClass: string;
};
titleSmall: {
defaultClass: string;
};
titleMedium: {
defaultClass: string;
};
titleLarge: {
defaultClass: string;
};
};
};
readonly lineHeight: {
values: {
bodySmall: {
defaultClass: string;
};
bodyMedium: {
defaultClass: string;
};
bodyLarge: {
defaultClass: string;
};
displaySmall: {
defaultClass: string;
};
displayMedium: {
defaultClass: string;
};
displayLarge: {
defaultClass: string;
};
headlineSmall: {
defaultClass: string;
};
headlineMedium: {
defaultClass: string;
};
headlineLarge: {
defaultClass: string;
};
labelSmall: {
defaultClass: string;
};
labelMedium: {
defaultClass: string;
};
labelLarge: {
defaultClass: string;
};
titleSmall: {
defaultClass: string;
};
titleMedium: {
defaultClass: string;
};
titleLarge: {
defaultClass: string;
};
};
};
readonly letterSpacing: {
values: {
1: {
defaultClass: string;
};
2: {
defaultClass: string;
};
};
};
readonly height: {
values: {
0: {
defaultClass: string;
};
4: {
defaultClass: string;
};
8: {
defaultClass: string;
};
12: {
defaultClass: string;
};
16: {
defaultClass: string;
};
24: {
defaultClass: string;
};
32: {
defaultClass: string;
};
40: {
defaultClass: string;
};
80: {
defaultClass: string;
};
full: {
defaultClass: string;
};
};
};
readonly position: {
values: {
fixed: {
defaultClass: string;
};
absolute: {
defaultClass: string;
};
relative: {
defaultClass: string;
};
sticky: {
defaultClass: string;
};
};
};
readonly overflow: {
values: {
auto: {
defaultClass: string;
};
hidden: {
defaultClass: string;
};
visible: {
defaultClass: string;
};
};
};
readonly overflowX: {
values: {
auto: {
defaultClass: string;
};
hidden: {
defaultClass: string;
};
visible: {
defaultClass: string;
};
};
};
readonly overflowY: {
values: {
auto: {
defaultClass: string;
};
hidden: {
defaultClass: string;
};
visible: {
defaultClass: string;
};
};
};
readonly isolation: {
values: {
auto: {
defaultClass: string;
};
isolate: {
defaultClass: string;
};
};
};
};
} & {
styles: {
borderTopRadius: {
mappings: ("borderTopLeftRadius" | "borderTopRightRadius")[];
};
borderBottomRadius: {
mappings: ("borderBottomLeftRadius" | "borderBottomRightRadius")[];
};
};
}, {
conditions: {
defaultCondition: "wide";
conditionNames: ("wide" | "desktop" | "tablet" | "mobile")[];
};
styles: {
readonly display: {
values: {
flex: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
grid: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
none: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
block: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
"inline-block": {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly flexDirection: {
values: {
column: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
row: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
rowReverse: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
columnReverse: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly alignItems: {
values: {
baseline: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
stretch: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
center: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
flexStart: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
flexEnd: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly justifyContent: {
values: {
center: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
flexStart: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
flexEnd: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly flexWrap: {
values: {
nowrap: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
wrap: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
wrapReverse: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly flexShrink: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly flexGrow: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
1: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
2: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly flex: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
1: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
2: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly width: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
full: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly paddingTop: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly paddingBottom: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly paddingLeft: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly paddingRight: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly gap: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly textAlign: {
values: {
left: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
right: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
center: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
justify: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly maxWidth: {
values: {
700: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
1440: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly top: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly bottom: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly left: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly right: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
80: {
def