@digital-ai/dot-components 3.7.0 → 3.8.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useState, useRef, useEffect, createContext, useMemo, useContext, forwardRef, useCallback, createElement, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, RadioGroup, Radio, Switch, Skeleton, Snackbar, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
+import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, AccordionActions, InputAdornment, InputLabel, TextField, Toolbar, Fade, StyledEngineProvider, Alert, Avatar, Button, Link, List, ListSubheader, Divider, CircularProgress, Popper, MenuList, MenuItem, Paper, ClickAwayListener, Drawer, IconButton, ListItem, ListItemButton, Collapse, ListItemIcon, ListItemText, Badge, useMediaQuery, Autocomplete, Chip, AvatarGroup, Breadcrumbs, ToggleButtonGroup, ToggleButton, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogContent, DialogActions, useTheme as useTheme$1, Snackbar, RadioGroup, Radio, Switch, Skeleton, ButtonGroup, Stepper, Step, StepLabel, StepContent, TablePagination, TableContainer, TableBody, TableCell, TableRow, TableSortLabel, TableHead, Table, Tabs, Tab, LinearProgress, Slide } from '@mui/material';
 import '@digital-ai/dot-icons';
 import styled, { css, createGlobalStyle, ThemeProvider as ThemeProvider$1, keyframes } from 'styled-components';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
@@ -15,7 +15,7 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import utc from 'dayjs/plugin/utc';
 
-class ApiError extends Error {
+class ApiError$1 extends Error {
   constructor(response, message) {
     super(message);
     this.url = response.url;
@@ -1641,7 +1641,7 @@ const calculateNumberFromText = text => {
 };
 const calculateWidth = width => {
   if (!width) return;
-  return isString$1(width) ? width : `${width}px`;
+  return isString$2(width) ? width : `${width}px`;
 };
 const getAvatarColorForInputText = value => {
   const colorOptions = [...Object.keys(avatarColors)];
@@ -1652,11 +1652,11 @@ const getAvatarColorForInputText = value => {
   if (index === 9) return 'default';
   return colorOptions[index];
 };
-const isString$1 = str => typeof str === 'string';
+const isString$2 = str => typeof str === 'string';
 const isLowerCase = str => str === str.toLowerCase();
 const isNumber = num => typeof num === 'number';
 const renderNodeOrTypography = (content, typographyVariant = 'body1') => {
-  return isString$1(content) ? jsx(DotTypography, {
+  return isString$2(content) ? jsx(DotTypography, {
     variant: typographyVariant,
     children: content
   }) : content;
@@ -1714,7 +1714,7 @@ const DotAlertBanner = ({
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$16, severity, className);
   /* For simple string use default component, for everything else use 'div' */
-  const typographyComponent = isString$1(children) ? undefined : 'div';
+  const typographyComponent = isString$2(children) ? undefined : 'div';
   return jsx(StyledAlertBanner, {
     action: action,
     "aria-label": ariaLabel,
@@ -1797,7 +1797,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-const OpenAPI = {
+const OpenAPI$1 = {
   BASE: '',
   VERSION: '1 (local)',
   WITH_CREDENTIALS: false,
@@ -1828,30 +1828,30 @@ var ApplicationModel;
   })(ApplicationModel.instance_state || (ApplicationModel.instance_state = {}));
 })(ApplicationModel || (ApplicationModel = {}));
 
-function isDefined(value) {
+function isDefined$1(value) {
   return value !== undefined && value !== null;
 }
-function isString(value) {
+function isString$1(value) {
   return typeof value === 'string';
 }
-function isStringWithValue(value) {
-  return isString(value) && value !== '';
+function isStringWithValue$1(value) {
+  return isString$1(value) && value !== '';
 }
-function isBlob(value) {
+function isBlob$1(value) {
   return value instanceof Blob;
 }
-function base64(str) {
+function base64$1(str) {
   try {
     return btoa(str);
   } catch (err) {
     return Buffer.from(str).toString('base64');
   }
 }
-function getQueryString(params) {
+function getQueryString$1(params) {
   const qs = [];
   Object.keys(params).forEach(key => {
     const value = params[key];
-    if (isDefined(value)) {
+    if (isDefined$1(value)) {
       if (Array.isArray(value)) {
         value.forEach(value => {
           qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
@@ -1866,25 +1866,25 @@ function getQueryString(params) {
   }
   return '';
 }
-function getUrl(options) {
+function getUrl$1(options) {
   const path = options.path;
-  const url = `${OpenAPI.BASE}${path}`;
+  const url = `${OpenAPI$1.BASE}${path}`;
   if (options.query) {
-    return `${url}${getQueryString(options.query)}`;
+    return `${url}${getQueryString$1(options.query)}`;
   }
   return url;
 }
-function getFormData(params) {
+function getFormData$1(params) {
   const formData = new FormData();
   Object.keys(params).forEach(key => {
     const value = params[key];
-    if (isDefined(value)) {
+    if (isDefined$1(value)) {
       formData.append(key, value);
     }
   });
   return formData;
 }
-function resolve(options, resolver) {
+function resolve$1(options, resolver) {
   return __awaiter(this, void 0, void 0, function* () {
     if (typeof resolver === 'function') {
       return resolver(options);
@@ -1892,31 +1892,31 @@ function resolve(options, resolver) {
     return resolver;
   });
 }
-function getHeaders(options) {
+function getHeaders$1(options) {
   return __awaiter(this, void 0, void 0, function* () {
-    const token = yield resolve(options, OpenAPI.TOKEN);
-    const username = yield resolve(options, OpenAPI.USERNAME);
-    const password = yield resolve(options, OpenAPI.PASSWORD);
-    const additionalHeaders = yield resolve(options, OpenAPI.HEADERS);
+    const token = yield resolve$1(options, OpenAPI$1.TOKEN);
+    const username = yield resolve$1(options, OpenAPI$1.USERNAME);
+    const password = yield resolve$1(options, OpenAPI$1.PASSWORD);
+    const additionalHeaders = yield resolve$1(options, OpenAPI$1.HEADERS);
     const defaultHeaders = Object.entries(Object.assign(Object.assign({
       Accept: 'application/json'
-    }, additionalHeaders), options.headers)).filter(([key, value]) => isDefined(value)).reduce((headers, [key, value]) => Object.assign(Object.assign({}, headers), {
+    }, additionalHeaders), options.headers)).filter(([key, value]) => isDefined$1(value)).reduce((headers, [key, value]) => Object.assign(Object.assign({}, headers), {
       [key]: value
     }), {});
     const headers = new Headers(defaultHeaders);
-    if (isStringWithValue(token)) {
+    if (isStringWithValue$1(token)) {
       headers.append('Authorization', `Bearer ${token}`);
     }
-    if (isStringWithValue(username) && isStringWithValue(password)) {
-      const credentials = base64(`${username}:${password}`);
+    if (isStringWithValue$1(username) && isStringWithValue$1(password)) {
+      const credentials = base64$1(`${username}:${password}`);
       headers.append('Authorization', `Basic ${credentials}`);
     }
     if (options.body) {
       if (options.mediaType) {
         headers.append('Content-Type', options.mediaType);
-      } else if (isBlob(options.body)) {
+      } else if (isBlob$1(options.body)) {
         headers.append('Content-Type', options.body.type || 'application/octet-stream');
-      } else if (isString(options.body)) {
+      } else if (isString$1(options.body)) {
         headers.append('Content-Type', 'text/plain');
       } else {
         headers.append('Content-Type', 'application/json');
@@ -1925,15 +1925,15 @@ function getHeaders(options) {
     return headers;
   });
 }
-function getRequestBody(options) {
+function getRequestBody$1(options) {
   var _a;
   if (options.formData) {
-    return getFormData(options.formData);
+    return getFormData$1(options.formData);
   }
   if (options.body) {
     if ((_a = options.mediaType) === null || _a === void 0 ? void 0 : _a.includes('/json')) {
       return JSON.stringify(options.body);
-    } else if (isString(options.body) || isBlob(options.body)) {
+    } else if (isString$1(options.body) || isBlob$1(options.body)) {
       return options.body;
     } else {
       return JSON.stringify(options.body);
@@ -1941,26 +1941,26 @@ function getRequestBody(options) {
   }
   return undefined;
 }
-function sendRequest(options, url) {
+function sendRequest$1(options, url) {
   return __awaiter(this, void 0, void 0, function* () {
     const request = {
       method: options.method,
-      headers: yield getHeaders(options),
-      body: getRequestBody(options)
+      headers: yield getHeaders$1(options),
+      body: getRequestBody$1(options)
     };
     return yield fetch(url, request);
   });
 }
-function getResponseHeader(response, responseHeader) {
+function getResponseHeader$1(response, responseHeader) {
   if (responseHeader) {
     const content = response.headers.get(responseHeader);
-    if (isString(content)) {
+    if (isString$1(content)) {
       return content;
     }
   }
   return null;
 }
-function getResponseBody(response) {
+function getResponseBody$1(response) {
   return __awaiter(this, void 0, void 0, function* () {
     if (response.status !== 204) {
       try {
@@ -1980,7 +1980,7 @@ function getResponseBody(response) {
     return null;
   });
 }
-function catchErrors(options, result) {
+function catchErrors$1(options, result) {
   const errors = Object.assign({
     400: 'Bad Request',
     401: 'Unauthorized',
@@ -1992,10 +1992,10 @@ function catchErrors(options, result) {
   }, options.errors);
   const error = errors[result.status];
   if (error) {
-    throw new ApiError(result, error);
+    throw new ApiError$1(result, error);
   }
   if (!result.ok) {
-    throw new ApiError(result, 'Generic Error');
+    throw new ApiError$1(result, 'Generic Error');
   }
 }
 /**
@@ -2004,12 +2004,12 @@ function catchErrors(options, result) {
  * @returns ApiResult
  * @throws ApiError
  */
-function request(options) {
+function request$1(options) {
   return __awaiter(this, void 0, void 0, function* () {
-    const url = getUrl(options);
-    const response = yield sendRequest(options, url);
-    const responseBody = yield getResponseBody(response);
-    const responseHeader = getResponseHeader(response, options.responseHeader);
+    const url = getUrl$1(options);
+    const response = yield sendRequest$1(options, url);
+    const responseBody = yield getResponseBody$1(response);
+    const responseHeader = getResponseHeader$1(response, options.responseHeader);
     const result = {
       url,
       ok: response.ok,
@@ -2017,7 +2017,7 @@ function request(options) {
       statusText: response.statusText,
       body: responseHeader || responseBody
     };
-    catchErrors(options, result);
+    catchErrors$1(options, result);
     return result;
   });
 }
@@ -2051,7 +2051,7 @@ class ApplicationsService {
    */
   static retrieveApplications(accountId, productInstanceId, start, count, sort, filter) {
     return __awaiter(this, void 0, void 0, function* () {
-      const result = yield request({
+      const result = yield request$1({
         method: 'GET',
         path: `/licensing/v1/applications/`,
         query: {
@@ -2079,7 +2079,7 @@ class ApplicationsService {
    */
   static retrieveApplicationById(applicationId) {
     return __awaiter(this, void 0, void 0, function* () {
-      const result = yield request({
+      const result = yield request$1({
         method: 'GET',
         path: `/licensing/v1/applications/${applicationId}`,
         errors: {
@@ -2142,11 +2142,60 @@ function useCancelablePromise() {
   };
 }
 
-const nullStr = null;
+const getPlatformConsoleUrlFromToken = encodedToken => {
+  if (encodedToken) {
+    try {
+      const decodedToken = jwt_decode(encodedToken);
+      const iss = decodedToken.iss;
+      const issUrl = new URL(iss);
+      const pathArray = issUrl.pathname.split('/');
+      const vanityDomain = pathArray[pathArray.length - 1];
+      let host = issUrl.hostname === 'localhost' ? 'local.digital.ai:4200' : issUrl.host;
+      const identityRe = /^identity(-\d+)+\.(.+)$/i;
+      const match = host.match(identityRe);
+      if (match && match.length === 3) {
+        host = match[2];
+      }
+      return issUrl.protocol + '//' + vanityDomain + '.' + host + '/';
+    } catch (e) {
+      console.error('Invalid token', e, encodedToken);
+    }
+  }
+  return null;
+};
+/**
+ * Maps base64 encoded image data to image MIME types
+ */
+const signatureMap = {
+  iVBORw0KGgo: 'image/png',
+  '/9j/': 'image/jpg',
+  PHN2Zy: 'image/svg+xml',
+  UklGR: 'image/webp'
+};
+/**
+ * Detects the MIME type of an image based on the first few bytes of the image data
+ * @param b64 Base64 encoded image data
+ * @param defaultMimeType mime type to return if it can't be determined from the given b64 string
+ *
+ * @returns mime type string
+ */
+function detectImageMimeType(b64, defaultMimeType = 'image/svg+xml') {
+  if (b64) {
+    for (const [signature, mimeType] of Object.entries(signatureMap)) {
+      if (b64.startsWith(signature)) {
+        return mimeType;
+      }
+    }
+  }
+  // If no signature is found, return default mime type
+  return defaultMimeType;
+}
+
+const nullStr$1 = null;
 let idCount = 100;
 const createAppInstance = (name, instance_state, appType = 'Deploy') => ({
   id: '757e74ed-389b-4ec4-be29-bfed6738b' + idCount++,
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-11-30T23:28:50.980764+00:00',
@@ -2154,8 +2203,8 @@ const createAppInstance = (name, instance_state, appType = 'Deploy') => ({
   name,
   url: 'https://digital.ai/products/deploy/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: false,
   logo_product_name: appType,
   instance_state: instance_state % 2
@@ -2168,7 +2217,7 @@ for (const [name, instanceState] of testData) {
 }
 let applications = [{
   id: 'be6e1e4f-7009-4412-b3ba-e5633cbe6be0',
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-11-30T23:28:01.662721+00:00',
@@ -2176,14 +2225,14 @@ let applications = [{
   name: 'Agility 1',
   url: 'https://digital.ai/products/agility/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: true,
   logo_product_name: 'Agility',
   instance_state: 1
 }, {
   id: 'f30476d3-c432-44c8-a778-a0a9fae203c9',
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-11-30T23:32:00.979159+00:00',
@@ -2191,14 +2240,14 @@ let applications = [{
   name: 'Continuous Testing 1',
   url: 'https://digital.ai/products/continuous-testing/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: false,
   logo_product_name: 'Continuous Testing',
   instance_state: 1
 }, {
   id: 'f30476d4-c432-44c8-a778-a0a9fae203c9',
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-12-30T23:32:00.979159+00:00',
@@ -2206,8 +2255,8 @@ let applications = [{
   name: 'Continuous Testing 2',
   url: 'https://digital.ai/products/continuous-testing/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: false,
   logo_product_name: 'Continuous Testing',
   instance_state: 1
@@ -2217,7 +2266,7 @@ deployInstances.forEach(deployApp => {
 });
 applications = applications.concat([{
   id: '0c152339-b953-41e4-8b0f-51182b6e646a',
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-11-30T23:31:18.846994+00:00',
@@ -2225,14 +2274,14 @@ applications = applications.concat([{
   name: 'Staging Intelligence',
   url: 'https://digital.ai/products/intelligence/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: true,
   logo_product_name: 'Intelligence',
   instance_state: 0
 }, {
   id: '00f39f97-0e22-4e24-8cd1-20b359861c3f',
-  product_instance_id: nullStr,
+  product_instance_id: nullStr$1,
   account_id: 'c390d325-1628-4c4e-a1ee-d269e025c34e',
   enabled: true,
   created_date: '2022-11-30T23:30:11.995558+00:00',
@@ -2240,8 +2289,8 @@ applications = applications.concat([{
   name: 'Prod Release',
   url: 'https://digital.ai/products/release/',
   description: '',
-  alternate_label: nullStr,
-  logo: nullStr,
+  alternate_label: nullStr$1,
+  logo: nullStr$1,
   needs_authentication: true,
   logo_product_name: 'Release',
   instance_state: 1
@@ -2275,7 +2324,7 @@ const DotCoreApiProvider = ({
     const nullProductInstanceId = null;
     const sort = 'name';
     const filter = ['enabled:true'];
-    if (OpenAPI.BASE === MOCK_API_URL) {
+    if (OpenAPI$1.BASE === MOCK_API_URL) {
       setApplicationsError(null);
       setApplicationsLoading(false);
       setApplications(getApplicationsMock.applications);
@@ -2295,7 +2344,7 @@ const DotCoreApiProvider = ({
     if (!accountId || isUUID(accountId)) {
       retrieveApplications(accountId);
     } else {
-      const error = new ApiError({
+      const error = new ApiError$1({
         url: '',
         ok: false,
         status: 400,
@@ -2305,29 +2354,9 @@ const DotCoreApiProvider = ({
       setApplicationsError(error);
     }
   };
-  const decodeToken = encodedToken => {
-    if (encodedToken) {
-      try {
-        const decodedToken = jwt_decode(encodedToken);
-        const iss = decodedToken.iss;
-        const issUrl = new URL(iss);
-        const pathArray = issUrl.pathname.split('/');
-        const vanityDomain = pathArray[pathArray.length - 1];
-        let host = issUrl.hostname === 'localhost' ? 'local.digital.ai:4200' : issUrl.host;
-        const identity = 'identity.';
-        if (host.startsWith(identity)) {
-          host = host.substring(identity.length);
-        }
-        const consoleUrl = issUrl.protocol + '//' + vanityDomain + '.' + host + '/';
-        setPlatformConsoleUrl(consoleUrl);
-      } catch (e) {
-        console.error('Invalid token', e, encodedToken);
-      }
-    }
-  };
   const setToken = newToken => {
-    OpenAPI.TOKEN = newToken;
-    decodeToken(newToken);
+    OpenAPI$1.TOKEN = newToken;
+    setPlatformConsoleUrl(getPlatformConsoleUrlFromToken(newToken));
   };
   const DotCoreApiValues = {
     applications,
@@ -2342,14 +2371,14 @@ const DotCoreApiProvider = ({
     setSelectedAppSwitcherAppType
   };
   const memoizedValues = useMemo(() => DotCoreApiValues, [applications, applicationsError, applicationsLoading, isAppSwitcherOpen, platformConsoleUrl, selectedAppSwitcherAppType]);
-  if (apiUrl && OpenAPI.BASE !== apiUrl) {
-    OpenAPI.BASE = apiUrl;
+  if (apiUrl && OpenAPI$1.BASE !== apiUrl) {
+    OpenAPI$1.BASE = apiUrl;
   }
   const demoUrl = 'https://digitalai.staging.digitalai.cloud/';
-  if (token && OpenAPI.TOKEN !== token) {
-    OpenAPI.TOKEN = token;
-    decodeToken(token);
-  } else if (OpenAPI.BASE === MOCK_API_URL && platformConsoleUrl !== demoUrl) {
+  if (token && OpenAPI$1.TOKEN !== token) {
+    OpenAPI$1.TOKEN = token;
+    setPlatformConsoleUrl(getPlatformConsoleUrlFromToken(token));
+  } else if (OpenAPI$1.BASE === MOCK_API_URL && platformConsoleUrl !== demoUrl) {
     setPlatformConsoleUrl(demoUrl);
   }
   return jsx(DotCoreApiContext.Provider, {
@@ -2713,7 +2742,7 @@ const DotLink = ({
   const rootClasses = useStylesWithRootClass(rootClassName$13, className);
   useEffect(() => {
     // Include a console warning if the link is not a string and no ariaLabel is provided
-    if (!isString$1(children) && !ariaLabel) {
+    if (!isString$2(children) && !ariaLabel) {
       console.warn(`a11y: Consider adding an 'ariaLabel' to 'DotLink' when used without text`);
     }
     // Include a console warning if the color value is set to initial
@@ -2991,7 +3020,7 @@ const StyledPopper$1 = styled(Popper)`
 
 const flyoutMenuClassName = 'dot-flyout-menu';
 const rootClassName$$ = 'dot-menu';
-const getListMaxHeight = maxHeight => isString$1(maxHeight) ? maxHeight : `${maxHeight}px`;
+const getListMaxHeight = maxHeight => isString$2(maxHeight) ? maxHeight : `${maxHeight}px`;
 const StyledPopper = styled(Popper)`
   ${({
   theme
@@ -6351,7 +6380,7 @@ const getChipsFromAutocomplete = ({
   if (values === undefined) return;
   return values.map((option, index) => {
     if (!option) return null;
-    const hasStringValue = isString$1(option);
+    const hasStringValue = isString$2(option);
     const optionAsString = option;
     const optionAsObject = option;
     const chipError = hasStringValue ? undefined : optionAsObject.error;
@@ -6501,7 +6530,7 @@ const DotAutoComplete = ({
     // 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", {
+    const itemTextNode = isString$2(itemText) ? jsx("span", {
       className: "dot-action-item-text",
       children: itemText
     }) : itemText;
@@ -6577,7 +6606,7 @@ const DotAutoComplete = ({
     values
   });
   const handleTagsRender = () => {
-    if (!multiple || isString$1(defaultValue)) return;
+    if (!multiple || isString$2(defaultValue)) return;
     return renderTags || handleRenderChips;
   };
   const renderErrorOrWarningIcon = () => {
@@ -6615,7 +6644,7 @@ const DotAutoComplete = ({
     },
     "data-pendoid": dataPendoId,
     "data-testid": dataTestId,
-    defaultValue: multiple && isString$1(defaultValue) ? [defaultValue] : defaultValue,
+    defaultValue: multiple && isString$2(defaultValue) ? [defaultValue] : defaultValue,
     disabled: disabled,
     filterOptions: filterOptions,
     filterSelectedOptions: filterSelectedOptions,
@@ -8243,95 +8272,2498 @@ const CssGridDebug = ({
   });
 };
 
-const rootClassName$z = 'dot-empty-state';
-const StyledEmptyState = styled.div`
-  ${({
-  theme
-}) => css`
-    &.dot-empty-state {
-      margin: 0 auto;
-      max-width: 600px;
-      text-align: center;
-
-      .empty-state-image-container {
-        display: flex;
-        justify-content: center;
-      }
-
-      .empty-state-image {
-        min-height: ${theme.spacing(10)};
-        margin-bottom: ${theme.spacing(5)};
-      }
-
-      h2 {
-        margin-bottom: ${theme.spacing(1)};
-      }
-
-      .dot-tooltip {
-        display: inline-block;
-      }
-
-      .dot-button {
-        margin-top: ${theme.spacing(4)};
-      }
-    }
-  `}
-`;
-
-const rootClassName$y = 'dot-illustration';
-const StyledIllustration = styled.span`
-  &.${rootClassName$y} {
-    display: inline-block;
-  }
-`;
-
-const DotIllustration = ({
-  alt,
+const DotInputSelect = ({
   ariaLabel,
-  ariaRole = 'img',
+  autoFocus,
   className,
+  'data-pendoid': dataPendoId = rootSelectClassName,
   'data-testid': dataTestId,
-  illustrationId,
-  theme = 'light',
-  title,
-  tooltip,
-  tooltipPlacement = 'right-end'
+  defaultValue,
+  disabled = false,
+  endIcon,
+  endText,
+  error = false,
+  fullWidth = true,
+  helperText,
+  id,
+  inputRef,
+  label,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  options = [],
+  persistentLabel,
+  readOnly = false,
+  required,
+  shrink,
+  size = 'small',
+  startIcon,
+  success,
+  value,
+  warning = false
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$y, className);
-  return jsx(DotTooltip, {
-    title: tooltip,
-    placement: tooltipPlacement,
-    "data-testid": `${dataTestId || rootClassName$y}-tooltip`,
-    children: jsx(StyledIllustration, {
-      "aria-hidden": "false",
-      "aria-label": ariaLabel || title || 'Illustration',
-      className: rootClasses,
-      "data-testid": dataTestId || rootClassName$y,
-      role: ariaRole,
-      children: jsx("img", {
-        alt: alt || 'Illustration',
-        "aria-label": ariaLabel || title || 'Illustration',
-        className: `illustration-${illustrationId}-${theme} dot-img`,
-        "data-testid": dataTestId && `${dataTestId}-img`,
-        role: ariaRole,
-        title: title || 'Illustration'
-      })
-    })
+  const hasWarning = !error && warning && warningClassName;
+  const hasSuccess = !error && !warning && success && successClassName;
+  const endAdornment = endIcon || endText;
+  const inputStyles = useStylesWithRootClass('dot-select', readOnly && readOnlyClassName$1);
+  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
+  const getOption = option => {
+    return typeof option === 'string' ? option : option.option;
+  };
+  const getValue = option => {
+    return typeof option === 'string' ? option : (option === null || option === void 0 ? void 0 : option.value) || option.option;
+  };
+  return jsxs("div", {
+    className: className,
+    children: [persistentLabel && jsx(DotInputLabel, {
+      disabled,
+      error,
+      id,
+      label,
+      required
+    }), jsx(StyledTextField, {
+      InputProps: {
+        startAdornment: startIcon && jsx(StyledAdornment, {
+          className: `${adornmentIconClassName} start`,
+          position: "start",
+          children: startIcon
+        }),
+        endAdornment: endAdornment && jsx(StyledAdornment, {
+          className: `${adornmentIconClassName} end`,
+          position: "end",
+          children: endAdornment
+        })
+      },
+      SelectProps: {
+        native: !readOnly,
+        readOnly,
+        open: readOnly ? false : undefined
+      },
+      "aria-label": ariaLabel || label,
+      autoFocus: autoFocus,
+      className: rootStyles,
+      defaultValue: defaultValue,
+      disabled: disabled,
+      error: error,
+      fullWidth: fullWidth,
+      helperText: helperText,
+      id: id,
+      InputLabelProps: {
+        shrink: shrink
+      },
+      inputProps: {
+        'aria-label': ariaLabel,
+        'data-pendoid': dataPendoId,
+        'data-testid': dataTestId,
+        className: inputStyles,
+        readOnly
+      },
+      inputRef: inputRef,
+      label: persistentLabel ? null : label,
+      multiline: false,
+      name: name,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      onKeyDown: onKeyDown,
+      required: required,
+      role: "textbox",
+      select: true,
+      size: size,
+      value: value,
+      variant: "outlined",
+      children: options.map(option => jsx("option", {
+        className: "dot-option",
+        value: getValue(option),
+        children: getOption(option)
+      }, getValue(option)))
+    })]
   });
 };
 
-const DotEmptyState = ({
-  ariaLabel,
-  buttonProps,
-  className,
-  'data-testid': dataTestId,
-  illustrationId,
-  imageAltText,
-  imageSrc,
-  subtitle,
-  title
+class ApiError extends Error {
+  constructor(response, message) {
+    super(message);
+    this.url = response.url;
+    this.status = response.status;
+    this.statusText = response.statusText;
+    this.body = response.body;
+  }
+}
+
+const OpenAPI = {
+  BASE: '',
+  VERSION: '0.1',
+  WITH_CREDENTIALS: false,
+  TOKEN: undefined,
+  USERNAME: undefined,
+  PASSWORD: undefined,
+  HEADERS: undefined,
+  ENCODE_PATH: undefined
+};
+
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+var DashboardCreateBody;
+(function (DashboardCreateBody) {
+  (function (lifecycle_state) {
+    lifecycle_state["DRAFT"] = "DRAFT";
+    lifecycle_state["PUBLISHED"] = "PUBLISHED";
+  })(DashboardCreateBody.lifecycle_state || (DashboardCreateBody.lifecycle_state = {}));
+  (function (bi_type) {
+    bi_type["SUPERSET"] = "SUPERSET";
+    bi_type["MICROSTRATEGY"] = "MICROSTRATEGY";
+  })(DashboardCreateBody.bi_type || (DashboardCreateBody.bi_type = {}));
+})(DashboardCreateBody || (DashboardCreateBody = {}));
+
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+var DashboardPatchBody;
+(function (DashboardPatchBody) {
+  (function (lifecycle_state) {
+    lifecycle_state["DRAFT"] = "DRAFT";
+    lifecycle_state["PUBLISHED"] = "PUBLISHED";
+  })(DashboardPatchBody.lifecycle_state || (DashboardPatchBody.lifecycle_state = {}));
+  (function (bi_type) {
+    bi_type["SUPERSET"] = "SUPERSET";
+    bi_type["MICROSTRATEGY"] = "MICROSTRATEGY";
+  })(DashboardPatchBody.bi_type || (DashboardPatchBody.bi_type = {}));
+})(DashboardPatchBody || (DashboardPatchBody = {}));
+
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+var DashboardPutBody;
+(function (DashboardPutBody) {
+  (function (lifecycle_state) {
+    lifecycle_state["DRAFT"] = "DRAFT";
+    lifecycle_state["PUBLISHED"] = "PUBLISHED";
+  })(DashboardPutBody.lifecycle_state || (DashboardPutBody.lifecycle_state = {}));
+  (function (bi_type) {
+    bi_type["SUPERSET"] = "SUPERSET";
+    bi_type["MICROSTRATEGY"] = "MICROSTRATEGY";
+  })(DashboardPutBody.bi_type || (DashboardPutBody.bi_type = {}));
+})(DashboardPutBody || (DashboardPutBody = {}));
+
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+var DashboardView;
+(function (DashboardView) {
+  (function (lifecycle_state) {
+    lifecycle_state["DRAFT"] = "DRAFT";
+    lifecycle_state["PUBLISHED"] = "PUBLISHED";
+  })(DashboardView.lifecycle_state || (DashboardView.lifecycle_state = {}));
+  (function (bi_type) {
+    bi_type["SUPERSET"] = "SUPERSET";
+    bi_type["MICROSTRATEGY"] = "MICROSTRATEGY";
+  })(DashboardView.bi_type || (DashboardView.bi_type = {}));
+})(DashboardView || (DashboardView = {}));
+
+function isDefined(value) {
+  return value !== undefined && value !== null;
+}
+function isString(value) {
+  return typeof value === 'string';
+}
+function isStringWithValue(value) {
+  return isString(value) && value !== '';
+}
+function isBlob(value) {
+  return value instanceof Blob;
+}
+function base64(str) {
+  try {
+    return btoa(str);
+  } catch (err) {
+    return Buffer.from(str).toString('base64');
+  }
+}
+function getQueryString(params) {
+  const qs = [];
+  Object.keys(params).forEach(key => {
+    const value = params[key];
+    if (isDefined(value)) {
+      if (Array.isArray(value)) {
+        value.forEach(value => {
+          qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+        });
+      } else {
+        qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+      }
+    }
+  });
+  if (qs.length > 0) {
+    return `?${qs.join('&')}`;
+  }
+  return '';
+}
+function getUrl(options) {
+  const path = options.path;
+  const url = `${OpenAPI.BASE}${path}`;
+  if (options.query) {
+    return `${url}${getQueryString(options.query)}`;
+  }
+  return url;
+}
+function getFormData(params) {
+  const formData = new FormData();
+  Object.keys(params).forEach(key => {
+    const value = params[key];
+    if (isDefined(value)) {
+      formData.append(key, value);
+    }
+  });
+  return formData;
+}
+function resolve(options, resolver) {
+  return __awaiter(this, void 0, void 0, function* () {
+    if (typeof resolver === 'function') {
+      return resolver(options);
+    }
+    return resolver;
+  });
+}
+function getHeaders(options) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const token = yield resolve(options, OpenAPI.TOKEN);
+    const username = yield resolve(options, OpenAPI.USERNAME);
+    const password = yield resolve(options, OpenAPI.PASSWORD);
+    const additionalHeaders = yield resolve(options, OpenAPI.HEADERS);
+    const defaultHeaders = Object.entries(Object.assign(Object.assign({
+      Accept: 'application/json'
+    }, additionalHeaders), options.headers)).filter(([key, value]) => isDefined(value)).reduce((headers, [key, value]) => Object.assign(Object.assign({}, headers), {
+      [key]: value
+    }), {});
+    const headers = new Headers(defaultHeaders);
+    if (isStringWithValue(token)) {
+      headers.append('Authorization', `Bearer ${token}`);
+    }
+    if (isStringWithValue(username) && isStringWithValue(password)) {
+      const credentials = base64(`${username}:${password}`);
+      headers.append('Authorization', `Basic ${credentials}`);
+    }
+    if (options.body) {
+      if (options.mediaType) {
+        headers.append('Content-Type', options.mediaType);
+      } else if (isBlob(options.body)) {
+        headers.append('Content-Type', options.body.type || 'application/octet-stream');
+      } else if (isString(options.body)) {
+        headers.append('Content-Type', 'text/plain');
+      } else {
+        headers.append('Content-Type', 'application/json');
+      }
+    }
+    return headers;
+  });
+}
+function getRequestBody(options) {
+  var _a;
+  if (options.formData) {
+    return getFormData(options.formData);
+  }
+  if (options.body) {
+    if ((_a = options.mediaType) === null || _a === void 0 ? void 0 : _a.includes('/json')) {
+      return JSON.stringify(options.body);
+    } else if (isString(options.body) || isBlob(options.body)) {
+      return options.body;
+    } else {
+      return JSON.stringify(options.body);
+    }
+  }
+  return undefined;
+}
+function sendRequest(options, url) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const request = {
+      method: options.method,
+      headers: yield getHeaders(options),
+      body: getRequestBody(options)
+    };
+    return yield fetch(url, request);
+  });
+}
+function getResponseHeader(response, responseHeader) {
+  if (responseHeader) {
+    const content = response.headers.get(responseHeader);
+    if (isString(content)) {
+      return content;
+    }
+  }
+  return null;
+}
+function getResponseBody(response) {
+  return __awaiter(this, void 0, void 0, function* () {
+    if (response.status !== 204) {
+      try {
+        const contentType = response.headers.get('Content-Type');
+        if (contentType) {
+          const isJSON = contentType.toLowerCase().startsWith('application/json');
+          if (isJSON) {
+            return yield response.json();
+          } else {
+            return yield response.text();
+          }
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    return null;
+  });
+}
+function catchErrors(options, result) {
+  const errors = Object.assign({
+    400: 'Bad Request',
+    401: 'Unauthorized',
+    403: 'Forbidden',
+    404: 'Not Found',
+    500: 'Internal Server Error',
+    502: 'Bad Gateway',
+    503: 'Service Unavailable'
+  }, options.errors);
+  const error = errors[result.status];
+  if (error) {
+    throw new ApiError(result, error);
+  }
+  if (!result.ok) {
+    throw new ApiError(result, 'Generic Error');
+  }
+}
+/**
+ * Request using fetch client
+ * @param options The request options from the the service
+ * @returns ApiResult
+ * @throws ApiError
+ */
+function request(options) {
+  return __awaiter(this, void 0, void 0, function* () {
+    const url = getUrl(options);
+    const response = yield sendRequest(options, url);
+    const responseBody = yield getResponseBody(response);
+    const responseHeader = getResponseHeader(response, options.responseHeader);
+    const result = {
+      url,
+      ok: response.ok,
+      status: response.status,
+      statusText: response.statusText,
+      body: responseHeader || responseBody
+    };
+    catchErrors(options, result);
+    return result;
+  });
+}
+
+class CategoriesService {
+  /**
+   * Get a list of Categories by Application type.
+   * Return a list of Categories by Application type.
+   * @returns AllCategoriesResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getCategoriesService() {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/categories`,
+        errors: {
+          401: `Could not resolve a valid Tenant from the provided API Token.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Get Categories for a single application type.
+   * Return all Categories for a single application type.
+   * @param appType
+   * @returns CategoriesResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getCategoriesService1(appType) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/categories/${appType}`,
+        errors: {
+          400: `Given app type is not valid.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`
+        }
+      });
+      return result.body;
+    });
+  }
+}
+
+class DashboardsService {
+  /**
+   * Get a list of Dashboards.
+   * Return a list of Dashboard definitions, filtered by query parameters.
+   * @param start Offset of the first fetched item.
+   * @param count Maximum number of fetched items.
+   * @param sort Sort ordering to apply to the query.
+   * @param filter List of filters (each filter is a separate query param, and they are OR'ed).
+   *
+   * * **Filterable field names**: author_fullname, author_id, bi_type, categories, created_dt, description, external_embedding_id, external_id, id, is_ootb_dashboard, lifecycle_state, name, target_apps, updated_dt
+   * * **Searchable field names**: author_fullname, categories, description, name
+   *
+   * @param favorite Boolean flag to only return dashboards marked as favorites.
+   * @param q Case-insensitive search of all text fields.
+   * @param authorFullname String match on Dashboard author fullname.
+   * @param authorId String match on Dashboard author user id.
+   * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
+   * @param description String match on Dashboard description.
+   * @param id Dashboard ID.
+   * @param isOotbDashboard Boolean match on Dashboard OOTB status.
+   * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
+   * @param name String match on Dashboard name.
+   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY' or 'RELEASE'.
+   * @returns DashboardViewPagedResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getDashboardsService(start, count = 20, sort = 'id', filter, favorite = null, q = null, authorFullname = null, authorId = null, biType = 'MICROSTRATEGY', description = null, id = null, isOotbDashboard = null, lifecycleState = null, name = null, targetApp = null) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/dashboards`,
+        query: {
+          start: start,
+          count: count,
+          sort: sort,
+          filter: filter,
+          favorite: favorite,
+          q: q,
+          author_fullname: authorFullname,
+          author_id: authorId,
+          bi_type: biType,
+          description: description,
+          id: id,
+          is_ootb_dashboard: isOotbDashboard,
+          lifecycle_state: lifecycleState,
+          name: name,
+          target_app: targetApp
+        },
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Create a Dashboard definition.
+   * Creates a Dashboard definition.
+   * @param requestBody
+   * @returns DashboardView Dashboard created.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static postDashboardsService(requestBody) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'POST',
+        path: `/metadata/bi/dashboards`,
+        body: requestBody,
+        mediaType: 'application/json',
+        errors: {
+          400: `The provided data is not valid.`,
+          404: `The dashboard could not be found.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Get one Dashboard definition.
+   * Return a single Dashboard definition, selected by ID.
+   * @param dashboardId
+   * @returns DashboardView OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getDashboardsService1(dashboardId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/dashboards/${dashboardId}`,
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The dashboard could not be found.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Sets a single Dashboard definition.
+   * Sets a Dashboard definition, selected by ID.
+   * @param dashboardId
+   * @param requestBody
+   * @param isSync Sync the dashboard with BI
+   * @returns DashboardView Dashboard updated.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static putDashboardsService(dashboardId, requestBody, isSync = null) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'PUT',
+        path: `/metadata/bi/dashboards/${dashboardId}`,
+        query: {
+          is_sync: isSync
+        },
+        body: requestBody,
+        mediaType: 'application/json',
+        errors: {
+          400: `The provided data is not valid.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The dashboard could not be found.`,
+          409: `Unable to update object because IDs are different.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Updates a single Dashboard definition.
+   * Updates a Dashboard definition, selected by ID.
+   * @param dashboardId
+   * @param requestBody
+   * @param isSync Sync the dashboard with BI
+   * @returns DashboardView Dashboard updated.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static patchDashboardsService(dashboardId, requestBody, isSync = null) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'PATCH',
+        path: `/metadata/bi/dashboards/${dashboardId}`,
+        query: {
+          is_sync: isSync
+        },
+        body: requestBody,
+        mediaType: 'application/json',
+        errors: {
+          400: `The provided data is not valid.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The dashboard could not be found.`,
+          409: `Unable to update object because IDs are different.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Delete a Dashboard definition.
+   * Deletes a single Dashboard definition, selected by ID.
+   * @param dashboardId
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static deleteDashboardsService(dashboardId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'DELETE',
+        path: `/metadata/bi/dashboards/${dashboardId}`
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Create a copy of existing dashboard
+   * Create a copy of existing dashboard
+   * @param dashboardId
+   * @param requestBody
+   * @returns DashboardView Dashboard copied.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static postDashboardsService1(dashboardId, requestBody) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'POST',
+        path: `/metadata/bi/dashboards/${dashboardId}/copy`,
+        body: requestBody,
+        mediaType: 'application/json',
+        errors: {
+          400: `The provided data is not valid.`,
+          404: `The dashboard could not be found.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Favorite a dashboard
+   * Favorite a dashboard
+   * @param dashboardId
+   * @returns DashboardView Dashboard favorited.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static postDashboardsService2(dashboardId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'POST',
+        path: `/metadata/bi/dashboards/${dashboardId}/favorite`,
+        errors: {
+          400: `The provided data is not valid.`,
+          404: `The dashboard could not be found.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Un-favorite a dashboard
+   * Un-favorite a dashboard
+   * @param dashboardId
+   * @returns DashboardView Dashboard un-favorited.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static deleteDashboardsService1(dashboardId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'DELETE',
+        path: `/metadata/bi/dashboards/${dashboardId}/favorite`,
+        errors: {
+          400: `The provided data is not valid.`,
+          404: `The dashboard could not be found.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Get Metadata (categories and authors)
+   * Return all Metadata for the given query parameters: bi_type, lifecycle_state, target_app, and/or is_ootb_dashboard
+   * @param biType String match on Dashboard bi type - 'MICROSTRATEGY'.
+   * @param isOotbDashboard Boolean match on Dashboard OOTB status.
+   * @param lifecycleState String match on Dashboard lifecycle state - 'DRAFT' or 'PUBLISHED'.
+   * @param targetApp String match on the Dashboard target application - 'AGILITY', 'CONTINUOUSTEST', 'DEPLOY' or 'RELEASE'.
+   * @returns MetadataResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getDashboardsService2(biType = 'MICROSTRATEGY', isOotbDashboard = null, lifecycleState = null, targetApp = null) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/dashboards/metadata`,
+        query: {
+          bi_type: biType,
+          is_ootb_dashboard: isOotbDashboard,
+          lifecycle_state: lifecycleState,
+          target_app: targetApp
+        },
+        errors: {
+          400: `Given query params are not valid.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+}
+
+class HelpContentService {
+  /**
+   * Gets help content definitions.
+   * Return help content definitions.
+   * @returns HelpContentPagedResponse OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getHelpContent() {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/helpcontent`,
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Upload an HTML file to be displayed as help content.
+   * Upload help content.
+   * @param requestBody
+   * @returns HelpContent Content uploaded.
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static createHelpContent(requestBody) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'POST',
+        path: `/metadata/bi/helpcontent`,
+        body: requestBody,
+        errors: {
+          400: `The provided data is not valid.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Get a help content definition.
+   * Return a single help content definition, selected by ID.
+   * @param helpContentId
+   * @returns HelpContent OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static getHelpContentById(helpContentId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'GET',
+        path: `/metadata/bi/helpcontent/${helpContentId}`,
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The help content could not be found.`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Update a help content definition.
+   * Update a single help content definition, selected by ID.
+   * @param helpContentId
+   * @param requestBody
+   * @returns HelpContent OK
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static putHelpContentById(helpContentId, requestBody) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'PUT',
+        path: `/metadata/bi/helpcontent/${helpContentId}`,
+        body: requestBody,
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The help content could not be found.`,
+          422: `Unprocessable Entity`
+        }
+      });
+      return result.body;
+    });
+  }
+  /**
+   * Delete a help content definition.
+   * Delete a single help content definition, selected by ID.
+   * @param helpContentId
+   * @returns Error Default error response
+   * @throws ApiError
+   */
+  static deleteHelpContentById(helpContentId) {
+    return __awaiter(this, void 0, void 0, function* () {
+      const result = yield request({
+        method: 'DELETE',
+        path: `/metadata/bi/helpcontent/${helpContentId}`,
+        errors: {
+          400: `An unknown parameter was specified.`,
+          401: `Could not resolve a valid Tenant from the provided API Token.`,
+          404: `The help content could not be found.`
+        }
+      });
+      return result.body;
+    });
+  }
+}
+
+const helpContent = {
+  id: 'test-help-content-1',
+  content: '<html><h1>Test</h1></html>'
+};
+({
+  author_fullname: 'Dashboard1 Author',
+  author_id: 'id1a',
+  target_apps: ['AGILITY'],
+  external_id: '1',
+  name: 'Test dashboard 1',
+  description: '',
+  dashboard_url: 'https://test.com',
+  server_url: 'https://test.com',
+  external_embedding_id: null,
+  created_dt: '2023-11-22T06:42:07.872000',
+  id: 'id1',
+  lifecycle_state: DashboardView.lifecycle_state.DRAFT,
+  application_instances: [],
+  categories: [],
+  bi_type: DashboardView.bi_type.SUPERSET,
+  is_ootb_dashboard: false,
+  thumbnail: '',
+  external_object: {},
+  embed_config: {},
+  help_content_id: helpContent.id,
+  filter_configuration: [],
+  favorite: false
+});
+({
+  author_fullname: 'Dashboard2 Author',
+  author_id: 'id2a',
+  target_apps: ['AGILITY'],
+  external_id: '2',
+  name: 'dashboard2',
+  description: '',
+  dashboard_url: 'https://test.com',
+  server_url: 'https://test.com',
+  external_embedding_id: null,
+  created_dt: '2023-11-22T05:42:07.872000',
+  id: 'id2',
+  lifecycle_state: DashboardView.lifecycle_state.DRAFT,
+  application_instances: [],
+  categories: [],
+  bi_type: DashboardView.bi_type.MICROSTRATEGY,
+  is_ootb_dashboard: false,
+  thumbnail: '',
+  external_object: {},
+  embed_config: {},
+  help_content_id: helpContent.id,
+  filter_configuration: [],
+  favorite: true
+});
+({
+  author_fullname: 'Dashboard3 Author',
+  author_id: 'id3a',
+  target_apps: ['AGILITY'],
+  external_id: '3',
+  name: 'dashboard3',
+  description: '',
+  dashboard_url: 'https://test.com',
+  server_url: 'https://test.com',
+  external_embedding_id: null,
+  created_dt: '2023-11-21T04:42:07.872000',
+  id: 'id3',
+  lifecycle_state: DashboardView.lifecycle_state.PUBLISHED,
+  application_instances: [],
+  categories: [],
+  bi_type: DashboardView.bi_type.MICROSTRATEGY,
+  is_ootb_dashboard: true,
+  thumbnail: '',
+  external_object: {},
+  embed_config: {},
+  help_content_id: helpContent.id,
+  filter_configuration: [],
+  favorite: false
+});
+const getCategoriesMock = {
+  categories: {
+    AGILITY: ['Scrum Master', 'DevOps Manager', 'Release Train Engineer', 'Agility Analytics'],
+    CONTINUOUSTEST: ['User', 'Project Admin', 'Cloud Admin'],
+    DEPLOY: [],
+    RELEASE: ['DevOps COE', 'Engineering Manager', 'Release Manager', 'Platform Engineer', 'Platform Product Manager'],
+    TEAMFORGE: ['Scrum Master']
+  }
+};
+const accountId = 'acct1';
+const applicationId = 'app1';
+const nullStr = null;
+const initialAppModel = {
+  id: applicationId,
+  account_id: accountId,
+  alternate_label: nullStr,
+  description: '',
+  enabled: true,
+  instance_state: 0,
+  needs_authentication: true,
+  product_instance_id: nullStr
+};
+Object.assign(Object.assign({}, initialAppModel), {
+  id: '2',
+  created_date: '2023-05-31T20:27:42.326428+00:00',
+  logo: 'PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIGZpbGw9IiMzM0QzODkiLz4KPHBhdGggZD0iTTE3LjAwMzMgNy42MjMyMkgxNi40NTY3QzE2LjM5MjUgNy42Mjg2MyAxNi4zMzI0IDcuNjU2NzkgMTYuMjg3MSA3LjcwMjY0QzE2LjI0MTkgNy43NDg0OCAxNi4yMTQ2IDcuODA4OTggMTYuMjEgNy44NzMyMlY5LjE0MzIyQzE1Ljc0MzIgOC40MzI0OCAxNS4xMDY0IDcuODQ5NTUgMTQuMzU3MiA3LjQ0NzMyQzEzLjYwODEgNy4wNDUwOSAxMi43NzAzIDYuODM2MyAxMS45MiA2LjgzOTg5QzExLjA4NDUgNi44NDQ3NSAxMC4yNjI3IDcuMDUyNDMgOS41MjUxNSA3LjQ0NTA4QzguNzg3NjMgNy44Mzc3MiA4LjE1NjQ5IDguNDAzNTkgNy42ODU5OCA5LjA5NDA1QzcuMjE1NDcgOS43ODQ1IDYuOTE5NjYgMTAuNTc4OSA2LjgyMzk4IDExLjQwODlDNi43MjgzMSAxMi4yMzg5IDYuODM1NjIgMTMuMDc5OCA3LjEzNjY5IDEzLjg1OTJDNy40Mzc3NyAxNC42Mzg2IDcuOTIzNjEgMTUuMzMzMiA4LjU1MjQ1IDE1Ljg4MzRDOS4xODEyOCAxNi40MzM1IDkuOTM0MzEgMTYuODIyNyAxMC43NDY4IDE3LjAxNzZDMTEuNTU5MyAxNy4yMTI0IDEyLjQwNjkgMTcuMjA3IDEzLjIxNjkgMTcuMDAxOUMxNC4wMjY5IDE2Ljc5NjcgMTQuNzc0OSAxNi4zOTggMTUuMzk2NyAxNS44Mzk5QzE1LjQyNTcgMTUuODE4MiAxNS40NDkyIDE1Ljc5IDE1LjQ2NTQgMTUuNzU3NkMxNS40ODE2IDE1LjcyNTIgMTUuNDkgMTUuNjg5NCAxNS40OSAxNS42NTMyQzE1LjQ5IDE1LjYxNyAxNS40ODE2IDE1LjU4MTMgMTUuNDY1NCAxNS41NDg5QzE1LjQ0OTIgMTUuNTE2NSAxNS40MjU3IDE1LjQ4ODMgMTUuMzk2NyAxNS40NjY2TDE0Ljk4MzMgMTUuMDUzMkMxNC45MzY5IDE1LjAxMzUgMTQuODc3OCAxNC45OTE3IDE0LjgxNjcgMTQuOTkxN0MxNC43NTU2IDE0Ljk5MTcgMTQuNjk2NSAxNS4wMTM1IDE0LjY1IDE1LjA1MzJDMTMuOTA3NiAxNS43MzUyIDEyLjkzMTIgMTYuMTA1MiAxMS45MjMzIDE2LjA4NjZDMTEuMTg5MiAxNi4wODcgMTAuNDY4NCAxNS44ODk3IDkuODM2ODcgMTUuNTE1NEM5LjIwNTMxIDE1LjE0MSA4LjY4NjI3IDE0LjYwMzQgOC4zMzQyOSAxMy45NTkxQzcuOTgyMzEgMTMuMzE0OCA3LjgxMDM5IDEyLjU4NzYgNy44MzY2MiAxMS44NTM5QzcuODYyODQgMTEuMTIwMiA4LjA4NjI0IDEwLjQwNzEgOC40ODMzMiA5Ljc4OTU5QzguODgwNCA5LjE3MjA3IDkuNDM2NSA4LjY3MjkyIDEwLjA5MzIgOC4zNDQ2MUMxMC43NDk5IDguMDE2MyAxMS40ODI4IDcuODcwOTUgMTIuMjE1MSA3LjkyMzg0QzEyLjk0NzQgNy45NzY3NCAxMy42NTE5IDguMjI1OTIgMTQuMjU0NSA4LjY0NTJDMTQuODU3MiA5LjA2NDQ4IDE1LjMzNTggOS42MzgzNyAxNS42NCAxMC4zMDY2SDE0LjE0NjdDMTQuMDgyOCAxMC4zMTEyIDE0LjAyMjcgMTAuMzM4NyAxMy45Nzc0IDEwLjM4NEMxMy45MzIxIDEwLjQyOTMgMTMuOTA0NiAxMC40ODkzIDEzLjkgMTAuNTUzMlYxMS4wNDY2QzEzLjkwNDYgMTEuMTEwNCAxMy45MzIxIDExLjE3MDUgMTMuOTc3NCAxMS4yMTU4QzE0LjAyMjcgMTEuMjYxMSAxNC4wODI4IDExLjI4ODYgMTQuMTQ2NyAxMS4yOTMySDE3QzE3LjA2MzkgMTEuMjg4NiAxNy4xMjQgMTEuMjYxMSAxNy4xNjkzIDExLjIxNThDMTcuMjE0NiAxMS4xNzA1IDE3LjI0MiAxMS4xMTA0IDE3LjI0NjcgMTEuMDQ2NlY3Ljg3MzIyQzE3LjI0MjIgNy44MDk1IDE3LjIxNTQgNy43NDk0MiAxNy4xNzA4IDcuNzAzNjRDMTcuMTI2MyA3LjY1Nzg3IDE3LjA2NjkgNy42MjkzOCAxNy4wMDMzIDcuNjIzMjJaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTIuMTIzMiA5LjM5OTg3QzEyLjE2NjcgOS4zOTc0NyAxMi4yMDc3IDkuMzc5MTQgMTIuMjM4NCA5LjM0ODM5QzEyLjI2OTIgOS4zMTc2NCAxMi4yODc1IDkuMjc2NjIgMTIuMjg5OSA5LjIzMzJDMTIuMjg5OSA5LjIzMzIgMTIuMzM5OSA4LjgzMzIgMTIuMzM5OSA4LjY5OTg3QzEyLjMzOTkgOC41NjY1MyAxMi4yNDk5IDguNDkzMiAxMi4xNjY2IDguNDg5ODdDMTEuNTA0NSA4LjQ1MjMyIDEwLjg0NTcgOC42MDc5MSAxMC4yNzAzIDguOTM3NzFDOS42OTQ5NyA5LjI2NzUyIDkuMjI3NzkgOS43NTczNCA4LjkyNTU3IDEwLjM0NzdDOC42MjMzNSAxMC45MzggOC40OTkxIDExLjYwMzQgOC41Njc5MiAxMi4yNjNDOC42MzY3NSAxMi45MjI2IDguODk1NjggMTMuNTQ4IDkuMzEzMjUgMTQuMDYzMkM5LjgzODQ5IDE0LjcyMzkgMTAuNTkwNSAxNS4xNjU4IDExLjQyMzIgMTUuMzAzMkMxMS41MTY2IDE1LjMwMzIgMTEuNTk5OSAxNS4yNjMyIDExLjYyOTkgMTUuMTM2NUMxMS42Mjk5IDE1LjEzNjUgMTEuNjk5OSAxNC44MDMyIDExLjcxMzIgMTQuNjgzMkMxMS43MjMzIDE0LjYzOSAxMS43MTU3IDE0LjU5MjcgMTEuNjkyIDE0LjU1NEMxMS42Njg0IDE0LjUxNTQgMTEuNjMwNSAxNC40ODc2IDExLjU4NjYgMTQuNDc2NUMxMS4yMjUgMTQuNDIyNyAxMC44ODA2IDE0LjI4NjkgMTAuNTc5NSAxNC4wNzk1QzEwLjI3ODUgMTMuODcyMSAxMC4wMjkgMTMuNTk4NiA5Ljg0OTkyIDEzLjI3OTlDOS42NDA0NiAxMi45Mjc0IDkuNTEzOTMgMTIuNTMxOCA5LjQ3OTkyIDEyLjEyMzJDOS40NDk4NiAxMS43NjQ4IDkuNDk2OTcgMTEuNDA0MiA5LjYxODA2IDExLjA2NTVDOS43MzkxNSAxMC43MjY5IDkuOTMxNDIgMTAuNDE4MSAxMC4xODE5IDEwLjE2MDFDMTAuNDMyNCA5LjkwMTk5IDEwLjczNTMgOS43MDA2MSAxMS4wNzAyIDkuNTY5NDdDMTEuNDA1IDkuNDM4MzQgMTEuNzY0MSA5LjM4MDUxIDEyLjEyMzIgOS4zOTk4N1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMy45NDMzIDEzLjE1NjhDMTMuOTYgMTMuMTM4OSAxMy45NzI0IDEzLjExNzUgMTMuOTc5NiAxMy4wOTQyQzEzLjk4NjggMTMuMDcwOCAxMy45ODg1IDEzLjA0NjEgMTMuOTg0NiAxMy4wMjE5QzEzLjk4MDggMTIuOTk3OCAxMy45NzE0IDEyLjk3NDkgMTMuOTU3MyAxMi45NTQ5QzEzLjk0MzIgMTIuOTM0OSAxMy45MjQ3IDEyLjkxODUgMTMuOTAzMyAxMi45MDY4TDEzLjYxMzMgMTIuNzAwMUMxMy41NzM5IDEyLjY3NjIgMTMuNTI3MiAxMi42Njc0IDEzLjQ4MTggMTIuNjc1NEMxMy40MzY0IDEyLjY4MzMgMTMuMzk1NSAxMi43MDc1IDEzLjM2NjYgMTIuNzQzNEMxMy4yMzIxIDEyLjkwMzMgMTMuMDY0MiAxMy4wMzE4IDEyLjg3NDcgMTMuMTJDMTIuNjg1MyAxMy4yMDgyIDEyLjQ3ODkgMTMuMjUzOCAxMi4yNjk5IDEzLjI1MzhDMTIuMDYxIDEzLjI1MzggMTEuODU0NiAxMy4yMDgyIDExLjY2NTEgMTMuMTJDMTEuNDc1NyAxMy4wMzE4IDExLjMwNzggMTIuOTAzMyAxMS4xNzMzIDEyLjc0MzRDMTEuMTI3NyAxMi42OTEzIDExLjA4NjQgMTIuNjM1NiAxMS4wNDk5IDEyLjU3NjhDMTAuOTI2OCAxMi4zNzc2IDEwLjg1ODIgMTIuMTQ5NSAxMC44NTEyIDExLjkxNTVDMTAuODQ0MiAxMS42ODE0IDEwLjg5ODkgMTEuNDQ5NiAxMS4wMDk5IDExLjI0MzRDMTEuMDMxNCAxMS4yMTAyIDExLjAzODkgMTEuMTY5OSAxMS4wMzA4IDExLjEzMTJDMTEuMDIyNyAxMS4wOTI1IDEwLjk5OTYgMTEuMDU4NSAxMC45NjY2IDExLjAzNjhMMTAuNjMzMyAxMC43OTAxQzEwLjU4OTEgMTAuNzcxNSAxMC41Mzk2IDEwLjc2OTcgMTAuNDk0MiAxMC43ODUxQzEwLjQ0ODcgMTAuODAwNCAxMC40MTA1IDEwLjgzMTkgMTAuMzg2NiAxMC44NzM0QzEwLjIzNzYgMTEuMTQ2NSAxMC4xNTMgMTEuNDUgMTAuMTM5MSAxMS43NjA4QzEwLjEyNTMgMTIuMDcxNiAxMC4xODI1IDEyLjM4MTUgMTAuMzA2NiAxMi42NjY4QzEwLjQxMjcgMTIuOTM4IDEwLjU4MzEgMTMuMTc5NCAxMC44MDMzIDEzLjM3MDFDMTEuMTkwMiAxMy43NDYxIDExLjcxMDQgMTMuOTUzNCAxMi4yNDk5IDEzLjk0NjhDMTIuNTc0MyAxMy45NTY1IDEyLjg5NjQgMTMuODkwMiAxMy4xOTA1IDEzLjc1M0MxMy40ODQ1IDEzLjYxNTggMTMuNzQyNCAxMy40MTE2IDEzLjk0MzMgMTMuMTU2OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=',
+  logo_product_name: 'Agility',
+  modified_date: '2023-06-01T18:49:20.747702+00:00',
+  name: 'Agility',
+  url: 'https://digital.ai/agility'
+});
+Object.assign(Object.assign({}, initialAppModel), {
+  id: '5',
+  created_date: '2023-05-24T20:56:43.905064+00:00',
+  logo: 'PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIGZpbGw9IiMyNzlGRUEiLz4KPHBhdGggZD0iTTE0LjE4NjcgMTEuMjY2N0wxMi4xNjM0IDEwLjA4MzNMMTAuMTM2NyAxMS4yNjY3VjEzLjYyTDEyLjE2MzQgMTQuNzg2N0wxNC4xODY3IDEzLjYyVjExLjI2NjdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOC40MzY2NiAxMi4wMDAxTDcuNDczMzMgMTEuMTUwMVYxNS4xNjY3TDEwLjQxIDE2LjgzNjdWMTUuNzAzNEw4LjQzNjY2IDE0LjU0MDFWMTIuMDAwMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xNS44OTY1IDEyVjE0LjU4MzNMMTMuOTYzMiAxNS43MDMzVjE2LjkzNjdMMTYuODUzMiAxNS4xNTMzVjExLjA5NjdMMTUuODk2NSAxMloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xMi4xNTY1IDguMTMzMzNMMTQuNzE2NSA5LjYxMzMzTDE1LjQxNjUgOC44OUwxMi4xNTY1IDdMOC44Nzk4OCA4LjkwNjY3TDkuNTc5ODggOS42MzMzM0wxMi4xNTY1IDguMTMzMzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K',
+  logo_product_name: 'Deploy',
+  modified_date: '2023-05-24T20:56:43.905064+00:00',
+  name: 'Deploy',
+  url: 'https://digital.ai/deploy'
+});
+Object.assign(Object.assign({}, initialAppModel), {
+  id: '6',
+  created_date: '2023-05-24T20:57:43.929634+00:00',
+  logo: 'PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIGZpbGw9IiNGN0I3MzEiLz4KPHBhdGggZD0iTTE3LjAxNjggMTAuNDgzNkMxNi44NTk4IDEwLjQ4MTkgMTYuNzA0IDEwLjUxMTEgMTYuNTU4MyAxMC41Njk3QzE2LjQxMjYgMTAuNjI4MiAxNi4yNzk5IDEwLjcxNSAxNi4xNjc5IDEwLjgyNDlDMTYuMDU1OCAxMC45MzQ4IDE1Ljk2NjUgMTEuMDY1OCAxNS45MDUxIDExLjIxMDNDMTUuODQzNyAxMS4zNTQ4IDE1LjgxMTQgMTEuNTEgMTUuODEwMSAxMS42NjdDMTUuODEyNSAxMS44ODg3IDE1Ljg3NTkgMTIuMTA1NiAxNS45OTM0IDEyLjI5MzZMMTUuMzI2OCAxMy4wMDM2QzE1LjEwNjIgMTIuODc2NiAxNC44NTE2IDEyLjgyMTQgMTQuNTk4MiAxMi44NDU5QzE0LjM0NDkgMTIuODcwNCAxNC4xMDU1IDEyLjk3MzMgMTMuOTEzNCAxMy4xNDAzTDEzLjIxNjggMTIuNjY3QzEzLjMyMDQgMTIuMzc1MyAxMy4zNTE0IDEyLjA2MjcgMTMuMzA3IDExLjc1NjRDMTMuMjYyNiAxMS40NSAxMy4xNDQxIDExLjE1OTEgMTIuOTYxOSAxMC45MDg5QzEyLjc3OTYgMTAuNjU4NyAxMi41MzkxIDEwLjQ1NjcgMTIuMjYxMSAxMC4zMjA0QzExLjk4MzIgMTAuMTg0MiAxMS42NzYyIDEwLjExNzggMTEuMzY2OCAxMC4xMjdDMTAuOTI1NyAxMC4xMjM3IDEwLjQ5NjMgMTAuMjY4IDEwLjE0NjggMTAuNTM3TDkuMjgwMSA5Ljc0MzY0QzkuMzgwNzggOS41NjkzNSA5LjQzMzY4IDkuMzcxNTggOS40MzM0MyA5LjE3MDNDOS40MzA4NCA5LjAxMzQ1IDkuMzk3MjUgOC44NTg2NiA5LjMzNDYxIDguNzE0ODRDOS4yNzE5NyA4LjU3MTAxIDkuMTgxNTEgOC40NDA5OSA5LjA2ODQ0IDguMzMyMjVDOC45NTUzNyA4LjIyMzUyIDguODIxOTEgOC4xMzgyMSA4LjY3NTc1IDguMDgxMjRDOC41Mjk1OCA4LjAyNDI3IDguMzczNiA3Ljk5Njc3IDguMjE2NzcgOC4wMDAzQzcuODk5MTUgOC4wMDEwMyA3LjU5NDI2IDguMTI1MjUgNy4zNjY1OCA4LjM0NjcxQzcuMTM4OTEgOC41NjgxNyA3LjAwNjI4IDguODY5NDkgNi45OTY3NyA5LjE4Njk3QzYuOTk4NDggOS4zNDQ2NyA3LjAzMTUzIDkuNTAwNDYgNy4wOTM5OSA5LjY0NTI4QzcuMTU2NDUgOS43OTAxIDcuMjQ3MDcgOS45MjEwNiA3LjM2MDU5IDEwLjAzMDVDNy40NzQxIDEwLjE0IDcuNjA4MjUgMTAuMjI1OSA3Ljc1NTI0IDEwLjI4M0M3LjkwMjIyIDEwLjM0MDIgOC4wNTkxIDEwLjM2NzYgOC4yMTY3NyAxMC4zNjM2QzguNDM5MDYgMTAuMzYwOSA4LjY1NjU3IDEwLjI5ODcgOC44NDY3NyAxMC4xODM2TDkuNzEzNDMgMTAuOTc3QzkuNDk5OTEgMTEuMjk0OSA5LjM4ODQgMTEuNjcwNCA5LjM5Mzc2IDEyLjA1MzNDOS4zOTkxMiAxMi40MzYzIDkuNTIxMSAxMi44MDg1IDkuNzQzNDMgMTMuMTIwM0w5LjA3Njc3IDEzLjgzMDNDOC44NzU5NSAxMy43MTYyIDguNjQ3NTkgMTMuNjU5NyA4LjQxNjc3IDEzLjY2N0M4LjE4NjA3IDEzLjY3MjkgNy45NjIyNCAxMy43NDY3IDcuNzczMjcgMTMuODc5MUM3LjU4NDMgMTQuMDExNiA3LjQzODU5IDE0LjE5NjggNy4zNTQzNyAxNC40MTE3QzcuMjcwMTUgMTQuNjI2NSA3LjI1MTE1IDE0Ljg2MTUgNy4yOTk3NSAxNS4wODdDNy4zNDgzNiAxNS4zMTI2IDcuNDYyNDEgMTUuNTE4OSA3LjYyNzYzIDE1LjY4QzcuNzkyODYgMTUuODQxMSA4LjAwMTkyIDE1Ljk0OTkgOC4yMjg2NyAxNS45OTI4QzguNDU1NDIgMTYuMDM1NyA4LjY4OTc4IDE2LjAxMDggOC45MDI0NCAxNS45MjEyQzkuMTE1MDkgMTUuODMxNSA5LjI5NjYgMTUuNjgxMiA5LjQyNDI1IDE1LjQ4ODlDOS41NTE5IDE1LjI5NjcgOS42MjAwMiAxNS4wNzExIDkuNjIwMSAxNC44NDAzQzkuNjE4MzkgMTQuNjQ1MiA5LjU3MDQxIDE0LjQ1MzMgOS40ODAxIDE0LjI4MDNMMTAuMTQ2OCAxMy41NzAzQzEwLjU2MTMgMTMuODc3MiAxMS4wNzkyIDE0LjAxMDIgMTEuNTkwMiAxMy45NDExQzEyLjEwMTMgMTMuODcyIDEyLjU2NTMgMTMuNjA2MiAxMi44ODM0IDEzLjIwMDNMMTMuNTUwMSAxMy42MzdDMTMuNTA0OCAxMy43NTk3IDEzLjQ4MTEgMTMuODg5NCAxMy40ODAxIDE0LjAyMDNDMTMuNDk2MyAxNC4zMjg5IDEzLjYzMDQgMTQuNjE5NiAxMy44NTQ2IDE0LjgzMjNDMTQuMDc4OCAxNS4wNDUgMTQuMzc2IDE1LjE2MzYgMTQuNjg1MSAxNS4xNjM2QzE0Ljk5NDIgMTUuMTYzNiAxNS4yOTE0IDE1LjA0NSAxNS41MTU2IDE0LjgzMjNDMTUuNzM5OCAxNC42MTk2IDE1Ljg3MzkgMTQuMzI4OSAxNS44OTAxIDE0LjAyMDNDMTUuODkyMyAxMy44MDgxIDE1LjgzMzMgMTMuNTk5OCAxNS43MjAxIDEzLjQyMDNMMTYuMzg2OCAxMi43MTAzQzE2LjU2MTMgMTIuODEgMTYuNzU5MSAxMi44NjE3IDE2Ljk2MDEgMTIuODYwM0MxNy4xMjEyIDEyLjg3MDYgMTcuMjgyNyAxMi44NDgxIDE3LjQzNDggMTIuNzk0QzE3LjU4NjkgMTIuNzQgMTcuNzI2NCAxMi42NTU1IDE3Ljg0NDggMTIuNTQ1OEMxNy45NjMzIDEyLjQzNjEgMTguMDU4MSAxMi4zMDM1IDE4LjEyMzcgMTIuMTU2QzE4LjE4OTMgMTIuMDA4NSAxOC4yMjQxIDExLjg0OTIgMTguMjI2MSAxMS42ODc4QzE4LjIyODIgMTEuNTI2NCAxOC4xOTc0IDExLjM2NjIgMTguMTM1NiAxMS4yMTcxQzE4LjA3MzcgMTEuMDY4IDE3Ljk4MjIgMTAuOTMzIDE3Ljg2NjYgMTAuODIwM0MxNy43NTEgMTAuNzA3NyAxNy42MTM3IDEwLjYxOTggMTcuNDYzIDEwLjU2MTlDMTcuMzEyMyAxMC41MDQgMTcuMTUxNCAxMC40Nzc0IDE2Ljk5MDEgMTAuNDgzNkgxNy4wMTY4Wk0xMS4zNTAxIDEzLjI0MzZDMTEuMTE2MSAxMy4yMzc3IDEwLjg4OTEgMTMuMTYzIDEwLjY5NzMgMTMuMDI4N0MxMC41MDU2IDEyLjg5NDQgMTAuMzU3OCAxMi43MDY1IDEwLjI3MjMgMTIuNDg4NkMxMC4xODY4IDEyLjI3MDcgMTAuMTY3NSAxMi4wMzI1IDEwLjIxNjcgMTEuODAzNkMxMC4yNjYgMTEuNTc0OCAxMC4zODE2IDExLjM2NTYgMTAuNTQ5MiAxMS4yMDIxQzEwLjcxNjcgMTEuMDM4NyAxMC45Mjg4IDEwLjkyODMgMTEuMTU4OCAxMC44ODQ4QzExLjM4ODcgMTAuODQxMiAxMS42MjY0IDEwLjg2NjUgMTEuODQyMiAxMC45NTc0QzEyLjA1NzkgMTEuMDQ4MyAxMi4yNDIgMTEuMjAwNyAxMi4zNzE0IDExLjM5NTdDMTzIuNTAwOSAxMS41OTA3IDEyLjU3IDExLjgxOTYgMTIuNTcwMSAxMi4wNTM2QzEyLjU2NTcgMTIuMzcxOSAxMi40MzU3IDEyLjY3NTYgMTIuMjA4NSAxMi44OTg1QzExLjk4MTIgMTMuMTIxNCAxMS42NzUxIDEzLjI0NTQgMTEuMzU2OCAxMy4yNDM2SDExLjM1MDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K',
+  logo_product_name: 'Intelligence',
+  modified_date: '2023-05-24T20:57:43.929634+00:00',
+  name: 'Intelligence',
+  url: 'https://digital.ai/intelligence'
+});
+Object.assign(Object.assign({}, initialAppModel), {
+  id: '7',
+  created_date: '2023-05-24T20:56:03.745221+00:00',
+  logo: 'PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIGZpbGw9IiMyNzlGRUEiLz4KPHBhdGggZD0iTTEyLjQzMzIgMTYuMzUzM1YxNC44MzMzSDExLjU2NjVWMTYuMzUzM0wxMC43NDMyIDE1Ljg5MzNMOS44NTY1MSAxNi40MDMzTDExLjk5OTggMTcuNjM2NkwxNC4xOTMyIDE2LjM3MzNMMTMuMzMzMiAxNS44NzY2TDEyLjQzMzIgMTYuMzUzM1oiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik03Ljk5MzI4IDEwLjE4NjZMOS4yNDY2MSAxMC45MTMyTDkuNjc5OTUgMTAuMTM5OUw4LjM2OTk1IDkuNDI5OUw5LjA5MzI4IDkuMDE2NTdWOC4wMzMyM0w3LjExMzI4IDkuMTgzMjNMNy4xMTY2MSAxMS41NTMyTDcuOTkzMjggMTEuMDU2NlYxMC4xODY2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE0LjY5MzQgMTAuOTEzM0wxNS45OTM0IDEwLjE3MzNMMTUuOTkgMTEuMDU2NkwxNi44ODY3IDExLjU1OTlWOS4xNzY2TDE0LjgxIDcuOTg5OTNMMTQuNzc2NyA4Ljk1NjZMMTUuNjE2NyA5LjQ1MzI2TDE0LjI5IDEwLjA3OTlMMTQuNjkzNCAxMC45MTMzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE2Ljg4MDEgMTIuNTQzNUwxNi4wMDAxIDEyLjA0MDJWMTIuMDkzNVYxMy43MDY4TDEyLjQxNjcgMTEuNjg2OFY3LjYxMDE1TDEzLjk2NjcgOC40OTAxNVY3LjUxNjgyTDEyLjAwMDEgNi4zNTM0OUw5Ljk1MDA2IDcuNTIzNDhWOC41MjM0OEwxMS40OTY3IDcuNjMwMTVWMTEuNjg2OEw4LjAwMDA2IDEzLjgxNjhWMTIuMDIwMkw3LjEyMDA2IDEyLjUyMzVWMTQuODIwMkw4Ljk2NjcyIDE1Ljg1MDJMOS44NjY3MiAxNS4zMzM1TDguNDAwMDYgMTQuNTI2OEwxMi4wMDAxIDEyLjQzNjhMMTUuNTU2NyAxNC41MDM1TDE0LjEzMDEgMTUuMzI2OEwxNS4wNTY3IDE1Ljg3MDFMMTYuODcwMSAxNC44MjY4TDE2Ljg4MDEgMTIuNTQzNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=',
+  logo_product_name: 'Release',
+  modified_date: '2023-05-24T20:56:03.745221+00:00',
+  name: 'Release',
+  url: 'https://digital.ai/release'
+});
+
+const ID = 'id';
+function updateItemInArray(elements, updatedItem, idProp) {
+  if (elements) {
+    const index = elements.findIndex(item => item[idProp] === updatedItem[idProp]);
+    if (index >= 0) {
+      elements[index] = Object.assign({}, updatedItem);
+    }
+  }
+  return elements;
+}
+const handleUpdateDashboard = (dashboards, updatedDashboard) => {
+  updateItemInArray(dashboards, updatedDashboard, ID);
+  return dashboards;
+};
+const DotMetadataApiContext = createContext(null);
+const accountHeaderKey = 'X-Digitalai-Account-ID';
+function setAccountIdHeader(accountId) {
+  const headers = OpenAPI.HEADERS;
+  if (accountId) {
+    if (!headers || accountHeaderKey in headers && headers[accountHeaderKey] !== accountId) {
+      OpenAPI.HEADERS = {
+        [accountHeaderKey]: accountId
+      };
+    }
+  } else if (headers) {
+    OpenAPI.HEADERS = null;
+  }
+}
+const DotMetadataApiProvider = ({
+  accountOverrideId,
+  apiUrl,
+  token,
+  children
+}) => {
+  const {
+    cancelablePromise
+  } = useCancelablePromise();
+  const [accountId, setAccountId] = useState(accountOverrideId);
+  const [categories, setCategories] = useState(null);
+  const [categoriesLoading, setCategoriesLoading] = useState(true);
+  const [dashboards, setDashboards] = useState();
+  const [dashboardsLoading, setDashboardsLoading] = useState(true);
+  const [helpContentLoading, setHelpContentLoading] = useState(true);
+  const [dashboardsError, setDashboardsError] = useState(null);
+  const [platformConsoleUrl, setPlatformConsoleUrl] = useState(null);
+  const MOCK_API_URL = 'https://demo-mock-api';
+  const memoizedValues = useMemo(() => ({
+    categories,
+    categoriesLoading,
+    dashboards,
+    dashboardsError,
+    dashboardsLoading,
+    helpContentLoading,
+    platformConsoleUrl,
+    setOverrideAccountId: id => {
+      setAccountId(id);
+    },
+    setToken: newToken => {
+      OpenAPI.TOKEN = newToken;
+      setPlatformConsoleUrl(getPlatformConsoleUrlFromToken(newToken));
+    },
+    searchDashboards: ({
+      start,
+      count,
+      sort,
+      filter,
+      q,
+      authorFullname,
+      authorId,
+      biType,
+      description,
+      id,
+      isOotbDashboard,
+      lifecycleState,
+      name,
+      targetApp,
+      favorite,
+      returnErrors = false
+    }) => {
+      setAccountIdHeader(accountId);
+      setDashboardsLoading(true);
+      return cancelablePromise(DashboardsService.getDashboardsService(start, count, sort, filter, favorite, q, authorFullname, authorId, biType, description, id, isOotbDashboard, lifecycleState, name, targetApp)).then(response => {
+        setDashboardsError(null);
+        setDashboardsLoading(false);
+        return response.results;
+      }).catch(error => {
+        setDashboardsLoading(false);
+        if (returnErrors) {
+          return {
+            error: error.message
+          };
+        } else {
+          setDashboardsError(error);
+          return null;
+        }
+      });
+    },
+    duplicateDashboard: (dashboardId, dashboard) => {
+      setAccountIdHeader(accountId);
+      return cancelablePromise(DashboardsService.postDashboardsService1(dashboardId, dashboard)).then(response => {
+        setDashboardsError(null);
+        dashboards.push(response);
+        setDashboards(dashboards.slice());
+        return response;
+      }).catch(error => {
+        setDashboardsError(error);
+        return null;
+      });
+    },
+    favoriteDashboard: (dashboardId, favoriteValue) => {
+      setAccountIdHeader(accountId);
+      if (favoriteValue) {
+        return cancelablePromise(DashboardsService.postDashboardsService2(dashboardId)).then(response => {
+          setDashboardsError(null);
+          setDashboards(orig => handleUpdateDashboard(orig, response));
+          return response;
+        }).catch(error => {
+          setDashboardsError(error);
+          return null;
+        });
+      } else {
+        return cancelablePromise(DashboardsService.deleteDashboardsService1(dashboardId)).then(response => {
+          setDashboardsError(null);
+          setDashboards(orig => handleUpdateDashboard(orig, response));
+          return response;
+        }).catch(error => {
+          setDashboardsError(error);
+          return null;
+        });
+      }
+    },
+    updateDashboard: (dashboardId, dashboard, isSync = false) => __awaiter(void 0, void 0, void 0, function* () {
+      setAccountIdHeader(accountId);
+      return cancelablePromise(DashboardsService.patchDashboardsService(dashboardId, dashboard, isSync)).then(response => {
+        setDashboardsError(null);
+        setDashboards(orig => handleUpdateDashboard(orig, response));
+        return response;
+      }).catch(error => setDashboardsError(error));
+    }),
+    getCategories: () => __awaiter(void 0, void 0, void 0, function* () {
+      setCategoriesLoading(true);
+      if (OpenAPI.BASE === MOCK_API_URL) {
+        setDashboardsError(null);
+        setCategoriesLoading(false);
+        setCategories(getCategoriesMock);
+        return getCategoriesMock;
+      } else {
+        return cancelablePromise(CategoriesService.getCategoriesService()).then(response => {
+          setDashboardsError(null);
+          setCategoriesLoading(false);
+          setCategories(response);
+          return response;
+        }).catch(error => {
+          setCategoriesLoading(false);
+          setDashboardsError(error);
+          return null;
+        });
+      }
+    }),
+    getDashboardHelpContent: helpContentId => __awaiter(void 0, void 0, void 0, function* () {
+      setHelpContentLoading(true);
+      if (OpenAPI.BASE === MOCK_API_URL) {
+        setDashboardsError(null);
+        setHelpContentLoading(false);
+        return helpContent;
+      } else {
+        setAccountIdHeader(accountId);
+        return cancelablePromise(HelpContentService.getHelpContentById(helpContentId)).then(response => {
+          setHelpContentLoading(false);
+          return response.content;
+        }).catch(error => {
+          setHelpContentLoading(false);
+          setDashboardsError(error);
+        });
+      }
+    })
+  }), [categories, categoriesLoading, dashboards, dashboardsError, dashboardsLoading, platformConsoleUrl]);
+  if (apiUrl && OpenAPI.BASE !== apiUrl) {
+    OpenAPI.BASE = apiUrl;
+  }
+  const demoUrl = 'https://digitalai.staging.digitalai.cloud/';
+  if (token && OpenAPI.TOKEN !== token) {
+    OpenAPI.TOKEN = token;
+    setPlatformConsoleUrl(getPlatformConsoleUrlFromToken(token));
+  } else if (OpenAPI.BASE === MOCK_API_URL && platformConsoleUrl !== demoUrl) {
+    setPlatformConsoleUrl(demoUrl);
+  }
+  return jsx(DotMetadataApiContext.Provider, {
+    value: memoizedValues,
+    children: children
+  });
+};
+const useDotMetadataApiContext = () => {
+  return useContext(DotMetadataApiContext);
+};
+
+const StyledDashboardDialog = styled(DotDialog)`
+  ${({
+  theme
+}) => css`
+    .dot-text-field {
+      margin-bottom: ${theme.spacing(2)};
+      width: 40vw;
+    }
+    .dot-autocomplete {
+      margin-top: ${theme.spacing(1.5)};
+    }
+    .dot-input-select {
+      margin-bottom: ${theme.spacing(2)};
+    }
+  `}
+`;
+const StyledDialogActions = styled(DialogActions)`
+  padding-right: 0;
+`;
+
+const DashboardAppTypeOptions = [
+// Matches target_app values in Dashboard model
+{
+  option: 'Agility',
+  value: 'AGILITY'
+}, {
+  option: 'Release',
+  value: 'RELEASE'
+}, {
+  option: 'Deploy',
+  value: 'DEPLOY'
+}, {
+  option: 'Continuous Testing',
+  value: 'CONTINUOUSTEST'
+}, {
+  option: 'TeamForge',
+  value: 'TEAMFORGE'
+}];
+const initialFormState = {
+  categories: [],
+  description: '',
+  name: ''
+};
+const DASHBOARD_NAME_MAX_LENGTH = 250;
+const DASHBOARD_DESCRIPTION_MAX_LENGTH = 250;
+function DotDashboardDialog({
+  availableCategories,
+  copyDashboard,
+  editDashboard,
+  open,
+  onClose,
+  onSubmit,
+  onContinue,
+  title
+}) {
+  const [isDirty, setIsDirty] = useState(false);
+  const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
+  const [nameError, setNameError] = useState(null);
+  const [formValues, setFormValues] = useState(initialFormState);
+  const {
+    categories,
+    description,
+    name
+  } = formValues;
+  const {
+    searchDashboards
+  } = useDotMetadataApiContext();
+  const {
+    cancelablePromise
+  } = useCancelablePromise();
+  useEffect(() => {
+    if (copyDashboard) {
+      setFormValues(orig => Object.assign(Object.assign({}, orig), {
+        name: copyDashboard.name + ' (copy)',
+        description: copyDashboard.description,
+        categories: copyDashboard.categories
+      }));
+    }
+    if (editDashboard) {
+      setFormValues(orig => Object.assign(Object.assign({}, orig), {
+        name: editDashboard.name,
+        description: editDashboard.description,
+        categories: editDashboard.categories
+      }));
+    }
+    return () => {
+      onClose(false);
+    };
+  }, []);
+  const handleSubmit = useCallback(returnToList => __awaiter(this, void 0, void 0, function* () {
+    setIsLoadingSubmit(true);
+    const useFormValues = Object.assign(Object.assign({}, formValues), {
+      id: editDashboard === null || editDashboard === void 0 ? void 0 : editDashboard.id
+    });
+    const validName = yield validateName(useFormValues.name);
+    if (validName) {
+      yield onSubmit(useFormValues, returnToList);
+    }
+    setIsLoadingSubmit(false);
+  }), [formValues, editDashboard]);
+  const handleSubmitCreate = useCallback(() => {
+    handleSubmit(false);
+  }, [handleSubmit]);
+  const handleSubmitEditExit = useCallback(() => {
+    handleSubmit(true);
+  }, [handleSubmit]);
+  const handleSubmitEditContinue = useCallback(() => {
+    if (isDirty || !onContinue) {
+      handleSubmit(false);
+    } else {
+      onContinue();
+    }
+  }, [isDirty, handleSubmit, onContinue]);
+  const handleChange = useCallback(event => {
+    const targetName = event.target.name;
+    const value = event.target.value;
+    setNameError(null);
+    setFormValues(orig => Object.assign(Object.assign({}, orig), {
+      [targetName]: value
+    }));
+    setIsDirty(true);
+  }, [formValues]);
+  const handleChangeCategories = useCallback((_event, options, _reason) => {
+    const values = options.map(option => option.title);
+    setFormValues(orig => Object.assign(Object.assign({}, orig), {
+      categories: values
+    }));
+    setIsDirty(true);
+  }, [formValues]);
+  const getCategoryValues = useCallback(() => categories.map(category => ({
+    title: category
+  })), [categories]);
+  const getAvailableCategoryOptions = useCallback(() => {
+    const availableCategoryOptions = [];
+    if (availableCategories) {
+      availableCategories.forEach(category => {
+        if (!categories.includes(category)) {
+          availableCategoryOptions.push({
+            title: category
+          });
+        }
+      });
+    }
+    return availableCategoryOptions;
+  }, [availableCategories, categories]);
+  const validateName = nameToValidate => __awaiter(this, void 0, void 0, function* () {
+    return cancelablePromise(searchDashboards({
+      name: nameToValidate
+    })).then(response => {
+      if (response === null || 'error' in response) {
+        setNameError('Could not check existing names due to a server error.');
+        return false;
+      } else if (response.length > 0) {
+        const matchingNames = response.filter(dashboard => dashboard.name.toLowerCase() === nameToValidate.toLowerCase() && (!editDashboard || dashboard.name !== editDashboard.name));
+        if (matchingNames.length > 0) {
+          setNameError(`Cannot use duplicate name '${name}'`);
+          return false;
+        }
+      }
+      return true;
+    });
+  });
+  const handleNameBlur = useCallback(event => {
+    const newName = event.target.value;
+    if (newName) {
+      validateName(newName);
+    }
+  }, [validateName]);
+  return jsxs(StyledDashboardDialog, {
+    cancelButtonProps: {
+      'data-testid': 'cancel-create-dashboard-button'
+    },
+    cancelButtonVisible: !editDashboard,
+    closeOnClickAway: !editDashboard,
+    closeOnSubmit: false,
+    hasPrimaryAction: !editDashboard,
+    open: open,
+    onCancel: () => onClose(true),
+    onSubmit: handleSubmitCreate,
+    submitButtonProps: {
+      'data-testid': 'confirm-create-dashboard-button',
+      disabled: !name || isLoadingSubmit,
+      label: 'Continue'
+    },
+    title: title || 'Create dashboard',
+    children: [jsx(DotInputText, {
+      autoFocus: true,
+      "data-testid": "dashboard-dialog-name-input",
+      error: nameError || name.length > DASHBOARD_NAME_MAX_LENGTH,
+      helperText: nameError || name.length > DASHBOARD_NAME_MAX_LENGTH && `Name must be ${DASHBOARD_NAME_MAX_LENGTH} characters or less`,
+      id: "name",
+      label: "Dashboard name",
+      name: "name",
+      onBlur: handleNameBlur,
+      onChange: handleChange,
+      required: true,
+      value: name
+    }), jsx(DotInputText, {
+      "data-testid": "dashboard-dialog-description-input",
+      error: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH,
+      helperText: description.length > DASHBOARD_DESCRIPTION_MAX_LENGTH && `Description must be ${DASHBOARD_DESCRIPTION_MAX_LENGTH} characters or less`,
+      id: "description",
+      label: "Description",
+      multiline: true,
+      minRows: 4,
+      maxRows: 4,
+      name: "description",
+      onChange: handleChange,
+      value: description
+    }), editDashboard && jsxs(Fragment, {
+      children: [jsx(DotTypography, {
+        variant: "h3",
+        children: "Application type"
+      }), jsx(DotInputSelect, {
+        className: "dot-input-select",
+        options: DashboardAppTypeOptions,
+        id: "dashboard-apptype-select",
+        "data-testid": "dashboard-dialog-apptype-input",
+        name: "Select application",
+        disabled: true,
+        value: editDashboard.target_apps[0]
+      })]
+    }), jsx(DotTypography, {
+      variant: "h3",
+      children: "Category"
+    }), jsx(DotTypography, {
+      variant: "body2",
+      children: "Please select the appropriate categories"
+    }), jsx(DotAutoComplete, {
+      "data-testid": "dashboard-dialog-categories-input",
+      filterSelectedOptions: true,
+      inputId: "dashboard-dialog-categories-input",
+      onChange: handleChangeCategories,
+      options: getAvailableCategoryOptions(),
+      placeholder: "Select categories",
+      label: "Category",
+      required: editDashboard && editDashboard.lifecycle_state === DashboardView.lifecycle_state.PUBLISHED,
+      value: getCategoryValues()
+    }), editDashboard && jsx(Fragment, {
+      children: jsxs(StyledDialogActions, {
+        children: [jsx(DotButton, {
+          className: "cancel-button",
+          "data-testid": "cancel-edit-dashboard-button",
+          onClick: () => onClose(true),
+          type: "text",
+          children: "Cancel"
+        }), jsx(DotButton, {
+          "data-testid": "save-edit-exit-dashboard-button",
+          disabled: isLoadingSubmit || !isDirty,
+          onClick: handleSubmitEditExit,
+          type: "outlined",
+          children: "Save and exit"
+        }), jsx(DotButton, {
+          "data-testid": "save-edit-continue-dashboard-button",
+          disabled: isLoadingSubmit,
+          onClick: handleSubmitEditContinue,
+          type: "primary",
+          children: isDirty ? 'Save and continue' : 'Continue'
+        })]
+      })
+    })]
+  });
+}
+
+const getSnackbarTitleFromSeverity = severity => {
+  switch (severity) {
+    case 'success':
+      return 'Success';
+    case 'warning':
+      return 'Warning';
+    case 'error':
+      return 'Error';
+    case 'info':
+      return 'Info';
+    default:
+      return 'Success';
+  }
+};
+function getErrorText(error) {
+  var _a, _b;
+  if ('status' in error && error.status === 304) {
+    return 'No changes made';
+  } else if ('body' in error) {
+    return ((_b = (_a = error.body) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b.message) ? error.body.error.message : 'Unexpected API error';
+  } else if ('message' in error) {
+    return error.message;
+  }
+  return 'Unexpected API error';
+}
+
+function addAutoHideDuration(severity) {
+  return severity === 'error' ? null : 10000;
+}
+
+const rootClassName$z = 'dot-snackbar';
+const StyledSnackbar = styled(Snackbar)`
+  ${({
+  theme,
+  width,
+  $anchorOriginTop
+}) => css`
+    &.${rootClassName$z} {
+      .MuiAlert-message {
+        word-break: break-word;
+      }
+      .${rootClassName$16} {
+        align-items: flex-start;
+      }
+      &.MuiSnackbar-anchorOriginTopLeft,
+      &.MuiSnackbar-anchorOriginTopCenter,
+      &.MuiSnackbar-anchorOriginTopRight {
+        top: ${$anchorOriginTop}px;
+        z-index: ${levelFourth};
+      }
+
+      .dot-snackbar-actions {
+        display: flex;
+        align-items: center;
+        margin-top: ${theme.spacing(1)};
+        gap: ${theme.spacing(2)};
+
+        .primary-action-btn {
+          background-color: transparent;
+        }
+      }
+
+      .MuiAlert-root {
+        max-width: ${width ? 'unset' : '500px'};
+        min-width: ${width ? 'unset' : '344px'};
+        z-index: ${levelFourth};
+      }
+    }
+  `}
+`;
+
+const DEFAULT_ANCHOR_ORIGIN = {
+  vertical: 'top',
+  horizontal: 'right'
+};
+const DotSnackbar = ({
+  anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
+  anchorOriginTop = 108,
+  ariaLabel,
+  autoHideDuration,
+  children,
+  className,
+  'data-testid': dataTestId,
+  hideOnClickAway = true,
+  onClose,
+  open,
+  primaryAction,
+  secondaryAction,
+  severity,
+  width
+}) => {
+  const hasActions = !!(primaryAction || secondaryAction);
+  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
+  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const handleSnackbarClose = reason => {
+    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
+      onClose();
+    }
+  };
+  return jsx(StyledSnackbar, {
+    anchorOrigin: anchorOrigin,
+    "$anchorOriginTop": anchorOriginTop,
+    "aria-label": ariaLabel,
+    autoHideDuration: calculatedAutoHideDuration,
+    classes: {
+      root: rootClasses
+    },
+    "data-testid": dataTestId,
+    onClose: (_e, r) => handleSnackbarClose(r),
+    open: open,
+    severity: severity,
+    width: width,
+    children: jsx("div", {
+      children: jsx(DotAlertBanner, {
+        severity: severity,
+        width: width,
+        onClose: _e => handleSnackbarClose(),
+        children: jsxs("div", {
+          children: [jsx(DotTypography, {
+            variant: "subtitle2",
+            noMarginBottom: false,
+            children: getSnackbarTitleFromSeverity(severity)
+          }), isString$2(children) ? jsx(DotTypography, {
+            ariaLabel: severity,
+            variant: "body1",
+            children: children
+          }) : jsx("span", {
+            "aria-label": severity,
+            children: children
+          }), hasActions && jsxs("div", {
+            className: "dot-snackbar-actions",
+            children: [primaryAction && jsx(DotButton, {
+              className: "primary-action-btn",
+              "data-testid": "primary-action-btn",
+              onClick: primaryAction.onClick,
+              size: "small",
+              type: "outlined",
+              children: primaryAction.label
+            }), secondaryAction && jsx(DotLink, {
+              "data-testid": "secondary-action-link",
+              href: secondaryAction.href,
+              color: "inherit",
+              children: secondaryAction.label
+            })]
+          })]
+        })
+      })
+    })
+  });
+};
+
+const rootClassName$y = 'dot-snackbar-container';
+const StyledSnackbarContainer = styled.div`
+  ${() => css`
+    &.${rootClassName$y} {
+      position: absolute;
+      top: 0;
+      width: 250px;
+      height: auto;
+      right: 0;
+      & > div {
+        position: relative;
+      }
+    }
+  `}
+`;
+
+const DotSnackbarContext = createContext({
+  alerts: [],
+  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
+  removeMessage: _id => null
+});
+const DotSnackbarContainer = ({
+  hideOnClickAway
+}) => {
+  const {
+    alerts,
+    removeMessage
+  } = useDotSnackbarContext();
+  function handleClose(id) {
+    return () => {
+      removeMessage(id);
+    };
+  }
+  return jsx(StyledSnackbarContainer, {
+    className: rootClassName$y,
+    children: jsx("div", {
+      className: rootClassName$y,
+      "data-testid": rootClassName$y,
+      children: alerts.slice().reverse().map(alert => {
+        return jsx(DotSnackbar, {
+          autoHideDuration: alert.autoHideDuration,
+          hideOnClickAway: hideOnClickAway,
+          onClose: handleClose(alert.id),
+          open: alert.open,
+          severity: alert.severity,
+          primaryAction: alert.primaryAction,
+          secondaryAction: alert.secondaryAction,
+          children: alert.message
+        }, alert.id);
+      })
+    })
+  });
+};
+const DotSnackbarProvider = ({
+  children,
+  hideOnClickAway = true
+}) => {
+  const [alerts, setAlerts] = useState([]);
+  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
+    const id = CreateUUID();
+    const queue = {
+      id,
+      message,
+      severity,
+      open: true,
+      autoHideDuration,
+      primaryAction,
+      secondaryAction
+    };
+    setAlerts(prevState => {
+      return [...prevState, Object.assign({}, queue)];
+    });
+    return id;
+  }
+  const removeMessage = id => {
+    setAlerts(prev => {
+      return prev.map(a => {
+        return a.id === id ? Object.assign(Object.assign({}, a), {
+          open: false
+        }) : a;
+      });
+    });
+  };
+  const DotSnackbarValues = {
+    alerts,
+    enqueueMessage,
+    removeMessage
+  };
+  const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
+  return jsxs(DotSnackbarContext.Provider, {
+    value: memoizedValues,
+    children: [jsx(DotSnackbarContainer, {
+      hideOnClickAway: hideOnClickAway
+    }), children]
+  });
+};
+const useDotSnackbarContext = () => {
+  return useContext(DotSnackbarContext);
+};
+const useEnqueueErrorMessage = error => {
+  const {
+    enqueueMessage
+  } = useDotSnackbarContext();
+  useEffect(() => {
+    error && enqueueMessage(getErrorText(error), 'error');
+  }, [error]);
+};
+
+const InlineMessage = styled(DotTypography)`
+  ${({
+  theme
+}) => css`
+    display: inline;
+    margin-left: ${theme.spacing(1)};
+  `}
+`;
+const StyledPublishConfirmDiv = styled.div`
+  ${({
+  theme
+}) => css`
+    .dot-alert-banner {
+      margin-bottom: ${theme.spacing(4)};
+    }
+    .dot-autocomplete,
+    .dot-avatar {
+      margin-bottom: ${theme.spacing(2)};
+    }
+  `}
+`;
+const StyledAppSelectDiv = styled.div`
+  ${() => css`
+    display: flex;
+    gap: 24px;
+    align-items: center;
+  `}
+`;
+const StyledAppSelectDotAutoComplete = styled(DotAutoComplete)`
+  width: 100%;
+`;
+const StyledAppSelectAutoCompleteOption = styled.li`
+  ${({
+  theme
+}) => css`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: ${theme.spacing(0.75, 2, 0.75, 3)};
+    &:hover,
+    &:focus {
+      background: ${theme.palette.grey[500]};
+    }
+  `}
+`;
+
+const productNameCategoryMap = {
+  Agility: 'AGILITY',
+  Release: 'RELEASE',
+  Deploy: 'DEPLOY',
+  'Continuous Testing': 'CONTINUOUSTEST',
+  TeamForge: 'TEAMFORGE'
+};
+/**
+ * Content displayed in the dialog when publishing
+ */
+function ActivePublishMessage({
+  applicationList,
+  categories,
+  dashboardName,
+  initialCategories,
+  published,
+  publishing,
+  onChange
+}) {
+  const [selectedApp, setSelectedApp] = useState(applicationList.length > 0 ? applicationList[0] : null);
+  const [selectedCategories, setSelectedCategories] = useState([]);
+  const [appNameMap, setAppNameMap] = useState({});
+  const [appNameMapLoading, setAppNameMapLoading] = useState(true);
+  const [categoryOptions, setCategoryOptions] = useState([]);
+  const appOptions = applicationList.map((application, index) => {
+    return {
+      title: application.name,
+      imageUrl: (application === null || application === void 0 ? void 0 : application.logo) ? 'data:image/svg+xml;base64,' + application.logo : null,
+      uid: index + 1
+    };
+  });
+  useEffect(() => {
+    if (applicationList) {
+      const newAppNameMap = {};
+      applicationList.forEach(application => {
+        newAppNameMap[application.name] = application;
+      });
+      setAppNameMap(newAppNameMap);
+      setAppNameMapLoading(false);
+    }
+  }, [applicationList]);
+  useEffect(() => {
+    const selectedCategoryOptions = [];
+    if (selectedApp) {
+      if (selectedApp.logo_product_name in productNameCategoryMap) {
+        const categoryKey = productNameCategoryMap[selectedApp.logo_product_name];
+        const appCategories = categories.categories[categoryKey];
+        const newCategoryOptions = appCategories.map(category => ({
+          title: category
+        }));
+        setCategoryOptions(newCategoryOptions);
+        selectedCategoryOptions.push(...newCategoryOptions.filter(o => initialCategories.includes(o.title)));
+      } else {
+        setCategoryOptions([]);
+      }
+    } else {
+      setCategoryOptions([]);
+    }
+    setSelectedCategories(selectedCategoryOptions);
+  }, [selectedApp]);
+  useEffect(() => {
+    const selectedAppCategories = selectedCategories.map(c => c.title);
+    onChange(selectedApp, selectedAppCategories);
+    // selectedApp is excluded from dependency list on purpose
+    // since selectedCategories is always updated when selectedApp changes
+  }, [selectedCategories]);
+  const handleApplicationSelect = useCallback((_event, value, _reason) => {
+    if (value === null) {
+      setSelectedApp(null);
+    } else {
+      let nameKey = null;
+      if (typeof value === 'string') {
+        nameKey = value;
+      } else {
+        nameKey = value.title;
+      }
+      const newSelectedApp = value ? appNameMap[nameKey] : null;
+      setSelectedApp(newSelectedApp);
+    }
+  }, [appNameMap, onChange]);
+  const handleChangeCategories = useCallback((_event, options, _reason) => {
+    setSelectedCategories(options);
+  }, []);
+  if (published) {
+    return jsxs(StyledPublishConfirmDiv, {
+      children: [jsxs(DotAlertBanner, {
+        severity: "success",
+        children: ["Success! ", jsx("strong", {
+          children: dashboardName
+        }), " has been published."]
+      }), jsxs(DotTypography, {
+        children: ["To view your newly published dashboard in", ' ', jsxs("strong", {
+          children: ["\"", selectedApp.name, "\""]
+        }), ", go to the", ' ', jsx("strong", {
+          children: "'Digital.ai Analytics'"
+        }), " section and explore."]
+      })]
+    });
+  }
+  if (publishing) {
+    return jsxs(Fragment, {
+      children: [jsx(DotProgress, {
+        ariaLabel: "Publishing",
+        "data-testid": "publishing-spinner",
+        size: "24px"
+      }), jsxs(InlineMessage, {
+        children: ["Publishing ", jsxs("strong", {
+          children: ["\"", dashboardName, "\""]
+        }), " to", ' ', jsxs("strong", {
+          children: ["\"", selectedApp.name, "\""]
+        }), "."]
+      })]
+    });
+  }
+  return jsx(StyledPublishConfirmDiv, {
+    children: !appNameMapLoading && jsxs(Fragment, {
+      children: [jsxs(DotAlertBanner, {
+        severity: "info",
+        children: ["By clicking publish to application,", ' ', jsxs("strong", {
+          children: ["\"", dashboardName, "\""]
+        }), " will be visible in the application instance."]
+      }), jsxs(StyledAppSelectDiv, {
+        children: [jsx(StyledAppSelectDotAutoComplete, {
+          "data-testid": "publish-app-select",
+          defaultValue: applicationList.length > 0 ? applicationList[0].name : undefined,
+          freesolo: false,
+          multiple: false,
+          filterSelectedOptions: true,
+          inputId: "publish-app-select",
+          label: "Select application",
+          placeholder: "Select application",
+          onChange: handleApplicationSelect,
+          onInputChange: handleApplicationSelect,
+          options: appOptions,
+          required: true,
+          dense: false,
+          size: "medium",
+          renderOption: (props, option) => {
+            return jsxs(StyledAppSelectAutoCompleteOption, Object.assign({}, props, {
+              children: [jsx(DotAvatar, {
+                alt: "Application logo",
+                imageSrc: option.imageUrl,
+                iconId: "file-image",
+                type: "image",
+                variant: "circular",
+                size: "large"
+              }), jsx("div", {
+                children: option.title
+              })]
+            }), option.uid);
+          }
+        }), (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.logo) && jsx(DotAvatar, {
+          alt: "Application logo",
+          imageSrc: `data:${detectImageMimeType(selectedApp.logo)};base64,${selectedApp.logo}`,
+          iconId: "file-image",
+          type: 'image',
+          variant: "circular",
+          size: "large"
+        })]
+      }), (selectedApp === null || selectedApp === void 0 ? void 0 : selectedApp.logo_product_name) && selectedApp.logo_product_name in productNameCategoryMap && categories.categories[productNameCategoryMap[selectedApp.logo_product_name]].length > 0 && jsx(DotAutoComplete, {
+        "data-testid": "publish-categories-input",
+        inputId: "publish-categories-input",
+        onChange: handleChangeCategories,
+        options: categoryOptions,
+        placeholder: "Select categories",
+        value: selectedCategories,
+        filterSelectedOptions: true
+      }), jsxs(DotTypography, {
+        children: ["You are about to publish ", jsxs("strong", {
+          children: ["\"", dashboardName, "\""]
+        }), ". Click", ' ', "the publish button to promote it to the selected instance."]
+      })]
+    })
+  });
+}
+/**
+ * Content displayed in the dialog when unpublishing
+ */
+function ActiveUnpublishMessage({
+  dashboardName,
+  unpublished,
+  unpublishing
+}) {
+  const unpublishMessage = jsxs(DotTypography, {
+    children: ["You are about to unpublish ", jsxs("strong", {
+      children: ["\"", dashboardName, "\""]
+    }), ". Click", ' ', jsx("strong", {
+      children: "Unpublish"
+    }), " to confirm."]
+  });
+  const unpublishingMessage = jsxs(Fragment, {
+    children: [jsx(DotProgress, {
+      ariaLabel: "Unpublishing",
+      "data-testid": "unpublishing-spinner",
+      size: "24px"
+    }), jsxs(InlineMessage, {
+      children: ["Unpublishing ", jsxs("strong", {
+        children: ["\"", dashboardName, "\""]
+      }), "."]
+    })]
+  });
+  const unpublishedMessage = jsxs(StyledPublishConfirmDiv, {
+    children: [jsxs(DotAlertBanner, {
+      severity: "success",
+      children: ["Success! ", jsxs("strong", {
+        children: ["\"", dashboardName, "\""]
+      }), " has been unpublished."]
+    }), jsxs(DotTypography, {
+      children: ["To view updates in the application instance, go to the", ' ', jsx("strong", {
+        children: "'Digital.ai Analytics'"
+      }), " section and explore."]
+    })]
+  });
+  let activeUnpublishMesssage = unpublishMessage;
+  if (unpublished) {
+    activeUnpublishMesssage = unpublishedMessage;
+  } else if (unpublishing) {
+    activeUnpublishMesssage = unpublishingMessage;
+  }
+  return activeUnpublishMesssage;
+}
+function DotDashboardPublishConfirm({
+  applicationList,
+  categories,
+  dashboardToPublish,
+  dashboardToUnpublish,
+  onClose,
+  onStatusChanged
+}) {
+  const [publishing, setPublishing] = useState(null);
+  const [unpublishing, setUnpublishing] = useState(null);
+  const [published, setPublished] = useState(false);
+  const [unpublished, setUnpublished] = useState(false);
+  const [publishAppInstance, setPublishAppInstance] = useState(null);
+  const [publishCategories, setPublishCategories] = useState([]);
+  const filteredApplications = applicationList === null || applicationList === void 0 ? void 0 : applicationList.filter(application => {
+    return dashboardToPublish && application.logo_product_name in productNameCategoryMap && dashboardToPublish.target_apps.includes(productNameCategoryMap[application.logo_product_name]);
+  });
+  const {
+    updateDashboard,
+    dashboardsError
+  } = useDotMetadataApiContext();
+  const {
+    cancelablePromise
+  } = useCancelablePromise();
+  const {
+    enqueueMessage
+  } = useDotSnackbarContext();
+  useEnqueueErrorMessage(dashboardsError);
+  useEffect(() => {
+    if (dashboardToPublish === null) {
+      setPublishing(null);
+      setPublished(false);
+    } else {
+      setPublishCategories(dashboardToPublish.categories || []);
+    }
+  }, [dashboardToPublish]);
+  useEffect(() => {
+    if (dashboardToUnpublish === null) {
+      setUnpublishing(null);
+      setUnpublished(false);
+    }
+  }, [dashboardToUnpublish]);
+  const handlePublish = useCallback(() => {
+    const patchDashboard = {
+      lifecycle_state: DashboardView.lifecycle_state.PUBLISHED,
+      application_instances: [publishAppInstance.id],
+      categories: publishCategories
+    };
+    setPublishing(cancelablePromise(updateDashboard(dashboardToPublish.id, patchDashboard).then(updatedDashboard => {
+      setPublished(true);
+      onStatusChanged(updatedDashboard);
+      enqueueMessage('Dashboard has been published!', 'success');
+    }).catch(() => {
+      setPublishing(null);
+    })));
+  }, [dashboardToPublish, publishAppInstance, publishCategories, updateDashboard]);
+  const handleCancelPublish = useCallback(() => {
+    if (publishing !== null) {
+      publishing.cancel();
+    }
+    onClose();
+  }, [publishing, onClose]);
+  const handleUnpublish = useCallback(() => {
+    setUnpublishing(cancelablePromise(updateDashboard(dashboardToUnpublish.id, {
+      lifecycle_state: DashboardView.lifecycle_state.DRAFT
+    }).then(updatedDashboard => {
+      setUnpublished(true);
+      onStatusChanged(updatedDashboard);
+      enqueueMessage('Dashboard has been unpublished!', 'success');
+    }).catch(() => {
+      setUnpublishing(null);
+    })));
+  }, [dashboardToUnpublish, updateDashboard]);
+  const handleCancelUnpublish = useCallback(() => {
+    if (unpublishing !== null) {
+      unpublishing.cancel();
+    }
+    onClose();
+  }, [unpublishing, onClose]);
+  const handlePublishChange = useCallback((selectedApplication, selectedCategories) => {
+    setPublishAppInstance(selectedApplication);
+    setPublishCategories(selectedCategories);
+  }, []);
+  return jsxs(Fragment, {
+    children: [dashboardToPublish !== null && jsx(DotDialog, {
+      cancelButtonVisible: !published,
+      closeOnSubmit: false,
+      hasPrimaryAction: publishing === null || published,
+      open: dashboardToPublish !== null,
+      title: "Publish to application",
+      submitButtonProps: {
+        'data-testid': 'publish-confirm-button',
+        disabled: publishAppInstance === null || (publishAppInstance === null || publishAppInstance === void 0 ? void 0 : publishAppInstance.logo_product_name) && publishAppInstance.logo_product_name in productNameCategoryMap && categories.categories[productNameCategoryMap[publishAppInstance.logo_product_name]].length > 0 && publishCategories.length === 0,
+        label: published ? 'Got it' : 'Publish'
+      },
+      onCancel: handleCancelPublish,
+      onSubmit: published ? handleCancelPublish : handlePublish,
+      children: jsx(ActivePublishMessage, {
+        applicationList: filteredApplications,
+        categories: categories,
+        dashboardName: dashboardToPublish === null || dashboardToPublish === void 0 ? void 0 : dashboardToPublish.name,
+        initialCategories: publishCategories,
+        published: published,
+        publishing: publishing !== null,
+        onChange: handlePublishChange
+      })
+    }), dashboardToUnpublish !== null && jsx(DotDialog, {
+      cancelButtonVisible: !unpublished,
+      closeOnSubmit: false,
+      hasPrimaryAction: unpublishing === null || unpublished,
+      open: dashboardToUnpublish !== null,
+      title: "Unpublish",
+      submitButtonProps: {
+        'data-testid': 'unpublish-confirm-button',
+        label: unpublished ? 'Got it' : 'Unpublish'
+      },
+      onCancel: handleCancelUnpublish,
+      onSubmit: unpublished ? handleCancelUnpublish : handleUnpublish,
+      children: jsx(ActiveUnpublishMessage, {
+        dashboardName: dashboardToUnpublish === null || dashboardToUnpublish === void 0 ? void 0 : dashboardToUnpublish.name,
+        unpublished: unpublished,
+        unpublishing: unpublishing !== null
+      })
+    })]
+  });
+}
+
+const StyledDotMenu = styled(DotMenu)`
+  ${() => css`
+    z-index: 9999;
+  `}
+`;
+
+function DotDashboardOptionsMenu({
+  dashboard,
+  isEdit = false,
+  onStartDuplicate,
+  onStartStatusChange,
+  onViewMode
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const handleMenuClick = useCallback(event => {
+    setAnchorEl(event.currentTarget);
+    setOpen(orig => !orig);
+  }, []);
+  const handleMenuClose = useCallback(() => {
+    setAnchorEl(null);
+    setOpen(false);
+  }, []);
+  const handleEditClick = useCallback(() => {
+    handleMenuClose();
+    onViewMode(dashboard, 'edit');
+  }, [dashboard, onViewMode]);
+  const isDraft = dashboard.lifecycle_state === DashboardView.lifecycle_state.DRAFT;
+  const menuItems = [];
+  if (!isEdit && onViewMode && !dashboard.is_ootb_dashboard) {
+    menuItems.push({
+      children: jsxs(DotLink, {
+        ariaLabel: "Edit dashboard",
+        color: "inherit",
+        onClick: handleEditClick,
+        underline: "none",
+        children: [jsx(DotIcon, {
+          iconId: "edit"
+        }), " Edit"]
+      }),
+      key: 'edit',
+      onclick: handleEditClick
+    });
+  }
+  if (onStartStatusChange && !dashboard.is_ootb_dashboard && isDraft) {
+    menuItems.push({
+      key: 'publish',
+      children: jsxs(DotLink, {
+        ariaLabel: "Publish dashboard",
+        color: "inherit",
+        "data-testid": `publish-dashboard-button-${dashboard.id}`,
+        onClick: () => {
+          handleMenuClose();
+          onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
+        },
+        underline: "none",
+        children: [jsx(DotIcon, {
+          iconId: "send-airplane"
+        }), " ", 'Publish']
+      }),
+      onclick: () => {
+        handleMenuClose();
+        onStartStatusChange(dashboard, DashboardView.lifecycle_state.PUBLISHED);
+      }
+    });
+  }
+  if (onStartDuplicate) {
+    const handleDuplicateClick = () => {
+      handleMenuClose();
+      onStartDuplicate(dashboard);
+    };
+    menuItems.push({
+      children: jsxs(DotLink, {
+        ariaLabel: "Duplicate dashboard",
+        color: "inherit",
+        onClick: handleDuplicateClick,
+        underline: "none",
+        children: [jsx(DotIcon, {
+          iconId: "duplicate"
+        }), " Duplicate"]
+      }),
+      key: 'duplicate',
+      onclick: handleDuplicateClick
+    });
+  }
+  return menuItems.length > 0 ? jsxs(Fragment, {
+    children: [jsx(DotIconButton, {
+      className: "expand-button",
+      "data-testid": "card-header-action-button",
+      iconId: "options",
+      onClick: handleMenuClick,
+      size: "medium"
+    }), jsx(StyledDotMenu, {
+      anchorEl: anchorEl,
+      className: "card-header-action-menu",
+      disablePortal: true,
+      id: "card-header-action-menu",
+      menuItems: menuItems,
+      open: open,
+      onLeave: handleMenuClose
+    })]
+  }) : null;
+}
+
+const helpButtonClassName = 'help-button';
+const StyledDashboardActions = styled.div`
+  ${({
+  theme
+}) => css`
+    button.${helpButtonClassName} {
+      margin: ${theme.spacing(1)};
+    }
+  `}
+`;
+
+function FavoriteButton({
+  dashboard,
+  onFavorite
+}) {
+  const {
+    dashboardsError,
+    favoriteDashboard
+  } = useDotMetadataApiContext();
+  const {
+    enqueueMessage
+  } = useDotSnackbarContext();
+  useEnqueueErrorMessage(dashboardsError);
+  const handleFavorite = useCallback((dashboardId, favoriteValue) => {
+    // being optimistic; if the api call fails, there will be an error message
+    enqueueMessage(`Dashboard has been ${favoriteValue ? '' : 'un-'}favorited.`, 'success');
+    onFavorite && onFavorite(dashboardId, favoriteValue);
+    favoriteDashboard(dashboardId, favoriteValue);
+  }, []);
+  return jsx(DotIconButton, {
+    iconId: `star-favorites-${dashboard.favorite ? 'active' : 'default'}`,
+    "data-testid": `dashboard-favorite-icon-${dashboard.id}`,
+    tooltip: dashboard.favorite ? 'Remove from favorites' : 'Add to favorites',
+    onClick: () => handleFavorite(dashboard.id, !dashboard.favorite)
+  });
+}
+function HelpButton({
+  dashboard
+}) {
+  const {
+    getDashboardHelpContent
+  } = useDotMetadataApiContext();
+  const openHelpContent = useCallback(() => {
+    return getDashboardHelpContent(dashboard.help_content_id).then(helpContentResponse => {
+      const blob = new Blob([helpContentResponse], {
+        type: 'text/html'
+      });
+      const url = URL.createObjectURL(blob);
+      window.open(url, '_blank');
+    });
+  }, [dashboard]);
+  return jsx(DotTooltip, {
+    title: (dashboard === null || dashboard === void 0 ? void 0 : dashboard.help_content_id) ? 'Open dashboard help content in a new window' : 'Help is unavailable for this dashboard',
+    children: jsx(DotButton, {
+      className: helpButtonClassName,
+      "data-testid": "help-content-button",
+      disabled: !(dashboard === null || dashboard === void 0 ? void 0 : dashboard.help_content_id),
+      onClick: openHelpContent,
+      startIcon: jsx(DotIcon, {
+        iconId: "help"
+      }),
+      type: "outlined",
+      children: "Dashboard help"
+    })
+  });
+}
+function CloseButton({
+  dashboard,
+  onClose
+}) {
+  return onClose ? jsx(DotIconButton, {
+    iconId: "close",
+    "data-testid": `dashboard-close-icon-${dashboard.id}`,
+    tooltip: "Close dashboard",
+    onClick: () => onClose(dashboard)
+  }) : null;
+}
+function DotDashboardActions({
+  applications,
+  categories,
+  dashboard,
+  isEdit = false,
+  canEdit = false,
+  onClose,
+  onFavorite,
+  onStatusChanged,
+  onDuplicated,
+  onViewMode
+}) {
+  // NOTE:  useState functions need to stay at the top of the file so that
+  // they are evaluated before any context imports. If they are evaluated
+  // after they can cause React state issues when rendering.
+  const [dashboardToCopy, setDashboardToCopy] = useState(null);
+  const [dashboardToPublish, setDashboardToPublish] = useState(null);
+  const [dashboardToUnpublish, setDashboardToUnpublish] = useState(null);
+  const {
+    duplicateDashboard
+  } = useDotMetadataApiContext();
+  const handlePublishConfirm = useCallback(publishedDashboard => {
+    setDashboardToPublish(null);
+    setDashboardToUnpublish(null);
+    onStatusChanged && onStatusChanged(publishedDashboard);
+  }, []);
+  const handlePublishConfirmClose = useCallback(() => {
+    setDashboardToPublish(null);
+    setDashboardToUnpublish(null);
+  }, []);
+  const handleStartStatusChange = useCallback(() => {
+    setDashboardToUnpublish(null);
+    setDashboardToPublish(dashboard);
+  }, [dashboard]);
+  const handleDuplicateClose = useCallback(() => {
+    setDashboardToCopy(null);
+  }, []);
+  const handleDuplicateSubmit = useCallback((data, isDone = true) => {
+    setDashboardToCopy(null);
+    const copyData = {
+      name: data.name,
+      description: data.description,
+      categories: data.categories
+    };
+    return duplicateDashboard(dashboard.id, copyData).then(result => {
+      if (result && 'id' in result) {
+        onDuplicated(result, isDone);
+      }
+    });
+  }, [dashboard]);
+  const handleStartDuplicate = useCallback(dashboardToDupe => {
+    setDashboardToCopy(dashboardToDupe);
+  }, []);
+  const handleStartDuplicateIfConfig = onDuplicated ? handleStartDuplicate : undefined;
+  const handleStartStatusChangeIfConfig = onStatusChanged ? handleStartStatusChange : undefined;
+  return jsxs(StyledDashboardActions, {
+    "data-testid": "dot-dashboard-actions",
+    children: [jsx(DotDashboardPublishConfirm, {
+      applicationList: applications,
+      categories: categories,
+      dashboardToPublish: dashboardToPublish,
+      dashboardToUnpublish: dashboardToUnpublish,
+      onClose: handlePublishConfirmClose,
+      onStatusChanged: handlePublishConfirm
+    }), categories && dashboardToCopy && jsx(DotDashboardDialog, {
+      title: "Create dashboard",
+      availableCategories: categories === null || categories === void 0 ? void 0 : categories.categories[dashboard.target_apps[0]],
+      copyDashboard: dashboardToCopy,
+      open: true,
+      onClose: handleDuplicateClose,
+      onSubmit: handleDuplicateSubmit
+    }), jsx(HelpButton, {
+      dashboard: dashboard
+    }), onFavorite && jsx(FavoriteButton, {
+      dashboard: dashboard,
+      onFavorite: onFavorite
+    }), canEdit && jsx(DotDashboardOptionsMenu, {
+      dashboard: dashboard,
+      isEdit: isEdit,
+      onViewMode: onViewMode,
+      onStartStatusChange: handleStartStatusChangeIfConfig,
+      onStartDuplicate: handleStartDuplicateIfConfig
+    }), jsx(CloseButton, {
+      dashboard: dashboard,
+      onClose: onClose
+    })]
+  });
+}
+
+const StyledDashboardHeader = styled(DotActionToolbar)`
+  ${({
+  theme
+}) => css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: ${theme.spacing(0, 2)};
+  `}
+`;
+
+function DotDashboardHeader({
+  accountId,
+  dashboard,
+  isEdit = false,
+  canEdit = false,
+  onClose,
+  onFavorite,
+  onStatusChanged,
+  onDuplicated,
+  onViewMode
+}) {
+  const {
+    applications,
+    applicationsError,
+    applicationsLoading,
+    loadApplications
+  } = useDotCoreApiContext();
+  const {
+    categories,
+    categoriesLoading,
+    dashboardsError,
+    getCategories
+  } = useDotMetadataApiContext();
+  useEnqueueErrorMessage(!applicationsLoading && applicationsError);
+  useEnqueueErrorMessage(!categoriesLoading && dashboardsError);
+  useEffect(() => {
+    loadApplications(accountId);
+    getCategories();
+  }, []);
+  return jsxs(StyledDashboardHeader, {
+    children: [jsx(DotTypography, {
+      component: "h2",
+      variant: "h2",
+      children: dashboard === null || dashboard === void 0 ? void 0 : dashboard.name
+    }), jsx(DotDashboardActions, {
+      applications: applications,
+      categories: categories,
+      dashboard: dashboard,
+      isEdit: isEdit,
+      canEdit: canEdit,
+      onClose: onClose,
+      onFavorite: onFavorite,
+      onStatusChanged: onStatusChanged,
+      onDuplicated: onDuplicated,
+      onViewMode: onViewMode
+    })]
+  });
+}
+
+const rootClassName$x = 'dot-empty-state';
+const StyledEmptyState = styled.div`
+  ${({
+  theme
+}) => css`
+    &.dot-empty-state {
+      margin: 0 auto;
+      max-width: 600px;
+      text-align: center;
+
+      .empty-state-image-container {
+        display: flex;
+        justify-content: center;
+      }
+
+      .empty-state-image {
+        min-height: ${theme.spacing(10)};
+        margin-bottom: ${theme.spacing(5)};
+      }
+
+      h2 {
+        margin-bottom: ${theme.spacing(1)};
+      }
+
+      .dot-tooltip {
+        display: inline-block;
+      }
+
+      .dot-button {
+        margin-top: ${theme.spacing(4)};
+      }
+    }
+  `}
+`;
+
+const rootClassName$w = 'dot-illustration';
+const StyledIllustration = styled.span`
+  &.${rootClassName$w} {
+    display: inline-block;
+  }
+`;
+
+const DotIllustration = ({
+  alt,
+  ariaLabel,
+  ariaRole = 'img',
+  className,
+  'data-testid': dataTestId,
+  illustrationId,
+  theme = 'light',
+  title,
+  tooltip,
+  tooltipPlacement = 'right-end'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$z, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$w, className);
+  return jsx(DotTooltip, {
+    title: tooltip,
+    placement: tooltipPlacement,
+    "data-testid": `${dataTestId || rootClassName$w}-tooltip`,
+    children: jsx(StyledIllustration, {
+      "aria-hidden": "false",
+      "aria-label": ariaLabel || title || 'Illustration',
+      className: rootClasses,
+      "data-testid": dataTestId || rootClassName$w,
+      role: ariaRole,
+      children: jsx("img", {
+        alt: alt || 'Illustration',
+        "aria-label": ariaLabel || title || 'Illustration',
+        className: `illustration-${illustrationId}-${theme} dot-img`,
+        "data-testid": dataTestId && `${dataTestId}-img`,
+        role: ariaRole,
+        title: title || 'Illustration'
+      })
+    })
+  });
+};
+
+const DotEmptyState = ({
+  ariaLabel,
+  buttonProps,
+  className,
+  'data-testid': dataTestId,
+  illustrationId,
+  imageAltText,
+  imageSrc,
+  subtitle,
+  title
+}) => {
+  const rootClasses = useStylesWithRootClass(rootClassName$x, className);
   return jsxs(StyledEmptyState, {
     "aria-label": ariaLabel,
     className: rootClasses,
@@ -8419,13 +10851,13 @@ const StyledRadioGroup = styled(RadioGroup)`
   `}
 `;
 
-const rootClassName$x = 'dot-date-picker';
+const rootClassName$v = 'dot-date-picker';
 const popperClassName = 'dot-date-picker-popper';
 const containerClassName$2 = 'dot-date-picker-container';
 const rectanglePickersDayClassName = 'dot-rectangle-pickers-day';
 const StyledDatePickerContainer = styled.div`
   ${() => css`
-    &.${rootClassName$x} .full-width {
+    &.${rootClassName$v} .full-width {
       width: 100%;
     }
   `}
@@ -8434,7 +10866,7 @@ const StyledDatePicker = styled(DatePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$x} {
+    &.${rootClassName$v} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -8474,7 +10906,7 @@ const StyledPickersDay = styled(PickersDay)`
   `}
 `;
 
-const rootClassName$w = 'dot-time-picker';
+const rootClassName$u = 'dot-time-picker';
 const containerClassName$1 = 'dot-time-picker-container';
 const TIME_SELECTION_HEIGHT_SPACING = 34.5;
 const TIME_SELECTION_WIDTH_SPACING = 14.5;
@@ -8545,7 +10977,7 @@ const StyledTimePicker = styled(TimePicker)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$w} {
+    &.${rootClassName$u} {
       ${pickerInputStyles(theme)};
 
       .Mui-disabled.MuiInputBase-root,
@@ -8564,20 +10996,20 @@ const StyledTimePicker = styled(TimePicker)`
   `}
 `;
 
-const rootClassName$v = 'dot-form';
+const rootClassName$t = 'dot-form';
 const StyledFormContainer = styled.div`
   ${({
   theme
 }) => css`
-    &.${rootClassName$v} {
+    &.${rootClassName$t} {
       margin: ${theme.spacing(3, 0)};
 
       .${rootClassName$E},
         .${rootClassName$G},
         .${rootClassName$18},
         .${rootSelectClassName},
-        .${rootClassName$x},
-        .${rootClassName$w} {
+        .${rootClassName$v},
+        .${rootClassName$u} {
         margin: ${theme.spacing(1, 0)};
       }
 
@@ -8586,9 +11018,9 @@ const StyledFormContainer = styled.div`
         label
         + .${rootSelectClassName},
         label
-        + .${rootClassName$x},
+        + .${rootClassName$v},
         label
-        + .${rootClassName$w} {
+        + .${rootClassName$u} {
         margin: ${theme.spacing(0, 0, 1, 0)};
       }
 
@@ -8608,7 +11040,7 @@ const DotForm = ({
   'data-testid': dataTestId,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$v, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
   return jsx("form", {
     "aria-label": ariaLabel,
     "data-testid": dataTestId,
@@ -8621,10 +11053,10 @@ const DotForm = ({
   });
 };
 
-const rootClassName$u = 'dot-dynamic-form';
+const rootClassName$s = 'dot-dynamic-form';
 const StyledDynamicForm = styled(DotForm)`
   ${() => css`
-    &.${rootClassName$u} {
+    &.${rootClassName$s} {
     }
   `}
 `;
@@ -8798,129 +11230,18 @@ const checkIfFormDataValid = formState => {
   const formData = formState.data;
   for (const formDataKey in formData) {
     const formValues = getOutputFormData(formState);
-    const isHidden = checkIfHiddenControl(formData[formDataKey].hidden, formValues);
-    if (!formData[formDataKey].isValid && !isHidden) return false;
-  }
-  return true;
-};
-
-const DotInputSelect = ({
-  ariaLabel,
-  autoFocus,
-  className,
-  'data-pendoid': dataPendoId = rootSelectClassName,
-  'data-testid': dataTestId,
-  defaultValue,
-  disabled = false,
-  endIcon,
-  endText,
-  error = false,
-  fullWidth = true,
-  helperText,
-  id,
-  inputRef,
-  label,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  options = [],
-  persistentLabel,
-  readOnly = false,
-  required,
-  shrink,
-  size = 'small',
-  startIcon,
-  success,
-  value,
-  warning = false
-}) => {
-  const hasWarning = !error && warning && warningClassName;
-  const hasSuccess = !error && !warning && success && successClassName;
-  const endAdornment = endIcon || endText;
-  const inputStyles = useStylesWithRootClass('dot-select', readOnly && readOnlyClassName$1);
-  const rootStyles = useStylesWithRootClass(rootSelectClassName, hasSuccess, hasWarning);
-  const getOption = option => {
-    return typeof option === 'string' ? option : option.option;
-  };
-  const getValue = option => {
-    return typeof option === 'string' ? option : (option === null || option === void 0 ? void 0 : option.value) || option.option;
-  };
-  return jsxs("div", {
-    className: className,
-    children: [persistentLabel && jsx(DotInputLabel, {
-      disabled,
-      error,
-      id,
-      label,
-      required
-    }), jsx(StyledTextField, {
-      InputProps: {
-        startAdornment: startIcon && jsx(StyledAdornment, {
-          className: `${adornmentIconClassName} start`,
-          position: "start",
-          children: startIcon
-        }),
-        endAdornment: endAdornment && jsx(StyledAdornment, {
-          className: `${adornmentIconClassName} end`,
-          position: "end",
-          children: endAdornment
-        })
-      },
-      SelectProps: {
-        native: !readOnly,
-        readOnly,
-        open: readOnly ? false : undefined
-      },
-      "aria-label": ariaLabel || label,
-      autoFocus: autoFocus,
-      className: rootStyles,
-      defaultValue: defaultValue,
-      disabled: disabled,
-      error: error,
-      fullWidth: fullWidth,
-      helperText: helperText,
-      id: id,
-      InputLabelProps: {
-        shrink: shrink
-      },
-      inputProps: {
-        'aria-label': ariaLabel,
-        'data-pendoid': dataPendoId,
-        'data-testid': dataTestId,
-        className: inputStyles,
-        readOnly
-      },
-      inputRef: inputRef,
-      label: persistentLabel ? null : label,
-      multiline: false,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      onFocus: onFocus,
-      onKeyDown: onKeyDown,
-      required: required,
-      role: "textbox",
-      select: true,
-      size: size,
-      value: value,
-      variant: "outlined",
-      children: options.map(option => jsx("option", {
-        className: "dot-option",
-        value: getValue(option),
-        children: getOption(option)
-      }, getValue(option)))
-    })]
-  });
+    const isHidden = checkIfHiddenControl(formData[formDataKey].hidden, formValues);
+    if (!formData[formDataKey].isValid && !isHidden) return false;
+  }
+  return true;
 };
 
-const rootClassName$t = 'dot-progress-button';
+const rootClassName$r = 'dot-progress-button';
 const StyledProgressButton = styled(DotButton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$t} {
+    &.${rootClassName$r} {
       .hidden {
         // hide children but preserve its space so that
         // button's dimensions don't change
@@ -8945,7 +11266,7 @@ const DotProgressButton = ({
   ariaLabel,
   children,
   className,
-  'data-pendoid': dataPendoId = rootClassName$t,
+  'data-pendoid': dataPendoId = rootClassName$r,
   'data-testid': dataTestId,
   disabled = false,
   disableRipple = false,
@@ -8958,7 +11279,7 @@ const DotProgressButton = ({
   tooltip,
   type = 'primary'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$t, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
   const isButtonDisabled = disabled || isLoading;
   const titleClasses = useStylesWithRootClass(isLoading ? 'hidden' : '');
   const progressCircleSize = size === 'large' ? SPINNER_LARGE_SIZE : SPINNER_DEFAULT_SIZE;
@@ -8987,12 +11308,12 @@ const DotProgressButton = ({
   });
 };
 
-const rootClassName$s = 'dot-radio';
+const rootClassName$q = 'dot-radio';
 const StyledRadioButton = styled(Radio)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$s} {
+    &.${rootClassName$q} {
       padding: 8px;
 
       svg {
@@ -9031,7 +11352,7 @@ function DotRadioButton({
   const radioControl = jsx(StyledRadioButton, {
     checked: checked,
     classes: {
-      root: rootClassName$s
+      root: rootClassName$q
     },
     color: "primary",
     "data-pendoid": dataPendoId,
@@ -9142,7 +11463,7 @@ const DotRadioGroup = ({
   });
 };
 
-const rootClassName$r = 'dot-switch';
+const rootClassName$p = 'dot-switch';
 const StyledSwitch = styled(Switch)`
   ${({
   theme
@@ -9171,7 +11492,7 @@ const DotSwitch = ({
   checked,
   className,
   color,
-  'data-pendoid': dataPendoId = rootClassName$r,
+  'data-pendoid': dataPendoId = rootClassName$p,
   'data-testid': dataTestId,
   disabled = false,
   id,
@@ -9181,7 +11502,7 @@ const DotSwitch = ({
   onChange,
   size = 'medium'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$r, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$p, className);
   const handleChange = event => {
     onChange && onChange(event);
   };
@@ -9532,7 +11853,7 @@ const DotDynamicForm = ({
   onChange,
   onSubmit
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$u, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$s, className);
   // Memoize this operation so that is doesn't get executed each time this
   // component re-renders
   const initialFormState = useMemo(() => getInitialFormState(config, liveValidation), [config, liveValidation, getInitialFormState]);
@@ -9778,7 +12099,7 @@ const DotDynamicForm = ({
   });
 };
 
-const rootClassName$q = 'dot-inline-edit';
+const rootClassName$o = 'dot-inline-edit';
 const editModeClassName = 'dot-edit-mode';
 const viewModeClassName = 'dot-view-mode';
 const placeholderClassName = 'dot-placeholder';
@@ -9790,7 +12111,7 @@ const StyledInlineEdit = styled.div`
   theme,
   fullWidth
 }) => css`
-    &.${rootClassName$q} {
+    &.${rootClassName$o} {
       align-items: center;
       color: ${theme.palette.figma.typography.black};
       display: ${fullWidth ? 'flex' : 'inline-flex'};
@@ -10002,7 +12323,7 @@ const DotInlineEdit = ({
   bindings,
   charactersLimit,
   className,
-  'data-pendoid': dataPendoId = rootClassName$q,
+  'data-pendoid': dataPendoId = rootClassName$o,
   'data-testid': dataTestId,
   fullWidth = true,
   hideActionButtons,
@@ -10035,7 +12356,7 @@ const DotInlineEdit = ({
     }
   }, [value]);
   const isSaveDisabled = checkIfEmptyValue(inputValue);
-  const rootClasses = useStylesWithRootClass(rootClassName$q, className, editing ? editModeClassName : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$o, className, editing ? editModeClassName : '');
   const handleShowTooltip = visible => {
     if (!editing) {
       setShowTooltip(visible);
@@ -10214,13 +12535,13 @@ const DotInlineEdit = ({
   });
 };
 
-const rootClassName$p = 'dot-navigation-rail';
+const rootClassName$n = 'dot-navigation-rail';
 const StyledNavigationRail = styled.div`
   ${({
   theme,
   railItemPosition
 }) => css`
-    &.${rootClassName$p} {
+    &.${rootClassName$n} {
       background: ${theme.palette.figma.neutral.elevated};
       border-left: 1px solid ${theme.palette.figma.border.default};
       display: flex;
@@ -10267,7 +12588,7 @@ const DotNavigationRail = ({
   railItems,
   selectedIndex = 0
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$p, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
   const [selectedItemIndex, setSelectedItemIndex] = useState(selectedIndex);
   /* Used to change selected index programmatically from the consumer component */
   useEffect(() => {
@@ -10318,12 +12639,12 @@ const DotNavigationRail = ({
   });
 };
 
-const rootClassName$o = 'dot-pill';
+const rootClassName$m = 'dot-pill';
 const StyledPill = styled(Chip)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$o} {
+    &.${rootClassName$m} {
       background-color: ${({
   backgroundcolor,
   variant
@@ -10446,7 +12767,7 @@ const DotPill = ({
   status = 'default',
   variant = 'filled'
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$o, className, status);
+  const rootClasses = useStylesWithRootClass(rootClassName$m, className, status);
   return jsx(StyledPill, {
     "aria-label": ariaLabel,
     bordercolor: bordercolor,
@@ -10464,12 +12785,12 @@ const DotPill = ({
   });
 };
 
-const rootClassName$n = 'dot-skeleton';
+const rootClassName$l = 'dot-skeleton';
 const StyledSkeleton = styled(Skeleton)`
   ${({
   theme
 }) => css`
-    &.${rootClassName$n} {
+    &.${rootClassName$l} {
       background-color: ${theme.palette.figma.border.darker};
     }
   `}
@@ -10484,7 +12805,7 @@ const DotSkeleton = ({
   width,
   variant
 }) => {
-  const rootClasses = useStylesWithRootClass(rootClassName$n, className);
+  const rootClasses = useStylesWithRootClass(rootClassName$l, className);
   return jsx(StyledSkeleton, {
     animation: "wave",
     "aria-label": ariaLabel,
@@ -10499,246 +12820,6 @@ const DotSkeleton = ({
   });
 };
 
-function addAutoHideDuration(severity) {
-  return severity === 'error' ? null : 10000;
-}
-
-const getSnackbarTitleFromSeverity = severity => {
-  switch (severity) {
-    case 'success':
-      return 'Success';
-    case 'warning':
-      return 'Warning';
-    case 'error':
-      return 'Error';
-    case 'info':
-      return 'Info';
-    default:
-      return 'Success';
-  }
-};
-
-const rootClassName$m = 'dot-snackbar';
-const StyledSnackbar = styled(Snackbar)`
-  ${({
-  theme,
-  width,
-  $anchorOriginTop
-}) => css`
-    &.${rootClassName$m} {
-      .MuiAlert-message {
-        word-break: break-word;
-      }
-      .${rootClassName$16} {
-        align-items: flex-start;
-      }
-      &.MuiSnackbar-anchorOriginTopLeft,
-      &.MuiSnackbar-anchorOriginTopCenter,
-      &.MuiSnackbar-anchorOriginTopRight {
-        top: ${$anchorOriginTop}px;
-        z-index: ${levelFourth};
-      }
-
-      .dot-snackbar-actions {
-        display: flex;
-        align-items: center;
-        margin-top: ${theme.spacing(1)};
-        gap: ${theme.spacing(2)};
-
-        .primary-action-btn {
-          background-color: transparent;
-        }
-      }
-
-      .MuiAlert-root {
-        max-width: ${width ? 'unset' : '500px'};
-        min-width: ${width ? 'unset' : '344px'};
-        z-index: ${levelFourth};
-      }
-    }
-  `}
-`;
-
-const DEFAULT_ANCHOR_ORIGIN = {
-  vertical: 'top',
-  horizontal: 'right'
-};
-const DotSnackbar = ({
-  anchorOrigin = DEFAULT_ANCHOR_ORIGIN,
-  anchorOriginTop = 108,
-  ariaLabel,
-  autoHideDuration,
-  children,
-  className,
-  'data-testid': dataTestId,
-  hideOnClickAway = true,
-  onClose,
-  open,
-  primaryAction,
-  secondaryAction,
-  severity,
-  width
-}) => {
-  const hasActions = !!(primaryAction || secondaryAction);
-  const calculatedAutoHideDuration = autoHideDuration === null || autoHideDuration > 0 ? autoHideDuration : addAutoHideDuration(severity);
-  const rootClasses = useStylesWithRootClass(rootClassName$m, className);
-  const handleSnackbarClose = reason => {
-    if (!reason || hideOnClickAway || !hideOnClickAway && reason !== 'clickaway') {
-      onClose();
-    }
-  };
-  return jsx(StyledSnackbar, {
-    anchorOrigin: anchorOrigin,
-    "$anchorOriginTop": anchorOriginTop,
-    "aria-label": ariaLabel,
-    autoHideDuration: calculatedAutoHideDuration,
-    classes: {
-      root: rootClasses
-    },
-    "data-testid": dataTestId,
-    onClose: (_e, r) => handleSnackbarClose(r),
-    open: open,
-    severity: severity,
-    width: width,
-    children: jsx("div", {
-      children: jsx(DotAlertBanner, {
-        severity: severity,
-        width: width,
-        onClose: _e => handleSnackbarClose(),
-        children: jsxs("div", {
-          children: [jsx(DotTypography, {
-            variant: "subtitle2",
-            noMarginBottom: false,
-            children: getSnackbarTitleFromSeverity(severity)
-          }), isString$1(children) ? jsx(DotTypography, {
-            ariaLabel: severity,
-            variant: "body1",
-            children: children
-          }) : jsx("span", {
-            "aria-label": severity,
-            children: children
-          }), hasActions && jsxs("div", {
-            className: "dot-snackbar-actions",
-            children: [primaryAction && jsx(DotButton, {
-              className: "primary-action-btn",
-              "data-testid": "primary-action-btn",
-              onClick: primaryAction.onClick,
-              size: "small",
-              type: "outlined",
-              children: primaryAction.label
-            }), secondaryAction && jsx(DotLink, {
-              "data-testid": "secondary-action-link",
-              href: secondaryAction.href,
-              color: "inherit",
-              children: secondaryAction.label
-            })]
-          })]
-        })
-      })
-    })
-  });
-};
-
-const rootClassName$l = 'dot-snackbar-container';
-const StyledSnackbarContainer = styled.div`
-  ${() => css`
-    &.${rootClassName$l} {
-      position: absolute;
-      top: 0;
-      width: 250px;
-      height: auto;
-      right: 0;
-      & > div {
-        position: relative;
-      }
-    }
-  `}
-`;
-
-const DotSnackbarContext = createContext({
-  alerts: [],
-  enqueueMessage: (_message, _severity, _autoHideDuration, _primaryAction, _secondaryAction) => null,
-  removeMessage: _id => null
-});
-const DotSnackbarContainer = ({
-  hideOnClickAway
-}) => {
-  const {
-    alerts,
-    removeMessage
-  } = useDotSnackbarContext();
-  function handleClose(id) {
-    return () => {
-      removeMessage(id);
-    };
-  }
-  return jsx(StyledSnackbarContainer, {
-    className: rootClassName$l,
-    children: jsx("div", {
-      className: rootClassName$l,
-      "data-testid": rootClassName$l,
-      children: alerts.slice().reverse().map(alert => {
-        return jsx(DotSnackbar, {
-          autoHideDuration: alert.autoHideDuration,
-          hideOnClickAway: hideOnClickAway,
-          onClose: handleClose(alert.id),
-          open: alert.open,
-          severity: alert.severity,
-          primaryAction: alert.primaryAction,
-          secondaryAction: alert.secondaryAction,
-          children: alert.message
-        }, alert.id);
-      })
-    })
-  });
-};
-const DotSnackbarProvider = ({
-  children,
-  hideOnClickAway = true
-}) => {
-  const [alerts, setAlerts] = useState([]);
-  function enqueueMessage(message, severity, autoHideDuration, primaryAction, secondaryAction) {
-    const id = CreateUUID();
-    const queue = {
-      id,
-      message,
-      severity,
-      open: true,
-      autoHideDuration,
-      primaryAction,
-      secondaryAction
-    };
-    setAlerts(prevState => {
-      return [...prevState, Object.assign({}, queue)];
-    });
-    return id;
-  }
-  const removeMessage = id => {
-    setAlerts(prev => {
-      return prev.map(a => {
-        return a.id === id ? Object.assign(Object.assign({}, a), {
-          open: false
-        }) : a;
-      });
-    });
-  };
-  const DotSnackbarValues = {
-    alerts,
-    enqueueMessage,
-    removeMessage
-  };
-  const memoizedValues = useMemo(() => DotSnackbarValues, [alerts]);
-  return jsxs(DotSnackbarContext.Provider, {
-    value: memoizedValues,
-    children: [jsx(DotSnackbarContainer, {
-      hideOnClickAway: hideOnClickAway
-    }), children]
-  });
-};
-const useDotSnackbarContext = () => {
-  return useContext(DotSnackbarContext);
-};
-
 const rootClassName$k = 'dot-split-button-group';
 const StyledSplitButtonGroup = styled(ButtonGroup)`
   ${({
@@ -11331,13 +13412,13 @@ const DotStepper = ({
             return [step.className, isActive ? 'active' : 'inactive', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
           };
           const getContent = () => {
-            return isString$1(step.description) ? jsx(StepDescription, {
+            return isString$2(step.description) ? jsx(StepDescription, {
               variant: "body2",
               children: step.description
             }) : step.description;
           };
           const getHorizontalDescription = () => {
-            return isString$1(step.description) ? jsx(DotTypography, {
+            return isString$2(step.description) ? jsx(DotTypography, {
               variant: "body2",
               className: "horizontal-step-description",
               children: step.description
@@ -11725,7 +13806,7 @@ const StyledTableBody = styled(TableBody)`
 const getFormattedTableCellValue = (
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 value, typographyVariant) => {
-  if (isString$1(value) || isNumber(value)) {
+  if (isString$2(value) || isNumber(value)) {
     return jsx(DotTypography, {
       className: "dot-cell-typography",
       variant: typographyVariant,
@@ -12156,7 +14237,7 @@ const DotHeaderCell = ({
   value,
   width
 }) => {
-  const headerTitle = isString$1(value) ? value : null;
+  const headerTitle = isString$2(value) ? value : null;
   const formattedValue = getFormattedTableCellValue(value, typography);
   const getCellValue = () => {
     if (sortable) {
@@ -13888,7 +15969,7 @@ const DotDatePicker = ({
   autoFocus = false,
   className,
   closeOnSelect = true,
-  'data-pendoid': dataPendoId = rootClassName$x,
+  'data-pendoid': dataPendoId = rootClassName$v,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker,
@@ -13928,7 +16009,7 @@ const DotDatePicker = ({
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isInputReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
   const inputRef = useRef(null);
-  const rootClasses = useStylesWithRootClass(rootClassName$x, className, isInputReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$v, className, isInputReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$2, fullWidth ? 'full-width' : '', className);
   const focusInput = ref => {
     setTimeout(() => {
@@ -14147,7 +16228,7 @@ const DotTimePicker = ({
   ariaLabel,
   autoFocus = false,
   className,
-  'data-pendoid': dataPendoId = rootClassName$w,
+  'data-pendoid': dataPendoId = rootClassName$u,
   'data-testid': dataTestId,
   defaultValue,
   disableOpenPicker = false,
@@ -14179,7 +16260,7 @@ const DotTimePicker = ({
   const hasValueWithoutChangeHandler = value !== undefined && onChange === undefined;
   const hasBothValueAndDefaultValue = value !== undefined && defaultValue !== undefined;
   const isComponentReadOnly = readOnly || hasValueWithoutChangeHandler || hasBothValueAndDefaultValue;
-  const rootClasses = useStylesWithRootClass(rootClassName$w, className, isComponentReadOnly ? 'read-only' : '');
+  const rootClasses = useStylesWithRootClass(rootClassName$u, className, isComponentReadOnly ? 'read-only' : '');
   const containerClasses = useStylesWithRootClass(containerClassName$1, fullWidth ? 'full-width' : '', className);
   const inputRef = useRef(null);
   const [isPickerOpened, setIsPickerOpened] = useState(false);
@@ -14783,4 +16864,4 @@ const DotStickyWithBorder = ({
   });
 };
 
-export { ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotSnackbarContext };
+export { ApiError$1 as ApiError, Cell, CreateUUID, CssCell, CssGrid, CssGridDebug, DashboardAppTypeOptions, DatePickerKeydownContext, Daytime, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppLogo, DotAppSwitcher, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBadge, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCarousel, DotCheckbox, DotCheckboxGroup, DotChip, DotClickAwayListener, DotConfirmationDialog, DotCopyButton, DotCoreApiProvider, DotDashboardActions, DotDashboardDialog, DotDashboardHeader, DotDashboardOptionsMenu, DotDashboardPublishConfirm, DotDatePicker, DotDialog, DotDivider, DotDraggableList, DotDrawer, DotDynamicForm, DotEmptyFilterState, DotEmptyState, DotFileListItem, DotFileUpload, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotIllustration, DotInlineEdit, DotInputSelect, DotInputText, DotLinearProgress, DotLink, DotList, DotMenu, DotMetadataApiProvider, DotNavigationRail, DotPill, DotPopper, DotProgress, DotProgressButton, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotStepper, DotStickyWithBorder, DotSwitch, DotTable, DotTableAction, DotTableActions, DotTablePagination, DotTabs, DotThemeProvider, DotTimePicker, DotTooltip, DotTruncateWithTooltip, DotTypography, avatarColors, breakpointOptions, checkIfValidDate, darkFigmaColors, lightThemeColors as lightColors, lightFigmaColors, mockScrollIntoView, parseAutoCompleteValue, variables as themeVariables, typographyOptions, useDotCoreApiContext, useDotMetadataApiContext, useDotSnackbarContext, useEnqueueErrorMessage };