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

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-wlDzB1vZ.js';
+export { F as Form } from './FormikContainer--y08X-6j.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-wlDzB1vZ.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":";;;;;;;;;;;;;;;;;;;;;;;"}