@ntbjs/react-components 1.1.0-beta.2 → 1.1.0-beta.3

package/MultiSelect-1568f6e9.js

@@ -0,0 +1,357 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+var close = require('./close-ebf2f3cf.js');
+var Select = require('react-select');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-efe1e1ae.js');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+
+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);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
+var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
+var showMoreHeight = 114;
+var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  position: relative;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+var MultiSelect$1 = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var CreatableMultiSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var AsyncCreatableMultiSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var AsyncMultiSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedStyle);
+var MultiSelectWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n"])));
+var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    align-items: flex-start;\n    background: transparent;\n    border: none;\n    box-shadow: none;\n  }\n\n  :hover {\n    cursor: ", ";\n  }\n"])), function (props) {
+  return !props.isDisabled && props.focused || props.readOnly ? 'default' : 'pointer';
+});
+var ValueContainer = styled__default['default'](Select.components.ValueContainer)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    align-items: flex-start;\n    gap: 8px;\n    padding: 0;\n\n    max-height: ", " !important;\n\n    ", "\n  }\n"])), function (props) {
+  return props.showMore ? props.error || props.warning ? '100%' : showMoreHeight + 16 + 'px' : '100%';
+}, function (props) {
+  return (props.error || props.warning) && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n        border: 1px solid;\n        border-radius: 3px;\n        padding: 4px;\n\n        border-color: ", ";\n      "])), function (props) {
+    return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
+  });
+});
+var MultiValueWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n  }\n"])));
+var MultiValue = styled__default['default'](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    border-radius: 3px;\n    margin: 0;\n\n    ", "\n\n    ", "\n\n    > div {\n      align-items: center;\n      display: flex;\n      font-size: 12px;\n      min-height: 26px;\n\n      :first-child {\n        padding: ", ";\n      }\n\n      :last-child:not(:only-child) {\n        padding: 0 8px 0 5px;\n        height: 100%;\n        width: fit-content;\n      }\n\n      :last-child:not(:only-child):hover {\n        background-color: ", ";\n        border-bottom-left-radius: 0;\n        border-top-left-radius: 0;\n        cursor: pointer;\n      }\n\n      svg {\n        stroke: white;\n        stroke-width: 2px;\n        width: 8px;\n      }\n\n    :hover {\n      cursor: pointer;\n    }\n  }\n"])), function (props) {
+  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
+}, function (props) {
+  return props.isDisabled || props.readOnly ? '0 8px' : '0 3px 0 8px';
+}, function (props) {
+  return props.theme.getColor('red-500');
+});
+var MultiValueRemove = styled__default['default'](Select.components.MultiValueRemove).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral([""])));
+var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  align-self: center;\n  font-size: ", ";\n  min-width: 150px;\n\n  ", "\n\n  ", "\n  }\n"])), function (props) {
+  return props.$focused ? '14px' : '12px';
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+}, function (props) {
+  return !props.$focused && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      :before {\n        height: 100%;\n        white-space: nowrap;\n        width: fit-content;\n        content: '", "';\n      }\n    "])), function (props) {
+    return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+  }, function (props) {
+    return props.edittext;
+  });
+});
+var DropdownMenu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 14px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('white'));
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+});
+var sharedOptionStyle = styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+}, function (props) {
+  return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n\n      ", "\n    "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')));
+}, function (props) {
+  return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+});
+var Option = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n"])), sharedOptionStyle);
+var SelectedOption$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  display: flex !important;\n  justify-content: space-between;\n"])), sharedOptionStyle);
+var DropdownOptionDeleteIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n  stroke-width: 1px;\n  width: 8px;\n\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('stroke', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+});
+var ShowMoreWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  max-height: ", "px;\n  top: 0;\n  width: 100%;\n\n  ", "\n\n  :hover {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n"])), showMoreHeight + 16, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('emerald-500'));
+});
+var ShowMoreOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n  align-items: end;\n  display: block;\n  height: 100%;\n  max-height: ", "px;\n  left: 0;\n  top: 0;\n  width: 100%;\n\n  ", "\n"])), showMoreHeight, function (props) {
+  return props.theme.themeProp('background', 'transparent linear-gradient(180deg, #12121200 0%, #12121230 40%, #12121279 70%, #121212 95%, #121212 100%) 0% 0% no-repeat padding-box', 'transparent linear-gradient(180deg, #fefefe00 0%, #fefefe30 40%, #fefefe79 70%, #fefefe 95%, #fefefe 100%) 0% 0% no-repeat padding-box');
+});
+var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.875rem;\n  width: 100%;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('background-color', '#121212', '#fefefe');
+});
+var ErrorMessage = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  margin-top: 8px;\n  padding: 0 12px;\n"])), function (props) {
+  return props.error ? props.theme.getColor('red-500') : props.warning ? props.theme.getColor('orange-500') : 'inherit';
+});
+
+var MultiSelect = React__default['default'].forwardRef(function MultiSelect(_ref, forwardedRef) {
+  var selectedOptions = _ref.selectedOptions,
+      availableOptions = _ref.availableOptions,
+      loadOptions = _ref.loadOptions,
+      loadingMessageFunc = _ref.loadingMessageFunc,
+      onUpdateCallback = _ref.onUpdateCallback,
+      editText = _ref.editText,
+      createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
+      noOptionsMessageFunc = _ref.noOptionsMessageFunc,
+      onMultiValueClick = _ref.onMultiValueClick,
+      showMore = _ref.showMore,
+      showMoreText = _ref.showMoreText,
+      displayTotalOnShowMore = _ref.displayTotalOnShowMore,
+      creatable = _ref.creatable,
+      readOnly = _ref.readOnly,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      warning = _ref.warning,
+      props = defaultTheme._objectWithoutProperties(_ref, ["selectedOptions", "availableOptions", "loadOptions", "loadingMessageFunc", "onUpdateCallback", "editText", "createNewOptionMessageFunc", "noOptionsMessageFunc", "onMultiValueClick", "showMore", "showMoreText", "displayTotalOnShowMore", "creatable", "readOnly", "disabled", "error", "warning"]);
+
+  var _useState = React.useState(selectedOptions),
+      _useState2 = defaultTheme._slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = React.useState(error || warning ? false : showMore),
+      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+      displayShowMore = _useState6[0],
+      setDisplayShowMore = _useState6[1];
+
+  var _useState7 = React.useState(0),
+      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+      cacheUnique = _useState8[0],
+      setCacheUnique = _useState8[1];
+
+  var handleShowMoreClick = function handleShowMoreClick() {
+    setDisplayShowMore(false);
+  };
+
+  var Control$1 = React.useMemo(function () {
+    var ControlWrapper = function ControlWrapper(innerProps) {
+      return React__default['default'].createElement(Control, defaultTheme._extends({
+        className: "multi-select-control",
+        readOnly: readOnly
+      }, innerProps));
+    };
+
+    ControlWrapper.displayName = 'ControlWrapper';
+    return ControlWrapper;
+  }, []);
+  var ValueContainer$1 = React.useMemo(function () {
+    var ValueContainerWrapper = function ValueContainerWrapper(innerProps) {
+      return React__default['default'].createElement(ValueContainer, defaultTheme._extends({
+        showMore: displayShowMore,
+        error: error,
+        warning: warning,
+        className: "multi-select-values-container"
+      }, innerProps));
+    };
+
+    ValueContainerWrapper.displayName = 'ValueContainerWrapper';
+    return ValueContainerWrapper;
+  }, [displayShowMore, error, warning]);
+
+  var MultiValue$1 = function MultiValue$1(innerProps) {
+    return React__default['default'].createElement(MultiValueWrapper, {
+      className: "multi-value-wrapper",
+      onMouseDown: function onMouseDown(e) {
+        e.stopPropagation();
+
+        if (onMultiValueClick && innerProps.data && !(e.target.role === 'button' || e.target instanceof SVGElement)) {
+          onMultiValueClick(innerProps.data);
+        }
+      }
+    }, React__default['default'].createElement(MultiValue, defaultTheme._extends({
+      className: "multi-value",
+      readOnly: readOnly
+    }, innerProps)));
+  };
+
+  var Input$1 = React.useMemo(function () {
+    var InputWrapper = function InputWrapper(innerProps) {
+      return React__default['default'].createElement(Input, defaultTheme._extends({
+        className: "multi-select-input",
+        $focused: focused,
+        edittext: editText
+      }, innerProps, {
+        isDisabled: readOnly || disabled
+      }));
+    };
+
+    InputWrapper.displayName = 'InputWrapper';
+    return InputWrapper;
+  }, [focused]);
+  var innerComponents = {
+    DropdownIndicator: null,
+    Control: Control$1,
+    MultiValue: MultiValue$1,
+    MultiValueRemove: function MultiValueRemove(innerProps) {
+      return readOnly || disabled ? false : _MultiValueRemove(innerProps);
+    },
+    ValueContainer: ValueContainer$1,
+    Input: Input$1,
+    Menu: Menu,
+    Option: function Option(innerProps) {
+      return innerProps.isSelected ? SelectedOption(innerProps) : _Option(innerProps);
+    }
+  };
+  var sharedSelectProps = {
+    ref: forwardedRef,
+    value: selected,
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    editText: editText,
+    formatCreateLabel: createNewOptionMessageFunc,
+    showMore: displayShowMore,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    components: innerComponents,
+    focused: focused,
+    isMulti: true,
+    isClearable: false,
+    placeholder: null,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
+    },
+    noOptionsMessage: function noOptionsMessage(input) {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onChange: function onChange(selectedOptions, actionMeta) {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          if (loadOptions) {
+            setCacheUnique(cacheUnique + 1);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.removedValue);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+
+        case 'clear':
+          break;
+
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, actionMeta.option);
+          }
+
+          setSelected(selectedOptions);
+          break;
+      }
+    }
+  };
+  return React__default['default'].createElement(MultiSelectWrapper, {
+    error: error,
+    warning: warning
+  }, loadOptions ? creatable ? React__default['default'].createElement(AsyncCreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(AsyncMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : creatable ? React__default['default'].createElement(CreatableMultiSelect, defaultTheme._extends({}, sharedSelectProps, props)) : React__default['default'].createElement(MultiSelect$1, defaultTheme._extends({}, sharedSelectProps, props)), displayShowMore && !(error || warning) && React__default['default'].createElement(ShowMoreWrapper, {
+    onClick: handleShowMoreClick
+  }, React__default['default'].createElement(ShowMoreOverlay, null), React__default['default'].createElement(ShowMoreText, null, showMoreText, " ", displayTotalOnShowMore && '(' + selected.length + ')')), (typeof error === 'string' || typeof warning === 'string') && React__default['default'].createElement(ErrorMessage, {
+    error: error,
+    warning: warning
+  }, error ? error : warning));
+});
+MultiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  selectedOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  loadOptions: defaultTheme.PropTypes.func,
+  loadingMessageFunc: defaultTheme.PropTypes.func,
+  onUpdateCallback: defaultTheme.PropTypes.func,
+  editText: defaultTheme.PropTypes.string.isRequired,
+  creatable: defaultTheme.PropTypes.bool,
+  createNewOptionMessageFunc: defaultTheme.PropTypes.func,
+  noOptionsMessageFunc: defaultTheme.PropTypes.func,
+  onMultiValueClick: defaultTheme.PropTypes.func,
+  showMore: defaultTheme.PropTypes.bool,
+  showMoreText: defaultTheme.PropTypes.string,
+  displayTotalOnShowMore: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string])
+} : {};
+MultiSelect.defaultProps = {
+  noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
+    if (inputValue) {
+      return "No matches for \"".concat(inputValue, "\"");
+    } else {
+      return 'No available options';
+    }
+  },
+  showMore: false,
+  displayTotalOnShowMore: true,
+  readOnly: false,
+  disabled: false,
+  creatable: false,
+  error: false,
+  warning: false,
+  showMoreText: 'Show more'
+};
+
+var _MultiValueRemove = function _MultiValueRemove(innerProps) {
+  return React__default['default'].createElement(MultiValueRemove, innerProps, React__default['default'].createElement(close.SvgClose, {
+    className: "multi-value-remove-icon"
+  }));
+};
+
+var Menu = function Menu(innerProps) {
+  return React__default['default'].createElement(DropdownMenu, innerProps);
+};
+
+var _Option = function _Option(innerProps) {
+  return React__default['default'].createElement(Option, defaultTheme._extends({
+    className: "multi-select-dropdown-item"
+  }, innerProps));
+};
+
+var SelectedOption = function SelectedOption(innerProps) {
+  return React__default['default'].createElement(SelectedOption$1, innerProps, innerProps.label, React__default['default'].createElement(DropdownOptionDeleteIcon, null));
+};
+
+exports.MultiSelect = MultiSelect;

package/{TextArea-06d9e80b.js → TextArea-8a0bd754.js}

@@ -12,22 +12,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-size: 0.75rem;\n  padding: 0 3px;\n  top: -7px;\n  letter-spacing: 0.03em;\n  left: 8px !important;\n  opacity: 1 !important;\n"])));
 var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
 }, function (props) {
   return props.theme.themeProp('opacity', 0.6, 0.5);
 });
-var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  display: flex;\n  align-items: flex-start;\n  position: absolute;\n  right: 5px;\n  top: 10px;\n  bottom: 0;\n  color: ", ";\n\n  ", "\n\n  ", "\n\n  > svg {\n    width: 12px;\n  }\n"])), function (props) {
-  return props.theme.getColor('gray-400');
-}, function (props) {
-  return props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43');
-}, function (props) {
-  return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
+var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 0;\n  pointer-events: none;\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n  display: flex;\n  align-items: flex-start;\n  position: absolute;\n  right: 5px;\n  top: 10px;\n  bottom: 0;\n  svg {\n    width: 15px;\n    opacity: 0.7;\n    transition: opacity 250ms;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
 });
-var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 13px 10px;\n  resize: vertical;\n  ", "\n  ", "\n  border: 1px solid;\n  ", "\n  ", " \n\n    ", " \n      \n   \n      ", " \n           \n      \n    \n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  ", "\n  ", "\n  ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n\n  &&:hover:not(:focus) {\n    ", ";\n    transition: background 350ms;\n    & + ", " {\n      opacity: 1;\n      transition: opacity 350ms;\n    }\n  }\n\n  :focus {\n    outline: none;\n    border-color: ", " !important\n"])), function (props) {
+var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  font-family: inherit;\n  font-size: 0.875rem;\n  border-radius: 2px;\n  padding: 13px 10px;\n  resize: vertical;\n  ", "\n    ", "\n  ", "\n  border: 1px solid;\n  ", "\n  ", " \n\n    ", " \n\n  ", " \n\n    ", " \n\n      &&:hover:not(:focus) {\n        ", ";\n        transition: background 350ms;\n        & + ", " {\n          opacity: 1;\n          transition: opacity 350ms;\n        }\n        }\n           \n  border-radius: 3px;\n  box-sizing: border-box;\n  appearance: none;\n  transition: border-color 350ms;\n  ", "\n  ", "\n  ", "\n\n    ", "\n\n  &::placeholder {\n    ", "\n\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    border-color: ", " !important\n  \n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
+}, function (props) {
+  return (props.warningAlert || props.errorAlert) && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
 }, function (props) {
   return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
 }, function (props) {
@@ -35,15 +33,21 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.noBorder && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      border-color: transparent !important;\n    "])));
 }, function (props) {
-  return props.warningAlert && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n        background: ", " !important;\n        :focus {\n          background: white !important;\n        }\n        &&:hover:not(:focus) {\n          background: ", " !important;\n        }\n      "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'));
+  return props.warningAlert && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n        background: ", " !important;\n        :focus {\n          background: white !important;\n        }\n        &&:hover:not(:focus) {\n          background: ", " !important;\n        }\n        &&:read-only:hover {\n          background: ", " !important;\n        }\n      "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400'));
 }, function (props) {
-  return props.errorAlert && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n          background: ", " !important;\n          :focus {\n            background: white !important;\n          }\n          &&:hover:not(:focus) {\n            background: #f7d5d0 !important;\n          }\n        "])), props.theme.getColor('red-200'));
+  return props.errorAlert && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      background: ", " !important;\n      :focus {\n        background: white !important;\n      }\n      &&:hover:not(:focus) {\n        background: #f7d5d0 !important;\n      }\n      &&:read-only:hover {\n        background: ", " !important;\n      }\n    "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
 }, function (props) {
-  return props.warning && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('orange-500'));
+  return props.lightBackground && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n        background: #fffde8 !important;\n        :focus {\n          background: white !important;\n        }\n      "])));
 }, function (props) {
-  return props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+  return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
+}, InputIconContainer, function (props) {
+  return props.warning && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('orange-500'));
 }, function (props) {
-  return props.hasIcon && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
+  return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n      border-color: ", " !important;\n    "])), props.theme.getColor('red-500'));
+}, function (props) {
+  return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n      padding-left: 35px;\n    "])));
+}, function (props) {
+  return (props.warningAlert || props.errorAlert) && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n        padding-left: 60px;\n        padding-top: 25px;\n        padding-right: 30px;\n      "])));
 }, function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
 }, function (props) {
@@ -51,31 +55,28 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
 }, function (props) {
   return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
 }, function (props) {
-  return props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
-}, InputIconContainer, function (props) {
   return props.theme.getColor('gray-600');
 });
