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

Keen visual components library

'use strict';

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

var React = require('react');
var colors = require('@keen.io/colors');
var styled = require('styled-components');
var styledSystem = require('styled-system');
var polished = require('polished');
var framerMotion = require('framer-motion');
var icons = require('@keen.io/icons');
var Color$2 = require('color');
var chartsUtils = require('@keen.io/charts-utils');
var Sortable = require('sortablejs');
var reactHooks = require('@keen.io/react-hooks');
var reactColor = require('react-color');
var ReactDOM = require('react-dom');
var ReactSelect = require('react-select');
var typography = require('@keen.io/typography');
var reactIntersectionObserver = require('react-intersection-observer');
var Measure = require('react-measure');
var dayjs = require('dayjs');
var Calendar = require('react-calendar');
var reactWindow = require('react-window');
var reactVtree = require('react-vtree');

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

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color$2);
var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var ReactSelect__default = /*#__PURE__*/_interopDefaultLegacy(ReactSelect);
var Measure__default = /*#__PURE__*/_interopDefaultLegacy(Measure);
var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var Calendar__default = /*#__PURE__*/_interopDefaultLegacy(Calendar);

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__default["default"].div.withConfig({
  displayName: "textcomponent__BaseText",
  componentId: "keen-ui-core__sc-13re0gd-0"
})(["&&&{", ";color:", ";margin:0;padding:0;", ";}"], styledSystem.typography, function (props) {
  return props.fontColor;
}, function (props) {
  return props.truncate && styled.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["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.colors.yellow['400'],
      borderColor: colors.colors.yellow['400'],
      color: colors.colors.black['500'],
      '&:focus': {
        boxShadow: "0 0 0 0.2rem rgba(218,165,80, .5)"
      },
      '&:hover': {
        color: colors.colors.black['400'],
        backgroundColor: colors.colors.yellow['500']
      }
    },
    secondary: {
      backgroundColor: colors.colors.blue['500'],
      borderColor: colors.colors.blue['500'],
      color: colors.colors.white['500'],
      boxShadow: "0 2px 4px 0 ".concat(polished.transparentize(0.85, colors.colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.colors.blue['400']
      }
    },
    danger: {
      backgroundColor: colors.colors.red['500'],
      borderColor: colors.colors.red['500'],
      color: colors.colors.white['500'],
      boxShadow: "0 1px 4px 0 ".concat(polished.transparentize(0.85, colors.colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.colors.red['300']
      }
    },
    success: {
      backgroundColor: colors.colors.green['300'],
      borderColor: colors.colors.green['300'],
      color: colors.colors.white['500'],
      boxShadow: "0 1px 4px 0 ".concat(polished.transparentize(0.85, colors.colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: colors.colors.green['400']
      }
    },
    blank: {
      backgroundColor: colors.colors.white['500'],
      color: colors.colors.blue['500'],
      boxShadow: "0 1px 4px 0 ".concat(polished.transparentize(0.85, colors.colors.black['500'])),
      '&:hover': {
        boxShadow: 'none',
        backgroundColor: polished.transparentize(0.8, colors.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.colors.black['100'] : _ref$color;
  var typography = textVariants[variant];
  return React__default["default"].createElement(BaseText, Object.assign({
    as: HTML_ELEMENTS.includes(variant) ? variant : 'div',
    fontColor: color
  }, typography), children);
};

var RefText = React.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["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 Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('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) {
  React.useEffect(function () {
    FontLoaderInstance.loadFont(fontFamilies);
  }, [fontFamilies]);
  return FontLoaderInstance.getActiveFonts();
};

var CDNContext = React__default["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.colors.green['500'],
      borderColor: colors.colors.green['400'],
      background: polished.transparentize(0.8, colors.colors.green['100'])
    },
    error: {
      color: colors.colors.red['500'],
      borderColor: colors.colors.red['500'],
      background: polished.transparentize(0.6, colors.colors.red['100'])
    },
    info: {
      color: colors.colors.blue['500'],
      borderColor: colors.colors.blue['200'],
      background: polished.transparentize(0.6, colors.colors.lightBlue['300'])
    }
  }
};
var StyledAlert = styled__default["default"].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 && styled.css(["display:inline-block;"]);
}, styledSystem.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["default"].createElement(StyledAlert, {
    role: "alert",
    type: type,
    contentWidth: contentWidth
  }, children);
};

var Anchor = styled__default["default"].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.colors.blue['100'],
  hoverColor: colors.colors.blue['200']
};

var createVariants = function createVariants(isActive) {
  var opacity = isActive ? 0.4 : 0.7;
  return {
    prop: 'variant',
    variants: {
      black: {
        color: colors.colors.black[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.black[100])
      },
      red: {
        color: colors.colors.red[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.red[100])
      },
      white: {
        color: colors.colors.white[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.white[200])
      },
      purple: {
        color: colors.colors.purple[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.purple[100])
      },
      orange: {
        color: colors.colors.orange[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.orange[100])
      },
      yellow: {
        color: colors.colors.yellow[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.yellow[100])
      },
      green: {
        color: colors.colors.green[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.green[100])
      },
      gray: {
        color: colors.colors.black[100],
        backgroundColor: polished.transparentize(opacity, colors.colors.gray[500])
      },
      pink: {
        color: colors.colors.pink[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.pink[100])
      },
      lightBlue: {
        color: colors.colors.lightBlue[500],
        backgroundColor: polished.transparentize(opacity, colors.colors.lightBlue[100])
      },
      blue: {
        color: colors.colors.blue[500],
        backgroundColor: polished.transparentize(opacity, colors.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__default["default"].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 && styled.css(["max-width:inherit;"]);
}, function (props) {
  return props.pointer && styled.css(["cursor:pointer;"]);
});
var TextWrapper = styled__default["default"].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 && styled.css(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
}, function (props) {
  return styledSystem.variant(createVariants(props.isActive));
});
var IconWrapper$1 = styled__default["default"].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 styledSystem.variant(createVariants(props.isActive));
});
var TooltipMotion = styled__default["default"](framerMotion.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__default["default"](colors.colors.white['500']).fade(0.05).rgb().toString();
var DARK_MODE_BACKGROUND = Color__default["default"](colors.colors.black['200']).fade(0.05).rgb().toString();
var ARROW_SIZE = 4;
var Wrapper$3 = styled__default["default"].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 && styled.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';
}, styledSystem.variant({
  prop: 'mode',
  variants: {
    light: {
      backgroundColor: LIGHT_MODE_BACKGROUND,
      color: colors.colors.black['200']
    },
    dark: {
      backgroundColor: DARK_MODE_BACKGROUND,
      color: colors.colors.white['500']
    }
  }
}), function (props) {
  return !props.hasArrow && styled.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 styledSystem.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["default"].createElement(Wrapper$3, Object.assign({
    mode: mode,
    arrowDirection: arrowDirection
  }, props), children);
};

Tooltip.defaultProps = {
  backgroundColor: colors.colors.white['500'],
  fontColor: colors.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 = React.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["default"].createElement(Container$F, {
    onMouseEnter: function onMouseEnter() {
      return onClick && setActive(true);
    },
    onMouseLeave: function onMouseLeave() {
      return onClick && setActive(false);
    },
    pointer: !!onClick,
    isCSSTruncated: isCSSTruncated
  }, React__default["default"].createElement(TextWrapper, {
    variant: variant,
    isActive: isActive,
    removable: removable,
    onClick: onClick,
    isTruncated: isCSSTruncated
  }, isTruncated ? truncatedLabel : children), removable && React__default["default"].createElement(IconWrapper$1, {
    variant: variant,
    isActive: isActive,
    onClick: onRemove,
    "data-testid": "badge-remove"
  }, React__default["default"].createElement(icons.Icon, {
    type: "close",
    fill: "currentColor",
    opacity: 0.5,
    width: 8,
    height: 8
  })), isTruncated && React__default["default"].createElement(framerMotion.AnimatePresence, null, isActive && React__default["default"].createElement(TooltipMotion, Object.assign({}, tooltipMotion), React__default["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(polished.transparentize(0.85, colors.colors.black['500'])),
    '&:hover': {
      boxShadow: 'none',
      color: colors.colors.white['500'],
      backgroundColor: baseColor
    }
  };
};

var outlineVariants = {
  prop: 'variant',
  variants: {
    primary: createOutlineButton(colors.colors.yellow['400']),
    success: createOutlineButton(colors.colors.green['300']),
    secondary: createOutlineButton(colors.colors.blue['500']),
    danger: createOutlineButton(colors.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: polished.transparentize(0.8, colors.colors.blue['100'])
    }
  }
};
var disabledVariants = {
  prop: 'variant',
  variants: {
    secondary: {
      color: polished.transparentize(0.5, colors.colors.white['500']),
      backgroundColor: polished.transparentize(0.5, colors.colors.blue['500']),
      boxShadow: 'none',
      '&:hover': {
        color: polished.transparentize(0.5, colors.colors.white['500']),
        backgroundColor: polished.transparentize(0.5, colors.colors.blue['500']),
        boxShadow: 'none'
      }
    },
    success: {
      opacity: 0.5,
      pointerEvents: 'none'
    }
  }
};

var buttonMixin = function buttonMixin() {
  return styled.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.colors.lightBlue[500]);
};

var StyledButton$2 = styled__default["default"].button.withConfig({
  displayName: "buttonstyles__StyledButton",
  componentId: "keen-ui-core__sc-17t931m-0"
})(["&&&{display:flex;", ";", ";", ";", ";", ";", ";", ";", ";}"], function (props) {
  return props.fullWidth && styled.css(["width:100%;justify-content:center;"]);
}, buttonMixin(), function (props) {
  return props.body === 'solid' && styledSystem.variant(solidButtonVariants);
}, function (props) {
  return props.body === 'outline' && styledSystem.variant(outlineVariants);
}, function (props) {
  return props.isActive && styledSystem.variant(activeVariants);
}, function (props) {
  return props.isDisabled && styledSystem.variant(disabledVariants);
}, function (props) {
  return props.isDisabled && styled.css(["cursor:not-allowed;"]);
}, styledSystem.variant(sizeVariants));
var StyledAnchor = styled__default["default"].a.withConfig({
  displayName: "buttonstyles__StyledAnchor",
  componentId: "keen-ui-core__sc-17t931m-1"
})(["&&&{display:inline-flex;", ";", ";", ";", ";", ";}"], function (props) {
  return props.fullWidth && styled.css(["width:100%;justify-content:center;"]);
}, buttonMixin(), function (props) {
  return props.body === 'solid' && styledSystem.variant(solidButtonVariants);
}, function (props) {
  return props.body === 'outline' && styledSystem.variant(outlineVariants);
}, styledSystem.variant(sizeVariants));
var IconSocket$3 = styled__default["default"].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["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["default"].createElement(IconSocket$3, null, icon));
  }

  return React__default["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["default"].createElement(IconSocket$3, {
    "data-testid": "button-icon-socket"
  }, icon));
};

var StyledButton$1 = styled__default["default"].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 : polished.transparentize(0.85, colors.colors.blue['100']);
}, function (props) {
  return props.isDisabled && styled.css(["opacity:0.5;pointer-events:none;"]);
}, function (props) {
  return props.backgroundHover ? props.backgroundHover : polished.transparentize(0.75, colors.colors.blue['100']);
}, colors.colors.lightBlue[500]);
var StyledIcon = styled__default["default"].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' && styled.css(["color:", ";"], colors.colors.green['500']);
}, function (props) {
  return props.action === 'remove' && styled.css(["color:", ";"], colors.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["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["default"].createElement(StyledIcon, {
    "data-testid": "action-icon",
    action: action
  }, action === 'create' ? '+' : '×'));
};

