design-system-simplefi/build/index.js

Design System for SimpleFi Applications

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var space = require('./space-9bdb4896.js');
var styled = require('styled-components');
var React = require('react');
var reflexbox = require('reflexbox');
var ramda = require('ramda');
var PropTypes = require('prop-types');
var ramdaAdjunct = require('ramda-adjunct');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
var createIconLibrary = require('./createIconLibrary-591722da.js');
var usePortal = require('react-cool-portal');
var polished = require('polished');
var debounce = require('lodash.debounce');
var Blockies = require('react-blockies');
var web3Utils = require('web3-utils');
var recharts = require('recharts');
var d3Scale = require('d3-scale');
require('numeral');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var usePortal__default = /*#__PURE__*/_interopDefaultLegacy(usePortal);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var Blockies__default = /*#__PURE__*/_interopDefaultLegacy(Blockies);

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

var getRowMargin = ramda.pipe(ramda.path(['theme', 'layout', 'columnGutter']), function (gutter) { return (gutter / 2) * -1; }, space.pxToRem);
var StyledRow = styled__default['default'](reflexbox.Flex).attrs(function (props) { return (space.__assign({ mx: getRowMargin(props) }, props)); })(templateObject_1$H || (templateObject_1$H = space.__makeTemplateObject([""], [""])));
var Row = function (_a) {
    var children = _a.children;
    return (React__default['default'].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 = ramda.pipe(ramda.path(['theme', 'layout', 'columnGutter']), function (gutter) { return gutter / 2; }, space.pxToRem);
var StyledCol = styled__default['default'](reflexbox.Box)(templateObject_1$G || (templateObject_1$G = space.__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__default['default'].createElement(StyledCol, space.__assign({ ml: (100 / 12) * offset + "%" }, getColWidth(cols)), children));
};
Col.propTypes = {
    cols: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].number,
        PropTypes__default['default'].oneOf(['auto']),
    ]),
    offset: PropTypes__default['default'].number,
};
Col.defaultProps = {
    cols: 'auto',
    offset: 0,
};
var templateObject_1$G;

var FlexContainer = styled__default['default'].div(templateObject_1$F || (templateObject_1$F = space.__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"])), ramda.prop('alignItems'), ramda.prop('justifyContent'), ramda.prop('flexDirection'), ramda.prop('flexGrow'), ramda.prop('flexShrink'), ramda.prop('flexWrap'), space.createSpacings);
FlexContainer.propTypes = {
    alignItems: PropTypes__default['default'].oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'revert',
        'unset',
        'center',
        'end',
        'flex-end',
        'flex-start',
        'self-end',
        'self-start',
        'start',
        'baseline',
        'normal',
        'stretch',
    ]),
    justifyContent: PropTypes__default['default'].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__default['default'].oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'unset',
        'revert',
        'column',
        'column-reverse',
        'row',
        'row-reverse',
    ]),
    flexGrow: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].number,
        PropTypes__default['default'].oneOf(['inherit', '-moz-initial', 'initial', 'revert', 'unset']),
    ]),
    flexShrink: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].number,
        PropTypes__default['default'].oneOf(['inherit', '-moz-initial', 'initial', 'revert', 'unset']),
    ]),
    flexWrap: PropTypes__default['default'].oneOf([
        'inherit',
        '-moz-initial',
        'initial',
        'revert',
        'unset',
        'nowrap',
        'wrap',
        'wrap-reverse',
    ]),
};
var templateObject_1$F;

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