-var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  content: \"\";\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
+var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 11px;\n  line-height: 1.2;\n  font-size: 0.875rem;\n  transition: all 150ms;\n\n  ", ";\n\n  ", "\n\n  ", "\n  content: \"\";\n\n  ", "\n"])), placeholderBaseStyle, function (props) {
   return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
 }, function (props) {
-  return props.hasPlaceholder && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), activeLabel, props.error && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('red-500')));
+  return props.hasPlaceholder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      ", ";\n      ", "\n    "])), activeLabel, props.error && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('red-500')));
 }, function (props) {
-  return props.hasIcon && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
+  return props.hasIcon && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n      left: 35px;\n    "])));
 });
-var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
-var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n\n  &:focus-within {\n    ", " {\n      ", ";\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ":not(:placeholder-shown) + ", " {\n    ", ";\n    ", "\n    // ", "\n    ", "\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
+var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n  }\n"])));
+var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  top: 13px;\n  left: 25px;\n  height: 2.625rem;\n  display: flex;\n  padding: 0 10px;\n  svg {\n    width: 15px;\n    opacity: 0.6;\n    transition: opacity 250ms;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
+});
+var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n  position: relative;\n\n  &:focus-within {\n    ", " {\n      ", ";\n    }\n\n    ", " {\n      svg {\n        opacity: 1;\n      }\n    }\n  }\n\n  ", ":not(:placeholder-shown) + ", " {\n    ", ";\n    ", "\n  }\n\n  ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
   return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
 }, function (props) {
-  return props.error && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n        //   color: ", " !important;\n        //\n      "])), props.theme.getColor('red-500'));
-}, function (props) {
-  return props.warning && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n        color: ", " !important;\n      "])), props.theme.getColor('orange-500'));
-}, function (props) {
-  return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
+  return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      > * {\n        cursor: not-allowed;\n      }\n    "])));
 });
