@longline/aqua-ui 1.0.0

package/containers/Form/Validation.js

@@ -0,0 +1,232 @@
+import { isAfter, isBefore, parseISO } from "date-fns";
+var Validation = /** @class */ (function () {
+    function Validation() {
+    }
+    /**
+     * Verify that field has a value.
+     */
+    Validation.validateRequired = function (value) {
+        if (typeof value === 'boolean')
+            return !!value;
+        if (typeof value === 'string')
+            return value.trim().length > 0;
+        if (typeof value === 'number')
+            return true;
+        return !!value;
+    };
+    /**
+     * Verify that value is an integer number.
+     */
+    Validation.validateInt = function (value) {
+        if (!value)
+            return true;
+        var regex = /^[-+]?[0-9]+$/;
+        return regex.test(value);
+    };
+    /*
+     * Verify that value is a floating-point number. The default floating
+     * point separator is '.' Optionally a different separator can be
+     * specified.
+     */
+    Validation.validateFloat = function (value, separator) {
+        if (separator === void 0) { separator = '.'; }
+        if (!value)
+            return true;
+        var regex = new RegExp("^[-+]?[0-9]+(\\".concat(separator, "[0-9]+)?$"));
+        return regex.test(value);
+    };
+    /**
+     * Verify that value has a minimum numerical value.
+     */
+    Validation.validateMin = function (value, min) {
+        if (!value)
+            return true;
+        return parseInt(value) >= min;
+    };
+    /**
+     * Verify that value has a maximum numerical value.
+     */
+    Validation.validateMax = function (value, max) {
+        if (!value)
+            return true;
+        return parseInt(value) <= max;
+    };
+    /**
+     * Verify that value falls in a numerical range (inclusive).
+     */
+    Validation.validateBetween = function (value, min, max) {
+        if (!value)
+            return true;
+        var num = parseInt(value);
+        return num >= min && num <= max;
+    };
+    /**
+     * Verify that value is a string of minimum length.
+     */
+    Validation.validateMinLength = function (value, minLength) {
+        if (!value)
+            return true;
+        // Invalid if not a string.
+        if (!(typeof value === "string"))
+            return false;
+        // Valid if at least {min} chars long.
+        return value.length >= minLength;
+    };
+    /**
+     * Verify that value is a string of maximum length.
+     */
+    Validation.validateMaxLength = function (value, maxLength) {
+        if (!value)
+            return true;
+        // Invalid if not a string.
+        if (!(typeof value === "string"))
+            return false;
+        // Valid if at most {max} chars long.
+        return value.length <= maxLength;
+    };
+    /**
+     * Verify that value is a string of length between minimum and maximum.
+     */
+    Validation.validateLengthBetween = function (value, minLength, maxLength) {
+        if (!value)
+            return true;
+        // Invalid if not a string.
+        if (!(typeof value === "string"))
+            return false;
+        // Valid if at least {min} chars longs and at most {max} chars long.
+        return value.length >= minLength && value.length <= maxLength;
+    };
+    /**
+     * Verify that value satisfies a pattern.
+     */
+    Validation.validatePattern = function (value, pattern) {
+        if (!value)
+            return true;
+        var regex = new RegExp(pattern);
+        return regex.test(value);
+    };
+    /**
+     * Verify that value does not satisfy a pattern.
+     */
+    Validation.validateNotPattern = function (value, pattern) {
+        if (!value)
+            return true;
+        var regex = new RegExp(pattern);
+        return !regex.test(value);
+    };
+    /**
+     * Verify that values is a valid email address.
+     */
+    Validation.validateEmail = function (value) {
+        if (!value)
+            return true;
+        var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return regex.test(String(value).toLowerCase());
+    };
+    /**
+     * Verify that value is before today.
+     */
+    Validation.validateNofuture = function (value) {
+        if (!value)
+            return true;
+        var otherDate = new Date(Date.now());
+        var d = new Date(value);
+        // Abort if not a valid date:
+        if (isNaN(d.getDate()))
+            return false;
+        return isBefore(d, otherDate);
+    };
+    /**
+     * Verify that value is before date.
+     */
+    Validation.validateBefore = function (value, otherDateStr) {
+        if (!value)
+            return true;
+        var otherDate = parseISO(otherDateStr);
+        var d = new Date(value);
+        // Abort if not a valid date:
+        if (isNaN(d.getDate()))
+            return false;
+        return isBefore(d, otherDate);
+    };
+    /**
+     * Verify that value is after date.
+     */
+    Validation.validateAfter = function (value, otherDateStr) {
+        if (!value)
+            return true;
+        var otherDate = parseISO(otherDateStr);
+        var d = new Date(value);
+        // Abort if not a valid date:
+        if (isNaN(d.getDate()))
+            return false;
+        return isAfter(d, otherDate);
+    };
+    Validation.getValidation = function (value, rules) {
+        if (!rules)
+            return null;
+        if (rules.required != null) {
+            if (!Validation.validateRequired(value))
+                return rules.required.message;
+        }
+        if (rules.isInt != null) {
+            if (!Validation.validateInt(value))
+                return rules.isInt.message;
+        }
+        if (rules.isFloat != null) {
+            if (!Validation.validateFloat(value, rules.isFloat.separator))
+                return rules.isFloat.message;
+        }
+        if (rules.min != null) {
+            if (!Validation.validateMin(value, rules.min.value))
+                return rules.min.message;
+        }
+        if (rules.max != null) {
+            if (!Validation.validateMax(value, rules.max.value))
+                return rules.max.message;
+        }
+        if (rules.between != null) {
+            if (!Validation.validateBetween(value, rules.between.min, rules.between.max))
+                return rules.between.message;
+        }
+        if (rules.minLength != null) {
+            if (!Validation.validateMinLength(value, rules.minLength.length))
+                return rules.minLength.message;
+        }
+        if (rules.maxLength != null) {
+            if (!Validation.validateMaxLength(value, rules.maxLength.length))
+                return rules.maxLength.message;
+        }
+        if (rules.lengthBetween != null) {
+            if (!Validation.validateLengthBetween(value, rules.lengthBetween.min, rules.lengthBetween.max))
+                return rules.lengthBetween.message;
+        }
+        if (rules.pattern != null) {
+            if (!Validation.validatePattern(value, rules.pattern.pattern))
+                return rules.pattern.message;
+        }
+        if (rules.noPattern != null) {
+            if (!Validation.validateNotPattern(value, rules.noPattern.pattern))
+                return rules.noPattern.message;
+        }
+        if (rules.email != null) {
+            if (!Validation.validateEmail(value))
+                return rules.email.message;
+        }
+        if (rules.nofuture != null) {
+            if (!Validation.validateNofuture(value))
+                return rules.nofuture.message;
+        }
+        if (rules.before != null) {
+            if (!Validation.validateBefore(value, rules.before.date))
+                return rules.before.message;
+        }
+        if (rules.after != null) {
+            if (!Validation.validateBefore(value, rules.after.date))
+                return rules.after.message;
+        }
+        return null;
+    };
+    return Validation;
+}());
+export { Validation };

package/containers/Form/context/FormContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IFormContext {
+    onChange: (name: string, value: any, forceupdate: boolean) => void;
+    onValidate: (name: string, valid: boolean) => void;
+    dirty?: boolean;
+    ghost?: boolean;
+    data?: any;
+}
+declare const FormContext: React.Context<IFormContext>;
+export { IFormContext, FormContext };

package/containers/Form/context/FormContext.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var FormContext = React.createContext(null);
+export { FormContext };

package/containers/Form/context/useForm.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns the Form Context.
+ */
+declare const useForm: () => import("./FormContext").IFormContext;
+export { useForm };

package/containers/Form/context/useForm.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FormContext } from './FormContext';
+/**
+ * Returns the Form Context.
+ */
+var useForm = function () {
+    return React.useContext(FormContext);
+};
+export { useForm };

package/containers/Form/elements/BoxWrapper.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    weight?: number;
+    error?: boolean;
+    disabled?: boolean;
+    ghost?: boolean;
+}
+declare const BoxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { BoxWrapper };

package/containers/Form/elements/BoxWrapper.js

@@ -0,0 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Label } from './Label';
+import { Hint } from './Hint';
+//
+// `BoxWrapper` exists to draw a box around the field, which gets focus when
+// the field has focus. When the FieldWrapper is clicked, the field is given
+// focus and is clicked.
+// 
+var BoxWrapperBase = function (props) {
+    var wrapper = React.useRef(null);
+    //
+    // FieldWrapper sends clicks through to the underlying control, and focuses it.
+    // To do so, it looks for the first child control with tabIndex=0.
+    // 
+    var handleClick = function () {
+        // Find a child element with tabIndex set, and focus/click it.
+        var clickableChild = wrapper.current.querySelectorAll("[tabIndex='0']")[0];
+        if (clickableChild instanceof HTMLElement) {
+            clickableChild.click();
+            clickableChild.focus();
+        }
+    };
+    return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
+        props.label,
+        props.children,
+        props.hint));
+};
+var BoxWrapper = styled(BoxWrapperBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  z-index: 0; // for :before\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  overflow: hidden;\n\n  // Hint/error background:\n  ", "\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  height: 80px;\n  z-index: 0; // for :before\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  overflow: hidden;\n\n  // Hint/error background:\n  ", "\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.ghost && css(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background: ", ";\n    }\n  "], [" \n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background: ", ";\n    }\n  "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "], ["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "], ["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+export { BoxWrapper };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/containers/Form/elements/Hint.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+interface IFormHintProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Is the field optional?
+     */
+    optional?: boolean;
+    /**
+     * Is the field ghosted?
+     */
+    ghost?: boolean;
+    /**
+     * Is this an error message?
+     */
+    error?: boolean;
+}
+declare const Hint: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IFormHintProps, never>> & string & Omit<(props: IFormHintProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { Hint };

package/containers/Form/elements/Hint.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var HintBase = function (props) {
+    return React.createElement("div", { tabIndex: -1, className: props.className },
+        props.optional && React.createElement(Optional, null, "Optional:"),
+        props.children);
+};
+var Optional = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n"], ["\n"])));
+var Hint = styled(HintBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  ", " {\n    color: ", ";\n    margin-right: 0.25em;\n  }\n"], ["\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  ", " {\n    color: ", ";\n    margin-right: 0.25em;\n  }\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; }, Optional, function (p) { return p.ghost ? 'inherit' : p.theme.colors.primary[1]; });
+export { Hint };
+var templateObject_1, templateObject_2;

package/containers/Form/elements/Label.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface ILabelProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Is the field disabled?
+     */
+    disabled?: boolean;
+    /**
+     * A required label gets an asterisk.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * If true, show an asterisk for required fields.
+     */
+    asterisk?: boolean;
+}
+declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ILabelProps, never>> & string & Omit<(props: ILabelProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { Label };

package/containers/Form/elements/Label.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var Required = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Required fields put an asterisk on the label. */ \n  color: ", ";\n"], ["\n  /* Required fields put an asterisk on the label. */ \n  color: ", ";\n"])), function (p) { return p.theme.colors.negative; });
+var LabelBase = function (props) {
+    return React.createElement("label", { tabIndex: -1, className: props.className },
+        props.children,
+        props.required && props.asterisk == true && !props.disabled && React.createElement(Required, null, "*"));
+};
+var Label = styled(LabelBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position:\n  position: relative;\n  display: block;\n  margin-right: 1em;\n\n  // Appearance:\n  font: ", ";\n  text-transform: lowercase;\n  color: ", ";\n\n  // Content:\n  white-space: nowrap;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  text-overflow: ellipsis;\n"], ["\n  // Position:\n  position: relative;\n  display: block;\n  margin-right: 1em;\n\n  // Appearance:\n  font: ", ";\n  text-transform: lowercase;\n  color: ", ";\n\n  // Content:\n  white-space: nowrap;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.colors.font; });
+export { Label };
+var templateObject_1, templateObject_2;

package/containers/Form/elements/SimpleWrapper.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    weight?: number;
+    error?: boolean;
+    disabled?: boolean;
+    ghost?: boolean;
+}
+declare const SimpleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { SimpleWrapper };

package/containers/Form/elements/SimpleWrapper.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Label } from './Label';
+import { Hint } from './Hint';
+var SimpleWrapperBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        props.label,
+        props.children,
+        props.hint);
+};
+var SimpleWrapper = styled(SimpleWrapperBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: 8px;\n  position: relative;\n\n  ", " {\n    color: ", ";\n    height: 20px;\n  }\n\n  ", " {\n    color: ", ";\n    margin-top: 2px;\n  }\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "  \n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  margin-bottom: 8px;\n  position: relative;\n\n  ", " {\n    color: ", ";\n    height: 20px;\n  }\n\n  ", " {\n    color: ", ";\n    margin-top: 2px;\n  }\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "  \n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"])), Label, function (p) { return p.theme.colors.font; }, Hint, function (p) { return p.error ? p.theme.colors.negative : p.theme.colors.font; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;  \n    user-select: none;  \n  "], ["\n    pointer-events: none;  \n    user-select: none;  \n  "]))); }, function (p) { return p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    pointer-events: none;\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "], ["\n    pointer-events: none;\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "])), Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+export { SimpleWrapper };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/GlassPane/GlassPane.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * If set, adds a shiny border.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * If set, adds 16px of inner padding.
+     * @default false
+     */
+    padded?: boolean;
+    /**
+     * If set, animates on mount.
+     * @default false
+     */
+    animated?: boolean;
+}
+/**
+ * A `GlassPane` is used over a colorful background, like a map.
+ *
+ * ### Positioning
+ * * Relative.
+ * * Width is unset; glass panel will fill its container.
+ * * Height is content-dependent. The panel will `flex:1`, though.
+ *
+ * By default, there is no internal padding (though some can be added with `padded`). The panel's
+ * content is expected to set its own padding.
+ *
+ */
+declare const GlassPane: ({ bordered, padded, animated, ...props }: IProps) => React.JSX.Element;
+export { GlassPane, IProps };

