@burnsred/ui 0.6.2 → 0.6.4-dev.0

package/dist/development.js

@@ -1,1888 +0,0 @@
-import styled, { css, keyframes, ThemeConsumer, withTheme } from 'styled-components';
-import React from 'react';
-import { withEnhanceProps, colorFromPalette, mixins, color, useEnhanceProps, useCleanProps, media, variant, image, component } from '@burnsred/theme';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
-import PropTypes from 'prop-types';
-import PropTypesImmutable from 'react-immutable-proptypes';
-import PropTypesPlus from '@burnsred/prop-types-plus';
-import 'core-js/modules/es6.object.assign';
-import classnames from 'classnames';
-import { useDefault } from '@burnsred/default';
-import 'core-js/modules/es6.function.name';
-import 'core-js/modules/es6.regexp.to-string';
-import 'core-js/modules/web.dom.iterable';
-import 'core-js/modules/es6.array.iterator';
-import 'core-js/modules/es6.object.keys';
-import _flowRight from 'lodash/flowRight';
-import { withProps } from '@burnsred/higher-order-component';
-import { Map, List } from 'immutable';
-import exact from 'prop-types-exact';
-import withOnClickOutside from 'react-onclickoutside';
-import ReactDOM from 'react-dom';
-import _isFunction from 'lodash/isFunction';
-import 'core-js/modules/es6.regexp.split';
-
-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 _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys = Object.keys(source);
-
-    if (typeof Object.getOwnPropertySymbols === 'function') {
-      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-
-    ownKeys.forEach(function (key) {
-      _defineProperty(target, key, 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 _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 _taggedTemplateLiteral(strings, raw) {
-  if (!raw) {
-    raw = strings.slice(0);
-  }
-
-  return Object.freeze(Object.defineProperties(strings, {
-    raw: {
-      value: Object.freeze(raw)
-    }
-  }));
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) {
-    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
-
-    return arr2;
-  }
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArray(iter) {
-  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-}
-
-function _iterableToArrayLimit(arr, i) {
-  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 _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance");
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
-var UIIcon = withEnhanceProps(styled.i.attrs(function (props) {
-  var _classnames;
-
-  return {
-    className: classnames((_classnames = {
-      'material-icons': props.material
-    }, _defineProperty(_classnames, "fa fa-".concat(props.name), props.fontawesome), _defineProperty(_classnames, "icon icon-".concat(props.name), !props.fontawesome && !props.material), _defineProperty(_classnames, props.className, props.className), _classnames)),
-    children: props.material ? props.name : props.children
-  };
-}).withConfig({
-  displayName: "Icon__UIIcon",
-  componentId: "sc-10obg3m-0"
-})(["&&{font-size:", ";}", " ", " ", ""], function (props) {
-  return props.fontSize || '1rem';
-}, function (props) {
-  return props.$palette && css(["color:", ";"], colorFromPalette());
-}, mixins.space, function (props) {
-  return props.css;
-}));
-UIIcon.propTypes = {
-  fontawesome: PropTypes.bool,
-  fontSize: PropTypes.string,
-  hidden: PropTypes.bool,
-  material: PropTypes.bool,
-  margin: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  namespace: PropTypes.string,
-  padding: PropTypes.string,
-  palette: PropTypes.string,
-  paletteAsBackground: PropTypes.bool,
-  paletteWeight: PropTypes.string,
-  variant: PropTypes.string
-};
-UIIcon.defaultProps = {
-  fontawesome: false,
-  fontSize: undefined,
-  hidden: undefined,
-  material: false,
-  margin: undefined,
-  namespace: 'component_uiIcon',
-  padding: undefined,
-  palette: undefined,
-  paletteAsBackground: false,
-  paletteWeight: undefined,
-  variant: 'standard'
-};
-
-var spinnerRotateLinear =
-/*#__PURE__*/
-keyframes(["0%{transform:rotate(0);}100%{transform:rotate(360deg);}"]);
-
-var spinnerStrokeRotate = function spinnerStrokeRotate(props) {
-  return keyframes(["0%{stroke-dashoffset:", ";transform:rotate(0);}12.5%{stroke-dashoffset:", ";transform:rotate(0);}12.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(72.5deg);}25%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(72.5deg);}25.0001%{stroke-dashoffset:", ";transform:rotate(270deg);}37.5%{stroke-dashoffset:", ";transform:rotate(270deg);}37.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(161.5deg);}50%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(161.5deg);}50.0001%{stroke-dashoffset:", ";transform:rotate(180deg);}62.5%{stroke-dashoffset:", ";transform:rotate(180deg);}62.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(251.5deg);}75%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(251.5deg);}75.0001%{stroke-dashoffset:", ";transform:rotate(90deg);}87.5%{stroke-dashoffset:", ";transform:rotate(90deg);}87.5001%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(341.5deg);}100%{stroke-dashoffset:", ";transform:rotateX(180deg) rotate(341.5deg);}"], "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.2, "px"), "".concat((100 - props.thickness) * Math.PI * 0.95, "px"));
-};
-
-var Circle =
-/*#__PURE__*/
-styled.circle.withConfig({
-  displayName: "ProgressCirclestyles__Circle",
-  componentId: "hm517x-0"
-})(["animation-name:", ";fill:transparent;stroke:", ";stroke-dasharray:", ";stroke-width:", ";transition:stroke-dashoffset ", " linear;transform-box:view-box;transform-origin:center;", " ", ""], function (props) {
-  return spinnerStrokeRotate(props);
-}, function (props) {
-  return color({
-    palette: props.palette || 'primary',
-    paletteWeight: props.paletteWeight
-  })(props);
-}, function (props) {
-  return "".concat((100 - props.thickness) * Math.PI, "px");
-}, function (props) {
-  return "".concat(props.thickness, "%");
-}, function (props) {
-  return props.transitionDuration || '225ms';
-}, function (props) {
-  return props.value === null && css(["animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(0.35,0,0.25,1);transition-property:stroke;"]);
-}, function (props) {
-  return props.value !== null && css(["stroke-dashoffset:", "px;"], (100 - props.thickness) * Math.PI * (100 - props.value) / 100);
-});
-var Container =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressCirclestyles__Container",
-  componentId: "hm517x-1"
-})(["display:inline-block;height:", ";position:relative;width:", ";", " ", ""], function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
-}, mixins.margin, mixins.padding);
-var SVG =
-/*#__PURE__*/
-styled.svg.withConfig({
-  displayName: "ProgressCirclestyles__SVG",
-  componentId: "hm517x-2"
-})(["height:100%;left:0;top:0;overflow:visible;position:absolute;transform:rotate(-90deg);transform-origin:center;width:100%;", ""], function (props) {
-  return props.value === null && css(["animation:", " 2s linear infinite;"], spinnerRotateLinear);
-});
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function ProgressCircle(_props) {
-  var props = useEnhanceProps(_props);
-
-  var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      value = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  React.useEffect(function () {
-    setTimeout(function () {
-      return setValue(props.value);
-    }, 0);
-  }, [props.value]);
-  return React.createElement(_StyledContainer, _extends({}, useCleanProps(props), {
-    _css: props.css
-  }), React.createElement(SVG, {
-    focusable: "false",
-    preserveAspectRatio: "xMidYMid meet",
-    value: value,
-    viewBox: "0 0 100 100"
-  }, props.bufferPalette && React.createElement(Circle, {
-    cx: "50%",
-    cy: "50%",
-    palette: props.bufferPalette,
-    paletteWeight: props.bufferPaletteWeight,
-    r: (50 - props.thickness / 2).toString(),
-    thickness: props.thickness,
-    transitionDuration: props.transitionDuration,
-    value: 100
-  }), React.createElement(Circle, {
-    cx: "50%",
-    cy: "50%",
-    palette: props.$palette // eslint-disable-line react/prop-types
-    ,
-    paletteWeight: props.$paletteWeight // eslint-disable-line react/prop-types
-    ,
-    r: (50 - props.thickness / 2).toString(),
-    thickness: props.thickness,
-    transitionDuration: props.transitionDuration,
-    value: value
-  })));
-}
-
-ProgressCircle.propTypes = {
-  bufferPalette: PropTypesPlus.string,
-  bufferPaletteWeight: PropTypes.string,
-  css: PropTypesPlus.css,
-  namespace: PropTypes.string,
-  palette: PropTypesPlus.string,
-  paletteWeight: PropTypes.string,
-  size: PropTypes.string,
-  transitionDuration: PropTypes.string,
-  value: PropTypes.number,
-  valueInitial: PropTypes.number,
-  thickness: PropTypes.number
-};
-ProgressCircle.defaultProps = {
-  bufferPalette: undefined,
-  bufferPaletteWeight: undefined,
-  css: undefined,
-  namespace: 'component_uiProgressCircle',
-  palette: undefined,
-  paletteWeight: undefined,
-  size: '32px',
-  transitionDuration: undefined,
-  value: null,
-  valueInitial: undefined,
-  thickness: 20
-};
-
-var _StyledContainer = styled(Container)(_templateObject(), function (p) {
-  return p._css;
-});
-
-function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n    color: ", ";\n  "]);
-
-  _templateObject$1 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var local = ['onChangeInput', 'value'];
-
-var StringComponent = function StringComponent(props) {
-  return props.children;
-};
-
-var Component =
-/*#__PURE__*/
-styled.span.withConfig({
-  displayName: "Typehooks__Component",
-  componentId: "rbnsuu-0"
-})(["", " ", " ", " ", ""], function (props) {
-  return props.$palette && css(["color:", ";"], colorFromPalette());
-}, mixins.space, media.print(_templateObject$1(), color({
-  palette: 'black'
-})), function (props) {
-  return props.css;
-});
-var hooks = {
-  useComponent: function useComponent(props) {
-    return props.as === null ? StringComponent : Component;
-  },
-  useProps: function useProps(props) {
-    return useCleanProps(props, {
-      local: local
-    });
-  }
-};
-
-function render(props, intl) {
-  var _ref;
-
-  var value = props.children || props.value;
-
-  if (props.hidden) {
-    return null;
-  }
-
-  if (value instanceof Error) {
-    return value.message;
-  }
-
-  if (props.field) {
-    return props.field.toString(value);
-  }
-
-  if (intl && ((_ref = value) != null ? _ref.id : _ref)) {
-    return intl.formatMessage(value, props.values);
-  }
-
-  return value;
-}
-
-var DummyContext = React.createContext({});
-var mapDefault = {
-  intlContext: ['uiType_context_intl', 'context_intl']
-};
-
-function UIType(_props) {
-  var props = useEnhanceProps(_props);
-  var Component = hooks.useComponent(props);
-
-  var _useDefault = useDefault(mapDefault, props),
-      _useDefault$intlConte = _useDefault.intlContext,
-      intlContext = _useDefault$intlConte === void 0 ? DummyContext : _useDefault$intlConte;
-
-  var intl = React.useContext(intlContext);
-  return React.createElement(Component, hooks.useProps(props), (props.render || render)(props, intl));
-}
-
-UIType.propTypes = {
-  as: PropTypesPlus.component,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypesPlus.typography]),
-  className: PropTypesPlus.string,
-  field: PropTypes.shape({
-    toString: PropTypes.func.isRequired
-  }),
-  hidden: PropTypes.bool,
-  intlContext: PropTypes.shape({}),
-  mediaPrintDisabled: PropTypes.bool,
-  namespace: PropTypesPlus.string,
-  palette: PropTypes.string,
-  paletteAsBackground: PropTypes.bool,
-  paletteWeight: PropTypes.string,
-  render: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypesPlus.typography, PropTypesPlus.value]),
-  variant: PropTypes.string
-};
-UIType.defaultProps = {
-  as: undefined,
-  children: undefined,
-  className: '',
-  field: undefined,
-  hidden: undefined,
-  intlContext: undefined,
-  mediaPrintDisabled: undefined,
-  namespace: 'component_uiType',
-  palette: undefined,
-  paletteAsBackground: undefined,
-  paletteWeight: undefined,
-  render: undefined,
-  value: undefined,
-  variant: undefined
-};
-var UIType$1 = React.memo(UIType);
-
-var local$1 = ['contentPaletteAsBackground', 'iconCss', 'iconFont', 'iconHidden', 'iconName', 'iconPaletteAsBackground', 'processingPaletteAsBackground'];
-var mapDefault$1 = {
-  contentComponent: ['uiButton_component_type', 'component_type'],
-  iconComponent: ['uiButton_component_icon', 'component_icon'],
-  linkComponent: ['uiButton_component_link', 'component_link'],
-  processingComponent: ['uiButton_component_processing', 'component_processing']
-};
-var hooks$1 = {
-  useComponents: function useComponents(props) {
-    var defaults = useDefault(mapDefault$1, props);
-    return {
-      Content: defaults.contentComponent || UIType$1,
-      Icon: defaults.iconComponent || UIIcon,
-      Processing: defaults.processingComponent || ProgressCircle
-    };
-  },
-  useProps: function useProps(props) {
-    var _useDefault = useDefault(mapDefault$1, props),
-        linkComponent = _useDefault.linkComponent;
-
-    return useCleanProps(Object.assign({
-      href: props.to
-    }, props, props.to && {
-      as: props.as || !/^https?:\/\//.exec(props.to) && linkComponent || 'a'
-    }, {
-      disabled: props.processing || props.disabled
-    }), {
-      local: local$1
-    });
-  },
-  usePropsIcon: function usePropsIcon(props) {
-    var _ref2;
-
-    return Object.assign({
-      css: props.iconCss,
-      fontSize: props.iconFontSize,
-      hidden: props.processing || props.iconHidden === undefined || props.iconHidden,
-      name: props.iconName || 'name',
-      palette: props.$palette,
-      paletteAsBackground: props.iconPaletteAsBackground,
-      paletteWeight: props.$paletteWeight,
-      variant: 'button'
-    }, props.iconFont && _defineProperty({}, props.iconFont, true), props.iconComponentProps, {
-      className: classnames('uiButton-Icon', (_ref2 = props) != null ? (_ref2 = _ref2.iconComponentProps) != null ? _ref2.className : _ref2 : _ref2)
-    });
-  },
-  usePropsContent: function usePropsContent(props) {
-    var _ref;
-
-    return _objectSpread({
-      children: props.children,
-      hidden: props.contentHidden || props.processing,
-      palette: props.$palette,
-      paletteAsBackground: props.contentPaletteAsBackground,
-      paletteWeight: props.$paletteWeight,
-      value: props.content,
-      variant: 'button'
-    }, props.contentComponentProps, {
-      className: classnames('uiButton-Content', (_ref = props) != null ? (_ref = _ref.contentComponentProps) != null ? _ref.className : _ref : _ref)
-    });
-  },
-  usePropsProcessing: function usePropsProcessing(props) {
-    return _objectSpread({
-      hidden: !props.processing,
-      palette: props.$palette,
-      paletteAsBackground: props.processingPaletteAsBackground,
-      paletteWeight: props.$paletteWeight,
-      variant: 'button'
-    }, props.processingComponentProps);
-  }
-};
-
-function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n    display: none;\n  "]);
-
-  _templateObject$2 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var Button = styled.button.withConfig({
-  displayName: "Buttonstyles",
-  componentId: "ym92z0-0"
-})(["align-items:center;background-color:", ";border:0;border-radius:0.25em;cursor:pointer;display:inline-flex;justify-content:center;outline:none;padding:0.5em 1.5em;position:relative;text-decoration:none;", " &:hover{background-color:", ";}&:focus{background-color:", ";}&:disabled{background-color:", ";cursor:auto;*{color:", ";}}", " ", " ", ""], function (props) {
-  return props.$paletteAsBackground ? colorFromPalette()(props) : 'transparent';
-}, mixins.space, color({
-  palette: 'gray',
-  paletteWeight: '50'
-}), color({
-  palette: 'gray',
-  paletteWeight: '100'
-}), color({
-  palette: 'gray',
-  paletteWeight: '200'
-}), color({
-  palette: 'gray',
-  paletteWeight: '800'
-}), function (props) {
-  return props.$media && css(["@media only screen and (", "){padding:0.5em 1em;.uiButton-Content{display:none;}.uiButton-Icon{display:inline-block;}}"], props.$media);
-}, media.print(_templateObject$2()), function (props) {
-  return props.css;
-});
-
-function UIButton(_props) {
-  var props = useEnhanceProps(_props);
-
-  var _hooks$useComponents = hooks$1.useComponents(props),
-      Content = _hooks$useComponents.Content,
-      Icon = _hooks$useComponents.Icon,
-      Processing = _hooks$useComponents.Processing;
-
-  var processingProps = hooks$1.usePropsProcessing(props);
-  return React.createElement(Button, hooks$1.useProps(props), React.createElement(Icon, hooks$1.usePropsIcon(props)), !processingProps.hidden && React.createElement(Processing, processingProps), React.createElement(Content, hooks$1.usePropsContent(props)));
-}
-
-UIButton.propTypes = {
-  as: PropTypesPlus.component,
-  children: PropTypes.node,
-  content: PropTypes.oneOfType([PropTypes.string, PropTypesPlus.locale, PropTypesImmutable.map]),
-  contentComponent: PropTypesPlus.component,
-  contentComponentProps: PropTypes.shape({}),
-  contentHidden: PropTypes.bool,
-  contentPaletteAsBackground: PropTypes.bool,
-  css: PropTypesPlus.css,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  iconComponent: PropTypesPlus.component,
-  iconComponentProps: PropTypes.shape({}),
-  iconCss: PropTypesPlus.css,
-  iconFont: PropTypesPlus.string,
-  iconHidden: PropTypes.bool,
-  iconName: PropTypesPlus.string,
-  iconPaletteAsBackground: PropTypes.bool,
-  media: PropTypesPlus.string,
-  mediaPrintDisabled: PropTypes.bool,
-  namespace: PropTypesPlus.string,
-  onClick: PropTypes.func,
-  palette: PropTypesPlus.string,
-  paletteAsBackground: PropTypes.bool,
-  paletteWeight: PropTypes.string,
-  processing: PropTypes.bool,
-  processingComponent: PropTypesPlus.component,
-  processingComponentProps: PropTypes.shape({}),
-  processingDidFail: PropTypes.bool,
-  processingPaletteAsBackground: PropTypes.bool,
-  to: PropTypesPlus.string,
-  variant: PropTypesPlus.string
-};
-UIButton.defaultProps = {
-  as: undefined,
-  children: undefined,
-  content: undefined,
-  contentComponent: undefined,
-  contentComponentProps: undefined,
-  contentHidden: undefined,
-  contentPaletteAsBackground: undefined,
-  css: undefined,
-  disabled: undefined,
-  hidden: undefined,
-  iconComponent: undefined,
-  iconComponentProps: undefined,
-  iconCss: undefined,
-  iconFont: undefined,
-  iconHidden: undefined,
-  iconName: undefined,
-  iconPaletteAsBackground: undefined,
-  media: undefined,
-  mediaPrintDisabled: undefined,
-  namespace: 'component_uiButton',
-  onClick: undefined,
-  palette: undefined,
-  paletteAsBackground: undefined,
-  paletteWeight: undefined,
-  processing: undefined,
-  processingComponent: undefined,
-  processingComponentProps: undefined,
-  processingDidFail: undefined,
-  processingPaletteAsBackground: undefined,
-  to: undefined,
-  variant: 'standard'
-};
-var UIButton$1 = React.memo(UIButton);
-
-var Wrapper =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Buttonstories__Wrapper",
-  componentId: "sc-17igda1-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUIButton = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(UIButton$1, {
-        content: text('children', 'Hello Button'),
-        disabled: boolean('disabled', false),
-        iconFont: "material",
-        iconName: "delete",
-        onClick: action('clicked'),
-        palette: "primary",
-        processing: boolean('processing', false),
-        variant: select('variant', variant({
-          name: 'component_uiButton_'
-        })({
-          theme: theme
-        }), 'text')
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiButton_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper, {
-          key: name
-        }, React.createElement(UIButton$1, {
-          content: name,
-          iconFont: "material",
-          iconName: "delete",
-          palette: "primary",
-          variant: name
-        }));
-      });
-    });
-  });
-});
-
-function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$3 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var iconCss =
-/*#__PURE__*/
-css(["margin-right:0.5rem;max-width:2rem;vertical-align:middle;"]);
-var Wrapper$1 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Iconstories__Wrapper",
-  componentId: "sc-1p3nfhe-0"
-})(["display:inline-block;margin:1rem;position:relative;&:after{content:'", "';font-size:0.75rem;left:50%;position:absolute;top:calc(100% + 1rem);transform:translateX(-50%);white-space:pre;}"], function (props) {
-  return props.label;
-});
-var createStoryForUIIcon = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(_StyledUIIcon, {
-        fontawesome: boolean('fontawesome', false),
-        material: boolean('material', false),
-        name: select('name', ['apple', 'delete', 'plus'], 'apple'),
-        variant: select('variant', variant({
-          name: 'component_uiIcon_'
-        })({
-          theme: theme
-        }), 'main')
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiIcon_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$1, {
-          key: name
-        }, React.createElement(UIIcon, {
-          name: "apple",
-          variant: name
-        }), name);
-      });
-    });
-  });
-});
-
-var _StyledUIIcon = styled(UIIcon)(_templateObject$3(), iconCss);
-
-var UIImage =
-/*#__PURE__*/
-styled.img.withConfig({
-  displayName: "Image__UIImage",
-  componentId: "sc-1fmo7bh-0"
-})(["", " ", ""], component(), function (props) {
-  return props.css;
-});
-UIImage.propTypes = {
-  alt: PropTypes.string.isRequired,
-  namespace: PropTypesPlus.string,
-  src: PropTypes.string.isRequired,
-  variant: PropTypes.string
-};
-UIImage.defaultProps = {
-  namespace: 'component_uiImage',
-  variant: 'standard'
-};
-var UIImage$1 = _flowRight([withTheme, withProps(function (props) {
-  return {
-    alt: props.name,
-    src: image(props)
-  };
-})])(UIImage);
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$4 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var imageCss =
-/*#__PURE__*/
-css(["margin-right:0.5rem;max-width:2rem;vertical-align:middle;"]);
-var Wrapper$2 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Imagestories__Wrapper",
-  componentId: "a2mbve-0"
-})(["display:inline-block;margin:1rem;position:relative;&:after{content:'", "';font-size:0.75rem;left:50%;position:absolute;top:calc(100% + 1rem);transform:translateX(-50%);white-space:pre;}"], function (props) {
-  return props.label;
-});
-var createStoryForUIImage = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(_StyledUIImage, {
-        name: select('name', Object.keys(theme.images || {}), Object.keys(theme.images || {})[0]),
-        variant: select('variant', variant({
-          name: 'component_uiImage_'
-        })({
-          theme: theme
-        }), 'main')
-      });
-    });
-  }).add('names', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'images_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$2, {
-          key: name,
-          label: name
-        }, React.createElement(_StyledUIImage2, {
-          name: name
-        }));
-      });
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiImage_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$2, {
-          key: name
-        }, React.createElement(UIImage$1, {
-          name: variant({
-            name: 'images_'
-          })({
-            theme: theme
-          })[0],
-          variant: name
-        }), name);
-      });
-    });
-  });
-});
-
-var _StyledUIImage = styled(UIImage$1)(_templateObject$4(), imageCss);
-
-var _StyledUIImage2 = styled(UIImage$1)(_templateObject2(), imageCss);
-
-var createStoryForUIProcessingCircle = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ProgressCircle, {
-      palette: select('palette', ['primary', 'secondary', 'black']),
-      size: select('size', ['16px', '32px', '48px'], '32px'),
-      thickness: select('thickness', [10, 20, 40], 20),
-      value: select('value', [null, 0, 33, 50, 100], null)
-    });
-  });
-});
-
-var primaryScale =
-/*#__PURE__*/
-keyframes(["0%{transform:scaleX(0.08);}36.65%{animation-timing-function:cubic-bezier(0.334731,0.12482,0.785844,1);transform:scaleX(0.08);}65.15%{animation-timing-function:cubmic-bezier(0.06,0.11,0.6,1);transform:scaleX(0.661479);}100%{transform:scaleX(0.08);}"]);
-var primaryTranslate =
-/*#__PURE__*/
-keyframes(["0%{transform:translateX(0);}20%{animation-timing-function:cubic-bezier(0.5,0,0.701732,0.495819);transform:translateX(0);}59.15%{animation-timing-function:cubic-bezier(0.302435,0.381352,0.55,0.956352);transform:translateX(83.67142%);}100%{transform:translateX(200.611057%);}"]);
-var secondaryScale =
-/*#__PURE__*/
-keyframes(["0%{animation-timing-function:cubic-bezier(0.205028,0.057051,0.57661,0.45397);transform:scaleX(0.08);}19.15%{animation-timing-function:cubic-bezier(0.152313,0.196432,0.648374,1.004315);transform:scaleX(0.457104);}44.15%{animation-timing-function:cubic-bezier(0.257759,-0.003163,0.211762,1.38179);transform:scaleX(0.72796);}100%{transform:scaleX(0.08);}"]);
-var secondaryTranslate =
-/*#__PURE__*/
-keyframes(["0%{animation-timing-function:cubic-bezier(0.15,0,0.515058,0.409685);transform:translateX(0);}25%{animation-timing-function:cubic-bezier(0.31033,0.284058,0.8,0.733712);transform:translateX(37.651913%);}48.35%{animation-timing-function:cubic-bezier(0.4,0.627035,0.6,0.902026);transform:translateX(84.386165%);}100%{transform:translateX(160.277782%);}"]);
-var Block =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__Block",
-  componentId: "gwo5u1-0"
-})(["display:flex;align-items:center;height:", ";min-width:2rem;overflow:hidden;position:relative;transition:opacity 0.25s cubic-bezier(0.4,0,0.6,1) 0ms;transform:translateZ(0);", ""], function (props) {
-  return props.height;
-}, mixins.margin);
-var BarWrapper =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarWrapper",
-  componentId: "gwo5u1-1"
-})(["height:", ";position:relative;flex:1;"], function (props) {
-  return props.thickness;
-});
-var Buffer =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__Buffer",
-  componentId: "gwo5u1-2"
-})(["background-color:", ";height:100%;position:absolute;transition:transform ", ";transform-origin:left top;width:100%;", ""], function (props) {
-  return color({
-    palette: props.palette || 'gray',
-    paletteWeight: props.paletteWeight
-  })(props);
-}, function (props) {
-  return props.transitionDuration || '225ms';
-}, function (props) {
-  return props.value !== null && css(["transform:translateX(", "%);"], props.value - 100);
-});
-var BarPrimary =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarPrimary",
-  componentId: "gwo5u1-3"
-})(["height:100%;position:absolute;transform-origin:left top;width:100%;", ""], function (props) {
-  return props.value === null && css(["transform:scaleX(0);animation:", " 2s infinite linear;left:-145.166611%;transition:none;"], primaryTranslate);
-});
-var BarPrimaryInner =
-/*#__PURE__*/
-styled.span.withConfig({
-  displayName: "ProgressLinestyles__BarPrimaryInner",
-  componentId: "gwo5u1-4"
-})(["background-color:", ";display:inline-block;height:100%;position:absolute;width:100%;", " ", ""], function (props) {
-  return color({
-    palette: props.palette || 'primary',
-    paletteWeight: props.paletteWeight
-  })(props);
-}, function (props) {
-  return props.value === null && css(["animation:", " 2s infinite linear;"], primaryScale);
-}, function (props) {
-  return props.value !== null && css(["transform:translateX(", "%);transition:transform ", " cubic-bezier(0.4,0,0.6,1) 0ms;"], props.value - 100, props.transitionDuration || '225ms');
-});
-var BarSecondary =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestyles__BarSecondary",
-  componentId: "gwo5u1-5"
-})(["animation:", " 2s infinite linear;height:100%;left:-54.888891%;position:absolute;transition:none;transform-origin:left top;visibility:visible;width:100%;"], secondaryTranslate);
-var BarSecondaryInner =
-/*#__PURE__*/
-styled.span.withConfig({
-  displayName: "ProgressLinestyles__BarSecondaryInner",
-  componentId: "gwo5u1-6"
-})(["animation:", " 2s infinite linear;background-color:", ";display:inline-block;height:100%;position:absolute;visibility:visible;width:100%;"], secondaryScale, function (props) {
-  return color({
-    palette: props.palette || 'primary',
-    paletteWeight: props.paletteWeight
-  })(props);
-});
-
-function UIProgressLine(props) {
-  var _React$useState = React.useState(props.valueInitial === undefined ? props.value : props.valueInitial),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      value = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  var _React$useState3 = React.useState(props.bufferValueInitial === undefined ? props.bufferValue : props.bufferValueInitial),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      bufferValue = _React$useState4[0],
-      setBufferValue = _React$useState4[1];
-
-  React.useEffect(function () {
-    setTimeout(function () {
-      setValue(props.value);
-      setBufferValue(props.bufferValue);
-    }, 0);
-  }, [props.value, props.bufferValue]);
-  return React.createElement(Block, {
-    className: props.className,
-    height: props.height,
-    $margin: props.margin,
-    $marginBottom: props.marginBottom,
-    $marginLeft: props.marginLeft,
-    $marginRight: props.marginRight,
-    $marginTop: props.marginTop
-  }, React.createElement(Buffer, {
-    palette: props.bufferPalette,
-    paletteWeight: props.bufferPaletteWeight,
-    transitionDuration: props.transitionDuration,
-    value: bufferValue
-  }), React.createElement(BarWrapper, {
-    thickness: props.thickness || props.height
-  }, React.createElement(BarPrimary, {
-    value: props.value,
-    transitionDuration: props.transitionDuration
-  }, React.createElement(BarPrimaryInner, {
-    palette: props.palette,
-    paletteWeight: props.paletteWeight,
-    transitionDuration: props.transitionDuration,
-    value: value
-  })), value === null && React.createElement(BarSecondary, null, React.createElement(BarSecondaryInner, {
-    palette: props.palette,
-    paletteWeight: props.paletteWeight
-  }))));
-}
-
-UIProgressLine.propTypes = {
-  bufferPalette: PropTypes.string,
-  bufferPaletteWeight: PropTypes.string,
-  bufferValue: PropTypes.number,
-  bufferValueInitial: PropTypes.number,
-  height: PropTypes.string,
-  margin: PropTypes.string,
-  marginBottom: PropTypes.string,
-  marginLeft: PropTypes.string,
-  marginRight: PropTypes.string,
-  marginTop: PropTypes.string,
-  palette: PropTypes.string,
-  paletteWeight: PropTypes.string,
-  thickness: PropTypes.string,
-  transitionDuration: PropTypes.string,
-  value: PropTypes.number,
-  valueInitial: PropTypes.number
-};
-UIProgressLine.defaultProps = {
-  bufferPalette: undefined,
-  bufferPaletteWeight: undefined,
-  bufferValue: 100,
-  bufferValueInitial: undefined,
-  height: '4px',
-  margin: undefined,
-  marginBottom: undefined,
-  marginLeft: undefined,
-  marginRight: undefined,
-  marginTop: undefined,
-  palette: undefined,
-  paletteWeight: undefined,
-  thickness: undefined,
-  transitionDuration: undefined,
-  value: null,
-  valueInitial: undefined
-};
-
-var Block$1 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "ProgressLinestories__Block",
-  componentId: "rcgabs-0"
-})(["width:300px;"]);
-var createStoryForUIProcessingLine = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(Block$1, null, React.createElement(UIProgressLine, {
-      bufferPalette: select('bufferPalette', ['primary', 'secondary', 'gray']),
-      height: select('height', ['1px', '2px', '4px', '8px', '16px'], '4px'),
-      palette: select('palette', ['primary', 'secondary', 'gray']),
-      value: select('value', [null, 0, 33, 50, 100], null)
-    }));
-  });
-});
-
-var Wrapper$3 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Typestories__Wrapper",
-  componentId: "nme558-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUIType = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return React.createElement(UIType$1, {
-        variant: select('variant', variant({
-          name: 'component_uiType_'
-        })({
-          theme: theme
-        }), 'body1')
-      }, text('children', 'Hello TypeSet'));
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      return variant({
-        name: 'component_uiType_'
-      })({
-        theme: theme
-      }).map(function (name) {
-        return React.createElement(Wrapper$3, {
-          key: name
-        }, React.createElement(UIType$1, {
-          variant: name
-        }, name));
-      });
-    });
-  });
-});
-
-var UICard = withEnhanceProps(styled.div.withConfig({
-  displayName: "Card__UICard",
-  componentId: "zuegsg-0"
-})(["background-color:", ";", " ", ""], function (props) {
-  return props.$palette && colorFromPalette({
-    paletteAsBackground: props.$paletteAsBackground !== undefined && !props.$paletteAsBackground
-  })(props);
-}, mixins.space, function (props) {
-  return props.css;
-}));
-UICard.propTypes = {
-  css: PropTypesPlus.css,
-  margin: PropTypesPlus.string,
-  namespace: PropTypesPlus.string,
-  padding: PropTypesPlus.string,
-  palette: PropTypes.string,
-  paletteAsBackground: PropTypes.bool,
-  paletteWeight: PropTypes.string,
-  variant: PropTypes.string
-};
-UICard.defaultProps = {
-  css: undefined,
-  margin: undefined,
-  padding: undefined,
-  palette: undefined,
-  paletteAsBackground: undefined,
-  paletteWeight: undefined,
-  namespace: 'component_uiCard',
-  variant: 'standard'
-};
-
-var Wrapper$4 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Cardstories__Wrapper",
-  componentId: "sc-1ogn9bx-0"
-})(["text-align:center;margin:1rem;"]);
-var createStoryForUICard = (function (stories) {
-  return stories.add('dynamic story', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      var _ref2;
-
-      return React.createElement(UICard, {
-        variant: select('variant', Object.keys(((_ref2 = theme) != null ? (_ref2 = _ref2.components) != null ? _ref2.uiCard : _ref2 : _ref2) || {}), 'main')
-      }, text('children', 'Hello Well'));
-    });
-  }).add('variants', function () {
-    return React.createElement(ThemeConsumer, null, function (theme) {
-      var _ref;
-
-      return Object.keys(((_ref = theme) != null ? (_ref = _ref.components) != null ? _ref.uiCard : _ref : _ref) || {}).map(function (variant) {
-        return React.createElement(Wrapper$4, {
-          key: variant
-        }, React.createElement(UICard, {
-          variant: variant
-        }, variant));
-      });
-    });
-  });
-});
-
-function createStoriesForUI(storyFactory) {
-  createStoryForUIButton(storyFactory('Button'));
-  createStoryForUICard(storyFactory('Card'));
-  createStoryForUIIcon(storyFactory('Icon'));
-  createStoryForUIImage(storyFactory('Image'));
-  createStoryForUIProcessingCircle(storyFactory('ProcessingCircle'));
-  createStoryForUIProcessingLine(storyFactory('ProcessingLine'));
-  createStoryForUIType(storyFactory('Type'));
-}
-
-var UIError = function UIError(props) {
-  return React.createElement(UIType$1, _extends({
-    variant: "body2",
-    palette: "danger"
-  }, props), Map.isMap(props.children) ? props.children.get('message') : props.children);
-};
-
-UIError.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypesImmutable.map])
-};
-UIError.defaultProps = {
-  children: undefined
-};
-var UIError$1 = React.memo(UIError);
-
-var UIErrorWell = function UIErrorWell(props) {
-  return props.errors.size > 0 && React.createElement(UICard, {
-    className: props.className,
-    variant: "danger"
-  }, props.errors.map(function (error, index) {
-    return React.createElement(UIError$1, {
-      key: index
-    }, error) // eslint-disable-line react/no-array-index-key
-    ;
-  }));
-};
-
-UIErrorWell.propTypes = {
-  errors: PropTypesImmutable.list.isRequired
-};
-var ErrorWell = React.memo(UIErrorWell);
-
-var ErrorBoundary =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(ErrorBoundary, _React$Component);
-
-  function ErrorBoundary() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    _classCallCheck(this, ErrorBoundary);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ErrorBoundary)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      hasError: false
-    });
-
-    return _this;
-  }
-
-  _createClass(ErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      this.props.onError(error, info);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.hasError) return this.props.children;
-      var Fallback = this.props.fallbackComponent;
-      return React.createElement(Fallback, _extends({
-        errors: List([this.state.error.message])
-      }, this.props.fallbackComponentProps));
-    }
-  }], [{
-    key: "getDerivedStateFromError",
-    value: function getDerivedStateFromError(error) {
-      return {
-        error: error,
-        hasError: true
-      };
-    }
-  }]);
-
-  return ErrorBoundary;
-}(React.Component);
-
-ErrorBoundary.propTypes = {
-  children: PropTypes.node.isRequired,
-  fallbackComponent: PropTypesPlus.component,
-  fallbackComponentProps: PropTypes.shape({}),
-  onError: PropTypes.func
-};
-ErrorBoundary.defaultProps = {
-  fallbackComponent: ErrorWell,
-  fallbackComponentProps: {},
-  onError: function onError() {
-    return undefined;
-  }
-};
-
-var UIFlexBox = withEnhanceProps(styled.div.withConfig({
-  displayName: "FlexBox__UIFlexBox",
-  componentId: "sc-13ev10s-0"
-})(["align-items:", ";display:flex;", " ", " ", " ", " ", ""], function (props) {
-  return props.alignItems;
-}, function (props) {
-  return props.$palette && css(["background-color:", ";"], colorFromPalette({
-    paletteAsBackground: props.$paletteAsBackground !== undefined && !props.$paletteAsBackground
-  })(props));
-}, function (props) {
-  return props.flexDirection && css(["flex-direction:", ";"], props.flexDirection);
-}, function (props) {
-  return props.justifyContent && css(["justify-content:", ";"], props.justifyContent);
-}, mixins.space, function (props) {
-  return props.css;
-}));
-UIFlexBox.propTypes = {
-  alignItems: PropTypes.string,
-  justifyContent: PropTypes.string,
-  namespace: PropTypes.string,
-  palette: PropTypes.string,
-  paletteAsBackground: PropTypes.bool,
-  paletteWeight: PropTypes.string,
-  variant: PropTypes.string
-};
-UIFlexBox.defaultProps = {
-  alignItems: 'center',
-  namespace: 'component_uiFlexBox',
-  palette: undefined,
-  paletteAsBackground: undefined,
-  paletteWeight: undefined,
-  variant: 'standard'
-};
-
-var hooks$2 = {
-  usePropsTrigger: function usePropsTrigger(props, styles, hidden, setHidden) {
-    return React.useMemo(function () {
-      var _Object$assign;
-
-      return Object.assign((_Object$assign = {}, _defineProperty(_Object$assign, props.event, function () {
-        return setHidden(!hidden);
-      }), _defineProperty(_Object$assign, "css", styles.icon), _Object$assign), props.componentProps);
-    }, [hidden, setHidden, props.componentProps, props.event, styles.icon]);
-  }
-};
-
-var Wrapper$5 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Tooltipstyles__Wrapper",
-  componentId: "bv396u-0"
-})(["display:inline-block;position:relative;", ""], function (props) {
-  return props.css;
-});
-var Popup =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Tooltipstyles__Popup",
-  componentId: "bv396u-1"
-})(["background-color:white;border:1px solid black;border-radius:3px;top:0;left:0;padding:8px;position:absolute;transform:translateY(-100%);"]);
-var styles = {
-  icon: css(["color:", ";"], color({
-    palette: 'danger'
-  }))
-};
-
-function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$5 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function UITooltip(_props) {
-  var _React$useState = React.useState(true),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      hidden = _React$useState2[0],
-      setHidden = _React$useState2[1];
-
-  var props = useEnhanceProps(_props);
-  var Component = props.component;
-  return React.createElement(_StyledWrapper, {
-    className: props.className,
-    _css: props.css
-  }, React.createElement(Component, hooks$2.usePropsTrigger(props, styles, hidden, setHidden)), React.createElement(Popup, {
-    hidden: hidden
-  }, props.children));
-}
-
-UITooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  component: PropTypesPlus.component,
-  componentProps: PropTypes.shape({}),
-  css: PropTypesPlus.css,
-  event: PropTypes.string,
-  namespace: PropTypesPlus.string
-};
-UITooltip.defaultProps = {
-  component: UIIcon,
-  componentProps: {},
-  css: undefined,
-  event: 'onClick',
-  namespace: 'component_uiTooltip'
-};
-var UITooltip$1 = React.memo(UITooltip);
-
-var _StyledWrapper = styled(Wrapper$5)(_templateObject$5(), function (p) {
-  return p._css;
-});
-
-var hooks$3 = {
-  usePropsTooltip: function usePropsTooltip(props, styles) {
-    return React.useMemo(function () {
-      return {
-        componentProps: {
-          css: styles.icon,
-          name: 'error',
-          material: true
-        },
-        css: styles.tooltip
-      };
-    }, [styles.icon, styles.tooltip]);
-  }
-};
-
-var UILabelRoot =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Labelstyles__UILabelRoot",
-  componentId: "sc-1i2zjma-0"
-})(["", " ", ""], mixins.margin, function (props) {
-  return props.css;
-});
-var Label =
-/*#__PURE__*/
-styled.label.withConfig({
-  displayName: "Labelstyles__Label",
-  componentId: "sc-1i2zjma-1"
-})(["", ""], function (props) {
-  return props.css;
-});
-var styles$1 = {
-  icon: css(["color:", ";&&{font-size:0.8rem;}"], color({
-    palette: 'danger'
-  })),
-  tooltip: css(["margin-left:0.5rem;"])
-};
-
-function _templateObject$6() {
-  var data = _taggedTemplateLiteral(["", ""]);
-
-  _templateObject$6 = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function UILabel(_props) {
-  var props = useEnhanceProps(_props);
-  var propsTooltip = hooks$3.usePropsTooltip(props, styles$1);
-  return React.createElement(_StyledUILabelRoot, {
-    className: props.className,
-    $margin: props.$margin // eslint-disable-line react/prop-types
-    ,
-    $marginBottom: props.$marginBottom // eslint-disable-line react/prop-types
-    ,
-    $marginLeft: props.$marginLeft // eslint-disable-line react/prop-types
-    ,
-    $marginRight: props.$marginRight // eslint-disable-line react/prop-types
-    ,
-    $marginTop: props.$marginTop // eslint-disable-line react/prop-types
-    ,
-    _css: props.css
-  }, props.label && React.createElement(UIType$1, _extends({
-    as: Label,
-    palette: props.labelComponentPalette,
-    variant: props.labelComponentVariant || 'label',
-    value: props.label
-  }, props.labelComponentProps)), props.label && !props.errorComponentHidden && props.inputProps.errors && props.inputProps.errors.size > 0 && React.createElement(UITooltip$1, propsTooltip, props.inputProps.errors.map(function (error, index) {
-    return React.createElement(UIError$1, {
-      key: index
-    }, error) // eslint-disable-line react/no-array-index-key
-    ;
-  })), props.children);
-}
-
-UILabel.propTypes = {
-  children: PropTypes.node,
-  css: PropTypesPlus.css,
-  errorComponentHidden: PropTypes.bool,
-  inputProps: PropTypes.shape({
-    errors: PropTypesImmutable.list
-  }).isRequired,
-  label: PropTypesPlus.typography,
-  labelComponentPalette: PropTypes.string,
-  labelComponentProps: PropTypes.shape({}),
-  labelComponentVariant: PropTypes.string,
-  margin: PropTypes.string,
-  marginBottom: PropTypes.string,
-  marginLeft: PropTypes.string,
-  marginRight: PropTypes.string,
-  marginTop: PropTypes.string,
-  namespace: PropTypesPlus.string,
-  variant: PropTypes.string
-};
-UILabel.defaultProps = {
-  children: undefined,
-  css: undefined,
-  errorComponentHidden: undefined,
-  label: undefined,
-  labelComponentPalette: undefined,
-  labelComponentProps: {},
-  labelComponentVariant: undefined,
-  margin: undefined,
-  marginBottom: undefined,
-  marginLeft: undefined,
-  marginRight: undefined,
-  marginTop: undefined,
-  namespace: 'component_uiLabel',
-  variant: 'standard'
-};
-var Label$1 = React.memo(UILabel);
-
-var _StyledUILabelRoot = styled(UILabelRoot)(_templateObject$6(), function (p) {
-  return p._css;
-});
-
-var UILine = withEnhanceProps(styled.hr.withConfig({
-  displayName: "Line__UILine",
-  componentId: "sc-2dkwme-0"
-})(["border:0;border-bottom:1px ", " ", ";", " ", ""], function (props) {
-  return props.borderStyle || 'solid';
-}, colorFromPalette(), mixins.margin, function (props) {
-  return props.css;
-}));
-UILine.propTypes = {
-  namespace: PropTypes.string,
-  variant: PropTypes.string
-};
-UILine.defaultProps = {
-  namespace: 'component_uiLine',
-  variant: undefined
-};
-
-var Overlay =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Overlay",
-  componentId: "sc-15ca6dc-0"
-})(["background-color:", ";display:", ";position:absolute;", ""], color({
-  palette: 'white'
-}), function (props) {
-  return props.visible ? 'block' : 'none';
-}, component());
-Overlay.propTypes = {
-  namespace: PropTypes.string,
-  variant: PropTypes.string
-};
-Overlay.defaultProps = {
-  namespace: 'component_uiPopup_Overlay',
-  variant: 'standard'
-};
-
-var Container$1 =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Portalstyles__Container",
-  componentId: "sc-11pm1fj-0"
-})(["align-items:center;background-color:rgba(0,0,0,0.65);display:flex;height:100%;justify-content:center;overflow:auto;"]);
-var Content =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Portalstyles__Content",
-  componentId: "sc-11pm1fj-1"
-})(["background-color:", ";border:2px solid ", ";border-radius:5px;max-width:1024px;min-height:100px;width:80%;@media (max-width:539px){width:95%;}"], color({
-  palette: 'white'
-}), color({
-  palette: 'black'
-}));
-
-var Portal =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(Portal, _React$Component);
-
-  function Portal() {
-    var _getPrototypeOf2;
-
-    var _this;
-
-    _classCallCheck(this, Portal);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Portal)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      prop_visible: _this.props.visible,
-      ref: null
-    });
-
-    return _this;
-  }
-
-  _createClass(Portal, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.visible === true && prevProps.visible === false) {
-        this.state.ref.style.position = 'fixed';
-        this.state.ref.style.top = '0';
-        this.state.ref.style.right = '0';
-        this.state.ref.style.bottom = '0';
-        this.state.ref.style.left = '0';
-        document.body.appendChild(this.state.ref);
-      }
-
-      if (this.props.visible === false && prevProps.visible === true && prevState.ref) {
-        document.body.removeChild(prevState.ref);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.state.ref) {
-        document.body.removeChild(this.state.ref);
-      }
-    }
-  }, {
-    key: "getPropsContainer",
-    value: function getPropsContainer() {
-      return this.props.containerComponentProps;
-    }
-  }, {
-    key: "getPropsContent",
-    value: function getPropsContent() {
-      return Object.assign({}, this.props.contentComponentProps, {
-        className: this.props.contentComponentProps.className ? "".concat(this.props.contentComponentProps.className, " ignore-react-onclickoutside") : 'ignore-react-onclickoutside'
-      });
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var ContainerComponent = this.props.containerComponent;
-      var ContentComponent = this.props.contentComponent;
-      return React.createElement(ContainerComponent, this.getPropsContainer(), React.createElement(ContentComponent, this.getPropsContent(), this.props.children));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.state.ref && ReactDOM.createPortal(this.renderContent(), this.state.ref);
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (prevState.prop_visible === nextProps.visible) {
-        return {
-          prop_visible: nextProps.visible,
-          ref: prevState.ref
-        };
-      }
-
-      return {
-        prop_visible: nextProps.visible,
-        ref: prevState.prop_visible === true ? null : document.createElement('div')
-      };
-    }
-  }]);
-
-  return Portal;
-}(React.Component);
-
-Portal.propTypes = exact({
-  children: PropTypes.node.isRequired,
-  containerComponent: PropTypesPlus.component,
-  containerComponentProps: PropTypes.shape({}),
-  contentComponent: PropTypesPlus.component,
-  contentComponentProps: PropTypes.shape({
-    className: PropTypesPlus.string
-  }),
-  visible: PropTypes.bool.isRequired
-});
-Portal.defaultProps = {
-  containerComponent: Container$1,
-  containerComponentProps: {},
-  contentComponent: Content,
-  contentComponentProps: {}
-};
-
-var hooks$4 = {
-  useComponents: function useComponents(props) {
-    var mapDefault = React.useMemo(function () {
-      return {
-        wrapperComponent: "uiPopup_component_".concat(props.type),
-        controlComponent: ['uiPopup_control', 'component_button']
-      };
-    }, [props.type]);
-    var defaults = useDefault(mapDefault, props);
-    return {
-      Component: props.component,
-      Container: props.containerComponent,
-      Control: defaults.controlComponent,
-      Wrapper: defaults.wrapperComponent || Portal
-    };
-  },
-
-  /**
-   * HACK(thierry): react-onclickoutside use the first instance of the
-   * onClose provided. So it is unabled to capture the changing values around it.
-   * Hence mutating the staticObject giving it a new onClose
-   */
-  useGetClickOutside: function useGetClickOutside(componentProps) {
-    var _React$useState = React.useState({}),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        staticObject = _React$useState2[0];
-
-    staticObject.onClose = componentProps.onClose;
-    return function () {
-      return staticObject.onClose();
-    };
-  },
-  usePropsComponent: function usePropsComponent(props, opened, setOpened) {
-    var handleClose = React.useCallback(function (x) {
-      if (!opened) return x;
-      setOpened(false);
-      props.onClose();
-      return x;
-    }, [opened, props.onClose]);
-    return Object.assign({
-      onClose: handleClose
-    }, _isFunction(props.componentProps) ? props.componentProps() : props.componentProps);
-  },
-  usePropsContainer: function usePropsContainer(props) {
-    return props.containerComponentProps;
-  },
-  usePropsControl: function usePropsControl(props, opened, setOpened) {
-    var handleEvent = React.useCallback(function () {
-      return setOpened(!opened);
-    }, [opened]);
-    return Object.assign(_defineProperty({}, props.event, handleEvent), props.controlComponentProps);
-  },
-  usePropsWrapper: function usePropsWrapper(props, opened) {
-    return Object.assign({
-      visible: opened
-    }, _isFunction(props.wrapperComponentProps) ? props.wrapperComponentProps() : props.wrapperComponentProps);
-  }
-};
-
-var ContainerComponent =
-/*#__PURE__*/
-styled.div.withConfig({
-  displayName: "Popup__ContainerComponent",
-  componentId: "sc-1an9fmj-0"
-})(["display:inline-block;position:", ";"], function (props) {
-  return props.static ? 'static' : 'relative';
-});
-/**
- * To ignore element outside container, attach className 'ignore-react-onclickoutside' to it
- * https://github.com/Pomax/react-onclickoutside#marking-elements-as-skip-over-this-one-during-the-event-loop
- */
-
-function Popup$1(_props) {
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      opened = _React$useState2[0],
-      setOpened = _React$useState2[1];
-
-  var props = useEnhanceProps(_props);
-
-  var _hooks$useComponents = hooks$4.useComponents(props),
-      Container = _hooks$useComponents.Container,
-      Control = _hooks$useComponents.Control,
-      Component = _hooks$useComponents.Component,
-      Wrapper = _hooks$useComponents.Wrapper;
-
-  var componentProps = hooks$4.usePropsComponent(props, opened, setOpened);
-  Popup$1.handleClickOutside = hooks$4.useGetClickOutside(componentProps);
-  return React.createElement(Container, hooks$4.usePropsContainer(props), React.createElement(Control, hooks$4.usePropsControl(props, opened, setOpened)), React.createElement(Wrapper, hooks$4.usePropsWrapper(props, opened), React.createElement(Component, componentProps)));
-}
-
-Popup$1.propTypes = exact({
-  component: PropTypesPlus.component.isRequired,
-  componentProps: PropTypes.shape({}),
-  containerComponent: PropTypesPlus.component,
-  containerComponentProps: PropTypes.shape({}),
-  controlComponent: PropTypesPlus.component,
-  controlComponentProps: PropTypes.shape({}),
-  event: PropTypesPlus.string,
-  namespace: PropTypesPlus.string,
-  onClose: PropTypes.func,
-  type: PropTypesPlus.string,
-  wrapperComponent: PropTypesPlus.component,
-  wrapperComponentProps: PropTypes.shape({}),
-  // form props
-  name: PropTypesPlus.string,
-  // onclickoutside props
-  disableOnClickOutside: PropTypes.func.isRequired,
-  enableOnClickOutside: PropTypes.func.isRequired,
-  eventTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
-  outsideClickIgnoreClass: PropTypes.string.isRequired,
-  preventDefault: PropTypes.bool.isRequired,
-  stopPropagation: PropTypes.bool.isRequired,
-  wrappedRef: PropTypes.func.isRequired
-});
-Popup$1.defaultProps = {
-  componentProps: {},
-  containerComponent: ContainerComponent,
-  containerComponentProps: {},
-  controlComponent: undefined,
-  controlComponentProps: {},
-  event: 'onClick',
-  namespace: 'component_uiPopup',
-  onClose: function onClose() {
-    return undefined;
-  },
-  type: undefined,
-  wrapperComponent: undefined,
-  wrapperComponentProps: {},
-  // form props
-  name: undefined
-};
-var clickOutsideConfig = {
-  handleClickOutside: function handleClickOutside() {
-    return Popup$1.handleClickOutside;
-  }
-};
-var EnhancedPopup = withOnClickOutside(Popup$1, clickOutsideConfig);
-EnhancedPopup.Overlay = Overlay;
-EnhancedPopup.Portal = Portal;
-
-function Portal$1(props) {
-  var _React$useState = React.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      elementRef = _React$useState2[0],
-      setElementRef = _React$useState2[1];
-
-  var previousClassNameRef = React.useRef(props.className);
-  var previousClassName = previousClassNameRef.current;
-  React.useEffect(function () {
-    previousClassNameRef.current = props.className;
-  });
-  React.useEffect(function () {
-    var element = document.createElement('div');
-    setElementRef(element);
-    document.body.appendChild(element);
-    return function () {
-      return document.body.removeChild(element);
-    };
-  }, []);
-  React.useEffect(function () {
-    if (elementRef && previousClassName) {
-      var _elementRef$classList;
-
-      (_elementRef$classList = elementRef.classList).remove.apply(_elementRef$classList, _toConsumableArray(previousClassName.split(' ')));
-    }
-
-    if (elementRef && props.className) {
-      var _elementRef$classList2;
-
-      (_elementRef$classList2 = elementRef.classList).add.apply(_elementRef$classList2, _toConsumableArray(props.className.split(' ')));
-    }
-  }, [elementRef, props.className, previousClassName]);
-  return elementRef && ReactDOM.createPortal(props.children, elementRef);
-}
-
-var UISpacer = withEnhanceProps(styled.div.withConfig({
-  displayName: "Spacer__UISpacer",
-  componentId: "sc-62ugl2-0"
-})(["flex:", ";", ""], function (props) {
-  return props.flex === undefined ? 1 : props.flex;
-}, mixins.space));
-UISpacer.propTypes = {
-  namespace: PropTypes.string,
-  variant: PropTypes.string
-};
-UISpacer.defaultProps = {
-  namespace: 'component_uiSpacer',
-  variant: 'standard'
-};
-
-export { UIButton$1 as UIButton, UICard, UIError$1 as UIError, ErrorBoundary as UIErrorBoundary, ErrorWell as UIErrorWell, UIFlexBox, UIIcon, UIImage$1 as UIImage, Label$1 as UILabel, UILine, EnhancedPopup as UIPopup, Portal$1 as UIPortal, ProgressCircle as UIProgressCircle, UIProgressLine, UISpacer, UIType$1 as UIType, createStoriesForUI, createStoryForUIButton, createStoryForUIIcon, createStoryForUIImage, createStoryForUIProcessingCircle, createStoryForUIProcessingLine, createStoryForUIType, createStoryForUICard };
-//# sourceMappingURL=development.js.map