@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.3

package/cjs/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+const ContextMenuItem = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: ${0};
+  font-size: 0.875rem;
+  font-weight: normal;
+  height: 31px;
+  min-width: 160px;
+  padding: ${0};
+
+  ${0}
+
+  ${0}
+
+  ${0}
+
+  :not(:last-of-type) {
+    border-bottom: 1px solid;
+
+    ${0}
+  }
+
+  :last-of-type {
+    height: 32px;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    ${0}
+  }
+
+  ${0}
+
+  ${0}
+`), props => props.theme.primaryFontFamily, props => props.opensSublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.icon && styled.css(_t2 || (_t2 = _`
+      padding-left: 28px;
+    `)), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && styled.css(_t3 || (_t3 = _`
+      &&:hover {
+        ${0}
+      }
+    `), props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])), props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && styled.css(_t4 || (_t4 = _`
+      &&:hover {
+        ${0}
+      }
+    `), props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])));
+const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-right: 8px;
+
+  svg {
+    height: 12px;
+  }
+`));
+const SublevelIconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding-left: 24px;
+
+  svg {
+    height: 12px;
+  }
+`));
+
+exports.ContextMenuItem = ContextMenuItem;
+exports.IconContainer = IconContainer;
+exports.SublevelIconContainer = SublevelIconContainer;

package/cjs/components/widgets/ContextMenu/ContextMenuItem/widgets/ContextMenu/ContextMenuItem/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContextMenuItem = require('../../../ContextMenuItem.js');
+
+
+
+exports["default"] = ContextMenuItem["default"];

package/cjs/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../../node_modules/react/index.js');
+var index$1 = require('../../../../node_modules/prop-types/index.js');
+var ContextMenuItemsGroup_styled = require('./ContextMenuItemsGroup.styled.js');
+
+const _excluded = ["children"];
+const ContextMenuItemsGroup = index["default"].forwardRef(function ContextMenuItemsGroup(_ref, forwardedRef) {
+  let {
+      children
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(ContextMenuItemsGroup_styled.ContextMenuItemsGroup, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef
+  }, props, {
+    role: "group"
+  }), children);
+});
+ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: index$1["default"].arrayOf(index$1["default"].node)
+} : {};
+ContextMenuItemsGroup.defaultProps = {};
+var ContextMenuItemsGroup$1 = ContextMenuItemsGroup;
+
+exports["default"] = ContextMenuItemsGroup$1;

package/cjs/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t;
+const ContextMenuItemsGroup = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  :not(:last-child) {
+    border-bottom: 1px solid;
+
+    ${0}
+  }
+
+  > * {
+    border-bottom: none !important;
+  }
+
+  > *:not(:last-child) {
+    height: 32px;
+  }
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')));
+
+exports.ContextMenuItemsGroup = ContextMenuItemsGroup;

package/cjs/components/widgets/ContextMenu/ContextMenuItemsGroup/widgets/ContextMenu/ContextMenuItemsGroup/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContextMenuItemsGroup = require('../../../ContextMenuItemsGroup.js');
+
+
+
+exports["default"] = ContextMenuItemsGroup["default"];

package/cjs/components/widgets/ContextMenu/widgets/ContextMenu/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ContextMenu = require('../../ContextMenu.js');
+
+
+
+exports["default"] = ContextMenu["default"];

package/cjs/components/widgets/InfoCard/InfoCard.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var InfoCard_styled = require('./InfoCard.styled.js');
+
+const _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
+const InfoCard = index["default"].forwardRef(function InfoCard(_ref, forwardedRef) {
+  let {
+      icon,
+      total,
+      label,
+      linkLabel,
+      onClick,
+      height
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const handleLinkClick = e => onClick(e);
+  return index["default"].createElement(InfoCard_styled.Container, _rollupPluginBabelHelpers["extends"]({
+    height: height,
+    ref: forwardedRef
+  }, props), index["default"].createElement(InfoCard_styled.MetricsContainer, null, index["default"].createElement(InfoCard_styled.IconTotalContainer, null, index["default"].createElement(InfoCard_styled.IconContainer, null, icon), index["default"].createElement(InfoCard_styled.Total, null, total)), index["default"].createElement(InfoCard_styled.Label, null, label)), linkLabel && onClick && index["default"].createElement(InfoCard_styled.Link, {
+    onClick: handleLinkClick
+  }, index["default"].createElement(InfoCard_styled.ButtonLink, null, linkLabel), index["default"].createElement(InfoCard_styled.StyledArrowIcon, null)));
+});
+InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: index$1["default"].element.isRequired,
+  total: index$1["default"].number.isRequired,
+  label: index$1["default"].string.isRequired,
+  linkLabel: index$1["default"].string,
+  onClick: index$1["default"].func,
+  height: index$1["default"].number
+} : {};
+var InfoCard$1 = InfoCard;
+
+exports["default"] = InfoCard$1;

package/cjs/components/widgets/InfoCard/InfoCard.styled.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+var arrowForward = require('../../../icons/arrow-forward.svg.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9;
+const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  font-family: ${0};
+  font-size: 1rem;
+  font-weight: 500;
+  ${0};
+  height: ${0};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 0;
+`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')), props => props.height ? `${props.height}px` : '50px');
+const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  gap: 5px;
+  padding-left: 15px;
+`));
+const IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`));
+const Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  font-size: 1.22rem;
+  font-weight: 700;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.8;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500')));
+const IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  margin-top: -0.05rem;
+`));
+const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t7 || (_t7 = _`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 30%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`));
+const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  ${0};
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+const StyledArrowIcon = styled__default["default"](arrowForward.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+  height: 20px;
+  margin-right: 10px;
+  ${0};
+`), props => props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black')));
+
+exports.ButtonLink = ButtonLink;
+exports.Container = Container;
+exports.IconContainer = IconContainer;
+exports.IconTotalContainer = IconTotalContainer;
+exports.Label = Label;
+exports.Link = Link;
+exports.MetricsContainer = MetricsContainer;
+exports.StyledArrowIcon = StyledArrowIcon;
+exports.Total = Total;

