@digital-ai/dot-components 2.5.2 → 2.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.umd.js CHANGED
@@ -1996,18 +1996,77 @@
1996
1996
  }), void 0);
1997
1997
  });
1998
1998
 
1999
- var rootClassName$X = 'dot-list';
1999
+ var rootClassName$X = 'dot-link';
2000
+ var StyledLink = styled__default["default"](material.Link).withConfig({
2001
+ displayName: "Linkstyles__StyledLink",
2002
+ componentId: "sc-1lpmaww-0"
2003
+ })(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
2004
+ return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n &.", " {\n cursor: pointer;\n\n &:hover :not(.MuiLink-underlineHover) {\n text-decoration: none;\n }\n }\n "], ["\n &.", " {\n cursor: pointer;\n\n &:hover :not(.MuiLink-underlineHover) {\n text-decoration: none;\n }\n }\n "])), rootClassName$X);
2005
+ });
2006
+ var templateObject_1$10, templateObject_2$Y;
2007
+
2008
+ var DotLink = function DotLink(_a) {
2009
+ var ariaLabel = _a.ariaLabel,
2010
+ children = _a.children,
2011
+ className = _a.className,
2012
+ _b = _a.color,
2013
+ color = _b === void 0 ? 'primary' : _b,
2014
+ dataTestId = _a["data-testid"],
2015
+ href = _a.href,
2016
+ onClick = _a.onClick,
2017
+ onMouseEnter = _a.onMouseEnter,
2018
+ onPointerDown = _a.onPointerDown,
2019
+ _c = _a.rel,
2020
+ rel = _c === void 0 ? 'noreferrer' : _c,
2021
+ _d = _a.tabIndex,
2022
+ tabIndex = _d === void 0 ? 0 : _d,
2023
+ target = _a.target,
2024
+ tooltip = _a.tooltip,
2025
+ underline = _a.underline;
2026
+ var rootClasses = useStylesWithRootClass(rootClassName$X, className);
2027
+ var handleKeyPress = function handleKeyPress(event) {
2028
+ if (onClick && event.key === 'Enter') {
2029
+ event.preventDefault();
2030
+ onClick(event);
2031
+ }
2032
+ };
2033
+ return jsxRuntime.jsx(DotTooltip, __assign({
2034
+ title: tooltip
2035
+ }, {
2036
+ children: jsxRuntime.jsx(StyledLink, __assign({
2037
+ "aria-label": ariaLabel,
2038
+ classes: {
2039
+ root: rootClasses
2040
+ },
2041
+ color: color,
2042
+ "data-testid": dataTestId,
2043
+ href: href,
2044
+ onClick: onClick,
2045
+ onKeyPress: handleKeyPress,
2046
+ onMouseEnter: onMouseEnter,
2047
+ onPointerDown: onPointerDown,
2048
+ rel: rel,
2049
+ tabIndex: tabIndex,
2050
+ target: target,
2051
+ underline: underline
2052
+ }, {
2053
+ children: children
2054
+ }), void 0)
2055
+ }), void 0);
2056
+ };
2057
+
2058
+ var rootClassName$W = 'dot-list';
2000
2059
  var listItemRootClass = 'dot-list-item';
2001
2060
  var nestedListClassName = 'dot-nested-list';
2002
2061
  var nestedDrawerClassName = 'dot-nested-drawer';
2003
2062
  var StyledList = styled__default["default"](material.List).withConfig({
2004
2063
  displayName: "Liststyles__StyledList",
2005
2064
  componentId: "wxwqwr-0"
2006
- })(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2065
+ })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2007
2066
  var theme = _a.theme;
2008
- return styled.css(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$X, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1));
2067
+ return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n\n .dot-icon {\n color: ", ";\n }\n\n &.", " .", " {\n padding-left: ", ";\n }\n\n .MuiListSubheader-root {\n padding: 0;\n\n .MuiTypography-root {\n padding: ", ";\n }\n }\n }\n "])), rootClassName$W, theme.palette.layer.n0, theme.palette.layer.n700, nestedListClassName, listItemRootClass, theme.spacing(4), theme.spacing(1));
2009
2068
  });
2010
- var templateObject_1$10, templateObject_2$Y;
2069
+ var templateObject_1$$, templateObject_2$X;
2011
2070
 
2012
2071
  var getChevronIcon = function getChevronIcon(nestedListType, isOpened) {
2013
2072
  if (nestedListType !== 'expandable') {
@@ -2025,18 +2084,18 @@
2025
2084
  var StyledListItem = styled__default["default"](material.ListItem).withConfig({
2026
2085
  displayName: "ListItemstyles__StyledListItem",
2027
2086
  componentId: "sc-1fawh8v-0"
2028
- })(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2087
+ })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2029
2088
  var theme = _a.theme;
2030
- return styled.css(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
2089
+ return styled.css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", ";\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
2031
2090
  });
2032
- var templateObject_1$$, templateObject_2$X;
2091
+ var templateObject_1$_, templateObject_2$W;
2033
2092
 
2034
- var rootClassName$W = 'dot-progress';
2093
+ var rootClassName$V = 'dot-progress';
2035
2094
  var StyledCircularProgress = styled__default["default"](material.CircularProgress).withConfig({
2036
2095
  displayName: "Progressstyles__StyledCircularProgress",
2037
2096
  componentId: "sc-1gs77rb-0"
2038
- })(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n &.", " {\n &.MuiCircularProgress-colorSecondary {\n color: #649a3d;\n }\n }\n"], ["\n &.", " {\n &.MuiCircularProgress-colorSecondary {\n color: #649a3d;\n }\n }\n"])), rootClassName$W);
2039
- var templateObject_1$_;
2097
+ })(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n &.", " {\n &.MuiCircularProgress-colorSecondary {\n color: #649a3d;\n }\n }\n"], ["\n &.", " {\n &.MuiCircularProgress-colorSecondary {\n color: #649a3d;\n }\n }\n"])), rootClassName$V);
2098
+ var templateObject_1$Z;
2040
2099
 
2041
2100
  var DotProgress = function DotProgress(_a) {
2042
2101
  var ariaLabel = _a.ariaLabel,
@@ -2053,7 +2112,7 @@
2053
2112
  value = _a.value,
2054
2113
  _f = _a.variant,
2055
2114
  variant = _f === void 0 ? 'indeterminate' : _f;
2056
- var rootClasses = useStylesWithRootClass(rootClassName$W, className);
2115
+ var rootClasses = useStylesWithRootClass(rootClassName$V, className);
2057
2116
  return jsxRuntime.jsx(DotTooltip, __assign({
2058
2117
  title: tooltip
2059
2118
  }, {
@@ -2089,48 +2148,48 @@
2089
2148
  levelTop: levelTop
2090
2149
  });
2091
2150
 
2092
- var rootClassName$V = 'dot-popper';
2151
+ var rootClassName$U = 'dot-popper';
2093
2152
  var StyledPopper$1 = styled__default["default"](material.Popper).withConfig({
2094
2153
  displayName: "Popperstyles__StyledPopper",
2095
2154
  componentId: "sd1h8p-0"
2096
- })(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2155
+ })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2097
2156
  var theme = _a.theme;
2098
- return styled.css(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n }\n "], ["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n }\n "])), rootClassName$V, theme.typography.fontFamily, theme.typography.body1.fontSize);
2157
+ return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n }\n "], ["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n }\n "])), rootClassName$U, theme.typography.fontFamily, theme.typography.body1.fontSize);
2099
2158
  });
