@cerebruminc/cerebellum 16.1.1-beta.dangerous.94a8f04 → 16.1.1-beta.dangerous.bc77c27

package/lib/cjs/validateColorContrast.cjs

@@ -1,53 +0,0 @@
-'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

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

package/lib/cjs/validateColorContrastWithMessage.cjs

@@ -1,10 +0,0 @@
-'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

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

package/lib/esm/ColorPickerInput-S8X2gIA5.js

@@ -1,180 +0,0 @@
-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

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

package/lib/esm/ColorPickerInput.js

@@ -1,18 +0,0 @@
-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

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

package/lib/esm/InlineColorPickerInput.js

@@ -1,18 +0,0 @@
-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=InlineColorPickerInput.js.map

package/lib/esm/InlineColorPickerInput.js.map

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