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

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

@@ -0,0 +1,213 @@
+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

@@ -0,0 +1,36 @@
+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

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

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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,137 @@
+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

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

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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,9 @@
+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';