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

package/esm/components/widgets/Instructions/Instructions.js

@@ -1,213 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { isFunction } from 'lodash';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import React from '../../../node_modules/react/index.js';
-import { ReactComponent as SvgWarningCircle } from '../../../icons/warning-circle.svg.js';
-import AutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js';
-import TextArea from '../../inputs/TextArea/TextArea.js';
-import { Instructions as Instructions$2, TopBarContainer, SelectContainer, InstructionsArea } from './Instructions.styled.js';
-import { r as react } from '../../../_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 = React.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 = _objectWithoutProperties(_ref, _excluded);
-  const [isHovered, setIsHovered] = react.exports.useState(false);
-  const [selected, setSelected] = react.exports.useState({});
-  const [addInstructions, setAddInstructions] = react.exports.useState(clickToAdd);
-  const [customMessage, setCustomMessage] = react.exports.useState(customAddMessage);
-  const [background, setBackground] = react.exports.useState(lightBackground);
-  const [initialHover, setInitialHover] = react.exports.useState(true);
-  const [currentValue, setCurrentValue] = react.exports.useState();
-  react.exports.useEffect(() => {
-    if (isFunction(subscribeCurrentValueProp)) {
-      subscribeCurrentValueProp(currentValue);
-    }
-  }, [currentValue]);
-  react.exports.useEffect(() => {
-    handleChange(selected);
-  }, [selected]);
-  react.exports.useEffect(() => {
-    if (selectedOption) {
-      setCurrentValue(selectedOption.value);
-    }
-  }, [selectedOption]);
-  react.exports.useEffect(() => {
-    if (addInstructions) {
-      setCurrentValue(customMessage);
-      setInitialHover(true);
-    }
-  }, [addInstructions, handleOnFocus]);
-  const onChange = react.exports.useCallback(event => {
-    setCurrentValue(event.target.value);
-    if (isFunction(onChangeProp)) {
-      onChangeProp(event);
-    }
-  }, [onChangeProp]);
-  const onFocus = react.exports.useCallback(event => {
-    if (autoSelect) {
-      event.target.select();
-    }
-    if (isFunction(onFocusProp)) {
-      onFocusProp(event);
-    }
-    if (event.target.value === customMessage) {
-      setCurrentValue('');
-    }
-  }, [autoSelect, readOnly, onFocusProp]);
-  const onBlur = react.exports.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.createElement(Instructions$2, _extends({
-    ref: forwardedRef,
-    initialHover: initialHover,
-    onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React.createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React.createElement(SelectContainer, null, React.createElement(AutocompleteSelect, _extends({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), React.createElement(InstructionsArea, {
-    type: type
-  }, React.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.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'])
-} : {};
-var Instructions$1 = Instructions;
-
-export { Instructions$1 as default };

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

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const Instructions = styled.div.attrs(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.div.attrs(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.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  width: 100%;
-  margin: 0 2px;
-`));
-const InstructionsArea = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  margin: 2px 2px -2px 2px;
-`));
-
-export { Instructions, InstructionsArea, SelectContainer, TopBarContainer };

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

@@ -1 +0,0 @@
-export { default } from '../../Instructions.js';

package/esm/components/widgets/ProgressBar/ProgressBar.js

@@ -1,54 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React from '../../../node_modules/react/index.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import { Container, Label, ProgressBarTrack, MetricsContainer, Completed, ProgressBarFill, PercentageIndicator, Link, ButtonLink, StyledArrowIcon } from './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 = _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 React.createElement(Container, _extends({
-    height: height
-  }, props), React.createElement(Label, null, label), React.createElement(ProgressBarTrack, null, React.createElement(MetricsContainer, {
-    hasLink: Boolean(linkText)
-  }, React.createElement(Completed, {
-    type: type
-  }, safeCompletedAssets), React.createElement(ProgressBarFill, {
-    type: type,
-    percentage: percentage,
-    barColor: barColor
-  }, React.createElement(PercentageIndicator, {
-    hasLink: Boolean(linkText)
-  }, percentageText || formattedPercentage))), linkText && React.createElement(Link, {
-    onClick: handleLinkClick
-  }, React.createElement(ButtonLink, null, linkText), React.createElement(StyledArrowIcon, null))));
-};
-ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  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
-} : {};
-var ProgressBar$1 = ProgressBar;
-
-export { ProgressBar$1 as default };

package/esm/components/widgets/ProgressBar/ProgressBar.styled.js

@@ -1,137 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-import { ReactComponent as SvgArrowForward } from '../../../icons/arrow-forward.svg.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10,
-  _t11,
-  _t12;
-const getBackgroundColor = props => {
-  if (props.barColor) {
-    return `background: ${props.barColor};`;
-  }
-  const colorMap = {
-    success: ['emerald-600', 'emerald-300'],
-    error: ['red-600', 'cercise-200'],
-    warning: ['orange-600', 'orange-400'],
-    none: ['gray-500', 'gray-300'],
-    default: ['emerald-600', 'emerald-500']
-  };
-  const [darkColor, lightColor] = colorMap[props.type] || colorMap.default;
-  return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
-};
-styled.p.attrs(applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-`), props => props.theme.primaryFontFamily);
-const Container = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  width: 100%;
-  height: ${0};
-  font-family: ${0};
-`), props => props.height ? `${props.height}px` : '50px', props => props.theme.primaryFontFamily);
-const MetricsContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: ${0};
-  height: 100%;
-  flex-direction: row;
-  justify-content: flex-start;
-`), props => props.hasLink ? '85%' : '100%');
-const Label = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  font-size: 0.875rem;
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  font-size: 0.875rem;
-  font-weight: 500;
-  ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
-const ProgressBarTrack = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border-radius: 3px;
-  height: 100%;
-  ${0}
-`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')));
-const Completed = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
-  font-size: 1.2rem;
-  font-weight: 400;
-  height: 100%;
-  padding: 0 8px;
-  border-radius: 3px 0 0 3px;
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  ${0}
-  ${0};
-`), props => getBackgroundColor(props), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800')));
-const PercentageIndicator = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  position: absolute;
-  right: 10px;
-  font-weight: 400;
-  font-size: 0.875rem;
-  white-space: nowrap;
-  opacity: 0.8;
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
-const ProgressBarFill = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
-  height: 100%;
-  border-radius: 0 3px 3px 0;
-  width: ${0}%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  ${0}
-  transition: width 0.3s ease;
-`), props => props.percentage, props => getBackgroundColor(props));
-const Link = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _`
-  font-size: 0.875rem;
-  font-weight: 400;
-  width: 15%;
-  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.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
-const StyledArrowIcon = styled(SvgArrowForward).attrs(applyDefaultTheme)(_t12 || (_t12 = _`
-  height: 15px;
-  margin-right: 10px;
-  ${0};
-`), props => props.theme.themeProp('fill', props.theme.getColor('gray-100'), props.theme.getColor('black')));
-
-export { ButtonLink, Completed, Container, Label, Link, MetricsContainer, PercentageIndicator, ProgressBarFill, ProgressBarTrack, StyledArrowIcon };

package/esm/components/widgets/ProgressBar/widgets/ProgressBar/index.js

@@ -1 +0,0 @@
-export { default } from '../../ProgressBar.js';

package/esm/components/widgets/SummaryCard/SummaryCard.js

@@ -1,88 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import React from '../../../node_modules/react/index.js';
-import { ReactComponent as SvgWarningCircle } from '../../../icons/warning-circle.svg.js';
-import { SummaryCard as SummaryCard$2, Gutter, Header, HeaderLeft, HeaderRight, Title, Description, Instruction, Footer, FooterLeft, FooterRight } from './SummaryCard.styled.js';
-import Alert from '../../data/Alert/Alert.js';
-
-const _excluded = ["activeSummaryCard", "title", "description", "instructions", "instructionsType", "headerLeft", "headerRight", "footerLeft", "footerRight", "width", "useBorder", "view"];
-const SummaryCard = React.forwardRef(function AssetSummaryCard(_ref, forwardedRef) {
-  let {
-      activeSummaryCard,
-      title,
-      description,
-      instructions,
-      instructionsType,
-      headerLeft,
-      headerRight,
-      footerLeft,
-      footerRight,
-      width,
-      useBorder,
-      view
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const shouldRenderInstructions = !!instructions;
-  const shouldRenderHeader = !!headerLeft || !!headerRight;
-  const shouldRenderFooter = !!footerLeft || !!footerRight;
-  const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
-  const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
-  if (!activeSummaryCard) return null;
-  return React.createElement(SummaryCard$2, _extends({
-    ref: forwardedRef,
-    width: width,
-    useBorder: useBorder
-  }, props, {
-    view: view
-  }), shouldRenderHeader && React.createElement(React.Fragment, null, React.createElement(Gutter, {
-    gutter: 8
-  }), React.createElement(Header, null, React.createElement(HeaderLeft, null, headerLeft), React.createElement(HeaderRight, null, headerRight))), React.createElement(Gutter, {
-    gutter: shouldRenderHeader ? 8 : 16
-  }), title && React.createElement(Title, null, title), shouldAddGutterAfterTitle && React.createElement(Gutter, {
-    gutter: 4
-  }), description && React.createElement(Description, null, description), React.createElement(Gutter, {
-    gutter: 16
-  }), shouldRenderInstructions && React.createElement(Instruction, null, React.createElement(Alert, {
-    icon: React.createElement(SvgWarningCircle, null),
-    alertMessage: instructions,
-    type: instructionsType,
-    fontSize: 12,
-    verticalPadding: 12,
-    horizontalPadding: 16,
-    width: width,
-    lineClamp: 1
-  })), shouldAddGutterAfterInstructions && React.createElement(Gutter, {
-    gutter: 16
-  }), shouldRenderFooter && React.createElement(Footer, null, React.createElement(FooterLeft, null, footerLeft), React.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React.createElement(Gutter, {
-    gutter: 16
-  }));
-});
-SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  activeSummaryCard: PropTypes.bool,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  instructions: PropTypes.string,
-  instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
-  headerLeft: PropTypes.node,
-  headerRight: PropTypes.node,
-  footerLeft: PropTypes.node,
-  footerRight: PropTypes.node,
-  width: PropTypes.number,
-  useBorder: PropTypes.bool,
-  view: PropTypes.string
-} : {};
-SummaryCard.defaultProps = {
-  title: '',
-  description: '',
-  instructions: '',
-  instructionsType: 'info',
-  headerLeft: null,
-  headerRight: null,
-  footerLeft: null,
-  footerRight: null,
-  useBorder: false,
-  activeSummaryCard: false
-};
-var SummaryCard$1 = SummaryCard;
-
-export { SummaryCard$1 as default };

package/esm/components/widgets/SummaryCard/SummaryCard.styled.js

@@ -1,124 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-import { FloatingArrow } from '@floating-ui/react';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14;
-const SummaryCard = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  width: ${0};
-  ${0};
-
-  ${0}
-`), props => props.width ? `${props.width}px` : '100%', props => props.compact ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent', props => props.useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null);
-const Gutter = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  ${0}
-  padding-bottom: ${0}px;
-`), props => {
-  if (props.renderAsMargin) {
-    return css(_t3 || (_t3 = _`
-        margin-bottom: ${0}px;
-      `), props.gutter || 8);
-  } else {
-    return css(_t4 || (_t4 = _`
-        padding-bottom: ${0}px;
-      `), props.gutter || 8);
-  }
-}, props => props.gutter || 8);
-const Header = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`));
-const HeaderLeft = styled.div.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`));
-const HeaderRight = styled.div.attrs(applyDefaultTheme)(_t7 || (_t7 = _`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`));
-const Title = styled.span.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
-  display: inline-block;
-  padding: 0 16px;
-  font: normal normal 500 14px/19px Roboto;
-  letter-spacing: 0.28px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Description = styled.span.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
-  padding: 0 16px;
-  text-align: left;
-  font: normal normal normal 12px/16px Roboto;
-  letter-spacing: 0.24px;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  box-sizing: border-box;
-
-  ${0};
-`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')));
-const Instruction = styled.div.attrs(applyDefaultTheme)(_t10 || (_t10 = _``));
-const Footer = styled.div.attrs(applyDefaultTheme)(_t11 || (_t11 = _`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 16px;
-`));
-const FooterLeft = styled.div.attrs(applyDefaultTheme)(_t12 || (_t12 = _`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  > * {
-    margin-right: 4px;
-  }
-`));
-const FooterRight = styled.div.attrs(applyDefaultTheme)(_t13 || (_t13 = _`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  > * {
-    margin-left: 4px;
-  }
-`));
-styled(FloatingArrow).attrs(applyDefaultTheme)(_t14 || (_t14 = _`
-  ${0}
-`), props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white')));
-
-export { Description, Footer, FooterLeft, FooterRight, Gutter, Header, HeaderLeft, HeaderRight, Instruction, SummaryCard, Title };

package/esm/components/widgets/widgets/index.js

@@ -1,9 +0,0 @@
-export { default as AssetGallery } from '../AssetGallery/AssetGallery.js';
-export { default as ContextMenu } from '../ContextMenu/ContextMenu.js';
-export { default as AssetPreviewTopBar } from '../AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js';
-export { default as Instructions } from '../Instructions/Instructions.js';
-export { default as SummaryCard } from '../SummaryCard/SummaryCard.js';
-export { default as AssetActionBase } from '../AssetActionsBase/AssetActionsBase.js';
-export { default as AssetAction } from '../AssetAction/AssetAction.js';
-export { default as ProgressBar } from '../ProgressBar/ProgressBar.js';
-export { default as InfoCard } from '../InfoCard/InfoCard.js';