design-system-simplefi/build/index.es.js

Design System for SimpleFi Applications

import { _ as __makeTemplateObject, p as pxToRem, a as __assign, c as createSpacings, b as createPadding, P as PaddingTypes, S as SpaceSizes, g as getSpace, d as __rest, e as getColor, f as getFontFamily, h as getFontWeight, i as createMarginSpacing, j as getLineHeight, k as getFontSize, l as getButtonColor, m as createPaddingSpacing, n as getBorderRadius, o as getLinkStyle, q as __spreadArray, s as shortenAddress } from './space-21d89029.js';
export { r as PadboxEnums, S as SpaceSizes, w as abbreviateNumber, t as constants, i as createMarginSpacing, b as createPadding, m as createPaddingSpacing, u as createSpacing, c as createSpacings, n as getBorderRadius, l as getButtonColor, e as getColor, v as getDepth, f as getFontFamily, k as getFontSize, h as getFontWeight, j as getLineHeight, o as getLinkStyle, g as getSpace, p as pxToRem, s as shortenAddress } from './space-21d89029.js';
import styled, { keyframes, css } from 'styled-components';
import React, { useCallback, useContext, useState, useEffect, useRef } from 'react';
import { Flex, Box } from 'reflexbox';
import { pipe, path, prop, includes, unless, flip, when, always, pick, sortBy, identity, isEmpty } from 'ramda';
import PropTypes from 'prop-types';
import { isNotUndefined, isNumber, isString, isTrue, isNull, isNotNull, noop, isFalsy } from 'ramda-adjunct';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { findIconDefinition } from '@fortawesome/fontawesome-svg-core';
import { S as SFIIconsNames, I as IconTypes, C as ColorTypes, D as DSContext, t as theme, c as colors } from './createIconLibrary-1712c22a.js';
export { C as ColorTypes, a as DSProvider, G as GlobalStyles, i as IconEnums, b as createIconLibrary, r as resetIconLibrary, t as theme } from './createIconLibrary-1712c22a.js';
import usePortal from 'react-cool-portal';
import { transparentize } from 'polished';
import debounce from 'lodash.debounce';
import Blockies from 'react-blockies';
import { isAddress } from 'web3-utils';
import { Cell, ResponsiveContainer, PieChart, Pie, Tooltip as Tooltip$1, Bar, BarChart, ReferenceLine, XAxis, YAxis, CartesianGrid, Area, AreaChart } from 'recharts';
import { scalePow } from 'd3-scale';
import 'numeral';

var Container$1 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  margin: 0 auto;\n  width: ", ";\n"], ["\n  margin: 0 auto;\n  width: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return pxToRem(theme.layout.containerWidth);
});
var templateObject_1$I;

var getRowMargin = pipe(path(['theme', 'layout', 'columnGutter']), function (gutter) { return (gutter / 2) * -1; }, pxToRem);
var StyledRow = styled(Flex).attrs(function (props) { return (__assign({ mx: getRowMargin(props) }, props)); })(templateObject_1$H || (templateObject_1$H = __makeTemplateObject([""], [""])));
var Row = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledRow, { flexWrap: "wrap" }, children));
};
var templateObject_1$H;

var getColWidth = function (cols) {
    if (cols === 'auto')
        return { flex: '1 1 auto' };
    return { width: cols / 12 };
};
var getColPadding = pipe(path(['theme', 'layout', 'columnGutter']), function (gutter) { return gutter / 2; }, pxToRem);
var StyledCol = styled(Box)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), getColPadding, getColPadding);
var Col = function (_a) {
    var children = _a.children, cols = _a.cols, offset = _a.offset;
    return (React.createElement(StyledCol, __assign({ ml: (100 / 12) * offset + "%" }, getColWidth(cols)), children));
};
Col.propTypes = {
    cols: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.oneOf(['auto']),
    ]),
    offset: PropTypes.number,
};
Col.defaultProps = {
    cols: 'auto',
    offset: 0,
};
var templateObject_1$G;

var FlexContainer = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  justify-content: ", ";\n  flex-direction: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  flex-wrap: ", ";\n  ", ";\n"], ["\n  display: flex;\n  align-items: ", ";\n  justify-content: ", ";\n  flex-direction: ", ";\n  flex-grow: ", ";\n  flex-shrink: ", ";\n  flex-wrap: ", ";\n  ", ";\n"])), prop('alignItems'), prop('justifyContent'), prop('flexDirection'), prop('flexGrow'), prop('flexShrink'), prop('flexWrap'), createSpacings);
FlexContainer.propTypes = {
    alignItems: PropTypes.oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'revert',
        'unset',
        'center',
        'end',
        'flex-end',
        'flex-start',
        'self-end',
        'self-start',
        'start',
        'baseline',
        'normal',
        'stretch',
    ]),
    justifyContent: PropTypes.oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'revert',
        'unset',
        'center',
        'end',
        'flex-end',
        'flex-start',
        'start',
        'normal',
        'stretch',
        'space-around',
        'space-between',
        'space-evenly',
        'left',
        'right',
    ]),
    flexDirection: PropTypes.oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'unset',
        'revert',
        'column',
        'column-reverse',
        'row',
        'row-reverse',
    ]),
    flexGrow: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.oneOf(['inherit', '-moz-initial', 'initial', 'revert', 'unset']),
    ]),
    flexShrink: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.oneOf(['inherit', '-moz-initial', 'initial', 'revert', 'unset']),
    ]),
    flexWrap: PropTypes.oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'revert',
        'unset',
        'nowrap',
        'wrap',
        'wrap-reverse',
    ]),
};
var templateObject_1$F;

var Padbox = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  box-sizing: border-box;\n  ", ";\n"], ["\n  box-sizing: border-box;\n  ", ";\n"])), createPadding);
Padbox.propTypes = {
    paddingType: PropTypes.oneOf(Object.values(PaddingTypes)),
    paddingSize: PropTypes.oneOf(Object.values(SpaceSizes)),
};
Padbox.defaultProps = {
    paddingType: PaddingTypes.square,
    paddingSize: SpaceSizes.none,
};
var templateObject_1$E;

var AlignItemsPropType = PropTypes.oneOf([
    'inherit',
    '-moz-initial',
    'initial',
    'revert',
    'unset',
    'center',
    'end',
    'flex-end',
    'flex-start',
    'self-end',
    'self-start',
    'start',
    'baseline',
    'normal',
    'stretch',
]);
var JustifyContentPropType = PropTypes.oneOf([
    'inherit',
    '-moz-initial',
    'initial',
    'revert',
    'unset',
    'center',
    'end',
    'flex-end',
    'flex-start',
    'start',
    'normal',
    'stretch',
    'space-around',
    'space-between',
    'space-evenly',
    'left',
    'right',
]);

var Stack = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: ", ";\n  justify-content: flex-start;\n\n  /* FIXME: Until we remove 'margin' property from other components we need to\n    increase specificity of those nesting , since it can be overriden by inner\n    elements with the same specificity. This can lead to inconsistent output\n    of visual test if styled-components puts CSS in different order into Head. */\n  ", " * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  ", " * + * {\n    margin-top: ", ";\n  }\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: ", ";\n  justify-content: flex-start;\n\n  /* FIXME: Until we remove 'margin' property from other components we need to\n    increase specificity of those nesting , since it can be overriden by inner\n    elements with the same specificity. This can lead to inconsistent output\n    of visual test if styled-components puts CSS in different order into Head. */\n  ", " * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  ", " * + * {\n    margin-top: ", ";\n  }\n\n  ", "\n"])), prop('justify'), function (_a) {
    var isRecursive = _a.isRecursive;
    return (isRecursive ? '&&' : '&& >');
}, function (_a) {
    var isRecursive = _a.isRecursive;
    return (isRecursive ? '&&' : '&& >');
}, function (_a) {
    var gap = _a.gap, theme = _a.theme;
    return getSpace(gap, { theme: theme });
}, function (_a) {
    var splitAt = _a.splitAt;
    return isNotUndefined(splitAt) &&
        "\n    :only-child {\n      height: 100%;\n    }\n\n    > :nth-child(" + splitAt + ") {\n      margin-bottom: auto;\n    }\n  ";
});
Stack.propTypes = {
    gap: PropTypes.oneOf(Object.values(SpaceSizes)),
    justify: AlignItemsPropType,
    splitAt: PropTypes.number,
    isRecursive: PropTypes.bool,
};
Stack.defaultProps = {
    gap: SpaceSizes.none,
    justify: 'stretch',
    isRecursive: false,
};
var templateObject_1$D;

var StretchEnum = {
    start: 'start',
    end: 'end',
    all: 'all',
};

var Inline_enums = /*#__PURE__*/Object.freeze({
  __proto__: null,
  StretchEnum: StretchEnum
});

var getStretchStyle = function (stretch) {
    if (isNumber(stretch)) {
        return "\n      > :nth-child(" + stretch + ") { flex: 1 1 0%; }\n    ";
    }
    switch (stretch) {
        case 'start':
            return "\n        > :first-child { flex: 1 1 0%; }\n      ";
        case 'end':
            return "\n        > :last-child { flex: 1 1 0%; }\n      ";
        case 'all':
            return "\n        > * { flex: 1 1 0%; }\n      ";
        default:
            return null;
    }
};
var Inline = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: ", ";\n  align-items: ", ";\n\n  ", "\n\n  /* FIXME: Until we remove 'margin' property from other components we need to\n    increase specificity of those nesting , since it can be overriden by inner\n    elements with the same specificity. This can lead to inconsistent output\n    of visual test if styled-components puts CSS in different order into Head. */\n  && > * {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  && > * + * {\n    margin-left: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: ", ";\n  align-items: ", ";\n\n  ", "\n\n  /* FIXME: Until we remove 'margin' property from other components we need to\n    increase specificity of those nesting , since it can be overriden by inner\n    elements with the same specificity. This can lead to inconsistent output\n    of visual test if styled-components puts CSS in different order into Head. */\n  && > * {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  && > * + * {\n    margin-left: ", ";\n  }\n"])), prop('justify'), prop('align'), function (_a) {
    var stretch = _a.stretch;
    return isNotUndefined(stretch) && getStretchStyle(stretch);
}, function (_a) {
    var gap = _a.gap, theme = _a.theme;
    return getSpace(gap, { theme: theme });
});
Inline.propTypes = {
    align: AlignItemsPropType,
    justify: JustifyContentPropType,
    gap: PropTypes.oneOf(Object.values(SpaceSizes)),
    stretch: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.oneOf(Object.values(StretchEnum)),
    ]),
};
Inline.defaultProps = {
    gap: SpaceSizes.none,
};
var templateObject_1$C;

var ClusterWrapper = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
var ClusterParent = styled.div(function (_a) {
    var $gap = _a.$gap, $justify = _a.$justify, $align = _a.$align, theme = _a.theme;
    var gapSize = getSpace($gap, { theme: theme });
    return "\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: " + $justify + ";\n      align-items: " + $align + ";\n      margin: calc(" + gapSize + " / -2);\n\n      & > * {\n        margin: calc(" + gapSize + " / 2);\n      }\n    ";
});
var Cluster = function (_a) {
    var children = _a.children, gap = _a.gap, align = _a.align, justify = _a.justify, parentEl = _a.parentEl, wrapperEl = _a.wrapperEl, props = __rest(_a, ["children", "gap", "align", "justify", "parentEl", "wrapperEl"]);
    return (React.createElement(ClusterWrapper, { as: wrapperEl },
        React.createElement(ClusterParent, __assign({ "$align": align, "$gap": gap, "$justify": justify, as: parentEl }, props), children)));
};
Cluster.propTypes = {
    gap: PropTypes.oneOf(Object.values(SpaceSizes)),
    align: AlignItemsPropType,
    justify: JustifyContentPropType,
    wrapperEl: PropTypes.elementType,
    parentEl: PropTypes.elementType,
};
Cluster.defaultProps = {
    gap: SpaceSizes.none,
};
var templateObject_1$B;

var GridWrapper = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
var GridParent = styled.div(function (_a) {
    var $cols = _a.$cols, $gap = _a.$gap, $align = _a.$align, theme = _a.theme;
    var gapSize = getSpace($gap, { theme: theme });
    return "\n      display: flex;\n      flex-wrap: wrap;\n      align-items: " + $align + ";\n      margin: calc(" + gapSize + " / -2);\n\n      & > * {\n        width: calc(" + 100 / $cols + "% - " + gapSize + ");\n        margin: calc(" + gapSize + " / 2);\n      }\n    ";
});
var Grid = function (_a) {
    var children = _a.children, gap = _a.gap, align = _a.align, cols = _a.cols, parentEl = _a.parentEl, wrapperEl = _a.wrapperEl, props = __rest(_a, ["children", "gap", "align", "cols", "parentEl", "wrapperEl"]);
    return (React.createElement(GridWrapper, { as: wrapperEl },
        React.createElement(GridParent, __assign({ "$align": align, "$cols": cols, "$gap": gap, as: parentEl }, props), children)));
};
Grid.propTypes = {
    gap: PropTypes.oneOf(Object.values(SpaceSizes)),
    cols: PropTypes.number,
    align: AlignItemsPropType,
    wrapperEl: PropTypes.elementType,
    parentEl: PropTypes.elementType,
};
Grid.defaultProps = {
    gap: SpaceSizes.none,
    cols: 6,
};
var templateObject_1$A;

var Center = styled.div.withConfig({
    shouldForwardProp: function (prop) {
        return !includes(prop, [
            'maxWidth',
            'gutters',
            'areChildrenCentered',
            'isTextCentered',
        ]);
    },
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  box-sizing: content-box;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", ";\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
    var maxWidth = _a.maxWidth, theme = _a.theme;
    return pxToRem(isNotUndefined(maxWidth) ? maxWidth : theme.layout.containerWidth);
}, function (_a) {
    var gutters = _a.gutters, theme = _a.theme;
    var size = getSpace(gutters, { theme: theme });
    return "\n      padding-left: " + size + ";\n      padding-right: " + size + ";\n    ";
}, function (_a) {
    var areChildrenCentered = _a.areChildrenCentered;
    return areChildrenCentered &&
        "\n    display:flex;\n    flex-direction: column;\n    align-items: center;\n  ";
}, function (_a) {
    var isTextCentered = _a.isTextCentered;
    return isTextCentered && "text-align: center;";
});
Center.propTypes = {
    maxWidth: PropTypes.number,
    gutters: PropTypes.oneOf(Object.values(SpaceSizes)),
    areChildrenCentered: PropTypes.bool,
    isTextCentered: PropTypes.bool,
};
Center.defaultProps = {
    gutters: SpaceSizes.none,
    areChildrenCentered: false,
    isTextCentered: false,
};
var templateObject_1$z;

var SpacingSizeValuePropType = PropTypes.oneOfType([
    PropTypes.oneOf(['none']),
    PropTypes.number.isRequired,
    PropTypes.exact({
        vertical: PropTypes.number,
        horizontal: PropTypes.number,
        top: PropTypes.number,
        bottom: PropTypes.number,
        left: PropTypes.number,
        right: PropTypes.number,
    }).isRequired,
]);

var StyledIcon$4 = styled(FontAwesomeIcon)(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  color: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  ", ";\n"])), function (_a) {
    var color = _a.color, theme = _a.theme;
    return isNotUndefined(color) ? getColor(color, { theme: theme }) : 'inherit';
}, createSpacings);
var Icon = function (_a) {
    var name = _a.name, _b = _a.type, type = _b === void 0 ? IconTypes.sfi : _b, color = _a.color, _c = _a.className, className = _c === void 0 ? '' : _c, hovercolor = _a.hovercolor, _d = _a.hasFixedWidth, hasFixedWidth = _d === void 0 ? false : _d, props = __rest(_a, ["name", "type", "color", "className", "hovercolor", "hasFixedWidth"]);
    return (React.createElement(StyledIcon$4, __assign({ className: className, color: color, fixedWidth: hasFixedWidth, hovercolor: hovercolor, icon: findIconDefinition({
            iconName: name,
            prefix: type,
        }) }, props)));
};
Icon.propTypes = {
    name: PropTypes.oneOfType([
        PropTypes.oneOf(Object.values(SFIIconsNames)),
        PropTypes.string,
    ]).isRequired,
    type: PropTypes.oneOfType([
        PropTypes.oneOf(Object.values(IconTypes)),
        PropTypes.string,
    ]),
    color: PropTypes.oneOf(Object.values(ColorTypes)),
    className: PropTypes.string,
    hasFixedWidth: PropTypes.bool,
    margin: SpacingSizeValuePropType,
    padding: SpacingSizeValuePropType,
};
var templateObject_1$y;

var ButtonVariants = {
    solid: 'solid',
    outline: 'outline',
    text: 'text',
};
var ButtonColors = {
    primary: 'primary',
    secondary: 'secondary',
    danger: 'danger',
};
var ButtonSizes = {
    xl: 'xl',
    lg: 'lg',
    md: 'md',
    sm: 'sm',
};

var Button_enums = /*#__PURE__*/Object.freeze({
  __proto__: null,
  ButtonVariants: ButtonVariants,
  ButtonColors: ButtonColors,
  ButtonSizes: ButtonSizes
});

var spin = keyframes(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
var getHorizontalMargin = pipe(prop('horizontalMargin'), unless(isString, pxToRem));
var Spinner = styled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  animation: ", " 1s infinite linear;\n  border: solid rgba(255, 255, 255, 0.2);\n  border-width: ", ";\n  border-top-color: rgb(255, 255, 255);\n\n  ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  animation: ", " 1s infinite linear;\n  border: solid rgba(255, 255, 255, 0.2);\n  border-width: ", ";\n  border-top-color: rgb(255, 255, 255);\n\n  ", ";\n"])), function (_a) {
    var verticalMargin = _a.verticalMargin;
    return pxToRem(verticalMargin);
}, function (_a) {
    var verticalMargin = _a.verticalMargin;
    return pxToRem(verticalMargin);
}, getHorizontalMargin, getHorizontalMargin, function (_a) {
    var width = _a.width;
    return pxToRem(width);
}, function (_a) {
    var height = _a.height;
    return pxToRem(height);
}, spin, function (_a) {
    var borderWidth = _a.borderWidth;
    return borderWidth + "px";
}, function (_a) {
    var colorPalette = _a.colorPalette;
    return colorPalette && css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n      border-color: ", ";\n      border-top-color: ", ";\n    "], ["\n      border-color: ", ";\n      border-top-color: ", ";\n    "])), function (_a) {
        var theme = _a.theme;
        return theme.colors.neonPink;
    }, function (_a) {
        var theme = _a.theme;
        return theme.colors.deepPurple;
    });
});
Spinner.propTypes = {
    colorPalette: PropTypes.bool,
    width: PropTypes.number,
    height: PropTypes.number,
    verticalMargin: PropTypes.number,
    horizontalMargin: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.oneOf(['auto']),
    ]),
    borderWidth: PropTypes.number,
};
Spinner.defaultProps = {
    className: 'spinner',
    colorPalette: false,
    width: 24,
    height: 24,
    verticalMargin: 15,
    horizontalMargin: 'auto',
    borderWidth: 4,
};
var templateObject_1$x, templateObject_2$m, templateObject_3$h;

