@longline/aqua-ui 1.0.302 → 1.0.303

package/controls/TertiaryButton/TertiaryButton.d.ts

@@ -32,17 +32,42 @@ interface ITertiaryButtonProps {
     icon?: string | IIconProps;
 }
 /**
- * The `TertiaryButton` is connected to a specific area or component such as
- * an `InfoBox`. It renders as a `<button>` element.
+ * A lightweight button for contextual actions within components.
  *
- * The component's `children` are the button content. Any text will be
- * capitalized.
+ * Renders a `<button>` with uppercase text styling. Suited for secondary
+ * actions within cards, info boxes, or other contained areas.
  *
- * There is no support for icons (although the React children of the component
- * could force one in).
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic button
+ * <TertiaryButton onClick={handleClick}>Learn More</TertiaryButton>
+ *
+ * // Primary variant (themed color)
+ * <TertiaryButton primary onClick={handleAction}>Submit</TertiaryButton>
+ *
+ * // With icon
+ * <TertiaryButton icon={SVG.Icons.Arrow} onClick={handleNext}>Next</TertiaryButton>
+ *
+ * // Custom width
+ * <TertiaryButton minWidth="150px" onClick={handleClick}>Wide Button</TertiaryButton>
+ *
+ * // Disabled state
+ * <TertiaryButton disabled onClick={handleClick}>Unavailable</TertiaryButton>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `primary` | Use themed primary color instead of white |
+ * | `icon` | SVG path or `IIconProps` for leading icon |
+ * | `minWidth` | Minimum button width (default: "92px") |
+ * | `disabled` | Prevents interaction |
  */
 declare const TertiaryButton: {
     ({ disabled, minWidth, ...props }: ITertiaryButtonProps): React.JSX.Element;
     displayName: string;
 };
-export { TertiaryButton, ITertiaryButtonProps };
+export { TertiaryButton };
+export type { ITertiaryButtonProps };

package/controls/TertiaryButton/TertiaryButton.js

@@ -45,25 +45,73 @@ var TertiaryButtonBase = function (props) {
 };
 var TertiaryButtonStyled = styled(TertiaryButtonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 42px;\n  min-width: ", ";\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  gap: 6px;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"], [" \n  // Size:\n  height: 42px;\n  min-width: ", ";\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  border-radius: ", "px;\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border: none;\n  cursor: pointer;\n  text-transform: uppercase;\n  user-select: none;\n  outline: none;\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  gap: 6px;\n  \n  // Shadow:\n  box-shadow: ", ";\n  &:hover {\n    box-shadow: ", ";\n  }\n  &:active {\n    ", " \n  }\n\n  // Disabled:\n  ", "\n"
     /**
-     * The `TertiaryButton` is connected to a specific area or component such as
-     * an `InfoBox`. It renders as a `<button>` element.
+     * A lightweight button for contextual actions within components.
      *
-     * The component's `children` are the button content. Any text will be
-     * capitalized.
+     * Renders a `<button>` with uppercase text styling. Suited for secondary
+     * actions within cards, info boxes, or other contained areas.
      *
-     * There is no support for icons (although the React children of the component
-     * could force one in).
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic button
+     * <TertiaryButton onClick={handleClick}>Learn More</TertiaryButton>
+     *
+     * // Primary variant (themed color)
+     * <TertiaryButton primary onClick={handleAction}>Submit</TertiaryButton>
+     *
+     * // With icon
+     * <TertiaryButton icon={SVG.Icons.Arrow} onClick={handleNext}>Next</TertiaryButton>
+     *
+     * // Custom width
+     * <TertiaryButton minWidth="150px" onClick={handleClick}>Wide Button</TertiaryButton>
+     *
+     * // Disabled state
+     * <TertiaryButton disabled onClick={handleClick}>Unavailable</TertiaryButton>
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `primary` | Use themed primary color instead of white |
+     * | `icon` | SVG path or `IIconProps` for leading icon |
+     * | `minWidth` | Minimum button width (default: "92px") |
+     * | `disabled` | Prevents interaction |
      */
 ])), function (p) { return p.minWidth ? p.minWidth : "92px"; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.primary ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.primary ? p.theme.colors.primary[1] : p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.shadows.large; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background-color: ", ";\n      box-shadow: none;\n    "], ["\n      background-color: ", ";\n      box-shadow: none;\n    "])), p.primary ? p.theme.colors.primary[2] : p.theme.colors.neutral[95]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "], ["\n    background-color: ", ";\n    cursor: auto;\n    box-shadow: none;\n    pointer-events: none;\n  "])), p.theme.colors.neutral[50]); });
 /**
- * The `TertiaryButton` is connected to a specific area or component such as
- * an `InfoBox`. It renders as a `<button>` element.
+ * A lightweight button for contextual actions within components.
+ *
+ * Renders a `<button>` with uppercase text styling. Suited for secondary
+ * actions within cards, info boxes, or other contained areas.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic button
+ * <TertiaryButton onClick={handleClick}>Learn More</TertiaryButton>
+ *
+ * // Primary variant (themed color)
+ * <TertiaryButton primary onClick={handleAction}>Submit</TertiaryButton>
+ *
+ * // With icon
+ * <TertiaryButton icon={SVG.Icons.Arrow} onClick={handleNext}>Next</TertiaryButton>
+ *
+ * // Custom width
+ * <TertiaryButton minWidth="150px" onClick={handleClick}>Wide Button</TertiaryButton>
+ *
+ * // Disabled state
+ * <TertiaryButton disabled onClick={handleClick}>Unavailable</TertiaryButton>
+ * ```
  *
- * The component's `children` are the button content. Any text will be
- * capitalized.
+ * ## Props
  *
- * There is no support for icons (although the React children of the component
- * could force one in).
+ * | Prop | Description |
+ * |------|-------------|
+ * | `primary` | Use themed primary color instead of white |
+ * | `icon` | SVG path or `IIconProps` for leading icon |
+ * | `minWidth` | Minimum button width (default: "92px") |
+ * | `disabled` | Prevents interaction |
  */
 var TertiaryButton = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.minWidth, minWidth = _c === void 0 ? "92px" : _c, props = __rest(_a, ["disabled", "minWidth"]);

package/controls/TertiaryButton/index.d.ts

@@ -1 +1,2 @@
-export * from './TertiaryButton';
+export { TertiaryButton } from './TertiaryButton';
+export type { ITertiaryButtonProps } from './TertiaryButton';

package/controls/TertiaryButton/index.js

@@ -1 +1 @@
-export * from './TertiaryButton';
+export { TertiaryButton } from './TertiaryButton';

package/controls/ToggleButton/ToggleButton.d.ts

@@ -31,8 +31,41 @@ interface IToggleButtonProps {
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
- * A `ToggleButton` indicates whether something is active.  It supports
- * "depressed" and "highlighted" states to reflect UI status.
+ * An icon button that visually indicates on/off or active/inactive state.
+ *
+ * Supports two visual states: `active` (highlighted) and `open` (depressed).
+ * Useful for toolbar toggles, filters, or expandable controls.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic toggle
+ * <ToggleButton url={SVG.Icons.Filter} title="Filter" onClick={toggleFilter} />
+ *
+ * // Active state (highlighted)
+ * <ToggleButton url={SVG.Icons.Bold} title="Bold" active={isBold} onClick={toggleBold} />
+ *
+ * // Open state (depressed, e.g., for dropdowns)
+ * <ToggleButton url={SVG.Icons.Menu} title="Menu" open={menuOpen} onClick={toggleMenu} />
+ *
+ * // Disabled
+ * <ToggleButton url={SVG.Icons.Lock} title="Locked" disabled onClick={noop} />
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `url` | SVG icon path (required) |
+ * | `active` | Highlighted state (accent color) |
+ * | `open` | Depressed state (for expanded menus) |
+ * | `title` | Tooltip text |
+ * | `disabled` | Prevents interaction |
+ *
+ * ## Accessibility
+ *
+ * Uses `aria-pressed` for toggle state and `aria-expanded` for open state.
  */
 declare const ToggleButton: React.ForwardRefExoticComponent<IToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { ToggleButton, IToggleButtonProps };
+export { ToggleButton };
+export type { IToggleButtonProps };

package/controls/ToggleButton/ToggleButton.js

@@ -38,18 +38,82 @@ var ToggleButtonStyled = styled(ToggleButtonBase).attrs(function (p) {
     };
 })(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 `ToggleButton` indicates whether something is active.  It supports
-     * "depressed" and "highlighted" states to reflect UI status.
+     * An icon button that visually indicates on/off or active/inactive state.
+     *
+     * Supports two visual states: `active` (highlighted) and `open` (depressed).
+     * Useful for toolbar toggles, filters, or expandable controls.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic toggle
+     * <ToggleButton url={SVG.Icons.Filter} title="Filter" onClick={toggleFilter} />
+     *
+     * // Active state (highlighted)
+     * <ToggleButton url={SVG.Icons.Bold} title="Bold" active={isBold} onClick={toggleBold} />
+     *
+     * // Open state (depressed, e.g., for dropdowns)
+     * <ToggleButton url={SVG.Icons.Menu} title="Menu" open={menuOpen} onClick={toggleMenu} />
+     *
+     * // Disabled
+     * <ToggleButton url={SVG.Icons.Lock} title="Locked" disabled onClick={noop} />
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `url` | SVG icon path (required) |
+     * | `active` | Highlighted state (accent color) |
+     * | `open` | Depressed state (for expanded menus) |
+     * | `title` | Tooltip text |
+     * | `disabled` | Prevents interaction |
+     *
+     * ## Accessibility
+     *
+     * Uses `aria-pressed` for toggle state and `aria-expanded` for open state.
      */
 ])), 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 `ToggleButton` indicates whether something is active.  It supports
