@koine/react 1.0.11 → 1.0.12

package/node/Autocomplete/AutocompleteMui.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const AutocompleteUnstyled_1 = require("@mui/base/AutocompleteUnstyled");
-const utils_1 = require("@koine/utils");
-const helpers_1 = require("../Forms/helpers");
-const helpers_2 = require("./helpers");
-const components_1 = require("./components");
-const styles_1 = require("../Forms/styles");
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var AutocompleteUnstyled_1 = require("@mui/base/AutocompleteUnstyled");
+var utils_1 = require("@koine/utils");
+var helpers_1 = require("../Forms/helpers");
+var helpers_2 = require("./helpers");
+var components_1 = require("./components");
+var styles_1 = require("../Forms/styles");
 /**
  * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete).
  *
@@ -57,13 +58,14 @@ const styles_1 = require("../Forms/styles");
 //  },
 //  ref
 // ) {
-const Autocomplete = ({ creatable, multiple, autoComplete, loadOptions, options: defaultOptions = [], defaultValue, value: controlledValue, defaultInputValue, label, placeholder, register, setValue, 
-// trigger,
-name, onChange, $ref, children, ...props }) => {
-    const defaultOptionsMemo = (0, react_1.useMemo)(() => (0, helpers_1.normaliseOptions)(defaultOptions), [defaultOptions]);
-    const [options, setOptions] = (0, react_1.useState)(defaultOptionsMemo);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const { getRootProps, getInputLabelProps, getInputProps, getTagProps, getListboxProps, getOptionProps, getPopupIndicatorProps, groupedOptions, value: stateValue, setAnchorEl, popupOpen, focused, } = (0, AutocompleteUnstyled_1.useAutocomplete)({
+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 = tslib_1.__rest(_a, ["creatable", "multiple", "autoComplete", "loadOptions", "options", "defaultValue", "value", "defaultInputValue", "label", "placeholder", "register", "setValue", "name", "onChange", "$ref", "children"]);
+    var defaultOptionsMemo = (0, react_1.useMemo)(function () { return (0, helpers_1.normaliseOptions)(defaultOptions); }, [defaultOptions]);
+    var _c = (0, react_1.useState)(defaultOptionsMemo), options = _c[0], setOptions = _c[1];
+    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
+    var _e = (0, AutocompleteUnstyled_1.useAutocomplete)({
         id: "Autocomplete",
         multiple: multiple ? true : undefined,
         freeSolo: creatable ? true : undefined,
@@ -77,43 +79,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: (0, react_1.useMemo)(() => (loadOptions ? options : defaultOptions), [loadOptions, options, defaultOptions]),
+        options: (0, react_1.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: (0, react_1.useCallback)(async (_event, inputValue) => {
-            if (!loadOptions) {
-                return;
-            }
-            if (inputValue) {
-                setLoading(true);
-                try {
-                    const newOptions = await loadOptions(inputValue);
-                    setOptions(newOptions);
+        onInputChange: (0, react_1.useCallback)(function (_event, inputValue) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+            var newOptions, e_1;
+            return tslib_1.__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 = (0, helpers_2.normaliseAutocompleteValue)(newValue, multiple);
+        onChange: function (event, newValue) {
+            var value = (0, helpers_2.normaliseAutocompleteValue)(newValue, multiple);
             // @ts-expect-error FIXME: how?
             if (onChange)
                 onChange(newValue);
@@ -122,22 +134,22 @@ name, onChange, $ref, children, ...props }) => {
             // triggerOnChange(onChange, name, value);
         },
         // support both freeSolo free text and full option structure
-        isOptionEqualToValue: (option, value) => {
-            const optValue = (0, utils_1.isString)(option) ? option : option.value;
-            const valValue = (0, utils_1.isString)(value) ? value : value.value;
+        isOptionEqualToValue: function (option, value) {
+            var optValue = (0, utils_1.isString)(option) ? option : option.value;
+            var valValue = (0, utils_1.isString)(value) ? value : value.value;
             return optValue === valValue;
         },
-        getOptionLabel: (option) => {
+        getOptionLabel: function (option) {
             // @ts-expect-error TODO: I don't get this error
             return (0, utils_1.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,
@@ -146,14 +158,7 @@ name, onChange, $ref, children, ...props }) => {
                 value: (0, helpers_2.normaliseAutocompleteValue)(value, multiple),
             })
             : {};
-        return {
-            ...registerProps,
-            ...autocompleteProps,
-            // onChange: (event: FormEvent<HTMLInputElement>) => {
-            //   registerProps.onChange(event);
-            //   autocompleteProps?.onChange(event);
-            // },
-        };
+        return tslib_1.__assign(tslib_1.__assign({}, registerProps), autocompleteProps);
     };
     // to focus the input on error this works too
     // @see https://react-hook-form.com/faqs#question12 but probably it is
@@ -163,13 +168,13 @@ name, onChange, $ref, children, ...props }) => {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteRoot, { children: [label && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteLabel, { ...getInputLabelProps(), children: label })), (0, jsx_runtime_1.jsxs)(components_1.AutocompleteWrap, { ...getRootProps(), "data-focus": focused, children: [(0, jsx_runtime_1.jsxs)(components_1.AutocompleteInner, { ref: setAnchorEl, children: [multiple &&
-                                value.map((valueItem, index) => {
-                                    const { onDelete, key, ...tagProps } = getTagProps({ index });
-                                    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteItem, { ...tagProps, children: [(0, jsx_runtime_1.jsx)(components_1.AutocompleteItemLabel, { children: (0, utils_1.isString)(valueItem)
+    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteRoot, { children: [label && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteLabel, tslib_1.__assign({}, getInputLabelProps(), { children: label }))), (0, jsx_runtime_1.jsxs)(components_1.AutocompleteWrap, tslib_1.__assign({}, getRootProps(), { "data-focus": focused }, { children: [(0, jsx_runtime_1.jsxs)(components_1.AutocompleteInner, tslib_1.__assign({ ref: setAnchorEl }, { children: [multiple &&
+                                value.map(function (valueItem, index) {
+                                    var _a = getTagProps({ index: index }), onDelete = _a.onDelete, key = _a.key, tagProps = tslib_1.__rest(_a, ["onDelete", "key"]);
+                                    return ((0, jsx_runtime_1.jsxs)(components_1.AutocompleteItem, tslib_1.__assign({}, tagProps, { children: [(0, jsx_runtime_1.jsx)(components_1.AutocompleteItemLabel, { children: (0, utils_1.isString)(valueItem)
                                                     ? valueItem
-                                                    : valueItem.Label || valueItem.label }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteItemRemove, { onClick: onDelete, children: "\u2715" })] }, key));
-                                }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteInput, { ...inputProps(), placeholder: placeholder })] }), !!options.length && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteInputArrow, { ...getPopupIndicatorProps(), isOpen: popupOpen })), loading && (0, jsx_runtime_1.jsx)(styles_1.InputProgress, {})] }), groupedOptions.length ? ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenu, { ...getListboxProps(), children: groupedOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenuItem, { ...getOptionProps({ option, index }), children: (0, utils_1.isString)(option) ? option : option.Label || option.label }, index))) })) : null, children] }));
+                                                    : valueItem.Label || valueItem.label }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteItemRemove, tslib_1.__assign({ onClick: onDelete }, { children: "\u2715" }))] }), key));
+                                }), (0, jsx_runtime_1.jsx)(components_1.AutocompleteInput, tslib_1.__assign({}, inputProps(), { placeholder: placeholder }))] })), !!options.length && ((0, jsx_runtime_1.jsx)(components_1.AutocompleteInputArrow, tslib_1.__assign({}, getPopupIndicatorProps(), { isOpen: popupOpen }))), loading && (0, jsx_runtime_1.jsx)(styles_1.InputProgress, {})] })), groupedOptions.length ? ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenu, tslib_1.__assign({}, getListboxProps(), { children: groupedOptions.map(function (option, index) { return ((0, jsx_runtime_1.jsx)(components_1.AutocompleteMenuItem, tslib_1.__assign({}, getOptionProps({ option: option, index: index }), { children: (0, utils_1.isString)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
     // });
 };
 exports.Autocomplete = Autocomplete;

package/node/Autocomplete/components.js

@@ -1,93 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutocompleteMenuItem = exports.AutocompleteMenu = exports.AutocompleteInputArrow = exports.AutocompleteInput = exports.AutocompleteInputWrap = exports.AutocompleteItemRemove = exports.AutocompleteItemLabel = exports.AutocompleteItem = exports.AutocompleteInner = exports.AutocompleteWrap = exports.AutocompleteLabel = exports.AutocompleteRoot = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Label_1 = require("../Forms/Label/Label");
-const Input_1 = require("../Forms/Input/Input");
-const components_1 = require("../Select/components");
-const Menu_1 = require("../Menu/Menu");
-const MenuItem_1 = require("../MenuItem/MenuItem");
-const Buttons_1 = require("../Buttons");
-const styles_1 = require("../Forms/styles");
-const styled_1 = require("../styles/styled");
-const AUTOCOMPLETE_ITEM_GUTTER = 3;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Label_1 = require("../Forms/Label/Label");
+var Input_1 = require("../Forms/Input/Input");
+var components_1 = require("../Select/components");
+var Menu_1 = require("../Menu/Menu");
+var MenuItem_1 = require("../MenuItem/MenuItem");
+var Buttons_1 = require("../Buttons");
+var styles_1 = require("../Forms/styles");
+var styled_1 = require("../styles/styled");
+var AUTOCOMPLETE_ITEM_GUTTER = 3;
 /**
  * Space between one selected item and the other
  */
