@ntbjs/react-components 2.0.0-rc.26 → 2.0.0-rc.27

package/build/widgets/Instructions/Instructions.js

@@ -0,0 +1,255 @@
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import { isFunction } from 'lodash';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { S as SvgWarningCircle } from '../../warning-circle-24f3efcd.js';
+import { C as CompactAutocompleteSelect } from '../../CompactAutocompleteSelect-52c49513.js';
+import { T as TextArea } from '../../TextArea-1e5b9201.js';
+import styled from 'styled-components';
+import 'nanoid';
+import '../../Alert-e6847a22.js';
+import '../../Badge-d93586a9.js';
+import '../../Popover-20050b91.js';
+import 'polished';
+import '@tippyjs/react';
+import '../../shift-away-subtle-0dd94a03.js';
+import 'popper-max-size-modifier';
+import '../../Tab-04d435c3.js';
+import '../../Tabs-74d1ea8a.js';
+import '../../Tooltip-c1d1199e.js';
+import '../../VerificationStatusIcon-49cb1c1b.js';
+import 'react-select';
+import 'react-select-async-paginate';
+import 'react-select/creatable';
+import '../../close-a5d37608.js';
+import '../../expand-more-c5523c46.js';
+import '@restart/hooks/useMergedRefs';
+import '../../edit-note-283a0e15.js';
+
+const Instructions$1 = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const TopBarContainer = styled.div.attrs(applyDefaultTheme)`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  transition: margin-top 120ms;
+  &&.slide-in {
+    margin-top: -24px;
+  }
+  ${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.div.attrs(applyDefaultTheme)`
+  width: 100%;
+  margin: 0 2px;
+`;
+const InstructionsArea = styled.div.attrs(applyDefaultTheme)`
+  margin: 2px 2px -2px 2px;
+`;
+
+const Instructions = React__default.forwardRef(function Instructions({
+  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,
+  ...props
+}, forwardedRef) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [selected, setSelected] = useState({});
+  const [addInstructions, setAddInstructions] = useState(clickToAdd);
+  const [customMessage, setCustomMessage] = useState(customAddMessage);
+  const [background, setBackground] = useState(lightBackground);
+  const [initialHover, setInitialHover] = useState(true);
+  const [currentValue, setCurrentValue] = useState();
+  useEffect(() => {
+    if (isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  useEffect(() => {
+    handleChange(selected);
+  }, [selected]);
+  useEffect(() => {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  useEffect(() => {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  const onChange = useCallback(event => {
+    setCurrentValue(event.target.value);
+    if (isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  const onFocus = useCallback(event => {
+    if (autoSelect) {
+      event.target.select();
+    }
+    if (isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  const onBlur = useCallback(event => {
+    if (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 React__default.createElement(Instructions$1, _extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseDown: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, props), !readOnly && !disabled && React__default.createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && !disabled && 'slide-in'
+  }, React__default.createElement(SelectContainer, null, React__default.createElement(CompactAutocompleteSelect, _extends({
+    type: selectType,
+    value: selectedOption,
+    creatable: false,
+    onChange: handleChange
+  }, sharedSelectProps)))), React__default.createElement(InstructionsArea, {
+    type: type
+  }, React__default.createElement(TextArea, {
+    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: React__default.createElement(SvgWarningCircle, 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: PropTypes.string,
+  placeholder: PropTypes.string,
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  selectedOption: PropTypes.any,
+  loadOptions: PropTypes.func,
+  loadingMessageFunc: PropTypes.func,
+  clickToAdd: PropTypes.bool,
+  customAddMessage: PropTypes.string,
+  autoSelect: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  hidden: PropTypes.bool,
+  showMore: PropTypes.bool,
+  showMoreText: PropTypes.string,
+  showLessText: PropTypes.string,
+  availableOptions: PropTypes.arrayOf(PropTypes.object),
+  lightBackground: PropTypes.bool,
+  edit: PropTypes.bool,
+  options: PropTypes.array,
+  subscribeCurrentValue: PropTypes.func,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onUpdateCallback: PropTypes.func,
+  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: PropTypes.func,
+  loadingIcon: PropTypes.element,
+  successIcon: PropTypes.element,
+  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])
+} : {};
+
+export { Instructions as default };

package/build/{ProgressBar-2d26c1fb.js → widgets/ProgressBar/ProgressBar.js}

@@ -1,15 +1,8 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-var arrowForward = require('./arrow-forward-d7c77ae3.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+import { S as SvgArrowForward } from '../../arrow-forward-ad12c5f3.js';
 
 const getBackgroundColor = props => {
   if (props.barColor) {
@@ -25,21 +18,21 @@ const getBackgroundColor = props => {
   const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
   return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
 };
-styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)`
+styled.p.attrs(applyDefaultTheme)`
   font-family: ${props => props.theme.primaryFontFamily};
   font-size: 1rem;
   font-weight: 500;
 `;