2100
- var templateObject_1$Z, templateObject_2$W;
2159
+ var templateObject_1$Y, templateObject_2$V;
2101
2160
 
2102
2161
  var flyoutMenuClassName = 'dot-flyout-menu';
2103
- var rootClassName$U = 'dot-menu';
2162
+ var rootClassName$T = 'dot-menu';
2104
2163
  var getListMaxHeight = function getListMaxHeight(maxHeight) {
2105
2164
  return isString$1(maxHeight) ? maxHeight : maxHeight + "px";
2106
2165
  };
2107
2166
  var StyledPopper = styled__default["default"](material.Popper).withConfig({
2108
2167
  displayName: "Menustyles__StyledPopper",
2109
2168
  componentId: "sc-134fmqu-0"
2110
- })(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2169
+ })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2111
2170
  var theme = _a.theme;
2112
- return styled.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n z-index: ", ";\n }\n &.", ", &.", " {\n &.loading .MuiPaper-root {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 200px;\n min-width: 200px;\n }\n\n ul,\n .dot-action-item {\n .dot-action-item-text {\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n }\n\n ul {\n box-sizing: content-box;\n min-width: 112px;\n overflow: auto;\n\n /* Conditionally setting 'max-height' with transient prop */\n ", "\n\n .dot-li {\n min-height: auto;\n }\n }\n\n .dot-action-item {\n height: ", ";\n border-top: 1px solid ", ";\n line-height: inherit;\n\n button.dot-button {\n border-radius: ", ";\n justify-content: flex-start;\n height: 100%;\n margin: 0;\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n gap: ", ";\n\n .MuiButton-startIcon {\n margin-left: 0;\n\n .dot-icon {\n flex-shrink: 0;\n }\n }\n }\n }\n }\n }\n "], ["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n z-index: ", ";\n }\n &.", ", &.", " {\n &.loading .MuiPaper-root {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 200px;\n min-width: 200px;\n }\n\n ul,\n .dot-action-item {\n .dot-action-item-text {\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n }\n\n ul {\n box-sizing: content-box;\n min-width: 112px;\n overflow: auto;\n\n /* Conditionally setting 'max-height' with transient prop */\n ", "\n\n .dot-li {\n min-height: auto;\n }\n }\n\n .dot-action-item {\n height: ", ";\n border-top: 1px solid ", ";\n line-height: inherit;\n\n button.dot-button {\n border-radius: ", ";\n justify-content: flex-start;\n height: 100%;\n margin: 0;\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n gap: ", ";\n\n .MuiButton-startIcon {\n margin-left: 0;\n\n .dot-icon {\n flex-shrink: 0;\n }\n }\n }\n }\n }\n }\n "])), rootClassName$V, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$U, rootClassName$V, function (_a) {
2171
+ return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n z-index: ", ";\n }\n &.", ", &.", " {\n &.loading .MuiPaper-root {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 200px;\n min-width: 200px;\n }\n\n ul,\n .dot-action-item {\n .dot-action-item-text {\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n }\n\n ul {\n box-sizing: content-box;\n min-width: 112px;\n overflow: auto;\n\n /* Conditionally setting 'max-height' with transient prop */\n ", "\n\n .dot-li {\n min-height: auto;\n }\n }\n\n .dot-action-item {\n height: ", ";\n border-top: 1px solid ", ";\n line-height: inherit;\n\n button.dot-button {\n border-radius: ", ";\n justify-content: flex-start;\n height: 100%;\n margin: 0;\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n gap: ", ";\n\n .MuiButton-startIcon {\n margin-left: 0;\n\n .dot-icon {\n flex-shrink: 0;\n }\n }\n }\n }\n }\n }\n "], ["\n &.", " {\n font-family: ", ";\n font-size: ", "px;\n z-index: ", ";\n }\n &.", ", &.", " {\n &.loading .MuiPaper-root {\n align-items: center;\n display: flex;\n justify-content: center;\n min-height: 200px;\n min-width: 200px;\n }\n\n ul,\n .dot-action-item {\n .dot-action-item-text {\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n }\n }\n\n ul {\n box-sizing: content-box;\n min-width: 112px;\n overflow: auto;\n\n /* Conditionally setting 'max-height' with transient prop */\n ", "\n\n .dot-li {\n min-height: auto;\n }\n }\n\n .dot-action-item {\n height: ", ";\n border-top: 1px solid ", ";\n line-height: inherit;\n\n button.dot-button {\n border-radius: ", ";\n justify-content: flex-start;\n height: 100%;\n margin: 0;\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n gap: ", ";\n\n .MuiButton-startIcon {\n margin-left: 0;\n\n .dot-icon {\n flex-shrink: 0;\n }\n }\n }\n }\n }\n }\n "])), rootClassName$U, theme.typography.fontFamily, theme.typography.body1.fontSize, levelSecond, rootClassName$T, rootClassName$U, function (_a) {
2113
2172
  var $maxHeight = _a.$maxHeight;
2114
2173
  return $maxHeight !== undefined && "\n max-height: " + getListMaxHeight($maxHeight) + ";\n ";
2115
2174
  }, theme.spacing(7), theme.palette.grey[100], theme.spacing(0, 0, 0.5, 0.5), theme.palette.layer.n100, theme.spacing(3));
2116
2175
  });
2117
- var templateObject_1$Y, templateObject_2$V;
2176
+ var templateObject_1$X, templateObject_2$U;
2118
2177
 
2119
2178
  var MENU_ITEM_HEIGHT_NORMAL = 48;
2120
2179
  var MENU_ITEM_HEIGHT_DENSE = 36;