var StyledButton = styled__default["default"].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 && styled.css(["opacity:0.85;pointer-events:none;"]);
}, styledSystem.variant(solidButtonVariants));
var IconSocket$2 = styled__default["default"].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["default"].createElement(StyledButton, {
    "data-testid": "circle-button",
    isDisabled: isDisabled,
    type: "button",
    variant: variant,
    onClick: function onClick(e) {
      return !isDisabled && _onClick && _onClick(e);
    }
  }, React__default["default"].createElement(IconSocket$2, null, icon));
};

var StyledBulletList = styled__default["default"].ul.withConfig({
  displayName: "bullet-liststyles__StyledBulletList",
  componentId: "keen-ui-core__sc-1gw8lkh-0"
})(["&&&{margin:0;padding:0;list-style:none;}"]);
var StyledBulletItem = styled__default["default"].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__default["default"].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["default"].createElement(StyledBulletList, null, items.map(function (item, idx) {
    return React__default["default"].createElement(StyledBulletItem, {
      key: "".concat(item.color, ".").concat(idx)
    }, React__default["default"].createElement(BulletPoint, {
      color: item.color
    }), renderItem(idx, item));
  }));
};

var Card = styled__default["default"].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 && styled.css(["overflow:hidden;"]);
}, function (props) {
  return props.enabled && styled.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.colors.white['500'],
  hasShadow: true,
  padding: 20,
  borderWidth: 0,
  borderColor: 'initial',
  borderRadius: 0
};

var Container$E = styled__default["default"].div.withConfig({
  displayName: "checkboxstyles__Container",
  componentId: "keen-ui-core__sc-m98fwk-0"
})(["&&&{", ";vertical-align:middle;line-height:1;}&&&:focus-visible{outline:1px solid ", ";}"], styledSystem.layout, colors.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__default["default"](framerMotion.motion.div).withConfig({
  displayName: "checkboxstyles__IconSocket",
  componentId: "keen-ui-core__sc-m98fwk-1"
})(["&&&{position:absolute;height:15px;line-height:1;box-sizing:content-box;", ";}"], styledSystem.variant(iconSocketVariants));
var checkboxVariants = {
  prop: 'type',
  variants: {
    primary: {
      border: "solid 1px ".concat(colors.colors.blue['500']),
      borderRadius: '2px',
      width: '12px',
      height: '12px'
    },
    secondary: {
      border: "solid 1px ".concat(polished.transparentize(0.8, colors.colors.blue['500'])),
      background: polished.transparentize(0.95, colors.colors.blue['100']),
      borderRadius: '4px',
      width: '15px',
      height: '15px'
    },
    highlight: {
      border: "solid 1px ".concat(polished.transparentize(0.8, colors.colors.gray['100'])),
      background: polished.transparentize(0.8, colors.colors.white['400']),
      borderRadius: '4px',
      width: '15px',
      height: '15px'
    }
  }
};
var activeCheckboxVariants = {
  prop: 'type',
  variants: {
    primary: {},
    secondary: {},
    highlight: {
      border: "solid 1px ".concat(polished.transparentize(0.7, colors.colors.gray['100'])),
      background: polished.transparentize(0.25, colors.colors.white['400'])
    }
  }
};
var StyledCheckbox = styled__default["default"].div.withConfig({
  displayName: "checkboxstyles__StyledCheckbox",
  componentId: "keen-ui-core__sc-m98fwk-2"
})(["&&&{position:relative;display:inline-block;box-sizing:content-box;", ";", ";}"], styledSystem.variant(checkboxVariants), function (props) {
  return props.checked && styledSystem.variant(activeCheckboxVariants);
});
var HiddenInput = styled__default["default"].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["default"].createElement(Container$E, {
    role: "checkbox",
    display: display,
    tabIndex: 0,
    onKeyPress: function onKeyPress(e) {
      return _onChange && _onChange(e);
    }
  }, React__default["default"].createElement(HiddenInput, {
    id: id,
    checked: checked,
    disabled: disabled,
    onChange: function onChange(e) {
      return _onChange && _onChange(e);
    }
  }), React__default["default"].createElement(StyledCheckbox, {
    checked: checked,
    type: type
  }, React__default["default"].createElement(framerMotion.AnimatePresence, null, checked && React__default["default"].createElement(IconSocket$1, Object.assign({
    type: type
  }, checkMotion), React__default["default"].createElement(icons.Icon, {
    type: "check",
    width: type === 'primary' ? 15 : 13,
    height: type === 'primary' ? 15 : 13,
    fill: colors.colors.green['400']
  })))));
};

var Container$D = styled__default["default"].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;}"], polished.transparentize(0.8, colors.colors.blue[500]), polished.transparentize(0.95, colors.colors.blue[100]));
var ActiveDot = styled__default["default"](framerMotion.motion.div).withConfig({
  displayName: "radiostyles__ActiveDot",
  componentId: "keen-ui-core__sc-1js3bxa-1"
})(["&&&{height:9px;width:9px;border-radius:50%;background:", ";}"], colors.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["default"].createElement(Container$D, {
    onClick: onClick,
    role: "radio",
    "aria-checked"