@longline/aqua-ui 1.0.183 → 1.0.186

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" },
+    return (React.createElement("svg", { className: props.className, onClick: handleClick, focusable: "false", role: "img" },
         props.title && React.createElement("title", null, props.title),
         React.createElement("use", { xlinkHref: props.url })));
 };
@@ -44,10 +44,10 @@ var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObj
 var IconStyled = styled(IconBase).attrs(function (p) {
     var _a, _b;
     return ({
-        realSize: typeof p.size === 'number' ? "".concat(p.size, "px") : "".concat(scaleSize((_a = p.size) !== null && _a !== void 0 ? _a : 'medium', 1, 'minorThird'), "em"),
-        color: (_b = p.color) !== null && _b !== void 0 ? _b : p.theme.colors.neutral[100]
+        $realSize: typeof p.size === 'number' ? "".concat(p.size, "px") : "".concat(scaleSize((_a = p.size) !== null && _a !== void 0 ? _a : 'medium', 1, 'minorThird'), "em"),
+        $color: (_b = p.$color) !== null && _b !== void 0 ? _b : p.theme.colors.neutral[100]
     });
-})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  ", "\n  ", "\n  ", "\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  ", "\n  ", "\n  ", "\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.flipped && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["scale: 1 -1;"], ["scale: 1 -1;"]))); }, function (p) { return p.mirrored && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["scale: -1 1;"], ["scale: -1 1;"]))); }, function (p) { return p.rotated && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["rotate: ", "deg;"], ["rotate: ", "deg;"])), p.rotated); }, function (p) { return p.color; }, function (p) { return p.onClick && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, p.color), lighten(0.3, p.color)); }, function (p) { return p.animated && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.flipped ? 'scaleY(-1)' : ''; }, function (p) { return p.mirrored ? 'scaleX(-1)' : ''; }, function (p) { return p.rotated ? "rotate(".concat(p.rotated, "deg)") : ''; }, function (p) { return p.color; }, function (p) { return p.onClick && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, p.color), lighten(0.3, p.color)); }, function (p) { return p.animated && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
 /**
  * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
  * with an URL of the form `spritesheet.svg#my-icon`.
@@ -75,5 +75,6 @@ var Icon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.flipped, flipped = _d === void 0 ? false : _d, _e = _a.mirrored, mirrored = _e === void 0 ? false : _e, _f = _a.animated, animated = _f === void 0 ? false : _f, _g = _a.padded, padded = _g === void 0 ? false : _g, _h = _a.circle, circle = _h === void 0 ? false : _h, props = __rest(_a, ["size", "disabled", "flipped", "mirrored", "animated", "padded", "circle"]);
     return React.createElement(IconStyled, __assign({ size: size, disabled: disabled, flipped: flipped, mirrored: mirrored, animated: animated, padded: padded, circle: circle }, props));
 };
+Icon.displayName = "Icon";
 export { IconBase, Icon, IconStyled };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/controls/Key/Key.d.ts

@@ -14,9 +14,12 @@ interface IProps {
 }
 /**
  * A `Key` displays a keyboard key. The value is the key description,
- * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+ * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
  * is longer than 1 character, in which case the width becomes 36px.
  * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
  */
-declare const Key: (props: IProps) => React.JSX.Element;
+declare const Key: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Key };

package/controls/Key/Key.js

