@digital-ai/dot-components 2.10.1 → 2.11.0

package/CHANGE_LOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## [2.11.0](https://www.npmjs.com/package/@digital-ai/dot-components) (07/17/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.12...2.11.0)
+
+**Features:**
+
+- S-85581: Add prop for IconButton square shape [\#1554](https://github.com/digital-ai/dot-components/pull/1554) ([CWSites](https://github.com/CWSites))
+- S-90431: expose modifiers prop on popper [\#1550](https://github.com/digital-ai/dot-components/pull/1550) ([CWSites](https://github.com/CWSites))
+- S-94255 `DotDialog` control open status when submitting [\#1548](https://github.com/digital-ai/dot-components/pull/1548) ([angel-git](https://github.com/angel-git))
+
+**Fixed bugs:**
+
+- D-25273: Stepper double scrollbar [\#1553](https://github.com/digital-ai/dot-components/pull/1553) ([ryangamble](https://github.com/ryangamble))
+-  D-25878: File Size calculated incorrectly in DotFileUpload Component [\#1552](https://github.com/digital-ai/dot-components/pull/1552) ([KumaranKanagaraj](https://github.com/KumaranKanagaraj))
+- D-22374: Use `disabled` in favor of `readOnly` on input fields [\#1546](https://github.com/digital-ai/dot-components/pull/1546) ([CWSites](https://github.com/CWSites))
+- D-24600: Update ButtonToggle icon color when primary [\#1545](https://github.com/digital-ai/dot-components/pull/1545) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-84554: Update typography to latest Figma [\#1551](https://github.com/digital-ai/dot-components/pull/1551) ([CWSites](https://github.com/CWSites))
+- S-91993: Address a11y issues raised by Storybook [\#1549](https://github.com/digital-ai/dot-components/pull/1549) ([CWSites](https://github.com/CWSites))
+- D-25843: update dot-icons to be greater than 1.0.11 [\#1543](https://github.com/digital-ai/dot-components/pull/1543) ([CWSites](https://github.com/CWSites))
+
+## [1.21.12](https://www.npmjs.com/package/@digital-ai/dot-components) (07/14/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.2...1.21.12)
+
+**Fixed bugs:**
+
+- D-25878: File Size calculated incorrectly in DotFileUpload Component [\#1547](https://github.com/digital-ai/dot-components/pull/1547) ([KumaranKanagaraj](https://github.com/KumaranKanagaraj))
+
+## [2.10.2](https://www.npmjs.com/package/@digital-ai/dot-components) (07/11/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.1...2.10.2)
+
+**Fixed bugs:**
+
+- D-25822: Remove improper capitalization of `onclick` [\#1538](https://github.com/digital-ai/dot-components/pull/1538) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- D-25823: adjust breadcrumb & link styles to match latest figma [\#1539](https://github.com/digital-ai/dot-components/pull/1539) ([CWSites](https://github.com/CWSites))
+- S-91990: LinearProgress add aria-label [\#1537](https://github.com/digital-ai/dot-components/pull/1537) ([CWSites](https://github.com/CWSites))
+- S-91989: remove default aria-label, add link label to missing link [\#1536](https://github.com/digital-ai/dot-components/pull/1536) ([CWSites](https://github.com/CWSites))
+- S-91989: update link to have aria-label [\#1534](https://github.com/digital-ai/dot-components/pull/1534) ([CWSites](https://github.com/CWSites))
+- `master` \> `develop` [\#1532](https://github.com/digital-ai/dot-components/pull/1532) ([angel-git](https://github.com/angel-git))
+
 ## [2.10.1](https://www.npmjs.com/package/@digital-ai/dot-components) (06/29/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.10.0...2.10.1)
@@ -79,10 +126,10 @@
 
 - S-92312: Release workflow adjustments [\#1498](https://github.com/digital-ai/dot-components/pull/1498) ([CWSites](https://github.com/CWSites))
 - S-92312: Fix issue with env context in release workflow [\#1496](https://github.com/digital-ai/dot-components/pull/1496) ([BoraAksoy](https://github.com/BoraAksoy))
-- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
 
+- S-90263: Update `DotButton` to follow latest Figma design [\#1486](https://github.com/digital-ai/dot-components/pull/1486) ([CWSites](https://github.com/CWSites))
 - S-92312: Refactor workflows to use latest features and action versions [\#1485](https://github.com/digital-ai/dot-components/pull/1485) ([BoraAksoy](https://github.com/BoraAksoy))
 
 ## [2.8.0](https://www.npmjs.com/package/@digital-ai/dot-components) (05/09/2023)
@@ -175,7 +222,6 @@
 **Fixed bugs:**
 
 - D-24672: update icon alignment in sidebar [\#1436](https://github.com/digital-ai/dot-components/pull/1436) ([CWSites](https://github.com/CWSites))
-- D-24483: Do not hide the backdrop [\#1423](https://github.com/digital-ai/dot-components/pull/1423) ([jmcnally](https://github.com/jmcnally))
 
 ## [2.6.0](https://www.npmjs.com/package/@digital-ai/dot-components) (04/05/2023)
 
@@ -203,6 +249,10 @@
 
 - S-90953: `DatePicker` component [\#1411](https://github.com/digital-ai/dot-components/pull/1411) ([dmiletic85](https://github.com/dmiletic85))
 
+**Fixed bugs:**
+
+- D-24483: Do not hide the backdrop [\#1423](https://github.com/digital-ai/dot-components/pull/1423) ([jmcnally](https://github.com/jmcnally))
+
 **Misc:**
 
 - resolve build issues with vsm-hub demo [\#1424](https://github.com/digital-ai/dot-components/pull/1424) ([CWSites](https://github.com/CWSites))
@@ -236,7 +286,6 @@
 
 - D-24317 Fix height on InlineEdit [\#1414](https://github.com/digital-ai/dot-components/pull/1414) ([angel-git](https://github.com/angel-git))
 - D-24419 `InlineEdit` show tooltip on readonly as well [\#1413](https://github.com/digital-ai/dot-components/pull/1413) ([angel-git](https://github.com/angel-git))
-- D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
 
 ## [2.5.1](https://www.npmjs.com/package/@digital-ai/dot-components) (03/14/2023)
 
@@ -257,6 +306,7 @@
 
 **Fixed bugs:**
 
+- D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
 - D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
 - Issue \#1271: Updates to `AutoComplete` sizing with `dense` and `size` props [\#1395](https://github.com/digital-ai/dot-components/pull/1395) ([CWSites](https://github.com/CWSites))
 
@@ -516,6 +566,7 @@
 
 **Fixed bugs:**
 
+- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - S-84151: fix e2e tests for Release 2.0 [\#1146](https://github.com/digital-ai/dot-components/pull/1146) ([CWSites](https://github.com/CWSites))
 
 **Misc:**
@@ -546,7 +597,6 @@
 
 **Fixed bugs:**
 
-- S-86692: component cleanup [\#1238](https://github.com/digital-ai/dot-components/pull/1238) ([CWSites](https://github.com/CWSites))
 - D-20931: `DotAccordion` - display top border correctly when expanded [\#1232](https://github.com/digital-ai/dot-components/pull/1232) ([CWSites](https://github.com/CWSites))
 - D-22087: `DotRadioGroup` / `DotCheckboxGroup` helper texts do not follow the same styles as other helper texts [\#1225](https://github.com/digital-ai/dot-components/pull/1225) ([dmiletic85](https://github.com/dmiletic85))
 
@@ -937,6 +987,7 @@
 
 **Fixed bugs:**
 
+- D-19415: `1.6.0` - Sidebar links broken, import was moved [\#926](https://github.com/digital-ai/dot-components/pull/926) ([dmiletic85](https://github.com/dmiletic85))
 - D-19390: `Autocomplete` doesn't have `dot-input` class [\#924](https://github.com/digital-ai/dot-components/pull/924) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.6.0](https://www.npmjs.com/package/@digital-ai/dot-components) (01/03/2022)
@@ -949,7 +1000,6 @@
 
 **Fixed bugs:**
 
-- D-19415: `1.6.0` - Sidebar links broken, import was moved [\#926](https://github.com/digital-ai/dot-components/pull/926) ([dmiletic85](https://github.com/dmiletic85))
 - D-19382: `DynamicForm`: `isRequired` with value of `false` is not respected [\#919](https://github.com/digital-ai/dot-components/pull/919) ([dmiletic85](https://github.com/dmiletic85))
 - D-19381: `Storybook`: issue while clicking on `Docs` page of `Menu` component [\#917](https://github.com/digital-ai/dot-components/pull/917) ([dmiletic85](https://github.com/dmiletic85))
 - D-19379: `DynamicForm` doesn't export all types [\#915](https://github.com/digital-ai/dot-components/pull/915) ([dmiletic85](https://github.com/dmiletic85))
@@ -1009,10 +1059,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.4.0...1.5.0)
 
-**Features:**
-
-- S-80586: Breadcrumbs enhancement \(collapse and expand automatically\) [\#843](https://github.com/digital-ai/dot-components/pull/843) ([dmiletic85](https://github.com/dmiletic85))
-
 **Fixed bugs:**
 
 - D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
@@ -1029,6 +1075,7 @@
 **Features:**
 
 - S-80740: Expose DotAccordion 'expanded' and 'onChange' props [\#860](https://github.com/digital-ai/dot-components/pull/860) ([selsemore](https://github.com/selsemore))
+- S-80586: Breadcrumbs enhancement \(collapse and expand automatically\) [\#843](https://github.com/digital-ai/dot-components/pull/843) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -1092,6 +1139,7 @@
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
 - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
+- S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
 
 **Fixed bugs:**
 
@@ -1109,10 +1157,6 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.3.2...1.3.3)
 
-**Features:**
-
-- S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
-
 **Fixed bugs:**
 
 - D-19069: `AutoComplete` z-index not behaving as expected [\#793](https://github.com/digital-ai/dot-components/pull/793) ([CWSites](https://github.com/CWSites))

package/README.md

@@ -37,7 +37,6 @@ The `DotThemeProvider` provides the theme for the components in this library. Wh
 Once your application is wrapped with `DotThemeProvider`, your styled components can use colors and spacings from the theme:
 
 ```jsx
-import React from 'react';
 import styled, { css } from 'styled-components';
 
 const StyledWidget = styled.div`

package/index.esm.js

@@ -106,6 +106,9 @@ const DotTypography = ({
     if (ariaRole === 'heading' && !ariaLevel) {
       console.warn('please include ariaLevel when using ariaRole="heading"');
     }
+    if (noMarginBottom) {
+      console.warn('`noMarginBottom` is deprecated, typography no longer has bottom margin included');
+    }
   }, []);
   return jsx(Typography, Object.assign({
     "aria-label": ariaLabel,
@@ -227,7 +230,7 @@ const StyledInputLabel = styled(InputLabel).withConfig({
   componentId: "sc-1mbn9f0-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{transform:none;&.Mui-disabled .dot-typography{color:rgba(0,0,0,0.38);}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.palette.error.main));
+}) => css(["&.", "{margin-bottom:", ";transform:none;&.Mui-disabled .dot-typography{color:rgba(0,0,0,0.38);}&.Mui-error .dot-typography{color:", ";}.dot-typography{display:inline;}}"], labelClassName, theme.spacing(0.5), theme.palette.error.main));
 const StyledTextFieldContainer = styled.div.withConfig({
   displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
   componentId: "sc-1mbn9f0-2"
@@ -586,42 +589,35 @@ const typographyOptions = {
     fontFamily: 'LatoBold, sans-serif',
     fontSize: 17,
     lineHeight: '23px',
-    letterSpacing: '0.03em',
-    marginBottom: 1
+    letterSpacing: '0.03em'
   },
   subtitle2: {
     fontFamily: 'LatoBold, sans-serif',
     fontSize: 14,
     lineHeight: '20px',
-    letterSpacing: '0.03em',
-    marginBottom: 1
+    letterSpacing: '0.03em'
   },
   body1: {
     fontSize: 14,
     lineHeight: '20px',
-    letterSpacing: '0.03em',
-    marginBottom: 4
+    letterSpacing: '0.03em'
   },
   body2: {
     fontSize: 12,
     lineHeight: '16px',
-    letterSpacing: '0.02em',
-    marginBottom: 3
+    letterSpacing: '0.02em'
   },
   caption: {
     fontSize: 10,
     fontFamily: 'LatoBold, sans-serif',
-    fontWeight: 700,
     lineHeight: '16px',
-    letterSpacing: '0.03em',
-    marginBottom: 3
+    letterSpacing: '0.03em'
   },
   overline: {
     fontSize: 11,
     lineHeight: '14px',
     letterSpacing: '0.05em',
-    textTransform: 'uppercase',
-    marginBottom: 3
+    textTransform: 'uppercase'
   },
   button: {
     fontSize: 14,
@@ -1825,7 +1821,7 @@ const rootClassName$_ = 'dot-link';
 const StyledLink = styled(Link).withConfig({
   displayName: "Linkstyles__StyledLink",
   componentId: "sc-1lpmaww-0"
-})(["", ""], () => css(["&.", "{cursor:pointer;&:hover:not(.MuiLink-underlineHover){text-decoration:none;}}"], rootClassName$_));
+})(["", ""], () => css(["&.", "{cursor:pointer;&:hover.MuiLink-underlineHover{text-decoration:none;}}"], rootClassName$_));
 
 const DotLink = ({
   ariaLabel,
@@ -1842,9 +1838,15 @@ const DotLink = ({
   tabIndex: _tabIndex = 0,
   target,
   tooltip,
-  underline
+  underline: _underline = 'always'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$_, className);
+  useEffect(() => {
+    // Include a console warning if the link is not a string and no ariaLabel is provided
+    if (!isString$1(children) && !ariaLabel) {
+      console.warn(`a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text`);
+    }
+  }, []);
   const handleKeyPress = event => {
     if (onClick && event.key === 'Enter') {
       event.preventDefault();
@@ -1870,7 +1872,7 @@ const DotLink = ({
       role: _ariaRole,
       tabIndex: _tabIndex,
       target: target,
-      underline: underline
+      underline: _underline
     }, {
       children: children
     }), void 0)
@@ -2305,7 +2307,9 @@ const rootClassName$S = 'dot-icon-btn';
 const StyledIconButton = styled(IconButton).withConfig({
   displayName: "IconButtonstyles__StyledIconButton",
   componentId: "eko0kb-0"
-})(["", ""], () => css(["&.", "{font-size:inherit;padding:10px;.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$S, hoverGray));
+})(["", ""], ({
+  theme
+}) => css(["&.", "{font-size:inherit;padding:10px;&.shape-square{border-radius:4px;border:1px solid ", ";padding:", ";}.dot-icon.MuiIcon-fontSizeSmall{padding:1px;}&.MuiIconButton-sizeSmall{padding:3px;}&.ripple-disabled{&:hover,&:active,&:focus{background:", ";}}"], rootClassName$S, theme.palette.grey[300], theme.spacing(1), hoverGray));
 
 const DotIconButton = ({
   ariaLabel,
@@ -2319,10 +2323,11 @@ const DotIconButton = ({
   iconSize: _iconSize = 'small',
   onClick,
   tooltip,
+  shape: _shape = 'circle',
   size: _size = 'medium'
 }) => {
   const rippleClassName = _disableRipple ? 'ripple-disabled' : '';
-  const rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, `shape-${_shape}`, className);
   return jsx(DotTooltip, Object.assign({
     "data-testid": "icon-button-tooltip",
     title: tooltip
@@ -4209,6 +4214,7 @@ const DotAppToolbar = ({
       className: "dot-branding"
     }, {
       children: [jsx(DotLink, Object.assign({
+        ariaLabel: "Digital.ai Logo",
         className: "primary-logo",
         "data-testid": "primary-logo",
         href: _primaryLogoHref
@@ -4220,6 +4226,7 @@ const DotAppToolbar = ({
           children: jsx(ForwardRef, {}, void 0)
         }), void 0)
       }), void 0), displayAppLogo && jsx(DotLink, Object.assign({
+        ariaLabel: "Application Logo",
         href: _appLogoHref,
         "data-testid": "app-logo"
       }, {
@@ -4759,7 +4766,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[700], theme.spacing(0.5, 2), theme.palette.grey[700]));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -5527,6 +5534,7 @@ const DotDialog = ({
   children,
   closeIconVisible,
   closeOnClickAway: _closeOnClickAway = true,
+  closeOnSubmit: _closeOnSubmit = true,
   hasPrimaryAction: _hasPrimaryAction = true,
   onCancel,
   onSubmit,
@@ -5558,7 +5566,7 @@ const DotDialog = ({
     if (onSubmit) {
       onSubmit(event);
     }
-    handleClose();
+    _closeOnSubmit && handleClose();
   };
   return jsxs(StyledDialog, Object.assign({
     "aria-label": ariaLabel,
@@ -6336,7 +6344,6 @@ function DotRadioButton({
   };
   // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
   const radioControl = jsx(StyledRadioButton, {
-    "aria-checked": checked,
     "aria-label": ariaLabel || label,
     checked: checked,
     classes: {
@@ -7813,20 +7820,27 @@ const StyledStepper = styled.div.withConfig({
   componentId: "sc-1qka0yq-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
+}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
+const ScrollbarContainer = styled.div.withConfig({
+  displayName: "Stepperstyles__ScrollbarContainer",
+  componentId: "sc-1qka0yq-1"
+})(["", ""], ({
+  theme,
+  offset
+}) => css(["height:", ";overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}"], `calc(100vh - ${offset}px)`));
 const StepContentWrapper = styled.div.withConfig({
   displayName: "Stepperstyles__StepContentWrapper",
-  componentId: "sc-1qka0yq-1"
+  componentId: "sc-1qka0yq-2"
 })(["flex:1;display:flex;justify-content:center;"]);
 const StepDescription = styled(DotTypography).withConfig({
   displayName: "Stepperstyles__StepDescription",
-  componentId: "sc-1qka0yq-2"
+  componentId: "sc-1qka0yq-3"
 })(["", ""], ({
   theme
 }) => css(["margin-bottom:", ";"], theme.spacing(6)));
 const StepActionsContainer = styled.div.withConfig({
   displayName: "Stepperstyles__StepActionsContainer",
-  componentId: "sc-1qka0yq-3"
+  componentId: "sc-1qka0yq-4"
 })(["", ""], ({
   theme,
   displayCancelButton
@@ -7857,6 +7871,7 @@ const DotStepper = ({
   initialContent,
   nextButtonText: _nextButtonText = 'Next',
   nextStepDisabled: _nextStepDisabled = false,
+  offset: _offset = 0,
   onBack,
   onCancel,
   onSubmit,
@@ -7876,7 +7891,7 @@ const DotStepper = ({
   const displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
   const isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
   const rootClasses = useStylesWithRootClass(rootClassName$i, _stepsPosition, className);
-  const contentClasses = useStylesWithRootClass(contentClassName, displayInitialContent || displayFinalContent ? 'center-content' : '');
+  const centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
   const stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
   const actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
   useEffect(() => {
@@ -7964,16 +7979,21 @@ const DotStepper = ({
   };
   const renderContent = () => {
     return jsxs("div", Object.assign({
-      className: contentClasses,
+      className: contentClassName,
       ref: stepperContentRef
     }, {
-      children: [jsx(CssGrid, Object.assign({
-        className: "step-content-container"
+      children: [jsx(ScrollbarContainer, Object.assign({
+        offset: _offset + 81,
+        className: centerContentClass
       }, {
-        children: jsx(CssCell, Object.assign({}, defaultCellProps, {
-          lg: getStepCellSize(currentStep)
+        children: jsx(CssGrid, Object.assign({
+          className: "step-content-container"
         }, {
-          children: getStepContent(currentStep)
+          children: jsx(CssCell, Object.assign({}, defaultCellProps, {
+            lg: getStepCellSize(currentStep)
+          }, {
+            children: getStepContent(currentStep)
+          }), void 0)
         }), void 0)
       }), void 0), jsx(StepActionsContainer, Object.assign({
         className: stickyBottomClasses,
@@ -8022,58 +8042,62 @@ const DotStepper = ({
   return jsxs(StyledStepper, Object.assign({
     className: rootClasses
   }, {
-    children: [jsx(Stepper, Object.assign({
-      activeStep: currentStep,
-      "aria-label": ariaLabel,
-      className: stepListClassName,
-      "data-testid": dataTestId,
-      orientation: _orientation
+    children: [jsx(ScrollbarContainer, Object.assign({
+      offset: _offset
     }, {
-      children: steps.map((step, index) => {
-        const isActive = currentStep === step.id;
-        // TODO: use useStylesWithRootClass here
-        const stepClasses = () => {
-          return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
-        };
-        const getContent = () => {
-          return isString$1(step.description) ? jsx(StepDescription, Object.assign({
-            variant: "body2"
-          }, {
-            children: step.description
-          }), void 0) : step.description;
-        };
-        const getHorizontalDescription = () => {
-          return isString$1(step.description) ? jsx(DotTypography, Object.assign({
-            variant: "body2",
-            className: "horizontal-step-description"
-          }, {
-            children: step.description
-          }), void 0) : null;
-        };
-        return jsxs(Step, Object.assign({
-          active: isActive,
-          classes: {
-            root: stepClasses()
-          },
-          completed: step.completed,
-          disabled: step.disabled,
-          expanded: true
-        }, {
-          children: [jsxs(StepLabel, Object.assign({
-            icon: getStepIcon(step.iconId, step.completed, step.error),
-            onClick: () => navigateToStep(step.id)
+      children: jsx(Stepper, Object.assign({
+        activeStep: currentStep,
+        "aria-label": ariaLabel,
+        className: stepListClassName,
+        "data-testid": dataTestId,
+        orientation: _orientation
+      }, {
+        children: steps.map((step, index) => {
+          const isActive = currentStep === step.id;
+          // TODO: use useStylesWithRootClass here
+          const stepClasses = () => {
+            return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
+          };
+          const getContent = () => {
+            return isString$1(step.description) ? jsx(StepDescription, Object.assign({
+              variant: "body2"
+            }, {
+              children: step.description
+            }), void 0) : step.description;
+          };
+          const getHorizontalDescription = () => {
+            return isString$1(step.description) ? jsx(DotTypography, Object.assign({
+              variant: "body2",
+              className: "horizontal-step-description"
+            }, {
+              children: step.description
+            }), void 0) : null;
+          };
+          return jsxs(Step, Object.assign({
+            active: isActive,
+            classes: {
+              root: stepClasses()
+            },
+            completed: step.completed,
+            disabled: step.disabled,
+            expanded: true
           }, {
-            children: [jsx(DotTypography, Object.assign({
-              className: "step-label",
-              variant: isHorizontal ? 'body1' : 'subtitle1'
+            children: [jsxs(StepLabel, Object.assign({
+              icon: getStepIcon(step.iconId, step.completed, step.error),
+              onClick: () => navigateToStep(step.id)
             }, {
-              children: step.label
-            }), void 0), _orientation === 'horizontal' && getHorizontalDescription()]
-          }), void 0), _orientation === 'vertical' && jsx(StepContent, {
-            children: getContent()
-          }, void 0)]
-        }), index);
-      })
+              children: [jsx(DotTypography, Object.assign({
+                className: "step-label",
+                variant: isHorizontal ? 'body1' : 'subtitle1'
+              }, {
+                children: step.label
+              }), void 0), _orientation === 'horizontal' && getHorizontalDescription()]
+            }), void 0), _orientation === 'vertical' && jsx(StepContent, {
+              children: getContent()
+            }, void 0)]
+          }), index);
+        })
+      }), void 0)
     }), void 0), jsx(StepContentWrapper, {
       children: renderContent()
     }, void 0)]
@@ -8274,16 +8298,21 @@ const DotBodyCell = ({
           iconSize: "small",
           onClick: () => onActionMenuTrigger(wrapperRef.current, value),
           size: "small"
-        }, void 0) : value.map((item, index) => jsx(DotIconButton, {
-          className: "dot-table-action-icon",
-          "data-testid": item.dataTestId,
-          disabled: item.disabled,
-          iconId: item.iconId,
-          iconSize: "small",
-          onClick: item.onclick,
-          size: "small",
-          tooltip: item.tooltip
-        }, `${cellKey}-icon-${index}`))
+        }, void 0) : value.map((item, index) => {
+          if (item.onclick) {
+            console.warn('The onclick property is deprecated, please use onClick instead');
+          }
+          return jsx(DotIconButton, {
+            className: "dot-table-action-icon",
+            "data-testid": item.dataTestId,
+            disabled: item.disabled,
+            iconId: item.iconId,
+            iconSize: "small",
+            onClick: item.onClick || item.onclick,
+            size: "small",
+            tooltip: item.tooltip
+          }, `${cellKey}-icon-${index}`);
+        })
       }), void 0);
     }
     return getFormattedTableCellValue(value, typography);
@@ -9381,7 +9410,7 @@ const DotFileUpload = ({
   } = useDropzone({
     accept,
     disabled: isUploadDisabled,
-    maxSize: maxSize * 1000000,
+    maxSize: maxSize * 1024 * 1024,
     multiple: allowMultiple,
     noClick: true,
     onDragEnter,
@@ -9459,6 +9488,7 @@ const DotPopper = ({
   className,
   'data-testid': dataTestId,
   disablePortal,
+  modifiers,
   onClickAway,
   open,
   placement
@@ -9476,6 +9506,7 @@ const DotPopper = ({
     className: rootClasses,
     "data-testid": dataTestId,
     disablePortal: disablePortal,
+    modifiers: modifiers,
     open: open,
     placement: placement,
     role: "presentation",
@@ -9615,6 +9646,11 @@ const DotLinearProgress = ({
   variant: _variant = 'indeterminate'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$2, className);
+  useEffect(() => {
+    if (!ariaLabel) {
+      console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
+    }
+  }, []);
   return jsx(StyledLinearProgress, {
     "aria-label": ariaLabel,
     classes: {