@digital-ai/dot-components 1.3.4 → 1.3.5

package/dot-components.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useEffect, useState, useRef, Fragment, useContext, useMemo, createContext } from 'react';
+import React__default, { useEffect, useState, useRef, useMemo, Fragment, useContext, createContext } from 'react';
 import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, Divider, AccordionActions, Toolbar, IconButton, Link, Avatar, StylesProvider, MuiThemeProvider, Drawer, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, List, ListItem, ListSubheader, Collapse, ListItemIcon, useMediaQuery, Chip, InputAdornment, TextField, Button, darken, Badge, Breadcrumbs, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogTitle, DialogContent, DialogActions, useTheme, RadioGroup, Radio, Switch, Snackbar, ButtonGroup, TableContainer, TableCell, TableRow, TableBody, TableHead, TableSortLabel, TablePagination, Table, Tabs, Tab } from '@material-ui/core';
 import styled, { css, createGlobalStyle, ThemeProvider } from 'styled-components';
 import { Alert, Autocomplete, AvatarGroup, ToggleButtonGroup, ToggleButton, Skeleton } from '@material-ui/lab';
@@ -1900,7 +1900,7 @@ var _templateObject$z;
 var rootClassName$w = 'dot-sidebar';
 var StyledSidebar = styled.aside(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return 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;.dot-icon{margin-right:", "px;width:40px;height:40px;}&:hover{background-color:", ";}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiTypography-subtitle2{border-bottom:1px solid;border-bottom-color:", ";margin:", ";}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{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:", ";}&: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;width:40px;}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}}li.dot-list-item .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;margin:", ";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;header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;li.MuiListSubheader-root .MuiTypography-root{opacity:0;}.dot-list-item{margin-left:0;.dot-icon{margin-left:", "px;}}.toggle-nav{align-self:center;}}.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.dot-drawer{display:none;}.powered-by{align-items:center;.company-name,p.desc{display:none;}.d-icon{display:block;}}}}"], rootClassName$w, 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(1), theme.palette.grey[100], 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.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.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.palette.layer.n0, theme.palette.layer.n900, 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.palette.product !== 'agility' && theme.spacing(0, 1), theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0), theme.spacing(1));