var _a$6, _b$1;
var ButtonBase = css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-family: ", ";\n  font-weight: ", ";\n  margin: 0;\n  cursor: pointer;\n  text-align: center;\n  ", ";\n\n  &:focus {\n    outline: 0;\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  font-family: ", ";\n  font-weight: ", ";\n  margin: 0;\n  cursor: pointer;\n  text-align: center;\n  ", ";\n\n  &:focus {\n    outline: 0;\n  }\n\n  ", "\n\n  ", ";\n\n  ", ";\n"])), getFontFamily('base'), getFontWeight('medium'), function (_a) {
    var margin = _a.margin;
    return createMarginSpacing(margin);
}, function (_a) {
    var isExpanded = _a.isExpanded;
    return isExpanded && css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
}, function (_a) {
    var disabled = _a.disabled;
    return disabled && css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n      cursor: not-allowed;\n    "], ["\n      cursor: not-allowed;\n    "])));
}, function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n      cursor: progress;\n    "], ["\n      cursor: progress;\n    "])));
});
/*
 * BUTTON SIZES
 */
var setMinWidth = function (width) {
    return pipe(prop('variant'), flip(includes)([ButtonVariants.solid, ButtonVariants.outline]), flip(when)(always(pxToRem(width)), isTrue));
};
var ButtonXlarge = css(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"], ["\n  width: 100%;\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"])), pxToRem(50), pxToRem(15, 22), getLineHeight('lg'), getFontSize('lg'));
var ButtonLarge = css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n"])), setMinWidth(95), pxToRem(50), pxToRem(15, 22), getLineHeight('lg'), getFontSize('lg'));
var ButtonMedium = css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), setMinWidth(80), pxToRem(40), pxToRem(12, 18), getLineHeight('md'), getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), pxToRem(12), pxToRem(12));
});
var ButtonSmall = css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"], ["\n  min-width: ", ";\n  height: ", ";\n  padding: ", ";\n  line-height: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), setMinWidth(60), pxToRem(30), pxToRem(7, 12), getLineHeight('md'), getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), pxToRem(7), pxToRem(7));
});
var buttonSizes = (_a$6 = {},
    _a$6[ButtonSizes.xl] = ButtonXlarge,
    _a$6[ButtonSizes.lg] = ButtonLarge,
    _a$6[ButtonSizes.md] = ButtonMedium,
    _a$6[ButtonSizes.sm] = ButtonSmall,
    _a$6);
/*
 * BUTTON VARIANTS
 */
var ButtonSolid = css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]) {\n    color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]) {\n    color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('bgColor'), getButtonColor('bgColor'), getButtonColor('color'), getButtonColor('disabledBgColor'), getButtonColor('disabledBgColor'), getButtonColor('hoverBgColor'), getButtonColor('hoverBgColor'), getButtonColor('color'), getButtonColor('activeBgColor'), getButtonColor('activeBgColor'), getButtonColor('color'));
var ButtonOutline = css(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 5px;\n  text-decoration: none;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    background-color: ", ";\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('bgColor'), getButtonColor('borderColor'), getButtonColor('color'), getButtonColor('disabledColor'), getButtonColor('disabledBgColor'), getButtonColor('hoverBgColor'), getButtonColor('color'), getButtonColor('activeBgColor'), getButtonColor('color'));
var ButtonText = css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: transparent;\n  padding-left: 0;\n  padding-right: 0;\n  text-decoration: none;\n  height: 100%;\n  font-weight: bold;\n  display: flex;\n  vertical-align: middle;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  background-color: transparent;\n  padding-left: 0;\n  padding-right: 0;\n  text-decoration: none;\n  height: 100%;\n  font-weight: bold;\n  display: flex;\n  vertical-align: middle;\n\n  &,\n  &:not([href]):not([tabindex]):not(:disabled) {\n    color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n  }\n\n  &:focus:not(:disabled),\n  &:hover:not(:disabled),\n  &:not([href]):not([tabindex]):not(:disabled):hover,\n  &.hover,\n  &.focus {\n    color: ", ";\n    text-decoration: none;\n  }\n\n  &:not(:disabled):active,\n  &:not([href]):not([tabindex]):not(:disabled):active,\n  &.active {\n    color: ", ";\n    text-decoration: none;\n  }\n"])), getButtonColor('color'), getButtonColor('disabledColor'), getButtonColor('hoverColor'), getButtonColor('activeColor'));
var buttonVariants = (_b$1 = {},
    _b$1[ButtonVariants.solid] = ButtonSolid,
    _b$1[ButtonVariants.outline] = ButtonOutline,
    _b$1[ButtonVariants.text] = ButtonText,
    _b$1);
var StyledButton = styled.button.withConfig({
    shouldForwardProp: function (property) {
        return !includes(property, [
            'size',
            'variant',
            'color',
            'icon',
            'margin',
            'isLoading',
            'isDisabled',
            'isExpanded',
        ]);
    },
})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", ";\n  ", ";\n"])), ButtonBase, function (_a) {
    var size = _a.size;
    return buttonSizes[size];
}, function (_a) {
    var variant = _a.variant;
    return buttonVariants[variant];
});
var templateObject_1$w, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$9, templateObject_6$7, templateObject_7$3, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13, templateObject_14;

var _a$5;
var IconLarge = css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), getFontSize('lg'), createMarginSpacing({ right: 0.5 }));
var IconMedium = css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), getFontSize('md'), createMarginSpacing({ right: 0.4 }));
var IconSmall = css(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), getFontSize('xs'), createMarginSpacing({ right: 0.3 }));
var iconSizes = (_a$5 = {},
    _a$5[ButtonSizes.lg] = IconLarge,
    _a$5[ButtonSizes.md] = IconMedium,
    _a$5[ButtonSizes.sm] = IconSmall,
    _a$5);
var StyledIcon$3 = styled(Icon).withConfig({
    shouldForwardProp: function (property) { return !includes(property, ['size']); },
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
    var size = _a.size;
    return iconSizes[size];
});
var templateObject_1$v, templateObject_2$k, templateObject_3$f, templateObject_4$a;

var requireRouterLink = function () {
    try {
        // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
        return require('react-router-dom').Link;
    }
    catch (e) {
        // eslint-disable-next-line no-console
        console.error("You're trying to use Link component without 'react-router-dom' installed as dependency\nof your project. To resolve this issue you can:\n- install 'react-router-dom' as project dependency\n- replace 'to' property with 'href'\n- pass your custom Link component in 'as' property\n");
        return null;
    }
};

var _a$4;
var LoadingText = styled.span(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
    var size = _a.size;
    return size === ButtonSizes.sm ? pxToRem(5) : pxToRem(10);
});
var spinnerSizes = (_a$4 = {},
    _a$4[ButtonSizes.lg] = 20,
    _a$4[ButtonSizes.md] = 16,
    _a$4[ButtonSizes.sm] = 10,
    _a$4);
var Button = function (_a) {
    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? ButtonVariants.solid : _b, _c = _a.color, color = _c === void 0 ? ButtonColors.primary : _c, _d = _a.size, size = _d === void 0 ? ButtonSizes.md : _d, iconName = _a.iconName, _e = _a.iconType, iconType = _e === void 0 ? IconTypes.sfi : _e, _f = _a.as, as = _f === void 0 ? null : _f, _g = _a.href, href = _g === void 0 ? null : _g, _h = _a.to, to = _h === void 0 ? null : _h, _j = _a.margin, margin = _j === void 0 ? 'none' : _j, _k = _a.onClick, onClick = _k === void 0 ? noop : _k, _l = _a.isDisabled, isDisabled = _l === void 0 ? false : _l, _m = _a.isLoading, isLoading = _m === void 0 ? false : _m, _o = _a.isExpanded, isExpanded = _o === void 0 ? false : _o, _p = _a.loadingText, loadingText = _p === void 0 ? 'Loading' : _p, props = __rest(_a, ["children", "variant", "color", "size", "iconName", "iconType", "as", "href", "to", "margin", "onClick", "isDisabled", "isLoading", "isExpanded", "loadingText"]);
    var RouterLink = null;
    if (isNull(as) && isNotNull(to)) {
        RouterLink = requireRouterLink();
    }
    var domTag = isNotNull(href)
        ? 'a' // render 'a' tag if 'href' is present
        : isNotNull(to)
            ? RouterLink // render 'Link' if 'to' is present
            : undefined; // use default
    if (isNull(RouterLink) && isNull(domTag)) {
        return null;
    }
    var content = isLoading ? (React.createElement(React.Fragment, null,
        React.createElement(Spinner, { borderWidth: 2, colorPalette: variant !== ButtonVariants.solid, height: spinnerSizes[size], verticalMargin: 0, width: spinnerSizes[size] }),
        React.createElement(LoadingText, { size: size, variant: variant }, loadingText))) : isNotUndefined(iconName) ? (React.createElement(React.Fragment, null,
        React.createElement(StyledIcon$3, { name: iconName, size: size, type: iconType }),
        children)) : (children);
    return (React.createElement(StyledButton, __assign({ as: domTag, color: color, disabled: isDisabled || isLoading, href: href, isExpanded: isExpanded, isLoading: isLoading, margin: margin, rel: href ? 'noopener noreferrer' : null, size: size, target: href ? '_blank' : null, to: to, variant: variant, onClick: onClick }, props), content));
};
Button.propTypes = {
    variant: PropTypes.oneOf(Object.values(ButtonVariants)),
    size: PropTypes.oneOf(Object.values(ButtonSizes)),
    color: PropTypes.oneOf(Object.values(ButtonColors)),
    isDisabled: PropTypes.bool,
    isLoading: PropTypes.bool,
    isExpanded: PropTypes.bool,
    margin: SpacingSizeValuePropType,
    href: PropTypes.string,
    to: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.shape({
            pathname: PropTypes.string,
            search: PropTypes.string,
            hash: PropTypes.string,
        }),
    ]),
    className: PropTypes.string,
    iconName: PropTypes.oneOfType([
        PropTypes.oneOf(Object.values(SFIIconsNames)),
        PropTypes.string,
    ]),
    iconType: PropTypes.oneOfType([
        PropTypes.oneOf(Object.values(IconTypes)),
        PropTypes.string,
    ]),
    loadingText: PropTypes.string,
    onClick: PropTypes.func,
};
var templateObject_1$u;

