@digital-ai/dot-components 1.12.0 → 1.14.1

package/CHANGE_LOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## [1.14.1](https://github.com/digital-ai/dot-components/tree/1.14.1) (04/07/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.14.0...1.14.1)
+
+**Features:**
+
+- `DotSwitch`: Add more Storybook examples [\#1113](https://github.com/digital-ai/dot-components/issues/1113)
+- `Button`: Add more Storybook examples [\#1109](https://github.com/digital-ai/dot-components/issues/1109)
+
+**Fixed bugs:**
+
+- Corner radius is missing for bulk action bar [\#1117](https://github.com/digital-ai/dot-components/issues/1117)
+- Text is not centered in avatar circle [\#1115](https://github.com/digital-ai/dot-components/issues/1115)
+- Checkbox column takes up to much space in a multi-select table [\#1111](https://github.com/digital-ai/dot-components/issues/1111)
+- `DotNavigationRail` Should be able to update the selected rail [\#1104](https://github.com/digital-ai/dot-components/issues/1104)
+- D-20763: Fix bulk action toolbar upper corners [\#1118](https://github.com/digital-ai/dot-components/pull/1118) ([selsemore](https://github.com/selsemore))
+- D-20736: Fix text alignment for small DotAvatar [\#1116](https://github.com/digital-ai/dot-components/pull/1116) ([selsemore](https://github.com/selsemore))
+- D-20719:  `DotTable`: Checkbox column takes up to much space in a multi-select table [\#1112](https://github.com/digital-ai/dot-components/pull/1112) ([dmiletic85](https://github.com/dmiletic85))
+- D-20660: `DotNavigationRail`: Should be able to update the selected rail [\#1106](https://github.com/digital-ai/dot-components/pull/1106) ([dmiletic85](https://github.com/dmiletic85))
+
+## [1.14.0](https://github.com/digital-ai/dot-components/tree/1.14.0) (04/01/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.13.0...1.14.0)
+
+**Features:**
+
+- `InlineEdit` Support for different text in view/edit modes [\#1103](https://github.com/digital-ai/dot-components/issues/1103)
+- S-83748: `InlineEdit`: Support for different text in view/edit modes [\#1105](https://github.com/digital-ai/dot-components/pull/1105) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- DotFileUpload - Setting maxFile limit to 1 allows to upload more than 1 files [\#1096](https://github.com/digital-ai/dot-components/issues/1096)
+- We lost scrollbar for sidenav nested drawers [\#1061](https://github.com/digital-ai/dot-components/issues/1061)
+- D-20516: `DotFileUpload` - Setting maxFile limit to 1 allows to upload more than 1 files [\#1101](https://github.com/digital-ai/dot-components/pull/1101) ([dmiletic85](https://github.com/dmiletic85))
+- D-20334: Add scroll to nested drawer [\#1062](https://github.com/digital-ai/dot-components/pull/1062) ([s-zimm](https://github.com/s-zimm))
+
+## [1.13.0](https://github.com/digital-ai/dot-components/tree/1.13.0) (03/28/2022)
+
+[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.12.0...1.13.0)
+
+**Features:**
+
+- `DotProgress`: Add more Storybook examples [\#1097](https://github.com/digital-ai/dot-components/issues/1097)
+- S-82940: `DotProgress`: Add more Storybook examples [\#1098](https://github.com/digital-ai/dot-components/pull/1098) ([dmiletic85](https://github.com/dmiletic85))
+
+**Fixed bugs:**
+
+- `DotButtonToggle` wrong type for `value` and `onChange` props [\#1085](https://github.com/digital-ai/dot-components/issues/1085)
+- react-grid-layout library should not be peer dependency [\#1083](https://github.com/digital-ai/dot-components/issues/1083)
+- Check Box not Working with checked attribute property set--- Identified in Release Core [\#1076](https://github.com/digital-ai/dot-components/issues/1076)
+- D-20483: `react-grid-layout` library should not be peer dependency [\#1088](https://github.com/digital-ai/dot-components/pull/1088) ([dmiletic85](https://github.com/dmiletic85))
+- D-20465: `DotButtonToggle` wrong `type` for value and `onChange` [\#1087](https://github.com/digital-ai/dot-components/pull/1087) ([dmiletic85](https://github.com/dmiletic85))
+
 ## [1.12.0](https://github.com/digital-ai/dot-components/tree/1.12.0) (03/25/2022)
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.11.3...1.12.0)
@@ -504,7 +557,6 @@
 **Merged pull requests:**
 
 - S-79569: Do not set custom class for table cell if none was provided [\#808](https://github.com/digital-ai/dot-components/pull/808) ([selsemore](https://github.com/selsemore))
-- 17 nov2021 update icon [\#803](https://github.com/digital-ai/dot-components/pull/803) ([BojanKocijan](https://github.com/BojanKocijan))
 
 ## [1.3.3](https://github.com/digital-ai/dot-components/tree/1.3.3) (11/16/2021)
 
@@ -528,6 +580,7 @@
 
 **Merged pull requests:**
 
+- 17 nov2021 update icon [\#803](https://github.com/digital-ai/dot-components/pull/803) ([BojanKocijan](https://github.com/BojanKocijan))
 - Next minor release [\#796](https://github.com/digital-ai/dot-components/pull/796) ([CWSites](https://github.com/CWSites))
 - S-80103: add `yarn format:check` to PR verification and release testing [\#789](https://github.com/digital-ai/dot-components/pull/789) ([CWSites](https://github.com/CWSites))
 - S-79880: Add 'target' prop to ListItemProps [\#788](https://github.com/digital-ai/dot-components/pull/788) ([selsemore](https://github.com/selsemore))
@@ -561,6 +614,10 @@
 
 [Full Changelog](https://github.com/digital-ai/dot-components/compare/1.3.0...1.3.1)
 
+**Features:**
+
+- S-77126: react jsonschema form wrapper [\#728](https://github.com/digital-ai/dot-components/pull/728) ([TheKeithStewart](https://github.com/TheKeithStewart))
+
 **Fixed bugs:**
 
 - Lato 700 is not rendered correctly on Digital.ai Release with dot-components [\#758](https://github.com/digital-ai/dot-components/issues/758)
@@ -581,7 +638,6 @@
 **Features:**
 
 - Forms [\#594](https://github.com/digital-ai/dot-components/issues/594)
-- S-77126: react jsonschema form wrapper [\#728](https://github.com/digital-ai/dot-components/pull/728) ([TheKeithStewart](https://github.com/TheKeithStewart))
 - S-77126: Dynamic Form [\#717](https://github.com/digital-ai/dot-components/pull/717) ([dmiletic85](https://github.com/dmiletic85))
 
 **Fixed bugs:**
@@ -625,7 +681,6 @@
 - next release [\#732](https://github.com/digital-ai/dot-components/pull/732) ([CWSites](https://github.com/CWSites))
 - S-76840: update contributing guidelines and PR template [\#730](https://github.com/digital-ai/dot-components/pull/730) ([CWSites](https://github.com/CWSites))
 - Merge pull request \#719 from digital-ai/develop [\#727](https://github.com/digital-ai/dot-components/pull/727) ([CWSites](https://github.com/CWSites))
-- MINOR release [\#719](https://github.com/digital-ai/dot-components/pull/719) ([CWSites](https://github.com/CWSites))
 
 ## [1.2.0](https://github.com/digital-ai/dot-components/tree/1.2.0) (10/14/2021)
 
@@ -645,6 +700,7 @@
 
 **Merged pull requests:**
 
+- MINOR release [\#719](https://github.com/digital-ai/dot-components/pull/719) ([CWSites](https://github.com/CWSites))
 - Icons oct 13 2021 [\#718](https://github.com/digital-ai/dot-components/pull/718) ([BojanKocijan](https://github.com/BojanKocijan))
 - S-78918: add loading indicator to menu [\#716](https://github.com/digital-ai/dot-components/pull/716) ([CWSites](https://github.com/CWSites))
 - S-78834: update icon buttons to follow agility theme more closely [\#715](https://github.com/digital-ai/dot-components/pull/715) ([CWSites](https://github.com/CWSites))
@@ -671,6 +727,7 @@
 - S-79291: update nested dependencies [\#700](https://github.com/digital-ai/dot-components/pull/700) ([CWSites](https://github.com/CWSites))
 - S-78832: Agility icon & badge updates [\#698](https://github.com/digital-ai/dot-components/pull/698) ([CWSites](https://github.com/CWSites))
 - S-79251: add workflow for sonarqube scan when code merged to develop [\#697](https://github.com/digital-ai/dot-components/pull/697) ([CWSites](https://github.com/CWSites))
+- S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
 
 ## [1.1.0](https://github.com/digital-ai/dot-components/tree/1.1.0) (09/29/2021)
 
@@ -706,7 +763,6 @@
 
 **Merged pull requests:**
 
-- S-76906: table action column [\#692](https://github.com/digital-ai/dot-components/pull/692) ([monapatel91](https://github.com/monapatel91))
 - Next Release [\#689](https://github.com/digital-ai/dot-components/pull/689) ([CWSites](https://github.com/CWSites))
 
 ## [1.0.11](https://github.com/digital-ai/dot-components/tree/1.0.11) (09/16/2021)
@@ -730,7 +786,6 @@
 
 - Console warnings while running unit tests for codebase that is consuming dot-components library [\#629](https://github.com/digital-ai/dot-components/issues/629)
 - D-18424: include breadcrumb wrapper with breadcrumb component [\#675](https://github.com/digital-ai/dot-components/pull/675) ([CWSites](https://github.com/CWSites))
-- D-18536: material 4.12.3 upgrade [\#667](https://github.com/digital-ai/dot-components/pull/667) ([CWSites](https://github.com/CWSites))
 
 **Merged pull requests:**
 
@@ -752,6 +807,7 @@
 - Update Agility colors [\#656](https://github.com/digital-ai/dot-components/issues/656)
 - Add aria-label property [\#632](https://github.com/digital-ai/dot-components/issues/632)
 - D-18730: action toolbar support [\#671](https://github.com/digital-ai/dot-components/pull/671) ([CWSites](https://github.com/CWSites))
+- D-18536: material 4.12.3 upgrade [\#667](https://github.com/digital-ai/dot-components/pull/667) ([CWSites](https://github.com/CWSites))
 - D-18607: Fix rowsPerPage parsing and do not pad table with empty rows [\#655](https://github.com/digital-ai/dot-components/pull/655) ([selsemore](https://github.com/selsemore))
 
 **Merged pull requests:**

package/index.esm.js

@@ -1178,7 +1178,7 @@ const StyledAvatar = styled(Avatar).withConfig({
   componentId: "sc-13bzj2s-0"
 })(["", ""], ({
   theme
-}) => css(["&.MuiAvatar-root{display:inline-flex;background-color:", ";border:0px;&:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";outline:0;}.dot-i,.dot-typography{color:", ";}&.small{height:", "px;width:", "px;}&.medium{height:", "px;width:", "px;}&.large{height:", "px;width:", "px;}}"], ({
+}) => css(["&.MuiAvatar-root{display:inline-flex;background-color:", ";border:0px;&:focus-visible{box-shadow:0px 0px 0px 3px ", ",0px 0px 0px 5px ", ";outline:0;}.dot-i,.dot-typography{color:", ";margin-bottom:0;}&.small{height:", "px;width:", "px;}&.medium{height:", "px;width:", "px;}&.large{height:", "px;width:", "px;}}"], ({
   color
 }) => {
   return theme.palette.product === 'agility' && color === 'default' ? theme.palette.layer.n0 : color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.avatarColors['default'].backgroundColor;
@@ -2259,7 +2259,7 @@ const StyledSidebar = styled.aside.withConfig({
   componentId: "l3atb4-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
+}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:scroll;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
 
 const Brand = ({
   brandDesc
@@ -5602,6 +5602,38 @@ const getWarningAdornment = () => {
     iconId: "error-solid"
   })));
 };
+const applyBindings = (bindings, inlineEditText) => {
+  if (!bindings || !bindings.length || !inlineEditText) return;
+  let text = inlineEditText;
+  let boundNode = [];
+  bindings.forEach((binding, index) => {
+    const {
+      binding: stringBinding,
+      className = null,
+      value
+    } = binding;
+    let bindingStringIndex = text.indexOf(stringBinding);
+    let key = 0;
+
+    while (bindingStringIndex >= 0) {
+      // Since key is needed only for bindings with className,
+      // increment key value only if className value is defined
+      className && key++;
+      const nextStartingIndex = bindingStringIndex + stringBinding.length;
+      const previousText = text.substr(0, bindingStringIndex);
+      text = text.substr(nextStartingIndex, text.length);
+      bindingStringIndex = text.indexOf(stringBinding); // Add nodes to array
+
+      boundNode = [boundNode, previousText, className ? /*#__PURE__*/React__default.createElement("span", {
+        className: className,
+        key: `${index}-${key}`
+      }, value) : value];
+    }
+  }); // Add remainder of the text to the node
+
+  boundNode = [boundNode, text];
+  return boundNode;
+};
 
 /**
  * @experimental This component is still in development
@@ -5609,6 +5641,7 @@ const getWarningAdornment = () => {
 
 const DotInlineEdit = ({
   ariaLabel,
+  bindings,
   charactersLimit,
   className,
   'data-testid': dataTestId,
@@ -5642,11 +5675,14 @@ const DotInlineEdit = ({
     var _a;
 
     if (!inputValue) return;
-    const isSuccess = yield onChange(inputValue);
 
-    if (!isSuccess) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      return;
+    if (onChange) {
+      const isSuccess = yield onChange(inputValue);
+
+      if (!isSuccess) {
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        return;
+      }
     }
 
     setEditing(false);
@@ -5704,7 +5740,7 @@ const DotInlineEdit = ({
       className: "dot-view-mode-typography",
       "data-testid": dataTestId && `${dataTestId}-view-mode-typography`,
       variant: _typography
-    }, inputValue), /*#__PURE__*/React__default.createElement(DotIcon, {
+    }, bindings ? applyBindings(bindings, inputValue) : inputValue), /*#__PURE__*/React__default.createElement(DotIcon, {
       className: "dot-edit-icon",
       "data-testid": dataTestId && `${dataTestId}-edit-icon`,
       iconId: "edit"
@@ -5793,6 +5829,11 @@ const DotNavigationRail = ({
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$k, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(_selectedIndex);
+  /* Used to change selected index programmatically from the consumer component */
+
+  useEffect(() => {
+    setSelectedItemIndex(_selectedIndex);
+  }, [_selectedIndex]);
 
   const onItemSelect = index => () => {
     setSelectedItemIndex(index);
@@ -6213,7 +6254,7 @@ const StyledPaper = styled(Paper).withConfig({
   componentId: "s95z6y-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{background:", ";border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$d, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]));
+}) => css(["&.", "{background:", ";overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$d, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]));
 const StyledTableContainer = styled(TableContainer).withConfig({
   displayName: "Tablestyles__StyledTableContainer",
   componentId: "s95z6y-1"
@@ -6388,7 +6429,7 @@ const StyledTableBodyCheckboxCell = styled(TableCell).withConfig({
   componentId: "ebk3sz-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding-top:", ";padding-bottom:", ";}"], rootClassName$b, theme.spacing(0), theme.spacing(0)));
+}) => css(["&.", "{.dot-form-control-label{margin:0;}width:", "px;padding:", ";}"], rootClassName$b, theme.spacing(5), theme.spacing(0, 1)));
 
 const DotBodyCheckboxCell = ({
   ariaLabel,
@@ -6644,7 +6685,7 @@ const StyledTableHeaderCheckboxCell = styled(TableCell).withConfig({
   componentId: "ymqg8x-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{padding-top:", ";padding-bottom:", ";}"], rootClassName$7, theme.spacing(0), theme.spacing(0)));
+}) => css(["&.", "{.dot-form-control-label{margin:0;}width:", "px;padding:", ";}"], rootClassName$7, theme.spacing(5), theme.spacing(0, 1)));
 
 const DotHeaderCheckboxCell = ({
   ariaLabel,
@@ -7106,13 +7147,13 @@ const StyledFileUploadContainer = styled.div.withConfig({
   componentId: "sc-1q8bcxy-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&.file-success:not(:hover){.", "-end-icon .dot-icon i:before{color:", ";}}&.file-error:not(:hover){.MuiListItemText-secondary,.", "-end-icon .dot-icon i:before{color:", ";}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}}"], containerClassName, listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
+}) => css(["&.", "{.dot-max-files-message.dot-max-files-reached{color:", ";}.", "{border-bottom:1px solid ", ";&:hover{cursor:pointer;background:", ";}&.file-success:not(:hover){.", "-end-icon .dot-icon i:before{color:", ";}}&.file-error:not(:hover){.MuiListItemText-secondary,.", "-end-icon .dot-icon i:before{color:", ";}}.dot-typography,.file-item-text{flex-grow:2;padding-left:", "px;}.file-item-text{display:flex;flex-direction:column;.MuiTypography-body2{color:", ";}}}}"], containerClassName, theme.palette.error[500], listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main));
 const StyledFileUpload = styled.div.withConfig({
   displayName: "FileUploadstyles__StyledFileUpload",
   componentId: "sc-1q8bcxy-1"
 })(["", ""], ({
   theme
-}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", "px;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100));
+}) => css(["&.", ".", "{align-items:center;background:", ";border:2px dashed ", ";border-radius:4px;color:", ";display:flex;flex-direction:column;flex-wrap:wrap;height:240px;justify-content:center;padding:", ";margin-bottom:", "px;text-align:center;&.disabled .dot-typography{color:", ";}.dot-icon{color:", ";font-size:100px;i.dot-i{height:100px;}}}"], rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100));
 
 const DotFileListItem = ({
   ariaLabel,
@@ -7147,6 +7188,40 @@ const DotFileListItem = ({
   }));
 };
 
+const renderMaxSizeMessage = maxSizeMB => /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "body2"
+}, "File size should not exceed ", maxSizeMB, "MB.");
+const renderMaxFilesMessage = (maxFiles, maxFilesClasses) => /*#__PURE__*/React__default.createElement(DotTypography, {
+  className: maxFilesClasses,
+  variant: "body2"
+}, maxFiles, " files are the maximum number of files you can upload.");
+const renderSelectFilesButton = (isUploadDisabled, onButtonClick) => /*#__PURE__*/React__default.createElement(DotButton, {
+  disabled: isUploadDisabled,
+  onClick: onButtonClick
+}, "Select file(s)");
+const renderActiveDragArea = () => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
+  iconId: "upload-file"
+}), /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "h3"
+}, "Drop the file(s) here ..."));
+const renderDragAndDropArea = (isUploadDisabled, onSelectButtonClick) => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
+  iconId: "upload-file"
+}), /*#__PURE__*/React__default.createElement(DotTypography, {
+  variant: "h3"
+}, "Drag and drop your file(s) here ", /*#__PURE__*/React__default.createElement("br", null), " or"), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick));
+const renderDropzoneContent = ({
+  buttonOnly,
+  isDragActive,
+  isUploadDisabled,
+  open
+}) => {
+  if (buttonOnly) {
+    return renderSelectFilesButton(isUploadDisabled, open);
+  } else {
+    return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+  }
+};
+const getUploadedFilesList = (uploadedFiles, maxSize, onFileDelete) => uploadedFiles.map(file => parseListItem(onFileDelete, file, maxSize));
 const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
   const fileErrors = fileToBeParsed.errors;
   const parsedFile = fileToBeParsed.file;
@@ -7160,8 +7235,6 @@ const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
           return `File exceeds ${maxSize}MB`;
 
         case 'file-invalid-type':
-          return e.message;
-
         case 'too-many-files':
           return e.message;
 
@@ -7177,8 +7250,7 @@ const parseListItem = (deleteFile, fileToBeParsed, maxSize) => {
       deleteFile: deleteFile,
       error: hasErrors,
       errorText: errorText,
-      file: parsedFile,
-      key: CreateUUID()
+      file: parsedFile
     })
   };
 };
@@ -7195,7 +7267,12 @@ const DotFileUpload = ({
   onChange,
   onDragEnter
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$4, className, !_buttonOnly ? dropZoneClassName : '', disabled ? 'disabled' : '');
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const [hasMaxFilesError, setHasMaxFilesError] = useState(false);
+  const isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
+  const rootClasses = useStylesWithRootClass(rootClassName$4, className, !_buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+  const maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
+  const allowMultiple = maxFiles === undefined || maxFiles > 1;
   const {
     acceptedFiles,
     fileRejections,
@@ -7205,13 +7282,12 @@ const DotFileUpload = ({
     open
   } = useDropzone({
     accept,
-    disabled,
-    maxFiles,
+    disabled: isUploadDisabled,
     maxSize: maxSize * 1000000,
+    multiple: allowMultiple,
     noClick: true,
     onDragEnter
   });
-  const [uploadedFiles, setUploadedFiles] = useState([]);
   useEffect(() => {
     onChange(uploadedFiles);
   }, [uploadedFiles]);
@@ -7229,7 +7305,16 @@ const DotFileUpload = ({
   };
 
   const parseFiles = () => {
-    // map through accepted files and make them same shape as rejected files
+    const totalFilesToUpload = uploadedFiles.length + acceptedFiles.length + fileRejections.length;
+    const isMaxFilesReached = maxFiles && totalFilesToUpload > maxFiles;
+
+    if (isMaxFilesReached) {
+      setHasMaxFilesError(true);
+      return;
+    }
+
+    setHasMaxFilesError(false); // map through accepted files and make them same shape as rejected files
+
     const mappedFiles = acceptedFiles.map(value => ({
       file: value,
       errors: []
@@ -7240,45 +7325,21 @@ const DotFileUpload = ({
   useEffect(() => {
     parseFiles();
   }, [acceptedFiles, fileRejections]);
-  const maxFilesMessage = /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: "body2"
-  }, maxFiles, " files are the maximum number of files you can upload at once.");
-  const maxSizeMessage = /*#__PURE__*/React__default.createElement(DotTypography, {
-    variant: "body2"
-  }, "File size should not exceed ", maxSize, "MB.");
-
-  const dropzoneContent = () => {
-    if (_buttonOnly) {
-      return /*#__PURE__*/React__default.createElement(DotButton, {
-        disabled: disabled,
-        onClick: open
-      }, "Select file(s)");
-    } else {
-      return isDragActive ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
-        iconId: "upload-file"
-      }), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "Drop the file(s) here ...")) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotIcon, {
-        iconId: "upload-file"
-      }), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "Drag and drop your file(s) here"), /*#__PURE__*/React__default.createElement(DotTypography, {
-        variant: "h3"
-      }, "or"), /*#__PURE__*/React__default.createElement(DotButton, {
-        disabled: disabled,
-        onClick: open
-      }, "Select file(s)"));
-    }
-  };
-
+  const uploadedFilesList = getUploadedFilesList(uploadedFiles, maxSize, deleteFile);
   return /*#__PURE__*/React__default.createElement(StyledFileUploadContainer, {
     className: containerClassName
   }, /*#__PURE__*/React__default.createElement(StyledFileUpload, Object.assign({}, getRootProps(), {
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId
-  }), /*#__PURE__*/React__default.createElement("input", Object.assign({}, getInputProps())), dropzoneContent()), maxSize && maxSizeMessage, maxFiles && maxFilesMessage, /*#__PURE__*/React__default.createElement(DotList, {
-    items: uploadedFiles.map(file => parseListItem(deleteFile, file, maxSize)),
+  }), /*#__PURE__*/React__default.createElement("input", Object.assign({}, getInputProps())), renderDropzoneContent({
+    buttonOnly: _buttonOnly,
+    isDragActive,
+    isUploadDisabled,
+    open
+  })), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), /*#__PURE__*/React__default.createElement(DotList, {
+    "data-testid": dataTestId && `${dataTestId}-file-list`,
+    items: uploadedFilesList,
     width: "100%"
   }));
 };

package/index.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('styled-components'), require('@material-ui/lab'), require('@material-ui/core/styles'), require('react-dropzone'), require('react-grid-layout')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', 'styled-components', '@material-ui/lab', '@material-ui/core/styles', 'react-dropzone', 'react-grid-layout'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DotComponents = {}, global.React, global.MuiCore, global.styled, global.MuiLab, global.styles, global.reactDropzone, global.GridLayout));
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.DotComponents = {}, global.React, global.MuiCore, global.styled, global.MuiLab, global.MuiStyles, global.ReactDropzone, global.GridLayout));
 })(this, (function (exports, React, core, styled, lab, styles, reactDropzone, GridLayout) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -1305,7 +1305,7 @@
       componentId: "sc-13bzj2s-0"
     })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.MuiAvatar-root {\n      display: inline-flex;\n      background-color: ", ";\n      border: 0px;\n      &:focus-visible {\n        box-shadow: 0px 0px 0px 3px ", ",\n          0px 0px 0px 5px ", ";\n        outline: 0;\n      }\n\n      .dot-i,\n      .dot-typography {\n        color: ", ";\n      }\n\n      &.small {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.medium {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.large {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "], ["\n    &.MuiAvatar-root {\n      display: inline-flex;\n      background-color: ", ";\n      border: 0px;\n      &:focus-visible {\n        box-shadow: 0px 0px 0px 3px ", ",\n          0px 0px 0px 5px ", ";\n        outline: 0;\n      }\n\n      .dot-i,\n      .dot-typography {\n        color: ", ";\n      }\n\n      &.small {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.medium {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.large {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "])), function (_a) {
+      return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    &.MuiAvatar-root {\n      display: inline-flex;\n      background-color: ", ";\n      border: 0px;\n      &:focus-visible {\n        box-shadow: 0px 0px 0px 3px ", ",\n          0px 0px 0px 5px ", ";\n        outline: 0;\n      }\n\n      .dot-i,\n      .dot-typography {\n        color: ", ";\n        margin-bottom: 0;\n      }\n\n      &.small {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.medium {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.large {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "], ["\n    &.MuiAvatar-root {\n      display: inline-flex;\n      background-color: ", ";\n      border: 0px;\n      &:focus-visible {\n        box-shadow: 0px 0px 0px 3px ", ",\n          0px 0px 0px 5px ", ";\n        outline: 0;\n      }\n\n      .dot-i,\n      .dot-typography {\n        color: ", ";\n        margin-bottom: 0;\n      }\n\n      &.small {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.medium {\n        height: ", "px;\n        width: ", "px;\n      }\n\n      &.large {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "])), function (_a) {
         var color = _a.color;
         return theme.palette.product === 'agility' && color === 'default' ? theme.palette.layer.n0 : color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.avatarColors['default'].backgroundColor;
       }, theme.palette.layer.n0, theme.palette.layer.n900, function (_a) {
@@ -2460,7 +2460,7 @@
       componentId: "l3atb4-0"
     })(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "])), rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
+      return styled.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            overflow-y: scroll;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      align-items: stretch;\n      background: ", ";\n      border-width: 0 1px;\n      border-style: solid;\n      border-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      display: flex;\n      height: 100%;\n      flex-direction: column;\n      justify-content: space-between;\n      letter-spacing: 0.01em;\n      padding: ", ";\n      -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n      transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n      header {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n        height: 40px;\n        flex-shrink: 0;\n        overflow: hidden;\n        margin-bottom: ", ";\n        padding: ", ";\n        white-space: nowrap;\n\n        &.app-logo {\n          box-sizing: border-box;\n\n          .dot-app-logo {\n            svg,\n            img {\n              max-width: 100%;\n            }\n          }\n        }\n\n        .dot-avatar {\n          margin-right: ", "px;\n        }\n      }\n\n      .go-back {\n        align-items: center;\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        display: flex;\n\n        .go-back-button {\n          margin: ", ";\n          background-color: ", ";\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus-visible {\n            box-shadow: 0 0 0 2px ", ",\n              0 0 0 4px ", ";\n          }\n        }\n      }\n\n      hr.MuiDivider-root {\n        background-color: ", ";\n        margin: ", ";\n      }\n\n      .MuiListSubheader-root {\n        border-bottom: 1px solid;\n        border-bottom-color: ", ";\n        margin: ", ";\n\n        .dot-typography {\n          margin: 0;\n        }\n      }\n\n      ul.side-nav {\n        background: transparent;\n        flex-grow: 2;\n        overflow-x: hidden;\n        overflow-y: auto;\n        padding: 0;\n        width: auto;\n\n        .dot-nested-list {\n          background: transparent;\n        }\n\n        .", " {\n          .dot-drawer-paper {\n            padding: ", "px;\n            overflow-y: scroll;\n            border-right: 1px solid\n              ", ";\n            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n            padding-top: ", ";\n          }\n\n          .MuiTypography-root.MuiTypography-subtitle2 {\n            border: ", ";\n            color: ", ";\n            font-size: ", ";\n            line-height: 40px;\n            margin: ", ";\n            padding: ", ";\n          }\n\n          .", " {\n            margin: 0;\n            padding-left: ", "px;\n          }\n        }\n\n        .dot-list-item {\n          height: ", ";\n          padding: 0;\n          margin-bottom: ", ";\n\n          &.MuiListItem-root.Mui-selected,\n          &.MuiListItem-root.Mui-selected:hover,\n          &:hover {\n            background-color: ", ";\n          }\n\n          &.Mui-focusVisible {\n            box-shadow: inset 0 0 0 2px ", ";\n            border: 2px solid ", ";\n          }\n\n          &:hover,\n          &:active,\n          &:focus {\n            .dot-typography,\n            .dot-icon i.dot-i:before {\n              color: ", ";\n            }\n          }\n\n          &.open {\n            background-color: ", ";\n            border: ", ";\n            border-radius: ", ";\n\n            &:hover {\n              background-color: ", ";\n            }\n          }\n\n          .MuiTouchRipple-root {\n            display: ", ";\n          }\n\n          .dot-list-item-link .dot-icon {\n            margin-right: ", "px;\n          }\n\n          .dot-icon {\n            border-radius: 50%;\n            height: 40px;\n            margin: ", ";\n            width: 40px;\n          }\n\n          .dot-typography {\n            white-space: nowrap;\n          }\n        }\n      }\n\n      .toggle-nav {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        padding: ", "px;\n        text-align: right;\n\n        .dot-icon {\n          transform: rotate(0deg);\n          -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n          transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n        }\n      }\n\n      .powered-by {\n        border-top: 1px solid;\n        border-top-color: ", ";\n        color: ", ";\n        display: flex;\n        flex-direction: column;\n        flex-shrink: 0;\n        font-size: 12px;\n        overflow: hidden;\n        padding: ", "px;\n\n        p.desc {\n          white-space: nowrap;\n        }\n\n        .company-name {\n          margin-top: ", "px;\n        }\n\n        .d-icon {\n          display: none;\n        }\n      }\n\n      &.collapsed {\n        overflow: hidden;\n        padding: ", ";\n        width: 58px;\n        -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n        transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n        li.MuiListSubheader-root .dot-typography,\n        .go-back .MuiTypography-root,\n        .MuiListItem-divider .dot-list-item-link,\n        .child,\n        .powered-by .company-name,\n        .powered-by p.desc {\n          display: none;\n        }\n\n        .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n        .powered-by .d-icon {\n          display: block;\n        }\n\n        header .dot-app-logo {\n          text-align: center;\n        }\n\n        ul.side-nav {\n          width: 56px;\n          .dot-list-item {\n            margin-left: 0;\n          }\n\n          .toggle-nav {\n            align-self: center;\n          }\n        }\n\n        .powered-by {\n          align-items: center;\n        }\n      }\n    }\n  "])), rootClassName$I, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
     });
     var templateObject_1$L, templateObject_2$J;
 
@@ -6000,6 +6000,37 @@
         iconId: "error-solid"
       })));
     };
+    var applyBindings = function applyBindings(bindings, inlineEditText) {
+      if (!bindings || !bindings.length || !inlineEditText) return;
+      var text = inlineEditText;
+      var boundNode = [];
+      bindings.forEach(function (binding, index) {
+        var stringBinding = binding.binding,
+            _a = binding.className,
+            className = _a === void 0 ? null : _a,
+            value = binding.value;
+        var bindingStringIndex = text.indexOf(stringBinding);
+        var key = 0;
+
+        while (bindingStringIndex >= 0) {
+          // Since key is needed only for bindings with className,
+          // increment key value only if className value is defined
+          className && key++;
+          var nextStartingIndex = bindingStringIndex + stringBinding.length;
+          var previousText = text.substr(0, bindingStringIndex);
+          text = text.substr(nextStartingIndex, text.length);
+          bindingStringIndex = text.indexOf(stringBinding); // Add nodes to array
+
+          boundNode = [boundNode, previousText, className ? /*#__PURE__*/React__default["default"].createElement("span", {
+            className: className,
+            key: index + "-" + key
+          }, value) : value];
+        }
+      }); // Add remainder of the text to the node
+
+      boundNode = [boundNode, text];
+      return boundNode;
+    };
 
     /**
      * @experimental This component is still in development
@@ -6007,6 +6038,7 @@
 
     var DotInlineEdit = function DotInlineEdit(_a) {
       var ariaLabel = _a.ariaLabel,
+          bindings = _a.bindings,
           charactersLimit = _a.charactersLimit,
           className = _a.className,
           dataTestId = _a["data-testid"],
@@ -6060,6 +6092,9 @@
                 if (!inputValue) return [2
                 /*return*/
                 ];
+                if (!onChange) return [3
+                /*break*/
+                , 2];
                 return [4
                 /*yield*/
                 , onChange(inputValue)];
@@ -6074,6 +6109,9 @@
                   ];
                 }
 
+                _b.label = 2;
+
+              case 2:
                 setEditing(false);
 
                 if (onEditStateChange) {
@@ -6198,7 +6236,7 @@
           className: "dot-view-mode-typography",
           "data-testid": dataTestId && dataTestId + "-view-mode-typography",
           variant: typography
-        }, inputValue), /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        }, bindings ? applyBindings(bindings, inputValue) : inputValue), /*#__PURE__*/React__default["default"].createElement(DotIcon, {
           className: "dot-edit-icon",
           "data-testid": dataTestId && dataTestId + "-edit-icon",
           iconId: "edit"
@@ -6297,6 +6335,12 @@
       var _d = React.useState(selectedIndex),
           selectedItemIndex = _d[0],
           setSelectedItemIndex = _d[1];
+      /* Used to change selected index programmatically from the consumer component */
+
+
+      React.useEffect(function () {
+        setSelectedItemIndex(selectedIndex);
+      }, [selectedIndex]);
 
       var onItemSelect = function onItemSelect(index) {
         return function () {
@@ -6760,7 +6804,7 @@
       componentId: "s95z6y-0"
     })(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    &.", " {\n      background: ", ";\n      border: 1px solid\n        ", ";\n\n      // while loading, change opacity, disable pointer events\n      // and hide pagination.\n      &.loading {\n        opacity: 0.4;\n        pointer-events: none;\n        .dot-table-pagination {\n          display: none;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      background: ", ";\n      border: 1px solid\n        ", ";\n\n      // while loading, change opacity, disable pointer events\n      // and hide pagination.\n      &.loading {\n        opacity: 0.4;\n        pointer-events: none;\n        .dot-table-pagination {\n          display: none;\n        }\n      }\n    }\n  "])), rootClassName$d, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
+      return styled.css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    &.", " {\n      background: ", ";\n      overflow: hidden;\n      border: 1px solid\n        ", ";\n\n      // while loading, change opacity, disable pointer events\n      // and hide pagination.\n      &.loading {\n        opacity: 0.4;\n        pointer-events: none;\n        .dot-table-pagination {\n          display: none;\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      background: ", ";\n      overflow: hidden;\n      border: 1px solid\n        ", ";\n\n      // while loading, change opacity, disable pointer events\n      // and hide pagination.\n      &.loading {\n        opacity: 0.4;\n        pointer-events: none;\n        .dot-table-pagination {\n          display: none;\n        }\n      }\n    }\n  "])), rootClassName$d, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.layer.n100 : theme.palette.grey[200]);
     });
     var StyledTableContainer = styled__default["default"](core.TableContainer).withConfig({
       displayName: "Tablestyles__StyledTableContainer",
@@ -6949,7 +6993,7 @@
       componentId: "ebk3sz-0"
     })(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      /* Override only top/bottom, but preserve left/right padding */\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "], ["\n    &.", " {\n      /* Override only top/bottom, but preserve left/right padding */\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "])), rootClassName$b, theme.spacing(0), theme.spacing(0));
+      return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    &.", " {\n      .dot-form-control-label {\n        margin: 0;\n      }\n      width: ", "px;\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      .dot-form-control-label {\n        margin: 0;\n      }\n      width: ", "px;\n      padding: ", ";\n    }\n  "])), rootClassName$b, theme.spacing(5), theme.spacing(0, 1));
     });
     var templateObject_1$b, templateObject_2$b;
 
@@ -7226,7 +7270,7 @@
       componentId: "ymqg8x-0"
     })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    &.", " {\n      /* Override only top/bottom, but preserve left/right padding */\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "], ["\n    &.", " {\n      /* Override only top/bottom, but preserve left/right padding */\n      padding-top: ", ";\n      padding-bottom: ", ";\n    }\n  "])), rootClassName$7, theme.spacing(0), theme.spacing(0));
+      return styled.css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n    &.", " {\n      .dot-form-control-label {\n        margin: 0;\n      }\n      width: ", "px;\n      padding: ", ";\n    }\n  "], ["\n    &.", " {\n      .dot-form-control-label {\n        margin: 0;\n      }\n      width: ", "px;\n      padding: ", ";\n    }\n  "])), rootClassName$7, theme.spacing(5), theme.spacing(0, 1));
     });
     var templateObject_1$7, templateObject_2$7;
 
@@ -7741,14 +7785,14 @@
       componentId: "sc-1q8bcxy-0"
     })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      .", " {\n        border-bottom: 1px solid ", ";\n        &:hover {\n          cursor: pointer;\n          background: ", ";\n        }\n\n        &.file-success:not(:hover) {\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        &.file-error:not(:hover) {\n          .MuiListItemText-secondary,\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        .dot-typography,\n        .file-item-text {\n          flex-grow: 2;\n          padding-left: ", "px;\n        }\n\n        .file-item-text {\n          display: flex;\n          flex-direction: column;\n\n          .MuiTypography-body2 {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .", " {\n        border-bottom: 1px solid ", ";\n        &:hover {\n          cursor: pointer;\n          background: ", ";\n        }\n\n        &.file-success:not(:hover) {\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        &.file-error:not(:hover) {\n          .MuiListItemText-secondary,\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        .dot-typography,\n        .file-item-text {\n          flex-grow: 2;\n          padding-left: ", "px;\n        }\n\n        .file-item-text {\n          display: flex;\n          flex-direction: column;\n\n          .MuiTypography-body2 {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "])), containerClassName, listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
+      return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n    &.", " {\n      .dot-max-files-message.dot-max-files-reached {\n        color: ", ";\n      }\n\n      .", " {\n        border-bottom: 1px solid ", ";\n        &:hover {\n          cursor: pointer;\n          background: ", ";\n        }\n\n        &.file-success:not(:hover) {\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        &.file-error:not(:hover) {\n          .MuiListItemText-secondary,\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        .dot-typography,\n        .file-item-text {\n          flex-grow: 2;\n          padding-left: ", "px;\n        }\n\n        .file-item-text {\n          display: flex;\n          flex-direction: column;\n\n          .MuiTypography-body2 {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      .dot-max-files-message.dot-max-files-reached {\n        color: ", ";\n      }\n\n      .", " {\n        border-bottom: 1px solid ", ";\n        &:hover {\n          cursor: pointer;\n          background: ", ";\n        }\n\n        &.file-success:not(:hover) {\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        &.file-error:not(:hover) {\n          .MuiListItemText-secondary,\n          .", "-end-icon .dot-icon i:before {\n            color: ", ";\n          }\n        }\n\n        .dot-typography,\n        .file-item-text {\n          flex-grow: 2;\n          padding-left: ", "px;\n        }\n\n        .file-item-text {\n          display: flex;\n          flex-direction: column;\n\n          .MuiTypography-body2 {\n            color: ", ";\n          }\n        }\n      }\n    }\n  "])), containerClassName, theme.palette.error[500], listItemRootClass, theme.palette.layer.n100, theme.palette.layer.n50, listItemRootClass, theme.palette.secondary.main, listItemRootClass, theme.palette.error.main, theme.spacing(1), theme.palette.error.main);
     });
     var StyledFileUpload = styled__default["default"].div.withConfig({
       displayName: "FileUploadstyles__StyledFileUpload",
       componentId: "sc-1q8bcxy-1"
     })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "], ["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "])), rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100);
+      return styled.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n      text-align: center;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "], ["\n    &.", ".", " {\n      align-items: center;\n      background: ", ";\n      border: 2px dashed ", ";\n      border-radius: 4px;\n      color: ", ";\n      display: flex;\n      flex-direction: column;\n      flex-wrap: wrap;\n      height: 240px;\n      justify-content: center;\n      padding: ", ";\n      margin-bottom: ", "px;\n      text-align: center;\n\n      &.disabled .dot-typography {\n        color: ", ";\n      }\n\n      .dot-icon {\n        color: ", ";\n        font-size: 100px;\n\n        i.dot-i {\n          height: 100px;\n        }\n      }\n    }\n  "])), rootClassName$4, dropZoneClassName, theme.palette.layer.n50, theme.palette.layer.n300, theme.palette.layer.n500, theme.spacing(3, 0), theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100);
     });
     var templateObject_1$4, templateObject_2$4, templateObject_3, templateObject_4;
 
@@ -7795,6 +7839,54 @@
       }));
     };
 
+    var renderMaxSizeMessage = function renderMaxSizeMessage(maxSizeMB) {
+      return /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "body2"
+      }, "File size should not exceed ", maxSizeMB, "MB.");
+    };
+    var renderMaxFilesMessage = function renderMaxFilesMessage(maxFiles, maxFilesClasses) {
+      return /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        className: maxFilesClasses,
+        variant: "body2"
+      }, maxFiles, " files are the maximum number of files you can upload.");
+    };
+    var renderSelectFilesButton = function renderSelectFilesButton(isUploadDisabled, onButtonClick) {
+      return /*#__PURE__*/React__default["default"].createElement(DotButton, {
+        disabled: isUploadDisabled,
+        onClick: onButtonClick
+      }, "Select file(s)");
+    };
+    var renderActiveDragArea = function renderActiveDragArea() {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        iconId: "upload-file"
+      }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "h3"
+      }, "Drop the file(s) here ..."));
+    };
+    var renderDragAndDropArea = function renderDragAndDropArea(isUploadDisabled, onSelectButtonClick) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
+        iconId: "upload-file"
+      }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
+        variant: "h3"
+      }, "Drag and drop your file(s) here ", /*#__PURE__*/React__default["default"].createElement("br", null), " or"), renderSelectFilesButton(isUploadDisabled, onSelectButtonClick));
+    };
+    var renderDropzoneContent = function renderDropzoneContent(_a) {
+      var buttonOnly = _a.buttonOnly,
+          isDragActive = _a.isDragActive,
+          isUploadDisabled = _a.isUploadDisabled,
+          open = _a.open;
+
+      if (buttonOnly) {
+        return renderSelectFilesButton(isUploadDisabled, open);
+      } else {
+        return isDragActive ? renderActiveDragArea() : renderDragAndDropArea(isUploadDisabled, open);
+      }
+    };
+    var getUploadedFilesList = function getUploadedFilesList(uploadedFiles, maxSize, onFileDelete) {
+      return uploadedFiles.map(function (file) {
+        return parseListItem(onFileDelete, file, maxSize);
+      });
+    };
     var parseListItem = function parseListItem(deleteFile, fileToBeParsed, maxSize) {
       var fileErrors = fileToBeParsed.errors;
       var parsedFile = fileToBeParsed.file;
@@ -7808,8 +7900,6 @@
               return "File exceeds " + maxSize + "MB";
 
             case 'file-invalid-type':
-              return e.message;
-
             case 'too-many-files':
               return e.message;
 
@@ -7825,8 +7915,7 @@
           deleteFile: deleteFile,
           error: hasErrors,
           errorText: errorText,
-          file: parsedFile,
-          key: CreateUUID()
+          file: parsedFile
         })
       };
     };
@@ -7843,26 +7932,34 @@
           maxSize = _a.maxSize,
           onChange = _a.onChange,
           onDragEnter = _a.onDragEnter;
-      var rootClasses = useStylesWithRootClass(rootClassName$4, className, !buttonOnly ? dropZoneClassName : '', disabled ? 'disabled' : '');
 
-      var _c = reactDropzone.useDropzone({
+      var _c = React.useState([]),
+          uploadedFiles = _c[0],
+          setUploadedFiles = _c[1];
+
+      var _d = React.useState(false),
+          hasMaxFilesError = _d[0],
+          setHasMaxFilesError = _d[1];
+
+      var isUploadDisabled = disabled || maxFiles && uploadedFiles.length >= maxFiles;
+      var rootClasses = useStylesWithRootClass(rootClassName$4, className, !buttonOnly ? dropZoneClassName : '', isUploadDisabled ? 'disabled' : '');
+      var maxFilesClasses = useStylesWithRootClass('dot-max-files-message', hasMaxFilesError ? 'dot-max-files-reached' : '');
+      var allowMultiple = maxFiles === undefined || maxFiles > 1;
+
+      var _e = reactDropzone.useDropzone({
         accept: accept,
-        disabled: disabled,
-        maxFiles: maxFiles,
+        disabled: isUploadDisabled,
         maxSize: maxSize * 1000000,
+        multiple: allowMultiple,
         noClick: true,
         onDragEnter: onDragEnter
       }),
-          acceptedFiles = _c.acceptedFiles,
-          fileRejections = _c.fileRejections,
-          getRootProps = _c.getRootProps,
-          getInputProps = _c.getInputProps,
-          isDragActive = _c.isDragActive,
-          open = _c.open;
-
-      var _d = React.useState([]),
-          uploadedFiles = _d[0],
-          setUploadedFiles = _d[1];
+          acceptedFiles = _e.acceptedFiles,
+          fileRejections = _e.fileRejections,
+          getRootProps = _e.getRootProps,
+          getInputProps = _e.getInputProps,
+          isDragActive = _e.isDragActive,
+          open = _e.open;
 
       React.useEffect(function () {
         onChange(uploadedFiles);
@@ -7881,7 +7978,16 @@
       };
 
       var parseFiles = function parseFiles() {
-        // map through accepted files and make them same shape as rejected files
+        var totalFilesToUpload = uploadedFiles.length + acceptedFiles.length + fileRejections.length;
+        var isMaxFilesReached = maxFiles && totalFilesToUpload > maxFiles;
+
+        if (isMaxFilesReached) {
+          setHasMaxFilesError(true);
+          return;
+        }
+
+        setHasMaxFilesError(false); // map through accepted files and make them same shape as rejected files
+
         var mappedFiles = acceptedFiles.map(function (value) {
           return {
             file: value,
@@ -7894,47 +8000,21 @@
       React.useEffect(function () {
         parseFiles();
       }, [acceptedFiles, fileRejections]);
-      var maxFilesMessage = /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: "body2"
-      }, maxFiles, " files are the maximum number of files you can upload at once.");
-      var maxSizeMessage = /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-        variant: "body2"
-      }, "File size should not exceed ", maxSize, "MB.");
-
-      var dropzoneContent = function dropzoneContent() {
-        if (buttonOnly) {
-          return /*#__PURE__*/React__default["default"].createElement(DotButton, {
-            disabled: disabled,
-            onClick: open
-          }, "Select file(s)");
-        } else {
-          return isDragActive ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-            iconId: "upload-file"
-          }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "Drop the file(s) here ...")) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
-            iconId: "upload-file"
-          }), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "Drag and drop your file(s) here"), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
-            variant: "h3"
-          }, "or"), /*#__PURE__*/React__default["default"].createElement(DotButton, {
-            disabled: disabled,
-            onClick: open
-          }, "Select file(s)"));
-        }
-      };
-
+      var uploadedFilesList = getUploadedFilesList(uploadedFiles, maxSize, deleteFile);
       return /*#__PURE__*/React__default["default"].createElement(StyledFileUploadContainer, {
         className: containerClassName
       }, /*#__PURE__*/React__default["default"].createElement(StyledFileUpload, __assign({}, getRootProps(), {
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId
-      }), /*#__PURE__*/React__default["default"].createElement("input", __assign({}, getInputProps())), dropzoneContent()), maxSize && maxSizeMessage, maxFiles && maxFilesMessage, /*#__PURE__*/React__default["default"].createElement(DotList, {
-        items: uploadedFiles.map(function (file) {
-          return parseListItem(deleteFile, file, maxSize);
-        }),
+      }), /*#__PURE__*/React__default["default"].createElement("input", __assign({}, getInputProps())), renderDropzoneContent({
+        buttonOnly: buttonOnly,
+        isDragActive: isDragActive,
+        isUploadDisabled: isUploadDisabled,
+        open: open
+      })), maxSize && renderMaxSizeMessage(maxSize), maxFiles && renderMaxFilesMessage(maxFiles, maxFilesClasses), /*#__PURE__*/React__default["default"].createElement(DotList, {
+        "data-testid": dataTestId && dataTestId + "-file-list",
+        items: uploadedFilesList,
         width: "100%"
       }));
     };

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

@@ -0,0 +1,4 @@
+export type { ButtonProps } from './Button';
+export type { IconButtonProps, IconButtonColor, IconButtonSize, } from './IconButton';
+export { DotButton } from './Button';
+export { DotIconButton } from './IconButton';

package/lib/components/button-toggle/ButtonToggle.d.ts

@@ -1,15 +1,6 @@
 import { MouseEvent } from 'react';
 import { CommonProps } from '../CommonProps';
-export declare type ButtonToggleSize = 'small' | 'medium' | 'large';
-export declare type ButtonToggleOrientation = 'horizontal' | 'vertical';
-export declare type ButtonToggleValue = string | number | boolean;
-export interface ButtonToggleOption extends CommonProps {
-    ariaLabel: string;
-    disabled?: boolean;
-    iconId?: string;
-    text?: string;
-    value: ButtonToggleValue;
-}
+import { ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSize, ButtonToggleValue } from './utils/models';
 export interface ButtonToggleProps extends CommonProps {
     /** button props for each toggle button options*/
     buttonOptions: ButtonToggleOption[];

package/lib/components/button-toggle/index.d.ts

@@ -1 +1,3 @@
-export * from './ButtonToggle';
+export type { ButtonToggleOrientation, ButtonToggleOption, ButtonToggleSingleValue, ButtonToggleSize, ButtonToggleValue, } from './utils/models';
+export type { ButtonToggleProps } from './ButtonToggle';
+export { DotButtonToggle } from './ButtonToggle';

package/lib/components/button-toggle/utils/models.d.ts

@@ -0,0 +1,12 @@
+import { CommonProps } from '../../CommonProps';
+export declare type ButtonToggleSingleValue = string | number | boolean;
+export declare type ButtonToggleSize = 'small' | 'medium' | 'large';
+export declare type ButtonToggleOrientation = 'horizontal' | 'vertical';
+export declare type ButtonToggleValue = ButtonToggleSingleValue | Array<ButtonToggleSingleValue>;
+export interface ButtonToggleOption extends CommonProps {
+    ariaLabel: string;
+    disabled?: boolean;
+    iconId?: string;
+    text?: string;
+    value: ButtonToggleValue;
+}

package/lib/components/file-upload/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../CommonProps';
-import { MappedFile } from './uploadHelpers';
+import { MappedFile } from './utils/models';
 export interface FileUploadProps extends CommonProps {
     /** Unique file type specifiers <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers" target="_blank">More Info</a> */
     accept?: Array<string>;
@@ -8,7 +8,7 @@ export interface FileUploadProps extends CommonProps {
     buttonOnly?: boolean;
     /** If true, the upload zone will be disabled */
     disabled?: boolean;
-    /** Defines the maximum number of files that can be uploaded at once */
+    /** Defines the maximum number of files that can be uploaded */
     maxFiles?: number;
     /** Defines the maximum file size (in MB) */
     maxSize: number;

package/lib/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export type { FileUploadProps } from './FileUpload';
+export { DotFileUpload } from './FileUpload';

package/lib/components/file-upload/utils/helpers.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+import { FileWithPath } from 'react-dropzone';
+import { DropzoneContentArgs, MappedFile } from './models';
+export declare const renderMaxSizeMessage: (maxSizeMB: number) => ReactNode;
+export declare const renderMaxFilesMessage: (maxFiles: number, maxFilesClasses: string) => ReactNode;
+export declare const renderSelectFilesButton: (isUploadDisabled: boolean, onButtonClick: () => void) => ReactNode;
+export declare const renderActiveDragArea: () => ReactNode;
+export declare const renderDragAndDropArea: (isUploadDisabled: boolean, onSelectButtonClick: () => void) => ReactNode;
+export declare const renderDropzoneContent: ({ buttonOnly, isDragActive, isUploadDisabled, open, }: DropzoneContentArgs) => React.ReactNode;
+export declare const getUploadedFilesList: (uploadedFiles: MappedFile[], maxSize: number, onFileDelete: (fileToBeRemoved: FileWithPath) => void) => {
+    child: JSX.Element;
+}[];
+export declare const parseListItem: (deleteFile: (file: FileWithPath) => void, fileToBeParsed: MappedFile, maxSize: number) => {
+    child: JSX.Element;
+};

package/lib/components/file-upload/{uploadHelpers.d.ts → utils/models.d.ts}

@@ -1,13 +1,15 @@
-/// <reference types="react" />
 import { FileWithPath } from 'react-dropzone';
+export interface FileUploadError {
+    code: string;
+    message: string;
+}
 export interface MappedFile {
     errors: Array<FileUploadError>;
     file: FileWithPath;
 }
-export interface FileUploadError {
-    code: string;
-    message: string;
+export interface DropzoneContentArgs {
+    buttonOnly: boolean;
+    isDragActive: boolean;
+    isUploadDisabled: boolean;
+    open: () => void;
 }
-export declare const parseListItem: (deleteFile: (file: FileWithPath) => void, fileToBeParsed: MappedFile, maxSize: number) => {
-    child: JSX.Element;
-};

package/lib/components/index.d.ts

@@ -2,24 +2,23 @@ export type { AppToolbarProps } from './app-toolbar/AppToolbar';
 export type { AutoCompleteOption, AutoCompleteProps, AutoCompleteValue, AutocompleteRenderOptionState, } from './auto-complete';
 export type { AvatarProps } from './avatar/Avatar';
 export type { BreadcrumbItem } from './breadcrumbs/Breadcrumbs';
-export type { ButtonProps } from './button/Button';
-export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSize, } from './button-toggle';
+export type { ButtonProps, IconButtonProps, IconButtonColor, IconButtonSize, } from './button';
+export type { ButtonToggleProps, ButtonToggleValue, ButtonToggleOption, ButtonToggleOrientation, ButtonToggleSingleValue, ButtonToggleSize, } from './button-toggle';
 export type { CheckboxProps } from './checkbox/Checkbox';
 export type { CheckboxGroupProps } from './checkbox/CheckboxGroup';
 export type { SubmitButtonProps } from './dialog/Dialog';
 export type { DynamicFormProps } from './dynamic-form/DynamicForm';
 export type { ConditionFunction, ControlClickHandler, DisabledConditionFunction, DisabledControlCondition, DynamicFormConfig, DynamicFormControl, DynamicFormControlProps, DynamicFormControlType, DynamicFormOutputData, DynamicFormSectionProps, DynamicFormState, DynamicFormStateItem, FieldValidation, } from './dynamic-form/models';
-export type { IconButtonProps } from './button/IconButton';
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps, InputSelectOption, } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
 export type { ListItemProps } from './list';
 export type { MenuItemProps } from './menu/Menu';
-export type { RailItem } from './navigation-rail/NavigationRail';
+export type { RailItem, RailItemsPosition } from './navigation-rail';
 export type { RadioButtonProps } from './radio/RadioButton';
 export type { RadioGroupProps } from './radio/RadioGroup';
 export type { BackItemProps, SidebarProps } from './sidebar/Sidebar';
-export type { SwitchProps } from './switch/Switch';
+export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './switch';
 export type { DotColumnHeader, MultiSelect, Order, RowSelectionChangeHandler, RowsPerPageOption, TableDataWithPagination, TableRowProps, TableRowSelectChangeHandler, TextAlignment, SortDirection, } from './table';
 export type { TabProps } from './tabs/Tabs';
 export type { TypographyVariant } from './typography/Typography';
@@ -31,6 +30,8 @@ export type { TruncateWithTooltipProps } from './truncate-with-tooltip';
 export type { DraggableItem, DraggableListChangeHandler, } from './draggable-list';
 export type { SnackbarProps, SnackbarSeverity, SnackbarOrigin, } from './snackbar';
 export type { CharactersLimit, InlineEditProps } from './inline-edit';
+export type { progressColorOptions, progressVariantOptions, ProgressProps, } from './progress';
+export type { FileUploadProps } from './file-upload';
 export { DotAccordion } from './accordion/Accordion';
 export { DotActionToolbar } from './action-toolbar/ActionToolbar';
 export { DotAlertBanner } from './alert-banner/AlertBanner';
@@ -41,7 +42,7 @@ export { DotAvatar } from './avatar/Avatar';
 export { DotAvatarGroup } from './avatar-group/AvatarGroup';
 export { DotBadge } from './badge';
 export { DotBreadcrumbs } from './breadcrumbs/Breadcrumbs';
-export { DotButton } from './button/Button';
+export { DotButton, DotIconButton } from './button';
 export { DotButtonToggle } from './button-toggle';
 export { DotCard } from './card/Card';
 export { DotCardContent } from './card/CardContent';
@@ -61,16 +62,15 @@ export { DotForm } from './form/Form';
 export { DotFormGroup } from './form-group/FormGroup';
 export { DotDynamicForm } from './dynamic-form/DynamicForm';
 export { DotIcon } from './icon/Icon';
-export { DotIconButton } from './button/IconButton';
 export { DotInlineEdit } from './inline-edit';
 export { DotInputText } from './input-form-fields/InputText';
 export { DotInputSelect } from './input-form-fields/InputSelect';
 export { DotLink } from './link/Link';
 export { DotList } from './list';
 export { DotMenu } from './menu/Menu';
-export { DotNavigationRail } from './navigation-rail/NavigationRail';
+export { DotNavigationRail } from './navigation-rail';
 export { DotPill } from './pill/Pill';
-export { DotProgress } from './progress/Progress';
+export { DotProgress } from './progress';
 export { DotRadioButton } from './radio/RadioButton';
 export { DotRadioGroup } from './radio/RadioGroup';
 export { DotSidebar } from './sidebar/Sidebar';
@@ -78,12 +78,12 @@ export { DotSkeleton } from './skeleton/Skeleton';
 export { DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, useDotSnackbarContext, } from './snackbar';
 export { DotSplitButton } from './split-button/SplitButton';
 export { DotProgressButton } from './progress-button/ProgressButton';
-export { DotSwitch } from './switch/Switch';
+export { DotSwitch } from './switch';
 export { DotHeaderRow, DotTable, DotTablePagination } from './table';
 export { DotTooltip } from './tooltip/Tooltip';
 export { DotTabs } from './tabs/Tabs';
 export { DotTypography } from './typography/Typography';
-export { DotFileUpload } from './file-upload/FileUpload';
+export { DotFileUpload } from './file-upload';
 export { DotDivider } from './divider';
 export { DotPopper } from './popper';
 export { DotTruncateWithTooltip } from './truncate-with-tooltip';

package/lib/components/inline-edit/InlineEdit.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { CommonProps } from '../CommonProps';
 import { TypographyVariant } from '../typography/Typography';
-import { CharactersLimit } from './utils/models';
+import { CharactersLimit, InlineEditBinding } from './utils/models';
 export interface InlineEditProps extends CommonProps {
+    /** Optional array of bindings, used to replace targeted string in edit mode with the corresponding value in view mode */
+    bindings?: InlineEditBinding[];
     /** Characters limit configuration object */
     charactersLimit?: CharactersLimit;
     /** If true, the input will take up the full width of its container */
@@ -12,7 +14,7 @@ export interface InlineEditProps extends CommonProps {
     /** The name of input element */
     name: string;
     /** An async function which should be executed when the value of the input changes */
-    onChange: (value: string) => Promise<boolean>;
+    onChange?: (value: string) => Promise<boolean>;
     /** A function that informs the parent of current editing state */
     onEditStateChange?: (editing: boolean) => void;
     /** If true, component will behave like a regular text (editing functionality will be disabled). */
@@ -25,4 +27,4 @@ export interface InlineEditProps extends CommonProps {
 /**
  * @experimental This component is still in development
  */
-export declare const DotInlineEdit: ({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;
+export declare const DotInlineEdit: ({ ariaLabel, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, typography, value, }: InlineEditProps) => JSX.Element;

package/lib/components/inline-edit/InlineEdit.stories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const multipleBindingsClassName = "dot-multiple-bindings-story";
+export declare const StyledWithMultipleBindings: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/inline-edit/utils/helpers.d.ts

@@ -1,3 +1,5 @@
 import { ReactNode } from 'react';
+import { InlineEditBinding } from './models';
 export declare const getCounterAdornment: (currentLength: number, maxLength: number, dataTestId?: string) => ReactNode | undefined;
 export declare const getWarningAdornment: () => JSX.Element;
+export declare const applyBindings: (bindings: InlineEditBinding[], inlineEditText: string) => ReactNode;

package/lib/components/inline-edit/utils/models.d.ts

@@ -3,3 +3,11 @@ export interface CharactersLimit {
     hideCounter?: boolean;
     maxLength: number;
 }
+export interface InlineEditBinding {
+    /** String, written in edit mode, which will be bound to the actual value in view mode */
+    binding: string;
+    /** Optional prop used to define custom CSS for the value when in view mode */
+    className?: string;
+    /** Value which will be displayed in view mode */
+    value: string;
+}

package/lib/components/navigation-rail/NavigationRail.stories.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const programmaticNavigationClassName = "dot-programmatic-navigation-story";
+export declare const StyledWithProgrammaticNavigation: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/navigation-rail/index.d.ts

@@ -0,0 +1,2 @@
+export type { RailItemsPosition, RailItem, NavigationRailProps, } from './NavigationRail';
+export { DotNavigationRail } from './NavigationRail';

package/lib/components/progress/index.d.ts

@@ -0,0 +1,2 @@
+export type { ProgressProps, progressColorOptions, progressVariantOptions, } from './Progress';
+export { DotProgress } from './Progress';

package/lib/components/switch/index.d.ts

@@ -0,0 +1,2 @@
+export type { SwitchProps, SwitchColor, SwitchSize, SwitchLabelPlacement, } from './Switch';
+export { DotSwitch } from './Switch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "1.12.0",
+  "version": "1.14.1",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -29,10 +29,10 @@
     "@material-ui/lab": "4.0.0-alpha.56",
     "@material-ui/core": "4.12.3",
     "react-dropzone": "^11.4.2",
+    "react-grid-layout": "^1.3.4",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-grid-layout": "^1.3.4"
+    "react": "^16.8.0 || ^17.0.0"
   }
 }