-const Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Container = styled.div.attrs(applyDefaultTheme)`
   width: 100%;
   height: ${props => props.height ? `${props.height}px` : '50px'};
   font-family: ${props => props.theme.primaryFontFamily};
 `;
-const InnerContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const InnerContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   height: 100%;
 `;
-const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -49,17 +42,17 @@ const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.apply
   flex-direction: row;
   justify-content: flex-start;
 `;
-const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Label = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   padding-bottom: 5px;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
 `;
-styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
 `;
-const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)`
   width: 100%;
   display: flex;
   flex-direction: row;
@@ -70,7 +63,7 @@ const ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.apply
   height: 100%;
   ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))}
 `;
-const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Completed = styled.div.attrs(applyDefaultTheme)`
   font-size: 1.2rem;
   font-weight: 400;
   height: 100%;
@@ -80,7 +73,7 @@ const Completed = styled__default["default"].div.attrs(defaultTheme.applyDefault
   width: 96px;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'))};
 `;
-const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const PercentageIndicator = styled.div.attrs(applyDefaultTheme)`
   position: absolute;
   right: 10px;
   font-weight: 400;
@@ -89,7 +82,7 @@ const PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.ap
   opacity: 0.8;
   ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
 `;
-const ExternalPercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ExternalPercentageIndicator = styled.div.attrs(applyDefaultTheme)`
   margin-left: 8px;
   font-size: 1.2rem;
   font-weight: 400;
@@ -99,7 +92,7 @@ const ExternalPercentageIndicator = styled__default["default"].div.attrs(default
   display: flex;
   align-items: center;
 `;
-const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ProgressBarFill = styled.div.attrs(applyDefaultTheme)`
   height: 100%;
   border-radius: 0 3px 3px 0;
   width: ${props => props.percentage}%;
@@ -110,7 +103,7 @@ const ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyD
   ${props => getBackgroundColor(props)}
   transition: width 0.3s ease;
 `;
-const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const Link = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 400;
   width: 15%;
@@ -129,7 +122,7 @@ const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme
     transform: translateX(2px);
   }
 `;
-const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+const ButtonLink = styled.div.attrs(applyDefaultTheme)`
   font-size: 0.875rem;
   font-weight: 500;
   height: 100%;
@@ -139,7 +132,7 @@ const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaul
   transition: color 0.2s ease-in-out;
   ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
 `;
-const StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)`
+const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)`
   height: 15px;
   margin-right: 10px;
   opacity: ${props => props.$isHovered ? 1 : 0.8};
@@ -161,7 +154,7 @@ const ProgressBar = ({
   onClick,
   ...props
 }) => {
-  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
   const safeCompletedAssets = Math.max(0, completedAssets);
   const safeTotalAssets = Math.max(1, totalAssets);
   const percentage = safeCompletedAssets / safeTotalAssets * 100;
@@ -178,40 +171,40 @@ const ProgressBar = ({
       return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
     }
   };
-  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+  return React__default.createElement(Container, _extends({
     height: height
-  }, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(InnerContainer, {
+  }, props), React__default.createElement(Label, null, label), React__default.createElement(InnerContainer, {
     type: type
-  }, React__default["default"].createElement(Completed, {
+  }, React__default.createElement(Completed, {
     type: type
-  }, formatNumberNew(completedAssets)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
+  }, formatNumberNew(completedAssets)), React__default.createElement(ProgressBarTrack, null, React__default.createElement(MetricsContainer, {
     hasLink: Boolean(linkText)
-  }, React__default["default"].createElement(ProgressBarFill, {
+  }, React__default.createElement(ProgressBarFill, {
     type: type,
     percentage: percentage,
     barColor: barColor
-  }, !isLowPercentage && React__default["default"].createElement(PercentageIndicator, {
+  }, !isLowPercentage && React__default.createElement(PercentageIndicator, {
     hasLink: Boolean(linkText)
-  }, percentageText || formattedPercentage)), isLowPercentage && React__default["default"].createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default["default"].createElement(Link, {
+  }, percentageText || formattedPercentage)), isLowPercentage && React__default.createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default.createElement(Link, {
     onClick: handleLinkClick,
     onMouseEnter: () => setIsLinkHovered(true),
     onMouseLeave: () => setIsLinkHovered(false)
-  }, React__default["default"].createElement(ButtonLink, {
+  }, React__default.createElement(ButtonLink, {
     $isHovered: isLinkHovered
-  }, linkText), React__default["default"].createElement(StyledArrowIcon, {
+  }, linkText), React__default.createElement(StyledArrowIcon, {
     $isHovered: isLinkHovered
   })))));
 };
 ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  totalAssets: defaultTheme.PropTypes.number.isRequired,
-  completedAssets: defaultTheme.PropTypes.number.isRequired,
-  percentageText: defaultTheme.PropTypes.string,
-  barColor: defaultTheme.PropTypes.string,
-  height: defaultTheme.PropTypes.number,
-  label: defaultTheme.PropTypes.string,
-  type: defaultTheme.PropTypes.string,
-  linkText: defaultTheme.PropTypes.string,
-  onClick: defaultTheme.PropTypes.func
+  totalAssets: PropTypes.number.isRequired,
+  completedAssets: PropTypes.number.isRequired,
+  percentageText: PropTypes.string,
+  barColor: PropTypes.string,
+  height: PropTypes.number,
+  label: PropTypes.string,
+  type: PropTypes.string,
+  linkText: PropTypes.string,
+  onClick: PropTypes.func
 } : {};
 
-exports.ProgressBar = ProgressBar;
+export { ProgressBar as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.0-rc.26",
+  "version": "2.0.0-rc.27",
   "publishConfig": {
     "access": "public"
   },

package/build/AssetPreviewTopBar-623cfa18.js

@@ -1,152 +0,0 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-var close = require('./close-1751121a.js');
-
-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__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function SvgArrowBack(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 32 32"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
-  })));
-}
-
-const AssetPreviewTopBar$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
-  box-sizing: border-box;
-  align-items: center;
-  border-bottom: ${props => props.border ? `1px solid` : `none`};
-  color: inherit;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-weight: 400;
-  min-height: 72px;
-  padding: 0 24px;
-  width: 100%;
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'))}
-
-  ${props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}
-
-      ${props => props.disabled && styled.css`
-      cursor: not-allowed;
-    `}
-`;
-const BackButtonContainer = styled__default["default"].a.attrs(defaultTheme.applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  font-size: 1.125rem;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-
-  ${props => props.disabled && styled.css`
-      opacity: 0.5;
-      pointer-events: none;
-    `}
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-  }
-`;
-const BackHoverEffect = styled__default["default"].div`
-  display: inline-flex;
-  align-items: center;
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-    transition: transform 0.3s ease-in-out;
-  }
-
-  &:hover > svg {
-    transform: translateX(-2px);
-  }
-`;
-const LeftText = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
-  font-size: 1.125rem;
-  margin-left: 16px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
-`;
-const ButtonsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-
-  > span {
-    margin-left: 16px;
-  }
-`;
-
-const AssetPreviewTopBar = React__default["default"].forwardRef(function AssetPreviewTopBar({
-  onBackButtonClick,
-  backButtonText,
-  backButtonAsClose,
-  leftText,
-  buttons,
-  shadow,
-  border,
-  disabled,
-  ...props
-}, forwardedRef) {
-  return React__default["default"].createElement(AssetPreviewTopBar$1, _rollupPluginBabelHelpers._extends({
-    ref: forwardedRef,
-    shadow: shadow,
-    border: border,
-    disabled: disabled
-  }, props), React__default["default"].createElement(BackButtonContainer, {
-    onClick: onBackButtonClick,
-    disabled: disabled
-  }, backButtonAsClose ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(close.SvgClose, null), backButtonText) : React__default["default"].createElement(BackHoverEffect, null, React__default["default"].createElement(SvgArrowBack, null), backButtonText)), leftText && React__default["default"].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default["default"].createElement(ButtonsContainer, null, buttons.map((button, index) => React__default["default"].createElement("span", {
-    key: 'topBarButton-' + index
-  }, button))));
-});
-AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  onBackButtonClick: defaultTheme.PropTypes.func.isRequired,
-  backButtonText: defaultTheme.PropTypes.string.isRequired,
-  disabled: defaultTheme.PropTypes.bool,
-  backButtonAsClose: defaultTheme.PropTypes.bool,
-  leftText: defaultTheme.PropTypes.string,
-  shadow: defaultTheme.PropTypes.bool,
-  border: defaultTheme.PropTypes.bool,
-  buttons: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node)
-} : {};
-AssetPreviewTopBar.defaultProps = {};
-
-exports.AssetPreviewTopBar = AssetPreviewTopBar;

package/build/ContextMenu-82f9d728.js

@@ -1,33 +0,0 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const ContextMenu$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  padding: 3px 0;
-`;
-
-const ContextMenu = React__default["default"].forwardRef(function ContextMenu({
-  children,
-  ...props
-}, forwardedRef) {
-  return React__default["default"].createElement(ContextMenu$1, _rollupPluginBabelHelpers._extends({
-    ref: forwardedRef
-  }, props, {
-    role: "menu"
-  }), children);
-});
-ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.any
-} : {};
-ContextMenu.defaultProps = {};
-
-exports.ContextMenu = ContextMenu;

package/build/InputGroup-8d4a4644.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
-var React = require('react');
-var defaultTheme = require('./defaultTheme-d9a7342e.js');
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const InputGroup$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
-  margin: 8px 0;
-`;
-
-const InputGroup = React__default["default"].forwardRef(function InputGroup({
-  children,
-  ...props
-}, forwardedRef) {
-  return React__default["default"].createElement(InputGroup$1, _rollupPluginBabelHelpers._extends({
-    ref: forwardedRef
-  }, props), children);
-});
-InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.node
-} : {};
-InputGroup.defaultProps = {};
-
-exports.InputGroup = InputGroup;