- * "depressed" and "highlighted" states to reflect UI status.
+ * An icon button that visually indicates on/off or active/inactive state.
+ *
+ * Supports two visual states: `active` (highlighted) and `open` (depressed).
+ * Useful for toolbar toggles, filters, or expandable controls.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic toggle
+ * <ToggleButton url={SVG.Icons.Filter} title="Filter" onClick={toggleFilter} />
+ *
+ * // Active state (highlighted)
+ * <ToggleButton url={SVG.Icons.Bold} title="Bold" active={isBold} onClick={toggleBold} />
+ *
+ * // Open state (depressed, e.g., for dropdowns)
+ * <ToggleButton url={SVG.Icons.Menu} title="Menu" open={menuOpen} onClick={toggleMenu} />
+ *
+ * // Disabled
+ * <ToggleButton url={SVG.Icons.Lock} title="Locked" disabled onClick={noop} />
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `url` | SVG icon path (required) |
+ * | `active` | Highlighted state (accent color) |
+ * | `open` | Depressed state (for expanded menus) |
+ * | `title` | Tooltip text |
+ * | `disabled` | Prevents interaction |
+ *
+ * ## Accessibility
+ *
+ * Uses `aria-pressed` for toggle state and `aria-expanded` for open state.
  */
 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(ToggleButtonStyled, __assign({ ref: ref, disabled: disabled, active: active }, props));
 });
-ToggleButton.displayName = "FilterButton";
+ToggleButton.displayName = "ToggleButton";
 export { ToggleButton };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/ToggleButton/index.d.ts

@@ -1 +1,2 @@
-export * from './ToggleButton';
+export { ToggleButton } from './ToggleButton';
+export type { IToggleButtonProps } from './ToggleButton';

package/controls/ToggleButton/index.js

@@ -1 +1 @@
-export * from './ToggleButton';
+export { ToggleButton } from './ToggleButton';

package/controls/View/View.d.ts

@@ -45,19 +45,33 @@ interface IViewProps {
     badge?: number;
 }
 /**
- * A `View` is used to display static (read-only) data. A `View` has a label,
- * and its children are its value. Optionally, a hint can be shown at the
- * bottom of the `View`. By default, a `View` ellipsizes its content to a
- * single line, and all views are the same height. A custom height can be set
- * with the `height` attribute, and a scrollbar will then be added to the
- * content.
+ * A read-only display field for showing labeled data.
+ *
+ * Displays a label with content below it. By default, content is ellipsized
+ * to one line. Set `height` to allow multi-line content with scrolling.
+ *
+ * ## Usage
  *
  * ```tsx
- * <View label="Email address">{email}</View>
+ * // Basic view
+ * <View label="Email">{user.email}</View>
+ *
+ * // With hint
+ * <View label="Status" hint="Last updated 2 hours ago">Active</View>
+ *
+ * // Scrollable content
+ * <View label="Description" height="100px">{longText}</View>
+ *
+ * // With badge count
+ * <View label="Messages" badge={5}>Inbox</View>
+ *
+ * // Loading state
+ * <View label="Name" ghost />
  * ```
  */
 declare const View: {
     ({ ghost, ...props }: IViewProps): React.JSX.Element;
     displayName: string;
 };
-export { View, IViewProps };
+export { View };
+export type { IViewProps };

