@hexure/ui 1.13.33 → 1.13.34

package/dist/cjs/index.js

@@ -1,13 +1,13 @@
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Icon = require('@mdi/react');
-var js = require('@mdi/js');
-var dayjs = require('dayjs');
-var Numeral = require('numeral');
-var Moment = require('moment');
-
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var Icon = require('@mdi/react');
+var js = require('@mdi/js');
+var dayjs = require('dayjs');
+var Numeral = require('numeral');
+var Moment = require('moment');
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -21,22 +21,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const Colors = {
     PRIMARY: {
         Hex: '#0193D7',
@@ -85,8 +85,8 @@ const FontSizes = {
 };
 const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
-};
-
+};
+
 //function to generate unique ids
 const generateUniqueId = (() => {
     let counter = 0;
@@ -94,8 +94,8 @@ const generateUniqueId = (() => {
         counter += 1;
         return `${prefix}-${counter}`;
     };
-})();
-
+})();
+
 const Header$3 = styled.div `
   display: flex;
   align-items: center;
@@ -123,8 +123,8 @@ const Accordion = (_a) => {
             React.createElement(Title$2, { id: `${id}-title` }, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
         open ? React.createElement("div", { id: `${id}-content` }, children) : null));
-};
-
+};
+
 const StyledComponent = styled.p `
   color: ${props => Colors[props.$color || 'BLACK'].Hex};
   font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -146,8 +146,8 @@ const Copy = (_a) => {
 };
 Copy.defaultProps = {
     type: 'default',
-};
-
+};
+
 const Wrapper$h = styled.div `
   display: inline-block;
   position: relative;
@@ -197,8 +197,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
     return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: js.mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
-};
-
+};
+
 const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
   line-height: 1em;
@@ -320,8 +320,8 @@ const Button = (_a) => {
         return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
     }
     return button_view;
-};
-
+};
+
 const H1 = styled.h1 `
   color: ${Colors.BLACK.Hex};
   font-size: 30px;
@@ -370,8 +370,8 @@ const Heading = (_a) => {
 Heading.defaultProps = {
     bold: false,
     type: 'primary',
-};
-
+};
+
 const Wrapper$g = styled.div `
   position: fixed;
   top: 0;
@@ -405,8 +405,8 @@ const ActionDialog = (_a) => {
                 tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
                 secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
-};
-
+};
+
 const Wrapper$f = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
@@ -458,8 +458,8 @@ const Alert = (_a) => {
             title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
             action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
-};
-
+};
+
 const colorMapping = {
     black: {
         fill_1: '#000000',
@@ -501,8 +501,8 @@ const Logo = (_a) => {
                 React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-7` }),
                 React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-8` })));
     }
-};
-
+};
+
 const Container$3 = styled.header `
   width: 100%;
   display: flex;
@@ -531,8 +531,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
     return (React.createElement(Container$3, { id: `${id}-container` },
         React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
         React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
-};
-
+};
+
 const Wrapper$e = styled.div `
   display: inline-block;
   border-radius: 4px;
@@ -566,8 +566,8 @@ const Tag = (_a) => {
             React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
             removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: js.mdiClose, size: '15px' }))) : null)));
-};
-
+};
+
 const SidebarContainer = styled.div `
   border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
   display: flex;
@@ -682,8 +682,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true }))));
-};
-
+};
+
 const Wrapper$d = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
@@ -766,8 +766,8 @@ const BulkActionBar = (_a) => {
         errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
             React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
-};
-
+};
+
 const Wrapper$c = styled.div `
   background: #fff;
   border-radius: 8px;
@@ -822,8 +822,8 @@ const MoreMenu = (_a) => {
             item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
     })));
-};
-
+};
+
 const MenuWrapper = styled.div `
   position: relative;
   display: inline-block;
@@ -909,8 +909,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
     return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
         React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
-};
-
+};
+
 const Wrapper$b = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -998,8 +998,8 @@ const Checkbox = (_a) => {
         children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
-};
-
+};
+
 const SelectAll = styled.div `
   padding: 8px 12px;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
@@ -1046,8 +1046,8 @@ const Checklist = (_a) => {
             const optionId = generateUniqueId('option');
             return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
-};
-
+};
+
 const Wrapper$a = styled.div `
   border-radius: 4px;
   height: 40px;
@@ -1144,8 +1144,8 @@ const Select = (_a) => {
             filteredOptions &&
                 filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: js.mdiChevronDown, size: '22px' })));
-};
-
+};
+
 const DatePickerWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1234,8 +1234,8 @@ onChange = () => { }, style, }) => {
             React.createElement(Middle, { id: `${id}-middle` },
                 React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
             React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
-};
-
+};
+
 const Scrim$1 = styled.div `
   position: ${({ $position }) => $position};
   top: 0;
@@ -1322,8 +1322,8 @@ const Drawer = (_a) => {
                 secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
         scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
-};
-
+};
+
 const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
 const LabelRow = styled.div `
   display: flex;
@@ -1385,8 +1385,8 @@ const Field = (_a) => {
         description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
         React.createElement("div", { id: `${id}-children` }, children),
         validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
-};
-
+};
+
 const Wrapper$8 = styled.fieldset `
   margin-inline-start: 0px;
   margin-inline-end: 0px;
@@ -1421,8 +1421,8 @@ const FieldGroup = ({ children, label }) => {
     return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
         React.createElement(Label$1, { id: `${id}-label` }, label),
         React.createElement(Content$1, { id: `${id}-content` }, children)));
-};
-
+};
+
 const Dropzone = styled.div `
   border-radius: 8px;
   border-width: 1px;
@@ -1612,8 +1612,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
                         React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
                         tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
                             React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
-};
-
+};
+
 const getAgesFromDob = (dob) => {
     let calculated_current_age = null;
     let calculated_nearest_age = null;
@@ -1686,8 +1686,8 @@ const formatAsSsn = (number) => {
         formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
-};
-
+};
+
 const StyledInput = styled.input `
   border: none !important;
   background: none !important;
@@ -1928,7 +1928,7 @@ const Input$1 = (_a) => {
                         onBlur(e);
                     setTimeout(() => {
                         setShowOptions(false);
-                    }, 200);
+                    }, 500);
                 }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1953,8 +1953,8 @@ const Input$1 = (_a) => {
                     onSuggestedSelect();
                     setShowOptions(false);
                 } }, suggestedValue))))) : null));
-};
-
+};
+
 const Wrapper$7 = styled.a `
   color: ${props => props.theme.PRIMARY_COLOR.Hex};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -1974,8 +1974,8 @@ const Link = (_a) => {
     var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
     const id = generateUniqueId('link');
     return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
-};
-
+};
+
 const dash = styled.keyframes `
   0% {
     stroke-dasharray: 1, 160;
@@ -2010,8 +2010,8 @@ const Loader = () => {
     const id = generateUniqueId('loader');
     return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
         React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', id: `${id}-path`, strokeWidth: '2' })));
-};
-
+};
+
 const Steps = styled.div `
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
@@ -2070,8 +2070,8 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
                 step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
     })));
-};
-
+};
+
 const Wrapper$6 = styled.div `
   position: fixed;
   top: 0;
@@ -2184,8 +2184,8 @@ const Modal = (_a) => {
                     secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
                         React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
-};
-
+};
+
 const Wrapper$5 = styled.div `
   position: relative;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -2289,8 +2289,8 @@ const MultiSelect = (_a) => {
         showOptions ? (React.createElement(Options, { id: `${id}-options` },
             React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
-};
-
+};
+
 const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
@@ -2342,8 +2342,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
                 return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
-};
-
+};
+
 const Wrapper$3 = styled.nav `
   box-sizing: border-box;
   display: flex;
@@ -2378,8 +2378,8 @@ const Pagination = (_a) => {
                 value: `${p}`,
             })), value: `${currentPage}` }),
         React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
-};
-
+};
+
 const Wrapper$2 = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -2464,16 +2464,16 @@ const Radio = (_a) => {
         React.createElement(Label, { id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
-};
-
+};
+
 const RadioList = (_a) => {
     var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
     return (React.createElement(React.Fragment, null, options.map((option) => {
         const label = option.label || option.value;
         return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
     })));
-};
-
+};
+
 const StyledTable = styled.table `
   width: 100%;
   margin-top: 1px;
@@ -2556,8 +2556,8 @@ const Table = (_a) => {
                 return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
             })));
         }))) : null));
-};
-
+};
+
 const Wrapper$1 = styled.div `
   display: flex;
   box-sizing: border-box;
@@ -2618,8 +2618,8 @@ const Tabs = (_a) => {
             label));
     })));
 };
-Tabs.defaultProps = {};
-
+Tabs.defaultProps = {};
+
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;
@@ -2650,8 +2650,8 @@ const Toggle = (_a) => {
         React.createElement(Handle, { "$on": on, id: `${id}-handle` },
             React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
 };
-Toggle.defaultProps = {};
-
+Toggle.defaultProps = {};
+
 const Container = styled.div `
   width: 100%;
   padding: 40px auto;
@@ -2687,53 +2687,53 @@ const ZeroState = (_a) => {
             React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
             description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
         action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
-};
-
-exports.Accordion = Accordion;
-exports.ActionDialog = ActionDialog;
-exports.Alert = Alert;
-exports.AppHeader = AppHeader;
-exports.AppMenu = AppMenu;
-exports.BulkActionBar = BulkActionBar;
-exports.Button = Button;
-exports.ButtonMenu = ButtonMenu;
-exports.Checkbox = Checkbox;
-exports.Checklist = Checklist;
-exports.Colors = Colors;
-exports.Copy = Copy;
-exports.DatePicker = DatePicker;
-exports.Drawer = Drawer;
-exports.EditableTheme = EditableTheme;
-exports.Field = Field;
-exports.FieldGroup = FieldGroup;
-exports.FileUpload = FileUpload;
-exports.FontSizes = FontSizes;
-exports.FontStyles = FontStyles;
-exports.Heading = Heading;
-exports.Input = Input$1;
-exports.Link = Link;
-exports.Loader = Loader;
-exports.Logo = Logo;
-exports.Modal = Modal;
-exports.MoreMenu = MoreMenu;
-exports.MultiSelect = MultiSelect;
-exports.PageHeader = PageHeader;
-exports.Pagination = Pagination;
-exports.ProgressBar = ProgressBar;
-exports.Radio = Radio;
-exports.RadioList = RadioList;
-exports.Select = Select;
-exports.Table = Table;
-exports.Tabs = Tabs;
-exports.Tag = Tag;
-exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
-exports.ZeroState = ZeroState;
-exports.formatAsPhone = formatAsPhone;
-exports.formatAsSsn = formatAsSsn;
-exports.getAgesFromDob = getAgesFromDob;
-exports.getDaysForMonth = getDaysForMonth;
-exports.getYears = getYears;
-exports.validateEmail = validateEmail;
-exports.validatePhone = validatePhone;
-//# sourceMappingURL=index.js.map
+};
+
+exports.Accordion = Accordion;
+exports.ActionDialog = ActionDialog;
+exports.Alert = Alert;
+exports.AppHeader = AppHeader;
+exports.AppMenu = AppMenu;
+exports.BulkActionBar = BulkActionBar;
+exports.Button = Button;
+exports.ButtonMenu = ButtonMenu;
+exports.Checkbox = Checkbox;
+exports.Checklist = Checklist;
+exports.Colors = Colors;
+exports.Copy = Copy;
+exports.DatePicker = DatePicker;
+exports.Drawer = Drawer;
+exports.EditableTheme = EditableTheme;
+exports.Field = Field;
+exports.FieldGroup = FieldGroup;
+exports.FileUpload = FileUpload;
+exports.FontSizes = FontSizes;
+exports.FontStyles = FontStyles;
+exports.Heading = Heading;
+exports.Input = Input$1;
+exports.Link = Link;
+exports.Loader = Loader;
+exports.Logo = Logo;
+exports.Modal = Modal;
+exports.MoreMenu = MoreMenu;
+exports.MultiSelect = MultiSelect;
+exports.PageHeader = PageHeader;
+exports.Pagination = Pagination;
+exports.ProgressBar = ProgressBar;
+exports.Radio = Radio;
+exports.RadioList = RadioList;
+exports.Select = Select;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Tag = Tag;
+exports.Toggle = Toggle;
+exports.Tooltip = Tooltip;
+exports.ZeroState = ZeroState;
+exports.formatAsPhone = formatAsPhone;
+exports.formatAsSsn = formatAsSsn;
+exports.getAgesFromDob = getAgesFromDob;
+exports.getDaysForMonth = getDaysForMonth;
+exports.getYears = getYears;
+exports.validateEmail = validateEmail;
+exports.validatePhone = validatePhone;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js

@@ -1,11 +1,11 @@
-import React, { useState, useContext, useRef, useEffect } from 'react';
-import styled, { ThemeContext, keyframes } from 'styled-components';
-import Icon, { Icon as Icon$1 } from '@mdi/react';
-import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
-import dayjs from 'dayjs';
-import Numeral from 'numeral';
-import Moment from 'moment';
-
+import React, { useState, useContext, useRef, useEffect } from 'react';
+import styled, { ThemeContext, keyframes } from 'styled-components';
+import Icon, { Icon as Icon$1 } from '@mdi/react';
+import { mdiChevronUp, mdiChevronDown, mdiInformationOutline, mdiLoading, mdiAlertOctagonOutline, mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiClose, mdiChevronRight, mdiChevronLeft, mdiDotsHorizontal, mdiMinusCircle, mdiFolderPlusOutline, mdiCheck } from '@mdi/js';
+import dayjs from 'dayjs';
+import Numeral from 'numeral';
+import Moment from 'moment';
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -19,22 +19,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const Colors = {
     PRIMARY: {
         Hex: '#0193D7',
@@ -83,8 +83,8 @@ const FontSizes = {
 };
 const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
-};
-
+};
+
 //function to generate unique ids
 const generateUniqueId = (() => {
     let counter = 0;
@@ -92,8 +92,8 @@ const generateUniqueId = (() => {
         counter += 1;
         return `${prefix}-${counter}`;
     };
-})();
-
+})();
+
 const Header$3 = styled.div `
   display: flex;
   align-items: center;
@@ -121,8 +121,8 @@ const Accordion = (_a) => {
             React.createElement(Title$2, { id: `${id}-title` }, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? mdiChevronUp : mdiChevronDown, size: '24px' })),
         open ? React.createElement("div", { id: `${id}-content` }, children) : null));
-};
-
+};
+
 const StyledComponent = styled.p `
   color: ${props => Colors[props.$color || 'BLACK'].Hex};
   font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -144,8 +144,8 @@ const Copy = (_a) => {
 };
 Copy.defaultProps = {
     type: 'default',
-};
-
+};
+
 const Wrapper$h = styled.div `
   display: inline-block;
   position: relative;
@@ -195,8 +195,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
     return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
-};
-
+};
+
 const StyledButton = styled.button `
   height: ${props => (props.$small ? '30px' : '40px')};
   line-height: 1em;
@@ -318,8 +318,8 @@ const Button = (_a) => {
         return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
     }
     return button_view;
-};
-
+};
+
 const H1 = styled.h1 `
   color: ${Colors.BLACK.Hex};
   font-size: 30px;
@@ -368,8 +368,8 @@ const Heading = (_a) => {
 Heading.defaultProps = {
     bold: false,
     type: 'primary',
-};
-
+};
+
 const Wrapper$g = styled.div `
   position: fixed;
   top: 0;
@@ -403,8 +403,8 @@ const ActionDialog = (_a) => {
                 tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
                 secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
-};
-
+};
+
 const Wrapper$f = styled.div `
   border: 1px solid #f1f1f1;
   border-radius: 4px;
@@ -456,8 +456,8 @@ const Alert = (_a) => {
             title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
             action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
-};
-
+};
+
 const colorMapping = {
     black: {
         fill_1: '#000000',
@@ -499,8 +499,8 @@ const Logo = (_a) => {
                 React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-7` }),
                 React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1, id: `${id}-path-8` })));
     }
-};
-
+};
+
 const Container$3 = styled.header `
   width: 100%;
   display: flex;
@@ -529,8 +529,8 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
     return (React.createElement(Container$3, { id: `${id}-container` },
         React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
         React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
-};
-
+};
+
 const Wrapper$e = styled.div `
   display: inline-block;
   border-radius: 4px;
@@ -564,8 +564,8 @@ const Tag = (_a) => {
             React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
             removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: mdiClose, size: '15px' }))) : null)));
-};
-
+};
+
 const SidebarContainer = styled.div `
   border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
   display: flex;
@@ -680,8 +680,8 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true }))));
-};
-
+};
+
 const Wrapper$d = styled.div `
   border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
   border-radius: 8px;
@@ -764,8 +764,8 @@ const BulkActionBar = (_a) => {
         errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
             React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
-};
-
+};
+
 const Wrapper$c = styled.div `
   background: #fff;
   border-radius: 8px;
@@ -820,8 +820,8 @@ const MoreMenu = (_a) => {
             item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
     })));
-};
-
+};
+
 const MenuWrapper = styled.div `
   position: relative;
   display: inline-block;
@@ -907,8 +907,8 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
     return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
         React.createElement(Button, { disabled: disabled, format: format, icon: mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
-};
-
+};
+
 const Wrapper$b = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -996,8 +996,8 @@ const Checkbox = (_a) => {
         children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
-};
-
+};
+
 const SelectAll = styled.div `
   padding: 8px 12px;
   border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
@@ -1044,8 +1044,8 @@ const Checklist = (_a) => {
             const optionId = generateUniqueId('option');
             return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
-};
-
+};
+
 const Wrapper$a = styled.div `
   border-radius: 4px;
   height: 40px;
@@ -1142,8 +1142,8 @@ const Select = (_a) => {
             filteredOptions &&
                 filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: mdiChevronDown, size: '22px' })));
-};
-
+};
+
 const DatePickerWrapper = styled.div `
   display: flex;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -1232,8 +1232,8 @@ onChange = () => { }, style, }) => {
             React.createElement(Middle, { id: `${id}-middle` },
                 React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
             React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
-};
-
+};
+
 const Scrim$1 = styled.div `
   position: ${({ $position }) => $position};
   top: 0;
@@ -1320,8 +1320,8 @@ const Drawer = (_a) => {
                 secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
         scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
-};
-
+};
+
 const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
 const LabelRow = styled.div `
   display: flex;
@@ -1383,8 +1383,8 @@ const Field = (_a) => {
         description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
         React.createElement("div", { id: `${id}-children` }, children),
         validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
-};
-
+};
+
 const Wrapper$8 = styled.fieldset `
   margin-inline-start: 0px;
   margin-inline-end: 0px;
@@ -1419,8 +1419,8 @@ const FieldGroup = ({ children, label }) => {
     return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
         React.createElement(Label$1, { id: `${id}-label` }, label),
         React.createElement(Content$1, { id: `${id}-content` }, children)));
-};
-
+};
+
 const Dropzone = styled.div `
   border-radius: 8px;
   border-width: 1px;
@@ -1610,8 +1610,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
                         React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
                         tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
                             React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
-};
-
+};
+
 const getAgesFromDob = (dob) => {
     let calculated_current_age = null;
     let calculated_nearest_age = null;
@@ -1684,8 +1684,8 @@ const formatAsSsn = (number) => {
         formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
-};
-
+};
+
 const StyledInput = styled.input `
   border: none !important;
   background: none !important;
@@ -1926,7 +1926,7 @@ const Input$1 = (_a) => {
                         onBlur(e);
                     setTimeout(() => {
                         setShowOptions(false);
-                    }, 200);
+                    }, 500);
                 }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1951,8 +1951,8 @@ const Input$1 = (_a) => {
                     onSuggestedSelect();
                     setShowOptions(false);
                 } }, suggestedValue))))) : null));
-};
-
+};
+
 const Wrapper$7 = styled.a `
   color: ${props => props.theme.PRIMARY_COLOR.Hex};
   font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
@@ -1972,8 +1972,8 @@ const Link = (_a) => {
     var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
     const id = generateUniqueId('link');
     return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
-};
-
+};
+
 const dash = keyframes `
   0% {
     stroke-dasharray: 1, 160;
@@ -2008,8 +2008,8 @@ const Loader = () => {
     const id = generateUniqueId('loader');
     return (React.createElement(Spinner, { id: `${id}-spinner`, viewBox: '0 0 16 18' },
         React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', id: `${id}-path`, strokeWidth: '2' })));
-};
-
+};
+
 const Steps = styled.div `
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
@@ -2068,8 +2068,8 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
                 step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
                 React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
     })));
-};
-
+};
+
 const Wrapper$6 = styled.div `
   position: fixed;
   top: 0;
@@ -2182,8 +2182,8 @@ const Modal = (_a) => {
                     secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
                         React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
-};
-
+};
+
 const Wrapper$5 = styled.div `
   position: relative;
   width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
@@ -2287,8 +2287,8 @@ const MultiSelect = (_a) => {
         showOptions ? (React.createElement(Options, { id: `${id}-options` },
             React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
-};
-
+};
+
 const Wrapper$4 = styled.div `
   display: flex;
   padding: 16px 30px;
@@ -2340,8 +2340,8 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
                 return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
-};
-
+};
+
 const Wrapper$3 = styled.nav `
   box-sizing: border-box;
   display: flex;
@@ -2376,8 +2376,8 @@ const Pagination = (_a) => {
                 value: `${p}`,
             })), value: `${currentPage}` }),
         React.createElement(Button, { disabled: is_last_page, icon: mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
-};
-
+};
+
 const Wrapper$2 = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -2462,16 +2462,16 @@ const Radio = (_a) => {
         React.createElement(Label, { id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
-};
-
+};
+
 const RadioList = (_a) => {
     var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
     return (React.createElement(React.Fragment, null, options.map((option) => {
         const label = option.label || option.value;
         return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
     })));
-};
-
+};
+
 const StyledTable = styled.table `
   width: 100%;
   margin-top: 1px;
@@ -2554,8 +2554,8 @@ const Table = (_a) => {
                 return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
             })));
         }))) : null));
-};
-
+};
+
 const Wrapper$1 = styled.div `
   display: flex;
   box-sizing: border-box;
@@ -2616,8 +2616,8 @@ const Tabs = (_a) => {
             label));
     })));
 };
-Tabs.defaultProps = {};
-
+Tabs.defaultProps = {};
+
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;
@@ -2648,8 +2648,8 @@ const Toggle = (_a) => {
         React.createElement(Handle, { "$on": on, id: `${id}-handle` },
             React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? mdiCheck : mdiClose, size: '16px' }))));
 };
-Toggle.defaultProps = {};
-
+Toggle.defaultProps = {};
+
 const Container = styled.div `
   width: 100%;
   padding: 40px auto;
@@ -2685,7 +2685,7 @@ const ZeroState = (_a) => {
             React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
             description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
         action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
-};
-
-export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
-//# sourceMappingURL=index.js.map
+};
+
+export { Accordion, ActionDialog, Alert, AppHeader, AppMenu, BulkActionBar, Button, ButtonMenu, Checkbox, Checklist, Colors, Copy, DatePicker, Drawer, EditableTheme, Field, FieldGroup, FileUpload, FontSizes, FontStyles, Heading, Input$1 as Input, Link, Loader, Logo, Modal, MoreMenu, MultiSelect, PageHeader, Pagination, ProgressBar, Radio, RadioList, Select, Table, Tabs, Tag, Toggle, Tooltip, ZeroState, formatAsPhone, formatAsSsn, getAgesFromDob, getDaysForMonth, getYears, validateEmail, validatePhone };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexure/ui",
-  "version": "1.13.33",
+  "version": "1.13.34",
   "description": "A library of shared UI components used within Hexure products.",
   "scripts": {
     "rollup": "rollup -c rollup.config.mjs",