How to use the @xstyled/system.variant function in @xstyled/system

interface SizeTheme {
    [K: string]: any;
}

const TableSizes: SizeTheme = {
    sm: {
        th: { padding: '0.25rem 0.75rem' },
        td: { padding: '0.25rem 0.75rem' },
    },
    md: {
        th: { padding: '0.5rem 1.25rem' },
        td: { padding: '0.5rem 1.25rem' },
    },
};

export const sizeVariantStyles = createVariant({
    key: 'table.sizes',
    prop: 'size',
    default: 'md',
    variants: TableSizes,
});

// Table
// ----------------------------------------------------------------------------------

interface TableProps
    extends React.HTMLAttributes,
        FontSizeProps,
        FontWeightProps,
        BorderRadiusProps,
        BorderProps,
        MarginProps,

});

type ButtonStyle =
    | ((args: StyledButtonProps) => FlattenSimpleInterpolation | undefined)
    | FlattenSimpleInterpolation;

interface ButtonStyles {
    base: ButtonStyle;
    disabled: ButtonStyle;
    hover: ButtonStyle;
    active?: ButtonStyle;
    focus?: ButtonStyle;
    focusOutline?: ButtonStyle;
}

const stateStyles = createVariant({
    key: `${BUTTON_KEY}.variants`,
    prop: 'variant',
    default: 'filled',
    variants: BUTTON_THEME.variants,
});

const OutlineStyles = ({ buttonStyles, borderRadius }: StyledButtonProps) =>
    css`
        &:after {
            position: absolute;
            content: '';

            // overlap border (1px) and extend 2px past
            // TODO: determine approach for spacing with larger than 1px borders
            top: -3px;
            left: -3px;

height: 2.6875rem;
                line-height: 2.6875rem;
                cursor: pointer;
                font-size: 0.875rem;
                color: #222;

                &:hover {
                    background-color: rgba(0, 126, 205, 0.1);
                }
            }
        }
    `,
    none: css({}),
};

const variantStyles = createVariant({
    key: 'collapse.variants',
    prop: 'variant',
    default: DEFAULT_VARIANT,
    variants: variants,
});

const StyledCollapse = styled('div')`
    display: block;
    box-sizing: border-box;
    font-family: base;

    ${variantStyles}

    &.no-bottom-border {
        border-bottom-style: none;

border: 'solid transparent',
                    padding: ['left', 'right'].includes(position)
                        ? '0.625rem'
                        : '0.625rem 0',
                    borderWidth: ['left', 'right'].includes(position)
                        ? '0 3px'
                        : '3px 0',
                    fontWeight: active ? 600 : undefined,
                    color: active ? undefined : 'text.label',
                }),
        },
        pane: css({}),
    },
};

export const variantStyles = createVariant({
    key: 'tabs.variants',
    prop: 'variant',
    default: 'regular',
    variants: TabVariants,
});

border-radius: base;
            font-weight: 600;
            padding: 1rem 0.75rem;
        `,
    },
    lg: {
        menu: css``,
        items: css`
            border-radius: base;
            font-weight: 600;
            padding: 1.5rem 1.25rem;
        `,
    },
};

const sizeVariant = variant({
    key: 'menu.sizes',
    prop: 'size',
    default: 'md',
    variants: MenuSizeStyles,
});

const StyledMenu = styled('nav')`
    display: flex;
    width: 100%;
    ${spaceStyles};
    min-width: 15.625rem;
    margin: 0;
    padding: 0;

    ${({ background = 'primary.base' }) =>
        css({

`
                    : undefined,
            focusOutline: ({ reverse }: StyledButtonProps) =>
                reverse
                    ? css`
                          box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
                      `
                    : css`
                          box-shadow: 0 0 0 2px
                              ${transparentize(0.6, disabledColor.dark)};
                      `,
        },
    },
};

const sizeStyles = createVariant({
    key: `${BUTTON_KEY}.sizes`,
    prop: 'size',
    default: 'md',
    variants: BUTTON_THEME.sizes,
});

type ButtonStyle =
    | ((args: StyledButtonProps) => FlattenSimpleInterpolation | undefined)
    | FlattenSimpleInterpolation;

interface ButtonStyles {
    base: ButtonStyle;
    disabled: ButtonStyle;
    hover: ButtonStyle;
    active?: ButtonStyle;
    focus?: ButtonStyle;