@longline/aqua-ui 1.0.183 → 1.0.186

package/containers/Message/NoFilteredData.d.ts

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

package/containers/Message/NoFilteredData.js

@@ -6,4 +6,5 @@ var NoFilteredData = function (props) {
     return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "No records found. Your query may be too restrictive.",
         props.onClear && React.createElement(TertiaryButton, { onClick: props.onClear }, "CLEAR FILTER"));
 };
+NoFilteredData.displayName = "Message.NoFilteredData";
 export { NoFilteredData };

package/controls/Chip/Chip.d.ts

@@ -12,10 +12,10 @@ interface IProps {
      */
     disabled?: boolean;
     /**
-     * Triggered when the X button on the `Chip` is clicked, or when Delete is
-     * pressed while the `Chip` has focus.
+     * Triggered when the X button on the `Chip` is clicked, or when
+     * Delete/Backspace is pressed while the `Chip` has focus.
      */
-    onClick?: () => void;
+    onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
  * A set of `Chip` instances show consecutive user inputs and are individually
@@ -31,5 +31,8 @@ interface IProps {
  * is not a string but JSX. If `verticalAlign` is enabled, the Chip
  * content is no longer ellipsized.
  */
-declare const Chip: ({ disabled, ...props }: IProps) => React.JSX.Element;
+declare const Chip: {
+    ({ disabled, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Chip, IProps };

package/controls/Chip/Chip.js

@@ -29,23 +29,22 @@ import styled, { css } from 'styled-components';
 import { SVG } from '../../svg';
 var ChipBase = function (props) {
     var handleKeyDown = function (e) {
+        // A disable chip doesn't listen to the keyboard.
         if (props.disabled)
             return;
-        if (e.key == 'Delete') {
+        // Pressing Delete or Backspace fires the onClick event.
+        if (e.key == 'Delete' || e.key == 'Backspace') {
             e.stopPropagation();
-            if (props.onClick)
-                props.onClick();
+            props.onClick(e);
         }
     };
-    return (
-    // "".chip" class is used, in the CSS, to check whether the previous 
-    // sibling is also a Chip.
-    React.createElement("div", { className: "".concat(props.className, " chip"), tabIndex: 0, onKeyDown: handleKeyDown },
-        React.createElement("div", { tabIndex: -1 }, props.children),
-        React.createElement("svg", { onClick: props.onClick },
-            React.createElement("use", { xlinkHref: SVG.Icons.Cross }))));
+    return (React.createElement("div", { className: props.className, tabIndex: 0, onKeyDown: handleKeyDown, "aria-disabled": props.disabled },
+        React.createElement("span", { className: "inner", tabIndex: -1 }, props.children),
+        React.createElement("button", { type: "button", onClick: props.onClick, "aria-label": "Remove chip", disabled: props.disabled, "aria-disabled": props.disabled },
+            React.createElement("svg", null,
+                React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
 };
-var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  .chip + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  & > div {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > svg {\n    transition: fill ", "ms ease-in-out,\n                background-color ", "ms ease-in-out;\n    fill: ", ";\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    padding: 2px;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  .chip + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  & > div {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > svg {\n    transition: fill ", "ms ease-in-out,\n                background-color ", "ms ease-in-out;\n    fill: ", ";\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    padding: 2px;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
+var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
     /**
      * A set of `Chip` instances show consecutive user inputs and are individually
      * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
@@ -60,7 +59,7 @@ var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __make
      * is not a string but JSX. If `verticalAlign` is enabled, the Chip
      * content is no longer ellipsized.
      */
-])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > svg {\n      fill: ", ";\n    }\n  "], ["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }); });
+])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > button svg {\n      fill: ", ";\n    }\n  "], ["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > button svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }); });
 /**
  * A set of `Chip` instances show consecutive user inputs and are individually
  * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
@@ -79,5 +78,6 @@ var Chip = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
     return React.createElement(ChipStyled, __assign({ disabled: disabled }, props));
 };
+Chip.displayName = "Chip";
 export { Chip };
 var templateObject_1, templateObject_2;

package/controls/Dropzone/Dropzone.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
-interface IDropzoneProps {
+interface IProps {
     /** @ignore */
     className?: string;
-    /** @ignore */
-    children?: React.ReactNode;
     /**
      * If set, allows a file filter, e.g. `.xls,.xlsx`.
      * This does _not_ prevent the user to upload another kind of file.
@@ -15,21 +13,27 @@ interface IDropzoneProps {
      */
     onAddFiles: (files: File[]) => void;
     /**
-     * Optional translation override for Dropzone message.
+     * Optional translation override for Dropzone message. This can be JSX.
      */
     message?: React.ReactNode;
+    /**
+     * A `Dropzone` can be disabled and will not accept files.
+     */
+    disabled?: boolean;
 }
 /**
- * A `Dropzone` accepts files, either by dragging them into the zone or by clicking the
- * zone and selection files. Multiple files may be dragged or selected at the same
- * time. When files are selected, Dropzone fires `onAddFiles` with a `Files[]` argument.
+ * A `Dropzone` accepts files, either by dragging them into the zone or by
+ * clicking the dropzone and selecting files from a dialog box.  Multiple
+ * files may be dragged or selected at the same time. When files are selected,
+ * Dropzone fires `onAddFiles` with a `Files[]` argument.
  *
  * @example
  * <Dropzone
  *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
  * />
- *
- * @link https://henck.github.io/typeui/?path=/story/controls-dropzone--properties
  */