-const AUTOCOMPLETE_ITEM_SPACER = 6;
-const AUTOCOMPLETE_ITEM_REMOVE_WIDTH = 20;
-exports.AutocompleteRoot = styled_components_1.default.div `
-  position: relative;
-`;
-exports.AutocompleteLabel = (0, styled_components_1.default)(Label_1.Label) ``;
-exports.AutocompleteWrap = (0, styled_components_1.default)(Input_1.InputWrap) `
-  ${styles_1.inputReset}
-`;
-exports.AutocompleteInner = (0, styled_components_1.default)(Input_1.InputMain) `
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin: -${AUTOCOMPLETE_ITEM_SPACER}px;
-  margin-right: 0;
-`;
-exports.AutocompleteItem = styled_components_1.default.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);
-  }
-`;
-exports.AutocompleteItemLabel = styled_components_1.default.span `
-  padding: 0 ${AUTOCOMPLETE_ITEM_GUTTER}px;
-  ${styled_1.ellipsis}
-`;
-exports.AutocompleteItemRemove = styled_components_1.default.span `
-  ${Buttons_1.btnStyleReset}
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: ${AUTOCOMPLETE_ITEM_REMOVE_WIDTH}px;
-  border: 0;
-  height: 100%;
-  color: inherit;
-  line-height: 1;
-`;
-exports.AutocompleteInputWrap = styled_components_1.default.div `
-  display: flex;
-  flex: 1;
-`;
-exports.AutocompleteInput = styled_components_1.default.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;
+exports.AutocompleteRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.AutocompleteLabel = (0, styled_components_1.default)(Label_1.Label)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
+exports.AutocompleteWrap = (0, styled_components_1.default)(Input_1.InputWrap)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styles_1.inputReset);
+exports.AutocompleteInner = (0, styled_components_1.default)(Input_1.InputMain)(templateObject_4 || (templateObject_4 = tslib_1.__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);
+exports.AutocompleteItem = styled_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__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);
+exports.AutocompleteItemLabel = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  padding: 0 ", "px;\n  ", "\n"], ["\n  padding: 0 ", "px;\n  ", "\n"])), AUTOCOMPLETE_ITEM_GUTTER, styled_1.ellipsis);
+exports.AutocompleteItemRemove = styled_components_1.default.span(templateObject_7 || (templateObject_7 = tslib_1.__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"])), Buttons_1.btnStyleReset, AUTOCOMPLETE_ITEM_REMOVE_WIDTH);
+exports.AutocompleteInputWrap = styled_components_1.default.div(templateObject_8 || (templateObject_8 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n"], ["\n  display: flex;\n  flex: 1;\n"])));
+exports.AutocompleteInput = styled_components_1.default.input(templateObject_9 || (templateObject_9 = tslib_1.__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>`
  */
