@digital-ai/dot-components 2.10.1 → 2.11.0

package/index.umd.js

@@ -239,6 +239,9 @@
         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 jsxRuntime.jsx(material.Typography, __assign({
         "aria-label": ariaLabel,
@@ -376,7 +379,7 @@
       componentId: "sc-1mbn9f0-1"
     })(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n    &.", " {\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "], ["\n    &.", " {\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "])), labelClassName, theme.palette.error.main);
+      return styled.css(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: ", ";\n      transform: none;\n\n      &.Mui-disabled .dot-typography {\n        color: rgba(0, 0, 0, 0.38);\n      }\n\n      &.Mui-error .dot-typography {\n        color: ", ";\n      }\n\n      .dot-typography {\n        display: inline;\n      }\n    }\n  "])), labelClassName, theme.spacing(0.5), theme.palette.error.main);
     });
     var StyledTextFieldContainer = styled__default["default"].div.withConfig({
       displayName: "InputFormFieldsstyles__StyledTextFieldContainer",
@@ -723,42 +726,35 @@
         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,
@@ -2064,7 +2060,7 @@
       displayName: "Linkstyles__StyledLink",
       componentId: "sc-1lpmaww-0"
     })(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover :not(.MuiLink-underlineHover) {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$_);
+      return styled.css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n    &.", " {\n      cursor: pointer;\n\n      &:hover.MuiLink-underlineHover {\n        text-decoration: none;\n      }\n    }\n  "], ["\n    &.", " {\n      cursor: pointer;\n\n      &:hover.MuiLink-underlineHover {\n        text-decoration: none;\n      }\n    }\n  "])), rootClassName$_);
     });
     var templateObject_1$13, templateObject_2$$;
 
@@ -2087,8 +2083,15 @@
         tabIndex = _e === void 0 ? 0 : _e,
         target = _a.target,
         tooltip = _a.tooltip,
-        underline = _a.underline;
+        _f = _a.underline,
+        underline = _f === void 0 ? 'always' : _f;
       var rootClasses = useStylesWithRootClass(rootClassName$_, className);
+      React.useEffect(function () {
+        // 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");
+        }
+      }, []);
       var handleKeyPress = function handleKeyPress(event) {
         if (onClick && event.key === 'Enter') {
           event.preventDefault();
@@ -2588,8 +2591,9 @@
     var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
       displayName: "IconButtonstyles__StyledIconButton",
       componentId: "eko0kb-0"
-    })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function () {
-      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$S, hoverGray);
+    })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      var theme = _a.theme;
+      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      font-size: inherit;\n      padding: 10px;\n\n      &.shape-square {\n        border-radius: 4px;\n        border: 1px solid ", ";\n        padding: ", ";\n      }\n\n      .dot-icon.MuiIcon-fontSizeSmall {\n        padding: 1px;\n      }\n\n      &.MuiIconButton-sizeSmall {\n        padding: 3px;\n      }\n\n      &.ripple-disabled {\n        &:hover, &:active, &:focus {\n          background: ", ";\n      }\n    }\n  "])), rootClassName$S, theme.palette.grey[300], theme.spacing(1), hoverGray);
     });
     var templateObject_1$W, templateObject_2$T;
 
@@ -2610,10 +2614,12 @@
         iconSize = _f === void 0 ? 'small' : _f,
         onClick = _a.onClick,
         tooltip = _a.tooltip,
-        _g = _a.size,
-        size = _g === void 0 ? 'medium' : _g;
+        _g = _a.shape,
+        shape = _g === void 0 ? 'circle' : _g,
+        _h = _a.size,
+        size = _h === void 0 ? 'medium' : _h;
       var rippleClassName = disableRipple ? 'ripple-disabled' : '';
-      var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, className);
+      var rootClasses = useStylesWithRootClass(rootClassName$S, rippleClassName, "shape-" + shape, className);
       return jsxRuntime.jsx(DotTooltip, __assign({
         "data-testid": "icon-button-tooltip",
         title: tooltip
@@ -4637,6 +4643,7 @@
           className: "dot-branding"
         }, {
           children: [jsxRuntime.jsx(DotLink, __assign({
+            ariaLabel: "Digital.ai Logo",
             className: "primary-logo",
             "data-testid": "primary-logo",
             href: primaryLogoHref
@@ -4648,6 +4655,7 @@
               children: jsxRuntime.jsx(ForwardRef, {}, void 0)
             }), void 0)
           }), void 0), displayAppLogo && jsxRuntime.jsx(DotLink, __assign({
+            ariaLabel: "Application Logo",
             href: appLogoHref,
             "data-testid": "app-logo"
           }, {
@@ -5239,7 +5247,7 @@
       componentId: "sc-7cg374-1"
     })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[700], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
     var templateObject_1$I, templateObject_2$F, templateObject_3$9, templateObject_4$7;
 
@@ -6047,8 +6055,10 @@
         closeIconVisible = _a.closeIconVisible,
         _c = _a.closeOnClickAway,
         closeOnClickAway = _c === void 0 ? true : _c,
-        _d = _a.hasPrimaryAction,
-        hasPrimaryAction = _d === void 0 ? true : _d,
+        _d = _a.closeOnSubmit,
+        closeOnSubmit = _d === void 0 ? true : _d,
+        _e = _a.hasPrimaryAction,
+        hasPrimaryAction = _e === void 0 ? true : _e,
         onCancel = _a.onCancel,
         onSubmit = _a.onSubmit,
         open = _a.open,
@@ -6056,9 +6066,9 @@
         title = _a.title;
       var rootClasses = useStylesWithRootClass(rootClassName$x, className);
       var cancelClasses = useStylesWithRootClass(cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.className, 'cancel-button');
-      var _e = React.useState(open),
-        isOpen = _e[0],
-        setIsOpen = _e[1];
+      var _f = React.useState(open),
+        isOpen = _f[0],
+        setIsOpen = _f[1];
       React.useEffect(function () {
         setIsOpen(open);
       }, [open]);
@@ -6080,7 +6090,7 @@
         if (onSubmit) {
           onSubmit(event);
         }
-        handleClose();
+        closeOnSubmit && handleClose();
       };
       return jsxRuntime.jsxs(StyledDialog, __assign({
         "aria-label": ariaLabel,
@@ -6898,7 +6908,6 @@
       };
       // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
       var radioControl = jsxRuntime.jsx(StyledRadioButton, {
-        "aria-checked": checked,
         "aria-label": ariaLabel || label,
         checked: checked,
         classes: {
@@ -8493,28 +8502,36 @@
       componentId: "sc-1qka0yq-0"
     })(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n        height: calc(100vh - 78px);\n        overflow-y: auto;\n\n        &.center-content {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          text-align: center;\n        }\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), 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));
+      return styled.css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n        .", " {\n          border-left: 1px solid ", ";\n        }\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n        .", " {\n          border-right: 1px solid ", ";\n        }\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), 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));
+    });
+    var ScrollbarContainer = styled__default["default"].div.withConfig({
+      displayName: "Stepperstyles__ScrollbarContainer",
+      componentId: "sc-1qka0yq-1"
+    })(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      _a.theme;
+        var offset = _a.offset;
+      return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n    height: ", ";\n    overflow-y: auto;\n\n    &.center-content {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n  "], ["\n    height: ", ";\n    overflow-y: auto;\n\n    &.center-content {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n  "])), "calc(100vh - " + offset + "px)");
     });
     var StepContentWrapper = styled__default["default"].div.withConfig({
       displayName: "Stepperstyles__StepContentWrapper",
-      componentId: "sc-1qka0yq-1"
-    })(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n"], ["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n"])));
+      componentId: "sc-1qka0yq-2"
+    })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n"], ["\n  flex: 1;\n  display: flex;\n  justify-content: center;\n"])));
     var StepDescription = styled__default["default"](DotTypography).withConfig({
       displayName: "Stepperstyles__StepDescription",
-      componentId: "sc-1qka0yq-2"
-    })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      componentId: "sc-1qka0yq-3"
+    })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), theme.spacing(6));
+      return styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), theme.spacing(6));
     });
     var StepActionsContainer = styled__default["default"].div.withConfig({
       displayName: "Stepperstyles__StepActionsContainer",
-      componentId: "sc-1qka0yq-3"
-    })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+      componentId: "sc-1qka0yq-4"
+    })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme,
         displayCancelButton = _a.displayCancelButton;
