@veracity/vui
Version:
Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.
2,890 lines • 53.1 kB
TypeScript
import { TagContainerStyles } from "../tag/tag.types.js";
import { ContainerStyles } from "../button/button.types.js";
import "../index.js";
//#region src/theme/components.d.ts
declare const _default: {
Accordion: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
md: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
lg: {
item: {
minH: string;
};
itemHorizontal: {
space: string;
};
};
};
variants: {
light: {
container: {
bg: string;
borderColor: string;
};
item: {
borderColor: string;
itemTitleHoverBg: string;
expandedItemTitleHoverBg: string;
};
icon: {
color: string;
};
};
dark: {
container: {
bg: string;
borderColor: string;
color: string;
};
item: {
borderColor: string;
disabledBg: string;
itemTitleHoverBg: string;
expandedItemTitleHoverBg: string;
};
icon: {
color: string;
};
};
};
};
Avatar: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
sizes: {
sm: {
fontSize: string;
h: number;
iconSize: string;
};
md: {
fontSize: string;
h: number;
iconSize: string;
};
lg: {
fontSize: string;
h: number;
iconSize: string;
};
xl: {
fontSize: string;
h: number;
iconSize: string;
};
xxl: {
fontSize: string;
h: number;
iconSize: string;
};
};
variants: {
subtleGrey: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
subtleRed: {
bg: string;
borderColor: string;
hoverBg: string;
activeBg: string;
color: string;
};
subtleYellow: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
subtleGreen: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleLavender: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleEucalyptus: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
subtleTerracotta: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidDarkBlue: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidRed: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidYellow: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidGreen: {
bg: string;
hoverBg: string;
activeBg: string;
borderColor: string;
color: string;
};
solidLavender: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidEucalyptus: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
solidTerracotta: {
bg: string;
hoverBg: string;
borderColor: string;
color: string;
activeBg: string;
};
primaryLight: {
bg: string;
borderColor: string;
color: string;
hoverBg: string;
hoverBorderColor: string;
hoverColor: string;
activeBg: string;
activeBorderColor: string;
activeColor: string;
};
};
};
Badge: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
color: string;
fontWeight: string;
};
variants: {};
};
Box: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Breadcrumbs: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
xs: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
sm: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
md: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
lg: {
item: {
fontSize: number;
lineHeight: string;
};
separator: {
size: string;
};
};
};
variants: {
dark: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
white: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
light: {
item: {
color: string;
};
main: {
bg: string;
};
separator: {
pathFill: string;
};
};
};
};
Button: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingXIcon: number;
paddingY: number;
gapX: number;
};
icon: {
fontSize: string;
};
};
};
variants: Record<string, Record<string, ContainerStyles>>;
};
Calendar: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Card: {
baseStyle: {
bg: string;
borderRadius: number;
ring: number;
ringColor: string;
boxShadow: string;
};
defaultProps: {};
sizes: {};
variants: {};
};
Chat: {
baseStyle: {
chat: {
flexDirection: string;
w: string;
height: string;
};
messages: {
flexDirection: string;
overflowY: string;
position: string;
w: string;
};
suggestions: {
display: string;
textAlign: string;
width: string;
};
};
defaultProps: {};
sizes: {};
variants: {};
};
Checkbox: {
baseStyle: {
control: {
color: "sandstone.60";
hoverColor: "seaBlue.20";
};
container: {
alignItems: string;
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
md: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
lg: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
};
variants: {};
};
DatePicker: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Dialog: {
baseStyle: {
closeButton: {
'--vui-dismiss-fg': string;
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
md: {
container: {
maxW: number;
};
};
lg: {
container: {
maxW: number;
};
};
fullWidth: {};
};
variants: {};
};
Divider: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Display: {
baseStyle: {
fontFamily: string;
fontWeight: number;
fontSize: string;
lineHeight: string;
};
defaultProps: {
size: string;
};
sizes: {
sm: {
fontSize: string;
};
md: {
fontSize: string;
};
lg: {
fontSize: string;
};
xl: {
fontSize: string;
};
'2xl': {
fontSize: string;
};
};
variants: {};
};
DismissButton: {
defaultProps: {
size: string;
};
sizes: {
xs: {
h: number;
w: number;
p: string;
};
sm: {
h: number;
w: number;
p: string;
};
md: {
h: number;
w: number;
p: string;
};
lg: {
h: number;
w: number;
p: string;
};
};
};
DragAndDrop: {
baseStyle: {
borderWidth: number;
borderStyle: string;
borderColor: string;
bg: string;
color: string;
hoverBg: string;
};
defaultProps: {
variant: string;
};
sizes: {};
variants: {
default: {};
outlined: {
borderColor: string;
borderStyle: string;
};
};
};
Drawer: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Footer: {
baseStyle: {
link: {};
};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {};
variants: {
default: {
container: {
bg: string;
color: string;
};
link: {
color: string;
};
};
developer: {
container: {
bg: string;
color: string;
};
link: {
color: string;
};
};
light: {
container: {
bg: string;
color: string;
};
row: {
color: string;
};
link: {
color: string;
};
heading: {
color: string;
};
};
};
};
Grid: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Header: {
baseStyle: {};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {};
variants: {
default: {
container: {
borderColor: string;
};
createAccount: {
link: {
variant: string;
};
};
linkItem: {
container: {
hoverBg: string;
activeBg: string;
activeBorderColor: string;
};
link: {
size: string;
color: string;
borderColor: string;
hoverColor: string;
activeColor: string;
};
};
logo: {
svg: {
pathFill: string;
};
};
divider: {
color: string;
};
mobileToggle: {
color: string;
hoverColor: string;
activeColor: string;
};
notifications: {
container: {
color: string;
hoverColor: string;
};
};
services: {
button: {
color: string;
hoverColor: string;
activeColor: string;
};
list: {
variant: string;
};
};
signIn: {
background: string;
};
};
dark: {
container: {
bg: string;
borderBottom: number;
};
createAccount: {
link: {
variant: string;
};
text: {
color: string;
};
};
account: {
trigger: {
variant: string;
intent: string;
};
};
divider: {
borderColor: string;
};
linkItem: {
container: {
hoverBg: string;
activeBg: string;
activeBorderColor: string;
};
link: {
size: string;
color: string;
borderColor: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
};
logo: {
svg: {
pathFill: string;
};
};
mainLinks: {
color: {
md: string;
};
};
mobileContent: {
top: string;
};
mobileToggle: {
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
notifications: {
container: {
variant: string;
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
borderColor: string;
};
icon: {
color: string;
};
};
services: {
button: {
color: string;
hoverBg: string;
hoverColor: string;
activeBg: string;
activeColor: string;
};
list: {
variant: string;
};
};
signIn: {
button: {
variant: string;
intent: string;
};
colorScheme: string;
};
};
};
};
Heading: {
baseStyle: {
color: string;
};
defaultProps: {
size: string;
};
sizes: {
title: {
as: string;
fontFamily: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h1: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
lead: {
as: string;
color: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h2: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h3: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
h4: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
h5: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
h6: {
as: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
'2xl': {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
xl: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
lg: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
md: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: string;
};
sm: {
as: string;
fontSize: {
desktop: string;
mobile: string;
};
fontWeight: string;
lineHeight: {
desktop: string;
mobile: string;
};
};
xs: {
as: string;
fontSize: string;
fontWeight: string;
lineHeight: string;
};
};
variants: {};
};
Icon: {
baseStyle: {};
defaultProps: {
size: string;
};
sizes: {
xxs: {
height: number;
width: number;
};
xs: {
height: number;
width: number;
};
sm: {
height: number;
width: number;
};
md: {
height: number;
width: number;
};
lg: {
height: number;
width: number;
};
xl: {
height: number;
width: number;
};
xxl: {
height: number;
width: number;
};
};
variants: {
static: {};
spinning: {
animation: string;
};
};
};
Image: {
baseStyle: {};
defaultProps: {};
sizes: {};
variants: {};
};
Input: {
baseStyle: {
container: {
focusWithinRing: number;
color: "sandstone.10";
fontSize: string;
lineHeight: string;
};
icon: {
color: "warmGrey.30";
};
input: {
placeholderTextColor: "sandstone.55";
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
h: number;
};
icon: {
size: string;
};
input: {};
label: {
fontSize: string;
};
};
};
variants: {
grey: {
container: {
borderColor: "sandstone.60";
focusWithinRingColor: "focusColor";
};
};
green: {
container: {
borderColor: "landGreen.35";
focusWithinRingColor: "landGreen.35";
};
};
red: {
container: {
borderColor: "energyRed.45";
focusWithinRingColor: "energyRed.45";
};
};
};
};
Label: {
baseStyle: {
helper: {
ml: string;
fontWeight: number;
lineHeight: number;
};
};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Link: {
baseStyle: {
container: {
display: string;
h: string;
};
icon: {
h: string;
position: string;
size: string;
top: string;
};
text: {
fontSize: string;
};
};
defaultProps: {
variant: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
lineHeight: string;
};
icon: {
size: string;
};
};
sm: {
container: {
fontSize: string;
lineHeight: string;
};
};
md: {
container: {
fontSize: string;
lineHeight: string;
};
};
lg: {
container: {
fontSize: string;
lineHeight: string;
};
};
};
variants: {
dark: {
container: {
color: string;
};
};
light: {
container: {
color: string;
};
};
white: {
container: {
color: string;
};
};
plain: {
container: {
hoverTextDecoration: string;
};
};
};
};
List: {
baseStyle: {
item: {
color: string;
activeBg: string;
hoverBg: string;
selectedBg: string;
px: number;
};
heading: {
color: string;
};
};
defaultProps: {
size: string;
button: {
size: string;
};
variant: string;
};
parts: string[];
sizes: {
sm: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
md: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
lg: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
xl: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
xxl: {
icon: {
size: string;
};
button: {
size: string;
};
item: {
fontSize: number;
minH: number;
};
heading: {
fontSize: number;
};
};
};
variants: {
default: {};
ordered: {
container: {
as: string;
listStyleType: string;
pl: number;
};
item: {
display: string;
};
};
unordered: {
container: {
as: string;
listStyleType: string;
pl: number;
};
item: {
display: string;
};
};
blue: {
heading: {
color: string;
};
};
};
};
Markdown: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
MarkdownEditor: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Menu: {
baseStyle: {
fontWeight: number;
lineHeight: string;
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
button: {
size: string;
};
list: {
size: string;
};
};
md: {
button: {
size: string;
};
list: {
size: string;
};
};
lg: {
button: {
size: string;
};
list: {
size: string;
};
};
};
variants: {};
};
Message: {
baseStyle: {
display: string;
};
defaultProps: {
variant: string;
size: string;
};
sizes: {
sm: {
iconSize: string;
fontSize: string;
};
md: {
iconSize: string;
fontSize: string;
};
};
variants: {
info: {
color: string;
};
warning: {
color: string;
};
danger: {
color: string;
};
success: {
color: string;
};
};
};
Modal: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Notification: {
baseStyle: {
container: {
borderRadius: string;
borderWidth: string;
bg: string;
borderColor: string;
color: string;
px: string;
py: string;
gap: string;
};
content: {
py: string;
};
button: {};
icon: {
py: string;
};
text: {
flex: string;
fontSize: string;
lineHeight: string;
fontWeight: number;
minW: number;
};
title: {
mb: string;
};
actionBox: {
mt: string;
};
};
parts: string[];
sizes: {};
variants: {
subtleBlue: object;
subtleRed: object;
subtleYellow: object;
subtleGreen: object;
bannerBlue: object;
bannerRed: object;
bannerYellow: object;
bannerGreen: object;
};
};
P: {
baseStyle: {};
defaultProps: {
size: string;
};
sizes: {
xs: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
sm: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
md: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
lg: {
fontSize: string;
lineHeight: string;
marginBottom: string;
};
};
variants: {
mono: {
fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;";
};
};
};
Pagination: {
baseStyle: {
button: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
minW: number;
};
ellipsis: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
goToPage: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
prevNext: {
fontWeight: number;
lineHeight: string;
size: string;
variant: string;
intent: string;
};
results: {
color: string;
};
};
defaultProps: {};
parts: string[];
variants: {};
};
Panel: {
baseStyle: {
borderRadius: number;
};
defaultProps: {
variant: string;
};
sizes: {};
variants: {
elevated: {
boxShadow: string;
};
outlined: {
border: number;
borderColor: string;
};
};
};
Progress: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
md: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
lg: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
xl: {
container: {
minH: string;
};
percentage: {
fontSize: string;
top: string;
};
};
};
variants: {
primary: {
bg: string;
color: string;
};
green: {
bg: string;
color: string;
};
red: {
bg: string;
color: string;
};
};
};
ProgressCircular: {
baseStyle: {
color: string;
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
md: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
lg: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
xl: {
strokeWidth: number;
width: number;
top: number;
fontSize: number;
};
};
variants: {
primary: {
stroke: {
main: string;
progress: string;
};
};
green: {
stroke: {
main: string;
progress: string;
};
};
red: {
stroke: {
main: string;
progress: string;
};
};
};
};
Definition: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
lineHeight: string;
};
dt: {
fontSize: string;
spaceX: number;
};
dd: {
fontSize: string;
spaceX: number;
};
icon: {
size: string;
mx: number;
my: string;
};
};
md: {
container: {
fontSize: string;
lineHeight: string;
};
dt: {
fontSize: string;
spaceX: number;
};
dd: {
fontSize: string;
spaceX: number;
};
icon: {
size: string;
mx: number;
my: string;
};
};
};
variants: {
light: {
container: {
color: string;
};
};
dark: {
container: {
bg: string;
color: string;
};
};
};
};
Popover: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Radio: {
baseStyle: {
control: {
color: "sandstone.60";
hoverColor: "seaBlue.20";
};
};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
md: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
lg: {
control: {
h: number;
w: number;
};
label: {
size: string;
};
};
};
variants: {};
};
Range: {
baseStyle: {
container: {
w: number;
};
thumb: {
bg: string;
border: string;
borderRadius: string;
h: string;
lineHeight: string;
w: string;
textAlign: string;
transitionDuration: string;
};
thumbValue: {
position: string;
top: string;
w: string;
};
track: {
bg: "seaBlue.28";
borderRadius: string;
transitionDuration: string;
};
};
defaultProps: {};
parts: string[];
sizes: {};
variants: {};
};
Rating: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
icon: {
size: string;
};
};
md: {
icon: {
size: string;
};
};
lg: {
icon: {
size: string;
};
};
};
variants: {
yellow: {
color: string;
};
blue: {
color: string;
};
};
};
Select: {
baseStyle: {
button: {
bg: string;
hoverBg: string;
activeBg: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
md: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
lg: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
xl: {
button: {
size: string;
fontSize: string;
};
group: {
size: string;
};
option: {
size: string;
};
label: {
fontSize: string;
};
};
};
variants: {
outlined: {
button: {
borderColor: string;
hoverBorderColor: string;
};
};
text: {
button: {
borderColor: string;
hoverBorderColor: string;
};
};
};
};
Sidemenu: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
md: {
item: {
minH: string;
};
};
lg: {
item: {
minH: string;
};
};
};
variants: {
light: {
container: {
bg: string;
};
bottom: {
borderTop: string;
};
sidemenuTop: {
borderBottom: string;
};
item: {};
};
dark: {
container: {
bg: string;
color: string;
};
bottom: {
borderTop: string;
};
sidemenuTop: {
borderBottom: string;
};
item: {};
};
};
};
Skeleton: {
baseStyle: {
bg: string;
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
xs: {
h: number;
};
sm: {
h: number;
};
md: {
h: number;
};
lg: {
h: number;
};
};
variants: {
circle: {
borderRadius: string;
};
rect: {
borderRadius: string;
w: string;
};
};
};
StepIndicator: {
baseStyle: {
button: {
borderColor: string;
};
};
defaultProps: {
size: string;
variant: string;
};
sizes: {
sm: {};
md: {};
};
variants: {
active: {
button: {
bg: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
completed: {
button: {
bg: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
optional: {
button: {
bg: string;
borderColor: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
pending: {
button: {
bg: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
error: {
button: {
bg: string;
color: string;
};
icon: {
bg: string;
color: string;
borderColor: string;
};
};
};
};
StepperHorizontal: {
baseStyle: {};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {};
md: {};
};
variants: {};
};
StepperVertical: {
baseStyle: {};
defaultProps: {
size: string;
};
parts: string[];
sizes: {
sm: {};
md: {};
};
variants: {};
};
Spinner: {
baseStyle: {
container: {
padding: number;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
xxs: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xs: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
sm: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
md: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
lg: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
xxxxl: {
circle: {
borderWidth: number;
h: number;
w: number;
};
};
};
variants: {
light: {
circle: {
borderColor: string;
borderTopColor: string;
};
text: {
color: string;
};
};
dark: {
container: {
bg: string;
};
circle: {
borderColor: string;
borderTopColor: string;
};
text: {
color: string;
};
};
};
};
SidemenuV2: {
baseStyle: {
container: {
display: string;
flexDirection: string;
overflow: string;
transition: string;
};
content: {
flex: number;
overflowY: string;
overflowX: string;
};
bottom: {
flexShrink: number;
borderTop: string;
display: string;
alignItems: string;
};
item: {
display: string;
alignItems: string;
justifyContent: string;
flexDirection: string;
w: string;
border: string;
cursor: string;
transition: string;
textDecoration: string;
outline: string;
px: number;
borderLeft: string;
};
sidemenuTop: {
display: string;
alignItems: string;
justifyContent: string;
padding: string;
minHeight: string;
};
toggleButton: {
baseHeight: number;
basePadding: number;
expandedPaddingMultiplier: number;
collapsedWidth: string;
expandedWidth: string;
transition: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
md: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
lg: {
toggleButton: {
baseHeight: number;
basePadding: number;
};
};
};
variants: {
light: {
container: {
bg: string;
};
toggleButton: {
variant: string;
hoverBg: string;
};
item: {
color: string;
};
button: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
borderColor: string;
hoverBorderColor: string;
activeBorderColor: string;
color: string;
hoverColor: string;
activeColor: string;
disabledColor: string;
disabledBorderColor: string;
disabledOpacity: string;
};
};
dark: {
container: {
bg: string;
color: string;
boxShadow: string;
};
bottom: {
borderTopColor: string;
};
sidemenuTop: {
borderBottom: string;
bg: string;
};
toggleButton: {
variant: string;
};
item: {
color: string;
};
button: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
borderColor: string;
hoverBorderColor: string;
activeBorderColor: string;
color: string;
hoverColor: string;
activeColor: string;
disabledColor: string;
disabledBorderColor: string;
disabledOpacity: string;
};
};
};
};
Switch: {
baseStyle: {
button: {
thumb: {
bg: string;
};
track: {
ring: number;
};
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
md: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
lg: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
xl: () => {
button: {
fontSize: string;
minW: number;
thumb: {
h: number;
w: number;
};
track: {
h: number;
};
};
label: {
size: string;
};
};
};
variants: {
primary: {
button: {
track: {
bg: string;
};
};
};
green: {
button: {
track: {
bg: string;
};
};
};
red: {
button: {
track: {
bg: string;
};
};
};
};
};
T: {
baseStyle: {};
defaultProps: {
size: string;
lineHeight: string;
};
sizes: {
xs: {
fontSize: string;
};
sm: {
fontSize: string;
};
md: {
fontSize: string;
};
lg: {
fontSize: string;
};
xl: {
fontSize: string;
};
};
variants: {
label: {
fontWeight: string;
lineHeight: string;
};
input: {
fontWeight: string;
lineHeight: string;
};
caption: {
fontWeight: string;
lineHeight: string;
};
navigation: {
fontWeight: string;
lineHeight: string;
};
caps: {
textTransform: string;
fontWeight: string;
lineHeight: string;
};
button: {
fontWeight: string;
lineHeight: string;
};
mono: {
fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;";
};
};
};
Table: {
baseStyle: {
th: {
fontSize: number;
fontWeight: number;
color: string;
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
lg: {
tr: {
h: number;
};
};
md: {
tr: {
h: number;
};
};
sm: {
tr: {
h: number;
};
};
};
variants: {
bordered: {
td: {
borderBottom: string;
};
};
striped: {};
basic: {
td: {
borderBottom: string;
};
};
};
};
Tabs: {
baseStyle: {};
defaultProps: {};
parts: string[];
sizes: {
sm: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: string;
py: string;
};
};
md: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: string;
py: string;
};
};
lg: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
xl: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
xxl: {
tabsNavBar: {
borderWidth: string;
fontSize: string;
h: number;
py: string;
};
};
};
variants: {};
};
Tag: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
lg: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
fontSize: string;
};
dismiss: {
size: string;
};
};
};
variants: Record<string, Record<string, TagContainerStyles>>;
};
TagToggle: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
fontWeight: string;
};
parts: string[];
sizes: {
xs: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
sm: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
md: {
container: {
fontSize: string;
h: number;
paddingX: number;
paddingY: number;
gapX: number;
borderRadius: number;
};
icon: {
size: string;
};
};
};
variants: {
subtle: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
subtleSelected: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
solid: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
solidSelected: {
container: {
bg: string;
color: string;
bgHover: string;
bgPressed: string;
};
};
};
};
Textarea: {
baseStyle: {
textarea: {
focusWithinRing: number;
color: "sandstone.10";
};
input: {
color: {
placeholder: "sandstone.55";
};
};
};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
sm: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
md: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
lg: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
xl: {
container: {
fontSize: string;
};
label: {
fontSize: string;
};
};
};
variants: {
grey: {
textarea: {
borderColor: "sandstone.60";
focusWithinRingColor: "focusColor";
};
};
green: {
textarea: {
borderColor: "landGreen.35";
focusWithinRingColor: "landGreen.35";
};
};
red: {
textarea: {
borderColor: "energyRed.45";
focusWithinRingColor: "energyRed.45";
};
};
};
};
Tree: {
baseStyle: {};
defaultProps: {
size: string;
variant: string;
};
parts: string[];
sizes: {
xl: {
item: {
fontSize: string;
height: number;
lineHeight: string;
py: string;
};
icon: {
height: number;
width: number;
};
};
};
variants: {
default: {
container: {
bg: string;
};
firstLevelItem: {
bg: string;
color: string;
activeColor: string;
activeBg: string;
hoverBg: string;
};
item: {
bg: string;
color: string;
activeColor: string;
activeBg: string;
hoverBg: string;
selectedBg: string;
px: number;
};
};
dark: {
container: {
bg: string;
color: string;
};
firstLevelItem: {
bg: string;
color: string;
activeBg: string;
activeColor: string;
hoverBg: string;
hoverColor: string;
};
item: {
bg: string;
color: string;
activeBg: string;
activeColor: string;
hoverBg: string;
hoverColor: string;
};
};
};
};
};
//#endregion
export { _default as default };
//# sourceMappingURL=components.d.ts.map