///
///
///
import { BADGE } from '@geometricpanda/storybook-addon-badges';
/**
* The Box component serves as a wrapper component for most of the CSS utility needs.
*
* ```javascript
import { Box } from "@galaxy-ds/core";
```
*/
declare const meta: {
title: string;
component: (props: import("./Box.types").BoxProps) => import("react/jsx-runtime").JSX.Element;
parameters: {
badges: BADGE[];
layout: string;
};
};
export default meta;
export declare const Default: {
args: {
bgcolor: "primary.main";
border: number;
p: number;
sx: {
width: number;
height: number;
};
};
play: ({ canvasElement }: import("@storybook/csf").PlayFunctionContext | undefined;
sx?: import("@mui/system").SxProps | undefined;
color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
fontSize?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
p?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
height?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
width?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
display?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
fontFamily?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
fontStyle?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
fontWeight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
letterSpacing?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
order?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
overflow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
visibility?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
lineHeight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
textTransform?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
border?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
boxShadow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
zIndex?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
alignContent?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
alignItems?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
alignSelf?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
bottom?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
boxSizing?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
columnGap?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
flexBasis?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
flexDirection?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
flexGrow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
flexShrink?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
flexWrap?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
gridAutoColumns?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
gridAutoFlow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
gridAutoRows?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
gridTemplateAreas?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
gridTemplateColumns?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
gridTemplateRows?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
justifyContent?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
justifyItems?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
justifySelf?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
left?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginBlockEnd?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginBlockStart?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginBottom?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginInlineEnd?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginInlineStart?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginLeft?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginRight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginTop?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
maxHeight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
maxWidth?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
minHeight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
minWidth?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingBlockEnd?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingBlockStart?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingBottom?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingInlineEnd?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingInlineStart?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingLeft?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingRight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
paddingTop?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
position?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
right?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
rowGap?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
textAlign?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
textOverflow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
top?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
whiteSpace?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
borderBottom?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
borderColor?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue);
borderLeft?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
borderRadius?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
borderRight?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
borderTop?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
flex?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
gap?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
gridArea?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
gridColumn?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
gridRow?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue[] | undefined>);
margin?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginBlock?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined>);
marginInline?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue | readonly NonNullable | undefined>[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue