@longline/aqua-ui 1.0.10 → 1.0.11

package/Types.d.ts

@@ -0,0 +1,6 @@
+/**
+ *  Certain attributes are applicable to several controls. These are
+ *  typed in this file.
+ */
+type Size = 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive';
+export { Size };

package/Types.js

@@ -0,0 +1,5 @@
+/**
+ *  Certain attributes are applicable to several controls. These are
+ *  typed in this file.
+ */
+export {};

package/containers/Anchor/Anchor.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Content to place by `Anchor`.
+     */
+    children?: React.ReactNode;
+    /**
+     * If set, then positioning is determined to this element's nearest
+     * **scrolling** parent. If not set, positioning is relative to the
+     * viewport.
+     * @default false
+     */
+    relativeToParent?: boolean;
+    /**
+     * Overrides the horizontal positioning to force it `left` or `right`.
+     * @default none
+     */
+    horizontal?: 'none' | 'left' | 'right';
+    /**
+     * Overrides the vertical positioning to force it `up` or `down`.
+     * @default none
+     */
+    vertical?: 'none' | 'up' | 'down';
+    /**
+     * Anchor left position in parent.
+     * @default auto
+     */
+    left?: string;
+    /**
+     * Anchor top position in parent.
+     * @default auto
+     */
+    top?: string;
+    /**
+     * Anchor bottom position in parent.
+     * @default auto
+     */
+    bottom?: string;
+    /**
+     * Anchor right position in parent.
+     * @default auto
+     */
+    right?: string;
+    /**
+     * If set, `Anchor` will update its position when the page is scrolled.
+     * @default false
+     */
+    adapt?: boolean;
+}
+/**
+ * Often, a panel must open somewhere when a button or icon is clicked. This panel
+ * opens near the button/icon, but it may fall outside the viewports bounds, depending
+ * on the current scroll position. An `Anchor` wraps such a panel, and ensures that
+ * the panel opens up, down, left or right of the anchor position depending on the
+ * scroll position, ensuring that the panel is inside the viewport.
+ *
+ * By default, positioning happens only once (when the anchor mounts), but with
+ * the `adapt` prop, positioning happens whenever the page is scrolled.
+ */
+declare const Anchor: (props: IProps) => React.JSX.Element;
+export { Anchor };

package/containers/Anchor/Anchor.js

