@cerebruminc/cerebellum 16.1.1 → 16.2.0-beta.dangerous.8a9b71d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/lib/cjs/ColorPickerInput-CBPI8IJ-.js +187 -0
  2. package/lib/cjs/ColorPickerInput-CBPI8IJ-.js.map +1 -0
  3. package/lib/cjs/ColorPickerInput.cjs +25 -0
  4. package/lib/cjs/ColorPickerInput.cjs.map +1 -0
  5. package/lib/cjs/DatePicker.cjs +1 -1
  6. package/lib/cjs/Form.cjs +7 -4
  7. package/lib/cjs/Form.cjs.map +1 -1
  8. package/lib/cjs/FormFieldTypeEnum.cjs +5 -0
  9. package/lib/cjs/FormFieldTypeEnum.cjs.map +1 -1
  10. package/lib/cjs/FormSeparator.cjs +3 -1
  11. package/lib/cjs/FormSeparator.cjs.map +1 -1
  12. package/lib/cjs/{FormStyles-CxgYRZOl.js → FormStyles-zhTr63Di.js} +54 -22
  13. package/lib/{esm/FormStyles-BQJPyTS0.js.map → cjs/FormStyles-zhTr63Di.js.map} +1 -1
  14. package/lib/cjs/FormWrapper.cjs +3 -1
  15. package/lib/cjs/FormWrapper.cjs.map +1 -1
  16. package/lib/cjs/{FormikContainer-CY2nLsAs.js → FormikContainer-BhowOVri.js} +37 -4
  17. package/lib/cjs/{FormikContainer-CY2nLsAs.js.map → FormikContainer-BhowOVri.js.map} +1 -1
  18. package/lib/cjs/InlineColorPickerInput.cjs +25 -0
  19. package/lib/cjs/InlineColorPickerInput.cjs.map +1 -0
  20. package/lib/cjs/{InlineDatePicker-DFv_uHo9.js → InlineDatePicker-B7DTwvhv.js} +344 -176
  21. package/lib/cjs/InlineDatePicker-B7DTwvhv.js.map +1 -0
  22. package/lib/cjs/InlineDatePicker.cjs +1 -1
  23. package/lib/cjs/TitleGroup.cjs +3 -1
  24. package/lib/cjs/TitleGroup.cjs.map +1 -1
  25. package/lib/cjs/cerebellumTheme.cjs +5 -0
  26. package/lib/cjs/cerebellumTheme.cjs.map +1 -1
  27. package/lib/cjs/index.cjs +9 -3
  28. package/lib/cjs/index.cjs.map +1 -1
  29. package/lib/cjs/validateColorContrast.cjs +53 -0
  30. package/lib/cjs/validateColorContrast.cjs.map +1 -0
  31. package/lib/cjs/validateColorContrastWithMessage.cjs +10 -0
  32. package/lib/cjs/validateColorContrastWithMessage.cjs.map +1 -0
  33. package/lib/esm/ColorPickerInput-S8X2gIA5.js +180 -0
  34. package/lib/esm/ColorPickerInput-S8X2gIA5.js.map +1 -0
  35. package/lib/esm/ColorPickerInput.js +18 -0
  36. package/lib/esm/ColorPickerInput.js.map +1 -0
  37. package/lib/esm/DatePicker.js +1 -1
  38. package/lib/esm/Form.js +7 -5
  39. package/lib/esm/Form.js.map +1 -1
  40. package/lib/esm/FormFieldTypeEnum.js +5 -1
  41. package/lib/esm/FormFieldTypeEnum.js.map +1 -1
  42. package/lib/esm/FormSeparator.js +3 -1
  43. package/lib/esm/FormSeparator.js.map +1 -1
  44. package/lib/esm/{FormStyles-BQJPyTS0.js → FormStyles-DMlwBOz8.js} +55 -23
  45. package/lib/{cjs/FormStyles-CxgYRZOl.js.map → esm/FormStyles-DMlwBOz8.js.map} +1 -1
  46. package/lib/esm/FormWrapper.js +3 -1
  47. package/lib/esm/FormWrapper.js.map +1 -1
  48. package/lib/esm/{FormikContainer-SJPYfIkF.js → FormikContainer-C2RIrqq6.js} +38 -5
  49. package/lib/esm/{FormikContainer-SJPYfIkF.js.map → FormikContainer-C2RIrqq6.js.map} +1 -1
  50. package/lib/esm/InlineColorPickerInput.js +18 -0
  51. package/lib/esm/InlineColorPickerInput.js.map +1 -0
  52. package/lib/esm/{InlineDatePicker-ClVBWEzW.js → InlineDatePicker-BuxjkoV0.js} +345 -177
  53. package/lib/esm/InlineDatePicker-BuxjkoV0.js.map +1 -0
  54. package/lib/esm/InlineDatePicker.js +1 -1
  55. package/lib/esm/TitleGroup.js +3 -1
  56. package/lib/esm/TitleGroup.js.map +1 -1
  57. package/lib/esm/cerebellumTheme.js +5 -0
  58. package/lib/esm/cerebellumTheme.js.map +1 -1
  59. package/lib/esm/index.js +6 -4
  60. package/lib/esm/index.js.map +1 -1
  61. package/lib/esm/validateColorContrast.js +50 -0
  62. package/lib/esm/validateColorContrast.js.map +1 -0
  63. package/lib/esm/validateColorContrastWithMessage.js +3 -0
  64. package/lib/esm/validateColorContrastWithMessage.js.map +1 -0
  65. package/lib/types/src/components/ColorPickerInput/ColorPickerInput.d.ts +3 -0
  66. package/lib/types/src/components/ColorPickerInput/InlineColorPickerInput.d.ts +3 -0
  67. package/lib/types/src/components/ColorPickerInput/index.d.ts +3 -0
  68. package/lib/types/src/components/ColorPickerInput/types.d.ts +48 -0
  69. package/lib/types/src/components/Form/fields/ColorPickerField/ColorPickerField.d.ts +4 -0
  70. package/lib/types/src/components/Form/fields/ColorPickerField/index.d.ts +1 -0
  71. package/lib/types/src/components/Form/fields/index.d.ts +2 -1
  72. package/lib/types/src/components/Form/index.d.ts +3 -3
  73. package/lib/types/src/components/Form/mocks/fields.d.ts +62 -0
  74. package/lib/types/src/components/Form/types.d.ts +36 -2
  75. package/lib/types/src/helpers/colorValidators.d.ts +19 -0
  76. package/lib/types/src/index.d.ts +5 -1
  77. package/lib/types/src/theme.d.ts +6 -0
  78. package/package.json +1 -1
  79. package/lib/cjs/InlineDatePicker-DFv_uHo9.js.map +0 -1
  80. package/lib/esm/InlineDatePicker-ClVBWEzW.js.map +0 -1