package/controls/View/View.js

@@ -48,28 +48,54 @@ var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __make
 var BadgeWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: 4px;\n  align-items: center;\n"])));
 var Badge = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 12px;\n  width: 12px;\n  display: flex;\n  font-size: 8px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  background: ", ";\n"], ["\n  height: 12px;\n  width: 12px;\n  display: flex;\n  font-size: 8px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  background: ", ";\n"
     /**
-     * A `View` is used to display static (read-only) data. A `View` has a label,
-     * and its children are its value. Optionally, a hint can be shown at the
-     * bottom of the `View`. By default, a `View` ellipsizes its content to a
-     * single line, and all views are the same height. A custom height can be set
-     * with the `height` attribute, and a scrollbar will then be added to the
-     * content.
+     * A read-only display field for showing labeled data.
+     *
+     * Displays a label with content below it. By default, content is ellipsized
+     * to one line. Set `height` to allow multi-line content with scrolling.
+     *
+     * ## Usage
      *
      * ```tsx
-     * <View label="Email address">{email}</View>
+     * // Basic view
+     * <View label="Email">{user.email}</View>
+     *
+     * // With hint
+     * <View label="Status" hint="Last updated 2 hours ago">Active</View>
+     *
+     * // Scrollable content
+     * <View label="Description" height="100px">{longText}</View>
+     *
+     * // With badge count
+     * <View label="Messages" badge={5}>Inbox</View>
+     *
+     * // Loading state
+     * <View label="Name" ghost />
      * ```
      */
 ])), function (p) { return p.theme.colors.primary[2]; });
 /**
- * A `View` is used to display static (read-only) data. A `View` has a label,
- * and its children are its value. Optionally, a hint can be shown at the
- * bottom of the `View`. By default, a `View` ellipsizes its content to a
- * single line, and all views are the same height. A custom height can be set
- * with the `height` attribute, and a scrollbar will then be added to the
- * content.
+ * A read-only display field for showing labeled data.
+ *
+ * Displays a label with content below it. By default, content is ellipsized
+ * to one line. Set `height` to allow multi-line content with scrolling.
+ *
+ * ## Usage
  *
  * ```tsx
- * <View label="Email address">{email}</View>
+ * // Basic view
+ * <View label="Email">{user.email}</View>
+ *
+ * // With hint
+ * <View label="Status" hint="Last updated 2 hours ago">Active</View>
+ *
+ * // Scrollable content
+ * <View label="Description" height="100px">{longText}</View>
+ *
+ * // With badge count
+ * <View label="Messages" badge={5}>Inbox</View>
+ *
+ * // Loading state
+ * <View label="Name" ghost />
  * ```
  */
 var View = function (_a) {

package/controls/View/index.d.ts

@@ -1 +1,2 @@
-export * from './View';
+export { View } from './View';
+export type { IViewProps } from './View';

package/controls/View/index.js

@@ -1 +1 @@
-export * from './View';
+export { View } from './View';

package/inputs/Dropdown/Dropdown.d.ts

@@ -142,4 +142,5 @@ declare const Dropdown: {
         displayName: string;
     };
 };
-export { Dropdown, IDropdownProps };
+export { Dropdown };
+export type { IDropdownProps };

package/inputs/Dropdown/index.d.ts

@@ -1 +1,2 @@
-export { Dropdown, IDropdownProps } from './Dropdown';
+export { Dropdown } from './Dropdown';
+export type { IDropdownProps } from './Dropdown';

package/map/controls/CompassButton/CompassButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IMapButtonProps } from '../base/MapButton';
+import type { IMapButtonProps } from '../base/MapButton';
 interface ICompassButtonProps {
     /**
      * Should pitch be visualized why tilting the arrow along the z-axis,

package/map/controls/FullscreenButton/FullscreenButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IMapButtonProps } from '../base/MapButton';
+import type { IMapButtonProps } from '../base/MapButton';
 interface IFullscreenButtonProps {
     /**
      * (Optional) Container that should be made fullscreen. If omitted, this

package/map/controls/ZoomInButton/ZoomInButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IMapButtonProps } from '../base/MapButton';
+import type { IMapButtonProps } from '../base/MapButton';
 /**
  * The `ZoomInButton` zooms the map in when clicked.  It respects the min and
  * max zoom levels of the map.
@@ -19,4 +19,5 @@ declare const ZoomInButton: {
     ({ hint, ...props }: IMapButtonProps): React.JSX.Element;
     displayName: string;
 };
-export { ZoomInButton, IMapButtonProps };
+export { ZoomInButton };
+export type { IMapButtonProps };

package/map/controls/ZoomOutButton/ZoomOutButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IMapButtonProps } from '../base/MapButton';
+import type { IMapButtonProps } from '../base/MapButton';
 /**
  * The `ZoomInButton` zooms the map out when clicked.  It respects the min and
  * max zoom levels of the map.
@@ -19,4 +19,5 @@ declare const ZoomOutButton: {
     ({ hint, ...props }: IMapButtonProps): React.JSX.Element;
     displayName: string;
 };
-export { ZoomOutButton, IMapButtonProps };
+export { ZoomOutButton };
+export type { IMapButtonProps };

package/map/controls/base/MapButton/MapButton.d.ts

@@ -43,4 +43,5 @@ interface IProps {
  * which must be provided by its child.
  */
 declare const MapButton: ({ size, disabled, active, grouped, ...props }: IProps & IMapButtonProps) => React.JSX.Element;
-export { MapButton, IMapButtonProps, IProps };
+export { MapButton };
+export type { IMapButtonProps, IProps };

package/map/controls/base/MapButton/index.d.ts

@@ -1 +1,2 @@
-export { MapButton, IMapButtonProps } from './MapButton';
+export { MapButton } from './MapButton';
+export type { IMapButtonProps } from './MapButton';

package/package.json

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

package/services/Toast/IToastMessage.d.ts

@@ -1,10 +1,10 @@
-import { IToastProps } from "./IToastProps";
+import type { IToastProps } from "./IToastProps";
 /**
  * A ToastMessage is a message with a duration, displayed as a Toast in
  * a ToastContainer.
  */
 interface IToastMessage {
     message: React.ReactNode;
-    options: IToastProps;
+    options?: IToastProps;
 }
-export { IToastMessage };
+export type { IToastMessage };

package/services/Toast/IToastProps.d.ts

@@ -21,4 +21,4 @@ interface IToastProps {
      */
     actionLabel?: React.ReactNode;
 }
-export { IToastProps };
+export type { IToastProps };

package/services/Toast/Toast.d.ts

@@ -1,21 +1,59 @@
 import * as React from 'react';
-import { IToastProps } from './IToastProps';
+import type { IToastProps } from './IToastProps';
 interface IProps {
     /** @ignore */
     className?: string;
+    /**
+     * Message shown in the Toast. This can be a simple string or JSX.
+     */
     message: React.ReactNode;
+    /**
+     * Called when the Toast self-closes due to a timeout, or when the user
+     * dismisses the Toast.
+     */
     onClose: () => void;
 }
 /**
- * A `Toast` is generated through the `ToastProvider.toast` method.
+ * A brief notification message that appears temporarily to provide feedback to the user.
  *
- * ```jsx
- * const toastProvider = useToast();
- * toastProvider.toast("Hello", {
+ * Toasts are typically created through the `useToast` hook rather than being rendered directly.
+ * They automatically disappear after a configurable duration, or can be manually dismissed
+ * by the user if `dismissable` is enabled.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const { toast } = useToast();
+ *
+ * // Simple toast
+ * toast("Changes saved successfully");
+ *
+ * // Toast with options
+ * toast("File uploaded", {
  *   duration: 5000,
  *   dismissable: true
  * });
+ *
+ * // Toast with action button
+ * toast("Item deleted", {
+ *   action: () => undoDelete(),
+ *   actionLabel: "Undo"
+ * });
  * ```
+ *
+ * ## Toast Options
+ *
+ * | Option | Type | Default | Description |
+ * |--------|------|---------|-------------|
+ * | `duration` | `number` | `8000` | Auto-dismiss delay in ms. Set to `0` for persistent toast. |
+ * | `dismissable` | `boolean` | `false` | Show close button for manual dismissal |
+ * | `action` | `function` | - | Callback for action button click |
+ * | `actionLabel` | `ReactNode` | `"Action"` | Label for the action button |
+ *
+ * ## Animation
+ *
+ * Toasts fade in when appearing and fade out when dismissed or timed out.
+ * The animation duration is derived from the theme's animation settings.
  */
 declare const Toast: {
     ({ duration, dismissable, actionLabel, ...props }: IProps & IToastProps): React.JSX.Element;