@digital-ai/dot-components 2.8.1 → 2.8.2

package/CHANGE_LOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [2.8.2](https://www.npmjs.com/package/@digital-ai/dot-components) (05/26/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.11...2.8.2)
+
+**Fixed bugs:**
+
+- S-91947: DotStepper step onClick validation [\#1503](https://github.com/digital-ai/dot-components/pull/1503) ([ryangamble](https://github.com/ryangamble))
+- S-92200: Dynamic form autocomplete needs to handle free-form input [\#1490](https://github.com/digital-ai/dot-components/pull/1490) ([jmcnally](https://github.com/jmcnally))
+
+**Misc:**
+
+- S-91987: update drawer to have correct aria attributes [\#1506](https://github.com/digital-ai/dot-components/pull/1506) ([CWSites](https://github.com/CWSites))
+- S-91988: components missing focus visibility indicator [\#1504](https://github.com/digital-ai/dot-components/pull/1504) ([CWSites](https://github.com/CWSites))
+
+## [1.21.11](https://www.npmjs.com/package/@digital-ai/dot-components) (05/25/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.1...1.21.11)
+
+**Features:**
+
+- S-92577 `DotAutoComplete`: expose `inputValue` prop  [\#1502](https://github.com/digital-ai/dot-components/pull/1502) ([angel-git](https://github.com/angel-git))
+
 ## [2.8.1](https://www.npmjs.com/package/@digital-ai/dot-components) (05/17/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.0...2.8.1)
@@ -54,6 +76,10 @@
 
 - D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
 
+**Fixed bugs:**
+
+- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
+
 **Misc:**
 
 - Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
@@ -83,7 +109,6 @@
 **Fixed bugs:**
 
 - `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
-- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -118,7 +143,6 @@
 **Features:**
 
 - S-90954: `TimePicker` component [\#1432](https://github.com/digital-ai/dot-components/pull/1432) ([dmiletic85](https://github.com/dmiletic85))
-- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
 - S-87859: Stepper component [\#1392](https://github.com/digital-ai/dot-components/pull/1392) ([nikolinadapic](https://github.com/nikolinadapic))
 
 ## [2.5.5](https://www.npmjs.com/package/@digital-ai/dot-components) (03/31/2023)
@@ -196,13 +220,16 @@
 **Fixed bugs:**
 
 - D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
-- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
 - Issue \#1271: Updates to `AutoComplete` sizing with `dense` and `size` props [\#1395](https://github.com/digital-ai/dot-components/pull/1395) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.9](https://www.npmjs.com/package/@digital-ai/dot-components) (03/03/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.4.0...1.21.9)
 
+**Fixed bugs:**
+
+- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
+
 **Misc:**
 
 - Setup v1 to use dot-icons library [\#1399](https://github.com/digital-ai/dot-components/pull/1399) ([CWSites](https://github.com/CWSites))
@@ -212,6 +239,10 @@
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.3.2...2.4.0)
 
+**Features:**
+
+- \[Freestyle Week\] Utilize `dot-icons` package [\#1393](https://github.com/digital-ai/dot-components/pull/1393) ([CWSites](https://github.com/CWSites))
+
 **Fixed bugs:**
 
 - \#1390: Addressing some SQ review items-Issue\#1390 [\#1391](https://github.com/digital-ai/dot-components/pull/1391) ([jmcnally](https://github.com/jmcnally))
@@ -445,10 +476,6 @@
 
 - D-22241: `DotFileListItem`: fix focus states and expose `onKeyPress` [\#1254](https://github.com/digital-ai/dot-components/pull/1254) ([dmiletic85](https://github.com/dmiletic85))
 
-**Misc:**
-
-- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
-
 ## [2.0.0-rc.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.1...2.0.0-rc.1)
@@ -462,6 +489,7 @@
 
 - Release Candidate Workflow [\#1251](https://github.com/digital-ai/dot-components/pull/1251) ([CWSites](https://github.com/CWSites))
 - S-85001: add support for react 18 [\#1244](https://github.com/digital-ai/dot-components/pull/1244) ([CWSites](https://github.com/CWSites))
+- S-86694: Extract agility theme [\#1242](https://github.com/digital-ai/dot-components/pull/1242) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.1](https://www.npmjs.com/package/@digital-ai/dot-components) (08/31/2022)
 
@@ -758,6 +786,7 @@
 - S-81949: attempting branch name instead of sha [\#1028](https://github.com/digital-ai/dot-components/pull/1028) ([CWSites](https://github.com/CWSites))
 - S-81949: simplfying wait step, extend interval to 30s [\#1027](https://github.com/digital-ai/dot-components/pull/1027) ([CWSites](https://github.com/CWSites))
 - S-81949: add release candidate workflow [\#1026](https://github.com/digital-ai/dot-components/pull/1026) ([CWSites](https://github.com/CWSites))
+- S-81949: make NPM wait for other jobs to finish pre-rc [\#1019](https://github.com/digital-ai/dot-components/pull/1019) ([CWSites](https://github.com/CWSites))
 
 ## [1.9.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/17/2022)
 
@@ -918,7 +947,6 @@
 
 **Fixed bugs:**
 
-- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19321: `Breadcrumbs` - Circular dependency on `useBreadcrumbsObserver` [\#882](https://github.com/digital-ai/dot-components/pull/882) ([dmiletic85](https://github.com/dmiletic85))
 - S-79458: `Sidebar` & `List` updates [\#872](https://github.com/digital-ai/dot-components/pull/872) ([CWSites](https://github.com/CWSites))
 
@@ -953,7 +981,9 @@
 
 **Fixed bugs:**
 
+- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
+- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
 
 **Misc:**
 
@@ -968,10 +998,6 @@
 
 - S-80740: Expose DotAccordion 'expanded' and 'onChange' props [\#860](https://github.com/digital-ai/dot-components/pull/860) ([selsemore](https://github.com/selsemore))
 
-**Fixed bugs:**
-
-- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
-
 **Misc:**
 
 - S-76843: Use digital.ai bot PAT for merging master \> develop [\#862](https://github.com/digital-ai/dot-components/pull/862) ([CWSites](https://github.com/CWSites))
@@ -1014,6 +1040,7 @@
 **Features:**
 
 - S-80473: Expose onFocus and onBlur callbacks for DotInputText and DotInputSelect components [\#832](https://github.com/digital-ai/dot-components/pull/832) ([selsemore](https://github.com/selsemore))
+- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
 
@@ -1027,7 +1054,6 @@
 **Features:**
 
 - S-80369: Create `ProgressButton` component [\#822](https://github.com/digital-ai/dot-components/pull/822) ([dmiletic85](https://github.com/dmiletic85))
-- S-80268: `DotDynamicForm` improvements [\#821](https://github.com/digital-ai/dot-components/pull/821) ([dmiletic85](https://github.com/dmiletic85))
 - S-79696: change size of collapse icon button, add tooltip [\#819](https://github.com/digital-ai/dot-components/pull/819) ([CWSites](https://github.com/CWSites))
 - S-80264: Agility wrapper sandbox documentation [\#810](https://github.com/digital-ai/dot-components/pull/810) ([CWSites](https://github.com/CWSites))
 - S-79569: `DotTable` - ability to add classes to rows & cells [\#799](https://github.com/digital-ai/dot-components/pull/799) ([monapatel91](https://github.com/monapatel91))
@@ -1063,7 +1089,6 @@
 - S-80109: Expose built-in `leaveDelay`, `onClose`, `open` props on `DotTooltip` component [\#786](https://github.com/digital-ai/dot-components/pull/786) ([dmiletic85](https://github.com/dmiletic85))
 - S-76907: update ButtonToggle styles, update unit tests and add e2e tests [\#785](https://github.com/digital-ai/dot-components/pull/785) ([CWSites](https://github.com/CWSites))
 - S-80048: product wrapper demo [\#782](https://github.com/digital-ai/dot-components/pull/782) ([CWSites](https://github.com/CWSites))
-- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 
 ## [1.3.2](https://www.npmjs.com/package/@digital-ai/dot-components) (11/05/2021)
 
@@ -1076,6 +1101,7 @@
 
 **Misc:**
 
+- Patch release [\#780](https://github.com/digital-ai/dot-components/pull/780) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-79985: temporarily remove react-jsonschema-form from library [\#776](https://github.com/digital-ai/dot-components/pull/776) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - Add submitButtonProps prop to DotJsonSchemaForm component [\#775](https://github.com/digital-ai/dot-components/pull/775) ([selsemore](https://github.com/selsemore))
 - S-76893: Webpack 4 - update peer dependencies [\#768](https://github.com/digital-ai/dot-components/pull/768) ([CWSites](https://github.com/CWSites))

package/index.esm.js

@@ -2415,7 +2415,7 @@ const DotDrawerFooter = ({
 const DotDrawer = ({
   anchor: _anchor = 'right',
   ariaLabel,
-  ariaRole: _ariaRole = 'presentation',
+  ariaRole: _ariaRole = 'dialog',
   className,
   children,
   'data-testid': dataTestId,
@@ -2441,6 +2441,7 @@ const DotDrawer = ({
     }
   };
   const rootClasses = useStylesWithRootClass(rootClassName$U, className);
+  const backdropEnabled = _variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
   const headerExists = !!drawerHeaderProps;
   const bodyTestId = drawerBodyProps ? drawerBodyProps[`data-testid`] : 'drawer-body';
   return jsxs(StyledDrawer, Object.assign({
@@ -2450,6 +2451,7 @@ const DotDrawer = ({
     }),
     anchor: _anchor,
     "aria-label": ariaLabel,
+    "aria-modal": backdropEnabled ? 'true' : 'false',
     classes: {
       root: rootClasses,
       paper: 'dot-drawer-paper'
@@ -6236,6 +6238,7 @@ const DotProgressButton = ({
   isSubmit: _isSubmit = false,
   onClick,
   size: _size = 'medium',
+  startIcon,
   tooltip,
   type: _type = 'primary'
 }) => {
@@ -6253,6 +6256,7 @@ const DotProgressButton = ({
     isSubmit: _isSubmit,
     onClick: onClick,
     size: _size,
+    startIcon: startIcon,
     tooltip: tooltip,
     type: _type
   }, {
@@ -6418,7 +6422,7 @@ const StyledSwitch = styled(Switch).withConfig({
   componentId: "eign2a-0"
 })(["", ""], ({
   theme
-}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";}}"], theme.palette.grey[200], theme.palette.background.default));
+}) => css(["{&.dot-switch{span.Mui-disabled{color:", ";}.MuiSwitch-switchBase:not(.Mui-checked):not(.Mui-disabled){color:", ";&.Mui-focusVisible .MuiTouchRipple-root{color:", ";}}}"], theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]));
 
 const DotSwitch = ({
   ariaLabel,
@@ -6578,14 +6582,29 @@ const buildAutocompleteControl = ({
   index
 }) => {
   const props = controlProps;
+  const isFreeSolo = props.freesolo === undefined || props.freesolo;
   const value = getControlValue(controlName, formData) || [];
   const errorMessage = formData[controlName].errorMessage;
   const handleChangeFn = handleChange;
+  const handleFreeSoloChange = event => {
+    var _a;
+    if (event.key !== 'Enter') return;
+    const typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+    const currentValue = value;
+    if (typedValue) {
+      checkIfDuplicateItem(typedValue, currentValue);
+      currentValue.push({
+        title: typedValue
+      });
+      handleChangeFn(controlName);
+    }
+  };
   return jsx(DotAutoComplete, Object.assign({}, props, {
     disabled: disabled,
     error: !!errorMessage,
     helperText: errorMessage || props.helperText,
     onChange: handleChangeFn(controlName),
+    onInputChange: isFreeSolo ? event => handleFreeSoloChange(event) : null,
     value: value
   }), index);
 };
@@ -6798,12 +6817,11 @@ const DotDynamicForm = ({
   const updateFormState = ({
     controlName,
     newValue,
-    formConfig,
     validate: _validate = true
   }) => {
     let fieldValidation = {};
     if (_validate && _liveValidation) {
-      fieldValidation = getControlValidation(controlName, newValue, formConfig);
+      fieldValidation = getControlValidation(controlName, newValue, config);
     }
     setFormState(prevFormState => Object.assign(Object.assign({}, prevFormState), {
       data: Object.assign(Object.assign({}, prevFormState.data), {
@@ -6838,7 +6856,6 @@ const DotDynamicForm = ({
   const handleAutocompleteChange = controlName => (_event, value) => {
     updateFormState({
       controlName,
-      formConfig: config,
       newValue: value
     });
   };
@@ -6846,7 +6863,6 @@ const DotDynamicForm = ({
     const newValue = e.target.checked;
     updateFormState({
       controlName,
-      formConfig: config,
       newValue,
       validate: false
     });
@@ -6854,7 +6870,6 @@ const DotDynamicForm = ({
   const handleCheckboxGroupChange = controlName => (e, value) => {
     updateFormState({
       controlName,
-      formConfig: config,
       newValue: value
     });
   };
@@ -6873,7 +6888,6 @@ const DotDynamicForm = ({
     const newValue = e.target.value;
     updateFormState({
       controlName,
-      formConfig: config,
       newValue
     });
   };
@@ -7753,7 +7767,7 @@ const StyledStepper = styled.div.withConfig({
   componentId: "sc-1qka0yq-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";margin-bottom:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
+}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;.", "{border-left:1px solid ", ";}}&.right{flex-direction:row-reverse;.", "{border-right:1px solid ", ";}}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;height:calc(100vh - 78px);overflow-y:auto;&.center-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}.step-content-container{padding:", ";}}}"], rootClassName$i, contentClassName, theme.palette.layer.n200, contentClassName, theme.palette.layer.n200, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
 const StepContentWrapper = styled.div.withConfig({
   displayName: "Stepperstyles__StepContentWrapper",
   componentId: "sc-1qka0yq-1"
@@ -7801,6 +7815,7 @@ const DotStepper = ({
   onCancel,
   onSubmit,
   orientation: _orientation = 'vertical',
+  disableUncompletedStepNav: _disableUncompletedStepNav = false,
   steps,
   stepsPosition: _stepsPosition = 'left',
   submitButtonText: _submitButtonText = 'Complete'
@@ -7876,6 +7891,12 @@ const DotStepper = ({
   };
   const navigateToStep = id => {
     if (id !== currentStep) {
+      if (_disableUncompletedStepNav) {
+        const previousStep = steps.find(step => step.id === id - 1);
+        if (previousStep && !previousStep.completed) {
+          return;
+        }
+      }
       const stepSelected = steps.find(step => step.id === id);
       stepSelected.onClick && stepSelected.onClick();
       setActiveStep(id);
@@ -8430,7 +8451,7 @@ const StyledTableHeaderCell = styled(TableCell).withConfig({
   componentId: "nko9j-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.typography.h4.fontFamily));
+}) => css(["&.", "{&.MuiTableCell-alignCenter > span.MuiTableSortLabel-root{padding-left:26px;}> span.MuiTableSortLabel-root.Mui-focusVisible{.dot-cell-typography{color:", ";text-decoration:underline;}}.dot-cell-typography{font-family:", ";}}"], rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily));
 
 /**
  * A wrapper component around the TableCell component from @material-ui. This component should only

package/index.umd.js

@@ -2714,7 +2714,7 @@
         anchor = _b === void 0 ? 'right' : _b,
         ariaLabel = _a.ariaLabel,
         _c = _a.ariaRole,
-        ariaRole = _c === void 0 ? 'presentation' : _c,
+        ariaRole = _c === void 0 ? 'dialog' : _c,
         className = _a.className,
         children = _a.children,
         dataTestId = _a["data-testid"],
@@ -2741,6 +2741,7 @@
         }
       };
       var rootClasses = useStylesWithRootClass(rootClassName$U, className);
+      var backdropEnabled = variant === 'temporary' && !(ModalProps === null || ModalProps === void 0 ? void 0 : ModalProps.hideBackdrop);
       var headerExists = !!drawerHeaderProps;
       var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
       return jsxRuntime.jsxs(StyledDrawer, __assign({
@@ -2750,6 +2751,7 @@
         }),
         anchor: anchor,
         "aria-label": ariaLabel,
+        "aria-modal": backdropEnabled ? 'true' : 'false',
         classes: {
           root: rootClasses,
           paper: 'dot-drawer-paper'
@@ -6792,6 +6794,7 @@
         onClick = _a.onClick,
         _g = _a.size,
         size = _g === void 0 ? 'medium' : _g,
+        startIcon = _a.startIcon,
         tooltip = _a.tooltip,
         _h = _a.type,
         type = _h === void 0 ? 'primary' : _h;
@@ -6809,6 +6812,7 @@
         isSubmit: isSubmit,
         onClick: onClick,
         size: size,
+        startIcon: startIcon,
         tooltip: tooltip,
         type: type
       }, {
@@ -6981,7 +6985,7 @@
       componentId: "eign2a-0"
     })(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n        }\n      }\n  "], ["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n        }\n      }\n  "])), theme.palette.grey[200], theme.palette.background.default);
+      return styled.css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n\n          /* adjusted for a11y */\n          &.Mui-focusVisible .MuiTouchRipple-root {\n              color: ", ";\n          }\n        }\n      }\n  "], ["{\n    &.dot-switch {\n      span.Mui-disabled {\n        color: ", ";\n      }\n\n      .MuiSwitch-switchBase\n        :not(.Mui-checked)\n        :not(.Mui-disabled) {\n            color: ", ";\n\n          /* adjusted for a11y */\n          &.Mui-focusVisible .MuiTouchRipple-root {\n              color: ", ";\n          }\n        }\n      }\n  "])), theme.palette.grey[200], theme.palette.background.default, theme.palette.grey[200]);
     });
     var templateObject_1$q, templateObject_2$p;
 
@@ -7137,14 +7141,31 @@
         handleChange = _a.handleChange,
         index = _a.index;
       var props = controlProps;
+      var isFreeSolo = props.freesolo === undefined || props.freesolo;
       var value = getControlValue(controlName, formData) || [];
       var errorMessage = formData[controlName].errorMessage;
       var handleChangeFn = handleChange;
+      var handleFreeSoloChange = function handleFreeSoloChange(event) {
+        var _a;
+        if (event.key !== 'Enter') return;
+        var typedValue = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value;
+        var currentValue = value;
+        if (typedValue) {
+          checkIfDuplicateItem(typedValue, currentValue);
+          currentValue.push({
+            title: typedValue
+          });
+          handleChangeFn(controlName);
+        }
+      };
       return jsxRuntime.jsx(DotAutoComplete, __assign({}, props, {
         disabled: disabled,
         error: !!errorMessage,
         helperText: errorMessage || props.helperText,
         onChange: handleChangeFn(controlName),
+        onInputChange: isFreeSolo ? function (event) {
+          return handleFreeSoloChange(event);
+        } : null,
         value: value
       }), index);
     };
@@ -7348,12 +7369,11 @@
       var updateFormState = function updateFormState(_a) {
         var controlName = _a.controlName,
           newValue = _a.newValue,
-          formConfig = _a.formConfig,
           _b = _a.validate,
           validate = _b === void 0 ? true : _b;
         var fieldValidation = {};
         if (validate && liveValidation) {
-          fieldValidation = getControlValidation(controlName, newValue, formConfig);
+          fieldValidation = getControlValidation(controlName, newValue, config);
         }
         setFormState(function (prevFormState) {
           var _a;
@@ -7392,7 +7412,6 @@
         return function (_event, value) {
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: value
           });
         };
@@ -7402,7 +7421,6 @@
           var newValue = e.target.checked;
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: newValue,
             validate: false
           });
@@ -7412,7 +7430,6 @@
         return function (e, value) {
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: value
           });
         };
@@ -7433,7 +7450,6 @@
           var newValue = e.target.value;
           updateFormState({
             controlName: controlName,
-            formConfig: config,
             newValue: newValue
           });
         };
@@ -8429,7 +8445,7 @@
       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            margin-bottom: ", ";\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            margin-bottom: ", ";\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.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        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));
     });
     var StepContentWrapper = styled__default["default"].div.withConfig({
       displayName: "Stepperstyles__StepContentWrapper",
@@ -8485,17 +8501,19 @@
         onSubmit = _a.onSubmit,
         _e = _a.orientation,
         orientation = _e === void 0 ? 'vertical' : _e,
+        _f = _a.disableUncompletedStepNav,
+        disableUncompletedStepNav = _f === void 0 ? false : _f,
         steps = _a.steps,
-        _f = _a.stepsPosition,
-        stepsPosition = _f === void 0 ? 'left' : _f,
-        _g = _a.submitButtonText,
-        submitButtonText = _g === void 0 ? 'Complete' : _g;
-      var _h = React.useState(activeStep),
-        currentStep = _h[0],
-        setActiveStep = _h[1];
-      var _j = React.useState(false),
-        isStickyBottom = _j[0],
-        setIsStickyBottom = _j[1];
+        _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];
       var actionsRef = React.useRef(null);
       var stepperContentRef = React.useRef(null);
       var isHorizontal = orientation === 'horizontal';
@@ -8572,6 +8590,14 @@
       };
       var navigateToStep = function navigateToStep(id) {
         if (id !== currentStep) {
+          if (disableUncompletedStepNav) {
+            var previousStep = steps.find(function (step) {
+              return step.id === id - 1;
+            });
+            if (previousStep && !previousStep.completed) {
+              return;
+            }
+          }
           var stepSelected = steps.find(function (step) {
             return step.id === id;
           });
@@ -9157,7 +9183,7 @@
       componentId: "nko9j-0"
     })(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "])), rootClassName$b, theme.typography.h4.fontFamily);
+      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      > span.MuiTableSortLabel-root.Mui-focusVisible {\n        .dot-cell-typography {\n          color: ", ";\n          text-decoration: underline;\n        }\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "], ["\n    &.", " {\n      &.MuiTableCell-alignCenter > span.MuiTableSortLabel-root {\n        padding-left: 26px;\n      }\n\n      > span.MuiTableSortLabel-root.Mui-focusVisible {\n        .dot-cell-typography {\n          color: ", ";\n          text-decoration: underline;\n        }\n      }\n\n      .dot-cell-typography {\n        font-family: ", ";\n      }\n    }\n  "])), rootClassName$b, theme.palette.primary.main, theme.typography.h4.fontFamily);
     });
     var templateObject_1$b, templateObject_2$a;
 

package/lib/components/dynamic-form/models.d.ts

@@ -61,7 +61,7 @@ export interface DynamicFormValidation {
     minLength?: Length;
 }
 export interface DynamicFormStateItem {
-    errorMessage: string;
+    errorMessage: string | null;
     hidden?: ControlCondition;
     isTouched: boolean;
     isValid: boolean;
@@ -76,7 +76,6 @@ export interface DynamicFormStateData {
 }
 export interface FormStateUpdateArgs {
     controlName: string;
-    formConfig: DynamicFormConfig;
     newValue: unknown;
     validate?: boolean;
 }

package/lib/components/dynamic-form/sample.spec.data.d.ts

@@ -0,0 +1,22 @@
+import { DynamicFormState } from './models';
+export declare const sampleFormTestData: {
+    customUserType: string;
+    firstName: string;
+    isAccountActive: boolean;
+    lastName: string;
+    gender: string;
+    hasVehicle: string;
+    interests: {
+        title: string;
+    }[];
+    password: string;
+    receive: {
+        label: string;
+        value: string;
+    }[];
+    terms: boolean;
+    userType: string;
+    username: string;
+    vehicleModel: string;
+};
+export declare const getSampleFormState: () => DynamicFormState;

package/lib/components/progress-button/ProgressButton.d.ts

@@ -5,4 +5,4 @@ export interface ProgressButtonProps extends ButtonProps {
     /** Is spinner displayed */
     isLoading?: boolean;
 }
-export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, tooltip, type, }: ProgressButtonProps) => JSX.Element;
+export declare const DotProgressButton: ({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => JSX.Element;

package/lib/components/progress-button/ProgressButton.stories.d.ts

@@ -1,5 +1,5 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { ProgressButtonProps } from './ProgressButton';
-declare const _default: ComponentMeta<({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, tooltip, type, }: ProgressButtonProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ ariaLabel, children, className, "data-testid": dataTestId, disabled, disableRipple, fullWidth, isLoading, isSubmit, onClick, size, startIcon, tooltip, type, }: ProgressButtonProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<ProgressButtonProps>;

package/lib/components/stepper/Stepper.d.ts

@@ -34,6 +34,8 @@ export interface StepProps extends CommonProps {
 export interface StepperProps extends CommonProps {
     /** determines the `id` of the step which is active */
     activeStep?: number;
+    /** if set to `true`, clicking on a step is only allowed if the previous step is completed  **/
+    disableUncompletedStepNav: boolean;
     /** final content displayed after the last step is completed */
     finalContent?: ReactNode;
     /** initial content displayed before any step is active, ie when `activeStep` is 0 */
@@ -57,4 +59,4 @@ export interface StepperProps extends CommonProps {
     /** if passed, will overwrite the default "submit" button text */
     submitButtonText?: string;
 }
-export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;
+export declare const DotStepper: ({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element;

package/lib/components/stepper/Stepper.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
 import { StepperProps } from './Stepper';
-declare const _default: ComponentMeta<({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ activeStep, ariaLabel, className, "data-testid": dataTestId, finalContent, initialContent, nextButtonText, nextStepDisabled, onBack, onCancel, onSubmit, orientation, disableUncompletedStepNav, steps, stepsPosition, submitButtonText, }: StepperProps) => JSX.Element>;
 export default _default;
 export declare const Default: Story<StepperProps>;
 export declare const WithStepDescription: Story<StepperProps>;

package/lib/components/stepper/Stepper.stories.data.d.ts

@@ -23,6 +23,12 @@ export declare const demoSteps: ({
     halfWidthContent?: undefined;
     inProgress?: undefined;
 })[];
+export declare const demoStepsUncompleted: {
+    content: string;
+    completed: boolean;
+    id: number;
+    label: string;
+}[];
 export declare const withErrorStep: ({
     content: string;
     completed: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.8.1",
+  "version": "2.8.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/lib/components/dynamic-form/sample.d.ts

@@ -1,2 +0,0 @@
-import { DynamicFormState } from './models';
-export declare const getSampleFormState: () => DynamicFormState;