@trafilea/afrodita-components 5.0.0-beta.25 → 5.0.0-beta.251

package/build/theme/thespadr.theme.js

@@ -0,0 +1,1084 @@
+'use strict';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var CardSectionType;
+(function (CardSectionType) {
+    CardSectionType[CardSectionType["Header"] = 0] = "Header";
+    CardSectionType[CardSectionType["Footer"] = 1] = "Footer";
+})(CardSectionType || (CardSectionType = {}));
+var ComponentSize;
+(function (ComponentSize) {
+    ComponentSize["Large"] = "large";
+    ComponentSize["Medium"] = "medium";
+    ComponentSize["Small"] = "small";
+    ComponentSize["XSmall"] = "xsmall";
+})(ComponentSize || (ComponentSize = {}));
+var ComponentPosition;
+(function (ComponentPosition) {
+    ComponentPosition[ComponentPosition["Top"] = 0] = "Top";
+    ComponentPosition[ComponentPosition["Bottom"] = 1] = "Bottom";
+    ComponentPosition[ComponentPosition["Left"] = 2] = "Left";
+    ComponentPosition[ComponentPosition["Right"] = 3] = "Right";
+})(ComponentPosition || (ComponentPosition = {}));
+var InputValidationType;
+(function (InputValidationType) {
+    InputValidationType[InputValidationType["Error"] = 0] = "Error";
+    InputValidationType[InputValidationType["Valid"] = 1] = "Valid";
+    InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
+})(InputValidationType || (InputValidationType = {}));
+
+var tsd = {
+    name: 'TheSpaDr',
+    fontSizes: [8, 10, 12, 14, 16, 18, 20, 24, 30, 36, 42, 52, 60, 68, 72, 76],
+    fontWeights: [400, 600, 500, 700, 900],
+    lineHeights: [14, 16, 18, 20, 22, 24, 28, 32, 38, 44, 52, 68, 76, 84, 88, 92],
+    mediaQueries: {
+        mobile: 768,
+        tablet: 900,
+        desktop: 1200,
+    },
+    radius: {
+        regular: '8px',
+    },
+    zIndex: {
+        modal: 50,
+        overlay: 49,
+    },
+    colors: {
+        pallete: {
+            primary: {
+                color: '#8bb948',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#F3F8ED',
+                    contrast: '--colors-shades-700-color',
+                },
+                20: {
+                    color: '#E8F1DA',
+                    contrast: '--colors-shades-700-color',
+                },
+                40: {
+                    color: '#E3EED3',
+                    contrast: '--colors-shades-700-color',
+                },
+                60: {
+                    color: '#B9D591',
+                    contrast: '--colors-shades-700-color',
+                },
+                80: {
+                    color: '#A2C76D',
+                    contrast: '--colors-shades-700-color',
+                },
+            },
+            secondary: {
+                color: '#18444C',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#215170',
+                    contrast: '--colors-shades-700-color',
+                },
+                20: {
+                    color: '#18444c33',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#21517033',
+                        contrast: '--colors-shades-700-color',
+                    },
+                },
+                40: {
+                    color: '#18444c66',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#21517066',
+                        contrast: '--colors-shades-700-color',
+                    },
+                },
+                60: {
+                    color: '#18444c99',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#21517099',
+                        contrast: '--colors-shades-700-color',
+                    },
+                },
+                80: {
+                    color: '#18444ccc',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#215170cc',
+                        contrast: '--colors-shades-700-color',
+                    },
+                },
+            },
+            tertiary: __assign({
+                color: '#292929',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#bbbbbb',
+                    contrast: '--colors-shades-700-color',
+                },
+            }, { 20: {
+                    color: '#d4d4d4',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#f1f1f1',
+                        contrast: '--colors-shades-700-color',
+                    },
+                }, 40: {
+                    color: '#a9a9a9',
+                    contrast: '--colors-shades-700-color',
+                    soft: {
+                        color: '#e4e4e4',
+                        contrast: '--colors-shades-700-color',
+                    },
+                }, 60: {
+                    color: '#7f7f7f',
+                    contrast: '--colors-shades-white-color',
+                    soft: {
+                        color: '#d6d6d6',
+                        contrast: '--colors-shades-700-color',
+                    },
+                }, 80: {
+                    color: '#545454',
+                    contrast: '--colors-shades-white-color',
+                    soft: {
+                        color: '#c9c9c9',
+                        contrast: '--colors-shades-700-color',
+                    },
+                } }),
+            gold: {
+                color: '#BFB26F',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#CCC485',
+                    contrast: '--colors-shades-white-color',
+                },
+            },
+            neutral: {
+                color: '#F7F4F2',
+                contrast: '#686872',
+            },
+            turquoise: {
+                color: '#83C6BD',
+                contrast: '--colors-shades-white-color',
+            },
+            mint: {
+                color: '#11444C',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#C5DCA3',
+                    contrast: '--colors-shades-700-color',
+                },
+            },
+            dardOceanBlue: {
+                color: '#215170',
+                contrast: '--colors-shades-white-color',
+                soft: {
+                    color: '#416970',
+                    contrast: '--colors-shades-700-color',
+                },
+            },
+            lightGray: {
+                color: '#F6F4F5',
+                contrast: '--colors-shades-700-color',
+            },
+        },
+        shades: {
+            black: { color: '#000', contrast: '--colors-shades-white-color' },
+            white: { color: '#fff', contrast: '--colors-shades-700-color' },
+            5: { color: '#fafafa', contrast: '--colors-shades-700-color' },
+            10: { color: '#f7f7f7', contrast: '--colors-shades-700-color' },
+            50: { color: '#efefef', contrast: '--colors-shades-700-color' },
+            100: { color: '#e5e5e5', contrast: '--colors-shades-700-color' },
+            150: { color: '#d1d1d1', contrast: '--colors-shades-700-color' },
+            175: { color: '#c4c4c4', contrast: '--colors-shades-700-color' },
+            200: { color: '#bbbbbb', contrast: '--colors-shades-700-color' },
+            250: { color: '#a6a6a6', contrast: '--colors-shades-700-color' },
+            300: { color: '#9e9e9e', contrast: '--colors-shades-700-color' },
+            350: { color: '#949494', contrast: '--colors-shades-white-color' },
+            400: { color: '#808080', contrast: '--colors-shades-white-color' },
+            450: { color: '#767676', contrast: '--colors-shades-white-color' },
+            500: { color: '#5a5a5a', contrast: '--colors-shades-white-color' },
+            550: { color: '#3a3a3a', contrast: '--colors-shades-white-color' },
+            600: { color: '#343434', contrast: '--colors-shades-white-color' },
+            650: { color: '#2d2d2d', contrast: '--colors-shades-white-color' },
+            700: { color: '#292929', contrast: '--colors-shades-white-color' },
+            750: { color: '#232323', contrast: '--colors-shades-white-color' },
+            800: { color: '#202020', contrast: '--colors-shades-white-color' },
+            850: { color: '#1b1b1b', contrast: '--colors-shades-white-color' },
+            900: { color: '#191919', contrast: '--colors-shades-white-color' },
+            950: { color: '#141414', contrast: '--colors-shades-white-color' },
+            990: { color: '#0b0b0b', contrast: '--colors-shades-white-color' },
+        },
+        semantic: {
+            positive: { color: '#2F806A', contrast: '--colors-shades-white-color' },
+            urgent: { color: '#D82A2D', contrast: '--colors-shades-white-color' },
+            attention: { color: '#F2D96F', contrast: '--colors-shades-700-color' },
+            informative: { color: '#0A609B', contrast: '--colors-shades-700-color' },
+        },
+        border: {
+            color: '',
+            disabled: '--colors-shades-200-color',
+            highlight: '#8BBEEA',
+            shadow: '#DAEEEB',
+        },
+        background: {
+            color: '--colors-shades-white-color',
+            disabled: '--colors-shades-50-color',
+        },
+        text: {
+            color: '--colors-shades-700-color',
+            disabled: '--colors-shades-250-color',
+        },
+    },
+    component: {
+        button: {
+            border: 'none',
+            borderRadius: '8px',
+            fontWeight: 700,
+            lineHeight: 'normal',
+            letterSpacing: 'normal',
+            minWidth: 'unset',
+            minHeight: 'unset',
+            size: {
+                small: {
+                    fontSize: '0.75rem',
+                    padding: '0.625rem 2rem',
+                },
+                medium: {
+                    fontSize: '14px',
+                    padding: '10px 36px',
+                },
+                large: {
+                    fontSize: '16px',
+                    padding: '14px 42px',
+                },
+            },
+            primary: {
+                active: {
+                    backgroundColor: '--colors-pallete-primary-color',
+                    color: '--colors-pallete-primary-contrast',
+                },
+                hover: {
+                    backgroundColor: '--colors-pallete-primary-soft-color',
+                    color: '--colors-pallete-primary-soft-contrast',
+                },
+            },
+            secondary: {
+                active: {
+                    backgroundColor: '--colors-pallete-secondary-color',
+                    color: '--colors-pallete-secondary-contrast',
+                },
+                hover: {
+                    backgroundColor: '--colors-pallete-tertiary-color',
+                    color: '--colors-pallete-tertiary-contrast',
+                },
+            },
+        },
+        input: {
+            background: '--colors-shades-white-color',
+            color: '--colors-shades-700-color',
+            placeholderColor: '--colors-shades-250-color',
+            borderRadius: '8px',
+            fontSize: '16px',
+            fontWeight: 400,
+            padding: '0.75rem 1.1rem',
+            lineHeight: '1.5rem',
+            border: '0.063rem solid var(--colors-shades-200-color)',
+            boxShadow: '0px 0px 0px 3px var(--colors-border-shadow)',
+            errorBorder: '0.09375rem solid #d3373c',
+        },
+        inputPlaceholder: {
+            fontSize: '0.875rem',
+            padding: '1.125rem 0.9375rem 0 0.9375rem',
+            focusBorder: '0.09375rem solid #1990c6',
+        },
+        inputCustom: {
+            button: {
+                borderRadius: '8px',
+            },
+            input: {
+                borderRadius: '24px 1rem 1rem 24px',
+            },
+        },
+        selector: {
+            size: {
+                small: {
+                    padding: '0.625rem 1.25rem',
+                    borderRadius: '0.5rem',
+                },
+                medium: {
+                    padding: '0.25rem 1rem',
+                    borderRadius: '0.375rem',
+                },
+            },
+            default: {
+                fontWeight: 600,
+                border: '0.063rem solid var(--colors-shades-250-color)',
+                background: '--colors-shades-white-color',
+                color: '--colors-shades-700-color',
+            },
+            hover: {
+                fontWeight: 600,
+                background: '--colors-shades-700-color',
+                border: 'none',
+                color: '--colors-shades-white-color',
+            },
+            noStock: {
+                fontWeight: 600,
+                background: 'transparent',
+                border: '1px solid #3a3a3a4d',
+                color: '#3a3a3a4d',
+            },
+            disabled: {
+                border: 'none',
+            },
+            fontSize: '0.75rem',
+        },
+        rating: {
+            fontWeight: 400,
+            size: {
+                xsmall: {
+                    fontSize: '0.625rem',
+                    lineHeight: '0.625rem',
+                },
+                small: {
+                    fontSize: '0.875rem',
+                    lineHeight: '0.875rem',
+                },
+                medium: {
+                    fontSize: '1rem',
+                    lineHeight: '1rem',
+                },
+                large: {
+                    fontSize: '1.125rem',
+                    lineHeight: '1.125rem',
+                },
+            },
+        },
+        stars: {
+            element: {
+                color: '#F2D96F',
+                xsmall: {
+                    width: '0.656rem',
+                    height: '0.656rem',
+                    marginRight: '0.156rem',
+                },
+                small: {
+                    width: '0.875rem',
+                    height: '0.875rem',
+                    marginRight: '0.25rem',
+                },
+                medium: {
+                    width: '1.375rem',
+                    height: '1.375rem',
+                    marginRight: '0.375rem',
+                },
+                large: {
+                    width: '2.375rem',
+                    height: '2.375rem',
+                    marginRight: '0.375rem',
+                },
+            },
+        },
+        card: {
+            borderRadius: '20px',
+            backgroundColor: '--colors-pallete-primary-color',
+        },
+        radio: {
+            borderColor: '--colors-pallete-primary-color',
+            background: '--colors-shades-white-color',
+            textSize: '16px',
+            lineHeight: 'normal',
+            size: {
+                large: {
+                    borderWidth: '0.094rem',
+                    margin: '0.5rem',
+                    height: '2.25rem',
+                    active: {
+                        borderWidth: '0.875rem',
+                    },
+                },
+                medium: {
+                    borderWidth: '0.094rem',
+                    margin: '0.375rem',
+                    height: '1.375rem',
+                    active: {
+                        borderWidth: '0.5rem',
+                    },
+                },
+                small: {
+                    borderWidth: '0.063rem',
+                    margin: '0.375rem',
+                    height: '0.875rem',
+                    active: {
+                        borderWidth: '0.313rem',
+                    },
+                },
+            },
+        },
+        label: {
+            color: '--colors-shades-400-color',
+            fontSize: {
+                small: '0.75rem',
+                medium: '0.75rem',
+                large: '0.875rem',
+            },
+            lineHeight: {
+                small: '1rem',
+                medium: '1rem',
+                large: '1.125rem',
+            },
+        },
+        checkbox: {
+            background: '--colors-shades-white-color',
+            borderColor: '--colors-shades-700-color',
+            active: {
+                background: '--colors-shades-700-color',
+            },
+            size: {
+                large: {
+                    width: '1.8rem',
+                    height: '1.8rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.6rem',
+                    icon: {
+                        width: '1.1rem',
+                        height: '0.8rem',
+                    },
+                },
+                medium: {
+                    width: '1.375rem',
+                    height: '1.375rem',
+                    borderRadius: '0.25rem',
+                    borderWidth: '0.094rem',
+                    margin: '0.438rem',
+                    icon: {
+                        width: '0.875rem',
+                        height: '0.625rem',
+                    },
+                },
+                small: {
+                    width: '0.875rem',
+                    height: '0.875rem',
+                    borderRadius: '0.125rem',
+                    borderWidth: '0.063rem',
+                    margin: '0.563rem',
+                    icon: {
+                        width: '0.5rem',
+                        height: '0.375rem',
+                    },
+                },
+            },
+        },
+        accordion: {
+            variant: {
+                box: {
+                    container: {
+                        border: '0.063rem solid',
+                        borderColor: '--colors-shades-100-color',
+                        borderRadius: '0.25rem',
+                        padding: '1.25rem 2rem',
+                    },
+                    summary: {
+                        fontWeight: 600,
+                        fontSize: '20px',
+                        lineHeight: '28px',
+                        color: '--colors-shades-700-color',
+                    },
+                    details: {
+                        margin: '10px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1.5,
+                        height: 1.5,
+                        color: '--colors-shades-700-color',
+                    },
+                },
+                simple: {
+                    container: {
+                        borderTop: '1px solid',
+                        borderColor: '--colors-shades-100-color',
+                        borderBottom: 'none',
+                        borderRadius: 'none',
+                        padding: '10px 0px',
+                    },
+                    summary: {
+                        fontWeight: 400,
+                        fontSize: '20px',
+                        lineHeight: '28px',
+                        color: '--colors-shades-700-color',
+                    },
+                    details: {
+                        margin: '10px 0px 0px 0px',
+                    },
+                    icon: {
+                        width: 1,
+                        height: 1,
+                        color: '--colors-shades-700-color',
+                    },
+                },
+            },
+        },
+        dropdown: {
+            borderRadius: '8px',
+            fontSize: '16px',
+            fontWeight: 400,
+            lineHeight: '1.125rem',
+            padding: '12px 24px',
+            optionPadding: '0.75rem 1.2rem',
+            color: '--colors-shades-700-color',
+            fill: '--colors-shades-700-color',
+            options: {
+                borderColor: '--colors-shades-700-color',
+                color: '--colors-shades-700-color',
+                borderRadius: '0.5rem',
+            },
+        },
+        modal: {
+            minWidth: '540px',
+        },
+        packSelector: {
+            borderRadius: '8px',
+            borderColor: '--colors-shades-100-color',
+            highlightColor: '--colors-pallete-creamy-soft-color',
+            selectedColor: '--colors-semantic-positive-color',
+            selectedContrast: '--colors-semantic-positive-contrast',
+            tagColor: '--colors-semantic-attention-color',
+        },
+        slideNavigation: {
+            slideDots: {
+                unselectedDotColor: '--colors-shades-700-color',
+                selectedDotColor: '--colors-shades-white-color',
+                dotsOpacity: 0.6,
+            },
+        },
+        beforeAfter: {
+            size: {
+                small: {
+                    image: {
+                        minHeight: 'auto',
+                        minWidth: '92px',
+                        mobile: {
+                            minHeight: '138px',
+                            minWidth: '128px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '214px',
+                        padding: '12px',
+                        mobile: {
+                            maxWidth: '286px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '12px',
+                        mobile: {
+                            fontSize: '12px',
+                        },
+                    },
+                },
+                medium: {
+                    image: {
+                        minHeight: '200px',
+                        minWidth: '187px',
+                        mobile: {
+                            minHeight: '157px',
+                            minWidth: '150px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '427px',
+                        padding: '18px',
+                        mobile: {
+                            maxWidth: '342px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '18px',
+                        mobile: {
+                            fontSize: '14px',
+                        },
+                    },
+                },
+                large: {
+                    image: {
+                        minHeight: '200px',
+                        minWidth: '187px',
+                        mobile: {
+                            minHeight: '157px',
+                            minWidth: '150px',
+                        },
+                    },
+                    imageContainer: {
+                        maxWidth: '427px',
+                        padding: '18px',
+                        mobile: {
+                            maxWidth: '342px',
+                        },
+                    },
+                    userInfoText: {
+                        fontSize: '18px',
+                        mobile: {
+                            fontSize: '14px',
+                        },
+                    },
+                },
+            },
+        },
+        total: {
+            basicTotal: {
+                amount: {
+                    color: '--colors-shades-550-color',
+                    fontSize: '24px',
+                },
+                currency: {
+                    color: '--colors-shades-550-color',
+                    fontSize: '14px',
+                    lineHeight: '22px',
+                    alignSelf: 'flex-end',
+                },
+                savings: {
+                    textFontSize: '14px',
+                    textLineHeight: '22px',
+                    amountFontSize: '18px',
+                    amountFontWeight: 700,
+                    amountLineHeight: '20px',
+                    color: '--colors-semantic-positive-color',
+                },
+            },
+        },
+        subTotal: {
+            basicSubTotal: {
+                family: 'Jost',
+                size: '16px',
+                weight: 700,
+                lineHeight: '20px',
+                color: '--colors-shades-550-color',
+            },
+        },
+        pricing: {
+            priceLabel: {
+                price: {
+                    size: ComponentSize.Medium,
+                    originalPriceColor: '--colors-shades-300-color',
+                    actualPriceColor: '--colors-semantic-urgent-color',
+                },
+            },
+        },
+        orderSummary: {
+            headingTextAlign: 'center',
+            backgroundColor: '--colors-shades-10-color',
+            padding: '20px',
+            borderRadius: '--radius-regular',
+            maxWidth: '',
+            onMobile: {
+                maxWidth: '100%',
+                padding: '15px',
+            },
+        },
+        expressCheckout: {
+            fontFamily: 'Avenir Next',
+            fontWeight: 600,
+            lineHeight: '22px',
+            button: {
+                borderRadius: '15px',
+            },
+        },
+        copyrightText: {
+            fontSize: '14px',
+            fontWeight: 400,
+            lineHeight: '22px',
+            color: '--colors-shades-400-color',
+        },
+        textButton: {
+            fontWeight: 500,
+            lineHeight: 'normal',
+        },
+        deliveryDetails: {
+            title: {
+                fontSize: '1.125rem',
+                lineHeight: '1.75rem',
+                weight: 700,
+            },
+            note: {
+                accentColor: '--colors-semantic-urgent-color',
+                color: '--colors-text-color',
+                backgroundColor: '--colors-pallete-primary-20-color',
+            },
+        },
+        text: {
+            orderHeader: {
+                color: '--colors-pallete-primary-color',
+            },
+        },
+        orderBar: {
+            backgroundColor: '--colors-pallete-primary-color',
+            fontColor: '--colors-shades-white-color',
+        },
+        banner: {
+            outlineColor: '--colors-pallete-mint-soft-color',
+            filledColor: '--colors-pallete-mint-soft-color',
+            fontColor: '--colors-shades-700-color',
+        },
+        offerTitleText: {
+            size: '16px',
+            weight: 700,
+            lineHeight: '22px',
+        },
+        linePrice: {
+            color: '#8BB948',
+            badge: {
+                color: '#CCC485',
+                borderRadius: '6px',
+            },
+        },
+        divider: {
+            color: '--colors-pallete-tertiary-soft-color',
+        },
+    },
+    typography: {
+        config: {
+            weight: {
+                heavy: 900,
+                bold: 700,
+                demi: 600,
+                regular: 400,
+            },
+        },
+        variants: {
+            hero1: {
+                fontSize: 76,
+                lineHeight: '92px',
+            },
+            hero2: {
+                fontSize: 72,
+                lineHeight: '88px',
+            },
+            hero3: {
+                fontSize: 68,
+                lineHeight: '84px',
+            },
+            display1: {
+                fontSize: 60,
+                lineHeight: '76px',
+            },
+            display2: {
+                fontSize: 52,
+                lineHeight: '68px',
+            },
+            heading1: {
+                fontSize: 44,
+                lineHeight: '56px',
+            },
+            heading2: {
+                fontSize: 40,
+                lineHeight: '52px',
+            },
+            heading3: {
+                fontSize: 36,
+                lineHeight: '44px',
+            },
+            heading4: {
+                fontSize: 28,
+                lineHeight: '36px',
+            },
+            heading5: {
+                fontSize: 24,
+                lineHeight: '32px',
+            },
+            heading6: {
+                fontSize: 18,
+                lineHeight: '22px',
+            },
+            heading7: {
+                fontSize: 20,
+                lineHeight: '28px',
+            },
+            heading8: {
+                fontSize: 18,
+                lineHeight: '28px',
+            },
+            'body-large': {
+                fontSize: 18,
+                lineHeight: '24px',
+            },
+            'body-regular': {
+                fontSize: 16,
+                lineHeight: '24px',
+            },
+            'body-small': {
+                fontSize: 14,
+                lineHeight: '22px',
+            },
+            'body-xsmall': {
+                fontSize: 12,
+                lineHeight: '20px',
+            },
+            'link-regular': {
+                fontSize: 16,
+                lineHeight: '24px',
+            },
+            'link-small': {
+                fontSize: 14,
+                lineHeight: '22px',
+            },
+            'pricing-large': {
+                fontSize: 28,
+                lineHeight: '32px',
+            },
+            'pricing-medium': {
+                fontSize: 18,
+                lineHeight: '24px',
+            },
+            'pricing-regular': {
+                fontSize: 16,
+                lineHeight: '22px',
+            },
+            'pricing-small': {
+                fontSize: 14,
+                lineHeight: '20px',
+            },
+            button: {
+                textTransform: 'uppercase',
+            },
+            'button-large': {
+                fontSize: 16,
+                lineHeight: '20px',
+            },
+            'button-regular': {
+                fontSize: 14,
+                lineHeight: '18px',
+            },
+            'button-small': {
+                fontSize: 12,
+                lineHeight: '16px',
+            },
+            'label-large': {
+                fontSize: 14,
+                lineHeight: '20px',
+            },
+            'label-regular': {
+                fontSize: 12,
+                lineHeight: '16px',
+            },
+            'label-small': {
+                fontSize: 10,
+                lineHeight: '14px',
+            },
+            'tag-regular': {
+                fontSize: 12,
+                lineHeight: '16px',
+            },
+            'tag-small': {
+                fontSize: 10,
+                lineHeight: '14px',
+            },
+            'tag-x-small': {
+                fontSize: 8,
+                lineHeight: '12px',
+            },
+        },
+    },
+    fonts: {
+        url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/fonts/tsd',
+        config: [
+            {
+                family: 'Poppins',
+                src: 'Poppins-Regular.ttf',
+                weight: 400,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-Italic.ttf',
+                style: 'italic',
+                weight: 400,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-Bold.ttf',
+                weight: 700,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-BoldItalic.ttf',
+                style: 'italic',
+                weight: 700,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-ExtraBold.ttf',
+                weight: 900,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-ExtraBoldItalic.ttf',
+                style: 'italic',
+                weight: 900,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-Medium.ttf',
+                weight: 500,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-MediumItalic.ttf',
+                style: 'italic',
+                weight: 500,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-SemiBold.ttf',
+                weight: 600,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-SemiBoldItalic.ttf',
+                style: 'italic',
+                weight: 600,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-Light.ttf',
+                weight: 300,
+            },
+            {
+                family: 'Poppins',
+                src: 'Poppins-LightItalic.ttf',
+                style: 'italic',
+                weight: 300,
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-Regular.ttf',
+                weight: 'normal',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-Black.ttf',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-BlackItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-Bold.ttf',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-BoldItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-ExtraBold.ttf',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-ExtraBoldItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-Italic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-Medium.ttf',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-MediumItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-SemiBold.ttf',
+            },
+            {
+                family: 'PlayfairDisplay',
+                src: 'PlayfairDisplay-SemiBoldItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'Montserrat',
+                src: 'Montserrat-Regular.ttf',
+            },
+            {
+                family: 'Montserrat',
+                src: 'Montserrat-Bold.ttf',
+            },
+            {
+                family: 'Montserrat',
+                src: 'Montserrat-BoldItalic.ttf',
+                style: 'italic',
+            },
+            {
+                family: 'Montserrat',
+                src: 'Montserrat-Light.ttf',
+            },
+            {
+                family: 'Montserrat',
+                src: 'Montserrat-LightItalic.ttf',
+            },
+        ],
+    },
+    assets: {
+        images: {
+            favicon: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_favicon.png',
+            logo: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
+            logoSize: {
+                width: '375',
+                height: '165',
+            },
+            logoMobile: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
+            checkoutLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo_checkout.png',
+                width: '421',
+                height: '82s',
+            },
+            upsellLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
+                width: '102',
+                height: '43',
+            },
+            tyLogo: {
+                url: 'https://cdn.jsdelivr.net/gh/trafilea/storefront-static@main/images/tsd/tsd_logo.svg',
+                width: '169',
+                height: '73',
+            },
+        },
+    },
+};
+
+module.exports = tsd;