@longline/aqua-ui 1.0.275 → 1.0.277

package/controls/TabBar/Tab.js

@@ -33,13 +33,13 @@ var TabBase = React.forwardRef(function (props, ref) {
             props.onClick();
     };
     return (React.createElement("div", { className: props.className, role: "tab", "aria-selected": props.active, ref: ref, onClick: handleClick },
-        props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '6px', right: '5px', bottom: '6px', zIndex: 100 } }),
+        props.ghost && React.createElement(Ghost, { style: { position: 'absolute', left: '5px', top: '9px', right: '5px', bottom: '9px', zIndex: 100 } }),
         React.createElement(Content, null,
             props.children,
             props.badge !== undefined && React.createElement(Badge, null, props.badge))));
 });
-var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: table-cell;\n  vertical-align: middle;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"], ["\n  position: relative;\n  display: table-cell;\n  vertical-align: middle;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "], ["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "]))); });
-var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n"])));
+var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"], ["\n  position: relative;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "], ["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "]))); });
+var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n  height: 100%;\n"])));
 var Badge = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.labelSmall; });
 var Tab = React.forwardRef(function (_a, ref) {
     var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["ghost", "disabled"]);

package/controls/TabBar/TabBar.d.ts

@@ -39,6 +39,11 @@ interface ITabBarProps {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Alignment of tab items. One of `left`, `right` and `center`.
+     * @default left
+     */
+    align?: 'left' | 'right' | 'center';
 }
 /**
  * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
@@ -48,7 +53,7 @@ interface ITabBarProps {
  * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
  */
 declare const TabBar: {
-    ({ active, ghost, disabled, ...props }: ITabBarProps): React.JSX.Element;
+    ({ active, ghost, disabled, align, ...props }: ITabBarProps): React.JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
     displayName: string;
 };

package/controls/TabBar/TabBar.js

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Tab } from './Tab';
 import { Underliner } from './Underliner';
 var TabBarBase = function (props) {
@@ -200,13 +200,17 @@ var TabBarBase = function (props) {
                     tabWidth: props.tabWidth,
                     ghost: props.ghost,
                     disabled: props.disabled,
-                    onClick: function () { return handleTabClick(idx); }
+                    onClick: function () {
+                        if (child.props.onClick)
+                            child.props.onClick();
+                        handleTabClick(idx);
+                    }
                 });
             }),
-            React.createElement(Underliner, { disabled: props.disabled || props.ghost, ref: underlinerRef }))));
+            React.createElement(Underliner, { ghost: props.ghost, disabled: props.disabled || props.ghost, ref: underlinerRef }))));
 };
-var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n  box-sizing: border-box;\n  display: block;\n  border-bottom: solid 1px ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n  box-sizing: border-box;\n  display: block;\n  border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[80]; });
-var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n  }\n"
+var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position & size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n\n  // Content:\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  // Appearance:\n  border-bottom: solid 1px ", ";\n"], ["\n  // Position & size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n  height: 40px;\n\n  // Content:\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  flex-wrap: nowrap;\n  align-items: center;\n\n  // Appearance:\n  border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[80]; });
+var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n    ", "\n    ", "\n  }\n"], ["\n  position: relative;\n  display: block;\n  height: 40px;\n  min-height: 40px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n    ", "\n    ", "\n  }\n"
     /**
      * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
      * with an underliner under the active child. The `onClick(idx)` event is fired
@@ -214,7 +218,7 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
      *
      * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
      */
-])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; });
+])), Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; }, function (p) { return p.align === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["justify-content: end;"], ["justify-content: end;"]))); }, function (p) { return p.align === 'center' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: center;"], ["justify-content: center;"]))); });
 /**
  * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
  * with an underliner under the active child. The `onClick(idx)` event is fired
@@ -223,10 +227,10 @@ var TabBarStyled = styled(TabBarBase)(templateObject_2 || (templateObject_2 = __
  * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
  */
 var TabBar = function (_a) {
-    var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, props = __rest(_a, ["active", "ghost", "disabled"]);
-    return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled }, props));
+    var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, props = __rest(_a, ["active", "ghost", "disabled", "align"]);
+    return React.createElement(TabBarStyled, __assign({ active: active, ghost: ghost, disabled: disabled, align: align }, props));
 };
 TabBar.Tab = Tab;
 TabBar.displayName = "TabBar";
 export { TabBar };
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/TabBar/Underliner.d.ts

@@ -4,6 +4,8 @@ interface IUnderlinerProps {
     className?: string;
     /** Is TabBar disabled? */
     disabled?: boolean;
+    /** Is TabBar ghosted? */
+    ghost?: boolean;
 }
 declare const Underliner: React.ForwardRefExoticComponent<IUnderlinerProps & React.RefAttributes<HTMLDivElement>>;
 export { Underliner };

