@digital-ai/dot-components 2.7.3 → 2.8.0

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
         },
@@ -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);
@@ -1945,29 +1964,31 @@
     /** 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
           }, {
@@ -3313,22 +3363,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 +3414,7 @@
           title: tooltip
         }, {
           children: jsxRuntime.jsx(DotInputText, {
+            ariaRole: ariaRole,
             "data-testid": dataTestId,
             autoFocus: autoFocus,
             className: "search-text",
@@ -3882,7 +3935,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 +3952,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 +3967,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 +3992,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 +4006,8 @@
             type: "image",
             variant: "circular"
           }, void 0), jsxRuntime.jsx(DotTypography, __assign({
+            ariaRole: "heading",
+            ariaLevel: 1,
             className: "app-switcher-label"
           }, {
             children: "App switcher"
@@ -4744,10 +4806,12 @@
         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,
         freesolo = _g === void 0 ? true : _g,
+        checkIfOptionDisabled = _a.checkIfOptionDisabled,
         _h = _a.group,
         group = _h === void 0 ? false : _h,
         helperText = _a.helperText,
@@ -4980,11 +5044,13 @@
         "data-testid": dataTestId,
         defaultValue: defaultValue,
         disabled: disabled,
+        filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
         freeSolo: freesolo,
         getOptionLabel: function (option) {
           return parseAutoCompleteValue(option);
         },
+        getOptionDisabled: checkIfOptionDisabled,
         groupBy: group ? function (option) {
           return option.group;
         } : undefined,
@@ -5444,7 +5510,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)
@@ -6797,6 +6865,7 @@
       return jsxRuntime.jsx(StyledFormControlLabel, {
         className: rootClasses,
         control: radioControl,
+        "aria-label": value,
         label: label || radioControl,
         labelPlacement: labelPlacement,
         value: value
@@ -6805,6 +6874,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,
@@ -6814,22 +6885,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);
@@ -6885,6 +6956,7 @@
             defaultValue: defaultValue,
             name: name,
             onChange: handleChange,
+            role: ariaRole,
             row: row,
             value: selectedValue
           }, {
@@ -7598,39 +7670,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 () {
@@ -7787,7 +7861,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);
@@ -7871,6 +7946,7 @@
           return handleKeyPress(event);
         } : undefined,
         ref: inlineEditRef,
+        role: ariaRole,
         tabIndex: !readOnly ? tabIndex : undefined,
         typography: typography
       }, {
@@ -7967,16 +8043,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;
 
@@ -9985,8 +10064,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,
@@ -9996,12 +10077,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' : '');
@@ -10026,7 +10107,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,
@@ -10035,10 +10116,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));
@@ -10051,7 +10132,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,
@@ -10298,6 +10380,28 @@
       }, void 0);
     };
 
+    exports.DatePickerKeydownContext = void 0;
+    (function (DatePickerKeydownContext) {
+      DatePickerKeydownContext[DatePickerKeydownContext["Input"] = 0] = "Input";
+      DatePickerKeydownContext[DatePickerKeydownContext["PickerButton"] = 1] = "PickerButton";
+      DatePickerKeydownContext[DatePickerKeydownContext["Popper"] = 2] = "Popper";
+    })(exports.DatePickerKeydownContext || (exports.DatePickerKeydownContext = {}));
+
+    /** This returns a `boolean` indicating whether the Day.js object contains a valid date or not. */
+    var checkIfValidDate = function checkIfValidDate(date, format) {
+      return dayjs__default["default"](date, format, true).isValid();
+    };
+    var getContextEnumBasedOnTarget = function getContextEnumBasedOnTarget(event, inputElement, contextEnum) {
+      var targetElement = event.target;
+      var isWithinInput = inputElement === null || inputElement === void 0 ? void 0 : inputElement.contains(targetElement);
+      var currentContextEnum = contextEnum;
+      // Key was captured within text field but not on the input itself
+      if (contextEnum === exports.DatePickerKeydownContext.Input && !isWithinInput) {
+        currentContextEnum = exports.DatePickerKeydownContext.PickerButton;
+      }
+      return currentContextEnum;
+    };
+
     var rootClassName$1 = 'dot-date-picker';
     var containerClassName$1 = 'dot-date-picker-container';
     var rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
@@ -10327,6 +10431,7 @@
         disableRipple: true
       }), void 0);
     };
+    var DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
     var DotDatePicker = function DotDatePicker(_a) {
       var ariaLabel = _a.ariaLabel,
         _b = _a.autoFocus,
@@ -10362,6 +10467,7 @@
         onChange = _a.onChange,
         onClose = _a.onClose,
         onError = _a.onError,
+        onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
@@ -10371,7 +10477,7 @@
         required = _h === void 0 ? false : _h,
         showDaysOutsideCurrentMonth = _a.showDaysOutsideCurrentMonth,
         value = _a.value;
-      var dateFormat = format || 'YYYY-MM-DD';
+      var displayFormat = format || DEFAULT_DATE_FORMAT;
       var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
       var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
       var isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
@@ -10405,14 +10511,14 @@
       }, [locale]);
       var handleChange = function handleChange(changedValue, context) {
         if (!onChange || changedValue && !changedValue.isValid()) return;
-        onChange(changedValue ? changedValue.format(dateFormat) : null, context);
+        onChange(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null, context);
       };
       var handleAccept = function handleAccept(changedValue) {
         if (!onAccept) return;
-        onAccept(changedValue ? changedValue.format(dateFormat) : null);
+        onAccept(changedValue ? changedValue.format(DEFAULT_DATE_FORMAT) : null);
       };
       var handleError = function handleError(validationError, currentValue) {
-        return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(dateFormat));
+        return onError === null || onError === void 0 ? void 0 : onError(validationError, dayjs__default["default"](currentValue).format(DEFAULT_DATE_FORMAT));
       };
       var handleOpen = function handleOpen() {
         if (focusInputOnPopperOpened && inputRef.current) {
@@ -10429,6 +10535,12 @@
         }
         return actionBar;
       };
+      var handleKeyDown = function handleKeyDown(contextEnum) {
+        return function (event) {
+          var currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+          onKeyDown(event, currentContextEnum);
+        };
+      };
       return jsxRuntime.jsx(StyledDatePickerContainer, __assign({
         className: containerClasses,
         "data-testid": dataTestId
@@ -10448,16 +10560,16 @@
             autoFocus: autoFocus,
             closeOnSelect: closeOnSelect,
             className: rootClasses,
-            defaultValue: defaultValue && dayjs__default["default"](defaultValue, dateFormat),
+            defaultValue: defaultValue && dayjs__default["default"](defaultValue, DEFAULT_DATE_FORMAT),
             disableOpenPicker: disableOpenPicker || isInputReadOnly || disabled,
             disablePast: disablePast,
             disabled: disabled,
             displayWeekNumber: displayWeekNumber,
             fixedWeekNumber: fixedWeekNumber,
-            format: dateFormat,
+            format: displayFormat,
             label: persistentLabel ? null : label,
-            maxDate: maxDate && dayjs__default["default"](maxDate, dateFormat),
-            minDate: minDate && dayjs__default["default"](minDate, dateFormat),
+            maxDate: maxDate && dayjs__default["default"](maxDate, DEFAULT_DATE_FORMAT),
+            minDate: minDate && dayjs__default["default"](minDate, DEFAULT_DATE_FORMAT),
             onAccept: handleAccept,
             onChange: handleChange,
             onClose: onClose,
@@ -10496,6 +10608,7 @@
                   'data-testid': 'dot-date-picker-input',
                   onBlur: onBlur
                 },
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input),
                 inputRef: inputRef,
                 fullWidth: fullWidth,
                 name: inputName
@@ -10507,10 +10620,11 @@
                 disableEnforceFocus: true
               },
               popper: {
-                disablePortal: disablePortal
+                disablePortal: disablePortal,
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Popper)
               }
             },
-            value: value && dayjs__default["default"](value, dateFormat)
+            value: value && dayjs__default["default"](value, DEFAULT_DATE_FORMAT)
           }, void 0)]
         }), void 0)
       }), void 0);
@@ -10597,6 +10711,12 @@
     var getTimePickerButtonType = function getTimePickerButtonType(selectedDaytime) {
       return selectedDaytime && selectedDaytime === exports.Daytime.PM ? 'primary' : 'text';
     };
