@hexure/ui 1.13.14 → 1.13.16

package/dist/cjs/types/components/Select/Select.d.ts

@@ -1,9 +1,7 @@
 import { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface OptionProps {
-    /** It is used to give label to option. */
     label?: string;
-    /** It is used to give value to option. */
     value: string | number;
     color?: string;
 }
@@ -17,21 +15,15 @@ export interface styleProps {
     width?: number | string;
 }
 export interface SelectProps extends AccessibleProps {
-    /** It is used to give options from which value is selected. */
     options?: OptionProps[];
     optionGroups?: OptionGroupProps[];
     placeholder?: string;
     searchable?: boolean;
-    /** If it's value is true then select is disabled. */
     readOnly?: boolean;
-    /** It is used to show error messages when it's value is false. */
     invalid?: boolean;
-    /** It is used to read value for selected option. */
-    value: string;
-    /** It is used to read value for border rasius & flex grow */
+    value?: string;
     style?: styleProps;
-    /** It is used to change value when an option is clicked. */
-    onChange: (e: any) => void;
+    onChange?: (e: any) => void;
     onSearch?: (searchTerm: string) => void;
 }
 declare const Select: FC<SelectProps>;

package/dist/esm/index.js

@@ -736,14 +736,11 @@ const MoreMenu = (_a) => {
 };
 
 const MenuWrapper = styled.div `
-  position: relative;
+  position: relative; // Ensure this is relative
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: fixed;
-  top: ${props => props.$top};
-  left: ${props => props.$left};
-  position: fixed;
+  position: absolute; // Changed from fixed to absolute
   top: ${props => props.$top};
   left: ${props => props.$left};
   width: ${props => props.$menuWidth};
@@ -776,44 +773,44 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         if (showMenu && menuWrapperRef.current) {
             const wrapperRect = menuWrapperRef.current.getBoundingClientRect();
             const menuWidthInt = parseInt(menuWidth, 10);
-            let top = wrapperRect.top;
-            let left = wrapperRect.left;
+            let top = 0;
+            let left = 0;
             switch (position) {
                 case 'top':
-                    top = wrapperRect.top - 142; // Menu above the wrapper
-                    left = wrapperRect.left;
+                    top = -142; // Menu above the wrapper
+                    left = 0;
                     break;
                 case 'bottom':
-                    top = wrapperRect.bottom; // Menu below the wrapper
-                    left = wrapperRect.left;
+                    top = wrapperRect.height; // Menu below the wrapper
+                    left = 0;
                     break;
                 case 'left':
-                    top = wrapperRect.top;
-                    left = wrapperRect.left - menuWidthInt; // Menu to the left of the wrapper
+                    top = 0;
+                    left = -menuWidthInt; // Menu to the left of the wrapper
                     break;
                 case 'right':
-                    top = wrapperRect.top;
-                    left = wrapperRect.right; // Menu to the right of the wrapper
+                    top = 0;
+                    left = wrapperRect.width; // Menu to the right of the wrapper
                     break;
                 case 'bottomLeft':
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.right - menuWidthInt;
+                    top = wrapperRect.height;
+                    left = wrapperRect.width - menuWidthInt;
                     break;
                 case 'bottomRight':
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.left;
+                    top = wrapperRect.height;
+                    left = 0;
                     break;
                 case 'topRight':
-                    top = wrapperRect.top - 142;
-                    left = wrapperRect.right - 24;
+                    top = -142;
+                    left = wrapperRect.width - 24;
                     break;
                 case 'topLeft':
-                    top = wrapperRect.top - 142;
-                    left = wrapperRect.left - 188;
+                    top = -142;
+                    left = -188;
                     break;
                 default:
-                    top = wrapperRect.bottom;
-                    left = wrapperRect.left;
+                    top = wrapperRect.height;
+                    left = 0;
                     break;
             }
             setMenuPosition({ top: `${top}px`, left: `${left}px` });
@@ -1008,102 +1005,96 @@ const Checklist = (_a) => {
         }))));
 };
 
-const Wrapper$a = styled.div `
-  border-radius: 4px;
-  height: 40px;
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
-  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
-  box-sizing: border-box;
-  padding: 10px 0px;
-  display: flex;
-  align-items: center;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+const Wrapper$a = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 Wrapper$a.defaultProps = { theme: EditableTheme };
-const Trigger$1 = styled.select `
-  appearance: none;
-  box-shadow: none;
-  outline: none;
-  border: none;
-  color: ${Colors.BLACK.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 2.9em;
-  background-color: transparent;
-  background-image: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0px 30px 0px 10px;
-  box-sizing: border-box;
-  position: relative;
-  z-index: 2;
+const Trigger$1 = styled.select `
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: ${Colors.BLACK.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 2.9em;
+  background-color: transparent;
+  background-image: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
 `;
-const IconWrapper$2 = styled(Icon) `
-  position: absolute;
-  right: 9px;
-  z-index: 1;
+const IconWrapper$2 = styled(Icon) `
+  position: absolute;
+  right: 9px;
+  z-index: 1;
 `;
-const SearchInput$1 = styled.input `
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  z-index: 999;
-  width: 90%;
-  height: 30px;
-  border: none;
-  outline: none;
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  white-space: nowrap;
+const SearchInput$1 = styled.input `
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  z-index: 999;
+  width: 90%;
+  height: 30px;
+  border: none;
+  outline: none;
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
     const [searchTerm, setSearchTerm] = useState('');
+    const [value, setValue] = useState(propValue || '');
     const handleSearch = (event) => {
         setSearchTerm(event.target.value);
     };
-    const filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); });
-    const filteredOptionGroups = optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })));
+    const handleChange = (event) => {
+        setValue(event.target.value);
+        if (onChange) {
+            onChange(event);
+        }
+    };
+    const filteredOptions = searchable
+        ? options === null || options === void 0 ? void 0 : options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); })
+        : options;
+    const filteredOptionGroups = searchable
+        ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
+        : optionGroups;
     return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
-        searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: '--Select-One-', type: 'text', value: searchTerm }, accessibleProps))),
-        searchable ? (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
-            placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
+        searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: placeholder, type: 'text', value: searchTerm }, accessibleProps))),
+        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: handleChange, placeholder: placeholder, value: value }, accessibleProps),
+            placeholder && !value && (React.createElement("option", { disabled: true, value: '' }, placeholder)),
             filteredOptionGroups &&
-                filteredOptionGroups.map((group, i) => {
-                    return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
-                        return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
-                    })));
-                }),
+                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
             filteredOptions &&
-                filteredOptions.map((option, i) => {
-                    return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)));
-                }))) : (React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
-            placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
-            optionGroups &&
-                optionGroups.map((group, i) => {
-                    return (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => {
-                        return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
-                    })));
-                }),
-            options &&
-                options.map((option, i) => {
-                    return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
-                }))),
+                filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
 };
 
@@ -1682,7 +1673,7 @@ const StyledTextArea = styled.textarea `
   margin: 0px;
   text-indent: 0px;
   --webkit-appearance: none;
-  text-wrap: break-word;
+  overflow-wrap: break-word;
   box-sizing: border-box;
   display: block;
   width: 100%;
@@ -1709,7 +1700,7 @@ const StyledSuffix = styled.div `
   font-style: normal;
   font-weight: 400;
   font-size: ${FontSizes.DEFAULT};
-  color: Colors.BLACK.Hex;
+  color: ${Colors.BLACK.Hex};
 `;
 const StyledWrapper = styled.div `
   display: flex;
@@ -1738,7 +1729,7 @@ const SuggestedValues = styled.div `
   position: absolute;
   right: -1px;
   top: 39px;
-  z-index: 10;
+  z-index: 9999;
   max-height: 220px;
   overflow: auto;
 `;
@@ -1756,7 +1747,6 @@ const SuggestedSummary = styled.div `
   position: sticky;
   top: 0px;
 `;
-//styles for textarea
 const SuggestedValue = styled.div `
   cursor: pointer;
   padding: 8px 12px;
@@ -1787,6 +1777,8 @@ const Input$1 = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, type = 'text', value = '' } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "type", "value"]);
     const [show_options, setShowOptions] = useState(false);
+    const [internalValue, setInternalValue] = useState(value);
+    const [internalSuggestedValues, setInternalSuggestedValues] = useState(suggestedValues || []);
     const formatCurrencyDecimal = (value) => {
         const parts = value.toString().split('.');
         const integerPart = parts[0];
@@ -1795,47 +1787,55 @@ const Input$1 = (_a) => {
         return `${formattedIntegerPart}${decimalPart}`;
     };
     const handleInputChange = (e) => {
+        const newValue = e.target.value;
         if (format === 'currency' || format === 'currency_decimal') {
-            e.target.value = e.target.value.replace(/[^0-9.]/g, '');
+            e.target.value = newValue.replace(/[^0-9.]/g, '');
         }
         if (format === 'phone') {
-            e.target.value = e.target.value.replace(/[^0-9.]/g, '').substring(0, 10);
+            e.target.value = newValue.replace(/[^0-9.]/g, '').substring(0, 10);
         }
         if (format === 'ssn') {
-            e.target.value = e.target.value.replace(/[^0-9]/g, '').substring(0, 9);
+            e.target.value = newValue.replace(/[^0-9]/g, '').substring(0, 9);
         }
         if (type === 'email') {
-            e.target.value = e.target.value.toLowerCase();
+            e.target.value = newValue.toLowerCase();
         }
-        if (type === 'number' && max && parseInt(e.target.value, 10) > parseInt(max, 10)) {
+        if (type === 'number' && max && parseInt(newValue, 10) > parseInt(max, 10)) {
             e.target.value = `${max}`;
         }
-        if (!readOnly && onChange)
+        setInternalValue(e.target.value);
+        if (onChange)
             onChange(e);
+        if (newValue === null || newValue === void 0 ? void 0 : newValue.length) {
+            const newSuggestions = (suggestedValues || []).filter(s => s.toLowerCase().includes(newValue.toLowerCase()));
+            setInternalSuggestedValues(newSuggestions);
+        }
+        else {
+            setInternalSuggestedValues(suggestedValues || []);
+        }
     };
-    let formatted_value = value;
+    let formatted_value = internalValue;
     if (format === 'phone') {
-        formatted_value = formatAsPhone(value);
+        formatted_value = formatAsPhone(internalValue);
     }
     if (format === 'currency') {
-        if (`${value}`.length) {
-            formatted_value = Numeral(value).format('$0,0');
+        if (`${internalValue}`.length) {
+            formatted_value = Numeral(internalValue).format('$0,0');
         }
     }
     if (format === 'currency_decimal') {
         formatted_value = formatCurrencyDecimal(formatted_value);
+        formatted_value = formatCurrencyDecimal(formatted_value);
     }
     if (format === 'ssn' && type !== 'password') {
-        formatted_value = formatAsSsn(value);
+        formatted_value = formatAsSsn(internalValue);
     }
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)
                         onBlur(e);
-                    // The blur was causing issues with the suggested select event
-                    // This makes sure the select if fired before the blur
                     setTimeout(() => {
                         setShowOptions(false);
                     }, 100);
@@ -1849,15 +1849,13 @@ const Input$1 = (_a) => {
         loading ? (React.createElement(Loader$1, null,
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, null,
-            value.length,
-            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!(suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) },
+            internalValue.length,
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
         React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
                     if (onBlur)
                         onBlur(e);
-                    // The blur was causing issues with the suggested select event
-                    // This makes sure the select if fired before the blur
                     setTimeout(() => {
                         setShowOptions(false);
                     }, 100);
@@ -1867,22 +1865,22 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: format === 'currency_decimal' && value ? `$${formatted_value}` : formatted_value }, accessibleProps)),
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
         loading ? (React.createElement(Loader$1, null,
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, null,
-            value.length,
+            internalValue.length,
             maxLength ? ` / ${maxLength}` : null)) : null,
         suffix && React.createElement(StyledSuffix, null, suffix),
-        show_options && (suggestedValues === null || suggestedValues === void 0 ? void 0 : suggestedValues.length) ? (React.createElement(SuggestedValues, null,
+        show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, null,
             React.createElement(SuggestedSummary, null,
-                suggestedValues.length,
+                internalSuggestedValues.length,
                 " Results Match \"",
-                value,
+                internalValue,
                 "\""),
-            suggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { key: index, onClick: () => {
+            internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { key: index, onClick: () => {
                     handleInputChange({ target: { value: suggestedValue } });
-                    onSuggestedSelect(suggestedValue);
+                    onSuggestedSelect();
                     setShowOptions(false);
                 } }, suggestedValue))))) : null));
 };
@@ -2000,76 +1998,76 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
     })));
 };
 
-const Wrapper$6 = styled.div `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const Wrapper$6 = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
-const Container$1 = styled.dialog `
-  width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
-  max-width: calc(100vw - 80px);
-  height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
-  max-height: calc(100vh - 80px);
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  outline: none;
-  border: none;
-  position: relative;
-  padding: 0px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+const Container$1 = styled.dialog `
+  width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
+  max-width: calc(100vw - 80px);
+  height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
+  max-height: calc(100vh - 80px);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: relative;
+  padding: 0px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
 `;
-const Header$1 = styled.div `
-  flex-shrink: 0;
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  display: flex;
-  align-items: center;
-  background: #ffffff;
-  box-sizing: border-box;
+const Header$1 = styled.div `
+  flex-shrink: 0;
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  box-sizing: border-box;
 `;
-const Close = styled.div `
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: pointer;
+const Close = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
 `;
-const CloseMsg = styled.span `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1em;
-  color: ${Colors.MEDIUM_GRAY.Hex};
+const CloseMsg = styled.span `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.MEDIUM_GRAY.Hex};
 `;
-const ContentWrapper = styled.div `
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: #ffffff;
-  flex: 1;
-  box-sizing: border-box;
+const ContentWrapper = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #ffffff;
+  flex: 1;
+  box-sizing: border-box;
 `;
-const ButtonBar = styled.div `
-  flex-shrink: 0;
-  background: #ffffff;
-  padding: 20px;
-  border-top: 1px solid #e7e6e6;
-  display: flex;
-  align-items: center;
-  justify-self: flex-end;
-  box-sizing: border-box;
+const ButtonBar = styled.div `
+  flex-shrink: 0;
+  background: #ffffff;
+  padding: 20px;
+  border-top: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  box-sizing: border-box;
 `;
 const Modal = (_a) => {
-    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
     useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -2089,8 +2087,15 @@ const Modal = (_a) => {
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
             steps ? React.createElement(ProgressBar, { steps: steps }) : null,
             React.createElement(ContentWrapper, null, children),
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
-                tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
+            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, null,
+                tertiaryButton || quarternaryButton ? (React.createElement("div", { style: {
+                        marginRight: 'auto',
+                        paddingRight: 40,
+                        display: 'flex',
+                        alignItems: 'center',
+                    } },
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
+                    quarternaryButton ? (React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary' }))) : null)) : null,
                 primaryButton || secondaryButton ? (React.createElement("div", { style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,