allaw-ui 4.2.7 → 4.2.9

package/dist/components/atoms/selects/ComboBox.css

@@ -152,3 +152,17 @@
 .combo-box-hovered {
   border-color: var(--venom-grey-dark, #d1dce8);
 }
+
+.listOpen {
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/atoms/selects/ComboBox.js

@@ -160,7 +160,7 @@ function ComboBox(_a, ref) {
                 React.createElement("i", { className: "allaw-icon-".concat(isInputValid ? "chevron-down" : "close") }))),
         isOpen &&
             filteredItems.length > 0 &&
-            createPortal(React.createElement("div", { ref: listRef, className: "combo-box-list", style: {
+            createPortal(React.createElement("div", { ref: listRef, className: "combo-box-list listOpen", style: {
                     top: "".concat(listPosition.top, "px"),
                     left: "".concat(listPosition.left, "px"),
                     width: "".concat(listPosition.width, "px"),

package/dist/components/atoms/selects/Select.js

@@ -201,7 +201,7 @@ function Select(_a, ref) {
         }
         return function () { };
     }, [isOpen]);
-    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "".concat(styles.selectList, " ").concat(isOpen ? styles.visible : "", " ").concat(placement), style: {
+    var renderList = function () { return (React.createElement("div", { ref: listRef, className: "".concat(styles.selectList, " ").concat(styles.listOpen, " ").concat(isOpen ? styles.visible : "", " ").concat(placement), style: {
             position: "fixed",
             top: "".concat(listPosition.top, "px"),
             left: "".concat(listPosition.left, "px"),

package/dist/components/atoms/selects/Select.module.css

@@ -206,3 +206,17 @@
 .selectRequireAttention:focus {
   border-color: #1d9cc9 !important;
 }
+
+.listOpen {
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/molecules/phoneNumberField/CountrySelect.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface CountrySelectProps {
+    items: Array<{
+        value: string;
+        label: string;
+        flagEmoji?: string;
+        flagUrl?: string;
+        code: string;
+    }>;
+    defaultCountry?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    buttonWidth?: string | number;
+    listWidth?: string | number;
+    onSelect?: (value: string) => void;
+    onError?: (msg: string) => void;
+    disableAutofill?: boolean;
+}
+declare const CountrySelect: React.FC<CountrySelectProps>;
+export default CountrySelect;

package/dist/components/molecules/phoneNumberField/CountrySelect.js

@@ -0,0 +1,145 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import styles from "./countrySelect.module.css";
+import selectStyles from "../../atoms/selects/Select.module.css";
+var CountrySelect = function (_a) {
+    var items = _a.items, defaultCountry = _a.defaultCountry, isRequired = _a.isRequired, disabled = _a.disabled, _b = _a.buttonWidth, buttonWidth = _b === void 0 ? 80 : _b, _c = _a.listWidth, listWidth = _c === void 0 ? 200 : _c, onSelect = _a.onSelect, onError = _a.onError, _d = _a.disableAutofill, disableAutofill = _d === void 0 ? true : _d;
+    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
+    var _f = useState(defaultCountry || ""), selected = _f[0], setSelected = _f[1];
+    var _g = useState(""), search = _g[0], setSearch = _g[1];
+    var _h = useState(""), error = _h[0], setError = _h[1];
+    var _j = useState(-1), highlighted = _j[0], setHighlighted = _j[1];
+    var buttonRef = useRef(null);
+    var _k = useState({ top: 0, left: 0, width: Number(listWidth) || 200 }), listPos = _k[0], setListPos = _k[1];
+    useEffect(function () {
+        setSelected(defaultCountry || "");
+    }, [defaultCountry]);
+    useEffect(function () {
+        if (!isOpen)
+            setSearch("");
+    }, [isOpen]);
+    useEffect(function () {
+        if (isOpen && buttonRef.current) {
+            var rect = buttonRef.current.getBoundingClientRect();
+            var btnW = typeof buttonWidth === "number" ? buttonWidth : rect.width;
+            var lstW = typeof listWidth === "number" ? listWidth : rect.width;
+            var left = rect.left + window.scrollX + (btnW - lstW) / 2;
+            // Décalage intelligent si la liste sort de l'écran
+            var minMargin = 8;
+            if (left < minMargin)
+                left = minMargin;
+            if (left + lstW > window.innerWidth - minMargin)
+                left = window.innerWidth - minMargin - lstW;
+            setListPos({
+                top: rect.bottom + window.scrollY,
+                left: left,
+                width: lstW,
+            });
+        }
+    }, [isOpen, listWidth, buttonWidth]);
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleClick = function (e) {
+            if (buttonRef.current && !buttonRef.current.contains(e.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClick);
+        return function () { return document.removeEventListener("mousedown", handleClick); };
+    }, [isOpen]);
+    var filtered = items.filter(function (item) {
+        return item.label.toLowerCase().includes(search.toLowerCase()) ||
+            item.code.replace("+", "").includes(search.replace("+", ""));
+    });
+    var handleSelect = function (value) {
+        setSelected(value);
+        setIsOpen(false);
+        setError("");
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+        onError === null || onError === void 0 ? void 0 : onError("");
+    };
+    var handleBlur = function () {
+        setTimeout(function () {
+            if (isRequired && !selected) {
+                setError("Ce champ est requis");
+                onError === null || onError === void 0 ? void 0 : onError("Ce champ est requis");
+            }
+            else {
+                setError("");
+                onError === null || onError === void 0 ? void 0 : onError("");
+            }
+        }, 100);
+    };
+    var handleKeyDown = function (e) {
+        if (!isOpen)
+            return;
+        if (e.key === "ArrowDown") {
+            setHighlighted(function (h) { return (h < filtered.length - 1 ? h + 1 : 0); });
+            e.preventDefault();
+        }
+        else if (e.key === "ArrowUp") {
+            setHighlighted(function (h) { return (h > 0 ? h - 1 : filtered.length - 1); });
+            e.preventDefault();
+        }
+        else if (e.key === "Enter" && highlighted >= 0) {
+            handleSelect(filtered[highlighted].value);
+            e.preventDefault();
+        }
+    };
+    var selectedItem = items.find(function (i) { return i.value === selected; });
+    // Liste en portal, position fixed, centrée sous le bouton, décalée si besoin
+    var list = isOpen && !disabled
+        ? ReactDOM.createPortal(React.createElement("div", { className: selectStyles.selectList + " " + styles.listOpen, style: {
+                position: "fixed",
+                top: listPos.top,
+                left: listPos.left,
+                width: listPos.width,
+                zIndex: 9999,
+            }, role: "listbox", tabIndex: -1, onKeyDown: handleKeyDown },
+            React.createElement("div", { className: styles.searchWrapper },
+                React.createElement("i", { className: "allaw-icon-search" }),
+                React.createElement("input", __assign({ className: styles.search, placeholder: "Rechercher...", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true, "aria-label": "Rechercher un pays", onBlur: handleBlur }, (disableAutofill && {
+                    autoComplete: "off",
+                    "data-form-type": "other",
+                    "data-lpignore": "true",
+                    "data-1p-ignore": true,
+                })))),
+            filtered.map(function (item, idx) { return (React.createElement("div", { key: item.value, className: selectStyles.selectItem +
+                    (item.value === selected || idx === highlighted
+                        ? " " + selectStyles.highlighted
+                        : "") +
+                    (item.value === selected ? " " + styles.selectedItem : ""), role: "option", "aria-selected": item.value === selected, tabIndex: -1, onMouseDown: function () { return handleSelect(item.value); }, onMouseEnter: function () { return setHighlighted(idx); } },
+                item.flagUrl ? (React.createElement("img", { src: item.flagUrl, alt: "", className: styles.flag })) : item.flagEmoji ? (React.createElement("span", { className: styles.flag }, item.flagEmoji)) : null,
+                React.createElement("span", { className: styles.label }, item.label),
+                React.createElement("span", { className: styles.code }, item.code))); }),
+            filtered.length === 0 && (React.createElement("div", { className: selectStyles.selectItem, style: { opacity: 0.6 } }, "Aucun r\u00E9sultat"))), document.body)
+        : null;
+    return (React.createElement("div", { className: styles.wrapper },
+        React.createElement("button", { ref: buttonRef, type: "button", className: selectStyles.select + " " + styles.button, style: { width: buttonWidth }, "aria-haspopup": "listbox", "aria-expanded": isOpen, disabled: disabled, onClick: function () { return !disabled && setIsOpen(function (o) { return !o; }); }, tabIndex: 0, onBlur: handleBlur },
+            React.createElement("span", { className: styles.flagWrapper }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.flagUrl) ? (React.createElement("img", { src: selectedItem.flagUrl, alt: "", className: styles.flag })) : (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.flagEmoji) ? (React.createElement("span", { className: styles.flag }, selectedItem.flagEmoji)) : null),
+            React.createElement("span", { className: styles.chevron, "aria-hidden": true },
+                React.createElement("i", { className: selectStyles.selectIcon +
+                        " " +
+                        (isOpen ? selectStyles.chevronUp : selectStyles.chevronDown) +
+                        " allaw-icon-chevron-down" }))),
+        list,
+        error && (React.createElement("div", { className: "Input-error error-message", style: {
+                color: "#e15151",
+                fontSize: 13,
+                marginTop: 4,
+                marginLeft: 2,
+            } }, error))));
+};
+export default CountrySelect;

package/dist/components/molecules/phoneNumberField/PhoneInput.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface PhoneInputProps {
+    defaultValue?: string;
+    placeholder?: string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    validationPattern?: RegExp | string;
+    onChange?: (value: string) => void;
+    onError?: (msg: string) => void;
+    disableAutofill?: boolean;
+}
+declare const PhoneInput: React.FC<PhoneInputProps>;
+export default PhoneInput;

package/dist/components/molecules/phoneNumberField/PhoneInput.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useState, useRef, useEffect } from "react";
+import styles from "./PhoneInput.module.css";
+var formatPhone = function (value) {
+    // Garde uniquement les chiffres, espace tous les 2 chiffres
+    var digits = value.replace(/\D/g, "");
+    return digits.replace(/(\d{2})(?=\d)/g, "$1 ").trim();
+};
+var PhoneInput = function (_a) {
+    var _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, placeholder = _a.placeholder, isRequired = _a.isRequired, disabled = _a.disabled, validationPattern = _a.validationPattern, onChange = _a.onChange, onError = _a.onError, _c = _a.disableAutofill, disableAutofill = _c === void 0 ? true : _c;
+    var _d = useState(formatPhone(defaultValue)), value = _d[0], setValue = _d[1];
+    var _e = useState(""), error = _e[0], setError = _e[1];
+    var inputRef = useRef(null);
+    useEffect(function () {
+        setValue(formatPhone(defaultValue));
+    }, [defaultValue]);
+    var validate = function (val) {
+        if (isRequired && !val.replace(/\s/g, "")) {
+            setError("Ce champ est requis");
+            onError === null || onError === void 0 ? void 0 : onError("Ce champ est requis");
+            return false;
+        }
+        if (validationPattern) {
+            var regex = typeof validationPattern === "string"
+                ? new RegExp(validationPattern)
+                : validationPattern;
+            if (!regex.test(val.replace(/\s/g, ""))) {
+                setError("Veuillez vérifier votre numéro de téléphone");
+                onError === null || onError === void 0 ? void 0 : onError("Veuillez vérifier votre numéro de téléphone");
+                return false;
+            }
+        }
+        setError("");
+        onError === null || onError === void 0 ? void 0 : onError("");
+        return true;
+    };
+    var handleChange = function (e) {
+        var raw = e.target.value;
+        var formatted = formatPhone(raw);
+        setValue(formatted);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formatted.replace(/\s/g, ""));
+        if (error)
+            validate(formatted);
+    };
+    var handleBlur = function () {
+        validate(value);
+    };
+    return (React.createElement("div", { className: styles.wrapper },
+        React.createElement("input", __assign({ ref: inputRef, className: styles.input, type: "tel", inputMode: "numeric", pattern: "[0-9 ]*", placeholder: placeholder, value: value, onChange: handleChange, onBlur: handleBlur, "aria-required": isRequired, "aria-invalid": !!error, disabled: disabled }, (disableAutofill && {
+            autoComplete: "off",
+            "data-form-type": "other",
+            "data-lpignore": "true",
+            "data-1p-ignore": true,
+        }))),
+        error && React.createElement("div", { className: styles.error }, error)));
+};
+export default PhoneInput;

package/dist/components/molecules/phoneNumberField/PhoneInput.module.css

@@ -0,0 +1,45 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.input {
+  width: 100%;
+  height: 44px;
+  padding: 10px;
+  border: 2px solid var(--grey-venom, #e6edf5);
+  border-radius: 8px;
+  font-size: 16px;
+  font-family: "Open Sans";
+  color: var(--Primary-Mid-black, #171e25);
+  background: #fff;
+  outline: none;
+  transition: border 0.2s;
+  box-sizing: border-box;
+}
+.input:focus {
+  border-color: var(--mid-grey, #728ea7);
+}
+.input:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+.input:disabled {
+  background: #f4f7fb;
+  color: var(--mid-grey, #728ea7);
+  cursor: not-allowed;
+}
+.input::placeholder {
+  color: var(--Tags-Mid-grey, rgba(114, 142, 167, 1));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  opacity: 0.8;
+}
+.error {
+  color: var(--actions-error, #e15151);
+  font-size: 13px;
+  margin-top: 4px;
+  margin-left: 2px;
+}

package/dist/components/molecules/phoneNumberField/PhoneNumberField.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { CountrySelectProps } from "./CountrySelect";
+export interface PhoneNumberFieldProps {
+    countryItems: CountrySelectProps["items"];
+    defaultCountry?: string;
+    defaultNumber?: string;
+    numberPlaceholder?: string;
+    validationPattern?: RegExp | string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    selectButtonWidth?: string | number;
+    selectListWidth?: string | number;
+    onChange?: (country: string, number: string) => void;
+    onError?: (msg: string) => void;
+}
+declare const PhoneNumberField: React.FC<PhoneNumberFieldProps>;
+export default PhoneNumberField;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import styles from "./PhoneNumberField.module.css";
+import CountrySelect from "./CountrySelect";
+import PhoneInput from "./PhoneInput";
+var PhoneNumberField = function (_a) {
+    var countryItems = _a.countryItems, defaultCountry = _a.defaultCountry, defaultNumber = _a.defaultNumber, numberPlaceholder = _a.numberPlaceholder, validationPattern = _a.validationPattern, isRequired = _a.isRequired, disabled = _a.disabled, selectButtonWidth = _a.selectButtonWidth, selectListWidth = _a.selectListWidth, onChange = _a.onChange, onError = _a.onError;
+    var _b = useState(defaultCountry || ""), country = _b[0], setCountry = _b[1];
+    var _c = useState(defaultNumber || ""), number = _c[0], setNumber = _c[1];
+    var _d = useState(""), error = _d[0], setError = _d[1];
+    var handleCountry = function (c) {
+        setCountry(c);
+        if (onChange)
+            onChange(c, number);
+        setError("");
+    };
+    var handleNumber = function (n) {
+        setNumber(n);
+        if (onChange)
+            onChange(country, n);
+        setError("");
+    };
+    var setErrorMsg = function (msg) {
+        setError(msg);
+        onError === null || onError === void 0 ? void 0 : onError(msg);
+    };
+    return (React.createElement("div", { className: styles.container },
+        React.createElement("div", { className: styles.selectWrapper },
+            React.createElement(CountrySelect, { items: countryItems, defaultCountry: defaultCountry, buttonWidth: selectButtonWidth, listWidth: selectListWidth, isRequired: isRequired, disabled: disabled, onSelect: handleCountry, onError: setErrorMsg })),
+        React.createElement("div", { className: styles.inputWrapper },
+            React.createElement(PhoneInput, { defaultValue: defaultNumber, placeholder: numberPlaceholder, validationPattern: validationPattern, isRequired: isRequired, disabled: disabled, onChange: handleNumber, onError: setErrorMsg }),
+            error && React.createElement("div", { className: styles.errorMessage }, error))));
+};
+export default PhoneNumberField;

package/dist/components/molecules/phoneNumberField/PhoneNumberField.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+.selectWrapper {
+  flex: 0 0 auto;
+}
+.inputWrapper {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+}
+.errorMessage {
+  color: var(--actions-error, #e15151);
+  font-size: 13px;
+  margin-top: 4px;
+  margin-left: 2px;
+}

package/dist/components/molecules/phoneNumberField/countrySelect.module.css

@@ -0,0 +1,111 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 2px solid var(--grey-venom, #e6edf5);
+  background: #fff;
+  border-radius: 8px;
+  padding: 0 14px 0 12px;
+  cursor: pointer;
+  min-width: 40px;
+  min-height: 44px;
+  height: 44px;
+  transition: border 0.2s;
+}
+.button[aria-disabled="true"],
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #f4f7fb;
+}
+.flagWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.flag {
+  width: 24px;
+  height: 24px;
+  margin-right: 0;
+  font-size: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.chevron {
+  /* margin-left: 8px; */
+  font-size: 18px;
+  color: var(--mid-grey, #728ea7);
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+.searchWrapper {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 4px 8px;
+  gap: 8px;
+}
+.searchWrapper .allaw-icon-search {
+  font-size: 18px;
+  color: var(--mid-grey, #728ea7);
+  margin-right: 4px;
+}
+.search {
+  width: 100%;
+  border: none;
+  /* border-bottom: 1px solid var(--grey-venom, #e6edf5); */
+  padding: 8px 0 8px 0;
+  font-size: 15px;
+  outline: none;
+  /* background: #f8fafc; */
+  border-radius: 8px 8px 0 0;
+}
+.label {
+  flex: 1 1 auto;
+  text-align: left;
+  margin-left: 8px;
+}
+.code {
+  flex: 0 0 auto;
+  text-align: right;
+  color: var(--mid-grey, #728ea7);
+  margin-left: 12px;
+  font-size: 14px;
+}
+.selectedItem {
+  font-weight: 600;
+  color: #25beeb;
+  border-radius: 8px;
+}
+.error {
+  color: var(--actions-error, #e15151);
+  font-size: 13px;
+  margin-top: 4px;
+  margin-left: 2px;
+}
+.noResult {
+  padding: 8px 12px;
+  color: var(--mid-grey, #728ea7);
+  font-size: 14px;
+  text-align: center;
+}
+.listOpen {
+  animation: fadeIn 0.2s ease-out;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/dist/components/molecules/phoneNumberField/index.d.ts

@@ -0,0 +1,6 @@
+export { default as CountrySelect } from "./CountrySelect";
+export type { CountrySelectProps } from "./CountrySelect";
+export { default as PhoneInput } from "./PhoneInput";
+export type { PhoneInputProps } from "./PhoneInput";
+export { default as PhoneNumberField } from "./PhoneNumberField";
+export type { PhoneNumberFieldProps } from "./PhoneNumberField";

package/dist/components/molecules/phoneNumberField/index.js

@@ -0,0 +1,3 @@
+export { default as CountrySelect } from "./CountrySelect";
+export { default as PhoneInput } from "./PhoneInput";
+export { default as PhoneNumberField } from "./PhoneNumberField";

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export type { ComboBoxProps, ComboBoxRef, } from "./components/atoms/selects/Com
 export { default as Select } from "./components/atoms/selects/Select";
 export type { SelectItem, SelectProps, SelectRef, } from "./components/atoms/selects/Select";
 export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
+export { default as PhoneNumberField } from "./components/molecules/phoneNumberField/PhoneNumberField";
+export type { PhoneNumberFieldProps } from "./components/molecules/phoneNumberField/PhoneNumberField";
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 export type { DatepickerProps } from "./components/atoms/datepickers/Datepicker";
 export { default as DatepickerForm } from "./components/molecules/datepickerForm/DatepickerForm";

package/dist/index.js

@@ -31,6 +31,8 @@ export { default as SelectCard } from "./components/atoms/radios/SelectCard";
 export { default as ComboBox } from "./components/atoms/selects/ComboBox";
 export { default as Select } from "./components/atoms/selects/Select";
 export { default as SelectableListItem } from "./components/atoms/selects/SelectableListItem";
+// Phone Number Field
+export { default as PhoneNumberField } from "./components/molecules/phoneNumberField/PhoneNumberField";
 // Datepickers
 export { default as Datepicker } from "./components/atoms/datepickers/Datepicker";
 // DatepickerForm

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.2.7",
+  "version": "4.2.9",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",