@trackunit/custom-field-components 0.0.280 → 0.0.281-alpha-0b53b6cf53.0

package/index.cjs

@@ -0,0 +1,399 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var irisAppRuntimeCoreApi = require('@trackunit/iris-app-runtime-core-api');
+var reactComponents = require('@trackunit/react-components');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var React = require('react');
+var libphonenumberJs = require('libphonenumber-js');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/**
+ * A component that can be used to render a boolean field
+ *
+ * @param options BooleanCustomFieldProps - options for the component
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a boolean field
+ */
+const BooleanCustomField = (_a) => {
+    var { defaultValue, dataTestId = "booleanField", onChange, value, id, setValue, register, validationRules, disabled = false, label, tip, isInvalid, errorMessage, helpAddon, maxLength, helpText } = _a, rest = __rest(_a, ["defaultValue", "dataTestId", "onChange", "value", "id", "setValue", "register", "validationRules", "disabled", "label", "tip", "isInvalid", "errorMessage", "helpAddon", "maxLength", "helpText"]);
+    const initialValue = value !== undefined ? value : defaultValue ? defaultValue : false;
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const [internalValue, setInternalValue] = React__namespace.useState(initialValue);
+    React__namespace.useEffect(() => {
+        setInternalValue((value === undefined ? defaultValue : value) || false);
+    }, [value, setInternalValue, defaultValue]);
+    const onChangeHandler = React__namespace.useCallback((event) => {
+        var _a;
+        onChange && onChange(event);
+        const isChecked = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.checked) || false;
+        if (setValue) {
+            setValue(id, isChecked);
+        }
+        setInternalValue(isChecked);
+    }, [setInternalValue, onChange, id, setValue]);
+    React__namespace.useEffect(() => {
+        register && register(id, Object.assign(Object.assign({}, validationRules), { value: internalValue.toString() }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // register only once
+    return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Checkbox, Object.assign({ checked: internalValue, dataTestId: dataTestId, id: id, disabled: disabled, name: id, onChange: onChangeHandler, isInvalid: renderAsInvalid }, rest)) })));
+};
+
+/**
+ * A component that can be used to render a date field
+ *
+ * @param props DateCustomFieldProps - options for the component
+ * @returns { JSX.Element } JSX.Element - a component that can be used to render a date field
+ */
+const DateCustomField = (props) => {
+    const { setValue, defaultValue, register, id, validationRules } = props, rest = __rest(props, ["setValue", "defaultValue", "register", "id", "validationRules"]);
+    const onChangeHandler = React.useCallback((e) => {
+        var _a, _b, _c, _d;
+        if (((_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.valueAsDate) === null || _b === void 0 ? void 0 : _b.toISOString()) !== undefined) {
+            setValue && setValue(id, (_d = (_c = e.target) === null || _c === void 0 ? void 0 : _c.valueAsDate) === null || _d === void 0 ? void 0 : _d.toISOString());
+        }
+    }, [setValue, id]);
+    React.useEffect(() => {
+        const value = defaultValue && new Date(defaultValue);
+        register && register(id, Object.assign(Object.assign({}, validationRules), { value }));
+    }, [register, validationRules, defaultValue, id]);
+    return (jsxRuntime.jsx(reactComponents.DateField, Object.assign({}, rest, { helpAddon: props.helpAddon || null, helpText: props.errorMessage || props.helpText, onChange: onChangeHandler, label: props.title, defaultValue: defaultValue })));
+};
+
+const convertToValueFormat = (value) => {
+    return { label: value, value };
+};
+/**
+ * A custom field that can be used to render a dropdown
+ *
+ * @param options DropdownCustomFieldProps - an object with all the props
+ * @returns {JSX.Element} - a dropdown component
+ */
+const DropdownCustomField = ({ defaultValue, dataTestId, onChange, onBlur, id, disabled = false, allValues, multiSelect = false, register, validationRules, setValue, label, tip, errorMessage, helpText, isInvalid, helpAddon, }) => {
+    const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const [selectedValue, setSelectedValue] = React__namespace.useState(defaultValue ? defaultValue.map(convertToValueFormat) : []);
+    const onChangeHandler = React__namespace.useCallback((selected) => {
+        if (selected) {
+            const values = Array.isArray(selected) ? selected : [selected];
+            setSelectedValue(values);
+            setValue && setValue(id, values);
+        }
+        else {
+            setSelectedValue([]);
+            setValue && setValue(id, []);
+        }
+    }, [onChange]);
+    const options = React__namespace.useMemo(() => {
+        return allValues ? allValues.map(convertToValueFormat) : [];
+    }, [allValues]);
+    React__namespace.useEffect(() => {
+        register && register(id, Object.assign(Object.assign({}, validationRules), { value: selectedValue }));
+    }, [register, validationRules, selectedValue, id]);
+    return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon || null, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(reactComponents.Select, { disabled: disabled, dataTestId: dataTestId, onChange: onChangeHandler, hasError: renderAsInvalid, options: options, value: selectedValue, isMulti: multiSelect, isClearable: true }) })));
+};
+
+/**
+ * Get validation rules for a field
+ *
+ * @param { WebAddressFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getWebAddressValidationRules = (definition) => {
+    const defaultRules = {};
+    const pattern = {
+        pattern: {
+            value: RegExp("^(((https?|ftps?)://)(%[0-9A-Fa-f]{2}|[-()_.!~*';/?:@&=+$,A-Za-z0-9])+)([).!';/?:,][[:blank:|:blank:]])?$"),
+            message: `Must match url pattern`,
+        },
+    };
+    return definition.uiEditable
+        ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+};
+/**
+ * Get validation rules for a field.
+ *
+ * @param { NumberFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getNumberValidationRules = (definition) => {
+    const defaultRules = { valueAsNumber: true };
+    const minimum = definition.minimumNumber && {
+        min: {
+            value: definition.minimumNumber,
+            message: `minimum value is ${definition.minimumNumber}`,
+        },
+    };
+    const maximum = definition.maximumNumber && {
+        max: {
+            value: definition.maximumNumber,
+            message: `maximum value is ${definition.maximumNumber}`,
+        },
+    };
+    // TODO: Validate if integer if definition requires integer
+    return definition.uiEditable
+        ? Object.assign(Object.assign(Object.assign({}, maximum), minimum), defaultRules) : defaultRules;
+};
+/**
+ * Get validation rules for a string field.
+ *
+ * @param { StringFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getStringValidationRules = (definition) => {
+    const defaultRules = {};
+    const minLength = definition.minimumLength
+        ? {
+            minLength: {
+                value: definition.minimumLength,
+                message: `minimum length is ${definition.minimumLength}`,
+            },
+            required: {
+                value: true,
+                message: `minimum length is ${definition.minimumLength}`,
+            },
+        }
+        : undefined;
+    const maxLength = definition.maximumLength
+        ? {
+            maxLength: {
+                value: definition.maximumLength,
+                message: `maximum length is ${definition.maximumLength}`,
+            },
+        }
+        : undefined;
+    const pattern = definition.pattern
+        ? {
+            pattern: {
+                value: RegExp(definition.pattern),
+                message: `Must match pattern: ${definition.pattern}`,
+            },
+        }
+        : undefined;
+    return definition.uiEditable
+        ? Object.assign(Object.assign(Object.assign(Object.assign({}, maxLength), minLength), pattern), defaultRules) : defaultRules;
+};
+/**
+ * Get validation rules for a boolean field.
+ *
+ * @param { BooleanFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getBooleanValidationRules = (definition) => {
+    const defaultRules = {};
+    return defaultRules;
+};
+/**
+ * Get validation rules for a dropdown field.
+ *
+ * @param { DropDownFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getDropdownValidationRules = (definition) => {
+    const defaultRules = {};
+    return defaultRules;
+};
+/**
+ * Get validation rules for a date field.
+ *
+ * @param { DateFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getDateValidationRules = (definition) => {
+    const defaultRules = {};
+    return defaultRules;
+};
+/**
+ * Get validation rules for an email field.
+ *
+ * @param { EmailFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getEmailValidationRules = (definition) => {
+    const defaultRules = {};
+    const pattern = {
+        pattern: {
+            value: RegExp("^[a-zA-Z0-9_+&*-]+(?:.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+.)+[a-zA-Z]{2,7}$"),
+            message: `Must match email pattern`,
+        },
+    };
+    return definition.uiEditable
+        ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+};
+/**
+ * Get validation rules for a phonenumber field.
+ *
+ * @param { PhoneNumberFieldDefinition } definition the field definition
+ * @returns { ValidationRules} the validation rules
+ */
+const getPhoneNumberValidationRules = (definition) => {
+    const defaultRules = {};
+    const pattern = {
+        validate: value => libphonenumberJs.isValidPhoneNumber(value) || value === "",
+    };
+    return definition.uiEditable
+        ? Object.assign(Object.assign({}, pattern), defaultRules) : defaultRules;
+};
+
+/**
+ * A component that renders a custom field based on the field definition
+ *
+ * @param field A field definition and value
+ * @param validation A validation object that contains the register, setValue and formState
+ * @param unitPreference A unit preference that can be used to override the default unit preference
+ * @param fieldId An optional Id to override the definition.key
+ * @returns { JSX.Element } A JSX.Element or null if the field definition is undefined
+ */
+const useCustomFieldResolver = (field, validation, unitPreference = "SI", fieldId) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [numberValue, setNumberValue] = React.useState(() => {
+        var _a;
+        if ((field === null || field === void 0 ? void 0 : field.definition) && field.definition.type === irisAppRuntimeCoreApi.CustomFieldType.NUMBER) {
+            const typedValue = field.value;
+            return (_a = typedValue.numberValue) !== null && _a !== void 0 ? _a : field.definition.defaultNumberValue;
+        }
+        else {
+            return "";
+        }
+    });
+    if ((field === null || field === void 0 ? void 0 : field.definition) === undefined || ((_a = field === null || field === void 0 ? void 0 : field.definition) === null || _a === void 0 ? void 0 : _a.type) === undefined) {
+        return null;
+    }
+    const key = (_b = fieldId !== null && fieldId !== void 0 ? fieldId : field.definition.key) !== null && _b !== void 0 ? _b : "";
+    const fieldError = key ? validation.formState.errors[key] : undefined;
+    const errorMessage = fieldError ? fieldError.message + "" : undefined;
+    const { type, description, title } = field.definition;
+    switch (type) {
+        case irisAppRuntimeCoreApi.CustomFieldType.WEB_ADDRESS: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getWebAddressValidationRules(typedDefinition);
+            return (jsxRuntime.jsx(reactComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_c = typedDefinition.title) !== null && _c !== void 0 ? _c : "", defaultValue: (_e = (_d = typedValue.stringValue) !== null && _d !== void 0 ? _d : typedDefinition.defaultStringValue) !== null && _e !== void 0 ? _e : "", dataTestId: "webAddressField", actions: !typedDefinition.uiEditable &&
+                    (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactComponents.ActionButton, { value: (_f = typedValue.stringValue) !== null && _f !== void 0 ? _f : typedDefinition.defaultStringValue, type: "WEB_ADDRESS" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.EMAIL: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getEmailValidationRules(typedDefinition);
+            return (jsxRuntime.jsx(reactComponents.TextField, Object.assign({ id: key, label: title, placeholder: (_g = typedDefinition.title) !== null && _g !== void 0 ? _g : "", defaultValue: (_j = (_h = typedValue.stringValue) !== null && _h !== void 0 ? _h : typedDefinition.defaultStringValue) !== null && _j !== void 0 ? _j : "", actions: !typedDefinition.uiEditable &&
+                    (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactComponents.ActionButton, { value: (_k = typedValue.stringValue) !== null && _k !== void 0 ? _k : typedDefinition.defaultStringValue, type: "EMAIL" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage }, validation.register(key, rules))));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.PHONE_NUMBER: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getPhoneNumberValidationRules(typedDefinition);
+            return (jsxRuntime.jsx(reactComponents.TextField, Object.assign({ label: title, id: key, placeholder: (_l = typedDefinition.title) !== null && _l !== void 0 ? _l : "", defaultValue: (_o = (_m = typedValue.stringValue) !== null && _m !== void 0 ? _m : typedDefinition.defaultStringValue) !== null && _o !== void 0 ? _o : "", actions: !typedDefinition.uiEditable &&
+                    (typedValue.stringValue || typedDefinition.defaultStringValue) && (jsxRuntime.jsx(reactComponents.ActionButton, { value: (_p = typedValue.stringValue) !== null && _p !== void 0 ? _p : typedDefinition.defaultStringValue, type: "PHONE_NUMBER" })), readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage === "" ? "Must be a phone number" : undefined }, validation.register(key, rules))));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.STRING: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getStringValidationRules(typedDefinition);
+            return (jsxRuntime.jsx(reactComponents.TextField, Object.assign({ label: title, id: key || "string-field", placeholder: (_q = typedDefinition.title) !== null && _q !== void 0 ? _q : "", defaultValue: (_s = (_r = typedValue.stringValue) !== null && _r !== void 0 ? _r : typedDefinition.defaultStringValue) !== null && _s !== void 0 ? _s : "", readOnly: !typedDefinition.uiEditable, helpText: description, errorMessage: errorMessage, dataTestId: `stringField` }, validation.register(key, rules))));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.NUMBER: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getNumberValidationRules(typedDefinition);
+            const unit = unitPreference === "US_CUSTOMARY" ? typedDefinition.unitUs : typedDefinition.unitSi;
+            const numberProps = {
+                placeholder: (_t = typedDefinition.title) !== null && _t !== void 0 ? _t : "",
+                addonAfter: unit,
+            };
+            return (jsxRuntime.jsx(reactComponents.FormGroup, Object.assign({ label: title, isInvalid: errorMessage ? true : false, helpText: errorMessage || description, dataTestId: `numberField-FormGroup`, disabled: !typedDefinition.uiEditable }, { children: isEditing ? (jsxRuntime.jsx(reactComponents.NumberInput, Object.assign({ id: key || "number-field", dataTestId: "numberField", defaultValue: (_v = (_u = typedValue.numberValue) !== null && _u !== void 0 ? _u : typedDefinition.defaultNumberValue) !== null && _v !== void 0 ? _v : "", readOnly: !typedDefinition.uiEditable, step: typedDefinition.isInteger ? 1 : "any", min: (_w = typedDefinition.minimumNumber) !== null && _w !== void 0 ? _w : undefined, max: (_x = typedDefinition.maximumNumber) !== null && _x !== void 0 ? _x : undefined }, validation.register(key, rules), { onBlur: () => setIsEditing(!isEditing), onChange: e => {
+                        setNumberValue(e.target.value);
+                        validation.register(key, rules).onChange(e);
+                    } }, numberProps))) : (jsxRuntime.jsx(reactComponents.BaseInput, Object.assign({ type: "text", id: `${key}-number-field`, dataTestId: `${key}-numberField`, defaultValue: parseFloat(Number(numberValue).toPrecision(4)), readOnly: true, actions: jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { dataTestId: "editIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: "PencilIcon" }), onClick: () => setIsEditing(!isEditing) }) }) }, numberProps))) })));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.BOOLEAN: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getBooleanValidationRules();
+            return (jsxRuntime.jsx(BooleanCustomField, { label: (_y = typedDefinition.title) !== null && _y !== void 0 ? _y : "", id: key || "boolean-field", defaultValue: (_0 = (_z = typedValue.booleanValue) !== null && _z !== void 0 ? _z : typedDefinition.defaultBooleanValue) !== null && _0 !== void 0 ? _0 : undefined, readOnly: !typedDefinition.uiEditable, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: "booleanField" }, key));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.DROPDOWN: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getDropdownValidationRules();
+            return (jsxRuntime.jsx(DropdownCustomField, { label: typedDefinition.title || "", id: key || "dropdown-field", defaultValue: (_2 = (_1 = typedValue.stringArrayValue) !== null && _1 !== void 0 ? _1 : typedDefinition.defaultStringArrayValue) !== null && _2 !== void 0 ? _2 : undefined, disabled: !typedDefinition.uiEditable, allValues: (_3 = typedDefinition.allValues) !== null && _3 !== void 0 ? _3 : undefined, multiSelect: (_4 = typedDefinition.multiSelect) !== null && _4 !== void 0 ? _4 : false, register: validation.register, validationRules: rules, helpText: description, setValue: validation.setValue, errorMessage: errorMessage, dataTestId: "dropdownField" }, key));
+        }
+        case irisAppRuntimeCoreApi.CustomFieldType.DATE: {
+            const typedDefinition = field.definition;
+            const typedValue = field.value;
+            const rules = getDateValidationRules();
+            let defaultValue;
+            if (typedValue.dateValue !== undefined && typedValue.dateValue !== null) {
+                defaultValue = new Date(typedValue.dateValue);
+            }
+            else if (typedDefinition.defaultDateValue !== undefined && typedDefinition.defaultDateValue !== null) {
+                defaultValue = new Date(typedDefinition.defaultDateValue);
+            }
+            return (jsxRuntime.jsx(DateCustomField, { dataTestId: "dateField", id: key || "date-field", defaultValue: defaultValue, readOnly: !typedDefinition.uiEditable, register: validation.register, label: typedDefinition.title || "", validationRules: rules, helpText: description, errorMessage: errorMessage, setValue: validation.setValue, title: field.definition.title || "" }, key));
+        }
+        default:
+            throw new Error(`Type not supported: ${type}`);
+    }
+};
+/**
+ *
+ */
+const CustomField = ({ field, register, formState, setValue, unitPreference, fieldId }) => {
+    const fieldComponent = useCustomFieldResolver(field, { register, setValue, formState }, unitPreference, fieldId);
+    return fieldComponent;
+};
+const ActionContainer = tailwindStyledComponents.tw.div `
+  tu-action-container
+`;
+const StyledIconButton = tailwindStyledComponents.twx(reactComponents.IconButton) `
+  tu-action-button
+`;
+
+exports.CustomField = CustomField;
+exports.useCustomFieldResolver = useCustomFieldResolver;

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@trackunit/custom-field-components",
-  "version": "0.0.280",
+  "version": "0.0.281-alpha-0b53b6cf53.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {
-    "@trackunit/react-core-contexts-test": "0.1.34",
-    "@trackunit/react-components": "0.1.64",
+    "@trackunit/react-core-contexts-test": "0.1.35-alpha-0b53b6cf53.0",
+    "@trackunit/react-components": "0.1.65-alpha-0b53b6cf53.0",
     "react": "18.2.0",
     "react-hook-form": "7.40.0",
-    "@trackunit/iris-app-runtime-core": "0.3.22",
-    "@trackunit/iris-app-runtime-core-api": "0.3.20",
+    "@trackunit/iris-app-runtime-core": "0.3.23-alpha-0b53b6cf53.0",
+    "@trackunit/iris-app-runtime-core-api": "0.3.21-alpha-0b53b6cf53.0",
     "@trackunit/tailwind-styled-components": "0.0.54",
     "react-select": "5.7.0",
     "libphonenumber-js": "1.10.24"
   },
   "module": "./index.js",
-  "main": "./index.js",
+  "main": "./index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",
   "peerDependencies": {}