2121
2180
  var DEFAULT_MAX_VISIBLE_ITEMS = 7;
2122
2181
 
2123
- var rootClassName$T = 'dot-ul';
2182
+ var rootClassName$S = 'dot-ul';
2124
2183
  var listItemClassName$1 = 'dot-li';
2125
2184
  var listItemWithSubmenuClassName = 'dot-li-with-submenu';
2126
2185
  var StyledMenuList = styled__default["default"](material.MenuList).withConfig({
2127
2186
  displayName: "MenuListstyles__StyledMenuList",
2128
2187
  componentId: "yqdwwg-0"
2129
- })(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2188
+ })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2130
2189
  var theme = _a.theme;
2131
- return styled.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n &.", " {\n .dot-li {\n font-size: ", "px;\n justify-content: space-between;\n gap: ", ";\n\n &:hover {\n background: ", ";\n }\n\n &.Mui-selected,\n &.Mui-selected:hover {\n background: ", ";\n }\n\n &.", " {\n padding-right: ", ";\n }\n }\n }\n "], ["\n &.", " {\n .dot-li {\n font-size: ", "px;\n justify-content: space-between;\n gap: ", ";\n\n &:hover {\n background: ", ";\n }\n\n &.Mui-selected,\n &.Mui-selected:hover {\n background: ", ";\n }\n\n &.", " {\n padding-right: ", ";\n }\n }\n }\n "])), rootClassName$T, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
2190
+ return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n &.", " {\n .dot-li {\n font-size: ", "px;\n justify-content: space-between;\n gap: ", ";\n\n &:hover {\n background: ", ";\n }\n\n &.Mui-selected,\n &.Mui-selected:hover {\n background: ", ";\n }\n\n &.", " {\n padding-right: ", ";\n }\n }\n }\n "], ["\n &.", " {\n .dot-li {\n font-size: ", "px;\n justify-content: space-between;\n gap: ", ";\n\n &:hover {\n background: ", ";\n }\n\n &.Mui-selected,\n &.Mui-selected:hover {\n background: ", ";\n }\n\n &.", " {\n padding-right: ", ";\n }\n }\n }\n "])), rootClassName$S, theme.typography.body1.fontSize, theme.spacing(3), hoverGray, lightSelectedGray, listItemWithSubmenuClassName, theme.spacing(0.5));
2132
2191
  });
2133
- var templateObject_1$X, templateObject_2$U;
2192
+ var templateObject_1$W, templateObject_2$T;
2134
2193
 
2135
2194
  var getDefaultItemHeight = function getDefaultItemHeight(isDense) {
2136
2195
  return isDense ? MENU_ITEM_HEIGHT_DENSE : MENU_ITEM_HEIGHT_NORMAL;
@@ -2208,7 +2267,7 @@
2208
2267
  onKeyDown = _a.onKeyDown,
2209
2268
  onSubMenuCreate = _a.onSubMenuCreate,
2210
2269
  selectedKey = _a.selectedKey;
2211
- var rootClasses = useStylesWithRootClass(rootClassName$T, className);
2270
+ var rootClasses = useStylesWithRootClass(rootClassName$S, className);
2212
2271
  var _b = React.useState(null),
2213
2272
  activeSubmenu = _b[0],
2214
2273
  setActiveSubmenu = _b[1];
@@ -2327,7 +2386,7 @@
2327
2386
  _g = _a.open,
2328
2387
  open = _g === void 0 ? false : _g,
2329
2388
  selectedKey = _a.selectedKey;
2330
- var rootClasses = useStylesWithRootClass(rootClassName$U, className, loading ? 'loading' : '');
2389
+ var rootClasses = useStylesWithRootClass(rootClassName$T, className, loading ? 'loading' : '');
2331
2390
  var isSubmenu = checkIfSubmenu(anchorEl);
2332
2391
  var hasSubItems = checkForSubItems(menuItems);
2333
2392
  // Timeout object is customizable when Menu component is either submenu
@@ -2427,13 +2486,13 @@
2427
2486
  });
2428
2487
  };
2429
2488
 
2430
- var rootClassName$S = 'dot-drawer';
2489
+ var rootClassName$R = 'dot-drawer';
2431
2490
  var StyledDrawer = styled__default["default"](material.Drawer).withConfig({
2432
2491
  displayName: "Drawerstyles__StyledDrawer",
2433
2492
  componentId: "sc-1uiowy0-0"
2434
- })(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2493
+ })(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2435
2494
  var theme = _a.theme;
2436
- return styled.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n &.", " .MuiBackdrop-root {\n background-color: ", ";\n }\n\n .dot-drawer-paper {\n height: ", ";\n padding: ", ";\n width: ", ";\n }\n "], ["\n &.", " .MuiBackdrop-root {\n background-color: ", ";\n }\n\n .dot-drawer-paper {\n height: ", ";\n padding: ", ";\n width: ", ";\n }\n "])), rootClassName$S, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
2495
+ return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n &.", " .MuiBackdrop-root {\n background-color: ", ";\n }\n\n .dot-drawer-paper {\n height: ", ";\n padding: ", ";\n width: ", ";\n }\n "], ["\n &.", " .MuiBackdrop-root {\n background-color: ", ";\n }\n\n .dot-drawer-paper {\n height: ", ";\n padding: ", ";\n width: ", ";\n }\n "])), rootClassName$R, styles.alpha(theme.palette.grey[900], 0.7), function (_a) {
2437
2496
  var height = _a.height,
2438
2497
  anchor = _a.anchor;
2439
2498
  return anchor === 'left' || anchor === 'right' ? '100%' : height;
@@ -2443,26 +2502,26 @@
2443
2502
  return anchor === 'bottom' || anchor === 'top' ? 'auto' : width;
2444
2503
  });
2445
2504
  });
2446
- var templateObject_1$W, templateObject_2$T;
2505
+ var templateObject_1$V, templateObject_2$S;
2447
2506
 
2448
- var rootClassName$R = 'dot-drawer-header';
2507
+ var rootClassName$Q = 'dot-drawer-header';
2449
2508
  var StyleDrawerHeader = styled__default["default"].div.withConfig({
2450
2509
  displayName: "DrawerHeaderstyles__StyleDrawerHeader",
2451
2510
  componentId: "sc-2d2xd3-0"
2452
- })(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2511
+ })(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2453
2512
  var theme = _a.theme;
2454
- return styled.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n &.", " {\n padding: ", ";\n display: flex;\n align-items: center;\n .close-button {\n margin-left: auto;\n }\n }\n "], ["\n &.", " {\n padding: ", ";\n display: flex;\n align-items: center;\n .close-button {\n margin-left: auto;\n }\n }\n "])), rootClassName$R, theme.spacing(0, 0, 2));
2513
+ return styled.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n padding: ", ";\n display: flex;\n align-items: center;\n .close-button {\n margin-left: auto;\n }\n }\n "], ["\n &.", " {\n padding: ", ";\n display: flex;\n align-items: center;\n .close-button {\n margin-left: auto;\n }\n }\n "])), rootClassName$Q, theme.spacing(0, 0, 2));
2455
2514
  });