var PortalPlacements = {
    top: 'top',
    bottom: 'bottom',
    bottomLeft: 'bottom-left',
    bottomRight: 'bottom-right',
    left: 'left',
    right: 'right',
};

var useCalculatePortalPlacements_enums = /*#__PURE__*/Object.freeze({
  __proto__: null,
  PortalPlacements: PortalPlacements
});

// Inspired by David Gilbertson (https://codepen.io/davidgilbertson/pen/ooXVyw)
var useCalculatePortaPlacement = function (_a, _b) {
    var current = _a.current;
    var placement = _b.placement, _c = _b.width, width = _c === void 0 ? 270 : _c, _d = _b.space, space = _d === void 0 ? 5 : _d;
    return useCallback(function () {
        var style = { width: width, space: space };
        if (current === null)
            return style;
        var dimensions = current.getBoundingClientRect();
        var scrollTop = dimensions.top + window.pageYOffset;
        var scrollBottom = dimensions.bottom + window.pageYOffset;
        var scrollLeft = dimensions.left + window.pageXOffset;
        var scrollRight = dimensions.right + window.pageXOffset;
        if (placement === 'bottom' || placement === 'top') {
            style.left = scrollLeft + dimensions.width / 2 - style.width / 2;
        }
        if (placement === 'left' || placement === 'right') {
            style.bottom = window.innerHeight - scrollTop - dimensions.height / 2;
        }
        switch (placement) {
            case 'bottom-left':
                style.left = scrollLeft;
                style.top = scrollBottom + space;
                break;
            case 'bottom-right':
                style.left = scrollRight - width;
                style.top = scrollBottom + space;
                break;
            case 'left':
                style.right = window.innerWidth - scrollLeft + space;
                break;
            case 'right':
                style.left = scrollRight + space;
                break;
            case 'top':
                style.bottom = window.innerHeight - scrollTop + space;
                break;
            case 'bottom':
            default:
                style.top = scrollBottom + space;
                break;
        }
        return style;
    }, [current, placement, width, space]);
};