-      return styled.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", ";\n    position: sticky;\n    position: -webkit-sticky;\n    bottom: 0;\n    background-color: ", ";\n    z-index: 2;\n\n    &.with-top-border {\n      border-top: 1px solid ", ";\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: row;\n      justify-content: ", ";\n\n      &.center-actions {\n        justify-content: center;\n      }\n\n      .cancel-stepper {\n        justify-self: flex-start;\n      }\n\n      .navigation-buttons {\n        justify-self: flex-end;\n      }\n    }\n  "], ["\n    padding: ", ";\n    position: sticky;\n    position: -webkit-sticky;\n    bottom: 0;\n    background-color: ", ";\n    z-index: 2;\n\n    &.with-top-border {\n      border-top: 1px solid ", ";\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: row;\n      justify-content: ", ";\n\n      &.center-actions {\n        justify-content: center;\n      }\n\n      .cancel-stepper {\n        justify-self: flex-start;\n      }\n\n      .navigation-buttons {\n        justify-self: flex-end;\n      }\n    }\n  "])), theme.spacing(2), theme.palette.layer['n0'], theme.palette.layer['n100'], displayCancelButton ? 'space-between' : 'flex-end');
+      return styled.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    padding: ", ";\n    position: sticky;\n    position: -webkit-sticky;\n    bottom: 0;\n    background-color: ", ";\n    z-index: 2;\n\n    &.with-top-border {\n      border-top: 1px solid ", ";\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: row;\n      justify-content: ", ";\n\n      &.center-actions {\n        justify-content: center;\n      }\n\n      .cancel-stepper {\n        justify-self: flex-start;\n      }\n\n      .navigation-buttons {\n        justify-self: flex-end;\n      }\n    }\n  "], ["\n    padding: ", ";\n    position: sticky;\n    position: -webkit-sticky;\n    bottom: 0;\n    background-color: ", ";\n    z-index: 2;\n\n    &.with-top-border {\n      border-top: 1px solid ", ";\n    }\n\n    .actions {\n      display: flex;\n      flex-direction: row;\n      justify-content: ", ";\n\n      &.center-actions {\n        justify-content: center;\n      }\n\n      .cancel-stepper {\n        justify-self: flex-start;\n      }\n\n      .navigation-buttons {\n        justify-self: flex-end;\n      }\n    }\n  "])), theme.spacing(2), theme.palette.layer['n0'], theme.palette.layer['n100'], displayCancelButton ? 'space-between' : 'flex-end');
     });
-    var templateObject_1$i, templateObject_2$h, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6, templateObject_7;
+    var templateObject_1$i, templateObject_2$h, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
     var defaultCellProps = {
       center: false,
@@ -8544,24 +8561,26 @@
         nextButtonText = _c === void 0 ? 'Next' : _c,
         _d = _a.nextStepDisabled,
         nextStepDisabled = _d === void 0 ? false : _d,
+        _e = _a.offset,
+        offset = _e === void 0 ? 0 : _e,
         onBack = _a.onBack,
         onCancel = _a.onCancel,
         onSubmit = _a.onSubmit,
-        _e = _a.orientation,
-        orientation = _e === void 0 ? 'vertical' : _e,
-        _f = _a.disableUncompletedStepNav,
-        disableUncompletedStepNav = _f === void 0 ? false : _f,
+        _f = _a.orientation,
+        orientation = _f === void 0 ? 'vertical' : _f,
+        _g = _a.disableUncompletedStepNav,
+        disableUncompletedStepNav = _g === void 0 ? false : _g,
         steps = _a.steps,
-        _g = _a.stepsPosition,
-        stepsPosition = _g === void 0 ? 'left' : _g,
-        _h = _a.submitButtonText,
-        submitButtonText = _h === void 0 ? 'Complete' : _h;
-      var _j = React.useState(activeStep),
-        currentStep = _j[0],
-        setActiveStep = _j[1];
-      var _k = React.useState(false),
-        isStickyBottom = _k[0],
-        setIsStickyBottom = _k[1];
+        _h = _a.stepsPosition,
+        stepsPosition = _h === void 0 ? 'left' : _h,
+        _j = _a.submitButtonText,
+        submitButtonText = _j === void 0 ? 'Complete' : _j;
+      var _k = React.useState(activeStep),
+        currentStep = _k[0],
+        setActiveStep = _k[1];
+      var _l = React.useState(false),
+        isStickyBottom = _l[0],
+        setIsStickyBottom = _l[1];
       var actionsRef = React.useRef(null);
       var stepperContentRef = React.useRef(null);
       var isHorizontal = orientation === 'horizontal';
@@ -8570,7 +8589,7 @@
       var displayCancelButton = !!(!displayInitialContent && !displayFinalContent && onCancel);
       var isLastStep = currentStep === steps.length && !finalContent || currentStep > steps.length && finalContent;
       var rootClasses = useStylesWithRootClass(rootClassName$i, stepsPosition, className);
-      var contentClasses = useStylesWithRootClass(contentClassName, displayInitialContent || displayFinalContent ? 'center-content' : '');
+      var centerContentClass = displayInitialContent || displayFinalContent ? 'center-content' : '';
       var stickyBottomClasses = useStylesWithRootClass(isStickyBottom ? 'with-top-border' : '');
       var actionsClasses = useStylesWithRootClass('actions', displayInitialContent || displayFinalContent ? 'center-actions' : '');
       React.useEffect(function () {
@@ -8671,16 +8690,21 @@
       };
       var renderContent = function renderContent() {
         return jsxRuntime.jsxs("div", __assign({
-          className: contentClasses,
+          className: contentClassName,
           ref: stepperContentRef
         }, {
-          children: [jsxRuntime.jsx(CssGrid, __assign({
-            className: "step-content-container"
+          children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
+            offset: offset + 81,
+            className: centerContentClass
           }, {
-            children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
-              lg: getStepCellSize(currentStep)
+            children: jsxRuntime.jsx(CssGrid, __assign({
+              className: "step-content-container"
             }, {
-              children: getStepContent(currentStep)
+              children: jsxRuntime.jsx(CssCell, __assign({}, defaultCellProps, {
+                lg: getStepCellSize(currentStep)
+              }, {
+                children: getStepContent(currentStep)
+              }), void 0)
             }), void 0)
           }), void 0), jsxRuntime.jsx(StepActionsContainer, __assign({
             className: stickyBottomClasses,
@@ -8729,60 +8753,64 @@
       return jsxRuntime.jsxs(StyledStepper, __assign({
         className: rootClasses
       }, {
-        children: [jsxRuntime.jsx(material.Stepper, __assign({
-          activeStep: currentStep,
-          "aria-label": ariaLabel,
-          className: stepListClassName,
-          "data-testid": dataTestId,
-          orientation: orientation
+        children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
+          offset: offset
         }, {
-          children: steps.map(function (step, index) {
-            var isActive = currentStep === step.id;
-            // TODO: use useStylesWithRootClass here
-            var stepClasses = function stepClasses() {
-              return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
-            };
-            var getContent = function getContent() {
-              return isString$1(step.description) ? jsxRuntime.jsx(StepDescription, __assign({
-                variant: "body2"
-              }, {
-                children: step.description
-              }), void 0) : step.description;
-            };
-            var getHorizontalDescription = function getHorizontalDescription() {
-              return isString$1(step.description) ? jsxRuntime.jsx(DotTypography, __assign({
-                variant: "body2",
-                className: "horizontal-step-description"
-              }, {
-                children: step.description
-              }), void 0) : null;
-            };
-            return jsxRuntime.jsxs(material.Step, __assign({
-              active: isActive,
-              classes: {
-                root: stepClasses()
-              },
-              completed: step.completed,
-              disabled: step.disabled,
-              expanded: true
-            }, {
-              children: [jsxRuntime.jsxs(material.StepLabel, __assign({
-                icon: getStepIcon(step.iconId, step.completed, step.error),
-                onClick: function () {
-                  return navigateToStep(step.id);
-                }
+          children: jsxRuntime.jsx(material.Stepper, __assign({
+            activeStep: currentStep,
+            "aria-label": ariaLabel,
+            className: stepListClassName,
+            "data-testid": dataTestId,
+            orientation: orientation
+          }, {
+            children: steps.map(function (step, index) {
+              var isActive = currentStep === step.id;
+              // TODO: use useStylesWithRootClass here
+              var stepClasses = function stepClasses() {
+                return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
+              };
+              var getContent = function getContent() {
+                return isString$1(step.description) ? jsxRuntime.jsx(StepDescription, __assign({
+                  variant: "body2"
+                }, {
+                  children: step.description
+                }), void 0) : step.description;
+              };
+              var getHorizontalDescription = function getHorizontalDescription() {
+                return isString$1(step.description) ? jsxRuntime.jsx(DotTypography, __assign({
+                  variant: "body2",
+                  className: "horizontal-step-description"
+                }, {
+                  children: step.description
+                }), void 0) : null;
+              };
+              return jsxRuntime.jsxs(material.Step, __assign({
+                active: isActive,
+                classes: {
+                  root: stepClasses()
+                },
+                completed: step.completed,
+                disabled: step.disabled,
+                expanded: true
               }, {
-                children: [jsxRuntime.jsx(DotTypography, __assign({
-                  className: "step-label",
-                  variant: isHorizontal ? 'body1' : 'subtitle1'
+                children: [jsxRuntime.jsxs(material.StepLabel, __assign({
+                  icon: getStepIcon(step.iconId, step.completed, step.error),
+                  onClick: function () {
+                    return navigateToStep(step.id);
+                  }
                 }, {
-                  children: step.label
-                }), void 0), orientation === 'horizontal' && getHorizontalDescription()]
-              }), void 0), orientation === 'vertical' && jsxRuntime.jsx(material.StepContent, {
-                children: getContent()
-              }, void 0)]
-            }), index);
-          })
+                  children: [jsxRuntime.jsx(DotTypography, __assign({
+                    className: "step-label",
+                    variant: isHorizontal ? 'body1' : 'subtitle1'
+                  }, {
+                    children: step.label
+                  }), void 0), orientation === 'horizontal' && getHorizontalDescription()]
+                }), void 0), orientation === 'vertical' && jsxRuntime.jsx(material.StepContent, {
+                  children: getContent()
+                }, void 0)]
+              }), index);
+            })
+          }), void 0)
         }), void 0), jsxRuntime.jsx(StepContentWrapper, {
           children: renderContent()
         }, void 0)]
@@ -8995,13 +9023,16 @@
               },
               size: "small"
             }, void 0) : value.map(function (item, index) {
+              if (item.onclick) {
+                console.warn('The onclick property is deprecated, please use onClick instead');
+              }
               return jsxRuntime.jsx(DotIconButton, {
                 className: "dot-table-action-icon",
                 "data-testid": item.dataTestId,
                 disabled: item.disabled,
                 iconId: item.iconId,
                 iconSize: "small",
-                onClick: item.onclick,
+                onClick: item.onClick || item.onclick,
                 size: "small",
                 tooltip: item.tooltip
               }, cellKey + "-icon-" + index);
@@ -10210,7 +10241,7 @@
       var _f = reactDropzone.useDropzone({
           accept: accept,
           disabled: isUploadDisabled,
-          maxSize: maxSize * 1000000,
+          maxSize: maxSize * 1024 * 1024,
           multiple: allowMultiple,
           noClick: true,
           onDragEnter: onDragEnter,
@@ -10294,6 +10325,7 @@
         className = _a.className,
         dataTestId = _a["data-testid"],
         disablePortal = _a.disablePortal,
+        modifiers = _a.modifiers,
         onClickAway = _a.onClickAway,
         open = _a.open,
         placement = _a.placement;
@@ -10310,6 +10342,7 @@
         className: rootClasses,
         "data-testid": dataTestId,
         disablePortal: disablePortal,
+        modifiers: modifiers,
         open: open,
         placement: placement,
         role: "presentation",
@@ -10467,6 +10500,11 @@
         _b = _a.variant,
         variant = _b === void 0 ? 'indeterminate' : _b;
       var rootClasses = useStylesWithRootClass(rootClassName$2, className);
+      React.useEffect(function () {
+        if (!ariaLabel) {
+          console.warn('a11y: DotLinearProgress must have an ariaLabel to describe the progress bar');
+        }
+      }, []);
       return jsxRuntime.jsx(StyledLinearProgress, {
         "aria-label": ariaLabel,
         classes: {

package/lib/components/button/IconButton.d.ts

@@ -3,6 +3,7 @@ import { CommonProps } from '../CommonProps';
 import { IconFontSize } from '../icon/Icon';
 export declare type IconButtonColor = 'default' | 'inherit' | 'primary' | 'secondary';
 export declare type IconButtonSize = 'small' | 'medium';
+export declare type IconButtonShape = 'circle' | 'square';
 export interface IconButtonProps extends CommonProps {
     /** 'default', 'inherit', 'primary', 'secondary' */
     color?: IconButtonColor;
@@ -16,9 +17,11 @@ export interface IconButtonProps extends CommonProps {
     iconSize?: IconFontSize;
     /** Event callback */
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Controls the shape of icon, can be 'circle' or 'square' */
+    shape?: IconButtonShape;
     /** Determines the size of the button and padding around the icon */
     size?: IconButtonSize;
     /** Help text to be displayed on icon hover */
     tooltip?: string;
 }
-export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element;
+export declare const DotIconButton: ({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => JSX.Element;

package/lib/components/button/IconButton.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import { IconButtonProps } from './IconButton';
-declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, size, }: IconButtonProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, color, "data-testid": dataTestId, disabled, disableRipple, iconId, iconSize, onClick, tooltip, shape, size, }: IconButtonProps) => JSX.Element>;
 export default _default;
 export declare const Default: any;
 export declare const WithPrimaryColor: any;
@@ -8,3 +8,4 @@ export declare const WithSecondaryColor: any;
 export declare const WithSmallSize: any;
 export declare const WithDisabledState: any;
 export declare const WithDisabledRipple: any;
+export declare const WithSquare: any;

package/lib/components/dialog/Dialog.d.ts

@@ -22,8 +22,10 @@ export interface DialogProps extends CommonProps {
     children?: ReactNode;
     /** boolean that toggles visibility of close icon on top right of dialog header*/
     closeIconVisible?: boolean;
-    /** boolean if true then the dialog will not close*/
+    /** boolean if true then the dialog will close*/
     closeOnClickAway?: boolean;
+    /** boolean if true then the dialog will be closed on submit **/
+    closeOnSubmit?: boolean;
     /** boolean that toggles existence of primary action button */
     hasPrimaryAction?: boolean;
     /** The callback to be executed when the action is cancelled */
@@ -37,4 +39,4 @@ export interface DialogProps extends CommonProps {
     /** dialog heading */
     title: ReactNode;
 }
-export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;
+export declare const DotDialog: ({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element;

package/lib/components/dialog/Dialog.stories.d.ts

@@ -1,5 +1,5 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { DialogProps } from './Dialog';
-declare const _default: ComponentMeta<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, cancelButtonProps, cancelButtonVisible, className, "data-testid": dataTestId, children, closeIconVisible, closeOnClickAway, closeOnSubmit, hasPrimaryAction, onCancel, onSubmit, open, submitButtonProps, title, }: DialogProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<DialogProps>;

package/lib/components/popper/Popper.d.ts

@@ -1,6 +1,18 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { PopperPlacementType } from '@mui/material';
 import { CommonProps } from '../CommonProps';
+declare type ModifiersPhase = 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write';
+export interface ModifersProps {
+    data?: Record<string, unknown>;
+    effect?: () => void;
+    enabled?: boolean;
+    fn?: () => void;
+    name?: string;
+    options?: Record<string, unknown>;
+    phase?: ModifiersPhase;
+    requires?: Array<string>;
+    requiresIfExists?: Array<string>;
+}
 export interface PopperProps extends CommonProps {
     /** Element that popper is attached to */
     anchorEl?: Element;
@@ -8,6 +20,8 @@ export interface PopperProps extends CommonProps {
     children: ReactNode;
     /** Disable the portal behavior. If `true`, children stay within parent DOM hierarchy. */
     disablePortal?: boolean;
+    /** Used to specify the position more indepth, https://popper.js.org/docs/v2/modifiers/ */
+    modifiers?: ModifersProps[];
     /** Event callback when leaving popper by clicking away */
     onClickAway?: (event: KeyboardEvent | MouseEvent<Document>) => void;
     /** If `true`, the popper is visible. */
@@ -15,4 +29,5 @@ export interface PopperProps extends CommonProps {
     /** Popper placement. */
     placement?: PopperPlacementType;
 }
-export declare const DotPopper: ({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, onClickAway, open, placement, }: PopperProps) => JSX.Element;
+export declare const DotPopper: ({ ariaLabel, anchorEl, children, className, "data-testid": dataTestId, disablePortal, modifiers, onClickAway, open, placement, }: PopperProps) => JSX.Element;
+export {};