@feathery/react 2.13.0 → 2.14.0

package/dist/cjs/fthry_index.D-lcbiWJ.js

@@ -1,130 +0,0 @@
-'use strict';
-
-var index$1 = require('./fthry_index.BWmJjQzl.js');
-var React = require('react');
-var Placeholder = require('./fthry_Placeholder.CdsaJ2D6.js');
-var InlineTooltip = require('./fthry_InlineTooltip.B3M2NtLx.js');
-var Overlay = require('./fthry_Overlay.DZfU9dMV.js');
-var useElementSize = require('./fthry_useElementSize.DUywOCrD.js');
-require('react/jsx-runtime');
-require('react-dom/client');
-require('jszip');
-require('react-dom');
-
-function useMounted() {
-    var mounted = React.useRef(true);
-    React.useEffect(function () {
-        mounted.current = true; // Handle remount
-        return function () {
-            mounted.current = false;
-        };
-    }, []);
-    return mounted;
-}
-
-function isKeydownValid(event) {
-    return Boolean(event.isTrusted && event.code);
-}
-
-var SEARCH_DELAY_TIME_MS = 500;
-var EXIT_DELAY_TIME_MS = 200;
-function AddressLine1(_a) {
-    var _this = this;
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, autoComplete = _a.autoComplete, editMode = _a.editMode, _d = _a.repeatIndex, repeatIndex = _d === void 0 ? null : _d, _e = _a.onSelect, onSelect = _e === void 0 ? function () { } : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { } : _f, required = _a.required, _g = _a.onBlur, onBlur = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, _k = _a.value, value = _k === void 0 ? '' : _k, inlineError = _a.inlineError, children = _a.children;
-    var servar = element.servar;
-    var options = useAddressSearch(value, servar);
-    var _l = index$1.__read(React.useState(false), 2), showOptions = _l[0], setShowOptions = _l[1];
-    var _m = index$1.__read(React.useState(false), 2), focused = _m[0], setFocused = _m[1];
-    var inputRef = React.useRef(null);
-    var containerRef = React.useRef(null);
-    var fieldWrapperRef = React.useRef(null);
-    var dropdownWidth = useElementSize.useElementSize(fieldWrapperRef).width;
-    var _o = index$1.useBorder({
-        element: element,
-        error: inlineError,
-        breakpoint: responsiveStyles.getMobileBreakpoint()
-    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder;
-    return (index$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ ref: fieldWrapperRef, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', width: '100%', 
-                    // Prevent placeholder overflow
-                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': index$1.hoverStylesGuard(disabled
-                        ? {}
-                        : index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': focused
-                        ? index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, index$1.jsx("input", { id: servar.key, name: servar.key, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, index$1.resetStyles), responsiveStyles.getTarget('field')), (focused || value || !element.properties.placeholder
-                            ? {}
-                            : { color: 'transparent !important' })), maxLength: servar.max_length, minLength: servar.min_length, placeholder: '', disabled: disabled, "aria-label": element.properties.aria_label, autoComplete: autoComplete === 'on' ? 'street-address' : 'new-password', value: value, ref: function (ref) {
-                            inputRef.current = ref;
-                            setRef(ref);
-                        }, onKeyDown: function (e) {
-                            if (!isKeydownValid(e))
-                                return;
-                            if (e.key === 'Enter')
-                                onEnter(e);
-                            else
-                                setShowOptions(e.key !== 'Escape');
-                        }, onFocus: function (event) {
-                            setFocused(true);
-                            index$1.iosScrollOnFocus(event);
-                        }, onBlur: function (e) {
-                            setTimeout(function () { return setShowOptions(false); }, EXIT_DELAY_TIME_MS);
-                            onBlur(e);
-                            setFocused(false);
-                        }, onChange: onChange, required: required }), index$1.jsx(Overlay.Overlay, index$1.__assign({ show: showOptions && options.length > 0, targetRef: inputRef, containerRef: containerRef, placement: 'bottom-start', offset: 4, onHide: function () { return setShowOptions(false); } }, { children: index$1.jsx("ul", index$1.__assign({ css: index$1.__assign({ zIndex: index$1.DROPDOWN_Z_INDEX, listStyleType: 'none', padding: 0, margin: 0, backgroundColor: 'white', cursor: 'pointer', boxShadow: '0 0 4px rgb(0 0 0 / 15%)', width: dropdownWidth !== undefined ? "".concat(dropdownWidth, "px") : '100%' }, responsiveStyles.getTarget('dropdown')) }, { children: options.map(function (_a) {
-                                var display = _a.display, addressId = _a.address_id;
-                                return (index$1.jsx("li", index$1.__assign({ css: {
-                                        padding: '8px 14px',
-                                        transition: '0.1s ease all',
-                                        '&:hover': index$1.hoverStylesGuard({
-                                            backgroundColor: '#e6e6e633'
-                                        })
-                                    }, onClick: function () { return index$1.__awaiter(_this, void 0, void 0, function () {
-                                        var details;
-                                        var _a;
-                                        return index$1.__generator(this, function (_b) {
-                                            switch (_b.label) {
-                                                case 0: return [4 /*yield*/, new index$1.FeatheryClient().addressDetail(addressId)];
-                                                case 1:
-                                                    details = _b.sent();
-                                                    onSelect(details, addressId);
-                                                    setShowOptions(false);
-                                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                                    return [2 /*return*/];
-                                            }
-                                        });
-                                    }); } }, { children: display }), display));
-                            }) })) })), index$1.jsx(Placeholder.Placeholder, { value: value, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
-}
-function useAddressSearch(searchTerm, servar) {
-    var _a;
-    var meta = servar.metadata;
-    var active = meta.address_autocomplete;
-    var country = (_a = meta.autocomplete_country) !== null && _a !== void 0 ? _a : '';
-    var mounted = useMounted();
-    var _b = index$1.__read(React.useState(searchTerm), 2), term = _b[0], setTerm = _b[1];
-    var _c = index$1.__read(React.useState([]), 2), results = _c[0], setResults = _c[1];
-    var fetchAddresses = React.useCallback(index$1.debounce(function (newTerm) {
-        new index$1.FeatheryClient()
-            .addressSearchResults(newTerm, country, servar.type === 'gmap_city')
-            .then(function (addresses) {
-            if (mounted.current) {
-                setResults(addresses);
-                setTerm(newTerm);
-            }
-        });
-    }, SEARCH_DELAY_TIME_MS), [setResults, setTerm]);
-    React.useEffect(function () {
-        var trimmedTerm = searchTerm.trim();
-        if (!active || trimmedTerm === term)
-            return;
-        if (trimmedTerm.length > 3)
-            fetchAddresses(trimmedTerm);
-        else {
-            if (results.length)
-                setResults([]);
-            setTerm(trimmedTerm);
-        }
-    }, [searchTerm]);
-    return results;
-}
-var index = React.memo(AddressLine1);
-
-exports.default = index;

package/dist/cjs/fthry_index.DOgb27J4.js

@@ -1,292 +0,0 @@
-'use strict';
-
-var index$1 = require('./fthry_index.BWmJjQzl.js');
-var React = require('react');
-var Placeholder = require('./fthry_Placeholder.CdsaJ2D6.js');
-var InlineTooltip = require('./fthry_InlineTooltip.B3M2NtLx.js');
-var Overlay = require('./fthry_Overlay.DZfU9dMV.js');
-var useElementSize = require('./fthry_useElementSize.DUywOCrD.js');
-var ShowEyeIcon = require('./fthry_ShowEyeIcon.C09gRFkG.js');
-var input = require('./fthry_input.BLyTWPfN.js');
-require('react/jsx-runtime');
-require('react-dom/client');
-require('jszip');
-require('react-dom');
-require('./fthry_index.BCNPmnSd.js');
-
-function TextAutocomplete$1(_a) {
-    var _b = _a.allOptions, allOptions = _b === void 0 ? [] : _b, showOptions = _a.showOptions, _c = _a.onSelect, onSelect = _c === void 0 ? function () { } : _c, _d = _a.onHide, onHide = _d === void 0 ? function () { } : _d, _e = _a.onInputFocus, onInputFocus = _e === void 0 ? function () { } : _e, _f = _a.value, value = _f === void 0 ? '' : _f, containerRef = _a.containerRef, responsiveStyles = _a.responsiveStyles, listItemRef = _a.listItemRef, children = _a.children;
-    var options = allOptions.filter(function (opt) {
-        return opt.toLowerCase().includes(value.toLowerCase());
-    });
-    var triggerRef = React.useRef(null);
-    var dropdownWidth = useElementSize.useElementSize(triggerRef).width;
-    if (allOptions.length === 0)
-        return children;
-    return (index$1.jsxs("div", index$1.__assign({ ref: triggerRef, css: { height: '100%', width: '100%' } }, { children: [children, options.length > 0 && showOptions && (index$1.jsx(Overlay.Overlay, index$1.__assign({ targetRef: triggerRef, containerRef: containerRef, show: true, placement: 'bottom-start', onHide: onHide }, { children: index$1.jsx("ul", index$1.__assign({ css: index$1.__assign({ zIndex: index$1.DROPDOWN_Z_INDEX, listStyleType: 'none', padding: 0, margin: 0, maxHeight: '210px', overflowY: 'scroll', overflowX: 'auto', width: dropdownWidth !== undefined ? "".concat(dropdownWidth, "px") : '100%', backgroundColor: 'white', cursor: 'pointer', boxShadow: '0 0 4px rgb(0 0 0 / 15%)' }, responsiveStyles.getTarget('dropdown')) }, { children: options.map(function (opt, index) { return (index$1.jsx("li", index$1.__assign({ css: {
-                            padding: '8px 14px',
-                            transition: '0.1s ease all',
-                            '&:hover': { backgroundColor: '#e6e6e633' },
-                            '&:focus-visible': {
-                                outline: 'none',
-                                backgroundColor: '#e6e6e644'
-                            }
-                        }, tabIndex: 0, ref: function (ref) {
-                            listItemRef.current[index] = ref;
-                        }, onClick: function () { return onSelect(opt); }, onKeyDown: function (e) {
-                            var _a, _b;
-                            var disable = function () {
-                                e.preventDefault();
-                                e.stopPropagation();
-                            };
-                            if (e.key === 'Enter') {
-                                disable();
-                                onSelect(opt);
-                            }
-                            else if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
-                                disable();
-                                (_a = listItemRef.current[index].nextSibling) === null || _a === void 0 ? void 0 : _a.focus();
-                            }
-                            else if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
-                                disable();
-                                if (index === 0)
-                                    onInputFocus();
-                                else
-                                    (_b = listItemRef.current[index].previousSibling) === null || _b === void 0 ? void 0 : _b.focus();
-                            }
-                        }, onBlur: function (e) {
-                            if (!e.relatedTarget ||
-                                !listItemRef.current.some(function (item) { return item === e.relatedTarget; })) {
-                                onHide();
-                            }
-                        } }, { children: opt }), "".concat(opt, "-").concat(index))); }) })) })))] })));
-}
-var TextAutocomplete = React.memo(TextAutocomplete$1);
-
-var DEFAULT_LENGTH = 1024; // Default limit on backend
-var MAX_FIELD_LENGTHS = {
-    text_area: 16384,
-    url: 256,
-    gmap_zip: 10
-};
-var maxFieldLength = function (type) { var _a; return (_a = MAX_FIELD_LENGTHS[type]) !== null && _a !== void 0 ? _a : DEFAULT_LENGTH; };
-function escapeDefinitionChars(str) {
-    return (str !== null && str !== void 0 ? str : '')
-        .replaceAll('0', '\\0')
-        .replaceAll('a', '\\a')
-        .replaceAll('b', '\\b')
-        .replaceAll('*', '\\*');
-}
-function constraintChar(allowed) {
-    switch (allowed) {
-        case 'letters':
-            return 'a';
-        case 'alphanumeric':
-            return 'b';
-        case 'alphaspace':
-            return 'c';
-        case 'digits':
-            return '0';
-        default:
-            return '*';
-    }
-}
-function getTextFieldMask(servar) {
-    var data = servar.metadata;
-    var prefix = escapeDefinitionChars(data.prefix);
-    var suffix = escapeDefinitionChars(data.suffix);
-    var mask = '';
-    if (data.mask)
-        mask = data.mask;
-    else {
-        var allowed = data.allowed_characters;
-        if (servar.type === 'gmap_zip' && !allowed)
-            allowed = 'alphaspace';
-        var definitionChar = constraintChar(allowed);
-        var numOptional = maxFieldLength(servar.type) - prefix.length - suffix.length;
-        if (servar.max_length)
-            numOptional = Math.min(servar.max_length, numOptional);
-        mask = "[".concat(definitionChar.repeat(numOptional), "]");
-    }
-    // Approximate dynamic input by making each character optional
-    return "".concat(prefix).concat(mask).concat(suffix);
-}
-function getMaskProps(servar, value, showPassword) {
-    var _a, _b, _c;
-    var maskProps;
-    // Max length included in mask for validation of typed inputs
-    var maxLength = (_a = servar.max_length) !== null && _a !== void 0 ? _a : maxFieldLength(servar.type);
-    switch (servar.type) {
-        case 'integer_field':
-            maskProps = {
-                mask: 'num',
-                blocks: {
-                    num: {
-                        mask: Number,
-                        radix: '.',
-                        thousandsSeparator: ',',
-                        scale: 2,
-                        // Larger numbers get converted to scientific notation when sent to backend
-                        max: (_b = servar.max_length) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER,
-                        min: Math.max(0, (_c = servar.min_length) !== null && _c !== void 0 ? _c : 0)
-                    }
-                },
-                value: value.toString()
-            };
-            if (servar.format === 'currency') {
-                maskProps.mask = '$num';
-            }
-            break;
-        case 'ssn':
-            maskProps = {
-                // mask uses ∗ character which is like * but centered in inputs
-                mask: servar.metadata.last_four_digits
-                    ? '∗∗∗ - ∗∗ - 0000'
-                    : '000 - 00 - 0000',
-                // displayChar allows for secure entry without using password input
-                // this prevents browser password manager from triggering on SSN fields
-                displayChar: showPassword ? undefined : '∗',
-                placeholderChar: servar.metadata.last_four_digits ? ' ' : undefined,
-                lazy: !servar.metadata.last_four_digits
-            };
-            break;
-        case 'email':
-        case 'text_area':
-        case 'url':
-            maskProps = { mask: new RegExp("^.{0,".concat(maxLength, "}$")), maxLength: maxLength };
-            break;
-        default:
-            if (servar.metadata.mask)
-                maxLength = undefined;
-            maskProps = {
-                mask: getTextFieldMask(servar),
-                definitions: {
-                    b: /[a-zA-Z0-9]/,
-                    c: /[a-zA-Z0-9 ]/
-                },
-                maxLength: maxLength
-            };
-            break;
-    }
-    return index$1.__assign({ lazy: false, unmask: !servar.metadata.save_mask }, maskProps);
-}
-function getInputProps(servar, options, autoComplete) {
-    var _a;
-    var constraints = {
-        minLength: servar.min_length
-    };
-    // Max length included here for validation of programmatically set
-    // inputs
-    var maxLength = (_a = servar.max_length) !== null && _a !== void 0 ? _a : maxFieldLength(servar.type);
-    if (options.length > 0)
-        constraints.autoComplete = 'off';
-    var meta = servar.metadata;
-    switch (servar.type) {
-        case 'integer_field':
-            return { inputMode: 'decimal' };
-        case 'email':
-            if (autoComplete && !constraints.autoComplete) {
-                constraints.autoComplete = 'email';
-            }
-            return index$1.__assign({ type: 'email', pattern: index$1.emailPatternStr, maxLength: maxLength }, constraints);
-        case 'gmap_zip':
-            if (autoComplete && !constraints.autoComplete) {
-                constraints.autoComplete = 'postal-code';
-            }
-            return index$1.__assign(index$1.__assign({}, constraints), { maxLength: maxLength, inputMode: (meta.allowed_characters === 'digits'
-                    ? 'numeric'
-                    : 'text') });
-        case 'url':
-            if (autoComplete && !constraints.autoComplete) {
-                constraints.autoComplete = 'url';
-                constraints.maxLength = maxLength;
-            }
-            return constraints;
-        case 'ssn':
-            return index$1.__assign({ inputMode: 'numeric' }, constraints);
-        default:
-            constraints.maxLength = maxLength;
-            if (meta.custom_autocomplete && !constraints.autoComplete)
-                constraints.autoComplete = meta.custom_autocomplete;
-            if (meta.number_keypad || meta.allowed_characters === 'digits') {
-                return index$1.__assign({ inputMode: 'numeric' }, constraints);
-            }
-            return constraints;
-    }
-}
-var EXIT_DELAY_TIME = 200;
-function TextField(_a) {
-    var _b;
-    var _c;
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, autoComplete = _a.autoComplete, editMode = _a.editMode, _g = _a.onAccept, onAccept = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, inlineError = _a.inlineError, _k = _a.repeatIndex, repeatIndex = _k === void 0 ? null : _k, children = _a.children;
-    var _l = index$1.__read(React.useState(false), 2), showAutocomplete = _l[0], setShowAutocomplete = _l[1];
-    // Hide SSNs by default
-    var _m = index$1.__read(React.useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
-    var _o = index$1.useBorder({
-        element: element,
-        error: inlineError,
-        breakpoint: responsiveStyles.getMobileBreakpoint()
-    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder, borderId = _o.borderId;
-    var containerRef = React.useRef(null);
-    var listItemRef = React.useRef([]);
-    var inputRef = React.useRef(null);
-    var fieldVal = index$1.getFieldValue(element).value;
-    var rawValue = index$1.stringifyWithNull(fieldVal);
-    var servar = element.servar;
-    var options = ((_c = servar.metadata.options) !== null && _c !== void 0 ? _c : []).filter(function (opt) { return opt; });
-    var spacing = element.properties.tooltipText ? 30 : 8;
-    return (index$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', 
-                    // Prevent placeholder overflow
-                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-within': index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('active')), borderStyles.active), '&:hover': index$1.hoverStylesGuard(disabled
-                        ? {}
-                        : index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [index$1.jsx(TextAutocomplete, index$1.__assign({ allOptions: options, value: rawValue, showOptions: showAutocomplete, onSelect: function (option) {
-                            var _a, _b, _c;
-                            onAccept(option, {});
-                            setShowAutocomplete(false);
-                            (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
-                        }, responsiveStyles: responsiveStyles, containerRef: containerRef, listItemRef: listItemRef, onHide: function () { return setShowAutocomplete(false); }, onInputFocus: function () { var _a, _b, _c; return (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b); } }, { children: index$1.jsx(input.IMaskInput, index$1.__assign({ id: servar.key, name: servar.key, ref: inputRef, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', 
-                                // Position input above the border div
-                                zIndex: index$1.FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, index$1.resetStyles), responsiveStyles.getTarget('field')), (_b = { '&:focus': responsiveStyles.getTarget('field')['&:focus'] }, _b["&:focus ~ #".concat(borderId)] = Object.values(borderStyles.active)[0], _b['&:not(:focus)'] = rawValue || !element.properties.placeholder
-                                ? {}
-                                : { color: 'transparent !important' }, _b)), required: required, disabled: disabled, placeholder: '', value: rawValue, "aria-label": element.properties.aria_label, 
-                            // Not on focus because if error is showing, it will
-                            // keep triggering dropdown after blur
-                            onKeyDown: function (e) {
-                                if (e.key === 'Enter')
-                                    onEnter(e);
-                                else if (options.length) {
-                                    if (!rawValue && ['Backspace', 'Delete'].includes(e.key))
-                                        return;
-                                    if (['ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key))
-                                        return;
-                                    setShowAutocomplete(e.key !== 'Escape');
-                                    if (e.key === 'ArrowDown') {
-                                        setTimeout(function () {
-                                            var _a;
-                                            return (_a = listItemRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus({
-                                                preventScroll: true
-                                            });
-                                        }, 0);
-                                    }
-                                }
-                            }, onBlur: function (e) {
-                                if (e.relatedTarget &&
-                                    listItemRef.current.some(function (item) { return item === e.relatedTarget; }))
-                                    return;
-                                if (options.length > 0) {
-                                    // Blur may be triggered by option selection, and option
-                                    // click logic may need to be run first. So delay option removal.
-                                    setTimeout(function () { return setShowAutocomplete(false); }, EXIT_DELAY_TIME);
-                                }
-                            }, onFocus: index$1.iosScrollOnFocus, inputRef: setRef }, getInputProps(servar, options, autoComplete === 'on'), getMaskProps(servar, rawValue, showPassword), { onAccept: onAccept })) })), servar.type === 'ssn' && rawValue && (index$1.jsx("div", index$1.__assign({ css: {
-                            position: 'absolute',
-                            cursor: 'pointer',
-                            insetInlineEnd: "".concat(spacing, "px"),
-                            // We need to subtract half the height of the icon to center it
-                            top: 'calc(50% - 12px)',
-                            zIndex: index$1.FORM_Z_INDEX
-                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle SSN visibility' }, { children: showPassword ? index$1.jsx(ShowEyeIcon.ShowEyeIcon, {}) : index$1.jsx(ShowEyeIcon.ShowEyeIcon$1, {}) }))), customBorder, index$1.jsx(Placeholder.Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
-}
-var index = React.memo(TextField);
-
-exports.default = index;

package/dist/cjs/fthry_index.DPOPtPXQ.js

@@ -1,97 +0,0 @@
-'use strict';
-
-var index = require('./fthry_index.BWmJjQzl.js');
-var React = require('react');
-var FormControl = require('./fthry_FormControl.BO9bjqlX.js');
-var index$1 = require('./fthry_index.Bb3vfxzC.js');
-var InlineTooltip = require('./fthry_InlineTooltip.B3M2NtLx.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.DbLXWchO.js');
-require('react/jsx-runtime');
-require('react-dom/client');
-require('jszip');
-require('react-dom');
-require('./fthry_Overlay.DZfU9dMV.js');
-
-var applyRadioGroupStyles = function (element, responsiveStyles) {
-    responsiveStyles.addTargets('radioGroup');
-    index$1.applyHeightWidthMarginByFontSize(responsiveStyles, 'radioGroup');
-    return responsiveStyles;
-};
-function RadioButtonGroupField(_a) {
-    var _b, _c;
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fieldVal, fieldVal = _f === void 0 ? '' : _f, _g = _a.otherVal, otherVal = _g === void 0 ? '' : _g, _h = _a.repeatIndex, repeatIndex = _h === void 0 ? null : _h, editMode = _a.editMode, _j = _a.onChange, onChange = _j === void 0 ? function () { } : _j, _k = _a.onOtherChange, onOtherChange = _k === void 0 ? function () { } : _k, _l = _a.onEnter, onEnter = _l === void 0 ? function () { } : _l, _m = _a.elementProps, elementProps = _m === void 0 ? {} : _m, children = _a.children;
-    var servar = element.servar;
-    var containerRef = React.useRef(null);
-    var _o = useSalesforceSync.useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _o.dynamicOptions, loadingDynamicOptions = _o.loadingDynamicOptions, shouldSalesforceSync = _o.shouldSalesforceSync;
-    var _p = index.__read(React.useState({}), 2), otherSelect = _p[0], setOtherSelect = _p[1];
-    var otherChecked = 
-    // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-    (otherSelect[servar.key] || fieldVal) && fieldVal === otherVal;
-    var otherTextDisabled = !otherChecked || disabled;
-    var otherLabel = (_b = servar.metadata.other_label) !== null && _b !== void 0 ? _b : 'Other';
-    var styles = React.useMemo(function () {
-        index$1.applyCheckableInputStyles(element, responsiveStyles);
-        applyRadioGroupStyles(element, responsiveStyles);
-        responsiveStyles.addTargets('row-container');
-        responsiveStyles.apply('row-container', 'row_separation', function (a) {
-            return { gap: "".concat(a || 5, "px") };
-        });
-        responsiveStyles.apply('row-container', 'option_direction', function (a) {
-            return { flexDirection: a || 'column' };
-        });
-        return responsiveStyles;
-    }, [responsiveStyles]);
-    var labels = servar.metadata.option_labels;
-    var tooltips = (_c = servar.metadata.option_tooltips) !== null && _c !== void 0 ? _c : [];
-    var options;
-    if (shouldSalesforceSync) {
-        options = dynamicOptions.map(function (option) { return ({
-            value: option.value,
-            label: option.label
-        }); });
-    }
-    else if (repeatIndex !== null &&
-        servar.metadata.repeat_options !== undefined &&
-        servar.metadata.repeat_options[repeatIndex] !== undefined) {
-        options = servar.metadata.repeat_options[repeatIndex];
-    }
-    else {
-        options = servar.metadata.options.map(function (opt, index) { return ({
-            value: opt,
-            label: labels && labels[index] ? labels[index] : opt,
-            tooltip: tooltips && tooltips[index] ? tooltips[index] : ''
-        }); });
-    }
-    return (index.jsxs("div", index.__assign({ ref: containerRef, css: index.__assign(index.__assign({ width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative' }) }, elementProps, { children: [children, fieldLabel, index.jsxs("div", index.__assign({ css: index.__assign({ display: 'flex', flexWrap: 'wrap', width: '100%' }, styles.getTarget('row-container')) }, { children: [options.map(function (option, i) {
-                        var _a, _b, _c;
-                        var value = (_a = option.value) !== null && _a !== void 0 ? _a : option;
-                        var label = (_b = option.label) !== null && _b !== void 0 ? _b : option;
-                        var tooltip = (_c = option.tooltip) !== null && _c !== void 0 ? _c : '';
-                        return (index.jsxs("div", index.__assign({ css: {
-                                display: 'flex'
-                            } }, { children: [index.jsxs("label", index.__assign({ style: { display: 'contents' } }, { children: [index.jsx("input", { type: 'radio', id: "".concat(servar.key, "-").concat(i), name: repeatIndex !== null
-                                                ? "".concat(servar.key, "-").concat(repeatIndex)
-                                                : servar.key, checked: fieldVal === value, required: required, disabled: disabled || loadingDynamicOptions, onChange: onChange, onFocus: index.iosScrollOnFocus, "aria-label": element.properties.aria_label, value: value, style: {
-                                                padding: 0,
-                                                lineHeight: 'normal'
-                                            }, css: index.__assign(index.__assign(index.__assign(index.__assign({}, index$1.composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), index.jsx("span", index.__assign({ css: index.__assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), index.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(value), text: tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] }), "".concat(servar.key, "-").concat(i)));
-                    }), servar.metadata.other && (index.jsxs("div", index.__assign({ style: { display: 'flex' } }, { children: [index.jsx("input", { type: 'radio', id: "".concat(servar.key, "-"), name: repeatIndex !== null
-                                    ? "".concat(servar.key, "-").concat(repeatIndex)
-                                    : servar.key, value: otherVal || '', checked: otherChecked, disabled: disabled || loadingDynamicOptions, onChange: function (e) {
-                                    var _a;
-                                    setOtherSelect(index.__assign(index.__assign({}, otherSelect), (_a = {}, _a[servar.key] = true, _a)));
-                                    onChange(e);
-                                }, onFocus: index.iosScrollOnFocus, style: {
-                                    padding: 0,
-                                    lineHeight: 'normal'
-                                }, css: index.__assign(index.__assign(index.__assign({}, index$1.composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})) }, "".concat(servar.key, "-")), index.jsx("label", index.__assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), index.jsx(FormControl.FormControl, { type: 'text', 
-                                // Paired with flex grow, will not expand parent width
-                                htmlSize: 1, css: index.__assign(index.__assign(index.__assign(index.__assign({ marginLeft: '5px' }, index.resetStyles), { paddingLeft: '0.4rem', flexGrow: 1 }), responsiveStyles.getTarget('field')), (otherTextDisabled || loadingDynamicOptions
-                                    ? responsiveStyles.getTarget('disabled')
-                                    : {})), id: servar.key, value: otherVal || '', onChange: onOtherChange, onKeyDown: function (e) {
-                                    if (e.key === 'Enter')
-                                        onEnter(e);
-                                }, maxLength: servar.max_length, minLength: servar.min_length, required: otherChecked, disabled: otherTextDisabled || loadingDynamicOptions }), index.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
-}
-
-exports.default = RadioButtonGroupField;