var _a$3;
var bottomPlacement = css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  &::before {\n    transform: translate(-50%);\n    top: -8px;\n    left: 50%;\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent ", " transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    top: -4px;\n    left: 50%;\n    border-width: 0 4px 4px 4px;\n    border-color: transparent transparent ", " transparent;\n  }\n"], ["\n  &::before {\n    transform: translate(-50%);\n    top: -8px;\n    left: 50%;\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent ", " transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    top: -4px;\n    left: 50%;\n    border-width: 0 4px 4px 4px;\n    border-color: transparent transparent ", " transparent;\n  }\n"])), getColor('midPurple'), getColor('white'));
var topPlacement = css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  &::before {\n    transform: translate(-50%);\n    bottom: -8px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    bottom: -5px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n"], ["\n  &::before {\n    transform: translate(-50%);\n    bottom: -8px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    bottom: -5px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n"])), getColor('midPurple'), getColor('white'));
var leftPlacement = css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -8px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -5px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n"], ["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -8px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -5px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n"])), getColor('midPurple'), getColor('white'));
var rightPlacement = css(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -8px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent ", " transparent transparent;\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -5px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #fff transparent transparent;\n  }\n"], ["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -8px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent ", " transparent transparent;\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -5px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #fff transparent transparent;\n  }\n"])), getColor('midPurple'));
var tooltipPlacements = (_a$3 = {},
    _a$3[PortalPlacements.bottom] = bottomPlacement,
    _a$3[PortalPlacements.top] = topPlacement,
    _a$3[PortalPlacements.left] = leftPlacement,
    _a$3[PortalPlacements.right] = rightPlacement,
    _a$3);
var TooltipPopup = styled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n  position: absolute;\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  ", ";\n"])), createPaddingSpacing(0.5), getColor('white'), getColor('black'), getFontFamily('base'), getFontSize('md'), getLineHeight('md'), getBorderRadius, getColor('midPurple'), function (_a) {
    var $placement = _a.$placement;
    return tooltipPlacements[$placement];
});
var templateObject_1$t, templateObject_2$j, templateObject_3$e, templateObject_4$9, templateObject_5$8;

var defaultTooltipPopupDimensions$1 = { width: 270, space: 8, zIndex: 2000 };
var useTooltip = function (parentRef, _a) {
    var _b = _a.defaultIsPopupDisplayed, defaultIsPopupDisplayed = _b === void 0 ? false : _b, placement = _a.placement;
    var portalsContainerId = useContext(DSContext).portalsContainerId;
    var _c = usePortal({
        defaultShow: defaultIsPopupDisplayed,
        containerId: portalsContainerId,
        autoRemoveContainer: false,
    }), Portal = _c.Portal, isShow = _c.isShow, show = _c.show, hide = _c.hide;
    var _d = useState(defaultTooltipPopupDimensions$1), style = _d[0], setStyle = _d[1];
    var getPlacementStyles = useCalculatePortaPlacement(parentRef, __assign({ placement: placement }, defaultTooltipPopupDimensions$1));
    useEffect(function () {
        setStyle(getPlacementStyles());
    }, [getPlacementStyles, isShow]);
    return {
        handleShowTooltip: show,
        handleHideTooltip: hide,
        Popup: function (_a) {
            var children = _a.children;
            var space = style.space, width = style.width, left = style.left, top = style.top, right = style.right, bottom = style.bottom;
            return (React.createElement(Portal, null,
                React.createElement(TooltipPopup, { "$placement": placement, "$space": space, "$width": width, style: {
                        width: pxToRem(width),
                        left: pxToRem(left),
                        right: pxToRem(right),
                        top: pxToRem(top),
                        bottom: pxToRem(bottom),
                    } }, children)));
        },
    };
};

var Tooltip = function (_a) {
    var children = _a.children, popup = _a.popup, _b = _a.placement, placement = _b === void 0 ? PortalPlacements.bottom : _b, _c = _a.defaultIsPopupDisplayed, defaultIsPopupDisplayed = _c === void 0 ? false : _c, props = __rest(_a, ["children", "popup", "placement", "defaultIsPopupDisplayed"]);
    var parentRef = useRef(null);
    var _d = useTooltip(parentRef, { placement: placement, defaultIsPopupDisplayed: defaultIsPopupDisplayed }), Popup = _d.Popup, handleShowTooltip = _d.handleShowTooltip, handleHideTooltip = _d.handleHideTooltip;
    var delayedHandleHideTooltip = function () {
        setTimeout(handleHideTooltip, 200);
    };
    if (isFalsy(popup))
        return React.createElement(React.Fragment, null, children);
    return (React.createElement("span", __assign({ ref: parentRef, onMouseEnter: handleShowTooltip, onMouseLeave: delayedHandleHideTooltip }, props),
        children,
        React.createElement(Popup, null, popup)));
};
Tooltip.propTypes = {
    popup: PropTypes.node,
    className: PropTypes.string,
    placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
    defaultIsPopupDisplayed: PropTypes.bool,
};

var TooltipDesign = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n"], ["\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n"])), createPaddingSpacing(0.5), getColor('white'), getColor('black'), getFontFamily('base'), getFontSize('md'), getLineHeight('md'), getBorderRadius, getColor('midPurple'));
var templateObject_1$s;

var HeadingSizes = {
    h0: 'h0',
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h4',
};
var HeadingVariants = {
    primary: 'primary',
    secondary: 'secondary',
};

var Heading_enums = /*#__PURE__*/Object.freeze({
  __proto__: null,
  HeadingSizes: HeadingSizes,
  HeadingVariants: HeadingVariants
});

var primaryVariant$1 = css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), getColor('lightPurple'));
var secondaryVariant$1 = css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), getColor('lightGrey'));
var variants$1 = {
    primary: primaryVariant$1,
    secondary: secondaryVariant$1,
};
var HeadingBase = css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", ";\n  ", ";\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", ";\n  ", ";\n"])), getFontFamily('base'), getFontWeight('medium'), function (_a) {
    var size = _a.size, theme = _a.theme;
    return path(['typography', 'margin', 'heading', size, 'top'], theme);
}, function (_a) {
    var size = _a.size, theme = _a.theme;
    return path(['typography', 'marg