@hexure/ui 1.13.52 → 1.13.54

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 `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
-const StyledIcon$6 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+};
+
+const Wrapper$h = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$6 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  margin: 0px 6px;
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 StyledIcon$6.defaultProps = { theme: EditableTheme };
 const positions = {
@@ -188,13 +188,13 @@ const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, d
     return (React.createElement(Wrapper$h, { "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$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
-const Buttons$1 = styled.div `
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 30px;
-  box-sizing: border-box;
+const Buttons$1 = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  box-sizing: border-box;
 `;
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, 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$3 = styled.header `
-  width: 100%;
-  display: flex;
-  padding: 20px;
-  box-sizing: border-box;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  background: '#fff';
-  justify-content: space-between;
-`;
-const LogoWrapper = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Image = styled.img `
-  height: 30px !important;
-  width: auto !important;
-`;
-const Buttons = styled.div `
-  display: flex;
-  flex-direction: row;
-  column-gap: 10px;
-  flex-direction: reverse;
+};
+
+const Container$3 = styled.header `
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  background: '#fff';
+  justify-content: space-between;
+`;
+const LogoWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Image = styled.img `
+  height: 30px !important;
+  width: auto !important;
+`;
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  flex-direction: reverse;
 `;
 const AppHeader = ({ logoUrl, buttons = [], dataItemid }) => {
     const baseId = dataItemid || 'app-header';
     return (React.createElement(Container$3, { "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;
@@ -669,79 +669,79 @@ const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataIte
                     "\u00A9 ",
                     new Date().getFullYear(),
                     " Hexure"))),
-            React.createElement(Button, { "data-itemid": `${baseId}-collapse-button`, icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, onClick: (e) => {
+            React.createElement(Button, { dataItemid: `${baseId}-collapse-button`, icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, onClick: (e) => {
                     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,85 +900,85 @@ 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 Check$1 = styled.span `
-  height: 17px;
-  width: 17px;
-  min-width: 17px;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 0px;
-    width: 7px;
-    height: 12px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label$3 = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${props => props.color || Colors.BLACK.Hex};
-  margin-left: 6px;
-  box-sizing: border-box;
+const Input$2 = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.1em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    background-color: ${Colors.PRIMARY.Hex};
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked:disabled + span {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+    border-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:checked + span:after {
+    display: block;
+  }
+`;
+const Check$1 = styled.span `
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 0px;
+    width: 7px;
+    height: 12px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label$3 = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${props => props.color || Colors.BLACK.Hex};
+  margin-left: 6px;
+  box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
     var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid"]);
@@ -989,16 +989,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"]);
@@ -1037,70 +1037,70 @@ 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 Wrapper$a = styled.div `
-  border-radius: 4px;
-  height: 40px;
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
-  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
-  box-sizing: border-box;
-  padding: 10px 0px;
-  display: flex;
-  align-items: center;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+};
+
+const Wrapper$a = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 Wrapper$a.defaultProps = { theme: EditableTheme };
-const Trigger$1 = styled.select `
-  appearance: none;
-  box-shadow: none;
-  outline: none;
-  border: none;
-  color: ${Colors.BLACK.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 3.1em;
-  background-color: transparent;
-  background-image: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0px 30px 0px 10px;
-  box-sizing: border-box;
-  position: relative;
-  z-index: 2;
-`;
-const IconWrapper$2 = styled(Icon) `
-  position: absolute;
-  right: 9px;
-  z-index: 1;
-`;
-const SearchInput$1 = styled.input `
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  z-index: 999;
-  width: 90%;
-  height: 30px;
-  border: none;
-  outline: none;
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  white-space: nowrap;
+const Trigger$1 = styled.select `
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: ${Colors.BLACK.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 3.1em;
+  background-color: transparent;
+  background-image: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+`;
+const IconWrapper$2 = styled(Icon) `
+  position: absolute;
+  right: 9px;
+  z-index: 1;
+`;
+const SearchInput$1 = styled.input `
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  z-index: 999;
+  width: 90%;
+  height: 30px;
+  border: none;
+  outline: none;
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 const Select = (_a) => {
     var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "dataItemid"]);
@@ -1135,15 +1135,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
@@ -1231,66 +1231,66 @@ 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$2 = styled.div `
-  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
-  min-width: 400px;
-  width: ${({ $width }) => $width || '400px'};
-  overflow: hidden;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  outline: none;
-  border: none;
-  position: ${({ $position }) => $position};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  background: #fff;
-`;
-const Header$2 = styled.div `
-  padding: 30px 20px;
-  display: flex;
-  align-items: flex-start;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  background: #fff;
-`;
-const Close$1 = styled.div `
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: pointer;
-`;
-const ContentWrapper$1 = styled.div `
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  flex: 1;
-  background: #fff;
-`;
-const ButtonBar$1 = styled.div `
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  gap: 10px;
-  flex-shrink: 0;
-  background: #fff;
+};
+
+const Scrim$1 = styled.div `
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
+  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
+`;
+const Container$2 = styled.div `
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
+  min-width: 400px;
+  width: ${({ $width }) => $width || '400px'};
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: #fff;
+`;
+const Header$2 = styled.div `
+  padding: 30px 20px;
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: #fff;
+`;
+const Close$1 = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const ContentWrapper$1 = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex: 1;
+  background: #fff;
+`;
+const ButtonBar$1 = styled.div `
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fff;
 `;
 const Drawer = (_a) => {
     var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "dataItemid"]);
@@ -1319,70 +1319,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,
@@ -1405,116 +1405,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);
@@ -1634,8 +1634,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;
@@ -1708,154 +1708,181 @@ const formatAsSsn = (number) => {
         formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
-};
-
-const StyledInput = styled.input `
-  border: none !important;
-  background: none !important;
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.28em;
+};
+const formatAsMask = (number, mask) => {
+    const formatted_value = `${number}`.replace(/[^0-9.]/g, '');
+    let result = '';
+    const size = formatted_value.length;
+    let valueIndex = 0;
+    if (size > 0) {
+        // Loop through each character of the mask
+        for (let i = 0; i < mask.length; i++) {
+            // Only replace numbers (mask pattern) with the value
+            if (mask[i].match(/\d/)) {
+                // Check if there are still characters left in value to add
+                if (valueIndex < size) {
+                    result += formatted_value[valueIndex];
+                    valueIndex++;
+                }
+            }
+            else if (valueIndex < size) {
+                // Add non-digit characters (like dashes or spaces) directly to the result
+                result += mask[i];
+            }
+        }
+    }
+    else {
+        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;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  height: ${props => props.$height || 'auto'};
-  padding: 10px;
-  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-`;
-const StyledTextArea = styled.textarea `
-  border: none !important;
-  background: none !important;
-  overflow-y: scroll !important;
-  font-size: 14px;
-  font-weight: 400;
-  height: ${props => props.$height || 'auto'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 1.28em;
+    : Colors.BLACK.Hex};
+  position: relative;
+  height: ${props => props.$height || 'auto'};
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+`;
+const StyledTextArea = styled.textarea `
+  border: none !important;
+  background: none !important;
+  overflow-y: scroll !important;
+  font-size: 14px;
+  font-weight: 400;
+  height: ${props => props.$height || 'auto'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  padding: 10px;
-  opacity: 1;
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+    : Colors.BLACK.Hex};
+  position: relative;
+  padding: 10px;
+  opacity: 1;
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
   ${({ $readOnly }) => $readOnly &&
-    `
-    background-color: #f0f0f0;
-    color: #999999;
-    overflow-y: scroll;
-  `}
-`;
-const StyledSuffix = styled.div `
-  box-sizing: border-box;
-  border-radius: 0px 4px 4px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  height: auto;
-  background: #f5f5f5;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  border-color: #cccccc;
-  font-family: ${FontStyles.DEFAULT};
-  font-style: normal;
-  font-weight: 400;
-  font-size: ${FontSizes.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-`;
-const StyledWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+    `
+    background-color: #f0f0f0;
+    color: #999999;
+    overflow-y: scroll;
+  `}
+`;
+const StyledSuffix = styled.div `
+  box-sizing: border-box;
+  border-radius: 0px 4px 4px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  height: auto;
+  background: #f5f5f5;
+  border-width: 0px 0px 0px 1px;
+  border-style: solid;
+  border-color: #cccccc;
+  font-family: ${FontStyles.DEFAULT};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${FontSizes.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+`;
+const StyledWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const SuggestedValues = styled.div `
-  background: #fff;
-  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 0px 0px 4px 4px;
-  border-style: solid;
-  border-top: none;
-  border-width: 1px;
-  left: -1px;
-  position: absolute;
-  right: -1px;
-  top: 39px;
-  z-index: 9999;
-  max-height: 220px;
-  overflow: auto;
+const SuggestedValues = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: 39px;
+  z-index: 9999;
+  max-height: 220px;
+  overflow: auto;
 `;
 SuggestedValues.defaultProps = { theme: EditableTheme };
-const SuggestedSummary = styled.div `
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 18px;
-  padding: 10px 12px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fff;
-  z-index: 1;
-  position: sticky;
-  top: 0px;
-`;
-const SuggestedValue = styled.div `
-  cursor: pointer;
-  padding: 8px 12px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${Colors.BLACK.Hex};
-
-  &:hover {
-    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
-  }
+const SuggestedSummary = styled.div `
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 18px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  z-index: 1;
+  position: sticky;
+  top: 0px;
+`;
+const SuggestedValue = styled.div `
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+
+  &:hover {
+    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
+  }
 `;
 SuggestedValue.defaultProps = { theme: EditableTheme };
-const CharacterCount = styled.div `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.SMALL};
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  padding: 10px;
+const CharacterCount = styled.div `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.SMALL};
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  padding: 10px;
 `;
-const Loader$1 = styled.div `
-  padding: 0px 10px;
-  display: flex;
-  align-items: center;
+const Loader$1 = styled.div `
+  padding: 0px 10px;
+  display: flex;
+  align-items: center;
 `;
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex, isAutoComplete = false, dataItemid, mask } = _a, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "loading", "max", "maxLength", "min", "onBlur", "onChange", "onFocus", "onKeyDown", "onSuggestedSelect", "placeholder", "readOnly", "showCharCount", "step", "style", "suggestedValues", "showErrorTextColor", "type", "value", "innerRef", "tabIndex", "isAutoComplete", "dataItemid", "mask"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1927,8 +1954,11 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(internalValue);
     }
+    if (mask && !format) {
+        formatted_value = formatAsMask(internalValue, mask);
+    }
     const baseId = dataItemid || 'input';
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper` },
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$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, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1948,7 +1978,7 @@ const Input$1 = (_a) => {
             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` },
             internalValue.length,
-            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper` },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper`, style: style },
         React.createElement(StyledInput, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, max: max, maxLength: maxLength, min: min, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1983,145 +2013,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 StyledIcon$2 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+};
+
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StyledIcon$2 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$2.defaultProps = { theme: EditableTheme };
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 `;
 StepIndicator.defaultProps = { theme: EditableTheme };
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
-const StepLine = styled.div `
-  height: 2px;
-  flex-grow: 1;
-  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
-  transition: background-color 0.5s ease-in-out;
-`;
-const ProgressBarFill = styled.div `
-  width: 110px;
-  height: 8px;
-  margin-top: 4px;
-  background-color: #e7e6e6;
-  border-radius: 16px;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
-    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;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${props => props.$percent}%;
-    height: 100%;
-    background-color: #1aa836;
-    transition: width 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 ProgressBarFill = styled.div `
+  width: 110px;
+  height: 8px;
+  margin-top: 4px;
+  background-color: #e7e6e6;
+  border-radius: 16px;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '${props => (props.$percent === 0 ? '0' : props.$percent)}%';
+    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;
+  }
+
+  &::before {
+    content: '';
+    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';
@@ -2135,78 +2165,78 @@ const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
                     step.label,
                     step.percentComplete !== undefined && (React.createElement(ProgressBarFill, { "$percent": step.percentComplete, "data-itemid": `${stepId}-fill` }))))));
     })));
-};
-
-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"]);
@@ -2249,21 +2279,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;
@@ -2274,67 +2304,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"]);
@@ -2354,37 +2384,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 || {};
@@ -2407,13 +2437,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"]);
@@ -2443,82 +2473,82 @@ 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 Check = styled.span `
-  height: 17px;
-  width: 17px;
-  border-radius: 50%;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  color: ${Colors.BLACK.Hex};
-  line-height: 1.6em;
-  margin-left: 6px;
+const Input = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked + span:after {
+    background-color: ${Colors.PRIMARY.Hex};
+    display: block;
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:disabled + span:after {
+    background-color: #fff;
+  }
+  &:checked:disabled + span:after {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+`;
+const Check = styled.span `
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  margin-left: 6px;
 `;
 const Radio = (_a) => {
     var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid"]);
@@ -2529,8 +2559,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';
@@ -2539,69 +2569,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) => {
@@ -2623,55 +2653,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) => {
@@ -2685,29 +2715,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"]);
@@ -2717,32 +2747,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"]);
@@ -2754,53 +2784,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.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