@hexure/ui 1.13.30 → 1.13.32

package/dist/cjs/index.js

@@ -1,13 +1,13 @@
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var Icon = require('@mdi/react');
-var js = require('@mdi/js');
-var dayjs = require('dayjs');
-var Numeral = require('numeral');
-var Moment = require('moment');
-
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var Icon = require('@mdi/react');
+var js = require('@mdi/js');
+var dayjs = require('dayjs');
+var Numeral = require('numeral');
+var Moment = require('moment');
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -21,22 +21,22 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const Colors = {
     PRIMARY: {
         Hex: '#0193D7',
@@ -85,68 +85,80 @@ const FontSizes = {
 };
 const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
-};
-
-const Header$3 = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-  background: #f5f5f5;
-  border: 1px solid #e5e5e5;
-  padding: 14px 20px;
-  height: 50px;
-  cursor: pointer;
-`;
-const Title$2 = styled.div `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  color: ${Colors.BLACK.Hex};
-  line-height: 1.6em;
-  font-family: ${FontStyles.DEFAULT};
-  box-sizing: border-box;
+};
+
+//function to generate unique ids
+const generateUniqueId = (() => {
+    let counter = 0;
+    return (prefix = 'id') => {
+        counter += 1;
+        return `${prefix}-${counter}`;
+    };
+})();
+
+const Header$3 = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  background: #f5f5f5;
+  border: 1px solid #e5e5e5;
+  padding: 14px 20px;
+  height: 50px;
+  cursor: pointer;
+`;
+const Title$2 = styled.div `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  font-family: ${FontStyles.DEFAULT};
+  box-sizing: border-box;
 `;
 const Accordion = (_a) => {
     var { title, children, open, onClick } = _a, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
+    const id = generateUniqueId('accordion');
     return (React.createElement(React.Fragment, null,
-        React.createElement(Header$3, Object.assign({ onClick: onClick }, accessibleProps),
-            React.createElement(Title$2, null, title),
-            React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
-        open ? children : null));
-};
-
-const StyledComponent = styled.p `
-  color: ${props => Colors[props.$color || 'BLACK'].Hex};
-  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
-  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
-  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
-  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
-  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  text-align: ${props => props.$align || 'left'};
-  box-sizing: border-box;
-`;
-const Copy = ({ children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK', }) => {
-    return (React.createElement(StyledComponent, { "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type }, children));
+        React.createElement(Header$3, Object.assign({ id: `${id}-header`, onClick: onClick }, accessibleProps),
+            React.createElement(Title$2, { id: `${id}-title` }, title),
+            React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
+        open ? React.createElement("div", { id: `${id}-content` }, children) : null));
+};
+
+const StyledComponent = styled.p `
+  color: ${props => Colors[props.$color || 'BLACK'].Hex};
+  font-size: ${props => (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$type === 'small' ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$type === 'small' ? '1px' : '0px')};
+  font-weight: ${props => (props.$type === 'bold' ? '500' : '400')};
+  font-style: ${props => (props.$type === 'italic' ? 'italic' : 'normal')};
+  text-decoration: ${props => ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  text-align: ${props => props.$align || 'left'};
+  box-sizing: border-box;
+`;
+const Copy = (_a) => {
+    var { children, align = '', margin = '', padding = '', type = 'default', color = 'BLACK' } = _a, accessibleProps = __rest(_a, ["children", "align", "margin", "padding", "type", "color"]);
+    const id = generateUniqueId('copy');
+    return (React.createElement(StyledComponent, Object.assign({ "$align": align, "$color": color, "$margin": margin, "$padding": padding, "$type": type, id: `${id}-styled-component` }, accessibleProps), children));
 };
 Copy.defaultProps = {
     type: 'default',
-};
-
-const Wrapper$h = styled.div `
-  display: inline-block;
-  position: relative;
-  height: 16px;
-`;
-const StyledIcon$6 = styled(Icon) `
-  width: 16px;
-  height: 16px;
-  margin: 0px 6px;
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+};
+
+const Wrapper$h = styled.div `
+  display: inline-block;
+  position: relative;
+  height: 16px;
+`;
+const StyledIcon$6 = styled(Icon) `
+  width: 16px;
+  height: 16px;
+  margin: 0px 6px;
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 StyledIcon$6.defaultProps = { theme: EditableTheme };
 const positions = {
@@ -181,16 +193,17 @@ const Content$3 = styled.div(props => (Object.assign({ position: 'absolute', bor
 Content$3.defaultProps = { theme: EditableTheme };
 const Tooltip = ({ children, position = 'right-top', width = '240px', trigger, }) => {
     const [show_content, toggleContent] = React.useState(false);
-    return (React.createElement(Wrapper$h, { onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
-        trigger || React.createElement(StyledIcon$6, { path: js.mdiInformationOutline }),
-        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width }, children && React.createElement(Copy, { type: 'small' }, children))) : null));
-};
-
-const StyledButton = styled.button `
-  height: ${props => (props.$small ? '30px' : '40px')};
-  line-height: 1em;
-  border-radius: ${props => (props.$small ? '15px' : '20px')};
-  margin: ${props => props.$margin || '0px'};
+    const id = generateUniqueId('tooltip');
+    return (React.createElement(Wrapper$h, { id: `${id}-wrapper`, onMouseEnter: toggleContent.bind(null, true), onMouseLeave: toggleContent.bind(null, false) },
+        trigger || React.createElement(StyledIcon$6, { id: `${id}-icon`, path: js.mdiInformationOutline }),
+        show_content ? (React.createElement(Content$3, { "$position": position, "$width": width, id: `${id}-content` }, children && (React.createElement(Copy, { id: `${id}-copy`, type: 'small' }, children)))) : null));
+};
+
+const StyledButton = styled.button `
+  height: ${props => (props.$small ? '30px' : '40px')};
+  line-height: 1em;
+  border-radius: ${props => (props.$small ? '15px' : '20px')};
+  margin: ${props => props.$margin || '0px'};
   padding: ${props => {
     if (props.$hasChildren) {
         if (props.$small) {
@@ -201,9 +214,9 @@ const StyledButton = styled.button `
         }
     }
     return '0px';
-}};
-  outline: none;
-  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
+}};
+  outline: none;
+  background: ${props => props.$bg_color || props.theme.PRIMARY_COLOR.Hex};
   width: ${props => {
     if (props.$hasChildren) {
         return 'auto';
@@ -212,56 +225,58 @@ const StyledButton = styled.button `
         return '30px';
     }
     return '40px';
-}};
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
-  box-sizing: border-box;
-
-  &:active,
-  &:focus,
-  &:hover {
-    opacity: ${props => (props.$disabled ? 0.6 : 1)};
-  }
-`;
-const Label$5 = styled.span `
-  color: ${props => props.$content_color || '#fff'};
-  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 1;
-`;
-const StyledIcon$5 = styled.span `
-  margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
-  margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-`;
-const Badge$1 = styled.span `
-  width: ${props => (props.$small ? '20px' : '24px')};
-  height: ${props => (props.$small ? '20px' : '24px')};
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background-color: ${props => props.$bg_color || '#fff'};
-  color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${props => (props.$small ? '10px' : '12px')};
-  font-weight: 600;
-  font-family: ${FontStyles.DEFAULT};
-  letter-spacing: -1px;
-  margin-left: ${props => (props.$small ? '5px' : '10px')};
-  margin-right: ${props => (props.$small ? '-5px' : '-10px')};
+}};
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${props => (props.$iconPosition === 'before' ? '8px' : '0px')};
+  flex-direction: ${props => (props.$iconPosition === 'before' ? 'row-reverse' : 'row')};
+  opacity: ${props => (props.$disabled ? 0.6 : 0.9)};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => props.$border_color || props.theme.PRIMARY_COLOR.Hex};
+  box-sizing: border-box;
+
+  &:active,
+  &:focus,
+  &:hover {
+    opacity: ${props => (props.$disabled ? 0.6 : 1)};
+  }
+`;
+const Label$5 = styled.span `
+  color: ${props => props.$content_color || '#fff'};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 1;
+`;
+const StyledIcon$5 = styled.span `
+  margin-left: ${props => (props.$hasChildren ? '6px' : '0px')};
+  margin-right: ${props => (props.$hasChildren ? '-4px' : '0px')};
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`;
+const Badge$1 = styled.span `
+  width: ${props => (props.$small ? '20px' : '24px')};
+  height: ${props => (props.$small ? '20px' : '24px')};
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${props => props.$bg_color || '#fff'};
+  color: ${props => props.$content_color || props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${props => (props.$small ? '10px' : '12px')};
+  font-weight: 600;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: -1px;
+  margin-left: ${props => (props.$small ? '5px' : '10px')};
+  margin-right: ${props => (props.$small ? '-5px' : '-10px')};
 `;
 const Button = (_a) => {
-    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "toolTip", "title"]);
+    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', iconPosition = 'after', toolTip, title = '' } = _a, accessibleProps = __rest(_a, ["badge", "children", "disabled", "icon", "isForm", "loading", "margin", "onClick", "small", "format", "iconPosition", "toolTip", "title"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const has_children = children && children.length > 0;
     const button_type_mapping = {
@@ -295,126 +310,130 @@ const Button = (_a) => {
         },
     };
     const format_styles = button_type_mapping[format];
-    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, "$margin": margin, "$small": small, disabled: disabled || loading, onClick: disabled || loading ? undefined : onClick, title: title, type: isForm ? 'submit' : undefined }, accessibleProps),
-        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small }, children)) : null,
-        icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children },
-            React.createElement(Icon, { color: format ? format_styles.content_color : '#fff', path: loading ? js.mdiLoading : icon, size: small ? '20px' : '24px', spin: loading }))) : null,
-        badge && !icon ? (React.createElement(Badge$1, { "$bg_color": format_styles.badge_bg_color, "$content_color": format_styles.badge_content_color, "$small": small }, badge)) : null));
+    const id = generateUniqueId('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: `${id}-styled-button` }),
+        children ? (React.createElement(Label$5, { "$content_color": format_styles.content_color, "$small": small, id: `${id}-label` }, children)) : null,
+        icon && !badge ? (React.createElement(StyledIcon$5, { "$hasChildren": !!has_children, id: `${id}-icon` },
+            React.createElement(Icon, { color: format ? format_styles === null || format_styles === void 0 ? void 0 : format_styles.content_color : '#fff', id: `${id}-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: `${id}-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));
     }
     return button_view;
-};
-
-const H1 = styled.h1 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 30px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.4em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
-`;
-const H2 = styled.h2 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 24px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.33em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
-`;
-const H3 = styled.h3 `
-  color: ${Colors.BLACK.Hex};
-  font-size: 18px;
-  font-weight: ${props => (props.$bold ? '500' : '400')};
-  line-height: 1.33em;
-  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
-  margin: ${props => props.$margin || '0px'};
-  padding: ${props => props.$padding || '0px'};
-  box-sizing: border-box;
+};
+
+const H1 = styled.h1 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 30px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.4em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H2 = styled.h2 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 24px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
+`;
+const H3 = styled.h3 `
+  color: ${Colors.BLACK.Hex};
+  font-size: 18px;
+  font-weight: ${props => (props.$bold ? '500' : '400')};
+  line-height: 1.33em;
+  font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;
+  margin: ${props => props.$margin || '0px'};
+  padding: ${props => props.$padding || '0px'};
+  box-sizing: border-box;
 `;
 const Heading = (_a) => {
     var { bold, children, margin, padding, type } = _a, accessibleProps = __rest(_a, ["bold", "children", "margin", "padding", "type"]);
+    const id = generateUniqueId('heading');
     switch (type) {
         case 'secondary': {
-            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H2, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${id}-h2` }), children));
         }
         case 'tertiary': {
-            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H3, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${id}-h3` }), children));
         }
         default: {
-            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps), children));
+            return (React.createElement(H1, Object.assign({ "$bold": bold, "$margin": margin, "$padding": padding }, accessibleProps, { id: `${id}-h1` }), children));
         }
     }
 };
 Heading.defaultProps = {
     bold: false,
     type: 'primary',
-};
-
-const Wrapper$g = styled.div `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+};
+
+const Wrapper$g = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 `;
 const Container$4 = styled.dialog(props => (Object.assign({ maxWidth: '600px', width: 'auto', borderRadius: '8px', overflow: 'hidden', boxShadow: '0px 10px 30px -15px rgba(0, 0, 0, 0.2)', outline: 'none', border: 'none', position: 'relative', padding: '40px', textAlign: 'center', boxSizing: 'border-box', wordWrap: 'break-word' }, props.$customStyle)));