package/cjs/components/widgets/InfoCard/widgets/InfoCard/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InfoCard = require('../../InfoCard.js');
+
+
+
+exports["default"] = InfoCard["default"];

package/cjs/components/widgets/Instructions/Instructions.js

@@ -0,0 +1,217 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var lodash = require('lodash');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/react/index.js');
+var warningCircle = require('../../../icons/warning-circle.svg.js');
+var CompactAutocompleteSelect = require('../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js');
+var TextArea = require('../../inputs/TextArea/TextArea.js');
+var Instructions_styled = require('./Instructions.styled.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"];
+const Instructions = index["default"].forwardRef(function Instructions(_ref, forwardedRef) {
+  let {
+      clickToAdd,
+      customAddMessage,
+      selectedOption,
+      loadOptions,
+      readOnly,
+      disabled,
+      hidden,
+      name,
+      lightBackground,
+      autoSelect,
+      subscribeCurrentValue: subscribeCurrentValueProp,
+      onChange: onChangeProp,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onUpdateCallback,
+      availableOptions,
+      loadingMessageFunc,
+      placeholder,
+      type,
+      selectType,
+      edit,
+      rows,
+      showMore,
+      showMoreText,
+      showLessText,
+      isExpanded,
+      loadingIcon,
+      successIcon,
+      padding
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [isHovered, setIsHovered] = index$1.react.exports.useState(false);
+  const [selected, setSelected] = index$1.react.exports.useState({});
+  const [addInstructions, setAddInstructions] = index$1.react.exports.useState(clickToAdd);
+  const [customMessage, setCustomMessage] = index$1.react.exports.useState(customAddMessage);
+  const [background, setBackground] = index$1.react.exports.useState(lightBackground);
+  const [initialHover, setInitialHover] = index$1.react.exports.useState(true);
+  const [currentValue, setCurrentValue] = index$1.react.exports.useState();
+  index$1.react.exports.useEffect(() => {
+    if (lodash.isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  index$1.react.exports.useEffect(() => {
+    handleChange(selected);
+  }, [selected]);
+  index$1.react.exports.useEffect(() => {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  index$1.react.exports.useEffect(() => {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  const onChange = index$1.react.exports.useCallback(event => {
+    setCurrentValue(event.target.value);
+    if (lodash.isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  const onFocus = index$1.react.exports.useCallback(event => {
+    if (autoSelect) {
+      event.target.select();
+    }
+    if (lodash.isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  const onBlur = index$1.react.exports.useCallback(event => {
+    if (lodash.isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+  const handleMouseOver = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  const handleOnFocus = () => {
+    if (customMessage === currentValue) {
+      setCurrentValue('');
+    }
+  };
+  const handleChange = selected => {
+    if (selected === null) {
+      setSelected({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+      onUpdateCallback(selected);
+    }
+  };
+  const sharedSelectProps = {
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    placeholder: placeholder
+  };
+  if (hidden) return null;
+  return index["default"].createElement(Instructions_styled.Instructions, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseDown: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, props), !readOnly && !disabled && index["default"].createElement(Instructions_styled.TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && !disabled && 'slide-in'
+  }, index["default"].createElement(Instructions_styled.SelectContainer, null, index["default"].createElement(CompactAutocompleteSelect["default"], _rollupPluginBabelHelpers["extends"]({
+    type: selectType,
+    value: selectedOption,
+    creatable: false,
+    onChange: handleChange
+  }, sharedSelectProps)))), index["default"].createElement(Instructions_styled.InstructionsArea, {
+    type: type
+  }, index["default"].createElement(TextArea["default"], {
+    noBorder: true,
+    instructionsTextArea: true,
+    type: type,
+    lightBackground: background,
+    readOnly: readOnly,
+    disabled: disabled,
+    name: name,
+    isExpanded: isExpanded,
+    edit: edit,
+    value: currentValue === null ? '' : currentValue,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur,
+    rows: rows,
+    showMore: showMore,
+    showMoreText: showMoreText,
+    showLessText: showLessText,
+    icon: index["default"].createElement(warningCircle.ReactComponent, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false,
+  autoSelect: true,
+  hidden: false,
+  edit: false,
+  disabled: false,
+  readOnly: false,
+  type: '',
+  selectType: '',
+  padding: 'medium',
+  onUpdateCallback: () => {}
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: index$2["default"].string,
+  placeholder: index$2["default"].string,
+  rows: index$2["default"].oneOfType([index$2["default"].number, index$2["default"].string]),
+  selectedOption: index$2["default"].any,
+  loadOptions: index$2["default"].func,
+  loadingMessageFunc: index$2["default"].func,
+  clickToAdd: index$2["default"].bool,
+  customAddMessage: index$2["default"].string,
+  autoSelect: index$2["default"].bool,
+  readOnly: index$2["default"].bool,
+  disabled: index$2["default"].bool,
+  hidden: index$2["default"].bool,
+  showMore: index$2["default"].bool,
+  showMoreText: index$2["default"].string,
+  showLessText: index$2["default"].string,
+  availableOptions: index$2["default"].arrayOf(index$2["default"].object),
+  lightBackground: index$2["default"].bool,
+  edit: index$2["default"].bool,
+  options: index$2["default"].array,
+  subscribeCurrentValue: index$2["default"].func,
+  onChange: index$2["default"].func,
+  onFocus: index$2["default"].func,
+  onBlur: index$2["default"].func,
+  onUpdateCallback: index$2["default"].func,
+  type: index$2["default"].oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: index$2["default"].oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: index$2["default"].func,
+  loadingIcon: index$2["default"].element,
+  successIcon: index$2["default"].element,
+  padding: index$2["default"].oneOf(['', 'small', 'medium', 'large'])
+} : {};
+var Instructions$1 = Instructions;
+
+exports["default"] = Instructions$1;

package/cjs/components/widgets/Instructions/Instructions.styled.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const Instructions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  ${0};
+`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+const TopBarContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  transition: margin-top 120ms;
+  &&.slide-in {
+    margin-top: -24px;
+  }
+  ${0};
+
+  ${0};
+`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
+const SelectContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  width: 100%;
+  margin: 0 2px;
+`));
+const InstructionsArea = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  margin: 2px 2px -2px 2px;
+`));
+
+exports.Instructions = Instructions;
+exports.InstructionsArea = InstructionsArea;
+exports.SelectContainer = SelectContainer;
+exports.TopBarContainer = TopBarContainer;

package/cjs/components/widgets/Instructions/widgets/Instructions/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Instructions = require('../../Instructions.js');
+
+
+
+exports["default"] = Instructions["default"];

package/cjs/components/widgets/ProgressBar/ProgressBar.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var ProgressBar_styled = require('./ProgressBar.styled.js');
+
+const _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
+const ProgressBar = _ref => {
+  let {
+      totalAssets,
+      completedAssets,
+      percentageText,
+      barColor,
+      height,
+      label,
+      type,
+      linkText,
+      onClick
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const safeCompletedAssets = Math.max(0, completedAssets);
+  const safeTotalAssets = Math.max(1, totalAssets);
+  const percentage = safeCompletedAssets / safeTotalAssets * 100;
+  const formattedPercentage = `${Math.round(percentage)}%`;
+  const handleLinkClick = e => onClick(e);
+  return index["default"].createElement(ProgressBar_styled.Container, _rollupPluginBabelHelpers["extends"]({
+    height: height
+  }, props), index["default"].createElement(ProgressBar_styled.Label, null, label), index["default"].createElement(ProgressBar_styled.ProgressBarTrack, null, index["default"].createElement(ProgressBar_styled.MetricsContainer, {
+    hasLink: Boolean(linkText)
+  }, index["default"].createElement(ProgressBar_styled.Completed, {
+    type: type
+  }, safeCompletedAssets), index["default"].createElement(ProgressBar_styled.ProgressBarFill, {
+    type: type,
+    percentage: percentage,
+    barColor: barColor
+  }, index["default"].createElement(ProgressBar_styled.PercentageIndicator, {
+    hasLink: Boolean(linkText)
+  }, percentageText || formattedPercentage))), linkText && index["default"].createElement(ProgressBar_styled.Link, {
+    onClick: handleLinkClick
+  }, index["default"].createElement(ProgressBar_styled.ButtonLink, null, linkText), index["default"].createElement(ProgressBar_styled.StyledArrowIcon, null))));
+};
+ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  totalAssets: index$1["default"].number.isRequired,
+  completedAssets: index$1["default"].number.isRequired,
+  percentageText: index$1["default"].string,
+  barColor: index$1["default"].string,
+  height: index$1["default"].number,
+  label: index$1["default"].string,
+  type: index$1["default"].string,
+  linkText: index$1["default"].string,
+  onClick: index$1["default"].func
+} : {};
+var ProgressBar$1 = ProgressBar;
+
+exports["default"] = ProgressBar$1;