-exports.AutocompleteInputArrow = (0, styled_components_1.default)(components_1.SelectArrow) ``;
-exports.AutocompleteMenu = (0, styled_components_1.default)(Menu_1.Menu) ``;
-exports.AutocompleteMenuItem = (0, styled_components_1.default)(MenuItem_1.MenuItem) ``;
+exports.AutocompleteInputArrow = (0, styled_components_1.default)(components_1.SelectArrow)(templateObject_10 || (templateObject_10 = tslib_1.__makeTemplateObject([""], [""])));
+exports.AutocompleteMenu = (0, styled_components_1.default)(Menu_1.Menu)(templateObject_11 || (templateObject_11 = tslib_1.__makeTemplateObject([""], [""])));
+exports.AutocompleteMenuItem = (0, styled_components_1.default)(MenuItem_1.MenuItem)(templateObject_12 || (templateObject_12 = tslib_1.__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/node/Autocomplete/helpers.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normaliseAutocompleteValue = void 0;
-const utils_1 = require("@koine/utils");
+var utils_1 = require("@koine/utils");
 // export function normaliseAutocompleteValue(
 //   value?: AutocompleteValue,
 //   asArray?: true
@@ -22,7 +22,7 @@ function normaliseAutocompleteValue(value, asArray) {
         return asArray ? [value] : value;
     }
     if ((0, utils_1.isArray)(value)) {
-        const values = value.map((valueItem) => {
+        var values = value.map(function (valueItem) {
             return (0, utils_1.isString)(valueItem) ? valueItem : valueItem.value;
         });
         return asArray ? values : values.join(",");

package/node/Bg/BgColor.js

@@ -1,36 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BgContainer = exports.BgColorSkewed = exports.BgColor = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const styles_1 = require("../styles");
-const Grid_1 = require("../Grid");
-exports.BgColor = styled_components_1.default.div `
-  background: ${(p) => p.$bg};
-`;
-exports.BgColorSkewed = styled_components_1.default.div `
-  position: relative;
-  /* overflow: hidden; */
-
-  &:before {
-    z-index: -1;
-    content: "";
-    ${(p) => `
-      ${styles_1.overlay}
-      transform: ${p.$transform};
-      background: ${p.$bg};
-    `}
-  }
-`;
-const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, // 0.85,
-scaleX = 1, // 4,
-perspective = 0, //100,
-...containerProps }) => {
-    let $transform = "";
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var styles_1 = require("../styles");
+var Grid_1 = require("../Grid");
+exports.BgColor = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (p) { return p.$bg; });
+exports.BgColorSkewed = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__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(styles_1.overlay, "\n      transform: ").concat(p.$transform, ";\n      background: ").concat(p.$bg, ";\n    "); });
+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 = tslib_1.__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 ? ((0, jsx_runtime_1.jsx)(exports.BgColorSkewed, { "$bg": color, "$transform": $transform, children: (0, jsx_runtime_1.jsx)(Grid_1.Container, { style: { position: "relative" }, ...containerProps }) })) : ((0, jsx_runtime_1.jsx)(exports.BgColor, { "$bg": color, children: (0, jsx_runtime_1.jsx)(Grid_1.Container, { ...containerProps }) }));
+    return $transform ? ((0, jsx_runtime_1.jsx)(exports.BgColorSkewed, tslib_1.__assign({ "$bg": color, "$transform": $transform }, { children: (0, jsx_runtime_1.jsx)(Grid_1.Container, tslib_1.__assign({ style: { position: "relative" } }, containerProps)) }))) : ((0, jsx_runtime_1.jsx)(exports.BgColor, tslib_1.__assign({ "$bg": color }, { children: (0, jsx_runtime_1.jsx)(Grid_1.Container, tslib_1.__assign({}, containerProps)) })));
 };
 exports.BgContainer = BgContainer;
