@keen.io/ui-core/dist/index.esm.js

Keen visual components library

import * as React from 'react';
import React__default, { forwardRef, useEffect, useState, useMemo, useRef, useCallback, useReducer, useContext, memo, useLayoutEffect } from 'react';
import { colors } from '@keen.io/colors';
import styled, { css, createGlobalStyle } from 'styled-components';
import { typography, variant, layout } from 'styled-system';
import { transparentize, rgba } from 'polished';
import { motion, AnimatePresence } from 'framer-motion';
import { Icon } from '@keen.io/icons';
import Color$2 from 'color';
import { generateContinuousColorScale, formatValue } from '@keen.io/charts-utils';
import Sortable from 'sortablejs';
import { useOnClickOutside, useSearch, useOnParentScroll, useDynamicContentPosition, useKeypress, useTooltip } from '@keen.io/react-hooks';
import { SketchPicker } from 'react-color';
import ReactDOM, { createPortal } from 'react-dom';
import ReactSelect from 'react-select';
import { BodyText, Headline } from '@keen.io/typography';
import { useInView } from 'react-intersection-observer';
import Measure from 'react-measure';
import dayjs from 'dayjs';
import Calendar from 'react-calendar';
import { FixedSizeList } from 'react-window';
import { FixedSizeTree } from 'react-vtree';