2456
- var templateObject_1$V, templateObject_2$S;
2515
+ var templateObject_1$U, templateObject_2$R;
2457
2516
 
2458
- var rootClassName$Q = 'dot-icon-btn';
2517
+ var rootClassName$P = 'dot-icon-btn';
2459
2518
  var StyledIconButton = styled__default["default"](material.IconButton).withConfig({
2460
2519
  displayName: "IconButtonstyles__StyledIconButton",
2461
2520
  componentId: "eko0kb-0"
2462
- })(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
2463
- return styled.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "], ["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "])), rootClassName$Q, hoverGray);
2521
+ })(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
2522
+ return styled.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "], ["\n &.", " {\n font-size: inherit;\n padding: 10px;\n\n .dot-icon.MuiIcon-fontSizeSmall {\n padding: 1px;\n }\n\n &.MuiIconButton-sizeSmall {\n padding: 3px;\n }\n\n &.ripple-disabled {\n &:hover, &:active, &:focus {\n background: ", ";\n }\n }\n "])), rootClassName$P, hoverGray);
2464
2523
  });
2465
- var templateObject_1$U, templateObject_2$R;
2524
+ var templateObject_1$T, templateObject_2$Q;
2466
2525
 
2467
2526
  var DotIconButton = function DotIconButton(_a) {
2468
2527
  var ariaLabel = _a.ariaLabel,
@@ -2482,7 +2541,7 @@
2482
2541
  _f = _a.size,
2483
2542
  size = _f === void 0 ? 'medium' : _f;
2484
2543
  var rippleClassName = disableRipple ? 'ripple-disabled' : '';
2485
- var rootClasses = useStylesWithRootClass(rootClassName$Q, rippleClassName, className);
2544
+ var rootClasses = useStylesWithRootClass(rootClassName$P, rippleClassName, className);
2486
2545
  return jsxRuntime.jsx(DotTooltip, __assign({
2487
2546
  "data-testid": "icon-button-tooltip",
2488
2547
  title: tooltip
@@ -2517,7 +2576,7 @@
2517
2576
  dataTestId = _a["data-testid"],
2518
2577
  onClose = _a.onClose,
2519
2578
  variant = _a.variant;
2520
- var rootClasses = useStylesWithRootClass(rootClassName$R, className);
2579
+ var rootClasses = useStylesWithRootClass(rootClassName$Q, className);
2521
2580
  return jsxRuntime.jsxs(StyleDrawerHeader, __assign({
2522
2581
  "aria-label": ariaLabel,
2523
2582
  className: rootClasses,
@@ -2531,14 +2590,14 @@
2531
2590
  }), void 0);
2532
2591
  };
2533
2592
 
2534
- var rootClassName$P = 'dot-drawer-body';
2593
+ var rootClassName$O = 'dot-drawer-body';
2535
2594
  var StyleDrawerBody = styled__default["default"].div.withConfig({
2536
2595
  displayName: "DrawerBodystyles__StyleDrawerBody",
2537
2596
  componentId: "sc-1mpmjdk-0"
2538
- })(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
2539
- return styled.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n &.", " {\n display: flex;\n .dot-drawer-close-button {\n align-self: self-start;\n padding: 0;\n margin-left: auto;\n }\n }\n "], ["\n &.", " {\n display: flex;\n .dot-drawer-close-button {\n align-self: self-start;\n padding: 0;\n margin-left: auto;\n }\n }\n "])), rootClassName$P);
2597
+ })(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
2598
+ return styled.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n &.", " {\n display: flex;\n .dot-drawer-close-button {\n align-self: self-start;\n padding: 0;\n margin-left: auto;\n }\n }\n "], ["\n &.", " {\n display: flex;\n .dot-drawer-close-button {\n align-self: self-start;\n padding: 0;\n margin-left: auto;\n }\n }\n "])), rootClassName$O);
2540
2599
  });
2541
- var templateObject_1$T, templateObject_2$Q;
2600
+ var templateObject_1$S, templateObject_2$P;
2542
2601
 
2543
2602
  var DotDrawerBody = function DotDrawerBody(_a) {
2544
2603
  var ariaLabel = _a.ariaLabel,
@@ -2548,7 +2607,7 @@
2548
2607
  headerExists = _a.headerExists,
2549
2608
  onClose = _a.onClose,
2550
2609
  variant = _a.variant;
2551
- var rootClasses = useStylesWithRootClass(rootClassName$P, className);
2610
+ var rootClasses = useStylesWithRootClass(rootClassName$O, className);
2552
2611
  return jsxRuntime.jsxs(StyleDrawerBody, __assign({
2553
2612
  "aria-label": ariaLabel,
2554
2613
  className: rootClasses,
@@ -2562,22 +2621,22 @@
2562
2621
  }), void 0);
2563
2622
  };
2564
2623
 
2565
- var rootClassName$O = 'dot-drawer-footer';
2624
+ var rootClassName$N = 'dot-drawer-footer';
2566
2625
  var StyleDrawerFooter = styled__default["default"].div.withConfig({
2567
2626
  displayName: "DrawerFooterstyles__StyleDrawerFooter",
2568
2627
  componentId: "sc-1ki05ze-0"
2569
- })(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2628
+ })(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2570
2629
  var theme = _a.theme;
2571
- return styled.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n &.", " {\n padding: ", ";\n }\n "], ["\n &.", " {\n padding: ", ";\n }\n "])), rootClassName$O, theme.spacing(2, 0, 0));
2630
+ return styled.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n &.", " {\n padding: ", ";\n }\n "], ["\n &.", " {\n padding: ", ";\n }\n "])), rootClassName$N, theme.spacing(2, 0, 0));
2572
2631
  });
2573
- var templateObject_1$S, templateObject_2$P;
2632
+ var templateObject_1$R, templateObject_2$O;
2574
2633
 
