npm - @hexure/ui - Versions diffs - 1.13.32 → 1.13.33 - Mend

@hexure/ui 1.13.32 → 1.13.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/cjs/index.js CHANGED Viewed

@@ -96,24 +96,24 @@ const generateUniqueId = (() => {
     };
 })();
-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"]);
@@ -125,19 +125,19 @@ const Accordion = (_a) => {
         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)};
-  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 = (_a) => {
     var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK' } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color"]);
@@ -148,17 +148,17 @@ Copy.defaultProps = {
     type: 'default',
 };
-const Wrapper$h = styled.div `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
-const StyledIcon$6 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+const Wrapper$h = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$6 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  margin: 0px 6px;
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 StyledIcon$6.defaultProps = { theme: EditableTheme };
 const positions = {
@@ -199,11 +199,11 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }
         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;
-  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) {
@@ -214,9 +214,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';
@@ -225,55 +225,55 @@ const StyledButton = styled.button `
         return '30px';
     }
     return '40px';
-}};
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
-  flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
-  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$5 = 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;
+  gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
+  flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
+  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$5 = 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', iconPosition = 'after', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title"]);
@@ -322,35 +322,35 @@ const Button = (_a) => {
     return button_view;
 };
-const H1 = styled.h1 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 30px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.4em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
-`;
-const H2 = styled.h2 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 24px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.33em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
-`;
-const H3 = styled.h3 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 18px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.33em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
+const H1 = styled.h1 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 30px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.4em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H2 = styled.h2 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 24px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H3 = styled.h3 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 18px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
 `;
 const Heading = (_a) => {
     var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
@@ -372,27 +372,27 @@ Heading.defaultProps = {
     type: 'primary',
 };
-const Wrapper$g = 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;
-  box-sizing: border-box;
+const Wrapper$g = 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;
+  box-sizing: border-box;
 `;
 const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
-const Buttons$1 = styled.div `
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 30px;
-  box-sizing: border-box;
+const Buttons$1 = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  box-sizing: border-box;
 `;
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
@@ -407,27 +407,27 @@ const ActionDialog = (_a) => {
                 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;
-  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$4 = 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$f = 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$4 = 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) => {
@@ -503,28 +503,28 @@ const Logo = (_a) => {
     }
 };
-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 = [] }) => {
     const id = generateUniqueId('app-header');
@@ -533,30 +533,30 @@ const AppHeader = ({ logoUrl, buttons = [] }) => {
         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;
-  padding: 4px 6px;
-  background: ${props => Colors[props.$color].Hex};
-  color: #ffffff;
-  box-sizing: border-box;
-  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
-`;
-const Content$2 = 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$e = 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$2 = 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"]);
@@ -568,92 +568,92 @@ const Tag = (_a) => {
                 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;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 0px;
-  width: ${props => (props.$isOpen ? props.$width : '60px')};
-`;
-const MenuWrapper$1 = styled.button `
-  display: flex;
-  align-items: center;
-  border: 0px;
-  background-color: transparent;
-  padding-left: 0px;
-  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 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$1 = styled.button `
+  display: flex;
+  align-items: center;
+  border: 0px;
+  background-color: transparent;
+  padding-left: 0px;
+  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 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 FooterInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
 `;
-const SidebarMenuContainer = styled.div `
-  flex-grow: 1;
+const SidebarMenuContainer = styled.div `
+  flex-grow: 1;
 `;
 const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -684,73 +684,73 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
                 }, small: true }))));
 };
-const Wrapper$d = 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$d = 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$d.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"]);
@@ -768,46 +768,46 @@ const BulkActionBar = (_a) => {
             React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
 };
-const Wrapper$c = 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$c = 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;
-  color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+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;
+  color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
 `;
 Title$1.defaultProps = {
     disabled: false,
@@ -824,17 +824,17 @@ const MoreMenu = (_a) => {
     })));
 };
-const MenuWrapper = styled.div `
-  position: relative;
-  display: inline-block;
-`;
-const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute;
-  top: ${props => props.$top};
-  left: ${props => props.$left};
-  width: ${props => props.$menuWidth};
-  max-height: ${props => props.maxHeight};
-  z-index: 10;
+const MenuWrapper = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledMoreMenu = styled(MoreMenu) `
+  position: absolute;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
+  width: ${props => props.$menuWidth};
+  max-height: ${props => props.maxHeight};
+  z-index: 10;
 `;
 const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
     const [showMenu, toggleMenu] = React.useState(false);
@@ -911,83 +911,83 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
         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;
-  margin-left: -6px;
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  font-size: ${FontSizes.DEFAULT};
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: relative;
-  &:focus-within {
-    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
-  }
+const Wrapper$b = styled.label `
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: relative;
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
 Wrapper$b.defaultProps = { theme: EditableTheme };
-const Input$2 = styled.input `
-  font-size: 20px;
-  margin: 0px;
-  line-height: 1.1em;
-  box-sizing: border-box;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-  &:checked + span {
-    background-color: ${Colors.PRIMARY.Hex};
-    border-color: ${Colors.PRIMARY.Hex};
-  }
-  &:checked:disabled + span {
-    background-color: ${Colors.MEDIUM_GRAY.Hex};
-    border-color: ${Colors.MEDIUM_GRAY.Hex};
-  }
-  &:disabled + span {
-    background-color: #d3d3d3;
-    border-color: #d3d3d3;
-  }
-  &:checked + span:after {
-    display: block;
-  }
-`;
-const Check$1 = styled.span `
-  height: 17px;
-  width: 17px;
-  min-width: 17px;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 0px;
-    width: 7px;
-    height: 12px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label$3 = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${props => props.color || Colors.BLACK.Hex};
-  margin-left: 6px;
-  box-sizing: border-box;
+const Input$2 = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.1em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    background-color: ${Colors.PRIMARY.Hex};
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked:disabled + span {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+    border-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:checked + span:after {
+    display: block;
+  }
+`;
+const Check$1 = styled.span `
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 0px;
+    width: 7px;
+    height: 12px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label$3 = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${props => props.color || Colors.BLACK.Hex};
+  margin-left: 6px;
+  box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
     var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
@@ -1000,14 +1000,14 @@ const Checkbox = (_a) => {
             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"]);
@@ -1048,68 +1048,68 @@ const Checklist = (_a) => {
         }))));
 };
-const Wrapper$a = styled.div `
-  border-radius: 4px;
-  height: 40px;
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
-  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
-  box-sizing: border-box;
-  padding: 10px 0px;
-  display: flex;
-  align-items: center;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+const Wrapper$a = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 Wrapper$a.defaultProps = { theme: EditableTheme };
-const Trigger$1 = styled.select `
-  appearance: none;
-  box-shadow: none;
-  outline: none;
-  border: none;
-  color: ${Colors.BLACK.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 3.1em;
-  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 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: 3.1em;
+  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 = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex"]);
@@ -1146,13 +1146,13 @@ const Select = (_a) => {
         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'};
+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,
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1236,64 +1236,64 @@ onChange = () => { }, style, }) => {
             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;
-  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"]);
@@ -1325,52 +1325,52 @@ const Drawer = (_a) => {
 };
 const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
-const LabelRow = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 4px 0;
-  box-sizing: border-box;
-`;
-const Label$2 = styled.label `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  display: flex;
-  align-items: center;
-`;
-const Required = styled.span `
-  color: ${Colors.RED.Hex};
-  margin-left: 4px;
-`;
-const Action = styled.span `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+const LabelRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 4px 0;
+  box-sizing: border-box;
+`;
+const Label$2 = styled.label `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  display: flex;
+  align-items: center;
+`;
+const Required = styled.span `
+  color: ${Colors.RED.Hex};
+  margin-left: 4px;
+`;
+const Action = styled.span `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 Action.defaultProps = { theme: EditableTheme };
-const Description = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  margin: 0 0 8px 0;
-  box-sizing: border-box;
-`;
-const Validation = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.RED.Hex};
-  margin: 4px 0 0 0;
-  box-sizing: border-box;
+const Description = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  margin: 0 0 8px 0;
+  box-sizing: border-box;
+`;
+const Validation = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.RED.Hex};
+  margin: 4px 0 0 0;
+  box-sizing: border-box;
 `;
 const Field = (_a) => {
     var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
@@ -1387,34 +1387,34 @@ const Field = (_a) => {
         validationText ? React.createElement(Validation, { id: `${id}-validation` }, 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 }) => {
     const id = generateUniqueId('field-group');
@@ -1423,76 +1423,76 @@ const FieldGroup = ({ children, label }) => {
         React.createElement(Content$1, { id: `${id}-content` }, 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 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 Content = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  z-index: 99999;
-  gap: 2px;
-`;
-const Files = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  gap: 10px;
-  margin: 20px;
-`;
-const MessageDiv = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-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 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;
+  z-index: 99999;
+  gap: 2px;
+`;
+const Files = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 10px;
+  margin: 20px;
+`;
+const MessageDiv = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+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, value = [], message, tooltipInfo = '', validateFile, }) => {
     const inputRef = React.useRef(null);
@@ -1688,147 +1688,147 @@ const formatAsSsn = (number) => {
     return formatted_value;
 };
-const StyledInput = styled.input `
-  border: none !important;
-  background: none !important;
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.28em;
+const StyledInput = styled.input `
+  border: none !important;
+  background: none !important;
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  height: ${props => props.$height || 'auto'};
-  padding: 10px;
-  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-`;
-const StyledTextArea = styled.textarea `
-  border: none !important;
-  background: none !important;
-  overflow-y: scroll !important;
-  font-size: 14px;
-  font-weight: 400;
-  height: ${props => props.$height || 'auto'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 1.28em;
+    : Colors.BLACK.Hex};
+  position: relative;
+  height: ${props => props.$height || 'auto'};
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+`;
+const StyledTextArea = styled.textarea `
+  border: none !important;
+  background: none !important;
+  overflow-y: scroll !important;
+  font-size: 14px;
+  font-weight: 400;
+  height: ${props => props.$height || 'auto'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  padding: 10px;
-  opacity: 1;
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+    : Colors.BLACK.Hex};
+  position: relative;
+  padding: 10px;
+  opacity: 1;
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
   ${({ $readOnly }) => $readOnly &&
-    `
-    background-color: #f0f0f0;
-    color: #999999;
-    overflow-y: scroll;
-  `}
-`;
-const StyledSuffix = styled.div `
-  box-sizing: border-box;
-  border-radius: 0px 4px 4px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  height: auto;
-  background: #f5f5f5;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  border-color: #cccccc;
-  font-family: ${FontStyles.DEFAULT};
-  font-style: normal;
-  font-weight: 400;
-  font-size: ${FontSizes.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-`;
-const StyledWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+    `
+    background-color: #f0f0f0;
+    color: #999999;
+    overflow-y: scroll;
+  `}
+`;
+const StyledSuffix = styled.div `
+  box-sizing: border-box;
+  border-radius: 0px 4px 4px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  height: auto;
+  background: #f5f5f5;
+  border-width: 0px 0px 0px 1px;
+  border-style: solid;
+  border-color: #cccccc;
+  font-family: ${FontStyles.DEFAULT};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${FontSizes.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+`;
+const StyledWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const SuggestedValues = 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: -1px;
-  position: absolute;
-  right: -1px;
-  top: 39px;
-  z-index: 9999;
-  max-height: 220px;
-  overflow: auto;
+const SuggestedValues = 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: -1px;
+  position: absolute;
+  right: -1px;
+  top: 39px;
+  z-index: 9999;
+  max-height: 220px;
+  overflow: auto;
 `;
 SuggestedValues.defaultProps = { theme: EditableTheme };
-const SuggestedSummary = styled.div `
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 18px;
-  padding: 10px 12px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fff;
-  z-index: 1;
-  position: sticky;
-  top: 0px;
-`;
-const SuggestedValue = styled.div `
-  cursor: pointer;
-  padding: 8px 12px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${Colors.BLACK.Hex};
-  &:hover {
-    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
-  }
+const SuggestedSummary = styled.div `
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 18px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  z-index: 1;
+  position: sticky;
+  top: 0px;
+`;
+const SuggestedValue = styled.div `
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+  &:hover {
+    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
+  }
 `;
 SuggestedValue.defaultProps = { theme: EditableTheme };
-const CharacterCount = styled.div `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.SMALL};
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  padding: 10px;
+const CharacterCount = styled.div `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.SMALL};
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  padding: 10px;
 `;
-const Loader$1 = styled.div `
-  padding: 0px 10px;
-  display: flex;
-  align-items: center;
+const Loader$1 = styled.div `
+  padding: 0px 10px;
+  display: flex;
+  align-items: center;
 `;
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown,
@@ -1955,19 +1955,19 @@ const Input$1 = (_a) => {
                 } }, suggestedValue))))) : 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;
+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) => {
@@ -1976,35 +1976,35 @@ const Link = (_a) => {
     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;
-    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 = () => {
     const id = generateUniqueId('loader');
@@ -2012,53 +2012,53 @@ const Loader = () => {
         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;
-  background: #f5f5f5;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-`;
-const Step = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StyledIcon$2 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StyledIcon$2 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$2.defaultProps = { theme: EditableTheme };
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 `;
 StepIndicator.defaultProps = { theme: EditableTheme };
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
-const StepLine = styled.div `
-  height: 2px;
-  flex-grow: 1;
-  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
-  transition: background-color 0.5s ease-in-out;
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+const StepLine = styled.div `
+  height: 2px;
+  flex-grow: 1;
+  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
+  transition: background-color 0.5s ease-in-out;
 `;
 const ProgressBar = ({ steps, showStepLine = false }) => {
     const id = generateUniqueId('progress-bar');
@@ -2072,76 +2072,76 @@ const ProgressBar = ({ steps, showStepLine = false }) => {
     })));
 };
-const Wrapper$6 = styled.div `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const 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 ButtonContainer = styled.div `
-  margin: 0 10px;
+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 ButtonContainer = styled.div `
+  margin: 0 10px;
 `;
 const Modal = (_a) => {
     var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
@@ -2186,19 +2186,19 @@ const Modal = (_a) => {
                     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'};
-`;
-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;
@@ -2209,67 +2209,67 @@ 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: absolute;
+  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 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 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, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
@@ -2291,35 +2291,35 @@ const MultiSelect = (_a) => {
         showOptions ? (React.createElement(Scrim, { id: `${id}-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 = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
@@ -2344,11 +2344,11 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
             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;
-  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"]);
@@ -2380,80 +2380,80 @@ const Pagination = (_a) => {
         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;
-  margin-left: -6px;
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  font-size: ${FontSizes.DEFAULT};
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: relative;
-  &:focus-within {
-    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
-  }
+const Wrapper$2 = styled.label `
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: relative;
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
 Wrapper$2.defaultProps = { theme: EditableTheme };
-const Input = styled.input `
-  font-size: 20px;
-  margin: 0px;
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-  &:checked + span {
-    border-color: ${Colors.PRIMARY.Hex};
-  }
-  &:checked + span:after {
-    background-color: ${Colors.PRIMARY.Hex};
-    display: block;
-  }
-  &:disabled + span {
-    background-color: #d3d3d3;
-    border-color: #d3d3d3;
-  }
-  &:disabled + span:after {
-    background-color: #fff;
-  }
-  &:checked:disabled + span:after {
-    background-color: ${Colors.MEDIUM_GRAY.Hex};
-  }
-`;
-const Check = styled.span `
-  height: 17px;
-  width: 17px;
-  border-radius: 50%;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  color: ${Colors.BLACK.Hex};
-  line-height: 1.6em;
-  margin-left: 6px;
+const Input = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked + span:after {
+    background-color: ${Colors.PRIMARY.Hex};
+    display: block;
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:disabled + span:after {
+    background-color: #fff;
+  }
+  &:checked:disabled + span:after {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+`;
+const Check = styled.span `
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  margin-left: 6px;
 `;
 const Radio = (_a) => {
     var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
@@ -2474,67 +2474,67 @@ const RadioList = (_a) => {
     })));
 };
-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) => {
@@ -2558,53 +2558,53 @@ const Table = (_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) => {
@@ -2620,27 +2620,27 @@ const Tabs = (_a) => {
 };
 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 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"]);
@@ -2652,30 +2652,30 @@ const Toggle = (_a) => {
 };
 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 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"]);