@hexure/ui 1.13.31 → 1.13.33

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,8 +85,17 @@ const FontSizes = {
 };
 const EditableTheme = {
     PRIMARY_COLOR: Colors.PRIMARY,
-};
-
+};
+
+//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;
@@ -108,13 +117,14 @@ const Title$2 = styled.div `
 `;
 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));
-};
-
+        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)};
@@ -129,13 +139,15 @@ const StyledComponent = styled.p `
   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));
+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;
@@ -181,11 +193,12 @@ 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 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;
@@ -217,6 +230,8 @@ const StyledButton = styled.button `
   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;
@@ -261,7 +276,7 @@ const Badge$1 = styled.span `
   margin-right: ${props => (props.$small ? '-5px' : '-10px')};
 `;
 const Button = (_a) => {
-    var { badge, children, disabled = false, icon, isForm = false, loading = false, margin = '', onClick, small = false, format = 'primary', 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,17 +310,18 @@ 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;
@@ -338,23 +354,24 @@ const H3 = styled.h3 `
 `;
 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;
@@ -379,16 +396,17 @@ const Buttons$1 = styled.div `
 `;
 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 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;
@@ -415,6 +433,7 @@ 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,23 +485,24 @@ 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;
@@ -507,11 +527,12 @@ const Buttons = styled.div `
   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 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;
@@ -539,13 +560,14 @@ const Remove$1 = styled.div `
 `;
 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 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;
@@ -636,27 +658,32 @@ const SidebarMenuContainer = styled.div `
 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;
@@ -727,19 +754,20 @@ const ErrorMsg = styled.span `
 `;
 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));
-};
-
+                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;
@@ -786,20 +814,22 @@ Title$1.defaultProps = {
 };
 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
+  position: relative;
   display: inline-block;
 `;
 const StyledMoreMenu = styled(MoreMenu) `
-  position: absolute; // Changed from fixed to absolute
+  position: absolute;
   top: ${props => props.$top};
   left: ${props => props.$left};
   width: ${props => props.$menuWidth};
@@ -810,6 +840,7 @@ const ButtonMenu = ({ disabled, label, maxHeight, menuItems, small, position = '
     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,11 +906,11 @@ 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 }))));
-};
-
+    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;
@@ -960,14 +991,15 @@ const Label$3 = styled.span `
 `;
 const Checkbox = (_a) => {
     var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex"]);
-    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, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
-        React.createElement(Check$1, { "$invalid": invalid }),
-        children ? (React.createElement(Label$3, { color: color },
+    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};
@@ -1004,16 +1036,18 @@ 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;
@@ -1045,7 +1079,7 @@ const Trigger$1 = styled.select `
   font-size: ${FontSizes.DEFAULT};
   font-weight: 400;
   font-family: ${FontStyles.DEFAULT};
-  line-height: 2.9em;
+  line-height: 3.1em;
   background-color: transparent;
   background-image: none;
   width: 100%;
@@ -1081,6 +1115,7 @@ const Select = (_a) => {
     var { options, optionGroups, placeholder = '--Select-One--', readOnly, invalid, searchable = false, value: propValue, onChange, style, tabIndex } = _a, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "searchable", "value", "onChange", "style", "tabIndex"]);
     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,17 +1135,17 @@ 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, tabIndex: readOnly ? -1 : tabIndex, type: 'text', value: searchTerm }, accessibleProps))),
-        React.createElement(Trigger$1, Object.assign({ disabled: readOnly, onChange: handleChange, placeholder: placeholder, tabIndex: readOnly ? -1 : tabIndex, 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' })));
-};
-
+                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'};
@@ -1192,14 +1227,15 @@ 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 }))));
-};
-
+        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;
@@ -1271,22 +1307,23 @@ 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;
@@ -1337,18 +1374,19 @@ const Validation = styled.div `
 `;
 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));
-};
-
+            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;
@@ -1379,11 +1417,12 @@ const Content$1 = styled.div `
   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 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;
@@ -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,8 +1686,8 @@ 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;
@@ -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, readOnly: readOnly, ref: innerRef, tabIndex: readOnly ? -1 : tabIndex, 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,26 +1935,26 @@ const Input$1 = (_a) => {
                     setShowOptions(true);
                     if (onFocus)
                         onFocus(e);
-                }, onKeyDown: readOnly ? e => e.preventDefault() : onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: innerRef, step: step, tabIndex: readOnly ? -1 : tabIndex, type: type, value: format === 'currency_decimal' && internalValue ? `$${formatted_value}` : formatted_value }, accessibleProps)),
-        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)};
@@ -1930,9 +1972,10 @@ const Wrapper$7 = styled.a `
 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 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;
@@ -1964,10 +2007,11 @@ const Path = styled.path `
   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 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;
@@ -2017,15 +2061,17 @@ const StepLine = styled.div `
   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;
@@ -2109,36 +2155,37 @@ 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)));
-};
-
+                    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'};
@@ -2192,7 +2239,7 @@ const Options = styled.div `
   border-top: none;
   border-width: 1px;
   left: 0;
-  position: relative;
+  position: absolute;
   right: 0;
   z-index: 10;
   max-height: 220px;
@@ -2229,20 +2276,21 @@ const MultiSelect = (_a) => {
     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));
-};
-
+            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;
@@ -2275,24 +2323,27 @@ const Actions = styled.div `
 `;
 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;
@@ -2319,15 +2370,16 @@ 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 })));
-};
-
+        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;
@@ -2405,22 +2457,23 @@ const Label = styled.span `
 `;
 const Radio = (_a) => {
     var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex"]);
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps),
-        React.createElement(Input, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
-        React.createElement(Check, { "$invalid": invalid }),
-        React.createElement(Label, null,
+    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;
@@ -2486,21 +2539,25 @@ const StyledIcon$1 = styled(Icon) `
 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;
@@ -2552,15 +2609,17 @@ const Badge = styled.div `
 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 = {};
-
+Tabs.defaultProps = {};
+
 const Track = styled.div `
   height: 24px;
   border-radius: 12px;
@@ -2585,13 +2644,14 @@ const Handle = styled.div `
 `;
 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 = {};
-
+Toggle.defaultProps = {};
+
 const Container = styled.div `
   width: 100%;
   padding: 40px auto;
@@ -2619,60 +2679,61 @@ const StyledIcon = styled.div `
 `;
 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