///
import { CSS, StitchesVariants } from '@cavilha/theme';
import * as RCollapse from '@radix-ui/react-accordion';
/**
* Represents the Item header, only sets border and paddings
*/
export declare const CollapseItemHeader: import("@stitches/react/types/styled-component").StyledComponent {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
/**
* Represents the area that triggers the collapse
* mostly 100% of the header
*/
export declare const CollapseItemTrigger: import("@stitches/react/types/styled-component").StyledComponent {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
/**
* Represents the icon that can be used left-sided with title
*/
export declare const CollapseItemIcon: import("@stitches/react/types/styled-component").StyledComponent, {}, {
sm: string;
md: string;
lg: string;
}, import("@stitches/react/types/css-util").CSS<{
sm: string;
md: string;
lg: string;
}, {
colors: {
hiContrast: string;
loContrast: string;
canvas: string;
brandPrimary: string;
brandSecondary: string;
brandMadeira1: string;
brandMadeira2: string;
brandMadeira3: string;
brandMadeira4: string;
brandMadeira5: string;
brandMadeira6: string;
brandMadeira7: string;
brandMadeira8: string;
brandMadeira9: string;
mono1: string;
mono2: string;
background1: string;
background2: string;
alwaysBlack: string;
alwaysGray: string;
alwaysWhite: string;
primary1: string;
primary2: string;
primary3: string;
primary4: string;
primary1Hover: string;
primary2Hover: string;
primary3Hover: string;
primary4Hover: string;
secondary1: string;
secondary2: string;
secondary3: string;
secondary3RGB: string;
secondary4: string;
secondary0Hover: string;
secondary1Hover: string;
secondary2Hover: string;
secondary3Hover: string;
secondary4Hover: string;
success1: string;
success2: string;
success3: string;
success4: string;
success1Hover: string;
success2Hover: string;
success3Hover: string;
success4Hover: string;
danger1: string;
danger2: string;
danger3: string;
danger4: string;
danger1Hover: string;
danger2Hover: string;
danger3Hover: string;
danger4Hover: string;
warning1: string;
warning2: string;
warning3: string;
warning4: string;
warning1Hover: string;
warning2Hover: string;
warning3Hover: string;
warning4Hover: string;
info1: string;
info2: string;
info3: string;
info4: string;
info1Hover: string;
info2Hover: string;
info3Hover: string;
info4Hover: string;
neutral1: string;
neutral2: string;
neutral3: string;
neutral4: string;
neutral5: string;
neutral6: string;
linkedin: string;
linkedin1: string;
whatsapp1: string;
whatsapp2: string;
whatsapp3: string;
youtube1: string;
youtube2: string;
twitter: string;
twitter1: string;
facebook1: string;
instagram1: string;
pinterest: string;
pinterest1: string;
mono1Opacity1: string;
mono1Opacity2: string;
mono1Opacity3: string;
mono1Opacity4: string;
mono1Opacity5: string;
mono1Opacity6: string;
mono1Opacity7: string;
mono1Opacity8: string;
mono1Opacity9: string;
mono2Opacity1: string;
mono2Opacity2: string;
mono2Opacity3: string;
mono2Opacity4: string;
mono2Opacity5: string;
mono2Opacity6: string;
mono2Opacity7: string;
mono2Opacity8: string;
mono2Opacity9: string;
defaultBorderColor: string;
yellow100: string;
yellow200: string;
yellow300: string;
yellow400: string;
yellow500: string;
yellow600: string;
purple100: string;
purple200: string;
purple300: string;
purple400: string;
purple500: string;
purple600: string;
flagFreight: string;
flagOffer: string;
flagPrivateLabel: string;
flagCampaing: string;
secondaryHover0: string;
};
fonts: {
untitled: string;
mono: string;
};
space: {
none: string;
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridGutter: string;
gridMobileGutter: string;
};
sizes: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridColumns: string;
};
fontSizes: {
bodyXSmall: string;
bodySmall: string;
bodyMedium: string;
hero: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
mobileHero: string;
mobileH1: string;
mobileH2: string;
mobileH3: string;
mobileH4: string;
mobileH5: string;
iconXSmall: string;
iconSmall: string;
iconMedium: string;
iconLarge: string;
iconXLarge: string;
};
fontWeights: {
light: string;
regular: string;
semibold: string;
bold: string;
};
letterSpacings: {
none: string;
small: string;
medium: string;
large: string;
};
lineHeights: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
};
radii: {
none: string;
small: string;
medium: string;
large: string;
xlarge: string;
circle: string;
};
shadows: {
shadowNone: string;
shadowXSmall: string;
shadowSmall: string;
shadowMedium: string;
shadowLarge: string;
focusPressed: string;
};
zIndices: {
1: string;
2: string;
3: string;
4: string;
max: string;
};
}, import("@stitches/react/types/config").DefaultThemeMap, {
p: (value: {}) => {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
/**
* Represents the closed/opened indicator
*/
export declare const CollapseItemIndicator: import("@stitches/react/types/styled-component").StyledComponent, {}, {
sm: string;
md: string;
lg: string;
}, import("@stitches/react/types/css-util").CSS<{
sm: string;
md: string;
lg: string;
}, {
colors: {
hiContrast: string;
loContrast: string;
canvas: string;
brandPrimary: string;
brandSecondary: string;
brandMadeira1: string;
brandMadeira2: string;
brandMadeira3: string;
brandMadeira4: string;
brandMadeira5: string;
brandMadeira6: string;
brandMadeira7: string;
brandMadeira8: string;
brandMadeira9: string;
mono1: string;
mono2: string;
background1: string;
background2: string;
alwaysBlack: string;
alwaysGray: string;
alwaysWhite: string;
primary1: string;
primary2: string;
primary3: string;
primary4: string;
primary1Hover: string;
primary2Hover: string;
primary3Hover: string;
primary4Hover: string;
secondary1: string;
secondary2: string;
secondary3: string;
secondary3RGB: string;
secondary4: string;
secondary0Hover: string;
secondary1Hover: string;
secondary2Hover: string;
secondary3Hover: string;
secondary4Hover: string;
success1: string;
success2: string;
success3: string;
success4: string;
success1Hover: string;
success2Hover: string;
success3Hover: string;
success4Hover: string;
danger1: string;
danger2: string;
danger3: string;
danger4: string;
danger1Hover: string;
danger2Hover: string;
danger3Hover: string;
danger4Hover: string;
warning1: string;
warning2: string;
warning3: string;
warning4: string;
warning1Hover: string;
warning2Hover: string;
warning3Hover: string;
warning4Hover: string;
info1: string;
info2: string;
info3: string;
info4: string;
info1Hover: string;
info2Hover: string;
info3Hover: string;
info4Hover: string;
neutral1: string;
neutral2: string;
neutral3: string;
neutral4: string;
neutral5: string;
neutral6: string;
linkedin: string;
linkedin1: string;
whatsapp1: string;
whatsapp2: string;
whatsapp3: string;
youtube1: string;
youtube2: string;
twitter: string;
twitter1: string;
facebook1: string;
instagram1: string;
pinterest: string;
pinterest1: string;
mono1Opacity1: string;
mono1Opacity2: string;
mono1Opacity3: string;
mono1Opacity4: string;
mono1Opacity5: string;
mono1Opacity6: string;
mono1Opacity7: string;
mono1Opacity8: string;
mono1Opacity9: string;
mono2Opacity1: string;
mono2Opacity2: string;
mono2Opacity3: string;
mono2Opacity4: string;
mono2Opacity5: string;
mono2Opacity6: string;
mono2Opacity7: string;
mono2Opacity8: string;
mono2Opacity9: string;
defaultBorderColor: string;
yellow100: string;
yellow200: string;
yellow300: string;
yellow400: string;
yellow500: string;
yellow600: string;
purple100: string;
purple200: string;
purple300: string;
purple400: string;
purple500: string;
purple600: string;
flagFreight: string;
flagOffer: string;
flagPrivateLabel: string;
flagCampaing: string;
secondaryHover0: string;
};
fonts: {
untitled: string;
mono: string;
};
space: {
none: string;
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridGutter: string;
gridMobileGutter: string;
};
sizes: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridColumns: string;
};
fontSizes: {
bodyXSmall: string;
bodySmall: string;
bodyMedium: string;
hero: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
mobileHero: string;
mobileH1: string;
mobileH2: string;
mobileH3: string;
mobileH4: string;
mobileH5: string;
iconXSmall: string;
iconSmall: string;
iconMedium: string;
iconLarge: string;
iconXLarge: string;
};
fontWeights: {
light: string;
regular: string;
semibold: string;
bold: string;
};
letterSpacings: {
none: string;
small: string;
medium: string;
large: string;
};
lineHeights: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
};
radii: {
none: string;
small: string;
medium: string;
large: string;
xlarge: string;
circle: string;
};
shadows: {
shadowNone: string;
shadowXSmall: string;
shadowSmall: string;
shadowMedium: string;
shadowLarge: string;
focusPressed: string;
};
zIndices: {
1: string;
2: string;
3: string;
4: string;
max: string;
};
}, import("@stitches/react/types/config").DefaultThemeMap, {
p: (value: {}) => {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
/**
* Represents content inside the collapse when opened
*/
export declare const CollapseItemContent: import("@stitches/react/types/styled-component").StyledComponent {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
/**
* Represents One collapse Item
*/
export declare const CollapseItem: import("@stitches/react/types/styled-component").StyledComponent {
padding: {};
};
pt: (value: {}) => {
paddingTop: {};
};
pr: (value: {}) => {
paddingRight: {};
};
pb: (value: {}) => {
paddingBottom: {};
};
pl: (value: {}) => {
paddingLeft: {};
};
px: (value: {}) => {
paddingLeft: {};
paddingRight: {};
};
py: (value: {}) => {
paddingTop: {};
paddingBottom: {};
};
m: (value: {}) => {
margin: {};
};
mt: (value: {}) => {
marginTop: {};
};
mr: (value: {}) => {
marginRight: {};
};
mb: (value: {}) => {
marginBottom: {};
};
ml: (value: {}) => {
marginLeft: {};
};
mx: (value: {}) => {
marginLeft: {};
marginRight: {};
};
my: (value: {}) => {
marginTop: {};
marginBottom: {};
};
ta: (value: {}) => {
textAlign: {};
};
fd: (value: {}) => {
flexDirection: {};
};
fw: (value: {}) => {
flexWrap: {};
};
ai: (value: {}) => {
alignItems: {};
};
ac: (value: {}) => {
alignContent: {};
};
jc: (value: {}) => {
justifyContent: {};
};
as: (value: {}) => {
alignSelf: {};
};
fg: (value: {}) => {
flexGrow: {};
};
fs: (value: {}) => {
flexShrink: {};
};
fb: (value: {}) => {
flexBasis: {};
};
bc: (value: {}) => {
backgroundColor: {};
};
br: (value: {}) => {
borderRadius: {};
};
btrr: (value: {}) => {
borderTopRightRadius: {};
};
bbrr: (value: {}) => {
borderBottomRightRadius: {};
};
bblr: (value: {}) => {
borderBottomLeftRadius: {};
};
btlr: (value: {}) => {
borderTopLeftRadius: {};
};
bs: (value: {}) => {
boxShadow: {};
};
lh: (value: {}) => {
lineHeight: {};
};
ox: (value: {}) => {
overflowX: {};
};
oy: (value: {}) => {
overflowY: {};
};
pe: (value: {}) => {
pointerEvents: {};
};
us: (value: {}) => {
userSelect: {};
};
size: (value: {}) => {
width: {};
height: {};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
}>>;
export declare type CollapseItemVariants = StitchesVariants & {
css?: CSS;
};
export declare type CollapseItemProps = React.ComponentProps & CollapseItemVariants;