@koine/react 1.1.9 → 1.1.11

package/Alert/Alert.js

@@ -1,10 +1,14 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-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 }) })));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var AlertRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__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"])));
+var Alert = function (_a) {
+    var $danger = _a.$danger, children = _a.children, props = tslib_1.__rest(_a, ["$danger", "children"]);
+    return ((0, jsx_runtime_1.jsx)(AlertRoot, tslib_1.__assign({ "$danger": $danger }, props, { children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) })));
 };
+exports.Alert = Alert;
 var templateObject_1, templateObject_2;

package/Alert/Alert.mjs

@@ -0,0 +1,10 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+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/Alert/index.js

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

package/Alert/index.mjs

@@ -0,0 +1 @@
+export * from "./Alert";

package/Alert/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Alert/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Animations/Reveal.js

@@ -1,17 +1,21 @@
-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 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"]);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reveal = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var framer_motion_1 = require("framer-motion");
+var useReveal_1 = require("./useReveal");
+var Reveal = function (_a) {
+    var children = _a.children, direction = _a.direction, offsetStartY = _a.offsetStartY, offsetEndY = _a.offsetEndY, offsetStartX = _a.offsetStartX, props = tslib_1.__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);
+    var prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
+    var _b = (0, useReveal_1.useReveal)(effectOptions), ref = _b.ref, startY = _b.startY, endY = _b.endY, startX = _b.startX;
+    var scrollYProgress = (0, framer_motion_1.useViewportScroll)().scrollYProgress;
+    var xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
+    var opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
+    var x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
+    var opacity = (0, framer_motion_1.useSpring)(opacityRange);
     // console.log("start, end", startY, endY)
-    return (_jsx(motion.div, __assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, tslib_1.__assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
 };
+exports.Reveal = Reveal;

package/Animations/Reveal.mjs

@@ -0,0 +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 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, __assign({}, props, { ref: ref, style: prefersReducedMotion ? {} : { x: x, opacity: opacity } }, { children: children })));
+};

package/Animations/Underline.js

