@buildo/bento-design-system
Version:
1,529 lines (1,527 loc) • 331 kB
TypeScript
import * as react from 'react';
import { ComponentProps, AnchorHTMLAttributes, ForwardRefRenderFunction, ComponentType, FunctionComponent } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
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 { PressEvent } from '@react-types/shared';
declare const responsiveStyles: {
conditions: {
defaultCondition: "wide";
conditionNames: ("wide" | "desktop" | "tablet" | "mobile")[];
};
styles: {
readonly display: {
values: {
none: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
flex: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
grid: {
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: {
center: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
baseline: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
stretch: {
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: {
center: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
left: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
right: {
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: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly marginTop: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly marginBottom: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly marginLeft: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative40: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative80: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
};
};
readonly marginRight: {
values: {
0: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative4: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative8: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative12: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative16: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative24: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;
tablet: string;
mobile: string;
};
};
negative32: {
defaultClass: string;
conditions: {
wide: string;
desktop: string;