@hexure/ui 1.13.42 → 1.13.44

package/dist/cjs/index.js

@@ -107,13 +107,13 @@ const Title$2 = styled.div `
   box-sizing: border-box;
 `;
 const Accordion = (_a) => {
-    var { id, title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["id", "title", "children", "open", "onClick"]);
-    const baseId = id || 'accordion';
+    var { dataItemid, title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["dataItemid", "title", "children", "open", "onClick"]);
+    const baseId = dataItemid || 'accordion';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header$3, Object.assign({ id: `${baseId}-header`, onClick: onClick }, accessibleProps),
-            React.createElement(Title$2, { id: `${baseId}-title` }, title),
-            React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${baseId}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
-        open ? React.createElement("div", { id: `${baseId}-content` }, children) : null));
+        React.createElement(Header$3, Object.assign({ "data-itemid": `${baseId}-header`, onClick: onClick }, accessibleProps),
+            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 `
@@ -131,9 +131,9 @@ const StyledComponent = styled.p `
   box-sizing: border-box;
 `;
 const Copy = (_a) => {
-    var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', id } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color", "id"]);
-    const baseId = id || 'copy';
-    return (React.createElement(StyledComponent, Object.assign({ "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type, id: `${baseId}-styled-component` }, accessibleProps), children));
+    var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', dataItemid } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color", "dataItemid"]);
+    const baseId = dataItemid || 'copy';
+    return (React.createElement(StyledComponent, Object.assign({ "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type, "data-itemid": `${baseId}-styled-component` }, accessibleProps), children));
 };
 Copy.defaultProps = {
     type: 'default',
@@ -182,12 +182,12 @@ const positions = {
 };
 const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', borderRadius: '4px', borderWidth: '1px', borderStyle: 'solid', borderColor: props.theme.PRIMARY_COLOR.Hex, background: '#ffffff', boxShadow: '0px 5px 30px -10px rgba(0, 0, 0, 0.5)', width: props.$width || '240px', padding: '10px 12px', zIndex: 9999 }, positions[props.$position])));
 Content$3.defaultProps = { theme: EditableTheme };
-const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, id, }) => {
+const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, dataItemid, }) => {
     const [show_content, toggleContent] = React.useState(false);
-    const baseId = id || 'tooltip';
-    return (React.createElement(Wrapper$h, { id: `${baseId}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
-        trigger || React.createElement(StyledIcon$6, { id: `${baseId}-icon`, path: js.mdiInformationOutline }),
-        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${baseId}-content` }, children && (React.createElement(Copy, { id: `${baseId}-copy`, type: 'small' }, children)))) : null));
+    const baseId = dataItemid || 'tooltip';
+    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 `
@@ -267,7 +267,7 @@ const Badge$1 = styled.span `
   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 = '', id } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "id"]);
+    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '', dataItemid } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title", "dataItemid"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const has_children = children && children.length > 0;
     const button_type_mapping = {
@@ -301,12 +301,12 @@ const Button = (_a) => {
         },
     };
     const format_styles = button_type_mapping[format];
-    const baseId = id || 'button';
-    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps, { id: `${baseId}-styled-button` }),
-        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, id: `${baseId}-label` }, children)) : null,
-        icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, id: `${baseId}-icon` },
-            React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', id: `${baseId}-icon-svg`, path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
-        badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small, id: `${baseId}-badge` }, badge)) : null));
+    const baseId = dataItemid || 'button';
+    const button_view = (React.createElement(StyledButton, Object.assign({ "$bg_color": format_styles.background_color, "$border_color": format_styles.border_color, "$disabled": disabled || loading, "$hasChildren": !!has_children, "$iconPosition": iconPosition, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps, { "data-itemid": `${baseId}-styled-button` }),
+        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, "data-itemid": `${baseId}-label` }, children)) : null,
+        icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, "data-itemid": `${baseId}-icon` },
+            React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', "data-itemid": `${baseId}-icon-svg`, path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
+        badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small, "data-itemid": `${baseId}-badge` }, badge)) : null));
     if (toolTip && Object.keys(toolTip).length) {
         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));
     }
@@ -344,17 +344,17 @@ const H3 = styled.h3 `
   box-sizing: border-box;
 `;
 const Heading = (_a) => {
-    var { bold, children, margin, padding, type, id } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "id"]);
-    const baseId = id || 'heading';
+    var { bold, children, margin, padding, type, dataItemid } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type", "dataItemid"]);
+    const baseId = dataItemid || 'heading';
     switch (type) {
         case 'secondary': {
-            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${baseId}-h2` }), children));
+            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h2` }), children));
         }
         case 'tertiary': {
-            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${baseId}-h3` }), children));
+            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h3` }), children));
         }
         default: {
-            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${baseId}-h1` }), children));
+            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { "data-itemid": `${baseId}-h1` }), children));
         }
     }
 };
@@ -386,16 +386,16 @@ const Buttons$1 = styled.div `
   box-sizing: border-box;
 `;
 const ActionDialog = (_a) => {
-    var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, id } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "id"]);
-    const baseId = id || 'action-dialog';
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Container$4, { "$customStyle": style, id: `${baseId}-container`, open: true },
-            title ? (React.createElement(Heading, { id: `${baseId}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
-            description ? (React.createElement(Copy, { align: 'center', id: `${baseId}-description` }, description)) : null,
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, { id: `${baseId}-buttons` },
-                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${baseId}-tertiary-button` }))) : null,
-                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` }))) : null,
-                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null)));
+    var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {}, dataItemid } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style", "dataItemid"]);
+    const baseId = dataItemid || 'action-dialog';
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Container$4, { "$customStyle": style, "data-itemid": `${baseId}-container`, open: true },
+            title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
+            description ? (React.createElement(Copy, { align: 'center', "data-itemid": `${baseId}-description` }, description)) : null,
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, { "data-itemid": `${baseId}-buttons` },
+                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 `
@@ -422,9 +422,9 @@ const Action$1 = styled.div `
 `;
 Action$1.defaultProps = { theme: EditableTheme };
 const Alert = (_a) => {
-    var { action, type = 'info', title, description, small = false, id } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small", "id"]);
+    var { action, type = 'info', title, description, small = false, dataItemid } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small", "dataItemid"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
-    const baseId = id || 'alert';
+    const baseId = dataItemid || 'alert';
     const type_mapping = {
         info: {
             color: theme.PRIMARY_COLOR.Hex,
@@ -443,12 +443,12 @@ const Alert = (_a) => {
             icon: js.mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, id: `${baseId}-wrapper`, style: { borderLeftColor: type_mapping[type].color } }),
-        React.createElement(StyledIcon$4, { color: type_mapping[type].color, id: `${baseId}-icon`, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
-        React.createElement("div", { id: `${baseId}-content` },
-            title && !small ? (React.createElement(Heading, { bold: true, id: `${baseId}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
-            description ? (React.createElement(Copy, { id: `${baseId}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
-            action && !small ? (React.createElement(Action$1, { id: `${baseId}-action`, onClick: action.onClick }, action.label)) : null)));
+    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, "data-itemid": `${baseId}-wrapper`, style: { borderLeftColor: type_mapping[type].color } }),
+        React.createElement(StyledIcon$4, { color: type_mapping[type].color, "data-itemid": `${baseId}-icon`, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
+        React.createElement("div", { "data-itemid": `${baseId}-content` },
+            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 = {
@@ -474,23 +474,23 @@ const colorMapping = {
     },
 };
 const Logo = (_a) => {
-    var { type = 'standard_full', height = '50px', id } = _a, accessibleProps = __rest(_a, ["type", "height", "id"]);
+    var { type = 'standard_full', height = '50px', dataItemid } = _a, accessibleProps = __rest(_a, ["type", "height", "dataItemid"]);
     const type_parts = type.split('_');
-    const baseId = id || 'logo';
+    const baseId = dataItemid || 'logo';
     switch (type_parts[0]) {
         case 'mark':
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps, { id: `${baseId}-svg` }),
-                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', fill: type_parts[1], id: `${baseId}-path` })));
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, viewBox: '0 0 58 51', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps, { "data-itemid": `${baseId}-svg` }),
+                React.createElement("path", { d: 'M43.9348 -1.14441e-05H13.3724L0 25.2376L7.27148 38.0136L14.1215 50.0487H43.1856L57.3077 25.2376L43.9348 -1.14441e-05ZM38.206 9.49903L46.459 25.0743L37.6507 40.5497H19.6567L15.5417 33.3199L10.8487 25.0743L19.1013 9.49903H38.206Z', "data-itemid": `${baseId}-path`, fill: type_parts[1] })));
         default:
-            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps, { id: `${baseId}-svg` }),
-                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', fill: colorMapping[type_parts[1]].fill_3, id: `${baseId}-path-1` }),
-                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-2` }),
-                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-3` }),
-                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-4` }),
-                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', fill: colorMapping[type_parts[1]].fill_2, id: `${baseId}-path-5` }),
-                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-6` }),
-                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-7` }),
-                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1, id: `${baseId}-path-8` })));
+            return (React.createElement("svg", Object.assign({ fill: 'none', height: height, preserveAspectRatio: 'xMidYMid meet', viewBox: '0 0 236 50', width: '100%', xmlns: 'http://www.w3.org/2000/svg' }, accessibleProps, { "data-itemid": `${baseId}-svg` }),
+                React.createElement("path", { d: 'M230.794 29.59H219.306L214.279 39.0907L217.012 43.9001L219.587 48.4308H230.512L235.821 39.0907L230.794 29.59V29.59ZM228.641 33.1659L231.743 39.0292L228.432 44.8549H221.668L220.121 42.1332L218.356 39.0292L221.459 33.1659H228.641Z', "data-itemid": `${baseId}-path-1`, fill: colorMapping[type_parts[1]].fill_3 }),
+                React.createElement("path", { d: 'M211.662 42.6033L199.206 42.6319C196.339 42.6319 193.862 41.6095 191.846 39.5923C189.828 37.5755 188.805 35.0985 188.805 32.2321C188.805 29.3656 189.828 26.8886 191.846 24.8718C193.848 22.8332 196.325 21.7975 199.206 21.7975C202.072 21.7975 204.549 22.8199 206.566 24.8374C207.613 25.8847 208.391 27.093 208.944 28.5312L209.253 29.3327H197.87L196.325 32.2579L197.921 35.0969H211.458L215.015 28.6192C214.296 25.5702 212.835 22.9293 210.672 20.7657C207.531 17.6257 203.674 16.0333 199.206 16.0333C194.737 16.0333 190.88 17.6257 187.739 20.7657C184.555 23.9501 183.007 27.7011 183.007 32.2321C183.007 36.7001 184.599 40.5577 187.739 43.6981C190.88 46.8384 194.737 48.4308 199.206 48.4308H210.095L214.745 48.3297L211.662 42.6033', "data-itemid": `${baseId}-path-2`, fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M160.945 19.133L158.826 20.8384C155.734 23.9359 154.141 27.8058 154.141 32.2967L154.141 47.7903L156.985 49.407L159.939 47.8778L159.94 32.2967C159.94 29.6632 160.778 27.3706 162.432 25.4846C162.615 25.2739 162.811 25.0666 163.018 24.8639C163.074 24.8155 164.138 24.0061 164.811 23.5592C166.321 22.5576 168.076 21.9876 170.024 21.8632L170.166 21.8621C172.923 21.8621 175.32 22.7325 177.301 24.4494L180.146 23.0088L180.246 19.3426C177.44 17.1664 174.132 16.0633 170.408 16.0633C166.909 16.0633 163.725 17.0962 160.945 19.133', "data-itemid": `${baseId}-path-3`, fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M131.392 50C135.884 50 139.753 48.4076 142.893 45.2676C146.033 42.1269 147.626 38.2581 147.626 33.7668V18.1124L144.782 16.4964L141.827 18.0251V33.7668C141.827 36.6932 140.792 39.1936 138.745 41.2034C136.684 43.1927 134.128 44.2013 131.151 44.2013L131.01 44.2002H131.81L131.669 44.2013C128.692 44.2013 126.136 43.1927 124.074 41.2034C122.028 39.1936 120.993 36.6932 120.993 33.7668V18.0251L118.038 16.4964L115.194 18.1124V33.7668C115.194 38.2581 116.786 42.1269 119.926 45.2676C123.067 48.4076 126.936 50 131.427 50H131.392Z', "data-itemid": `${baseId}-path-4`, fill: colorMapping[type_parts[1]].fill_1 }),
+                React.createElement("path", { d: 'M93.8353 26.9933L97.8468 31.2421L100.788 28.1521L107.791 20.4534L106.753 17.3567L103.584 16.5678', "data-itemid": `${baseId}-path-5`, fill: colorMapping[type_parts[1]].fill_2 }),
+                React.createElement("path", { d: 'M80.7509 16.5677L77.5821 17.3564L76.5441 20.4534L83.5514 28.1568L88.1484 32.9862L76.5412 45.2133L77.5187 48.3175C79.525 48.9571 80.359 49.1805 80.6985 49.2584L92.195 37.238L103.636 49.2584C103.976 49.1805 104.81 48.9571 106.817 48.3175L107.794 45.2133L80.7509 16.5677', "data-itemid": `${baseId}-path-6`, fill: colorMapping[type_parts[1]].fill_1 }),
+                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 })));
     }
 };
 
@@ -517,11 +517,11 @@ const Buttons = styled.div `
   column-gap: 10px;
   flex-direction: reverse;
 `;
-const AppHeader = ({ logoUrl, buttons = [], id }) => {
-    const baseId = id || 'app-header';
-    return (React.createElement(Container$3, { id: `${baseId}-container` },
-        React.createElement(LogoWrapper, { id: `${baseId}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${baseId}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${baseId}-default-logo` }))),
-        React.createElement(Buttons, { id: `${baseId}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${baseId}-button-${i}` })))))));
+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 `
@@ -550,13 +550,13 @@ const Remove$1 = styled.div `
   align-items: center;
 `;
 const Tag = (_a) => {
-    var { children, color = 'PRIMARY', removable, onClick, id } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "id"]);
-    const baseId = id || 'tag';
-    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Content$2, { id: `${baseId}-content` },
-            React.createElement(Label$4, { "$color": color, id: `${baseId}-label` }, children),
-            removable ? (React.createElement(Remove$1, { id: `${baseId}-remove` },
-                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${baseId}-icon`, path: js.mdiClose, size: '15px' }))) : null)));
+    var { children, color = 'PRIMARY', removable, onClick, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick", "dataItemid"]);
+    const baseId = dataItemid || 'tag';
+    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Content$2, { "data-itemid": `${baseId}-content` },
+            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 `
@@ -646,30 +646,30 @@ const FooterInfo = styled.div `
 const SidebarMenuContainer = styled.div `
   flex-grow: 1;
 `;
-const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', id, }) => {
+const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px', dataItemid, }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const [collapsed, toggleCollapse] = React.useState(isCollapsed);
-    const baseId = id || 'app-menu';
-    return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth, id: `${baseId}-sidebar-container` },
-        React.createElement(SidebarMenuContainer, { id: `${baseId}-sidebar-menu-container` }, menu.map((nav_item, navIndex) => {
+    const baseId = dataItemid || 'app-menu';
+    return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth, "data-itemid": `${baseId}-sidebar-container` },
+        React.createElement(SidebarMenuContainer, { "data-itemid": `${baseId}-sidebar-menu-container` }, menu.map((nav_item, navIndex) => {
             const navItemId = `${baseId}-nav-item-${navIndex}`;
             return (React.createElement(React.Fragment, { key: navItemId },
-                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, id: `${navItemId}-menu-wrapper`, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '' },
-                    React.createElement(MenuIcon, { "$active": !!nav_item.is_active, id: `${navItemId}-menu-icon`, path: nav_item.icon }),
-                    collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR, id: `${navItemId}-menu-label` }, nav_item.label))),
-                nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, { id: `${navItemId}-sub-menu` }, nav_item.menu.map((menu_item, menuIndex) => {
+                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-wrapper`, onClick: nav_item.onClick, title: collapsed ? (nav_item === null || nav_item === void 0 ? void 0 : nav_item.title) || nav_item.label : '' },
+                    React.createElement(MenuIcon, { "$active": !!nav_item.is_active, "data-itemid": `${navItemId}-menu-icon`, path: nav_item.icon }),
+                    collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${navItemId}-menu-label` }, nav_item.label))),
+                nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, { "data-itemid": `${navItemId}-sub-menu` }, nav_item.menu.map((menu_item, menuIndex) => {
                     const menuItemId = `${navItemId}-menu-item-${menuIndex}`;
-                    return (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, id: `${menuItemId}-sub-menu-item`, key: menuItemId, onClick: menu_item.onClick }, menu_item.label));
+                    return (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, "data-itemid": `${menuItemId}-sub-menu-item`, key: menuItemId, onClick: menu_item.onClick }, menu_item.label));
                 }))) : null));
         })),
-        React.createElement(Footer, { id: `${baseId}-footer` },
-            collapsed ? null : (React.createElement(FooterInfo, { id: `${baseId}-footer-info` },
-                footerTag ? React.createElement(Tag, { id: `${baseId}-footer-tag` }, footerTag) : null,
-                React.createElement(Copy, { id: `${baseId}-footer-copy`, margin: '8px 0 0 0', type: 'small' },
+        React.createElement(Footer, { "data-itemid": `${baseId}-footer` },
+            collapsed ? null : (React.createElement(FooterInfo, { "data-itemid": `${baseId}-footer-info` },
+                footerTag ? React.createElement(Tag, { "data-itemid": `${baseId}-footer-tag` }, footerTag) : null,
+                React.createElement(Copy, { "data-itemid": `${baseId}-footer-copy`, margin: '8px 0 0 0', type: 'small' },
                     "\u00A9 ",
                     new Date().getFullYear(),
                     " Hexure"))),
-            React.createElement(Button, { icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, id: `${baseId}-collapse-button`, onClick: (e) => {
+            React.createElement(Button, { "data-itemid": `${baseId}-collapse-button`, icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, onClick: (e) => {
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true }))));
@@ -744,19 +744,19 @@ const ErrorMsg = styled.span `
   margin-left: 8px;
 `;
 const BulkActionBar = (_a) => {
-    var { actions = [], errorMsg, onClear, selectedCount = 0, id } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "id"]);
-    const baseId = id || 'bulk-action-bar';
-    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Left, { id: `${baseId}-left` },
-            React.createElement(Info$1, { id: `${baseId}-info` },
-                React.createElement(Selected, { id: `${baseId}-selected` },
+    var { actions = [], errorMsg, onClear, selectedCount = 0, dataItemid } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount", "dataItemid"]);
+    const baseId = dataItemid || 'bulk-action-bar';
+    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Left, { "data-itemid": `${baseId}-left` },
+            React.createElement(Info$1, { "data-itemid": `${baseId}-info` },
+                React.createElement(Selected, { "data-itemid": `${baseId}-selected` },
                     selectedCount,
                     " Selected"),
-                onClear ? (React.createElement(Clear, { id: `${baseId}-clear`, onClick: onClear }, "Clear")) : null),
-            React.createElement(Actions$1, { id: `${baseId}-actions` }, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { id: `${baseId}-action-${i}`, key: i, small: true })))))),
-        errorMsg ? (React.createElement(Error$1, { id: `${baseId}-error` },
-            React.createElement(Icon, { color: Colors.RED.Hex, id: `${baseId}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
-            React.createElement(ErrorMsg, { id: `${baseId}-error-msg` }, errorMsg))) : null));
+                onClear ? (React.createElement(Clear, { "data-itemid": `${baseId}-clear`, onClick: onClear }, "Clear")) : null),
+            React.createElement(Actions$1, { "data-itemid": `${baseId}-actions` }, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { "data-itemid": `${baseId}-action-${i}`, key: i, small: true })))))),
+        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 `
@@ -804,14 +804,14 @@ Title$1.defaultProps = {
     disabled: false,
 };
 const MoreMenu = (_a) => {
-    var { maxHeight, menuItems = [], id } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems", "id"]);
-    const baseId = id || 'more-menu';
-    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps, { id: `${baseId}-wrapper` }), menuItems.map((item, i) => {
+    var { maxHeight, menuItems = [], dataItemid } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems", "dataItemid"]);
+    const baseId = dataItemid || 'more-menu';
+    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }), menuItems.map((item, i) => {
         var _a;
         const itemId = `${baseId}-menu-item-${i}`;
-        return (React.createElement(MenuItem, { id: `${itemId}-menu-item`, key: i, onClick: item.onClick },
-            item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, id: `${itemId}-icon`, path: item.icon, size: '20px' })) : null,
-            React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false, id: `${itemId}-title` }, item.label)));
+        return (React.createElement(MenuItem, { "data-itemid": `${itemId}-menu-item`, key: i, onClick: item.onClick },
+            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)));
     })));
 };
 
@@ -827,11 +827,11 @@ const StyledMoreMenu = styled(MoreMenu) `
   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, id, }) => {
+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);
     const [menuPosition, setMenuPosition] = React.useState({ top: '0px', left: '0px' });
     const menuWrapperRef = React.useRef(null);
