"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.COLLAPSABLE = exports.CHECKBOX = exports.DRAWER = exports.INFOBOX = exports.TOOLTIP = exports.SELECT = exports.PAGE = exports.DATEPICKER = exports.INPUT = exports.BADGE = exports.TEXT = exports.BOX = exports.BUTTON = exports.ICON = exports.ICONS = exports.TYPOGRAPHY = exports.RADIUS = exports.SHADOW = exports.COLOR = exports.GAP = exports.MEDIA_QUERY = exports.BREAKPOINT = void 0;
const styled_components_1 = require("styled-components");
const polyIcons = __importStar(require("../icons"));
// Basics
exports.BREAKPOINT = {
    xs: 320,
    sm: 768,
    md: 900,
    lg: 1280,
    xl: 1920,
};
exports.MEDIA_QUERY = {
    xs: `@media (max-width: ${exports.BREAKPOINT.xs}px)`,
    sm: `@media (min-width: ${exports.BREAKPOINT.sm}px)`,
    md: `@media (min-width: ${exports.BREAKPOINT.md}px)`,
    lg: `@media (min-width: ${exports.BREAKPOINT.lg}px)`,
    xl: `@media (min-width: ${exports.BREAKPOINT.xl}px)`,
};
exports.GAP = {
    xs: '8px',
    s: '16px',
    m: '24px',
    l: '32px',
    xl: '40px',
    xxl: '48px',
    xxxl: '96px',
};
exports.COLOR = {
    light: '#FFFFFF',
    gray1: '#1E1E1E',
    gray2: '#565656',
    gray3: '#727272',
    gray4: '#8F8F8F',
    gray5: '#EBF0F7',
    gray6: '#F8F9FC',
    gray7: '#F0F0F0',
    brandBg: '#FAFDFF',
    brandMain: '#1348E4',
    brandMain2: '#6DC7F7',
    brandMain3: '#C0E3FF',
    brandMain4: '#DCEFFE',
    brandMain5: '#60D3CB',
    brandLighter: '#DCD3FF',
    brandLight: '#FAD1DC',
    brandLight2: '#F2EFFF',
    brandLightest: '#DCEFFE',
    brandDark: '#0024BD',
    brandDark2: '#170087',
    success: '#00AA5E',
    success2: '#D4F7E7',
    warning: '#EFC100',
    warning2: '#FBF3D0',
    warning3: '#E3A30C',
    danger: '#DB2C3E',
    danger2: '#FAE6E8',
    teal800: '#285E61',
    teal100: '#E6FFFA',
    cyan800: '#046C7C',
    cyan100: '#E6F9FE',
    indigo800: '#434190',
    indigo100: '#EBF4FF',
    orange800: '#B03C02',
    orange100: '#FFEAE1',
    purple800: '#553C9A',
    purple100: '#FAF5FF',
    plum800: '#4D0198',
    plum100: '#F2E6FF',
    pink800: '#97266D',
    pink100: '#FFEBF1',
    lime800: '#447803',
    lime100: '#F1FEE1',
    transparent: 'transparent',
    overlay: 'background: rgba(21, 41, 53, 0.3);',
    gradient: `linear-gradient(
    180.63deg,
    #DCEFFE 0.03%,
    rgba(220, 239, 254, 0) 79.96%
  )`,
};
exports.SHADOW = {
    xs: '0px 1px 3px rgba(21, 41, 53, 0.12), 0px 1px 2px rgba(21, 41, 53, 0.24)',
    s: '0px 2px 4px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(21, 41, 53, 0.12)',
    m: '0px 10px 20px rgba(21, 41, 53, 0.15), 0px 3px 6px rgba(21, 41, 53, 0.1)',
    l: '0px 15px 25px rgba(21, 41, 53, 0.15), 0px 5px 10px rgba(21, 41, 53, 0.05)',
    xl: '0px 20px 40px rgba(21, 41, 53, 0.1)',
};
exports.RADIUS = {
    s: '2px',
    m: '4px',
    l: '8px',
    xl: '16px',
};
exports.TYPOGRAPHY = {
    font: "'Inter', sans-serif",
    h1: {
        margin: `0 0 ${exports.GAP.l} 0`,
        lineHeight: '80px',
        fontWeight: 300,
        fontSize: '60px',
        color: exports.COLOR.gray1,
        letterSpacing: '-1px',
    },
    h2: {
        margin: `0 0 ${exports.GAP.m} 0`,
        lineHeight: '66px',
        fontWeight: 400,
        fontSize: '48px',
        color: exports.COLOR.gray1,
        letterSpacing: '-0.5px',
    },
    h3: {
        margin: `0 0 ${exports.GAP.m} 0`,
        lineHeight: '47px',
        fontWeight: 500,
        fontSize: '34px',
        color: exports.COLOR.gray1,
        letterSpacing: '-0.25px',
    },
    h4: {
        margin: `0 0 ${exports.GAP.m} 0`,
        lineHeight: '34px',
        fontWeight: 500,
        fontSize: '24px',
        color: exports.COLOR.gray1,
    },
    h5: {
        margin: `0 0 ${exports.GAP.s} 0`,
        lineHeight: '29px',
        fontWeight: 500,
        fontSize: '20px',
        color: exports.COLOR.gray1,
        letterSpacing: '0.15px',
    },
    h6: {
        margin: `0 0 ${exports.GAP.s} 0`,
        lineHeight: '27px',
        fontWeight: 400,
        fontSize: '18px',
        color: exports.COLOR.gray1,
    },
    b1m: {
        fontWeight: 500,
        fontSize: '16px',
        lineHeight: '27px',
        color: exports.COLOR.gray1,
    },
    b1: {
        fontWeight: 400,
        fontSize: '16px',
        lineHeight: '27px',
        color: exports.COLOR.gray1,
    },
    b2m: {
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: '24px',
        color: exports.COLOR.gray1,
    },
    b2: {
        fontWeight: 400,
        fontSize: '14px',
        lineHeight: '24px',
        color: exports.COLOR.gray1,
    },
    b3m: {
        fontWeight: 500,
        fontSize: '12px',
        lineHeight: '19px',
        color: exports.COLOR.gray1,
    },
    b3: {
        fontWeight: 400,
        fontSize: '12px',
        lineHeight: '19px',
        color: exports.COLOR.gray1,
    },
    c1: {
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: '20px',
        color: exports.COLOR.gray1,
        letterSpacing: '0.5px',
    },
    c2: {
        fontWeight: 500,
        fontSize: '12px',
        lineHeight: '15px',
        color: exports.COLOR.gray1,
        letterSpacing: '0.4px',
    },
    btn: {
        fontWeight: 500,
        fontSize: '14px',
        lineHeight: '16px',
        color: exports.COLOR.gray1,
        letterSpacing: '0.75px',
    },
    tn: {
        fontWeight: 400,
        fontSize: '14px',
        lineHeight: '17px',
        color: exports.COLOR.gray1,
        letterSpacing: '0.75px',
    },
    code: {
        fontFamily: 'monospace',
        fontWeight: 400,
        fontSize: '12px',
        lineHeight: '19px',
        color: exports.COLOR.gray1,
    },
};
exports.ICONS = Object.assign({}, polyIcons);
// Components
exports.ICON = {
    basic: {
        fill: exports.COLOR.brandMain,
    },
    circle: {
        fill: exports.COLOR.brandMain,
        backgroundColor: exports.COLOR.brandLightest,
        borderRadius: '50%',
    },
};
exports.BUTTON = {
    primary: Object.assign(Object.assign({}, exports.TYPOGRAPHY.btn), { color: exports.COLOR.light, background: exports.COLOR.brandMain, border: 0, borderRadius: exports.RADIUS.l, boxShadow: exports.SHADOW.s, transition: 'all 0.3s', cursor: 'pointer', '&:hover': {
            background: exports.COLOR.brandDark,
        }, '&:active': {
            background: exports.COLOR.brandDark2,
        }, '&:disabled': {
            color: exports.COLOR.gray3,
            background: exports.COLOR.gray5,
            cursor: 'no-drop',
        } }),
    secondary: Object.assign(Object.assign({}, exports.TYPOGRAPHY.btn), { color: exports.COLOR.gray1, background: exports.COLOR.gray5, border: 0, borderRadius: exports.RADIUS.l, transition: 'all 0.3s', cursor: 'pointer', '&:hover': {
            color: exports.COLOR.brandMain,
            background: exports.COLOR.brandLightest,
        }, '&:active': {
            color: exports.COLOR.brandMain,
            background: exports.COLOR.brandLight2,
        }, '&:disabled': {
            color: exports.COLOR.gray3,
            background: exports.COLOR.gray5,
            cursor: 'no-drop',
        } }),
    tertiary: Object.assign(Object.assign({}, exports.TYPOGRAPHY.btn), { color: exports.COLOR.gray1, background: 'transparent', border: 0, borderRadius: exports.RADIUS.l, transition: 'all 0.3s', cursor: 'pointer', '&:hover': {
            background: exports.COLOR.gray5,
        }, '&:active': {
            background: exports.COLOR.gray4,
        }, '&:disabled': {
            color: exports.COLOR.gray3,
            cursor: 'no-drop',
        } }),
    inline: {
        display: 'inline',
        margin: 0,
        padding: 0,
        border: 0,
        borderRadius: 0,
        lineHeight: 'inherit',
        fontWeight: 'inherit',
        fontSize: 'inherit',
        letterSpacing: 'inherit',
        color: 'inherit',
        background: 'transparent',
        cursor: 'pointer',
    },
    special: {},
};
exports.BOX = {
    raw: {},
    basic: {
        padding: exports.GAP.m,
        backgroundColor: exports.COLOR.light,
    },
    border: {
        padding: exports.GAP.m,
        backgroundColor: exports.COLOR.light,
        border: `1px solid ${exports.COLOR.gray3}`,
        borderRadius: exports.RADIUS.m,
    },
    shadow: {
        padding: exports.GAP.m,
        backgroundColor: exports.COLOR.light,
        borderRadius: exports.RADIUS.m,
        boxShadow: exports.SHADOW.s,
    },
};
exports.TEXT = {
    p: {
        margin: `0 0 ${exports.GAP.s} 0`,
        lineHeight: '27px',
        fontWeight: 'inherit',
        fontSize: 'inherit',
        color: exports.COLOR.gray2,
    },
    span: {
        lineHeight: 'inherit',
        fontWeight: 'inherit',
        fontSize: 'inherit',
        color: 'inherit',
    },
    label: {
        lineHeight: 'inherit',
        fontWeight: 'inherit',
        fontSize: 'inherit',
        color: 'inherit',
    },
};
exports.BADGE = {
    basic: Object.assign(Object.assign({}, exports.TYPOGRAPHY.b3m), { color: exports.COLOR.brandMain, backgroundColor: exports.COLOR.brandLightest, borderRadius: '100px' }),
    success: Object.assign(Object.assign({}, exports.TYPOGRAPHY.b3m), { color: exports.COLOR.success, backgroundColor: exports.COLOR.success2, borderRadius: '100px' }),
    warning: Object.assign(Object.assign({}, exports.TYPOGRAPHY.b3m), { color: exports.COLOR.warning, backgroundColor: exports.COLOR.warning2, borderRadius: '100px' }),
    danger: Object.assign(Object.assign({}, exports.TYPOGRAPHY.b3m), { color: exports.COLOR.danger, backgroundColor: exports.COLOR.danger2, borderRadius: '100px' }),
};
exports.INPUT = {
    padding: `0 ${exports.GAP.s}`,
    lineHeight: '40px',
    fontWeight: 'inherit',
    fontSize: 'inherit',
    color: exports.COLOR.gray1,
    border: `1px solid ${exports.COLOR.gray3}`,
    borderRadius: exports.RADIUS.s,
    transition: 'all 0.3s',
    backgroundColor: exports.COLOR.light,
    '&:focus': {
        borderColor: exports.COLOR.brandMain,
    },
    '&:disabled': {
        borderColor: exports.COLOR.gray5,
        backgroundColor: exports.COLOR.gray5,
    },
};
exports.DATEPICKER = {
    padding: exports.GAP.s,
    backgroundColor: exports.COLOR.light,
    border: `1px solid ${exports.COLOR.gray4}`,
    borderRadius: exports.RADIUS.l,
    boxShadow: exports.SHADOW.m,
    lineHeight: 'normal',
    '.DayPicker': {
        '&-wrapper': {
            margin: 0,
            padding: 0,
        },
        '&-NavButton': {
            margin: 0,
            padding: 0,
            backgroundImage: 'none',
            borderStyle: 'solid',
            borderWidth: '2px 2px 0 0',
            height: '7px',
            width: '7px',
            color: exports.COLOR.gray2,
            top: '20px',
            right: '10px',
            transform: 'rotate(45deg)',
            '&--prev': {
                right: '50px',
                transform: 'rotate(-135deg)',
            },
        },
        '&-Month': {
            margin: 0,
        },
        '&-Caption': Object.assign(Object.assign({}, exports.TYPOGRAPHY.b3), { color: exports.COLOR.gray2, paddingTop: '15px', marginBottom: '20px' }),
        '&-Day': Object.assign(Object.assign({ margin: 0, padding: 0, borderRadius: 0, width: '20px' }, exports.TYPOGRAPHY.b3), { color: exports.COLOR.gray1, lineHeight: '30px', '&--selected': {
                backgroundColor: exports.COLOR.brandMain,
            }, '&--disabled': {
                color: exports.COLOR.gray4,
            }, '&--outside': {
                color: exports.COLOR.gray2,
            } }),
    },
};
exports.PAGE = {
    padding: '0 124px',
    maxWidth: '1600px',
    minHeight: '70vh',
};
exports.SELECT = {
    container: (styles) => (Object.assign(Object.assign({}, styles), { minWidth: '112px' })),
    control: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { backgroundColor: exports.COLOR.light, borderRadius: exports.RADIUS.m, borderColor: exports.COLOR.gray3 }), (state.isFocused
        ? {
            borderColor: exports.COLOR.brandMain,
            '&:hover': {
                borderColor: exports.COLOR.brandMain,
            },
        }
        : {})), { cursor: 'pointer' })),
    valueContainer: (styles) => (Object.assign(Object.assign({}, styles), exports.TYPOGRAPHY.b2)),
    menu: (styles) => (Object.assign(Object.assign({}, styles), { backgroundColor: exports.COLOR.light, boxShadow: exports.SHADOW.s })),
    menuPortal: (styles) => (Object.assign(Object.assign({}, styles), { zIndex: 1000 })),
    option: (styles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, styles), { color: exports.COLOR.gray1 }), (state.isSelected
        ? {
            color: exports.COLOR.gray1,
            backgroundColor: exports.COLOR.gray5,
        }
        : {})), { '&:hover': {
            color: exports.COLOR.gray1,
            backgroundColor: exports.COLOR.brandLightest,
        }, cursor: 'pointer' })),
};
const tooltipArrowSize = 8;
exports.TOOLTIP = (0, styled_components_1.createGlobalStyle) `
  .tippy-box {
    padding: 4px ${exports.GAP.s};
    color: ${exports.COLOR.light};
    background-color: ${exports.COLOR.gray1};
    box-shadow: ${exports.SHADOW.xs};
    border-radius: ${exports.RADIUS.s};
    z-index: 1;
  }
  .tippy-box[data-placement^="top"] > .tippy-arrow {
      bottom: 0;
  }
  .tippy-box[data-placement^="top"] > .tippy-arrow::before {
      bottom: -7px;
      left: 0;
      border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px 0;
      border-top-color: initial;
      transform-origin: center top;
  }
  .tippy-box[data-placement^="bottom"] > .tippy-arrow {
      top: 0;
  }
  .tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
      top: -7px;
      left: 0;
      border-width: 0 ${tooltipArrowSize}px ${tooltipArrowSize}px;
      border-bottom-color: initial;
      transform-origin: center bottom;
  }
  .tippy-box[data-placement^="left"] > .tippy-arrow {
      right: 0;
  }
  .tippy-box[data-placement^="left"] > .tippy-arrow::before {
      border-width: ${tooltipArrowSize}px 0 ${tooltipArrowSize}px ${tooltipArrowSize}px;
      border-left-color: initial;
      right: -7px;
      transform-origin: center left;
  }
  .tippy-box[data-placement^="right"] > .tippy-arrow {
      left: 0;
  }
  .tippy-box[data-placement^="right"] > .tippy-arrow::before {
      left: -7px;
      border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px ${tooltipArrowSize}px 0;
      border-right-color: initial;
      transform-origin: center right;
  }
  .tippy-box[data-inertia][data-state="visible"] {
      transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  }
  .tippy-arrow {
      width: ${tooltipArrowSize * 2}px;
      height: ${tooltipArrowSize * 2}px;
      color: ${exports.COLOR.gray1};
  }
  .tippy-arrow::before {
      content: "";
      position: absolute;
      border-color: transparent;
      border-style: solid;
  }
`;
exports.INFOBOX = {
    basic: {
        minWidth: '240px',
        display: 'inline-block',
        padding: exports.GAP.s,
        border: `2px solid #F0F0F0`,
        sizing: 'border-box',
        borderRadius: exports.RADIUS.l,
        fontSize: '14px',
        fontWeight: 400,
        a: { color: exports.COLOR.brandMain },
    },
    compact: {
        minWidth: '240px',
        display: 'inline-block',
        padding: `0 ${exports.GAP.xs}`,
        borderLeft: `2px solid ${exports.COLOR.brandMain}`,
        fontSize: '14px',
        fontWeight: 400,
        a: { color: exports.COLOR.brandMain },
    },
};
exports.DRAWER = {
    basic: {
        margin: 0,
        padding: exports.GAP.l,
        width: 500,
        backgroundColor: exports.COLOR.light,
        boxShadow: exports.SHADOW.xl,
        transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)',
    },
    raw: {
        margin: 0,
        padding: exports.GAP.l,
        width: 500,
        transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)',
    },
};
exports.CHECKBOX = {
    basic: {
        color: exports.COLOR.gray1,
        fontSize: '16px',
        // the icon color manipulation
        // svg: {
        //   path: {
        //     fill: 'red !important',
        //   },
        // },
    },
    labelMargin: {
        margin: '0 0 0 10px',
    },
};
exports.COLLAPSABLE = {
    iconVariants: {
        default: {
            iconColor: {
                open: 'brandMain',
                closed: 'gray.3',
            },
            bgColor: {
                open: 'brandLightest',
                closed: 'gray.4',
            },
        },
        transparent: {
            iconColor: {
                open: 'brandMain',
                closed: 'gray.3',
            },
            bgColor: {
                open: 'transparent',
                closed: 'transparent',
            },
        },
    },
    iconColor: {
        isOpen: 'brandMain',
        notOpen: 'gray.3',
    },
    iconBgColor: {
        isOpen: 'brandLightest',
        notOpen: 'gray.4',
    },
    basic: {
        color: exports.COLOR.gray1,
        fontSize: '16px',
        // the icon color manipulation
        // svg: {
        //   path: {
        //     fill: 'red !important',
        //   },
        // },
    },
};
//# sourceMappingURL=blue.js.map