+var templateObject_1, templateObject_2;

package/node/Bg/BgPhoto.js

@@ -1,64 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BgPhoto = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Grid_1 = require("../Grid");
-const Hidden_1 = require("../Hidden");
-const BgPhotoWrap = (0, styled_components_1.default)(Hidden_1.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 = (0, styled_components_1.default)(Grid_1.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);
-  }
-`;
-const BgPhoto = ({ src, containerSize = "xl", $overlap = 0, }) => {
-    const styledProps = { containerSize, $overlap };
-    return ((0, jsx_runtime_1.jsx)(BgPhotoWrap, { style: { backgroundImage: `url(${src})` }, "$max": "xxl", children: (0, jsx_runtime_1.jsx)(BgPhotoMask, { size: containerSize, ...styledProps }) }));
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Grid_1 = require("../Grid");
+var Hidden_1 = require("../Hidden");
+var BgPhotoWrap = (0, styled_components_1.default)(Hidden_1.Hidden)(templateObject_1 || (templateObject_1 = tslib_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 = (0, styled_components_1.default)(Grid_1.Container)(templateObject_2 || (templateObject_2 = tslib_1.__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; });
+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 ((0, jsx_runtime_1.jsx)(BgPhotoWrap, tslib_1.__assign({ style: { backgroundImage: "url(".concat(src, ")") }, "$max": "xxl" }, { children: (0, jsx_runtime_1.jsx)(BgPhotoMask, tslib_1.__assign({ size: containerSize }, styledProps)) })));
 };
 exports.BgPhoto = BgPhoto;
+var templateObject_1, templateObject_2;

package/node/Bg/BgSvg.js

@@ -1,20 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BgSvg = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const Root = styled_components_1.default.svg `
-  position: fixed;
-  z-index: -2;
-  bottom: 0;
-  transform: rotate(180deg);
-  opacity: 0.9;
-`;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var Root = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_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
  */
-const BgSvg = ({ color }) => {
-    return ((0, jsx_runtime_1.jsx)(Root, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) }));
+var BgSvg = function (_a) {
+    var color = _a.color;
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1200 120", preserveAspectRatio: "none" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1200 0L0 0 598.97 114.72 1200 0z", fill: color }) })));
 };
 exports.BgSvg = BgSvg;
+var templateObject_1;

package/node/Bg/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./BgColor"), exports);
 tslib_1.__exportStar(require("./BgPhoto"), exports);
 tslib_1.__exportStar(require("./BgSvg"), exports);

package/node/Breadcrumbs/Breadcrumbs.js

@@ -1,72 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineBreadcrumbs = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importStar(require("styled-components"));
-const framer_motion_1 = require("framer-motion");
-const md_1 = require("react-icons/md");
-const utils_1 = require("@koine/utils");
-const media_1 = require("../styles/media");
-const LINK_GUTTER_X = 10;
-const Root = styled_components_1.default.nav `
-  display: flex;
-  position: relative;
-`;
-const Inner = styled_components_1.default.div `
-  display: flex;
-  font-size: 11px;
-  color: var(--grey100);
-  ${media_1.min.sm} {
-    font-size: 12px;
-  }
-  ${media_1.max.lg} {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-`;
-const Item = (0, styled_components_1.default)(framer_motion_1.m.div) `
-  display: flex;
-  align-items: center;
-  /* margin: 0 10px 0 0; */
-
-  &:first-child {
-    margin-left: -${LINK_GUTTER_X / 2}px;
-  }
-  ${media_1.min.sm} {
-    &:first-child {
-      margin-left: -${LINK_GUTTER_X}px;
-    }
-  }
-`;
-const itemChild = (0, styled_components_1.css) `
-  display: block;
-  padding: 10px ${LINK_GUTTER_X / 2}px;
-
-  ${media_1.min.sm} {
-    padding: 10px ${LINK_GUTTER_X}px;
-  }
-`;
-const ItemLink = styled_components_1.default.a `
-  ${itemChild}
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const ItemCurrent = styled_components_1.default.span `
-  ${itemChild}
-`;
-const ItemSeparator = (0, styled_components_1.default)(md_1.MdKeyboardArrowRight) ``;
-const KoineBreadcrumbs = ({ items = [], Link, ...props }) => {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importStar(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+var md_1 = require("react-icons/md");
+var utils_1 = require("@koine/utils");
+var media_1 = require("../styles/media");
+var LINK_GUTTER_X = 10;
+var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  position: relative;\n"], ["\n  display: flex;\n  position: relative;\n"])));
+var Inner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  display: flex;\n  font-size: 11px;\n  color: var(--grey100);\n  ", " {\n    font-size: 12px;\n  }\n  ", " {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), media_1.min.sm, media_1.max.lg);
+var Item = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin: 0 10px 0 0; */\n\n  &:first-child {\n    margin-left: -", "px;\n  }\n  ", " {\n    &:first-child {\n      margin-left: -", "px;\n    }\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
+var itemChild = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"], ["\n  display: block;\n  padding: 10px ", "px;\n\n  ", " {\n    padding: 10px ", "px;\n  }\n"])), LINK_GUTTER_X / 2, media_1.min.sm, LINK_GUTTER_X);
+var ItemLink = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  ", "\n  text-decoration: none;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), itemChild);
+var ItemCurrent = styled_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), itemChild);
+var ItemSeparator = (0, styled_components_1.default)(md_1.MdKeyboardArrowRight)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject([""], [""])));
+var KoineBreadcrumbs = function (_a) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, Link = _a.Link, props = tslib_1.__rest(_a, ["items", "Link"]);
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, { ...props, children: (0, jsx_runtime_1.jsx)(Inner, { children: items.map((item, idx) => ((0, jsx_runtime_1.jsxs)(Item, { initial: { opacity: 0, x: 20 }, animate: {
+    return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({}, props, { children: (0, jsx_runtime_1.jsx)(Inner, { children: items.map(function (item, idx) { return ((0, jsx_runtime_1.jsxs)(Item, tslib_1.__assign({ initial: { opacity: 0, x: 20 }, animate: {
                     opacity: 1,
                     x: 0,
                     transition: { delay: idx * 0.2 },
-                }, children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, { as: Link, href: item.url, children: (0, utils_1.titleCase)(item.title) })), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, utils_1.titleCase)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }, idx))) }) }));
+                } }, { children: [item.url && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: item.url }, { children: (0, utils_1.titleCase)(item.title) }))), !item.url && (0, jsx_runtime_1.jsx)(ItemCurrent, { children: (0, utils_1.titleCase)(item.title) }), idx < items.length - 1 && (0, jsx_runtime_1.jsx)(ItemSeparator, {})] }), idx)); }) }) })));
 };
 exports.KoineBreadcrumbs = KoineBreadcrumbs;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/node/Breadcrumbs/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Breadcrumbs"), exports);