-    const baseId = id || 'button-menu';
+    const baseId = dataItemid || 'button-menu';
     React.useEffect(() => {
         toggleMenu(show);
     }, [show]);
@@ -897,9 +897,9 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
             setMenuPosition({ top: `${top}px`, left: `${left}px` });
         }
     }, [showMenu, position, menuWidth]);
-    return (React.createElement(MenuWrapper, { id: `${baseId}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
-        React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, id: `${baseId}-button`, small: small }, label),
-        showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${baseId}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
+    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 `
@@ -981,12 +981,12 @@ const Label$3 = styled.span `
   box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, id } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "id"]);
-    const baseId = id || 'checkbox';
-    return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Input$2, { checked: checked, disabled: disabled, id: `${baseId}-input`, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
-        React.createElement(Check$1, { "$invalid": invalid, id: `${baseId}-check` }),
-        children ? (React.createElement(Label$3, { color: color, id: `${baseId}-label` },
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid"]);
+    const baseId = dataItemid || 'checkbox';
+    return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Input$2, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
+        React.createElement(Check$1, { "$invalid": invalid, "data-itemid": `${baseId}-check` }),
+        children ? (React.createElement(Label$3, { color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
 };
@@ -1001,10 +1001,10 @@ const Options$1 = styled.div `
   box-sizing: border-box;
 `;
 const Checklist = (_a) => {
-    var { disabled, onChange, options, selected = [], showSelectAll, id } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll", "id"]);
+    var { disabled, onChange, options, selected = [], showSelectAll, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll", "dataItemid"]);
     const values = options.map((option) => option.value);
     const selected_options = options.filter(o => selected.includes(o.value));
-    const baseId = id || 'checklist';
+    const baseId = dataItemid || 'checklist';
     const handleToggleAll = () => {
         if (selected_options.length === options.length) {
             triggerChange([]);
@@ -1029,13 +1029,13 @@ const Checklist = (_a) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        showSelectAll && values.length ? (React.createElement(SelectAll, { id: `${baseId}-select-all` },
-            React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, id: `${baseId}-checkbox-select-all`, onChange: handleToggleAll }, "Select All"))) : null,
-        React.createElement(Options$1, { id: `${baseId}-options` }, options.map((option, i) => {
+        showSelectAll && values.length ? (React.createElement(SelectAll, { "data-itemid": `${baseId}-select-all` },
+            React.createElement(Checkbox, { checked: selected.length === values.length, "data-itemid": `${baseId}-checkbox-select-all`, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
+        React.createElement(Options$1, { "data-itemid": `${baseId}-options` }, options.map((option, i) => {
             const label = `${option.label || option.value}`;
             const checked = selected.includes(option.value);
             const optionId = `${baseId}-option-${i}`;
-            return (React.createElement(Checkbox, Object.assign({ id: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
+            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));
         }))));
 };
 
@@ -1103,10 +1103,10 @@ const SearchInput$1 = styled.input `
   white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex, id } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex", "id"]);
+    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"]);
     const [searchTerm, setSearchTerm] = React.useState('');
     const [value, setValue] = React.useState(propValue || '');
-    const baseId = id || 'select';
+    const baseId = dataItemid || 'select';
     // Update the value when the prop changes
     React.useEffect(() => {
         setValue(propValue || '');
@@ -1126,15 +1126,15 @@ const Select = (_a) => {
     const filteredOptionGroups = searchable
         ? optionGroups === null || optionGroups === void 0 ? void 0 : optionGroups.map(group => (Object.assign(Object.assign({}, group), { options: group.options.filter(option => { var _a; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchTerm.toLowerCase()); }) })))
         : optionGroups;
-    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, id: `${baseId}-wrapper` },
-        searchable && (React.createElement(SearchInput$1, Object.assign({ id: `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
-        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, id: `${baseId}-trigger`, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
-            placeholder && !value && (React.createElement("option", { disabled: true, id: `${baseId}-placeholder`, value: '' }, placeholder)),
+    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "data-itemid": `${baseId}-wrapper` },
+        searchable && (React.createElement(SearchInput$1, Object.assign({ "data-itemid": `${baseId}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
+        React.createElement(Trigger$1, Object.assign({ "data-itemid": `${baseId}-trigger`, disabled: readOnly, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
+            placeholder && !value && (React.createElement("option", { "data-itemid": `${baseId}-placeholder`, disabled: true, value: '' }, placeholder)),
             filteredOptionGroups &&
-                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { id: `${baseId}-optgroup-${i}`, key: i, label: group.label || `Group ${i}` }, group.options.map((option, j) => (React.createElement("option", { id: `${baseId}-option-${i}-${j}`, key: j, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
+                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { "data-itemid": `${baseId}-optgroup-${i}`, key: i, label: group.label || `Group ${i}` }, group.options.map((option, j) => (React.createElement("option", { "data-itemid": `${baseId}-option-${i}-${j}`, key: j, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
             filteredOptions &&
-                filteredOptions.map((option, i) => (React.createElement("option", { id: `${baseId}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
-        React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${baseId}-icon`, path: js.mdiChevronDown, size: '22px' })));
+                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 `
@@ -1147,7 +1147,7 @@ const Middle = styled.div `
 `;
 const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-onChange = () => { }, style, id, }) => {
+onChange = () => { }, style, dataItemid, locale, }) => {
     const [selectedDay, setSelectedDay] = React.useState(date ? dayjs(date).date().toString() : '');
     const [selectedMonth, setSelectedMonth] = React.useState(date ? (dayjs(date).month() + 1).toString() : '');
     const [selectedYear, setSelectedYear] = React.useState(date ? dayjs(date).year().toString() : '');
@@ -1224,13 +1224,13 @@ onChange = () => { }, style, id, }) => {
         setSelectedYear(e.target.value);
         setDDate(new_date);
     };
-    const baseId = id || 'date-picker';
+    const baseId = dataItemid || 'date-picker';
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerWrapper, { "$style": style, id: `${baseId}-wrapper` },
-            React.createElement(Select, { id: `${baseId}-month-select`, invalid: invalid, onChange: handleMonthChange, options: months, placeholder: 'Select Month', readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px', flexGrow: 3 }, value: selectedMonth }),
-            React.createElement(Middle, { id: `${baseId}-middle` },
-                React.createElement(Select, { id: `${baseId}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
-            React.createElement(Select, { id: `${baseId}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
+        React.createElement(DatePickerWrapper, { "$style": style, "data-itemid": `${baseId}-wrapper` },
+            React.createElement(Select, { "data-itemid": `${baseId}-month-select`, invalid: invalid, onChange: handleMonthChange, options: months, placeholder: (locale === null || locale === void 0 ? void 0 : locale.SelectMonth) ? locale === null || locale === void 0 ? void 0 : locale.SelectMonth : 'Select Month', readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px', flexGrow: 3 }, value: selectedMonth }),
+            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 `
@@ -1293,7 +1293,7 @@ const ButtonBar$1 = styled.div `
   background: #fff;
 `;
 const Drawer = (_a) => {
-    var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width, id } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width", "id"]);
+    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"]);
     React.useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -1304,21 +1304,21 @@ const Drawer = (_a) => {
             document.onkeydown = null;
         };
     }, [onClose]);
-    const baseId = id || 'drawer';
+    const baseId = dataItemid || 'drawer';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width, id: `${baseId}-container` }),
-            React.createElement(Header$2, { id: `${baseId}-header` },
-                React.createElement("div", { id: `${baseId}-header-content` },
-                    title ? (React.createElement(Heading, { id: `${baseId}-title`, type: 'secondary' }, title)) : null,
-                    description ? (React.createElement(Copy, { color: 'GRAY', id: `${baseId}-description` }, description)) : null),
-                React.createElement(Close$1, { id: `${baseId}-close`, onClick: onClose },
-                    React.createElement(Button, { format: 'secondary', icon: js.mdiClose, id: `${baseId}-close-button`, small: true }))),
-            React.createElement(ContentWrapper$1, { id: `${baseId}-content-wrapper` }, children),
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, { id: `${baseId}-button-bar` },
-                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${baseId}-tertiary-button` }))) : null,
-                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` }))) : null,
-                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null),
-        scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${baseId}-scrim`, onClick: onClose })) : null));
+        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width, "data-itemid": `${baseId}-container` }),
+            React.createElement(Header$2, { "data-itemid": `${baseId}-header` },
+                React.createElement("div", { "data-itemid": `${baseId}-header-content` },
+                    title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, type: 'secondary' }, title)) : null,
+                    description ? (React.createElement(Copy, { color: 'GRAY', "data-itemid": `${baseId}-description` }, description)) : null),
+                React.createElement(Close$1, { "data-itemid": `${baseId}-close`, onClick: onClose },
+                    React.createElement(Button, { "data-itemid": `${baseId}-close-button`, format: 'secondary', icon: js.mdiClose, small: true }))),
+            React.createElement(ContentWrapper$1, { "data-itemid": `${baseId}-content-wrapper` }, children),
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, { "data-itemid": `${baseId}-button-bar` },
+                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),
+        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)));
@@ -1370,18 +1370,18 @@ const Validation = styled.div `
   box-sizing: border-box;
 `;
 const Field = (_a) => {
-    var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, id } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "id"]);
-    const baseId = id || 'field';
-    return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(LabelRow, { id: `${baseId}-label-row` },
-            label || required || tooltip ? (React.createElement(Label$2, { htmlFor: htmlFor, id: `${baseId}-label` },
+    var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip, dataItemid } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip", "dataItemid"]);
+    const baseId = dataItemid || 'field';
+    return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(LabelRow, { "data-itemid": `${baseId}-label-row` },
+            label || required || tooltip ? (React.createElement(Label$2, { "data-itemid": `${baseId}-label`, htmlFor: htmlFor },
                 label,
-                required ? React.createElement(Required, { id: `${baseId}-required` }, "*") : null,
+                required ? React.createElement(Required, { "data-itemid": `${baseId}-required` }, "*") : null,
                 tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null,
-            action ? (React.createElement(Action, { id: action.id || `${baseId}-action`, onClick: action.onClick }, action.label)) : null),
-        description ? React.createElement(Description, { id: `${baseId}-description` }, description) : null,
-        React.createElement("div", { id: `${baseId}-children` }, children),
-        React.createElement(Validation, { className: 'field-validation-wrapper', id: `${baseId}-validation`, title: validationText }, validationText ? validationText : '\u00A0')));
+            action ? (React.createElement(Action, { "data-itemid": `${baseId}-action`, onClick: action.onClick }, action.label)) : null),
+        description ? (React.createElement(Description, { "data-itemid": `${baseId}-description` }, description)) : null,
+        React.createElement("div", { "data-itemid": `${baseId}-children` }, children),
+        React.createElement(Validation, { className: 'field-validation-wrapper', "data-itemid": `${baseId}-validation`, title: validationText }, validationText ? validationText : '\u00A0')));
 };
 
 const Wrapper$8 = styled.fieldset `
@@ -1413,11 +1413,11 @@ const Content$1 = styled.div `
   border-radius: 8px;
   background: #fcfcfc;
 `;
-const FieldGroup = ({ children, label, id }) => {
-    const baseId = id || 'field-group';
-    return (React.createElement(Wrapper$8, { id: `${baseId}-wrapper` },
-        React.createElement(Label$1, { id: `${baseId}-label` }, label),
-        React.createElement(Content$1, { id: `${baseId}-content` }, children)));
+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 `
@@ -1491,7 +1491,7 @@ const Remove = styled(Icon) `
     fill: ${Colors.RED.Hex} !important;
   }
 `;
-const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, id, }) => {
+const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, dataItemid, }) => {
     const inputRef = React.useRef(null);
     const [files, setFiles] = React.useState(value || []);
     const [dragging, setDragging] = React.useState(false);
@@ -1590,24 +1590,24 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
             setAllowMoreFiles(false);
         }
     }, [files]);
-    const baseId = id || 'file-upload';
+    const baseId = dataItemid || 'file-upload';
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { accept: accept, id: `${baseId}-input`, multiple: true, onChange: allowMoreFiles ? handleChange : undefined, ref: inputRef, style: { display: 'none' }, type: 'file' }),
-        React.createElement(Dropzone, { "$dragging": dragging, id: `${baseId}-dropzone`, onDragEnter: allowMoreFiles ? handleDrag : undefined, onDragLeave: allowMoreFiles ? handleDrag : undefined, onDragOver: allowMoreFiles ? handleDrag : undefined, onDrop: allowMoreFiles ? handleDrop : undefined, value: files ? files : [] },
-            files.length ? (React.createElement(Files, { id: `${baseId}-files` }, files.map((file, index) => {
+        React.createElement("input", { accept: accept, "data-itemid": `${baseId}-input`, multiple: true, onChange: allowMoreFiles ? handleChange : undefined, ref: inputRef, style: { display: 'none' }, type: 'file' }),
+        React.createElement(Dropzone, { "$dragging": dragging, "data-itemid": `${baseId}-dropzone`, onDragEnter: allowMoreFiles ? handleDrag : undefined, onDragLeave: allowMoreFiles ? handleDrag : undefined, onDragOver: allowMoreFiles ? handleDrag : undefined, onDrop: allowMoreFiles ? handleDrop : undefined, value: files ? files : [] },
+            files.length ? (React.createElement(Files, { "data-itemid": `${baseId}-files` }, files.map((file, index) => {
                 const fileId = `${baseId}-file-${index}`;
-                return (React.createElement(File, { id: `${fileId}-file`, key: file.name },
-                    React.createElement(Copy, { id: `${fileId}-file-name`, type: 'bold' }, file.name),
-                    React.createElement(Remove, { id: `${fileId}-remove`, onClick: handleRemove.bind(null, file), path: js.mdiMinusCircle })));
+                return (React.createElement(File, { "data-itemid": `${fileId}-file`, key: file.name },
+                    React.createElement(Copy, { "data-itemid": `${fileId}-file-name`, type: 'bold' }, file.name),
+                    React.createElement(Remove, { "data-itemid": `${fileId}-remove`, onClick: handleRemove.bind(null, file), path: js.mdiMinusCircle })));
             }))) : null,
-            allowMoreFiles ? (React.createElement(ClickZone, { id: `${baseId}-click-zone`, onClick: triggerFileExplorer },
-                files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging, id: `${baseId}-icon-wrapper` },
-                    React.createElement(StyledIcon$3, { id: `${baseId}-icon`, path: js.mdiFolderPlusOutline }))),
-                React.createElement(Content, { id: `${baseId}-content` },
-                    React.createElement(Copy, { align: 'center', id: `${baseId}-copy`, type: 'bold' }, "Drag & drop files here or click to select files"),
-                    message ? (React.createElement(MessageDiv, { id: `${baseId}-message-div` },
-                        React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${baseId}-message` }, message),
-                        tooltipInfo && (React.createElement("span", { id: `${baseId}-tooltip` },
+            allowMoreFiles ? (React.createElement(ClickZone, { "data-itemid": `${baseId}-click-zone`, onClick: triggerFileExplorer },
+                files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging, "data-itemid": `${baseId}-icon-wrapper` },
+                    React.createElement(StyledIcon$3, { "data-itemid": `${baseId}-icon`, path: js.mdiFolderPlusOutline }))),
+                React.createElement(Content, { "data-itemid": `${baseId}-content` },
+                    React.createElement(Copy, { align: 'center', "data-itemid": `${baseId}-copy`, type: 'bold' }, "Drag & drop files here or click to select files"),
+                    message ? (React.createElement(MessageDiv, { "data-itemid": `${baseId}-message-div` },
+                        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)));
 };
 
@@ -1830,7 +1830,7 @@ const Loader$1 = styled.div `
 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, id } = _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", "id"]);
+    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"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1902,8 +1902,8 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(internalValue);
     }
-    const baseId = id || 'input';
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, id: `${baseId}-wrapper` },
+    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` },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1918,12 +1918,12 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: formatted_value }, accessibleProps, { id: `${baseId}-textarea` })),
-        loading ? (React.createElement(Loader$1, { id: `${baseId}-loader` },
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: formatted_value }, accessibleProps, { "data-itemid": `${baseId}-textarea` })),
+        loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
-        showCharCount ? (React.createElement(CharacterCount, { id: `${baseId}-char-count` },
+        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, id: `${baseId}-wrapper` },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, "data-itemid": `${baseId}-wrapper` },
         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 => {
@@ -1940,20 +1940,20 @@ const Input$1 = (_a) => {
                     setIsFocused(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { id: `${baseId}-input` })),
-        loading ? (React.createElement(Loader$1, { id: `${baseId}-loader` },
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps, { "data-itemid": `${baseId}-input` })),
+        loading ? (React.createElement(Loader$1, { "data-itemid": `${baseId}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
-        showCharCount ? (React.createElement(CharacterCount, { id: `${baseId}-char-count` },
+        showCharCount ? (React.createElement(CharacterCount, { "data-itemid": `${baseId}-char-count` },
             internalValue.length,
             maxLength ? ` / ${maxLength}` : null)) : null,
-        suffix && React.createElement(StyledSuffix, { id: `${baseId}-suffix` }, suffix),
-        show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, { id: `${baseId}-suggested-values` },
-            isAutoComplete ? null : (React.createElement(SuggestedSummary, { id: `${baseId}-suggested-summary` },
+        suffix && React.createElement(StyledSuffix, { "data-itemid": `${baseId}-suffix` }, suffix),
+        show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, { "data-itemid": `${baseId}-suggested-values` },
+            isAutoComplete ? null : (React.createElement(SuggestedSummary, { "data-itemid": `${baseId}-suggested-summary` },
                 internalSuggestedValues.length,
                 " Results Match \"",
                 internalValue,
                 "\"")),
-            internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { id: `${baseId}-suggested-value-${index}`, key: index, onClick: () => {
+            internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { "data-itemid": `${baseId}-suggested-value-${index}`, key: index, onClick: () => {
                     handleInputChange({ target: { value: suggestedValue } });
                     onSuggestedSelect();
                     setShowOptions(false);
@@ -1976,9 +1976,9 @@ const Wrapper$7 = styled.a `
 `;
 Wrapper$7.defaultProps = { theme: EditableTheme };
 const Link = (_a) => {
-    var { children, onClick, small, id } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small", "id"]);
-    const baseId = id || 'link';
-    return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${baseId}-wrapper` }), children));
+    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 `
@@ -2011,10 +2011,10 @@ const Path = styled.path `
   -webkit-animation: ${dash} 1.1s ease-in-out infinite;
   animation: ${dash} 1.1s ease-in-out infinite;
 `;
-const Loader = ({ id }) => {
-    const baseId = id || 'loader';
-    return (React.createElement(Spinner, { id: `${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', fill: 'none', id: `${baseId}-path`, strokeWidth: '2' })));
+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 `
@@ -2065,15 +2065,15 @@ const StepLine = styled.div `
   background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
   transition: background-color 0.5s ease-in-out;
 `;
-const ProgressBar = ({ steps, showStepLine = false, id }) => {
-    const baseId = id || 'progress-bar';
-    return (React.createElement(Steps, { id: `${baseId}-steps` }, steps.map((step, i) => {
+const ProgressBar = ({ steps, showStepLine = false, dataItemid }) => {
+    const baseId = dataItemid || 'progress-bar';
+    return (React.createElement(Steps, { "data-itemid": `${baseId}-steps` }, steps.map((step, i) => {
         const stepId = `${baseId}-step-${i}`;
         return (React.createElement(React.Fragment, { key: i },
-            i !== 0 && showStepLine && React.createElement(StepLine, { "$active": step.active, id: `${stepId}-line` }),
-            React.createElement(Step, { id: `${stepId}-step` },
-                step.complete ? (React.createElement(StyledIcon$2, { id: `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, id: `${stepId}-indicator` }, i + 1)),
-                React.createElement(StepLabel, { id: `${stepId}-label` }, step.label))));
+            i !== 0 && showStepLine && (React.createElement(StepLine, { "$active": step.active, "data-itemid": `${stepId}-line` })),
+            React.createElement(Step, { "data-itemid": `${stepId}-step` },
+                step.complete ? (React.createElement(StyledIcon$2, { "data-itemid": `${stepId}-icon`, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active, "data-itemid": `${stepId}-indicator` }, i + 1)),
+                React.createElement(StepLabel, { "data-itemid": `${stepId}-label` }, step.label))));
     })));
 };
 
@@ -2149,7 +2149,7 @@ const ButtonContainer = styled.div `
   margin: 0 10px;
 `;
 const Modal = (_a) => {
-    var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton, id } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton", "id"]);
+    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"]);
     React.useEffect(() => {
         document.onkeydown = e => {
             if (e.key === 'Escape') {
@@ -2160,35 +2160,35 @@ const Modal = (_a) => {
             document.onkeydown = null;
         };
     }, [onClose]);
-    const baseId = id || 'modal';
-    return (React.createElement(Wrapper$6, { id: `${baseId}-wrapper` },
-        React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps, { id: `${baseId}-container` }),
-            React.createElement(Header$1, { id: `${baseId}-header` },
-                title ? (React.createElement(Heading, { id: `${baseId}-title`, type: 'secondary' }, title)) : null,
-                React.createElement(Close, { id: `${baseId}-close`, onClick: onClose },
-                    React.createElement(CloseMsg, { id: `${baseId}-close-msg` }, "(Esc)"),
-                    React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${baseId}-close-icon`, path: js.mdiClose, size: '24px' }))),
+    const baseId = dataItemid || 'modal';
+    return (React.createElement(Wrapper$6, { "data-itemid": `${baseId}-wrapper` },
+        React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps, { "data-itemid": `${baseId}-container` }),
+            React.createElement(Header$1, { "data-itemid": `${baseId}-header` },
+                title ? (React.createElement(Heading, { "data-itemid": `${baseId}-title`, type: 'secondary' }, title)) : null,
+                React.createElement(Close, { "data-itemid": `${baseId}-close`, onClick: onClose },
+                    React.createElement(CloseMsg, { "data-itemid": `${baseId}-close-msg` }, "(Esc)"),
+                    React.createElement(Icon, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-close-icon`, path: js.mdiClose, size: '24px' }))),
             steps ? React.createElement(ProgressBar, { steps: steps }) : null,
-            React.createElement(ContentWrapper, { id: `${baseId}-content-wrapper` }, children),
-            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, { id: `${baseId}-button-bar` },
-                tertiaryButton || quarternaryButton ? (React.createElement("div", { id: `${baseId}-left-buttons`, style: {
+            React.createElement(ContentWrapper, { "data-itemid": `${baseId}-content-wrapper` }, children),
+            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, { "data-itemid": `${baseId}-button-bar` },
+                tertiaryButton || quarternaryButton ? (React.createElement("div", { "data-itemid": `${baseId}-left-buttons`, style: {
                         marginRight: 'auto',
                         paddingRight: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${baseId}-tertiary-button` }))) : null,
-                    quarternaryButton ? (React.createElement(ButtonContainer, { id: `${baseId}-quarternary-button-container` },
-                        React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary', id: `${baseId}-quarternary-button` })))) : null)) : null,
-                primaryButton || secondaryButton ? (React.createElement("div", { id: `${baseId}-right-buttons`, style: {
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { "data-itemid": `${baseId}-tertiary-button`, format: tertiaryButton.format || 'secondary' }))) : null,
+                    quarternaryButton ? (React.createElement(ButtonContainer, { "data-itemid": `${baseId}-quarternary-button-container` },
+                        React.createElement(Button, Object.assign({}, quarternaryButton, { "data-itemid": `${baseId}-quarternary-button`, format: quarternaryButton.format || 'secondary' })))) : null)) : null,
+                primaryButton || secondaryButton ? (React.createElement("div", { "data-itemid": `${baseId}-right-buttons`, style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    secondaryButton ? (React.createElement(ButtonContainer, { id: `${baseId}-secondary-button-container` },
-                        React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${baseId}-secondary-button` })))) : null,
-                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${baseId}-primary-button` }))) : null)) : null)) : null)));
+                    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 `
@@ -2277,23 +2277,23 @@ const SearchInput = styled.input `
   white-space: nowrap;
 `;
 const MultiSelect = (_a) => {
-    var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style, id } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style", "id"]);
+    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"]);
     const [showOptions, setShowOptions] = React.useState(false);
     const selected_options = options.filter(o => selected.includes(o.value));
     const [filter, setFilter] = React.useState('');
-    const baseId = id || 'multiselect';
+    const baseId = dataItemid || 'multiselect';
     // Filter the options based on the filter state
     const filteredOptions = options.filter(o => { var _a, _b; return ((_a = o.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filter)) || ((_b = o.value) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes(filter)); });
-    return (React.createElement(Wrapper$5, { "$style": style, id: `${baseId}-wrapper` },
-        searchable && (React.createElement(SearchInput, { id: `${baseId}-search-input`, onChange: e => setFilter(e.target.value), onClick: () => setShowOptions(!showOptions), placeholder: `${showSelectAll ? options.length : selected_options.length} Selected`, type: 'text', value: filter })),
-        React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, id: `${baseId}-trigger`, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
-            React.createElement(Value, { id: `${baseId}-value` }, selected.length > 0 && selected.length <= displayCount
+    return (React.createElement(Wrapper$5, { "$style": style, "data-itemid": `${baseId}-wrapper` },
+        searchable && (React.createElement(SearchInput, { "data-itemid": `${baseId}-search-input`, onChange: e => setFilter(e.target.value), onClick: () => setShowOptions(!showOptions), placeholder: `${showSelectAll ? options.length : selected_options.length} Selected`, type: 'text', value: filter })),
+        React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, "data-itemid": `${baseId}-trigger`, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
+            React.createElement(Value, { "data-itemid": `${baseId}-value` }, selected.length > 0 && selected.length <= displayCount
                 ? selected_options.map(o => o.label || o.value).join(', ')
                 : `${selected_options.length} Selected`),
-            React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${baseId}-icon`, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
-        showOptions ? (React.createElement(Options, { id: `${baseId}-options` },
-            React.createElement(Checklist, { id: `${baseId}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
-        showOptions ? (React.createElement(Scrim, { id: `${baseId}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
+            React.createElement(Icon, { color: Colors.BLACK.Hex, "data-itemid": `${baseId}-icon`, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
+        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 `
@@ -2326,27 +2326,27 @@ const Actions = styled.div `
   align-items: center;
   gap: 8px;
 `;
-const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, id, }) => {
+const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag, dataItemid, }) => {
     const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, maxHeight = '', } = buttonMenu || {};
-    const baseId = id || 'page-header';
-    return (React.createElement(Wrapper$4, { id: `${baseId}-wrapper` },
-        React.createElement(Info, { id: `${baseId}-info` },
-            React.createElement(Title, { id: `${baseId}-title` },
-                React.createElement(Heading, { id: `${baseId}-heading`, type: 'secondary' }, title),
-                tag ? React.createElement(Tag, Object.assign({}, tag, { id: `${baseId}-tag` })) : null),
-            breadcrumbs ? (React.createElement(Breadcrumbs, { id: `${baseId}-breadcrumbs` }, breadcrumbs.map((crumb, i) => {
+    const baseId = dataItemid || 'page-header';
+    return (React.createElement(Wrapper$4, { "data-itemid": `${baseId}-wrapper` },
+        React.createElement(Info, { "data-itemid": `${baseId}-info` },
+            React.createElement(Title, { "data-itemid": `${baseId}-title` },
+                React.createElement(Heading, { "data-itemid": `${baseId}-heading`, type: 'secondary' }, title),
+                tag ? React.createElement(Tag, Object.assign({}, tag, { "data-itemid": `${baseId}-tag` })) : null),
+            breadcrumbs ? (React.createElement(Breadcrumbs, { "data-itemid": `${baseId}-breadcrumbs` }, breadcrumbs.map((crumb, i) => {
                 const crumbId = `${baseId}-breadcrumb-${i}`;
                 return (React.createElement(React.Fragment, { key: i },
-                    crumb.onClick ? (React.createElement(Link, { id: `${crumbId}-link`, onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { id: `${crumbId}-copy`, type: 'small' }, crumb.label)),
-                    i + 1 < breadcrumbs.length ? (React.createElement(Icon.Icon, { id: `${crumbId}-icon`, path: js.mdiChevronRight, size: '14px' })) : null));
+                    crumb.onClick ? (React.createElement(Link, { "data-itemid": `${crumbId}-link`, onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { "data-itemid": `${crumbId}-copy`, type: 'small' }, crumb.label)),
+                    i + 1 < breadcrumbs.length ? (React.createElement(Icon.Icon, { "data-itemid": `${crumbId}-icon`, path: js.mdiChevronRight, size: '14px' })) : null));
             }))) : null),
-        actions ? (React.createElement(Actions, { id: `${baseId}-actions` },
+        actions ? (React.createElement(Actions, { "data-itemid": `${baseId}-actions` },
             actions.map((action, i) => {
                 const { label } = action, buttonProps = __rest(action, ["label"]);
                 const actionId = `${baseId}-action-${i}`;
-                return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
+                return (React.createElement(Button, Object.assign({}, buttonProps, { "data-itemid": `${actionId}-button`, key: i, small: true }), label));
             }),
-            menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, id: `${baseId}-button-menu`, label: label, maxHeight: maxHeight, menuItems: menuItems, show: show, small: true })) : null)) : null));
+            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 `
@@ -2356,7 +2356,7 @@ const Wrapper$3 = styled.nav `
   column-gap: 10px;
 `;
 const Pagination = (_a) => {
-    var { currentPage = 1, onClick, pageCount = 0, id } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "id"]);
+    var { currentPage = 1, onClick, pageCount = 0, dataItemid } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount", "dataItemid"]);
     const is_first_page = currentPage === 1;
     const is_last_page = currentPage === pageCount;
     const handlePrevClick = () => {
@@ -2375,14 +2375,14 @@ const Pagination = (_a) => {
             onClick(new_page);
         }
     };
-    const baseId = id || 'pagination';
-    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Button, { disabled: is_first_page, icon: js.mdiChevronLeft, id: `${baseId}-prev-button`, onClick: handlePrevClick, small: true }),
-        React.createElement(Select, { id: `${baseId}-select`, onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
+    const baseId = dataItemid || 'pagination';
+    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Button, { "data-itemid": `${baseId}-prev-button`, disabled: is_first_page, icon: js.mdiChevronLeft, onClick: handlePrevClick, small: true }),
+        React.createElement(Select, { "data-itemid": `${baseId}-select`, onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
                 label: `Page ${p}`,
                 value: `${p}`,
             })), value: `${currentPage}` }),
-        React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, id: `${baseId}-next-button`, onClick: handleNextClick, small: true })));
+        React.createElement(Button, { "data-itemid": `${baseId}-next-button`, disabled: is_last_page, icon: js.mdiChevronRight, onClick: handleNextClick, small: true })));
 };
 
 const Wrapper$2 = styled.label `
@@ -2461,23 +2461,23 @@ const Label = styled.span `
   margin-left: 6px;
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, id } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "id"]);
-    const baseId = id || 'radio';
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { id: `${baseId}-wrapper` }),
-        React.createElement(Input, { checked: checked, disabled: disabled, id: `${baseId}-input`, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
-        React.createElement(Check, { "$invalid": invalid, id: `${baseId}-check` }),
-        React.createElement(Label, { id: `${baseId}-label` },
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid"]);
+    const baseId = dataItemid || 'radio';
+    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+        React.createElement(Input, { checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
+        React.createElement(Check, { "$invalid": invalid, "data-itemid": `${baseId}-check` }),
+        React.createElement(Label, { "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
 };
 
 const RadioList = (_a) => {
-    var { disabled, onChange, options, value, id } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value", "id"]);
-    const baseId = id || 'radio-list';
+    var { disabled, onChange, options, value, dataItemid } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value", "dataItemid"]);
+    const baseId = dataItemid || 'radio-list';
     return (React.createElement(React.Fragment, null, options.map((option, index) => {
         const label = option.label || option.value;
         const optionId = `${baseId}-option-${index}`;
-        return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, id: optionId, key: option.value, onChange: onChange, value: option.value }, accessibleProps), label));
+        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));
     })));
 };
 
@@ -2545,22 +2545,22 @@ const StyledIcon$1 = styled(Icon) `
 `;
 StyledIcon$1.defaultProps = { theme: EditableTheme };
 const Table = (_a) => {
-    var { columns = [], data = [], sortBy, sortDirection, hideHeaders, onRowClick, onSortChange, tableLayout, id } = _a, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout", "id"]);
-    const baseId = id || 'table';
-    return (React.createElement(StyledTable, Object.assign({ "$tableLayout": tableLayout }, accessibleProps, { id: `${baseId}-styled-table` }),
-        hideHeaders ? null : (React.createElement("thead", { id: `${baseId}-thead` },
-            React.createElement("tr", { id: `${baseId}-header-row` }, columns.map((column, i) => {
+    var { columns = [], data = [], sortBy, sortDirection, hideHeaders, onRowClick, onSortChange, tableLayout, dataItemid } = _a, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout", "dataItemid"]);
+    const baseId = dataItemid || 'table';
+    return (React.createElement(StyledTable, Object.assign({ "$tableLayout": tableLayout }, accessibleProps, { "data-itemid": `${baseId}-styled-table` }),
+        hideHeaders ? null : (React.createElement("thead", { "data-itemid": `${baseId}-thead` },
+            React.createElement("tr", { "data-itemid": `${baseId}-header-row` }, columns.map((column, i) => {
                 const columnId = `${baseId}-column-${i}`;
-                return (React.createElement(Header, { "$isSortable": column.isSortable, "$width": column.width, id: `${columnId}-header`, key: i, onClick: onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange.bind(null, column.id) },
+                return (React.createElement(Header, { "$isSortable": column.isSortable, "$width": column.width, "data-itemid": `${columnId}-header`, key: i, onClick: onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange.bind(null, column.id) },
                     column.label,
-                    column.isSortable && sortBy === column.id ? (React.createElement(IconWrapper, { id: `${columnId}-icon-wrapper` },
-                        React.createElement(StyledIcon$1, { id: `${columnId}-icon`, path: sortDirection === 'asc' ? js.mdiChevronUp : js.mdiChevronDown, size: '20px' }))) : null));
+                    column.isSortable && sortBy === column.id ? (React.createElement(IconWrapper, { "data-itemid": `${columnId}-icon-wrapper` },
+                        React.createElement(StyledIcon$1, { "data-itemid": `${columnId}-icon`, path: sortDirection === 'asc' ? js.mdiChevronUp : js.mdiChevronDown, size: '20px' }))) : null));
             })))),
-        data.length ? (React.createElement("tbody", { id: `${baseId}-tbody` }, data.map((row, i) => {
+        data.length ? (React.createElement("tbody", { "data-itemid": `${baseId}-tbody` }, data.map((row, i) => {
             const rowId = `${baseId}-row-${i}`;
-            return (React.createElement(Row, { "$bgColor": i % 2 === 0 ? '#ffffff' : '#f9f9f9', "$isClickable": !!onRowClick, id: `${rowId}-row`, key: i, onClick: onRowClick ? onRowClick.bind(null, row) : undefined }, columns.map((column, j) => {
+            return (React.createElement(Row, { "$bgColor": i % 2 === 0 ? '#ffffff' : '#f9f9f9', "$isClickable": !!onRowClick, "data-itemid": `${rowId}-row`, key: i, onClick: onRowClick ? onRowClick.bind(null, row) : undefined }, columns.map((column, j) => {
                 const columnId = `${baseId}-column-${j}`;
-                return (React.createElement(Column, { "$align": columns[j].align, "$width": columns[j].width, id: `${columnId}-column`, key: j }, column.render ? column.render(row) : row[column.id] || 'N/A'));
+                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));
 };
@@ -2615,13 +2615,13 @@ const Badge = styled.div `
 `;
 Badge.defaultProps = { theme: EditableTheme };
 const Tabs = (_a) => {
-    var { tabs, id } = _a, accessibleProps = __rest(_a, ["tabs", "id"]);
-    const baseId = id || 'tabs';
-    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps, { id: `${baseId}-wrapper` }), tabs.map((_a, i) => {
+    var { tabs, dataItemid } = _a, accessibleProps = __rest(_a, ["tabs", "dataItemid"]);
+    const baseId = dataItemid || 'tabs';
+    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }), tabs.map((_a, i) => {
         var { isActive, label, badgeCount, errorBadge, onClick } = _a, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
         const tabId = `${baseId}-tab-${i}`;
-        return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps, { id: `${tabId}-tab` }),
-            badgeCount ? (React.createElement(Badge, { "$isError": errorBadge || false, id: `${tabId}-badge` }, badgeCount)) : null,
+        return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps, { "data-itemid": `${tabId}-tab` }),
+            badgeCount ? (React.createElement(Badge, { "$isError": errorBadge || false, "data-itemid": `${tabId}-badge` }, badgeCount)) : null,
             label));
     })));
 };
@@ -2650,12 +2650,12 @@ const Handle = styled.div `
   box-sizing: border-box;
 `;
 const Toggle = (_a) => {
-    var { onClick, on, id } = _a, accessibleProps = __rest(_a, ["onClick", "on", "id"]);
-    const baseId = id || 'toggle';
-    return (React.createElement(Track, Object.assign({ "$on": on, onClick: onClick }, accessibleProps, { id: `${baseId}-track` }),
-        React.createElement("input", { checked: on, id: `${baseId}-input`, name: accessibleProps.name, type: 'hidden' }),
-        React.createElement(Handle, { "$on": on, id: `${baseId}-handle` },
-            React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${baseId}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
+    var { onClick, on, dataItemid } = _a, accessibleProps = __rest(_a, ["onClick", "on", "dataItemid"]);
+    const baseId = dataItemid || 'toggle';
+    return (React.createElement(Track, Object.assign({ "$on": on, onClick: onClick }, accessibleProps, { "data-itemid": `${baseId}-track` }),
+        React.createElement("input", { checked: on, "data-itemid": `${baseId}-input`, name: accessibleProps.name, type: 'hidden' }),
+        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 = {};
 
@@ -2685,15 +2685,15 @@ const StyledIcon = styled.div `
   background: #f5f5f5;
 `;
 const ZeroState = (_a) => {
-    var { icon, title, description, action, id } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action", "id"]);
-    const baseId = id || 'zero-state';
-    return (React.createElement(Container, Object.assign({}, accessibleProps, { id: `${baseId}-container` }),
-        React.createElement(StyledIcon, { id: `${baseId}-icon-wrapper` },
-            React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, id: `${baseId}-icon`, path: icon, size: '40px' })),
-        React.createElement(Wrapper, { id: `${baseId}-wrapper` },
-            React.createElement(Heading, { children: title, id: `${baseId}-heading`, type: 'tertiary' }),
-            description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${baseId}-description`, type: 'default' }))),
-        action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${baseId}-button`, onClick: action.onClick }))));
+    var { icon, title, description, action, dataItemid } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action", "dataItemid"]);
+    const baseId = dataItemid || 'zero-state';
+    return (React.createElement(Container, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-container` }),
+        React.createElement(StyledIcon, { "data-itemid": `${baseId}-icon-wrapper` },
+            React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, "data-itemid": `${baseId}-icon`, path: icon, size: '40px' })),
+        React.createElement(Wrapper, { "data-itemid": `${baseId}-wrapper` },
+            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;