@superdispatch/ui-lab 0.45.1 → 0.47.0

package/dist-src/email-autocomplate/CloseIcon.js

@@ -0,0 +1,19 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import { SvgIcon } from '@material-ui/core';
+import { Color } from '@superdispatch/ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CloseIcon(props) {
+  return /*#__PURE__*/_jsx(SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+    viewBox: "0 0 6 6",
+    style: {
+      width: '6px',
+      height: '6px'
+    },
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.72278 2.99999L5.91671 0.806074L5.19396 0.0833282L3.00004 2.27725L0.80612 0.0833282L0.083374 0.806076L2.27729 2.99999L0.083374 5.19391L0.80612 5.91666L3.00004 3.72274L5.19396 5.91666L5.91671 5.19392L3.72278 2.99999Z",
+      fill: Color.Dark100
+    })
+  }));
+}

package/dist-src/email-autocomplate/EmailAutocomplete.js

@@ -0,0 +1,97 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "onChange", "TextFieldProps"];
+import { IconButton, TextField } from '@material-ui/core';
+import { Autocomplete } from '@material-ui/lab';
+import { Inline, Tag } from '@superdispatch/ui';
+import { TextBox } from '@superdispatch/ui-lab';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { CloseIcon } from "./CloseIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MultipleFieldText = /*#__PURE__*/styled(TextField).withConfig({
+  displayName: "EmailAutocomplete__MultipleFieldText",
+  componentId: "SD__sc-126rmmq-0"
+})(["&{width:100%;margin-top:8px;overflow:hidden;}&& .MuiAutocomplete-inputRoot{flex-direction:column;align-items:flex-start;width:100%;gap:8px;& .MuiAutocomplete-input{width:100%;}}"]);
+export var EmailAutocomplete = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+      value,
+      onChange: _onChange,
+      TextFieldProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  function handleDelete(index) {
+    var filteredOrders = value === null || value === void 0 ? void 0 : value.filter((_item, fieldIndex) => fieldIndex !== index);
+    void (_onChange === null || _onChange === void 0 ? void 0 : _onChange(filteredOrders, 'remove-option'));
+  }
+  return /*#__PURE__*/_jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    multiple: true,
+    freeSolo: true,
+    filterSelectedOptions: true,
+    disableClearable: true,
+    value: value,
+    filterOptions: _filterOptions => {
+      return _filterOptions.filter(option => option !== '');
+    },
+    onChange: (event, selectedValue) => {
+      var keyboardEvent = event;
+      var lastElement = selectedValue[selectedValue.length - 1];
+      if (keyboardEvent.key === 'Backspace') {
+        var removeLatesElement = value === null || value === void 0 ? void 0 : value.filter((_, index) => index < value.length - 1);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(removeLatesElement, 'remove-option');
+      } else if (keyboardEvent.key === 'Enter' && lastElement) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), lastElement], 'select-option');
+      } else if (lastElement) {
+        var emails = lastElement.split(',').map(item => item.replace(' ', ''));
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(emails, 'select-option');
+      } else {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(selectedValue, 'select-option');
+      }
+    },
+    renderTags: items => {
+      return /*#__PURE__*/_jsx(Inline, {
+        space: "xxsmall",
+        children: items.map((option, index) => {
+          return /*#__PURE__*/_jsx(Tag, {
+            color: "grey",
+            variant: "subtle",
+            children: /*#__PURE__*/_jsxs(Inline, {
+              space: "xxsmall",
+              children: [/*#__PURE__*/_jsx(TextBox, {
+                wrapOverflow: true,
+                color: "primary",
+                children: option
+              }), /*#__PURE__*/_jsx(IconButton, {
+                size: "small",
+                onClick: () => {
+                  handleDelete(index);
+                },
+                children: /*#__PURE__*/_jsx(CloseIcon, {})
+              })]
+            })
+          }, index);
+        })
+      });
+    },
+    renderInput: params => /*#__PURE__*/_jsx(MultipleFieldText, _objectSpread(_objectSpread(_objectSpread({}, params), TextFieldProps), {}, {
+      multiline: true,
+      minRows: 2,
+      variant: "outlined",
+      fullWidth: true,
+      InputProps: _objectSpread(_objectSpread(_objectSpread({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), params.InputProps), {}, {
+        startAdornment: params.InputProps.startAdornment
+      }),
+      placeholder: "Enter individual emails on each line or separate them with comma (,)",
+      onChange: event => {
+        var text = event.target.value.replace(/,/g, '');
+        var hasCommaOrSpace = /,|\s/.test(event.target.value);
+        if (hasCommaOrSpace && text.trim() !== '') {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+        }
+      }
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") EmailAutocomplete.displayName = "EmailAutocomplete";
+EmailAutocomplete.displayName = 'EmailAutocomplete';

package/dist-src/index.js

@@ -8,6 +8,7 @@ export * from "./chat/ChatMessage.js";
 export * from "./container/Container.js";
 export * from "./description-item/DescriptionItem.js";
 export * from "./description-line-item/DescriptionLineItem.js";
+export * from "./email-autocomplate/EmailAutocomplete.js";
 export * from "./file-drop-zone/FileDropZone.js";
 export * from "./file-list-item/FileListItem.js";
 export * from "./flag-list/FlagList.js";

package/dist-types/index.d.ts

@@ -4,10 +4,11 @@ import { CSSTransition } from 'react-transition-group';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
-import { ButtonBaseProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
+import { ButtonBaseProps, StandardTextFieldProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
 import { PrimitiveDateInput } from '@superdispatch/dates';
 import { DateTime } from 'luxon';
 import { StyledComponent, DefaultTheme } from 'styled-components';
+import { AutocompleteProps, AutocompleteChangeReason } from '@material-ui/lab';
 import { FileRejection } from 'react-dropzone';
 
 declare type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
@@ -167,6 +168,15 @@ interface DescriptionLineItemProps {
 }
 declare const DescriptionLineItem: ForwardRefExoticComponent<DescriptionLineItemProps & RefAttributes<HTMLDivElement>>;
 
+interface EmailAutocompleteProps extends Omit<AutocompleteProps<string, true, true, true>, 'onChange' | 'renderInput' | 'renderTags'> {
+    options: string[];
+    TextFieldProps?: StandardTextFieldProps;
+    onAdd?: (value: string) => void;
+    onRemove?: (value: string) => void;
+    onChange?: (value: string[] | undefined, reason: AutocompleteChangeReason) => void;
+}
+declare const EmailAutocomplete: ForwardRefExoticComponent<Pick<EmailAutocompleteProps, "className" | "style" | "classes" | "innerRef" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "value" | "fullWidth" | "size" | "open" | "onClose" | "autoComplete" | "loading" | "multiple" | "disabledItemsFocusable" | "disableListWrap" | "disablePortal" | "options" | "onOpen" | "PopperComponent" | "closeText" | "disableCloseOnSelect" | "inputValue" | "filterOptions" | "freeSolo" | "includeInputInList" | "getOptionLabel" | "onInputChange" | "ChipProps" | "closeIcon" | "clearText" | "forcePopupIcon" | "getLimitTagsText" | "ListboxComponent" | "ListboxProps" | "loadingText" | "limitTags" | "noOptionsText" | "openText" | "PaperComponent" | "popupIcon" | "renderGroup" | "renderOption" | "autoHighlight" | "autoSelect" | "blurOnSelect" | "clearOnBlur" | "clearOnEscape" | "componentName" | "debug" | "disableClearable" | "filterSelectedOptions" | "getOptionDisabled" | "getOptionSelected" | "groupBy" | "handleHomeEndKeys" | "onHighlightChange" | "openOnFocus" | "selectOnFocus" | "TextFieldProps" | "onAdd" | "onRemove"> & RefAttributes<unknown>>;
+
 declare function toBytes(input: number, unit: 'kb' | 'mb' | 'gb'): number;
 declare function formatBytes(bytes: number): string;
 interface FileDropZoneProps {
@@ -419,4 +429,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, FlagList, FlagListItem, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,15 +1,15 @@
 import { CheckCircle, Info, Error as Error$1, WarningRounded, Image, Refresh, Delete, Warning, Flag, Help, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
-import { Alert as Alert$1 } from '@material-ui/lab';
-import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
+import { Alert as Alert$1, Autocomplete } from '@material-ui/lab';
+import { ColorDynamic, parseResponsiveProp, isColorDynamicProp, parseSpaceProp, Stack, Color, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Tag, CardButton, useResponsiveValue, ColorDark, useCollapseBreakpoint } from '@superdispatch/ui';
 import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
-import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, alpha, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, Checkbox } from '@material-ui/core';
+import { ButtonBase, Typography, CircularProgress, SvgIcon, IconButton, TextField, Link, Tooltip, BottomNavigation, BottomNavigationAction, alpha, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, Checkbox } from '@material-ui/core';
 import { formatDate } from '@superdispatch/dates';
-import { Box as Box$1 } from '@superdispatch/ui-lab';
+import { Box as Box$1, TextBox as TextBox$1 } from '@superdispatch/ui-lab';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
 import { Anchorme } from 'react-anchorme';
@@ -860,7 +860,111 @@ var DescriptionLineItem = /*#__PURE__*/forwardRef((_ref, ref) => {
 if (process.env.NODE_ENV !== "production") DescriptionLineItem.displayName = "DescriptionLineItem";
 DescriptionLineItem.displayName = 'DescriptionLineItem';
 
-var _excluded$5 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
+function CloseIcon(props) {
+  return /*#__PURE__*/jsx(SvgIcon, _objectSpread(_objectSpread({}, props), {}, {
+    viewBox: "0 0 6 6",
+    style: {
+      width: '6px',
+      height: '6px'
+    },
+    children: /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.72278 2.99999L5.91671 0.806074L5.19396 0.0833282L3.00004 2.27725L0.80612 0.0833282L0.083374 0.806076L2.27729 2.99999L0.083374 5.19391L0.80612 5.91666L3.00004 3.72274L5.19396 5.91666L5.91671 5.19392L3.72278 2.99999Z",
+      fill: Color.Dark100
+    })
+  }));
+}
+
+var _excluded$5 = ["value", "onChange", "TextFieldProps"];
+var MultipleFieldText = /*#__PURE__*/styled(TextField).withConfig({
+  displayName: "EmailAutocomplete__MultipleFieldText",
+  componentId: "SD__sc-126rmmq-0"
+})(["&{width:100%;margin-top:8px;overflow:hidden;}&& .MuiAutocomplete-inputRoot{flex-direction:column;align-items:flex-start;width:100%;gap:8px;& .MuiAutocomplete-input{width:100%;}}"]);
+var EmailAutocomplete = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+      value,
+      onChange: _onChange,
+      TextFieldProps
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  function handleDelete(index) {
+    var filteredOrders = value === null || value === void 0 ? void 0 : value.filter((_item, fieldIndex) => fieldIndex !== index);
+    void (_onChange === null || _onChange === void 0 ? void 0 : _onChange(filteredOrders, 'remove-option'));
+  }
+  return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    multiple: true,
+    freeSolo: true,
+    filterSelectedOptions: true,
+    disableClearable: true,
+    value: value,
+    filterOptions: _filterOptions => {
+      return _filterOptions.filter(option => option !== '');
+    },
+    onChange: (event, selectedValue) => {
+      var keyboardEvent = event;
+      var lastElement = selectedValue[selectedValue.length - 1];
+      if (keyboardEvent.key === 'Backspace') {
+        var removeLatesElement = value === null || value === void 0 ? void 0 : value.filter((_, index) => index < value.length - 1);
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(removeLatesElement, 'remove-option');
+      } else if (keyboardEvent.key === 'Enter' && lastElement) {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), lastElement], 'select-option');
+      } else if (lastElement) {
+        var emails = lastElement.split(',').map(item => item.replace(' ', ''));
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(emails, 'select-option');
+      } else {
+        _onChange === null || _onChange === void 0 ? void 0 : _onChange(selectedValue, 'select-option');
+      }
+    },
+    renderTags: items => {
+      return /*#__PURE__*/jsx(Inline, {
+        space: "xxsmall",
+        children: items.map((option, index) => {
+          return /*#__PURE__*/jsx(Tag, {
+            color: "grey",
+            variant: "subtle",
+            children: /*#__PURE__*/jsxs(Inline, {
+              space: "xxsmall",
+              children: [/*#__PURE__*/jsx(TextBox$1, {
+                wrapOverflow: true,
+                color: "primary",
+                children: option
+              }), /*#__PURE__*/jsx(IconButton, {
+                size: "small",
+                onClick: () => {
+                  handleDelete(index);
+                },
+                children: /*#__PURE__*/jsx(CloseIcon, {})
+              })]
+            })
+          }, index);
+        })
+      });
+    },
+    renderInput: params => /*#__PURE__*/jsx(MultipleFieldText, _objectSpread(_objectSpread(_objectSpread({}, params), TextFieldProps), {}, {
+      multiline: true,
+      minRows: 2,
+      variant: "outlined",
+      fullWidth: true,
+      InputProps: _objectSpread(_objectSpread(_objectSpread({}, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), params.InputProps), {}, {
+        startAdornment: params.InputProps.startAdornment
+      }),
+      placeholder: "Enter individual emails on each line or separate them with comma (,)",
+      onChange: event => {
+        var text = event.target.value.replace(/,/g, '');
+        var hasCommaOrSpace = /,|\s/.test(event.target.value);
+        if (hasCommaOrSpace && text.trim() !== '') {
+          _onChange === null || _onChange === void 0 ? void 0 : _onChange([...(value || []), text.trim()], 'select-option');
+        }
+      }
+    }))
+  }));
+});
+if (process.env.NODE_ENV !== "production") EmailAutocomplete.displayName = "EmailAutocomplete";
+EmailAutocomplete.displayName = 'EmailAutocomplete';
+
+var _excluded$6 = ["disabled", "children", "hintText", "startIcon", "fallback", "accept", "maxSize", "maxFiles", "onDropRejected", "onDropAccepted"];
 function toBytes(input, unit) {
   if (unit === 'gb') return input * (1 << 30);
   if (unit === 'mb') return input * (1 << 20);
@@ -929,7 +1033,7 @@ var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
       onDropRejected: _onDropRejected,
       onDropAccepted: _onDropAccepted
     } = props,