@@ -0,0 +1,187 @@
1
+ 'use strict';
2
+
3
+ var _tslib = require('./_tslib-ByDtMVOd.js');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+ var React = require('react');
6
+ var styled = require('styled-components');
7
+ var BodyLEmphasis = require('./BodyLEmphasis.cjs');
8
+ var useMeasure = require('./useMeasure-CDq3dPfD.js');
9
+ var showLabel = require('./showLabel-BkZISyqw.js');
10
+ var Inputs = require('./Inputs-IaHMnBKw.js');
11
+ var pressedEnter = require('./pressedEnter.cjs');
12
+ var validateColorContrast = require('./validateColorContrast.cjs');
13
+
14
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
+
16
+ var styled__default = /*#__PURE__*/_interopDefault(styled);
17
+
18
+ // Container that holds both the input and the text side by side
19
+ var ColorPickerContainer = styled__default.default.div(templateObject_1$1 || (templateObject_1$1 = _tslib.__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"])));
20
+ var ColorInputWrapper = styled__default.default.div(templateObject_2 || (templateObject_2 = _tslib.__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) {
21
+ var _b;
22
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
23
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBackgroundColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.inputBackgroundColor);
24
+ }, function (_a) {
25
+ var _b, _c, _d;
26
+ var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
27
+ return $showValidationMessage
28
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
29
+ : $disabled
30
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
31
+ : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inactiveBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.inactiveBorderColor);
32
+ }, function (_a) {
33
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
34
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputBorderRadius) || theme.input.inputBorderRadius;
35
+ }, function (_a) {
36
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
37
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
38
+ }, function (_a) {
39
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
40
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
41
+ }, function (_a) {
42
+ var _b;
43
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
44
+ return (_b = $themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputPadding) !== null && _b !== void 0 ? _b : theme.colorPickerInput.padding;
45
+ }, function (_a) {
46
+ var $themeOverride = _a.$themeOverride, theme = _a.theme;
47
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.inputHeight) || theme.input.inputHeight;
48
+ }, function (_a) {
49
+ var _b, _c, _d;
50
+ var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
51
+ return $showValidationMessage
52
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
53
+ : $disabled
54
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
55
+ : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.hoverBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.hoverBorderColor);
56
+ }, function (_a) {
57
+ var _b, _c, _d;
58
+ var $disabled = _a.$disabled, theme = _a.theme, $showValidationMessage = _a.$showValidationMessage, $themeOverride = _a.$themeOverride;
59
+ return $showValidationMessage
60
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.failColor) || ((_b = theme.input) === null || _b === void 0 ? void 0 : _b.failColor)
61
+ : $disabled
62
+ ? ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.disabledBorderColor) || ((_c = theme.input) === null || _c === void 0 ? void 0 : _c.disabledBorderColor)
63
+ : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.activeBorderColor) || ((_d = theme.input) === null || _d === void 0 ? void 0 : _d.activeBorderColor);
64
+ });
65
+ // Custom styled color input that is 90% of the wrapper size and centered
66
+ var ColorInput = styled__default.default.input(templateObject_3 || (templateObject_3 = _tslib.__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) {
67
+ var $disabled = _a.$disabled;
68
+ return ($disabled ? "not-allowed" : "pointer");
69
+ }, function (_a) {
70
+ var $disabled = _a.$disabled;
71
+ return ($disabled ? 0.5 : 1);
72
+ });
73
+ // Legibility text component that displays to the right, vertically centered
74
+ var LegibilityText = styled__default.default.div(templateObject_4 || (templateObject_4 = _tslib.__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) {
75
+ var _b, _c;
76
+ var $disabled = _a.$disabled, $themeOverride = _a.$themeOverride, theme = _a.theme;
77
+ 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;
78
+ }, function (_a) {
79
+ var _b;
80
+ var theme = _a.theme;
81
+ return (((_b = theme.input) === null || _b === void 0 ? void 0 : _b.textFontSize) || 14) - 2;
82
+ }, function (_a) {
83
+ var $disabled = _a.$disabled;
84
+ return ($disabled ? 0.5 : 1);
85
+ });
86
+ var InlineColorPickerInput = function (_a) {
87
+ 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;
88
+ var inputRef = innerRef || React.useRef(null);
89
+ // Calculate legibility and dynamic text
90
+ var legibilityInfo = React.useMemo(function () {
91
+ if (!checkLegible || !value) {
92
+ return { isLegible: true, legibilityText: undefined };
93
+ }
94
+ try {
95
+ var isLegible = validateColorContrast.validateColorContrast(value, legibleAgainst);
96
+ var legibilityText = void 0;
97
+ if (isLegible) {
98
+ legibilityText = "✅ Looks good";
99
+ }
100
+ else {
101
+ // Determine if we need lighter or darker
102
+ // If contrast with black is greater, the color is light and needs to be darker
103
+ // If contrast with white is greater, the color is dark and needs to be lighter
104
+ var needsDarker = pressedEnter.contrast(value, "#000000") > pressedEnter.contrast(value, "#ffffff");
105
+ legibilityText = needsDarker ? "⚠️ Too light" : "⚠️ Too dark";
106
+ }
107
+ return { isLegible: isLegible, legibilityText: legibilityText };
108
+ }
109
+ catch (error) {
110
+ // If there's an error in contrast calculation, assume it's legible
111
+ return { isLegible: true, legibilityText: undefined };
112
+ }
113
+ }, [checkLegible, value, legibleAgainst]);
114
+ React.useEffect(function () {
115
+ var _a;
116
+ if (focus) {
117
+ (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
118
+ }
119
+ }, [focus]);
120
+ return (jsxRuntime.jsxs(ColorPickerContainer, { children: [jsxRuntime.jsx(ColorInputWrapper, { "$disabled": disabled, "$showValidationMessage": showValidationMessage || (checkLegible && !legibilityInfo.isLegible), "$themeOverride": themeOverride, children: jsxRuntime.jsx(ColorInput, _tslib.__assign({ ref: inputRef, type: "color", value: value, disabled: disabled, "$disabled": disabled, "$themeOverride": themeOverride }, (name ? { name: name } : {}), { onChange: function (event) {
121
+ onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(event.target.value);
122
+ onChange === null || onChange === void 0 ? void 0 : onChange({
123
+ target: {
124
+ value: event.target.value,
125
+ name: name,
126
+ selectionStart: event.target.selectionStart || undefined,
127
+ selectionEnd: event.target.selectionEnd || undefined,
128
+ },
129
+ nativeEvent: event.nativeEvent,
130
+ });
131
+ }, onBlur: function (event) {
132
+ if (onInputBlur) {
133
+ onInputBlur(event);
134
+ }
135
+ }, onFocus: function (event) {
136
+ if (onInputFocus) {
137
+ onInputFocus(event);
138
+ }
139
+ }, onKeyDown: function (event) {
140
+ if (event.key === "Enter" && onEnter) {
141
+ onEnter(value);
142
+ }
143
+ }, "aria-label": typeof inputLabel === "string" ? inputLabel : undefined })) }), checkLegible && legibilityInfo.legibilityText && (jsxRuntime.jsx(LegibilityText, { "$isLegible": legibilityInfo.isLegible, "$disabled": disabled, "$themeOverride": themeOverride, children: legibilityInfo.legibilityText }))] }));
144
+ };
145
+ var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
146
+
147
+ var InstructionalText = styled__default.default(BodyLEmphasis.BodyXSPrimary)(templateObject_1 || (templateObject_1 = _tslib.__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) {
148
+ var theme = _a.theme, $themeOverride = _a.$themeOverride;
149
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextColor) || theme.colorPickerInput.instructionalTextColor;
150
+ }, function (_a) {
151
+ var theme = _a.theme, $themeOverride = _a.$themeOverride;
152
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
153
+ }, function (_a) {
154
+ var theme = _a.theme, $themeOverride = _a.$themeOverride;
155
+ return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.instructionalTextFontSize) || theme.colorPickerInput.instructionalTextFontSize;
156
+ });
157
+ var ColorPickerInput = function (props) {
158
+ 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;
159
+ var labelBoxRef = React.useRef(null);
160
+ var _d = useMeasure.useMeasure(), inputGroupRef = _d[0], inputGroupMeasure = _d[1];
161
+ var validationRef = React.useRef(null);
162
+ var _e = React.useState(false), designSwitch = _e[0], setDesignSwitch = _e[1];
163
+ var helperTextVisible = !showValidationMessage || !designSwitch;
164
+ React.useEffect(function () {
165
+ var _a, _b;
166
+ var validationWidth = ((_a = validationRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
167
+ var labelWidth = ((_b = labelBoxRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
168
+ var noRoomForTopLabel = validationWidth + labelWidth >= inputGroupMeasure.width;
169
+ if (noRoomForTopLabel) {
170
+ setDesignSwitch(true);
171
+ }
172
+ else {
173
+ setDesignSwitch(false);
174
+ }
175
+ }, [inputGroupMeasure.width, showValidationMessage, inputLabel, validationMessage]);
176
+ return (jsxRuntime.jsxs(Inputs.InputGroup, { ref: inputGroupRef, "$inputWidth": inputWidth, "$roomForError": showValidationMessage && !inputLabel, children: [jsxRuntime.jsx(Inputs.LabelBox, { ref: labelBoxRef, children: showLabel.showLabel({
177
+ inputLabel: inputLabel,
178
+ disabled: disabled,
179
+ disabledColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor,
180
+ labelColor: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.labelColor,
181
+ }) }), instructionalText && jsxRuntime.jsx(InstructionalText, { "$themeOverride": themeOverride, children: instructionalText }), jsxRuntime.jsx(InlineColorPickerInput, _tslib.__assign({}, props, { checkLegible: checkLegible, themeOverride: themeOverride })), jsxRuntime.jsx(Inputs.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 && (jsxRuntime.jsx(Inputs.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 }))] }));
182
+ };
183
+ var templateObject_1;
184
+
185
+ exports.ColorPickerInput = ColorPickerInput;
186
+ exports.InlineColorPickerInput = InlineColorPickerInput;
187
+ //# sourceMappingURL=ColorPickerInput-CBPI8IJ-.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorPickerInput-CBPI8IJ-.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ var ColorPickerInput = require('./ColorPickerInput-CBPI8IJ-.js');
4
+ require('./_tslib-ByDtMVOd.js');
5
+ require('react/jsx-runtime');
6
+ require('react');
7
+ require('styled-components');
8
+ require('./BodyLEmphasis.cjs');
9
+ require('./useMeasure-CDq3dPfD.js');
10
+ require('./addOrRemoveById.cjs');
11
+ require('dayjs');
12
+ require('./isEmptyObject.cjs');
13
+ require('./useIsomorphicLayoutEffect-kdlV9QVN.js');
14
+ require('./showLabel-BkZISyqw.js');
15
+ require('./Inputs-IaHMnBKw.js');
16
+ require('./colors.cjs');
17
+ require('./IconComponentStyles-oUWNoaaH.js');
18
+ require('./pressedEnter.cjs');
19
+ require('./validateColorContrast.cjs');
20
+
21
+
22
+
23
+ exports.ColorPickerInput = ColorPickerInput.ColorPickerInput;
24
+ exports.InlineColorPickerInput = ColorPickerInput.InlineColorPickerInput;
25
+ //# sourceMappingURL=ColorPickerInput.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColorPickerInput.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -3,7 +3,7 @@
3
3
  var _tslib = require('./_tslib-ByDtMVOd.js');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
5
  var React = require('react');
6
- var InlineDatePicker = require('./InlineDatePicker-DFv_uHo9.js');
6
+ var InlineDatePicker = require('./InlineDatePicker-B7DTwvhv.js');
7
7
  var useMeasure = require('./useMeasure-CDq3dPfD.js');
8
8
  var showLabel = require('./showLabel-BkZISyqw.js');
9
9
  var Inputs = require('./Inputs-IaHMnBKw.js');
package/lib/cjs/Form.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var FormWrapper = require('./FormStyles-CxgYRZOl.js');
4
- var FormikContainer = require('./FormikContainer-CY2nLsAs.js');
3
+ var FormWrapper = require('./FormStyles-zhTr63Di.js');
4
+ var FormikContainer = require('./FormikContainer-BhowOVri.js');
5
5
  var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
6
6
  require('./_tslib-ByDtMVOd.js');
7
7
  require('styled-components');
@@ -20,6 +20,8 @@ require('./Switches-Cpums4DB.js');
20
20
  require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
21
21
  require('./SwitchTypeEnum.cjs');
22
22
  require('./addOrRemoveById.cjs');
23
+ require('./validateColorContrast.cjs');
24
+ require('./pressedEnter.cjs');
23
25
  require('./formatBytesToString.cjs');
24
26
  require('./northAmericanNumberingPlanRegex.cjs');
25
27
  require('yup');
@@ -28,7 +30,6 @@ require('react');
28
30
  require('./ButtonColorFamilyEnum.cjs');
29
31
  require('./LoadingEllipsis-COKIzsEu.js');
30
32
  require('./Button.cjs');
31
- require('./pressedEnter.cjs');
32
33
  require('./ArrowLong.cjs');
33
34
  require('./colors-BudXQEyU.js');
34
35
  require('./CaretDown.cjs');
@@ -62,6 +63,7 @@ require('./Checkbox-Cd_xyAss.js');
62
63
  require('./CheckboxEmpty.cjs');
63
64
  require('./CheckboxFull.cjs');
64
65
  require('./CheckboxGroup-BeBI_kWP.js');
66
+ require('./ColorPickerInput-CBPI8IJ-.js');
65
67
  require('./ConfigurableInput-naz2E_Pb.js');
66
68
  require('./RadioGroup-B0HUH_33.js');
67
69
  require('./RadioItem-ChF6qHFI.js');
@@ -94,7 +96,7 @@ require('./cardValidationStateMachine.cjs');
94
96
  require('./CurrencyInput-D_QGbxkC.js');
95
97
  require('./InlineCurrencyInput-UjEz4U3A.js');
96
98
  require('./DatePicker.cjs');
97
- require('./InlineDatePicker-DFv_uHo9.js');
99
+ require('./InlineDatePicker-B7DTwvhv.js');
98
100
  require('./Calendar.cjs');
99
101
  require('./ClickOutHandler-b5mI7kuA.js');
100
102
  require('./CaretLeft.cjs');
@@ -160,6 +162,7 @@ Object.defineProperty(exports, "RemovableFieldTypeEnum", {
160
162
  exports.isAddress = FormFieldTypeEnum.isAddress;
161
163
  exports.isCheckbox = FormFieldTypeEnum.isCheckbox;
162
164
  exports.isCheckboxGroup = FormFieldTypeEnum.isCheckboxGroup;
165
+ exports.isColorPicker = FormFieldTypeEnum.isColorPicker;
163
166
  exports.isConfigurableInput = FormFieldTypeEnum.isConfigurableInput;
164
167
  exports.isCountrySelect = FormFieldTypeEnum.isCountrySelect;
165
168
  exports.isCountySelect = FormFieldTypeEnum.isCountySelect;
@@ -1 +1 @@
1
- {"version":3,"file":"Form.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Form.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -5,6 +5,7 @@ exports.FormFieldTypeEnum = void 0;
5
5
  FormFieldTypeEnum["Address"] = "ADDRESS";
6
6
  FormFieldTypeEnum["Checkbox"] = "CHECKBOX";
7
7
  FormFieldTypeEnum["CheckboxGroup"] = "CHECKBOX_GROUP";
8
+ FormFieldTypeEnum["ColorPicker"] = "COLOR_PICKER";
8
9
  FormFieldTypeEnum["ConfigurableInput"] = "CONFIGURABLE_INPUT";
9
10
  FormFieldTypeEnum["CountySelect"] = "COUNTY_SELECT";
10
11
  FormFieldTypeEnum["CountrySelect"] = "COUNTRY_SELECT";
@@ -46,6 +47,9 @@ var isCheckbox = function (field) {
46
47
  var isCheckboxGroup = function (field) {
47
48
  return field.type === exports.FormFieldTypeEnum.CheckboxGroup;
48
49
  };
50
+ var isColorPicker = function (field) {
51
+ return field.type === exports.FormFieldTypeEnum.ColorPicker;
52
+ };
49
53
  var isConfigurableInput = function (field) {
50
54
  return field.type === exports.FormFieldTypeEnum.ConfigurableInput;
51
55
  };
@@ -161,6 +165,7 @@ exports.isAddress = isAddress;
161
165
  exports.isArrayOfSelectOptionsType = isArrayOfSelectOptionsType;
162
166
  exports.isCheckbox = isCheckbox;
163
167
  exports.isCheckboxGroup = isCheckboxGroup;
168
+ exports.isColorPicker = isColorPicker;
164
169
  exports.isConfigurableInput = isConfigurableInput;
165
170
  exports.isCountrySelect = isCountrySelect;
166
171
  exports.isCountySelect = isCountySelect;
@@ -1 +1 @@
1
- {"version":3,"file":"FormFieldTypeEnum.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormFieldTypeEnum.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -7,7 +7,7 @@ require('./BodyLEmphasis.cjs');
7
7
  require('./Loading.cjs');
8
8
  require('./Scroller.cjs');
9
9
  require('./Inputs-IaHMnBKw.js');
10
- var FormWrapper = require('./FormStyles-CxgYRZOl.js');
10
+ var FormWrapper = require('./FormStyles-zhTr63Di.js');
11
11
  require('react/jsx-runtime');
12
12
  require('./IconComponentStyles-oUWNoaaH.js');
13
13
  require('./CheckboxStyles-CAzemGXD.js');
@@ -18,6 +18,8 @@ require('./Switches-Cpums4DB.js');
18
18
  require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
19
19
  require('./SwitchTypeEnum.cjs');
20
20
  require('./addOrRemoveById.cjs');
21
+ require('./validateColorContrast.cjs');
22
+ require('./pressedEnter.cjs');
21
23
  require('./formatBytesToString.cjs');
22
24
  require('./northAmericanNumberingPlanRegex.cjs');
23
25
  require('yup');
@@ -1 +1 @@
1
- {"version":3,"file":"FormSeparator.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormSeparator.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -16,6 +16,7 @@ require('./Switches-Cpums4DB.js');
16
16
  require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
17
17
  var SwitchTypeEnum = require('./SwitchTypeEnum.cjs');
18
18
  var addOrRemoveById = require('./addOrRemoveById.cjs');
19
+ var validateColorContrast = require('./validateColorContrast.cjs');
19
20
  var formatBytesToString = require('./formatBytesToString.cjs');
20
21
  var northAmericanNumberingPlanRegex = require('./northAmericanNumberingPlanRegex.cjs');
21
22
  var yup = require('yup');
@@ -189,14 +190,33 @@ var formatValidationInternals = function (_a) {
189
190
  else if (FormFieldTypeEnum.isCheckbox(field)) {
190
191
  validationInternals[name_6] = validationFunction || yup__namespace.boolean();
191
192
  }
193
+ else if (FormFieldTypeEnum.isToggle(field)) {
194
+ validationInternals[name_6] = validationFunction || yup__namespace.boolean();
195
+ }
192
196
  else if (FormFieldTypeEnum.isCheckboxGroup(field)) {
193
197
  var _h = field.requiredMessage, requiredMessage = _h === void 0 ? "Please select at least one" : _h;
194
198
  validationInternals[name_6] =
195
199
  validationFunction ||
196
200
  (required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
197
201
  }
202
+ else if (FormFieldTypeEnum.isColorPicker(field)) {
203
+ 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;
204
+ var _l = field.options || {}, _m = _l.checkLegible, checkLegible = _m === void 0 ? false : _m, _o = _l.legibleAgainst, legibleAgainst_1 = _o === void 0 ? "#ffffff" : _o;
205
+ // Create base string validation
206
+ var colorSchema = yup__namespace.string();
207
+ // Add contrast validation if checkLegible is enabled
208
+ if (checkLegible) {
209
+ colorSchema = colorSchema.test("color-contrast", validationMessage, function (value) {
210
+ if (!value)
211
+ return true; // Allow empty values, let required validation handle this
212
+ return validateColorContrast.validateColorContrast(value, legibleAgainst_1);
213
+ });
214
+ }
215
+ validationInternals[name_6] =
216
+ validationFunction || (required && allowRequired && !disabled ? colorSchema.required(requiredMessage) : colorSchema);
217
+ }
198
218
  else if (FormFieldTypeEnum.isConfigurableInput(field)) {
199
- 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;
219
+ 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;
200
220
  var maskedRadios = options.maskedRadios, defaultId = options.defaultId;
201
221
  var activeId = configurableInputFieldActiveIds[name_6] || defaultId || maskedRadios[0].value;
202
222
  var selectedOption = addOrRemoveById.getObjectById({ array: maskedRadios, id: activeId, idKey: "value" });
@@ -209,31 +229,31 @@ var formatValidationInternals = function (_a) {
209
229
  : yup__namespace.string().typeError(validationMessage));
210
230
  }
211
231
  else if (FormFieldTypeEnum.isCountySelect(field)) {
212
- 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;
232
+ 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;
213
233
  validationInternals[name_6] =
214
234
  validationFunction ||
215
235
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
216
236
  }
217
237
  else if (FormFieldTypeEnum.isCountrySelect(field)) {
218
- 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;
238
+ 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;
219
239
  validationInternals[name_6] =
220
240
  validationFunction ||
221
241
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
222
242
  }
223
243
  else if (FormFieldTypeEnum.isCreditCard(field)) {
224
- 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;
244
+ 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;
225
245
  validationInternals[name_6] =
226
246
  validationFunction ||
227
247
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
228
248
  }
229
249
  else if (FormFieldTypeEnum.isCurrency(field)) {
230
- 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;
250
+ 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;
231
251
  validationInternals[name_6] =
232
252
  validationFunction ||
233
253
  (required && allowRequired && !disabled ? yup__namespace.number().required(requiredMessage) : yup__namespace.number().typeError(validationMessage));
234
254
  }
235
255
  else if (FormFieldTypeEnum.isDatePicker(field)) {
236
- 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;
256
+ 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;
237
257
  var dateSchema = yup__namespace
238
258
  .date()
239
259
  // For some reason, "value" is always wrong. Thanks react-datepicker. Thanks a lot.
@@ -250,7 +270,7 @@ var formatValidationInternals = function (_a) {
250
270
  validationFunction || (required && allowRequired && !disabled ? dateSchema.required(requiredMessage) : dateSchema);
251
271
  }
252
272
  else if (FormFieldTypeEnum.isDescriptiveDropdownInput(field)) {
253
- 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;
273
+ 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;
254
274
  var switchType = (_b = field.options) === null || _b === void 0 ? void 0 : _b.switchType;
255
275
  if (!switchType || switchType === SwitchTypeEnum.SwitchTypeEnum.Radio) {
256
276
  validationInternals[name_6] =
@@ -264,7 +284,7 @@ var formatValidationInternals = function (_a) {
264
284
  }
265
285
  }
266
286
  else if (FormFieldTypeEnum.isEmail(field)) {
267
- var _y = field.requiredMessage, requiredMessage = _y === void 0 ? "Please enter your email" : _y, _z = field.validationMessage, validationMessage = _z === void 0 ? "Invalid email" : _z;
287
+ var _3 = field.requiredMessage, requiredMessage = _3 === void 0 ? "Please enter your email" : _3, _4 = field.validationMessage, validationMessage = _4 === void 0 ? "Invalid email" : _4;
268
288
  validationInternals[name_6] =
269
289
  validationFunction ||
270
290
  (required && allowRequired && !disabled
@@ -273,7 +293,7 @@ var formatValidationInternals = function (_a) {
273
293
  }
274
294
  else if (FormFieldTypeEnum.isImagePicker(field)) {
275
295
  var maxFileSize_1 = ((_c = field.options) === null || _c === void 0 ? void 0 : _c.maxFileSize) || 9999999999;
276
- 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.formatBytesToString({ bytes: maxFileSize_1 })) : _1;
296
+ 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.formatBytesToString({ bytes: maxFileSize_1 })) : _6;
277
297
  validationInternals[name_6] =
278
298
  validationFunction ||
279
299
  (required && allowRequired && !disabled
@@ -281,13 +301,13 @@ var formatValidationInternals = function (_a) {
281
301
  : yup__namespace.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
282
302
  }
283
303
  else if (FormFieldTypeEnum.isMultiSelect(field)) {
284
- var _2 = field.requiredMessage, requiredMessage = _2 === void 0 ? "This field is required" : _2;
304
+ var _7 = field.requiredMessage, requiredMessage = _7 === void 0 ? "This field is required" : _7;
285
305
  validationInternals[name_6] =
286
306
  validationFunction ||
287
307
  (required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
288
308
  }
289
309
  else if (FormFieldTypeEnum.isNumber(field)) {
290
- 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;
310
+ 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;
291
311
  validationInternals[name_6] =
292
312
  validationFunction ||
293
313
  (required && allowRequired && !disabled
@@ -304,7 +324,7 @@ var formatValidationInternals = function (_a) {
304
324
  }));
305
325
  }
306
326
  else if (FormFieldTypeEnum.isPhone(field)) {
307
- 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;
327
+ 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;
308
328
  validationInternals[name_6] =
309
329
  validationFunction ||
310
330
  (required && allowRequired && !disabled
@@ -322,54 +342,66 @@ var formatValidationInternals = function (_a) {
322
342
  }));
323
343
  }
324
344
  else if (FormFieldTypeEnum.isRadioGroup(field)) {
325
- 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;
345
+ 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;
326
346
  validationInternals[name_6] =
327
347
  validationFunction ||
328
348
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
329
349
  }
330
350
  else if (FormFieldTypeEnum.isSelect(field)) {
331
- 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;
351
+ 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;
332
352
  validationInternals[name_6] =
333
353
  validationFunction ||
334
354
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
335
355
  }
336
356
  else if (FormFieldTypeEnum.isSocialSecurity(field)) {
337
- 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;
357
+ 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;
338
358
  validationInternals[name_6] =
339
359
  validationFunction ||
340
360
  (required && allowRequired && !disabled
341
361
  ? yup__namespace
342
362
  .string()
363
+ .transform(function (value) {
364
+ return typeof value === "string"
365
+ ? value.trim().replace(/-/g, "")
366
+ : value;
367
+ })
343
368
  .matches(SSN_REGEX, {
344
369
  excludeEmptyString: true,
345
370
  message: validationMessage,
346
371
  })
347
372
  .required(requiredMessage)
348
- : yup__namespace.string().matches(SSN_REGEX, {
373
+ : yup__namespace
374
+ .string()
375
+ .transform(function (value) {
376
+ return typeof value === "string"
377
+ ? value.trim().replace(/-/g, "")
378
+ : value;
379
+ })
380
+ .matches(SSN_REGEX, {
349
381
  excludeEmptyString: true,
350
382
  message: validationMessage,
351
383
  }));
352
384
  }
353
385
  else if (FormFieldTypeEnum.isStateSelect(field)) {
354
- 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;
386
+ 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;
355
387
  validationInternals[name_6] =
356
388
  validationFunction ||
357
389
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
358
390
  }
359
391
  else if (FormFieldTypeEnum.isTextarea(field)) {
360
- 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;
392
+ 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;
361
393
  validationInternals[name_6] =
362
394
  validationFunction ||
363
395
  (required && allowRequired && !disabled ? yup__namespace.string().required(requiredMessage) : yup__namespace.string().typeError(validationMessage));
364
396
  }
365
397
  else if (FormFieldTypeEnum.isToggleGroup(field)) {
366
- var _17 = field.requiredMessage, requiredMessage = _17 === void 0 ? "Please select at least one" : _17;
398
+ var _22 = field.requiredMessage, requiredMessage = _22 === void 0 ? "Please select at least one" : _22;
367
399
  validationInternals[name_6] =
368
400
  validationFunction ||
369
401
  (required && allowRequired && !disabled ? yup__namespace.array().of(yup__namespace.string()).min(1, requiredMessage) : yup__namespace.array().of(yup__namespace.string()));
370
402
  }
371
403
  else if (FormFieldTypeEnum.isZipCode(field)) {
372
- 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;
404
+ 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;
373
405
  validationInternals[name_6] =
374
406
  validationFunction ||
375
407
  (required && allowRequired && !disabled
@@ -386,7 +418,7 @@ var formatValidationInternals = function (_a) {
386
418
  }));
387
419
  }
388
420
  else {
389
- 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;
421
+ 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;
390
422
  validationInternals[name_6] =
391
423
  validationFunction ||
392
424
  (required && allowRequired && !disabled
@@ -754,4 +786,4 @@ exports.formHasValues = formHasValues;
754
786
  exports.formatInitialValues = formatInitialValues;
755
787
  exports.formatValidation = formatValidation;
756
788
  exports.shouldFade = shouldFade;
757
- //# sourceMappingURL=FormStyles-CxgYRZOl.js.map
789
+ //# sourceMappingURL=FormStyles-zhTr63Di.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormStyles-BQJPyTS0.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormStyles-zhTr63Di.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -7,7 +7,7 @@ require('./BodyLEmphasis.cjs');
7
7
  require('./Loading.cjs');
8
8
  require('./Scroller.cjs');
9
9
  require('./Inputs-IaHMnBKw.js');
10
- var FormWrapper = require('./FormStyles-CxgYRZOl.js');
10
+ var FormWrapper = require('./FormStyles-zhTr63Di.js');
11
11
  require('react/jsx-runtime');
12
12
  require('./IconComponentStyles-oUWNoaaH.js');
13
13
  require('./CheckboxStyles-CAzemGXD.js');
@@ -18,6 +18,8 @@ require('./Switches-Cpums4DB.js');
18
18
  require('./DescriptiveSwitchMenuStyles-BwkgIy6d.js');
19
19
  require('./SwitchTypeEnum.cjs');
20
20
  require('./addOrRemoveById.cjs');
21
+ require('./validateColorContrast.cjs');
22
+ require('./pressedEnter.cjs');
21
23
  require('./formatBytesToString.cjs');
22
24
  require('./northAmericanNumberingPlanRegex.cjs');
23
25
  require('yup');
@@ -1 +1 @@
1
- {"version":3,"file":"FormWrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"FormWrapper.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}