@cerebruminc/cerebellum 16.1.1-beta.dangerous.fe9f73b → 16.2.0

package/lib/cjs/validateColorContrast.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var pressedEnter = require('./pressedEnter.cjs');
+
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * according to WCAG AA accessibility standards (4.5:1 ratio for normal text).
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @returns boolean - true if the contrast ratio is >= 4.5:1, false otherwise
+ */
+var validateColorContrast = function (color, backgroundColor) {
+    if (backgroundColor === void 0) { backgroundColor = "#ffffff"; }
+    if (!color) {
+        return true; // Allow empty values, let required validation handle this
+    }
+    try {
+        var contrastRatio = pressedEnter.contrast(color, backgroundColor);
+        // WCAG AA requires 4.5:1 for normal text, 3:1 for large text
+        // Using 4.5 as the threshold for accessibility compliance
+        return contrastRatio >= 4.5;
+    }
+    catch (error) {
+        // If there's an error in contrast calculation (invalid color format, etc.)
+        // return true to avoid blocking the form, let other validation handle format issues
+        return true;
+    }
+};
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * and returns an error message if validation fails.
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @param errorMessage - Custom error message (optional)
+ * @returns string | null - Error message if validation fails, null if valid
+ */
+var validateColorContrastWithMessage = function (color, backgroundColor, errorMessage) {
+    if (backgroundColor === void 0) { backgroundColor = "#ffffff"; }
+    if (!color) {
+        return null; // Allow empty values, let required validation handle this
+    }
+    var isValid = validateColorContrast(color, backgroundColor);
+    if (!isValid) {
+        return errorMessage || "This color does not have sufficient contrast for accessibility";
+    }
+    return null;
+};
+
+exports.validateColorContrast = validateColorContrast;
+exports.validateColorContrastWithMessage = validateColorContrastWithMessage;
+//# sourceMappingURL=validateColorContrast.cjs.map

package/lib/cjs/validateColorContrast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateColorContrast.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/validateColorContrastWithMessage.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./pressedEnter.cjs');
+var validateColorContrast = require('./validateColorContrast.cjs');
+
+
+
+exports.validateColorContrast = validateColorContrast.validateColorContrast;
+exports.validateColorContrastWithMessage = validateColorContrast.validateColorContrastWithMessage;
+//# sourceMappingURL=validateColorContrastWithMessage.cjs.map

package/lib/cjs/validateColorContrastWithMessage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateColorContrastWithMessage.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/esm/ColorPickerInput-S8X2gIA5.js

@@ -0,0 +1,180 @@
+import { b as __makeTemplateObject, _ as __assign } from './_tslib-CcAXazg4.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { BodyXSPrimary } from './BodyLEmphasis.js';
+import { u as useMeasure } from './useMeasure-D89v6c_A.js';
+import { s as showLabel } from './showLabel-D6KgNem4.js';
+import { I as InputGroup, L as LabelBox, V as ValidationText, H as HelperText } from './Inputs-C6OWHviY.js';
+import { contrast } from './pressedEnter.js';
+import { validateColorContrast } from './validateColorContrast.js';
+
+// Container that holds both the input and the text side by side
+var ColorPickerContainer = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 12px;\n"], ["\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 12px;\n"])));
+var ColorInputWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background: ", ";\n  border: solid 1px ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-shrink: 0; /* Prevent the square from shrinking */\n  height: ", "px;\n  justify-content: center;\n  min-width: ", "px;\n  padding: ", "px;\n  position: relative;\n  transition: border-color 350ms ease-out 50ms, background-color 350ms ease-out 50ms;\n  /* Make the wrapper square based on inputHeight, with a larger default for color pickers */\n  width: ", "px;\n  \n  &:hover {\n    border-color: ", ";\n  }\n  \n  &:focus-within {\n    border-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background: ", ";\n  border: solid 1px ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-shrink: 0; /* Prevent the square from shrinking */\n  height: ", "px;\n  justify-content: center;\n  min-width: ", "px;\n  padding: ", "px;\n  position: relative;\n  transition: border-color 350ms ease-out 50ms, background-color 350ms ease-out 50ms;\n  /* Make the wrapper square based on inputHeight, with a larger default for color pickers */\n  width: ", "px;\n  \n  &:hover {\n    border-color: ", ";\n  }\n  \n  &:focus-within {\n    border-color: ", ";\n  }\n"])), function (_a) {
+    var _b;
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBackgroundColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.inputBackgroundColor);
+}, function (_a) {
+    var _b, _c, _d;
+    var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
+    return $showValidationMessage
+        ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
+        : $disabled
+            ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
+            : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inactiveBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.inactiveBorderColor);
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBorderRadius) || theme.input.inputBorderRadius;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
+}, function (_a) {
+    var _b;
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return (_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputPadding) !== null && _b !== void 0 ? _b : theme.colorPickerInput.padding;
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
+}, function (_a) {
+    var _b, _c, _d;
+    var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
+    return $showValidationMessage
+        ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
+        : $disabled
+            ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
+            : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.hoverBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.hoverBorderColor);
+}, function (_a) {
+    var _b, _c, _d;
+    var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
+    return $showValidationMessage
+        ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
+        : $disabled
+            ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
+            : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.activeBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.activeBorderColor);
+});
+// Custom styled color input that is 90% of the wrapper size and centered
+var ColorInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: none;\n  border-radius: 4px;\n  border: none;\n  cursor: ", ";\n  height: 90%;\n  opacity: ", ";\n  outline: none;\n  width: 90%;\n  \n  /* Remove the default color input outline/border and ensure color is visible */\n  &::-webkit-color-swatch-wrapper {\n    border-radius: 4px;\n    border: none;\n    padding: 0;\n  }\n  \n  &::-webkit-color-swatch {\n    border: none;\n    border-radius: 4px;\n    outline: none;\n  }\n  \n  &::-moz-color-swatch {\n    border: none;\n    border-radius: 4px;\n    outline: none;\n  }\n  \n  /* Firefox specific fixes */\n  &::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n  \n  &:focus {\n    outline: none;\n  }\n"], ["\n  background: none;\n  border-radius: 4px;\n  border: none;\n  cursor: ", ";\n  height: 90%;\n  opacity: ", ";\n  outline: none;\n  width: 90%;\n  \n  /* Remove the default color input outline/border and ensure color is visible */\n  &::-webkit-color-swatch-wrapper {\n    border-radius: 4px;\n    border: none;\n    padding: 0;\n  }\n  \n  &::-webkit-color-swatch {\n    border: none;\n    border-radius: 4px;\n    outline: none;\n  }\n  \n  &::-moz-color-swatch {\n    border: none;\n    border-radius: 4px;\n    outline: none;\n  }\n  \n  /* Firefox specific fixes */\n  &::-moz-focus-inner {\n    border: none;\n    padding: 0;\n  }\n  \n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 0.5 : 1);
+});
+// Legibility text component that displays to the right, vertically centered
+var LegibilityText = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  opacity: ", ";\n  white-space: nowrap;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  opacity: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+    var _b, _c;
+    var $disabled = _a.$disabled, $themeOverride = _a.$themeOverride, theme = _a.theme;
+    return $disabled ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.disabledColor) : (_c = theme.input) === null || _c === void 0 ? void 0 : _c.helperTextColor;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (((_b = theme.input) === null || _b === void 0 ? void 0 : _b.textFontSize) || 14) - 2;
+}, function (_a) {
+    var $disabled = _a.$disabled;
+    return ($disabled ? 0.5 : 1);
+});
+var InlineColorPickerInput = function (_a) {
+    var _b = _a.checkLegible, checkLegible = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, focus = _a.focus, innerRef = _a.innerRef, inputLabel = _a.inputLabel, _d = _a.legibleAgainst, legibleAgainst = _d === void 0 ? "#ffffff" : _d, name = _a.name, onChange = _a.onChange, onEnter = _a.onEnter, onInputBlur = _a.onInputBlur, onInputFocus = _a.onInputFocus, onValueChange = _a.onValueChange, _e = _a.showValidationMessage, showValidationMessage = _e === void 0 ? false : _e, themeOverride = _a.themeOverride, value = _a.value;
+    var inputRef = innerRef || useRef(null);
+    // Calculate legibility and dynamic text
+    var legibilityInfo = useMemo(function () {
+        if (!checkLegible || !value) {
+            return { isLegible: true, legibilityText: undefined };
+        }
+        try {
+            var isLegible = validateColorContrast(value, legibleAgainst);
+            var legibilityText = void 0;
+            if (isLegible) {
+                legibilityText = "✅ Looks good";
+            }
+            else {
+                // Determine if we need lighter or darker
+                // If contrast with black is greater, the color is light and needs to be darker
+                // If contrast with white is greater, the color is dark and needs to be lighter
+                var needsDarker = contrast(value, "#000000") > contrast(value, "#ffffff");
+                legibilityText = needsDarker ? "⚠️ Too light" : "⚠️ Too dark";
+            }
+            return { isLegible: isLegible, legibilityText: legibilityText };
+        }
+        catch (error) {
+            // If there's an error in contrast calculation, assume it's legible
+            return { isLegible: true, legibilityText: undefined };
+        }
+    }, [checkLegible, value, legibleAgainst]);
+    useEffect(function () {
+        var _a;
+        if (focus) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [focus]);
+    return (jsxs(ColorPickerContainer, { children: [jsx(ColorInputWrapper, { "$disabled": disabled, "$showValidationMessage": showValidationMessage || (checkLegible && !legibilityInfo.isLegible), "$themeOverride": themeOverride, children: jsx(ColorInput, __assign({ ref: inputRef, type: "color", value: value, disabled: disabled, "$disabled": disabled, "$themeOverride": themeOverride }, (name ? { name: name } : {}), { onChange: function (event) {
+                        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event.target.value);
+                        onChange === null || onChange === void 0 ? void 0 : onChange({
+                            target: {
+                                value: event.target.value,
+                                name: name,
+                                selectionStart: event.target.selectionStart || undefined,
+                                selectionEnd: event.target.selectionEnd || undefined,
+                            },
+                            nativeEvent: event.nativeEvent,
+                        });
+                    }, onBlur: function (event) {
+                        if (onInputBlur) {
+                            onInputBlur(event);
+                        }
+                    }, onFocus: function (event) {
+                        if (onInputFocus) {
+                            onInputFocus(event);
+                        }
+                    }, onKeyDown: function (event) {
+                        if (event.key === "Enter" && onEnter) {
+                            onEnter(value);
+                        }
+                    }, "aria-label": typeof inputLabel === "string" ? inputLabel : undefined })) }), checkLegible && legibilityInfo.legibilityText && (jsx(LegibilityText, { "$isLegible": legibilityInfo.isLegible, "$disabled": disabled, "$themeOverride": themeOverride, children: legibilityInfo.legibilityText }))] }));
+};
+var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
+
+var InstructionalText = styled(BodyXSPrimary)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcolor: ", ";\n\tfont-size: ", "px;\n\tmargin-bottom: ", "px;\n"], ["\n\tcolor: ", ";\n\tfont-size: ", "px;\n\tmargin-bottom: ", "px;\n"])), function (_a) {
+    var theme = _a.theme, $themeOverride = _a.$themeOverride;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextColor) || theme.colorPickerInput.instructionalTextColor;
+}, function (_a) {
+    var theme = _a.theme, $themeOverride = _a.$themeOverride;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
+}, function (_a) {
+    var theme = _a.theme, $themeOverride = _a.$themeOverride;
+    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
+});
+var ColorPickerInput = function (props) {
+    var _a = props.checkLegible, checkLegible = _a === void 0 ? false : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, helperText = props.helperText, inputLabel = props.inputLabel, inputWidth = props.inputWidth, instructionalText = props.instructionalText, _c = props.showValidationMessage, showValidationMessage = _c === void 0 ? false : _c, themeOverride = props.themeOverride, validationMessage = props.validationMessage;
+    var labelBoxRef = useRef(null);
+    var _d = useMeasure(), inputGroupRef = _d[0], inputGroupMeasure = _d[1];
+    var validationRef = useRef(null);
+    var _e = useState(false), designSwitch = _e[0], setDesignSwitch = _e[1];
+    var helperTextVisible = !showValidationMessage || !designSwitch;
+    useEffect(function () {
+        var _a, _b;
+        var validationWidth = ((_a = validationRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+        var labelWidth = ((_b = labelBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+        var noRoomForTopLabel = validationWidth + labelWidth >= inputGroupMeasure.width;
+        if (noRoomForTopLabel) {
+            setDesignSwitch(true);
+        }
+        else {
+            setDesignSwitch(false);
+        }
+    }, [inputGroupMeasure.width, showValidationMessage, inputLabel, validationMessage]);
+    return (jsxs(InputGroup, { ref: inputGroupRef, "$inputWidth": inputWidth, "$roomForError": showValidationMessage && !inputLabel, children: [jsx(LabelBox, { ref: labelBoxRef, children: showLabel({
+                    inputLabel: inputLabel,
+                    disabled: disabled,
+                    disabledColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor,
+                    labelColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.labelColor,
+                }) }), instructionalText && jsx(InstructionalText, { "$themeOverride": themeOverride, children: instructionalText }), jsx(InlineColorPickerInput, __assign({}, props, { checkLegible: checkLegible, themeOverride: themeOverride })), jsx(ValidationText, { ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.failColor, "$disabledColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor, "$designSwitch": designSwitch && showValidationMessage, children: validationMessage }), helperTextVisible && (jsx(HelperText, { "$disabled": disabled, "$helperTextColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.helperTextColor, "$disabledColor": themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor, "data-sentry-unmask": true, children: helperText }))] }));
+};
+var templateObject_1;
+
+export { ColorPickerInput as C, InlineColorPickerInput as I };
+//# sourceMappingURL=ColorPickerInput-S8X2gIA5.js.map

package/lib/esm/ColorPickerInput-S8X2gIA5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput-S8X2gIA5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/ColorPickerInput.js

@@ -0,0 +1,18 @@
+export { C as ColorPickerInput, I as InlineColorPickerInput } from './ColorPickerInput-S8X2gIA5.js';
+import './_tslib-CcAXazg4.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'styled-components';
+import './BodyLEmphasis.js';
+import './useMeasure-D89v6c_A.js';
+import './addOrRemoveById.js';
+import 'dayjs';
+import './isEmptyObject.js';
+import './useIsomorphicLayoutEffect-Br1zBZHl.js';
+import './showLabel-D6KgNem4.js';
+import './Inputs-C6OWHviY.js';
+import './colors.js';
+import './IconComponentStyles-BwczcTS4.js';
+import './pressedEnter.js';
+import './validateColorContrast.js';
+//# sourceMappingURL=ColorPickerInput.js.map

package/lib/esm/ColorPickerInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/lib/esm/DatePicker.js

@@ -1,7 +1,7 @@
 import { _ as __assign } from './_tslib-CcAXazg4.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import { D as DatePickerGroup, I as InlineDatePicker, V as ValidationText, H as HelperText } from './InlineDatePicker-ClVBWEzW.js';
+import { D as DatePickerGroup, I as InlineDatePicker, V as ValidationText, H as HelperText } from './InlineDatePicker-BuxjkoV0.js';
 import { u as useMeasure } from './useMeasure-D89v6c_A.js';
 import { s as showLabel } from './showLabel-D6KgNem4.js';
 import { L as LabelBox, A as Asterisk } from './Inputs-C6OWHviY.js';

package/lib/esm/Form.js

@@ -1,6 +1,6 @@
-export { F as FormWrapper } from './FormStyles-BQJPyTS0.js';
-export { F as Form } from './FormikContainer-SJPYfIkF.js';
-export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
+export { F as FormWrapper } from './FormStyles-CyqyMC1o.js';
+export { F as Form } from './FormikContainer-uI5oe1px.js';
+export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isColorPicker, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
 import './_tslib-CcAXazg4.js';
 import 'styled-components';
 import './colors.js';
@@ -18,6 +18,8 @@ import './Switches-yNTNw1zb.js';
 import './DescriptiveSwitchMenuStyles-CQ_uwipg.js';
 import './SwitchTypeEnum.js';
 import './addOrRemoveById.js';
+import './validateColorContrast.js';
+import './pressedEnter.js';
 import './formatBytesToString.js';
 import './northAmericanNumberingPlanRegex.js';
 import 'yup';
@@ -26,7 +28,6 @@ import 'react';
 import './ButtonColorFamilyEnum.js';
 import './LoadingEllipsis-8qdawLXG.js';
 import './Button.js';
-import './pressedEnter.js';
 import './ArrowLong.js';
 import './colors-D-UTb8yU.js';
 import './CaretDown.js';
@@ -60,6 +61,7 @@ import './Checkbox-BvmFgeG0.js';
 import './CheckboxEmpty.js';
 import './CheckboxFull.js';
 import './CheckboxGroup-DLMaYrFn.js';
+import './ColorPickerInput-S8X2gIA5.js';
 import './ConfigurableInput-BjJTNTyz.js';
 import './RadioGroup-ByCUWp6N.js';
 import './RadioItem-BKCG_dY3.js';
@@ -92,7 +94,7 @@ import './cardValidationStateMachine.js';
 import './CurrencyInput-CzI4uaoz.js';
 import './InlineCurrencyInput-DPpU3QyZ.js';
 import './DatePicker.js';
-import './InlineDatePicker-ClVBWEzW.js';
+import './InlineDatePicker-BuxjkoV0.js';
 import './Calendar.js';
 import './ClickOutHandler-CcKVoXIs.js';
 import './CaretLeft.js';

package/lib/esm/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Form.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/FormFieldTypeEnum.js

@@ -3,6 +3,7 @@ var FormFieldTypeEnum;
     FormFieldTypeEnum["Address"] = "ADDRESS";
     FormFieldTypeEnum["Checkbox"] = "CHECKBOX";
     FormFieldTypeEnum["CheckboxGroup"] = "CHECKBOX_GROUP";
+    FormFieldTypeEnum["ColorPicker"] = "COLOR_PICKER";
     FormFieldTypeEnum["ConfigurableInput"] = "CONFIGURABLE_INPUT";
     FormFieldTypeEnum["CountySelect"] = "COUNTY_SELECT";
     FormFieldTypeEnum["CountrySelect"] = "COUNTRY_SELECT";
@@ -44,6 +45,9 @@ var isCheckbox = function (field) {
 var isCheckboxGroup = function (field) {
     return field.type === FormFieldTypeEnum.CheckboxGroup;
 };
+var isColorPicker = function (field) {
+    return field.type === FormFieldTypeEnum.ColorPicker;
+};
 var isConfigurableInput = function (field) {
     return field.type === FormFieldTypeEnum.ConfigurableInput;
 };
@@ -155,5 +159,5 @@ var isZipCode = function (field) {
     return field.type === FormFieldTypeEnum.ZipCode;
 };
 
-export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isArrayOfSelectOptionsType, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isHidden, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSelectOptionType, isSocialSecurity, isSplitLine, isStateSelect, isSwitchMenuOptionsType, isText, isTextarea, isToggle, isToggleGroup, isZipCode };
+export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isArrayOfSelectOptionsType, isCheckbox, isCheckboxGroup, isColorPicker, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isHidden, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSelectOptionType, isSocialSecurity, isSplitLine, isStateSelect, isSwitchMenuOptionsType, isText, isTextarea, isToggle, isToggleGroup, isZipCode };
 //# sourceMappingURL=FormFieldTypeEnum.js.map

package/lib/esm/FormFieldTypeEnum.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTypeEnum.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormFieldTypeEnum.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/FormSeparator.js

@@ -5,7 +5,7 @@ import './BodyLEmphasis.js';
 import './Loading.js';
 import './Scroller.js';
 import './Inputs-C6OWHviY.js';
-export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, o as CenterToggle, s as ClearFormButtonWrap, e as FieldBox, p as FormGroup, a as FormSeparator, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, n as InlineFieldCell, m as InlineFieldGrid, I as InputBox, f as LeftGutter, g as LeftLabel, L as LoadingBase, b as LoadingBox, d as LoadingInput, c as LoadingLabel, k as RemovableButtonBox, i as RemovableFieldBox, j as RemoveButtonWrapper, R as RightGutter, S as SubHeader, v as SubmitButton, l as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-BQJPyTS0.js';
+export { u as AddButtonBox, A as AddButtonGroup, B as ButtonGroup, w as CancelButton, C as CenterCheckbox, o as CenterToggle, s as ClearFormButtonWrap, e as FieldBox, p as FormGroup, a as FormSeparator, q as FormTitleGroup, F as FormWrapper, H as HelperTextGrid, n as InlineFieldCell, m as InlineFieldGrid, I as InputBox, f as LeftGutter, g as LeftLabel, L as LoadingBase, b as LoadingBox, d as LoadingInput, c as LoadingLabel, k as RemovableButtonBox, i as RemovableFieldBox, j as RemoveButtonWrapper, R as RightGutter, S as SubHeader, v as SubmitButton, l as Text, r as Title, T as TitleGroup, V as ValidationTextGrid } from './FormStyles-CyqyMC1o.js';
 import 'react/jsx-runtime';
 import './IconComponentStyles-BwczcTS4.js';
 import './CheckboxStyles-Cx6hCn3t.js';
@@ -16,6 +16,8 @@ import './Switches-yNTNw1zb.js';
 import './DescriptiveSwitchMenuStyles-CQ_uwipg.js';
 import './SwitchTypeEnum.js';
 import './addOrRemoveById.js';
+import './validateColorContrast.js';
+import './pressedEnter.js';
 import './formatBytesToString.js';
 import './northAmericanNumberingPlanRegex.js';
 import 'yup';

package/lib/esm/FormSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormSeparator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormSeparator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/{FormStyles-BQJPyTS0.js → FormStyles-CyqyMC1o.js}

@@ -14,10 +14,11 @@ import './Switches-yNTNw1zb.js';
 import './DescriptiveSwitchMenuStyles-CQ_uwipg.js';
 import { SwitchTypeEnum } from './SwitchTypeEnum.js';
 import { getObjectById } from './addOrRemoveById.js';
+import { validateColorContrast } from './validateColorContrast.js';
 import { formatBytesToString } from './formatBytesToString.js';
 import { northAmericanNumberingPlanRegex } from './northAmericanNumberingPlanRegex.js';
 import * as yup from 'yup';
-import { FormFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isToggle, isCheckboxGroup, isMultiSelect, isToggleGroup, isRemovable, isPassword, isAddress, isConfigurableInput, isCountySelect, isCountrySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isImagePicker, isNumber, isPhone, isRadioGroup, isSelect, isSocialSecurity, isStateSelect, isTextarea, isZipCode } from './FormFieldTypeEnum.js';
+import { FormFieldTypeEnum, isSplitLine, isSectionHeader, isCheckbox, isToggle, isCheckboxGroup, isMultiSelect, isToggleGroup, isRemovable, isPassword, isAddress, isColorPicker, isConfigurableInput, isCountySelect, isCountrySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isImagePicker, isNumber, isPhone, isRadioGroup, isSelect, isSocialSecurity, isStateSelect, isTextarea, isZipCode } from './FormFieldTypeEnum.js';
 
 var integerRegex = /^\d+$/;
 // at least 8 chars
@@ -173,8 +174,24 @@ var formatValidationInternals = function (_a) {
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
             }
+            else if (isColorPicker(field)) {
+                var _j = field.requiredMessage, requiredMessage = _j === void 0 ? "This field is required" : _j, _k = field.validationMessage, validationMessage = _k === void 0 ? "This color does not have sufficient contrast for accessibility" : _k;
+                var _l = field.options || {}, _m = _l.checkLegible, checkLegible = _m === void 0 ? false : _m, _o = _l.legibleAgainst, legibleAgainst_1 = _o === void 0 ? "#ffffff" : _o;
+                // Create base string validation
+                var colorSchema = yup.string();
+                // Add contrast validation if checkLegible is enabled
+                if (checkLegible) {
+                    colorSchema = colorSchema.test("color-contrast", validationMessage, function (value) {
+                        if (!value)
+                            return true; // Allow empty values, let required validation handle this
+                        return validateColorContrast(value, legibleAgainst_1);
+                    });
+                }
+                validationInternals[name_6] =
+                    validationFunction || (required && allowRequired && !disabled ? colorSchema.required(requiredMessage) : colorSchema);
+            }
             else if (isConfigurableInput(field)) {
-                var _j = field.requiredMessage, requiredMessage = _j === void 0 ? "This field is required" : _j, _k = field.validationMessage, validationMessage = _k === void 0 ? "This field must be a string" : _k, options = field.options;
+                var _p = field.requiredMessage, requiredMessage = _p === void 0 ? "This field is required" : _p, _q = field.validationMessage, validationMessage = _q === void 0 ? "This field must be a string" : _q, options = field.options;
                 var maskedRadios = options.maskedRadios, defaultId = options.defaultId;
                 var activeId = configurableInputFieldActiveIds[name_6] || defaultId || maskedRadios[0].value;
                 var selectedOption = getObjectById({ array: maskedRadios, id: activeId, idKey: "value" });
@@ -187,31 +204,31 @@ var formatValidationInternals = function (_a) {
                             : yup.string().typeError(validationMessage));
             }
             else if (isCountySelect(field)) {
-                var _l = field.requiredMessage, requiredMessage = _l === void 0 ? "This field is required" : _l, _m = field.validationMessage, validationMessage = _m === void 0 ? "This field must be a string" : _m;
+                var _r = field.requiredMessage, requiredMessage = _r === void 0 ? "This field is required" : _r, _s = field.validationMessage, validationMessage = _s === void 0 ? "This field must be a string" : _s;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isCountrySelect(field)) {
-                var _o = field.requiredMessage, requiredMessage = _o === void 0 ? "This field is required" : _o, _p = field.validationMessage, validationMessage = _p === void 0 ? "This field must be a string" : _p;
+                var _t = field.requiredMessage, requiredMessage = _t === void 0 ? "This field is required" : _t, _u = field.validationMessage, validationMessage = _u === void 0 ? "This field must be a string" : _u;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isCreditCard(field)) {
-                var _q = field.requiredMessage, requiredMessage = _q === void 0 ? "This field is required" : _q, _r = field.validationMessage, validationMessage = _r === void 0 ? "This field must be a string" : _r;
+                var _v = field.requiredMessage, requiredMessage = _v === void 0 ? "This field is required" : _v, _w = field.validationMessage, validationMessage = _w === void 0 ? "This field must be a string" : _w;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isCurrency(field)) {
-                var _s = field.requiredMessage, requiredMessage = _s === void 0 ? "This field is required" : _s, _t = field.validationMessage, validationMessage = _t === void 0 ? "This field must be a number" : _t;
+                var _x = field.requiredMessage, requiredMessage = _x === void 0 ? "This field is required" : _x, _y = field.validationMessage, validationMessage = _y === void 0 ? "This field must be a number" : _y;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.number().required(requiredMessage) : yup.number().typeError(validationMessage));
             }
             else if (isDatePicker(field)) {
-                var _u = field.requiredMessage, requiredMessage = _u === void 0 ? "This field is required" : _u, _v = field.validationMessage, validationMessage = _v === void 0 ? "Please enter a valid date" : _v;
+                var _z = field.requiredMessage, requiredMessage = _z === void 0 ? "This field is required" : _z, _0 = field.validationMessage, validationMessage = _0 === void 0 ? "Please enter a valid date" : _0;
                 var dateSchema = yup
                     .date()
                     // For some reason, "value" is always wrong. Thanks react-datepicker. Thanks a lot.
@@ -228,7 +245,7 @@ var formatValidationInternals = function (_a) {
                     validationFunction || (required && allowRequired && !disabled ? dateSchema.required(requiredMessage) : dateSchema);
             }
             else if (isDescriptiveDropdownInput(field)) {
-                var _w = field.requiredMessage, requiredMessage = _w === void 0 ? "Please select at least one" : _w, _x = field.validationMessage, validationMessage = _x === void 0 ? "This field must be a string" : _x;
+                var _1 = field.requiredMessage, requiredMessage = _1 === void 0 ? "Please select at least one" : _1, _2 = field.validationMessage, validationMessage = _2 === void 0 ? "This field must be a string" : _2;
                 var switchType = (_b = field.options) === null || _b === void 0 ? void 0 : _b.switchType;
                 if (!switchType || switchType === SwitchTypeEnum.Radio) {
                     validationInternals[name_6] =
@@ -242,7 +259,7 @@ var formatValidationInternals = function (_a) {
                 }
             }
             else if (isEmail(field)) {
-                var _y = field.requiredMessage, requiredMessage = _y === void 0 ? "Please enter your email" : _y, _z = field.validationMessage, validationMessage = _z === void 0 ? "Invalid email" : _z;
+                var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "Please enter your email" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Invalid email" : _4;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -251,7 +268,7 @@ var formatValidationInternals = function (_a) {
             }
             else if (isImagePicker(field)) {
                 var maxFileSize_1 = ((_c = field.options) === null || _c === void 0 ? void 0 : _c.maxFileSize) || 9999999999;
-                var initialValue_1 = field.initialValue, _0 = field.requiredMessage, requiredMessage = _0 === void 0 ? "Please pick an image" : _0, _1 = field.validationMessage, validationMessage = _1 === void 0 ? "File cannot exceed ".concat(formatBytesToString({ bytes: maxFileSize_1 })) : _1;
+                var initialValue_1 = field.initialValue, _5 = field.requiredMessage, requiredMessage = _5 === void 0 ? "Please pick an image" : _5, _6 = field.validationMessage, validationMessage = _6 === void 0 ? "File cannot exceed ".concat(formatBytesToString({ bytes: maxFileSize_1 })) : _6;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -259,13 +276,13 @@ var formatValidationInternals = function (_a) {
                             : yup.mixed().test("fileSize", validationMessage, function (value) { return imageValidation({ value: value, maxFileSize: maxFileSize_1, initialValue: initialValue_1 }); })); // will validate if there is no file, or if the initialValue is passed
             }
             else if (isMultiSelect(field)) {
-                var _2 = field.requiredMessage, requiredMessage = _2 === void 0 ? "This field is required" : _2;
+                var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "This field is required" : _7;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
             }
             else if (isNumber(field)) {
-                var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "This field is required" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Please enter a valid number" : _4;
+                var _8 = field.requiredMessage, requiredMessage = _8 === void 0 ? "This field is required" : _8, _9 = field.validationMessage, validationMessage = _9 === void 0 ? "Please enter a valid number" : _9;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -282,7 +299,7 @@ var formatValidationInternals = function (_a) {
                             }));
             }
             else if (isPhone(field)) {
-                var _5 = field.requiredMessage, requiredMessage = _5 === void 0 ? "Phone number is required" : _5, _6 = field.validationMessage, validationMessage = _6 === void 0 ? "Please enter a valid phone number" : _6;
+                var _10 = field.requiredMessage, requiredMessage = _10 === void 0 ? "Phone number is required" : _10, _11 = field.validationMessage, validationMessage = _11 === void 0 ? "Please enter a valid phone number" : _11;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -300,19 +317,19 @@ var formatValidationInternals = function (_a) {
                             }));
             }
             else if (isRadioGroup(field)) {
-                var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "Please select one" : _7, _8 = field.validationMessage, validationMessage = _8 === void 0 ? "This field must be a string" : _8;
+                var _12 = field.requiredMessage, requiredMessage = _12 === void 0 ? "Please select one" : _12, _13 = field.validationMessage, validationMessage = _13 === void 0 ? "This field must be a string" : _13;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isSelect(field)) {
-                var _9 = field.requiredMessage, requiredMessage = _9 === void 0 ? "This field is required" : _9, _10 = field.validationMessage, validationMessage = _10 === void 0 ? "This field must be a string" : _10;
+                var _14 = field.requiredMessage, requiredMessage = _14 === void 0 ? "This field is required" : _14, _15 = field.validationMessage, validationMessage = _15 === void 0 ? "This field must be a string" : _15;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isSocialSecurity(field)) {
-                var _11 = field.requiredMessage, requiredMessage = _11 === void 0 ? "Please enter an SSN" : _11, _12 = field.validationMessage, validationMessage = _12 === void 0 ? "Please enter a valid SSN" : _12;
+                var _16 = field.requiredMessage, requiredMessage = _16 === void 0 ? "Please enter an SSN" : _16, _17 = field.validationMessage, validationMessage = _17 === void 0 ? "Please enter a valid SSN" : _17;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -329,25 +346,25 @@ var formatValidationInternals = function (_a) {
                             }));
             }
             else if (isStateSelect(field)) {
-                var _13 = field.requiredMessage, requiredMessage = _13 === void 0 ? "This field is required" : _13, _14 = field.validationMessage, validationMessage = _14 === void 0 ? "This field must be a string" : _14;
+                var _18 = field.requiredMessage, requiredMessage = _18 === void 0 ? "This field is required" : _18, _19 = field.validationMessage, validationMessage = _19 === void 0 ? "This field must be a string" : _19;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isTextarea(field)) {
-                var _15 = field.requiredMessage, requiredMessage = _15 === void 0 ? "This field is required" : _15, _16 = field.validationMessage, validationMessage = _16 === void 0 ? "This field must be a string" : _16;
+                var _20 = field.requiredMessage, requiredMessage = _20 === void 0 ? "This field is required" : _20, _21 = field.validationMessage, validationMessage = _21 === void 0 ? "This field must be a string" : _21;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.string().required(requiredMessage) : yup.string().typeError(validationMessage));
             }
             else if (isToggleGroup(field)) {
-                var _17 = field.requiredMessage, requiredMessage = _17 === void 0 ? "Please select at least one" : _17;
+                var _22 = field.requiredMessage, requiredMessage = _22 === void 0 ? "Please select at least one" : _22;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled ? yup.array().of(yup.string()).min(1, requiredMessage) : yup.array().of(yup.string()));
             }
             else if (isZipCode(field)) {
-                var _18 = field.requiredMessage, requiredMessage = _18 === void 0 ? "Please enter a zip code" : _18, _19 = field.validationMessage, validationMessage = _19 === void 0 ? "Please enter a valid zip code" : _19;
+                var _23 = field.requiredMessage, requiredMessage = _23 === void 0 ? "Please enter a zip code" : _23, _24 = field.validationMessage, validationMessage = _24 === void 0 ? "Please enter a valid zip code" : _24;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -364,7 +381,7 @@ var formatValidationInternals = function (_a) {
                             }));
             }
             else {
-                var _20 = field.requiredMessage, requiredMessage = _20 === void 0 ? "This field is required" : _20, _21 = field.validationMessage, validationMessage = _21 === void 0 ? "This field must be a string" : _21;
+                var _25 = field.requiredMessage, requiredMessage = _25 === void 0 ? "This field is required" : _25, _26 = field.validationMessage, validationMessage = _26 === void 0 ? "This field must be a string" : _26;
                 validationInternals[name_6] =
                     validationFunction ||
                         (required && allowRequired && !disabled
@@ -697,4 +714,4 @@ var LoadingInput = styled.div(templateObject_32 || (templateObject_32 = __makeTe
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 
 export { AddButtonGroup as A, ButtonGroup as B, CenterCheckbox as C, DefaultPixelWidth as D, FormWrapper as F, HelperTextGrid as H, InputBox as I, LoadingBase as L, RightGutter as R, SubHeader as S, TitleGroup as T, ValidationTextGrid as V, FormSeparator as a, LoadingBox as b, LoadingLabel as c, LoadingInput as d, FieldBox as e, LeftGutter as f, LeftLabel as g, formHasValues as h, RemovableFieldBox as i, RemoveButtonWrapper as j, RemovableButtonBox as k, Text as l, InlineFieldGrid as m, InlineFieldCell as n, CenterToggle as o, FormGroup as p, FormTitleGroup as q, Title as r, ClearFormButtonWrap as s, shouldFade as t, AddButtonBox as u, SubmitButton as v, CancelButton as w, formatValidation as x, formatInitialValues as y };
-//# sourceMappingURL=FormStyles-BQJPyTS0.js.map
+//# sourceMappingURL=FormStyles-CyqyMC1o.js.map

package/lib/esm/{FormStyles-BQJPyTS0.js.map → FormStyles-CyqyMC1o.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormStyles-BQJPyTS0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormStyles-CyqyMC1o.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}