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

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -0,0 +1,127 @@
+import { _ as _extends$1 } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import * as React from 'react';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { S as SvgClose } from '../../../close-a5d37608.js';
+
+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.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32"
+  }, props), _path || (_path = /*#__PURE__*/React.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.div.attrs(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 && css`
+      cursor: not-allowed;
+    `}
+`;
+const BackButtonContainer = styled.a.attrs(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 && css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+  }
+`;
+const BackHoverEffect = styled.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.span.attrs(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.div.attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+
+  > span {
+    margin-left: 16px;
+  }
+`;
+
+const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar({
+  onBackButtonClick,
+  backButtonText,
+  backButtonAsClose,
+  leftText,
+  buttons,
+  shadow,
+  border,
+  disabled,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(AssetPreviewTopBar$1, _extends$1({
+    ref: forwardedRef,
+    shadow: shadow,
+    border: border,
+    disabled: disabled
+  }, props), React__default.createElement(BackButtonContainer, {
+    onClick: onBackButtonClick,
+    disabled: disabled
+  }, backButtonAsClose ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgClose, null), backButtonText) : React__default.createElement(BackHoverEffect, null, React__default.createElement(SvgArrowBack, null), backButtonText)), leftText && React__default.createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default.createElement(ButtonsContainer, null, buttons.map((button, index) => React__default.createElement("span", {
+    key: 'topBarButton-' + index
+  }, button))));
+});
+AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onBackButtonClick: PropTypes.func.isRequired,
+  backButtonText: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  backButtonAsClose: PropTypes.bool,
+  leftText: PropTypes.string,
+  shadow: PropTypes.bool,
+  border: PropTypes.bool,
+  buttons: PropTypes.arrayOf(PropTypes.node)
+} : {};
+AssetPreviewTopBar.defaultProps = {};
+
+export { AssetPreviewTopBar as default };

package/build/widgets/ContextMenu/ContextMenu.js

@@ -0,0 +1,26 @@
+import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const ContextMenu$1 = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  padding: 3px 0;
+`;
+
+const ContextMenu = React__default.forwardRef(function ContextMenu({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenu$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "menu"
+  }), children);
+});
+ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.any
+} : {};
+ContextMenu.defaultProps = {};
+
+export { ContextMenu as default };

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -0,0 +1,127 @@
+import { _ as _extends$1 } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import * as React from 'react';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+
+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 SvgTriangleRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10 20"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "currentColor",
+    d: "M0 20V0l10 10L0 20z"
+  })));
+}
+
+const ContextMenuItem$1 = styled.span.attrs(applyDefaultTheme)`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 0.875rem;
+  font-weight: normal;
+  height: 31px;
+  min-width: 160px;
+  padding: ${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 && css`
+      padding-left: 28px;
+    `}
+
+  :not(:last-of-type) {
+    border-bottom: 1px solid;
+
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  :last-of-type {
+    height: 32px;
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    ${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] && css`
+      &&:hover {
+        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
+      }
+    `}
+
+  ${props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && css`
+      &&:hover {
+        ${props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])}
+      }
+    `}
+`;
+const IconContainer = styled.span.attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-right: 8px;
+
+  svg {
+    height: 12px;
+  }
+`;
+const SublevelIconContainer = styled.span.attrs(applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-left: auto;
+  margin-right: 8px;
+  padding-left: 24px;
+
+  svg {
+    height: 12px;
+  }
+`;
+
+const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
+  title,
+  icon,
+  onClickEffect,
+  opensSublevel,
+  hoverColors,
+  hoverBackgroundColors,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenuItem$1, _extends$1({
+    ref: forwardedRef,
+    icon: icon,
+    onClick: onClickEffect,
+    hoverColors: hoverColors,
+    hoverBackgroundColors: hoverBackgroundColors,
+    opensSublevel: opensSublevel,
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
+  }, props, {
+    role: "menuitem"
+  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement("span", null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
+});
+ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.element,
+  onClickEffect: PropTypes.func,
+  opensSublevel: PropTypes.bool,
+  hoverColors: PropTypes.arrayOf(PropTypes.string),
+  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
+} : {};
+ContextMenuItem.defaultProps = {
+  icon: undefined,
+  hoverColors: undefined,
+  hoverBackgroundColors: undefined,
+  opensSublevel: false
+};
+
+export { ContextMenuItem as default };

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -0,0 +1,37 @@
+import { _ as _extends } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
+import React__default from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
+import styled from 'styled-components';
+
+const ContextMenuItemsGroup$1 = styled.div.attrs(applyDefaultTheme)`
+  :not(:last-child) {
+    border-bottom: 1px solid;
+
+    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
+  }
+
+  > * {
+    border-bottom: none !important;
+  }
+
+  > *:not(:last-child) {
+    height: 32px;
+  }
+`;
+
+const ContextMenuItemsGroup = React__default.forwardRef(function ContextMenuItemsGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default.createElement(ContextMenuItemsGroup$1, _extends({
+    ref: forwardedRef
+  }, props, {
+    role: "group"
+  }), children);
+});
+ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.arrayOf(PropTypes.node)
+} : {};
+ContextMenuItemsGroup.defaultProps = {};
+
+export { ContextMenuItemsGroup as default };

package/build/widgets/InfoCard/InfoCard.js

@@ -0,0 +1,125 @@
+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 Container = styled.div.attrs(applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))};
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 0;
+`;
+const MetricsContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  gap: 5px;
+  padding-left: 15px;
+`;
+const IconTotalContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+const Total = styled.div.attrs(applyDefaultTheme)`
+  font-size: 1.22rem;
+  font-weight: 700;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const Label = styled.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
+`;
+const IconContainer = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  margin-top: -0.05rem;
+`;
+const Link = styled.div.attrs(applyDefaultTheme)`
+  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.div.attrs(applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  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(SvgArrowForward).attrs(applyDefaultTheme)`
+  height: 15px;
+  margin-right: 10px;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
+
+  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
+`;
+
+const InfoCard = React__default.forwardRef(function InfoCard({
+  icon,
+  total,
+  label,
+  linkLabel,
+  onClick,
+  height,
+  ...props
+}, forwardedRef) {
+  const [isLinkHovered, setIsLinkHovered] = useState(false);
+  const handleLinkClick = e => onClick(e);
+  return React__default.createElement(Container, _extends({
+    height: height,
+    ref: forwardedRef
+  }, props), React__default.createElement(MetricsContainer, null, React__default.createElement(IconTotalContainer, null, React__default.createElement(IconContainer, null, icon), React__default.createElement(Total, null, total)), React__default.createElement(Label, null, label)), linkLabel && onClick && React__default.createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default.createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkLabel), React__default.createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })));
+});
+InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: PropTypes.element.isRequired,
+  total: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  linkLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  height: PropTypes.number
+} : {};
+
+export { InfoCard as default };

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 };