-var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
+var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  margin: 8px 0 0 0;\n  padding: 0 0.6875rem;\n  font-size: 0.75rem;\n  line-height: 1.333;\n\n  ", ";\n\n  ", "\n"])), function (props) {
   return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
 }, function (props) {
-  return props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
+  return props.error && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n      content: 'error';\n      ", "\n    "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
 });
 
 var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -97,10 +98,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
       style = _ref.style,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
+      lightBackground = _ref.lightBackground,
       noBorder = _ref.noBorder,
       warningAlert = _ref.warningAlert,
       errorAlert = _ref.errorAlert,
-      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "warningAlert", "errorAlert"]);
+      rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
 
   var _useState = React.useState(nanoid.nanoid()),
       _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -136,12 +138,13 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     return null;
   }, [description, error, warning]);
   return React__default['default'].createElement(TextInput, {
-    disabled: disabled || readOnly,
+    disabled: disabled,
+    readOnly: readOnly,
     error: hasError,
     warning: hasWarning,
     className: className,
     style: style
-  }, typeof icon !== 'undefined' && React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
+  }, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
     ref: forwardedRef,
     rows: rows,
     value: value,
@@ -153,17 +156,19 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
     readOnly: readOnly,
     autoComplete: autoComplete,
     hasIcon: Boolean(icon),
