@hexure/ui 1.12.7 → 1.12.9

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,26 +85,26 @@ const FontSizes = {
 };
 const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
-};
-
-const Header$3 = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  background: #f5f5f5;
-  border: 1px solid #e5e5e5;
-  padding: 14px 20px;
-  height: 50px;
-  cursor: pointer;
-`;
-const Title$2 = styled.div `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  color: ${Colors.BLACK.Hex};
-  line-height: 1.6em;
-  font-family: ${FontStyles.DEFAULT};
-  box-sizing: border-box;
+};
+
+const Header$3 = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  padding: 14px 20px;
+  height: 50px;
+  cursor: pointer;
+`;
+const Title$2 = styled.div `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  font-family: ${FontStyles.DEFAULT};
+  box-sizing: border-box;
 `;
 const Accordion = (_a) => {
     var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
@@ -113,13 +113,13 @@ const Accordion = (_a) => {
             React.createElement(Title$2, null, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
         open ? children : null));
-};
-
-const StyledButton = styled.button `
-  height: ${props => (props.$small ? '30px' : '40px')};
-  line-height: 1em;
-  border-radius: ${props => (props.$small ? '15px' : '20px')};
-  margin: ${props => props.$margin || '0px'};
+};
+
+const StyledButton = styled.button `
+  height: ${props => (props.$small ? '30px' : '40px')};
+  line-height: 1em;
+  border-radius: ${props => (props.$small ? '15px' : '20px')};
+  margin: ${props => props.$margin || '0px'};
   padding: ${props => {
     if (props.$hasChildren) {
         if (props.$small) {
@@ -130,9 +130,9 @@ const StyledButton = styled.button `
         }
     }
     return '0px';
-}};
-  outline: none;
-  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
+}};
+  outline: none;
+  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
   width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
@@ -141,53 +141,53 @@ const StyledButton = styled.button `
         return '30px';
     }
     return '40px';
-}};
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
-  box-sizing: border-box;
-
-  &:active,
-  &:focus,
-  &:hover {
-    opacity: ${props => (props.$disabled ? 0.6 : 1)};
-  }
-`;
-const Label$5 = styled.span `
-  color: ${props => props.$content_color || '#fff'};
-  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 1;
-`;
-const StyledIcon$6 = styled.span `
-  margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
-  margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-`;
-const Badge$1 = styled.span `
-  width: ${props => (props.$small ? '20px' : '24px')};
-  height: ${props => (props.$small ? '20px' : '24px')};
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: ${props => props.$bg_color || '#fff'};
-  color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${props => (props.$small ? '10px' : '12px')};
-  font-weight: 600;
-  font-family: ${FontStyles.DEFAULT};
-  letter-spacing: -1px;
-  margin-left: ${props => (props.$small ? '5px' : '10px')};
-  margin-right: ${props => (props.$small ? '-5px' : '-10px')};
+}};
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
+  box-sizing: border-box;
+
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: ${props => (props.$disabled ? 0.6 : 1)};
+  }
+`;
+const Label$5 = styled.span `
+  color: ${props => props.$content_color || '#fff'};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 1;
+`;
+const StyledIcon$6 = styled.span `
+  margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
+  margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`;
+const Badge$1 = styled.span `
+  width: ${props => (props.$small ? '20px' : '24px')};
+  height: ${props => (props.$small ? '20px' : '24px')};
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${props => props.$bg_color || '#fff'};
+  color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${props => (props.$small ? '10px' : '12px')};
+  font-weight: 600;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: -1px;
+  margin-left: ${props => (props.$small ? '5px' : '10px')};
+  margin-right: ${props => (props.$small ? '-5px' : '-10px')};
 `;
 const Button = (_a) => {
     var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format"]);
@@ -229,29 +229,29 @@ const Button = (_a) => {
         icon && !badge ? (React.createElement(StyledIcon$6, { "$hasChildren": !!has_children },
             React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
         badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
-};
-
-const StyledComponent = styled.p `
-  color: ${props => Colors[props.$color || 'BLACK'].Hex};
-  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
-  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
-  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
-  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
-  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  text-align: ${props => props.$align || 'left'};
-  box-sizing: border-box;
+};
+
+const StyledComponent = styled.p `
+  color: ${props => Colors[props.$color || 'BLACK'].Hex};
+  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
+  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
+  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
+  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  text-align: ${props => props.$align || 'left'};
+  box-sizing: border-box;
 `;
 const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
     return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
 };
 Copy.defaultProps = {
     type: 'default',
-};
-
+};
+
 const H1 = styled.h1 `
   color: ${Colors.BLACK.Hex};
   font-size: 30px;
@@ -299,8 +299,8 @@ const Heading = (_a) => {
 Heading.defaultProps = {
     bold: false,
     type: 'primary',
-};
-
+};
+
 const Wrapper$i = styled.div `
   position: fixed;
   top: 0;
@@ -333,29 +333,29 @@ const ActionDialog = (_a) => {
                 tertiaryButton ? React.createElement(Button, Object.assign({}, tertiaryButton, { format: 'secondary' })) : null,
                 secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format === 'red' ? 'red' : 'primary' }))) : null)) : null)));
-};
-
-const Wrapper$h = styled.div `
-  border: 1px solid #f1f1f1;
-  border-radius: 4px;
-  border-left-width: 4px;
-  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: flex-start;
-  gap: ${({ $small }) => ($small ? '8px' : '20px')};
-  padding: ${({ $small }) => ($small ? '11px' : '20px')};
-  box-sizing: border-box;
-`;
-const StyledIcon$5 = styled(Icon) `
-  flex-shrink: 0;
-`;
-const Action$1 = styled.div `
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  cursor: pointer;
-  margin-top: 6px;
+};
+
+const Wrapper$h = styled.div `
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  border-left-width: 4px;
+  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ $small }) => ($small ? '8px' : '20px')};
+  padding: ${({ $small }) => ($small ? '11px' : '20px')};
+  box-sizing: border-box;
+`;
+const StyledIcon$5 = styled(Icon) `
+  flex-shrink: 0;
+`;
+const Action$1 = styled.div `
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 6px;
 `;
 Action$1.defaultProps = { theme: EditableTheme };
 const Alert = (_a) => {
@@ -385,8 +385,8 @@ const Alert = (_a) => {
             title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
             action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
-};
-
+};
+
 const colorMapping = {
     black: {
         fill_1: '#000000',
@@ -427,61 +427,61 @@ 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 }),
                 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 })));
     }
-};
-
-const Container$3 = styled.header `
-  width: 100%;
-  display: flex;
-  padding: 20px;
-  box-sizing: border-box;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  background: '#fff';
-  justify-content: space-between;
-`;
-const LogoWrapper = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Image = styled.img `
-  height: 30px !important;
-  width: auto !important;
-`;
-const Buttons = styled.div `
-  display: flex;
-  flex-direction: row;
-  column-gap: 10px;
-  flex-direction: reverse;
+};
+
+const Container$3 = styled.header `
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  background: '#fff';
+  justify-content: space-between;
+`;
+const LogoWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Image = styled.img `
+  height: 30px !important;
+  width: auto !important;
+`;
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  flex-direction: reverse;
 `;
 const AppHeader = ({ logoUrl, buttons = [] }) => {
     return (React.createElement(Container$3, null,
         React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
         React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
-};
-
-const Wrapper$g = styled.div `
-  display: inline-block;
-  border-radius: 4px;
-  padding: 4px 6px;
-  background: ${props => Colors[props.$color].Hex};
-  color: #ffffff;
-  box-sizing: border-box;
-  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
-`;
-const Content$3 = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Label$4 = styled.div `
-  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
-  font-size: ${FontSizes.SMALL};
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.2em;
-`;
-const Remove$1 = styled.div `
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
+};
+
+const Wrapper$g = styled.div `
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: ${props => Colors[props.$color].Hex};
+  color: #ffffff;
+  box-sizing: border-box;
+  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+`;
+const Content$3 = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Label$4 = styled.div `
+  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
+  font-size: ${FontSizes.SMALL};
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.2em;
+`;
+const Remove$1 = styled.div `
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
 `;
 const Tag = (_a) => {
     var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
@@ -490,91 +490,91 @@ const Tag = (_a) => {
             React.createElement(Label$4, { "$color": color }, children),
             removable ? (React.createElement(Remove$1, null,
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
-};
-
-const SidebarContainer = styled.div `
-  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 0px;
-  width: ${props => (props.$isOpen ? props.$width : '60px')};
-`;
-const MenuWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  border-left-width: 4px;
-  border-left-style: solid;
-  border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
-  cursor: pointer;
-  height: 40px;
-
-  &:hover > div {
-    color: ${props => props.$color.Hex};
-  }
-
-  &:hover > svg > path {
-    fill: ${Colors.BLACK.Hex} !important;
-  }
-`;
-const MenuIcon = styled(Icon) `
-  width: 20px;
-  height: 20px;
-  margin: 0px 16px;
-  flex-shrink: 0;
-
-  > path {
-    fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
-  }
-`;
-const MenuLabel = styled.div `
-  color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
-  flex: 1;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 16px;
-  padding: 12px 0px;
-  letter-spacing: 1px;
-`;
-const SubMenu = styled.div `
-  overflow-y: auto;
-  padding-left: 44px;
-  padding-right: 20px;
-  padding-bottom: 10px;
-`;
-const SubMenuItem = styled.a `
-  display: block;
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 20px;
-  text-decoration: none;
-  font-weight: ${({ $active }) => ($active ? '500' : '400')};
-  color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
-  background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.$color.Hex};
-    font-weight: 500;
-  }
-`;
-const Footer = styled.div `
-  padding: 20px 14px 0px;
-  display: flex;
-  align-items: center;
-`;
-const FooterInfo = styled.div `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-items: flex-start;
-`;
-const SidebarMenuContainer = styled.div `
-  flex-grow: 1;
+};
+
+const SidebarContainer = styled.div `
+  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0px;
+  width: ${props => (props.$isOpen ? props.$width : '60px')};
+`;
+const MenuWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
+  cursor: pointer;
+  height: 40px;
+
+  &:hover > div {
+    color: ${props => props.$color.Hex};
+  }
+
+  &:hover > svg > path {
+    fill: ${Colors.BLACK.Hex} !important;
+  }
+`;
+const MenuIcon = styled(Icon) `
+  width: 20px;
+  height: 20px;
+  margin: 0px 16px;
+  flex-shrink: 0;
+
+  > path {
+    fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
+  }
+`;
+const MenuLabel = styled.div `
+  color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
+  flex: 1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 16px;
+  padding: 12px 0px;
+  letter-spacing: 1px;
+`;
+const SubMenu = styled.div `
+  overflow-y: auto;
+  padding-left: 44px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+`;
+const SubMenuItem = styled.a `
+  display: block;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 20px;
+  text-decoration: none;
+  font-weight: ${({ $active }) => ($active ? '500' : '400')};
+  color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
+  background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
+  cursor: pointer;
+
+  &:hover {
+    color: ${props => props.$color.Hex};
+    font-weight: 500;
+  }
+`;
+const Footer = styled.div `
+  padding: 20px 14px 0px;
+  display: flex;
+  align-items: center;
+`;
+const FooterInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+`;
+const SidebarMenuContainer = styled.div `
+  flex-grow: 1;
 `;
 const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -598,75 +598,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true }))));
-};
-
-const Wrapper$f = styled.div `
-  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 8px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
+};
+
+const Wrapper$f = styled.div `
+  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
 `;
 Wrapper$f.defaultProps = { theme: EditableTheme };
-const Left = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-`;
-const Info$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  margin-right: 30px;
-`;
-const Selected = styled.span `
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  line-height: 1;
-`;
-const Clear = styled.span `
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  line-height: 1;
-  cursor: pointer;
-  padding-left: 10px;
-  margin-left: 10px;
-  border-left: 1px solid #ccc;
+const Left = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+`;
+const Info$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-right: 30px;
+`;
+const Selected = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  line-height: 1;
+`;
+const Clear = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  line-height: 1;
+  cursor: pointer;
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ccc;
 `;
 Clear.defaultProps = { theme: EditableTheme };
-const Actions$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  column-gap: 10px;
-`;
-const Error$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  background: rgba(${Colors.RED.Rgb}, 0.1);
-  border-radius: 4px;
-  padding: 6px 8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-left: 30px;
-`;
-const ErrorMsg = styled.span `
-  font-size: 14px;
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1em;
-  color: ${Colors.RED.Hex};
-  margin-left: 8px;
+const Actions$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+`;
+const Error$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: rgba(${Colors.RED.Rgb}, 0.1);
+  border-radius: 4px;
+  padding: 6px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 30px;
+`;
+const ErrorMsg = styled.span `
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.RED.Hex};
+  margin-left: 8px;
 `;
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
@@ -681,46 +681,46 @@ const BulkActionBar = (_a) => {
         errorMsg ? (React.createElement(Error$1, null,
             React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));
-};
-
-const Wrapper$e = styled.div `
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: ${props => props.$maxHeight || '312px'};
-  padding: 10px;
-  width: 200px;
-`;
-const MenuItem = styled.div `
-  align-items: center;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  display: flex;
-  gap: 8px;
-  height: 38px;
-  padding: 8px;
-  &:hover {
-    background: rgba(1, 147, 215, 0.1);
-    cursor: pointer;
-
-    svg,
-    path {
-      fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-    }
-  }
+};
+
+const Wrapper$e = styled.div `
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: ${props => props.$maxHeight || '312px'};
+  padding: 10px;
+  width: 200px;
+`;
+const MenuItem = styled.div `
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  display: flex;
+  gap: 8px;
+  height: 38px;
+  padding: 8px;
+  &:hover {
+    background: rgba(1, 147, 215, 0.1);
+    cursor: pointer;
+
+    svg,
+    path {
+      fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+    }
+  }
 `;
 MenuItem.defaultProps = { theme: EditableTheme };
-const Title$1 = styled.span `
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 400;
-  height: auto;
-  letter-spacing: 0px;
-  line-height: 22px;
-  text-align: left;
+const Title$1 = styled.span `
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 400;
+  height: auto;
+  letter-spacing: 0px;
+  line-height: 22px;
+  text-align: left;
 `;
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
@@ -729,38 +729,38 @@ const MoreMenu = (_a) => {
             item.icon ? (React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, null, item.label)));
     })));
-};
-
-const Wrapper$d = styled.div `
-  position: relative;
-  display: inline-block;
-`;
-const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
-  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
-  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
-  top: ${props => (props.$small ? '30px' : '40px')};
-  width: ${props => props.$menuWidth};
-  z-index: 10;
+};
+
+const Wrapper$d = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledMoreMenu = styled(MoreMenu) `
+  position: absolute;
+  right: ${props => (props.$position === 'right' ? '0px' : 'auto')};
+  left: ${props => (props.$position === 'left' ? '0px' : 'auto')};
+  top: ${props => (props.$small ? '30px' : '40px')};
+  width: ${props => props.$menuWidth};
+  z-index: 10;
 `;
 const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'right', format = 'primary', menuWidth = '200px', }) => {
     const [show_menu, toggleMenu] = React.useState(false);
     return (React.createElement(Wrapper$d, { onMouseEnter: disabled ? undefined : toggleMenu.bind(null, true), onMouseLeave: disabled ? undefined : toggleMenu.bind(null, false) },
         React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
         show_menu ? (React.createElement(StyledMoreMenu, { "$menuWidth": menuWidth, "$position": position, "$small": small, maxHeight: maxHeight, menuItems: menuItems })) : null));
-};
-
-const Wrapper$c = styled.div `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
-const StyledIcon$4 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+};
+
+const Wrapper$c = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$4 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  margin: 0px 6px;
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 StyledIcon$4.defaultProps = { theme: EditableTheme };
 const positions = {
@@ -798,8 +798,8 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
     return (React.createElement(Wrapper$c, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$4, { path: js.mdiInformationOutline }),
         show_content ? (React.createElement(Content$2, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
-};
-
+};
+
 const Wrapper$b = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -873,28 +873,28 @@ const Label$3 = styled.span `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   line-height: 1.6em;
-  color: ${Colors.BLACK.Hex};
+  color: ${props => props.color || Colors.BLACK.Hex};;
   margin-left: 6px;
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "invalid", "tooltip"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
     return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps),
         React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid }),
-        children ? (React.createElement(Label$3, null,
+        children ? (React.createElement(Label$3, { color: color },
             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};
-  box-sizing: border-box;
+};
+
+const SelectAll = styled.div `
+  padding: 8px 12px;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  box-sizing: border-box;
 `;
-const Options$1 = styled.div `
-  padding: 12px;
-  box-sizing: border-box;
+const Options$1 = styled.div `
+  padding: 12px;
+  box-sizing: border-box;
 `;
 const Checklist = (_a) => {
     var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -929,81 +929,105 @@ const Checklist = (_a) => {
         React.createElement(Options$1, null, options.map((option, i) => {
             const label = `${option.label || option.value}`;
             const checked = selected.includes(option.value);
-            return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
+            return (React.createElement(Checkbox, Object.assign({ 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;
-  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 IconWrapper$2 = styled(Icon) `
-  position: absolute;
-  right: 9px;
-  z-index: 1;
+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 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, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
+    var { options, optionGroups, placeholder, readOnly, invalid, searchable = false, value, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    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()); }) })));
     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))),
         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) => {
+            filteredOptionGroups &&
+                filteredOptionGroups.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));
+                        return (option.label && (React.createElement("option", { key: i, style: { color: option.color }, 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 &&
+                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(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
-};
-
-const DatePickerWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+};
+
+const DatePickerWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
 `;
-const Middle = styled.div `
-  margin: 0px -1px;
-  flex-grow: 1;
+const Middle = styled.div `
+  margin: 0px -1px;
+  flex-grow: 1;
 `;
 const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, onChange, style, }) => {
     const dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
@@ -1065,66 +1089,66 @@ const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate
             React.createElement(Middle, null,
                 React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
             React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
-};
-
-const Scrim$1 = styled.div `
-  position: ${({ $position }) => $position};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
-  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
-`;
-const Container$2 = styled.div `
-  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
-  min-width: 400px;
-  width: ${({ $width }) => $width || '400px'};
-  overflow: hidden;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  outline: none;
-  border: none;
-  position: ${({ $position }) => $position};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  background: #fff;
-`;
-const Header$2 = styled.div `
-  padding: 30px 20px;
-  display: flex;
-  align-items: flex-start;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  background: #fff;
-`;
-const Close$1 = styled.div `
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: pointer;
-`;
-const ContentWrapper$1 = styled.div `
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  flex: 1;
-  background: #fff;
-`;
-const ButtonBar$1 = styled.div `
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  gap: 10px;
-  flex-shrink: 0;
-  background: #fff;
+};
+
+const Scrim$1 = styled.div `
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
+  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
+`;
+const Container$2 = styled.div `
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
+  min-width: 400px;
+  width: ${({ $width }) => $width || '400px'};
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: #fff;
+`;
+const Header$2 = styled.div `
+  padding: 30px 20px;
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: #fff;
+`;
+const Close$1 = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const ContentWrapper$1 = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex: 1;
+  background: #fff;
+`;
+const ButtonBar$1 = styled.div `
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fff;
 `;
 const Drawer = (_a) => {
     var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
@@ -1152,8 +1176,8 @@ const Drawer = (_a) => {
                 secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })) : null,
                 primaryButton ? React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' })) : null)) : null),
         scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": 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;
@@ -1214,107 +1238,107 @@ const Field = (_a) => {
         description ? React.createElement(Description, null, description) : null,
         children,
         validationText ? React.createElement(Validation, null, validationText) : null));
-};
-
-const Wrapper$8 = styled.fieldset `
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  padding-block-start: 0px;
-  padding-inline-start: 0px;
-  padding-inline-end: 0px;
-  padding-block-end: 0px;
-  min-inline-size: min-content;
-  border-width: 0px;
-  border-style: none;
-  border-color: transparent;
-  border-image: none;
-`;
-const Label$1 = styled.legend `
-  padding-inline-start: 0px;
-  padding-inline-end: 0px;
-
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 22px;
-  margin-bottom: 6px;
-`;
-const Content$1 = styled.div `
-  padding: 20px;
-  border-radius: 8px;
-  background: #fcfcfc;
+};
+
+const Wrapper$8 = styled.fieldset `
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-block-start: 0px;
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+  padding-block-end: 0px;
+  min-inline-size: min-content;
+  border-width: 0px;
+  border-style: none;
+  border-color: transparent;
+  border-image: none;
+`;
+const Label$1 = styled.legend `
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 6px;
+`;
+const Content$1 = styled.div `
+  padding: 20px;
+  border-radius: 8px;
+  background: #fcfcfc;
+`;
+const FieldGroup = ({ children, label }) => {
+    return (React.createElement(Wrapper$8, null,
+        React.createElement(Label$1, null, label),
+        React.createElement(Content$1, null, children)));
+};
+
+const Dropzone = styled.div `
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
+  background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
+  cursor: copy;
+`;
+Dropzone.defaultProps = { theme: EditableTheme };
+const IconWrapper$1 = styled.div `
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledIcon$3 = styled(Icon) `
+  width: 40px !important;
+  height: 40px !important;
+
+  > path {
+    fill: ${Colors.GRAY.Hex} !important;
+  }
+`;
+const ClickZone = styled.div `
+  margin: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
 `;
-const FieldGroup = ({ children, label }) => {
-    return (React.createElement(Wrapper$8, null,
-        React.createElement(Label$1, null, label),
-        React.createElement(Content$1, null, children)));
-};
-
-const Dropzone = styled.div `
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: dashed;
-  border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
-  background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
-  cursor: copy;
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
 `;
-Dropzone.defaultProps = { theme: EditableTheme };
-const IconWrapper$1 = styled.div `
-  width: 80px;
-  height: 80px;
-  border-radius: 40px;
-  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledIcon$3 = styled(Icon) `
-  width: 40px !important;
-  height: 40px !important;
-
-  > path {
-    fill: ${Colors.GRAY.Hex} !important;
-  }
-`;
-const ClickZone = styled.div `
-  margin: 40px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-`;
-const Content = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-`;
-const Files = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  gap: 10px;
-  margin: 20px;
-`;
-const File = styled.div `
-  display: flex;
-  padding: 10px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #cccccc;
-  background: #ffffff;
-`;
-const Remove = styled(Icon) `
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-
-  > path {
-    fill: ${Colors.RED.Hex} !important;
-  }
+const Files = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 10px;
+  margin: 20px;
+`;
+const File = styled.div `
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+`;
+const Remove = styled(Icon) `
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  > path {
+    fill: ${Colors.RED.Hex} !important;
+  }
 `;
 const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, message, validateFile, }) => {
     const inputRef = React.useRef(null);
@@ -1425,8 +1449,8 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, mes
                 React.createElement(Content, null,
                     React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
                     message ? (React.createElement(Copy, { align: 'center', color: 'GRAY' }, message)) : null))) : null)));
-};
-
+};
+
 const getAgesFromDob = (dob) => {
     let calculated_current_age = null;
     let calculated_nearest_age = null;
@@ -1499,8 +1523,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;
@@ -1525,13 +1549,13 @@ const StyledInput = styled.input `
 const StyledTextArea = styled.textarea `
   border: none !important;
   background: none !important;
-  overflow-y:scroll !important;
+  overflow-y: scroll !important;
   font-size: 14px;
   font-weight: 400;
   height: ${props => props.$height || 'auto'};
-  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
   line-height: 1.28em;
-  color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')}; 
+  color: ${({ $invalid }) => ($invalid ? '#ff0000' : '#000000')};
   position: relative;
   padding: 10px;
   opacity: 1;
@@ -1643,6 +1667,7 @@ const Loader$1 = styled.div `
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 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] = React.useState(false);
+    const inputRef = React.useRef(null);
     const handleInputChange = (e) => {
         if (format === 'currency' || format === 'currency_decimal') {
             e.target.value = e.target.value.replace(/[^0-9.]/g, '');
@@ -1699,102 +1724,101 @@ const Input$1 = (_a) => {
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.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) },
-            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);
-                    }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
-                    ? e => e.preventDefault()
-                    : e => {
-                        setShowOptions(true);
-                        if (onFocus)
-                            onFocus(e);
-                    }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
-            loading ? (React.createElement(Loader$1, null,
-                React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
-            showCharCount ? (React.createElement(CharacterCount, null,
-                value.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,
-                React.createElement(SuggestedSummary, null,
-                    suggestedValues.length,
-                    " Results Match \"",
-                    value,
-                    "\""),
-                suggestedValues.map((s_value, i) => {
-                    return (React.createElement(SuggestedValue, { key: i, onClick: () => {
-                            handleInputChange({ target: { value: s_value } });
-                            if (onSuggestedSelect)
-                                onSuggestedSelect();
-                            setShowOptions(false);
-                        } }, s_value));
-                }))) : null));
-};
-
-const Wrapper$7 = styled.a `
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
-  letter-spacing: ${props => (props.$small ? '1px' : '0px')};
-  font-weight: 500;
-  font-style: normal;
-  text-decoration: 'none';
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  margin: 0px;
-  padding: 0px;
-  box-sizing: border-box;
-  cursor: pointer;
+            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), ref: inputRef },
+        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);
+                }, onChange: readOnly ? e => e.preventDefault() : handleInputChange, onFocus: readOnly
+                ? e => e.preventDefault()
+                : e => {
+                    setShowOptions(true);
+                    if (onFocus)
+                        onFocus(e);
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, ref: inputRef, step: step, type: type, value: formatted_value }, accessibleProps)),
+        loading ? (React.createElement(Loader$1, null,
+            React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
+        showCharCount ? (React.createElement(CharacterCount, null,
+            value.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,
+            React.createElement(SuggestedSummary, null,
+                suggestedValues.length,
+                " Results Match \"",
+                value,
+                "\""),
+            suggestedValues.map((s_value, i) => {
+                return (React.createElement(SuggestedValue, { key: i, onClick: () => {
+                        handleInputChange({ target: { value: s_value } });
+                        if (onSuggestedSelect)
+                            onSuggestedSelect();
+                        setShowOptions(false);
+                    } }, s_value));
+            }))) : null));
+};
+
+const Wrapper$7 = styled.a `
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$small ? '1px' : '0px')};
+  font-weight: 500;
+  font-style: normal;
+  text-decoration: 'none';
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  cursor: pointer;
 `;
 Wrapper$7.defaultProps = { theme: EditableTheme };
 const Link = (_a) => {
     var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
     return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
-};
-
-const dash = styled.keyframes `
-  0% {
-    stroke-dasharray: 1, 160;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 80, 160;
-    stroke-dashoffset: -32;
-  }
-  100% {
-    stroke-dasharray: 80, 160;
-    stroke-dashoffset: -124;
-  }
-`;
-const Spinner = styled.svg `
-  z-index: 2;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0 auto;
-  width: 40px;
-  height: 40px;
-`;
-const Path = styled.path `
-  stroke: #0193d7;
-  stroke-linecap: round;
-  -webkit-animation: ${dash} 1.1s ease-in-out infinite;
-  animation: ${dash} 1.1s ease-in-out infinite;
+};
+
+const dash = styled.keyframes `
+  0% {
+    stroke-dasharray: 1, 160;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 80, 160;
+    stroke-dashoffset: -32;
+  }
+  100% {
+    stroke-dasharray: 80, 160;
+    stroke-dashoffset: -124;
+  }
+`;
+const Spinner = styled.svg `
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0 auto;
+  width: 40px;
+  height: 40px;
+`;
+const Path = styled.path `
+  stroke: #0193d7;
+  stroke-linecap: round;
+  -webkit-animation: ${dash} 1.1s ease-in-out infinite;
+  animation: ${dash} 1.1s ease-in-out infinite;
 `;
 const Loader = () => {
     return (React.createElement(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', strokeWidth: '2' })));
-};
-
+};
+
 const Steps = styled.div `
   padding: 20px;
   border-bottom: 1px solid #e7e6e6;
@@ -1851,75 +1875,75 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
                 step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
                 React.createElement(StepLabel, null, step.label))));
     })));
-};
-
-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 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 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 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 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 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 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 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"]);
@@ -1952,21 +1976,21 @@ const Modal = (_a) => {
                     } },
                     secondaryButton ? React.createElement(Button, Object.assign({}, secondaryButton, { format: 'secondary' })) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
-};
-
-const Wrapper$5 = styled.div `
-  position: relative;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-`;
-const Trigger = styled.div `
-  box-sizing: border-box;
-  border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
-  height: 40px;
-  padding: 0 10px;
-  position: relative;
-  cursor: pointer;
-  border-width: 1px;
-  border-style: solid;
+};
+
+const Wrapper$5 = styled.div `
+  position: relative;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Trigger = styled.div `
+  box-sizing: border-box;
+  border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
+  height: 40px;
+  padding: 0 10px;
+  position: relative;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
   border-color: ${props => {
     if (props.$invalid) {
         return Colors.RED.Hex;
@@ -1977,95 +2001,120 @@ const Trigger = styled.div `
     else {
         return '#cccccc';
     }
-}};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  background-image: none;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
+}};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  background-image: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
 `;
 Trigger.defaultProps = { theme: EditableTheme };
-const Value = styled.div `
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-`;
-const Options = styled.div `
-  background: #fff;
-  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 0px 0px 4px 4px;
-  border-style: solid;
-  border-top: none;
-  border-width: 1px;
-  left: 0;
-  position: absolute;
-  right: 0;
-  z-index: 10;
-  max-height: 220px;
-  overflow: auto;
+const Value = styled.div `
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+const Options = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: 0;
+  position: relative;
+  right: 0;
+  z-index: 10;
+  max-height: 220px;
+  overflow: auto;
 `;
 Options.defaultProps = { theme: EditableTheme };
-const Scrim = styled.div `
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 9;
+const Scrim = styled.div `
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9;
+`;
+const SearchInput = 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 MultiSelect = (_a) => {
-    var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
+    var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
     const [showOptions, setShowOptions] = React.useState(false);
     const selected_options = options.filter(o => selected.includes(o.value));
+    const [filter, setFilter] = React.useState('');
+    // Filter the options based on the filter state
+    const filteredOptions = options.filter(o => {
+        var _a;
+        return ((_a = o.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filter)) ||
+            o.value.toString().toLowerCase().includes(filter);
+    });
     return (React.createElement(Wrapper$5, { "$style": style },
+        searchable && React.createElement(SearchInput, { onChange: e => setFilter(e.target.value), onClick: () => setShowOptions(!showOptions), placeholder: `${showSelectAll ? options.length : selected_options.length} Selected`, type: 'text', value: filter }),
         React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
             React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
                 ? selected_options.map(o => o.label || o.value).join(', ')
                 : `${selected_options.length} Selected`),
             React.createElement(Icon, { color: Colors.BLACK.Hex, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
         showOptions ? (React.createElement(Options, null,
-            React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
+            React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
-};
-
-const Wrapper$4 = styled.div `
-  display: flex;
-  padding: 16px 30px;
-  align-items: center;
-  gap: 20px;
-  align-self: stretch;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-`;
-const Title = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 20px;
-`;
-const Info = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  flex: 1 0 0;
-`;
-const Breadcrumbs = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-const Actions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
+};
+
+const Wrapper$4 = styled.div `
+  display: flex;
+  padding: 16px 30px;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+`;
+const Title = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+const Info = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+`;
+const Breadcrumbs = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Actions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
     const { format = 'primary', menuItems = [], label = '', } = buttonMenu || {};
@@ -2085,13 +2134,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
                 return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { format: format, label: label, menuItems: menuItems, small: true })) : null)) : null));
-};
-
-const Wrapper$3 = styled.nav `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  column-gap: 10px;
+};
+
+const Wrapper$3 = styled.nav `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
 `;
 const Pagination = (_a) => {
     var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2120,8 +2169,8 @@ const Pagination = (_a) => {
                 value: `${p}`,
             })), value: `${currentPage}` }),
         React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
-};
-
+};
+
 const Wrapper$2 = styled.label `
   border-radius: 4px;
   padding: 4px 0px 4px 6px;
@@ -2205,77 +2254,77 @@ const Radio = (_a) => {
         React.createElement(Label, null,
             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;
-  table-layout: ${props => props.$tableLayout || 'auto'};
-  border-collapse: collapse;
-  text-indent: 0px;
-  border-spacing: 0px;
-  border-color: none;
-  box-sizing: border-box;
-`;
-const Header = styled.th `
-  padding: 12px !important;
-  text-align: left;
-  font-weight: 500;
-  border-bottom: 1px solid #e5e5e5;
-  border-top: 1px solid #e5e5e5;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  letter-spacing: 1px;
-  white-space: nowrap;
-  line-height: 1;
-  position: relative;
-  box-sizing: border-box;
-  width: ${props => props.$width || 'auto'};
-  cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
-  color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
+};
+
+const StyledTable = styled.table `
+  width: 100%;
+  margin-top: 1px;
+  table-layout: ${props => props.$tableLayout || 'auto'};
+  border-collapse: collapse;
+  text-indent: 0px;
+  border-spacing: 0px;
+  border-color: none;
+  box-sizing: border-box;
+`;
+const Header = styled.th `
+  padding: 12px !important;
+  text-align: left;
+  font-weight: 500;
+  border-bottom: 1px solid #e5e5e5;
+  border-top: 1px solid #e5e5e5;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: 1px;
+  white-space: nowrap;
+  line-height: 1;
+  position: relative;
+  box-sizing: border-box;
+  width: ${props => props.$width || 'auto'};
+  cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
+  color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
 `;
 Header.defaultProps = { theme: EditableTheme };
-const Row = styled.tr `
-  cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
-  transition: all 0.2s;
-  background-color: ${props => props.$bgColor};
-  box-sizing: border-box;
-  &:hover {
-    background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
-  }
+const Row = styled.tr `
+  cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
+  transition: all 0.2s;
+  background-color: ${props => props.$bgColor};
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
+  }
 `;
 Row.defaultProps = { theme: EditableTheme };
-const Column = styled.td `
-  padding: 16px 12px !important;
-  font-size: ${FontSizes.DEFAULT} !important;
-  font-weight: 400 !important;
-  font-family: ${FontStyles.DEFAULT};
-  border: none !important;
-  word-break: break-word;
-  line-height: 1.4em;
-  box-sizing: border-box;
-  text-align: ${props => props.$align || 'left'};
-  width: ${props => props.$width || 'auto'};
-`;
-const IconWrapper = styled.span `
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 2px;
-`;
-const StyledIcon$1 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+const Column = styled.td `
+  padding: 16px 12px !important;
+  font-size: ${FontSizes.DEFAULT} !important;
+  font-weight: 400 !important;
+  font-family: ${FontStyles.DEFAULT};
+  border: none !important;
+  word-break: break-word;
+  line-height: 1.4em;
+  box-sizing: border-box;
+  text-align: ${props => props.$align || 'left'};
+  width: ${props => props.$width || 'auto'};
+`;
+const IconWrapper = styled.span `
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 2px;
+`;
+const StyledIcon$1 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$1.defaultProps = { theme: EditableTheme };
 const Table = (_a) => {
@@ -2293,55 +2342,55 @@ const Table = (_a) => {
                 return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
             })));
         }))) : null));
-};
-
-const Wrapper$1 = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-end;
-  border-top: 1px solid #e5e5e5;
-  border-bottom: 1px solid #e5e5e5;
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: 0;
-  margin: 0;
-`;
-const Tab = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: ${props => (props.$isActive ? 500 : 400)};
-  color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
-  line-height: 1em;
-  padding: 16px 30px 12px;
-  margin: 0 0 -1px 0;
-  border-bottom-width: 4px;
-  border-bottom-style: solid;
-  border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
-  cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
-  box-sizing: border-box;
-  &:hover {
-    color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
-    font-weight: 500;
-  }
+};
+
+const Wrapper$1 = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-end;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 0;
+  margin: 0;
+`;
+const Tab = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
+  line-height: 1em;
+  padding: 16px 30px 12px;
+  margin: 0 0 -1px 0;
+  border-bottom-width: 4px;
+  border-bottom-style: solid;
+  border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
+  cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
+  box-sizing: border-box;
+  &:hover {
+    color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
+    font-weight: 500;
+  }
 `;
 Tab.defaultProps = { theme: EditableTheme };
-const Badge = styled.div `
-  display: flex;
-  width: 18px;
-  height: 18px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 9px;
-  background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
-  color: #fff;
-  font-family: ${FontStyles.DEFAULT};
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 1px;
+const Badge = styled.div `
+  display: flex;
+  width: 18px;
+  height: 18px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 9px;
+  background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
+  color: #fff;
+  font-family: ${FontStyles.DEFAULT};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 1px;
 `;
 Badge.defaultProps = { theme: EditableTheme };
 const Tabs = (_a) => {
@@ -2353,29 +2402,29 @@ const Tabs = (_a) => {
             label));
     })));
 };
-Tabs.defaultProps = {};
-
-const Track = styled.div `
-  height: 24px;
-  border-radius: 12px;
-  background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  width: 40px;
-  padding: 2px;
-  box-sizing: border-box;
-`;
-const Handle = styled.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  background: #ffffff;
-  margin-left: ${props => (props.$on ? 'auto' : '0px')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+Tabs.defaultProps = {};
+
+const Track = styled.div `
+  height: 24px;
+  border-radius: 12px;
+  background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 40px;
+  padding: 2px;
+  box-sizing: border-box;
+`;
+const Handle = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: #ffffff;
+  margin-left: ${props => (props.$on ? 'auto' : '0px')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 `;
 const Toggle = (_a) => {
     var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
@@ -2384,32 +2433,32 @@ const Toggle = (_a) => {
         React.createElement(Handle, { "$on": on },
             React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
 };
-Toggle.defaultProps = {};
-
-const Container = styled.div `
-  width: 100%;
-  padding: 40px auto;
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-`;
-const Wrapper = styled.div `
-  gap: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-`;
-const StyledIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: 40px;
-  background: #f5f5f5;
+Toggle.defaultProps = {};
+
+const Container = styled.div `
+  width: 100%;
+  padding: 40px auto;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const Wrapper = styled.div `
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: #f5f5f5;
 `;
 const ZeroState = (_a) => {
     var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
@@ -2420,53 +2469,53 @@ const ZeroState = (_a) => {
             React.createElement(Heading, { children: title, type: 'tertiary' }),
             description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
         action && (React.createElement(Button, { children: action === null || action === void 0 ? void 0 : action.children, icon: action === null || action === void 0 ? void 0 : action.icon, onClick: action === null || action === void 0 ? void 0 : 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