@longline/aqua-ui 1.0.183 → 1.0.186

package/containers/Dock/Dock.d.ts

@@ -11,17 +11,17 @@ interface IProps {
     bordered?: boolean;
     /**
      * Dock offset from top of map, in pixels.
-     * @default 20
+     * @default 8
      */
     top?: number;
     /**
      * Dock offset from bottom of map, in pixels.
-     * @default 20
+     * @default 8
      */
     bottom?: number;
     /**
      * Dock offset from right side of map, in pixels.
-     * @default 20
+     * @default 8
      */
     right?: number;
     /**
@@ -41,5 +41,8 @@ interface IProps {
  * When docked, Dockables are placed in a vertical flexbox. When undocked, Dockables use
  * absolute positioning on the map and do not stick to the Dock.
  */
-declare const Dock: ({ bordered, top, bottom, right, gap, ...props }: IProps) => React.JSX.Element;
+declare const Dock: {
+    ({ bordered, top, bottom, right, gap, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Dock };

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 }, props.children);
+    return React.createElement("div", { className: props.className, "aria-hidden": "true", 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"
     /**
@@ -57,5 +57,6 @@ var Dock = function (_a) {
     var _b = _a.bordered, bordered = _b === void 0 ? false : _b, _c = _a.top, top = _c === void 0 ? 8 : _c, _d = _a.bottom, bottom = _d === void 0 ? 8 : _d, _e = _a.right, right = _e === void 0 ? 8 : _e, _f = _a.gap, gap = _f === void 0 ? 16 : _f, props = __rest(_a, ["bordered", "top", "bottom", "right", "gap"]);
     return React.createElement(DockStyled, __assign({ bordered: bordered, top: top, bottom: bottom, right: right, gap: gap }, props));
 };
+Dock.displayName = "Dock";
 export { Dock };
 var templateObject_1, templateObject_2;

package/containers/Dock/Dockable.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IDockableProps {
+interface IProps {
     /** @ignore */
     className?: string;
     /** @ignore */
@@ -48,6 +48,14 @@ interface IDockableProps {
      * @default false
      */
     fill?: boolean | number;
+    /**
+     * Forgiving area around map center were Dockable doesn't immediately swap
+     * sides (in pixels).
+     * This is useful for preventing flickering when the Dockable is close to
+     * the center of the map.
+     * @default 60
+     */
+    hysteresis?: number;
 }
 /**
  * A `Dockable` is fixed to a lat/lng on the `Map`. It must be a child of `Dock`. When a Dockable
@@ -56,5 +64,8 @@ interface IDockableProps {
  *
  * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
  */
-declare const Dockable: ({ longitude, latitude, offsetX, offsetY, swappable, alwaysDocked, zIndex, ...props }: IDockableProps) => React.JSX.Element;
-export { Dockable, IDockableProps };
+declare const Dockable: {
+    ({ longitude, latitude, offsetX, offsetY, swappable, alwaysDocked, zIndex, hysteresis, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { Dockable, IProps as IDockableProps };

package/containers/Dock/Dockable.js

@@ -29,8 +29,9 @@ import { useMap } from 'react-map-gl/mapbox';
 import styled, { css } from 'styled-components';
 import { useViewState } from '../../map/Map';
 var DockableBase = function (props) {
+    var _a, _b, _c, _d;
     // Reference to Dockable div:
-    var _a = React.useState(null), containerRef = _a[0], setContainerRef = _a[1];
+    var containerRef = React.useRef(null);
     // Using the ViewState will cause this component to be rerendered when the 
     // map moves:
     useViewState();
@@ -39,20 +40,49 @@ var DockableBase = function (props) {
     var mapWidth = map.current.getContainer().clientWidth;
     var mapHeight = map.current.getContainer().clientHeight;
     // Convert Dockable's lat/lng to pixel coordinates:
-    var _b = map.current.project([props.longitude, props.latitude]), x = _b.x, y = _b.y;
+    var _e = map.current.project([props.longitude, props.latitude]), x = _e.x, y = _e.y;
     // Get size of Dockable:
-    var myWidth = containerRef ? containerRef.clientWidth : 0;
-    var myHeight = containerRef ? containerRef.clientHeight : 0;
+    var myWidth = (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+    var myHeight = (_d = (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
     // Is Dockable currently offscreen (boolean)?
     var offsetX = props.offsetX;
     var offsetY = props.offsetY;
-    var offscreen = props.alwaysDocked
-        || x + offsetX < 0
-        || y + offsetY < 0
-        || x + offsetX + myWidth + (props.swappable ? -myWidth - offsetX * 2 : 0) > mapWidth
-        || y + offsetY + myHeight > mapHeight;
-    var rightHalf = x > mapWidth / 2;
-    var bottomHalf = y > mapHeight / 2; // TODO: Future use for vertical swappable.
+    var swapHorizontally = props.swappable === 'horizontal' || props.swappable === 'both';
+    var swapVertically = props.swappable === 'vertical' || props.swappable === 'both';
+    var possibleXs = swapHorizontally
+        ? [x + offsetX, x + offsetX - myWidth - offsetX * 2]
+        : [x + offsetX];
+    var possibleYs = swapVertically
+        ? [y + offsetY, y + offsetY - myHeight - offsetY * 2]
+        : [y + offsetY];
+    var isOffscreenX = possibleXs.every(function (posX) { return posX < 0 || posX + myWidth > mapWidth; });
+    var isOffscreenY = possibleYs.every(function (posY) { return posY < 0 || posY + myHeight > mapHeight; });
+    var offscreen = props.alwaysDocked || isOffscreenX || isOffscreenY;
+    // Horizontal hysteresis logic:
+    var wasRightRef = React.useRef(x > mapWidth / 2);
+    var wasBottomRef = React.useRef(y > mapHeight / 2);
+    // Horizontal hysteresis:
+    React.useEffect(function () {
+        var center = mapWidth / 2;
+        if (x > center + props.hysteresis) {
+            wasRightRef.current = true;
+        }
+        else if (x < center - props.hysteresis) {
+            wasRightRef.current = false;
+        }
+    }, [x, mapWidth]);
+    // Vertical hysteresis:
+    React.useEffect(function () {
+        var center = mapHeight / 2;
+        if (y > center + props.hysteresis) {
+            wasBottomRef.current = true;
+        }
+        else if (y < center - props.hysteresis) {
+            wasBottomRef.current = false;
+        }
+    }, [y, mapHeight]);
+    var rightHalf = wasRightRef.current;
+    var bottomHalf = wasBottomRef.current;
     // A local style object is used rather than styled-components, because the 
     // style changes constantly and would produce too many styled-components
     // classes.
@@ -73,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: setContainerRef }, props.children));
+    return (React.createElement("div", { 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"
     /**
@@ -92,8 +122,9 @@ var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4
  * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
  */
 var Dockable = function (_a) {
-    var _b = _a.longitude, longitude = _b === void 0 ? 0 : _b, _c = _a.latitude, latitude = _c === void 0 ? 0 : _c, _d = _a.offsetX, offsetX = _d === void 0 ? 0 : _d, _e = _a.offsetY, offsetY = _e === void 0 ? 0 : _e, _f = _a.swappable, swappable = _f === void 0 ? 'none' : _f, _g = _a.alwaysDocked, alwaysDocked = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["longitude", "latitude", "offsetX", "offsetY", "swappable", "alwaysDocked", "zIndex"]);
-    return React.createElement(DockableStyled, __assign({ longitude: longitude, latitude: latitude, offsetX: offsetX, offsetY: offsetY, swappable: swappable, alwaysDocked: alwaysDocked, zIndex: zIndex }, props));
+    var _b = _a.longitude, longitude = _b === void 0 ? 0 : _b, _c = _a.latitude, latitude = _c === void 0 ? 0 : _c, _d = _a.offsetX, offsetX = _d === void 0 ? 0 : _d, _e = _a.offsetY, offsetY = _e === void 0 ? 0 : _e, _f = _a.swappable, swappable = _f === void 0 ? 'none' : _f, _g = _a.alwaysDocked, alwaysDocked = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, _j = _a.hysteresis, hysteresis = _j === void 0 ? 60 : _j, props = __rest(_a, ["longitude", "latitude", "offsetX", "offsetY", "swappable", "alwaysDocked", "zIndex", "hysteresis"]);
+    return React.createElement(DockableStyled, __assign({ longitude: longitude, latitude: latitude, offsetX: offsetX, offsetY: offsetY, swappable: swappable, alwaysDocked: alwaysDocked, zIndex: zIndex, hysteresis: hysteresis }, props));
 };
+Dockable.displayName = 'Dockable';
 export { Dockable };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/DragBar/DragBar.d.ts

@@ -37,5 +37,8 @@ interface IProps {
  * A `DragBar` fills all horizontal space available to it. Its `height` is
  * set in pixels.
  */
-declare const DragBar: ({ height, navigation, navigationDelta, behavior, ...props }: IProps) => React.JSX.Element;
+declare const DragBar: {
+    ({ height, navigation, navigationDelta, behavior, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { DragBar };

package/containers/DragBar/DragBar.js

@@ -115,5 +115,6 @@ var DragBar = function (_a) {
     var _b = _a.height, height = _b === void 0 ? 40 : _b, _c = _a.navigation, navigation = _c === void 0 ? false : _c, _d = _a.navigationDelta, navigationDelta = _d === void 0 ? 100 : _d, _e = _a.behavior, behavior = _e === void 0 ? 'smooth' : _e, props = __rest(_a, ["height", "navigation", "navigationDelta", "behavior"]);
     return React.createElement(DragBarStyled, __assign({ height: height, navigation: navigation, navigationDelta: navigationDelta, behavior: behavior }, props));
 };
+DragBar.displayName = "DragBar";
 export { DragBar };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/containers/GlassPane/GlassPane.d.ts

@@ -5,17 +5,17 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
     /**
-     * If set, adds a shiny border.
+     * If set, adds a shiny border around the component.
      * @default false
      */
     bordered?: boolean;
     /**
-     * If set, adds 16px of inner padding.
+     * If set, adds 16px of inner padding to the pane.
      * @default false
      */
     padded?: boolean;
     /**
-     * If set, animates on mount.
+     * If true, fades in and blurs smoothly on mount via a CSS transition.
      * @default false
      */
     animated?: boolean;
@@ -28,9 +28,21 @@ interface IProps {
  * * Width is unset; glass panel will fill its container.
  * * Height is content-dependent. The panel will `flex:1`, though.
  *
+ * ### Props
+ * - `bordered`: Adds a shiny border.
+ * - `padded`: Adds 16px of inner padding.
+ * - `animated`: Animates on mount.
+ *
  * By default, there is no internal padding (though some can be added with `padded`). The panel's
  * content is expected to set its own padding.
  *
+ * @example
+ * <GlassPane bordered padded animated>
+ *   <Content />
+ * </GlassPane>*
  */
-declare const GlassPane: ({ bordered, padded, animated, ...props }: IProps) => React.JSX.Element;
+declare const GlassPane: {
+    ({ bordered, padded, animated, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { GlassPane, IProps };

package/containers/GlassPane/GlassPane.js

@@ -25,14 +25,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled, { css, keyframes } from 'styled-components';
-var GlassPaneBase = function (props) {
-    return React.createElement("div", { className: props.className }, props.children);
-};
+import styled, { css } from 'styled-components';
+var GlassPaneBase = React.memo(function (props) {
+    // Keep track of whether the component has mounted. Non-animated panels
+    // are instantly mounted; animated panels are mounted after 1 tick so that
+    // a CSS transition will run.
+    var _a = React.useState(props.animated ? false : true), mounted = _a[0], setMounted = _a[1];
+    // If animation is requested, then set the class "mounted" on the component
+    // after the component has mounted. This will trigger the animation.
+    React.useEffect(function () {
+        if (props.animated) {
+            var timeout_1 = window.requestAnimationFrame(function () { return setMounted(true); });
+            return function () { return window.cancelAnimationFrame(timeout_1); };
+        }
+        else {
+            return function () { };
+        }
+    }, [props.animated]);
+    return (React.createElement("div", { 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)";
-var Anim = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  }\n  100% {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  }\n  100% {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n"])));
-var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n  display: flex;\n  flex-direction: column;\n\n  // Content:\n  overflow: hidden;\n\n  ", "\n\n  // Appearance:\n  backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n  color: ", ";\n  box-shadow: ", ";\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"], ["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n  display: flex;\n  flex-direction: column;\n\n  // Content:\n  overflow: hidden;\n\n  ", "\n\n  // Appearance:\n  backdrop-filter: contrast(130%) brightness(120%) blur(5px);\n  color: ", ";\n  box-shadow: ", ";\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"
+var GlassPaneStyled = styled(GlassPaneBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n  display: flex;\n  flex-direction: column;\n\n  // Content:\n  overflow: hidden;\n\n  // Appearance:\n  transition: opacity 500ms ease, backdrop-filter 500ms ease;\n  opacity: 0;\n  backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  color: ", ";\n  box-shadow: ", ";\n\n  &.mounted {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"], ["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n  display: flex;\n  flex-direction: column;\n\n  // Content:\n  overflow: hidden;\n\n  // Appearance:\n  transition: opacity 500ms ease, backdrop-filter 500ms ease;\n  opacity: 0;\n  backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  color: ", ";\n  box-shadow: ", ";\n\n  &.mounted {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"
     /**
      * A `GlassPane` is used over a colorful background, like a map.
      *
@@ -41,11 +55,20 @@ var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_
      * * Width is unset; glass panel will fill its container.
      * * Height is content-dependent. The panel will `flex:1`, though.
      *
+     * ### Props
+     * - `bordered`: Adds a shiny border.
+     * - `padded`: Adds 16px of inner padding.
+     * - `animated`: Animates on mount.
+     *
      * By default, there is no internal padding (though some can be added with `padded`). The panel's
      * content is expected to set its own padding.
      *
+     * @example
+     * <GlassPane bordered padded animated>
+     *   <Content />
+     * </GlassPane>*
      */
-])), function (p) { return p.padded && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["padding: 15px;"], ["padding: 15px;"]))); }, function (p) { return p.animated && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    animation: ", " 500ms forwards;\n  "], ["\n    animation: ", " 500ms forwards;\n  "])), Anim); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.medium; }, GRADIENT_0, GRADIENT_1, GRADIENT_0, function (p) { return p.theme.radius.normal; }, function (p) { return p.bordered ? 1 : 0; });
+])), function (p) { return p.padded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: 15px;"], ["padding: 15px;"]))); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.medium; }, GRADIENT_0, GRADIENT_1, GRADIENT_0, function (p) { return p.theme.radius.normal; }, function (p) { return p.bordered ? 1 : 0; });
 /**
  * A `GlassPane` is used over a colorful background, like a map.
  *
@@ -54,13 +77,23 @@ var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_
  * * Width is unset; glass panel will fill its container.
  * * Height is content-dependent. The panel will `flex:1`, though.
  *
+ * ### Props
+ * - `bordered`: Adds a shiny border.
+ * - `padded`: Adds 16px of inner padding.
+ * - `animated`: Animates on mount.
+ *
  * By default, there is no internal padding (though some can be added with `padded`). The panel's
  * content is expected to set its own padding.
  *
+ * @example
+ * <GlassPane bordered padded animated>
+ *   <Content />
+ * </GlassPane>*
  */
 var GlassPane = function (_a) {
     var _b = _a.bordered, bordered = _b === void 0 ? false : _b, _c = _a.padded, padded = _c === void 0 ? false : _c, _d = _a.animated, animated = _d === void 0 ? false : _d, props = __rest(_a, ["bordered", "padded", "animated"]);
     return React.createElement(GlassPaneStyled, __assign({ bordered: bordered, padded: padded, animated: animated }, props));
 };
+GlassPane.displayName = "GlassPane";
 export { GlassPane };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2;

package/containers/InfoBox/InfoBox.d.ts

@@ -17,7 +17,7 @@ interface IProps {
      */
     minHeight?: number;
     /**
-     * Add padding to content?
+     * If set, adds padding to content.
      * @default false
      */
     padded?: boolean;
@@ -37,5 +37,26 @@ interface IProps {
      */
     scroll?: boolean;
 }
-declare const InfoBox: ({ width, minHeight, padded, scroll, ...props }: IProps) => React.JSX.Element;
+/**
+ * `InfoBox` is a layout container that presents structured content inside a
+ * glass-like pane. It optionally includes a header and footer, and can
+ * support scrollable content areas.
+ *
+ * ### Features
+ * - Width control via `width` prop.
+ * - Optional header/footer injection.
+ * - Internal scroll support for use in flexible layouts.
+ * - Optional padding for inner content.
+ *
+ * @example
+ * ```tsx
+ * <InfoBox header="Title" footer={<Actions />} scroll padded>
+ *   <p>This is a scrollable info panel</p>
+ * </InfoBox>
+ * ```
+ */
+declare const InfoBox: {
+    ({ width, minHeight, padded, scroll, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { InfoBox, IProps };

package/containers/InfoBox/InfoBox.js

@@ -32,14 +32,52 @@ import { Footer } from './elements/Footer';
  * An `InfoBox` is a glass pane with an optional header and footer.
  */
 var InfoBoxBase = function (props) {
-    return React.createElement("div", { className: props.className },
+    return React.createElement("div", { 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));
 };
-var InfoBoxStyled = styled(InfoBoxBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"], ["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"])), function (p) { return p.width; });
+var InfoBoxStyled = styled(InfoBoxBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"], ["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"
+    /**
+     * `InfoBox` is a layout container that presents structured content inside a
+     * glass-like pane. It optionally includes a header and footer, and can
+     * support scrollable content areas.
+     *
+     * ### Features
+     * - Width control via `width` prop.
+     * - Optional header/footer injection.
+     * - Internal scroll support for use in flexible layouts.
+     * - Optional padding for inner content.
+     *
+     * @example
+     * ```tsx
+     * <InfoBox header="Title" footer={<Actions />} scroll padded>
+     *   <p>This is a scrollable info panel</p>
+     * </InfoBox>
+     * ```
+     */
+])), function (p) { return p.width; });
+/**
+ * `InfoBox` is a layout container that presents structured content inside a
+ * glass-like pane. It optionally includes a header and footer, and can
+ * support scrollable content areas.
+ *
+ * ### Features
+ * - Width control via `width` prop.
+ * - Optional header/footer injection.
+ * - Internal scroll support for use in flexible layouts.
+ * - Optional padding for inner content.
+ *
+ * @example
+ * ```tsx
+ * <InfoBox header="Title" footer={<Actions />} scroll padded>
+ *   <p>This is a scrollable info panel</p>
+ * </InfoBox>
+ * ```
+ */
 var InfoBox = function (_a) {
     var _b = _a.width, width = _b === void 0 ? 360 : _b, _c = _a.minHeight, minHeight = _c === void 0 ? 0 : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, _e = _a.scroll, scroll = _e === void 0 ? false : _e, props = __rest(_a, ["width", "minHeight", "padded", "scroll"]);
     return React.createElement(InfoBoxStyled, __assign({ width: width, minHeight: minHeight, padded: padded, scroll: scroll }, props));
 };
+InfoBox.displayName = "InfoBox";
 export { InfoBox };
 var templateObject_1;

package/containers/InfoBox/elements/Content.d.ts

@@ -23,5 +23,8 @@ interface IProps {
 /**
  * InfoBox.Content fills up all vertical space it can get.
  */
-declare const Content: (props: IProps) => React.JSX.Element;
+declare const Content: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Content, IProps };

package/containers/InfoBox/elements/Content.js

@@ -44,5 +44,6 @@ var ContentStyled = styled(ContentBase)(templateObject_4 || (templateObject_4 =
  * InfoBox.Content fills up all vertical space it can get.
  */
 var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };
+Content.displayName = "InfoBox.Content";
 export { Content };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/InfoBox/elements/Footer.d.ts

@@ -5,5 +5,8 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
 }
-declare const Footer: (props: IProps) => React.JSX.Element;
+declare const Footer: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Footer, IProps };

package/containers/InfoBox/elements/Footer.js

@@ -20,5 +20,6 @@ var FooterBase = function (props) {
 };
 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)); };
+Footer.displayName = "InfoBox.Footer";
 export { Footer };
 var templateObject_1;

package/containers/InfoBox/elements/Header.d.ts

@@ -5,5 +5,8 @@ interface IProps {
     /** @ignore */
     children?: React.ReactNode;
 }
-declare const Header: (props: IProps) => React.JSX.Element;
+declare const Header: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Header, IProps };

package/containers/InfoBox/elements/Header.js

@@ -18,7 +18,8 @@ import styled from "styled-components";
 var HeaderBase = function (props) {
     return React.createElement("div", { 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: rgb(from #1E242A r g b / 80%);\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: rgb(from #1E242A r g b / 80%);\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 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)); };
+Header.displayName = "InfoBox.Header";
 export { Header };
 var templateObject_1;

package/containers/List/ListCell.d.ts

@@ -9,5 +9,8 @@ interface IProps {
     /** Text alignment. Defaults to 'left'. */
     align?: 'left' | 'right';
 }
-declare const ListCell: (props: IProps) => React.JSX.Element;
+declare const ListCell: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { ListCell };

package/containers/List/ListCell.js

@@ -18,7 +18,8 @@ import styled, { css } from 'styled-components';
 var ListCellBase = function (props) {
     return React.createElement("div", { 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 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)); };
+ListCell.displayName = "ListCell";
 export { ListCell };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/List/ListRow.d.ts

@@ -11,5 +11,8 @@ interface IProps {
     /** Triggered when row is clicked. */
     onClick?: (e?: React.MouseEvent) => void;
 }
-declare const ListRow: (props: IProps) => React.JSX.Element;
+declare const ListRow: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { ListRow };

package/containers/List/ListRow.js

@@ -16,9 +16,10 @@ 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: function (e) { return props.onClick(e); } }, props.children));
+    return React.createElement("div", { className: props.className, onClick: function (e) { return props.onClick(e); } }, props.children);
 };
 var ListRowStyled = styled(ListRowBase)(templateObject_3 || (templateObject_3 = __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  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\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  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return 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]; }); }, function (p) { return 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]; }); });
 var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };
+ListRow.displayName = "ListRow";
 export { ListRow };
 var templateObject_1, templateObject_2, templateObject_3;

package/containers/Message/Error.d.ts

@@ -7,5 +7,8 @@ interface IProps {
     /** If set, add a margin around the message box. */
     margin?: boolean;
 }
-declare const Error: (props: IProps) => React.JSX.Element;
+declare const Error: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Error, IProps };

package/containers/Message/Error.js

@@ -6,4 +6,5 @@ var Error = function (props) {
     return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "An error occurred.",
         props.onRetry && React.createElement(TertiaryButton, { onClick: props.onRetry }, "RETRY"));
 };
+Error.displayName = "Message.Error";
 export { Error };

package/containers/Message/Message.d.ts

@@ -19,17 +19,27 @@ declare const Message: {
      * filter is currently active. This Message offers no actions for the user
      * to take.
      */
-    NoData: (props: import("./NoData").IProps) => React.JSX.Element;
+    NoData: {
+        (props: import("./NoData").IProps): React.JSX.Element;
+        displayName: string;
+    };
     /**
      * A `NoFilteredData` `Message` should be used when a filter is active, and
      * this may be the cause of a lack of data. Optionally a button can be shown
      * to clear the filter.
      */
-    NoFilteredData: (props: import("./NoFilteredData").IProps) => React.JSX.Element;
+    NoFilteredData: {
+        (props: import("./NoFilteredData").IProps): React.JSX.Element;
+        displayName: string;
+    };
     /**
      * An `Error` `Message` should be shown when there was an error retrieving
      * data from the server. A `Retry` button can optionally be shown.
      */
-    Error: (props: import("./Error").IProps) => React.JSX.Element;
+    Error: {
+        (props: import("./Error").IProps): React.JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
 };
 export { Message };

package/containers/Message/Message.js

@@ -27,7 +27,7 @@ var MessageStyled = styled(MessageBase)(templateObject_1 || (templateObject_1 =
      * has occurred: a list is empty, or an error occurred. A `Message` ideally
      * includes a button with an action to resolve the situation.
      */
-])), function (p) { return p.margin ? '32px' : 0; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; });
+])), function (p) { return "".concat(p.margin ? 32 : 0, "px"); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; });
 /**
  * A `Message` is used to communicate to the user that something unusual
  * has occurred: a list is empty, or an error occurred. A `Message` ideally
@@ -51,5 +51,6 @@ Message.NoFilteredData = NoFilteredData;
  * data from the server. A `Retry` button can optionally be shown.
  */
 Message.Error = Error;
+Message.displayName = "Message";
 export { Message };
 var templateObject_1;

package/containers/Message/NoData.d.ts

@@ -5,5 +5,8 @@ interface IProps {
     /** If set, add a margin around the message box. */
     margin?: boolean;
 }
-declare const NoData: (props: IProps) => React.JSX.Element;
+declare const NoData: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { NoData, IProps };

package/containers/Message/NoData.js

@@ -4,4 +4,5 @@ var NoData = function (props) {
     var _a;
     return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "There are no records yet.");
 };
+NoData.displayName = "Message.NoData";
 export { NoData };