+    icon: icon,
     error: hasError,
     warning: hasWarning,
     id: "text-input-".concat(uniqueId),
+    lightBackground: lightBackground,
     onChange: onChange,
     onBlur: onBlur,
     noBorder: noBorder,
     warningAlert: warningAlert,
     errorAlert: errorAlert
   }, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
-    error: error,
-    warning: warning
+    warningAlert: warningAlert,
+    errorAlert: errorAlert
   }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
     htmlFor: "text-input-".concat(uniqueId),
     hasPlaceholder: Boolean(placeholder),
@@ -175,7 +180,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
 });
 TextArea.defaultProps = {
   rows: 4,
-  noBorder: false
+  noBorder: false,
+  readOnly: false,
+  warningAlert: false,
+  errorAlert: false
 };
 TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   value: defaultTheme.PropTypes.string,
@@ -194,6 +202,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
   rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
   className: defaultTheme.PropTypes.string,
   style: defaultTheme.PropTypes.object,
+  lightBackground: defaultTheme.PropTypes["boolean"],
   onChange: defaultTheme.PropTypes.func,
   onBlur: defaultTheme.PropTypes.func,
   noBorder: defaultTheme.PropTypes.bool,

package/close-ebf2f3cf.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+
+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);
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M2.1 27.3L0 25.2l11.55-11.55L0 2.1 2.1 0l11.55 11.55L25.2 0l2.1 2.1-11.55 11.55L27.3 25.2l-2.1 2.1-11.55-11.55L2.1 27.3z"
+});
+
+function SvgClose(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 27.3 27.3"
+  }, props), _ref);
+}
+
+exports.SvgClose = SvgClose;

package/expand-more-94585605.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+
+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);
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var _ref = /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "currentColor",
+  d: "M12 14.15l-12-12L2.15 0 12 9.9 21.85.05 24 2.2 12 14.15z"
+});
+
+function SvgExpandMore(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 14.15"
+  }, props), _ref);
+}
+
+exports.SvgExpandMore = SvgExpandMore;

package/icons/arrow-drop-down.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill="currentColor" id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 4">
+  <path d="m4,4L0,0h8l-4,4Z"/>
+</svg>