@@ -1,5 +1,8 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-import { m } from "framer-motion";
-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"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnderlineSkewed = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var framer_motion_1 = require("framer-motion");
+exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i)(templateObject_1 || (templateObject_1 = tslib_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/Underline.mjs

@@ -0,0 +1,5 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+import { m } from "framer-motion";
+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/index.js

@@ -1,3 +1,6 @@
-export * from "./Reveal";
-export * from "./Underline";
-export * from "./useReveal";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Reveal"), exports);
+tslib_1.__exportStar(require("./Underline"), exports);
+tslib_1.__exportStar(require("./useReveal"), exports);

package/Animations/index.mjs

@@ -0,0 +1,3 @@
+export * from "./Reveal";
+export * from "./Underline";
+export * from "./useReveal";

package/Animations/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Animations/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Animations/useReveal.js

@@ -1,11 +1,14 @@
-import { useRef, useState, useEffect } from "react";
-export function useReveal(_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReveal = void 0;
+var react_1 = require("react");
+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 () {
+    var ref = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)(0), startY = _f[0], setStartY = _f[1];
+    var _g = (0, react_1.useState)(0), endY = _g[0], setEndY = _g[1];
+    var _h = (0, react_1.useState)(0), startX = _h[0], setStartX = _h[1];
+    (0, react_1.useEffect)(function () {
         if (!ref.current) {
             return;
         }
@@ -54,6 +57,7 @@ export function useReveal(_a) {
     ]);
     return { ref: ref, startY: startY, endY: endY, startX: startX };
 }
+exports.useReveal = useReveal;
 // function addMarker(top: string, color = "red", position = "absolute") {
 //   const div = document.createElement("div");
 //   div.setAttribute(

package/{node/Animations/useReveal.js → Animations/useReveal.mjs}

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReveal = void 0;
-var react_1 = require("react");
-function useReveal(_a) {
+import { useRef, useState, useEffect } from "react";
+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 = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(0), startY = _f[0], setStartY = _f[1];
-    var _g = (0, react_1.useState)(0), endY = _g[0], setEndY = _g[1];
-    var _h = (0, react_1.useState)(0), startX = _h[0], setStartX = _h[1];
-    (0, react_1.useEffect)(function () {
+    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;
         }
@@ -57,7 +54,6 @@ function useReveal(_a) {
     ]);
     return { ref: ref, startY: startY, endY: endY, startX: startX };
 }
-exports.useReveal = useReveal;
 // function addMarker(top: string, color = "red", position = "absolute") {
 //   const div = document.createElement("div");
 //   div.setAttribute(

package/Autocomplete/AutocompleteDownshift.js

@@ -1,5 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-export var Autocomplete = null;
+exports.Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -10,7 +13,7 @@ export var Autocomplete = null;
 //   CSSProperties,
 // } from "react";
 // import { useCombobox } from "downshift";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // // import debounce from "lodash.debounce";
 // import {
 //   AutocompleteRoot,

package/{node/Autocomplete/AutocompleteDownshift.js → Autocomplete/AutocompleteDownshift.mjs}

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-exports.Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -13,7 +10,7 @@ exports.Autocomplete = null;
 //   CSSProperties,
 // } from "react";
 // import { useCombobox } from "downshift";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // // import debounce from "lodash.debounce";
 // import {
 //   AutocompleteRoot,

package/Autocomplete/AutocompleteDownshiftMultiselect.js

@@ -1,5 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-export var Autocomplete = null;
+exports.Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -11,7 +14,7 @@ export var Autocomplete = null;
 //   ComponentPropsWithRef,
 //   CSSProperties,
 // } from "react";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // import {
 //   useCombobox,
 //   useMultipleSelection,

package/{node/Autocomplete/AutocompleteDownshiftMultiselect.js → Autocomplete/AutocompleteDownshiftMultiselect.mjs}

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-exports.Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -14,7 +11,7 @@ exports.Autocomplete = null;
 //   ComponentPropsWithRef,
 //   CSSProperties,
 // } from "react";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // import {
 //   useCombobox,
 //   useMultipleSelection,

package/Autocomplete/AutocompleteMui.js

@@ -1,18 +1,15 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { 
-// forwardRef,
-useCallback, useMemo, useState, } from "react";
-import { useAutocomplete } from "@mui/base/AutocompleteUnstyled";
-import { isString } from "@koine/utils";
-import { 
-// triggerOnChange,
-normaliseOptions, } from "../Forms/helpers";
-import { normaliseAutocompleteValue } from "./helpers";
-import { AutocompleteRoot, AutocompleteLabel, AutocompleteWrap, AutocompleteInner, AutocompleteItem, AutocompleteItemLabel, AutocompleteItemRemove, 
-// AutocompleteInputWrap,
-AutocompleteInput, AutocompleteInputArrow, AutocompleteMenu, AutocompleteMenuItem, } from "./components";
-import { InputProgress } from "../Forms/styles";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+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 isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
+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).
  *
@@ -61,14 +58,14 @@ import { InputProgress } from "../Forms/styles";
 //  },
 //  ref
 // ) {
-export var Autocomplete = function (_a) {
+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({
+    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,
@@ -89,12 +86,12 @@ export var Autocomplete = function (_a) {
         //   () => normaliseAutocompleteValue(defaultValue, multiple),
         //   [defaultValue]
         // ),
-        options: useMemo(function () { return (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: useCallback(function (_event, inputValue) { return __awaiter(void 0, void 0, void 0, function () {
+        onInputChange: (0, react_1.useCallback)(function (_event, inputValue) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
             var newOptions, e_1;
-            return __generator(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!loadOptions) {
@@ -128,7 +125,7 @@ export var Autocomplete = function (_a) {
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
         onChange: function (event, newValue) {
-            var value = normaliseAutocompleteValue(newValue, multiple);
+            var value = (0, helpers_2.normaliseAutocompleteValue)(newValue, multiple);
             // @ts-expect-error FIXME: how?
             if (onChange)
                 onChange(newValue);
@@ -138,13 +135,13 @@ export var Autocomplete = function (_a) {
         },
         // support both freeSolo free text and full option structure
         isOptionEqualToValue: function (option, value) {
-            var optValue = isString(option) ? option : option.value;
-            var valValue = isString(value) ? value : value.value;
+            var optValue = (0, isString_1.default)(option) ? option : option.value;
+            var valValue = (0, isString_1.default)(value) ? value : value.value;
             return optValue === valValue;
         },
         getOptionLabel: function (option) {
             // @ts-expect-error TODO: I don't get this error
-            return isString(option) ? option : option.label || "";
+            return (0, isString_1.default)(option) ? option : option.label || "";
         },
     }), 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;
@@ -158,10 +155,10 @@ export var Autocomplete = function (_a) {
                 ref: autocompleteProps.ref.current,
                 // this makes the validation works when a valid `defaultValue`
                 // is provided
-                value: normaliseAutocompleteValue(value, multiple),
+                value: (0, helpers_2.normaliseAutocompleteValue)(value, multiple),
             })
             : {};
-        return __assign(__assign({}, registerProps), autocompleteProps);
+        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
@@ -171,12 +168,13 @@ export var Autocomplete = function (_a) {
     //     inputProps.ref.current.focus();
     //   }
     // }, [errors, name, inputProps.ref]);
-    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 &&
+    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 = __rest(_a, ["onDelete", "key"]);
-                                    return (_jsxs(AutocompleteItem, __assign({}, tagProps, { children: [_jsx(AutocompleteItemLabel, { children: isString(valueItem)
+                                    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, isString_1.default)(valueItem)
                                                     ? valueItem
-                                                    : 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] }));
+                                                    : 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, isString_1.default)(option) ? option : option.Label || option.label }), index)); }) }))) : null, children] }));
     // });
 };
+exports.Autocomplete = Autocomplete;

package/{node/Autocomplete/AutocompleteMui.js → Autocomplete/AutocompleteMui.mjs}

@@ -1,15 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-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");
+import { __assign, __awaiter, __generator, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 
+// forwardRef,
+useCallback, useMemo, useState, } from "react";
+import { useAutocomplete } from "@mui/base/AutocompleteUnstyled";
+import isString from "@koine/utils/isString";
+import { 
+// triggerOnChange,
+normaliseOptions, } from "../Forms/helpers";
+import { normaliseAutocompleteValue } from "./helpers";
+import { AutocompleteRoot, AutocompleteLabel, AutocompleteWrap, AutocompleteInner, AutocompleteItem, AutocompleteItemLabel, AutocompleteItemRemove, 
+// AutocompleteInputWrap,
+AutocompleteInput, AutocompleteInputArrow, AutocompleteMenu, AutocompleteMenuItem, } from "./components";
+import { InputProgress } from "../Forms/styles";
 /**
  * Autocomplete/autocomplete component based on [`@mui useAutocomplete hook`](https://mui.com/components/autocomplete/#useautocomplete).
  *
@@ -58,14 +61,14 @@ var styles_1 = require("../Forms/styles");
 //  },
 //  ref
 // ) {
-var Autocomplete = function (_a) {
+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 = 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)({
+    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,
@@ -86,12 +89,12 @@ var Autocomplete = function (_a) {
         //   () => normaliseAutocompleteValue(defaultValue, multiple),
         //   [defaultValue]
         // ),
-        options: (0, react_1.useMemo)(function () { return (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: (0, react_1.useCallback)(function (_event, inputValue) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        onInputChange: useCallback(function (_event, inputValue) { return __awaiter(void 0, void 0, void 0, function () {
             var newOptions, e_1;
-            return tslib_1.__generator(this, function (_a) {
+            return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (!loadOptions) {
@@ -125,7 +128,7 @@ var Autocomplete = function (_a) {
         // TODO: check if we need this, probably, and check how to structure the
         // callback, here we get the actual input event
         onChange: function (event, newValue) {
-            var value = (0, helpers_2.normaliseAutocompleteValue)(newValue, multiple);
+            var value = normaliseAutocompleteValue(newValue, multiple);
             // @ts-expect-error FIXME: how?
             if (onChange)
                 onChange(newValue);
@@ -135,13 +138,13 @@ var Autocomplete = function (_a) {
         },
         // support both freeSolo free text and full option structure
         isOptionEqualToValue: function (option, value) {
-            var optValue = (0, utils_1.isString)(option) ? option : option.value;
-            var valValue = (0, utils_1.isString)(value) ? value : value.value;
+            var optValue = isString(option) ? option : option.value;
+            var valValue = isString(value) ? value : value.value;
             return optValue === valValue;
         },
         getOptionLabel: function (option) {
             // @ts-expect-error TODO: I don't get this error
-            return (0, utils_1.isString)(option) ? option : option.label || "";
+            return isString(option) ? option : option.label || "";
         },
     }), 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;
@@ -155,10 +158,10 @@ var Autocomplete = function (_a) {
                 ref: autocompleteProps.ref.current,
                 // this makes the validation works when a valid `defaultValue`
                 // is provided
-                value: (0, helpers_2.normaliseAutocompleteValue)(value, multiple),
+                value: normaliseAutocompleteValue(value, multiple),
             })
             : {};
-        return tslib_1.__assign(tslib_1.__assign({}, registerProps), autocompleteProps);
+        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
@@ -168,13 +171,12 @@ var Autocomplete = function (_a) {
     //     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, 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 &&
+    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 = 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)
+                                    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 }), (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] }));
+                                                    : 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] }));
     // });
 };
-exports.Autocomplete = Autocomplete;

package/Autocomplete/AutocompleteReach.js

@@ -1,5 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-export var Autocomplete = null;
+exports.Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -24,7 +27,7 @@ export var Autocomplete = null;
 //   AutocompleteLabel,
 // } from "./components";
 // import type { Option } from "../types";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // export type AutocompleteOption =
 //   | null
 //   | (Option & {

package/{node/Autocomplete/AutocompleteReach.js → Autocomplete/AutocompleteReach.mjs}

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
 // TODO: remove, just use mui version...
-exports.Autocomplete = null;
+export var Autocomplete = null;
 // import {
 //   forwardRef,
 //   useCallback,
@@ -27,7 +24,7 @@ exports.Autocomplete = null;
 //   AutocompleteLabel,
 // } from "./components";
 // import type { Option } from "../types";
-// import { SetRequired } from "@koine/utils";
+// import type { SetRequired } from "@koine/utils";
 // export type AutocompleteOption =
 //   | null
 //   | (Option & {