-    dropzoneProps = _objectWithoutProperties(props, _excluded$5);
+    dropzoneProps = _objectWithoutProperties(props, _excluded$6);
   return /*#__PURE__*/jsx(Suspense, {
     fallback: fallback,
     children: /*#__PURE__*/jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
@@ -1126,7 +1230,7 @@ var FlagList = /*#__PURE__*/forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FlagList.displayName = "FlagList";
 
-var _excluded$6 = ["variant", "showHelpIcon", "endAction", "children"];
+var _excluded$7 = ["variant", "showHelpIcon", "endAction", "children"];
 var IconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "FlagListItem__IconContainer",
   componentId: "SD__sc-o5bqru-0"
@@ -1186,7 +1290,7 @@ var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
       endAction,
       children
     } = _ref7,
-    rest = _objectWithoutProperties(_ref7, _excluded$6);
+    rest = _objectWithoutProperties(_ref7, _excluded$7);
   return /*#__PURE__*/jsxs(BannerListContainer, _objectSpread(_objectSpread({}, rest), {}, {
     ref: ref,
     $variant: variant,
@@ -1203,7 +1307,7 @@ var FlagListItem = /*#__PURE__*/forwardRef((_ref7, ref) => {
 });
 if (process.env.NODE_ENV !== "production") FlagListItem.displayName = "FlagListItem";
 
-var _excluded$7 = ["color", "target", "rel"],
+var _excluded$8 = ["color", "target", "rel"],
   _excluded2$2 = ["children", "linkComponent"];
 var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -1211,7 +1315,7 @@ var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
       target = '_blank',
       rel = 'noreferrer noopener'
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
     ref: ref,
     rel: rel,
@@ -1257,7 +1361,7 @@ function useNavbarContext() {
   return useContext(NavbarContext);
 }
 
-var _excluded$8 = ["active", "hasBadge"];
+var _excluded$9 = ["active", "hasBadge"];
 var StyledBottomNavigation = /*#__PURE__*/styled(BottomNavigation).withConfig({
   displayName: "NavbarBottomBar__StyledBottomNavigation",
   componentId: "SD__sc-9z6v3k-0"
@@ -1301,7 +1405,7 @@ function NavbarBottomBar(_ref) {
           active,
           hasBadge
         } = _ref2,
-        item = _objectWithoutProperties(_ref2, _excluded$8);
+        item = _objectWithoutProperties(_ref2, _excluded$9);
       return /*#__PURE__*/createElement(StyledBottomNavigationAction, _objectSpread(_objectSpread({}, item), {}, {
         key: item.value,
         icon: hasBadge ? /*#__PURE__*/jsxs(IconWrapper, {
@@ -1661,7 +1765,7 @@ function Navbar(_ref) {
   });
 }
 
-var _excluded$9 = ["title", "subtitle", "children"];
+var _excluded$a = ["title", "subtitle", "children"];
 var StyledTypography = /*#__PURE__*/styled(Typography).withConfig({
   displayName: "NavbarAvatar__StyledTypography",
   componentId: "SD__sc-19q2zd0-0"
@@ -1672,7 +1776,7 @@ function NavbarAvatar(_ref) {
       subtitle,
       children
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var {
     isNavbarExpanded
   } = useNavbarContext();
@@ -1882,7 +1986,7 @@ var SidebarContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarContainer.displayName = "SidebarContainer";
 
-var _excluded$a = ["onClick", "children"];
+var _excluded$b = ["onClick", "children"];
 function SidebarBackButton(_ref) {
   var {
       onClick: _onClick,
@@ -1890,7 +1994,7 @@ function SidebarBackButton(_ref) {
         fontSize: "small"
       })
     } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var isCollapsed = useCollapseBreakpoint('sm');
   var {
     openSidebar
@@ -2256,5 +2360,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, DescriptionLineItem, DottedLine, EmailAutocomplete, FileDropZone, FileListItem, FlagList, FlagListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map