-const Buttons$1 = styled.div `
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  margin-top: 30px;
-  box-sizing: border-box;
+const Buttons$1 = styled.div `
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 30px;
+  box-sizing: border-box;
 `;
 const ActionDialog = (_a) => {
     var { description, title, primaryButton, secondaryButton, tertiaryButton, style = {} } = _a, accessibleProps = __rest(_a, ["description", "title", "primaryButton", "secondaryButton", "tertiaryButton", "style"]);
-    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps),
-        React.createElement(Container$4, { "$customStyle": style, open: true },
-            title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
-            description ? React.createElement(Copy, { align: 'center' }, description) : null,
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, null,
-                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
-                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
-                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)));
-};
-
-const Wrapper$f = styled.div `
-  border: 1px solid #f1f1f1;
-  border-radius: 4px;
-  border-left-width: 4px;
-  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: flex-start;
-  gap: ${({ $small }) => ($small ? '8px' : '20px')};
-  padding: ${({ $small }) => ($small ? '11px' : '20px')};
-  box-sizing: border-box;
-`;
-const StyledIcon$4 = styled(Icon) `
-  flex-shrink: 0;
-`;
-const Action$1 = styled.div `
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  cursor: pointer;
-  margin-top: 6px;
+    const id = generateUniqueId('action-dialog');
+    return (React.createElement(Wrapper$g, Object.assign({}, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Container$4, { "$customStyle": style, id: `${id}-container`, open: true },
+            title ? (React.createElement(Heading, { id: `${id}-title`, margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
+            description ? (React.createElement(Copy, { align: 'center', id: `${id}-description` }, description)) : null,
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(Buttons$1, { id: `${id}-buttons` },
+                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
+                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
+                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)));
+};
+
+const Wrapper$f = styled.div `
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  border-left-width: 4px;
+  box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ $small }) => ($small ? '8px' : '20px')};
+  padding: ${({ $small }) => ($small ? '11px' : '20px')};
+  box-sizing: border-box;
+`;
+const StyledIcon$4 = styled(Icon) `
+  flex-shrink: 0;
+`;
+const Action$1 = styled.div `
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  cursor: pointer;
+  margin-top: 6px;
 `;
 Action$1.defaultProps = { theme: EditableTheme };
 const Alert = (_a) => {
     var { action, type = 'info', title, description, small = false } = _a, accessibleProps = __rest(_a, ["action", "type", "title", "description", "small"]);
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
+    const id = generateUniqueId('alert');
     const type_mapping = {
         info: {
             color: theme.PRIMARY_COLOR.Hex,
@@ -433,14 +452,14 @@ const Alert = (_a) => {
             icon: js.mdiCheckboxMarkedCircleOutline,
         },
     };
-    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, style: { borderLeftColor: type_mapping[type].color } }),
-        React.createElement(StyledIcon$4, { color: type_mapping[type].color, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
-        React.createElement("div", null,
-            title && !small ? (React.createElement(Heading, { bold: true, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
-            description ? (React.createElement(Copy, { margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
-            action && !small ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
-};
-
+    return (React.createElement(Wrapper$f, Object.assign({}, accessibleProps, { "$small": small, id: `${id}-wrapper`, style: { borderLeftColor: type_mapping[type].color } }),
+        React.createElement(StyledIcon$4, { color: type_mapping[type].color, id: `${id}-icon`, path: type_mapping[type].icon, size: small ? '20px' : '30px' }),
+        React.createElement("div", { id: `${id}-content` },
+            title && !small ? (React.createElement(Heading, { bold: true, id: `${id}-title`, margin: '2px 0 0 0', type: 'tertiary' }, title)) : null,
+            description ? (React.createElement(Copy, { id: `${id}-description`, margin: small ? '' : '6px 0 0 0 !important' }, description)) : null,
+            action && !small ? (React.createElement(Action$1, { id: `${id}-action`, onClick: action.onClick }, action.label)) : null)));
+};
+
 const colorMapping = {
     black: {
         fill_1: '#000000',
@@ -466,350 +485,362 @@ const colorMapping = {
 const Logo = (_a) => {
     var { type = 'standard_full', height = '50px' } = _a, accessibleProps = __rest(_a, ["type", "height"]);
     const type_parts = type.split('_');
+    const id = generateUniqueId('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),
-                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] })));
+            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: `${id}-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: `${id}-path` })));
         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),
-                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 }),
-                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 }),
-                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 }),
-                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 }),
-                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 }),
-                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 }),
-                React.createElement("path", { d: 'M67.8498 45.479C67.5109 44.893 66.7322 43.5486 66.2043 42.6319H55.1965C52.3299 42.6319 49.8532 41.6095 47.8364 39.5923C45.819 37.5755 44.7966 35.0985 44.7966 32.2321C44.7966 29.3656 45.819 26.8886 47.8364 24.8718C49.8388 22.8332 52.316 21.7975 55.1965 21.7975C58.0632 21.7975 60.5398 22.8199 62.5565 24.8374C63.6038 25.8847 64.3824 27.093 64.9357 28.5312L65.2435 29.3327H53.8141C53.231 30.2171 52.5673 31.6476 52.303 32.2354L53.912 35.0969H67.474L71.0059 28.6192C70.2872 25.5702 68.8261 22.9293 66.6625 20.7657C63.5219 17.6257 59.6649 16.0333 55.1965 16.0333C50.7283 16.0333 46.8708 17.6257 43.7303 20.7657C40.546 23.9501 38.9979 27.7011 38.9979 32.2321C38.9979 36.7001 40.5903 40.5577 43.7303 43.6981C46.8708 46.8384 50.7283 48.4308 55.1965 48.4308H66.0873C66.9322 47.0737 67.5668 45.977 67.8498 45.479', fill: colorMapping[type_parts[1]].fill_1 }),
-                React.createElement("path", { d: 'M27.6655 20.7443C26.9235 20.002 26.2307 19.4097 25.608 18.9831C22.7338 17.0113 19.5684 16.0117 16.1992 16.0117C13.6229 16.0117 11.1676 16.5943 8.9002 17.7442C8.1016 18.1264 7.38657 18.6118 6.73074 19.0799L5.88805 19.6819C5.85364 19.711 5.81716 19.7449 5.78223 19.7749L5.77618 17.9067C5.78246 17.9022 5.7892 17.8965 5.79554 17.8921L5.72168 1.52402L2.84058 1.54784e-05L0 1.6145V24.9966V30.8918C0.0184614 30.8508 0.0393993 30.8108 0.0580857 30.7698C0.0216133 31.2417 0 31.7206 0 32.2105V47.6757L2.84688 49.2499C4.7412 48.3293 5.4988 47.9164 5.79866 47.7385V32.2105C5.79866 29.3439 6.82128 26.8672 8.83853 24.8504C10.8415 22.8118 13.319 21.7759 16.1992 21.7759C19.0796 21.7759 21.557 22.8118 23.5635 24.8538C25.3441 26.6351 26.3374 28.7976 26.5963 31.4625C26.6263 31.6669 26.6339 40.3058 26.6339 47.6694C27.2825 48.0147 28.6127 48.8167 29.5141 49.3059C29.9448 49.0814 32.0589 47.8425 32.3979 47.6669V32.2105C32.3979 27.6795 30.8499 23.9285 27.6655 20.7443Z', fill: colorMapping[type_parts[1]].fill_1 })));
+            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: `${id}-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: `${id}-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: `${id}-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: `${id}-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: `${id}-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: `${id}-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: `${id}-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: `${id}-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: `${id}-path-8` })));
     }
-};
-
-const Container$3 = styled.header `
-  width: 100%;
-  display: flex;
-  padding: 20px;
-  box-sizing: border-box;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  background: '#fff';
-  justify-content: space-between;
-`;
-const LogoWrapper = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Image = styled.img `
-  height: 30px !important;
-  width: auto !important;
-`;
-const Buttons = styled.div `
-  display: flex;
-  flex-direction: row;
-  column-gap: 10px;
-  flex-direction: reverse;
+};
+
+const Container$3 = styled.header `
+  width: 100%;
+  display: flex;
+  padding: 20px;
+  box-sizing: border-box;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  background: '#fff';
+  justify-content: space-between;
+`;
+const LogoWrapper = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Image = styled.img `
+  height: 30px !important;
+  width: auto !important;
+`;
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: row;
+  column-gap: 10px;
+  flex-direction: reverse;
 `;
 const AppHeader = ({ logoUrl, buttons = [] }) => {
-    return (React.createElement(Container$3, null,
-        React.createElement(LogoWrapper, null, logoUrl ? React.createElement(Image, { src: logoUrl }) : React.createElement(Logo, { height: '30px' })),
-        React.createElement(Buttons, null, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b)))))));
-};
-
-const Wrapper$e = styled.div `
-  display: inline-block;
-  border-radius: 4px;
-  padding: 4px 6px;
-  background: ${props => Colors[props.$color].Hex};
-  color: #ffffff;
-  box-sizing: border-box;
-  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
-`;
-const Content$2 = styled.div `
-  display: flex;
-  align-items: center;
-`;
-const Label$4 = styled.div `
-  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
-  font-size: ${FontSizes.SMALL};
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.2em;
-`;
-const Remove$1 = styled.div `
-  margin-left: 10px;
-  display: flex;
-  align-items: center;
+    const id = generateUniqueId('app-header');
+    return (React.createElement(Container$3, { id: `${id}-container` },
+        React.createElement(LogoWrapper, { id: `${id}-logo-wrapper` }, logoUrl ? (React.createElement(Image, { id: `${id}-logo`, src: logoUrl })) : (React.createElement(Logo, { height: '30px', id: `${id}-default-logo` }))),
+        React.createElement(Buttons, { id: `${id}-buttons` }, buttons.map((b, i) => (React.createElement(Button, Object.assign({ key: i }, b, { id: `${id}-button-${i}` })))))));
+};
+
+const Wrapper$e = styled.div `
+  display: inline-block;
+  border-radius: 4px;
+  padding: 4px 6px;
+  background: ${props => Colors[props.$color].Hex};
+  color: #ffffff;
+  box-sizing: border-box;
+  cursor: ${props => (props.$removable ? 'pointer' : 'default')};
+`;
+const Content$2 = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Label$4 = styled.div `
+  color: ${props => (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff')};
+  font-size: ${FontSizes.SMALL};
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.2em;
+`;
+const Remove$1 = styled.div `
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
 `;
 const Tag = (_a) => {
     var { children, color = 'PRIMARY', removable, onClick } = _a, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
-    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
-        React.createElement(Content$2, null,
-            React.createElement(Label$4, { "$color": color }, children),
-            removable ? (React.createElement(Remove$1, null,
-                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: js.mdiClose, size: '15px' }))) : null)));
-};
-
-const SidebarContainer = styled.div `
-  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 12px 0px;
-  width: ${props => (props.$isOpen ? props.$width : '60px')};
-`;
-const MenuWrapper$1 = styled.button `
-  display: flex;
-  align-items: center;
-  border: 0px;
-  background-color: transparent;
-  padding-left: 0px;
-  border-left-width: 4px;
-  border-left-style: solid;
-  border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
-  cursor: pointer;
-  height: 40px;
-
-  &:hover > div {
-    color: ${props => props.$color.Hex};
-  }
-
-  &:hover > svg > path {
-    fill: ${Colors.BLACK.Hex} !important;
-  }
-`;
-const MenuIcon = styled(Icon) `
-  width: 20px;
-  height: 20px;
-  margin: 0px 16px;
-  flex-shrink: 0;
-
-  > path {
-    fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
-  }
-`;
-const MenuLabel = styled.div `
-  color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
-  flex: 1;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 16px;
-  padding: 12px 0px;
-  letter-spacing: 1px;
-`;
-const SubMenu = styled.div `
-  overflow-y: auto;
-  padding-left: 44px;
-  padding-right: 20px;
-  padding-bottom: 10px;
-`;
-const SubMenuItem = styled.a `
-  display: block;
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 20px;
-  text-decoration: none;
-  font-weight: ${({ $active }) => ($active ? '500' : '400')};
-  color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
-  background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.$color.Hex};
-    font-weight: 500;
-  }
-`;
-const Footer = styled.div `
-  padding: 20px 14px 0px;
-  display: flex;
-  align-items: center;
-`;
-const FooterInfo = styled.div `
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  align-items: flex-start;
-`;
-const SidebarMenuContainer = styled.div `
-  flex-grow: 1;
+    const id = generateUniqueId('tag');
+    return (React.createElement(Wrapper$e, Object.assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Content$2, { id: `${id}-content` },
+            React.createElement(Label$4, { "$color": color, id: `${id}-label` }, children),
+            removable ? (React.createElement(Remove$1, { id: `${id}-remove` },
+                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', id: `${id}-icon`, path: js.mdiClose, size: '15px' }))) : null)));
+};
+
+const SidebarContainer = styled.div `
+  border-right: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 0px;
+  width: ${props => (props.$isOpen ? props.$width : '60px')};
+`;
+const MenuWrapper$1 = styled.button `
+  display: flex;
+  align-items: center;
+  border: 0px;
+  background-color: transparent;
+  padding-left: 0px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: ${props => (props.$active ? props.$color.Hex : 'transparent')};
+  cursor: pointer;
+  height: 40px;
+
+  &:hover > div {
+    color: ${props => props.$color.Hex};
+  }
+
+  &:hover > svg > path {
+    fill: ${Colors.BLACK.Hex} !important;
+  }
+`;
+const MenuIcon = styled(Icon) `
+  width: 20px;
+  height: 20px;
+  margin: 0px 16px;
+  flex-shrink: 0;
+
+  > path {
+    fill: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)} !important;
+  }
+`;
+const MenuLabel = styled.div `
+  color: ${props => (props.$active ? props.$color.Hex : Colors.BLACK.Hex)};
+  flex: 1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 16px;
+  padding: 12px 0px;
+  letter-spacing: 1px;
+`;
+const SubMenu = styled.div `
+  overflow-y: auto;
+  padding-left: 44px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+`;
+const SubMenuItem = styled.a `
+  display: block;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 20px;
+  text-decoration: none;
+  font-weight: ${({ $active }) => ($active ? '500' : '400')};
+  color: ${({ $active }) => ($active ? Colors.BLACK.Hex : Colors.GRAY.Hex)};
+  background: ${props => (props.$active ? `rgba(${props.$color.Rgb}, 0.1)` : '#fff')};
+  cursor: pointer;
+
+  &:hover {
+    color: ${props => props.$color.Hex};
+    font-weight: 500;
+  }
+`;
+const Footer = styled.div `
+  padding: 20px 14px 0px;
+  display: flex;
+  align-items: center;
+`;
+const FooterInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: flex-start;
+`;
+const SidebarMenuContainer = styled.div `
+  flex-grow: 1;
 `;
 const AppMenu = ({ menu, isCollapsed, footerTag, defaultWidth = '280px' }) => {
     const theme = React.useContext(styled.ThemeContext) || EditableTheme;
     const [collapsed, toggleCollapse] = React.useState(isCollapsed);
-    return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth },
-        React.createElement(SidebarMenuContainer, null, menu.map(nav_item => {
-            return (React.createElement(React.Fragment, { key: nav_item.label },
-                React.createElement(MenuWrapper$1, { "$active": !!nav_item.is_active, "$color": theme.PRIMARY_COLOR, 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, path: nav_item.icon }),
-                    collapsed ? null : (React.createElement(MenuLabel, { "$active": nav_item.is_active, "$color": theme.PRIMARY_COLOR }, nav_item.label))),
-                nav_item.is_active && nav_item.menu && !collapsed ? (React.createElement(SubMenu, null, nav_item.menu.map(menu_item => (React.createElement(SubMenuItem, { "$active": menu_item.is_active, "$color": theme.PRIMARY_COLOR, key: menu_item.label, onClick: menu_item.onClick }, menu_item.label))))) : null));
+    const id = generateUniqueId('app-menu');
+    return (React.createElement(SidebarContainer, { "$isOpen": !collapsed, "$width": defaultWidth, id: `${id}-sidebar-container` },
+        React.createElement(SidebarMenuContainer, { id: `${id}-sidebar-menu-container` }, menu.map((nav_item, navIndex) => {
+            const navItemId = generateUniqueId(`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) => {
+                    const menuItemId = generateUniqueId(`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));
+                }))) : null));
         })),