package/controls/TabBar/Underliner.js

@@ -21,7 +21,7 @@ var UnderlinerBase = React.forwardRef(function (props, ref) {
 /**
  * Underliner passes a reference to itself back to its parent.
  */
-var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; });
+var UnderlinerStyled = styled(UnderlinerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n  opacity: ", ";\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  top: 38px;\n  width: 0px;\n  height: 0px;\n  // Appearance:\n  border-top: solid 4px ", ";\n  box-sizing: border-box;\n  transition: transform ease .3s, width ease .3s;\n  opacity: ", ";\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[1]; }, function (p) { return p.ghost ? 0 : 1; });
 var Underliner = React.forwardRef(function (props, ref) {
     return React.createElement(UnderlinerStyled, __assign({ ref: ref }, props));
 });

package/controls/{FilterButton/FilterButton.d.ts → ToggleButton/ToggleButton.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IFilterButtonProps {
+interface IToggleButtonProps {
     /** @ignore */
     className?: string;
     /**
@@ -21,15 +21,18 @@ interface IFilterButtonProps {
      * @default false
      */
     open?: boolean;
+    /**
+     * Icon URL
+     */
+    url: string;
     /**
      * Fired when the button is clicked.
      */
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
- * 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.
+ * A `ToggleButton` indicates whether something is active.  It supports
+ * "depressed" and "highlighted" states to reflect UI status.
  */
-declare const FilterButton: React.ForwardRefExoticComponent<IFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { FilterButton, IFilterButtonProps };
+declare const ToggleButton: React.ForwardRefExoticComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { ToggleButton, IToggleButtonProps };

package/controls/{FilterButton/FilterButton.js → ToggleButton/ToggleButton.js}

@@ -27,32 +27,29 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
-import { SVG } from '../../svg';
-var FilterButtonBase = React.forwardRef(function (props, ref) {
+var ToggleButtonBase = React.forwardRef(function (props, ref) {
     return React.createElement("button", { className: props.className, ref: ref, type: "button", onClick: props.onClick, title: props.title, disabled: props.disabled, "aria-pressed": props.active, "aria-expanded": props.open, "aria-disabled": props.disabled },
-        React.createElement(Icon, { url: SVG.Icons.Filter }));
+        React.createElement(Icon, { url: props.url }));
 });
-var FilterButtonStyled = styled(FilterButtonBase).attrs(function (p) {
+var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {
     return {
         $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` 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.
+     * A `ToggleButton` indicates whether something is active.  It supports
+     * "depressed" and "highlighted" states to reflect UI status.
      */
 ])), 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` 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.
+ * A `ToggleButton` indicates whether something is active.  It supports
+ * "depressed" and "highlighted" states to reflect UI status.
  */
-var FilterButton = React.forwardRef(function (_a, ref) {
+var ToggleButton = 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));
+    return React.createElement(ToggleButtonStyled, __assign({ ref: ref, disabled: disabled, active: active }, props));
 });
-FilterButton.displayName = "FilterButton";
-export { FilterButton };
+ToggleButton.displayName = "FilterButton";
+export { ToggleButton };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/ToggleButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleButton';

package/controls/ToggleButton/index.js

@@ -0,0 +1 @@
+export * from './ToggleButton';

package/modules/Filter/Filter.js

@@ -28,9 +28,10 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
-import { FilterButton } from '../../controls/FilterButton';
+import { ToggleButton } from '../../controls/ToggleButton';
 import { GlassPane } from '../../containers/GlassPane';
 import { useOutsideClose } from '../../hooks/useOutsideClose';
+import { SVG } from '../../svg';
 var FilterBase = function (props) {
     var buttonRef = React.useRef(null);
     var paneRef = React.useRef(null);
@@ -60,7 +61,7 @@ var FilterBase = function (props) {
             update();
     };
     return (React.createElement("div", { className: props.className },
-        React.createElement(FilterButton, { ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),
+        React.createElement(ToggleButton, { url: SVG.Icons.Filter, ref: buttonRef, active: props.active, open: open, onClick: toggleOpen }),
         createPortal(React.createElement(Pane, __assign({ "$open": open, "$width": props.width, style: styles.popper }, attributes.popper, { ref: paneRef }), open && React.createElement(GlassPane, { padded: true, bordered: true }, props.children)), document.body)));
 };
 var Pane = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"], ["\n  display: ", ";\n  width: ", "px;\n  z-index: 2500;\n"

package/package.json

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

package/controls/FilterButton/index.d.ts

@@ -1 +0,0 @@
-export * from './FilterButton';

package/controls/FilterButton/index.js

@@ -1 +0,0 @@
-export * from './FilterButton';