function _typeof(obj) {
  "@babel/helpers - typeof";

  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();

  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
        result;

    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var BaseText = styled.div.withConfig({
  displayName: "textcomponent__BaseText",
  componentId: "keen-ui-core__sc-13re0gd-0"
})(["&&&{", ";color:", ";margin:0;padding:0;", ";}"], typography, function (props) {
  return props.fontColor;
}, function (props) {
  return props.truncate && css(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
});

var Text$1 = function Text(_ref) {
  var children = _ref.children,
      _ref$truncate = _ref.truncate,
      truncate = _ref$truncate === void 0 ? false : _ref$truncate,
      _ref$htmlElement = _ref.htmlElement,
      htmlElement = _ref$htmlElement === void 0 ? 'div' : _ref$htmlElement,
      props = _objectWithoutProperties(_ref, ["children", "truncate", "htmlElement"]);

  return React__default.createElement(BaseText, Object.assign({
    as: htmlElement,
    truncate: truncate
  }, props), children);
};

var textVariants = {
  h1: {
    fontFamily: 'Gangster Grotesk',
    fontWeight: 'bold',
    fontSize: 36,
    lineHeight: '40px'
  },
  h2: {
    fontFamily: 'Gangster Grotesk',
    fontWeight: 'bold',
    fontSize: 30,
    lineHeight: '34px'
  },
  h3: {
    fontFamily: 'Gangster Grotesk',
    fontWeight: 'normal',
    fontSize: 20,
    lineHeight: '22px'
  },
  h4: {
    fontFamily: 'Lato',
    fontWeight: 'normal',
    fontSize: 16,
    lineHeight: '20px'
  },
  h5: {
    fontFamily: 'Lato',
    fontWeight: 'normal',
    fontSize: 12,
    lineHeight: '14px'
  },
  h6: {
    fontFamily: 'Lato',
    fontWeight: 'normal',
    fontSize: 10,
    lineHeight: '12px'
  },
  'body-normal': {
    fontFamily: 'Lato',
    fontWeight: 'normal',
    fontSize: 14,
    lineHeight: '16px'
  },
  'body-bold': {
    fontFamily: 'Lato',
    fontWeight: 'bold',
    fontSize: 14,
    lineHeight: '16px'
  },
  'number-xl': {
    fontFamily: 'Lato',
    fontWeight: 'lighter',
    fontSize: 55,
    lineHeight: '64px'
  },
  'number-l': {
    fontFamily: 'Lato',
    fontWeight: 'lighter',
    fontSize: 40,
    lineHeight: '50px'
  },
  'number-m': {
    fontFamily: 'Lato',
    fontWeight: 'lighter',
    fontSize: 30,
    lineHeight: '36px'
  },
  'number-s': {
    fontFamily: 'Lato',
    fontWeight: 'normal',
    fontSize: 16,
    lineHeight: '24px'
  }
};
var theme = {
  font: {
    GangsterGrotesk: 'Gangster Grotesk',
    Lato: 'Lato'
  }
};
var solidButtonVariants = {
  prop: 'variant',
  variants: {
    primary: {
      backgroundColor: colors.yellow['400'],
      borderColor: colors.yellow['400'],
      color: colors.black['500'],
      '&:focus': {
        boxShadow: "0 0 0 0.2rem rgba(218,165,80, .5)"
      },
      '&:hover': {
        color: colors.black['400'],
        backgroundColor: colors.yellow['500']
      }
    },
    secondary: {
      backgroundColor: colors.blue['500'],
      borderColor: colors.blue['500'],
      color: colors.white['500'],
      boxShadow: "0 2px 4px 0 ".concat(transparentize(0.85, colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.blue['400']
      }
    },
    danger: {
      backgroundColor: colors.red['500'],
      borderColor: colors.red['500'],
      color: colors.white['500'],
      boxShadow: "0 1px 4px 0 ".concat(transparentize(0.85, colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.red['300']
      }
    },
    success: {
      backgroundColor: colors.green['300'],
      borderColor: colors.green['300'],
      color: colors.white['500'],
      boxShadow: "0 1px 4px 0 ".concat(transparentize(0.85, colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.green['400']
      }
    },
    blank: {
      backgroundColor: colors.white['500'],
      color: colors.blue['500'],
      boxShadow: "0 1px 4px 0 ".concat(transparentize(0.85, colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: transparentize(0.8, colors.blue['100'])
      }
    }
  }
};

var HTML_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
var Title$3 = function Title(_ref) {
  var children = _ref.children,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'h1' : _ref$variant,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? colors.black['100'] : _ref$color;
  var typography = textVariants[variant];
  return React__default.createElement(BaseText, Object.assign({
    as: HTML_ELEMENTS.includes(variant) ? variant : 'div',
    fontColor: color
  }, typography), children);
};

var RefText = forwardRef(function (_ref, ref) {
  var children = _ref.children,
      _ref$truncate = _ref.truncate,
      truncate = _ref$truncate === void 0 ? false : _ref$truncate,
      props = _objectWithoutProperties(_ref, ["children", "truncate"]);

  return React__default.createElement(BaseText, Object.assign({
    ref: ref,
    truncate: truncate
  }, props), children);
});
RefText.displayName = 'RefText';

var predefinedFonts = [theme.font.GangsterGrotesk, theme.font.Lato];

var FontLoader = /*#__PURE__*/function () {
  function FontLoader() {
    _classCallCheck(this, FontLoader);

    this.fonts = [];

    if (FontLoader.instance) {
      throw new Error('Error: Use FontLoader.getInstance() instead of new.');
    }
  }

  _createClass(FontLoader, [{
    key: "loadFont",
    value: async function loadFont(fonts) {
      var _this = this;

      var customFamilies = predefinedFonts.filter(function (font) {
        return !_this.fonts.includes(font);
      });
      var googleFamilies = fonts.filter(function (font) {
        return !_this.fonts.includes(font) && !predefinedFonts.includes(font);
      });
      var WebFont = (await import('webfontloader')).default;

      if (customFamilies.length || googleFamilies.length) {
        WebFont.load(_objectSpread2(_objectSpread2(_objectSpread2({}, googleFamilies.length && {
          google: {
            families: googleFamilies
          }
        }), customFamilies.length && {
          custom: {
            families: customFamilies
          }
        }), {}, {
          fontactive: function fontactive(familyName) {
            return _this.fonts.push(familyName);
          },
          fontinactive: function fontinactive(familyName, fvd) {
            return console.error("We're not able to load ".concat(familyName, " ").concat(fvd, " font"));
          }
        }));
      }
    }
  }, {
    key: "getActiveFonts",
    value: function getActiveFonts() {
      return this.fonts;
    }
  }], [{
    key: "getInstance",
    value: function getInstance() {
      if (!FontLoader.instance) {
        FontLoader.instance = new FontLoader();
      }

      return FontLoader.instance;
    }
  }]);

  return FontLoader;
}();

var FontLoaderInstance = FontLoader.getInstance();

var useFontLoader = function useFontLoader(fontFamilies) {
  useEffect(function () {
    FontLoaderInstance.loadFont(fontFamilies);
  }, [fontFamilies]);
  return FontLoaderInstance.getActiveFonts();
};

var CDNContext = React__default.createContext({
  url: ''
});

var screenBreakpoints = ['0', '600px', '960px', '1280px', '1920px'];
screenBreakpoints.xs = screenBreakpoints[0];
screenBreakpoints.sm = screenBreakpoints[1];
screenBreakpoints.md = screenBreakpoints[2];
screenBreakpoints.lg = screenBreakpoints[3];
screenBreakpoints.xl = screenBreakpoints[4];

var alertVariants = {
  prop: 'type',
  variants: {
    success: {
      color: colors.green['500'],
      borderColor: colors.green['400'],
      background: transparentize(0.8, colors.green['100'])
    },
    error: {
      color: colors.red['500'],
      borderColor: colors.red['500'],
      background: transparentize(0.6, colors.red['100'])
    },
    info: {
      color: colors.blue['500'],
      borderColor: colors.blue['200'],
      background: transparentize(0.6, colors.lightBlue['300'])
    }
  }
};
var StyledAlert = styled.div.withConfig({
  displayName: "alertstyles__StyledAlert",
  componentId: "keen-ui-core__sc-82aa9s-0"
})(["&&&{padding:10px 20px;border-left:solid;font-family:'Lato Regular',sans-serif;font-size:14px;line-height:16px;font-weight:400;", ";", ";}"], function (_ref) {
  var contentWidth = _ref.contentWidth;
  return contentWidth && css(["display:inline-block;"]);
}, variant(alertVariants));

var Alert = function Alert(_ref) {
  var type = _ref.type,
      _ref$contentWidth = _ref.contentWidth,
      contentWidth = _ref$contentWidth === void 0 ? false : _ref$contentWidth,
      children = _ref.children;
  return React__default.createElement(StyledAlert, {
    role: "alert",
    type: type,
    contentWidth: contentWidth
  }, children);
};

var Anchor = styled.a.withConfig({
  displayName: "anchorcomponent__Anchor",
  componentId: "keen-ui-core__sc-lz5f60-0"
})(["&&&{color:", ";font-family:'Lato Bold',sans-serif;font-size:14px;line-height:16px;text-decoration:none;transition:all 0.2s linear;}&&&:hover{color:", ";}"], function (props) {
  return props.color;
}, function (props) {
  return props.hoverColor;
});
Anchor.defaultProps = {
  color: colors.blue['100'],
  hoverColor: colors.blue['200']
};

var createVariants = function createVariants(isActive) {
  var opacity = isActive ? 0.4 : 0.7;
  return {
    prop: 'variant',
    variants: {
      black: {
        color: colors.black[500],
        backgroundColor: transparentize(opacity, colors.black[100])
      },
      red: {
        color: colors.red[500],
        backgroundColor: transparentize(opacity, colors.red[100])
      },
      white: {
        color: colors.white[500],
        backgroundColor: transparentize(opacity, colors.white[200])
      },
      purple: {
        color: colors.purple[500],
        backgroundColor: transparentize(opacity, colors.purple[100])
      },
      orange: {
        color: colors.orange[500],
        backgroundColor: transparentize(opacity, colors.orange[100])
      },
      yellow: {
        color: colors.yellow[500],
        backgroundColor: transparentize(opacity, colors.yellow[100])
      },
      green: {
        color: colors.green[500],
        backgroundColor: transparentize(opacity, colors.green[100])
      },
      gray: {
        color: colors.black[100],
        backgroundColor: transparentize(opacity, colors.gray[500])
      },
      pink: {
        color: colors.pink[500],
        backgroundColor: transparentize(opacity, colors.pink[100])
      },
      lightBlue: {
        color: colors.lightBlue[500],
        backgroundColor: transparentize(opacity, colors.lightBlue[100])
      },
      blue: {
        color: colors.blue[500],
        backgroundColor: transparentize(opacity, colors.blue[100])
      }
    }
  };
};

var UI_LAYERS = {
  notification: 60,
  tooltip: 55,
  modal: 50,
  fixedBar: 40,
  dropdown: 20,
  element: 10
};
var TIME_UNITS = {
  minute: 'minutes',
  hour: 'hours',
  day: 'days',
  week: 'weeks',
  month: 'months',
  year: 'years'
};
var KEYBOARD_KEYS = {
  UP: 38,
  DOWN: 40,
  ENTER: 13,
  ESCAPE: 27
};

var Container$F = styled.div.withConfig({
  displayName: "badgestyles__Container",
  componentId: "keen-ui-core__sc-i92ibg-0"
})(["&&&{display:inline-flex;align-items:stretch;justify-content:center;position:relative;min-width:0;", ";", ";}"], function (props) {
  return props.isCSSTruncated && css(["max-width:inherit;"]);
}, function (props) {
  return props.pointer && css(["cursor:pointer;"]);
});
var TextWrapper = styled.span.withConfig({
  displayName: "badgestyles__TextWrapper",
  componentId: "keen-ui-core__sc-i92ibg-1"
})(["&&&{display:block;padding:2px 4px;font-family:'Lato Bold',sans-serif;font-size:13px;line-height:16px;white-space:nowrap;border-radius:", ";transition:background-color 0.3s ease-in-out;", ";", ";}"], function (props) {
  return props.removable ? '2px 0 0 2px' : '2px';
}, function (props) {
  return props.isTruncated && css(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
}, function (props) {
  return variant(createVariants(props.isActive));
});
var IconWrapper$1 = styled.div.withConfig({
  displayName: "badgestyles__IconWrapper",
  componentId: "keen-ui-core__sc-i92ibg-2"
})(["&&&{display:flex;align-items:center;justify-content:center;padding:2px 4px;margin-left:1px;border-radius:0 2px 2px 0;transition:background-color 0.3s ease-in-out;", ";}"], function (props) {
  return variant(createVariants(props.isActive));
});
var TooltipMotion = styled(motion.div).withConfig({
  displayName: "badgestyles__TooltipMotion",
  componentId: "keen-ui-core__sc-i92ibg-3"
})(["&&&{position:absolute;left:50%;top:10px;transform:translateX(-50%) translateY(50%);min-width:170px;z-index:", ";}"], UI_LAYERS.tooltip);

var truncate = function truncate(input) {
  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 25;
  if (input.length <= maxLength) return {
    value: input,
    isTruncated: false
  };
  var words = input.split(' ');
  var output = '';
  var numberOfOutputCharacters = 0;
  words.some(function (word, index) {
    var wordLength = word.length;
    numberOfOutputCharacters += wordLength;

    if (index > 0) {
      numberOfOutputCharacters += 1;
    }

    if (numberOfOutputCharacters <= maxLength) {
      output += addSpace(word, index);
    } else if (numberOfOutputCharacters > maxLength) {
      var numberOfCharactersExceeded = numberOfOutputCharacters - maxLength;
      var numberOfCharactersToShow = wordLength - numberOfCharactersExceeded;

      if (numberOfCharactersToShow < 2) {
        output += '...';
        return true;
      }

      output += addSpace(word.substring(0, numberOfCharactersToShow) + '...', index);
      return true;
    } else {
      output += '...';
      return true;
    }
  });
  return {
    value: output,
    isTruncated: true
  };
};

var addSpace = function addSpace(word, index) {
  if (index > 0) {
    return ' ' + word;
  }

  return word;
};

var calculateHypotenuseHeight = function calculateHypotenuseHeight(x, y) {
  return Math.sqrt(x * x + y * y);
};

var isElementInViewport = function isElementInViewport(element) {
  var _element$getBoundingC = element.getBoundingClientRect(),
      top = _element$getBoundingC.top;

  return top >= 0 && top < window.innerHeight;
};

var download = function download(content, fileName, fileType) {
  var a = document.createElement('a');
  var mimeType = fileType || 'application/octet-stream';

  if (navigator.msSaveBlob) {
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) {
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href = 'data:application/octet-stream,' + encodeURIComponent(content);
  }
};

var FILENAME = 'code-snippet';

var exportToHtml = function exportToHtml(_ref) {
  var data = _ref.data,
      _ref$fileName = _ref.fileName,
      fileName = _ref$fileName === void 0 ? FILENAME : _ref$fileName;
  var downloadFileName = fileName;
  var hasExtension = fileName.includes('.html');

  if (!hasExtension) {
    downloadFileName = "".concat(fileName, ".html");
  }

  download(data, downloadFileName, 'text/html;charset:utf-8');
};

var mutate = function mutate(array, from, to) {
  var startIndex = to < 0 ? array.length + to : to;

  if (startIndex >= 0 && startIndex < array.length) {
    var item = array.splice(from, 1)[0];
    array.splice(startIndex, 0, item);
  }

  return array;
};

var mutateArray = function mutateArray(array, from, to) {
  array = _toConsumableArray(array);
  mutate(array, from, to);
  return array;
};

var LIGHT_MODE_BACKGROUND = Color$2(colors.white['500']).fade(0.05).rgb().toString();
var DARK_MODE_BACKGROUND = Color$2(colors.black['200']).fade(0.05).rgb().toString();
var ARROW_SIZE = 4;
var Wrapper$3 = styled.div.withConfig({
  displayName: "tooltipcomponent__Wrapper",
  componentId: "keen-ui-core__sc-tulkl6-0"
})(["&&&{", ";box-sizing:border-box;background-color:", ";border-radius:", ";font-family:", ";font-size:", ";color:", ";line-height:", ";box-shadow:", ";position:relative;", ";}&&&::after{", ";content:'';position:absolute;width:0;height:0;box-sizing:border-box;border:", "px solid ", ";box-shadow:", ";", ";}"], function (props) {
  return props.hasSpacing && css(["padding:10px 15px;"]);
}, function (props) {
  return props.backgroundColor;
}, function (props) {
  return props.borderRadius;
}, function (props) {
  return props.fontFamily;
}, function (props) {
  return props.fontSize + 'px';
}, function (props) {
  return props.fontColor;
}, function (props) {
  return props.lineHeight;
}, function (props) {
  return props.hasShadow ? '0 10px 24px 0 rgba(29, 39, 41, 0.15)' : 'none';
}, variant({
  prop: 'mode',
  variants: {
    light: {
      backgroundColor: LIGHT_MODE_BACKGROUND,
      color: colors.black['200']
    },
    dark: {
      backgroundColor: DARK_MODE_BACKGROUND,
      color: colors.white['500']
    }
  }
}), function (props) {
  return !props.hasArrow && css(["display:none;"]);
}, ARROW_SIZE, function (props) {
  return props.backgroundColor;
}, function (props) {
  return props.hasShadow ? '-3px 3px 24px 0 rgba(29, 39, 41, 0.15)' : 'none';
}, function (props) {
  var arrowColor = props.backgroundColor;

  switch (props.mode) {
    case 'light':
      arrowColor = LIGHT_MODE_BACKGROUND;
      break;

    case 'dark':
      arrowColor = DARK_MODE_BACKGROUND;
      break;
  }

  return variant({
    prop: 'arrowDirection',
    variants: {
      left: {
        borderColor: "".concat(arrowColor, " transparent transparent ").concat(arrowColor),
        top: "".concat(props.arrowTop ? props.arrowTop : '50%'),
        bottom: 'auto',
        left: '1px',
        right: 'auto',
        transform: "rotate(-45deg) translateY(-50%) translateY(-".concat(ARROW_SIZE / 2, "px)")
      },
      right: {
        borderColor: "transparent ".concat(arrowColor, " ").concat(arrowColor, " transparent"),
        top: "".concat(props.arrowTop ? props.arrowTop : '50%'),
        bottom: 'auto',
        right: "-".concat(Math.floor(calculateHypotenuseHeight(ARROW_SIZE, ARROW_SIZE)), "px"),
        transform: "rotate(-45deg) translateY(-50%) translateX(".concat(ARROW_SIZE / 2, "px)")
      },
      top: {
        borderColor: "".concat(arrowColor, " ").concat(arrowColor, " transparent transparent"),
        top: "-".concat(Math.floor(calculateHypotenuseHeight(ARROW_SIZE, ARROW_SIZE)), "px"),
        bottom: 'auto',
        left: '50%',
        right: 'auto',
        transform: "rotate(-45deg) translateX(-50%) translateY(-".concat(ARROW_SIZE / 2, "px)")
      },
      bottom: {
        borderColor: "transparent transparent ".concat(arrowColor, " ").concat(arrowColor),
        top: 'auto',
        bottom: '1px',
        left: '50%',
        right: 'auto',
        transform: "rotate(-45deg) translateX(-50%) translateX(-".concat(ARROW_SIZE / 2, "px)")
      }
    }
  });
});

var Tooltip = function Tooltip(_ref) {
  var children = _ref.children,
      mode = _ref.mode,
      arrowDirection = _ref.arrowDirection,
      props = _objectWithoutProperties(_ref, ["children", "mode", "arrowDirection"]);

  return React__default.createElement(Wrapper$3, Object.assign({
    mode: mode,
    arrowDirection: arrowDirection
  }, props), children);
};

Tooltip.defaultProps = {
  backgroundColor: colors.white['500'],
  fontColor: colors.black['200'],
  fontSize: 14,
  fontFamily: "'Lato Regular',sans-serif",
  mode: 'light',
  borderRadius: '0px',
  hasShadow: true,
  hasArrow: true,
  hasSpacing: true,
  arrowDirection: 'bottom',
  lineHeight: 'initial'
};

var Badge = function Badge(_ref) {
  var children = _ref.children,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'purple' : _ref$variant,
      removable = _ref.removable,
      onClick = _ref.onClick,
      onRemove = _ref.onRemove,
      truncate$1 = _ref.truncate,
      _ref$truncateMethod = _ref.truncateMethod,
      truncateMethod = _ref$truncateMethod === void 0 ? 'programmatical' : _ref$truncateMethod;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isActive = _useState2[0],
      setActive = _useState2[1];

  var tooltipMotion = {
    initial: {
      opacity: 0
    },
    animate: {
      opacity: 1
    },
    exit: {
      opacity: 0
    }
  };
  var isCSSTruncated = truncateMethod === 'css';
  var isTruncated = truncate$1;
  var truncatedLabel = children;

  if (truncate$1 && typeof children === 'string' && truncateMethod === 'programmatical') {
    var truncateResult = truncate(children);
    isTruncated = truncateResult.isTruncated;
    truncatedLabel = truncateResult.value;
  }

  return React__default.createElement(Container$F, {
    onMouseEnter: function onMouseEnter() {
      return onClick && setActive(true);
    },
    onMouseLeave: function onMouseLeave() {
      return onClick && setActive(false);
    },
    pointer: !!onClick,
    isCSSTruncated: isCSSTruncated
  }, React__default.createElement(TextWrapper, {
    variant: variant,
    isActive: isActive,
    removable: removable,
    onClick: onClick,
    isTruncated: isCSSTruncated
  }, isTruncated ? truncatedLabel : children), removable && React__default.createElement(IconWrapper$1, {
    variant: variant,
    isActive: isActive,
    onClick: onRemove,
    "data-testid": "badge-remove"
  }, React__default.createElement(Icon, {
    type: "close",
    fill: "currentColor",
    opacity: 0.5,
    width: 8,
    height: 8
  })), isTruncated && React__default.createElement(AnimatePresence, null, isActive && React__default.createElement(TooltipMotion, Object.assign({}, tooltipMotion), React__default.createElement(Tooltip, {
    arrowDirection: "top"
  }, children))));
};

var createOutlineButton = function createOutlineButton(baseColor) {
  return {
    backgroundColor: 'transparent',
    border: "solid 1px ".concat(baseColor),
    color: baseColor,
    boxShadow: "0 2px 4px 0 ".concat(transparentize(0.85, colors.black['500'])),
    '&:hover': {
      boxShadow: 'none',
      color: colors.white['500'],
      backgroundColor: baseColor
    }
  };
};

var outlineVariants = {
  prop: 'variant',
  variants: {
    primary: createOutlineButton(colors.yellow['400']),
    success: createOutlineButton(colors.green['300']),
    secondary: createOutlineButton(colors.blue['500']),
    danger: createOutlineButton(colors.red['500'])
  }
};
var sizeVariants = {
  prop: 'size',
  variants: {
    default: {
      fontSize: '15px',
      height: '37px'
    },
    small: {
      fontSize: '14px',
      height: '27px'
    },
    large: {
      fontSize: '15px',
      height: '45px'
    }
  }
};
var activeVariants = {
  prop: 'variant',
  variants: {
    blank: {
      boxShadow: 'none',
      backgroundColor: transparentize(0.8, colors.blue['100'])
    }
  }
};
var disabledVariants = {
  prop: 'variant',
  variants: {
    secondary: {
      color: transparentize(0.5, colors.white['500']),
      backgroundColor: transparentize(0.5, colors.blue['500']),
      boxShadow: 'none',
      '&:hover': {
        color: transparentize(0.5, colors.white['500']),
        backgroundColor: transparentize(0.5, colors.blue['500']),
        boxShadow: 'none'
      }
    },
    success: {
      opacity: 0.5,
      pointerEvents: 'none'
    }
  }
};

var buttonMixin = function buttonMixin() {
  return css(["font-family:'Lato Bold',sans-serif;text-decoration:none;border-radius:25px;padding:0 25px;outline:none;border:none;cursor:pointer;align-items:center;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;&:hover{text-decoration:none;}&:focus-visible{outline:1px solid ", ";}"], colors.lightBlue[500]);
};

var StyledButton$2 = styled.button.withConfig({
  displayName: "buttonstyles__StyledButton",
  componentId: "keen-ui-core__sc-17t931m-0"
})(["&&&{display:flex;", ";", ";", ";", ";", ";", ";", ";", ";}"], function (props) {
  return props.fullWidth && css(["width:100%;justify-content:center;"]);
}, buttonMixin(), function (props) {
  return props.body === 'solid' && variant(solidButtonVariants);
}, function (props) {
  return props.body === 'outline' && variant(outlineVariants);
}, function (props) {
  return props.isActive && variant(activeVariants);
}, function (props) {
  return props.isDisabled && variant(disabledVariants);
}, function (props) {
  return props.isDisabled && css(["cursor:not-allowed;"]);
}, variant(sizeVariants));
var StyledAnchor = styled.a.withConfig({
  displayName: "buttonstyles__StyledAnchor",
  componentId: "keen-ui-core__sc-17t931m-1"
})(["&&&{display:inline-flex;", ";", ";", ";", ";", ";}"], function (props) {
  return props.fullWidth && css(["width:100%;justify-content:center;"]);
}, buttonMixin(), function (props) {
  return props.body === 'solid' && variant(solidButtonVariants);
}, function (props) {
  return props.body === 'outline' && variant(outlineVariants);
}, variant(sizeVariants));
var IconSocket$3 = styled.div.withConfig({
  displayName: "buttonstyles__IconSocket",
  componentId: "keen-ui-core__sc-17t931m-2"
})(["&&&{display:flex;align-items:center;margin-left:15px;}"]);

var Button = function Button(_ref) {
  var children = _ref.children,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
      _onClick = _ref.onClick,
      href = _ref.href,
      _ref$target = _ref.target,
      target = _ref$target === void 0 ? '_blank' : _ref$target,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
      _ref$isActive = _ref.isActive,
      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
      _ref$htmlType = _ref.htmlType,
      htmlType = _ref$htmlType === void 0 ? 'button' : _ref$htmlType,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'default' : _ref$size,
      _ref$style = _ref.style,
      style = _ref$style === void 0 ? 'solid' : _ref$style,
      icon = _ref.icon,
      _ref$fullWidth = _ref.fullWidth,
      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth;

  if (href) {
    return React__default.createElement(StyledAnchor, {
      "data-testid": "button",
      isDisabled: isDisabled,
      isActive: isActive,
      variant: variant,
      size: size,
      href: href,
      body: style,
      target: target,
      fullWidth: fullWidth,
      onClick: function onClick(e) {
        return !isDisabled && _onClick && _onClick(e);
      }
    }, children, icon && React__default.createElement(IconSocket$3, null, icon));
  }

  return React__default.createElement(StyledButton$2, {
    "data-testid": "button",
    isDisabled: isDisabled,
    isActive: isActive,
    type: htmlType,
    variant: variant,
    body: style,
    size: size,
    fullWidth: fullWidth,
    onClick: function onClick(e) {
      return !isDisabled && _onClick && _onClick(e);
    }
  }, children, icon && React__default.createElement(IconSocket$3, {
    "data-testid": "button-icon-socket"
  }, icon));
};

var StyledButton$1 = styled.button.withConfig({
  displayName: "action-buttonstyles__StyledButton",
  componentId: "keen-ui-core__sc-xko9nr-0"
})(["&&&{display:flex;text-decoration:none;border-radius:", ";background-color:", ";padding:5px 11px;width:37px;height:37px;outline:none;border:none;cursor:pointer;align-items:center;justify-content:center;transition:background-color 0.15s ease-in-out;}", " &&&:hover{text-decoration:none;background-color:", ";}&&&:focus-visible{outline:1px solid ", ";}"], function (props) {
  return props.borderRadius ? props.borderRadius : '4px';
}, function (props) {
  return props.background ? props.background : transparentize(0.85, colors.blue['100']);
}, function (props) {
  return props.isDisabled && css(["opacity:0.5;pointer-events:none;"]);
}, function (props) {
  return props.backgroundHover ? props.backgroundHover : transparentize(0.75, colors.blue['100']);
}, colors.lightBlue[500]);
var StyledIcon = styled.span.withConfig({
  displayName: "action-buttonstyles__StyledIcon",
  componentId: "keen-ui-core__sc-xko9nr-1"
})(["&&&{font-family:'Lato Regular',sans-serif;font-size:25px;line-height:30px;", ";", ";}"], function (props) {
  return props.action === 'create' && css(["color:", ";"], colors.green['500']);
}, function (props) {
  return props.action === 'remove' && css(["color:", ";"], colors.red['200']);
});

var ActionButton = function ActionButton(_ref) {
  var _onClick = _ref.onClick,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
      action = _ref.action,
      borderRadius = _ref.borderRadius,
      background = _ref.background,
      backgroundHover = _ref.backgroundHover,
      className = _ref.className;
  return React__default.createElement(StyledButton$1, {
    "data-testid": "action-button",
    className: className,
    isDisabled: isDisabled,
    borderRadius: borderRadius,
    background: background,
    backgroundHover: backgroundHover,
    type: "button",
    onClick: function onClick(e) {
      return !isDisabled && _onClick && _onClick(e, action);
    }
  }, React__default.createElement(StyledIcon, {
    "data-testid": "action-icon",
    action: action
  }, action === 'create' ? '+' : '×'));
};

var StyledButton = styled.button.withConfig({
  displayName: "circle-buttonstyles__StyledButton",
  componentId: "keen-ui-core__sc-67vj46-0"
})(["&&&{display:flex;text-decoration:none;border-radius:50%;padding:0;width:37px;height:37px;outline:none;border:none;cursor:pointer;align-items:center;justify-content:center;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;", ";", ";}&&&:hover{text-decoration:none;}"], function (props) {
  return props.isDisabled && css(["opacity:0.85;pointer-events:none;"]);
}, variant(solidButtonVariants));
var IconSocket$2 = styled.div.withConfig({
  displayName: "circle-buttonstyles__IconSocket",
  componentId: "keen-ui-core__sc-67vj46-1"
})(["&&&{display:flex;align-items:center;line-height:1;}"]);

var CircleButton = function CircleButton(_ref) {
  var icon = _ref.icon,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
      _onClick = _ref.onClick,
      _ref$variant = _ref.variant,
      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
  return React__default.createElement(StyledButton, {
    "data-testid": "circle-button",
    isDisabled: isDisabled,
    type: "button",
    variant: variant,
    onClick: function onClick(e) {
      return !isDisabled && _onClick && _onClick(e);
    }
  }, React__default.createElement(IconSocket$2, null, icon));
};

var StyledBulletList = styled.ul.withConfig({
  displayName: "bullet-liststyles__StyledBulletList",
  componentId: "keen-ui-core__sc-1gw8lkh-0"
})(["&&&{margin:0;padding:0;list-style:none;}"]);
var StyledBulletItem = styled.li.withConfig({
  displayName: "bullet-liststyles__StyledBulletItem",
  componentId: "keen-ui-core__sc-1gw8lkh-1"
})(["&&&{display:flex;flex-wrap:nowrap;white-space:nowrap;align-items:center;}&&& ~ &&&{margin-top:11px;}"]);
var BulletPoint = styled.div.withConfig({
  displayName: "bullet-liststyles__BulletPoint",
  componentId: "keen-ui-core__sc-1gw8lkh-2"
})(["&&&{width:8px;height:8px;margin-right:6px;border-radius:50%;background-color:", ";flex-shrink:0;}"], function (props) {
  return props.color;
});

var BulletList = function BulletList(_ref) {
  var items = _ref.items,
      renderItem = _ref.renderItem;
  return React__default.createElement(StyledBulletList, null, items.map(function (item, idx) {
    return React__default.createElement(StyledBulletItem, {
      key: "".concat(item.color, ".").concat(idx)
    }, React__default.createElement(BulletPoint, {
      color: item.color
    }), renderItem(idx, item));
  }));
};

var Card = styled.div.withConfig({
  displayName: "cardcomponent__Card",
  componentId: "keen-ui-core__sc-1tt2tf2-0"
})(["&&&{display:flex;flex-direction:column;height:100%;box-sizing:border-box;padding:", "px;border:", ";", ";", ";}"], function (props) {
  return props.padding;
}, function (props) {
  return "".concat(props.borderWidth, "px solid transparent");
}, function (props) {
  return props.hideOverflow && css(["overflow:hidden;"]);
}, function (props) {
  return props.enabled && css(["background:", ";border:", ";border-radius:", "px;box-shadow:", ";"], function (props) {
    return props.backgroundColor;
  }, function (props) {
    return "".concat(props.borderWidth, "px solid ").concat(props.borderColor);
  }, function (props) {
    return props.borderRadius;
  }, function (props) {
    return props.hasShadow ? '0px 2px 4px 0px rgba(29,39,41,0.15)' : 'none';
  });
});
Card.defaultProps = {
  enabled: true,
  backgroundColor: colors.white['500'],
  hasShadow: true,
  padding: 20,
  borderWidth: 0,
  borderColor: 'initial',
  borderRadius: 0
};

var Container$E = styled.div.withConfig({
  displayName: "checkboxstyles__Container",
  componentId: "keen-ui-core__sc-m98fwk-0"
})(["&&&{", ";vertical-align:middle;line-height:1;}&&&:focus-visible{outline:1px solid ", ";}"], layout, colors.lightBlue[500]);
var iconSocketVariants = {
  prop: 'type',
  variants: {
    primary: {
      bottom: '0'
    },
    secondary: {
      left: '1px',
      bottom: '0'
    },
    highlight: {
      left: '1px',
      bottom: '0'
    }
  }
};
var IconSocket$1 = styled(motion.div).withConfig({
  displayName: "checkboxstyles__IconSocket",
  componentId: "keen-ui-core__sc-m98fwk-1"
})(["&&&{position:absolute;height:15px;line-height:1;box-sizing:content-box;", ";}"], variant(iconSocketVariants));
var checkboxVariants = {
  prop: 'type',
  variants: {
    primary: {
      border: "solid 1px ".concat(colors.blue['500']),
      borderRadius: '2px',
      width: '12px',
      height: '12px'
    },
    secondary: {
      border: "solid 1px ".concat(transparentize(0.8, colors.blue['500'])),
      background: transparentize(0.95, colors.blue['100']),
      borderRadius: '4px',
      width: '15px',
      height: '15px'
    },
    highlight: {
      border: "solid 1px ".concat(transparentize(0.8, colors.gray['100'])),
      background: transparentize(0.8, colors.white['400']),
      borderRadius: '4px',
      width: '15px',
      height: '15px'
    }
  }
};
var activeCheckboxVariants = {
  prop: 'type',
  variants: {
    primary: {},
    secondary: {},
    highlight: {
      border: "solid 1px ".concat(transparentize(0.7, colors.gray['100'])),
      background: transparentize(0.25, colors.white['400'])
    }
  }
};
var StyledCheckbox = styled.div.withConfig({
  displayName: "checkboxstyles__StyledCheckbox",
  componentId: "keen-ui-core__sc-m98fwk-2"
})(["&&&{position:relative;display:inline-block;box-sizing:content-box;", ";", ";}"], variant(checkboxVariants), function (props) {
  return props.checked && variant(activeCheckboxVariants);
});
var HiddenInput = styled.input.attrs({
  type: 'checkbox'
}).withConfig({
  displayName: "checkboxstyles__HiddenInput",
  componentId: "keen-ui-core__sc-m98fwk-3"
})(["&&&{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}"]);

var checkMotion = {
  initial: {
    opacity: 0
  },
  transition: {
    duration: 0.2
  },
  animate: {
    opacity: 1
  },
  exit: {
    opacity: 0
  }
};
var Checkbox = function Checkbox(_ref) {
  var id = _ref.id,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? 'primary' : _ref$type,
      _ref$display = _ref.display,
      display = _ref$display === void 0 ? 'inline-block' : _ref$display,
      _onChange = _ref.onChange,
      _ref$checked = _ref.checked,
      checked = _ref$checked === void 0 ? false : _ref$checked,
      _ref$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
  return React__default.createElement(Container$E, {
    role: "checkbox",
    display: display,
    tabIndex: 0,
    onKeyPress: function onKeyPress(e) {
      return _onChange && _onChange(e);
    }
  }, React__default.createElement(HiddenInput, {
    id: id,
    checked: checked,
    disabled: disabled,
    onChange: function onChange(e) {
      return _onChange && _onChange(e);
    }
  }), React__default.createElement(StyledCheckbox, {
    checked: checked,
    type: type
  }, React__default.createElement(AnimatePresence, null, checked && React__default.createElement(IconSocket$1, Object.assign({
    type: type
  }, checkMotion), React__default.createElement(Icon, {
    type: "check",
    width: type === 'primary' ? 15 : 13,
    height: type === 'primary' ? 15 : 13,
    fill: colors.green['400']
  })))));
};

var Container$D = styled.div.withConfig({
  displayName: "radiostyles__Container",
  componentId: "keen-ui-core__sc-1js3bxa-0"
})(["&&&{border-radius:8.5px;border:solid 1px ", ";background:", ";width:17px;height:17px;display:flex;justify-content:center;align-items:center;cursor:pointer;}"], transparentize(0.8, colors.blue[500]), transparentize(0.95, colors.blue[100]));
var ActiveDot = styled(motion.div).withConfig({
  displayName: "radiostyles__ActiveDot",
  componentId: "keen-ui-core__sc-1js3bxa-1"
})(["&&&{height:9px;width:9px;border-radius:50%;background:", ";}"], colors.green[300]);

var activeMotion = {
  initial: {
    scale: 0
  },
  animate: {
    scale: 1
  },
  exit: {
    scale: 0
  }
};

var Radio = function Radio(_ref) {
  var isActive = _ref.isActive,
      onClick = _ref.onClick;
  return React__default.createElement(Container$D, {
    onClick: onClick,
    role: "radio",
    "aria-checked": isActive
  }, React__default.createElement(AnimatePresence, null, isActive && React__default.createElement(ActiveDot, Object.assign({
    "data-testid": "radio-active"
  }, activeMotion))));
};

var THRESHOLD = {
  LIGHT: 75,
  DARK: 25
};
var ColorAdjuster = function ColorAdjuster(_ref) {
  var children = _ref.children,
      baseColor = _ref.baseColor;
  var adjustedColor = useMemo(function () {
    var color = Color$2(baseColor);

    var _color$hsl$array = color.hsl().array(),
        _color$hsl$array2 = _slicedToArray(_color$hsl$array, 3),
        hue = _color$hsl$array2[0],
        saturation = _color$hsl$array2[1],
        lightness = _color$hsl$array2[2];

    var lightnessModifier = 0;

    if (color.isLight()) {
      lightnessModifier = lightness > THRESHOLD.LIGHT ? 20 : 15;
    } else {
      lightnessModifier = lightness > THRESHOLD.DARK ? 85 : 80;
    }

    return Color$2.hsl([hue, saturation, lightnessModifier]).toString();
  }, [baseColor]);
  return React__default.createElement(React__default.Fragment, null, children(adjustedColor));
};

var stringifyColors = function stringifyColors(colors$1, zeroPoint) {
  var newColors = colors$1.map(function (color) {
    if (color === colors.white[500]) return "".concat(color, " ").concat(zeroPoint, "%");
    return color;
  });
  return newColors.join(', ');
};

var calculateIntervalValue = function calculateIntervalValue(_ref) {
  var controlPosition = _ref.controlPosition,
      currentIndex = _ref.currentIndex,
      stepDimension = _ref.stepDimension,
      interval = _ref.interval;
  var dimensionOffset = currentIndex * stepDimension;
  var absoluteIntervalPosition = (controlPosition - dimensionOffset) / stepDimension * 100;
  var minimum = interval.minimum,
      maximum = interval.maximum,
      step = interval.step;
  var stepsInInterval = (maximum - minimum) / step;
  var intervalValue = Math.round(absoluteIntervalPosition * stepsInInterval / 100);
  return intervalValue * step + minimum;
};
var getIndex = function getIndex(x, stepDimension) {
  var index = Math.floor(x / stepDimension);

  if (x !== 0 && x % stepDimension === 0) {
    index -= 1;
  }

  return index;
};
var getInitialOffset = function getInitialOffset(initialValue, stepDimension, intervals) {
  var offset = initialValue;
  var index = 0;
  intervals.forEach(function (interval, idx) {
    if (initialValue > interval.minimum && initialValue <= interval.maximum) {
      offset = initialValue * stepDimension / interval.maximum + stepDimension * idx;
      index = idx;
    }
  });
  return {
    offset: offset,
    index: index
  };
};

var arrowReverse = function arrowReverse(position) {
  switch (position) {
    case 'top':
      return 'bottom';

    case 'left':
      return 'right';

    case 'right':
      return 'left';

    case 'bottom':
      return 'top';

    default:
      return position;
  }
};

var Rail = function Rail(_ref) {
  var type = _ref.type,
      colors = _ref.colors,
      zeroPoint = _ref.zeroPoint,
      borderRadius = _ref.borderRadius,
      size = _ref.size;
  var gradientAngle = type === 'horizontal' ? 90 : 180;
  var layoutStyles = type === 'horizontal' ? {
    width: '100%',
    height: "".concat(size, "px"),
    top: '50%',
    transform: 'translateY(-50%)'
  } : {
    height: '100%',
    width: "".concat(size, "px"),
    left: '50%',