-declare const Dropzone: (props: IDropzoneProps) => React.JSX.Element;
+declare const Dropzone: {
+    ({ disabled, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Dropzone };

package/controls/Dropzone/Dropzone.js

@@ -1,30 +1,98 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
-// Other controls
-import { Dropbox } from './Dropbox';
+import styled, { css } from 'styled-components';
+import { SVG } from '../../svg';
+var DropzoneBase = function (props) {
+    var _a;
+    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
+    var inputElement = React.useRef(null);
+    var handleClick = function () {
+        inputElement.current.click();
+    };
+    var handleAddFile = function (e) {
+        props.onAddFiles(Array.from(e.target.files));
+    };
+    // DragOver and DragLeave add a hover effect.
+    var handleDragOver = function (e) {
+        // Limit event to files only:
+        if (!e.dataTransfer.types.includes("Files"))
+            return;
+        setHover(true);
+        e.preventDefault();
+    };
+    var handleDragLeave = function (e) {
+        setHover(false);
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        setHover(false);
+        props.onAddFiles(Array.from(e.dataTransfer.files));
+    };
+    return (React.createElement("button", { type: "button", className: "".concat(props.className, " ").concat(hover ? 'hover' : ''), onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleClick();
+            }
+        }, disabled: props.disabled, "aria-label": "File upload dropzone" },
+        React.createElement("div", { className: "message" }, (_a = props.message) !== null && _a !== void 0 ? _a : "Drop a file here to upload, or click to select."),
+        React.createElement("svg", { "aria-hidden": "true", focusable: "false" },
+            React.createElement("use", { xlinkHref: SVG.Other.CloudUpload })),
+        React.createElement("input", { ref: inputElement, type: "file", accept: props.accept, multiple: true, onChange: handleAddFile })));
+};
+var DropzoneStyled = styled(DropzoneBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: ", ";\n  width: 100%;\n  text-align: center;\n  background-color: transparent;\n  transition: \n    border-color ease-in-out 75ms, \n    background-color ease-in-out 75ms;\n\n  & > div.message {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n    transition: color ease-in-out 75ms;\n  }\n\n  & > svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n\n    transition: fill ease-in-out 75ms, transform ease-in-out 500ms;\n  }\n\n  ", "\n\n  & > input {\n    display: none;\n  }\n"], ["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: ", ";\n  width: 100%;\n  text-align: center;\n  background-color: transparent;\n  transition: \n    border-color ease-in-out 75ms, \n    background-color ease-in-out 75ms;\n\n  & > div.message {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n    transition: color ease-in-out 75ms;\n  }\n\n  & > svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n\n    transition: fill ease-in-out 75ms, transform ease-in-out 500ms;\n  }\n\n  ", "\n\n  & > input {\n    display: none;\n  }\n"
+    /**
+     * A `Dropzone` accepts files, either by dragging them into the zone or by
+     * clicking the dropzone and selecting files from a dialog box.  Multiple
+     * files may be dragged or selected at the same time. When files are selected,
+     * Dropzone fires `onAddFiles` with a `Files[]` argument.
+     *
+     * @example
+     * <Dropzone
+     *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
+     * />
+     */
+])), function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[2]; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.hover, &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      & > div.message {\n        color: ", ";\n      }\n      & > svg {\n        fill: ", ";\n        transform: translateY(-8px);\n      }\n    }\n  "], ["\n    &.hover, &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      & > div.message {\n        color: ", ";\n      }\n      & > svg {\n        fill: ", ";\n        transform: translateY(-8px);\n      }\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.neutral[100], p.theme.colors.neutral[100], p.theme.colors.primary[1]); });
 /**
- * A `Dropzone` accepts files, either by dragging them into the zone or by clicking the
- * zone and selection files. Multiple files may be dragged or selected at the same
- * time. When files are selected, Dropzone fires `onAddFiles` with a `Files[]` argument.
+ * A `Dropzone` accepts files, either by dragging them into the zone or by
+ * clicking the dropzone and selecting files from a dialog box.  Multiple
+ * files may be dragged or selected at the same time. When files are selected,
+ * Dropzone fires `onAddFiles` with a `Files[]` argument.
  *
  * @example
  * <Dropzone
  *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
  * />
- *
- * @link https://henck.github.io/typeui/?path=/story/controls-dropzone--properties
  */