@@ -19,56 +19,57 @@ import { Icon } from '../Icon';
 import { SVG } from '../../svg';
 var KeyBase = function (props) {
     var isMac = navigator.userAgent.includes('Mac') || props._fakeMac;
-    var symbol = props.value;
-    var wide = false;
-    // Key replacement:
-    switch (props.value) {
-        case 'Ctrl':
-            // On a Mac, the Ctrl key becomes a Mac symbol.
-            if (isMac) {
-                symbol = React.createElement(Icon, { url: SVG.Icons.Cmd });
-            }
-            else {
-                wide = true;
-            }
-            break;
-        case 'ArrowUp':
-            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: -90 });
-            break;
-        case 'ArrowDown':
-            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 90 });
-            break;
-        case 'ArrowRight':
-            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow });
-            break;
-        case 'ArrowLeft':
-            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 180 });
-            break;
-        default:
-            if (props.value.length > 1)
-                wide = true;
-    }
+    // symbol and wide depend only on isMac and props.value, so we memoize them:
+    var _a = React.useMemo(function () {
+        var sym = props.value;
+        var isWide = false;
+        switch (props.value) {
+            case 'Ctrl':
+                if (isMac)
+                    sym = React.createElement(Icon, { url: SVG.Icons.Cmd });
+                else
+                    isWide = true;
+                break;
+            case 'ArrowUp':
+                sym = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: -90 });
+                break;
+            case 'ArrowDown':
+                sym = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 90 });
+                break;
+            case 'ArrowRight':
+                sym = React.createElement(Icon, { url: SVG.Icons.Arrow });
+                break;
+            case 'ArrowLeft':
+                sym = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 180 });
+                break;
+            default:
+                if (props.value.length > 1)
+                    isWide = true;
+        }
+        return { symbol: sym, wide: isWide };
+    }, [props.value, isMac]), symbol = _a.symbol, wide = _a.wide;
     return (React.createElement("span", { className: props.className, style: {
             maxWidth: wide ? 'auto' : '16px',
             minWidth: wide ? '36px' : 'auto'
-        } },
-        React.createElement(Inner, { style: { justifyContent: wide ? 'start' : 'center' } }, symbol)));
+        }, "aria-label": props.value },
+        React.createElement(Inner, { style: { justifyContent: wide ? 'flex-start' : 'center' } }, symbol)));
 };
 var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"])));
-var KeyStyled = styled(KeyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display:       inline-block;\n  color:         ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px 0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"], ["\n  display:       inline-block;\n  color:         ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px 0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"
+var KeyStyled = styled(KeyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display:       inline-block;\n  color:         ", ";\n  fill:          ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"], ["\n  display:       inline-block;\n  color:         ", ";\n  fill:          ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"
     /**
      * A `Key` displays a keyboard key. The value is the key description,
-     * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+     * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
      * is longer than 1 character, in which case the width becomes 36px.
      * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
      */
-])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.font.labelSmall; });
+])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.font.labelSmall; });
 /**
  * A `Key` displays a keyboard key. The value is the key description,
- * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+ * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
  * is longer than 1 character, in which case the width becomes 36px.
  * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
  */
 var Key = function (props) { return React.createElement(KeyStyled, __assign({}, props)); };
+Key.displayName = "Key";
 export { Key };
 var templateObject_1, templateObject_2;

package/controls/LinearChart/LinearChart.d.ts

@@ -27,5 +27,8 @@ interface IProps {
  * The `LinearChart` will fill all horizontal space available to it.
  * A percentage value and a text label are optional.
  */
-declare const LinearChart: ({ numbered, ...props }: IProps) => React.JSX.Element;
+declare const LinearChart: {
+    ({ numbered, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { LinearChart, IProps };

package/controls/LinearChart/LinearChart.js

@@ -28,12 +28,12 @@ import * as React from 'react';
 import styled from 'styled-components';
 var LinearChartBase = function (props) {
     var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
-    return (React.createElement("div", { className: props.className },
+    return (React.createElement("div", { className: props.className, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(props.value) },
         props.label && React.createElement(Label, null, props.label),
         props.numbered && React.createElement(Number, null, percentage),
         React.createElement(Bar, null)));
 };
-var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"], ["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"])));
+var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"], ["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n"])));
 var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"], ["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"])));
 var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"], ["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.animation.duration * 2; });
 var LinearChartStyled = styled(LinearChartBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
@@ -54,5 +54,6 @@ var LinearChart = function (_a) {
     var _b = _a.numbered, numbered = _b === void 0 ? false : _b, props = __rest(_a, ["numbered"]);
     return React.createElement(LinearChartStyled, __assign({ numbered: numbered }, props));
 };
+LinearChart.displayName = "LinearChart";
 export { LinearChart };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/ListView/ColumnsManager/ColumnsManager.js

@@ -51,7 +51,7 @@ var ColumnsManagerBase = function (props) {
                 React.createElement(Header, null, "Available columns"),
                 React.createElement(Header, null,
                     "Selected columns ",
-                    React.createElement(SecondaryButton, { icon: SVG.Icons.Reset, onClick: props.onReset })),
+                    React.createElement(SecondaryButton, { title: "Reset", icon: SVG.Icons.Reset, onClick: props.onReset })),
                 React.createElement(SourceColumns, { columns: props.columns, onChange: props.onChange }),
                 React.createElement(OrderColumns, { columns: props.columns, onChange: props.onChange, onReset: props.onReset })))));
 };