-        React.createElement(Footer, null,
-            collapsed ? null : (React.createElement(FooterInfo, null,
-                footerTag ? React.createElement(Tag, null, footerTag) : null,
-                React.createElement(Copy, { margin: '8px 0 0 0', type: 'small' },
+        React.createElement(Footer, { id: `${id}-footer` },
+            collapsed ? null : (React.createElement(FooterInfo, { id: `${id}-footer-info` },
+                footerTag ? React.createElement(Tag, { id: `${id}-footer-tag` }, footerTag) : null,
+                React.createElement(Copy, { id: `${id}-footer-copy`, margin: '8px 0 0 0', type: 'small' },
                     "\u00A9 ",
                     new Date().getFullYear(),
                     " Hexure"))),
-            React.createElement(Button, { icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, onClick: (e) => {
+            React.createElement(Button, { icon: collapsed ? js.mdiChevronRight : js.mdiChevronLeft, id: `${id}-collapse-button`, onClick: (e) => {
                     e.preventDefault();
                     toggleCollapse(!collapsed);
                 }, small: true }))));
-};
-
-const Wrapper$d = styled.div `
-  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 8px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
+};
+
+const Wrapper$d = styled.div `
+  border: 1px solid ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
 `;
 Wrapper$d.defaultProps = { theme: EditableTheme };
-const Left = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-`;
-const Info$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  margin-right: 30px;
-`;
-const Selected = styled.span `
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  line-height: 1;
-`;
-const Clear = styled.span `
-  font-size: 14px;
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  line-height: 1;
-  cursor: pointer;
-  padding-left: 10px;
-  margin-left: 10px;
-  border-left: 1px solid #ccc;
+const Left = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+`;
+const Info$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-right: 30px;
+`;
+const Selected = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  line-height: 1;
+`;
+const Clear = styled.span `
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  line-height: 1;
+  cursor: pointer;
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ccc;
 `;
 Clear.defaultProps = { theme: EditableTheme };
-const Actions$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  column-gap: 10px;
-`;
-const Error$1 = styled.div `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  background: rgba(${Colors.RED.Rgb}, 0.1);
-  border-radius: 4px;
-  padding: 6px 8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-left: 30px;
-`;
-const ErrorMsg = styled.span `
-  font-size: 14px;
-  font-weight: 500;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1em;
-  color: ${Colors.RED.Hex};
-  margin-left: 8px;
+const Actions$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+`;
+const Error$1 = styled.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: rgba(${Colors.RED.Rgb}, 0.1);
+  border-radius: 4px;
+  padding: 6px 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-left: 30px;
+`;
+const ErrorMsg = styled.span `
+  font-size: 14px;
+  font-weight: 500;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.RED.Hex};
+  margin-left: 8px;
 `;
 const BulkActionBar = (_a) => {
     var { actions = [], errorMsg, onClear, selectedCount = 0 } = _a, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
-    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps),
-        React.createElement(Left, null,
-            React.createElement(Info$1, null,
-                React.createElement(Selected, null,
+    const id = generateUniqueId('bulk-action-bar');
+    return (React.createElement(Wrapper$d, Object.assign({}, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Left, { id: `${id}-left` },
+            React.createElement(Info$1, { id: `${id}-info` },
+                React.createElement(Selected, { id: `${id}-selected` },
                     selectedCount,
                     " Selected"),
-                onClear ? React.createElement(Clear, { onClick: onClear }, "Clear") : null),
-            React.createElement(Actions$1, null, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { key: i, small: true })))))),
-        errorMsg ? (React.createElement(Error$1, null,
-            React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
-            React.createElement(ErrorMsg, null, errorMsg))) : null));
-};
-
-const Wrapper$c = styled.div `
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: ${props => props.$maxHeight || '312px'};
-  padding: 10px;
-  width: 200px;
-`;
-const MenuItem = styled.div `
-  align-items: center;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  display: flex;
-  gap: 8px;
-  height: 38px;
-  padding: 8px;
-  &:hover {
-    background: rgba(1, 147, 215, 0.1);
-    cursor: pointer;
-
-    svg,
-    path {
-      fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-    }
-  }
+                onClear ? (React.createElement(Clear, { id: `${id}-clear`, onClick: onClear }, "Clear")) : null),
+            React.createElement(Actions$1, { id: `${id}-actions` }, actions.map((action, i) => (React.createElement(Button, Object.assign({}, action, { id: `${id}-action-${i}`, key: i, small: true })))))),
+        errorMsg ? (React.createElement(Error$1, { id: `${id}-error` },
+            React.createElement(Icon, { color: Colors.RED.Hex, id: `${id}-error-icon`, path: js.mdiInformationOutline, size: '20px' }),
+            React.createElement(ErrorMsg, { id: `${id}-error-msg` }, errorMsg))) : null));
+};
+
+const Wrapper$c = styled.div `
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: ${props => props.$maxHeight || '312px'};
+  padding: 10px;
+  width: 200px;
+`;
+const MenuItem = styled.div `
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  display: flex;
+  gap: 8px;
+  height: 38px;
+  padding: 8px;
+  &:hover {
+    background: rgba(1, 147, 215, 0.1);
+    cursor: pointer;
+
+    svg,
+    path {
+      fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+    }
+  }
 `;
 MenuItem.defaultProps = { theme: EditableTheme };
-const Title$1 = styled.span `
-  font-family: Roboto;
-  font-size: 14px;
-  font-weight: 400;
-  height: auto;
-  letter-spacing: 0px;
-  line-height: 22px;
-  text-align: left;
-  color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+const Title$1 = styled.span `
+  font-family: Roboto;
+  font-size: 14px;
+  font-weight: 400;
+  height: auto;
+  letter-spacing: 0px;
+  line-height: 22px;
+  text-align: left;
+  color: ${({ disabled }) => (disabled ? Colors.LIGHT_GRAY.Hex : 'inherit')};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
 `;
 Title$1.defaultProps = {
     disabled: false,
 };
 const MoreMenu = (_a) => {
     var { maxHeight, menuItems = [] } = _a, accessibleProps = __rest(_a, ["maxHeight", "menuItems"]);
-    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps), menuItems.map((item, i) => {
+    const id = generateUniqueId('more-menu');
+    return (React.createElement(Wrapper$c, Object.assign({ "$maxHeight": maxHeight }, accessibleProps, { id: `${id}-wrapper` }), menuItems.map((item, i) => {
         var _a;
-        return (React.createElement(MenuItem, { key: i, onClick: item.onClick },
-            item.icon ? (React.createElement(Icon, { color: item.disabled ? Colors.LIGHT_GRAY.Hex : Colors.MEDIUM_GRAY.Hex, path: item.icon, size: '20px' })) : null,
-            React.createElement(Title$1, { disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label)));
+        const itemId = generateUniqueId(`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)));
     })));
-};
-
-const MenuWrapper = styled.div `
-  position: relative; // Ensure this is relative
-  display: inline-block;
-`;
-const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute; // Changed from fixed to absolute
-  top: ${props => props.$top};
-  left: ${props => props.$left};
-  width: ${props => props.$menuWidth};
-  max-height: ${props => props.maxHeight};
-  z-index: 10;
+};
+
+const MenuWrapper = styled.div `
+  position: relative;
+  display: inline-block;
+`;
+const StyledMoreMenu = styled(MoreMenu) `
+  position: absolute;
+  top: ${props => props.$top};
+  left: ${props => props.$left};
+  width: ${props => props.$menuWidth};
+  max-height: ${props => props.maxHeight};
+  z-index: 10;
 `;
 const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = 'bottomLeft', format = 'primary', menuWidth = '200px', enableHover = true, enableClick = false, show = false, }) => {
     const [showMenu, toggleMenu] = React.useState(false);
     const [menuPosition, setMenuPosition] = React.useState({ top: '0px', left: '0px' });
     const menuWrapperRef = React.useRef(null);
+    const id = generateUniqueId('button-menu');
     React.useEffect(() => {
         toggleMenu(show);
     }, [show]);
@@ -875,107 +906,108 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
             setMenuPosition({ top: `${top}px`, left: `${left}px` });
         }
     }, [showMenu, position, menuWidth]);
-    return (React.createElement(MenuWrapper, { onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
-        React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, small: small }, label),
-        showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, maxHeight: maxHeight, menuItems: menuItems }))));
-};
-
-const Wrapper$b = styled.label `
-  border-radius: 4px;
-  padding: 4px 0px 4px 6px;
-  margin-left: -6px;
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  font-size: ${FontSizes.DEFAULT};
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: relative;
-
-  &:focus-within {
-    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
-  }
+    return (React.createElement(MenuWrapper, { id: `${id}-menu-wrapper`, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: menuWrapperRef },
+        React.createElement(Button, { disabled: disabled, format: format, icon: js.mdiDotsHorizontal, id: `${id}-button`, small: small }, label),
+        showMenu && (React.createElement(StyledMoreMenu, { "$left": menuPosition.left, "$menuWidth": menuWidth, "$top": menuPosition.top, id: `${id}-more-menu`, maxHeight: maxHeight, menuItems: menuItems }))));
+};
+
+const Wrapper$b = styled.label `
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: relative;
+
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
 Wrapper$b.defaultProps = { theme: EditableTheme };
-const Input$2 = styled.input `
-  font-size: 20px;
-  margin: 0px;
-  line-height: 1.1em;
-  box-sizing: border-box;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-  &:checked + span {
-    background-color: ${Colors.PRIMARY.Hex};
-    border-color: ${Colors.PRIMARY.Hex};
-  }
-  &:checked:disabled + span {
-    background-color: ${Colors.MEDIUM_GRAY.Hex};
-    border-color: ${Colors.MEDIUM_GRAY.Hex};
-  }
-  &:disabled + span {
-    background-color: #d3d3d3;
-    border-color: #d3d3d3;
-  }
-  &:checked + span:after {
-    display: block;
-  }
-`;
-const Check$1 = styled.span `
-  height: 17px;
-  width: 17px;
-  min-width: 17px;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    left: 3px;
-    top: 0px;
-    width: 7px;
-    height: 12px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label$3 = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${props => props.color || Colors.BLACK.Hex};
-  margin-left: 6px;
-  box-sizing: border-box;
+const Input$2 = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.1em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    background-color: ${Colors.PRIMARY.Hex};
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked:disabled + span {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+    border-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:checked + span:after {
+    display: block;
+  }
+`;
+const Check$1 = styled.span `
+  height: 17px;
+  width: 17px;
+  min-width: 17px;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 0px;
+    width: 7px;
+    height: 12px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label$3 = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${props => props.color || Colors.BLACK.Hex};
+  margin-left: 6px;
+  box-sizing: border-box;
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip"]);
-    return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps),
-        React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
-        React.createElement(Check$1, { "$invalid": invalid }),
-        children ? (React.createElement(Label$3, { color: color },
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
+    const id = generateUniqueId('checkbox');
+    return (React.createElement(Wrapper$b, Object.assign({ "$disabled": disabled }, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Input$2, { checked: checked, disabled: disabled, id: `${id}-input`, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
+        React.createElement(Check$1, { "$invalid": invalid, id: `${id}-check` }),
+        children ? (React.createElement(Label$3, { color: color, id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
-};
-
-const SelectAll = styled.div `
-  padding: 8px 12px;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-  box-sizing: border-box;
+};
+
+const SelectAll = styled.div `
+  padding: 8px 12px;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+  box-sizing: border-box;
 `;
-const Options$1 = styled.div `
-  padding: 12px;
-  box-sizing: border-box;
+const Options$1 = styled.div `
+  padding: 12px;
+  box-sizing: border-box;
 `;
 const Checklist = (_a) => {
     var { disabled, onChange, options, selected = [], showSelectAll } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
@@ -1004,83 +1036,86 @@ const Checklist = (_a) => {
             },
         });
     };
+    const id = generateUniqueId('checklist');
     return (React.createElement(React.Fragment, null,
-        showSelectAll && values.length ? (React.createElement(SelectAll, null,
-            React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, onChange: handleToggleAll }, "Select All"))) : null,
-        React.createElement(Options$1, null, options.map((option, i) => {
+        showSelectAll && values.length ? (React.createElement(SelectAll, { id: `${id}-select-all` },
+            React.createElement(Checkbox, { checked: selected.length === values.length, disabled: disabled, id: `${id}-checkbox-select-all`, onChange: handleToggleAll }, "Select All"))) : null,
+        React.createElement(Options$1, { id: `${id}-options` }, options.map((option, i) => {
             const label = `${option.label || option.value}`;
             const checked = selected.includes(option.value);
-            return (React.createElement(Checkbox, Object.assign({ key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
+            const optionId = generateUniqueId('option');
+            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));
         }))));
-};
-
-const Wrapper$a = styled.div `
-  border-radius: 4px;
-  height: 40px;
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
-  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
-  box-sizing: border-box;
-  padding: 10px 0px;
-  display: flex;
-  align-items: center;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+};
+
+const Wrapper$a = styled.div `
+  border-radius: 4px;
+  height: 40px;
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  cursor: ${props => (props.$readOnly ? 'default' : 'pointer')};
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px'};
+  flex-grow: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0};
+  box-sizing: border-box;
+  padding: 10px 0px;
+  display: flex;
+  align-items: center;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 Wrapper$a.defaultProps = { theme: EditableTheme };
-const Trigger$1 = styled.select `
-  appearance: none;
-  box-shadow: none;
-  outline: none;
-  border: none;
-  color: ${Colors.BLACK.Hex};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 2.9em;
-  background-color: transparent;
-  background-image: none;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0px 30px 0px 10px;
-  box-sizing: border-box;
-  position: relative;
-  z-index: 2;
-`;
-const IconWrapper$2 = styled(Icon) `
-  position: absolute;
-  right: 9px;
-  z-index: 1;
-`;
-const SearchInput$1 = styled.input `
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  z-index: 999;
-  width: 90%;
-  height: 30px;
-  border: none;
-  outline: none;
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  white-space: nowrap;
+const Trigger$1 = styled.select `
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  border: none;
+  color: ${Colors.BLACK.Hex};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 3.1em;
+  background-color: transparent;
+  background-image: none;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0px 30px 0px 10px;
+  box-sizing: border-box;
+  position: relative;
+  z-index: 2;
+`;
+const IconWrapper$2 = styled(Icon) `
+  position: absolute;
+  right: 9px;
+  z-index: 1;
+`;
+const SearchInput$1 = styled.input `
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  z-index: 999;
+  width: 90%;
+  height: 30px;
+  border: none;
+  outline: none;
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 const Select = (_a) => {
-    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style"]);
+    var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex"]);
     const [searchTerm, setSearchTerm] = React.useState('');
     const [value, setValue] = React.useState(propValue || '');
+    const id = generateUniqueId('select');
     // Update the value when the prop changes
     React.useEffect(() => {
         setValue(propValue || '');
@@ -1100,24 +1135,24 @@ 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 },
-        searchable && (React.createElement(SearchInput$1, Object.assign({ onChange: handleSearch, placeholder: placeholder, type: 'text', value: searchTerm }, accessibleProps))),
-        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: handleChange, placeholder: placeholder, value: value }, accessibleProps),
-            placeholder && !value && (React.createElement("option", { disabled: true, value: '' }, placeholder)),
+    return (React.createElement(Wrapper$a, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, id: `${id}-wrapper` },
+        searchable && (React.createElement(SearchInput$1, Object.assign({ id: `${id}-search-input`, onChange: handleSearch, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
+        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, id: `${id}-trigger`, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, value: value }, accessibleProps),
+            placeholder && !value && (React.createElement("option", { disabled: true, id: `${id}-placeholder`, value: '' }, placeholder)),
             filteredOptionGroups &&
-                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { key: i, label: group.label || `Group ${i}` }, group.options.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
+                filteredOptionGroups.map((group, i) => (React.createElement("optgroup", { id: `${id}-optgroup-${i}`, key: i, label: group.label || `Group ${i}` }, group.options.map((option, j) => (React.createElement("option", { id: `${id}-option-${i}-${j}`, key: j, style: { color: option.color }, value: option.value }, option.label || option.value)))))),
             filteredOptions &&
-                filteredOptions.map((option, i) => (React.createElement("option", { key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
-        React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })));
-};
-
-const DatePickerWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-`;
-const Middle = styled.div `
-  margin: 0px -1px;
-  flex-grow: 1;
+                filteredOptions.map((option, i) => (React.createElement("option", { id: `${id}-option-${i}`, key: i, style: { color: option.color }, value: option.value }, option.label || option.value)))),
+        React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: js.mdiChevronDown, size: '22px' })));
+};
+
+const DatePickerWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Middle = styled.div `
+  margin: 0px -1px;
+  flex-grow: 1;
 `;
 const DatePicker = ({ readOnly = false, invalid = false, maxDate = null, minDate = null, date, 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -1192,72 +1227,73 @@ onChange = () => { }, style, }) => {
         setSelectedYear(e.target.value);
         setDDate(new_date);
     };
+    const id = generateUniqueId('date-picker');
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerWrapper, { "$style": style },
-            React.createElement(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, null,
-                React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
-            React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
-};
-
-const Scrim$1 = styled.div `
-  position: ${({ $position }) => $position};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
-  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
-`;
-const Container$2 = styled.div `
-  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
-  min-width: 400px;
-  width: ${({ $width }) => $width || '400px'};
-  overflow: hidden;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  outline: none;
-  border: none;
-  position: ${({ $position }) => $position};
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding: 0px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  background: #fff;
-`;
-const Header$2 = styled.div `
-  padding: 30px 20px;
-  display: flex;
-  align-items: flex-start;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  background: #fff;
-`;
-const Close$1 = styled.div `
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: pointer;
-`;
-const ContentWrapper$1 = styled.div `
-  overflow-x: hidden;
-  overflow-y: auto;
-  box-sizing: border-box;
-  flex: 1;
-  background: #fff;
-`;
-const ButtonBar$1 = styled.div `
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  gap: 10px;
-  flex-shrink: 0;
-  background: #fff;
+        React.createElement(DatePickerWrapper, { "$style": style, id: `${id}-wrapper` },
+            React.createElement(Select, { id: `${id}-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: `${id}-middle` },
+                React.createElement(Select, { id: `${id}-day-select`, invalid: invalid, onChange: handleDayChange, options: dayOptions, placeholder: 'Select Day', readOnly: readOnly, style: { borderRadius: '0px' }, value: selectedDay })),
+            React.createElement(Select, { id: `${id}-year-select`, invalid: invalid, onChange: handleYearChange, options: years, placeholder: 'Select Year', readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: selectedYear }))));
+};
+
+const Scrim$1 = styled.div `
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9998 : 10)};
+  background: ${({ $scrim }) => ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent')};
+`;
+const Container$2 = styled.div `
+  z-index: ${({ $position }) => ($position === 'fixed' ? 9999 : 11)};
+  min-width: 400px;
+  width: ${({ $width }) => $width || '400px'};
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: ${({ $position }) => $position};
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: #fff;
+`;
+const Header$2 = styled.div `
+  padding: 30px 20px;
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: #fff;
+`;
+const Close$1 = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const ContentWrapper$1 = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  box-sizing: border-box;
+  flex: 1;
+  background: #fff;
+`;
+const ButtonBar$1 = styled.div `
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  gap: 10px;
+  flex-shrink: 0;
+  background: #fff;
 `;
 const Drawer = (_a) => {
     var { children, description, title, onClose, primaryButton, position = 'fixed', secondaryButton, tertiaryButton, scrim = 'dark', width } = _a, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
@@ -1271,189 +1307,192 @@ const Drawer = (_a) => {
             document.onkeydown = null;
         };
     }, []);
+    const id = generateUniqueId('drawer');
     return (React.createElement(React.Fragment, null,
-        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width }),
-            React.createElement(Header$2, null,
-                React.createElement("div", null,
-                    title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
-                    description ? React.createElement(Copy, { color: 'GRAY' }, description) : null),
-                React.createElement(Close$1, { onClick: onClose },
-                    React.createElement(Button, { format: 'secondary', icon: js.mdiClose, small: true }))),
-            React.createElement(ContentWrapper$1, null, children),
-            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, null,
-                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
-                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' }))) : null,
-                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null),
-        scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
-};
-
+        React.createElement(Container$2, Object.assign({}, accessibleProps, { "$position": position, "$width": width, id: `${id}-container` }),
+            React.createElement(Header$2, { id: `${id}-header` },
+                React.createElement("div", { id: `${id}-header-content` },
+                    title ? (React.createElement(Heading, { id: `${id}-title`, type: 'secondary' }, title)) : null,
+                    description ? (React.createElement(Copy, { color: 'GRAY', id: `${id}-description` }, description)) : null),
+                React.createElement(Close$1, { id: `${id}-close`, onClick: onClose },
+                    React.createElement(Button, { format: 'secondary', icon: js.mdiClose, id: `${id}-close-button`, small: true }))),
+            React.createElement(ContentWrapper$1, { id: `${id}-content-wrapper` }, children),
+            primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar$1, { id: `${id}-button-bar` },
+                tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
+                secondaryButton ? (React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` }))) : null,
+                primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null),
+        scrim ? (React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, id: `${id}-scrim`, onClick: onClose })) : null));
+};
+
 const Wrapper$9 = styled.div(props => (Object.assign({ margin: '0px 0px 18px 0px' }, props.$customStyle)));
-const LabelRow = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 0 4px 0;
-  box-sizing: border-box;
-`;
-const Label$2 = styled.label `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  display: flex;
-  align-items: center;
-`;
-const Required = styled.span `
-  color: ${Colors.RED.Hex};
-  margin-left: 4px;
-`;
-const Action = styled.span `
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 1em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  cursor: pointer;
+const LabelRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 4px 0;
+  box-sizing: border-box;
+`;
+const Label$2 = styled.label `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  display: flex;
+  align-items: center;
+`;
+const Required = styled.span `
+  color: ${Colors.RED.Hex};
+  margin-left: 4px;
+`;
+const Action = styled.span `
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 1em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  cursor: pointer;
 `;
 Action.defaultProps = { theme: EditableTheme };
-const Description = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-  margin: 0 0 8px 0;
-  box-sizing: border-box;
-`;
-const Validation = styled.div `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  line-height: 1.3em;
-  font-family: ${FontStyles.DEFAULT};
-  color: ${Colors.RED.Hex};
-  margin: 4px 0 0 0;
-  box-sizing: border-box;
+const Description = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+  margin: 0 0 8px 0;
+  box-sizing: border-box;
+`;
+const Validation = styled.div `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  line-height: 1.3em;
+  font-family: ${FontStyles.DEFAULT};
+  color: ${Colors.RED.Hex};
+  margin: 4px 0 0 0;
+  box-sizing: border-box;
 `;
 const Field = (_a) => {
     var { action, children, validationText, label, description, required, htmlFor, style = {}, tooltip } = _a, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style", "tooltip"]);
-    return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps),
-        React.createElement(LabelRow, null,
-            React.createElement(Label$2, { htmlFor: htmlFor },
+    const id = generateUniqueId('field');
+    return (React.createElement(Wrapper$9, Object.assign({ "$customStyle": style }, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(LabelRow, { id: `${id}-label-row` },
+            React.createElement(Label$2, { htmlFor: htmlFor, id: `${id}-label` },
                 label,
-                required ? React.createElement(Required, null, "*") : null,
+                required ? React.createElement(Required, { id: `${id}-required` }, "*") : null,
                 tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null),
-            action ? (React.createElement(Action, { id: action.id, onClick: action.onClick }, action.label)) : null),
-        description ? React.createElement(Description, null, description) : null,
-        children,
-        validationText ? React.createElement(Validation, null, validationText) : null));
-};
-
-const Wrapper$8 = styled.fieldset `
-  margin-inline-start: 0px;
-  margin-inline-end: 0px;
-  padding-block-start: 0px;
-  padding-inline-start: 0px;
-  padding-inline-end: 0px;
-  padding-block-end: 0px;
-  min-inline-size: min-content;
-  border-width: 0px;
-  border-style: none;
-  border-color: transparent;
-  border-image: none;
-`;
-const Label$1 = styled.legend `
-  padding-inline-start: 0px;
-  padding-inline-end: 0px;
-
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 500;
-  line-height: 22px;
-  margin-bottom: 6px;
-`;
-const Content$1 = styled.div `
-  padding: 20px;
-  border-radius: 8px;
-  background: #fcfcfc;
+            action ? (React.createElement(Action, { id: action.id || `${id}-action`, onClick: action.onClick }, action.label)) : null),
+        description ? React.createElement(Description, { id: `${id}-description` }, description) : null,
+        React.createElement("div", { id: `${id}-children` }, children),
+        validationText ? React.createElement(Validation, { id: `${id}-validation` }, validationText) : null));
+};
+
+const Wrapper$8 = styled.fieldset `
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-block-start: 0px;
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+  padding-block-end: 0px;
+  min-inline-size: min-content;
+  border-width: 0px;
+  border-style: none;
+  border-color: transparent;
+  border-image: none;
+`;
+const Label$1 = styled.legend `
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
+
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 500;
+  line-height: 22px;
+  margin-bottom: 6px;
+`;
+const Content$1 = styled.div `
+  padding: 20px;
+  border-radius: 8px;
+  background: #fcfcfc;
 `;
 const FieldGroup = ({ children, label }) => {
-    return (React.createElement(Wrapper$8, null,
-        React.createElement(Label$1, null, label),
-        React.createElement(Content$1, null, children)));
-};
-
-const Dropzone = styled.div `
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: dashed;
-  border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
-  background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
-  cursor: copy;
+    const id = generateUniqueId('field-group');
+    return (React.createElement(Wrapper$8, { id: `${id}-wrapper` },
+        React.createElement(Label$1, { id: `${id}-label` }, label),
+        React.createElement(Content$1, { id: `${id}-content` }, children)));
+};
+
+const Dropzone = styled.div `
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: dashed;
+  border-color: ${props => (props.$dragging ? props.theme.PRIMARY_COLOR.Hex : '#cccccc')};
+  background: ${props => props.$dragging ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)` : '#ffffff'};
+  cursor: copy;
 `;
 Dropzone.defaultProps = { theme: EditableTheme };
-const IconWrapper$1 = styled.div `
-  width: 80px;
-  height: 80px;
-  border-radius: 40px;
-  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const StyledIcon$3 = styled(Icon) `
-  width: 40px !important;
-  height: 40px !important;
-
-  > path {
-    fill: ${Colors.GRAY.Hex} !important;
-  }
-`;
-const ClickZone = styled.div `
-  margin: 40px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-`;
-const Content = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  z-index: 99999;
-  gap: 2px;
-`;
-const Files = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  gap: 10px;
-  margin: 20px;
-`;
-const MessageDiv = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const File = styled.div `
-  display: flex;
-  padding: 10px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border-radius: 4px;
-  border: 1px solid #cccccc;
-  background: #ffffff;
-`;
-const Remove = styled(Icon) `
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-
-  > path {
-    fill: ${Colors.RED.Hex} !important;
-  }
+const IconWrapper$1 = styled.div `
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: ${props => (props.$dragging ? '#ffffff' : '#f5f5f5')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledIcon$3 = styled(Icon) `
+  width: 40px !important;
+  height: 40px !important;
+
+  > path {
+    fill: ${Colors.GRAY.Hex} !important;
+  }
+`;
+const ClickZone = styled.div `
+  margin: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 99999;
+  gap: 2px;
+`;
+const Files = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  gap: 10px;
+  margin: 20px;
+`;
+const MessageDiv = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const File = styled.div `
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+`;
+const Remove = styled(Icon) `
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+
+  > path {
+    fill: ${Colors.RED.Hex} !important;
+  }
 `;
 const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, value = [], message, tooltipInfo = '', validateFile, }) => {
     const inputRef = React.useRef(null);
@@ -1554,25 +1593,27 @@ const FileUpload = ({ accept, onChange, onError, maxFiles = 10, maxSize = 2, val
             setAllowMoreFiles(false);
         }
     }, [files]);
+    const id = generateUniqueId('file-upload');
     return (React.createElement(React.Fragment, null,
-        React.createElement("input", { accept: accept, multiple: true, onChange: allowMoreFiles ? handleChange : undefined, ref: inputRef, style: { display: 'none' }, type: 'file' }),
-        React.createElement(Dropzone, { "$dragging": dragging, onDragEnter: allowMoreFiles ? handleDrag : undefined, onDragLeave: allowMoreFiles ? handleDrag : undefined, onDragOver: allowMoreFiles ? handleDrag : undefined, onDrop: allowMoreFiles ? handleDrop : undefined, value: files ? files : [] },
-            files.length ? (React.createElement(Files, null, files.map(file => {
-                return (React.createElement(File, { key: file.name },
-                    React.createElement(Copy, { type: 'bold' }, file.name),
-                    React.createElement(Remove, { onClick: handleRemove.bind(null, file), path: js.mdiMinusCircle })));
+        React.createElement("input", { accept: accept, id: `${id}-input`, multiple: true, onChange: allowMoreFiles ? handleChange : undefined, ref: inputRef, style: { display: 'none' }, type: 'file' }),
+        React.createElement(Dropzone, { "$dragging": dragging, id: `${id}-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: `${id}-files` }, files.map(file => {
+                const fileId = generateUniqueId('file');
+                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 })));
             }))) : null,
-            allowMoreFiles ? (React.createElement(ClickZone, { onClick: triggerFileExplorer },
-                files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging },
-                    React.createElement(StyledIcon$3, { path: js.mdiFolderPlusOutline }))),
-                React.createElement(Content, null,
-                    React.createElement(Copy, { align: 'center', type: 'bold' }, "Drag & drop files here or click to select files"),
-                    message ? (React.createElement(MessageDiv, null,
-                        React.createElement(Copy, { align: 'center', color: 'GRAY' }, message),
-                        tooltipInfo && (React.createElement("span", null,
+            allowMoreFiles ? (React.createElement(ClickZone, { id: `${id}-click-zone`, onClick: triggerFileExplorer },
+                files.length ? null : (React.createElement(IconWrapper$1, { "$dragging": dragging, id: `${id}-icon-wrapper` },
+                    React.createElement(StyledIcon$3, { id: `${id}-icon`, path: js.mdiFolderPlusOutline }))),
+                React.createElement(Content, { id: `${id}-content` },
+                    React.createElement(Copy, { align: 'center', id: `${id}-copy`, type: 'bold' }, "Drag & drop files here or click to select files"),
+                    message ? (React.createElement(MessageDiv, { id: `${id}-message-div` },
+                        React.createElement(Copy, { align: 'center', color: 'GRAY', id: `${id}-message` }, message),
+                        tooltipInfo && (React.createElement("span", { id: `${id}-tooltip` },
                             React.createElement(Tooltip, { children: tooltipInfo, position: 'left-center' }))))) : null))) : null)));
-};
-
+};
+
 const getAgesFromDob = (dob) => {
     let calculated_current_age = null;
     let calculated_nearest_age = null;
@@ -1645,154 +1686,154 @@ const formatAsSsn = (number) => {
         formatted_value = `${formatted_value.substring(0, 3)}-${formatted_value.substring(3, 5)}-${formatted_value.substring(5, 9)}`;
     }
     return formatted_value;
-};
-
-const StyledInput = styled.input `
-  border: none !important;
-  background: none !important;
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1.28em;
+};
+
+const StyledInput = styled.input `
+  border: none !important;
+  background: none !important;
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  height: ${props => props.$height || 'auto'};
-  padding: 10px;
-  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-`;
-const StyledTextArea = styled.textarea `
-  border: none !important;
-  background: none !important;
-  overflow-y: scroll !important;
-  font-size: 14px;
-  font-weight: 400;
-  height: ${props => props.$height || 'auto'};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  line-height: 1.28em;
+    : Colors.BLACK.Hex};
+  position: relative;
+  height: ${props => props.$height || 'auto'};
+  padding: 10px;
+  opacity: ${props => (props.$readOnly ? 0.6 : 1)};
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+`;
+const StyledTextArea = styled.textarea `
+  border: none !important;
+  background: none !important;
+  overflow-y: scroll !important;
+  font-size: 14px;
+  font-weight: 400;
+  height: ${props => props.$height || 'auto'};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  line-height: 1.28em;
   color: ${props => props.$showErrorTextColor && props.$invalid && !props.$readOnly
     ? Colors.RED.Hex
-    : Colors.BLACK.Hex};
-  position: relative;
-  padding: 10px;
-  opacity: 1;
-  box-shadow: none;
-  outline: none;
-  margin: 0px;
-  text-indent: 0px;
-  --webkit-appearance: none;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
+    : Colors.BLACK.Hex};
+  position: relative;
+  padding: 10px;
+  opacity: 1;
+  box-shadow: none;
+  outline: none;
+  margin: 0px;
+  text-indent: 0px;
+  --webkit-appearance: none;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
   ${({ $readOnly }) => $readOnly &&
-    `
-    background-color: #f0f0f0;
-    color: #999999;
-    overflow-y: scroll;
-  `}
-`;
-const StyledSuffix = styled.div `
-  box-sizing: border-box;
-  border-radius: 0px 4px 4px 0px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  height: auto;
-  background: #f5f5f5;
-  border-width: 0px 0px 0px 1px;
-  border-style: solid;
-  border-color: #cccccc;
-  font-family: ${FontStyles.DEFAULT};
-  font-style: normal;
-  font-weight: 400;
-  font-size: ${FontSizes.DEFAULT};
-  color: ${Colors.BLACK.Hex};
-`;
-const StyledWrapper = styled.div `
-  display: flex;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  position: relative;
-  border-width: 1px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
-  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
-
-  &:focus-within {
-    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
-  }
+    `
+    background-color: #f0f0f0;
+    color: #999999;
+    overflow-y: scroll;
+  `}
+`;
+const StyledSuffix = styled.div `
+  box-sizing: border-box;
+  border-radius: 0px 4px 4px 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  height: auto;
+  background: #f5f5f5;
+  border-width: 0px 0px 0px 1px;
+  border-style: solid;
+  border-color: #cccccc;
+  font-family: ${FontStyles.DEFAULT};
+  font-style: normal;
+  font-weight: 400;
+  font-size: ${FontSizes.DEFAULT};
+  color: ${Colors.BLACK.Hex};
+`;
+const StyledWrapper = styled.div `
+  display: flex;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  position: relative;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc')};
+  border-radius: ${props => (props.$suggestions ? '4px 4px 0px 0px' : '4px')};
+
+  &:focus-within {
+    border-color: ${props => (props.$readOnly ? '#cccccc' : props.theme.PRIMARY_COLOR.Hex)};
+  }
 `;
 StyledWrapper.defaultProps = { theme: EditableTheme };
-const SuggestedValues = styled.div `
-  background: #fff;
-  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 0px 0px 4px 4px;
-  border-style: solid;
-  border-top: none;
-  border-width: 1px;
-  left: -1px;
-  position: absolute;
-  right: -1px;
-  top: 39px;
-  z-index: 9999;
-  max-height: 220px;
-  overflow: auto;
+const SuggestedValues = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: -1px;
+  position: absolute;
+  right: -1px;
+  top: 39px;
+  z-index: 9999;
+  max-height: 220px;
+  overflow: auto;
 `;
 SuggestedValues.defaultProps = { theme: EditableTheme };
-const SuggestedSummary = styled.div `
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 500;
-  line-height: 18px;
-  padding: 10px 12px;
-  border-bottom: 1px solid #e5e5e5;
-  background: #fff;
-  z-index: 1;
-  position: sticky;
-  top: 0px;
-`;
-const SuggestedValue = styled.div `
-  cursor: pointer;
-  padding: 8px 12px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: 400;
-  line-height: 1.6em;
-  color: ${Colors.BLACK.Hex};
-
-  &:hover {
-    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
-  }
+const SuggestedSummary = styled.div `
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 500;
+  line-height: 18px;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fff;
+  z-index: 1;
+  position: sticky;
+  top: 0px;
+`;
+const SuggestedValue = styled.div `
+  cursor: pointer;
+  padding: 8px 12px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: 400;
+  line-height: 1.6em;
+  color: ${Colors.BLACK.Hex};
+
+  &:hover {
+    background: rgba(${props => props.theme.PRIMARY_COLOR.Rgb}, 0.05);
+  }
 `;
 SuggestedValue.defaultProps = { theme: EditableTheme };
-const CharacterCount = styled.div `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.SMALL};
-  color: ${Colors.MEDIUM_GRAY.Hex};
-  padding: 10px;
+const CharacterCount = styled.div `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.SMALL};
+  color: ${Colors.MEDIUM_GRAY.Hex};
+  padding: 10px;
 `;
-const Loader$1 = styled.div `
-  padding: 0px 10px;
-  display: flex;
-  align-items: center;
+const Loader$1 = styled.div `
+  padding: 0px 10px;
+  display: flex;
+  align-items: center;
 `;
 const Input$1 = (_a) => {
     var { format, suffix, height, invalid, loading, max, maxLength, min, onBlur, onChange, onFocus, onKeyDown, 
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null } = _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"]);
+    onSuggestedSelect = () => { }, placeholder, readOnly, showCharCount, step, style, suggestedValues, showErrorTextColor = false, type = 'text', value = '', innerRef = null, tabIndex } = _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"]);
     const [show_options, setShowOptions] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(value);
     const [internalSuggestedValues, setInternalSuggestedValues] = React.useState(suggestedValues || []);
@@ -1858,7 +1899,8 @@ const Input$1 = (_a) => {
     if (format === 'ssn' && type !== 'password') {
         formatted_value = formatAsSsn(internalValue);
     }
-    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
+    const id = generateUniqueId('input');
+    return type === 'textarea' ? (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, id: `${id}-wrapper` },
         React.createElement(StyledTextArea, Object.assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$showErrorTextColor": showErrorTextColor, maxLength: maxLength, onBlur: readOnly
                 ? e => e.preventDefault()
                 : e => {
@@ -1873,12 +1915,12 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, ref: innerRef, value: formatted_value }, accessibleProps)),
-        loading ? (React.createElement(Loader$1, null,
+                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, value: formatted_value }, accessibleProps, { id: `${id}-textarea` })),
+        loading ? (React.createElement(Loader$1, { id: `${id}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
-        showCharCount ? (React.createElement(CharacterCount, null,
+        showCharCount ? (React.createElement(CharacterCount, { id: `${id}-char-count` },
             internalValue.length,
-            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length },
+            maxLength ? ` / ${maxLength}` : null)) : null)) : (React.createElement(StyledWrapper, { "$invalid": invalid, "$readOnly": readOnly, "$style": style, "$suggestions": show_options && !!internalSuggestedValues.length, id: `${id}-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 => {
@@ -1893,209 +1935,213 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, ref: innerRef, step: step, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
-        loading ? (React.createElement(Loader$1, null,
+                }, 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: `${id}-input` })),
+        loading ? (React.createElement(Loader$1, { id: `${id}-loader` },
             React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: js.mdiLoading, size: '20px', spin: true }))) : null,
-        showCharCount ? (React.createElement(CharacterCount, null,
+        showCharCount ? (React.createElement(CharacterCount, { id: `${id}-char-count` },
             internalValue.length,
             maxLength ? ` / ${maxLength}` : null)) : null,
-        suffix && React.createElement(StyledSuffix, null, suffix),
-        show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, null,
-            React.createElement(SuggestedSummary, null,
+        suffix && React.createElement(StyledSuffix, { id: `${id}-suffix` }, suffix),
+        show_options && internalSuggestedValues.length ? (React.createElement(SuggestedValues, { id: `${id}-suggested-values` },
+            React.createElement(SuggestedSummary, { id: `${id}-suggested-summary` },
                 internalSuggestedValues.length,
                 " Results Match \"",
                 internalValue,
                 "\""),
-            internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { key: index, onClick: () => {
+            internalSuggestedValues.map((suggestedValue, index) => (React.createElement(SuggestedValue, { id: `${id}-suggested-value-${index}`, key: index, onClick: () => {
                     handleInputChange({ target: { value: suggestedValue } });
                     onSuggestedSelect();
                     setShowOptions(false);
                 } }, suggestedValue))))) : null));
-};
-
-const Wrapper$7 = styled.a `
-  color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
-  line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
-  letter-spacing: ${props => (props.$small ? '1px' : '0px')};
-  font-weight: 500;
-  font-style: normal;
-  text-decoration: 'none';
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  margin: 0px;
-  padding: 0px;
-  box-sizing: border-box;
-  cursor: pointer;
+};
+
+const Wrapper$7 = styled.a `
+  color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  font-size: ${props => (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT)};
+  line-height: ${props => (props.$small ? '1.5em' : '1.6em')};
+  letter-spacing: ${props => (props.$small ? '1px' : '0px')};
+  font-weight: 500;
+  font-style: normal;
+  text-decoration: 'none';
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  cursor: pointer;
 `;
 Wrapper$7.defaultProps = { theme: EditableTheme };
 const Link = (_a) => {
     var { children, onClick, small } = _a, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
-    return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps), children));
-};
-
-const dash = styled.keyframes `
-  0% {
-    stroke-dasharray: 1, 160;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 80, 160;
-    stroke-dashoffset: -32;
-  }
-  100% {
-    stroke-dasharray: 80, 160;
-    stroke-dashoffset: -124;
-  }
-`;
-const Spinner = styled.svg `
-  z-index: 2;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0 auto;
-  width: 40px;
-  height: 40px;
-`;
-const Path = styled.path `
-  stroke: #0193d7;
-  stroke-linecap: round;
-  -webkit-animation: ${dash} 1.1s ease-in-out infinite;
-  animation: ${dash} 1.1s ease-in-out infinite;
+    const id = generateUniqueId('link');
+    return (React.createElement(Wrapper$7, Object.assign({ "$small": small, onClick: onClick }, accessibleProps, { id: `${id}-wrapper` }), children));
+};
+
+const dash = styled.keyframes `
+  0% {
+    stroke-dasharray: 1, 160;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 80, 160;
+    stroke-dashoffset: -32;
+  }
+  100% {
+    stroke-dasharray: 80, 160;
+    stroke-dashoffset: -124;
+  }
+`;
+const Spinner = styled.svg `
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0 auto;
+  width: 40px;
+  height: 40px;
+`;
+const Path = styled.path `
+  stroke: #0193d7;
+  stroke-linecap: round;
+  -webkit-animation: ${dash} 1.1s ease-in-out infinite;
+  animation: ${dash} 1.1s ease-in-out infinite;
 `;
 const Loader = () => {
-    return (React.createElement(Spinner, { viewBox: '0 0 16 18' },
-        React.createElement(Path, { d: 'M7.21487 1.2868C7.88431 0.9044 8.73031 0.9044 9.39974 1.2868L9.40283 1.28856L14.4613 4.20761C15.1684 4.598 15.5746 5.33558 15.5746 6.11465V8.99996V11.8853C15.5746 12.6507 15.1632 13.3848 14.4617 13.7721L9.37973 16.7132C8.71029 17.0956 7.86428 17.0956 7.19485 16.7132L7.19088 16.7109L2.11279 13.772C1.40602 13.3816 1 12.6441 1 11.8653V8.98995V6.11465C1 5.31458 1.44381 4.59039 2.10827 4.21051L7.21487 1.2868Z', fill: 'none', strokeWidth: '2' })));
-};
-
-const Steps = styled.div `
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  background: #f5f5f5;
-  display: flex;
-  gap: 30px;
-  align-items: center;
-`;
-const Step = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-const StyledIcon$2 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+    const id = generateUniqueId('loader');
+    return (React.createElement(Spinner, { id: `${id}-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: `${id}-path`, strokeWidth: '2' })));
+};
+
+const Steps = styled.div `
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  background: #f5f5f5;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+`;
+const Step = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StyledIcon$2 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$2.defaultProps = { theme: EditableTheme };
-const StepIndicator = styled.div `
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
-  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+const StepIndicator = styled.div `
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+  background: ${props => (props.$active ? props.theme.PRIMARY_COLOR.Hex : Colors.LIGHT_GRAY.Hex)};
+  color: ${props => (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex)};
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 `;
 StepIndicator.defaultProps = { theme: EditableTheme };
-const StepLabel = styled.div `
-  color: #000;
-  font-family: 'Roboto', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1;
-`;
-const StepLine = styled.div `
-  height: 2px;
-  flex-grow: 1;
-  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
-  transition: background-color 0.5s ease-in-out;
+const StepLabel = styled.div `
+  color: #000;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+`;
+const StepLine = styled.div `
+  height: 2px;
+  flex-grow: 1;
+  background-color: ${props => (props.$active ? Colors.PRIMARY.Hex : Colors.MEDIUM_GRAY.Hex)};
+  transition: background-color 0.5s ease-in-out;
 `;
 const ProgressBar = ({ steps, showStepLine = false }) => {
-    return (React.createElement(Steps, null, steps.map((step, i) => {
+    const id = generateUniqueId('progress-bar');
+    return (React.createElement(Steps, { id: `${id}-steps` }, steps.map((step, i) => {
+        const stepId = generateUniqueId(`step-${i}`);
         return (React.createElement(React.Fragment, { key: i },
-            i !== 0 && showStepLine && React.createElement(StepLine, { "$active": step.active }),
-            React.createElement(Step, null,
-                step.complete ? (React.createElement(StyledIcon$2, { path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
-                React.createElement(StepLabel, null, step.label))));
+            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))));
     })));
-};
-
-const Wrapper$6 = styled.div `
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 9999;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const Container$1 = styled.dialog `
-  width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
-  max-width: calc(100vw - 80px);
-  height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
-  max-height: calc(100vh - 80px);
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
-  outline: none;
-  border: none;
-  position: relative;
-  padding: 0px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-`;
-const Header$1 = styled.div `
-  flex-shrink: 0;
-  padding: 20px;
-  border-bottom: 1px solid #e7e6e6;
-  display: flex;
-  align-items: center;
-  background: #ffffff;
-  box-sizing: border-box;
-`;
-const Close = styled.div `
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-  cursor: pointer;
-`;
-const CloseMsg = styled.span `
-  font-size: ${FontSizes.SMALL};
-  font-weight: 400;
-  font-family: ${FontStyles.DEFAULT};
-  line-height: 1em;
-  color: ${Colors.MEDIUM_GRAY.Hex};
-`;
-const ContentWrapper = styled.div `
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: #ffffff;
-  flex: 1;
-  box-sizing: border-box;
-`;
-const ButtonBar = styled.div `
-  flex-shrink: 0;
-  background: #ffffff;
-  padding: 20px;
-  border-top: 1px solid #e7e6e6;
-  display: flex;
-  align-items: center;
-  justify-self: flex-end;
-  box-sizing: border-box;
-`;
-const ButtonContainer = styled.div `
-  margin: 0 10px;
+};
+
+const Wrapper$6 = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Container$1 = styled.dialog `
+  width: ${props => (props.$fullscreen ? 'calc(100vw - 80px)' : props.$maxWidth || '900px')};
+  max-width: calc(100vw - 80px);
+  height: ${props => (props.$fullscreen ? 'calc(100vh - 80px)' : 'auto')};
+  max-height: calc(100vh - 80px);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);
+  outline: none;
+  border: none;
+  position: relative;
+  padding: 0px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+`;
+const Header$1 = styled.div `
+  flex-shrink: 0;
+  padding: 20px;
+  border-bottom: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  box-sizing: border-box;
+`;
+const Close = styled.div `
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  cursor: pointer;
+`;
+const CloseMsg = styled.span `
+  font-size: ${FontSizes.SMALL};
+  font-weight: 400;
+  font-family: ${FontStyles.DEFAULT};
+  line-height: 1em;
+  color: ${Colors.MEDIUM_GRAY.Hex};
+`;
+const ContentWrapper = styled.div `
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #ffffff;
+  flex: 1;
+  box-sizing: border-box;
+`;
+const ButtonBar = styled.div `
+  flex-shrink: 0;
+  background: #ffffff;
+  padding: 20px;
+  border-top: 1px solid #e7e6e6;
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  box-sizing: border-box;
+`;
+const ButtonContainer = styled.div `
+  margin: 0 10px;
 `;
 const Modal = (_a) => {
     var { children, title, onClose, maxWidth, fullscreen, steps, primaryButton, secondaryButton, tertiaryButton, quarternaryButton } = _a, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "fullscreen", "steps", "primaryButton", "secondaryButton", "tertiaryButton", "quarternaryButton"]);
@@ -2109,49 +2155,50 @@ const Modal = (_a) => {
             document.onkeydown = null;
         };
     }, []);