-var Dropzone = function (props) {
-    var _a = React.useState(false), hover = _a[0], setHover = _a[1];
-    var handleAddFiles = function (files) {
-        props.onAddFiles(files);
-        setHover(false);
-    };
-    var handleDragOver = function () {
-        setHover(true);
-    };
-    var handleDragLeave = function () {
-        setHover(false);
-    };
-    return (React.createElement(Dropbox, { hover: hover, message: props.message, accept: props.accept, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
+var Dropzone = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
+    return React.createElement(DropzoneStyled, __assign({ disabled: disabled }, props));
 };
+// For React DevTools:
+Dropzone.displayName = "Dropzone";
 export { Dropzone };
+var templateObject_1, templateObject_2;

package/controls/Fab/Fab.d.ts

@@ -13,8 +13,7 @@ interface IProps {
      */
     icon: string | IIconProps;
     /**
-     * A disabled button cannot be interacted with. This is implemented using
-     * `pointer-events: none`.
+     * A disabled button cannot be interacted with.
      * @default false
      */
     disabled?: boolean;
@@ -49,10 +48,10 @@ interface IProps {
     /**
      * Fired when the button is clicked.
      */
-    onClick: (e?: React.MouseEvent) => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
- * Floating action buttons (FABs) help people take primary ations and are used
+ * Floating action buttons (FABs) help people take primary actions and are used
  * to represent the most important action on a screen. A FAB renders as a
  * `<button>` element.
  *
@@ -70,5 +69,8 @@ interface IProps {
  * * The FAB can be in a `disabled` state where it cannot be clicked.
  * * The FAB can be in an `active` state where it appears depressed.
  */
-declare const Fab: ({ disabled, positive, negative, active, ...props }: IProps) => React.JSX.Element;
+declare const Fab: {
+    ({ disabled, positive, negative, active, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Fab, IProps };

package/controls/Fab/Fab.js

@@ -28,28 +28,28 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 var FabBase = function (props) {
-    var handleClick = function (e) {
-        if (props.disabled)
-            return;
-        if (props.onClick)
-            props.onClick(e);
-    };
-    return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        typeof props.icon == "string" && React.createElement(Icon, { url: props.icon }),
-        typeof props.icon != "string" && React.createElement(Icon, __assign({}, props.icon)),
-        props.children));
+    return React.createElement("button", { type: "button", className: props.className, onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-disabled": props.disabled },
+        React.createElement(Icon, __assign({}, (typeof props.icon === 'string' ? { url: props.icon } : props.icon))),
+        props.children);
+};
+var getIconColor = function (p) {
+    if (p.disabled)
+        return p.theme.colors.primary[2];
+    if (p.positive)
+        return p.theme.colors.positive;
+    if (p.negative)
+        return p.theme.colors.negative;
+    if (p.color)
+        return p.color;
+    return p.theme.colors.primary[3];
 };
 var FabStyled = styled(FabBase).attrs(function (p) {
     return {
-        iconColor: p.disabled ? p.theme.colors.primary[2]
-            : p.positive ? p.theme.colors.positive
-                : p.negative ? p.theme.colors.negative
-                    : p.color ? p.color
-                        : p.theme.colors.primary[3]
+        $iconColor: getIconColor(p)
     };
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms, \n    color ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  ", "\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  gap: 12px;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms, \n    color ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  ", "\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  gap: 12px;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  ", "\n"
     /**
-     * Floating action buttons (FABs) help people take primary ations and are used
+     * Floating action buttons (FABs) help people take primary actions and are used
      * to represent the most important action on a screen. A FAB renders as a
      * `<button>` element.
      *
@@ -67,9 +67,9 @@ var FabStyled = styled(FabBase).attrs(function (p) {
      * * The FAB can be in a `disabled` state where it cannot be clicked.
      * * The FAB can be in an `active` state where it appears depressed.
      */
-])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return !p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "], ["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.large; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.iconColor; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "])), p.theme.colors.primary[4], p.theme.colors.accent, p.theme.colors.accent, p.theme.shadows.inner); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.neutral[50], p.theme.colors.primary[3]); });
+])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return !p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "], ["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.large; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$iconColor; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "])), p.theme.colors.primary[4], p.theme.colors.accent, p.theme.colors.accent, p.theme.shadows.inner); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: auto;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.neutral[50], p.theme.colors.primary[3]); });
 /**
- * Floating action buttons (FABs) help people take primary ations and are used
+ * Floating action buttons (FABs) help people take primary actions and are used
  * to represent the most important action on a screen. A FAB renders as a
  * `<button>` element.
  *
@@ -91,5 +91,6 @@ var Fab = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.positive, positive = _c === void 0 ? false : _c, _d = _a.negative, negative = _d === void 0 ? false : _d, _e = _a.active, active = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "positive", "negative", "active"]);
     return React.createElement(FabStyled, __assign({ disabled: disabled, positive: positive, negative: negative, active: active }, props));
 };
+Fab.displayName = "Fab";
 export { Fab };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/FilterButton/FilterButton.d.ts

@@ -3,8 +3,7 @@ interface IProps {
     /** @ignore */
     className?: string;
     /**
-     * A disabled button cannot be interacted with. This is implemented using
-     * `pointer-events: none`.
+     * A disabled button cannot be interacted with.
      * @default false
      */
     disabled?: boolean;
@@ -28,9 +27,9 @@ interface IProps {
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
- * A `FilterButton` is a button that can be in a depressed state, in order
- * to show that a filter is currently active. It should be combined with
- * a pane to select filter options.
+ * A `FilterButton` indicates whether a filter is active.  It supports
+ * "depressed" and "highlighted" states to reflect UI status. It should be
+ * combined with a pane to select filter options.
  */
 declare const FilterButton: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLButtonElement>>;
 export { FilterButton, IProps };

package/controls/FilterButton/FilterButton.js

@@ -29,35 +29,30 @@ import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
 import { SVG } from '../../svg';
 var FilterButtonBase = React.forwardRef(function (props, ref) {
-    var handleClick = function (e) {
-        if (props.disabled)
-            return;
-        if (props.onClick)
-            props.onClick(e);
-    };
-    return (React.createElement("button", { ref: ref, tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
-        React.createElement(Icon, { url: SVG.Icons.Filter })));
+    return React.createElement("button", { className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
+        React.createElement(Icon, { url: SVG.Icons.Filter }));
 });
 var FilterButtonStyled = styled(FilterButtonBase).attrs(function (p) {
     return {
-        iconColor: p.disabled ? p.theme.colors.primary[2]
+        $iconColor: p.disabled ? p.theme.colors.primary[2]
             : p.theme.colors.neutral[100]
     };
 })(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n  position: relative;\n  // Size:\n  height: 34px;\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", " !important;\n    box-shadow: ", ", ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  // Special open state overrides other states:\n  ", "  \n\n  ", "\n"], [" \n  position: relative;\n  // Size:\n  height: 34px;\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", " !important;\n    box-shadow: ", ", ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  // Special open state overrides other states:\n  ", "  \n\n  ", "\n"
     /**
-     * A `FilterButton` is a button that can be in a depressed state, in order
-     * to show that a filter is currently active. It should be combined with
-     * a pane to select filter options.
+     * A `FilterButton` indicates whether a filter is active.  It supports
+     * "depressed" and "highlighted" states to reflect UI status. It should be
+     * combined with a pane to select filter options.
      */
-])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.large; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return function (p) { return p.theme.shadows.inner; }; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.iconColor; }, function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    svg { fill: ", "; }\n  "], ["\n    background-color: ", ";\n    svg { fill: ", "; }\n  "])), p.theme.colors.accent, p.theme.colors.neutral[100]); }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", " !important;\n    box-shadow: ", ";\n    &:hover {\n      box-shadow: ", ";\n    }\n  "], ["\n    background-color: ", " !important;\n    box-shadow: ", ";\n    &:hover {\n      box-shadow: ", ";\n    }\n  "])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.shadows.inner; }, function (p) { return p.theme.shadows.inner; }); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.neutral[50], p.theme.colors.primary[3]); });
+])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.large; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.shadows.inner; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$iconColor; }, function (p) { return p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    svg { fill: ", "; }\n  "], ["\n    background-color: ", ";\n    svg { fill: ", "; }\n  "])), p.theme.colors.accent, p.theme.colors.neutral[100]); }, function (p) { return p.open && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", " !important;\n    box-shadow: ", ";\n    &:hover {\n      box-shadow: ", ";\n    }\n  "], ["\n    background-color: ", " !important;\n    box-shadow: ", ";\n    &:hover {\n      box-shadow: ", ";\n    }\n  "])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.shadows.inner; }, function (p) { return p.theme.shadows.inner; }); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: auto;\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.neutral[50], p.theme.colors.primary[3]); });
 /**
- * A `FilterButton` is a button that can be in a depressed state, in order
- * to show that a filter is currently active. It should be combined with
- * a pane to select filter options.
+ * A `FilterButton` indicates whether a filter is active.  It supports
+ * "depressed" and "highlighted" states to reflect UI status. It should be
+ * combined with a pane to select filter options.
  */
 var FilterButton = React.forwardRef(function (_a, ref) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.active, active = _c === void 0 ? false : _c, props = __rest(_a, ["disabled", "active"]);
     return React.createElement(FilterButtonStyled, __assign({ ref: ref, disabled: disabled, active: active }, props));
 });
+FilterButton.displayName = "FilterButton";
 export { FilterButton };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/Gradient/Gradient.d.ts

@@ -25,7 +25,13 @@ interface IProps {
     checkered?: boolean;
 }
 /**
- * A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
+ * A `Gradient` renders a horizontal color gradient bar.
+ * It accepts an array of `IGradientStop`, which defines colors and positions.
+ * Optional props control height, rounding, and transparency background
+ * visualization.
  */
-declare const Gradient: ({ thickness, checkered, ...props }: IProps) => React.JSX.Element;
+declare const Gradient: {
+    ({ thickness, checkered, ...props }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Gradient };

package/controls/Gradient/Gradient.js

@@ -25,21 +25,47 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 var GradientBase = function (props) {
+    // Runtime guard:
+    if (!Array.isArray(props.gradientStops) || props.gradientStops.length === 0) {
+        console.warn("Gradient: Missing or invalid 'gradientStops'");
+        return null;
+    }
     return React.createElement("div", { className: props.className });
 };
-var GradientStyled = styled(GradientBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  height: ", "px;\n  ", "\n  ", "\n  ", "\n"], ["\n  position: relative;\n  height: ", "px;\n  ", "\n  ", "\n  ", "\n"
+var generateGradient = function (stops) {
+    return "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");
+};
+var GradientStyled = styled(GradientBase).attrs(function (p) {
+    var _a;
+    var thickness = (_a = p.thickness) !== null && _a !== void 0 ? _a : 5;
+    var background = p.checkered
+        ? "".concat(generateGradient(p.gradientStops), ", repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 10px 10px")
+        : generateGradient(p.gradientStops);
+    return {
+        $background: background,
+        $borderRadius: p.rounded ? "".concat(thickness / 2, "px") : undefined,
+        $height: "".concat(thickness, "px"),
+    };
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  border-radius: ", ";\n  height: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  border-radius: ", ";\n  height: ", ";\n"
     /**
-     * A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
+     * A `Gradient` renders a horizontal color gradient bar.
+     * It accepts an array of `IGradientStop`, which defines colors and positions.
+     * Optional props control height, rounding, and transparency background
+     * visualization.
      */
-])), function (p) { return p.thickness; }, function (p) { return p.checkered && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: \n      linear-gradient(to right, ", "),\n      repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 10px 10px;\n  "], ["\n    background: \n      linear-gradient(to right, ", "),\n      repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 10px 10px;\n  "])), p.gradientStops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', ')); }, function (p) { return !p.checkered && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background: \n      linear-gradient(to right, ", ");\n  "], ["\n    background: \n      linear-gradient(to right, ", ");\n  "])), p.gradientStops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', ')); }, function (p) { return p.rounded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    border-radius: ", "px;\n  "], ["\n    border-radius: ", "px;\n  "])), p.thickness / 2); });
+])), function (p) { return p.$background; }, function (p) { return p.$borderRadius; }, function (p) { return p.$height; });
 /**
- * A `Gradient` draws a bar filled with a horizontal gradient, defined as an array of `IGradientStop`.
+ * A `Gradient` renders a horizontal color gradient bar.
+ * It accepts an array of `IGradientStop`, which defines colors and positions.
+ * Optional props control height, rounding, and transparency background
+ * visualization.
  */
 var Gradient = function (_a) {
     var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.checkered, checkered = _c === void 0 ? false : _c, props = __rest(_a, ["thickness", "checkered"]);
     return React.createElement(GradientStyled, __assign({ thickness: thickness, checkered: checkered }, props));
 };
+Gradient.displayName = "Gradient";
 export { Gradient };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1;

package/controls/Gradient/PresetGradients.d.ts

@@ -1,8 +1,15 @@
 import { IGradientStop } from "../../Types";
+/**
+ * PresetGradients contains predefined gradient stops for common colors.
+ */
 declare class PresetGradients {
-    static Green: IGradientStop[];
-    static Blue: IGradientStop[];
-    static Red: IGradientStop[];
-    static Rainbow: IGradientStop[];
+    /** Green gradient from light lime to dark teal */
+    static readonly Green: readonly IGradientStop[];
+    /** Blue gradient from pale cyan to deep navy */
+    static readonly Blue: readonly IGradientStop[];
+    /** Red gradient from dark maroon to bright red */
+    static readonly Red: readonly IGradientStop[];
+    /** Rainbow gradient from teal to yellow */
+    static readonly Rainbow: readonly IGradientStop[];
 }
 export { PresetGradients };

package/controls/Gradient/PresetGradients.js

@@ -1,6 +1,10 @@
+/**
+ * PresetGradients contains predefined gradient stops for common colors.
+ */
 var PresetGradients = /** @class */ (function () {
     function PresetGradients() {
     }
+    /** Green gradient from light lime to dark teal */
     PresetGradients.Green = [
         { pos: 0.00, color: '#cae170' },
         { pos: 0.25, color: '#7bca5d' },
@@ -8,6 +12,7 @@ var PresetGradients = /** @class */ (function () {
         { pos: 0.75, color: '#307c63' },
         { pos: 1.00, color: '#1a454f' },
     ];
+    /** Blue gradient from pale cyan to deep navy */
     PresetGradients.Blue = [
         { pos: 0.00, color: '#acf0f2' },
         { pos: 0.25, color: '#72bacc' },
@@ -15,6 +20,7 @@ var PresetGradients = /** @class */ (function () {
         { pos: 0.75, color: '#1a517e' },
         { pos: 1.00, color: '#002253' },
     ];
+    /** Red gradient from dark maroon to bright red */
     PresetGradients.Red = [
         { pos: 0.00, color: '#450003' },
         { pos: 0.25, color: '#6f111a' },
@@ -22,6 +28,7 @@ var PresetGradients = /** @class */ (function () {
         { pos: 0.75, color: '#cd3c3f' },
         { pos: 1.00, color: '#ff5252' },
     ];
+    /** Rainbow gradient from teal to yellow */
     PresetGradients.Rainbow = [
         { pos: 0.00, color: '#00796b' },
         { pos: 0.25, color: '#3993cb' },

package/controls/Icon/Icon.d.ts

@@ -67,10 +67,10 @@ interface IIconProps {
 }
 declare const IconBase: (props: IIconProps) => React.JSX.Element;
 interface IStyledProps {
-    realSize?: string;
-    color?: string;
+    $realSize: string;
+    $color: string;
 }
-declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<IIconProps, IIconProps>, IStyledProps>, IIconProps>> & string & Omit<(props: IIconProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<IIconProps, IIconProps>, IIconProps & Partial<IStyledProps>>, IIconProps>> & string & Omit<(props: IIconProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 /**
  * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
  * with an URL of the form `spritesheet.svg#my-icon`.
@@ -94,5 +94,8 @@ declare const IconStyled: import("styled-components/dist/types").IStyledComponen
  * For exact sizing, `size` also accepts a size in pixels. An icon is always
  * square.
  */
-declare const Icon: ({ size, disabled, flipped, mirrored, animated, padded, circle, ...props }: IIconProps) => React.JSX.Element;
+declare const Icon: {
+    ({ size, disabled, flipped, mirrored, animated, padded, circle, ...props }: IIconProps): React.JSX.Element;
+    displayName: string;
+};
 export { IconBase, Icon, IconStyled, IIconProps };