package/controls/ListView/ListView.d.ts

@@ -11,7 +11,8 @@ interface IProps extends IListViewProps {
     children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
 }
 declare const ListView: {
-    ({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, expanded, focusActive, ...props }: IProps): React.JSX.Element;
+    ({ data, dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, expanded, focusActive, ...props }: IProps): React.JSX.Element;
+    displayName: string;
     Column: {
         (_: IColumnProps): null;
         displayName: string;

package/controls/ListView/ListView.js

@@ -31,9 +31,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import { Column } from './Column';
-import { Table } from './Table';
-import { sortItems } from './sortItems';
-import { Ghost } from './Ghost';
+import { Table } from './elements/Table';
+import { sortItems } from './elements/sortItems';
+import { Ghost } from './elements/Ghost';
 var ListViewBase = function (props) {
     var _a, _b;
     var children = props.children, otherProps = __rest(props, ["children"]);
@@ -99,8 +99,9 @@ var ListViewBase = function (props) {
 };
 // Wrapper for default values:
 var ListView = function (_a) {
-    var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive"]);
-    return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded, focusActive: focusActive }, props));
+    var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.noheader, noheader = _d === void 0 ? false : _d, _e = _a.hover, hover = _e === void 0 ? false : _e, _f = _a.striped, striped = _f === void 0 ? false : _f, _g = _a.grid, grid = _g === void 0 ? false : _g, _h = _a.total, total = _h === void 0 ? false : _h, _j = _a.singular, singular = _j === void 0 ? "record" : _j, _k = _a.plural, plural = _k === void 0 ? "records" : _k, _l = _a.narrow, narrow = _l === void 0 ? false : _l, _m = _a.shadow, shadow = _m === void 0 ? false : _m, _o = _a.ghost, ghost = _o === void 0 ? false : _o, _p = _a.rowHeight, rowHeight = _p === void 0 ? 48 : _p, _q = _a.columnsEditable, columnsEditable = _q === void 0 ? false : _q, _r = _a.expanded, expanded = _r === void 0 ? false : _r, _s = _a.focusActive, focusActive = _s === void 0 ? false : _s, props = __rest(_a, ["data", "dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive"]);
+    return React.createElement(ListViewBase, __assign({ data: data, dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded, focusActive: focusActive }, props));
 };
+ListView.displayName = "ListView";
 ListView.Column = Column;
 export { ListView };

package/controls/ListView/NoData.d.ts

@@ -15,5 +15,8 @@ interface IProps {
      */
     dark?: boolean;
 }
-declare const NoData: (props: IProps) => React.JSX.Element;
+declare const NoData: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { NoData, IProps };

package/controls/ListView/NoData.js

@@ -26,5 +26,6 @@ var NoDataBase = function (props) {
 };
 var NoDataStyled = styled(NoDataBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 48px; /* Height of header row */\n  width: 100%;\n  z-index: 1;\n"], ["\n  position: absolute;\n  top: 48px; /* Height of header row */\n  width: 100%;\n  z-index: 1;\n"])));
 var NoData = function (props) { return React.createElement(NoDataStyled, __assign({}, props)); };
+NoData.displayName = "NoData";
 export { NoData };
 var templateObject_1;

package/controls/ListView/{Body.d.ts → elements/Body.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IListViewProps } from './IListViewProps';
-import { IColumnProps } from './Column';
+import { IListViewProps } from '../IListViewProps';
+import { IColumnProps } from '../Column';
 interface IProps extends IListViewProps {
     columns: IColumnProps[];
 }

package/controls/ListView/{Body.js → elements/Body.js}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Selector } from '../../inputs/Selector';
+import { Selector } from '../../../inputs/Selector';
 var Body = React.forwardRef(function (props, ref) {
     var getRows = function () {
         var trs = [];

package/controls/ListView/elements/Ghost.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { IListViewProps } from '../IListViewProps';
+import { IColumnProps } from '../Column';
+interface IProps extends IListViewProps {
+    className?: string;
+    columns: IColumnProps[];
+}
+declare const Ghost: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { Ghost };

package/controls/ListView/{Ghost.js → elements/Ghost.js}

@@ -16,16 +16,16 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import styled, { css, keyframes } from 'styled-components';
 var GhostBase = function (props) {
-    return (React.createElement("div", { className: props.className },
+    return React.createElement("div", { className: props.className },
         React.createElement("div", { className: "mask1" }),
         React.createElement("div", { className: "mask2" }),
         !props.noheader && props.onCheck && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }),
         !props.noheader && props.columns.filter(function (c) { return c.active; }).map(function (c, idx) { return React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": true, key: idx }); }),
-        !props.noheader && props.columnsEditable && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false })));
+        !props.noheader && props.columnsEditable && React.createElement(Cell, { "$dark": props.dark, "$shadow": props.shadow, "$content": false }));
 };
 var Pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    background-position-x: 0px;\n  }\n  100% {\n    background-position-x: 250px;\n  }\n"], ["\n  0% {\n    background-position-x: 0px;\n  }\n  100% {\n    background-position-x: 250px;\n  }\n"])));
 var Pulse2 = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    background-position-x: 125px;\n  }\n  50% {\n    background-position-x: 250px; \n  }\n  50.1% {\n    background-position-x: 0px; \n  }  \n  100% {\n    background-position-x: 125px;\n  }\n"], ["\n  0% {\n    background-position-x: 125px;\n  }\n  50% {\n    background-position-x: 250px; \n  }\n  50.1% {\n    background-position-x: 0px; \n  }  \n  100% {\n    background-position-x: 125px;\n  }\n"])));
-var Cell = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"], ["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"])), function (p) { return p.$dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.$dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.$dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[80]; }, function (p) { return p.$content ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width:14px"], ["width:14px"]))); }, function (p) { return p.$shadow && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "], ["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "]))); });
+var Cell = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"], ["\n  position: relative;\n  background-color: ", ";\n  border-bottom: solid 1px ", ";\n  z-index: 1;\n\n  &:after {\n    position: absolute;\n    content: '';\n    background: ", ";\n    left: 16px;\n    top: calc(50% - 7px);\n    height: 14px;\n    border-radius: 7px;\n    ", "\n  }\n\n  &:last-child:after {\n    right: 16px;\n  }\n  // Header shadow:\n  ", "  \n"])), function (p) { return p.$dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.$dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.$dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[80]; }, function (p) { return p.$content ? css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["right: 0;"], ["right: 0;"]))) : css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: 14px;"], ["width: 14px;"]))); }, function (p) { return p.$shadow && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "], ["\n    &:before {\n      position: absolute;\n      pointer-events: none;\n      content: '';\n      z-index: 1;\n      top: calc(100%);\n      left: 0;\n      right: 0;\n      height: 8px;\n      background: linear-gradient(rgba(0,0,0,0.1), transparent);\n    }\n  "]))); });
 var GhostStyled = styled(GhostBase).attrs(function (p) {
     return {
         fg: p.dark ? p.theme.colors.primary[1] : p.theme.colors.primary[1],
@@ -48,5 +48,6 @@ var GhostStyled = styled(GhostBase).attrs(function (p) {
         .join(" ");
 }, function (p) { return p.rowHeight; }, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight - 1; }, function (p) { return p.rowHeight; }, function (p) { return p.rowHeight * 2; }, Pulse, function (p) { return p.fg; }, function (p) { return p.bg; }, function (p) { return p.fg; }, function (p) { return p.rowHeight * 2 - 1; }, function (p) { return p.rowHeight * 2; }, Pulse2);
 var Ghost = function (props) { return React.createElement(GhostStyled, __assign({}, props)); };
+Ghost.displayName = "Ghost";
 export { Ghost };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/controls/ListView/{Header.d.ts → elements/Header.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IListViewProps } from './IListViewProps';
-import { IColumnProps } from './Column';
+import { IListViewProps } from '../IListViewProps';
+import { IColumnProps } from '../Column';
 interface IProps extends IListViewProps {
     columns: IColumnProps[];
     sort: string;

package/controls/ListView/{Header.js → elements/Header.js}

@@ -1,18 +1,7 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { HeaderCell } from './HeaderCell';
-import { Selector } from '../../inputs/Selector';
-import { SVG } from '../../svg';
+import { Selector } from '../../../inputs/Selector';
+import { SVG } from '../../../svg';
 import { HeaderButton } from './HeaderButton';
 var Header = function (props) {
     // Are ALL items checked?
@@ -25,7 +14,7 @@ var Header = function (props) {
             props.onCheck &&
                 React.createElement("th", null,
                     React.createElement(Selector, { indeterminate: indeterminate, checked: allChecked, onChange: function () { return props.onCheck(allChecked ? false : true); } })),
-            props.columns.map(function (col, index) { return React.createElement(HeaderCell, __assign({ key: index, column: col }, props)); }),
+            props.columns.map(function (col, index) { return React.createElement(HeaderCell, { key: index, column: col, sort: props.sort, reverse: props.reverse, dark: props.dark, onSortClick: props.onSortClick }); }),
             props.columnsEditable &&
                 React.createElement("th", null,
                     React.createElement(HeaderButton, { dark: props.dark, url: SVG.Icons.Columns, onClick: props.onOpenColumns })))));

package/controls/ListView/{HeaderButton.d.ts → elements/HeaderButton.d.ts}

@@ -1,8 +1,11 @@
 import * as React from 'react';
 interface IProps {
-    onClick: () => void;
+    /** Icon URL. */
     url: string;
+    /** Dark theme? */
     dark: boolean;
+    /** Fired when button is clicked. */
+    onClick: () => void;
 }
 declare const HeaderButton: (props: IProps) => React.JSX.Element;
 export { HeaderButton };

package/controls/ListView/{HeaderButton.js → elements/HeaderButton.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTheme } from 'styled-components';
-import { Icon } from '../Icon';
+import { Icon } from '../../Icon';
 var HeaderButton = function (props) {
     var theme = useTheme();
     return (React.createElement(Icon, { url: props.url, onClick: props.onClick, color: props.dark ? theme.colors.neutral[100] : theme.colors.neutral[10] }));

package/controls/ListView/{HeaderCell.d.ts → elements/HeaderCell.d.ts}

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { IColumnProps } from './Column';
-import { IListViewProps } from './IListViewProps';
-interface IProps extends IListViewProps {
+import { IColumnProps } from '../Column';
+interface IProps {
     /** @ignore */
     className?: string;
     /** Column properties */
     column: IColumnProps;
     sort: string;
     reverse: boolean;
+    dark?: boolean;
     /** Fired when column is clicked. */
     onSortClick: (column: IColumnProps) => void;
 }
@@ -16,5 +16,8 @@ interface IProps extends IListViewProps {
  * the column is sortable. In order to avoid creating many styled-components
  * classes, styling is mostly left to `Table`.
  */
-declare const HeaderCell: (props: IProps) => React.JSX.Element;
+declare const HeaderCell: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { HeaderCell };

package/controls/ListView/{HeaderCell.js → elements/HeaderCell.js}

@@ -25,13 +25,14 @@ var HeaderCellBase = function (props) {
             // Sortable column has pointer cursor:
             cursor: props.column.sort ? 'pointer' : 'auto'
         }, onClick: (props.column.sort && props.onSortClick) ? function () { return props.onSortClick(props.column); } : null },
-        React.createElement("div", { style: { width: '100%' } }, (_a = props.column.label) !== null && _a !== void 0 ? _a : props.column.name),
+        React.createElement(Label, null, (_a = props.column.label) !== null && _a !== void 0 ? _a : props.column.name),
         props.column.sort && React.createElement(SortButton, { dark: props.dark, active: sorted, 
             // If currently sorted, show sort direction.
             // If not currently sorted, show default sort direction.
             reverse: sorted ? props.reverse : props.column.reverse })));
 };
-var HeaderCellStyled = styled(HeaderCellBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &:hover {\n    ", " {\n      opacity: 1 !important;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"], ["\n  &:hover {\n    ", " {\n      opacity: 1 !important;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"
+var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var HeaderCellStyled = styled(HeaderCellBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &:hover {\n    ", " {\n      opacity: 1;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"], ["\n  &:hover {\n    ", " {\n      opacity: 1;  \n      path {\n        animation-duration: 1000ms;\n      }\n    }       \n  }\n"
     /**
      * `HeaderCell` wraps a <th>. It shows the column label, and a sort icon if
      * the column is sortable. In order to avoid creating many styled-components
@@ -44,5 +45,6 @@ var HeaderCellStyled = styled(HeaderCellBase)(templateObject_1 || (templateObjec
  * classes, styling is mostly left to `Table`.
  */
 var HeaderCell = function (props) { return React.createElement(HeaderCellStyled, __assign({}, props)); };
+HeaderCell.displayName = "HeaderCell";
 export { HeaderCell };
-var templateObject_1;
+var templateObject_1, templateObject_2;

package/controls/ListView/{SortButton.d.ts → elements/SortButton.d.ts}

@@ -12,5 +12,5 @@ interface IProps {
  * The SortButton displays a caret that rotates and lights up depending on
  * its active/reverse props.
  */
-declare const SortButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const SortButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IProps, IProps>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { SortButton };

package/controls/ListView/elements/SortButton.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+var SortButtonBase = function (props) {
+    return React.createElement("button", { type: "button", className: props.className, "aria-label": "Sort list" },
+        React.createElement("svg", { viewBox: "0 0 100 100" },
+            React.createElement("path", { className: "bottom", d: "M9.5,77.9h81c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2h-81c-4.3,0-8.1-3.3-8.1-7.2\r\n        v-6.1C1.4,81.2,5.2,77.9,9.5,77.9z" }),
+            React.createElement("path", { className: "middle", d: "M9.5,39.5h52.9c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2H9.5c-4.3,0-8.1-3.3-8.1-7.2\r\n        v-6.1C1.4,42.9,5.2,39.5,9.5,39.5z" }),
+            React.createElement("path", { className: "top", d: "M10,1.1h24.8c4.9,0,8.6,3.3,8.6,7.2v6.1c0,3.9-3.8,7.2-8.6,7.2H10c-4.9,0-8.6-3.3-8.6-7.2V8.4\r\n        C1.4,3.9,5.2,1.1,10,1.1z" })));
+};
+var SortIconAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"
+    /**
+     * The SortButton displays a caret that rotates and lights up depending on
+     * its active/reverse props.
+     */
+])));
+/**
+ * The SortButton displays a caret that rotates and lights up depending on
+ * its active/reverse props.
+ */
+var SortButton = styled(SortButtonBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position:\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent HeaderCell.\n      animation-duration: 0s;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"], ["\n  // Position:\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance:\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent HeaderCell.\n      animation-duration: 0s;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"])), function (p) { return p.reverse ? -1 : 1; }, function (p) { return p.active ? 1 : 0; }, function (p) { return p.dark ? p.theme.colors.primary[1] : p.theme.colors.neutral[10]; }, SortIconAnimation);
+SortButton.displayName = "SortButton";
+export { SortButton };
+var templateObject_1, templateObject_2;

package/controls/ListView/{Table.d.ts → elements/Table.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IListViewProps } from './IListViewProps';
-import { IColumnProps } from './Column';
+import { IListViewProps } from '../IListViewProps';
+import { IColumnProps } from '../Column';
 interface IProps extends IListViewProps {
     /** @ignore */
     className?: string;
@@ -14,5 +14,8 @@ interface IProps extends IListViewProps {
     onCloseColumns: () => void;
     onResetColumns: () => void;
 }
-declare const Table: (props: IProps) => React.JSX.Element;
+declare const Table: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Table };

package/controls/ListView/{Table.js → elements/Table.js}

@@ -30,11 +30,11 @@ import { usePopper } from 'react-popper';
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { Header } from './Header';
 import { Body } from './Body';
-import { darken } from '../../helper/darken';
+import { darken } from '../../../helper/darken';
 import { Total } from './Total';
-import { NoData } from './NoData';
-import { ColumnsManager } from './ColumnsManager/ColumnsManager';
-import { Anchor } from '../../containers/Anchor';
+import { NoData } from '../NoData';
+import { ColumnsManager } from '../ColumnsManager/ColumnsManager';
+import { Anchor } from '../../../containers/Anchor';
 var HEADER_HEIGHT = 48;
 var TableBase = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
@@ -132,5 +132,6 @@ var TableStyled = styled(TableBase)(templateObject_9 || (templateObject_9 = __ma
         .join(" ");
 }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    tr:hover td { background-color: ", "; }\n  "], ["\n    tr:hover td { background-color: ", "; }\n  "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    tr:nth-child(2n+2) td {\n      background-color: ", ";\n    }\n  "], ["\n    tr:nth-child(2n+2) td {\n      background-color: ", ";\n    }\n  "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { var _a; return (_a = p.activeColor) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    td:not(:last-child), th:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "], ["\n    td:not(:last-child), th:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    th:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    th:nth-last-child(2), td:nth-last-child(2) {\n      border-right: none;\n    }\n  "], ["\n    th:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    th:nth-last-child(2), td:nth-last-child(2) {\n      border-right: none;\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    grid-template-columns: 1fr;\n    tr th {\n      display: none;\n    }    \n    th, td:not(:last-child) {\n      &:after {\n        visibility: hidden;\n      }\n    }\n    td {\n      flex-direction: column;\n      align-items: start;\n      justify-content: center;\n    }\n    td span.label {\n      font: ", ";\n    }\n    td:last-child {\n      padding-right: 16px;\n    }\n  "], ["\n    grid-template-columns: 1fr;\n    tr th {\n      display: none;\n    }    \n    th, td:not(:last-child) {\n      &:after {\n        visibility: hidden;\n      }\n    }\n    td {\n      flex-direction: column;\n      align-items: start;\n      justify-content: center;\n    }\n    td span.label {\n      font: ", ";\n    }\n    td:last-child {\n      padding-right: 16px;\n    }\n  "])), function (p) { return p.theme.font.labelSmall; }); }, HEADER_HEIGHT);
 var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
+Table.displayName = "Table";
 export { Table };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/controls/ListView/{Total.d.ts → elements/Total.d.ts}

@@ -1,9 +1,13 @@
 import * as React from 'react';
 interface IProps {
+    /** @ignore */
     className?: string;
     value: number;
     singular?: React.ReactNode;
     plural?: React.ReactNode;
 }
-declare const Total: (props: IProps) => React.JSX.Element;
+declare const Total: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Total };

package/controls/ListView/{Total.js → elements/Total.js}

@@ -15,7 +15,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import styled from 'styled-components';
-import { Number } from '../../formatters/Number';
+import { Number } from '../../../formatters/Number';
 var TotalBase = function (props) {
     return React.createElement("div", { className: props.className },
         React.createElement(Number, { value: props.value, decimals: 0 }),
@@ -24,5 +24,6 @@ var TotalBase = function (props) {
 };
 var TotalStyled = styled(TotalBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  position: absolute;\n  z-index: 1;\n  left: 8px;\n  bottom: 8px;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none;\n\n  // Appearance:\n  font: ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  padding: 5px 8px;\n"], ["\n  // Position:\n  position: absolute;\n  z-index: 1;\n  left: 8px;\n  bottom: 8px;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none;\n\n  // Appearance:\n  font: ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  padding: 5px 8px;\n"])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; });
 var Total = function (props) { return React.createElement(TotalStyled, __assign({}, props)); };
+Total.displayName = "Total";
 export { Total };
 var templateObject_1;

package/controls/Mouse/Mouse.d.ts

@@ -31,8 +31,13 @@ interface IProps {
     size?: number;
 }
 /**
- * `Mouse` renders an SVG with a mouse image, optionally with its
- * `left`, `right` or `wheel` buttons pressed.
+ * `Mouse` Renders an SVG mouse shape with optional highlighting of the
+ * left, right, and wheel buttons.
+ *
+ * - `left`, `right`, `wheel`: Whether each button appears "pressed"
+ * - `color`: Main mouse fill color (defaults to theme neutral color)
+ * - `accent`: Fill color of the wheel (defaults to primary theme color)
+ * - `size`: Scales the mouse height in pixels
  */
-declare const Mouse: ({ left, right, wheel, ...props }: IProps) => React.JSX.Element;
+declare const Mouse: React.MemoExoticComponent<({ left, right, wheel, ...props }: IProps) => React.JSX.Element>;
 export { Mouse };