@blockle/blocks 0.0.6 → 0.2.0

package/dist/blockle-blocks.esm.js

@@ -1,807 +0,0 @@
-/**
-  * @blockle/blocks v0.0.5
-  * (C) 2020-2020 Niek Saarberg
-  * Released under the MIT License.
-  */
-import React, { forwardRef, createElement, useState, useRef, useEffect, Children, useMemo, useLayoutEffect, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import { useField } from '@blockle/form';
-
-const Badge = ({ children }) => React.createElement("div", { className: "Badge" }, children);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(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;
-}
-
-const cx = (...args) => args.filter((arg) => arg && typeof arg === 'string').join(' ');
-
-// bb -> blockle blocks
-// useStyles({ padding: 'small', background: 'card' }); -> 'bb-padding-small bb-background-card'
-const useStyles = (styles) => {
-    const keys = Object.keys(styles);
-    const classList = [];
-    keys.forEach((key) => {
-        const value = styles[key];
-        if (value === undefined) {
-            return;
-        }
-        if (Array.isArray(value)) {
-            for (let i = 0; i < value.length; i++) {
-                const val = value[i];
-                if (i === 0) {
-                    classList.push(`bb-${key}-${val}`);
-                }
-                else {
-                    classList.push(`bb-${key}-${val}-bp${i}`);
-                }
-            }
-        }
-        else {
-            classList.push(`bb-${key}-${value}`);
-        }
-    });
-    return classList.join(' ');
-};
-
-const Box = forwardRef((_a, ref) => {
-    var { alignItems, backgroundColor, children, className, color, component = 'div', display, flexDirection, flexGrow, flexShrink, flexWrap, fontSize, fontStyle, fontWeight, height, justifyContent, negativeMarginLeft, negativeMarginTop, overflow, overflowX, overflowY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, textAlign, width } = _a, restProps = __rest(_a, ["alignItems", "backgroundColor", "children", "className", "color", "component", "display", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontSize", "fontStyle", "fontWeight", "height", "justifyContent", "negativeMarginLeft", "negativeMarginTop", "overflow", "overflowX", "overflowY", "padding", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "paddingX", "paddingY", "position", "textAlign", "width"]);
-    const boxStyles = useStyles({
-        alignItems,
-        backgroundColor,
-        color,
-        display,
-        flexDirection,
-        flexGrow,
-        flexShrink,
-        flexWrap,
-        fontSize,
-        fontStyle,
-        fontWeight,
-        height,
-        justifyContent,
-        negativeMarginLeft,
-        negativeMarginTop,
-        overflow,
-        overflowX,
-        overflowY,
-        padding,
-        paddingBottom,
-        paddingLeft,
-        paddingRight,
-        paddingTop,
-        paddingX,
-        paddingY,
-        position,
-        textAlign,
-        width,
-    });
-    return createElement(component, Object.assign({ ref, className: cx(className, boxStyles) }, restProps), children);
-});
-
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
-const isTouch = 'ontouchstart' in document;
-const endType = isTouch ? 'touchend' : 'mouseup';
-function nextTick(cb) {
-    requestAnimationFrame(() => requestAnimationFrame(cb));
-}
-function getPosition(event) {
-    if ('touches' in event) {
-        return {
-            x: event.touches[0].pageX,
-            y: event.touches[0].pageY,
-        };
-    }
-    return { x: event.pageX, y: event.pageY };
-}
-function createRipple(event) {
-    // Remove event from pool so we can hijack and set `__rippled` property
-    event.persist();
-    // Prevent "other" ripples to be created higher up in the dom tree
-    // @ts-ignore
-    if (event.__rippled) {
-        return;
-    }
-    // @ts-ignore
-    event.__rippled = true;
-    const createdAt = Date.now();
-    const { currentTarget } = event;
-    const { x, y } = getPosition(event);
-    const target = currentTarget;
-    const rect = target.getBoundingClientRect();
-    const size = Math.ceil(Math.max(rect.width, rect.height)) * 4;
-    const duration = size < 600 ? 400 : 700;
-    // Ripple element
-    const ripple = document.createElement('div');
-    ripple.style.position = 'absolute';
-    ripple.style.borderRadius = '50%';
-    ripple.style.pointerEvents = 'none';
-    ripple.style.backgroundColor = 'currentColor';
-    ripple.style.width = `${size}px`;
-    ripple.style.height = `${size}px`;
-    ripple.style.opacity = '0.2';
-    ripple.style.transform = 'scale(0.01)';
-    ripple.style.left = `${x - rect.left - size / 2}px`;
-    ripple.style.top = `${y - rect.top - size / 2}px`;
-    ripple.style.transitionProperty = 'transform, opacity';
-    ripple.style.transitionDuration = `${duration}ms`;
-    ripple.style.transitionTimingFunction = 'cubic-bezier(.51,.26,.84,.84)';
-    target.appendChild(ripple);
-    nextTick(() => {
-        ripple.style.opacity = '0.1';
-        ripple.style.transform = 'scale(1)';
-    });
-    const cleanup = () => {
-        const diff = Date.now() - createdAt;
-        document.removeEventListener(endType, cleanup);
-        document.removeEventListener('touchcancel', cleanup);
-        if (diff < duration) {
-            ripple.style.opacity = '0';
-            setTimeout(cleanup, duration - diff);
-            return;
-        }
-        target.removeChild(ripple);
-    };
-    document.addEventListener(endType, cleanup);
-    document.addEventListener('touchcancel', cleanup);
-}
-
-const isTouch$1 = 'ontouchstart' in document;
-const startType = isTouch$1 ? 'onTouchStart' : 'onMouseDown';
-const RippleBox = forwardRef((_a, ref) => {
-    var { children, component = 'div', color = 'primary' } = _a, props = __rest(_a, ["children", "component", "color"]);
-    props[startType] = createRipple;
-    return (React.createElement(Box, Object.assign({ ref: ref, component: component, overflow: "hidden", position: "relative", color: color }, props), children));
-});
-RippleBox.displayName = 'RippleBox';
-
-const Button = ({ children, className, disabled, onClick, type = 'button', width, secondary, }) => {
-    return (React.createElement(RippleBox, { component: "button", alignItems: "center", backgroundColor: disabled ? 'lightGray' : secondary ? 'secondary' : 'primary', className: cx('Button', disabled && 'is-disabled', className), color: "white", disabled: disabled, display: "flex", fontSize: "small", justifyContent: "center", onClick: onClick, paddingX: "large", paddingY: "xsmall", type: type, width: width }, children));
-};
-
-const Card = (_a) => {
-    var { backgroundColor = 'card', children, className, onClick, shadow } = _a, boxProps = __rest(_a, ["backgroundColor", "children", "className", "onClick", "shadow"]);
-    const props = Object.assign(Object.assign({}, boxProps), { className: cx('Card', shadow && `shadow-${shadow}`, onClick && 'is-clickable', className) });
-    if (onClick) {
-        return (React.createElement(RippleBox, Object.assign({ backgroundColor: backgroundColor, tabIndex: 0, role: "button", onClick: onClick, color: "primary", onKeyPress: (event) => {
-                if (onClick && (event.key === 'Enter' || event.key === ' ')) {
-                    onClick();
-                }
-            } }, props), children));
-    }
-    return (React.createElement(Box, Object.assign({ backgroundColor: backgroundColor }, props), children));
-};
-
-const useAnimationState = (nextOpenState) => {
-    const [state, setState] = useState({ open: nextOpenState, leave: false });
-    const close = () => setState({ open: false, leave: false });
-    let { open, leave } = state;
-    if (nextOpenState && !open) {
-        open = true;
-        leave = false;
-        setState({ open, leave });
-    }
-    if (!nextOpenState && open && !leave) {
-        open = true;
-        leave = true;
-        setState({ open, leave });
-    }
-    return [{ open, leave }, close];
-};
-
-const useLayer = () => {
-    const layerRef = useRef();
-    useEffect(() => () => {
-        if (layerRef.current) {
-            document.body.removeChild(layerRef.current);
-        }
-    }, []);
-    return () => {
-        if (!layerRef.current) {
-            layerRef.current = document.createElement('div');
-            document.body.appendChild(layerRef.current);
-        }
-        return layerRef.current;
-    };
-};
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var _ref = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z",
-  fill: "#4A5568"
-});
-
-function SvgSmArrowLeft(props) {
-  return /*#__PURE__*/createElement("svg", _extends({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref);
-}
-
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
-var _ref$1 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z",
-  fill: "#4A5568"
-});
-
-function SvgSmArrowRight(props) {
-  return /*#__PURE__*/createElement("svg", _extends$1({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$1);
-}
-
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
-var _ref$2 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z",
-  fill: "#4A5568"
-});
-
-var _ref2 = /*#__PURE__*/createElement("path", {
-  d: "M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z",
-  fill: "#4A5568"
-});
-
-function SvgSmBriefcase(props) {
-  return /*#__PURE__*/createElement("svg", _extends$2({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$2, _ref2);
-}
-
-function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
-var _ref$3 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
-  fill: "#4A5568"
-});
-
-function SvgSmCalendar(props) {
-  return /*#__PURE__*/createElement("svg", _extends$3({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$3);
-}
-
-function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
-
-var _ref$4 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-  fill: "#4A5568"
-});
-
-function SvgSmCheck(props) {
-  return /*#__PURE__*/createElement("svg", _extends$4({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$4);
-}
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-
-var _ref$5 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
-  fill: "#4A5568"
-});
-
-function SvgSmCheveronLeft(props) {
-  return /*#__PURE__*/createElement("svg", _extends$5({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$5);
-}
-
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
-
-var _ref$6 = /*#__PURE__*/createElement("path", {
-  d: "M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z",
-  fill: "#4A5568"
-});
-
-var _ref2$1 = /*#__PURE__*/createElement("path", {
-  d: "M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z",
-  fill: "#4A5568"
-});
-
-function SvgSmClipboard(props) {
-  return /*#__PURE__*/createElement("svg", _extends$6({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$6, _ref2$1);
-}
-
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
-
-var _ref$7 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z",
-  fill: "#4A5568"
-});
-
-function SvgSmCog(props) {
-  return /*#__PURE__*/createElement("svg", _extends$7({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$7);
-}
-
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
-
-var _ref$8 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",
-  fill: "#4A5568"
-});
-
-function SvgSmExclamation(props) {
-  return /*#__PURE__*/createElement("svg", _extends$8({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$8);
-}
-
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
-
-var _ref$9 = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z",
-  fill: "#4A5568"
-});
-
-function SvgSmPlus(props) {
-  return /*#__PURE__*/createElement("svg", _extends$9({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$9);
-}
-
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
-
-var _ref$a = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z",
-  fill: "#4A5568"
-});
-
-function SvgSmSelector(props) {
-  return /*#__PURE__*/createElement("svg", _extends$a({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$a);
-}
-
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
-
-var _ref$b = /*#__PURE__*/createElement("path", {
-  fillRule: "evenodd",
-  clipRule: "evenodd",
-  d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-  fill: "#4A5568"
-});
-
-function SvgSmX(props) {
-  return /*#__PURE__*/createElement("svg", _extends$b({
-    width: 20,
-    height: 20,
-    viewBox: "0 0 20 20",
-    fill: "none"
-  }, props), _ref$b);
-}
-
-const ICON_MAP = {
-    arrowBack: SvgSmCheveronLeft,
-    arrowLeft: SvgSmArrowLeft,
-    arrowRight: SvgSmArrowRight,
-    briefcase: SvgSmBriefcase,
-    calendar: SvgSmCalendar,
-    check: SvgSmCheck,
-    clipboard: SvgSmClipboard,
-    cog: SvgSmCog,
-    cross: SvgSmX,
-    exclamation: SvgSmExclamation,
-    plus: SvgSmPlus,
-    selector: SvgSmSelector,
-};
-const Icon = ({ className, label, name, size = 'medium', color = 'white' }) => {
-    const iconStyles = useStyles({
-        color,
-    });
-    if (!ICON_MAP[name]) {
-        console.warn(`<Icon name="${name}" />`);
-        return null;
-    }
-    return (React.createElement("span", { className: cx('Icon', `size-${size}`, className, iconStyles), title: label }, React.createElement(ICON_MAP[name], {
-        className: 'icon-svg',
-        'data-testid': 'icon-svg',
-    })));
-};
-
-const IconButton = ({ disabled, label, name, onClick, secondary }) => {
-    return (React.createElement(RippleBox, { disabled: disabled, onClick: onClick, className: cx('IconButton', secondary && 'is-secondary', disabled && 'is-disabled') },
-        React.createElement(Icon, { name: name, label: label, size: "medium", color: disabled ? 'gray' : 'black' })));
-};
-
-const Stack = ({ align, children, component = 'div', spacing, horizontal = false, className, }) => {
-    const items = Children.toArray(children);
-    return (React.createElement(Box, { className: cx('Stack', className), component: component, display: "flex", flexDirection: horizontal ? 'row' : 'column', justifyContent: horizontal ? undefined : align, alignItems: align, negativeMarginTop: horizontal ? undefined : spacing, negativeMarginLeft: horizontal ? spacing : undefined }, items.map((item, key) => (React.createElement(Box, { key: key, paddingTop: horizontal ? undefined : spacing, paddingLeft: horizontal ? spacing : undefined }, item)))));
-};
-
-const Dialog = ({ actions, full = false, onRequestClose, open = false, render, title = null, minHeight, }) => {
-    const [state, close] = useAnimationState(open);
-    const layer = useLayer();
-    useEffect(() => {
-        if (!state.open) {
-            return;
-        }
-        const onKeyPress = (event) => {
-            if (event.key === 'Escape') {
-                onRequestClose();
-            }
-        };
-        document.addEventListener('keydown', onKeyPress);
-        return () => {
-            document.removeEventListener('keydown', onKeyPress);
-        };
-    }, [state.open]);
-    if (!state.open) {
-        return null;
-    }
-    const onAnimationEnd = (event) => {
-        if (event.animationName === 'DialogBack-Leave') {
-            close();
-        }
-    };
-    const dialog = (React.createElement("div", { className: "DialogContainer" },
-        React.createElement("div", { className: cx('DialogBack', state.leave && 'is-leave'), onClick: onRequestClose, onAnimationEnd: onAnimationEnd }),
-        React.createElement(Box, { className: cx('Dialog', state.leave && 'is-leave'), width: full ? 'full' : undefined, display: "flex", flexDirection: "column", position: "relative", paddingY: "small", style: {
-                minHeight: `min(96%, ${minHeight}px)`,
-            } },
-            React.createElement(Stack, { spacing: "medium" },
-                (title || full) && (React.createElement(Box, { display: "flex", alignItems: "center", paddingLeft: "gutter" },
-                    React.createElement(Box, { flexGrow: 1 }, title),
-                    React.createElement(IconButton, { name: "cross", label: "Close", onClick: onRequestClose }))),
-                React.createElement(Box, { flexGrow: 1, overflow: "auto", paddingX: "gutter" }, render()),
-                actions && (React.createElement(Box, { display: "flex", justifyContent: "flex-end", alignItems: "center", paddingX: "gutter" }, actions))))));
-    return createPortal(dialog, layer());
-};
-
-const Divider = () => React.createElement("hr", { className: "Divider" });
-
-const Drawer = ({ children, onRequestClose, open, position = 'left' }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: cx('Drawer-Back', open && 'is-open'), onClick: onRequestClose }),
-        React.createElement("div", { className: cx('Drawer', `position-${position}`, open && 'is-open') }, children)));
-};
-
-const validate = ({ required }) => (value) => {
-    if (required && !value) {
-        return 'required';
-    }
-    return null;
-};
-const Dropdown = ({ name, onChange, placeholder, required, value, errorMessages = {}, children, }) => {
-    const ref = useRef(null);
-    const [focus, setFocus] = useState(false);
-    const field = useField(name, {
-        value: value || '',
-        validate: validate({ required }),
-        onChange,
-    });
-    const invalid = field.invalid && (field.dirty || field.touched);
-    useEffect(() => {
-        if (ref.current) {
-            const { value } = ref.current;
-            if (value && value !== field.value) {
-                field.setValue(value);
-            }
-        }
-    }, [children]);
-    return (React.createElement(Box, { position: "relative", display: "inline-block", color: invalid ? 'warning' : focus ? 'primary' : 'black' },
-        React.createElement(Box, { ref: ref, component: "select", className: cx('Dropdown-select', invalid && 'is-invalid'), color: "black", fontSize: "medium", paddingY: "xsmall", paddingLeft: "small", paddingRight: "large", name: name, id: `Dropdown-${name}`, value: field.value, onBlur: () => {
-                setFocus(false);
-                field.setTouched();
-            }, onChange: (event) => {
-                field.setValue(event.currentTarget.value);
-            }, onFocus: () => {
-                setFocus(true);
-            } },
-            placeholder && (React.createElement("option", { value: "", disabled: true }, placeholder)),
-            children),
-        React.createElement(Box, { className: "Dropdown-icon", paddingRight: "xsmall" },
-            React.createElement(Icon, { name: "selector", label: "", color: "black", size: "xsmall" }))));
-};
-
-const FlatButton = (_a) => {
-    var { children, className, disabled, onClick, secondary, type = 'button', width } = _a, props = __rest(_a, ["children", "className", "disabled", "onClick", "secondary", "type", "width"]);
-    return (React.createElement(RippleBox, Object.assign({ component: "button", type: type, disabled: disabled, onClick: onClick, className: cx('FlatButton', disabled && 'is-disabled', className), width: width, paddingX: "large", paddingY: "small", fontSize: "small", color: disabled ? 'gray' : secondary ? 'secondary' : 'primary', display: "flex", justifyContent: "center", alignItems: "center", fontWeight: "bold" }, props), children));
-};
-
-const Grid = ({ children, className, spacing, columns }) => {
-    const gridStyles = useStyles({
-        display: 'grid',
-        gridGap: spacing,
-    });
-    return (React.createElement("div", { className: cx(className, gridStyles), style: {
-            gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        } }, children));
-};
-
-const Inline = ({ children, spacing }) => {
-    const items = Children.toArray(children);
-    return (React.createElement(Box, { display: "flex", flexWrap: "wrap", negativeMarginTop: spacing, negativeMarginLeft: spacing }, items.map((item, key) => {
-        return (React.createElement(Box, { key: key, display: "inline-block", paddingTop: spacing, paddingLeft: spacing }, item));
-    })));
-};
-
-const Link = ({ children, to, fontSize }) => {
-    const linkStyles = useStyles({
-        color: 'primary',
-        fontSize,
-    });
-    return (React.createElement("a", { href: `#${to}`, className: cx('Link', linkStyles) }, children));
-};
-
-const Loader = () => {
-    return (React.createElement("div", { className: "Loader" },
-        React.createElement(Icon, { name: "briefcase", label: "Loading", color: "secondary" })));
-};
-
-const OutlineButton = ({ children, className, disabled, onClick, type = 'button', width, }) => {
-    return (React.createElement(RippleBox, { component: "button", type: type, disabled: disabled, onClick: onClick, className: cx('OutlineButton', disabled && 'is-disabled', className), fontWeight: "bold", width: width, paddingX: "large", paddingY: "small", fontSize: "small", color: disabled ? 'lightGray' : 'primary', display: "flex", justifyContent: "center", alignItems: "center" }, children));
-};
-
-const Panel = ({ className, onRequestClose, open = false, render }) => {
-    const [state, close] = useAnimationState(open);
-    const layer = useLayer();
-    if (!state.open) {
-        return null;
-    }
-    const onAnimationEnd = (event) => {
-        if (event.animationName === 'Panel-Back-Leave') {
-            close();
-        }
-    };
-    const panel = (React.createElement("div", { className: "Panel-Container" },
-        React.createElement("div", { className: cx('Panel-Back', state.leave && 'is-leave'), onClick: onRequestClose, onAnimationEnd: onAnimationEnd }),
-        React.createElement("div", { className: cx('Panel', state.leave && 'is-leave', className) }, render())));
-    return createPortal(panel, layer());
-};
-
-const animationLeaveExpression = /^Paper-.*?Leave$/;
-const Paper = ({ open = false, effect = 'fade', className, transparent, shadow, render, fit, }) => {
-    const [state, close] = useAnimationState(open);
-    const onAnimationEnd = (event) => {
-        if (animationLeaveExpression.test(event.animationName)) {
-            close();
-        }
-    };
-    if (!state.open) {
-        return null;
-    }
-    return (React.createElement("div", { className: cx('Paper', state.leave && 'is-leave', className, `effect-${effect}`, fit && 'is-fit', transparent && 'is-transparent', shadow && 'is-shadow'), onAnimationEnd: onAnimationEnd }, render()));
-};
-
-const Text = ({ component = 'span', children, textAlign, fontSize = 'medium', fontWeight, color, fontStyle, className, }) => {
-    return (React.createElement(Box, { component: component, textAlign: textAlign, fontSize: fontSize, fontWeight: fontWeight, fontStyle: fontStyle, display: "block", className: cx('Text', className), color: color }, children));
-};
-
-const Tag = ({ children, onClick }) => {
-    return (React.createElement(RippleBox, { tabIndex: 0, className: "Tag", display: "flex", alignItems: "center", paddingX: "small", paddingY: "xsmall", onClick: onClick, onKeyPress: (event) => {
-            if (event.key === ' ' || event.key === 'Enter') {
-                onClick();
-            }
-        } },
-        React.createElement(Stack, { spacing: "xsmall", horizontal: true },
-            React.createElement(Text, { fontSize: "small", fontWeight: "bold" }, children),
-            React.createElement(Icon, { name: "cross", label: "remove", color: "black", size: "xsmall" }))));
-};
-
-const validate$1 = ({ required, pattern, minLength, maxLength }) => (value) => {
-    if (required && !value) {
-        return 'required';
-    }
-    if (pattern && !pattern.test(value)) {
-        return 'pattern';
-    }
-    if (minLength && value.length < minLength) {
-        return 'minLength';
-    }
-    if (maxLength && value.length > maxLength) {
-        return 'maxLength';
-    }
-    return null;
-};
-const TextField = ({ label, name, onChange, pattern, placeholder, required, type = 'text', value = '', errorMessages = {}, minLength, maxLength, disabled, }) => {
-    const [focus, setFocus] = useState(false);
-    const field = useField(name, {
-        value,
-        validate: validate$1({ required, pattern, minLength, maxLength }),
-        onChange,
-    });
-    const invalid = field.invalid && field.touched;
-    return (React.createElement(Box, { position: "relative", color: invalid ? 'warning' : focus ? 'primary' : 'white', paddingBottom: "large", className: cx('TextField', disabled && 'is-disabled') },
-        React.createElement("input", { autoComplete: "off", className: cx('TextField-Input', field.value && 'is-filled', invalid && 'is-invalid'), id: `Input-${name}`, name: name, onBlur: () => {
-                setFocus(false);
-                field.setTouched();
-            }, onChange: (event) => field.setValue(event.target.value), onFocus: () => {
-                setFocus(true);
-            }, placeholder: placeholder || label, type: type, value: field.value, disabled: disabled }),
-        React.createElement(Box, { component: "label", display: "block", htmlFor: `Input-${name}`, color: invalid ? 'warning' : 'gray', className: cx('TextField-Label', field.value && 'is-visible'), paddingX: "xsmall", fontSize: "xsmall", paddingTop: "xsmall", backgroundColor: "white" }, label),
-        invalid && (React.createElement(Box, { color: "warning", className: "TextField-Bottom", fontSize: "small" }, (field.validationMessage && errorMessages[field.validationMessage]) ||
-            field.validationMessage))));
-};
-
-const animate = ({ element, transforms, duration = 200, timingFunction = 'ease', done, }) => {
-    element.style.transition = '';
-    transforms.forEach(({ property, from = '' }) => {
-        element.style.setProperty(property, from);
-    });
-    const onTransitionEnd = () => {
-        if (!element) {
-            return;
-        }
-        element.removeEventListener('transitionend', onTransitionEnd);
-        element.removeEventListener('transitioncancel', onTransitionEnd);
-        element.style.transition = '';
-        if (done) {
-            done();
-        }
-    };
-    element.addEventListener('transitionend', onTransitionEnd);
-    element.addEventListener('transitioncancel', onTransitionEnd);
-    window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
-            element.style.transition = `transform ${duration}ms ${timingFunction}, opacity ${duration}ms ${timingFunction}`;
-            transforms.forEach(({ property, to = '' }) => {
-                element.style.setProperty(property, to);
-            });
-        });
-    });
-};
-
-const getPosition$1 = (element) => {
-    const { x, y } = element.getBoundingClientRect();
-    const scrollLeft = document.documentElement.scrollLeft;
-    const scrollTop = document.documentElement.scrollTop;
-    return {
-        x: x + scrollLeft,
-        y: y + scrollTop,
-    };
-};
-function getTransformValue(axis, x, y) {
-    switch (axis) {
-        case 'x':
-            return `translateX(${x}px)`;
-        case 'y':
-            return `translateY(${y}px)`;
-        case 'both':
-            return `translate(${x}px, ${y}px)`;
-    }
-}
-const useFlip = ({ axis = 'both' } = {}) => {
-    const refs = useMemo(() => new Map(), []);
-    const positions = useMemo(() => new Map(), []);
-    useLayoutEffect(() => {
-        const animations = [];
-        Array.from(refs.entries()).forEach(([id, element]) => {
-            if (!element) {
-                refs.delete(id);
-                positions.delete(id);
-                return;
-            }
-            const prevPosition = positions.get(id);
-            const position = getPosition$1(element);
-            // Enter animation
-            if (!prevPosition) {
-                animations.push({
-                    element,
-                    transforms: [
-                        { property: 'transform', from: 'scale(0.8)' },
-                        { property: 'opacity', from: '0' },
-                    ],
-                });
-            }
-            // Move animation
-            if (prevPosition && (prevPosition.x !== position.x || prevPosition.y !== position.y)) {
-                const x = prevPosition.x - position.x;
-                const y = prevPosition.y - position.y;
-                animations.push({
-                    element,
-                    transforms: [{ property: 'transform', from: getTransformValue(axis, x, y) }],
-                });
-            }
-            positions.set(id, position);
-        });
-        animations.forEach(animate);
-    });
-    const setRef = useCallback((id) => (ref) => {
-        refs.set(id, ref);
-    }, []);
-    const remove = useCallback((id, callback) => {
-        const element = refs.get(id);
-        if (element) {
-            animate({
-                element,
-                done: callback,
-                duration: 100,
-                transforms: [
-                    {
-                        property: 'opacity',
-                        from: '1',
-                        to: '0',
-                    },
-                    {
-                        property: 'transform',
-                        to: 'scale(0.8)',
-                    },
-                ],
-            });
-        }
-    }, []);
-    return { setRef, remove };
-};
-
-export { Badge, Box, Button, Card, Dialog, Divider, Drawer, Dropdown, FlatButton, Grid, Icon, IconButton, Inline, Link, Loader, OutlineButton, Panel, Paper, RippleBox, Stack, Tag, Text, TextField, cx, useAnimationState, useFlip, useLayer, useStyles };