package/containers/GlassPane/GlassPane.js

@@ -0,0 +1,66 @@
+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, keyframes } from 'styled-components';
+var GlassPaneBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var GRADIENT_0 = "rgb(255,255,255,0.6)";
+var GRADIENT_1 = "rgb(255,255,255,0.3)";
+var Anim = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n    backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  }\n  100% {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n"], ["\n  0% {\n    opacity: 0;\n    backdrop-filter: contrast(130%) brightness(120%) blur(0);\n  }\n  100% {\n    opacity: 1;\n    backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  }\n"])));
+var GlassPaneStyled = styled(GlassPaneBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n\n  // Content:\n  overflow: hidden;\n\n  ", "\n\n  // Appearance:\n  backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  color: ", ";\n  box-shadow: ", ";\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"], ["\n  // Position and size:\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  ", ";\n\n  // Content:\n  overflow: hidden;\n\n  ", "\n\n  // Appearance:\n  backdrop-filter: contrast(130%) brightness(120%) blur(3px);\n  color: ", ";\n  box-shadow: ", ";\n\n  background:\n    // Adds a light source:\n    0 0/300% 100% radial-gradient(\n      ellipse at 16.7% -10%,\n      hsla(0, 0%, 100%, 0.44) 24%,\n      hsla(0, 0%, 100%, 0.4) 25%,\n      hsla(0, 0%, 100%, 0.2) 45%,\n      hsla(0, 0%, 100%, 0.1)\n    ) padding-box,\n    // General milky background:\n    linear-gradient(rgb(128 128 128 / 60%), rgb(128 128 128 / 60%)) padding-box,\n    // Border gradient:\n    linear-gradient(to top right, ", ", ", ", ", ") border-box;\n\n  border-radius: ", "px;\n  border: solid ", "px transparent;\n"
+    /**
+     * A `GlassPane` is used over a colorful background, like a map.
+     *
+     * ### Positioning
+     * * Relative.
+     * * Width is unset; glass panel will fill its container.
+     * * Height is content-dependent. The panel will `flex:1`, though.
+     *
+     * By default, there is no internal padding (though some can be added with `padded`). The panel's
+     * content is expected to set its own padding.
+     *
+     */
+])), function (p) { return p.padded && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["padding: 15px;"], ["padding: 15px;"]))); }, function (p) { return p.animated && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    animation: ", " 500ms forwards;\n  "], ["\n    animation: ", " 500ms forwards;\n  "])), Anim); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.medium; }, GRADIENT_0, GRADIENT_1, GRADIENT_0, function (p) { return p.theme.radius.normal; }, function (p) { return p.bordered ? 1 : 0; });
+/**
+ * A `GlassPane` is used over a colorful background, like a map.
+ *
+ * ### Positioning
+ * * Relative.
+ * * Width is unset; glass panel will fill its container.
+ * * Height is content-dependent. The panel will `flex:1`, though.
+ *
+ * By default, there is no internal padding (though some can be added with `padded`). The panel's
+ * content is expected to set its own padding.
+ *
+ */
+var GlassPane = function (_a) {
+    var _b = _a.bordered, bordered = _b === void 0 ? false : _b, _c = _a.padded, padded = _c === void 0 ? false : _c, _d = _a.animated, animated = _d === void 0 ? false : _d, props = __rest(_a, ["bordered", "padded", "animated"]);
+    return React.createElement(GlassPaneStyled, __assign({ bordered: bordered, padded: padded, animated: animated }, props));
+};
+export { GlassPane };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/GlassPane/index.d.ts

@@ -0,0 +1 @@
+export { GlassPane } from './GlassPane';

package/containers/GlassPane/index.js

@@ -0,0 +1 @@
+export { GlassPane } from './GlassPane';

package/containers/InfoBox/InfoBox.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Body content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Optional box width (in pixels).
+     * @default 360
+     */
+    width?: number;
+    /**
+     * Minimum box height (in pixels).
+     * @default 0
+     */
+    minHeight?: number;
+    /**
+     * Add padding to content?
+     * @default false
+     */
+    padded?: boolean;
+    /**
+     * Optional header JSX.
+     */
+    header?: React.ReactNode;
+    /**
+     * Optional footer JSX.
+     */
+    footer?: React.ReactNode;
+}
+declare const InfoBox: ({ width, minHeight, padded, ...props }: IProps) => React.JSX.Element;
+export { InfoBox, IProps };

package/containers/InfoBox/InfoBox.js

@@ -0,0 +1,45 @@
+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 from 'styled-components';
+import { Content } from './elements/Content';
+import { Footer } from './elements/Footer';
+/**
+ * An `InfoBox` is a glass pane with an optional header and footer.
+ */
+var InfoBoxBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(Content, { header: props.header, padded: props.padded, minHeight: props.minHeight }, props.children),
+        props.footer && React.createElement(Footer, null, props.footer));
+};
+var InfoBoxStyled = styled(InfoBoxBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"], ["\n  // Position and size:\n  position: relative;\n  width: ", "px;\n  // Will flex if in flex-container:\n  flex: 1;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none; // Avoid pointer-events in spaces between footer buttons.\n\n  // Content:\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: start;\n"])), function (p) { return p.width; });
+var InfoBox = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 360 : _b, _c = _a.minHeight, minHeight = _c === void 0 ? 0 : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["width", "minHeight", "padded"]);
+    return React.createElement(InfoBoxStyled, __assign({ width: width, minHeight: minHeight, padded: padded }, props));
+};
+export { InfoBox };
+var templateObject_1;