@digital-ai/dot-components 1.17.2 → 1.19.1

package/index.esm.js

@@ -128,7 +128,7 @@ const GlobalFonts = createGlobalStyle(_t || (_t = _`
   }
 
   @font-face {
-    font-family: 'LatoBold';
+    font-family: 'Lato';
     font-weight: 700;
     src: url(${0}) format('woff');
   }
@@ -416,42 +416,49 @@ const typographyOptions = {
   },
   h1: {
     fontSize: 24,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '30px'
   },
   h2: {
     fontSize: 20,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '26px',
     letterSpacing: '0.02em'
   },
   h3: {
     fontSize: 17,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '24px',
     letterSpacing: '0.02em'
   },
   h4: {
     fontSize: 14,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '18px',
     letterSpacing: '0.03em'
   },
   h5: {
     fontSize: 12,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '18px',
     letterSpacing: '0.03em'
   },
   subtitle1: {
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     fontSize: 17,
     lineHeight: '23px',
     letterSpacing: '0.03em',
     marginBottom: 1
   },
   subtitle2: {
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     fontSize: 14,
     lineHeight: '20px',
     letterSpacing: '0.03em',
@@ -471,13 +478,14 @@ const typographyOptions = {
   },
   caption: {
     fontSize: 10,
-    fontFamily: 'LatoBold, sans-serif',
+    fontFamily: 'Lato, sans-serif',
+    fontWeight: 700,
     lineHeight: '16px',
     letterSpacing: '0.03em',
     marginBottom: 3
   },
   overline: {
-    fontSize: 9,
+    fontSize: 11,
     lineHeight: '14px',
     letterSpacing: '0.03em',
     textTransform: 'uppercase',
@@ -1865,6 +1873,8 @@ const StyledDotDrawer = styled(DotDrawer).withConfig({
   open
 }) => css(["&.", "{.dot-drawer-paper{z-index:", ";animation:", ";}}"], nestedDrawerClassName, open ? levelFirst : levelBottom, open && css(["", " 0.2s cubic-bezier(1,0,1,.01);"], fadeIn)));
 
+const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
+
 const DotListDivider = ({
   item,
   index
@@ -1873,7 +1883,7 @@ const DotListDivider = ({
     return /*#__PURE__*/React__default.createElement(ListSubheader, {
       disableSticky: true
     }, /*#__PURE__*/React__default.createElement(DotTypography, {
-      variant: "subtitle2"
+      variant: "overline"
     }, item.text));
   }
 
@@ -1974,7 +1984,8 @@ const DotList = ({
       target: item.target,
       text: item.text,
       title: item.title,
-      tooltip: item.tooltip
+      tooltip: item.tooltip,
+      tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
     });
   }), children);
 };
@@ -2003,7 +2014,8 @@ const DotListItem = ({
   target,
   text,
   title,
-  tooltip
+  tooltip,
+  tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
 }) => {
   const hasChildren = _items2.length > 0;
   const isFlyout = nestedListType === 'menu' && hasChildren;
@@ -2064,7 +2076,7 @@ const DotListItem = ({
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTooltip, {
     "data-testid": `${dataTestId}-tooltip`,
-    placement: "top-start",
+    placement: _tooltipPlacement,
     title: tooltip || title
   }, /*#__PURE__*/React__default.createElement(StyledListItem, {
     "aria-label": ariaLabel,
@@ -2138,12 +2150,13 @@ const NestedList = ({
         onClick,
         title,
         tooltip,
+        tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT,
         text
       } = item;
       return {
         children: /*#__PURE__*/React__default.createElement(DotTooltip, {
           key: `${parentItemIndex}-${index}-tooltip`,
-          placement: "top-start",
+          placement: tooltipPlacement,
           title: tooltip || title
         }, /*#__PURE__*/React__default.createElement(StyledListItem, {
           className: flyoutItemClasses,
@@ -2288,7 +2301,7 @@ const StyledSidebar = styled.aside.withConfig({
   componentId: "l3atb4-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:scroll;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$K, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
+}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$K, theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
 
 const Brand = ({
   brandDesc
@@ -2530,6 +2543,7 @@ const StyledAppToolbar = styled.header.withConfig({
 const DotAppToolbar = ({
   appName,
   appLogo,
+  appLogoHref: _appLogoHref = '/',
   appLogoSmall,
   ariaLabel,
   avatar,
@@ -2644,12 +2658,15 @@ const DotAppToolbar = ({
     href: _primaryLogoHref
   }, customLogo ? customLogo : /*#__PURE__*/React__default.createElement(DotTooltip, {
     title: "digital.ai"
-  }, /*#__PURE__*/React__default.createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default.createElement(DotAppLogo, {
+  }, /*#__PURE__*/React__default.createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default.createElement(DotLink, {
+    href: _appLogoHref,
+    "data-testid": "app-logo"
+  }, /*#__PURE__*/React__default.createElement(DotAppLogo, {
     appLogo: appLogo,
     appLogoSmall: appLogoSmall,
     className: "dot-app-logo",
     smallOnly: !targetBreakpoint
-  }), appName && /*#__PURE__*/React__default.createElement(DotTypography, {
+  })), appName && /*#__PURE__*/React__default.createElement(DotTypography, {
     className: "dot-product-name"
   }, appName)), children, /*#__PURE__*/React__default.createElement("div", {
     className: "dot-right-side"
@@ -2684,7 +2701,7 @@ const StyledTextField = styled(TextField).withConfig({
 })(["", ""], ({
   theme,
   InputProps
-}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen));
+}) => css(["&.", "{.MuiInputBase-root{background:", "}.MuiInputBase-input{box-sizing:content-box;}.MuiOutlinedInput-notchedOutline{border-color:", "}.MuiOutlinedInput-input{padding:", ";}.MuiOutlinedInput-inputMarginDense{padding-top:10.5px;padding-bottom:10.5px;}.MuiOutlinedInput-inputMultiline{padding:0;}}&.", ",&.", "{.dot-adornment-icon .dot-icon i{margin-top:-2px;}.MuiFormLabel-root.Mui-focused{color:", "}select.dot-select{background:", ";}.MuiSelect-select:focus{background-color:transparent;}.Mui-error .", "{color:", ";}.MuiSelect-icon{right:", ";}&.", "{.MuiOutlinedInput-notchedOutline{border-color:", ";}.MuiInputLabel-outlined.MuiInputLabel-shrink{color:", ";}.", "{color:", ";}}.MuiOutlinedInput-adornedStart{padding-left:12px;}.MuiOutlinedInput-adornedEnd{padding-right:12px;}.MuiFormHelperText-root{font-family:", ";font-size:", "px;font-weight:400;margin:", ";display:flex;align-items:flex-end;&:not(.Mui-error){color:", ";}}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:", ";}"], rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n0, theme.palette.product === 'agility' && theme.palette.layer.n100, InputProps.startAdornment ? `18px 12px 18px 0px` : `18px 12px`, rootSelectClassName, rootClassName$G, theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.layer.n0, adornmentIconClassName, theme.palette.error[500], InputProps.endAdornment ? `44px` : `12px`, warningClassName, theme.palette.warning[500], theme.palette.grey[700], adornmentIconClassName, theme.palette.warning[500], theme.typography.body2.fontFamily, theme.typography.body2.fontSize, theme.spacing(0, 0, 0, 2), theme.palette.grey[400], theme.palette.product === 'agility' && agilityGreen));
 
 const rootClassName$F = 'dot-button';
 const StyledButton = styled(Button).withConfig({
@@ -2911,6 +2928,7 @@ const DotAutoComplete = ({
     preventDuplicateInsertion
   } = actionItem || {};
   const isActionItemDefined = onActionItemClick !== undefined;
+  let highlightedOption = null;
   const [isOpened, setIsOpened] = useState(false);
   const [inputText, setInputText] = useState('');
   const rootClasses = useStylesWithRootClass(rootClassName$H, className);
@@ -2952,7 +2970,13 @@ const DotAutoComplete = ({
     }) : options;
   };
 
-  const handleBlur = event => event.relatedTarget !== actionItemRef.current && setIsOpened(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleBlur = event => event.relatedTarget !== actionItemRef.current && setIsOpened(false);
+
+  const onActionButtonClick = () => {
+    setIsOpened(false);
+    textFieldInput.focus();
+    onActionItemClick(inputText);
+  }; // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
   const DotPopper = props => {
@@ -2978,13 +3002,6 @@ const DotAutoComplete = ({
     }, itemText) : itemText;
     const paperProps = props.children.props;
     const paperChildren = paperProps.children;
-
-    const onActionButtonClick = () => {
-      setIsOpened(false);
-      textFieldInput.focus();
-      onActionItemClick(inputText);
-    };
-
     return /*#__PURE__*/React__default.createElement(StyledPopper$1, Object.assign({}, props, {
       className: popperClassName,
       disablePortal: _disablePortal,
@@ -3042,9 +3059,9 @@ const DotAutoComplete = ({
 
   const handleKeyDown = !_freesolo && onActionItemClick && (event => {
     if (event.key === 'Enter') {
-      // Do NOT execute callback if duplicate item
-      if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options)) return;
-      onActionItemClick(inputText);
+      // Do NOT execute callback if duplicate item or have selected an option from the dropdown
+      if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options) || highlightedOption) return;
+      onActionButtonClick();
     }
   }) || undefined;
 
@@ -3081,6 +3098,7 @@ const DotAutoComplete = ({
       setIsOpened(false);
     },
     onClose: handleClose,
+    onHighlightChange: (_event, v) => highlightedOption = v,
     onInputChange: handleInputChange,
     onKeyDown: handleKeyDown,
     // We want to close the popper each time focus is shifted from the autocomplete
@@ -3111,15 +3129,15 @@ const DotAutoComplete = ({
           },
           error: _error,
           helperText: helperText,
-          id: inputId,
           inputProps: Object.assign(Object.assign({}, inputProps), {
+            id: inputId,
             className: useStylesWithRootClass(inputProps.className, 'dot-input')
           }),
           InputProps: Object.assign(Object.assign({}, params.InputProps), {
-            endAdornment: loading ? /*#__PURE__*/React__default.createElement(DotProgress, {
+            endAdornment: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(DotProgress, {
               color: "inherit",
               size: 20
-            }) : params.InputProps.endAdornment
+            }), params.InputProps.endAdornment)
           }),
           inputRef: textFieldRef,
           label: label,
@@ -4582,6 +4600,7 @@ const DotInputText = ({
   'data-testid': dataTestId,
   disabled: _disabled = false,
   error: _error = false,
+  endAdornmentTooltip,
   fullWidth: _fullWidth = true,
   hasDebounce,
   helperText,
@@ -4652,16 +4671,24 @@ const DotInputText = ({
   // in that case component is controlled
 
   const defaultInputValue = hasDebounce ? undefined : defaultValue;
+
+  const renderEndAdornment = () => {
+    const styledAdornment = /*#__PURE__*/React__default.createElement(StyledAdornment, {
+      className: `${adornmentIconClassName} end`,
+      position: "end"
+    }, endAdornmentIcon);
+    return endAdornmentTooltip ? /*#__PURE__*/React__default.createElement(DotTooltip, {
+      title: endAdornmentTooltip
+    }, styledAdornment) : styledAdornment;
+  };
+
   return /*#__PURE__*/React__default.createElement(StyledTextField, {
     InputProps: {
       startAdornment: startIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
         className: `${adornmentIconClassName} start`,
         position: "start"
       }, startIcon),
-      endAdornment: endAdornmentIcon && /*#__PURE__*/React__default.createElement(StyledAdornment, {
-        className: `${adornmentIconClassName} end`,
-        position: "end"
-      }, endAdornmentIcon)
+      endAdornment: endAdornmentIcon && renderEndAdornment()
     },
     "aria-label": name,
     autoComplete: _autoComplete,
@@ -6184,25 +6211,30 @@ const StyledSplitButtonGroup = styled(ButtonGroup).withConfig({
   componentId: "ild520-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%),0px 2px 2px 0px rgb(0 0 0 / 14%),0px 1px 5px 0px rgb(0 0 0 / 12%);&.disabled{box-shadow:none;.dot-button{background:", ";border:1px solid ", ";}}&.outlined,&.text{box-shadow:none;.expand-button{border-left:none;}}&.outlined .dot-button{border-color:", ";}&.destructive .expand-button{border-left-color:", ";}.dot-button{box-shadow:none;margin:0;padding:", ";}.expand-button{border-left:1px solid ", ";&.Mui-disabled{border-left:0;}.MuiButton-label,.dot-icon{width:14px;height:14px;}}}"], rootClassName$h, theme.palette.grey['50'], theme.palette.grey['200'], theme.palette.grey['300'], theme.palette.error['800'], theme.spacing(0.75, 1.5), theme.palette.primary['800']));
+}) => css(["&.", "{box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%),0px 2px 2px 0px rgb(0 0 0 / 14%),0px 1px 5px 0px rgb(0 0 0 / 12%);&.disabled{box-shadow:none;.dot-button{background:", ";border:1px solid ", ";}}&.outlined,&.text{box-shadow:none;.expand-button{border-left:none;}}&.outlined .dot-button{border-color:", ";}&.destructive .expand-button{border-left-color:", ";}.dot-button{box-shadow:none;margin:0;padding:", ";}.label-button{border-top-right-radius:0;border-bottom-right-radius:0;}.expand-button{border-left:1px solid ", ";&.Mui-disabled{border-left:0;}.MuiButton-label,.dot-icon{width:14px;height:14px;}}}"], rootClassName$h, theme.palette.grey['50'], theme.palette.grey['200'], theme.palette.grey['300'], theme.palette.error['800'], theme.spacing(0.75, 1.5), theme.palette.primary['800']));
 const StyledMenu$2 = styled(DotMenu).withConfig({
   displayName: "SplitButtonstyles__StyledMenu",
   componentId: "ild520-1"
 })(["&.dot-menu{z-index:", ";}"], levelTop);
 
+const getMainOptionIndex = (options, mainOptionKey) => {
+  if (!options || options.length <= 0) return null;
+  if (mainOptionKey) return options.findIndex(option => option.key === mainOptionKey);
+  return 0;
+};
+
 const DotSplitButton = ({
   autoFocus: _autoFocus = false,
   ariaLabel,
-  children,
   className,
   'data-testid': dataTestId,
+  defaultMainOptionKey,
   disabled: _disabled = false,
   disablePortal,
   disableRipple: _disableRipple = false,
   fullWidth: _fullWidth = false,
   isSubmit: _isSubmit = false,
-  onClick,
-  onSelect,
+  onOptionClick,
   options: _options = [],
   size: _size = 'medium',
 
@@ -6214,20 +6246,23 @@ const DotSplitButton = ({
   const rootClasses = useStylesWithRootClass(rootClassName$h, className, _type, _disabled ? 'disabled' : '');
   const [open, setOpen] = useState(false);
   const anchorRef = useRef(null);
-  const optionIndexMap = {};
+  const hasEmptyOptions = _options.length === 0;
+  const mainOptionIndex = getMainOptionIndex(_options, defaultMainOptionKey);
+  const mainOption = _options[mainOptionIndex];
 
-  _options.forEach((option, index) => {
-    optionIndexMap[option.key] = index;
-  });
+  const dropdownOptions = _options.filter((_option, index) => index !== mainOptionIndex);
+
+  const {
+    children: mainOptionChildren = 'Empty button',
+    disabled: mainOptionDisabled = false,
+    key: mainOptionKey = ''
+  } = mainOption || {};
+  const isMainOptionDisabled = _disabled || hasEmptyOptions || mainOptionDisabled;
+  const isMenuButtonDisabled = _disabled || hasEmptyOptions || _options.length === 1;
 
   const handleClick = (event, menuId, itemKey) => {
     setOpen(false);
-
-    if (menuId || itemKey) {
-      onSelect && onSelect(event, menuId, itemKey);
-    } else {
-      onClick && onClick(event);
-    }
+    onOptionClick(itemKey);
   };
 
   useEffect(() => {
@@ -6246,17 +6281,17 @@ const DotSplitButton = ({
     className: "label-button",
     "data-testid": dataTestId,
     disableRipple: _disableRipple,
-    disabled: _disabled,
+    disabled: isMainOptionDisabled,
     isSubmit: _isSubmit,
-    onClick: event => handleClick(event),
+    onClick: event => handleClick(event, null, mainOptionKey),
     size: _size,
     tooltip: tooltip,
     type: _type
-  }, children), /*#__PURE__*/React__default.createElement(DotButton, {
+  }, mainOptionChildren), /*#__PURE__*/React__default.createElement(DotButton, {
     className: "expand-button",
     "data-testid": dataTestId && `${dataTestId}-expand`,
     disableRipple: _disableRipple,
-    disabled: _disabled,
+    disabled: isMenuButtonDisabled,
     onClick: () => setOpen(!open),
     size: _size,
     type: _type
@@ -6268,7 +6303,7 @@ const DotSplitButton = ({
     anchorEl: anchorRef.current,
     disablePortal: disablePortal,
     id: "dot-menu-id",
-    menuItems: _options,
+    menuItems: dropdownOptions,
     menuPlacement: "bottom-end",
     onLeave: () => setOpen(false),
     onSelect: handleClick,
@@ -6342,13 +6377,13 @@ const StyledPaper = styled(Paper).withConfig({
   componentId: "s95z6y-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$f, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]));
+}) => css(["&.", "{background:", ";overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$f, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.layer.n100));
 const StyledTableContainer = styled(TableContainer).withConfig({
   displayName: "Tablestyles__StyledTableContainer",
   componentId: "s95z6y-1"
 })(["", ""], ({
   theme
-}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";&.MuiTableCell-stickyHeader{background:", ";}}.MuiTableRow-root{height:52px;}}}"], theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200], theme.palette.product === 'agility' && theme.palette.layer.n50));
+}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";&.MuiTableCell-stickyHeader{background:", ";}}.MuiTableRow-root{height:52px;}}}"], theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.layer.n100, theme.palette.product === 'agility' && theme.palette.layer.n50));
 const StyledMenu$1 = styled(DotMenu).withConfig({
   displayName: "Tablestyles__StyledMenu",
   componentId: "s95z6y-2"
@@ -7727,13 +7762,18 @@ const StyledDraggableList = styled.div.withConfig({
   displayName: "DraggableListstyles__StyledDraggableList",
   componentId: "sc-1nekees-0"
 })(["", ""], ({
-  theme
-}) => css(["&.", " .", ".react-draggable-dragging{background-color:", ";}"], rootClassName, listItemClassName, theme.palette.grey[50]));
+  theme,
+  width,
+  draggableHandle
+}) => css(["&.", " .", "{&.react-draggable-dragging{background-color:", ";}width:", " !important;&.with-default-cursor{cursor:default;}&.with-handle-grab-cursor{", "{cursor:grab;}}}"], rootClassName, listItemClassName, theme.palette.grey[50], width, draggableHandle));
 
 const getOrderedListItems = (layout, listItems) => {
   if (!listItems || !layout) return [];
-  listItems.sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
-  return listItems;
+  return [...listItems].sort((a, b) => layout.find(layoutItem => layoutItem.i === a.id).y - layout.find(layoutItem => layoutItem.i === b.id).y);
+};
+const checkIfEqual = (oldList, newList) => {
+  if (oldList.length !== newList.length) return false;
+  return oldList.every((oldListItem, index) => oldListItem.id === newList[index].id);
 };
 const getListItemLayout = listItems => {
   return listItems === null || listItems === void 0 ? void 0 : listItems.map((item, index) => ({
@@ -7745,27 +7785,43 @@ const getListItemLayout = listItems => {
   }));
 };
 
-const DEFAULT_LIST_WIDTH = 240;
+const DEFAULT_LIST_WIDTH = '100%';
 const DEFAULT_LIST_ITEM_HEIGHT = 36;
 const ListGridLayout = WidthProvider(GridLayout);
 const DotDraggableList = ({
   ariaLabel,
   className,
   'data-testid': dataTestId,
+  disableDrag,
+  draggableHandle,
   items,
   onChange,
-  width: _width = DEFAULT_LIST_WIDTH,
-  rowHeight: _rowHeight = DEFAULT_LIST_ITEM_HEIGHT
+  rowHeight: _rowHeight = DEFAULT_LIST_ITEM_HEIGHT,
+  width: _width = DEFAULT_LIST_WIDTH
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName, className);
-  const listWidth = typeof _width === 'number' ? `${_width}px` : _width;
+  const rootClasses = useStylesWithRootClass(rootClassName, className, draggableHandle ? 'with-draggable-handle' : '');
+  const listItemClasses = useStylesWithRootClass(listItemClassName, draggableHandle && !disableDrag ? 'with-handle-grab-cursor' : '', draggableHandle || disableDrag ? 'with-default-cursor' : '');
+  const listWidth = isNumber(_width) ? `${_width}px` : _width;
+  const [orderedItems, setOrderedItems] = useState([]);
+  useEffect(() => {
+    setOrderedItems(items);
+  }, [items]);
 
-  const handleLayoutChange = () => layout => onChange(getOrderedListItems(layout, items));
+  const handleLayoutChange = () => layout => {
+    const newList = getOrderedListItems(layout, orderedItems);
+
+    if (!checkIfEqual(orderedItems, newList)) {
+      setOrderedItems(newList);
+      onChange(newList);
+    }
+  };
 
   return /*#__PURE__*/React__default.createElement(StyledDraggableList, {
     "aria-label": ariaLabel,
     className: rootClasses,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    draggableHandle: draggableHandle,
+    width: listWidth
   }, /*#__PURE__*/React__default.createElement(List, {
     "data-testid": dataTestId && `${dataTestId}-ul`,
     style: {
@@ -7773,23 +7829,26 @@ const DotDraggableList = ({
     }
   }, /*#__PURE__*/React__default.createElement(ListGridLayout, {
     className: "layout",
-    layout: getListItemLayout(items),
+    draggableHandle: draggableHandle,
+    isDraggable: !disableDrag,
+    layout: getListItemLayout(orderedItems),
     cols: 1,
     margin: [0, 0],
     onLayoutChange: onChange && handleLayoutChange(),
     rowHeight: _rowHeight
-  }, items.map(({
+  }, orderedItems.map(({
     id: itemId,
     children
   }) => {
     return /*#__PURE__*/React__default.createElement(ListItem, {
+      "data-testid": dataTestId && `${dataTestId}-item`,
       key: itemId,
       button: true,
       children: renderNodeOrTypography(children),
-      className: listItemClassName,
+      className: listItemClasses,
       disableRipple: true
     });
   }))));
 };
 
-export { Cell, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotSnackbarContext };
+export { Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotSnackbarContext };