@koine/react 1.0.9 → 1.0.12

package/Alert/Alert.js

@@ -1,16 +1,10 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-const AlertRoot = styled.div `
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger)` : "")}
-`;
-const AlertInner = styled.div `
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-export const Alert = ({ $danger, children, ...props }) => {
-    return (_jsx(AlertRoot, { "$danger": $danger, ...props, children: _jsx(AlertInner, { children: children }) }));
+var AlertRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 12px;\n  ", "\n"], ["\n  font-size: 12px;\n  ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger)" : ""); });
+var AlertInner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"], ["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"])));
+export var Alert = function (_a) {
+    var $danger = _a.$danger, children = _a.children, props = __rest(_a, ["$danger", "children"]);
+    return (_jsx(AlertRoot, __assign({ "$danger": $danger }, props, { children: _jsx(AlertInner, { children: children }) })));
 };
+var templateObject_1, templateObject_2;

package/Animations/Reveal.js

@@ -1,15 +1,17 @@
+import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useViewportScroll, useTransform, useSpring, useReducedMotion, } from "framer-motion";
 import { useReveal } from "./useReveal";
-export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }) => {
-    const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
-    const prefersReducedMotion = useReducedMotion();
-    const { ref, startY, endY, startX } = useReveal(effectOptions);
-    const { scrollYProgress } = useViewportScroll();
-    const xRange = useTransform(scrollYProgress, [startY, endY], [startX, 0]);
-    const opacityRange = useTransform(scrollYProgress, [startY, endY], [0, 1]);
-    const x = useSpring(xRange, { stiffness: 400, damping: 90 });
-    const opacity = useSpring(opacityRange);
+export var Reveal = function (_a) {
+    var children = _a.children, direction = _a.direction, offsetStartY = _a.offsetStartY, offsetEndY = _a.offsetEndY, offsetStartX = _a.offsetStartX, props = __rest(_a, ["children", "direction", "offsetStartY", "offsetEndY", "offsetStartX"]);
+    var effectOptions = { direction: direction, offsetStartY: offsetStartY, offsetEndY: offsetEndY, offsetStartX: offsetStartX };
+    var prefersReducedMotion = useReducedMotion();
+    var _b = useReveal(effectOptions), ref = _b.ref, startY = _b.startY, endY = _b.endY, startX = _b.startX;
+    var scrollYProgress = useViewportScroll().scrollYProgress;
+    var xRange = useTransform(scrollYProgress, [startY, endY], [startX, 0]);
+    var opacityRange = useTransform(scrollYProgress, [startY, endY], [0, 1]);
+    var x = useSpring(xRange, { stiffness: 400, damping: 90 });
+    var opacity = useSpring(opacityRange);
     // console.log("start, end", startY, endY)
-    return (_jsx(motion.div, { ...props, ref: ref, style: prefersReducedMotion ? {} : { x, opacity }, children: children }));
+    return (_jsx(motion.div, __assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
 };

package/Animations/Underline.js

@@ -1,15 +1,5 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { m } from "framer-motion";
-export const UnderlineSkewed = styled(m.i) `
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 15%;
-  right: 15%;
-  height: 20px;
-  margin-top: -10px;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--accent400);
-  transform: skewY(-5deg);
-`;
+export var UnderlineSkewed = styled(m.i)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"], ["\n  display: block;\n  position: absolute;\n  top: 50%;\n  left: 15%;\n  right: 15%;\n  height: 20px;\n  margin-top: -10px;\n  z-index: 0;\n  pointer-events: none;\n  background: var(--accent400);\n  transform: skewY(-5deg);\n"])));
+var templateObject_1;

package/Animations/useReveal.js

@@ -1,32 +1,33 @@
 import { useRef, useState, useEffect } from "react";
-export function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) {
-    const ref = useRef(null);
-    const [startY, setStartY] = useState(0);
-    const [endY, setEndY] = useState(0);
-    const [startX, setStartX] = useState(0);
-    useEffect(() => {
+export function useReveal(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? "left" : _b, _c = _a.offsetStartY, offsetStartY = _c === void 0 ? -2 : _c, _d = _a.offsetEndY, offsetEndY = _d === void 0 ? 0 : _d, _e = _a.offsetStartX, offsetStartX = _e === void 0 ? "all" : _e;
+    var ref = useRef(null);
+    var _f = useState(0), startY = _f[0], setStartY = _f[1];
+    var _g = useState(0), endY = _g[0], setEndY = _g[1];
+    var _h = useState(0), startX = _h[0], setStartX = _h[1];
+    useEffect(function () {
         if (!ref.current) {
             return;
         }
-        const rect = ref.current.getBoundingClientRect();
+        var rect = ref.current.getBoundingClientRect();
         // scroll position from top of the window
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const elementHeight = rect.height;
+        var scrollTop = window.scrollY || document.documentElement.scrollTop;
+        var elementHeight = rect.height;
         // rect.top is the distance from the currently visible viewport to the top
         // of the given element
         // so distanceTop is the distance between the top edge of the window and the
         // top edge of the given element
-        const elementTop = rect.top;
-        const distanceTop = elementTop + scrollTop;
-        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        var elementTop = rect.top;
+        var distanceTop = elementTop + scrollTop;
+        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        var offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
         // the distance of the element from the top divided by the full height
         // of the window gives back the start position of the given element in
         // a scale from 0 to 1
-        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
         // same for the end, we just add the given element height to the first value
-        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        let startX;
+        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        var startX;
         if (offsetStartX === "all") {
             startX = direction === "left" ? -rect.right : rect.left;
         }
@@ -51,7 +52,7 @@ export function useReveal({ direction = "left", offsetStartY = -2, offsetEndY =
         offsetStartX,
         direction,
     ]);
-    return { ref, startY, endY, startX };
+    return { ref: ref, startY: startY, endY: endY, startX: startX };
 }
 // function addMarker(top: string, color = "red", position = "absolute") {
 //   const div = document.createElement("div");

package/Autocomplete/AutocompleteDownshift.js

@@ -1,5 +1,5 @@
 // TODO: remove, just use mui version...
-export const Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,

package/Autocomplete/AutocompleteDownshiftMultiselect.js

@@ -1,5 +1,5 @@
 // TODO: remove, just use mui version...
-export const Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,

package/Autocomplete/AutocompleteMui.js

@@ -1,3 +1,4 @@
+import { __assign, __awaiter, __generator, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { 
 // forwardRef,
@@ -60,13 +61,14 @@ import { InputProgress } from "../Forms/styles";
 //  },
 //  ref
 // ) {
-export const Autocomplete = ({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, 
-// trigger,
-name, onChange, $ref, children, ...props }) => {
-    const defaultOptionsMemo = useMemo(() => normaliseOptions(defaultOptions), [defaultOptions]);
-    const [options, setOptions] = useState(defaultOptionsMemo);
-    const [loading, setLoading] = useState(false);
-    const { getRootProps, getInputLabelProps, getInputProps, getTagProps, getListboxProps, getOptionProps, getPopupIndicatorProps, groupedOptions, value: stateValue, setAnchorEl, popupOpen, focused, } = useAutocomplete({
+export var Autocomplete = function (_a) {
+    var creatable = _a.creatable, multiple = _a.multiple, autoComplete = _a.autoComplete, loadOptions = _a.loadOptions, _b = _a.options, defaultOptions = _b === void 0 ? [] : _b, defaultValue = _a.defaultValue, controlledValue = _a.value, defaultInputValue = _a.defaultInputValue, label = _a.label, placeholder = _a.placeholder, register = _a.register, setValue = _a.setValue, 
+    // trigger,
+    name = _a.name, onChange = _a.onChange, $ref = _a.$ref, children = _a.children, props = __rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
+    var defaultOptionsMemo = useMemo(function () { return normaliseOptions(defaultOptions); }, [defaultOptions]);
+    var _c = useState(defaultOptionsMemo), options = _c[0], setOptions = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _e = useAutocomplete({
         id: "Autocomplete",
         multiple: multiple ? true : undefined,
         freeSolo: creatable ? true : undefined,
@@ -80,43 +82,53 @@ name, onChange, $ref, children, ...props }) => {
         // ourselves
         // inputValue: defaultInputValue,
         // @ts-expect-error FIXME: how?
-        defaultValue,
+        defaultValue: defaultValue,
         // @ts-expect-error FIXME: how?
         value: controlledValue,
         // defaultValue: useMemo(
         //   () => normaliseAutocompleteValue(defaultValue, multiple),
         //   [defaultValue]
         // ),
-        options: useMemo(() => (loadOptions ? options : defaultOptions), [loadOptions, options, defaultOptions]),
+        options: useMemo(function () { return (loadOptions ? options : defaultOptions); }, [loadOptions, options, defaultOptions]),
         // update input change only if we are searching as you type, @see
         // https://mui.com/components/autocomplete/#search-as-you-type
-        onInputChange: useCallback(async (_event, inputValue) => {
-            if (!loadOptions) {
-                return;
-            }
-            if (inputValue) {
-                setLoading(true);
-                try {
-                    const newOptions = await loadOptions(inputValue);
-                    setOptions(newOptions);
+        onInputChange: useCallback(function (_event, inputValue) { return __awaiter(void 0, void 0, void 0, function () {
+            var newOptions, e_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!loadOptions) {
+                            return [2 /*return*/];
+                        }
+                        if (!inputValue) return [3 /*break*/, 6];
+                        setLoading(true);
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, 4, 5]);
+                        return [4 /*yield*/, loadOptions(inputValue)];
+                    case 2:
+                        newOptions = _a.sent();
+                        setOptions(newOptions);
+                        return [3 /*break*/, 5];
+                    case 3:
+                        e_1 = _a.sent();
+                        console.warn(e_1);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        setOptions(options);
+                        _a.label = 7;
+                    case 7: return [2 /*return*/];
                 }
-                catch (e) {
-                    console.warn(e);
-                }
-                finally {
-                    setLoading(false);
-                }
-            }
-            else {
-                setOptions(options);
-                // TODO: clear like behaviour?
-                // triggerChange({ value: "", label: "" });
-            }
-        }, [loadOptions, options]),
+            });
+        }); }, [loadOptions, options]),
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
-        onChange: (event, newValue) => {
-            const value = normaliseAutocompleteValue(newValue, multiple);
+        onChange: function (event, newValue) {
+            var value = normaliseAutocompleteValue(newValue, multiple);
             // @ts-expect-error FIXME: how?
             if (onChange)
                 onChange(newValue);
@@ -125,22 +137,22 @@ name, onChange, $ref, children, ...props }) => {
             // triggerOnChange(onChange, name, value);
         },
         // support both freeSolo free text and full option structure
-        isOptionEqualToValue: (option, value) => {
-            const optValue = isString(option) ? option : option.value;
-            const valValue = isString(value) ? value : value.value;
+        isOptionEqualToValue: function (option, value) {
+            var optValue = isString(option) ? option : option.value;
+            var valValue = isString(value) ? value : value.value;
             return optValue === valValue;
         },
-        getOptionLabel: (option) => {
+        getOptionLabel: function (option) {
             // @ts-expect-error TODO: I don't get this error
             return isString(option) ? option : option.label || "";
         },
-    });
-    const value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
-    const inputProps = () => {
-        const autocompleteProps = getInputProps();
+    }), getRootProps = _e.getRootProps, getInputLabelProps = _e.getInputLabelProps, getInputProps = _e.getInputProps, getTagProps = _e.getTagProps, getListboxProps = _e.getListboxProps, getOptionProps = _e.getOptionProps, getPopupIndicatorProps = _e.getPopupIndicatorProps, groupedOptions = _e.groupedOptions, stateValue = _e.value, setAnchorEl = _e.setAnchorEl, popupOpen = _e.popupOpen, focused = _e.focused;
+    var value = typeof controlledValue !== "undefined" ? controlledValue : stateValue;
+    var inputProps = function () {
+        var autocompleteProps = getInputProps();
         // here we merge the mui's `useAutocomplete` props with the react-hook-form's
         // `register` props
-        const registerProps = register
+        var registerProps = register
             ? register(name, {
                 // @ts-expect-error FIXME: can't remember
                 ref: autocompleteProps.ref.current,
@@ -149,14 +161,7 @@ name, onChange, $ref, children, ...props }) => {
                 value: normaliseAutocompleteValue(value, multiple),
             })
             : {};
-        return {
-            ...registerProps,
-            ...autocompleteProps,
-            // onChange: (event: FormEvent<HTMLInputElement>) => {
-            //   registerProps.onChange(event);
-            //   autocompleteProps?.onChange(event);
-            // },
-        };
+        return __assign(__assign({}, registerProps), autocompleteProps);
     };
     // to focus the input on error this works too
     // @see https://react-hook-form.com/faqs#question12 but probably it is
@@ -166,12 +171,12 @@ name, onChange, $ref, children, ...props }) => {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return (_jsxs(AutocompleteRoot, { children: [label && (_jsx(AutocompleteLabel, { ...getInputLabelProps(), children: label })), _jsxs(AutocompleteWrap, { ...getRootProps(), "data-focus": focused, children: [_jsxs(AutocompleteInner, { ref: setAnchorEl, children: [multiple &&
-                                value.map((valueItem, index) => {
-                                    const { onDelete, key, ...tagProps } = getTagProps({ index });
-                                    return (_jsxs(AutocompleteItem, { ...tagProps, children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
+    return (_jsxs(AutocompleteRoot, { children: [label && (_jsx(AutocompleteLabel, __assign({}, getInputLabelProps(), { children: label }))), _jsxs(AutocompleteWrap, __assign({}, getRootProps(), { "data-focus": focused }, { children: [_jsxs(AutocompleteInner, __assign({ ref: setAnchorEl }, { children: [multiple &&
+                                value.map(function (valueItem, index) {
+                                    var _a = getTagProps({ index: index }), onDelete = _a.onDelete, key = _a.key, tagProps = __rest(_a, ["onDelete", "key"]);
+                                    return (_jsxs(AutocompleteItem, __assign({}, tagProps, { children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
                                                     ? valueItem
-                                                    : valueItem.Label || valueItem.label }), _jsx(AutocompleteItemRemove, { onClick: onDelete, children: "\u2715" })] }, key));
-                                }), _jsx(AutocompleteInput, { ...inputProps(), placeholder: placeholder })] }), !!options.length && (_jsx(AutocompleteInputArrow, { ...getPopupIndicatorProps(), isOpen: popupOpen })), loading && _jsx(InputProgress, {})] }), groupedOptions.length ? (_jsx(AutocompleteMenu, { ...getListboxProps(), children: groupedOptions.map((option, index) => (_jsx(AutocompleteMenuItem, { ...getOptionProps({ option, index }), children: isString(option) ? option : option.Label || option.label }, index))) })) : null, children] }));
+                                                    : valueItem.Label || valueItem.label }), _jsx(AutocompleteItemRemove, __assign({ onClick: onDelete }, { children: "\u2715" }))] }), key));
+                                }), _jsx(AutocompleteInput, __assign({}, inputProps(), { placeholder: placeholder }))] })), !!options.length && (_jsx(AutocompleteInputArrow, __assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && _jsx(InputProgress, {})] })), groupedOptions.length ? (_jsx(AutocompleteMenu, __assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return (_jsx(AutocompleteMenuItem, __assign({}, getOptionProps({ option: option, index: index }), { children: isString(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
     // });
 };

package/Autocomplete/AutocompleteReach.js

@@ -1,5 +1,5 @@
 // TODO: remove, just use mui version...
-export const Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,

package/Autocomplete/components.js

@@ -1,3 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
 import { Label } from "../Forms/Label/Label";
 import { InputWrap, InputMain } from "../Forms/Input/Input";
@@ -7,83 +8,27 @@ import { MenuItem } from "../MenuItem/MenuItem";
 import { btnStyleReset } from "../Buttons";
 import { inputReset } from "../Forms/styles";
 import { ellipsis } from "../styles/styled";
-const AUTOCOMPLETE_ITEM_GUTTER = 3;
+var AUTOCOMPLETE_ITEM_GUTTER = 3;
 /**
  * Space between one selected item and the other
  */
-const AUTOCOMPLETE_ITEM_SPACER = 6;
-const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
-export const AutocompleteRoot = styled.div `
-  position: relative;
-`;
-export const AutocompleteLabel = styled(Label) ``;
-export const AutocompleteWrap = styled(InputWrap) `
-  ${inputReset}
-`;
-export const AutocompleteInner = styled(InputMain) `
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin: -${AUTOCOMPLETE_ITEM_SPACER}px;
-  margin-right: 0;
-`;
-export const AutocompleteItem = styled.span `
-  position: relative;
-  display: inline-flex;
-  margin: ${AUTOCOMPLETE_ITEM_GUTTER}px;
-  max-width: calc(100% - 6px);
-  user-select: none;
-  align-items: center;
-  padding: 0 ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
-  font-size: 80%;
-  background: var(--accent400);
-
-  &:hover {
-    background: var(--accent300);
-    color: white;
-  }
-
-  &:focus {
-    outline: 0px;
-    background: var(--grey700);
-  }
-`;
-export const AutocompleteItemLabel = styled.span `
-  padding: 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
-  ${ellipsis}
-`;
-export const AutocompleteItemRemove = styled.span `
-  ${btnStyleReset}
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px;
-  border: 0;
-  height: 100%;
-  color: inherit;
-  line-height: 1;
-`;
-export const AutocompleteInputWrap = styled.div `
-  display: flex;
-  flex: 1;
-`;
-export const AutocompleteInput = styled.input `
-  flex-grow: 1;
-  width: 0;
-  min-width: 30px;
-  border: 0;
-  padding: 0 ${AUTOCOMPLETE_ITEM_SPACER}px;
-  text-overflow: ellipsis;
-  background: transparent;
-
-  &:focus {
-    outline: none;
-  }
-`;
+var AUTOCOMPLETE_ITEM_SPACER = 6;
+var AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
+export var AutocompleteRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var AutocompleteLabel = styled(Label)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var AutocompleteWrap = styled(InputWrap)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), inputReset);
+export var AutocompleteInner = styled(InputMain)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"], ["\n  display: inline-flex;\n  flex-wrap: wrap;\n  margin: -", "px;\n  margin-right: 0;\n"])), AUTOCOMPLETE_ITEM_SPACER);
+export var AutocompleteItem = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  margin: ", "px;\n  max-width: calc(100% - 6px);\n  user-select: none;\n  align-items: center;\n  padding: 0 ", "px 0 ", "px;\n  font-size: 80%;\n  background: var(--accent400);\n\n  &:hover {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:focus {\n    outline: 0px;\n    background: var(--grey700);\n  }\n"])), AUTOCOMPLETE_ITEM_GUTTER, AUTOCOMPLETE_ITEM_REMOVE_WIDTH, AUTOCOMPLETE_ITEM_GUTTER);
+export var AutocompleteItemLabel = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 0 ", "px;\n  ", "\n"], ["\n  padding: 0 ", "px;\n  ", "\n"])), AUTOCOMPLETE_ITEM_GUTTER, ellipsis);
+export var AutocompleteItemRemove = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"], ["\n  ", "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: ", "px;\n  border: 0;\n  height: 100%;\n  color: inherit;\n  line-height: 1;\n"])), btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
+export var AutocompleteInputWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n"], ["\n  display: flex;\n  flex: 1;\n"])));
+export var AutocompleteInput = styled.input(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  flex-grow: 1;\n  width: 0;\n  min-width: 30px;\n  border: 0;\n  padding: 0 ", "px;\n  text-overflow: ellipsis;\n  background: transparent;\n\n  &:focus {\n    outline: none;\n  }\n"])), AUTOCOMPLETE_ITEM_SPACER);
 /**
  * This cannot be a button otherwise on `Enter` the form would submit instead
  * of opening the dropdown or adding the selection. There are too many events
  * to prevent if we were using a standard HTML `<button>`
  */
-export const AutocompleteInputArrow = styled(SelectArrow) ``;
-export const AutocompleteMenu = styled(Menu) ``;
-export const AutocompleteMenuItem = styled(MenuItem) ``;
+export var AutocompleteInputArrow = styled(SelectArrow)(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
+export var AutocompleteMenu = styled(Menu)(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""])));
+export var AutocompleteMenuItem = styled(MenuItem)(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/Autocomplete/helpers.js

@@ -19,7 +19,7 @@ export function normaliseAutocompleteValue(value, asArray) {
         return asArray ? [value] : value;
     }
     if (isArray(value)) {
-        const values = value.map((valueItem) => {
+        var values = value.map(function (valueItem) {
             return isString(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");

package/Bg/BgColor.js

@@ -1,31 +1,21 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { overlay } from "../styles";
 import { Container } from "../Grid";
-export const BgColor = styled.div `
-  background: ${(p) => p.$bg};
-`;
-export const BgColorSkewed = styled.div `
-  position: relative;
-  /* overflow: hidden; */
-
-  &:before {
-    z-index: -1;
-    content: "";
-    ${(p) => `
-      ${overlay}
-      transform: ${p.$transform};
-      background: ${p.$bg};
-    `}
-  }
-`;
-export const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, // 0.85,
-scaleX = 1, // 4,
-perspective = 0, //100,
-...containerProps }) => {
-    let $transform = "";
+export var BgColor = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (p) { return p.$bg; });
+export var BgColorSkewed = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"], ["\n  position: relative;\n  /* overflow: hidden; */\n\n  &:before {\n    z-index: -1;\n    content: \"\";\n    ", "\n  }\n"])), function (p) { return "\n      ".concat(overlay, "\n      transform: ").concat(p.$transform, ";\n      background: ").concat(p.$bg, ";\n    "); });
+export var BgContainer = function (_a) {
+    var color = _a.color, _b = _a.skewY, skewY = _b === void 0 ? 0 : _b, _c = _a.rotate, rotate = _c === void 0 ? 0 : _c, _d = _a.scaleY, scaleY = _d === void 0 ? 1 : _d, // 0.85,
+    _e = _a.scaleX, // 0.85,
+    scaleX = _e === void 0 ? 1 : _e, // 4,
+    _f = _a.perspective, // 4,
+    perspective = _f === void 0 ? 0 : _f, //100,
+    containerProps = __rest(_a, ["color", "skewY", "rotate", "scaleY", "scaleX", "perspective"]);
+    var $transform = "";
     if (skewY || rotate) {
-        $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
+        $transform = "perspective(".concat(perspective, "vw) rotateY(").concat(rotate, "deg) skewY(").concat(skewY, "deg) scaleY(").concat(scaleY, ") scaleX(").concat(scaleX, ")");
     }
-    return $transform ? (_jsx(BgColorSkewed, { "$bg": color, "$transform": $transform, children: _jsx(Container, { style: { position: "relative" }, ...containerProps }) })) : (_jsx(BgColor, { "$bg": color, children: _jsx(Container, { ...containerProps }) }));
+    return $transform ? (_jsx(BgColorSkewed, __assign({ "$bg": color, "$transform": $transform }, { children: _jsx(Container, __assign({ style: { position: "relative" } }, containerProps)) }))) : (_jsx(BgColor, __assign({ "$bg": color }, { children: _jsx(Container, __assign({}, containerProps)) })));
 };
+var templateObject_1, templateObject_2;

package/Bg/BgPhoto.js

@@ -1,59 +1,16 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Container } from "../Grid";
 import { Hidden } from "../Hidden";
-const BgPhotoWrap = styled(Hidden) `
-  z-index: -10;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  pointer-events: none;
-  background-repeat: no-repeat;
-  background-position: top left;
-  background-size: contain;
-  filter: hue-rotate(-36deg);
-  opacity: 0.8;
-`;
-const BgPhotoMask = styled(Container) `
-  position: relative;
-  min-height: 100%;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    right: calc(100% - ${(p) => p.$overlap + 2}px);
-    width: ${(p) => {
-    const containerSizePx = p.theme.breakpoints[p.containerSize];
-    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
-}};
-    background: linear-gradient(
-        90deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 100%
-      ),
-      linear-gradient(
-        60deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 70%
-      );
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: ${(p) => p.$overlap + 1}px;
-    width: 100vw;
-    background: var(--bodyBg);
-  }
-`;
-export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0, }) => {
-    const styledProps = { containerSize, $overlap };
-    return (_jsx(BgPhotoWrap, { style: { backgroundImage: `url(${src})` }, "$max": "xxl", children: _jsx(BgPhotoMask, { size: containerSize, ...styledProps }) }));
+var BgPhotoWrap = styled(Hidden)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"], ["\n  z-index: -10;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  background-repeat: no-repeat;\n  background-position: top left;\n  background-size: contain;\n  filter: hue-rotate(-36deg);\n  opacity: 0.8;\n"])));
+var BgPhotoMask = styled(Container)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"], ["\n  position: relative;\n  min-height: 100%;\n\n  &:before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    right: calc(100% - ", "px);\n    width: ", ";\n    background: linear-gradient(\n        90deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 100%\n      ),\n      linear-gradient(\n        60deg,\n        rgba(var(--bodyBg-rgb, 0)) 0%,\n        rgba(var(--bodyBg-rgb, 1)) 70%\n      );\n  }\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    height: 100%;\n    left: ", "px;\n    width: 100vw;\n    background: var(--bodyBg);\n  }\n"])), function (p) { return p.$overlap + 2; }, function (p) {
+    var containerSizePx = p.theme.breakpoints[p.containerSize];
+    return "calc(((100vw - ".concat(containerSizePx, "px) / 2) + ").concat(p.$overlap + 2, "px)");
+}, function (p) { return p.$overlap + 1; });
+export var BgPhoto = function (_a) {
+    var src = _a.src, _b = _a.containerSize, containerSize = _b === void 0 ? "xl" : _b, _c = _a.$overlap, $overlap = _c === void 0 ? 0 : _c;
+    var styledProps = { containerSize: containerSize, $overlap: $overlap };
+    return (_jsx(BgPhotoWrap, __assign({ style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl" }, { children: _jsx(BgPhotoMask, __assign({ size: containerSize }, styledProps)) })));
 };
+var templateObject_1, templateObject_2;

package/Bg/BgSvg.js

@@ -1,15 +1,12 @@
+import { __assign, __makeTemplateObject } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-const Root = styled.svg `
-  position: fixed;
-  z-index: -2;
-  bottom: 0;
-  transform: rotate(180deg);
-  opacity: 0.9;
-`;
+var Root = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"], ["\n  position: fixed;\n  z-index: -2;\n  bottom: 0;\n  transform: rotate(180deg);\n  opacity: 0.9;\n"])));
 /**
  * Centered triangle shape
  */
-export const BgSvg = ({ color }) => {
-    return (_jsx(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+export var BgSvg = function (_a) {
+    var color = _a.color;
+    return (_jsx(Root, __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none" }, { children: _jsx("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) })));
 };
+var templateObject_1;