@digital-ai/dot-components 2.8.2 → 2.9.0

package/CHANGE_LOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [2.9.0](https://www.npmjs.com/package/@digital-ai/dot-components) (06/07/2023)
+
+[Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.8.2...2.9.0)
+
+**Features:**
+
+- S-90959: `DotAvatar` support numbers [\#1515](https://github.com/digital-ai/dot-components/pull/1515) ([CWSites](https://github.com/CWSites))
+
+**Fixed bugs:**
+
+- S-90959: Update breadcrumb separator alignment [\#1517](https://github.com/digital-ai/dot-components/pull/1517) ([CWSites](https://github.com/CWSites))
+- D-25282: parse defaultValue according to multiple true/false [\#1510](https://github.com/digital-ai/dot-components/pull/1510) ([CWSites](https://github.com/CWSites))
+- D-25283: AutoComplete options should default to an empty array [\#1509](https://github.com/digital-ai/dot-components/pull/1509) ([CWSites](https://github.com/CWSites))
+
+**Misc:**
+
+- S-91984: add default ariaLabel to DotIconButton for a11y [\#1514](https://github.com/digital-ai/dot-components/pull/1514) ([CWSites](https://github.com/CWSites))
+- Refactor Autocomplete Popper to be separate file [\#1513](https://github.com/digital-ai/dot-components/pull/1513) ([CWSites](https://github.com/CWSites))
+
 ## [2.8.2](https://www.npmjs.com/package/@digital-ai/dot-components) (05/26/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/1.21.11...2.8.2)
@@ -76,10 +95,6 @@
 
 - D-24626: Add startEditable attribute to InlineEdit [\#1466](https://github.com/digital-ai/dot-components/pull/1466) ([jmcnally](https://github.com/jmcnally))
 
-**Fixed bugs:**
-
-- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
-
 **Misc:**
 
 - Updates to deprecated github action `set-output` [\#1465](https://github.com/digital-ai/dot-components/pull/1465) ([CWSites](https://github.com/CWSites))
@@ -109,6 +124,7 @@
 **Fixed bugs:**
 
 - `DotTimePicker`, `DotDatePicker`: fix issues with controlled and uncontrolled states [\#1454](https://github.com/digital-ai/dot-components/pull/1454) ([dmiletic85](https://github.com/dmiletic85))
+- D-24807: `Demo app` - fix error when starting demo application [\#1451](https://github.com/digital-ai/dot-components/pull/1451) ([dmiletic85](https://github.com/dmiletic85))
 
 **Misc:**
 
@@ -220,16 +236,13 @@
 **Fixed bugs:**
 
 - D-24235: Empty table pagination [\#1402](https://github.com/digital-ai/dot-components/pull/1402) ([ryangamble](https://github.com/ryangamble))
+- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
 - Issue \#1271: Updates to `AutoComplete` sizing with `dense` and `size` props [\#1395](https://github.com/digital-ai/dot-components/pull/1395) ([CWSites](https://github.com/CWSites))
 
 ## [1.21.9](https://www.npmjs.com/package/@digital-ai/dot-components) (03/03/2023)
 
 [Full Changelog](https://digital-ai.github.io/dot-components/?path=/story/introduction--page/digital-ai/dot-components/compare/2.4.0...1.21.9)
 
-**Fixed bugs:**
-
-- D-24216: A few minor app-switcher display changes [\#1400](https://github.com/digital-ai/dot-components/pull/1400) ([jmcnally](https://github.com/jmcnally))
-
 **Misc:**
 
 - Setup v1 to use dot-icons library [\#1399](https://github.com/digital-ai/dot-components/pull/1399) ([CWSites](https://github.com/CWSites))
@@ -786,7 +799,6 @@
 - S-81949: attempting branch name instead of sha [\#1028](https://github.com/digital-ai/dot-components/pull/1028) ([CWSites](https://github.com/CWSites))
 - S-81949: simplfying wait step, extend interval to 30s [\#1027](https://github.com/digital-ai/dot-components/pull/1027) ([CWSites](https://github.com/CWSites))
 - S-81949: add release candidate workflow [\#1026](https://github.com/digital-ai/dot-components/pull/1026) ([CWSites](https://github.com/CWSites))
-- S-81949: make NPM wait for other jobs to finish pre-rc [\#1019](https://github.com/digital-ai/dot-components/pull/1019) ([CWSites](https://github.com/CWSites))
 
 ## [1.9.1](https://www.npmjs.com/package/@digital-ai/dot-components) (02/17/2022)
 
@@ -939,6 +951,7 @@
 **Fixed bugs:**
 
 - D-19337: `List`: Circular dependency [\#897](https://github.com/digital-ai/dot-components/pull/897) ([dmiletic85](https://github.com/dmiletic85))
+- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19200: `List` Nested list drawer is not rendering correctly [\#869](https://github.com/digital-ai/dot-components/pull/869) ([dmiletic85](https://github.com/dmiletic85))
 
 ## [1.5.3](https://www.npmjs.com/package/@digital-ai/dot-components) (12/17/2021)
@@ -981,9 +994,7 @@
 
 **Fixed bugs:**
 
-- D-19330: `AppToolbar` shouldn't have grey dividers [\#891](https://github.com/digital-ai/dot-components/pull/891) ([dmiletic85](https://github.com/dmiletic85))
 - D-19294: Fix broken expand/collapse for uncontrolled accordion [\#866](https://github.com/digital-ai/dot-components/pull/866) ([selsemore](https://github.com/selsemore))
-- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
 
 **Misc:**
 
@@ -998,6 +1009,10 @@
 
 - S-80740: Expose DotAccordion 'expanded' and 'onChange' props [\#860](https://github.com/digital-ai/dot-components/pull/860) ([selsemore](https://github.com/selsemore))
 
+**Fixed bugs:**
+
+- D-19250: Fix alignment of DotAccordion collapsed/expanded icons [\#859](https://github.com/digital-ai/dot-components/pull/859) ([selsemore](https://github.com/selsemore))
+
 **Misc:**
 
 - S-76843: Use digital.ai bot PAT for merging master \> develop [\#862](https://github.com/digital-ai/dot-components/pull/862) ([CWSites](https://github.com/CWSites))

package/index.esm.js

@@ -1634,11 +1634,22 @@ const AvatarContent = ({
   'data-testid': dataTestId,
   iconId,
   imageSrc,
+  number,
   size,
   text,
   type
 }) => {
+  const parsedNumber = () => {
+    if (!isNumber(number)) return;
+    const numberArray = number.toString().split('');
+    if (numberArray.length > 1) {
+      return `${numberArray[0]}${numberArray[1]}`;
+    } else {
+      return number;
+    }
+  };
   const parsedText = () => {
+    if (!isString$1(text)) return;
     const textArray = text.split(' ');
     if (textArray.length > 1) {
       const firstInitial = textArray[0].slice(0, 1);
@@ -1661,7 +1672,7 @@ const AvatarContent = ({
     return jsx(DotTypography, Object.assign({
       variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
     }, {
-      children: parsedText()
+      children: parsedNumber() || parsedText()
     }), void 0);
   }
   return null;
@@ -1677,6 +1688,7 @@ const DotAvatar = ({
   iconId,
   imageSrc,
   onClick,
+  number,
   size: _size = 'medium',
   tabIndex: _tabIndex = 0,
   text: _text = alt,
@@ -1716,6 +1728,7 @@ const DotAvatar = ({
         "data-testid": dataTestId,
         iconId: iconId,
         imageSrc: imageSrc,
+        number: number,
         size: _size,
         text: _text,
         type: _type
@@ -2310,7 +2323,7 @@ const DotIconButton = ({
     title: tooltip
   }, {
     children: jsx(StyledIconButton, Object.assign({
-      "aria-label": ariaLabel,
+      "aria-label": ariaLabel || tooltip || `${iconId} icon button`,
       classes: {
         root: rootClasses
       },
@@ -2348,6 +2361,7 @@ const DotDrawerHeader = ({
     role: "heading"
   }, {
     children: [children, variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "close-button",
       iconId: "close",
       onClick: onClose
@@ -2379,6 +2393,7 @@ const DotDrawerBody = ({
     role: _ariaRole
   }, {
     children: [children, !headerExists && variant !== 'permanent' && jsx(DotIconButton, {
+      ariaLabel: "close drawer",
       className: "dot-drawer-close-button",
       iconId: "close",
       onClick: onClose
@@ -3059,6 +3074,7 @@ function SearchInput({
     iconId: "search"
   }, void 0);
   const clearSearchIcon = jsx(DotIconButton, {
+    ariaLabel: "clear search text",
     iconId: "close",
     onClick: handleClear,
     size: "small",
@@ -3128,7 +3144,7 @@ const DotCopyButton = ({
     "data-testid": dataTestId
   }, {
     children: [!showCopiedIcon && jsx(DotIconButton, {
-      ariaLabel: _ariaLabel,
+      ariaLabel: _ariaLabel || 'copy to clipboard',
       "data-testid": `${dataTestId}-button`,
       iconId: "duplicate",
       onClick: copy,
@@ -3844,7 +3860,7 @@ const Brand = ({
     }), void 0), jsx(DotTooltip, Object.assign({
       title: "digital.ai"
     }, {
-      children: theme.palette.mode === "light" ? jsx(ForwardRef$1, {
+      children: theme.palette.mode === 'light' ? jsx(ForwardRef$1, {
         className: "company-name"
       }, void 0) : jsx(ForwardRef, {
         className: "company-name"
@@ -3950,6 +3966,7 @@ const DotSidebar = ({
       className: "go-back"
     }, {
       children: [jsx(DotIconButton, {
+        ariaLabel: "go back",
         className: "go-back-button",
         "data-testid": "back-button",
         iconId: backItem.iconId || 'back',
@@ -4325,7 +4342,9 @@ const getChipsFromAutocomplete = ({
   isReadOnly: _isReadOnly = false,
   values
 }) => {
+  if (values === undefined) return;
   return values.map((option, index) => {
+    if (!option) return null;
     const hasStringValue = isString$1(option);
     const optionAsString = option;
     const optionAsObject = option;
@@ -4380,7 +4399,7 @@ const DotAutoComplete = ({
   onInputChange,
   onOpen,
   open,
-  options,
+  options: _options = [],
   persistentLabel,
   placeholder,
   readOnly: _readOnly = false,
@@ -4392,23 +4411,21 @@ const DotAutoComplete = ({
   warning: _warning = false
 }) => {
   const [showPlaceholder, setShowPlaceholder] = useState(!value && !defaultValue);
-  const {
-    iconId: actionIconId = 'add',
-    text: actionItemText,
-    onClick: onActionItemClick,
-    preventDuplicateInsertion
-  } = actionItem || {};
-  const isActionItemDefined = onActionItemClick !== undefined;
-  let highlightedOption = null;
   const [isOpened, setIsOpened] = useState(false);
   const [inputText, setInputText] = useState('');
+  // Used for focus management while popper is opened
+  const actionItemRef = useRef();
+  const onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+  const allowActionButtonClick = !_freesolo && onActionItemClick;
+  const isActionItemDefined = onActionItemClick !== undefined;
+  const popperOpen = !_readOnly && (open || isOpened);
+  const preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
   const textFieldWarningClassName = !_error && _warning && warningClassName;
   const rootClasses = useStylesWithRootClass(rootClassName$I, _size === 'medium' && inputMediumClassName, className);
-  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, _readOnly ? 'read-only' : '', textFieldWarningClassName);
+  const textFieldRootClasses = useStylesWithRootClass(rootClassName$13, _readOnly && 'read-only', textFieldWarningClassName);
   const inputRootClasses = useStylesWithRootClass(inputRootClassName, !_dense && inputMediumClassName);
+  let highlightedOption = null;
   let textFieldInput;
-  // Used for focus management while popper is opened
-  const actionItemRef = useRef();
   const textFieldRef = element => {
     // We want to use this element in callback function
     textFieldInput = element;
@@ -4432,11 +4449,11 @@ const DotAutoComplete = ({
     setShowPlaceholder(parseAutoCompleteValue(val) === '');
   };
   const sortOptions = () => {
-    return _group ? options.sort((a, b) => {
+    return _group ? _options.sort((a, b) => {
       const aGroup = a.group ? a.group : '';
       const bGroup = b.group ? b.group : '';
       return -bGroup.localeCompare(aGroup);
-    }) : options;
+    }) : _options;
   };
   const handleBlur = event => {
     event.relatedTarget !== actionItemRef.current && setIsOpened(false);
@@ -4456,16 +4473,15 @@ const DotAutoComplete = ({
     }), void 0);
     // Disable action if customer explicitly enabled duplicate
     // item insertion and input text is found inside the 'options'
-    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
+    const isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, _options);
     // Display warning icon if disabled
-    const actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+    const actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
     const defaultText = inputText ? `Add "${inputText}"` : DEFAULT_ACTION_ITEM_TEXT;
-    const nonDisabledText = actionItemText ? actionItemText : defaultText;
+    const nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
     const itemText = isActionDisabled ? 'Value already exists' : nonDisabledText;
-    // If simple text, we need to give it a class so that
-    // styling for displaying ellipsis on a long text
-    // can be applied. If it is custom node coming from the
-    // consumer, then leave it as it is.
+    // If simple text, we need to give it a class so that styling for
+    // displaying ellipsis on a long text can be applied. If it is
+    // custom node coming from the consumer, then leave it as it is.
     const itemTextNode = isString$1(itemText) ? jsx("span", Object.assign({
       className: "dot-action-item-text"
     }, {
@@ -4531,10 +4547,11 @@ const DotAutoComplete = ({
   }) || undefined;
   // Create callback when action item click event handler is defined,
   // free-solo mode is NOT set and 'Enter' key has been pressed
-  const handleKeyDown = !_freesolo && onActionItemClick && (event => {
+  const handleKeyDown = allowActionButtonClick && (event => {
     if (event.key === 'Enter') {
+      const isDuplicate = checkIfDuplicateItem(inputText, _options);
       // Do NOT execute callback if duplicate item or have selected an option from the dropdown
-      if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options) || highlightedOption) return;
+      if (preventDuplicateInsertion && isDuplicate || highlightedOption) return;
       onActionButtonClick();
     }
   }) || undefined;
@@ -4545,7 +4562,7 @@ const DotAutoComplete = ({
     values
   });
   const handleTagsRender = () => {
-    if (!_multiple) return;
+    if (!_multiple || isString$1(defaultValue)) return;
     return renderTags || handleRenderChips;
   };
   const renderErrorOrWarningIcon = () => {
@@ -4582,7 +4599,7 @@ const DotAutoComplete = ({
       inputRoot: inputRootClasses
     },
     "data-testid": dataTestId,
-    defaultValue: defaultValue,
+    defaultValue: _multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
     disabled: _disabled,
     filterOptions: filterOptions,
     filterSelectedOptions: _filterSelectedOptions,
@@ -4610,7 +4627,7 @@ const DotAutoComplete = ({
     onKeyDown: handleKeyDown,
     // We want to close the popper each time focus is shifted from the autocomplete
     onOpen: handleOpen,
-    open: !_readOnly && (open || isOpened),
+    open: popperOpen,
     options: sortOptions(),
     renderInput: params => {
       // InputBaseComponentProps is used here because that is the base
@@ -4670,7 +4687,7 @@ const DotAutoComplete = ({
                 (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
               }
             },
-            placeholder: showPlaceholder ? placeholder : undefined,
+            placeholder: showPlaceholder && placeholder,
             required: _required,
             size: _size,
             variant: "outlined"
@@ -4728,7 +4745,7 @@ const StyledBreadcrumbs = styled(Breadcrumbs).withConfig({
   componentId: "sc-7cg374-1"
 })(["", ""], ({
   theme
-}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
+}) => css(["&.", "{margin-bottom:0;.MuiBreadcrumbs-ol{flex-wrap:nowrap;}.MuiBreadcrumbs-li,.separator{color:", ";margin:0;white-space:nowrap;}.separator{font-size:12px;width:20px;height:20px;padding:0;i{line-height:20px;}}.MuiBreadcrumbs-separator{margin:0;}.MuiLink-underlineHover{cursor:pointer;}.MuiBreadcrumbs-li:last-child{overflow:hidden;text-overflow:ellipsis;}.breadcrumb{padding:", ";}.current-page{color:", ";cursor:default;}}"], rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]));
 
 const compareWidth = (parentEl, childEl) => {
   return parentEl.getBoundingClientRect().width < childEl.getBoundingClientRect().width;
@@ -5538,6 +5555,7 @@ const DotDialog = ({
       className: "dot-dialog-title"
     }, {
       children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsx(DotIconButton, {
+        ariaLabel: "close dialog",
         iconId: "close",
         onClick: handleCancel,
         size: "small"
@@ -8993,6 +9011,7 @@ const DotTableActions = ({
       ref: wrapperRef
     }, {
       children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsx(DotIconButton, {
+        ariaLabel: "more options",
         className: "dot-table-action-icon",
         iconId: "options",
         iconSize: "small",
@@ -9155,6 +9174,7 @@ const DotFileListItem = ({
         children: errorText
       }), void 0)]
     }), void 0), jsx(DotIconButton, {
+      ariaLabel: "delete file",
       className: `${rootClassName$5}-end-icon`,
       "data-testid": dataTestId && `${dataTestId}-end-icon`,
       disabled: disableDelete,
@@ -9752,6 +9772,7 @@ const DotDatePicker = ({
               "data-testid": "dot-error-icon",
               iconId: "error-solid"
             }, void 0), jsx(DotIconButton, {
+              ariaLabel: "Open date picker",
               "data-testid": "date-picker-open-btn",
               iconId: "calendar",
               onClick: pickerButtonProps.onClick,
@@ -10182,6 +10203,7 @@ const DotTimePicker = ({
                   "data-testid": dataTestId && `${dataTestId}-input-error-icon`,
                   iconId: "error-solid"
                 }, void 0), !_disableOpenPicker && !isComponentReadOnly && !disabled && jsx(DotIconButton, {
+                  ariaLabel: "Open time picker",
                   "data-testid": dataTestId && `${dataTestId}-open-btn`,
                   iconId: "pending-clock",
                   onClick: _event => handleTimePickerButtonClick(),

package/index.umd.js

@@ -1850,10 +1850,21 @@
       var dataTestId = _a["data-testid"],
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
+        number = _a.number,
         size = _a.size,
         text = _a.text,
         type = _a.type;
+      var parsedNumber = function parsedNumber() {
+        if (!isNumber(number)) return;
+        var numberArray = number.toString().split('');
+        if (numberArray.length > 1) {
+          return "" + numberArray[0] + numberArray[1];
+        } else {
+          return number;
+        }
+      };
       var parsedText = function parsedText() {
+        if (!isString$1(text)) return;
         var textArray = text.split(' ');
         if (textArray.length > 1) {
           var firstInitial = textArray[0].slice(0, 1);
@@ -1880,7 +1891,7 @@
         return jsxRuntime.jsx(DotTypography, __assign({
           variant: size === 'small' ? 'caption' : getHeadingFromAvatarSize()
         }, {
-          children: parsedText()
+          children: parsedNumber() || parsedText()
         }), void 0);
       }
       return null;
@@ -1898,6 +1909,7 @@
         iconId = _a.iconId,
         imageSrc = _a.imageSrc,
         onClick = _a.onClick,
+        number = _a.number,
         _d = _a.size,
         size = _d === void 0 ? 'medium' : _d,
         _e = _a.tabIndex,
@@ -1943,6 +1955,7 @@
             "data-testid": dataTestId,
             iconId: iconId,
             imageSrc: imageSrc,
+            number: number,
             size: size,
             text: text,
             type: type
@@ -2601,7 +2614,7 @@
         title: tooltip
       }, {
         children: jsxRuntime.jsx(StyledIconButton, __assign({
-          "aria-label": ariaLabel,
+          "aria-label": ariaLabel || tooltip || iconId + " icon button",
           classes: {
             root: rootClasses
           },
@@ -2640,6 +2653,7 @@
         role: "heading"
       }, {
         children: [children, variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "close-button",
           iconId: "close",
           onClick: onClose
@@ -2674,6 +2688,7 @@
         role: ariaRole
       }, {
         children: [children, !headerExists && variant !== 'permanent' && jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "close drawer",
           className: "dot-drawer-close-button",
           iconId: "close",
           onClick: onClose
@@ -3406,6 +3421,7 @@
         iconId: "search"
       }, void 0);
       var clearSearchIcon = jsxRuntime.jsx(DotIconButton, {
+        ariaLabel: "clear search text",
         iconId: "close",
         onClick: handleClear,
         size: "small",
@@ -3482,7 +3498,7 @@
         "data-testid": dataTestId
       }, {
         children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
-          ariaLabel: ariaLabel,
+          ariaLabel: ariaLabel || 'copy to clipboard',
           "data-testid": dataTestId + "-button",
           iconId: "duplicate",
           onClick: copy,
@@ -4238,7 +4254,7 @@
         }), void 0), jsxRuntime.jsx(DotTooltip, __assign({
           title: "digital.ai"
         }, {
-          children: theme.palette.mode === "light" ? jsxRuntime.jsx(ForwardRef$1, {
+          children: theme.palette.mode === 'light' ? jsxRuntime.jsx(ForwardRef$1, {
             className: "company-name"
           }, void 0) : jsxRuntime.jsx(ForwardRef, {
             className: "company-name"
@@ -4359,6 +4375,7 @@
           className: "go-back"
         }, {
           children: [jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "go back",
             className: "go-back-button",
             "data-testid": "back-button",
             iconId: backItem.iconId || 'back',
@@ -4767,7 +4784,9 @@
         _c = _a.isReadOnly,
         isReadOnly = _c === void 0 ? false : _c,
         values = _a.values;
+      if (values === undefined) return;
       return values.map(function (option, index) {
+        if (!option) return null;
         var hasStringValue = isString$1(option);
         var optionAsString = option;
         var optionAsObject = option;
@@ -4834,44 +4853,43 @@
         onInputChange = _a.onInputChange,
         onOpen = _a.onOpen,
         open = _a.open,
-        options = _a.options,
+        _k = _a.options,
+        options = _k === void 0 ? [] : _k,
         persistentLabel = _a.persistentLabel,
         placeholder = _a.placeholder,
-        _k = _a.readOnly,
-        readOnly = _k === void 0 ? false : _k,
+        _l = _a.readOnly,
+        readOnly = _l === void 0 ? false : _l,
         renderOption = _a.renderOption,
         renderTags = _a.renderTags,
-        _l = _a.required,
-        required = _l === void 0 ? false : _l,
-        _m = _a.size,
-        size = _m === void 0 ? 'small' : _m,
+        _m = _a.required,
+        required = _m === void 0 ? false : _m,
+        _o = _a.size,
+        size = _o === void 0 ? 'small' : _o,
         value = _a.value,
-        _o = _a.warning,
-        warning = _o === void 0 ? false : _o;
-      var _p = React.useState(!value && !defaultValue),
-        showPlaceholder = _p[0],
-        setShowPlaceholder = _p[1];
-      var _q = actionItem || {},
-        _r = _q.iconId,
-        actionIconId = _r === void 0 ? 'add' : _r,
-        actionItemText = _q.text,
-        onActionItemClick = _q.onClick,
-        preventDuplicateInsertion = _q.preventDuplicateInsertion;
+        _p = _a.warning,
+        warning = _p === void 0 ? false : _p;
+      var _q = React.useState(!value && !defaultValue),
+        showPlaceholder = _q[0],
+        setShowPlaceholder = _q[1];
+      var _r = React.useState(false),
+        isOpened = _r[0],
+        setIsOpened = _r[1];
+      var _s = React.useState(''),
+        inputText = _s[0],
+        setInputText = _s[1];
+      // Used for focus management while popper is opened
+      var actionItemRef = React.useRef();
+      var onActionItemClick = actionItem === null || actionItem === void 0 ? void 0 : actionItem.onClick;
+      var allowActionButtonClick = !freesolo && onActionItemClick;
       var isActionItemDefined = onActionItemClick !== undefined;
-      var highlightedOption = null;
-      var _s = React.useState(false),
-        isOpened = _s[0],
-        setIsOpened = _s[1];
-      var _t = React.useState(''),
-        inputText = _t[0],
-        setInputText = _t[1];
+      var popperOpen = !readOnly && (open || isOpened);
+      var preventDuplicateInsertion = actionItem === null || actionItem === void 0 ? void 0 : actionItem.preventDuplicateInsertion;
       var textFieldWarningClassName = !error && warning && warningClassName;
       var rootClasses = useStylesWithRootClass(rootClassName$I, size === 'medium' && inputMediumClassName, className);
-      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, className, readOnly ? 'read-only' : '', textFieldWarningClassName);
+      var textFieldRootClasses = useStylesWithRootClass(rootClassName$13, readOnly && 'read-only', textFieldWarningClassName);
       var inputRootClasses = useStylesWithRootClass(inputRootClassName, !dense && inputMediumClassName);
+      var highlightedOption = null;
       var textFieldInput;
-      // Used for focus management while popper is opened
-      var actionItemRef = React.useRef();
       var textFieldRef = function textFieldRef(element) {
         // We want to use this element in callback function
         textFieldInput = element;
@@ -4920,14 +4938,13 @@
         // item insertion and input text is found inside the 'options'
         var isActionDisabled = preventDuplicateInsertion && checkIfDuplicateItem(inputText, options);
         // Display warning icon if disabled
-        var actionStartIconId = isActionDisabled ? 'warning-solid' : actionIconId;
+        var actionStartIconId = isActionDisabled ? 'warning-solid' : (actionItem === null || actionItem === void 0 ? void 0 : actionItem.iconId) || 'add';
         var defaultText = inputText ? "Add \"" + inputText + "\"" : DEFAULT_ACTION_ITEM_TEXT;
-        var nonDisabledText = actionItemText ? actionItemText : defaultText;
+        var nonDisabledText = (actionItem === null || actionItem === void 0 ? void 0 : actionItem.text) || defaultText;
         var itemText = isActionDisabled ? 'Value already exists' : nonDisabledText;
-        // If simple text, we need to give it a class so that
-        // styling for displaying ellipsis on a long text
-        // can be applied. If it is custom node coming from the
-        // consumer, then leave it as it is.
+        // If simple text, we need to give it a class so that styling for
+        // displaying ellipsis on a long text can be applied. If it is
+        // custom node coming from the consumer, then leave it as it is.
         var itemTextNode = isString$1(itemText) ? jsxRuntime.jsx("span", __assign({
           className: "dot-action-item-text"
         }, {
@@ -4995,10 +5012,11 @@
       } || undefined;
       // Create callback when action item click event handler is defined,
       // free-solo mode is NOT set and 'Enter' key has been pressed
-      var handleKeyDown = !freesolo && onActionItemClick && function (event) {
+      var handleKeyDown = allowActionButtonClick && function (event) {
         if (event.key === 'Enter') {
+          var isDuplicate = checkIfDuplicateItem(inputText, options);
           // Do NOT execute callback if duplicate item or have selected an option from the dropdown
-          if (preventDuplicateInsertion && checkIfDuplicateItem(inputText, options) || highlightedOption) return;
+          if (preventDuplicateInsertion && isDuplicate || highlightedOption) return;
           onActionButtonClick();
         }
       } || undefined;
@@ -5011,7 +5029,7 @@
         });
       };
       var handleTagsRender = function handleTagsRender() {
-        if (!multiple) return;
+        if (!multiple || isString$1(defaultValue)) return;
         return renderTags || handleRenderChips;
       };
       var renderErrorOrWarningIcon = function renderErrorOrWarningIcon() {
@@ -5048,7 +5066,7 @@
           inputRoot: inputRootClasses
         },
         "data-testid": dataTestId,
-        defaultValue: defaultValue,
+        defaultValue: multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
         disabled: disabled,
         filterOptions: filterOptions,
         filterSelectedOptions: filterSelectedOptions,
@@ -5082,7 +5100,7 @@
         onKeyDown: handleKeyDown,
         // We want to close the popper each time focus is shifted from the autocomplete
         onOpen: handleOpen,
-        open: !readOnly && (open || isOpened),
+        open: popperOpen,
         options: sortOptions(),
         renderInput: function (params) {
           // InputBaseComponentProps is used here because that is the base
@@ -5142,7 +5160,7 @@
                     (_a = actionItemRef === null || actionItemRef === void 0 ? void 0 : actionItemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                   }
                 },
-                placeholder: showPlaceholder ? placeholder : undefined,
+                placeholder: showPlaceholder && placeholder,
                 required: required,
                 size: size,
                 variant: "outlined"
@@ -5207,7 +5225,7 @@
       componentId: "sc-7cg374-1"
     })(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
+      return styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "], ["\n    &.", " {\n      margin-bottom: 0;\n\n      .MuiBreadcrumbs-ol {\n        flex-wrap: nowrap;\n      }\n      .MuiBreadcrumbs-li,\n      .separator {\n        color: ", ";\n        margin: 0;\n        white-space: nowrap;\n      }\n      .separator {\n        font-size: 12px;\n        width: 20px;\n        height: 20px;\n        padding: 0;\n\n        i {\n          line-height: 20px;\n        }\n      }\n      .MuiBreadcrumbs-separator {\n        margin: 0;\n      }\n      .MuiLink-underlineHover {\n        cursor: pointer;\n      }\n\n      .MuiBreadcrumbs-li:last-child {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .breadcrumb {\n        padding: ", ";\n      }\n\n      .current-page {\n        color: ", ";\n        cursor: default;\n      }\n    }\n  "])), rootClassName$F, theme.palette.grey[300], theme.spacing(0.5, 2), theme.palette.grey[700]);
     });
     var templateObject_1$I, templateObject_2$F, templateObject_3$9, templateObject_4$7;
 
@@ -6059,6 +6077,7 @@
           className: "dot-dialog-title"
         }, {
           children: [renderNodeOrTypography(title, 'h2'), closeIconVisible && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "close dialog",
             iconId: "close",
             onClick: handleCancel,
             size: "small"
@@ -9774,6 +9793,7 @@
           ref: wrapperRef
         }, {
           children: [!showMenu && renderTableActions(), (showMenu || actions.length > 2) && jsxRuntime.jsx(DotIconButton, {
+            ariaLabel: "more options",
             className: "dot-table-action-icon",
             iconId: "options",
             iconSize: "small",
@@ -9965,6 +9985,7 @@
             children: errorText
           }), void 0)]
         }), void 0), jsxRuntime.jsx(DotIconButton, {
+          ariaLabel: "delete file",
           className: rootClassName$5 + "-end-icon",
           "data-testid": dataTestId && dataTestId + "-end-icon",
           disabled: disableDelete,
@@ -10618,6 +10639,7 @@
                     "data-testid": "dot-error-icon",
                     iconId: "error-solid"
                   }, void 0), jsxRuntime.jsx(DotIconButton, {
+                    ariaLabel: "Open date picker",
                     "data-testid": "date-picker-open-btn",
                     iconId: "calendar",
                     onClick: pickerButtonProps.onClick,
@@ -11110,6 +11132,7 @@
                       "data-testid": dataTestId && dataTestId + "-input-error-icon",
                       iconId: "error-solid"
                     }, void 0), !disableOpenPicker && !isComponentReadOnly && !disabled && jsxRuntime.jsx(DotIconButton, {
+                      ariaLabel: "Open time picker",
                       "data-testid": dataTestId && dataTestId + "-open-btn",
                       iconId: "pending-clock",
                       onClick: function (_event) {

package/lib/components/accordion/Accordion.stories.d.ts

@@ -1,8 +1,8 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { AccordionProps } from './Accordion';
 declare const _default: ComponentMeta<({ actions, ariaLabel, children, className, "data-testid": dataTestId, disabled, expanded, hasElevation, onChange, square, startIcon, summary, noWrap, }: AccordionProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<AccordionProps>;
-export declare const WithExpanded: Story<AccordionProps>;
-export declare const WithStartIcons: Story<AccordionProps>;
-export declare const WithNoWrap: Story<AccordionProps>;
+export declare const Default: any;
+export declare const WithExpanded: any;
+export declare const WithStartIcons: any;
+export declare const WithNoWrap: any;

package/lib/components/auto-complete/AutoComplete.d.ts

@@ -2,23 +2,8 @@ import { ChangeEvent, FocusEvent, HTMLAttributes, JSXElementConstructor, ReactNo
 import { AutocompleteCloseReason, AutocompleteGetTagProps, AutocompleteRenderOptionState, FilterOptionsState } from '@mui/material';
 import { CommonProps } from '../CommonProps';
 import { inputSizeOptions } from '../input-form-fields/InputFormFields.propTypes';
+import { ActionItem, AutoCompleteOption, AutoCompleteValue } from './utils/interface';
 export declare const DEFAULT_ACTION_ITEM_TEXT = "Add new item";
-export interface ActionItem {
-    /** The icon to display on the button */
-    iconId?: string;
-    /** Event callback */
-    onClick: (inputText?: string) => void;
-    /** If set to true, it will prevent duplicate item insertion */
-    preventDuplicateInsertion?: boolean;
-    /** Text/Node displayed */
-    text?: string | ReactNode;
-}
-export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[] | null;
-export interface AutoCompleteOption {
-    error?: boolean;
-    group?: string;
-    title: string;
-}
 /**
  * AutoCompleteOption can be extended for the use case when customizing
  * autocomplete option rendering by using `renderOption` prop.

package/lib/components/auto-complete/AutoComplete.stories.d.ts

@@ -1,5 +1,6 @@
 import { ComponentMeta, Story } from '@storybook/react';
-import { AutoCompleteOption, AutoCompleteProps } from './AutoComplete';
+import { AutoCompleteProps } from './AutoComplete';
+import { AutoCompleteOption } from './utils/interface';
 import { AutoCompleteWithRenderOption } from './Autocomplete.stories.data';
 declare const _default: ComponentMeta<(<T extends AutoCompleteOption>({ ListboxComponent, actionItem, ariaLabel, autoFocus, className, "data-testid": dataTestId, defaultValue, dense, disabled, disablePortal, endAdornmentTooltip, error, filterOptions, filterSelectedOptions, freesolo, checkIfOptionDisabled, group, helperText, inputId, inputRef, inputValue, label, loading, maxHeight, multiple, onBlur, onChange, onClose, onInputChange, onOpen, open, options, persistentLabel, placeholder, readOnly, renderOption, renderTags, required, size, value, warning, }: AutoCompleteProps<T>) => JSX.Element)>;
 export default _default;

package/lib/components/auto-complete/Autocomplete.stories.data.d.ts

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
-import { ActionItem, AutoCompleteOption, AutoCompleteProps, AutoCompleteValue } from './AutoComplete';
+import { AutoCompleteProps } from './AutoComplete';
+import { ActionItem, AutoCompleteOption, AutoCompleteValue } from './utils/interface';
 import { CommonProps } from '../CommonProps';
 export declare const movies: AutoCompleteOption[];
 export declare const handleActionItemClick: (newItem?: string) => void;

package/lib/components/auto-complete/index.d.ts

@@ -1,3 +1,4 @@
 export type { AutocompleteRenderOptionState, FilterOptionsState, } from '@mui/material';
 export * from './AutoComplete';
+export * from './utils/interface';
 export { parseAutoCompleteValue } from './utils/helpers';

package/lib/components/auto-complete/utils/helpers.d.ts

@@ -1,6 +1,6 @@
 import { AutocompleteGetTagProps } from '@mui/material';
 import { ChipSize } from '../../chip/Chip';
-import { AutoCompleteOption, AutoCompleteValue } from '../AutoComplete';
+import { AutoCompleteOption, AutoCompleteValue } from './interface';
 export declare const parseAutoCompleteValue: (value: AutoCompleteValue) => string;
 export interface GetChipsFromAutocompleteProps {
     chipSize?: ChipSize;

package/lib/components/auto-complete/utils/interface.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface ActionItem {
+    /** The icon to display on the button */
+    iconId?: string;
+    /** Event callback */
+    onClick: (inputText?: string) => void;
+    /** If set to true, it will prevent duplicate item insertion */
+    preventDuplicateInsertion?: boolean;
+    /** Text/Node displayed */
+    text?: string | ReactNode;
+}
+export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[] | null;
+export interface AutoCompleteOption {
+    error?: boolean;
+    group?: string;
+    title: string;
+}

package/lib/components/avatar/Avatar.d.ts

@@ -15,6 +15,8 @@ export interface AvatarProps extends CommonProps {
     iconId?: string;
     /** Source for the image used for the avatar */
     imageSrc?: string;
+    /** The number to be displayed. Only the first 2 digits will be displayed */
+    number?: number;
     /** Event callback */
     onClick?: (event: MouseEvent) => void;
     /** Size of avatar displayed */
@@ -32,4 +34,4 @@ export interface AvatarProps extends CommonProps {
     /** The shape of the avatar */
     variant?: AvatarVariant;
 }
-export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;
+export declare const DotAvatar: ({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element;

package/lib/components/avatar/Avatar.stories.d.ts

@@ -1,7 +1,8 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { AvatarProps } from './Avatar';
-declare const _default: ComponentMeta<({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ alt, ariaLabel, ariaRole, className, component, color, "data-testid": dataTestId, iconId, imageSrc, onClick, number, size, tabIndex, text, type, tooltip, variant, style, }: AvatarProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<AvatarProps>;
-export declare const AvatarButton: Story<AvatarProps>;
-export declare const WithTooltip: Story<AvatarProps>;
+export declare const Default: any;
+export declare const AvatarButton: any;
+export declare const WithNumber: any;
+export declare const WithTooltip: any;

package/lib/components/badge/Badge.stories.d.ts

@@ -1,8 +1,8 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { BadgeProps } from './Badge';
 declare const _default: ComponentMeta<({ ariaLabel, badgeColor, badgeContent, children, className, "data-testid": dataTestId, invisible, max, overlap, variant, }: BadgeProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<BadgeProps>;
-export declare const WithNotification: Story<BadgeProps>;
-export declare const WithNotificationNumber: Story<BadgeProps>;
-export declare const WithMaxNumber: Story<BadgeProps>;
+export declare const Default: any;
+export declare const WithNotification: any;
+export declare const WithNotificationNumber: any;
+export declare const WithMaxNumber: any;

package/lib/components/checkbox/Checkbox.stories.d.ts

@@ -1,9 +1,9 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { CheckboxProps, DotCheckbox } from './Checkbox';
 declare const _default: ComponentMeta<typeof DotCheckbox>;
 export default _default;
-export declare const Default: Story<CheckboxProps>;
-export declare const WithSmallSize: Story<CheckboxProps>;
-export declare const WithStartLabelPlacement: Story<CheckboxProps>;
-export declare const WithBottomLabelPlacement: Story<CheckboxProps>;
-export declare const WithIndeterminateOption: Story<CheckboxProps>;
+export declare const Default: any;
+export declare const WithSmallSize: any;
+export declare const WithStartLabelPlacement: any;
+export declare const WithBottomLabelPlacement: any;
+export declare const WithIndeterminateOption: (args: CheckboxProps) => JSX.Element;

package/lib/components/checkbox/CheckboxGroup.stories.d.ts

@@ -1,6 +1,6 @@
-import { Story, ComponentMeta } from '@storybook/react';
-import { DotCheckboxGroup, CheckboxGroupProps } from './CheckboxGroup';
+import { ComponentMeta } from '@storybook/react';
+import { DotCheckboxGroup } from './CheckboxGroup';
 declare const _default: ComponentMeta<typeof DotCheckboxGroup>;
 export default _default;
-export declare const Default: Story<CheckboxGroupProps>;
+export declare const Default: any;
 export declare const WithHelperText: any;

package/lib/components/chip/Chip.stories.d.ts

@@ -1,8 +1,8 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { ChipProps } from './Chip';
 declare const _default: ComponentMeta<({ ariaLabel, avatar, charactersLimit, children, className, "data-testid": dataTestId, disabled, error, isClickable, isDeletable, onClick, onDelete, size, startIcon, }: ChipProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<ChipProps>;
-export declare const ChipWithAvatar: Story<ChipProps>;
-export declare const ChipWithIcon: Story<ChipProps>;
-export declare const ChipWithLongText: Story<ChipProps>;
+export declare const Default: any;
+export declare const ChipWithAvatar: any;
+export declare const ChipWithIcon: any;
+export declare const ChipWithLongText: any;

package/lib/components/dynamic-form/utils/formHelpers.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { ControlClickHandler, DynamicFormConfig, DynamicFormControl, DynamicFormControlProps, DynamicFormOutputData, DynamicFormState, DynamicFormStateData, DynamicFormStateItem } from '../models';
-import { AutoCompleteValue } from '../../auto-complete/AutoComplete';
+import { AutoCompleteValue } from '../../auto-complete/';
 import { CheckboxProps } from '../../checkbox/Checkbox';
 declare type AutoCompleteChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>, value: AutoCompleteValue) => void;
 declare type ChangeHandler = (controlName: string) => (e: ChangeEvent<HTMLInputElement>) => void;

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

@@ -1,8 +1,8 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { FileUploadProps } from './';
 declare const _default: ComponentMeta<({ accept, ariaLabel, ariaRole, buttonOnly, className, "data-testid": dataTestId, disabled, hideFilesList, maxFiles, maxSize, onChange, onDragEnter, onFileClick, }: FileUploadProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<FileUploadProps>;
-export declare const WithSingleFileLimit: Story<FileUploadProps>;
-export declare const WithCustomFileUploadList: Story<FileUploadProps>;
-export declare const WithUploadErrors: Story<FileUploadProps>;
+export declare const Default: any;
+export declare const WithSingleFileLimit: any;
+export declare const WithCustomFileUploadList: (args: FileUploadProps) => JSX.Element;
+export declare const WithUploadErrors: (args: FileUploadProps) => JSX.Element;

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

@@ -1,16 +1,15 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { InlineEditProps } from './InlineEdit';
 declare const _default: ComponentMeta<({ ariaLabel, ariaRole, bindings, charactersLimit, className, "data-testid": dataTestId, fullWidth, hideActionButtons, name, onChange, onEditStateChange, readOnly, selectTextOnEdit, startEditable, tabIndex, tooltip, typography, value, }: InlineEditProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<InlineEditProps>;
+export declare const Default: any;
 export declare const WithCharactersLimit: any;
 export declare const WithMultipleLines: any;
 export declare const WithReadOnlyMode: any;
 export declare const WithoutActionButtons: any;
 export declare const WithTooltip: any;
-export declare const WithSaveError: Story<InlineEditProps>;
-export declare const WithCustomTypography: Story<InlineEditProps>;
+export declare const WithSaveError: (args: InlineEditProps) => JSX.Element;
 export declare const WithStartEditable: any;
 export declare const WithSingleBinding: any;
-export declare const WithMultipleBindings: Story<InlineEditProps>;
+export declare const WithMultipleBindings: (args: InlineEditProps) => JSX.Element;
 export declare const WithSelectOnEdit: any;

package/lib/components/linear-progress/LinearProgress.stories.d.ts

@@ -1,8 +1,8 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { LinearProgressProps } from './LinearProgress';
 declare const _default: ComponentMeta<({ ariaLabel, color, className, "data-testid": dataTestId, value, valueBuffer, variant, }: LinearProgressProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<LinearProgressProps>;
+export declare const Default: any;
 export declare const WithDeterminateVariant: any;
 export declare const WithBufferVariant: any;
 export declare const WithQueryVariant: any;

package/lib/components/list/List.stories.d.ts

@@ -1,6 +1,6 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { ListProps } from './utils/models';
 declare const _default: ComponentMeta<({ ariaLabel, ariaRole, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<ListProps>;
-export declare const WithoutIcons: Story<ListProps>;
+export declare const Default: any;
+export declare const WithoutIcons: any;

package/lib/components/progress/Progress.stories.d.ts

@@ -1,8 +1,8 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { ProgressProps } from './Progress';
 declare const _default: ComponentMeta<({ ariaLabel, color, className, "data-testid": dataTestId, size, thickness, tooltip, value, variant, }: ProgressProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<ProgressProps>;
+export declare const Default: any;
 export declare const WithPrimaryColor: any;
 export declare const WithCustomSizeAndThickness: any;
 export declare const WithDeterminateVariant: any;

package/lib/components/radio/RadioGroup.stories.d.ts

@@ -1,7 +1,7 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { RadioGroupProps } from './RadioGroup';
 declare const _default: ComponentMeta<({ ariaLabel, ariaRole, className, "data-testid": dataTestId, defaultValue, disableGroup, endIcon, error, helperText, groupLabel, name, labelPlacement, onChange, value, options, startIcon, required, row, size, }: RadioGroupProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<RadioGroupProps>;
+export declare const Default: any;
 export declare const WithHelperText: any;
 export declare const WithRowAndHelperText: any;

package/lib/components/snackbar/Snackbar.stories.d.ts

@@ -1,6 +1,6 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { SnackbarProps } from './';
 declare const _default: ComponentMeta<({ action, anchorOrigin, ariaLabel, children, className, "data-testid": dataTestId, onClose, open, severity, width, }: SnackbarProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<SnackbarProps>;
-export declare const WithBottomCenterAnchor: Story<SnackbarProps>;
+export declare const Default: any;
+export declare const WithBottomCenterAnchor: any;

package/lib/components/split-button/SplitButton.stories.d.ts

@@ -1,9 +1,9 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { SplitButtonProps } from './SplitButton';
 declare const _default: ComponentMeta<({ autoFocus, ariaLabel, className, "data-testid": dataTestId, defaultMainOptionKey, disabled, disablePortal, disableRipple, fullWidth, isSubmit, onOptionClick, options, size, tooltip, type, }: SplitButtonProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<SplitButtonProps>;
-export declare const WithSelectedKey: Story<SplitButtonProps>;
-export declare const WithMainOptionDisabled: Story<SplitButtonProps>;
-export declare const WithMenuOptionDisabled: Story<SplitButtonProps>;
-export declare const WithMenuButtonDisabled: Story<SplitButtonProps>;
+export declare const Default: any;
+export declare const WithSelectedKey: any;
+export declare const WithMainOptionDisabled: any;
+export declare const WithMenuOptionDisabled: any;
+export declare const WithMenuButtonDisabled: any;

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

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

package/lib/components/switch/Switch.stories.d.ts

@@ -1,12 +1,12 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { SwitchProps } from './';
 declare const _default: ComponentMeta<({ ariaLabel, checked, className, color, "data-testid": dataTestId, disabled, id, inputRef, label, labelPlacement, onChange, size, }: SwitchProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<SwitchProps>;
-export declare const WithSecondaryColor: Story<SwitchProps>;
-export declare const WithDisabledState: Story<SwitchProps>;
-export declare const WithSmallSize: Story<SwitchProps>;
-export declare const WithStartLabelPlacement: Story<SwitchProps>;
-export declare const WithBottomLabelPlacement: Story<SwitchProps>;
-export declare const WithTopLabelPlacement: Story<SwitchProps>;
-export declare const WithoutLabel: Story<SwitchProps>;
+export declare const Default: any;
+export declare const WithSecondaryColor: any;
+export declare const WithSmallSize: any;
+export declare const WithDisabledState: any;
+export declare const WithStartLabelPlacement: any;
+export declare const WithBottomLabelPlacement: any;
+export declare const WithTopLabelPlacement: any;
+export declare const WithoutLabel: any;

package/lib/components/truncate-with-tooltip/TruncateWithTooltip.stories.d.ts

@@ -1,8 +1,8 @@
-import { ComponentMeta, Story } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { TruncateWithTooltipProps } from './';
 declare const _default: ComponentMeta<({ ariaLabel, charactersLimit, className, "data-testid": dataTestId, label, width, }: TruncateWithTooltipProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<TruncateWithTooltipProps>;
-export declare const WithAutoTruncate: Story<TruncateWithTooltipProps>;
-export declare const WithWidthAsNumber: Story<TruncateWithTooltipProps>;
-export declare const WithWidthAsString: Story<TruncateWithTooltipProps>;
+export declare const Default: any;
+export declare const WithAutoTruncate: any;
+export declare const WithWidthAsNumber: any;
+export declare const WithWidthAsString: any;

package/lib/components/typography/Typography.stories.d.ts

@@ -1,7 +1,7 @@
-import { Story, ComponentMeta } from '@storybook/react';
+import { ComponentMeta } from '@storybook/react';
 import { TypographyProps } from './Typography';
 declare const _default: ComponentMeta<({ ariaLabel, ariaLevel, ariaRole, className, "data-testid": dataTestId, children, component, noMarginBottom, noWrap, variant, }: TypographyProps) => JSX.Element>;
 export default _default;
-export declare const Default: Story<TypographyProps>;
-export declare const WithVariants: Story<TypographyProps>;
-export declare const WithWrappingOptions: Story<TypographyProps>;
+export declare const Default: any;
+export declare const WithVariants: (args: TypographyProps) => JSX.Element;
+export declare const WithWrappingOptions: (args: TypographyProps) => JSX.Element;

package/package.json

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