@digital-ai/dot-components 2.7.4 → 2.8.1

package/index.umd.js

@@ -150,14 +150,16 @@
 
     var DotTooltip = function DotTooltip(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'tooltip' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
         leaveDelay = _a.leaveDelay,
         onClose = _a.onClose,
         open = _a.open,
-        _b = _a.placement,
-        placement = _b === void 0 ? 'bottom' : _b,
+        _c = _a.placement,
+        placement = _c === void 0 ? 'bottom' : _c,
         title = _a.title;
       var rootClasses = useStylesWithRootClass('dot-tooltip', className);
       return title ? jsxRuntime.jsx(material.Tooltip, __assign({
@@ -168,6 +170,7 @@
         onClose: onClose,
         open: open,
         placement: placement,
+        role: ariaRole,
         title: title
       }, {
         children: jsxRuntime.jsx("span", {
@@ -187,10 +190,12 @@
 
     var DotIcon = function DotIcon(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'img' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.fontSize,
-        fontSize = _b === void 0 ? 'medium' : _b,
+        _c = _a.fontSize,
+        fontSize = _c === void 0 ? 'medium' : _c,
         iconId = _a.iconId,
         tooltip = _a.tooltip;
       var rootClasses = useStylesWithRootClass(rootClassName$15, className);
@@ -204,11 +209,13 @@
             root: rootClasses
           },
           "data-testid": dataTestId,
-          fontSize: fontSize
+          fontSize: fontSize,
+          role: ariaRole
         }, {
           children: jsxRuntime.jsx("i", {
             className: "icon-" + iconId + " dot-i",
-            "data-testid": dataTestId && dataTestId + "-i"
+            "data-testid": dataTestId && dataTestId + "-i",
+            role: ariaRole
           }, void 0)
         }), void 0)
       }), void 0);
@@ -216,6 +223,8 @@
 
     var DotTypography = function DotTypography(_a) {
       var ariaLabel = _a.ariaLabel,
+        ariaLevel = _a.ariaLevel,
+        ariaRole = _a.ariaRole,
         className = _a.className,
         dataTestId = _a["data-testid"],
         children = _a.children,
@@ -224,14 +233,21 @@
         noWrap = _a.noWrap,
         variant = _a.variant;
       var rootClasses = useStylesWithRootClass('dot-typography', className);
+      React.useEffect(function () {
+        if (ariaRole === 'heading' && !ariaLevel) {
+          console.warn('please include ariaLevel when using ariaRole="heading"');
+        }
+      }, []);
       return jsxRuntime.jsx(material.Typography, __assign({
         "aria-label": ariaLabel,
+        "aria-level": ariaLevel,
         classes: {
           root: rootClasses
         },
         component: component,
         "data-testid": dataTestId,
         noWrap: noWrap,
+        role: ariaRole,
         style: {
           marginBottom: noMarginBottom ? 0 : undefined
         },
@@ -368,7 +384,7 @@
     })(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         InputProps = _a.InputProps;
-      return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiInputBase-inputSizeSmall {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n\n        &:not(textarea) {\n          /* padding above and below together is 21px, and total height should be 40px */\n          height: 19px;\n        }\n      }\n      .MuiInputBase-inputMultiline {\n        padding: 0;\n      }\n    }\n\n    &.", ", &.", " {\n      .", " {\n        color: ", ";\n\n        .dot-icon i {\n          margin-top: -2px;\n        }\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n\n      .MuiInputBase-inputSizeSmall:not(textarea) {\n        height: 19px;\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n\n      select.dot-select {\n        padding-left: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n\n        &.", " .", " {\n          border-color: ", ";\n        }\n      }\n\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n\n      .MuiInputBase-inputAdornedStart {\n        padding-left: 12px;\n      }\n      .MuiInputBase-inputAdornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiInputBase-inputSizeSmall {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n\n        &:not(textarea) {\n          /* padding above and below together is 21px, and total height should be 40px */\n          height: 19px;\n        }\n      }\n      .MuiInputBase-inputMultiline {\n        padding: 0;\n      }\n    }\n\n    &.", ", &.", " {\n      .", " {\n        color: ", ";\n\n        .dot-icon i {\n          margin-top: -2px;\n        }\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n\n      .MuiInputBase-inputSizeSmall:not(textarea) {\n        height: 19px;\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n\n      select.dot-select {\n        padding-left: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n\n        &.", " .", " {\n          border-color: ", ";\n        }\n      }\n\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n\n      .MuiInputBase-inputAdornedStart {\n        padding-left: 12px;\n      }\n      .MuiInputBase-inputAdornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        ", ";\n      }\n    }\n  "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.spacing(1.5), InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
+      return styled.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n    &.", " {\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiInputBase-inputSizeSmall {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n\n        &:not(textarea) {\n          /* padding above and below together is 21px, and total height should be 40px */\n          height: 19px;\n        }\n      }\n      .MuiInputBase-inputMultiline {\n        padding: 0;\n      }\n    }\n\n    &.", " .", " {\n      // inputSelect has an arrow so we need spacing for end adornment\n      margin-right: ", ";\n    }\n\n    &.", ", &.", " {\n      .", " {\n        color: ", ";\n        p {\n          font-size: ", "px;\n          margin: 0;\n        }\n\n        .dot-icon i {\n          margin-top: -2px;\n        }\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n\n      .MuiInputBase-inputSizeSmall:not(textarea) {\n        height: 19px;\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n\n      select.dot-select {\n        padding-left: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n\n        &.", " .", " {\n          border-color: ", ";\n        }\n      }\n\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n\n      .MuiInputBase-inputAdornedStart {\n        padding-left: 12px;\n      }\n      .MuiInputBase-inputAdornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n      .MuiInputBase-input {\n        box-sizing: content-box;\n      }\n      .MuiOutlinedInput-input {\n        padding: ", ";\n      }\n      .MuiInputBase-inputSizeSmall {\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n\n        &:not(textarea) {\n          /* padding above and below together is 21px, and total height should be 40px */\n          height: 19px;\n        }\n      }\n      .MuiInputBase-inputMultiline {\n        padding: 0;\n      }\n    }\n\n    &.", " .", " {\n      // inputSelect has an arrow so we need spacing for end adornment\n      margin-right: ", ";\n    }\n\n    &.", ", &.", " {\n      .", " {\n        color: ", ";\n        p {\n          font-size: ", "px;\n          margin: 0;\n        }\n\n        .dot-icon i {\n          margin-top: -2px;\n        }\n      }\n\n      .MuiInputBase-root {\n        margin-bottom: 0;\n      }\n\n      .MuiInputBase-inputSizeSmall:not(textarea) {\n        height: 19px;\n        padding-top: 10.5px;\n        padding-bottom: 10.5px;\n      }\n\n      select.dot-select {\n        padding-left: ", ";\n      }\n\n      .MuiSelect-select:focus {\n        background-color: transparent;\n      }\n\n      .MuiSelect-icon {\n        right: ", ";\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiFormLabel-root.Mui-focused {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      &.", " {\n        .MuiOutlinedInput-notchedOutline {\n          border-color: ", ";\n        }\n\n        .MuiInputLabel-outlined.MuiInputLabel-shrink {\n          color: ", ";\n        }\n\n        .", " .dot-icon {\n          color: ", ";\n        }\n      }\n\n      .MuiOutlinedInput-adornedStart {\n        padding-left: 12px;\n\n        &.", " .", " {\n          border-color: ", ";\n        }\n      }\n\n      .MuiInputLabel-outlined.MuiInputLabel-shrink {\n        color: ", ";\n      }\n\n      .MuiInputBase-inputAdornedStart {\n        padding-left: 12px;\n      }\n      .MuiInputBase-inputAdornedEnd {\n        padding-right: 12px;\n      }\n      .MuiFormHelperText-root {\n        ", ";\n      }\n    }\n  "])), rootClassName$13, InputProps.startAdornment ? "18px 12px 18px 0px" : "18px 12px", rootSelectClassName, adornmentIconClassName, theme.spacing(2), rootSelectClassName, rootClassName$13, adornmentIconClassName, theme.palette.layer.n700, theme.typography.body2.fontSize, theme.spacing(1.5), InputProps.endAdornment ? "44px" : "12px", successClassName, theme.palette.secondary.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.secondary.main, errorClassName, theme.palette.error.main, adornmentIconClassName, theme.palette.error.main, warningClassName, theme.palette.warning.main, theme.palette.grey[700], adornmentIconClassName, theme.palette.warning.main, warningClassName, fieldsetClassName, theme.palette.warning[500], theme.palette.grey[700], formHelperTextRootStyles(theme));
     });
     var templateObject_1$19, templateObject_2$14, templateObject_3$c, templateObject_4$a, templateObject_5$3, templateObject_6$1;
 
@@ -1872,25 +1888,27 @@
     var DotAvatar = function DotAvatar(_a) {
       var alt = _a.alt,
         ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'img' : _b,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'div' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'div' : _c,
         color = _a.color,
         dataTestId = _a["data-testid"],
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
         onClick = _a.onClick,
-        _c = _a.size,
-        size = _c === void 0 ? 'medium' : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
-        _e = _a.text,
-        text = _e === void 0 ? alt : _e,
-        _f = _a.type,
-        type = _f === void 0 ? 'image' : _f,
+        _d = _a.size,
+        size = _d === void 0 ? 'medium' : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
+        _f = _a.text,
+        text = _f === void 0 ? alt : _f,
+        _g = _a.type,
+        type = _g === void 0 ? 'image' : _g,
         tooltip = _a.tooltip,
-        _g = _a.variant,
-        variant = _g === void 0 ? 'circular' : _g,
+        _h = _a.variant,
+        variant = _h === void 0 ? 'circular' : _h,
         style = _a.style;
       var rootClasses = useStylesWithRootClass(rootClassName$10, className);
       var getAvatarColor = function getAvatarColor() {
@@ -1915,6 +1933,7 @@
           onClick: function (event) {
             return onClick ? onClick(event) : null;
           },
+          role: onClick ? 'button' : ariaRole,
           src: type === 'image' ? imageSrc : null,
           style: style,
           tabIndex: tooltip ? tabIndex : undefined,
@@ -1924,9 +1943,9 @@
             "data-testid": dataTestId,
             iconId: iconId,
             imageSrc: imageSrc,
+            size: size,
             text: text,
-            type: type,
-            size: size
+            type: type
           }, void 0)
         }), void 0)
       }), void 0);
