Prop Types without design types

box.d.ts

type BoxTypes = {
    childern?: React.ReactNode | JSX.Element | null;

    // Disabled
    disabled?: boolean;

    // Margins
    ml?: string;
    mt?: string;
    mr?: string;
    mb?: string;
    my?: string;
    mx?: string;

    // Padding
    p?: string;
    pt?: string;
    pb?: string;
    pl?: string;
    pr?: string;
    py?: string;
    px?: string;

    // Size
    width?: string;
    height?: string;
    maxWidth?: string;
    minWidth?: string;
    maxHeight?: string;
    minHeight?: string;

    // Display
    display?: string;

    // Border
    border?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    borderTop?: string;
    borderBottom?: string;
    borderRight?: string;
    borderLeft?: string;

    // Position
    position?: string;
    top?: string;
    bottom?: string;
    right?: string;
    left?: string;

    // Color
    color?: string;
    bg?: string;
    backgroundImage?: string;

    // Layout
    flexWrap?: string;
    flexDirection?: string;
    flex?: string;
    flexGrow?: string;
    flexShrink?: string;
    flexBasis?: string;

    justifyContent?: string;
    justifySelf?: string;
    justifyItems?: string;
    alignContent?: string;
    alignSelf?: string;
    alignItems?: string;

    gridGap?: string;
    gridColumn?: string;
    gridRow?: string;
    gridAutoFlow?: string;
    gridAutoColumns?: string;
    gridAutoRows?: string;
    gridTemplateColumns?: string;
    gridTemplateRows?: string;
    gridTemplateAreas?: string;
    gridRowGap?: string;
    gridColumnGap?: string;

    // Typography
    lineHeight?: string;
    fontWeight?: string;
    fontFamily?: string;
    fontSize?: string;
    textAlign?: string;

    // Shadow
    boxShadow?: string;

    // Utility
    zIndex?: string;
    overflow?: string;
    overflowX?: string;
    overflowY?: string;
    ref?: any;

    opacity?: string;
    visibility?: string;
    cursor?: string;



    // Others 
    shouldHover?: boolean;

    //position
    right?: string;
    left?: string;
    bottom?: string;
    top?: string;
};