+    var checkIfOpenPropDefined = function checkIfOpenPropDefined(open) {
+      return open !== null && open !== undefined;
+    };
+    var getDaytimeButtonType = function getDaytimeButtonType(daytimeSelected) {
+      return daytimeSelected && daytimeSelected === exports.Daytime.AM ? 'primary' : 'text';
+    };
 
     var rootClassName = 'dot-time-picker';
     var containerClassName = 'dot-time-picker-container';
@@ -10621,12 +10741,12 @@
     var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
     dayjs__default["default"].extend(utc__default["default"]);
-    var DEFAULT_PICKER_TIME_FORMAT = 'hh:mm';
-    var DEFAULT_TIME_FORMAT = 'hh:mm A';
+    var DEFAULT_PICKER_TIME_FORMAT = 'HH:mm';
+    var DEFAULT_TIME_FORMAT = 'HH:mm';
     var DEFAULT_TIME = '01:00';
     var DotTimePicker = function DotTimePicker(_a) {
       var _b = _a.ampm,
-        ampm = _b === void 0 ? true : _b,
+        ampm = _b === void 0 ? false : _b,
         ariaLabel = _a.ariaLabel,
         _c = _a.autoFocus,
         autoFocus = _c === void 0 ? false : _c,
@@ -10635,11 +10755,13 @@
         defaultValue = _a.defaultValue,
         _d = _a.disableOpenPicker,
         disableOpenPicker = _d === void 0 ? false : _d,
+        _e = _a.disableClickAwayListener,
+        disableClickAwayListener = _e === void 0 ? false : _e,
         disabled = _a.disabled,
         error = _a.error,
         format = _a.format,
-        _e = _a.fullWidth,
-        fullWidth = _e === void 0 ? false : _e,
+        _f = _a.fullWidth,
+        fullWidth = _f === void 0 ? false : _f,
         helperText = _a.helperText,
         hideActionButtons = _a.hideActionButtons,
         inputId = _a.inputId,
@@ -10647,32 +10769,34 @@
         label = _a.label,
         onAccept = _a.onAccept,
         onBlur = _a.onBlur,
+        onCancel = _a.onCancel,
         onChange = _a.onChange,
         onClose = _a.onClose,
+        onKeyDown = _a.onKeyDown,
         onOpen = _a.onOpen,
         open = _a.open,
         persistentLabel = _a.persistentLabel,
-        _f = _a.readOnly,
-        readOnly = _f === void 0 ? false : _f,
-        _g = _a.required,
-        required = _g === void 0 ? false : _g,
+        _g = _a.readOnly,
+        readOnly = _g === void 0 ? false : _g,
+        _h = _a.required,
+        required = _h === void 0 ? false : _h,
         value = _a.value;
-      var timeFormat = format || DEFAULT_TIME_FORMAT;
+      var displayFormat = format || DEFAULT_TIME_FORMAT;
       var hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
       var hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
       var isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
       var rootClasses = useStylesWithRootClass(rootClassName, className, isComponentReadOnly ? 'read-only' : '');
       var containerClasses = useStylesWithRootClass(containerClassName, fullWidth ? 'full-width' : '', className);
       var inputRef = React.useRef(null);
-      var _h = React.useState(false),
-        isPickerOpened = _h[0],
-        setIsPickerOpened = _h[1];
-      var _j = React.useState(null),
-        time = _j[0],
-        setTime = _j[1];
-      var _k = React.useState(),
-        pickerTime = _k[0],
-        setPickerTime = _k[1];
+      var _j = React.useState(false),
+        isPickerOpened = _j[0],
+        setIsPickerOpened = _j[1];
+      var _k = React.useState(null),
+        time = _k[0],
+        setTime = _k[1];
+      var _l = React.useState(),
+        pickerTime = _l[0],
+        setPickerTime = _l[1];
       var hoursRef = React.useRef(null);
       var minutesRef = React.useRef(null);
       var daytimeRef = React.useRef(null);
@@ -10680,7 +10804,7 @@
       var minutes = getMinutesForTimePicker();
       var daytimeSelected = getSelectedDaytime(pickerTime);
       var selectedPickerHour = pickerTime && calculateHourBasedOnTimeFormat(pickerTime, ampm);
-      var isOpenPropDefined = open !== null && open !== undefined;
+      var isOpenPropDefined = checkIfOpenPropDefined(open);
       var isControlledComponent = onChange && value !== undefined;
       React.useEffect(function () {
         if (hasValueWithoutChangeHandler) {
@@ -10693,9 +10817,9 @@
       React.useEffect(function () {
         var timeValue = null;
         if (defaultValue) {
-          timeValue = getDayjsUtcDate(defaultValue, timeFormat);
+          timeValue = getDayjsUtcDate(defaultValue, DEFAULT_TIME_FORMAT);
         } else if (value) {
-          timeValue = getDayjsUtcDate(value, timeFormat);
+          timeValue = getDayjsUtcDate(value, DEFAULT_TIME_FORMAT);
         }
         setTime(timeValue);
         setPickerTime(timeValue);
@@ -10721,7 +10845,7 @@
         var currentTimeValue = currentValue ? currentValue : null;
         setPickerTime(currentValue ? currentValue : null);
         !isControlledComponent && setTime(currentTimeValue);
-        onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(timeFormat) : null, context);
+        onChange === null || onChange === void 0 ? void 0 : onChange(currentValue ? currentValue.format(DEFAULT_TIME_FORMAT) : null, context);
       };
       var handleClose = function handleClose() {
         !isOpenPropDefined && setIsPickerOpened(false);
@@ -10746,6 +10870,7 @@
       };
       var handleCancel = function handleCancel() {
         setPickerTime(time);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         handleClose();
       };
       var handleSet = function handleSet() {
@@ -10754,12 +10879,18 @@
           return;
         }
         setTime(pickerTime);
-        onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(timeFormat), {
+        onChange === null || onChange === void 0 ? void 0 : onChange(pickerTime.format(DEFAULT_TIME_FORMAT), {
           validationError: null
         });
-        onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(timeFormat));
+        onAccept === null || onAccept === void 0 ? void 0 : onAccept(pickerTime.format(DEFAULT_TIME_FORMAT));
         handleClose();
       };
+      var handleKeyDown = function handleKeyDown(contextEnum) {
+        return function (event) {
+          var currentContextEnum = getContextEnumBasedOnTarget(event, inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, contextEnum);
+          onKeyDown(event, currentContextEnum);
+        };
+      };
       var scrollToSelectedTime = function scrollToSelectedTime() {
         if (!(hoursRef === null || hoursRef === void 0 ? void 0 : hoursRef.current) || !(minutesRef === null || minutesRef === void 0 ? void 0 : minutesRef.current)) return;
         var selectedHour = calculateHourBasedOnTimeFormat(time, ampm);
@@ -10794,6 +10925,118 @@
         if (event.key !== 'Escape' || !isPickerOpened) return;
         handleCancel();
       };
+      var wrapWithClickAwayListener = function wrapWithClickAwayListener(children) {
+        return jsxRuntime.jsx(material.ClickAwayListener, __assign({
+          onClickAway: handleSet
+        }, {
+          children: children
+        }), void 0);
+      };
+      var renderTimePickerHours = function renderTimePickerHours() {
+        return hours.map(function (hour, index) {
+          var isSelected = pickerTime ? selectedPickerHour === hour : false;
+          return jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-hour-button-" + hour,
+            onClick: function () {
+              return handleHourClick(hour);
+            },
+            onKeyDown: handleTimeKeydown(hoursRef, index),
+            tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
+            type: isSelected ? 'primary' : 'text'
+          }, {
+            children: hour.toString().padStart(2, '0')
+          }), hour);
+        });
+      };
+      var renderTimePickerMinutes = function renderTimePickerMinutes() {
+        return minutes.map(function (minute, index) {
+          var isSelected = pickerTime ? pickerTime.minute() === minute : false;
+          return jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-minute-button-" + minute,
+            type: isSelected ? 'primary' : 'text',
+            onClick: function () {
+              return handleMinuteClick(minute);
+            },
+            onKeyDown: handleTimeKeydown(minutesRef, index),
+            tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
+          }, {
+            children: minute.toString().padStart(2, '0')
+          }), minute);
+        });
+      };
+      var renderTimePickerActionButtons = function renderTimePickerActionButtons() {
+        return jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-action-buttons"
+        }, {
+          children: [jsxRuntime.jsx(DotButton, __assign({
+            "data-testid": dataTestId && dataTestId + "-cancel",
+            onClick: handleCancel,
+            size: "small",
+            type: "text"
+          }, {
+            children: "Cancel"
+          }), void 0), jsxRuntime.jsx(DotButton, __assign({
+            "data-testid": dataTestId && dataTestId + "-set",
+            onClick: handleSet,
+            size: "small",
+            type: "text"
+          }, {
+            children: "Set"
+          }), void 0)]
+        }), void 0);
+      };
+      var renderDaytime = function renderDaytime() {
+        return jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-daytime",
+          ref: daytimeRef
+        }, {
+          children: [jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-am-button",
+            onClick: function () {
+              return handleDaytimeSelection(exports.Daytime.AM);
+            },
+            onKeyDown: handleTimeKeydown(daytimeRef, 0),
+            tabIndex: getDaytimeButtonTabIndex(exports.Daytime.AM, daytimeSelected),
+            type: getDaytimeButtonType(daytimeSelected)
+          }, {
+            children: exports.Daytime.AM
+          }), exports.Daytime.AM), jsxRuntime.jsx(DotButton, __assign({
+            className: "dot-picker-button",
+            "data-testid": dataTestId && dataTestId + "-pm-button",
+            onClick: function () {
+              return handleDaytimeSelection(exports.Daytime.PM);
+            },
+            onKeyDown: handleTimeKeydown(daytimeRef, 1),
+            tabIndex: getDaytimeButtonTabIndex(exports.Daytime.PM, daytimeSelected),
+            type: getTimePickerButtonType(daytimeSelected)
+          }, {
+            children: exports.Daytime.PM
+          }), exports.Daytime.PM)]
+        }), void 0);
+      };
+      var paperComponent = jsxRuntime.jsxs(material.Paper, __assign({
+        className: "dot-time-picker-paper",
+        elevation: 8
+      }, {
+        children: [jsxRuntime.jsxs("div", __assign({
+          className: "dot-time-picker-selection"
+        }, {
+          children: [jsxRuntime.jsx("div", __assign({
+            className: "dot-time-picker-hours",
+            ref: hoursRef
+          }, {
+            children: renderTimePickerHours()
+          }), void 0), jsxRuntime.jsx("div", __assign({
+            className: "dot-time-picker-minutes",
+            ref: minutesRef
+          }, {
+            children: renderTimePickerMinutes()
+          }), void 0), ampm && renderDaytime()]
+        }), void 0), !hideActionButtons && renderTimePickerActionButtons()]
+      }), void 0);
       return jsxRuntime.jsxs(StyledTimePickerContainer, __assign({
         className: containerClasses,
         "data-testid": dataTestId,
@@ -10815,7 +11058,7 @@
             autoFocus: autoFocus,
             className: rootClasses,
             disabled: disabled,
-            format: format,
+            format: displayFormat,
             inputRef: inputRef,
             label: persistentLabel ? null : label,
             onChange: handleInputChange,
@@ -10847,7 +11090,8 @@
                   onBlur: onBlur
                 },
                 fullWidth: fullWidth,
-                name: inputName
+                name: inputName,
+                onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Input)
               },
               field: {
                 readOnly: isComponentReadOnly
@@ -10861,105 +11105,10 @@
           "data-testid": dataTestId && dataTestId + "-popper",
           disablePortal: true,
           open: isPickerOpened,
+          onKeyDown: onKeyDown && handleKeyDown(exports.DatePickerKeydownContext.Popper),
           placement: "bottom-start"
         }, {
-          children: jsxRuntime.jsx(material.ClickAwayListener, __assign({
-            onClickAway: handleSet
-          }, {
-            children: jsxRuntime.jsxs(material.Paper, __assign({
-              className: "dot-time-picker-paper",
-              elevation: 8
-            }, {
-              children: [jsxRuntime.jsxs("div", __assign({
-                className: "dot-time-picker-selection"
-              }, {
-                children: [jsxRuntime.jsx("div", __assign({
-                  className: "dot-time-picker-hours",
-                  ref: hoursRef
-                }, {
-                  children: hours.map(function (hour, index) {
-                    var isSelected = pickerTime ? selectedPickerHour === hour : false;
-                    return jsxRuntime.jsx(DotButton, __assign({
-                      className: "dot-picker-button",
-                      "data-testid": dataTestId && dataTestId + "-hour-button-" + hour,
-                      onClick: function () {
-                        return handleHourClick(hour);
-                      },
-                      onKeyDown: handleTimeKeydown(hoursRef, index),
-                      tabIndex: getPopperButtonTabIndex(index, isSelected, selectedPickerHour),
-                      type: isSelected ? 'primary' : 'text'
-                    }, {
-                      children: hour.toString().padStart(2, '0')
-                    }), hour);
-                  })
-                }), void 0), jsxRuntime.jsx("div", __assign({
-                  className: "dot-time-picker-minutes",
-                  ref: minutesRef
-                }, {
-                  children: minutes.map(function (minute, index) {
-                    var isSelected = pickerTime ? pickerTime.minute() === minute : false;
-                    return jsxRuntime.jsx(DotButton, __assign({
-                      className: "dot-picker-button",
-                      "data-testid": dataTestId && dataTestId + "-minute-button-" + minute,
-                      type: isSelected ? 'primary' : 'text',
-                      onClick: function () {
-                        return handleMinuteClick(minute);
-                      },
-                      onKeyDown: handleTimeKeydown(minutesRef, index),
-                      tabIndex: getPopperButtonTabIndex(index, isSelected, pickerTime === null || pickerTime === void 0 ? void 0 : pickerTime.minute())
-                    }, {
-                      children: minute.toString().padStart(2, '0')
-                    }), minute);
-                  })
-                }), void 0), ampm && jsxRuntime.jsxs("div", __assign({
-                  className: "dot-time-picker-daytime",
-                  ref: daytimeRef
-                }, {
-                  children: [jsxRuntime.jsx(DotButton, __assign({
-                    className: "dot-picker-button",
-                    "data-testid": dataTestId && dataTestId + "-am-button",
-                    onClick: function () {
-                      return handleDaytimeSelection(exports.Daytime.AM);
-                    },
-                    onKeyDown: handleTimeKeydown(daytimeRef, 0),
-                    tabIndex: getDaytimeButtonTabIndex(exports.Daytime.AM, daytimeSelected),
-                    type: daytimeSelected && daytimeSelected === exports.Daytime.AM ? 'primary' : 'text'
-                  }, {
-                    children: exports.Daytime.AM
-                  }), exports.Daytime.AM), jsxRuntime.jsx(DotButton, __assign({
-                    className: "dot-picker-button",
-                    "data-testid": dataTestId && dataTestId + "-pm-button",
-                    onClick: function () {
-                      return handleDaytimeSelection(exports.Daytime.PM);
-                    },
-                    onKeyDown: handleTimeKeydown(daytimeRef, 1),
-                    tabIndex: getDaytimeButtonTabIndex(exports.Daytime.PM, daytimeSelected),
-                    type: getTimePickerButtonType(daytimeSelected)
-                  }, {
-                    children: exports.Daytime.PM
-                  }), exports.Daytime.PM)]
-                }), void 0)]
-              }), void 0), !hideActionButtons && jsxRuntime.jsxs("div", __assign({
-                className: "dot-time-picker-action-buttons"
-              }, {
-                children: [jsxRuntime.jsx(DotButton, __assign({
-                  "data-testid": dataTestId && dataTestId + "-cancel",
-                  onClick: handleCancel,
-                  size: "small",
-                  type: "text"
-                }, {
-                  children: "Cancel"
-                }), void 0), jsxRuntime.jsx(DotButton, __assign({
-                  "data-testid": dataTestId && dataTestId + "-set",
-                  onClick: handleSet,
-                  size: "small",
-                  type: "text"
-                }, {
-                  children: "Set"
-                }), void 0)]
-              }), void 0)]
-            }), void 0)
-          }), void 0)
+          children: disableClickAwayListener ? paperComponent : wrapWithClickAwayListener(paperComponent)
         }), void 0)]
       }), void 0);
     };
@@ -11052,6 +11201,7 @@
     exports.DotTruncateWithTooltip = DotTruncateWithTooltip;
     exports.DotTypography = DotTypography;
     exports.avatarColors = avatarColors;
+    exports.checkIfValidDate = checkIfValidDate;
     exports.lightColors = lightThemeColors;
     exports.mockScrollIntoView = mockScrollIntoView;
     exports.parseAutoCompleteValue = parseAutoCompleteValue;