+  return 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;.dot-icon{margin-right:", "px;width:40px;height:40px;}&:hover{background-color:", ";}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiTypography-subtitle2{border-bottom:1px solid;border-bottom-color:", ";margin:", ";}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{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:", ";}&: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;width:40px;}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}}li.dot-list-item .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;margin:", ";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;header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;li.MuiListSubheader-root .MuiTypography-root{opacity:0;}.dot-list-item{margin-left:0;.dot-icon{margin-left:", "px;}}.toggle-nav{align-self:center;}}.go-back .dot-icon{margin:", ";}.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.dot-drawer{display:none;}.powered-by{align-items:center;.company-name,p.desc{display:none;}.d-icon{display:block;}}}}"], rootClassName$w, 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(2), theme.palette.grey[100], 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.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.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.palette.layer.n0, theme.palette.layer.n900, 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.palette.product !== 'agility' && theme.spacing(0, 1), theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0), theme.spacing(1), theme.spacing(0, 1));
 });
 
 var Brand = function Brand(_ref) {
@@ -2673,8 +2673,8 @@ var _templateObject$t;
 var rootClassName$q = 'dot-badge';
 var StyledBadge = styled(Badge)(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function () {
   return css(["&.", "{.MuiBadge-badge{background-color:", ";}}"], rootClassName$q, function (_ref) {
-    var badgeColor = _ref.badgeColor;
-    return badgeColor;
+    var $badgeColor = _ref.$badgeColor;
+    return $badgeColor;
   });
 });
 
@@ -2688,12 +2688,12 @@ var DotBadge = function DotBadge(_ref) {
       overlap = _ref.overlap;
   var rootClasses = useStylesWithRootClass(rootClassName$q, className);
   return /*#__PURE__*/React__default.createElement(StyledBadge, {
+    "$badgeColor": badgeColor,
     anchorOrigin: {
       vertical: 'top',
       horizontal: 'right'
     },
     "aria-label": ariaLabel,
-    badgeColor: badgeColor,
     classes: {
       root: rootClasses
     },
@@ -3621,9 +3621,8 @@ var DotForm = function DotForm(_ref) {
 
 var _templateObject$d;
 var rootClassName$d = 'dot-dynamic-form';
-var StyledDynamicForm = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return css(["&.", "{margin:", "px;}"], rootClassName$d, theme.spacing(2));
+var StyledDynamicForm = styled(DotForm)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function () {
+  return css(["&.", "{}"], rootClassName$d);
 });
 
 var DATA_CONTROLS = ['dot-autocomplete', 'dot-checkbox', 'dot-checkbox-group', 'dot-input-select', 'dot-input-text', 'dot-radio-group', 'dot-switch'];
@@ -3659,15 +3658,45 @@ var checkIfHiddenControl = function checkIfHiddenControl(hidden, formValues) {
     return false;
   }
 };
+var checkIfDisabledControl = function checkIfDisabledControl(disabled, formValues, isFormValid) {
+  if (!disabled) return false;
+  if (typeof disabled === 'boolean') return disabled;
+
+  try {
+    return disabled(formValues, isFormValid);
+  } catch (e) {
+    return false;
+  }
+};
+
+var getInitialValueFromControl = function getInitialValueFromControl(_ref) {
+  var controlType = _ref.controlType,
+      initialValue = _ref.initialValue;
+  // Skip non-data controls (ignore buttons and other non-relevant elements)
+  // or hidden elements
+  if (!DATA_CONTROLS.includes(controlType)) return;
+  return initialValue ? initialValue : undefined;
+};
+
 var getFormDataFromInitialValues = function getFormDataFromInitialValues(config) {
   var formValues = {};
-  config.controls.forEach(function (_ref) {
-    var controlName = _ref.controlName,
-        initialValue = _ref.initialValue,
-        controlType = _ref.controlType;
-    // Skip non-data controls (ignore buttons and other non-relevant elements)
-    // or hidden elements
+  config.controls.forEach(function (control) {
+    var controlName = control.controlName,
+        formSection = control.formSection,
+        controlType = control.controlType; // Check if there are section controls and grab initial values from those
+
+    if (formSection && formSection.sectionControls) {
+      formSection.sectionControls.forEach(function (formSectionControl) {
+        var sectionControlName = formSectionControl.controlName,
+            sectionControlType = formSectionControl.controlType;
+        if (!DATA_CONTROLS.includes(sectionControlType)) return;
+        var sectionControlInitialValue = getInitialValueFromControl(formSectionControl);
+        formValues[sectionControlName] = sectionControlInitialValue ? sectionControlInitialValue : undefined;
+      });
+    }
+
     if (!DATA_CONTROLS.includes(controlType)) return;
+    var initialValue = getInitialValueFromControl(control);
     formValues[controlName] = initialValue ? initialValue : undefined;
   });
   return formValues;
@@ -3838,7 +3867,9 @@ var DotInputText = function DotInputText(_ref) {
       _ref$multiline = _ref.multiline,
       multiline = _ref$multiline === void 0 ? false : _ref$multiline,
       name = _ref.name,
+      onBlur = _ref.onBlur,
       onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
       placeholder = _ref.placeholder,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
@@ -3935,7 +3966,9 @@ var DotInputText = function DotInputText(_ref) {
     label: label,
     multiline: multiline,
     name: name,
+    onBlur: onBlur,
     onChange: hasDebounce ? handleChange : onChange,
+    onFocus: onFocus,
     placeholder: placeholder,
     required: required,
     rows: multiline ? rows : null,
@@ -3965,7 +3998,9 @@ var DotInputSelect = function DotInputSelect(_ref) {
       inputRef = _ref.inputRef,
       label = _ref.label,
       name = _ref.name,
+      onBlur = _ref.onBlur,
       onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
       _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
       required = _ref.required,
@@ -4006,7 +4041,9 @@ var DotInputSelect = function DotInputSelect(_ref) {
     label: label,
     multiline: false,
     name: name,
+    onBlur: onBlur,
     onChange: onChange,
+    onFocus: onFocus,
     required: required,
     select: true,
     SelectProps: {
@@ -4024,10 +4061,64 @@ var DotInputSelect = function DotInputSelect(_ref) {
 };
 
 var _templateObject$c;
-var rootClassName$c = 'dot-radio';
-var StyledRadioButton = styled(Radio)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var rootClassName$c = 'dot-progress-button';
+var StyledProgressButton = styled(DotButton)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return css(["&.", "{.hidden{visibility:hidden;}.progress-circle{color:", ";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}}"], rootClassName$c, theme.palette.layer.n300);
+});
+
+var SPINNER_DEFAULT_SIZE = 20;
+var SPINNER_LARGE_SIZE = 24;
+var DotProgressButton = function DotProgressButton(_ref) {
+  var ariaLabel = _ref.ariaLabel,
+      children = _ref.children,
+      className = _ref.className,
+      dataTestId = _ref['data-testid'],
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$disableRipple = _ref.disableRipple,
+      disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
+      _ref$fullWidth = _ref.fullWidth,
+      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$isSubmit = _ref.isSubmit,
+      isSubmit = _ref$isSubmit === void 0 ? false : _ref$isSubmit,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      tooltip = _ref.tooltip,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'primary' : _ref$type;
+  var rootClasses = useStylesWithRootClass(rootClassName$c, className);
+  var isButtonDisabled = disabled || isLoading;
+  var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
+  var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
+  return /*#__PURE__*/React__default.createElement(StyledProgressButton, {
+    ariaLabel: ariaLabel,
+    className: rootClasses,
+    "data-testid": dataTestId,
+    disableRipple: disableRipple,
+    disabled: isButtonDisabled,
+    fullWidth: fullWidth,
+    isSubmit: isSubmit,
+    onClick: onClick,
+    size: size,
+    tooltip: tooltip,
+    type: type
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: titleClasses
+  }, children), isLoading && /*#__PURE__*/React__default.createElement(DotProgress, {
+    className: "progress-circle",
+    size: progressCircleSize
+  }));
+};
+
+var _templateObject$b;
+var rootClassName$b = 'dot-radio';
+var StyledRadioButton = styled(Radio)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   _ref.theme;
-  return css(["{&.", "{padding:8px;}"], rootClassName$c);
+  return css(["{&.", "{padding:8px;}"], rootClassName$b);
 });
 
 function DotRadioButton(_ref) {
@@ -4060,7 +4151,7 @@ function DotRadioButton(_ref) {
     control: /*#__PURE__*/React__default.createElement(StyledRadioButton, {
       "aria-label": ariaLabel,
       classes: {
-        root: rootClassName$c
+        root: rootClassName$b
       },
       checked: checked,
       color: "primary",
@@ -4160,9 +4251,9 @@ var DotRadioGroup = function DotRadioGroup(_ref) {
   }, renderOptions), helperText && /*#__PURE__*/React__default.createElement(FormHelperText, null, helperText)));
 };
 
-var _templateObject$b;
-var rootClassName$b = 'dot-switch';
-var StyledSwitch = styled(Switch)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$a;
+var rootClassName$a = 'dot-switch';
+var StyledSwitch = styled(Switch)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";}}"], theme.palette.grey[200], theme.palette.background["default"]);
 });
@@ -4184,7 +4275,7 @@ var DotSwitch = function DotSwitch(_ref) {
       onChange = _ref.onChange,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size;
-  var rootClasses = useStylesWithRootClass(rootClassName$b, className);
+  var rootClasses = useStylesWithRootClass(rootClassName$a, className);
 
   var handleChange = function handleChange(event) {
     onChange && onChange(event);
@@ -4213,50 +4304,74 @@ var DotSwitch = function DotSwitch(_ref) {
   });
 };
 
+var getInitialStateFromControl = function getInitialStateFromControl(_ref, liveValidation, formValues) {
+  var hidden = _ref.hidden,
+      initialValue = _ref.initialValue,
+      controlType = _ref.controlType,
+      validation = _ref.validation;
+      _ref.formSection;
+  // Skip non-data controls (ignore buttons and other non-relevant elements)
+  // or hidden elements
+  if (!DATA_CONTROLS.includes(controlType)) return;
+  var formStateItem = Object.assign({}, INITIAL_STATE_ITEM);
+  if (hidden) formStateItem.hidden = hidden;
+
+  if (initialValue) {
+    formStateItem.value = initialValue;
+
+    if (liveValidation) {
+      var isHidden = checkIfHiddenControl(hidden, formValues);
+      formStateItem.isTouched = true; // Since it is hidden field we will mark valid field to true so that is doesn't
+      // prevent form submission
+
+      if (isHidden) {
+        formStateItem.isValid = true;
+      } else {
+        var fieldValidation = getFieldValidation(initialValue, validation, formValues);
+        formStateItem.isValid = fieldValidation.isValid;
+        formStateItem.errorMessage = fieldValidation.errorMessage;
+      }
+    }
+  } // If no validation always set valid to true
+
+
+  if (!validation || DATA_CONTROLS_WITHOUT_VALIDATION.includes(controlType)) {
+    // Set always to valid for now
+    formStateItem.isValid = true;
+  }
+
+  return formStateItem;
+};
 var getInitialFormState = function getInitialFormState(config, liveValidation) {
   var formValues = getFormDataFromInitialValues(config);
   var initialState = {
     data: {},
     isValid: false
   };
-  config.controls.forEach(function (_ref) {
-    var controlName = _ref.controlName,
-        hidden = _ref.hidden,
-        initialValue = _ref.initialValue,
-        controlType = _ref.controlType,
-        validation = _ref.validation;
-    // Skip non-data controls (ignore buttons and other non-relevant elements)
-    // or hidden elements
-    if (!DATA_CONTROLS.includes(controlType)) return;
-    initialState.data[controlName] = Object.assign({}, INITIAL_STATE_ITEM);
-    if (hidden) initialState.data[controlName].hidden = hidden;
-
-    if (initialValue) {
-      initialState.data[controlName].value = initialValue;
-
-      if (liveValidation) {
-        var isHidden = checkIfHiddenControl(hidden, formValues);
-        initialState.data[controlName].isTouched = true; // Since it is hidden field we will mark valid field to true so that is doesn't
-        // prevent form submission
-
-        if (isHidden) {
-          initialState.data[controlName].isValid = true;
-        } else {
-          var fieldValidation = getFieldValidation(initialValue, validation, formValues);
-          initialState.data[controlName].isValid = fieldValidation.isValid;
-          initialState.data[controlName].errorMessage = fieldValidation.errorMessage;
-        }
-      }
-    } // If no validation always set valid to true
-
-
-    if (!validation || DATA_CONTROLS_WITHOUT_VALIDATION.includes(controlType)) {
-      // Set always to valid for now
-      initialState.data[controlName].isValid = true;
+  config.controls.forEach(function (control) {
+    var formSection = control.formSection; // Check if there are form section controls and grab initial state from those
+
+    if (formSection && formSection.sectionControls) {
+      formSection.sectionControls.forEach(function (formSectionControl) {
+        var formSectionControlName = formSectionControl.controlName;
+        var sectionFormStateItem = getInitialStateFromControl(formSectionControl, liveValidation, formValues);
+        if (!sectionFormStateItem) return;
+        initialState.data[formSectionControlName] = sectionFormStateItem;
+      });
     }
+
+    var controlName = control.controlName;
+    var formStateItem = getInitialStateFromControl(control, liveValidation, formValues);
+    if (!formStateItem) return;
+    initialState.data[controlName] = formStateItem;
   });
   return initialState;
 };
+var getControlClickHandler = function getControlClickHandler(formValues, onControlClick) {
+  return onControlClick ? function () {
+    return onControlClick(formValues);
+  } : undefined;
+};
 var buildInputTextControl = function buildInputTextControl(_ref2) {
   var controlName = _ref2.controlName,
       controlProps = _ref2.controlProps,
@@ -4401,19 +4516,48 @@ var buildSwitchControl = function buildSwitchControl(_ref8) {
 var buildButtonControl = function buildButtonControl(_ref9) {
   var controlProps = _ref9.controlProps,
       disabled = _ref9.disabled,
-      index = _ref9.index;
+      index = _ref9.index,
+      handleClick = _ref9.handleClick;
   var props = controlProps;
+  var onClick = props.onClick;
+  var handleButtonClick = onClick || handleClick ? function (e) {
+    var _a;
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    handleClick === null || handleClick === void 0 ? void 0 : handleClick();
+  } : undefined;
   return /*#__PURE__*/React__default.createElement(DotButton, Object.assign({
     key: index
   }, props, {
-    disabled: disabled
+    disabled: disabled,
+    onClick: handleButtonClick
   }), props.children);
 };
-var buildResetControl = function buildResetControl(_ref10) {
+var buildProgressButtonControl = function buildProgressButtonControl(_ref10) {
   var controlProps = _ref10.controlProps,
       disabled = _ref10.disabled,
-      handleClick = _ref10.handleClick,
-      index = _ref10.index;
+      index = _ref10.index,
+      handleClick = _ref10.handleClick;
+  var props = controlProps;
+  var onClick = props.onClick;
+  var handleButtonClick = onClick || handleClick ? function (e) {
+    var _a;
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    handleClick === null || handleClick === void 0 ? void 0 : handleClick();
+  } : undefined;
+  return /*#__PURE__*/React__default.createElement(DotProgressButton, Object.assign({
+    key: index
+  }, props, {
+    disabled: disabled,
+    onClick: handleButtonClick
+  }));
+};
+var buildResetControl = function buildResetControl(_ref11) {
+  var controlProps = _ref11.controlProps,
+      disabled = _ref11.disabled,
+      handleClick = _ref11.handleClick,
+      index = _ref11.index;
   var props = controlProps;
   return /*#__PURE__*/React__default.createElement(DotButton, Object.assign({
     key: index
@@ -4427,12 +4571,12 @@ var buildResetControl = function buildResetControl(_ref10) {
     }
   }), props.children);
 };
-var buildSubmitControl = function buildSubmitControl(_ref11) {
-  var controlProps = _ref11.controlProps,
-      disabled = _ref11.disabled,
-      formState = _ref11.formState,
-      index = _ref11.index,
-      liveValidation = _ref11.liveValidation;
+var buildSubmitControl = function buildSubmitControl(_ref12) {
+  var controlProps = _ref12.controlProps,
+      disabled = _ref12.disabled,
+      formState = _ref12.formState,
+      index = _ref12.index,
+      liveValidation = _ref12.liveValidation;
   var props = controlProps;
   var isDisabled = disabled || liveValidation && !formState.isValid;
   return /*#__PURE__*/React__default.createElement(DotButton, Object.assign({
@@ -4442,19 +4586,38 @@ var buildSubmitControl = function buildSubmitControl(_ref11) {
     isSubmit: true
   }), props.children);
 };
+var buildProgressSubmitControl = function buildProgressSubmitControl(_ref13) {
+  var controlProps = _ref13.controlProps,
+      disabled = _ref13.disabled,
+      formState = _ref13.formState,
+      index = _ref13.index,
+      liveValidation = _ref13.liveValidation;
+  var props = controlProps;
+  var isDisabled = disabled || liveValidation && !formState.isValid;
+  return /*#__PURE__*/React__default.createElement(DotProgressButton, Object.assign({
+    key: index
+  }, props, {
+    disabled: isDisabled,
+    isSubmit: true
+  }));
+};
 
 var DotDynamicForm = function DotDynamicForm(_ref) {
   var ariaLabel = _ref.ariaLabel,
       className = _ref.className,
       dataTestId = _ref['data-testid'],
       config = _ref.config,
-      disabled = _ref.disabled,
+      isFormDisabled = _ref.disabled,
       _ref$liveValidation = _ref.liveValidation,
       liveValidation = _ref$liveValidation === void 0 ? true : _ref$liveValidation,
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit;
-  var rootClasses = useStylesWithRootClass(rootClassName$d, className);
-  var initialFormState = getInitialFormState(config, liveValidation);
+  var rootClasses = useStylesWithRootClass(rootClassName$d, className); // Memoize this operation so that is doesn't get executed each time this
+  // component re-renders
+
+  var initialFormState = useMemo(function () {
+    return getInitialFormState(config, liveValidation);
+  }, [config, liveValidation, getInitialFormState]);
 
   var _useState = useState(initialFormState),
       formState = _useState[0],
@@ -4599,22 +4762,34 @@ var DotDynamicForm = function DotDynamicForm(_ref) {
     return setFormState(initialFormState);
   };
 
-  var buildFormControls = function buildFormControls() {
-    return config.controls.map(function (_ref3, index) {
+  var buildFormControls = function buildFormControls(controls, startIndex) {
+    if (startIndex === void 0) {
+      startIndex = 0;
+    }
+
+    if (!controls || !controls.length) return;
+    return controls.map(function (_ref3, index) {
       var controlName = _ref3.controlName,
           controlType = _ref3.controlType,
           _ref3$controlProps = _ref3.controlProps,
           controlProps = _ref3$controlProps === void 0 ? {} : _ref3$controlProps,
           customElement = _ref3.customElement,
+          disabled = _ref3.disabled,
           hidden = _ref3.hidden;
           _ref3.initialValue;
-      var inputControlName = controlName || "control-" + index;
+          var formSection = _ref3.formSection,
+          onControlClick = _ref3.onControlClick;
+      var elementIndex = startIndex + index;
+      var inputControlName = controlName || "control-" + elementIndex;
       var formValues = getOutputFormData(formState);
-      if (checkIfHiddenControl(hidden, formValues)) return '';
+      if (checkIfHiddenControl(hidden, formValues)) return ''; // Control can be disabled when: 1) whole form is disabled, 2.) control is disabled via config prop
+      // 3.) control is disabled via its own `disable` control prop
+
+      var isDisabled = isFormDisabled || checkIfDisabledControl(disabled, formValues, formState.isValid) || 'disabled' in controlProps && controlProps.disabled;
       var control = {
         controlProps: controlProps,
-        disabled: disabled,
-        index: index,
+        disabled: isDisabled,
+        index: elementIndex,
         liveValidation: liveValidation
       };
       var commonControlledInputArgs = Object.assign(Object.assign({}, control), {
@@ -4674,7 +4849,19 @@ var DotDynamicForm = function DotDynamicForm(_ref) {
 
         case 'dot-button':
           {
-            return buildButtonControl(Object.assign({}, control));
+            var handleClick = getControlClickHandler(formValues, onControlClick);
+            return buildButtonControl(Object.assign(Object.assign({}, control), {
+              handleClick: handleClick
+            }));
+          }
+
+        case 'dot-progress-button':
+          {
+            var _handleClick = getControlClickHandler(formValues, onControlClick);
+
+            return buildProgressButtonControl(Object.assign(Object.assign({}, control), {
+              handleClick: _handleClick
+            }));
           }
 
         case 'dot-reset':
@@ -4691,13 +4878,31 @@ var DotDynamicForm = function DotDynamicForm(_ref) {
             }));
           }
 
+        case 'dot-progress-submit':
+          {
+            return buildProgressSubmitControl(Object.assign(Object.assign({}, control), {
+              formState: formState
+            }));
+          }
+
         case 'custom-element':
           {
             return /*#__PURE__*/React__default.createElement(Fragment, {
-              key: index
+              key: elementIndex
             }, customElement);
           }
 
+        case 'dot-form-section':
+          {
+            var FormSectionComponent = formSection.FormSectionComponent,
+                sectionControls = formSection.sectionControls;
+            var sectionStartIndex = elementIndex + 1;
+            return /*#__PURE__*/React__default.createElement(FormSectionComponent, {
+              key: elementIndex,
+              sectionControls: buildFormControls(sectionControls, sectionStartIndex)
+            });
+          }
+
         default:
           {
             return '';
@@ -4707,12 +4912,11 @@ var DotDynamicForm = function DotDynamicForm(_ref) {
   };
 
   return /*#__PURE__*/React__default.createElement(StyledDynamicForm, {
-    className: rootClasses,
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React__default.createElement(DotForm, {
     ariaLabel: ariaLabel,
+    className: rootClasses,
+    "data-testid": dataTestId,
     onSubmit: handleFormSubmit
-  }, buildFormControls()));
+  }, buildFormControls(config.controls));
 };
 
 /*! *****************************************************************************
@@ -4740,9 +4944,9 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
-var _templateObject$a;
-var rootClassName$a = 'dot-inline-edit';
-var StyledInlineEdit = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$9;
+var rootClassName$9 = 'dot-inline-edit';
+var StyledInlineEdit = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return css(["&.dot-inline-edit{color:", ";&:not(.disabled):not(.editing){&:hover,&:focus{.MuiInputAdornment-root{display:flex;}}}.MuiInputAdornment-root{display:none;}.editing-actions{display:flex;justify-content:flex-end;margin-top:", "px;.dot-icon-btn{background:", ";border:1px solid ", ";color:", ";margin-left:", "px;padding:", "px;&:hover{background:", ";}}}.inline-edit{&:hover,&:focus,&:active{cursor:pointer;}}.MuiOutlinedInput-adornedEnd{padding-right:0;margin-left:0;.dot-icon{height:auto;width:auto;}}}"], theme.palette.grey[700], theme.spacing(0.5), theme.palette.grey[0], theme.palette.grey[300], theme.palette.grey[700], theme.spacing(1), theme.spacing(0.25), theme.palette.grey[50]);
 });
@@ -4776,7 +4980,7 @@ var DotInlineEdit = function DotInlineEdit(_ref) {
       size = _ref$size === void 0 ? 'small' : _ref$size,
       _ref$value = _ref.value,
       value = _ref$value === void 0 ? '' : _ref$value;
-  var rootClasses = useStylesWithRootClass(rootClassName$a, className);
+  var rootClasses = useStylesWithRootClass(rootClassName$9, className);
 
   var _useState = useState(false),
       editing = _useState[0],
@@ -4928,12 +5132,12 @@ var DotInlineEdit = function DotInlineEdit(_ref) {
   })));
 };
 
-var _templateObject$9;
-var rootClassName$9 = 'dot-navigation-rail';
-var StyledNavigationRail = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$8;
+var rootClassName$8 = 'dot-navigation-rail';
+var StyledNavigationRail = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       railItemPosition = _ref.railItemPosition;
-  return css(["&.", "{background-color:", ";border-left:1px solid ", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";width:72px;.rail-item-button{flex-basis:72px;border-radius:0;margin:0;padding:0;width:100%;white-space:normal;&.selected{background-color:", ";}&:focus-visible{background-color:", ";}.MuiButton-label{display:flex;flex-direction:column;word-break:break-word;}}}"], rootClassName$9, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.layer.n0, theme.palette.layer.n100);
+  return css(["&.", "{background-color:", ";border-left:1px solid ", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";width:72px;.rail-item-button{flex-basis:72px;border-radius:0;margin:0;padding:0;width:100%;white-space:normal;&.selected{background-color:", ";}&:focus-visible{background-color:", ";}.MuiButton-label{display:flex;flex-direction:column;word-break:break-word;}}}"], rootClassName$8, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.layer.n0, theme.palette.layer.n100);
 });
 
 var MAX_ALLOWED_ITEMS = 7;
@@ -4947,7 +5151,7 @@ var DotNavigationRail = function DotNavigationRail(_ref) {
       railItems = _ref.railItems,
       _ref$selectedIndex = _ref.selectedIndex,
       selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex;
-  var rootClasses = useStylesWithRootClass(rootClassName$9, className);
+  var rootClasses = useStylesWithRootClass(rootClassName$8, className);
 
   var _useState = useState(selectedIndex),
       selectedItemIndex = _useState[0],
@@ -4994,11 +5198,11 @@ var DotNavigationRail = function DotNavigationRail(_ref) {
   }, railItems && renderRailItems());
 };
 
-var _templateObject$8;
-var rootClassName$8 = 'dot-pill';
-var StyledPill = styled(Chip)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$7;
+var rootClassName$7 = 'dot-pill';
+var StyledPill = styled(Chip)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{background-color:", ";color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$8, function (_ref2) {
+  return css(["&.", "{background-color:", ";color:", ";&.error{background-color:", ";color:", ";}&.success{background-color:", ";color:", ";}&.warning{background-color:", ";color:", ";}&.in-progress{background-color:", ";color:", ";}"], rootClassName$7, function (_ref2) {
     var backgroundcolor = _ref2.backgroundcolor;
     return backgroundcolor ? backgroundcolor : theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200];
   }, function (_ref3) {
@@ -5018,7 +5222,7 @@ var DotPill = function DotPill(_ref) {
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$status = _ref.status,
       status = _ref$status === void 0 ? 'default' : _ref$status;
-  var rootClasses = useStylesWithRootClass(rootClassName$8, className, status);
+  var rootClasses = useStylesWithRootClass(rootClassName$7, className, status);
   return /*#__PURE__*/React__default.createElement(StyledPill, {
     "aria-label": ariaLabel,
     backgroundcolor: backgroundcolor,
@@ -5033,11 +5237,11 @@ var DotPill = function DotPill(_ref) {
   });
 };
 
-var _templateObject$7;
-var rootClassName$7 = 'dot-skeleton';
-var StyledSkeleton = styled(Skeleton)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$6;
+var rootClassName$6 = 'dot-skeleton';
+var StyledSkeleton = styled(Skeleton)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{background-color:", ";}"], rootClassName$7, theme.palette.grey[100]);
+  return css(["&.", "{background-color:", ";}"], rootClassName$6, theme.palette.grey[100]);
 });
 
 var DotSkeleton = function DotSkeleton(_ref) {
@@ -5048,7 +5252,7 @@ var DotSkeleton = function DotSkeleton(_ref) {
       height = _ref.height,
       width = _ref.width,
       variant = _ref.variant;
-  var rootClasses = useStylesWithRootClass(rootClassName$7, className); // When we upgrade to Material UI v5 this must be removed!
+  var rootClasses = useStylesWithRootClass(rootClassName$6, className); // When we upgrade to Material UI v5 this must be removed!
 
   var skeletonVariant = variant === 'circular' ? 'circle' : variant === 'rectangular' ? 'rect' : variant;
   return /*#__PURE__*/React__default.createElement(StyledSkeleton, {
@@ -5064,11 +5268,11 @@ var DotSkeleton = function DotSkeleton(_ref) {
   }, children);
 };
 
-var _templateObject$6;
-var rootClassName$6 = 'dot-snackbar';
-var StyledSnackbar = styled(Snackbar)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$5;
+var rootClassName$5 = 'dot-snackbar';
+var StyledSnackbar = styled(Snackbar)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{.MuiSvgIcon-root{color:", ";}.MuiAlert-icon{padding:11px 0px;}.MuiAlert-message{padding:13px 0px;word-break:break-all;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:", ";}.MuiAlert-root{&.MuiAlert-standardInfo{background-color:", ";}&.MuiAlert-standardWarning{color:", ";.MuiSvgIcon-root{color:", ";}}max-width:500px;min-width:344px;color:", ";z-index:", ";position:relative;margin-top:108px;background-color:", ";@media (min-width:720px){.MuiAlert-root{top:112px;position:relative;}}}"], rootClassName$6, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, function (props) {
+  return css(["&.", "{.MuiSvgIcon-root{color:", ";}.MuiAlert-icon{padding:11px 0px;}.MuiAlert-message{padding:13px 0px;word-break:break-all;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:", ";}.MuiAlert-root{&.MuiAlert-standardInfo{background-color:", ";}&.MuiAlert-standardWarning{color:", ";.MuiSvgIcon-root{color:", ";}}max-width:500px;min-width:344px;color:", ";z-index:", ";position:relative;margin-top:108px;background-color:", ";@media (min-width:720px){.MuiAlert-root{top:112px;position:relative;}}}"], rootClassName$5, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, function (props) {
     return theme.palette[props.severity].main;
   });
 });
@@ -5101,7 +5305,7 @@ var DotSnackbar = function DotSnackbar(_ref2) {
     onClose: onClose,
     action: action
   });
-  var rootClasses = useStylesWithRootClass(rootClassName$6, className);
+  var rootClasses = useStylesWithRootClass(rootClassName$5, className);
   return /*#__PURE__*/React__default.createElement(StyledSnackbar, {
     anchorOrigin: {
       vertical: 'top',
@@ -5128,10 +5332,10 @@ var DotSnackbar = function DotSnackbar(_ref2) {
   }, children)));
 };
 
-var _templateObject$5;
-var rootClassName$5 = 'dot-snackbar-container';
-var StyledSnackbarContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function () {
-  return css(["&.", "{position:absolute;top:0;width:250px;height:auto;right:0;& > div{position:relative;}}"], rootClassName$5);
+var _templateObject$4;
+var rootClassName$4 = 'dot-snackbar-container';
+var StyledSnackbarContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function () {
+  return css(["&.", "{position:absolute;top:0;width:250px;height:auto;right:0;& > div{position:relative;}}"], rootClassName$4);
 });
 
 var DotSnackbarContext = /*#__PURE__*/createContext({
@@ -5155,10 +5359,10 @@ var DotSnackbarContainer = function DotSnackbarContainer() {
   }
 
   return /*#__PURE__*/React__default.createElement(StyledSnackbarContainer, {
-    className: rootClassName$5
+    className: rootClassName$4
   }, /*#__PURE__*/React__default.createElement("div", {
-    "data-testid": rootClassName$5,
-    className: rootClassName$5
+    "data-testid": rootClassName$4,
+    className: rootClassName$4
   }, alerts.slice().reverse().map(function (alert) {
     return /*#__PURE__*/React__default.createElement(DotSnackbar, {
       key: alert.id,
@@ -5214,11 +5418,11 @@ var useDotSnackbarContext = function useDotSnackbarContext() {
   return useContext(DotSnackbarContext);
 };
 
-var _templateObject$4, _templateObject2$1;
-var rootClassName$4 = 'dot-split-button-group';
-var StyledSplitButtonGroup = styled(ButtonGroup)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$3, _templateObject2$1;
+var rootClassName$3 = 'dot-split-button-group';
+var StyledSplitButtonGroup = styled(ButtonGroup)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return 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$4, 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']);
+  return 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$3, 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']);
 });
 var StyledMenu$1 = styled(DotMenu)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  &.dot-menu {\n    z-index: ", ";\n  }\n"])), levelTop);
 
@@ -5248,7 +5452,7 @@ var DotSplitButton = function DotSplitButton(_ref) {
       tooltip = _ref.tooltip,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'primary' : _ref$type;
-  var rootClasses = useStylesWithRootClass(rootClassName$4, className, type, disabled ? 'disabled' : '');
+  var rootClasses = useStylesWithRootClass(rootClassName$3, className, type, disabled ? 'disabled' : '');
 
   var _useState = useState(false),
       open = _useState[0],
@@ -5322,11 +5526,11 @@ var DotSplitButton = function DotSplitButton(_ref) {
   }));
 };
 
-var _templateObject$3, _templateObject2, _templateObject3;
-var rootClassName$3 = 'dot-table';
-var StyledPaper = styled(Paper)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$2, _templateObject2, _templateObject3;
+var rootClassName$2 = 'dot-table';
+var StyledPaper = styled(Paper)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{background:", ";border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$3, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
+  return css(["&.", "{background:", ";border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$2, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
 });
 var StyledTableContainer = styled(TableContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref2) {
   var theme = _ref2.theme;
@@ -5639,11 +5843,11 @@ var DotHeaderCell = function DotHeaderCell(_ref2) {
   }, value);
 };
 
-var _templateObject$2;
-var rootClassName$2 = 'dot-table-pagination';
-var StyledTablePagination = styled(TablePagination)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$1;
+var rootClassName$1 = 'dot-table-pagination';
+var StyledTablePagination = styled(TablePagination)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{border-top:1px solid ", ";}"], rootClassName$2, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
+  return css(["&.", "{border-top:1px solid ", ";}"], rootClassName$1, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
 });
 
 var rowsPerPageOptions = [10, 25, 50, 100, 150, 200];
@@ -5660,7 +5864,7 @@ var DotTablePagination = function DotTablePagination(_ref) {
       page = _ref$page === void 0 ? 0 : _ref$page,
       _ref$rowsPerPage = _ref.rowsPerPage,
       rowsPerPage = _ref$rowsPerPage === void 0 ? 10 : _ref$rowsPerPage;
-  var rootClasses = useStylesWithRootClass(rootClassName$2, className);
+  var rootClasses = useStylesWithRootClass(rootClassName$1, className);
 
   var handlePageChange = function handlePageChange(event, newPage) {
     onChangePage && onChangePage(newPage);
@@ -5776,7 +5980,7 @@ var DotTable = function DotTable(_ref) {
       pageData = _useState5[0],
       setPageData = _useState5[1];
 
-  var rootClasses = useStylesWithRootClass(rootClassName$3, className, loading ? 'loading' : '');
+  var rootClasses = useStylesWithRootClass(rootClassName$2, className, loading ? 'loading' : '');
 
   var updateData = function updateData(newOrder, newOrderBy, newPage, newRowsPerPage) {
     var newData = stableSort(data, getComparator(newOrder, newOrderBy));
@@ -5881,11 +6085,11 @@ var DotTable = function DotTable(_ref) {
   }));
 };
 
-var _templateObject$1;
-var rootClassName$1 = 'dot-tabs';
-var StyledTabs = styled(Tabs)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject;
+var rootClassName = 'dot-tabs';
+var StyledTabs = styled(Tabs)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return css(["&.", "{&.MuiTabs-root{width:100%;}.dot-tab-label-container{display:flex;.dot-tab-label{padding-top:", "px;}}.MuiTab-root{color:", ";max-width:360px;min-width:0;&:hover{background-color:", ";color:", ";}&.Mui-selected{color:", ";}&.Mui-disabled{color:", ";}&.MuiTab-textColorPrimary:hover{background-color:", ";}&.MuiTab-textColorSecondary:hover{background-color:", ";}}.MuiIcon-root{display:inline;padding-right:", "px;}.MuiTabs-indicator{background-color:", ";}}"], rootClassName$1, theme.spacing(0.5), theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && theme.palette.agilityInterface.disabledText, theme.palette.product !== 'agility' && alpha(theme.palette.primary.main, 0.12), theme.palette.product !== 'agility' && alpha(theme.palette.secondary.main, 0.12), theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen);
+  return css(["&.", "{&.MuiTabs-root{width:100%;}.dot-tab-label-container{display:flex;.dot-tab-label{padding-top:", "px;}}.MuiTab-root{color:", ";max-width:360px;min-width:0;&:hover{background-color:", ";color:", ";}&.Mui-selected{color:", ";}&.Mui-disabled{color:", ";}&.MuiTab-textColorPrimary:hover{background-color:", ";}&.MuiTab-textColorSecondary:hover{background-color:", ";}}.MuiIcon-root{display:inline;padding-right:", "px;}.MuiTabs-indicator{background-color:", ";}}"], rootClassName, theme.spacing(0.5), theme.palette.product === 'agility' && theme.palette.layer.n700, theme.palette.product === 'agility' && theme.palette.agilityInterface.activeCardBg, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && agilityGreen, theme.palette.product === 'agility' && theme.palette.agilityInterface.disabledText, theme.palette.product !== 'agility' && alpha(theme.palette.primary.main, 0.12), theme.palette.product !== 'agility' && alpha(theme.palette.secondary.main, 0.12), theme.spacing(0.5), theme.palette.product === 'agility' && agilityGreen);
 });
 
 var DotTabs = function DotTabs(_ref) {
@@ -5908,7 +6112,7 @@ var DotTabs = function DotTabs(_ref) {
       value = _useState[0],
       setValue = _useState[1];
 
-  var rootClasses = useStylesWithRootClass(rootClassName$1, className); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var rootClasses = useStylesWithRootClass(rootClassName, className); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var handleChange = function handleChange(_event, val) {
     setValue(val);
@@ -5952,58 +6156,4 @@ var DotTabs = function DotTabs(_ref) {
   }, tabArray);
 };
 
-var _templateObject;
-var rootClassName = 'dot-progress-button';
-var StyledProgressButton = styled(DotButton)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return css(["&.", "{.hidden{visibility:hidden;}.progress-circle{color:", ";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}}"], rootClassName, theme.palette.layer.n300);
-});
-
-var SPINNER_DEFAULT_SIZE = 20;
-var SPINNER_LARGE_SIZE = 24;
-var DotProgressButton = function DotProgressButton(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      children = _ref.children,
-      className = _ref.className,
-      dataTestId = _ref['data-testid'],
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$disableRipple = _ref.disableRipple,
-      disableRipple = _ref$disableRipple === void 0 ? false : _ref$disableRipple,
-      _ref$fullWidth = _ref.fullWidth,
-      fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-      _ref$isSubmit = _ref.isSubmit,
-      isSubmit = _ref$isSubmit === void 0 ? false : _ref$isSubmit,
-      onClick = _ref.onClick,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      tooltip = _ref.tooltip,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'primary' : _ref$type;
-  var rootClasses = useStylesWithRootClass(rootClassName, className);
-  var isButtonDisabled = disabled || isLoading;
-  var titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
-  var progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
-  return /*#__PURE__*/React__default.createElement(StyledProgressButton, {
-    ariaLabel: ariaLabel,
-    className: rootClasses,
-    "data-testid": dataTestId,
-    disableRipple: disableRipple,
-    disabled: isButtonDisabled,
-    fullWidth: fullWidth,
-    isSubmit: isSubmit,
-    onClick: onClick,
-    size: size,
-    tooltip: tooltip,
-    type: type
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: titleClasses
-  }, children), isLoading && /*#__PURE__*/React__default.createElement(DotProgress, {
-    className: "progress-circle",
-    size: progressCircleSize
-  }));
-};
-
 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, DotDrawer, DotDynamicForm, DotEmptyState, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTablePagination, DotTabs, DotThemeProvider, DotTooltip, DotTypography, avatarColors, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotSnackbarContext };