@feathery/react 2.6.8 → 2.8.0

package/dist/fthry_index.D99W7p5a.js

@@ -0,0 +1,293 @@
+import { j as jsxs, a as __assign, b as jsx, D as DROPDOWN_Z_INDEX, _ as __read, u as useBorder, ar as getFieldValue, as as stringifyWithNull, h as hoverStylesGuard, i as iosScrollOnFocus, k as FORM_Z_INDEX, r as resetStyles, at as emailPatternStr } from './fthry_index.F6BXSHA5.js';
+import { memo, useRef, useState } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.DLtEoCLC.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.AGcWhuhV.js';
+import { O as Overlay } from './fthry_Overlay.X0blINpo.js';
+import { u as useElementSize } from './fthry_useElementSize.D3n9DgQ-.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.CkEvtp1W.js';
+import { a as IMaskInput } from './fthry_input.Bfzc5hmV.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+import './fthry_index.B_soCJRW.js';
+
+function TextAutocomplete(_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 = useRef(null);
+    var dropdownWidth = useElementSize(triggerRef).width;
+    if (allOptions.length === 0)
+        return children;
+    return (jsxs("div", __assign({ ref: triggerRef, css: { height: '100%', width: '100%' } }, { children: [children, options.length > 0 && showOptions && (jsx(Overlay, __assign({ targetRef: triggerRef, containerRef: containerRef, show: true, placement: 'bottom-start', onHide: onHide }, { children: jsx("ul", __assign({ css: __assign({ zIndex: 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 (jsx("li", __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$1 = memo(TextAutocomplete);
+
+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 __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 __assign({ type: 'email', pattern: emailPatternStr, maxLength: maxLength }, constraints);
+        case 'gmap_zip':
+            if (autoComplete && !constraints.autoComplete) {
+                constraints.autoComplete = 'postal-code';
+            }
+            return __assign(__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 __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 __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 = __read(useState(false), 2), showAutocomplete = _l[0], setShowAutocomplete = _l[1];
+    // Hide SSNs by default
+    var _m = __read(useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
+    var _o = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder, borderId = _o.borderId;
+    var containerRef = useRef(null);
+    var listItemRef = useRef([]);
+    var inputRef = useRef(null);
+    var fieldVal = getFieldValue(element).value;
+    var rawValue = 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 (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign(__assign(__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-within': __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active), '&:hover': hoverStylesGuard(disabled
+                        ? {}
+                        : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [jsx(TextAutocomplete$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: jsx(IMaskInput, __assign({ id: servar.key, name: servar.key, ref: inputRef, css: __assign(__assign(__assign({ position: 'relative', 
+                                // Position input above the border div
+                                zIndex: FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, 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: iosScrollOnFocus, inputRef: setRef }, getInputProps(servar, options, autoComplete === 'on'), getMaskProps(servar, rawValue, showPassword), { onAccept: onAccept })) })), servar.type === 'ssn' && rawValue && (jsx("div", __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: FORM_Z_INDEX
+                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle SSN visibility' }, { children: showPassword ? jsx(ShowEyeIcon, {}) : jsx(ShowEyeIcon$1, {}) }))), customBorder, jsx(Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), jsx(InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = memo(TextField);
+
+export { index as default };

package/dist/fthry_index.DAGDZi5r.js

@@ -0,0 +1,97 @@
+import { j as jsxs, a as __assign, b as jsx, i as iosScrollOnFocus, r as resetStyles } from './fthry_index.F6BXSHA5.js';
+import { useRef, useMemo } from 'react';
+import { F as FormControl } from './fthry_FormControl.CPHJNRoq.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.DV1PqB3d.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.AGcWhuhV.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.prWuB8V7.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+import './fthry_Overlay.X0blINpo.js';
+
+var applyCheckboxGroupStyles = function (element, responsiveStyles) {
+    responsiveStyles.addTargets('checkboxGroup');
+    applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxGroup');
+    return responsiveStyles;
+};
+function CheckboxGroupField(_a) {
+    var _b, _c;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.fieldVal, fieldVal = _d === void 0 ? [] : _d, _e = _a.otherVal, otherVal = _e === void 0 ? '' : _e, _f = _a.repeatIndex, repeatIndex = _f === void 0 ? null : _f, editMode = _a.editMode, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onOtherChange, onOtherChange = _h === void 0 ? function () { } : _h, _j = _a.onEnter, onEnter = _j === void 0 ? function () { } : _j, _k = _a.elementProps, elementProps = _k === void 0 ? {} : _k, _l = _a.disabled, disabled = _l === void 0 ? false : _l, children = _a.children;
+    var servar = element.servar;
+    var _m = useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _m.dynamicOptions, loadingDynamicOptions = _m.loadingDynamicOptions, shouldSalesforceSync = _m.shouldSalesforceSync;
+    var otherChecked = fieldVal.includes(otherVal);
+    var otherLabel = (_b = servar.metadata.other_label) !== null && _b !== void 0 ? _b : 'Other';
+    var containerRef = useRef(null);
+    var styles = useMemo(function () {
+        applyCheckableInputStyles(element, responsiveStyles);
+        applyCheckboxGroupStyles(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 isOptionDisabled = function (checked) {
+        return (disabled ||
+            loadingDynamicOptions ||
+            (servar.max_length && servar.max_length <= fieldVal.length && !checked));
+    };
+    var otherDisabled = isOptionDisabled(otherChecked);
+    var otherTextDisabled = !otherChecked || otherDisabled;
+    var options;
+    if (shouldSalesforceSync) {
+        options = dynamicOptions.map(function (option) { return ({
+            value: option.value,
+            label: option.label,
+            tooltip: ''
+        }); });
+    }
+    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 (jsxs("div", __assign({ ref: containerRef, css: __assign({ position: 'relative', width: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __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 checked = fieldVal.includes(value);
+                        var optionDisabled = isOptionDisabled(checked);
+                        return (jsxs("div", __assign({ css: {
+                                display: 'flex',
+                                pointerEvents: optionDisabled ? 'none' : 'auto'
+                            } }, { children: [jsxs("label", __assign({ style: { display: 'contents' } }, { children: [jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-").concat(i), name: value, checked: checked, onChange: onChange, onFocus: iosScrollOnFocus, style: { padding: 0, lineHeight: 'normal' }, css: __assign(__assign(__assign(__assign({}, composeCheckableInputStyle(styles, optionDisabled)), styles.getTarget('checkboxGroup')), (optionDisabled
+                                                ? responsiveStyles.getTarget('disabled')
+                                                : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }), disabled: optionDisabled, "aria-label": element.properties.aria_label }), jsx("span", __assign({ css: __assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), jsx(InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(value), text: (_c = option.tooltip) !== null && _c !== void 0 ? _c : '', responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] }), "".concat(servar.key, "-").concat(i)));
+                    }), servar.metadata.other && (jsxs("div", __assign({ style: { display: 'flex' } }, { children: [jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-"), name: otherVal, checked: otherChecked, disabled: otherDisabled, onChange: onChange, onFocus: iosScrollOnFocus, style: {
+                                    padding: 0,
+                                    lineHeight: 'normal'
+                                }, css: __assign(__assign(__assign(__assign({}, composeCheckableInputStyle(styles, otherDisabled)), styles.getTarget('checkboxGroup')), (otherDisabled
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }, "".concat(servar.key, "-")), jsx("label", __assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), jsx(FormControl, { type: 'text', 
+                                // Paired with flex grow, will not expand parent width
+                                htmlSize: 1, css: __assign(__assign(__assign(__assign({ marginLeft: '5px' }, resetStyles), { paddingLeft: '0.4rem', flexGrow: 1 }), responsiveStyles.getTarget('field')), (otherTextDisabled
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), id: servar.key, value: otherVal || '', onChange: onOtherChange, onKeyDown: function (e) {
+                                    if (e.key === 'Enter')
+                                        onEnter(e);
+                                }, required: otherChecked, disabled: otherTextDisabled }), jsx(InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
+}
+
+export { CheckboxGroupField as default };

package/dist/fthry_index.DV1PqB3d.js

@@ -0,0 +1,138 @@
+import { a as __assign, h as hoverStylesGuard, j as jsxs, b as jsx, i as iosScrollOnFocus } from './fthry_index.F6BXSHA5.js';
+import { useMemo } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+// Draws a checkmark, similar in dimensions to the default Chrome checkbox, in CSS
+var checkmarkClipPath = 'polygon(40% 85%, 89% 23%, 76% 12%, 39% 59%, 23% 44%, 12% 55%)';
+var MIN_CHECKBOX_PX = 13;
+// Possibly extract this to its own file, however the radio type is nearly identical to checkbox
+var radio = function (size, color) {
+    size = Math.floor(size / 1.7);
+    return {
+        height: size,
+        width: size,
+        minWidth: size,
+        minHeight: size,
+        border: 0,
+        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
+        borderRadius: '50%'
+    };
+};
+var checkbox = function (size, color) {
+    return {
+        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
+        clipPath: checkmarkClipPath
+    };
+};
+var scaleCheckboxSize = function (fontSize) {
+    return Math.max(fontSize, MIN_CHECKBOX_PX);
+};
+var applyHeightWidthMarginByFontSize = function (responsiveStyles, target, single) {
+    if (single === void 0) { single = false; }
+    responsiveStyles.apply(target, ['font_size'], function (fontSize) {
+        var scaled = scaleCheckboxSize(fontSize);
+        var scaledSize = "".concat(scaled, "px");
+        var styles = {
+            minHeight: scaledSize,
+            height: scaledSize,
+            minWidth: scaledSize,
+            width: scaledSize
+        };
+        var margin = Math.max(scaled / 2, 10);
+        if (!single)
+            styles.marginRight = "".concat(margin, "px");
+        return styles;
+    });
+};
+var applyCheckmarkByFontSize = function (responsiveStyles, target, colorProperty, isRadio) {
+    responsiveStyles.apply(target, ['font_size', colorProperty], function (fontSize, color) {
+        var scaledSize = scaleCheckboxSize(fontSize);
+        return isRadio ? radio(scaledSize, color) : checkbox(scaledSize, color);
+    });
+};
+var applyLabelHeightByFontSize = function (responsiveStyles, target) {
+    responsiveStyles.apply(target, ['font_size', 'line_height'], function (fontSize, lineHeight) {
+        if (!lineHeight)
+            lineHeight = scaleCheckboxSize(fontSize);
+        var topOffset = (lineHeight - fontSize) / 2;
+        return {
+            position: 'relative',
+            top: "-".concat(topOffset, "px"),
+            lineHeight: "".concat(lineHeight, "px")
+        };
+    });
+};
+var applyCheckmark = function (responsiveStyles, target, colorProperty) {
+    responsiveStyles.apply(target, ['height', 'height_unit', 'width', 'width_unit', colorProperty], function (height, heightUnit, width, widthUnit, color) {
+        return {
+            boxShadow: "inset ".concat(width).concat(widthUnit, " ").concat(height).concat(heightUnit, " #").concat(color),
+            clipPath: checkmarkClipPath
+        };
+    });
+};
+function applyCheckableInputStyles(element, responsiveStyles) {
+    responsiveStyles.addTargets('checkbox', 'checkboxCheckmark', 'checkboxSelected', 'checkboxHover', 'checkboxCheckmarkHover', 'checkboxLabel');
+    var _a = element.servar, type = _a.type, multiple = _a.metadata.multiple;
+    var isRadioGroup = type === 'select' || (type === 'matrix' && !multiple);
+    var isCheckboxGroup = type === 'multiselect' ||
+        type === 'checkbox_group' ||
+        (type === 'matrix' && multiple);
+    var scaleWithFontSize = isCheckboxGroup || isRadioGroup;
+    // width/height styles
+    if (scaleWithFontSize) {
+        applyLabelHeightByFontSize(responsiveStyles, 'checkboxLabel');
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkbox', true);
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmark', true);
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmarkHover', true);
+        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmark', 'selected_font_color', isRadioGroup);
+        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color', isRadioGroup);
+    }
+    else {
+        responsiveStyles.applyHeight('checkbox');
+        responsiveStyles.applyWidth('checkbox');
+        responsiveStyles.applyHeight('checkboxCheckmark');
+        responsiveStyles.applyWidth('checkboxCheckmark');
+        responsiveStyles.applyHeight('checkboxCheckmarkHover');
+        responsiveStyles.applyWidth('checkboxCheckmarkHover');
+        applyCheckmark(responsiveStyles, 'checkboxCheckmark', 'selected_font_color');
+        applyCheckmark(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color');
+    }
+    // base styles
+    responsiveStyles.applyBorders({ target: 'checkbox' });
+    if (!isRadioGroup)
+        responsiveStyles.applyCorners('checkbox');
+    responsiveStyles.applyBoxShadow('checkbox');
+    responsiveStyles.applyColor('checkbox', 'background_color', 'backgroundColor', true);
+    responsiveStyles.applySelectorStyles('checkboxHover', {
+        prefix: 'hover_',
+        important: true
+    });
+    responsiveStyles.applySelectorStyles('checkboxSelected', {
+        prefix: 'selected_',
+        important: true
+    });
+    return responsiveStyles;
+}
+var composeCheckableInputStyle = function (styles, noHover, isRadio) {
+    if (noHover === void 0) { noHover = false; }
+    if (isRadio === void 0) { isRadio = false; }
+    return __assign(__assign({ position: 'static', marginLeft: 5, marginRight: 5, marginTop: 0, marginBottom: 0, appearance: 'none', display: 'grid', placeContent: 'center', 
+        // On error in Safari, checkboxes can have a misshapen outline so disable
+        outline: 'none', borderRadius: isRadio ? '50%' : null }, styles.getTarget('checkbox')), { '&:hover': hoverStylesGuard(noHover ? {} : styles.getTarget('checkboxHover')), '&::before': __assign({ content: "''", transform: 'scale(0)' }, styles.getTarget('checkboxCheckmark')), '&:hover::before': hoverStylesGuard(__assign(__assign({}, styles.getTarget('checkboxCheckmark')), styles.getTarget('checkboxCheckmarkHover'))), '&:checked': __assign({}, styles.getTarget('checkboxSelected')), '&:checked::before': {
+            transform: 'scale(1)'
+        } });
+};
+function CheckboxField(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.fieldVal, fieldVal = _b === void 0 ? true : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
+    var styles = useMemo(function () { return applyCheckableInputStyles(element, responsiveStyles); }, [responsiveStyles]);
+    var servar = element.servar;
+    return (jsxs("div", __assign({ css: __assign(__assign({}, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex' }) }, elementProps, { children: [children, jsx("input", { id: servar.key, name: servar.key, type: 'checkbox', checked: fieldVal, disabled: disabled, onChange: onChange, onFocus: iosScrollOnFocus, "aria-label": element.properties.aria_label, css: __assign(__assign(__assign({}, composeCheckableInputStyle(styles, disabled)), (disabled ? responsiveStyles.getTarget('disabled') : {})), { marginTop: '4px', '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), fieldLabel] })));
+}
+
+export { applyCheckableInputStyles, applyHeightWidthMarginByFontSize, composeCheckableInputStyle, CheckboxField as default };