@thryveai/theme-interfaces 2.3.14 → 2.3.15

package/dist/storefront/defaultThemeStorefront.js

@@ -1,1155 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultThemeColors = exports.globalTheme = void 0;
-var DefaultThemeSFUI = function (colors) {
-    if (colors === void 0) { colors = exports.DefaultThemeColors; }
-    return ({
-        colors: {
-            brandColors: {
-                primary1: colors.primary1,
-                primary2: colors.primary2,
-                primary3: colors.primary3,
-                primary4: colors.primary4,
-                primary5: colors.primary5,
-                secondary1: colors.secondary1,
-                secondary2: colors.secondary2,
-                secondary3: colors.secondary3,
-                secondary4: colors.secondary4,
-                secondary5: colors.secondary5,
-                tertiary1: colors.tertiary1,
-                tertiary2: colors.tertiary2,
-                tertiary3: colors.tertiary3,
-                tertiary4: colors.tertiary4,
-                tertiary5: colors.tertiary5
-            },
-            uiColors: {
-                success: colors.success,
-                successDark: colors.successDark,
-                successLight: colors.successLight,
-                warn: colors.warn,
-                warnDark: colors.warnDark,
-                warnLight: colors.warnLight,
-                alert: colors.alert,
-                alertDark: colors.alertDark,
-                alertLight: colors.alertLight,
-                promotion1: colors.promotion1,
-                promotion2: colors.promotion2,
-                greyscale1: colors.greyscale1,
-                greyscale2: colors.greyscale2,
-                greyscale3: colors.greyscale3,
-                greyscale4: colors.greyscale4,
-                greyscale5: colors.greyscale5,
-                greyscale6: colors.greyscale6,
-                greyscale7: colors.greyscale7
-            }
-        },
-        header: {
-            notifications: {
-                counter: {
-                    backgroundColor: colors.alert,
-                },
-                text: {
-                    color: colors.greyscale1,
-                    hoverColor: colors.greyscale3,
-                },
-                seeAllNotifications: { color: colors.greyscale4 },
-            },
-            badge: {
-                cart: {
-                    color: colors.secondary1,
-                    bgColor: colors.greyscale1
-                }
-            },
-            topMenu: {
-                color: colors.greyscale6,
-                hoverColor: colors.greyscale6,
-                backgroundColor: colors.greyscale2,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            mainMenu: {
-                color: colors.greyscale6,
-                hoverColor: colors.greyscale6,
-                backgroundColor: colors.greyscale1,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            bottomMenu: {
-                color: colors.greyscale6,
-                hoverColor: colors.primary1,
-                backgroundColor: colors.greyscale1,
-                textTransform: 'capitalize',
-                fontWeight: exports.globalTheme.FontWeight,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            mobileMenu: {
-                color: colors.primary1,
-                hoverColor: colors.primary1,
-                backgroundColor: colors.greyscale1,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            search: {
-                borderColor: colors.greyscale3,
-                borderRadius: '4px',
-                clearBtnColor: colors.greyscale3,
-                searchButton: {
-                    desktop: {
-                        static: { color: colors.primary1, backgroundColor: 'transparent' },
-                        hover: { color: colors.primary1, backgroundColor: colors.greyscale2 },
-                        clicked: {
-                            color: colors.greyscale1,
-                            backgroundColor: colors.primary1
-                        }
-                    },
-                    tablet: {
-                        static: { color: colors.primary1 },
-                        clicked: {
-                            color: colors.greyscale1
-                        }
-                    },
-                    mobile: {
-                        static: { color: colors.primary1 }
-                    }
-                },
-                suggestions: {
-                    links: {
-                        color: {
-                            static: 'inherit',
-                            hover: 'inherit',
-                            visited: 'inherit'
-                        }
-                    }
-                },
-                multisearchBtn: {
-                    static: {
-                        color: colors.greyscale5,
-                        backgroundColor: colors.primary5
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        backgroundColor: colors.primary5
-                    }
-                }
-            },
-            storePopover: {
-                backgroundColor: colors.primary5,
-                activeBackgroundColor: colors.secondary5,
-                color: colors.greyscale5,
-                activeColor: colors.greyscale5,
-                borderColor: 'transparent',
-                borderRadius: '4px',
-                reserveTimeIconPosition: 'center'
-            },
-            accountPopover: {
-                backgroundColor: colors.greyscale2,
-                borderColor: 'transparent',
-                borderRadius: '4px',
-                color: colors.greyscale5,
-                links: {
-                    color: {
-                        static: colors.greyscale5,
-                        hover: 'inherit',
-                        visited: colors.greyscale5
-                    }
-                }
-            },
-            headerActionLinks: {
-                activeBackgroundColor: colors.greyscale2,
-                activeColor: colors.primary1,
-                backgroundColor: 'none',
-                borderRadius: exports.globalTheme.BorderRadius,
-                color: colors.greyscale5,
-                hoverColor: colors.greyscale5,
-                fontFamily: exports.globalTheme.FontFamily,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            headerLinks: {
-                color: colors.greyscale5,
-                hoverColor: colors.greyscale5,
-                backgroundColor: 'none',
-                activeColor: colors.greyscale5,
-                activeBackgroundColor: colors.greyscale2,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                borderRadius: exports.globalTheme.BorderRadius,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            departments: {
-                wrapCategoryTitle: false,
-                backgroundColor: {
-                    active: 'inherit',
-                    static: colors.greyscale2
-                },
-                color: {
-                    static: colors.greyscale5,
-                    hover: colors.primary1
-                },
-                iconColor: {
-                    static: colors.greyscale3,
-                    hover: colors.greyscale3
-                }
-            }
-        },
-        body: {
-            fontSize: exports.globalTheme.baseFontSize,
-            color: exports.globalTheme.bodyFontColor,
-            backgroundColor: exports.globalTheme.bodyBackgroundColor
-        },
-        footer: {
-            mainFooter: {
-                color: colors.greyscale6,
-                hoverColor: colors.greyscale6,
-                backgroundColor: colors.greyscale2,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            bottomFooter: {
-                color: colors.greyscale1,
-                hoverColor: colors.greyscale1,
-                backgroundColor: colors.greyscale5,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            bottomFooterNavHeaderLink: {
-                color: colors.greyscale6,
-                hoverColor: colors.greyscale6,
-                backgroundColor: 'transparent',
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            mediaIcons: {
-                color: colors.greyscale5
-            }
-        },
-        orderConfirmation: {
-            iconColor: colors.greyscale1,
-            backgroundColor: colors.successLight
-        },
-        minimalHeader: {
-            desktop: {
-                color: colors.secondary1,
-                hoverColor: colors.secondary1,
-                backgroundColor: colors.greyscale1,
-                iconColor: colors.secondary1,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            },
-            mobile: {
-                color: colors.secondary1,
-                hoverColor: colors.secondary1,
-                backgroundColor: colors.greyscale1,
-                iconColor: colors.secondary1,
-                links: {
-                    static: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    },
-                    hover: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    clicked: {
-                        color: colors.primary1,
-                        textDecoration: 'underline'
-                    },
-                    visited: {
-                        color: colors.primary1,
-                        textDecoration: 'none'
-                    }
-                }
-            }
-        },
-        subHeaderBoxes: {
-            backgroundColor: colors.greyscale2,
-            color: colors.greyscale5,
-            contentBorder: colors.greyscale2
-        },
-        breadcrumb: {
-            textTransform: 'capitalize',
-            backgroundColor: colors.greyscale2,
-            color: colors.primary1,
-            activeColor: colors.greyscale6,
-            backIconColor: colors.greyscale4
-        },
-        breadcrumbTitle: {
-            textTransform: 'capitalize',
-            backgroundColor: colors.greyscale2,
-            color: colors.primary1,
-            activeColor: colors.greyscale6,
-            backIconColor: colors.greyscale4
-        },
-        payment: {
-            selectedCardBackground: colors.primary5,
-            selectedCardColor: colors.greyscale5,
-            summary: {
-                listItemBackground: colors.greyscale2
-            },
-            checkoutCards: {
-                borderRadius: '4px'
-            }
-        },
-        productPage: {
-            detailsBackgroundColor: colors.greyscale2,
-            badges: {
-                borderRadius: '4px'
-            },
-            priceReductionColor: colors.alert,
-            previouslyPurchased: {
-                color: colors.greyscale5,
-                bgColor: colors.primary5
-            }
-        },
-        accountPage: {
-            passwordRequirements: {
-                backgroundColor: colors.primary5
-            }
-        },
-        favorites: {
-            headerIconStyle: 'FavSolid',
-            productColors: {
-                static: {
-                    color: colors.greyscale3,
-                    hoverColor: colors.alert
-                },
-                active: {
-                    color: colors.alert,
-                    hoverColor: colors.alertDark
-                }
-            }
-        },
-        promoBadges: {
-            backgroundColor: {
-                promotion: colors.promotion1,
-                pointsBasedPromo: colors.promotion2
-            },
-            fontWeight: exports.globalTheme.FontWeightBold,
-            color: {
-                promotion: colors.greyscale1,
-                pointsBasedPromo: colors.greyscale1
-            }
-        },
-        loyaltyCard: {
-            backgroundColor: colors.primary5,
-            borderColor: colors.primary5,
-            borderRadius: '16px',
-            cardTextColor: colors.greyscale5,
-            dimensions: {
-                width: 325,
-                height: 190
-            },
-            input: {
-                borderRadius: '4px',
-                backgroundColor: colors.greyscale1,
-                borderColor: colors.greyscale3,
-                idFields: {
-                    staticBorder: colors.greyscale4,
-                    hoverBorder: colors.greyscale5,
-                    activeBorder: colors.primary1,
-                    errorBorder: colors.alert
-                }
-            },
-            infoList: {
-                color: colors.greyscale4,
-                borderColor: colors.greyscale2
-            }
-        },
-        typography: {
-            webFonts: [
-                'https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i&display=swap'
-            ],
-            embeddedFonts: [],
-            weights: {
-                normal: exports.globalTheme.FontWeight,
-                bold: exports.globalTheme.FontWeightBold
-            },
-            text: {
-                body: {
-                    color: colors.greyscale6,
-                    fontFamily: exports.globalTheme.FontFamily,
-                    fontSize: '1rem',
-                    fontWeight: exports.globalTheme.FontWeight,
-                    capitalization: 'none',
-                    lineHeight: '1.1875rem',
-                    letterSpacing: 'normal'
-                },
-                fontXS: {
-                    fontFamily: exports.globalTheme.FontFamily,
-                    fontSize: '0.75rem',
-                    fontWeight: exports.globalTheme.FontWeight,
-                    capitalization: 'none',
-                    lineHeight: '0.9375rem',
-                    letterSpacing: 'normal'
-                },
-                fontSM: {
-                    fontFamily: exports.globalTheme.FontFamily,
-                    fontSize: '0.875rem',
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    capitalization: 'none',
-                    lineHeight: '1rem',
-                    letterSpacing: 'normal'
-                },
-                fontMD: {
-                    fontFamily: exports.globalTheme.FontFamily,
-                    fontSize: '1rem',
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    capitalization: 'none',
-                    lineHeight: '1.1875rem',
-                    letterSpacing: 'normal'
-                },
-                fontLG: {
-                    fontFamily: exports.globalTheme.HeadlineFontFamily,
-                    fontSize: '1.5rem',
-                    fontWeight: exports.globalTheme.HeadlineFontWeight,
-                    capitalization: 'none',
-                    lineHeight: '1.8125rem',
-                    letterSpacing: 'normal'
-                },
-                fontXL: {
-                    fontFamily: exports.globalTheme.HeadlineFontFamily,
-                    fontSize: '2rem',
-                    fontWeight: exports.globalTheme.HeadlineFontWeight,
-                    capitalization: 'none',
-                    lineHeight: '2.4375rem',
-                    letterSpacing: 'normal'
-                }
-            },
-            links: {
-                static: {
-                    color: colors.primary1,
-                    textDecoration: 'none'
-                },
-                hover: {
-                    color: colors.primary1,
-                    textDecoration: 'underline'
-                },
-                clicked: {
-                    color: colors.primary1,
-                    textDecoration: 'underline'
-                },
-                visited: {
-                    color: colors.primary1,
-                    textDecoration: 'none'
-                }
-            }
-        },
-        buttonLinks: { color: colors.primary1 },
-        buttons: {
-            globalThemeBorderRadius: exports.globalTheme.BorderRadius,
-            globalThemeFontWeight: exports.globalTheme.FontWeightBold,
-            globalThemeFontFamily: exports.globalTheme.FontFamily,
-            iconPosition: 'left',
-            miniCart: {
-                textTransform: 'capitalize',
-                backgroundColor: 'none',
-                borderRadius: exports.globalTheme.BorderRadius,
-                activeBackgroundColor: colors.secondary1,
-                hoverBackgroundColor: colors.secondary5,
-                tabletSettings: {
-                    enabled: false,
-                    backgroundColor: '',
-                    backgroundColorHover: '',
-                    iconColor: '',
-                    iconColorHover: '',
-                    showText: false,
-                    textColor: '',
-                    textColorHover: ''
-                },
-                color: colors.secondary1,
-                activeColor: colors.greyscale1,
-                mobileColor: colors.secondary1,
-                iconColor: colors.secondary1,
-                activeIconColor: colors.greyscale1,
-                mobileIconColor: colors.secondary1,
-                tabletIconColor: 'none',
-                desktopIconSize: '16px',
-                mobileIconSize: '24px'
-            },
-            primary: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.primary1,
-                    borderColor: colors.primary1,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                hover: {
-                    bgColor: colors.primary2,
-                    borderColor: colors.primary2,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                clicked: {
-                    bgColor: colors.primary3,
-                    borderColor: colors.primary3,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                disabled: {
-                    bgColor: colors.primary4,
-                    borderColor: colors.primary4,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale3
-                }
-            },
-            primaryLight: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale1,
-                    color: colors.primary1,
-                    iconColor: colors.primary1
-                },
-                hover: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale1,
-                    color: colors.primary2,
-                    iconColor: colors.primary2
-                },
-                clicked: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale1,
-                    color: colors.primary3,
-                    iconColor: colors.primary3
-                },
-                disabled: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale1,
-                    color: colors.greyscale3,
-                    iconColor: colors.greyscale3
-                }
-            },
-            secondary: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.primary1,
-                    color: colors.primary1,
-                    iconColor: colors.primary1
-                },
-                hover: {
-                    bgColor: colors.primary1,
-                    borderColor: colors.primary1,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                clicked: {
-                    bgColor: colors.primary2,
-                    borderColor: colors.primary2,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                disabled: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale3,
-                    iconColor: colors.greyscale3
-                }
-            },
-            secondaryLight: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: 'transparent',
-                    borderColor: colors.greyscale1,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                hover: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale1,
-                    color: colors.primary1,
-                    iconColor: colors.primary1
-                },
-                clicked: {
-                    bgColor: colors.primary2,
-                    borderColor: colors.greyscale1,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                disabled: {
-                    bgColor: 'transparent',
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale3,
-                    iconColor: colors.greyscale3
-                }
-            },
-            tertiary: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.tertiary1,
-                    borderColor: colors.tertiary1,
-                    color: colors.greyscale5,
-                    iconColor: colors.greyscale5
-                },
-                hover: {
-                    bgColor: colors.tertiary1,
-                    borderColor: colors.tertiary1,
-                    color: colors.primary1,
-                    iconColor: colors.primary1
-                },
-                clicked: {
-                    bgColor: colors.tertiary1,
-                    borderColor: colors.primary1,
-                    color: colors.primary1,
-                    iconColor: colors.primary1
-                },
-                disabled: {
-                    bgColor: colors.greyscale2,
-                    borderColor: colors.greyscale2,
-                    color: colors.greyscale3,
-                    iconColor: colors.greyscale1
-                }
-            },
-            checkout: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                iconColor: colors.greyscale5,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.secondary1,
-                    borderColor: colors.secondary1,
-                    color: colors.greyscale1
-                },
-                hover: {
-                    bgColor: colors.secondary2,
-                    borderColor: colors.secondary2,
-                    color: colors.greyscale1
-                },
-                clicked: {
-                    bgColor: colors.secondary3,
-                    borderColor: colors.secondary3,
-                    color: colors.greyscale1
-                },
-                disabled: {
-                    bgColor: colors.secondary4,
-                    borderColor: colors.secondary4,
-                    color: colors.greyscale1
-                }
-            },
-            quantityStepper: {
-                borderColor: colors.greyscale3,
-                borderRadius: exports.globalTheme.BorderRadius,
-                textTransform: 'none',
-                numericInput: {
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    fontSize: '0.875rem',
-                    letterSpacing: 'normal',
-                    lineHeight: '1.1875rem',
-                    static: {
-                        bgColor: colors.greyscale1,
-                        color: colors.greyscale5
-                    },
-                    focused: {
-                        bgColor: colors.primary5,
-                        color: colors.greyscale5
-                    }
-                },
-                plusMinusButtons: {
-                    plusMinusIconBgColor: colors.greyscale1,
-                    plusMinusIconColor: colors.primary1
-                }
-            },
-            coupon: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                borderStyle: 'dashed',
-                fontWeight: exports.globalTheme.FontWeightBold,
-                static: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale5,
-                    couponIconColor: colors.primary1
-                },
-                hover: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale5,
-                    couponIconColor: colors.primary1
-                },
-                clicked: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale5,
-                    couponIconColor: colors.primary1
-                },
-                clipped: {
-                    bgColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    color: colors.greyscale5,
-                    clippedIconColor: colors.success,
-                    couponIconColor: colors.greyscale5
-                }
-            },
-            addToCart: {
-                borderRadius: exports.globalTheme.BorderRadius,
-                fontWeight: exports.globalTheme.FontWeightBold,
-                textTransform: 'none',
-                static: {
-                    bgColor: colors.primary1,
-                    borderColor: colors.primary1,
-                    color: colors.greyscale1,
-                    iconColor: colors.secondary1
-                },
-                hover: {
-                    bgColor: colors.primary2,
-                    borderColor: colors.primary1,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                clicked: {
-                    bgColor: colors.primary3,
-                    borderColor: colors.primary2,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale1
-                },
-                disabled: {
-                    bgColor: colors.primary4,
-                    borderColor: colors.primary4,
-                    color: colors.greyscale1,
-                    iconColor: colors.greyscale3
-                }
-            },
-            pills: {
-                borderRadius: '500px',
-                textTransform: 'none',
-                active: {
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    fontWeightHover: exports.globalTheme.FontWeightBold,
-                    color: colors.greyscale6,
-                    colorHover: colors.greyscale6,
-                    colorVisited: colors.greyscale6,
-                    backgroundColor: colors.primary5,
-                    borderColor: colors.primary1,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '4px 16px'
-                },
-                small: {
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    fontWeightHover: exports.globalTheme.FontWeight,
-                    color: colors.greyscale5,
-                    colorHover: colors.greyscale5,
-                    colorVisited: colors.greyscale5,
-                    backgroundColor: colors.primary5,
-                    borderColor: colors.primary5,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '2px 8px'
-                },
-                regular: {
-                    fontWeight: exports.globalTheme.FontWeight,
-                    fontWeightHover: exports.globalTheme.FontWeight,
-                    color: colors.primary1,
-                    colorHover: colors.primary1,
-                    colorVisited: colors.primary1,
-                    backgroundColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '4px 16px'
-                }
-            },
-            facets: {
-                borderRadius: '500px',
-                textTransform: 'none',
-                fontWeight: 400,
-                active: {
-                    iconColor: colors.greyscale6,
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    fontWeightHover: exports.globalTheme.FontWeightBold,
-                    color: colors.greyscale6,
-                    colorHover: colors.greyscale6,
-                    colorVisited: colors.greyscale6,
-                    backgroundColor: colors.primary5,
-                    borderColor: colors.primary1,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '4px 16px'
-                },
-                small: {
-                    iconColor: colors.greyscale6,
-                    fontWeight: exports.globalTheme.FontWeightBold,
-                    fontWeightHover: exports.globalTheme.FontWeight,
-                    color: colors.greyscale5,
-                    colorHover: colors.greyscale5,
-                    colorVisited: colors.greyscale5,
-                    backgroundColor: colors.primary5,
-                    borderColor: colors.primary5,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '2px 8px'
-                },
-                regular: {
-                    iconColor: colors.greyscale6,
-                    fontWeight: exports.globalTheme.FontWeight,
-                    fontWeightHover: exports.globalTheme.FontWeight,
-                    color: colors.primary1,
-                    colorHover: colors.greyscale5,
-                    colorVisited: colors.primary1,
-                    backgroundColor: colors.greyscale1,
-                    borderColor: colors.greyscale3,
-                    borderColorSelected: colors.primary1,
-                    textDecoration: 'none',
-                    textDecorationHover: 'underline',
-                    padding: '4px 16px'
-                }
-            },
-            sliderArrows: {
-                backgroundColor: colors.greyscale2,
-                sideBorderColor: colors.greyscale3,
-                iconColor: colors.greyscale4
-            },
-            filterSort: {
-                color: colors.primary1,
-                hoverColor: colors.primary2,
-                borderRadius: exports.globalTheme.BorderRadius
-            },
-            activeAddress: {
-                backgroundColor: colors.primary3,
-                borderColor: colors.primary3
-            },
-            timeSlotPaginationDay: {
-                selected: {
-                    backgroundColor: colors.tertiary1
-                }
-            },
-            paginationNumber: {
-                static: {
-                    color: colors.primary1,
-                    backgroundColor: "none",
-                },
-                hover: {
-                    color: colors.primary1,
-                    backgroundColor: colors.primary5,
-                },
-                disabled: {
-                    color: colors.greyscale1,
-                    backgroundColor: colors.primary1,
-                },
-                visited: {
-                    color: colors.primary1,
-                    backgroundColor: "none",
-                },
-            },
-        },
-        carousel: {
-            bannerBackgroundColor: colors.greyscale5,
-            carouselPagination: {
-                dotBackground: colors.greyscale3,
-                activeDotBackground: colors.primary1,
-                wrapperBackground: 'transparent',
-                wrapperHeight: '24px'
-            },
-            carouselArrows: {
-                borderRadius: '50%',
-                backgroundColor: 'rgba(146, 146, 146, 0.5)',
-                activeBackgroundColor: colors.greyscale4,
-                iconColor: colors.greyscale1,
-                buttonDimension: 56
-            }
-        },
-        modal: {
-            header: {
-                mobileBackgroundColor: colors.greyscale2
-            },
-            storeIcon: {
-                bgColor: colors.tertiary1,
-                borderColor: colors.tertiary1,
-                color: colors.greyscale5,
-                hoverBGColor: colors.tertiary1,
-                hoverBorderColor: colors.tertiary1,
-                iconColor: colors.greyscale6
-            }
-        },
-        selectedOption: {
-            bgColor: colors.successLight
-        },
-        input: {
-            borderRadius: '4px',
-            static: {
-                bgColor: colors.greyscale1,
-                borderColor: colors.greyscale3,
-                color: colors.greyscale4,
-                placeholderColor: colors.greyscale4
-            },
-            hover: {
-                bgColor: colors.greyscale1,
-                borderColor: colors.greyscale3,
-                color: colors.greyscale6,
-                placeholderColor: colors.greyscale4
-            },
-            focus: {
-                bgColor: colors.tertiary1,
-                borderColor: colors.primary1,
-                color: colors.greyscale5,
-                placeholderColor: colors.greyscale5
-            },
-            disabled: {
-                bgColor: colors.greyscale2,
-                borderColor: colors.greyscale3,
-                color: colors.greyscale4,
-                placeholderColor: colors.greyscale2
-            }
-        },
-        productGrid: {
-            borderColor: colors.greyscale2
-        },
-        logoHeight: {
-            header: {
-                desktop: '34px',
-                tablet: '30px',
-                mobile: '26px'
-            },
-            modal: {
-                desktop: '34px',
-                tablet: '30px',
-                mobile: '30px'
-            },
-            content: {
-                desktop: '34px',
-                tablet: '30px',
-                mobile: '26px'
-            }
-        },
-        globalAnimations: {
-            confettiAnimation: {
-                successModals: {
-                    colors: []
-                }
-            }
-        },
-        metadata: [
-            { name: 'msapplication-TileColor', content: '#ffffff' },
-            {
-                name: 'msapplication-TileImage',
-                content: "/favicons/ms-icon-144x144.png"
-            },
-            { name: 'theme-color', content: '#ffffff' }
-        ],
-        scripts: {}
-    });
-};
-exports.default = DefaultThemeSFUI;
-exports.globalTheme = {
-    BorderRadius: '4px',
-    FontFamily: 'Cabin, sans-serif',
-    baseFontSize: '16px',
-    FontWeight: 400,
-    FontWeightBold: 700,
-    bodyFontColor: '#111111',
-    HeadlineFontFamily: 'Cabin, sans-serif',
-    HeadlineFontWeight: 700,
-    bodyBackgroundColor: '#f3f4f6'
-};
-exports.DefaultThemeColors = {
-    primary1: '#016abc',
-    primary2: '#004f8c',
-    primary3: '#002a4b',
-    primary4: '#80b4dd',
-    primary5: '#e6f0f8',
-    secondary1: '#d83A22',
-    secondary2: '#aa2003',
-    secondary3: '#5b1102',
-    secondary4: '#f19582',
-    secondary5: '#fceae6',
-    tertiary1: '#e6f0f8',
-    tertiary2: '#fcefe6',
-    tertiary3: '#09448A',
-    tertiary4: '',
-    tertiary5: '',
-    promotion1: '#bc3e31',
-    promotion2: '#09448A',
-    success: '#4fbf76',
-    successDark: '#2e7c49',
-    successLight: '#e6f6ec',
-    warn: '#fcc260',
-    warnDark: '#8f7344',
-    warnLight: '#fff6e6',
-    alert: '#bc3e31',
-    alertDark: '#8c2e24',
-    alertLight: '#ffe5e2',
-    greyscale1: '#ffffff',
-    greyscale2: '#f3f4f6',
-    greyscale3: '#ccced0',
-    greyscale4: '#71777b',
-    greyscale5: '#40464b',
-    greyscale6: '#111111',
-    greyscale7: '#31363A'
-};