@longline/aqua-ui 1.0.323 → 1.0.325

package/containers/Anchor/Anchor.js

@@ -101,7 +101,7 @@ var Anchor = function (props) {
     React.useEffect(function () {
         updatePosition();
     }, [props.horizontal, props.vertical]);
-    return (React.createElement("div", { ref: anchorRef, style: {
+    return (React.createElement("div", { "data-testid": "Anchor", ref: anchorRef, style: {
             position: 'absolute',
             left: (_a = props.left) !== null && _a !== void 0 ? _a : 'auto',
             top: (_b = props.top) !== null && _b !== void 0 ? _b : 'auto',

package/containers/Dock/Dock.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var DockBase = function (props) {
-    return React.createElement("div", { className: props.className, role: "presentation" }, props.children);
+    return React.createElement("div", { "data-testid": "Dock", className: props.className, role: "presentation" }, props.children);
 };
 var DockStyled = styled(DockBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"
     /**

package/containers/Dock/Dockable.js

@@ -103,7 +103,7 @@ var DockableBase = function (props) {
         style.left = "".concat(x + offsetX, "px");
         style.top = "".concat(y + offsetY, "px");
     }
-    return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
+    return (React.createElement("div", { "data-testid": "Dockable", style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
 };
 var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  z-index: ", ";\n  ", "\n"], ["\n  color: white;\n  z-index: ", ";\n  ", "\n"
     /**

package/containers/DragBar/DragBar.js

@@ -71,7 +71,7 @@ var DragBarBase = function (props) {
             behavior: props.behavior
         });
     };
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "DragBar", className: props.className },
         props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(-props.navigationDelta); } },
             React.createElement(Icon, { url: SVG.Icons.Chevron })),
         React.createElement(Scroller, { onMouseDown: handleMouseDown, ref: scrollerRef },

package/containers/Form/elements/BoxWrapper.js

@@ -29,7 +29,7 @@ var BoxWrapperBase = function (props) {
             clickableChild.focus();
         }
     };
-    return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
+    return (React.createElement("div", { "data-testid": "BoxWrapper", className: props.className, onClick: handleClick, ref: wrapper },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         props.label,
         React.createElement(Control, null, props.children),

package/containers/Form/elements/Hint.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var HintBase = function (props) {
-    return React.createElement("div", { tabIndex: -1, className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Hint", tabIndex: -1, className: props.className }, props.children);
 };
 var Hint = styled(HintBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; });
 export { Hint };

package/containers/Form/elements/SimpleWrapper.js

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
 import { Label } from './Label';
 import { Hint } from './Hint';
 var SimpleWrapperBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "SimpleWrapper", className: props.className },
         props.label,
         props.children,
         props.hint);

package/containers/GlassPane/GlassPane.js

@@ -42,7 +42,7 @@ var GlassPaneBase = React.memo(function (props) {
             return function () { };
         }
     }, [props.animated]);
-    return (React.createElement("div", { className: "".concat(props.className, " ").concat(mounted ? 'mounted' : '') }, props.children));
+    return (React.createElement("div", { "data-testid": "GlassPane", className: "".concat(props.className, " ").concat(mounted ? 'mounted' : '') }, props.children));
 });
 var GRADIENT_0 = "rgb(255,255,255,0.6)";
 var GRADIENT_1 = "rgb(255,255,255,0.3)";

package/containers/InfoBox/InfoBox.js

@@ -33,7 +33,7 @@ import { InfoBoxRow } from './elements/Row';
  * An `InfoBox` is a glass pane with an optional header and footer.
  */
 var InfoBoxBase = function (props) {
-    return React.createElement("div", { className: props.className, role: "region", "aria-label": "Information" },
+    return React.createElement("div", { "data-testid": "InfoBox", className: props.className, role: "region", "aria-label": "Information" },
         React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight, scroll: props.scroll }, props.children),
         props.footer && React.createElement(Footer, null, props.footer));
 };

package/containers/InfoBox/elements/Content.js

@@ -19,7 +19,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { GlassPane } from '../../GlassPane';
 import { Header } from './Header';
 var ContentBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "InfoBox.Content", className: props.className },
         React.createElement(GlassPane, { bordered: true },
             props.header && React.createElement(Header, null, props.header),
             React.createElement(PaneContent, null,

package/containers/InfoBox/elements/Footer.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from "styled-components";
 var FooterBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "InfoBox.Footer", className: props.className }, props.children);
 };
 var FooterStyled = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; });
 var Footer = function (props) { return React.createElement(FooterStyled, __assign({}, props)); };

package/containers/InfoBox/elements/Header.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from "styled-components";
 var HeaderBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "InfoBox.Header", className: props.className }, props.children);
 };
 var HeaderStyled = styled(HeaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: ", ";\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"], ["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: ", ";\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.headingMedium; });
 var Header = function (props) { return React.createElement(HeaderStyled, __assign({}, props)); };

package/containers/InfoBox/elements/Row.js

@@ -9,7 +9,7 @@ import { Ghost } from '../../../controls/Ghost';
  * An `InfoBoxRow` shows a name-value combination, in row format.
  */
 var InfoBoxRow = function (props) {
-    return React.createElement(Wrapper, null,
+    return React.createElement(Wrapper, { "data-testid": "InfoBox.Row" },
         props.ghost === true && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '3px', right: 0, bottom: '3px' } }),
         props.ghost !== true && React.createElement(React.Fragment, null,
             React.createElement(Name, null, props.name),

package/containers/List/List.js

@@ -19,7 +19,7 @@ import { Input } from '../../inputs/Input';
  * other code, using the ref, can scroll list items into view.
  */
 var List = React.forwardRef(function (props, ref) {
-    return React.createElement(ListStyled, { className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
+    return React.createElement(ListStyled, { "data-testid": "List", className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
         props.onSearch &&
             React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
                 React.createElement(Input, { icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),

package/containers/List/ListCell.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListCellBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "ListCell", className: props.className }, props.children);
 };
 var ListCellStyled = styled(ListCellBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.width && typeof p.width === 'string' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.width && typeof p.width !== 'string' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex: ", ";"], ["flex: ", ";"])), p.width); }, function (p) { return !p.width && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); }, function (p) { return p.align === 'right' ? 'right' : 'left'; });
 var ListCell = function (props) { return React.createElement(ListCellStyled, __assign({}, props)); };

package/containers/List/ListRow.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var ListRowBase = function (props) {
-    return React.createElement("div", { className: props.className, onClick: props.disabled ? null : function (e) { return props.onClick(e); } }, props.children);
+    return React.createElement("div", { "data-testid": "ListRow", className: props.className, onClick: props.disabled ? null : function (e) { return props.onClick(e); } }, props.children);
 };
 var ListRowStyled = styled(ListRowBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"], ["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return (p.onClick && !p.disabled) ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "], ["\n    &:hover {\n      background-color: ", ";\n    }\n\n    // Background color on pressed:\n    ", "\n\n    ", "\n  "])), function (p) { return p.theme.colors.neutral[95]; }, p.onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "], ["\n      &:active {\n        background-color: rgb(from ", " r g b / 65%) !important;\n        color: ", ";\n      }\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }), p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "], ["\n      background-color: rgb(from ", " r g b / 45%) !important;\n      color: ", ";\n    "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; })); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[50]; }); });
 var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };

package/containers/Message/Message.js

@@ -19,7 +19,7 @@ import { NoData } from './NoData';
 import { NoFilteredData } from './NoFilteredData';
 import { Error } from './Error';
 var MessageBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Message", className: props.className }, props.children);
 };
 var MessageStyled = styled(MessageBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"], ["\n  // Position:\n  margin: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  align-items: center;\n  gap: 16px;\n\n  // Appearance:\n  color: ", ";\n  user-select: none;\n  padding: 16px 16px 16px 16px;\n  border-radius: ", "px;\n  background-color: ", ";  \n  line-height: 22px;\n"
     /**

package/containers/Openable/Openable.js

@@ -55,7 +55,7 @@ var Openable = function (_a) {
     React.useEffect(function () {
         update === null || update === void 0 ? void 0 : update();
     }, [props.open]);
-    return (React.createElement("div", { ref: toggleRef },
+    return (React.createElement("div", { "data-testid": "Openable", ref: toggleRef },
         props.toggle,
         createPortal(React.createElement(Pane, __assign({ "$open": props.open, "$width": width, style: styles.popper }, attributes.popper, { ref: paneRef }), props.open && props.content), // If in fullscreen mode, Openable must portal into fullscreen element,
         // else content will be hidden.

package/containers/PublicRoute/Help.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var HelpBase = function (props) {
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "Help", className: props.className },
         React.createElement(Body, null,
             React.createElement(Content, null, props.children))));
 };

package/containers/PublicRoute/PublicRoute.js

@@ -22,7 +22,7 @@ import { SVG } from '../../svg';
 import { ParticleGlobe } from '../../modules/ParticleGlobe/ParticleGlobe';
 var PublicRouteBase = function (props) {
     var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "PublicRoute", className: props.className },
         React.createElement(ParticleGlobe, { landmass: 'day', globe: true, glow: 20, trails: 5, pointSize: 1.0, numParticles: 100000, brightness: 0.9, speedFactor: 750, minLifetime: 1000, maxLifetime: 1000, responsive: true }),
         React.createElement(Content, null,
             React.createElement(Help, { active: showHelp },

package/containers/Tabs/Pane.js

@@ -22,7 +22,7 @@ var PaneBase = function (props) {
     // By default, all children are rendered (but hidden when
     // not active). With nohiddenrender enabled, only the active
     // tab is rendered.
-    return (React.createElement("div", { className: props.className }, shouldRender() ? props.children : null));
+    return (React.createElement("div", { "data-testid": "Tabs.Pane", className: props.className }, shouldRender() ? props.children : null));
 };
 var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"
     /**

package/containers/Tabs/Tabs.js

@@ -65,7 +65,7 @@ var TabsBase = function (props) {
             });
         });
     };
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "Tabs", className: props.className },
         React.createElement(TabBar, { active: index, onChange: tabClicked, tabWidth: props.tabWidth }, getTabs()),
         React.createElement(Panes, null, getPanes())));
 };

package/controls/Chip/Chip.js

@@ -38,7 +38,7 @@ var ChipBase = function (props) {
             props.onClick(e);
         }
     };
-    return (React.createElement("div", { className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
+    return (React.createElement("div", { "data-testid": "Chip", className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
         React.createElement("span", { className: "inner", tabIndex: -1 }, props.children),
         React.createElement("button", { type: "button", onClick: props.onClick, "aria-label": "Remove chip", disabled: props.disabled, "aria-disabled": props.disabled },
             React.createElement("svg", null,

package/controls/CircularProgress/CircularProgress.js

@@ -32,7 +32,7 @@ var CircularProgressBase = function (props) {
     var radius = (props.size - props.strokeWidth) / 2;
     var circumference = 2 * Math.PI * radius;
     var offset = circumference * (1 - value / 100);
-    return (React.createElement("div", { className: props.className, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
+    return (React.createElement("div", { "data-testid": "CircularProgress", className: props.className, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement("svg", { width: props.size, height: props.size },
             React.createElement("circle", { cx: props.size / 2, cy: props.size / 2, r: radius, fill: "none", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: "rotate(-90 ".concat(props.size / 2, " ").concat(props.size / 2, ")") })),
         React.createElement(Text, null,

package/controls/Dropzone/Dropzone.js

@@ -53,7 +53,7 @@ var DropzoneBase = function (props) {
         setHover(false);
         props.onAddFiles(Array.from(e.dataTransfer.files));
     };
-    return (React.createElement("button", { type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
+    return (React.createElement("button", { "data-testid": "Dropzone", type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 handleClick();

package/controls/Fab/Fab.js

@@ -45,7 +45,7 @@ var FabBase = function (props) {
         // Call user's click handler if provided:
         (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (React.createElement("button", { type: "button", className: props.className, onClick: handleClick, onMouseDown: handleMouseDown, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
+    return (React.createElement("button", { "data-testid": "Fab", type: "button", className: props.className, onClick: handleClick, onMouseDown: handleMouseDown, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
         React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
         props.children));
 };

package/controls/Ghost/Ghost.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { keyframes } from 'styled-components';
 var GhostBase = function (props) {
-    return React.createElement("div", { className: props.className, style: props.style },
+    return React.createElement("div", { "data-testid": "Ghost", className: props.className, style: props.style },
         React.createElement(Gradient1, null),
         React.createElement(Gradient2, null));
 };

package/controls/Gradient/Gradient.js

@@ -32,7 +32,7 @@ var GradientBase = function (props) {
         console.warn("Gradient: Missing or invalid 'gradientStops'");
         return null;
     }
-    return React.createElement("div", { className: props.className });
+    return React.createElement("div", { "data-testid": "Gradient", className: props.className });
 };
 var generateGradient = function (stops) {
     return "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");

package/controls/Histogram/Histogram.js

@@ -40,7 +40,7 @@ var HistogramBase = function (p) {
     // Abort if bins are all empty.
     if (maxHeight === 0)
         return React.createElement(HistogramNoData, null, p.nodata);
-    return (React.createElement("div", { className: p.className },
+    return (React.createElement("div", { "data-testid": "Histogram", className: p.className },
         React.createElement(ChartArea, null,
             React.createElement(Indent, null,
                 React.createElement(BarArea, null, p.bins.map(function (bin, idx) {

package/controls/Icon/Icon.js

@@ -36,7 +36,7 @@ var IconBase = function (props) {
         if (props.onClick)
             props.onClick(e);
     };
-    return (React.createElement("svg", { className: props.className, onClick: handleClick, focusable: "false", role: "img" },
+    return (React.createElement("svg", { "data-testid": "Icon", className: props.className, onClick: handleClick, focusable: "false", role: "img" },
         props.title && React.createElement("title", null, props.title),
         React.createElement("use", { xlinkHref: props.url })));
 };

package/controls/Key/Key.js

@@ -48,7 +48,7 @@ var KeyBase = function (props) {
         }
         return { symbol: sym, wide: isWide };
     }, [props.value, isMac]), symbol = _a.symbol, wide = _a.wide;
-    return (React.createElement("span", { className: props.className, style: {
+    return (React.createElement("span", { "data-testid": "Key", className: props.className, style: {
             maxWidth: wide ? 'auto' : '16px',
             minWidth: wide ? '36px' : 'auto'
         }, "aria-label": props.value },

package/controls/LinearChart/LinearChart.js

@@ -29,7 +29,7 @@ import styled from 'styled-components';
 import { Ghost } from '../Ghost';
 var LinearChartBase = function (props) {
     var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
-    return (React.createElement("div", { className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
+    return (React.createElement("div", { "data-testid": "LinearChart", className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
         props.label && React.createElement(Label, null,
             props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: '2px', right: 0, bottom: '2px' } }),
             !props.ghost && props.label),

package/controls/ListButton/ListButton.js

@@ -59,7 +59,7 @@ var ListButtonBase = function (props) {
             update();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
+        React.createElement("div", { "data-testid": "ListButton", ref: buttonRef, style: { display: 'inline-block' } }, React.cloneElement(props.toggle, { onClick: toggleOpen })),
         createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(List, { maxItems: 6, contract: true }, props.children)), document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"

package/controls/ListView/ListView.js

@@ -120,7 +120,7 @@ var ListViewBase = function (props) {
     if (props.ghost) {
         return React.createElement(Ghost, __assign({}, otherProps, { columns: columns }));
     }
-    return (React.createElement(Table, __assign({}, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
+    return (React.createElement(Table, __assign({ "data-testid": "ListView" }, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
 /**
  * A data table with sorting, column management, virtualization, and row selection.

package/controls/Mouse/Mouse.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var MouseBase = function (props) {
-    return (React.createElement("svg", { className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
+    return (React.createElement("svg", { "data-testid": "Mouse", className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
         , focusable: "false" },
         React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
         props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),

package/controls/PrimaryButton/PrimaryButton.js

@@ -40,7 +40,7 @@ var PrimaryButtonBase = function (props) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, props.icon));
     };
-    return (React.createElement("button", { className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
+    return (React.createElement("button", { "data-testid": "PrimaryButton", className: props.className, type: "button", onClick: props.onClick, title: props.title, "aria-disabled": props.disabled, disabled: props.disabled },
         icon(),
         props.children));
 };

package/controls/Progress/Progress.js

@@ -34,7 +34,7 @@ var getClampedValue = function (value) {
     return Math.round(Math.min(100, Math.max(0, value)));
 };
 var ProgressBase = function (props) {
-    return React.createElement("div", { className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
+    return React.createElement("div", { "data-testid": "Progress", className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
         React.createElement(FillOuter, null,
             React.createElement(FillInner, { style: { transform: "scaleX(".concat(getClampedValue(props.value) / 100, ")") } })),
         props.numbered && React.createElement(Value, null, "".concat(getClampedValue(props.value), "%")));

package/controls/SecondaryButton/SecondaryButton.js

@@ -29,7 +29,7 @@ import styled, { css, useTheme } from 'styled-components';
 import { Icon } from '../Icon';
 var SecondaryButtonBase = function (props) {
     var theme = useTheme();
-    return (React.createElement("button", { type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
+    return (React.createElement("button", { "data-testid": "SecondaryButton", type: "button", className: props.className, disabled: props.disabled, onClick: props.onClick, title: props.title, "aria-label": props.title },
         React.createElement(Icon, __assign({ color: theme.colors.neutral[100] }, (typeof props.icon === 'string' ? { url: props.icon } : props.icon)))));
 };
 // 

package/controls/TabBar/Tab.js

@@ -32,7 +32,7 @@ var TabBase = React.forwardRef(function (props, ref) {
         if (props.onClick)
             props.onClick();
     };
-    return (React.createElement("div", { className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
+    return (React.createElement("div", { "data-testid": "TabBar.Tab", className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '9px', right: '5px', bottom: '9px', zIndex: 100 } }),
         React.createElement(Content, null,
             props.children,

package/controls/TabBar/TabBar.js

@@ -190,7 +190,7 @@ var TabBarBase = function (props) {
         setActive(idx);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, idx);
     };
-    return (React.createElement("div", { className: props.className, ref: barRef, "aria-orientation": "horizontal" },
+    return (React.createElement("div", { "data-testid": "TabBar", className: props.className, ref: barRef, "aria-orientation": "horizontal" },
         React.createElement(Slider, { ref: sliderRef, onMouseDown: handleMouseDown },
             React.Children.map(props.children, function (child, idx) {
                 return React.cloneElement(child, {

package/controls/TabBar/Underliner.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var UnderlinerBase = React.forwardRef(function (props, ref) {
-    return React.createElement("div", { className: props.className, ref: ref });
+    return React.createElement("div", { "data-testid": "TabBar.Underliner", className: props.className, ref: ref });
 });
 /**
  * Underliner passes a reference to itself back to its parent.
@@ -25,6 +25,6 @@ var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObjec
 var Underliner = React.forwardRef(function (props, ref) {
     return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
 });
-Underliner.displayName = "Underliner";
+Underliner.displayName = "TabBar.Underliner";
 export { Underliner };
 var templateObject_1;

package/controls/TertiaryButton/TertiaryButton.js

@@ -39,7 +39,7 @@ var TertiaryButtonBase = React.forwardRef(function (props, ref) {
         // An IIconProps was provided. Use it as the props for the icon.
         return React.createElement(Icon, __assign({ color: props.primary ? theme.colors.neutral[100] : theme.colors.primary[3] }, props.icon));
     };
-    return (React.createElement("button", { ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
+    return (React.createElement("button", { "data-testid": "TertiaryButton", ref: ref, className: props.className, type: "button", disabled: props.disabled, onClick: props.onClick },
         icon(),
         props.children));
 });

package/controls/ToggleButton/ToggleButton.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var ToggleButtonBase = React.forwardRef(function (props, ref) {
-    return React.createElement("button", { className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
+    return React.createElement("button", { "data-testid": "ToggleButton", className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
         React.createElement(Icon, { url: props.url }));
 });
 var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {

package/controls/View/EllipsizedContent.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var EllipsizedContentBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "EllipsizedContent", className: props.className },
         React.createElement(Ellipsize, null, !props.ghost && props.children));
 };
 var Ellipsize = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n  width: 100%;\n"], ["\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;  \n  width: 100%;\n"])));

package/controls/View/ScrollingContent.js

@@ -17,7 +17,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 var ScrollingContentBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "ScrollingContent", className: props.className },
         React.createElement(OverlayScrollbarsComponent, { defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
                 position: "absolute",
                 left: 0,

package/controls/View/View.js

@@ -31,7 +31,7 @@ import { ScrollingContent } from './ScrollingContent';
 import { EllipsizedContent } from './EllipsizedContent';
 import { Ghost } from '../Ghost';
 var ViewBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "View", className: props.className },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
             props.label,

package/inputs/DateInput/Calendar.js

@@ -48,7 +48,7 @@ var CalendarBase = function (props) {
         days.push(React.createElement(Day, { key: start.getTime(), grey: start.getMonth() != props.date.getMonth() || (props.nofuture && start > today), selected: props.selectedDate && isDateEqual(props.selectedDate, start), today: isDateEqual(today, start), day: start.getDate(), onClick: (!props.nofuture || start <= today) ? handleClick.bind(_this, new Date(start.getTime())) : null }));
         start.setDate(start.getDate() + 1);
     }
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "Calendar", className: props.className },
         ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map(function (day, index) {
             return React.createElement(DayName, { key: index }, day);
         }),

package/inputs/DateInput/DateInput.js

@@ -102,7 +102,7 @@ var DateInputBase = function (props) {
             }
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
+    return (React.createElement("div", { "data-testid": "DateInput", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
         React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, noTabIndex: props.noTabIndex, onChange: handleChange, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleChange(null); } : null, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, nofuture: props.nofuture, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
 };

package/inputs/DateInput/Day.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 var DayBase = function (props) {
-    return React.createElement("div", { className: props.className, onClick: props.onClick }, props.day);
+    return React.createElement("div", { "data-testid": "Day", className: props.className, onClick: props.onClick }, props.day);
 };
 var DayStyled = styled(DayBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  width: 40px;\n  height: 40px;\n  z-index: 0; // for selection circle at z=-1\n\n  // Appearance:\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  user-select: none;\n  outline: none;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: center;  \n\n  // Unclickable days have no pointer events.\n  pointer-events: ", ";\n\n  // Circle (only applies to clickable dates):\n  &:before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: 50%;\n    opacity: 0;\n  }  \n\n  // Grey dates do not belong to the current month.\n  ", "\n\n  // Highlight today's date and selected date.\n  ", "\n  // Selection circles only appear for \n  ", "\n  ", "  \n\n  // Hover:\n  &:hover {\n    color: ", ";\n    &:before {\n      background-color: ", ";\n      opacity: 1;\n    }\n  }\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  width: 40px;\n  height: 40px;\n  z-index: 0; // for selection circle at z=-1\n\n  // Appearance:\n  cursor: ", ";\n  background-color: ", ";\n  color: ", ";\n  user-select: none;\n  outline: none;\n  font: ", ";\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: center;  \n\n  // Unclickable days have no pointer events.\n  pointer-events: ", ";\n\n  // Circle (only applies to clickable dates):\n  &:before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    border-radius: 50%;\n    opacity: 0;\n  }  \n\n  // Grey dates do not belong to the current month.\n  ", "\n\n  // Highlight today's date and selected date.\n  ", "\n  // Selection circles only appear for \n  ", "\n  ", "  \n\n  // Hover:\n  &:hover {\n    color: ", ";\n    &:before {\n      background-color: ", ";\n      opacity: 1;\n    }\n  }\n"
     /**

package/inputs/Dropdown/Dropdown.js

@@ -419,7 +419,7 @@ var DropdownBase = function (props) {
             sameWidth
         ]
     }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
-    return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
+    return (React.createElement("div", { "data-testid": "Dropdown", className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
         React.createElement(Selection, { open: open, error: props.error, disabled: props.disabled, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
         createPortal(React.createElement(Body, { ref: bodyRef, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth, styles: styles, attributes: attributes }, getBodyChildren()), document.body)));
 };

package/inputs/Editor/Editor.js

@@ -88,7 +88,7 @@ var EditorBase = function (props) {
         EditorRegistry.removeEditor(contentEditableRef.current);
     }; }, []);
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        React.createElement("div", { className: props.className, ref: wrapperRef },
+        React.createElement("div", { "data-testid": "Editor", className: props.className, ref: wrapperRef },
             React.createElement(OverlayScrollbarsComponent, { className: "scroller ".concat(fullscreen ? 'fullscreen' : ''), defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } } },
                 !props.disabled && !props.ghost &&
                     React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, openAIurl: props.openAIurl, assemblyAIurl: props.assemblyAIurl, authToken: props.authToken }),

package/inputs/Input/Input.js

@@ -72,7 +72,7 @@ var InputBase = function (props) {
         inputRef.current.select();
     };
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, onToggleReveal: props.revealable ? handleToggleReveal : null, revealed: revealed, unit: props.unit },
-        React.createElement("input", { className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
+        React.createElement("input", { "data-testid": "Input", className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type == 'password' ? (revealed ? 'text' : 'password') : props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
 };
 var InputStyled = styled(InputBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"], ["\n  // Dimensions:\n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  border: none;\n\n  outline: solid 3px rebeccapurple;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  outline:          none;\n\n  // Font\n  font:             ", ";\n  text-align:       left;\n  color:            ", ";\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }\n\n  ", "\n\n  // Make sure HTML5 validation does not show up.\n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n\n  // Turn off number spinners.\n  &[type=number]::-webkit-inner-spin-button, \n  &[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;  /* Webkit (Chrome) */\n    margin: 0; \n  }    \n  &[type=number] {\n    appearance:textfield;\n    -moz-appearance:textfield; /* Firefox */\n  }       \n"])), function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), p.theme.colors.neutral[50]); });
 var Input = function (props) { return React.createElement(InputStyled, __assign({}, props)); };

package/inputs/Input/InputWrapper.js

@@ -42,7 +42,7 @@ var InputWrapperBase = function (props) {
     else if (props.icon != null) {
         icon = (React.createElement(Icon, __assign({ size: 17, color: (_a = props.icon.color) !== null && _a !== void 0 ? _a : theme.colors.primary[3] }, props.icon)));
     }
-    return (React.createElement("div", { className: props.className, onClick: props.onClick },
+    return (React.createElement("div", { "data-testid": "InputWrapper", className: props.className, onClick: props.onClick },
         props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: 0, top: 0, right: 0, bottom: 0, zIndex: 100 } }),
         icon && !props.ghost && props.iconPosition == 'left' && icon,
         React.createElement(Content, null, props.children),

package/inputs/MonthRange/MonthRange.js

@@ -80,7 +80,7 @@ var MonthRangeBase = function (props) {
             }
         ]
     }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
-    return (React.createElement("div", { tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
+    return (React.createElement("div", { "data-testid": "MonthRange", tabIndex: -1, className: props.className, onKeyDown: handleKeyDown, ref: wrapperRef },
         React.createElement(Selector, { value: value, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, error: props.error, clearable: props.clearable, placeholder: props.placeholder, count: props.count, onClear: (!props.disabled && props.clearable && value != null) ? function () { return handleSelect(null); } : null, onCalendar: handleToggle }),
         createPortal(React.createElement(Body, { ref: bodyRef, value: value, open: open, transparent: props.transparent, onSelect: handleSelect, styles: styles, attributes: attributes }), document.body)));
 };

package/inputs/Selector/Selector.js

@@ -61,7 +61,7 @@ var SelectorBase = function (props) {
             default: return React.createElement(Checkbox, __assign({}, otherProps));
         }
     };
-    return (React.createElement("label", { className: props.className },
+    return (React.createElement("label", { "data-testid": "Selector", className: props.className },
         React.createElement("input", { ref: inputRef, name: props.name, type: props.radio ? "radio" : "checkbox", value: props.value === null ? undefined : props.value, checked: checked === null ? false : checked, disabled: props.disabled, onChange: handleChange }),
         getWidget(),
         React.createElement("span", null, props.label)));

package/inputs/Slider/Slider.js

@@ -154,7 +154,7 @@ var SliderBase = function (props) {
         // Create a number of ticks and return them.
         return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
     };
-    return (React.createElement("div", { className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
+    return (React.createElement("div", { "data-testid": "Slider", className: props.className, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
         React.createElement(Track, { ref: trackRef },
             React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
             props.ticks && props.hideTicks != true && renderTicks(),

package/inputs/Textarea/Textarea.js

@@ -42,7 +42,7 @@ var TextareaBase = function (props) {
         }
     };
     return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
-        React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
+        React.createElement("textarea", { "data-testid": "Textarea", className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, tabIndex: 0, onChange: handleChange }),
         props.fullscreen &&
             React.createElement(FullscreenToggle, { onClick: toggleFullscreen },
                 React.createElement("use", { xlinkHref: SVG.Icons.Fullscreen }))));

package/map/Map/Map.js

@@ -218,7 +218,7 @@ var MapBase = function (props) {
         if (props.onMove)
             props.onMove(e);
     };
-    return (React.createElement(GLMap, __assign({}, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIds, doubleClickZoom: props.doubleClickZoom, cursor: props.cursor, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onMoveEnd: props.onMoveEnd, onMouseMove: props.onMouseMove, onMouseLeave: props.onMouseLeave, onLoad: handleLoad, onClick: props.onClick, onDblClick: props.onDblClick }),
+    return (React.createElement(GLMap, __assign({ "data-testid": "Map" }, viewState, { mapboxAccessToken: props.token, style: { width: '100%', height: '100%', minHeight: '300px', font: theme.font.bodyMedium }, logoPosition: props.logoPosition, mapStyle: props.style, minZoom: props.minZoom, maxZoom: props.maxZoom, interactiveLayerIds: props.interactiveLayerIds, doubleClickZoom: props.doubleClickZoom, cursor: props.cursor, preserveDrawingBuffer: props.preserveDrawingBuffer, fadeDuration: props.fadeDuration, onMove: handleMove, onMoveEnd: props.onMoveEnd, onMouseMove: props.onMouseMove, onMouseLeave: props.onMouseLeave, onLoad: handleLoad, onClick: props.onClick, onDblClick: props.onDblClick }),
         props.clipped && React.createElement(React.Fragment, null,
             React.createElement(Source, { type: "raster", tiles: ["https://api.mapbox.com/raster/v1/mapbox.mapbox-terrain-dem-v1/{z}/{x}/{y}.webp?access_token=".concat(props.token)] },
                 React.createElement(Layer, { id: "overlay", type: "raster" })),

package/modules/MainMenu/MainMenu.js

@@ -48,7 +48,7 @@ var MainMenuBase = function (props) {
             primaryItems.push(child);
         }
     });
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "MainMenu", className: props.className },
         React.createElement(Top, null, primaryItems),
         React.createElement(Bottom, null, secondaryItems)));
 };

package/modules/Public/Public.js

@@ -20,7 +20,7 @@ var Public = function (props) {
         blurToClose: false,
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { ref: wrapperRef },
+        React.createElement(Box, { "data-testid": "Box", ref: wrapperRef },
             React.createElement(Header, { logoUrl: props.logoUrl, logoAspectRatio: props.logoAspectRatio, onClick: props.hint ? function () { return setShowHint(!showHint); } : null, children: props.header }),
             React.createElement(Body, { height: props.height },
                 props.hint && React.createElement(Hint, { active: showHint }, props.hint),

package/modules/Public/elements/Body.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var BodyBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Body", className: props.className }, props.children);
 };
 var Body = styled(BodyBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: #888;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;  \n  padding: 16px;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  height: ", ";\n"], ["\n  position: relative;\n  background: #888;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;  \n  padding: 16px;\n  box-sizing: border-box;\n  color: #FFFFFF;\n  overflow: hidden;\n  height: ", ";\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.height ? p.height : "auto"; });
 export { Body };

package/modules/Public/elements/Footer.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var FooterBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Footer", className: props.className }, props.children);
 };
 var Footer = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: 12px;\n  display: flex;\n  justify-content: center;\n  gap: 16px;\n  & > *:only-child {\n    margin-left: auto;\n    margin-right: auto; /* centers the single child */\n  }  \n  padding-left: 17px;\n  padding-right: 17px;\n  @media (max-width: 400px) {\n    flex-direction: column-reverse;\n    justify-content: center;\n    gap: 8px;\n    align-items: center;\n  }\n"], ["\n  margin-top: 12px;\n  display: flex;\n  justify-content: center;\n  gap: 16px;\n  & > *:only-child {\n    margin-left: auto;\n    margin-right: auto; /* centers the single child */\n  }  \n  padding-left: 17px;\n  padding-right: 17px;\n  @media (max-width: 400px) {\n    flex-direction: column-reverse;\n    justify-content: center;\n    gap: 8px;\n    align-items: center;\n  }\n"])));
 export { Footer };

package/modules/Public/elements/Header.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { SVG } from '../../../svg';
 var HeaderBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "Header", className: props.className },
         React.createElement(Logo, { style: { aspectRatio: props.logoAspectRatio } },
             React.createElement("use", { xlinkHref: props.logoUrl })),
         React.createElement(Controls, null,

package/modules/Public/elements/Hint.js

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { SVG } from '../../../svg';
 var HintBase = function (props) {
-    return React.createElement(OverlayScrollbarsComponent, { element: "div", className: props.className, defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } } },
+    return React.createElement(OverlayScrollbarsComponent, { "data-testid": "Hint", element: "div", className: props.className, defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } } },
         props.children,
         React.createElement(Longline, null,
             React.createElement("use", { xlinkHref: SVG.Other.Longline })));

package/modules/Root/Root.js

@@ -23,7 +23,7 @@ import { Map } from '../../map/Map';
 var RootBase = function (props) {
     var navigate = useNavigate();
     var m = useMatches();
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { "data-testid": "Root", className: props.className },
         React.createElement(MainMenu, null,
             React.createElement(MainMenu.Item, { icon: SVG.Menu.MapMarker, onClick: function () { return navigate(""); } }, "Map"),
             React.createElement(MainMenu.Item, { icon: SVG.Menu.Company, onClick: function () { return navigate("company"); } }, "Company"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.323",
+  "version": "1.0.325",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",

package/services/Dialog/DialogBackground.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import * as React from 'react';
 import styled from 'styled-components';
 var DialogBackgroundBase = function (props) {
-    return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status) });
+    return React.createElement("div", { "data-testid": "DialogBackground", className: "".concat(props.className, " ").concat(props.status) });
 };
 var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"], ["\n  position:    fixed;\n  z-index:     2000;\n  left:        0;\n  top:         0;\n  right:       0;\n  bottom:      0;\n  background-color: #00000080;\n  opacity:     1;\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease;\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n  }\n  &.entering {\n    opacity: 1;\n  }\n  &.entered {\n    opacity: 1;\n  }  \n"])));
 DialogBackground.displayName = "DialogBackground";

package/services/Dialog/DialogContent.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 var DialogContentBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { "data-testid": "Dialog.Content", className: props.className },
         React.createElement(OverlayScrollbarsComponent, { defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
                 maxHeight: "inherit",
                 boxSizing: 'border-box',

package/services/Dialog/DialogFooter.js

@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled from 'styled-components';
 var DialogFooterBase = function (props) {
-    return React.createElement("div", { className: "".concat(props.className, " footer") }, props.children);
+    return React.createElement("div", { "data-testid": "Dialog.Footer", className: "".concat(props.className, " footer") }, props.children);
 };
 var DialogFooterStyled = styled(DialogFooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  justify-content: ", ";\n  padding: 0 20px 0 20px;\n  height: 80px;\n  background-color: ", ";\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  justify-content: ", ";\n  padding: 0 20px 0 20px;\n  height: 80px;\n  background-color: ", ";\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"
     /**

package/services/Dialog/DialogHeader.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled from 'styled-components';
 var DialogHeaderBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
+    return React.createElement("div", { "data-testid": "Dialog.Header", className: props.className }, props.children);
 };
 var DialogHeaderStyled = styled(DialogHeaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 24px 20px 24px 20px;\n  font: ", ";\n"], ["\n  padding: 24px 20px 24px 20px;\n  font: ", ";\n"
     /**

package/services/Dialog/DialogWindow.js

@@ -9,7 +9,7 @@ var DialogWindowBase = React.forwardRef(function (props, ref) {
         // Stop any keyboard interaction propagating to parent components.
         ev.stopPropagation();
     };
-    return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
+    return (React.createElement("div", { "data-testid": "DialogWindow", className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
 });
 var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"], ["\n  position: fixed;\n  z-index: 3000;\n  left: 50%;\n  top: 50%;\n  transform-origin: center center;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n  ", "\n\n  // Font:\n  font: ", ";\n  color: ", ";  \n\n  /* Dialog window width:\n   * Narrower on small screen. */\n  width: ", ";\n  @media (max-width: ", "px) {\n    width: ", ";\n  }\n\n  /* useTransitionState classes */\n  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n  opacity: 0;\n  &.preEnter, &.exiting {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-50%) scale(0.8);\n  }\n  &.entering {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n  &.entered {\n    opacity: 1;\n    transform: translateX(-50%) translateY(-50%);\n  }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .footer {\n      background: ", ";\n    }  \n  "], ["\n    .footer {\n      background: ", ";\n    }  \n  "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) {
     if (!p.width)

package/services/Dialog/XhrDialog.d.ts

@@ -40,7 +40,7 @@ interface IXhrDialogProps {
  * A `Dialog.Xhr` is a preset dialog that takes an `error` object from an
  * Axios request. It then displays a human-readable version of this error.
  * An "OK" button is present that calls `onClose`, and, if `onRetry` is set,
- * a "Retry" button.
+ * a "RETRY" button.
  */
 declare const XhrDialog: {
     ({ open, title, ...props }: IXhrDialogProps): React.JSX.Element;

package/services/Dialog/XhrDialog.js

@@ -18,10 +18,11 @@ import { HttpStatusFormatter } from '../../formatters/HttpStatusFormatter/HttpSt
  * A `Dialog.Xhr` is a preset dialog that takes an `error` object from an
  * Axios request. It then displays a human-readable version of this error.
  * An "OK" button is present that calls `onClose`, and, if `onRetry` is set,
- * a "Retry" button.
+ * a "RETRY" button.
  */
 var XhrDialog = function (_a) {
-    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.title, title = _c === void 0 ? "Network error" : _c, props = __rest(_a, ["open", "title"]);
+    var _b, _c, _d, _e, _f, _g, _h;
+    var _j = _a.open, open = _j === void 0 ? false : _j, _k = _a.title, title = _k === void 0 ? "Server error" : _k, props = __rest(_a, ["open", "title"]);
     var getStatusHeader = function () {
         if (props.error.response) {
             var status_1 = React.createElement(HttpStatusFormatter, { type: "title", status: props.error.response.status });
@@ -49,14 +50,24 @@ var XhrDialog = function (_a) {
     return (React.createElement(Dialog, { inverted: props.inverted, open: open, width: props.width, onClose: props.onClose },
         React.createElement(Dialog.Header, null, title),
         React.createElement(Dialog.Content, null,
-            props.error && React.createElement("p", { style: { fontWeight: 700 } }, getStatusHeader()),
+            props.error && React.createElement("p", { style: { fontWeight: 700 } },
+                getStatusHeader(),
+                ((_b = props.error.response) === null || _b === void 0 ? void 0 : _b.status) && " (".concat(props.error.response.status, ")")),
             props.error && React.createElement("p", null, getStatusText()),
-            props.error && props.error.response && props.error.response.status === 422 && props.error.response.data &&
+            (((_e = (_d = (_c = props.error) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.message) || ((_h = (_g = (_f = props.error) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.errors)) &&
                 React.createElement(React.Fragment, null,
-                    React.createElement("div", null, "Details"),
-                    React.createElement("div", null, props.error.response.data.message))),
+                    React.createElement("p", null,
+                        React.createElement("strong", null, "Details")),
+                    props.error.response.data.errors
+                        ? Object.entries(props.error.response.data.errors).map(function (_a) {
+                            var field = _a[0], messages = _a[1];
+                            return React.createElement("ul", { key: field, style: { margin: '0 0', paddingLeft: '20px' } }, messages.map(function (msg, i) {
+                                return React.createElement("li", { key: i }, msg);
+                            }));
+                        })
+                        : React.createElement("div", null, props.error.response.data.message))),
         React.createElement(Dialog.Footer, null,
-            props.onRetry && React.createElement(PrimaryButton, { onClick: props.onRetry }, "Retry"),
+            props.onRetry && React.createElement(PrimaryButton, { onClick: props.onRetry }, "RETRY"),
             React.createElement(PrimaryButton, { onClick: props.onClose }, "OK"))));
 };
 XhrDialog.displayName = "Dialog.Xhr";