-    return (React.createElement(Wrapper$6, null,
-        React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps),
-            React.createElement(Header$1, null,
-                title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
-                React.createElement(Close, { onClick: onClose },
-                    React.createElement(CloseMsg, null, "(Esc)"),
-                    React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiClose, size: '24px' }))),
+    const id = generateUniqueId('modal');
+    return (React.createElement(Wrapper$6, { id: `${id}-wrapper` },
+        React.createElement(Container$1, Object.assign({ "$fullscreen": fullscreen, "$maxWidth": maxWidth, open: true }, accessibleProps, { id: `${id}-container` }),
+            React.createElement(Header$1, { id: `${id}-header` },
+                title ? (React.createElement(Heading, { id: `${id}-title`, type: 'secondary' }, title)) : null,
+                React.createElement(Close, { id: `${id}-close`, onClick: onClose },
+                    React.createElement(CloseMsg, { id: `${id}-close-msg` }, "(Esc)"),
+                    React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-close-icon`, path: js.mdiClose, size: '24px' }))),
             steps ? React.createElement(ProgressBar, { steps: steps }) : null,
-            React.createElement(ContentWrapper, null, children),
-            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, null,
-                tertiaryButton || quarternaryButton ? (React.createElement("div", { style: {
+            React.createElement(ContentWrapper, { id: `${id}-content-wrapper` }, children),
+            primaryButton || secondaryButton || tertiaryButton || quarternaryButton ? (React.createElement(ButtonBar, { id: `${id}-button-bar` },
+                tertiaryButton || quarternaryButton ? (React.createElement("div", { id: `${id}-left-buttons`, style: {
                         marginRight: 'auto',
                         paddingRight: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary' }))) : null,
-                    quarternaryButton ? (React.createElement(ButtonContainer, null,
-                        React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary' })))) : null)) : null,
-                primaryButton || secondaryButton ? (React.createElement("div", { style: {
+                    tertiaryButton ? (React.createElement(Button, Object.assign({}, tertiaryButton, { format: tertiaryButton.format || 'secondary', id: `${id}-tertiary-button` }))) : null,
+                    quarternaryButton ? (React.createElement(ButtonContainer, { id: `${id}-quarternary-button-container` },
+                        React.createElement(Button, Object.assign({}, quarternaryButton, { format: quarternaryButton.format || 'secondary', id: `${id}-quarternary-button` })))) : null)) : null,
+                primaryButton || secondaryButton ? (React.createElement("div", { id: `${id}-right-buttons`, style: {
                         marginLeft: 'auto',
                         paddingLeft: 40,
                         display: 'flex',
                         alignItems: 'center',
                     } },
-                    secondaryButton ? (React.createElement(ButtonContainer, null,
-                        React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary' })))) : null,
-                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary' }))) : null)) : null)) : null)));
-};
-
-const Wrapper$5 = styled.div `
-  position: relative;
-  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
-`;
-const Trigger = styled.div `
-  box-sizing: border-box;
-  border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
-  height: 40px;
-  padding: 0 10px;
-  position: relative;
-  cursor: pointer;
-  border-width: 1px;
-  border-style: solid;
+                    secondaryButton ? (React.createElement(ButtonContainer, { id: `${id}-secondary-button-container` },
+                        React.createElement(Button, Object.assign({}, secondaryButton, { format: secondaryButton.format || 'secondary', id: `${id}-secondary-button` })))) : null,
+                    primaryButton ? (React.createElement(Button, Object.assign({}, primaryButton, { format: primaryButton.format || 'primary', id: `${id}-primary-button` }))) : null)) : null)) : null)));
+};
+
+const Wrapper$5 = styled.div `
+  position: relative;
+  width: ${({ $style }) => ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto'};
+`;
+const Trigger = styled.div `
+  box-sizing: border-box;
+  border-radius: ${props => (props.$showOptions ? '4px 4px 0px 0px' : '4px')};
+  height: 40px;
+  padding: 0 10px;
+  position: relative;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
   border-color: ${props => {
     if (props.$invalid) {
         return Colors.RED.Hex;
@@ -2162,142 +2209,146 @@ const Trigger = styled.div `
     else {
         return '#cccccc';
     }