var AlignItemsPropType = PropTypes__default['default'].oneOf([
    'inherit',
    '-moz-initial',
    'initial',
    'revert',
    'unset',
    'center',
    'end',
    'flex-end',
    'flex-start',
    'self-end',
    'self-start',
    'start',
    'baseline',
    'normal',
    'stretch',
]);
var JustifyContentPropType = PropTypes__default['default'].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__default['default'].div(templateObject_1$D || (templateObject_1$D = space.__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"])), ramda.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 space.getSpace(gap, { theme: theme });
}, function (_a) {
    var splitAt = _a.splitAt;
    return ramdaAdjunct.isNotUndefined(splitAt) &&
        "\n    :only-child {\n      height: 100%;\n    }\n\n    > :nth-child(" + splitAt + ") {\n      margin-bottom: auto;\n    }\n  ";
});
Stack.propTypes = {
    gap: PropTypes__default['default'].oneOf(Object.values(space.SpaceSizes)),
    justify: AlignItemsPropType,
    splitAt: PropTypes__default['default'].number,
    isRecursive: PropTypes__default['default'].bool,
};
Stack.defaultProps = {
    gap: space.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 (ramdaAdjunct.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__default['default'].div(templateObject_1$C || (templateObject_1$C = space.__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"])), ramda.prop('justify'), ramda.prop('align'), function (_a) {
    var stretch = _a.stretch;
    return ramdaAdjunct.isNotUndefined(stretch) && getStretchStyle(stretch);
}, function (_a) {
    var gap = _a.gap, theme = _a.theme;
    return space.getSpace(gap, { theme: theme });
});
Inline.propTypes = {
    align: AlignItemsPropType,
    justify: JustifyContentPropType,
    gap: PropTypes__default['default'].oneOf(Object.values(space.SpaceSizes)),
    stretch: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].number,
        PropTypes__default['default'].oneOf(Object.values(StretchEnum)),
    ]),
};
Inline.defaultProps = {
    gap: space.SpaceSizes.none,
};
var templateObject_1$C;

var ClusterWrapper = styled__default['default'].div(templateObject_1$B || (templateObject_1$B = space.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
var ClusterParent = styled__default['default'].div(function (_a) {
    var $gap = _a.$gap, $justify = _a.$justify, $align = _a.$align, theme = _a.theme;
    var gapSize = space.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 = space.__rest(_a, ["children", "gap", "align", "justify", "parentEl", "wrapperEl"]);
    return (React__default['default'].createElement(ClusterWrapper, { as: wrapperEl },
        React__default['default'].createElement(ClusterParent, space.__assign({ "$align": align, "$gap": gap, "$justify": justify, as: parentEl }, props), children)));
};
Cluster.propTypes = {
    gap: PropTypes__default['default'].oneOf(Object.values(space.SpaceSizes)),
    align: AlignItemsPropType,
    justify: JustifyContentPropType,
    wrapperEl: PropTypes__default['default'].elementType,
    parentEl: PropTypes__default['default'].elementType,
};
Cluster.defaultProps = {
    gap: space.SpaceSizes.none,
};
var templateObject_1$B;

var GridWrapper = styled__default['default'].div(templateObject_1$A || (templateObject_1$A = space.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
var GridParent = styled__default['default'].div(function (_a) {
    var $cols = _a.$cols, $gap = _a.$gap, $align = _a.$align, theme = _a.theme;
    var gapSize = space.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 = space.__rest(_a, ["children", "gap", "align", "cols", "parentEl", "wrapperEl"]);
    return (React__default['default'].createElement(GridWrapper, { as: wrapperEl },
        React__default['default'].createElement(GridParent, space.__assign({ "$align": align, "$cols": cols, "$gap": gap, as: parentEl }, props), children)));
};
Grid.propTypes = {
    gap: PropTypes__default['default'].oneOf(Object.values(space.SpaceSizes)),
    cols: PropTypes__default['default'].number,
    align: AlignItemsPropType,
    wrapperEl: PropTypes__default['default'].elementType,
    parentEl: PropTypes__default['default'].elementType,
};
Grid.defaultProps = {
    gap: space.SpaceSizes.none,
    cols: 6,
};
var templateObject_1$A;

var Center = styled__default['default'].div.withConfig({
    shouldForwardProp: function (prop) {
        return !ramda.includes(prop, [
            'maxWidth',
            'gutters',
            'areChildrenCentered',
            'isTextCentered',
        ]);
    },
})(templateObject_1$z || (templateObject_1$z = space.__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 space.pxToRem(ramdaAdjunct.isNotUndefined(maxWidth) ? maxWidth : theme.layout.containerWidth);
}, function (_a) {
    var gutters = _a.gutters, theme = _a.theme;
    var size = space.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__default['default'].number,
    gutters: PropTypes__default['default'].oneOf(Object.values(space.SpaceSizes)),
    areChildrenCentered: PropTypes__default['default'].bool,
    isTextCentered: PropTypes__default['default'].bool,
};
Center.defaultProps = {
    gutters: space.SpaceSizes.none,
    areChildrenCentered: false,
    isTextCentered: false,
};
var templateObject_1$z;

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

var StyledIcon$4 = styled__default['default'](reactFontawesome.FontAwesomeIcon)(templateObject_1$y || (templateObject_1$y = space.__makeTemplateObject(["\n  color: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  ", ";\n"])), function (_a) {
    var color = _a.color, theme = _a.theme;
    return ramdaAdjunct.isNotUndefined(color) ? space.getColor(color, { theme: theme }) : 'inherit';
}, space.createSpacings);
var Icon = function (_a) {
    var name = _a.name, _b = _a.type, type = _b === void 0 ? createIconLibrary.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 = space.__rest(_a, ["name", "type", "color", "className", "hovercolor", "hasFixedWidth"]);
    return (React__default['default'].createElement(StyledIcon$4, space.__assign({ className: className, color: color, fixedWidth: hasFixedWidth, hovercolor: hovercolor, icon: fontawesomeSvgCore.findIconDefinition({
            iconName: name,
            prefix: type,
        }) }, props)));
};
Icon.propTypes = {
    name: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].oneOf(Object.values(createIconLibrary.SFIIconsNames)),
        PropTypes__default['default'].string,
    ]).isRequired,
    type: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].oneOf(Object.values(createIconLibrary.IconTypes)),
        PropTypes__default['default'].string,
    ]),
    color: PropTypes__default['default'].oneOf(Object.values(createIconLibrary.ColorTypes)),
    className: PropTypes__default['default'].string,
    hasFixedWidth: PropTypes__default['default'].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 = styled.keyframes(templateObject_1$x || (templateObject_1$x = space.__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 = ramda.pipe(ramda.prop('horizontalMargin'), ramda.unless(ramdaAdjunct.isString, space.pxToRem));
var Spinner = styled__default['default'].div(templateObject_3$h || (templateObject_3$h = space.__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 space.pxToRem(verticalMargin);
}, function (_a) {
    var verticalMargin = _a.verticalMargin;
    return space.pxToRem(verticalMargin);
}, getHorizontalMargin, getHorizontalMargin, function (_a) {
    var width = _a.width;
    return space.pxToRem(width);
}, function (_a) {
    var height = _a.height;
    return space.pxToRem(height);
}, spin, function (_a) {
    var borderWidth = _a.borderWidth;
    return borderWidth + "px";
}, function (_a) {
    var colorPalette = _a.colorPalette;
    return colorPalette && styled.css(templateObject_2$m || (templateObject_2$m = space.__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__default['default'].bool,
    width: PropTypes__default['default'].number,
    height: PropTypes__default['default'].number,
    verticalMargin: PropTypes__default['default'].number,
    horizontalMargin: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].number,
        PropTypes__default['default'].oneOf(['auto']),
    ]),
    borderWidth: PropTypes__default['default'].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 = styled.css(templateObject_4$b || (templateObject_4$b = space.__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"])), space.getFontFamily('base'), space.getFontWeight('medium'), function (_a) {
    var margin = _a.margin;
    return space.createMarginSpacing(margin);
}, function (_a) {
    var isExpanded = _a.isExpanded;
    return isExpanded && styled.css(templateObject_1$w || (templateObject_1$w = space.__makeTemplateObject(["\n      width: 100%;\n    "], ["\n      width: 100%;\n    "])));
}, function (_a) {
    var disabled = _a.disabled;
    return disabled && styled.css(templateObject_2$l || (templateObject_2$l = space.__makeTemplateObject(["\n      cursor: not-allowed;\n    "], ["\n      cursor: not-allowed;\n    "])));
}, function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && styled.css(templateObject_3$g || (templateObject_3$g = space.__makeTemplateObject(["\n      cursor: progress;\n    "], ["\n      cursor: progress;\n    "])));
});
/*
 * BUTTON SIZES
 */
var setMinWidth = function (width) {
    return ramda.pipe(ramda.prop('variant'), ramda.flip(ramda.includes)([ButtonVariants.solid, ButtonVariants.outline]), ramda.flip(ramda.when)(ramda.always(space.pxToRem(width)), ramdaAdjunct.isTrue));
};
var ButtonXlarge = styled.css(templateObject_5$9 || (templateObject_5$9 = space.__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"])), space.pxToRem(50), space.pxToRem(15, 22), space.getLineHeight('lg'), space.getFontSize('lg'));
var ButtonLarge = styled.css(templateObject_6$7 || (templateObject_6$7 = space.__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), space.pxToRem(50), space.pxToRem(15, 22), space.getLineHeight('lg'), space.getFontSize('lg'));
var ButtonMedium = styled.css(templateObject_8$3 || (templateObject_8$3 = space.__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), space.pxToRem(40), space.pxToRem(12, 18), space.getLineHeight('md'), space.getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && styled.css(templateObject_7$3 || (templateObject_7$3 = space.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), space.pxToRem(12), space.pxToRem(12));
});
var ButtonSmall = styled.css(templateObject_10$1 || (templateObject_10$1 = space.__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), space.pxToRem(30), space.pxToRem(7, 12), space.getLineHeight('md'), space.getFontSize('md'), function (_a) {
    var isLoading = _a.isLoading;
    return isLoading && styled.css(templateObject_9$1 || (templateObject_9$1 = space.__makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), space.pxToRem(7), space.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 = styled.css(templateObject_11$1 || (templateObject_11$1 = space.__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"])), space.getButtonColor('bgColor'), space.getButtonColor('bgColor'), space.getButtonColor('color'), space.getButtonColor('disabledBgColor'), space.getButtonColor('disabledBgColor'), space.getButtonColor('hoverBgColor'), space.getButtonColor('hoverBgColor'), space.getButtonColor('color'), space.getButtonColor('activeBgColor'), space.getButtonColor('activeBgColor'), space.getButtonColor('color'));
var ButtonOutline = styled.css(templateObject_12$1 || (templateObject_12$1 = space.__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"])), space.getButtonColor('bgColor'), space.getButtonColor('borderColor'), space.getButtonColor('color'), space.getButtonColor('disabledColor'), space.getButtonColor('disabledBgColor'), space.getButtonColor('hoverBgColor'), space.getButtonColor('color'), space.getButtonColor('activeBgColor'), space.getButtonColor('color'));
var ButtonText = styled.css(templateObject_13 || (templateObject_13 = space.__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"])), space.getButtonColor('color'), space.getButtonColor('disabledColor'), space.getButtonColor('hoverColor'), space.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__default['default'].button.withConfig({
    shouldForwardProp: function (property) {
        return !ramda.includes(property, [
            'size',
            'variant',
            'color',
            'icon',
            'margin',
            'isLoading',
            'isDisabled',
            'isExpanded',
        ]);
    },
})(templateObject_14 || (templateObject_14 = space.__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 = styled.css(templateObject_1$v || (templateObject_1$v = space.__makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), space.getFontSize('lg'), space.createMarginSpacing({ right: 0.5 }));
var IconMedium = styled.css(templateObject_2$k || (templateObject_2$k = space.__makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), space.getFontSize('md'), space.createMarginSpacing({ right: 0.4 }));
var IconSmall = styled.css(templateObject_3$f || (templateObject_3$f = space.__makeTemplateObject(["\n  font-size: ", ";\n  ", ";\n"], ["\n  font-size: ", ";\n  ", ";\n"])), space.getFontSize('xs'), space.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__default['default'](Icon).withConfig({
    shouldForwardProp: function (property) { return !ramda.includes(property, ['size']); },
})(templateObject_4$a || (templateObject_4$a = space.__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__default['default'].span(templateObject_1$u || (templateObject_1$u = space.__makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
    var size = _a.size;
    return size === ButtonSizes.sm ? space.pxToRem(5) : space.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 ? createIconLibrary.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 ? ramdaAdjunct.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 = space.__rest(_a, ["children", "variant", "color", "size", "iconName", "iconType", "as", "href", "to", "margin", "onClick", "isDisabled", "isLoading", "isExpanded", "loadingText"]);
    var RouterLink = null;
    if (ramdaAdjunct.isNull(as) && ramdaAdjunct.isNotNull(to)) {
        RouterLink = requireRouterLink();
    }
    var domTag = ramdaAdjunct.isNotNull(href)
        ? 'a' // render 'a' tag if 'href' is present
        : ramdaAdjunct.isNotNull(to)
            ? RouterLink // render 'Link' if 'to' is present
            : undefined; // use default
    if (ramdaAdjunct.isNull(RouterLink) && ramdaAdjunct.isNull(domTag)) {
        return null;
    }
    var content = isLoading ? (React__default['default'].createElement(React__default['default'].Fragment, null,
        React__default['default'].createElement(Spinner, { borderWidth: 2, colorPalette: variant !== ButtonVariants.solid, height: spinnerSizes[size], verticalMargin: 0, width: spinnerSizes[size] }),
        React__default['default'].createElement(LoadingText, { size: size, variant: variant }, loadingText))) : ramdaAdjunct.isNotUndefined(iconName) ? (React__default['default'].createElement(React__default['default'].Fragment, null,
        React__default['default'].createElement(StyledIcon$3, { name: iconName, size: size, type: iconType }),
        children)) : (children);
    return (React__default['default'].createElement(StyledButton, space.__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__default['default'].oneOf(Object.values(ButtonVariants)),
    size: PropTypes__default['default'].oneOf(Object.values(ButtonSizes)),
    color: PropTypes__default['default'].oneOf(Object.values(ButtonColors)),
    isDisabled: PropTypes__default['default'].bool,
    isLoading: PropTypes__default['default'].bool,
    isExpanded: PropTypes__default['default'].bool,
    margin: SpacingSizeValuePropType,
    href: PropTypes__default['default'].string,
    to: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].string,
        PropTypes__default['default'].shape({
            pathname: PropTypes__default['default'].string,
            search: PropTypes__default['default'].string,
            hash: PropTypes__default['default'].string,
        }),
    ]),
    className: PropTypes__default['default'].string,
    iconName: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].oneOf(Object.values(createIconLibrary.SFIIconsNames)),
        PropTypes__default['default'].string,
    ]),
    iconType: PropTypes__default['default'].oneOfType([
        PropTypes__default['default'].oneOf(Object.values(createIconLibrary.IconTypes)),
        PropTypes__default['default'].string,
    ]),
    loadingText: PropTypes__default['default'].string,
    onClick: PropTypes__default['default'].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 React.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 = styled.css(templateObject_1$t || (templateObject_1$t = space.__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"])), space.getColor('midPurple'), space.getColor('white'));
var topPlacement = styled.css(templateObject_2$j || (templateObject_2$j = space.__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"])), space.getColor('midPurple'), space.getColor('white'));
var leftPlacement = styled.css(templateObject_3$e || (templateObject_3$e = space.__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"])), space.getColor('midPurple'), space.getColor('white'));
var rightPlacement = styled.css(templateObject_4$9 || (templateObject_4$9 = space.__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"])), space.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__default['default'].div(templateObject_5$8 || (templateObject_5$8 = space.__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"])), space.createPaddingSpacing(0.5), space.getColor('white'), space.getColor('black'), space.getFontFamily('base'), space.getFontSize('md'), space.getLineHeight('md'), space.getBorderRadius, space.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 = React.useContext(createIconLibrary.DSContext).portalsContainerId;
    var _c = usePortal__default['default']({
        defaultShow: defaultIsPopupDisplayed,
        containerId: portalsContainerId,
        autoRemoveContainer: false,
    }), Portal = _c.Portal, isShow = _c.isShow, show = _c.show, hide = _c.hide;
    var _d = React.useState(defaultTooltipPopupDimensions$1), style = _d[0], setStyle = _d[1];
    var getPlacementStyles = useCalculatePortaPlacement(parentRef, space.__assign({ placement: placement }, defaultTooltipPopupDimensions$1));
    React.useEffect(function () {
        setStyle(getPlacementStyles());
    }, [getPlacementStyles, isShow]);
    return {
        handleShowTooltip: show,
        handleHideTooltip: hide,
        Popup: function (_a) {
            var children = _a.children;
            var space$1 = style.space, width = style.width, left = style.left, top = style.top, right = style.right, bottom = style.bottom;
            return (React__default['default'].createElement(Portal, null,
                React__default['default'].createElement(TooltipPopup, { "$placement": placement, "$space": space$1, "$width": width, style: {
                        width: space.pxToRem(width),
                        left: space.pxToRem(left),
                        right: space.pxToRem(right),
                        top: space.pxToRem(top),
                        bottom: space.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, defaultIs