@@ -0,0 +1,113 @@
+import * as React from 'react';
+/**
+ * Often, a panel must open somewhere when a button or icon is clicked. This panel
+ * opens near the button/icon, but it may fall outside the viewports bounds, depending
+ * on the current scroll position. An `Anchor` wraps such a panel, and ensures that
+ * the panel opens up, down, left or right of the anchor position depending on the
+ * scroll position, ensuring that the panel is inside the viewport.
+ *
+ * By default, positioning happens only once (when the anchor mounts), but with
+ * the `adapt` prop, positioning happens whenever the page is scrolled.
+ */
+var Anchor = function (props) {
+    var _a, _b, _c, _d;
+    var anchorRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var findScrollingParentRecursive = function (node) {
+        var overflowY = window.getComputedStyle(node).overflowY;
+        if (overflowY == 'scroll' || overflowY == 'auto')
+            return node;
+        if (node.parentElement)
+            return findScrollingParentRecursive(node.parentElement);
+        return null;
+    };
+    // Return my nearest parent that's scrolling (frames are not supported). If
+    // no parent is found, null is returned.
+    var findScrollingParent = function () {
+        return findScrollingParentRecursive(anchorRef.current.parentElement);
+    };
+    // Returns true if this control is in the lower half of its scrolling parent.
+    // (if direction == parent), or in the lower half of the viewport if no 
+    // scrolling parent is found.
+    var isInLowerViewport = function () {
+        var scrollingParent = findScrollingParent();
+        if (scrollingParent == null || props.relativeToParent) {
+            return anchorRef.current.getBoundingClientRect().top > window.innerHeight / 2;
+        }
+        else {
+            var myY = anchorRef.current.getBoundingClientRect().top;
+            var containerY = scrollingParent.getBoundingClientRect().top;
+            var containerHeight = scrollingParent.getBoundingClientRect().height;
+            var offset = myY - containerY;
+            return offset > containerHeight / 2;
+        }
+    };
+    // Returns true if this control is in the right half of its scrolling parent.
+    // (if direction == parent), or in the right half of the viewport if no 
+    // scrolling parent is found.  
+    var isInRightViewport = function () {
+        var scrollingParent = findScrollingParent();
+        if (scrollingParent == null || props.relativeToParent) {
+            return anchorRef.current.getBoundingClientRect().left > window.innerWidth / 2;
+        }
+        else {
+            var myX = anchorRef.current.getBoundingClientRect().left;
+            var containerX = scrollingParent.getBoundingClientRect().left;
+            var containerWidth = scrollingParent.getBoundingClientRect().width;
+            var offset = myX - containerX;
+            return offset > containerWidth / 2;
+        }
+    };
+    var updatePosition = function () {
+        if (contentRef.current == null)
+            return;
+        // Calculate size of content:
+        var width = contentRef.current.getBoundingClientRect().width;
+        var height = contentRef.current.getBoundingClientRect().height;
+        contentRef.current.style.visibility = 'visible';
+        if (props.horizontal === 'left') {
+            contentRef.current.style.left = "-".concat(width, "px");
+        }
+        else if (props.horizontal === 'right') {
+            contentRef.current.style.left = '0px';
+        }
+        else {
+            contentRef.current.style.left = isInRightViewport() ? "-".concat(width, "px") : '0px';
+        }
+        if (props.vertical === 'up') {
+            contentRef.current.style.top = "-".concat(height, "px");
+        }
+        else if (props.vertical === 'down') {
+            contentRef.current.style.top = '0px';
+        }
+        else {
+            contentRef.current.style.top = isInLowerViewport() ? "-".concat(height, "px") : '0px';
+        }
+    };
+    React.useEffect(function () {
+        document.addEventListener('scroll', handleScroll);
+        return function () {
+            document.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    // We always listen to the scroll event. However, we only update the anchor
+    // position on scroll when adapt=true.
+    var handleScroll = function () {
+        if (props.adapt) {
+            updatePosition();
+        }
+    };
+    // Set element position on mount, or when alignment changes.
+    React.useEffect(function () {
+        updatePosition();
+    }, [props.horizontal, props.vertical]);
+    return (React.createElement("div", { ref: anchorRef, style: {
+            position: 'absolute',
+            left: (_a = props.left) !== null && _a !== void 0 ? _a : 'auto',
+            top: (_b = props.top) !== null && _b !== void 0 ? _b : 'auto',
+            bottom: (_c = props.bottom) !== null && _c !== void 0 ? _c : 'auto',
+            right: (_d = props.right) !== null && _d !== void 0 ? _d : 'auto',
+        } },
+        React.createElement("div", { ref: contentRef, style: { position: 'absolute', visibility: 'hidden', transition: 'top 250ms ease, left 250ms ease' } }, props.children)));
+};
+export { Anchor };

package/containers/Anchor/index.d.ts

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

package/containers/Anchor/index.js

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

package/containers/Dock/Dock.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Children are one or more `Dockable`. */
+    children?: React.ReactNode;
+    /**
+     * If set, draw a border around the Dock.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Dock offset from top of map, in pixels.
+     * @default 20
+     */
+    top?: number;
+    /**
+     * Dock offset from bottom of map, in pixels.
+     * @default 20
+     */
+    bottom?: number;
+    /**
+     * Dock offset from right side of map, in pixels.
+     * @default 20
+     */
+    right?: number;
+    /**
+     * Gap between items, in pixels.
+     * @default 16
+     */
+    gap?: number;
+}
+/**
+ * A `Dock` is a place where `Dockable` components live. Dockables have a lat/lng location on
+ * the map. When they go out of view, they move to the `Dock`.
+ *
+ * A `Dock` aligns to the right of the map is as wide as the entire map.  It is up to
+ * the `Dockable` to set its width. A `Dock` can have offsets from the top, right, and bottom
+ * of the map.
+ *
+ * When docked, Dockables are placed in a vertical flexbox. When undocked, Dockables use
+ * absolute positioning on the map and do not stick to the Dock.
+ */
+declare const Dock: ({ bordered, top, bottom, right, gap, ...props }: IProps) => React.JSX.Element;
+export { Dock };

package/containers/Dock/Dock.js

@@ -0,0 +1,61 @@
+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';
+import styled, { css } from 'styled-components';
+var DockBase = function (props) {
+    return (React.createElement("div", { className: props.className }, props.children));
+};
+var DockStyled = styled(DockBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"], ["\n  // Position and size:\n  position: absolute;\n  left: 0;\n  right: ", "px;\n  top: ", "px;\n  bottom: ", "px;\n  box-sizing: border-box;\n  // zIndex >= 2 will overlap Mapbox logo.\n  z-index: 2;\n\n  // Appearance:\n  background-color: transparent;\n  ", "\n  pointer-events: none !important; /* Map will set pointer-events:all to its children. */\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  gap: ", "px;\n"
+    /**
+     * A `Dock` is a place where `Dockable` components live. Dockables have a lat/lng location on
+     * the map. When they go out of view, they move to the `Dock`.
+     *
+     * A `Dock` aligns to the right of the map is as wide as the entire map.  It is up to
+     * the `Dockable` to set its width. A `Dock` can have offsets from the top, right, and bottom
+     * of the map.
+     *
+     * When docked, Dockables are placed in a vertical flexbox. When undocked, Dockables use
+     * absolute positioning on the map and do not stick to the Dock.
+     */
+])), function (p) { return p.right; }, function (p) { return p.top; }, function (p) { return p.bottom; }, function (p) { return p.bordered && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["border: dashed 1px white;"], ["border: dashed 1px white;"]))); }, function (p) { return p.gap; });
+/**
+ * A `Dock` is a place where `Dockable` components live. Dockables have a lat/lng location on
+ * the map. When they go out of view, they move to the `Dock`.
+ *
+ * A `Dock` aligns to the right of the map is as wide as the entire map.  It is up to
+ * the `Dockable` to set its width. A `Dock` can have offsets from the top, right, and bottom
+ * of the map.
+ *
+ * When docked, Dockables are placed in a vertical flexbox. When undocked, Dockables use
+ * absolute positioning on the map and do not stick to the Dock.
+ */
+var Dock = function (_a) {
+    var _b = _a.bordered, bordered = _b === void 0 ? false : _b, _c = _a.top, top = _c === void 0 ? 8 : _c, _d = _a.bottom, bottom = _d === void 0 ? 8 : _d, _e = _a.right, right = _e === void 0 ? 8 : _e, _f = _a.gap, gap = _f === void 0 ? 16 : _f, props = __rest(_a, ["bordered", "top", "bottom", "right", "gap"]);
+    return React.createElement(DockStyled, __assign({ bordered: bordered, top: top, bottom: bottom, right: right, gap: gap }, props));
+};
+export { Dock };
+var templateObject_1, templateObject_2;

package/containers/Dock/Dockable.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+interface IDockableProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Dockable's latitude.
+     * @default 0
+     */
+    latitude?: number;
+    /**
+     * Dockable's longitude.
+     * @default 0
+     */
+    longitude?: number;
+    /**
+     * Dockable's x-offset from lat,lng position, while floating.
+     * @default 0
+     */
+    offsetX?: number;
+    /**
+     * Dockable's y-offset from lat,lng position, while floating.
+     * @default 0
+     */
+    offsetY?: number;
+    /**
+     * Optional custom z-index in order to stack overlapping Dockables.
+     * @default 1
+     */
+    zIndex?: number;
+    /**
+     * Dockables ordinarily are placed to the right of their map coordinate.
+     * If `swappable` is `horizontal`, they'll move to the left if they're too close to the right
+     * edge of the map. If `vertical`, they'll move to the top if they're too close to the top
+     * edge of the map.
+     * @default 'none'
+     */
+    swappable?: 'none' | 'horizontal' | 'vertical' | 'both';
+    /**
+     * Force docking; don't allow Dockable to float.
+     * @default false
+     */
+    alwaysDocked?: boolean;
+    /**
+     * It set, `Dockable` will flex in `Dock`. If a number is specified,
+     * then that's the max vertical height in pixels.
+     * @default false
+     */
+    fill?: boolean | number;
+}
+/**
+ * A `Dockable` is fixed to a lat/lng on the `Map`. It must be a child of `Dock`. When a Dockable
+ * is outside of the current map viewport, it moves to the `Dock`. If `alwaysDocked` is set,
+ * then the `Dockable` is always in the `Dock`.
+ *
+ * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
+ */
+declare const Dockable: ({ longitude, latitude, offsetX, offsetY, swappable, alwaysDocked, zIndex, ...props }: IDockableProps) => React.JSX.Element;
+export { Dockable, IDockableProps };

package/containers/Dock/Dockable.js

@@ -0,0 +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';
+import { useMap } from 'react-map-gl';
+import styled, { css } from 'styled-components';
+import { useViewState } from '../../map/Map';
+var DockableBase = function (props) {
+    // Reference to Dockable div:
+    var containerRef = React.useRef(null);
+    // Using the ViewState will cause this component to be rerendered when the 
+    // map moves:
+    useViewState();
+    // Get size of map:
+    var map = useMap();
+    var mapWidth = map.current.getContainer().clientWidth;
+    var mapHeight = map.current.getContainer().clientHeight;
+    // Convert Dockable's lat/lng to pixel coordinates:
+    var _a = map.current.project([props.longitude, props.latitude]), x = _a.x, y = _a.y;
+    // Get size of Dockable:
+    var myWidth = containerRef.current ? containerRef.current.clientWidth : 0;
+    var myHeight = containerRef.current ? containerRef.current.clientHeight : 0;
+    // Is Dockable currently offscreen (boolean)?
+    var offsetX = props.offsetX;
+    var offsetY = props.offsetY;
+    var offscreen = x + offsetX < 0
+        || y + offsetY < 0
+        || x + offsetX + myWidth + (props.swappable ? -myWidth - offsetX * 2 : 0) > mapWidth
+        || y + offsetY + myHeight > mapHeight;
+    var rightHalf = x > mapWidth / 2;
+    var bottomHalf = y > mapHeight / 2; // TODO: Future use for vertical swappable.
+    // A local style object is used rather than styled-components, because the 
+    // style changes constantly and would produce too many styled-components
+    // classes.
+    var style = {
+        // Offscreen Dockables are relatively-positioned, so that they stay in the Dock.
+        // Onscreen Dockables are absolutely-positioned.
+        position: offscreen ? 'relative' : 'absolute',
+        pointerEvents: offscreen ? 'all' : 'none'
+    };
+    // Floating dockables get a position:
+    if (!offscreen && !props.alwaysDocked) {
+        if (props.swappable == 'horizontal' || props.swappable == 'both') {
+            style.marginLeft = props.swappable ? (rightHalf ? -myWidth - offsetX * 2 : 0) + "px" : 0;
+        }
+        if (props.swappable == 'vertical' || props.swappable == 'both') {
+            style.marginTop = props.swappable ? (bottomHalf ? -myHeight - offsetY * 2 : 0) + "px" : 0;
+        }
+        style.left = "".concat(x + offsetX, "px");
+        style.top = "".concat(y + offsetY, "px");
+    }
+    return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: containerRef }, props.children));
+};
+var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: white;\n  z-index: ", ";\n  ", "\n"], ["\n  color: white;\n  z-index: ", ";\n  ", "\n"
+    /**
+     * A `Dockable` is fixed to a lat/lng on the `Map`. It must be a child of `Dock`. When a Dockable
+     * is outside of the current map viewport, it moves to the `Dock`. If `alwaysDocked` is set,
+     * then the `Dockable` is always in the `Dock`.
+     *
+     * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
+     */
+])), function (p) { return p.zIndex; }, function (p) { return p.fill && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: flex;\n    ", "\n    ", "\n  "], ["\n    display: flex;\n    ", "\n    ", "\n  "])), p.fill === true && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))), p.fill && p.fill !== true && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["height: ", "px;"], ["height: ", "px;"])), p.fill)); });
+/**
+ * A `Dockable` is fixed to a lat/lng on the `Map`. It must be a child of `Dock`. When a Dockable
+ * is outside of the current map viewport, it moves to the `Dock`. If `alwaysDocked` is set,
+ * then the `Dockable` is always in the `Dock`.
+ *
+ * When a `Dockable` is out of the viewport, it gains the `.offscreen` CSS class.
+ */
+var Dockable = function (_a) {
+    var _b = _a.longitude, longitude = _b === void 0 ? 0 : _b, _c = _a.latitude, latitude = _c === void 0 ? 0 : _c, _d = _a.offsetX, offsetX = _d === void 0 ? 0 : _d, _e = _a.offsetY, offsetY = _e === void 0 ? 0 : _e, _f = _a.swappable, swappable = _f === void 0 ? 'none' : _f, _g = _a.alwaysDocked, alwaysDocked = _g === void 0 ? false : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 0 : _h, props = __rest(_a, ["longitude", "latitude", "offsetX", "offsetY", "swappable", "alwaysDocked", "zIndex"]);
+    return React.createElement(DockableStyled, __assign({ longitude: longitude, latitude: latitude, offsetX: offsetX, offsetY: offsetY, swappable: swappable, alwaysDocked: alwaysDocked, zIndex: zIndex }, props));
+};
+export { Dockable };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/Dock/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Dockable';
+export * from './Dock';

package/containers/Dock/index.js

@@ -0,0 +1,2 @@
+export * from './Dockable';
+export * from './Dock';

package/containers/Form/Field.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { IValidationProps } from './Validation';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Field name. Required.  */
+    name: string;
+    /** Field value. Required. */
+    value: any;
+    /** Control to show in field. */
+    control: React.ReactNode;
+    /**
+     * Relative weight of field. If not set, field will not flex to fill
+     * available width.
+     */
+    weight?: number;
+    /**
+     * Label to show by field. Can be JSX.
+     */
+    label?: React.ReactNode;
+    /**
+     * Disabled is passed on to control. Disabled fields cannot be interacted
+     * with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional hint to be shown when there is no error. Can be JSX.
+     */
+    hint?: React.ReactNode;
+    /**
+     * If true, a change to this field forces the whole form to update.
+     * @default false
+     */
+    forceupdate?: boolean;
+    /**
+     * If true, display an asterisk for required fields.
+     */
+    asterisk?: boolean;
+    /**
+     * If true, apply ghost state to Field and the control in it.
+     */
+    ghost?: boolean;
+    /**
+     * If unset, this Field is rendered without any embellishments: no label,
+     * no hint, no wrapper. This is useful for controls that must behave like
+     * a Field (i.e. work with a Form to get their `value` and `onChange` set),
+     * but mustn't look like one.
+     *
+     * If set to `simple` then the field shows a label, hint and error.
+     *
+     * If set to `box` then the field has a boxed appearance. This places a
+     * border around the field, which is clickable and moves focus to the
+     * contained control.
+     */
+    wrapper?: 'box' | 'simple';
+    /**
+     * Validation rules.
+     */
+    rules?: IValidationProps;
+    /**
+     * Triggered whenever an _uncontrolled_ Field changes.
+     */
+    onChange?: (data: any, forceupdate: boolean) => void;
+}
+/**
+ * A `Form.Field` wraps a form control. It serves several purposes.
+ *
+ * * First, the Field automatically adds `name`, `onChange`, `value` and
+ * `error` props to the control it contains. The `onChange` prop is supplied by
+ * the `Form` content so that the developer does not need to add it.
+ *
+ * * Second, the Field performs validation when it is mounted, whenever its
+ * control's value changes, and when it is unmounted. Validation results are
+ * sent directly to the parent `Form` (a form context is used for this -- a
+ * Field must reside inside a form).
+ *
+ * #### Uncontrolled fields
+ * Note that Fields can be used outside of `Form`. These are known as _uncontrolled_.
+ * In this case, the Field can still benefit from a label, hint, and validation
+ * (since Field keeps an internal value), but `onChange` must be provided by
+ * the developer.
+ *
+ * #### Validations
+ * A Form.Field may add any number of validation `rules`, e.g. `required=`.
+ * Rules include `required`, `isInt`, `minLength` etc. When a
+ * field is first mounted, it is _pristine_. Even when its content is invalid,
+ * it will not show any validation error. When the user edits the field, it
+ * will no longer be pristine and any errors will appear. The parent Form also
+ * provides a `dirty` prop to the Field. When the Form is dirty, so are its
+ * fields, and any validation errors are shown, pristine or not.
+ *
+ * For dark backgrounds, fields may set their contrast prop to true to use
+ * lighter error colors.
+ *
+ * Fields have a `label` and a `hint`. Both are optional. These elements are
+ * displayed in different ways based on the field's `wrapper`. Unwrapped Fields
+ * do not display label or hint. Other wrappers are `simple` and `box`.
+ */
+declare const Field: {
+    (props: IProps): React.JSX.Element;
+    displayName: string;
+};
+export { Field, IProps };