-}};
-  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
-  background-image: none;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  z-index: 1;
+}};
+  background-color: ${props => (props.$readOnly ? '#f5f5f5' : '#ffffff')};
+  background-image: none;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
 `;
 Trigger.defaultProps = { theme: EditableTheme };
-const Value = styled.div `
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-`;
-const Options = styled.div `
-  background: #fff;
-  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
-  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
-  border-radius: 0px 0px 4px 4px;
-  border-style: solid;
-  border-top: none;
-  border-width: 1px;
-  left: 0;
-  position: relative;
-  right: 0;
-  z-index: 10;
-  max-height: 220px;
-  overflow: auto;
+const Value = styled.div `
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+const Options = styled.div `
+  background: #fff;
+  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);
+  border-color: ${props => props.theme.PRIMARY_COLOR.Hex};
+  border-radius: 0px 0px 4px 4px;
+  border-style: solid;
+  border-top: none;
+  border-width: 1px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: 10;
+  max-height: 220px;
+  overflow: auto;
 `;
 Options.defaultProps = { theme: EditableTheme };
-const Scrim = styled.div `
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 9;
-`;
-const SearchInput = styled.input `
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  z-index: 999;
-  width: 90%;
-  height: 30px;
-  border: none;
-  outline: none;
-  color: ${Colors.BLACK.Hex};
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  line-height: 2.9em;
-  overflow: hidden;
-  white-space: nowrap;
+const Scrim = styled.div `
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9;
+`;
+const SearchInput = styled.input `
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  z-index: 999;
+  width: 90%;
+  height: 30px;
+  border: none;
+  outline: none;
+  color: ${Colors.BLACK.Hex};
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  line-height: 2.9em;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 const MultiSelect = (_a) => {
     var { readOnly, displayCount = 3, invalid, onChange, options = [], selected = [], showSelectAll, searchable = false, style } = _a, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "searchable", "style"]);
     const [showOptions, setShowOptions] = React.useState(false);
     const selected_options = options.filter(o => selected.includes(o.value));
     const [filter, setFilter] = React.useState('');
+    const id = generateUniqueId('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 },
-        searchable && (React.createElement(SearchInput, { onChange: e => setFilter(e.target.value), onClick: () => setShowOptions(!showOptions), placeholder: `${showSelectAll ? options.length : selected_options.length} Selected`, type: 'text', value: filter })),
-        React.createElement(Trigger, Object.assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
-            React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
+    return (React.createElement(Wrapper$5, { "$style": style, id: `${id}-wrapper` },
+        searchable && (React.createElement(SearchInput, { id: `${id}-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: `${id}-trigger`, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
+            React.createElement(Value, { id: `${id}-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, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
-        showOptions ? (React.createElement(Options, null,
-            React.createElement(Checklist, { onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
-        showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
-};
-
-const Wrapper$4 = styled.div `
-  display: flex;
-  padding: 16px 30px;
-  align-items: center;
-  gap: 20px;
-  align-self: stretch;
-  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
-`;
-const Title = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 20px;
-`;
-const Info = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  flex: 1 0 0;
-`;
-const Breadcrumbs = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-const Actions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
+            React.createElement(Icon, { color: Colors.BLACK.Hex, id: `${id}-icon`, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
+        showOptions ? (React.createElement(Options, { id: `${id}-options` },
+            React.createElement(Checklist, { id: `${id}-checklist`, onChange: onChange, options: filteredOptions, selected: selected, showSelectAll: showSelectAll }))) : null,
+        showOptions ? (React.createElement(Scrim, { id: `${id}-scrim`, onClick: setShowOptions.bind(null, !showOptions) })) : null));
+};
+
+const Wrapper$4 = styled.div `
+  display: flex;
+  padding: 16px 30px;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  border-bottom: 1px solid ${Colors.LIGHT_GRAY.Hex};
+`;
+const Title = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 20px;
+`;
+const Info = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+`;
+const Breadcrumbs = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Actions = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 const PageHeader = ({ title = '', breadcrumbs, actions, buttonMenu, tag }) => {
     const { format = 'primary', menuItems = [], label = '', enableHover = true, enableClick = false, show = false, } = buttonMenu || {};
-    return (React.createElement(Wrapper$4, null,
-        React.createElement(Info, null,
-            React.createElement(Title, null,
-                React.createElement(Heading, { type: 'secondary' }, title),
-                tag ? React.createElement(Tag, Object.assign({}, tag)) : null),
-            breadcrumbs ? (React.createElement(Breadcrumbs, null, breadcrumbs.map((crumb, i) => {
+    const id = generateUniqueId('page-header');
+    return (React.createElement(Wrapper$4, { id: `${id}-wrapper` },
+        React.createElement(Info, { id: `${id}-info` },
+            React.createElement(Title, { id: `${id}-title` },
+                React.createElement(Heading, { id: `${id}-heading`, type: 'secondary' }, title),
+                tag ? React.createElement(Tag, Object.assign({}, tag, { id: `${id}-tag` })) : null),
+            breadcrumbs ? (React.createElement(Breadcrumbs, { id: `${id}-breadcrumbs` }, breadcrumbs.map((crumb, i) => {
+                const crumbId = generateUniqueId(`breadcrumb-${i}`);
                 return (React.createElement(React.Fragment, { key: i },
-                    crumb.onClick ? (React.createElement(Link, { onClick: crumb.onClick, small: true }, crumb.label)) : (React.createElement(Copy, { type: 'small' }, crumb.label)),
-                    i + 1 < breadcrumbs.length ? React.createElement(Icon.Icon, { path: js.mdiChevronRight, size: '14px' }) : null));
+                    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));
             }))) : null),
-        actions ? (React.createElement(Actions, null,
+        actions ? (React.createElement(Actions, { id: `${id}-actions` },
             actions.map((action, i) => {
                 const { label } = action, buttonProps = __rest(action, ["label"]);
-                return (React.createElement(Button, Object.assign({}, buttonProps, { key: i, small: true }), label));
+                const actionId = generateUniqueId(`action-${i}`);
+                return (React.createElement(Button, Object.assign({}, buttonProps, { id: `${actionId}-button`, key: i, small: true }), label));
             }),
             menuItems.length ? (React.createElement(ButtonMenu, { enableClick: enableClick, enableHover: enableHover, format: format, label: label, menuItems: menuItems, show: show, small: true })) : null)) : null));
-};
-
-const Wrapper$3 = styled.nav `
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  column-gap: 10px;
+};
+
+const Wrapper$3 = styled.nav `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
 `;
 const Pagination = (_a) => {
     var { currentPage = 1, onClick, pageCount = 0 } = _a, accessibleProps = __rest(_a, ["currentPage", "onClick", "pageCount"]);
@@ -2319,360 +2370,370 @@ const Pagination = (_a) => {
             onClick(new_page);
         }
     };
-    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps),
-        React.createElement(Button, { disabled: is_first_page, icon: js.mdiChevronLeft, onClick: handlePrevClick, small: true }),
-        React.createElement(Select, { onChange: handlePageChange, options: Array.from(Array(pageCount).keys(), p => p + 1).map(p => ({
+    const id = generateUniqueId('pagination');
+    return (React.createElement(Wrapper$3, Object.assign({}, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Button, { disabled: is_first_page, icon: js.mdiChevronLeft, id: `${id}-prev-button`, onClick: handlePrevClick, small: true }),
+        React.createElement(Select, { id: `${id}-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, onClick: handleNextClick, small: true })));
-};
-
-const Wrapper$2 = styled.label `
-  border-radius: 4px;
-  padding: 4px 0px 4px 6px;
-  margin-left: -6px;
-  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
-  display: flex;
-  align-items: center;
-  font-size: ${FontSizes.DEFAULT};
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: relative;
-
-  &:focus-within {
-    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
-  }
+        React.createElement(Button, { disabled: is_last_page, icon: js.mdiChevronRight, id: `${id}-next-button`, onClick: handleNextClick, small: true })));
+};
+
+const Wrapper$2 = styled.label `
+  border-radius: 4px;
+  padding: 4px 0px 4px 6px;
+  margin-left: -6px;
+  cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
+  display: flex;
+  align-items: center;
+  font-size: ${FontSizes.DEFAULT};
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: relative;
+
+  &:focus-within {
+    background: ${props => `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.05)`};
+  }
 `;
 Wrapper$2.defaultProps = { theme: EditableTheme };
-const Input = styled.input `
-  font-size: 20px;
-  margin: 0px;
-  line-height: 1.6em;
-  box-sizing: border-box;
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-  &:checked + span {
-    border-color: ${Colors.PRIMARY.Hex};
-  }
-  &:checked + span:after {
-    background-color: ${Colors.PRIMARY.Hex};
-    display: block;
-  }
-  &:disabled + span {
-    background-color: #d3d3d3;
-    border-color: #d3d3d3;
-  }
-  &:disabled + span:after {
-    background-color: #fff;
-  }
-  &:checked:disabled + span:after {
-    background-color: ${Colors.MEDIUM_GRAY.Hex};
-  }
-`;
-const Check = styled.span `
-  height: 17px;
-  width: 17px;
-  border-radius: 50%;
-  background-color: #fff;
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
-  box-sizing: border-box;
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 9px;
-    height: 9px;
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: none;
-  }
-`;
-const Label = styled.span `
-  font-family: ${FontStyles.DEFAULT};
-  font-size: ${FontSizes.DEFAULT};
-  font-weight: 400;
-  color: ${Colors.BLACK.Hex};
-  line-height: 1.6em;
-  margin-left: 6px;
+const Input = styled.input `
+  font-size: 20px;
+  margin: 0px;
+  line-height: 1.6em;
+  box-sizing: border-box;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+  &:checked + span {
+    border-color: ${Colors.PRIMARY.Hex};
+  }
+  &:checked + span:after {
+    background-color: ${Colors.PRIMARY.Hex};
+    display: block;
+  }
+  &:disabled + span {
+    background-color: #d3d3d3;
+    border-color: #d3d3d3;
+  }
+  &:disabled + span:after {
+    background-color: #fff;
+  }
+  &:checked:disabled + span:after {
+    background-color: ${Colors.MEDIUM_GRAY.Hex};
+  }
+`;
+const Check = styled.span `
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  background-color: #fff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: ${props => (props.$invalid ? `${Colors.RED.Hex}` : `${Colors.GRAY.Hex}`)};
+  box-sizing: border-box;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    display: none;
+  }
+`;
+const Label = styled.span `
+  font-family: ${FontStyles.DEFAULT};
+  font-size: ${FontSizes.DEFAULT};
+  font-weight: 400;
+  color: ${Colors.BLACK.Hex};
+  line-height: 1.6em;
+  margin-left: 6px;
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip"]);
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps),
-        React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'radio', value: value }),
-        React.createElement(Check, { "$invalid": invalid }),
-        React.createElement(Label, null,
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
+    const id = generateUniqueId('radio');
+    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { id: `${id}-wrapper` }),
+        React.createElement(Input, { checked: checked, disabled: disabled, id: `${id}-input`, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
+        React.createElement(Check, { "$invalid": invalid, id: `${id}-check` }),
+        React.createElement(Label, { id: `${id}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
-};
-
+};
+
 const RadioList = (_a) => {
     var { disabled, onChange, options, value } = _a, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "value"]);
     return (React.createElement(React.Fragment, null, options.map((option) => {
         const label = option.label || option.value;
         return (React.createElement(Radio, Object.assign({ checked: value === option.value, disabled: disabled, onChange: onChange, value: option.value }, accessibleProps), label));
     })));
-};
-
-const StyledTable = styled.table `
-  width: 100%;
-  margin-top: 1px;
-  table-layout: ${props => props.$tableLayout || 'auto'};
-  border-collapse: collapse;
-  text-indent: 0px;
-  border-spacing: 0px;
-  border-color: none;
-  box-sizing: border-box;
-`;
-const Header = styled.th `
-  padding: 12px !important;
-  text-align: left;
-  font-weight: 500;
-  border-bottom: 1px solid #e5e5e5;
-  border-top: 1px solid #e5e5e5;
-  text-transform: uppercase;
-  font-size: 12px;
-  font-family: ${FontStyles.DEFAULT};
-  letter-spacing: 1px;
-  white-space: nowrap;
-  line-height: 1;
-  position: relative;
-  box-sizing: border-box;
-  width: ${props => props.$width || 'auto'};
-  cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
-  color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
+};
+
+const StyledTable = styled.table `
+  width: 100%;
+  margin-top: 1px;
+  table-layout: ${props => props.$tableLayout || 'auto'};
+  border-collapse: collapse;
+  text-indent: 0px;
+  border-spacing: 0px;
+  border-color: none;
+  box-sizing: border-box;
+`;
+const Header = styled.th `
+  padding: 12px !important;
+  text-align: left;
+  font-weight: 500;
+  border-bottom: 1px solid #e5e5e5;
+  border-top: 1px solid #e5e5e5;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-family: ${FontStyles.DEFAULT};
+  letter-spacing: 1px;
+  white-space: nowrap;
+  line-height: 1;
+  position: relative;
+  box-sizing: border-box;
+  width: ${props => props.$width || 'auto'};
+  cursor: ${props => (props.$isSortable ? 'pointer' : 'default')};
+  color: ${props => (props.$isSortable ? props.theme.PRIMARY_COLOR.Hex : Colors.BLACK.Hex)};
 `;
 Header.defaultProps = { theme: EditableTheme };
-const Row = styled.tr `
-  cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
-  transition: all 0.2s;
-  background-color: ${props => props.$bgColor};
-  box-sizing: border-box;
-  &:hover {
-    background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
-  }
+const Row = styled.tr `
+  cursor: ${props => (props.$isClickable ? 'pointer' : 'default')};
+  transition: all 0.2s;
+  background-color: ${props => props.$bgColor};
+  box-sizing: border-box;
+  &:hover {
+    background-color: ${props => props.$isClickable ? `rgba(${props.theme.PRIMARY_COLOR.Rgb}, 0.1)` : props.$bgColor};
+  }
 `;
 Row.defaultProps = { theme: EditableTheme };
-const Column = styled.td `
-  padding: 16px 12px !important;
-  font-size: ${FontSizes.DEFAULT} !important;
-  font-weight: 400 !important;
-  font-family: ${FontStyles.DEFAULT};
-  border: none !important;
-  word-break: break-word;
-  line-height: 1.4em;
-  box-sizing: border-box;
-  text-align: ${props => props.$align || 'left'};
-  width: ${props => props.$width || 'auto'};
-`;
-const IconWrapper = styled.span `
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 2px;
-`;
-const StyledIcon$1 = styled(Icon) `
-  > path {
-    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
-  }
+const Column = styled.td `
+  padding: 16px 12px !important;
+  font-size: ${FontSizes.DEFAULT} !important;
+  font-weight: 400 !important;
+  font-family: ${FontStyles.DEFAULT};
+  border: none !important;
+  word-break: break-word;
+  line-height: 1.4em;
+  box-sizing: border-box;
+  text-align: ${props => props.$align || 'left'};
+  width: ${props => props.$width || 'auto'};
+`;
+const IconWrapper = styled.span `
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 2px;
+`;
+const StyledIcon$1 = styled(Icon) `
+  > path {
+    fill: ${props => props.theme.PRIMARY_COLOR.Hex} !important;
+  }
 `;
 StyledIcon$1.defaultProps = { theme: EditableTheme };
 const Table = (_a) => {
     var { columns = [], data = [], sortBy, sortDirection, hideHeaders, onRowClick, onSortChange, tableLayout } = _a, accessibleProps = __rest(_a, ["columns", "data", "sortBy", "sortDirection", "hideHeaders", "onRowClick", "onSortChange", "tableLayout"]);
-    return (React.createElement(StyledTable, Object.assign({ "$tableLayout": tableLayout }, accessibleProps),
-        hideHeaders ? null : (React.createElement("thead", null,
-            React.createElement("tr", null, columns.map((column, i) => {
-                return (React.createElement(Header, { "$isSortable": column.isSortable, "$width": column.width, key: i, onClick: onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange.bind(null, column.id) },
+    const id = generateUniqueId('table');
+    return (React.createElement(StyledTable, Object.assign({ "$tableLayout": tableLayout }, accessibleProps, { id: `${id}-styled-table` }),
+        hideHeaders ? null : (React.createElement("thead", { id: `${id}-thead` },
+            React.createElement("tr", { id: `${id}-header-row` }, columns.map((column, i) => {
+                const columnId = generateUniqueId(`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) },
                     column.label,
-                    column.isSortable && sortBy === column.id ? (React.createElement(IconWrapper, null,
-                        React.createElement(StyledIcon$1, { path: sortDirection === 'asc' ? js.mdiChevronUp : js.mdiChevronDown, size: '20px' }))) : null));
+                    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));
             })))),
-        data.length ? (React.createElement("tbody", null, data.map((row, i) => {
-            return (React.createElement(Row, { "$bgColor": i % 2 === 0 ? '#ffffff' : '#f9f9f9', "$isClickable": !!onRowClick, key: i, onClick: onRowClick ? onRowClick.bind(null, row) : undefined }, columns.map((column, i) => {
-                return (React.createElement(Column, { "$align": columns[i].align, "$width": columns[i].width, key: i }, column.render ? column.render(row) : row[column.id] || 'N/A'));
+        data.length ? (React.createElement("tbody", { id: `${id}-tbody` }, data.map((row, i) => {
+            const rowId = generateUniqueId(`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) => {
+                const columnId = generateUniqueId(`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'));
             })));
         }))) : null));
-};
-
-const Wrapper$1 = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  align-items: flex-end;
-  border-top: 1px solid #e5e5e5;
-  border-bottom: 1px solid #e5e5e5;
-  flex-shrink: 0;
-  align-self: stretch;
-  padding: 0;
-  margin: 0;
-`;
-const Tab = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: ${FontSizes.DEFAULT};
-  font-family: ${FontStyles.DEFAULT};
-  font-weight: ${props => (props.$isActive ? 500 : 400)};
-  color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
-  line-height: 1em;
-  padding: 16px 30px 12px;
-  margin: 0 0 -1px 0;
-  border-bottom-width: 4px;
-  border-bottom-style: solid;
-  border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
-  cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
-  box-sizing: border-box;
-  &:hover {
-    color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
-    font-weight: 500;
-  }
+};
+
+const Wrapper$1 = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-end;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+  flex-shrink: 0;
+  align-self: stretch;
+  padding: 0;
+  margin: 0;
+`;
+const Tab = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: ${FontSizes.DEFAULT};
+  font-family: ${FontStyles.DEFAULT};
+  font-weight: ${props => (props.$isActive ? 500 : 400)};
+  color: ${props => (props.$isActive ? Colors.BLACK.Hex : Colors.MEDIUM_GRAY.Hex)};
+  line-height: 1em;
+  padding: 16px 30px 12px;
+  margin: 0 0 -1px 0;
+  border-bottom-width: 4px;
+  border-bottom-style: solid;
+  border-bottom-color: ${props => props.$isActive ? props.theme.PRIMARY_COLOR.Hex : 'transparent'};
+  cursor: ${props => (props.$isActive ? 'default' : 'pointer')};
+  box-sizing: border-box;
+  &:hover {
+    color: ${props => (props.$isActive ? Colors.BLACK.Hex : props.theme.PRIMARY_COLOR.Hex)};
+    font-weight: 500;
+  }
 `;
 Tab.defaultProps = { theme: EditableTheme };
-const Badge = styled.div `
-  display: flex;
-  width: 18px;
-  height: 18px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 9px;
-  background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
-  color: #fff;
-  font-family: ${FontStyles.DEFAULT};
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 1px;
+const Badge = styled.div `
+  display: flex;
+  width: 18px;
+  height: 18px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 9px;
+  background: ${props => (props.$isError ? Colors.RED.Hex : props.theme.PRIMARY_COLOR.Hex)};
+  color: #fff;
+  font-family: ${FontStyles.DEFAULT};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 1px;
 `;
 Badge.defaultProps = { theme: EditableTheme };
 const Tabs = (_a) => {
     var { tabs } = _a, accessibleProps = __rest(_a, ["tabs"]);
-    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps), tabs.map((_a, i) => {
+    const id = generateUniqueId('tabs');
+    return (React.createElement(Wrapper$1, Object.assign({}, accessibleProps, { id: `${id}-wrapper` }), tabs.map((_a, i) => {
         var { isActive, label, badgeCount, errorBadge, onClick } = _a, accessibleProps = __rest(_a, ["isActive", "label", "badgeCount", "errorBadge", "onClick"]);
-        return (React.createElement(Tab, Object.assign({ "$isActive": isActive || false, key: i, onClick: isActive ? undefined : onClick }, accessibleProps),
-            badgeCount ? React.createElement(Badge, { "$isError": errorBadge || false }, badgeCount) : null,
+        const tabId = generateUniqueId(`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,
             label));
     })));
 };
-Tabs.defaultProps = {};
-
-const Track = styled.div `
-  height: 24px;
-  border-radius: 12px;
-  background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  width: 40px;
-  padding: 2px;
-  box-sizing: border-box;
-`;
-const Handle = styled.div `
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  background: #ffffff;
-  margin-left: ${props => (props.$on ? 'auto' : '0px')};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+Tabs.defaultProps = {};
+
+const Track = styled.div `
+  height: 24px;
+  border-radius: 12px;
+  background: ${props => (props.$on ? Colors.GREEN.Hex : Colors.BLACK.Hex)};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 40px;
+  padding: 2px;
+  box-sizing: border-box;
+`;
+const Handle = styled.div `
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: #ffffff;
+  margin-left: ${props => (props.$on ? 'auto' : '0px')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
 `;
 const Toggle = (_a) => {
     var { onClick, on } = _a, accessibleProps = __rest(_a, ["onClick", "on"]);
-    return (React.createElement(Track, Object.assign({ "$on": on, onClick: onClick }, accessibleProps),
-        React.createElement("input", { checked: on, name: accessibleProps.name, type: 'hidden' }),
-        React.createElement(Handle, { "$on": on },
-            React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
+    const id = generateUniqueId('toggle');
+    return (React.createElement(Track, Object.assign({ "$on": on, onClick: onClick }, accessibleProps, { id: `${id}-track` }),
+        React.createElement("input", { checked: on, id: `${id}-input`, name: accessibleProps.name, type: 'hidden' }),
+        React.createElement(Handle, { "$on": on, id: `${id}-handle` },
+            React.createElement(Icon, { color: on ? Colors.GREEN.Hex : Colors.BLACK.Hex, id: `${id}-icon`, path: on ? js.mdiCheck : js.mdiClose, size: '16px' }))));
 };
-Toggle.defaultProps = {};
-
-const Container = styled.div `
-  width: 100%;
-  padding: 40px auto;
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-`;
-const Wrapper = styled.div `
-  gap: 10px;
-  display: flex;
-  flex-direction: column;
-  justify-items: center;
-  align-items: center;
-`;
-const StyledIcon = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 80px;
-  height: 80px;
-  border-radius: 40px;
-  background: #f5f5f5;
+Toggle.defaultProps = {};
+
+const Container = styled.div `
+  width: 100%;
+  padding: 40px auto;
+  gap: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const Wrapper = styled.div `
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+`;
+const StyledIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 40px;
+  background: #f5f5f5;
 `;
 const ZeroState = (_a) => {
     var { icon, title, description, action } = _a, accessibleProps = __rest(_a, ["icon", "title", "description", "action"]);
-    return (React.createElement(Container, Object.assign({}, accessibleProps),
-        React.createElement(StyledIcon, null,
-            React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, path: icon, size: '40px' })),
-        React.createElement(Wrapper, null,
-            React.createElement(Heading, { children: title, type: 'tertiary' }),
-            description && React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', type: 'default' })),
-        action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, onClick: action.onClick }))));
-};
-
-exports.Accordion = Accordion;
-exports.ActionDialog = ActionDialog;
-exports.Alert = Alert;
-exports.AppHeader = AppHeader;
-exports.AppMenu = AppMenu;
-exports.BulkActionBar = BulkActionBar;
-exports.Button = Button;
-exports.ButtonMenu = ButtonMenu;
-exports.Checkbox = Checkbox;
-exports.Checklist = Checklist;
-exports.Colors = Colors;
-exports.Copy = Copy;
-exports.DatePicker = DatePicker;
-exports.Drawer = Drawer;
-exports.EditableTheme = EditableTheme;
-exports.Field = Field;
-exports.FieldGroup = FieldGroup;
-exports.FileUpload = FileUpload;
-exports.FontSizes = FontSizes;
-exports.FontStyles = FontStyles;
-exports.Heading = Heading;
-exports.Input = Input$1;
-exports.Link = Link;
-exports.Loader = Loader;
-exports.Logo = Logo;
-exports.Modal = Modal;
-exports.MoreMenu = MoreMenu;
-exports.MultiSelect = MultiSelect;
-exports.PageHeader = PageHeader;
-exports.Pagination = Pagination;
-exports.ProgressBar = ProgressBar;
-exports.Radio = Radio;
-exports.RadioList = RadioList;
-exports.Select = Select;
-exports.Table = Table;
-exports.Tabs = Tabs;
-exports.Tag = Tag;
-exports.Toggle = Toggle;
-exports.Tooltip = Tooltip;
-exports.ZeroState = ZeroState;
-exports.formatAsPhone = formatAsPhone;
-exports.formatAsSsn = formatAsSsn;
-exports.getAgesFromDob = getAgesFromDob;
-exports.getDaysForMonth = getDaysForMonth;
-exports.getYears = getYears;
-exports.validateEmail = validateEmail;
-exports.validatePhone = validatePhone;
-//# sourceMappingURL=index.js.map
+    const id = generateUniqueId('zero-state');
+    return (React.createElement(Container, Object.assign({}, accessibleProps, { id: `${id}-container` }),
+        React.createElement(StyledIcon, { id: `${id}-icon-wrapper` },
+            React.createElement(Icon, { color: Colors.MEDIUM_GRAY.Hex, id: `${id}-icon`, path: icon, size: '40px' })),
+        React.createElement(Wrapper, { id: `${id}-wrapper` },
+            React.createElement(Heading, { children: title, id: `${id}-heading`, type: 'tertiary' }),
+            description && (React.createElement(Copy, { align: 'center', children: description, color: 'GRAY', id: `${id}-description`, type: 'default' }))),
+        action && (React.createElement(Button, { children: action.children, disabled: action.disabled, format: action.format, icon: action.icon, id: `${id}-button`, onClick: action.onClick }))));
+};
+
+exports.Accordion = Accordion;
+exports.ActionDialog = ActionDialog;
+exports.Alert = Alert;
+exports.AppHeader = AppHeader;
+exports.AppMenu = AppMenu;
+exports.BulkActionBar = BulkActionBar;
+exports.Button = Button;
+exports.ButtonMenu = ButtonMenu;
+exports.Checkbox = Checkbox;
+exports.Checklist = Checklist;
+exports.Colors = Colors;
+exports.Copy = Copy;
+exports.DatePicker = DatePicker;
+exports.Drawer = Drawer;
+exports.EditableTheme = EditableTheme;
+exports.Field = Field;
+exports.FieldGroup = FieldGroup;
+exports.FileUpload = FileUpload;
+exports.FontSizes = FontSizes;
+exports.FontStyles = FontStyles;
+exports.Heading = Heading;
+exports.Input = Input$1;
+exports.Link = Link;
+exports.Loader = Loader;
+exports.Logo = Logo;
+exports.Modal = Modal;
+exports.MoreMenu = MoreMenu;
+exports.MultiSelect = MultiSelect;
+exports.PageHeader = PageHeader;
+exports.Pagination = Pagination;
+exports.ProgressBar = ProgressBar;
+exports.Radio = Radio;
+exports.RadioList = RadioList;
+exports.Select = Select;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.Tag = Tag;
+exports.Toggle = Toggle;
+exports.Tooltip = Tooltip;
+exports.ZeroState = ZeroState;
+exports.formatAsPhone = formatAsPhone;
+exports.formatAsSsn = formatAsSsn;
+exports.getAgesFromDob = getAgesFromDob;
+exports.getDaysForMonth = getDaysForMonth;
+exports.getYears = getYears;
+exports.validateEmail = validateEmail;
+exports.validatePhone = validatePhone;
+//# sourceMappingURL=index.js.map