2575
2634
  var DotDrawerFooter = function DotDrawerFooter(_a) {
2576
2635
  var ariaLabel = _a.ariaLabel,
2577
2636
  children = _a.children,
2578
2637
  className = _a.className,
2579
2638
  dataTestId = _a["data-testid"];
2580
- var rootClasses = useStylesWithRootClass(rootClassName$O, className);
2639
+ var rootClasses = useStylesWithRootClass(rootClassName$N, className);
2581
2640
  return jsxRuntime.jsx(StyleDrawerFooter, __assign({
2582
2641
  "aria-label": ariaLabel,
2583
2642
  className: rootClasses,
@@ -2616,7 +2675,7 @@
2616
2675
  onClose(event);
2617
2676
  }
2618
2677
  };
2619
- var rootClasses = useStylesWithRootClass(rootClassName$S, className);
2678
+ var rootClasses = useStylesWithRootClass(rootClassName$R, className);
2620
2679
  var headerExists = !!drawerHeaderProps;
2621
2680
  var bodyTestId = drawerBodyProps ? drawerBodyProps["data-testid"] : 'drawer-body';
2622
2681
  return jsxRuntime.jsxs(StyledDrawer, __assign({
@@ -2659,15 +2718,15 @@
2659
2718
  }), void 0);
2660
2719
  };
2661
2720
 
2662
- var fadeIn = styled.keyframes(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
2721
+ var fadeIn = styled.keyframes(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
2663
2722
  var StyledDotDrawer = styled__default["default"](DotDrawer).withConfig({
2664
2723
  displayName: "NestedListstyles__StyledDotDrawer",
2665
2724
  componentId: "sc-1wwoqos-0"
2666
2725
  })(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
2667
2726
  var open = _a.open;
2668
- return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n &.", " {\n .dot-drawer-paper {\n z-index: ", ";\n animation: ", ";\n }\n }\n "], ["\n &.", " {\n .dot-drawer-paper {\n z-index: ", ";\n animation: ", ";\n }\n }\n "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n ", " 0.2s cubic-bezier(1,0,1,.01);\n "], ["\n ", " 0.2s cubic-bezier(1,0,1,.01);\n "])), fadeIn));
2727
+ return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n &.", " {\n .dot-drawer-paper {\n z-index: ", ";\n animation: ", ";\n }\n }\n "], ["\n &.", " {\n .dot-drawer-paper {\n z-index: ", ";\n animation: ", ";\n }\n }\n "])), nestedDrawerClassName, open ? levelFirst : levelBottom, open && styled.css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n ", " 0.2s cubic-bezier(1,0,1,.01);\n "], ["\n ", " 0.2s cubic-bezier(1,0,1,.01);\n "])), fadeIn));
2669
2728
  });
2670
- var templateObject_1$R, templateObject_2$O, templateObject_3$8, templateObject_4$6;
2729
+ var templateObject_1$Q, templateObject_2$N, templateObject_3$8, templateObject_4$6;
2671
2730
 
2672
2731
  var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
2673
2732
  var DotListDivider = function DotListDivider(_a) {
@@ -2710,7 +2769,7 @@
2710
2769
  nestedListType = _h === void 0 ? 'expandable' : _h,
2711
2770
  _j = _a.width,
2712
2771
  width = _j === void 0 ? 240 : _j;
2713
- var rootClasses = useStylesWithRootClass(rootClassName$X, className);
2772
+ var rootClasses = useStylesWithRootClass(rootClassName$W, className);
2714
2773
  var listWidth = typeof width === 'number' ? width + "px" : width;
2715
2774
  var listRef = React.useRef();
2716
2775
  var _k = React.useState(null),
@@ -3219,14 +3278,14 @@
3219
3278
  }), void 0);
3220
3279
  };
3221
3280
 
3222
- var rootClassName$N = 'dot-search-input';
3281
+ var rootClassName$M = 'dot-search-input';
3223
3282
  var StyledSearchInput = styled__default["default"].span.withConfig({
3224
3283
  displayName: "SearchInputstyles__StyledSearchInput",
3225
3284
  componentId: "qlwzku-0"
3226
- })(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
3227
- return styled.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\n }\n "], ["\n &.", " {\n }\n "])), rootClassName$N);
3285
+ })(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
3286
+ return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n &.", " {\n }\n "], ["\n &.", " {\n }\n "])), rootClassName$M);
3228
3287
  });
3229
- var templateObject_1$Q, templateObject_2$N;
3288
+ var templateObject_1$P, templateObject_2$M;
3230
3289
 
3231
3290
  function SearchInput(_a) {
3232
3291
  var dataTestId = _a["data-testid"],
@@ -3242,7 +3301,7 @@
3242
3301
  _e = _a.tooltip,
3243
3302
  tooltip = _e === void 0 ? null : _e,
3244
3303
  value = _a.value;
3245
- var rootClasses = useStylesWithRootClass(rootClassName$N, className);
3304
+ var rootClasses = useStylesWithRootClass(rootClassName$M, className);
3246
3305
  var _f = React.useState(value),
3247
3306
  searchText = _f[0],
3248
3307
  setSearchText = _f[1];
@@ -3295,15 +3354,15 @@
3295
3354
  }), void 0);
3296
3355
  }
3297
3356
 