@@ -1938,36 +1957,38 @@
       componentId: "sx99hh-0"
     })(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n    &.", " {\n      margin: ", ";\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-outlined:not([disabled]) {\n        border-color: rgba(0, 0, 0, 0.23);\n        color: ", ";\n      }\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      .dot-icon {\n        display: flex;\n        padding: 0;\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", ";\n      min-width: auto;\n      white-space: nowrap;\n\n      &.MuiButton-outlined:not([disabled]) {\n        border-color: rgba(0, 0, 0, 0.23);\n        color: ", ";\n      }\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover,\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-text {\n        padding: 6px 16px;\n      }\n\n      .dot-icon {\n        display: flex;\n        padding: 0;\n      }\n    }\n  "])), rootClassName$$, theme.spacing(0.5), theme.palette.grey[700], theme.spacing(5), theme.palette.error.main, material.darken(theme.palette.error.main, 0.2));
+      return styled.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n    &.", " {\n      margin: ", ";\n      padding: ", ";\n      min-width: auto;\n      white-space: nowrap;\n\n      &:hover {\n        background-color: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-outlined,\n      &.MuiButton-text {\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-outlined {\n        border-color: ", ";\n        color: ", ";\n      }\n\n      &.MuiButton-text {\n        background-color: transparent;\n        color: ", ";\n      }\n\n      &.Mui-disabled {\n        background-color: ", ";\n        color: ", ";\n\n        &.MuiButton-outlined {\n          border-color: ", ";\n        }\n\n        &.MuiButton-text,\n        &.MuiButton-containedSecondary {\n          background-color: transparent;\n        }\n      }\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", ";\n      }\n\n      .dot-icon {\n        display: flex;\n        padding: 0;\n      }\n    }\n  "], ["\n    &.", " {\n      margin: ", ";\n      padding: ", ";\n      min-width: auto;\n      white-space: nowrap;\n\n      &:hover {\n        background-color: ", ";\n      }\n      &:active {\n        background-color: ", ";\n      }\n\n      &.MuiButton-containedSecondary {\n        background-color: ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-outlined,\n      &.MuiButton-text {\n        &:hover {\n          background-color: ", ";\n        }\n        &:active {\n          background-color: ", ";\n        }\n      }\n\n      &.MuiButton-outlined {\n        border-color: ", ";\n        color: ", ";\n      }\n\n      &.MuiButton-text {\n        background-color: transparent;\n        color: ", ";\n      }\n\n      &.Mui-disabled {\n        background-color: ", ";\n        color: ", ";\n\n        &.MuiButton-outlined {\n          border-color: ", ";\n        }\n\n        &.MuiButton-text,\n        &.MuiButton-containedSecondary {\n          background-color: transparent;\n        }\n      }\n\n      &:not(.MuiButton-sizeLarge):not(.MuiButton-sizeSmall) {\n        /* Override height for medium size */\n        height: ", ";\n      }\n\n      .dot-icon {\n        display: flex;\n        padding: 0;\n      }\n    }\n  "])), rootClassName$$, theme.spacing(0.5), theme.spacing(0.75, 2), theme.palette.primary[800], theme.palette.primary[400], theme.palette.error[500], theme.palette.error[600], theme.palette.error[400], theme.palette.grey[50], theme.palette.grey[100], theme.palette.grey[300], theme.palette.grey[700], theme.palette.grey[700], theme.palette.grey[50], theme.palette.grey[400], theme.palette.grey[200], theme.spacing(5));
     });
     var templateObject_1$14, templateObject_2$10;
 
     /** This component wraps the Button component from @material-ui. */
     var DotButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var ariaLabel = _a.ariaLabel,
-        _b = _a.autoFocus,
-        autoFocus = _b === void 0 ? false : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'button' : _b,
+        _c = _a.autoFocus,
+        autoFocus = _c === void 0 ? false : _c,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.disableRipple,
-        disableRipple = _d === void 0 ? false : _d,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
+        _e = _a.disableRipple,
+        disableRipple = _e === void 0 ? false : _e,
         endIcon = _a.endIcon,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
-        _f = _a.isSubmit,
-        isSubmit = _f === void 0 ? false : _f,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
+        _g = _a.isSubmit,
+        isSubmit = _g === void 0 ? false : _g,
         onClick = _a.onClick,
         onKeyDown = _a.onKeyDown,
-        _g = _a.size,
-        size = _g === void 0 ? 'medium' : _g,
+        _h = _a.size,
+        size = _h === void 0 ? 'medium' : _h,
         startIcon = _a.startIcon,
         tabIndex = _a.tabIndex,
         tooltip = _a.tooltip,
-        _h = _a.type,
-        type = _h === void 0 ? 'primary' : _h;
+        _j = _a.type,
+        type = _j === void 0 ? 'primary' : _j;
       var rootClasses = useStylesWithRootClass(rootClassName$$, className);
       var color;
       var variant;
@@ -2009,6 +2030,7 @@
           },
           onKeyDown: onKeyDown,
           ref: ref,
+          role: ariaRole,
           size: size,
           startIcon: startIcon,
           tabIndex: tabIndex,
@@ -2031,19 +2053,21 @@
 
     var DotLink = function DotLink(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'link' : _b,
         children = _a.children,
         className = _a.className,
-        _b = _a.color,
-        color = _b === void 0 ? 'primary' : _b,
+        _c = _a.color,
+        color = _c === void 0 ? 'primary' : _c,
         dataTestId = _a["data-testid"],
         href = _a.href,
         onClick = _a.onClick,
         onMouseEnter = _a.onMouseEnter,
         onPointerDown = _a.onPointerDown,
-        _c = _a.rel,
-        rel = _c === void 0 ? 'noreferrer' : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
+        _d = _a.rel,
+        rel = _d === void 0 ? 'noreferrer' : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
         target = _a.target,
         tooltip = _a.tooltip,
         underline = _a.underline;
@@ -2070,6 +2094,7 @@
           onMouseEnter: onMouseEnter,
           onPointerDown: onPointerDown,
           rel: rel,
+          role: ariaRole,
           tabIndex: tabIndex,
           target: target,
           underline: underline
@@ -2390,25 +2415,27 @@
     var DotMenu = function DotMenu(_a) {
       var anchorEl = _a.anchorEl,
         ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'menu' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.dense,
-        dense = _b === void 0 ? true : _b,
+        _c = _a.dense,
+        dense = _c === void 0 ? true : _c,
         disablePortal = _a.disablePortal,
         id = _a.id,
-        _c = _a.loading,
-        loading = _c === void 0 ? false : _c,
-        _d = _a.maxVisibleItems,
-        maxVisibleItems = _d === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _d,
+        _d = _a.loading,
+        loading = _d === void 0 ? false : _d,
+        _e = _a.maxVisibleItems,
+        maxVisibleItems = _e === void 0 ? DEFAULT_MAX_VISIBLE_ITEMS : _e,
         menuItemHeight = _a.menuItemHeight,
-        _e = _a.menuItems,
-        menuItems = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'bottom' : _f,
+        _f = _a.menuItems,
+        menuItems = _f === void 0 ? [] : _f,
+        _g = _a.menuPlacement,
+        menuPlacement = _g === void 0 ? 'bottom' : _g,
         onLeave = _a.onLeave,
         onSelect = _a.onSelect,
-        _g = _a.open,
-        open = _g === void 0 ? false : _g,
+        _h = _a.open,
+        open = _h === void 0 ? false : _h,
         selectedKey = _a.selectedKey;
       var rootClasses = useStylesWithRootClass(rootClassName$W, className, loading ? 'loading' : '');
       var isSubmenu = checkIfSubmenu(anchorEl);
@@ -2493,6 +2520,7 @@
                       selectedKey: selectedKey
                     }, void 0);
                   },
+                  ariaRole: ariaRole,
                   selectedKey: selectedKey
                 }, void 0)
               }), void 0)
@@ -2549,21 +2577,23 @@
 
     var DotIconButton = function DotIconButton(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'button' : _b,
         className = _a.className,
-        _b = _a.color,
-        color = _b === void 0 ? 'inherit' : _b,
+        _c = _a.color,
+        color = _c === void 0 ? 'inherit' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
-        _d = _a.disableRipple,
-        disableRipple = _d === void 0 ? false : _d,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
+        _e = _a.disableRipple,
+        disableRipple = _e === void 0 ? false : _e,
         iconId = _a.iconId,
-        _e = _a.iconSize,
-        iconSize = _e === void 0 ? 'small' : _e,
+        _f = _a.iconSize,
+        iconSize = _f === void 0 ? 'small' : _f,
         onClick = _a.onClick,
         tooltip = _a.tooltip,
-        _f = _a.size,
-        size = _f === void 0 ? 'medium' : _f;
+        _g = _a.size,
+        size = _g === void 0 ? 'medium' : _g;
       var rippleClassName = disableRipple ? 'ripple-disabled' : '';
       var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
       return jsxRuntime.jsx(DotTooltip, __assign({
@@ -2582,6 +2612,7 @@
           onClick: function (event) {
             return onClick && onClick(event);
           },
+          role: ariaRole,
           size: size
         }, {
           children: jsxRuntime.jsx(DotIcon, {
@@ -2603,8 +2634,10 @@
       var rootClasses = useStylesWithRootClass(rootClassName$T, className);
       return jsxRuntime.jsxs(StyleDrawerHeader, __assign({
         "aria-label": ariaLabel,
+        "aria-level": 2,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: "heading"
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
           className: "close-button",
@@ -2625,6 +2658,8 @@
 
     var DotDrawerBody = function DotDrawerBody(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"],
@@ -2635,7 +2670,8 @@
       return jsxRuntime.jsxs(StyleDrawerBody, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: ariaRole
       }, {
         children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
           className: "dot-drawer-close-button",
@@ -2657,6 +2693,8 @@
 
     var DotDrawerFooter = function DotDrawerFooter(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
         children = _a.children,
         className = _a.className,
         dataTestId = _a["data-testid"];
@@ -2664,7 +2702,8 @@
       return jsxRuntime.jsx(StyleDrawerFooter, __assign({
         "aria-label": ariaLabel,
         className: rootClasses,
-        "data-testid": dataTestId
+        "data-testid": dataTestId,
+        role: ariaRole
       }, {
         children: children
       }), void 0);
@@ -2674,6 +2713,8 @@
       var _b = _a.anchor,
         anchor = _b === void 0 ? 'right' : _b,
         ariaLabel = _a.ariaLabel,
+        _c = _a.ariaRole,
+        ariaRole = _c === void 0 ? 'presentation' : _c,
         className = _a.className,
         children = _a.children,
         dataTestId = _a["data-testid"],
@@ -2685,10 +2726,10 @@
         onClose = _a.onClose,
         open = _a.open,
         PaperProps = _a.PaperProps,
-        _c = _a.variant,
-        variant = _c === void 0 ? 'temporary' : _c,
-        _d = _a.width,
-        width = _d === void 0 ? '256px' : _d;
+        _d = _a.variant,
+        variant = _d === void 0 ? 'temporary' : _d,
+        _e = _a.width,
+        width = _e === void 0 ? '256px' : _e;
       React.useEffect(function () {
         if (children !== undefined && drawerBodyProps !== undefined) {
           console.warn('Please use `children` or `drawerBodyProps`. If both are used, `children` is ignored.');
@@ -2704,7 +2745,9 @@
       var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return jsxRuntime.jsxs(StyledDrawer, __assign({
         ModalProps: ModalProps,
-        PaperProps: PaperProps,
+        PaperProps: __assign(__assign({}, PaperProps), {
+          role: ariaRole
+        }),
         anchor: anchor,
         "aria-label": ariaLabel,
         classes: {
@@ -2715,6 +2758,7 @@
         height: height,
         onClose: handleClose,
         open: open,
+        role: ariaRole,
         variant: variant,
         width: width
       }, {
@@ -2774,31 +2818,33 @@
     };
     var DotList = function DotList(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'list' : _b,
         children = _a.children,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'ul' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'ul' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.dense,
-        dense = _c === void 0 ? false : _c,
-        _d = _a.disablePadding,
-        disablePadding = _d === void 0 ? false : _d,
-        _e = _a.items,
-        items = _e === void 0 ? [] : _e,
-        _f = _a.menuPlacement,
-        menuPlacement = _f === void 0 ? 'right-start' : _f,
-        _g = _a.nestedDrawerLeftSpacing,
-        nestedDrawerLeftSpacing = _g === void 0 ? 240 : _g,
-        _h = _a.nestedListType,
-        nestedListType = _h === void 0 ? 'expandable' : _h,
-        _j = _a.width,
-        width = _j === void 0 ? 240 : _j;
+        _d = _a.dense,
+        dense = _d === void 0 ? false : _d,
+        _e = _a.disablePadding,
+        disablePadding = _e === void 0 ? false : _e,
+        _f = _a.items,
+        items = _f === void 0 ? [] : _f,
+        _g = _a.menuPlacement,
+        menuPlacement = _g === void 0 ? 'right-start' : _g,
+        _h = _a.nestedDrawerLeftSpacing,
+        nestedDrawerLeftSpacing = _h === void 0 ? 240 : _h,
+        _j = _a.nestedListType,
+        nestedListType = _j === void 0 ? 'expandable' : _j,
+        _k = _a.width,
+        width = _k === void 0 ? 240 : _k;
       var rootClasses = useStylesWithRootClass(rootClassName$Z, className);
       var listWidth = typeof width === 'number' ? width + "px" : width;
       var listRef = React.useRef();
-      var _k = React.useState(null),
-        listItemIndex = _k[0],
-        setListItemIndex = _k[1];
+      var _l = React.useState(null),
+        listItemIndex = _l[0],
+        setListItemIndex = _l[1];
       var updateSelectedListItem = function updateSelectedListItem(currentIndex) {
         currentIndex === listItemIndex ? setListItemIndex(null) : setListItemIndex(currentIndex);
       };
@@ -2812,6 +2858,7 @@
         dense: dense,
         disablePadding: disablePadding,
         ref: listRef,
+        role: ariaRole,
         style: {
           width: listWidth
         }
@@ -2868,19 +2915,21 @@
     };
     var DotListItem = function DotListItem(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'listitem' : _b,
         className = _a.className,
-        _b = _a.component,
-        component = _b === void 0 ? 'li' : _b,
+        _c = _a.component,
+        component = _c === void 0 ? 'li' : _c,
         dataTestId = _a["data-testid"],
-        _c = _a.divider,
-        divider = _c === void 0 ? false : _c,
+        _d = _a.divider,
+        divider = _d === void 0 ? false : _d,
         endIcon = _a.endIcon,
         href = _a.href,
         isOpened = _a.isOpened,
         onClick = _a.onClick,
         onMenuLeave = _a.onMenuLeave,
-        _d = _a.items,
-        items = _d === void 0 ? [] : _d,
+        _e = _a.items,
+        items = _e === void 0 ? [] : _e,
         menuPlacement = _a.menuPlacement,
         nestedDrawerLeftSpacing = _a.nestedDrawerLeftSpacing,
         nestedListType = _a.nestedListType,
@@ -2891,13 +2940,13 @@
         target = _a.target,
         text = _a.text,
         tooltip = _a.tooltip,
-        _e = _a.tooltipPlacement,
-        tooltipPlacement = _e === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _e;
+        _f = _a.tooltipPlacement,
+        tooltipPlacement = _f === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _f;
       var hasChildren = items.length > 0;
       var isFlyout = nestedListType === 'menu' && hasChildren;
-      var _f = React.useState(null),
-        anchorEl = _f[0],
-        setAnchorEl = _f[1];
+      var _g = React.useState(null),
+        anchorEl = _g[0],
+        setAnchorEl = _g[1];
       var showEndIcon = endIcon || hasChildren;
       var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
       var toggleOpen = function toggleOpen(event) {
@@ -2945,6 +2994,7 @@
             divider: divider,
             href: onClick ? null : href,
             onClick: onClick || !href ? handleClick : null,
+            role: onClick ? 'button' : ariaRole,
             selected: isFlyout ? isOpened : selected,
             target: target
           }, {
@@ -3109,6 +3159,7 @@
         error = _a.error,
         dataTestId = _a.dataTestId,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         success = _a.success,
         warning = _a.warning;
       var renderIcon = function renderIcon(iconType) {
@@ -3125,7 +3176,7 @@
         className: adornmentIconClassName + " end",
         position: "end"
       }, {
-        children: endAdornmentIcon
+        children: endAdornmentIcon || endText
       }), void 0);
       return endAdornmentTooltip ? jsxRuntime.jsx(DotTooltip, __assign({
         title: endAdornmentTooltip
@@ -3155,6 +3206,7 @@
         hasDebounce = _a.hasDebounce,
         helperText = _a.helperText,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         id = _a.id,
         inputRef = _a.inputRef,
         label = _a.label,
@@ -3234,13 +3286,14 @@
           children: startIcon
         }), void 0);
       };
-      var endAdornmentIcon = function endAdornmentIcon() {
-        if (!hasEndAdornmentIcon) return null;
+      var endAdornmentIconOrText = function endAdornmentIconOrText() {
+        if (!hasEndAdornmentIcon && !endText) return null;
         return jsxRuntime.jsx(EndAdornment, __assign({}, {
           endAdornmentTooltip: endAdornmentTooltip,
           error: error,
           dataTestId: dataTestId,
           endIcon: endIcon,
+          endText: endText,
           success: success,
           warning: warning
         }), void 0);
@@ -3258,7 +3311,7 @@
         }), void 0), jsxRuntime.jsx(StyledTextField, {
           InputProps: {
             startAdornment: startAdornmentIcon(),
-            endAdornment: endAdornmentIcon()
+            endAdornment: endAdornmentIconOrText()
           },
           "aria-label": name,
           autoComplete: autoComplete,
@@ -3313,22 +3366,24 @@
 
     function SearchInput(_a) {
       var dataTestId = _a["data-testid"],
-        _b = _a.autoFocus,
-        autoFocus = _b === void 0 ? true : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'searchbox' : _b,
+        _c = _a.autoFocus,
+        autoFocus = _c === void 0 ? true : _c,
         className = _a.className,
-        _c = _a.disabled,
-        disabled = _c === void 0 ? false : _c,
+        _d = _a.disabled,
+        disabled = _d === void 0 ? false : _d,
         onChange = _a.onChange,
         onClear = _a.onClear,
-        _d = _a.placeholder,
-        placeholder = _d === void 0 ? 'Search' : _d,
-        _e = _a.tooltip,
-        tooltip = _e === void 0 ? null : _e,
+        _e = _a.placeholder,
+        placeholder = _e === void 0 ? 'Search' : _e,
+        _f = _a.tooltip,
+        tooltip = _f === void 0 ? null : _f,
         value = _a.value;
       var rootClasses = useStylesWithRootClass(rootClassName$P, className);
-      var _f = React.useState(value),
-        searchText = _f[0],
-        setSearchText = _f[1];
+      var _g = React.useState(value),
+        searchText = _g[0],
+        setSearchText = _g[1];
       var previousSearchText = '';
       var handleChange = React.useCallback(function (event) {
         previousSearchText = event.target.value;
@@ -3362,6 +3417,7 @@
           title: tooltip
         }, {
           children: jsxRuntime.jsx(DotInputText, {
+            ariaRole: ariaRole,
             "data-testid": dataTestId,
             autoFocus: autoFocus,
             className: "search-text",
@@ -3882,7 +3938,8 @@
         if (selectedAppType && appTypeMap && appTypeLabels) {
           var labelConfig = appTypeLabels.get(selectedAppType);
           return jsxRuntime.jsxs("div", __assign({
-            className: "content"
+            className: "content",
+            role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx("span", {
               children: jsxRuntime.jsx(DotButton, __assign({
@@ -3898,7 +3955,9 @@
                 }, void 0)
               }), void 0)
             }, void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-heading"
+              "aria-level": 2,
+              className: "product-heading",
+              role: "heading"
             }, {
               children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
             }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", __assign({
@@ -3911,14 +3970,16 @@
                 value: searchText
               }, void 0)
             }), void 0), jsxRuntime.jsx("div", __assign({
-              className: "product-applications"
+              className: "product-applications",
+              role: "list"
             }, {
               children: filteredAppInstances()
             }), void 0)]
           }), void 0);
         } else {
           return jsxRuntime.jsxs("div", __assign({
-            className: "content"
+            className: "content",
+            role: "contentinfo"
           }, {
             children: [jsxRuntime.jsx(DotList, {
               items: appTypeMenuItems === null || appTypeMenuItems === void 0 ? void 0 : appTypeMenuItems.map(function (item) {
@@ -3934,7 +3995,9 @@
       var header = {
         className: 'app-switcher-header',
         children: jsxRuntime.jsxs("div", __assign({
+          "aria-level": 1,
           className: "app-switcher-header-title",
+          role: "heading",
           style: {
             marginTop: yOffset + 'px',
             width: '80%'
@@ -3946,6 +4009,8 @@
             type: "image",
             variant: "circular"
           }, void 0), jsxRuntime.jsx(DotTypography, __assign({
+            ariaRole: "heading",
+            ariaLevel: 1,
             className: "app-switcher-label"
           }, {
             children: "App switcher"
@@ -4744,6 +4809,7 @@
         endAdornmentTooltip = _a.endAdornmentTooltip,
         _e = _a.error,
         error = _e === void 0 ? false : _e,
+        filterOptions = _a.filterOptions,
         _f = _a.filterSelectedOptions,
         filterSelectedOptions = _f === void 0 ? true : _f,
         _g = _a.freesolo,
@@ -4754,6 +4820,7 @@
         helperText = _a.helperText,
         inputId = _a.inputId,
         inputRef = _a.inputRef,
+        inputValue = _a.inputValue,
         label = _a.label,
         loading = _a.loading,
         maxHeight = _a.maxHeight,
@@ -4920,9 +4987,9 @@
         }
       };
       // Create handler only if 'onInputChange' or 'actionItem' prop is defined
-      var handleInputChange = (onInputChange || isActionItemDefined) && function (event, inputValue, reason) {
-        isActionItemDefined && setInputText(inputValue);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, inputValue, reason);
+      var handleInputChange = (onInputChange || isActionItemDefined) && function (event, currentInputValue, reason) {
+        isActionItemDefined && setInputText(currentInputValue);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentInputValue, reason);
       } || undefined;
       // Create callback when action item click event handler is defined,
       // free-solo mode is NOT set and 'Enter' key has been pressed
@@ -4981,6 +5048,7 @@
         "data-testid": dataTestId,
         defaultValue: defaultValue,
         disabled: disabled,
+        filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
         freeSolo: freesolo,
         getOptionLabel: function (option) {
@@ -4990,6 +5058,7 @@
         groupBy: group ? function (option) {
           return option.group;
         } : undefined,
+        inputValue: inputValue,
         ListboxComponent: ListboxComponent,
         loading: loading,
         multiple: multiple,
@@ -5024,7 +5093,7 @@
             // passed to renderInput includes inputProps and InputProps properties
             // that must be passed to TextField in order for Autocomplete to work
             // correctly. We decided that at this time exposing those props in
-            // DotInputText would not be a worthwhile tradeoff. Instead we are
+            // DotInputText would not be a worthwhile tradeoff. Instead, we are
             // using the StyledTextField used by DotInputText so that we will
             // at least pick up any styling that is used there. Should additional
             // functionality be added to DotInputText we will have to make a
@@ -5446,7 +5515,9 @@
           itemsAfterCollapse: itemsAfterCollapse,
           maxItems: getMaxItems(adjustMaxItems, maxVisibleItems, maxItems),
           ref: breadcrumbRef,
+          role: "navigation",
           separator: jsxRuntime.jsx(DotIcon, {
+            ariaRole: "presentation",
             className: "separator",
             iconId: "chevron-right"
           }, void 0)
@@ -6580,6 +6651,7 @@
         _b = _a.disabled,
         disabled = _b === void 0 ? false : _b,
         endIcon = _a.endIcon,
+        endText = _a.endText,
         _c = _a.error,
         error = _c === void 0 ? false : _c,
         _d = _a.fullWidth,
@@ -6609,6 +6681,7 @@
         warning = _h === void 0 ? false : _h;
       var hasWarning = !error && warning && warningClassName;
       var hasSuccess = !error && !warning && success && successClassName;
+      var endAdornment = endIcon || endText;
       var rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning, readOnly ? 'read-only' : '');
       var getOption = function getOption(option) {
         return typeof option === 'string' ? option : option.option;
@@ -6633,11 +6706,11 @@
             }, {
               children: startIcon
             }), void 0),
-            endAdornment: endIcon && jsxRuntime.jsx(StyledAdornment, __assign({
+            endAdornment: endAdornment && jsxRuntime.jsx(StyledAdornment, __assign({
               className: adornmentIconClassName + " end",
               position: "end"
             }, {
-              children: endIcon
+              children: endAdornment
             }), void 0)
           },
           SelectProps: {
@@ -6799,6 +6872,7 @@
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClasses,
         control: radioControl,
+        "aria-label": value,
         label: label || radioControl,
         labelPlacement: labelPlacement,
         value: value
@@ -6807,6 +6881,8 @@
 
     var DotRadioGroup = function DotRadioGroup(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'radiogroup' : _b,
         className = _a.className,
         dataTestId = _a["data-testid"],
         defaultValue = _a.defaultValue,
@@ -6816,22 +6892,22 @@
         helperText = _a.helperText,
         groupLabel = _a.groupLabel,
         name = _a.name,
-        _b = _a.labelPlacement,
-        labelPlacement = _b === void 0 ? 'end' : _b,
+        _c = _a.labelPlacement,
+        labelPlacement = _c === void 0 ? 'end' : _c,
         onChange = _a.onChange,
         value = _a.value,
         options = _a.options,
         startIcon = _a.startIcon,
         required = _a.required,
         row = _a.row,
-        _c = _a.size,
-        size = _c === void 0 ? 'medium' : _c;
+        _d = _a.size,
+        size = _d === void 0 ? 'medium' : _d;
       var placement = "" + placementClassName + labelPlacement;
       var rootClasses = useStylesWithRootClass(rootClassName$A, className, placement);
       var radioValue = value || defaultValue;
-      var _d = React.useState(radioValue),
-        selectedValue = _d[0],
-        setSelectedValue = _d[1];
+      var _e = React.useState(radioValue),
+        selectedValue = _e[0],
+        setSelectedValue = _e[1];
       /* This will ensure that value can be updated from the outside */
       React.useEffect(function () {
         setSelectedValue(radioValue);
@@ -6887,6 +6963,7 @@
             defaultValue: defaultValue,
             name: name,
             onChange: handleChange,
+            role: ariaRole,
             row: row,
             value: selectedValue
           }, {
@@ -7600,39 +7677,41 @@
      */
     var DotInlineEdit = function DotInlineEdit(_a) {
       var ariaLabel = _a.ariaLabel,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'combobox' : _b,
         bindings = _a.bindings,
         charactersLimit = _a.charactersLimit,
         className = _a.className,
         dataTestId = _a["data-testid"],
-        _b = _a.fullWidth,
-        fullWidth = _b === void 0 ? true : _b,
+        _c = _a.fullWidth,
+        fullWidth = _c === void 0 ? true : _c,
         hideActionButtons = _a.hideActionButtons,
         name = _a.name,
         onChange = _a.onChange,
         onEditStateChange = _a.onEditStateChange,
         readOnly = _a.readOnly,
         selectTextOnEdit = _a.selectTextOnEdit,
-        _c = _a.startEditable,
-        startEditable = _c === void 0 ? false : _c,
-        _d = _a.tabIndex,
-        tabIndex = _d === void 0 ? 0 : _d,
+        _d = _a.startEditable,
+        startEditable = _d === void 0 ? false : _d,
+        _e = _a.tabIndex,
+        tabIndex = _e === void 0 ? 0 : _e,
         tooltip = _a.tooltip,
-        _e = _a.typography,
-        typography = _e === void 0 ? 'body1' : _e,
-        _f = _a.value,
-        value = _f === void 0 ? '' : _f;
-      var _g = React.useState(false),
-        editing = _g[0],
-        setEditing = _g[1];
+        _f = _a.typography,
+        typography = _f === void 0 ? 'body1' : _f,
+        _g = _a.value,
+        value = _g === void 0 ? '' : _g;
       var _h = React.useState(false),
-        showTooltip = _h[0],
-        setShowTooltip = _h[1];
-      var _j = React.useState(''),
-        originalValue = _j[0],
-        setOriginalValue = _j[1];
-      var _k = React.useState(value),
-        inputValue = _k[0],
-        setInputValue = _k[1];
+        editing = _h[0],
+        setEditing = _h[1];
+      var _j = React.useState(false),
+        showTooltip = _j[0],
+        setShowTooltip = _j[1];
+      var _k = React.useState(''),
+        originalValue = _k[0],
+        setOriginalValue = _k[1];
+      var _l = React.useState(value),
+        inputValue = _l[0],
+        setInputValue = _l[1];
       var inputRef = React.useRef();
       var inlineEditRef = React.useRef();
       React.useEffect(function () {
@@ -7789,7 +7868,8 @@
           children: viewModeChildren
         }), void 0) : jsxRuntime.jsx("div", __assign({
           className: viewModeClasses,
-          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper"
+          "data-testid": dataTestId && dataTestId + "-view-mode-wrapper",
+          role: "presentation"
         }, {
           children: viewModeChildren
         }), void 0);
@@ -7873,6 +7953,7 @@
           return handleKeyPress(event);
         } : undefined,
         ref: inlineEditRef,
+        role: ariaRole,
         tabIndex: !readOnly ? tabIndex : undefined,
         typography: typography
       }, {
@@ -7969,16 +8050,19 @@
       componentId: "l7oxi2-0"
     })(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      color: ", ";\n      border-color: ", ";\n\n      &.error {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.success {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.warning {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n\n      &.in-progress {\n        background-color: ", ";\n        border-color: ", ";\n        .dot-icon {\n          color: ", ";\n        }\n        color: ", ";\n      }\n  "])), rootClassName$n, function (_a) {
+      return styled.css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n    &.", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      .dot-icon {\n        color: ", ";\n      }\n\n      &.MuiChip-outlined {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      &.MuiChip-filled {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n      .dot-icon {\n        color: ", ";\n      }\n\n      &.MuiChip-outlined {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n\n      &.MuiChip-filled {\n        &.error {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.success {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.warning {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n\n        &.in-progress {\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n          .dot-icon {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "])), rootClassName$n, function (_a) {
         var backgroundcolor = _a.backgroundcolor;
         return backgroundcolor || theme.palette.grey[200];
+      }, function (_a) {
+        var bordercolor = _a.bordercolor;
+        return bordercolor ? bordercolor : theme.palette.layer.n700;
       }, function (_a) {
         var labelcolor = _a.labelcolor;
         return labelcolor ? labelcolor : theme.palette.layer.n700;
       }, function (_a) {
-        var bordercolor = _a.bordercolor;
-        return bordercolor ? bordercolor : theme.palette.layer.n700;
-      }, theme.palette.error[100], theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n700, theme.palette.success[100], theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n700, theme.palette.warning[100], theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.primary[100], theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n700);
+        var labelcolor = _a.labelcolor;
+        return labelcolor ? labelcolor : theme.palette.layer.n700;
+      }, theme.palette.error[100], theme.palette.error.main, theme.palette.layer.n700, theme.palette.error.main, theme.palette.success[100], theme.palette.success.main, theme.palette.layer.n700, theme.palette.success.main, theme.palette.warning[100], theme.palette.warning.main, theme.palette.layer.n700, theme.palette.warning.main, theme.palette.primary[100], theme.palette.primary.main, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.error.main, theme.palette.error.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.success.main, theme.palette.success.main, theme.palette.layer.n0, theme.palette.layer.n0, theme.palette.warning.main, theme.palette.warning.main, theme.palette.layer.n700, theme.palette.layer.n700, theme.palette.primary.main, theme.palette.primary.main, theme.palette.layer.n0, theme.palette.layer.n0);
     });
     var templateObject_1$n, templateObject_2$m;
 
@@ -9987,8 +10071,10 @@
     var DotFileUpload = function DotFileUpload(_a) {
       var accept = _a.accept,
         ariaLabel = _a.ariaLabel,
-        _b = _a.buttonOnly,
-        buttonOnly = _b === void 0 ? false : _b,
+        _b = _a.ariaRole,
+        ariaRole = _b === void 0 ? 'region' : _b,
+        _c = _a.buttonOnly,
+        buttonOnly = _c === void 0 ? false : _c,
         className = _a.className,
         dataTestId = _a["data-testid"],
         disabled = _a.disabled,
@@ -9998,12 +10084,12 @@
         onChange = _a.onChange,
         onDragEnter = _a.onDragEnter,
         onFileClick = _a.onFileClick;
-      var _c = React.useState([]),
-        uploadedFiles = _c[0],
-        setUploadedFiles = _c[1];
-      var _d = React.useState(false),
-        hasMaxFilesError = _d[0],
-        setHasMaxFilesError = _d[1];
+      var _d = React.useState([]),
+        uploadedFiles = _d[0],
+        setUploadedFiles = _d[1];
+      var _e = React.useState(false),
+        hasMaxFilesError = _e[0],
+        setHasMaxFilesError = _e[1];
       var isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
       var rootClasses = useStylesWithRootClass(rootClassName$6, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
       var maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
@@ -10028,7 +10114,7 @@
       var onDrop = React.useCallback(function (acceptedFiles, fileRejections) {
         hideFilesList ? setNewlyUploadedFiles(acceptedFiles, fileRejections) : parseFiles(acceptedFiles, fileRejections);
       }, [hideFilesList, setNewlyUploadedFiles, parseFiles]);
-      var _e = reactDropzone.useDropzone({
+      var _f = reactDropzone.useDropzone({
           accept: accept,
           disabled: isUploadDisabled,
           maxSize: maxSize * 1000000,
@@ -10037,10 +10123,10 @@
           onDragEnter: onDragEnter,
           onDrop: onDrop
         }),
-        getRootProps = _e.getRootProps,
-        getInputProps = _e.getInputProps,
-        isDragActive = _e.isDragActive,
-        open = _e.open;
+        getRootProps = _f.getRootProps,
+        getInputProps = _f.getInputProps,
+        isDragActive = _f.isDragActive,
+        open = _f.open;
       var deleteFile = function deleteFile(fileIndexToBeRemoved) {
         uploadedFiles.splice(fileIndexToBeRemoved, 1);
         setUploadedFiles(__spreadArray([], uploadedFiles));
@@ -10053,7 +10139,8 @@
         uploadedFiles: uploadedFiles
       });
       return jsxRuntime.jsxs(StyledFileUploadContainer, __assign({
-        className: containerClassName$2
+        className: containerClassName$2,
+        role: ariaRole
       }, {
         children: [jsxRuntime.jsxs(StyledFileUpload, __assign({}, getRootProps(), {
           "aria-label": ariaLabel,
@@ -10694,6 +10781,7 @@
         onClose = _a.onClose,
         onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
+        onPopperTimeChange = _a.onPopperTimeChange,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
         _g = _a.readOnly,
@@ -10760,6 +10848,7 @@
       };
       var handlePickerChange = function handlePickerChange(pickedDateTime) {
         setPickerTime(pickedDateTime);
+        onPopperTimeChange && onPopperTimeChange(pickedDateTime.format(DEFAULT_TIME_FORMAT));
       };
       var handleInputChange = function handleInputChange(currentValue, context) {
         var currentTimeValue = currentValue ? currentValue : null;