Function Modal

RemovePadding: StyledComponent<
    "div",
    CSS<
        {},
        {
            colors: {
                activeBg: "#e7e7e7";
                background: "white";
                blue1: "#038bf4";
                blue2: "#b7d6f5";
                blue3: "#dbe6ff";
                blue4: "#33b4ff";
                blue5: "#30a2e6";
                border: "#d5d5d5";
                buttonBorder: "#bababa";
                choiceActiveBg: "#f3f3f3";
                choiceActiveText: "#313131";
                choiceBg: "#ffffff";
                choiceBorder: "#cfcfcf";
                choiceText: "#999999";
                focusColor: "#dcaf00";
                green1: "#3ec234";
                green1Darker: "#38af2f";
                grey1: "#737373";
                headerBg: "#efeff0";
                headerBorder: "#c8c8c9";
                headerText: "#484848";
                icon: "#636363";
                inactiveBg: "#d3d3de";
                inactiveDarkBg: "#999";
                inputDisabledBg: "#f3f3f3";
                inputDisabledText: "#959595";
                mainColor: "#008ad2";
                mainColorAlt: "#006AA9";
                modalBg: "#f7f7f7";
                modalButtonBg: "#f8f8f8";
                modalButtonBorder: "#c2c2c2";
                orange1: "#ff7200";
                orange1Darker: "#cc5b00";
                pink1: "#ff388f";
                pinky1: "#f5c0b7";
                pinky2: "#e07b67";
                pinky3: "#ffe1db";
                popText: "#666";
                purple1: "#7357e8";
                red1: "#ea2700";
                scrollbarsBg: "transparent";
                scrollbarsThumb: "#737373";
                selectorActive: "#008ad2";
                selectorText: "#606060";
                sub: "#959595";
                tableStripedBg: "#fafafa";
                text: "#323232";
                text2: "#181818";
                text3: "#000000";
                toggleBgDisabled: "#f0f0f0";
                toggleHandleBg: "#e0e0e0";
                toggleHandleBgDisabled: "#deae84";
                toggleHandleBorder: "#cdcdcd";
                toggleHandleBorderDisabled: "#c29f7d";
                toolbarBg: "#f8f8f8";
                toolbarBorder: "#ababab";
                toolButtonText: "#666e80";
                yellow1: "#ffde9d";
                yellow2: "#e4a429";
                yellow3: "#fff5db";
            };
        },
        DefaultThemeMap,
        {
            mx: (
                value: string | number,
            ) => { marginLeft: string | number; marginRight: string | number };
            my: (
                value: string | number,
            ) => { marginBottom: string | number; marginTop: string | number };
            px: (
                value: string | number,
            ) => { paddingLeft: string | number; paddingRight: string | number };
            py: (
                value: string | number,
            ) => { paddingBottom: string | number; paddingTop: string | number };
            size: (
                value: string | number,
            ) => { height: string | number; width: string | number };
        },
    >,
>