3298
- var rootClassName$M = 'dot-copy-button';
3357
+ var rootClassName$L = 'dot-copy-button';
3299
3358
  var StyledCopyButton = styled__default["default"].span.withConfig({
3300
3359
  displayName: "CopyButtonstyles__StyledCopyButton",
3301
3360
  componentId: "sc-18ff0u-0"
3302
- })(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
3361
+ })(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
3303
3362
  var theme = _a.theme;
3304
- return styled.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n &.", " {\n .copied-to-clipboard {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n .copied-to-clipboard {\n color: ", ";\n }\n }\n "])), rootClassName$M, theme.palette.success[400]);
3363
+ return styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n &.", " {\n .copied-to-clipboard {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n .copied-to-clipboard {\n color: ", ";\n }\n }\n "])), rootClassName$L, theme.palette.success[400]);
3305
3364
  });
3306
- var templateObject_1$P, templateObject_2$M;
3365
+ var templateObject_1$O, templateObject_2$L;
3307
3366
 
3308
3367
  var DotCopyButton = function DotCopyButton(_a) {
3309
3368
  var _b = _a.ariaLabel,
@@ -3337,7 +3396,7 @@
3337
3396
  return false;
3338
3397
  };
3339
3398
  return jsxRuntime.jsxs(StyledCopyButton, __assign({
3340
- className: rootClassName$M,
3399
+ className: rootClassName$L,
3341
3400
  "data-testid": dataTestId
3342
3401
  }, {
3343
3402
  children: [!showCopiedIcon && jsxRuntime.jsx(DotIconButton, {
@@ -3357,65 +3416,6 @@
3357
3416
  }), void 0);
3358
3417
  };
3359
3418
 
3360
- var rootClassName$L = 'dot-link';
3361
- var StyledLink = styled__default["default"](material.Link).withConfig({
3362
- displayName: "Linkstyles__StyledLink",
3363
- componentId: "sc-1lpmaww-0"
3364
- })(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
3365
- return styled.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n &.", " {\n cursor: pointer;\n\n &:hover :not(.MuiLink-underlineHover) {\n text-decoration: none;\n }\n }\n "], ["\n &.", " {\n cursor: pointer;\n\n &:hover :not(.MuiLink-underlineHover) {\n text-decoration: none;\n }\n }\n "])), rootClassName$L);
3366
- });
3367
- var templateObject_1$O, templateObject_2$L;
3368
-
3369
- var DotLink = function DotLink(_a) {
3370
- var ariaLabel = _a.ariaLabel,
3371
- children = _a.children,
3372
- className = _a.className,
3373
- _b = _a.color,
3374
- color = _b === void 0 ? 'primary' : _b,
3375
- dataTestId = _a["data-testid"],
3376
- href = _a.href,
3377
- onClick = _a.onClick,
3378
- onMouseEnter = _a.onMouseEnter,
3379
- onPointerDown = _a.onPointerDown,
3380
- _c = _a.rel,
3381
- rel = _c === void 0 ? 'noreferrer' : _c,
3382
- _d = _a.tabIndex,
3383
- tabIndex = _d === void 0 ? 0 : _d,
3384
- target = _a.target,
3385
- tooltip = _a.tooltip,
3386
- underline = _a.underline;
3387
- var rootClasses = useStylesWithRootClass(rootClassName$L, className);
3388
- var handleKeyPress = function handleKeyPress(event) {
3389
- if (onClick && event.key === 'Enter') {
3390
- event.preventDefault();
3391
- onClick(event);
3392
- }
3393
- };
3394
- return jsxRuntime.jsx(DotTooltip, __assign({
3395
- title: tooltip
3396
- }, {
3397
- children: jsxRuntime.jsx(StyledLink, __assign({
3398
- "aria-label": ariaLabel,
3399
- classes: {
3400
- root: rootClasses
3401
- },
3402
- color: color,
3403
- "data-testid": dataTestId,
3404
- href: href,
3405
- onClick: onClick,
3406
- onKeyPress: handleKeyPress,
3407
- onMouseEnter: onMouseEnter,
3408
- onPointerDown: onPointerDown,
3409
- rel: rel,
3410
- tabIndex: tabIndex,
3411
- target: target,
3412
- underline: underline
3413
- }, {
3414
- children: children
3415
- }), void 0)
3416
- }), void 0);
3417
- };
3418
-
3419
3419
  var img$6 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M12.4332 16.3533V14.8333H11.5665V16.3533L10.7432 15.8933L9.85651 16.4033L11.9998 17.6366L14.1932 16.3733L13.3332 15.8766L12.4332 16.3533Z' fill='white'/%3e%3cpath d='M7.99328 10.1866L9.24661 10.9132L9.67995 10.1399L8.36995 9.4299L9.09328 9.01657V8.03323L7.11328 9.18323L7.11661 11.5532L7.99328 11.0566V10.1866Z' fill='white'/%3e%3cpath d='M14.6934 10.9133L15.9934 10.1733L15.99 11.0566L16.8867 11.5599V9.1766L14.81 7.98993L14.7767 8.9566L15.6167 9.45326L14.29 10.0799L14.6934 10.9133Z' fill='white'/%3e%3cpath d='M16.8801 12.5435L16.0001 12.0402V12.0935V13.7068L12.4167 11.6868V7.61015L13.9667 8.49015V7.51682L12.0001 6.35349L9.95006 7.52348V8.52348L11.4967 7.63015V11.6868L8.00006 13.8168V12.0202L7.12006 12.5235V14.8202L8.96672 15.8502L9.86672 15.3335L8.40006 14.5268L12.0001 12.4368L15.5567 14.5035L14.1301 15.3268L15.0567 15.8701L16.8701 14.8268L16.8801 12.5435Z' fill='white'/%3e%3c/svg%3e";
3420
3420
 
3421
3421
  var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23279FEA'/%3e%3cpath d='M14.1867 11.2667L12.1634 10.0833L10.1367 11.2667V13.62L12.1634 14.7867L14.1867 13.62V11.2667Z' fill='white'/%3e%3cpath d='M8.43666 12.0001L7.47333 11.1501V15.1667L10.41 16.8367V15.7034L8.43666 14.5401V12.0001Z' fill='white'/%3e%3cpath d='M15.8965 12V14.5833L13.9632 15.7033V16.9367L16.8532 15.1533V11.0967L15.8965 12Z' fill='white'/%3e%3cpath d='M12.1565 8.13333L14.7165 9.61333L15.4165 8.89L12.1565 7L8.87988 8.90667L9.57988 9.63333L12.1565 8.13333Z' fill='white'/%3e%3c/svg%3e";
@@ -3468,20 +3468,23 @@
3468
3468
  if (count === void 0) {
3469
3469
  count = 0;
3470
3470
  }
3471
- return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true);
3471
+ return sectionHeaderMenuItem('DIGITAL.AI APPLICATIONS', count, true, false);
3472
3472
  };
