@hexure/ui 1.13.63 → 1.13.64

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 { dataItemid, title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["dataItemid", "title", "children", "open", "onClick"]);
@@ -114,21 +114,21 @@ const Accordion = (_a) => {
             React.createElement(Title$2, { "data-itemid": `${baseId}-title` }, title),
             React.createElement(Icon, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
         open ? React.createElement("div", { "data-itemid": `${baseId}-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', dataItemid } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color", "dataItemid"]);
@@ -137,19 +137,19 @@ const Copy = (_a) => {
 };
 Copy.defaultProps = {
     type: 'default',
-};
-
+};
+
 const Wrapper$h = styled.div(props => ({
     display: 'inline-block',
     position: 'relative',
     height: props.$height || '16px',
 }));
-const StyledIcon$6 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+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 = {
@@ -188,13 +188,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
     return (React.createElement(Wrapper$h, { "$height": height, "data-itemid": `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
         trigger || React.createElement(StyledIcon$6, { "data-itemid": `${baseId}-icon`, path: js.mdiInformationOutline }),
         show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, "data-itemid": `${baseId}-content` }, children && (React.createElement(Copy, { "data-itemid": `${baseId}-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) {
@@ -205,9 +205,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';
@@ -216,55 +216,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 = '', dataItemid, type = null } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "dataItemid", "type"]);
@@ -311,37 +311,37 @@ const Button = (_a) => {
         return (React.createElement(Tooltip, Object.assign({}, toolTip, { trigger: (toolTip === null || toolTip === void 0 ? void 0 : toolTip.trigger) || button_view }), toolTip === null || toolTip === void 0 ? void 0 : toolTip.children));
     }
     return button_view;
-};
-
-const H1 = styled.h1 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 30px;
-  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, dataItemid } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "dataItemid"]);
@@ -361,29 +361,29 @@ const Heading = (_a) => {
 Heading.defaultProps = {
     bold: false,
     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$5 = 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 = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
@@ -396,29 +396,29 @@ const ActionDialog = (_a) => {
                 tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": `${baseId}-tertiary-button`, format: tertiaryButton.format || 'secondary' }))) : null,
                 secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
                 primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : 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) => {
@@ -449,8 +449,8 @@ const Alert = (_a) => {
             title && !small ? (React.createElement(Heading, { bold: true, "data-itemid": `${baseId}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
             description ? (React.createElement(Copy, { "data-itemid": `${baseId}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
             action && !small ? (React.createElement(Action$1, { "data-itemid": `${baseId}-action`, onClick: action.onClick }, action.label)) : null)));
-};
-
+};
+
 const colorMapping = {
     black: {
         fill_1: '#000000',
@@ -492,62 +492,62 @@ 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', "data-itemid": `${baseId}-path-7`, 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', "data-itemid": `${baseId}-path-8`, fill: colorMapping[type_parts[1]].fill_1 })));
     }
-};
-
-const Container$4 = 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$4 = 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 = [], dataItemid }) => {
     const baseId = dataItemid || 'app-header';
     return (React.createElement(Container$4, { "data-itemid": `${baseId}-container` },
         React.createElement(LogoWrapper, { "data-itemid": `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { "data-itemid": `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { "data-itemid": `${baseId}-default-logo`, height: '30px' }))),
         React.createElement(Buttons, { "data-itemid": `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { "data-itemid": `${baseId}-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, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid"]);
@@ -557,94 +557,94 @@ const Tag = (_a) => {
             React.createElement(Label$4, { "$color": color, "data-itemid": `${baseId}-label` }, children),
             removable ? (React.createElement(Remove$1, { "data-itemid": `${baseId}-remove` },
                 React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', "data-itemid": `${baseId}-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 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$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 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', dataItemid, }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
@@ -673,75 +673,75 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true, type: 'button' }))));
-};
-
-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, dataItemid } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "dataItemid"]);
@@ -757,48 +757,48 @@ const BulkActionBar = (_a) => {
         errorMsg ? (React.createElement(Error$1, { "data-itemid": `${baseId}-error` },
             React.createElement(Icon, { color: Colors.RED.Hex, "data-itemid": `${baseId}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, { "data-itemid": `${baseId}-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,
@@ -813,19 +813,19 @@ const MoreMenu = (_a) => {
             item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, "data-itemid": `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
             React.createElement(Title$1, { "data-itemid": `${itemId}-title`, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
     })));
-};
-
-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, dataItemid, }) => {
     const [showMenu, toggleMenu] = React.useState(false);
@@ -900,50 +900,50 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
     return (React.createElement(MenuWrapper, { "data-itemid": `${baseId}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
         React.createElement(Button, { "data-itemid": `${baseId}-button`, disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
         showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, "data-itemid": `${baseId}-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 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 getBackgroundColor$3 = (props) => {
     if (props.$isWarningError) {
@@ -967,41 +967,41 @@ const getBorderColor$3 = (props) => {
         return Colors.GRAY.Hex;
     }
 };
-const Check$1 = styled.span `
-  height: 17px;
-  width: 17px;
-  min-width: 17px;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => getBorderColor$3(props)};
-  background-color: ${props => getBackgroundColor$3(props)};
-  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 Check$1 = styled.span `
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => getBorderColor$3(props)};
+  background-color: ${props => getBackgroundColor$3(props)};
+  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, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
@@ -1012,16 +1012,16 @@ const Checkbox = (_a) => {
         children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
-};
-
-const SelectAll = styled.div `
-  padding: 8px 12px;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  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, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll", "dataItemid"]);
@@ -1060,8 +1060,8 @@ const Checklist = (_a) => {
             const optionId = `${baseId}-option-${i}`;
             return (React.createElement(Checkbox, Object.assign({ "data-itemid": `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
-};
-
+};
+
 const getBackgroundColor$2 = (props) => {
     if (props.$isWarningError) {
         return '#fcf1c9';
@@ -1084,69 +1084,69 @@ const getBorderColor$2 = (props) => {
         return '#cccccc';
     }
 };
-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 => getBorderColor$2(props)};
-  background-color: ${props => getBackgroundColor$2(props)};
-  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 => getBorderColor$2(props)};
+  background-color: ${props => getBackgroundColor$2(props)};
+  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, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
@@ -1181,15 +1181,15 @@ const Select = (_a) => {
             filteredOptions &&
                 filteredOptions.map((option, i) => (React.createElement("option", { "data-itemid": `${baseId}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
         React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-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
@@ -1277,71 +1277,71 @@ onChange = () => { }, style, dataItemid, locale, }) => {
             React.createElement(Middle, { "data-itemid": `${baseId}-middle` },
                 React.createElement(Select, { "data-itemid": `${baseId}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: (locale === null || locale === void 0 ? void 0 : locale.SelectDay) ? locale === null || locale === void 0 ? void 0 : locale.SelectDay : 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
             React.createElement(Select, { "data-itemid": `${baseId}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: (locale === null || locale === void 0 ? void 0 : locale.SelectYear) ? locale === null || locale === void 0 ? void 0 : locale.SelectYear : '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$3 = 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: flex-end;
-  justify-content: center;
-  box-sizing: border-box;
-  gap: 10px;
-  flex-shrink: 0;
-  background: #fff;
-  flex-direction: column;
-`;
-const ButtonBarNote = styled.div `
-  display: flex;
-  gap: 10px;
+};
+
+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$3 = 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: flex-end;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fff;
+  flex-direction: column;
+`;
+const ButtonBarNote = styled.div `
+  display: flex;
+  gap: 10px;
 `;
 const Drawer = (_a) => {
     var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, dataItemid, bottomNotes } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "dataItemid", "bottomNotes"]);
@@ -1372,70 +1372,70 @@ const Drawer = (_a) => {
                     secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' }))) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : null))) : null),
         scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, "data-itemid": `${baseId}-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;
-  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;
-  min-height: 19px;
-`;
-const ValidationNew = styled.span `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  box-sizing: border-box;
-  align-items: center;
-  display: flex;
-`;
-const ValidationInnerIcon = styled.span `
-  padding-right: 5px;
-  display: flex;
+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;
+  min-height: 19px;
+`;
+const ValidationNew = styled.span `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  box-sizing: border-box;
+  align-items: center;
+  display: flex;
+`;
+const ValidationInnerIcon = styled.span `
+  padding-right: 5px;
+  display: flex;
 `;
 const ValidationInnerMessage = styled.span ``;
 const MessageWrapper = message => (React.createElement(ValidationNew, null,
@@ -1458,116 +1458,116 @@ const Field = (_a) => {
         React.createElement(Validation, { className: 'field-validation-wrapper', "data-itemid": `${baseId}-validation`, title: validationText }, validationText && isNewMessageType
             ? MessageWrapper(validationText)
             : validationText || '\u00A0')));
-};
-
-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, dataItemid }) => {
     const baseId = dataItemid || 'field-group';
     return (React.createElement(Wrapper$8, { "data-itemid": `${baseId}-wrapper` },
         React.createElement(Label$1, { "data-itemid": `${baseId}-label` }, label),
         React.createElement(Content$1, { "data-itemid": `${baseId}-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: ${props => (props.disabled ? 'not-allowed' : 'copy')};
-  opacity: ${props => (props.disabled ? 0.6 : 1)};
-  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+};
+
+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: ${props => (props.disabled ? 'not-allowed' : 'copy')};
+  opacity: ${props => (props.disabled ? 0.6 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
 `;
 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, disabled = false, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, dataItemid, }) => {
     const inputRef = React.useRef(null);
@@ -1687,8 +1687,8 @@ const FileUpload = ({ accept, onChange, disabled = false, onError, maxFiles = 10
                         React.createElement(Copy, { align: 'center', color: 'GRAY', "data-itemid": `${baseId}-message` }, message),
                         tooltipInfo && (React.createElement("span", { "data-itemid": `${baseId}-tooltip` },
                             React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
-};
-
+};
+
 const getAgesFromDob = (dob) => {
     let calculated_current_age = null;
     let calculated_nearest_age = null;
@@ -1788,79 +1788,769 @@ const formatAsMask = (number, mask) => {
         result = formatted_value;
     }
     return result;
-};
-
-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;
+};
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+var textMaskAddons = {exports: {}};
+
+(function (module, exports) {
+  !function (e, t) {
+    module.exports = t() ;
+  }(commonjsGlobal, function () {
+    return function (e) {
+      function t(r) {
+        if (n[r]) return n[r].exports;
+        var i = n[r] = {
+          exports: {},
+          id: r,
+          loaded: !1
+        };
+        return e[r].call(i.exports, i, i.exports, t), i.loaded = !0, i.exports;
+      }
+      var n = {};
+      return t.m = e, t.c = n, t.p = "", t(0);
+    }([function (e, t, n) {
+
+      function r(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var i = n(1);
+      Object.defineProperty(t, "createAutoCorrectedDatePipe", {
+        enumerable: !0,
+        get: function () {
+          return r(i).default;
+        }
+      });
+      var o = n(2);
+      Object.defineProperty(t, "createNumberMask", {
+        enumerable: !0,
+        get: function () {
+          return r(o).default;
+        }
+      });
+      var u = n(3);
+      Object.defineProperty(t, "emailMask", {
+        enumerable: !0,
+        get: function () {
+          return r(u).default;
+        }
+      });
+    }, function (e, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "mm dd yyyy",
+          t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+          n = t.minYear,
+          o = void 0 === n ? 1 : n,
+          u = t.maxYear,
+          a = void 0 === u ? 9999 : u,
+          c = e.split(/[^dmyHMS]+/).sort(function (e, t) {
+            return i.indexOf(e) - i.indexOf(t);
+          });
+        return function (t) {
+          var n = [],
+            i = {
+              dd: 31,
+              mm: 12,
+              yy: 99,
+              yyyy: a,
+              HH: 23,
+              MM: 59,
+              SS: 59
+            },
+            u = {
+              dd: 1,
+              mm: 1,
+              yy: 0,
+              yyyy: o,
+              HH: 0,
+              MM: 0,
+              SS: 0
+            },
+            l = t.split("");
+          c.forEach(function (t) {
+            var r = e.indexOf(t),
+              o = parseInt(i[t].toString().substr(0, 1), 10);
+            parseInt(l[r], 10) > o && (l[r + 1] = l[r], l[r] = 0, n.push(r));
+          });
+          var s = 0,
+            d = c.some(function (n) {
+              var c = e.indexOf(n),
+                l = n.length,
+                d = t.substr(c, l).replace(/\D/g, ""),
+                f = parseInt(d, 10);
+              "mm" === n && (s = f || 0);
+              var p = "dd" === n ? r[s] : i[n];
+              if ("yyyy" === n && (1 !== o || 9999 !== a)) {
+                var v = parseInt(i[n].toString().substring(0, d.length), 10),
+                  y = parseInt(u[n].toString().substring(0, d.length), 10);
+                return f < y || f > v;
+              }
+              return f > p || d.length === l && f < u[n];
+            });
+          return !d && {
+            value: l.join(""),
+            indexesOfPipedChars: n
+          };
+        };
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      }), t.default = n;
+      var r = [31, 31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+        i = ["yyyy", "yy", "mm", "dd", "HH", "MM", "SS"];
+    }, function (e, t) {
+
+      function n() {
+        function e() {
+          var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : a,
+            t = e.length;
+          if (e === a || e[0] === g[0] && 1 === t) return g.split(a).concat([v]).concat(h.split(a));
+          if (e === P && _) return g.split(a).concat(["0", P, v]).concat(h.split(a));
+          var n = e[0] === s && D;
+          n && (e = e.toString().substr(1));
+          var u = e.lastIndexOf(P),
+            c = u !== -1,
+            l = void 0,
+            m = void 0,
+            b = void 0;
+          if (e.slice($ * -1) === h && (e = e.slice(0, $ * -1)), c && (_ || I) ? (l = e.slice(e.slice(0, N) === g ? N : 0, u), m = e.slice(u + 1, t), m = r(m.replace(f, a))) : l = e.slice(0, N) === g ? e.slice(N) : e, L && ("undefined" == typeof L ? "undefined" : o(L)) === p) {
+            var O = "." === S ? "[.]" : "" + S,
+              M = (l.match(new RegExp(O, "g")) || []).length;
+            l = l.slice(0, L + M * V);
+          }
+          return l = l.replace(f, a), R || (l = l.replace(/^0+(0$|[^0])/, "$1")), l = x ? i(l, S) : l, b = r(l), (c && _ || I === !0) && (e[u - 1] !== P && b.push(y), b.push(P, y), m && (("undefined" == typeof C ? "undefined" : o(C)) === p && (m = m.slice(0, C)), b = b.concat(m)), I === !0 && e[u - 1] === P && b.push(v)), N > 0 && (b = g.split(a).concat(b)), n && (b.length === N && b.push(v), b = [d].concat(b)), h.length > 0 && (b = b.concat(h.split(a))), b;
+        }
+        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
+          n = t.prefix,
+          g = void 0 === n ? u : n,
+          m = t.suffix,
+          h = void 0 === m ? a : m,
+          b = t.includeThousandsSeparator,
+          x = void 0 === b || b,
+          O = t.thousandsSeparatorSymbol,
+          S = void 0 === O ? c : O,
+          M = t.allowDecimal,
+          _ = void 0 !== M && M,
+          j = t.decimalSymbol,
+          P = void 0 === j ? l : j,
+          w = t.decimalLimit,
+          C = void 0 === w ? 2 : w,
+          H = t.requireDecimal,
+          I = void 0 !== H && H,
+          k = t.allowNegative,
+          D = void 0 !== k && k,
+          E = t.allowLeadingZeroes,
+          R = void 0 !== E && E,
+          A = t.integerLimit,
+          L = void 0 === A ? null : A,
+          N = g && g.length || 0,
+          $ = h && h.length || 0,
+          V = S && S.length || 0;
+        return e.instanceOf = "createNumberMask", e;
+      }
+      function r(e) {
+        return e.split(a).map(function (e) {
+          return v.test(e) ? v : e;
+        });
+      }
+      function i(e, t) {
+        return e.replace(/\B(?=(\d{3})+(?!\d))/g, t);
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+        return typeof e;
+      } : function (e) {
+        return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+      };
+      t.default = n;
+      var u = "$",
+        a = "",
+        c = ",",
+        l = ".",
+        s = "-",
+        d = /-/,
+        f = /\D+/g,
+        p = "number",
+        v = /\d/,
+        y = "[]";
+    }, function (e, t, n) {
+
+      function r(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      function i(e, t) {
+        e = e.replace(O, v);
+        var n = t.placeholderChar,
+          r = t.currentCaretPosition,
+          i = e.indexOf(y),
+          s = e.lastIndexOf(p),
+          d = s < i ? -1 : s,
+          f = o(e, i + 1, y),
+          g = o(e, d - 1, p),
+          m = u(e, i),
+          h = a(e, i, d, n),
+          b = c(e, d, n, r);
+        m = l(m), h = l(h), b = l(b, !0);
+        var x = m.concat(f).concat(h).concat(g).concat(b);
+        return x;
+      }
+      function o(e, t, n) {
+        var r = [];
+        return e[t] === n ? r.push(n) : r.push(g, n), r.push(g), r;
+      }
+      function u(e, t) {
+        return t === -1 ? e : e.slice(0, t);
+      }
+      function a(e, t, n, r) {
+        var i = v;
+        return t !== -1 && (i = n === -1 ? e.slice(t + 1, e.length) : e.slice(t + 1, n)), i = i.replace(new RegExp("[\\s" + r + "]", h), v), i === y ? f : i.length < 1 ? m : i[i.length - 1] === p ? i.slice(0, i.length - 1) : i;
+      }
+      function c(e, t, n, r) {
+        var i = v;
+        return t !== -1 && (i = e.slice(t + 1, e.length)), i = i.replace(new RegExp("[\\s" + n + ".]", h), v), 0 === i.length ? e[t - 1] === p && r !== e.length ? f : v : i;
+      }
+      function l(e, t) {
+        return e.split(v).map(function (e) {
+          return e === m ? e : t ? x : b;
+        });
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      });
+      var s = n(4),
+        d = r(s),
+        f = "*",
+        p = ".",
+        v = "",
+        y = "@",
+        g = "[]",
+        m = " ",
+        h = "g",
+        b = /[^\s]/,
+        x = /[^.\s]/,
+        O = /\s/g;
+      t.default = {
+        mask: i,
+        pipe: d.default
+      };
+    }, function (e, t) {
+
+      function n(e, t) {
+        var n = t.currentCaretPosition,
+          o = t.rawValue,
+          f = t.previousConformedValue,
+          p = t.placeholderChar,
+          v = e;
+        v = r(v);
+        var y = v.indexOf(a),
+          g = null === o.match(new RegExp("[^@\\s." + p + "]"));
+        if (g) return u;
+        if (v.indexOf(l) !== -1 || y !== -1 && n !== y + 1 || o.indexOf(i) === -1 && f !== u && o.indexOf(c) !== -1) return !1;
+        var m = v.indexOf(i),
+          h = v.slice(m + 1, v.length);
+        return (h.match(d) || s).length > 1 && v.substr(-1) === c && n !== o.length && (v = v.slice(0, v.length - 1)), v;
+      }
+      function r(e) {
+        var t = 0;
+        return e.replace(o, function () {
+          return t++, 1 === t ? i : u;
+        });
+      }
+      Object.defineProperty(t, "__esModule", {
+        value: !0
+      }), t.default = n;
+      var i = "@",
+        o = /@/g,
+        u = "",
+        a = "@.",
+        c = ".",
+        l = "..",
+        s = [],
+        d = /\./g;
+    }]);
+  });
+})(textMaskAddons);
+var textMaskAddonsExports = textMaskAddons.exports;
+
+var textMaskCore = {exports: {}};
+
+(function (module, exports) {
+  !function (e, r) {
+    module.exports = r() ;
+  }(commonjsGlobal, function () {
+    return function (e) {
+      function r(n) {
+        if (t[n]) return t[n].exports;
+        var o = t[n] = {
+          exports: {},
+          id: n,
+          loaded: !1
+        };
+        return e[n].call(o.exports, o, o.exports, r), o.loaded = !0, o.exports;
+      }
+      var t = {};
+      return r.m = e, r.c = t, r.p = "", r(0);
+    }([function (e, r, t) {
+
+      function n(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var o = t(3);
+      Object.defineProperty(r, "conformToMask", {
+        enumerable: !0,
+        get: function () {
+          return n(o).default;
+        }
+      });
+      var i = t(2);
+      Object.defineProperty(r, "adjustCaretPosition", {
+        enumerable: !0,
+        get: function () {
+          return n(i).default;
+        }
+      });
+      var a = t(5);
+      Object.defineProperty(r, "createTextMaskInputElement", {
+        enumerable: !0,
+        get: function () {
+          return n(a).default;
+        }
+      });
+    }, function (e, r) {
+
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.placeholderChar = "_", r.strFunction = "function";
+    }, function (e, r) {
+
+      function t(e) {
+        var r = e.previousConformedValue,
+          t = void 0 === r ? o : r,
+          i = e.previousPlaceholder,
+          a = void 0 === i ? o : i,
+          u = e.currentCaretPosition,
+          l = void 0 === u ? 0 : u,
+          s = e.conformedValue,
+          f = e.rawValue,
+          d = e.placeholderChar,
+          c = e.placeholder,
+          p = e.indexesOfPipedChars,
+          v = void 0 === p ? n : p,
+          h = e.caretTrapIndexes,
+          m = void 0 === h ? n : h;
+        if (0 === l || !f.length) return 0;
+        var y = f.length,
+          g = t.length,
+          b = c.length,
+          C = s.length,
+          P = y - g,
+          k = P > 0,
+          x = 0 === g,
+          O = P > 1 && !k && !x;
+        if (O) return l;
+        var T = k && (t === s || s === c),
+          w = 0,
+          M = void 0,
+          S = void 0;
+        if (T) w = l - P;else {
+          var j = s.toLowerCase(),
+            _ = f.toLowerCase(),
+            V = _.substr(0, l).split(o),
+            A = V.filter(function (e) {
+              return j.indexOf(e) !== -1;
+            });
+          S = A[A.length - 1];
+          var N = a.substr(0, A.length).split(o).filter(function (e) {
+              return e !== d;
+            }).length,
+            E = c.substr(0, A.length).split(o).filter(function (e) {
+              return e !== d;
+            }).length,
+            F = E !== N,
+            R = void 0 !== a[A.length - 1] && void 0 !== c[A.length - 2] && a[A.length - 1] !== d && a[A.length - 1] !== c[A.length - 1] && a[A.length - 1] === c[A.length - 2];
+          !k && (F || R) && N > 0 && c.indexOf(S) > -1 && void 0 !== f[l] && (M = !0, S = f[l]);
+          for (var I = v.map(function (e) {
+              return j[e];
+            }), J = I.filter(function (e) {
+              return e === S;
+            }).length, W = A.filter(function (e) {
+              return e === S;
+            }).length, q = c.substr(0, c.indexOf(d)).split(o).filter(function (e, r) {
+              return e === S && f[r] !== e;
+            }).length, L = q + W + J + (M ? 1 : 0), z = 0, B = 0; B < C; B++) {
+            var D = j[B];
+            if (w = B + 1, D === S && z++, z >= L) break;
+          }
+        }
+        if (k) {
+          for (var G = w, H = w; H <= b; H++) if (c[H] === d && (G = H), c[H] === d || m.indexOf(H) !== -1 || H === b) return G;
+        } else if (M) {
+          for (var K = w - 1; K >= 0; K--) if (s[K] === S || m.indexOf(K) !== -1 || 0 === K) return K;
+        } else for (var Q = w; Q >= 0; Q--) if (c[Q - 1] === d || m.indexOf(Q) !== -1 || 0 === Q) return Q;
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.default = t;
+      var n = [],
+        o = "";
+    }, function (e, r, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : l,
+          r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : u,
+          t = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};
+        if (!(0, i.isArray)(r)) {
+          if (("undefined" == typeof r ? "undefined" : o(r)) !== a.strFunction) throw new Error("Text-mask:conformToMask; The mask property must be an array.");
+          r = r(e, t), r = (0, i.processCaretTraps)(r).maskWithoutCaretTraps;
+        }
+        var n = t.guide,
+          s = void 0 === n || n,
+          f = t.previousConformedValue,
+          d = void 0 === f ? l : f,
+          c = t.placeholderChar,
+          p = void 0 === c ? a.placeholderChar : c,
+          v = t.placeholder,
+          h = void 0 === v ? (0, i.convertMaskToPlaceholder)(r, p) : v,
+          m = t.currentCaretPosition,
+          y = t.keepCharPositions,
+          g = s === !1 && void 0 !== d,
+          b = e.length,
+          C = d.length,
+          P = h.length,
+          k = r.length,
+          x = b - C,
+          O = x > 0,
+          T = m + (O ? -x : 0),
+          w = T + Math.abs(x);
+        if (y === !0 && !O) {
+          for (var M = l, S = T; S < w; S++) h[S] === p && (M += p);
+          e = e.slice(0, T) + M + e.slice(T, b);
+        }
+        for (var j = e.split(l).map(function (e, r) {
+            return {
+              char: e,
+              isNew: r >= T && r < w
+            };
+          }), _ = b - 1; _ >= 0; _--) {
+          var V = j[_].char;
+          if (V !== p) {
+            var A = _ >= T && C === k;
+            V === h[A ? _ - x : _] && j.splice(_, 1);
+          }
+        }
+        var N = l,
+          E = !1;
+        e: for (var F = 0; F < P; F++) {
+          var R = h[F];
+          if (R === p) {
+            if (j.length > 0) for (; j.length > 0;) {
+              var I = j.shift(),
+                J = I.char,
+                W = I.isNew;
+              if (J === p && g !== !0) {
+                N += p;
+                continue e;
+              }
+              if (r[F].test(J)) {
+                if (y === !0 && W !== !1 && d !== l && s !== !1 && O) {
+                  for (var q = j.length, L = null, z = 0; z < q; z++) {
+                    var B = j[z];
+                    if (B.char !== p && B.isNew === !1) break;
+                    if (B.char === p) {
+                      L = z;
+                      break;
+                    }
+                  }
+                  null !== L ? (N += J, j.splice(L, 1)) : F--;
+                } else N += J;
+                continue e;
+              }
+              E = !0;
+            }
+            g === !1 && (N += h.substr(F, P));
+            break;
+          }
+          N += R;
+        }
+        if (g && O === !1) {
+          for (var D = null, G = 0; G < N.length; G++) h[G] === p && (D = G);
+          N = null !== D ? N.substr(0, D + 1) : l;
+        }
+        return {
+          conformedValue: N,
+          meta: {
+            someCharsRejected: E
+          }
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var o = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+        return typeof e;
+      } : function (e) {
+        return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+      };
+      r.default = n;
+      var i = t(4),
+        a = t(1),
+        u = [],
+        l = "";
+    }, function (e, r, t) {
+
+      function n() {
+        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : f,
+          r = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : s.placeholderChar;
+        if (!o(e)) throw new Error("Text-mask:convertMaskToPlaceholder; The mask property must be an array.");
+        if (e.indexOf(r) !== -1) throw new Error("Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.\n\n" + ("The placeholder character that was received is: " + JSON.stringify(r) + "\n\n") + ("The mask that was received is: " + JSON.stringify(e)));
+        return e.map(function (e) {
+          return e instanceof RegExp ? r : e;
+        }).join("");
+      }
+      function o(e) {
+        return Array.isArray && Array.isArray(e) || e instanceof Array;
+      }
+      function i(e) {
+        return "string" == typeof e || e instanceof String;
+      }
+      function a(e) {
+        return "number" == typeof e && void 0 === e.length && !isNaN(e);
+      }
+      function u(e) {
+        return "undefined" == typeof e || null === e;
+      }
+      function l(e) {
+        for (var r = [], t = void 0; t = e.indexOf(d), t !== -1;) r.push(t), e.splice(t, 1);
+        return {
+          maskWithoutCaretTraps: e,
+          indexes: r
+        };
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      }), r.convertMaskToPlaceholder = n, r.isArray = o, r.isString = i, r.isNumber = a, r.isNil = u, r.processCaretTraps = l;
+      var s = t(1),
+        f = [],
+        d = "[]";
+    }, function (e, r, t) {
+
+      function n(e) {
+        return e && e.__esModule ? e : {
+          default: e
+        };
+      }
+      function o(e) {
+        var r = {
+          previousConformedValue: void 0,
+          previousPlaceholder: void 0
+        };
+        return {
+          state: r,
+          update: function (t) {
+            var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : e,
+              o = n.inputElement,
+              s = n.mask,
+              d = n.guide,
+              m = n.pipe,
+              g = n.placeholderChar,
+              b = void 0 === g ? v.placeholderChar : g,
+              C = n.keepCharPositions,
+              P = void 0 !== C && C,
+              k = n.showMask,
+              x = void 0 !== k && k;
+            if ("undefined" == typeof t && (t = o.value), t !== r.previousConformedValue) {
+              ("undefined" == typeof s ? "undefined" : l(s)) === y && void 0 !== s.pipe && void 0 !== s.mask && (m = s.pipe, s = s.mask);
+              var O = void 0,
+                T = void 0;
+              if (s instanceof Array && (O = (0, p.convertMaskToPlaceholder)(s, b)), s !== !1) {
+                var w = a(t),
+                  M = o.selectionEnd,
+                  S = r.previousConformedValue,
+                  j = r.previousPlaceholder,
+                  _ = void 0;
+                if (("undefined" == typeof s ? "undefined" : l(s)) === v.strFunction) {
+                  if (T = s(w, {
+                    currentCaretPosition: M,
+                    previousConformedValue: S,
+                    placeholderChar: b
+                  }), T === !1) return;
+                  var V = (0, p.processCaretTraps)(T),
+                    A = V.maskWithoutCaretTraps,
+                    N = V.indexes;
+                  T = A, _ = N, O = (0, p.convertMaskToPlaceholder)(T, b);
+                } else T = s;
+                var E = {
+                    previousConformedValue: S,
+                    guide: d,
+                    placeholderChar: b,
+                    pipe: m,
+                    placeholder: O,
+                    currentCaretPosition: M,
+                    keepCharPositions: P
+                  },
+                  F = (0, c.default)(w, T, E),
+                  R = F.conformedValue,
+                  I = ("undefined" == typeof m ? "undefined" : l(m)) === v.strFunction,
+                  J = {};
+                I && (J = m(R, u({
+                  rawValue: w
+                }, E)), J === !1 ? J = {
+                  value: S,
+                  rejected: !0
+                } : (0, p.isString)(J) && (J = {
+                  value: J
+                }));
+                var W = I ? J.value : R,
+                  q = (0, f.default)({
+                    previousConformedValue: S,
+                    previousPlaceholder: j,
+                    conformedValue: W,
+                    placeholder: O,
+                    rawValue: w,
+                    currentCaretPosition: M,
+                    placeholderChar: b,
+                    indexesOfPipedChars: J.indexesOfPipedChars,
+                    caretTrapIndexes: _
+                  }),
+                  L = W === O && 0 === q,
+                  z = x ? O : h,
+                  B = L ? z : W;
+                r.previousConformedValue = B, r.previousPlaceholder = O, o.value !== B && (o.value = B, i(o, q));
+              }
+            }
+          }
+        };
+      }
+      function i(e, r) {
+        document.activeElement === e && (g ? b(function () {
+          return e.setSelectionRange(r, r, m);
+        }, 0) : e.setSelectionRange(r, r, m));
+      }
+      function a(e) {
+        if ((0, p.isString)(e)) return e;
+        if ((0, p.isNumber)(e)) return String(e);
+        if (void 0 === e || null === e) return h;
+        throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n " + JSON.stringify(e));
+      }
+      Object.defineProperty(r, "__esModule", {
+        value: !0
+      });
+      var u = Object.assign || function (e) {
+          for (var r = 1; r < arguments.length; r++) {
+            var t = arguments[r];
+            for (var n in t) Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+          }
+          return e;
+        },
+        l = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
+          return typeof e;
+        } : function (e) {
+          return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        };
+      r.default = o;
+      var s = t(2),
+        f = n(s),
+        d = t(3),
+        c = n(d),
+        p = t(4),
+        v = t(1),
+        h = "",
+        m = "none",
+        y = "object",
+        g = "undefined" != typeof navigator && /Android/i.test(navigator.userAgent),
+        b = "undefined" != typeof requestAnimationFrame ? requestAnimationFrame : setTimeout;
+    }]);
+  });
+})(textMaskCore);
+var textMaskCoreExports = textMaskCore.exports;
+
+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};
+    `
+    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 getBackgroundColor$1 = (props) => {
     if (props.$isWarningError) {
@@ -1884,76 +2574,76 @@ const getBorderColor$1 = (props) => {
         return '#cccccc';
     }
 };
-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 => getBorderColor$1(props)};
-  background-color: ${props => getBackgroundColor$1(props)};
-  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
-
-  &:focus-within {
-    border-color: ${props => props.$readOnly ? getBorderColor$1(props) : props.theme.PRIMARY_COLOR.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 => getBorderColor$1(props)};
+  background-color: ${props => getBackgroundColor$1(props)};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+
+  &:focus-within {
+    border-color: ${props => props.$readOnly ? getBorderColor$1(props) : 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, 
@@ -2003,6 +2693,7 @@ const Input$1 = (_a) => {
         if (type === 'number' && max && parseInt(newValue, 10) > parseInt(max, 10)) {
             e.target.value = `${max}`;
         }
+        handleInputMaskChange(newValue);
         setInternalValue(e.target.value);
         if (onChange)
             onChange(e);
@@ -2031,8 +2722,30 @@ const Input$1 = (_a) => {
         formatted_value = formatAsSsn(internalValue);
     }
     if (mask && !format) {
-        formatted_value = formatAsMask(internalValue, mask);
+        if (mask[0] !== '{') {
+            formatted_value = formatAsMask(internalValue, mask);
+        }
     }
+    const inputRef = innerRef ? innerRef : React.useRef(null);
+    const textMask = React.useRef(null); // Explicitly type the ref
+    const numberMask = mask && mask[0] === '{' ? textMaskAddonsExports.createNumberMask(JSON.parse(mask)) : textMaskAddonsExports.createNumberMask({});
+    React.useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (inputRef.current) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            textMask.current = textMaskCoreExports.createTextMaskInputElement({
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                inputElement: inputRef.current,
+                mask: numberMask,
+            });
+        }
+    }, [numberMask]);
+    const handleInputMaskChange = (value) => {
+        if (mask && !format && mask[0] === '{' && textMask.current) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+            textMask.current.update(value); // Apply the mask
+        }
+    };
     const baseId = dataItemid || 'input';
     return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, autoComplete: autoComplete, maxLength: maxLength, onBlur: readOnly
@@ -2083,7 +2796,7 @@ const Input$1 = (_a) => {
                 }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, onPaste: e => {
                 if (onPaste)
                     onPaste(e);
-            }, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
+            }, placeholder: placeholder, readOnly: readOnly, ref: inputRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
         loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
         showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
@@ -2101,145 +2814,145 @@ const Input$1 = (_a) => {
                     onSuggestedSelect();
                     setShowOptions(false);
                 } }, suggestedValue))))) : null));
-};
-
-const Wrapper$7 = styled.a `
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  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) => {
     var { children, onClick, small, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small", "dataItemid"]);
     const baseId = dataItemid || 'link';
     return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-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 = ({ dataItemid }) => {
     const baseId = dataItemid || 'loader';
     return (React.createElement(Spinner, { "data-itemid": `${baseId}-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', "data-itemid": `${baseId}-path`, fill: 'none', 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 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 StyledIconWWrapper = styled.div ``;
-const StyledIcon$2 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+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 Container$2 = styled.div ``;
-const ProgressBarFill = styled.div `
-  width: 110px;
-  height: 8px;
-  margin-top: 4px;
-  background-color: #e7e6e6;
-  border-radius: 16px;
-  position: relative;
-  overflow: hidden;
-
-  .progress-percentage {
-    position: absolute;
-    top: 55%;
-    left: ${props => props.$percent >= 83 ? 'calc(100% - 25px)' : `calc(${props.$percent}% + 10px)`};
-    transform: translate(-50%, -50%);
-    color: ${props => (props.$percent >= 83 ? '#fff' : '#757575')};
-    font-family: 'Roboto', Helvetica, Arial, sans-serif;
-    font-size: 8px;
-    font-weight: 600;
-    transition: left 0.5s ease-in-out;
-  }
-
-  .progress-bar-fill {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${props => props.$percent}%;
-    height: 100%;
-    background-color: #1aa836;
-    transition: width 0.5s ease-in-out;
-  }
+const ProgressBarFill = styled.div `
+  width: 110px;
+  height: 12px;
+  margin-top: 4px;
+  background-color: #e7e6e6;
+  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
+
+  .progress-percentage {
+    position: absolute;
+    top: 55%;
+    left: ${props => props.$percent >= 83 ? 'calc(100% - 25px)' : `calc(${props.$percent}% + 10px)`};
+    transform: translate(-50%, -50%);
+    color: ${props => (props.$percent >= 83 ? '#fff' : '#757575')};
+    font-family: 'Roboto', Helvetica, Arial, sans-serif;
+    font-size: 11px;
+    font-weight: 600;
+    transition: left 0.5s ease-in-out;
+  }
+
+  .progress-bar-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => props.$percent}%;
+    height: 100%;
+    background-color: #1aa836;
+    transition: width 0.5s ease-in-out;
+  }
 `;
 const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
     const baseId = dataItemid || 'progress-bar';
@@ -2258,78 +2971,78 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
                             step.percentComplete,
                             "%")))))));
     })));
-};
-
-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, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "dataItemid"]);
@@ -2372,21 +3085,21 @@ const Modal = (_a) => {
                     secondaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-secondary-button-container` },
                         React.createElement(Button, Object.assign({}, secondaryButton, { "data-itemid": `${baseId}-secondary-button`, format: secondaryButton.format || 'secondary' })))) : null,
                     primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { "data-itemid": `${baseId}-primary-button`, format: primaryButton.format || 'primary' }))) : 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;
@@ -2397,67 +3110,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, dataItemid } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style", "dataItemid"]);
@@ -2477,37 +3190,37 @@ const MultiSelect = (_a) => {
         showOptions ? (React.createElement(Options, { "data-itemid": `${baseId}-options` },
             React.createElement(Checklist, { "data-itemid": `${baseId}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? (React.createElement(Scrim, { "data-itemid": `${baseId}-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, dataItemid, }) => {
     const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, maxHeight = '', } = buttonMenu || {};
@@ -2530,13 +3243,13 @@ const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, dataIte
                 return (React.createElement(Button, Object.assign({}, buttonProps, { "data-itemid": `${actionId}-button`, key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { "data-itemid": `${baseId}-button-menu`, enableClick: enableClick, enableHover: enableHover, format: format, label: label, maxHeight: maxHeight, 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, dataItemid, type = null } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "dataItemid", "type"]);
@@ -2566,52 +3279,52 @@ const Pagination = (_a) => {
                 value: `${p}`,
             })), value: `${currentPage}` }),
         React.createElement(Button, { "data-itemid": `${baseId}-next-button`, disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true, type: type })));
-};
-
-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 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 getBackgroundColor = (props) => {
     if (props.$isWarningError) {
@@ -2635,36 +3348,36 @@ const getBorderColor = (props) => {
         return Colors.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 => getBorderColor(props)};
-  background-color: ${props => getBackgroundColor(props)};
-  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 Check = styled.span `
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => getBorderColor(props)};
+  background-color: ${props => getBackgroundColor(props)};
+  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, dataItemid, isInvalidRedBackground = false, isWarningError = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError"]);
@@ -2675,8 +3388,8 @@ const Radio = (_a) => {
         React.createElement(Label, { "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
-};
-
+};
+
 const RadioList = (_a) => {
     var { disabled, onChange, options, value, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value", "dataItemid"]);
     const baseId = dataItemid || 'radio-list';
@@ -2685,69 +3398,69 @@ const RadioList = (_a) => {
         const optionId = `${baseId}-option-${index}`;
         return (React.createElement(Radio, Object.assign({ checked: value === option.value, "data-itemid": optionId, disabled: disabled, key: option.value, 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) => {
@@ -2769,55 +3482,55 @@ const Table = (_a) => {
                 return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, "data-itemid": `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
             })));
         }))) : null));
-};
-
-const Wrapper$1 = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  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) => {
@@ -2831,29 +3544,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, dataItemid } = _a, accessibleProps = __rest(_a, ["onClick", "on", "dataItemid"]);
@@ -2863,32 +3576,32 @@ const Toggle = (_a) => {
         React.createElement(Handle, { "$on": on, "data-itemid": `${baseId}-handle` },
             React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, 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, dataItemid } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action", "dataItemid"]);
@@ -2900,54 +3613,54 @@ const ZeroState = (_a) => {
             React.createElement(Heading, { children: title, "data-itemid": `${baseId}-heading`, type: 'tertiary' }),
             description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', "data-itemid": `${baseId}-description`, type: 'default' }))),
         action && (React.createElement(Button, { children: action.children, "data-itemid": `${baseId}-button`, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
-};
-
-exports.Accordion = Accordion;
-exports.ActionDialog = ActionDialog;
-exports.Alert = Alert;
-exports.AppHeader = AppHeader;
-exports.AppMenu = AppMenu;
-exports.BulkActionBar = BulkActionBar;
-exports.Button = Button;
-exports.ButtonMenu = ButtonMenu;
-exports.Checkbox = Checkbox;
-exports.Checklist = Checklist;
-exports.Colors = Colors;
-exports.Copy = Copy;
-exports.DatePicker = DatePicker;
-exports.Drawer = Drawer;
-exports.EditableTheme = EditableTheme;
-exports.Field = Field;
-exports.FieldGroup = FieldGroup;
-exports.FileUpload = FileUpload;
-exports.FontSizes = FontSizes;
-exports.FontStyles = FontStyles;
-exports.Heading = Heading;
-exports.Input = Input$1;
-exports.Link = Link;
-exports.Loader = Loader;
-exports.Logo = Logo;
-exports.Modal = Modal;
-exports.MoreMenu = MoreMenu;
-exports.MultiSelect = MultiSelect;
-exports.PageHeader = PageHeader;
-exports.Pagination = Pagination;
-exports.ProgressBar = ProgressBar;
-exports.Radio = Radio;
-exports.RadioList = RadioList;
-exports.Select = Select;
-exports.Table = Table;
-exports.Tabs = Tabs;
-exports.Tag = Tag;
-exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
-exports.ZeroState = ZeroState;
-exports.formatAsMask = formatAsMask;
-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.formatAsMask = formatAsMask;
+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