3473
- var sectionHeaderMenuItem = function sectionHeaderMenuItem(title, count, showEmpty) {
3473
+ var sectionHeaderMenuItem = function sectionHeaderMenuItem(title, count, showEmpty, showCount) {
3474
3474
  if (showEmpty === void 0) {
3475
3475
  showEmpty = false;
3476
3476
  }
3477
+ if (showCount === void 0) {
3478
+ showCount = true;
3479
+ }
3477
3480
  var children = showEmpty || count > 0 ? jsxRuntime.jsxs(DotTypography, __assign({
3478
- className: "dai-apps-title"
3481
+ className: "section-title"
3479
3482
  }, {
3480
- children: [title, count > 0 ? " (" + count + ")" : '']
3483
+ children: [title, showCount && count > 0 ? " (" + count + ")" : '']
3481
3484
  }), "menu-item-section-title-" + title) : null;
3482
3485
  return {
3483
3486
  children: children,
3484
- key: "dai-apps-section-header-" + title
3487
+ key: "section-header-" + title
3485
3488
  };
3486
3489
  };
3487
3490
  var createMenuItem = function createMenuItem(url, title, subtitle, onClick) {
@@ -3498,9 +3501,13 @@
3498
3501
  children: jsxRuntime.jsxs("div", __assign({
3499
3502
  className: "logo-title"
3500
3503
  }, {
3501
- children: [jsxRuntime.jsx(DotIcon, {
3502
- iconId: "open-new-tab"
3503
- }, void 0), jsxRuntime.jsxs("div", __assign({
3504
+ children: [jsxRuntime.jsx("div", __assign({
3505
+ className: "start-icon"
3506
+ }, {
3507
+ children: jsxRuntime.jsx(DotIcon, {
3508
+ iconId: "open-new-tab"
3509
+ }, void 0)
3510
+ }), void 0), jsxRuntime.jsxs("div", __assign({
3504
3511
  className: "dot-app-switcher-app-title"
3505
3512
  }, {
3506
3513
  children: [jsxRuntime.jsx(DotTypography, __assign({
@@ -3584,9 +3591,9 @@
3584
3591
  };
3585
3592
  var getInstanceStateText = function getInstanceStateText(application) {
3586
3593
  if (application.instance_state === 1) {
3587
- return 'Production instance';
3594
+ return 'Production';
3588
3595
  }
3589
- return 'Non-production instance';
3596
+ return 'Non-production';
3590
3597
  };
3591
3598
  var sortRecentAppInstancesFn = function sortRecentAppInstancesFn(a, b) {
3592
3599
  var appA = a.application;
@@ -3650,7 +3657,7 @@
3650
3657
  componentId: "hhxfqg-0"
3651
3658
  })(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
3652
3659
  var theme = _a.theme;
3653
- return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n &.", " {\n .dot-drawer-paper {\n padding: 0;\n }\n .content {\n padding: ", ";\n overflow-y: auto;\n }\n .app-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .dot-link,\n .product-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 60px;\n text-decoration: none;\n cursor: pointer;\n }\n .logo-title {\n display: flex;\n align-items: center;\n gap: 24px;\n width: 100%;\n }\n .dot-avatar {\n flex-basis: 40px;\n }\n .dai-apps-title {\n display: flex;\n align-items: center;\n height: 32px;\n padding: ", ";\n margin-top: ", ";\n background-color: ", ";\n }\n .dot-app-switcher-app-title {\n min-width: 150px;\n }\n .dot-icon {\n flex-basis: content;\n }\n .app-switcher-header {\n .app-switcher-header-title {\n display: flex;\n align-items: center;\n }\n display: flex;\n justify-content: space-between;\n align-items: end;\n border-bottom: 1px solid ", ";\n padding: ", ";\n .app-switcher-label {\n padding-left: ", ";\n }\n }\n .app-switcher-back-button {\n &.dot-button.MuiButton-text {\n padding-left: 0;\n }\n }\n .product-heading {\n display: flex;\n align-items: center;\n gap: 24px;\n padding-bottom: ", ";\n }\n .product-applications {\n width: 100%;\n }\n .product-applications-search {\n margin-bottom: ", ";\n }\n }\n "], ["\n &.", " {\n .dot-drawer-paper {\n padding: 0;\n }\n .content {\n padding: ", ";\n overflow-y: auto;\n }\n .app-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .dot-link,\n .product-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 60px;\n text-decoration: none;\n cursor: pointer;\n }\n .logo-title {\n display: flex;\n align-items: center;\n gap: 24px;\n width: 100%;\n }\n .dot-avatar {\n flex-basis: 40px;\n }\n .dai-apps-title {\n display: flex;\n align-items: center;\n height: 32px;\n padding: ", ";\n margin-top: ", ";\n background-color: ", ";\n }\n .dot-app-switcher-app-title {\n min-width: 150px;\n }\n .dot-icon {\n flex-basis: content;\n }\n .app-switcher-header {\n .app-switcher-header-title {\n display: flex;\n align-items: center;\n }\n display: flex;\n justify-content: space-between;\n align-items: end;\n border-bottom: 1px solid ", ";\n padding: ", ";\n .app-switcher-label {\n padding-left: ", ";\n }\n }\n .app-switcher-back-button {\n &.dot-button.MuiButton-text {\n padding-left: 0;\n }\n }\n .product-heading {\n display: flex;\n align-items: center;\n gap: 24px;\n padding-bottom: ", ";\n }\n .product-applications {\n width: 100%;\n }\n .product-applications-search {\n margin-bottom: ", ";\n }\n }\n "])), rootClassName$K, theme.spacing(0, 2, 1, 2), theme.spacing(0, 0, 0, 1), theme.spacing(1), theme.palette.grey[50], theme.palette.grey[200], theme.spacing(0, 2, 1, 2), theme.spacing(3), theme.spacing(3), theme.spacing(3));
3660
+ return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n &.", " {\n .dot-drawer-paper {\n padding: 0;\n width: 382px;\n }\n .content {\n padding: ", ";\n overflow-y: auto;\n }\n .app-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .dot-link,\n .product-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 60px;\n margin-bottom: ", ";\n text-decoration: none;\n cursor: pointer;\n }\n .logo-title {\n display: flex;\n align-items: center;\n gap: 16px;\n width: 100%;\n .start-icon {\n width: 40px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n }\n }\n .dot-avatar {\n flex-basis: 40px;\n }\n .section-title {\n display: flex;\n align-items: center;\n height: 30px;\n padding: ", ";\n margin: ", ";\n border-bottom: 1px solid ", ";\n }\n .dot-app-switcher-app-title {\n min-width: 150px;\n }\n .dot-icon {\n flex-basis: content;\n }\n .app-switcher-header {\n .app-switcher-header-title {\n display: flex;\n align-items: center;\n }\n display: flex;\n justify-content: space-between;\n align-items: end;\n border-bottom: 1px solid ", ";\n padding: ", ";\n .app-switcher-label {\n padding-left: ", ";\n }\n }\n .app-switcher-back-button {\n &.dot-button.MuiButton-text {\n padding-left: 0;\n }\n }\n .product-heading {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .product-applications {\n margin-top: ", ";\n width: 100%;\n }\n .app-instance-search {\n margin-top: ", ";\n }\n }\n "], ["\n &.", " {\n .dot-drawer-paper {\n padding: 0;\n width: 382px;\n }\n .content {\n padding: ", ";\n overflow-y: auto;\n }\n .app-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .dot-link,\n .product-menu-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n height: 60px;\n margin-bottom: ", ";\n text-decoration: none;\n cursor: pointer;\n }\n .logo-title {\n display: flex;\n align-items: center;\n gap: 16px;\n width: 100%;\n .start-icon {\n width: 40px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n }\n }\n .dot-avatar {\n flex-basis: 40px;\n }\n .section-title {\n display: flex;\n align-items: center;\n height: 30px;\n padding: ", ";\n margin: ", ";\n border-bottom: 1px solid ", ";\n }\n .dot-app-switcher-app-title {\n min-width: 150px;\n }\n .dot-icon {\n flex-basis: content;\n }\n .app-switcher-header {\n .app-switcher-header-title {\n display: flex;\n align-items: center;\n }\n display: flex;\n justify-content: space-between;\n align-items: end;\n border-bottom: 1px solid ", ";\n padding: ", ";\n .app-switcher-label {\n padding-left: ", ";\n }\n }\n .app-switcher-back-button {\n &.dot-button.MuiButton-text {\n padding-left: 0;\n }\n }\n .product-heading {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n .product-applications {\n margin-top: ", ";\n width: 100%;\n }\n .app-instance-search {\n margin-top: ", ";\n }\n }\n "])), rootClassName$K, theme.spacing(0, 2, 1, 2), theme.spacing(1), theme.spacing(0, 0, 0, 2), theme.spacing(0, -2, 0), theme.palette.grey[100], theme.palette.grey[100], theme.spacing(0, 2, 1, 2), theme.spacing(2), theme.spacing(2), theme.spacing(2));
3654
3661
  });
3655
3662
  var templateObject_1$N, templateObject_2$K;
3656
3663
 
@@ -3669,7 +3676,7 @@
3669
3676
  searchInstancesThreshold = _d === void 0 ? 5 : _d,
3670
3677
  selectedAppType = _a.selectedAppType,
3671
3678
  _e = _a.yOffset,
3672
- yOffset = _e === void 0 ? 64 : _e,
3679
+ yOffset = _e === void 0 ? 56 : _e,
3673
3680
  _f = _a.zIndex,
3674
3681
  zIndex = _f === void 0 ? 990 : _f;
3675
3682
  var dotCoreApiContext = useDotCoreApiContext();
@@ -3713,7 +3720,7 @@
3713
3720
  // we'll put Other at the end
3714
3721
  var otherApps = [];
3715
3722
  apps === null || apps === void 0 ? void 0 : apps.forEach(function (app) {
3716
- var instanceStateText = getInstanceStateText(app);
3723
+ var instanceStateText = getInstanceStateText(app) + " instance";
3717
3724
  var children = createMenuItem(app.url, app.name, instanceStateText, function (e) {
3718
3725
  handleRecentInstance(e, app);
3719
3726
  });
@@ -3774,12 +3781,11 @@
3774
3781
  singleTypeApps: singleTypeApps
3775
3782
  });
3776
3783
  menuItems.push({
3777
- children: jsxRuntime.jsxs("div", __assign({
3784
+ children: jsxRuntime.jsxs(DotLink, __assign({
3778
3785
  className: "product-menu-item",
3779
3786
  onClick: function () {
3780
3787
  return showApps(appTypeName);
3781
- },
3782
- tabIndex: 0
3788
+ }
3783
3789
  }, {
3784
3790
  children: [createAppTypeLabel(appTypeName, logo, singleTypeApps), jsxRuntime.jsx(DotIcon, {
3785
3791
  iconId: "chevron-right"
@@ -3841,7 +3847,7 @@
3841
3847
  }, {
3842
3848
  children: recentAppInstances.map(function (item) {
3843
3849
  var app = item.application;
3844
- return createMenuItem(app.url, app.name, getInstanceStateText(app), function (e) {
3850
+ return createMenuItem(app.url, app.name, app.logo_product_name + " - " + getInstanceStateText(app), function (e) {
3845
3851
  handleRecentInstance(e, app);
3846
3852
  });
3847
3853
  })
@@ -3871,14 +3877,16 @@
3871
3877
  className: "product-heading"
3872
3878
  }, {
3873
3879
  children: createAppTypeLabel(selectedAppType, labelConfig.logo, labelConfig.singleTypeApps)
3874
- }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", {
3880
+ }), void 0), ((_a = appTypeMap === null || appTypeMap === void 0 ? void 0 : appTypeMap.get(selectedAppType)) === null || _a === void 0 ? void 0 : _a.length) >= searchInstancesThreshold && jsxRuntime.jsx("div", __assign({
3881
+ className: "app-instance-search"
3882
+ }, {
3875
3883
  children: jsxRuntime.jsx(SearchInput, {
3876
3884
  "data-testid": "app-instance-search-input",
3877
3885
  onChange: onAppInstanceSearchTextChange,
3878
3886
  onClear: clearAppInstanceSearchText,
3879
3887
  value: searchText
3880
3888
  }, void 0)
3881
- }, void 0), jsxRuntime.jsx("div", __assign({
3889
+ }), void 0), jsxRuntime.jsx("div", __assign({
3882
3890
  className: "product-applications"
3883
3891
  }, {
3884
3892
  children: filteredAppInstances()
@@ -4808,7 +4816,7 @@
4808
4816
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
4809
4817
  var DotPopper = function DotPopper(props) {
4810
4818
  if (!isActionItemDefined) return jsxRuntime.jsx(StyledPopper, __assign({}, props, {
4811
- className: rootClassName$V,
4819
+ className: rootClassName$U,
4812
4820
  disablePortal: disablePortal,
4813
4821
  "$maxHeight": maxHeight
4814
4822
  }), void 0);
@@ -4832,7 +4840,7 @@
4832
4840
  var paperProps = props.children.props;
4833
4841
  var paperChildren = paperProps.children;
4834
4842
  return jsxRuntime.jsx(StyledPopper, __assign({}, props, {
4835
- className: rootClassName$V,
4843
+ className: rootClassName$U,
4836
4844
  disablePortal: disablePortal,
4837
4845
  "$maxHeight": maxHeight
4838
4846
  }, {
@@ -9766,7 +9774,7 @@
9766
9774
  onClickAway = _a.onClickAway,
9767
9775
  open = _a.open,
9768
9776
  placement = _a.placement;
9769
- var rootClasses = useStylesWithRootClass(rootClassName$V, className);
9777
+ var rootClasses = useStylesWithRootClass(rootClassName$U, className);
9770
9778
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
9771
9779
  var handleClickAway = function handleClickAway(event) {
9772
9780
  if (onClickAway && (!anchorEl || !anchorEl.contains(event.currentTarget))) {