npm - @cerebruminc/cerebellum - Versions diffs - 13.4.0 → 13.4.1 - Mend

@cerebruminc/cerebellum 13.4.0 → 13.4.1

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 (36) hide show

package/lib/cjs/DialogHandler.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var Toast = require('./Toast-0d6d285e.js');
-var SnackContainer = require('./SnackContainer-980dbf9f.js');
+var Toast = require('./Toast-2bc00b54.js');
+var SnackContainer = require('./SnackContainer-dcea49a1.js');
 require('./colors.cjs');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');

package/lib/cjs/Form.cjs CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var FormWrapper = require('./FormStyles-0c0f28e0.js');
-var FormikContainer = require('./FormikContainer-ed00a147.js');
+var FormikContainer = require('./FormikContainer-cebc6fbe.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 require('./_tslib-955e611e.js');
 require('styled-components');
@@ -106,14 +106,16 @@ require('./DescriptiveDropdownInput-0b5f7b1f.js');
 require('./EmailInput-ee2e8ac8.js');
 require('./InlineEmailInput-78e3cce8.js');
 require('./Email.cjs');
-require('./ImagePicker-454ad23d.js');
+require('./ImagePicker-08a324fc.js');
 require('./Delete-32a19298.js');
 require('./Edit.cjs');
-require('./Toast-0d6d285e.js');
+require('./Toast-2bc00b54.js');
 require('./Typography-78d16930.js');
 require('./TextVariantEnum.cjs');
 require('./CheckmarkCircle.cjs');
 require('./Warning-0428175d.js');
+require('browser-image-compression');
+require('libheif-js/wasm-bundle');
 require('./SingleButton-6f14308b.js');
 require('./MultiSelect-062af0bf.js');
 require('./Clear.cjs');

package/lib/cjs/Form.cjs.map CHANGED Viewed

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

package/lib/cjs/{FormikContainer-ed00a147.js → FormikContainer-cebc6fbe.js} RENAMED Viewed

@@ -42,7 +42,7 @@ var SwitchTypeEnum = require('./SwitchTypeEnum.cjs');
 var DescriptiveDropdownInput = require('./DescriptiveDropdownInput-0b5f7b1f.js');
 var EmailInput = require('./EmailInput-ee2e8ac8.js');
 var InlineEmailInput = require('./InlineEmailInput-78e3cce8.js');
-var ImagePicker = require('./ImagePicker-454ad23d.js');
+var ImagePicker = require('./ImagePicker-08a324fc.js');
 var MultiSelect = require('./MultiSelect-062af0bf.js');
 var InlineInput = require('./InlineInput-ffaab44c.js');
 var Input = require('./Input-9cf5b719.js');
@@ -1295,4 +1295,4 @@ FormikContainer.defaultProps = {
 };
 exports.FormikContainer = FormikContainer;
-//# sourceMappingURL=FormikContainer-ed00a147.js.map
+//# sourceMappingURL=FormikContainer-cebc6fbe.js.map

package/lib/cjs/{FormikContainer-ed00a147.js.map → FormikContainer-cebc6fbe.js.map} RENAMED Viewed

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

package/lib/cjs/{ImagePicker-454ad23d.js → ImagePicker-08a324fc.js} RENAMED Viewed

@@ -11,21 +11,104 @@ var Edit = require('./Edit.cjs');
 var formatBytesToString = require('./formatBytesToString.cjs');
 var Inputs = require('./Inputs-0137c1dc.js');
 var ButtonColorFamilyEnum = require('./ButtonColorFamilyEnum.cjs');
-var Toast = require('./Toast-0d6d285e.js');
+var Toast = require('./Toast-2bc00b54.js');
 require('react-dom');
 var isEmptyObject = require('./isEmptyObject.cjs');
 var useMeasure = require('./useMeasure-39ee8db4.js');
+var imageCompression = require('browser-image-compression');
+var libheif = require('libheif-js/wasm-bundle');
 var showLabel = require('./showLabel-8e3c09f1.js');
 require('./Button.cjs');
 var SingleButton = require('./SingleButton-6f14308b.js');
 var ButtonVariantEnum = require('./ButtonVariantEnum.cjs');
 var IconButton = require('./IconButton-99b9f2dd.js');
 var helpers = require('./helpers-b07f14f3.js');
+var LoadingEllipsis = require('./LoadingEllipsis-b9895744.js');
 var BodyLEmphasis = require('./BodyLEmphasis.cjs');
-var Loading = require('./Loading.cjs');
-require('./Scroller.cjs');
 var focusAfter = require('./focusAfter.cjs');
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var imageCompression__default = /*#__PURE__*/_interopDefaultLegacy(imageCompression);
+var libheif__default = /*#__PURE__*/_interopDefaultLegacy(libheif);
+var compressImage = function (file) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+    var options, compressedFile;
+    return _tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                options = {
+                    maxSizeMB: 2,
+                    maxWidthOrHeight: 1920,
+                    useWebWorker: true,
+                    alwaysKeepResolution: true,
+                };
+                return [4 /*yield*/, imageCompression__default["default"](file, options)];
+            case 1:
+                compressedFile = _a.sent();
+                return [2 /*return*/, compressedFile];
+        }
+    });
+}); };
+function dataURLToBlob(dataUrl) {
+    var byteString = atob(dataUrl.split(",")[1]);
+    var mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
+    var ab = new ArrayBuffer(byteString.length);
+    var ia = new Uint8Array(ab);
+    for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeString });
+}
+var convertHEICtoPNG = function (file) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+    var arrayBuffer, decoder, data, image_1, originalWidth, originalHeight, canvas, context, imageData_1, dataUrl, blob, convertedFile, error_1;
+    return _tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 3, , 4]);
+                return [4 /*yield*/, file.arrayBuffer()];
+            case 1:
+                arrayBuffer = _a.sent();
+                if (!arrayBuffer) {
+                    throw new Error("Error: arrayBuffer is null or undefined");
+                }
+                decoder = new libheif__default["default"].HeifDecoder();
+                data = decoder.decode(new Uint8Array(arrayBuffer));
+                image_1 = data[0];
+                originalWidth = image_1.get_width();
+                originalHeight = image_1.get_height();
+                canvas = document.createElement("canvas");
+                canvas.width = originalWidth;
+                canvas.height = originalHeight;
+                context = canvas.getContext("2d");
+                if (!context) {
+                    throw new Error("Error: context undefined");
+                }
+                imageData_1 = context.createImageData(originalWidth, originalHeight);
+                return [4 /*yield*/, new Promise(function (resolve, reject) {
+                        image_1.display(imageData_1, function (displayData) {
+                            if (!displayData) {
+                                return reject(new Error("HEIF processing error"));
+                            }
+                            resolve();
+                        });
+                    })];
+            case 2:
+                _a.sent();
+                context.putImageData(imageData_1, 0, 0);
+                dataUrl = canvas.toDataURL("image/png");
+                blob = dataURLToBlob(dataUrl);
+                convertedFile = new File([blob], "image.png", { type: "image/png" });
+                return [2 /*return*/, convertedFile];
+            case 3:
+                error_1 = _a.sent();
+                throw new Error("This is the error ".concat(error_1));
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
 var Base = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n"], ["\n  position: relative;\n  width: ", "px;\n"])), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size;
@@ -63,16 +146,7 @@ var ImageInput = styled.styled.input(templateObject_3 || (templateObject_3 = _ts
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
 });
-var ImageInputLoading = styled.styled.div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  display: block;\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n  z-index: -1;\n  ", "\n"], ["\n  border-radius: ", "px;\n  display: block;\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n  z-index: -1;\n  ", "\n"])), function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius;
-}, function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.height) || theme.imagePicker.size) - 2;
-}, function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
-}, Loading.loadingPseudo({}));
+var EllipsisContainer = styled.styled.div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 var CenterImage = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  ", ";\n  border-radius: ", "px;\n  display: flex;\n  overflow: hidden;\n  padding: ", "px;\n  pointer-events: none;\n"], ["\n  ", ";\n  border-radius: ", "px;\n  display: flex;\n  overflow: hidden;\n  padding: ", "px;\n  pointer-events: none;\n"])), focusAfter.absoluteFill({}), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius - 1;
@@ -137,7 +211,7 @@ var FakeTextLink = styled.styled.span(templateObject_14 || (templateObject_14 =
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
 var ImagePicker = function (_a) {
-    var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage, innerRef = _a.innerRef, loading = _a.loading;
+    var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage;
     var theme = styled.useTheme();
     var colorFamilies = theme.colorFamilies;
     var disabledColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor) || theme.imagePicker.disabledColor;
@@ -150,10 +224,11 @@ var ImagePicker = function (_a) {
     var _g = React.useState(""), tempFile = _g[0], setTempFile = _g[1];
     var _h = React.useState(""), placeholder = _h[0], setPlaceholder = _h[1];
     var _j = React.useState(""), formattedInitials = _j[0], setFormattedInitials = _j[1];
+    var _k = React.useState(false), loading = _k[0], setLoading = _k[1];
     var labelBoxRef = React.useRef(null);
-    var _k = useMeasure.useMeasure(), inputGroupRef = _k[0], inputGroupMeasure = _k[1];
+    var _l = useMeasure.useMeasure(), inputGroupRef = _l[0], inputGroupMeasure = _l[1];
     var validationRef = React.useRef(null);
-    var _l = React.useState(false), designSwitch = _l[0], setDesignSwitch = _l[1];
+    var _m = React.useState(false), designSwitch = _m[0], setDesignSwitch = _m[1];
     var helperTextVisible = imageLabel ? !showValidationMessage || !designSwitch : !showValidationMessage || !validationMessage;
     var shortestDimension = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.width) && (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.height) ? Math.min(themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.width, themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.height) : theme.imagePicker.size;
     var showToast = function (_a) {
@@ -166,6 +241,10 @@ var ImagePicker = function (_a) {
             title: title,
         });
     };
+    var getFileExtension = function (filename) {
+        var parts = filename.split(".");
+        return parts.length > 1 ? parts.pop().toLowerCase() : "";
+    };
     // This is required when we have an initialValue.
     // This does feel like a hack, but it works.
     React.useEffect(function () {
@@ -181,32 +260,61 @@ var ImagePicker = function (_a) {
             reader.readAsDataURL(placeholderImageUrl);
         }
     }, [placeholderImageUrl]);
-    var readURI = function (event) {
+    var readURI = function (event) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+        var file, fileExtension, convertedFile, compressedFile, isNotAnImage, fileSizeKB, reader;
         var _a, _b;
-        var file = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-        if (file) {
-            var isNotAnImage = !file.type.match(/^image\/+/g);
-            var fileSizeKB = file.size / 1000;
-            if (isNotAnImage) {
-                showToast({ text: "Please upload an image file", colorFamily: ButtonColorFamilyEnum.ConnotationColorEnum.Negative, title: "" });
+        return _tslib.__generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 4, , 5]);
+                    file = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+                    if (!file) {
+                        throw new Error("Error: file is undefined");
+                    }
+                    fileExtension = getFileExtension(file.name);
+                    if (!(fileExtension === "heic")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, convertHEICtoPNG(file)];
+                case 1:
+                    convertedFile = _c.sent();
+                    return [4 /*yield*/, compressImage(convertedFile)];
+                case 2:
+                    compressedFile = _c.sent();
+                    file = compressedFile;
+                    _c.label = 3;
+                case 3:
+                    isNotAnImage = !file.type.match(/^image\/+/g);
+                    fileSizeKB = file.size / 1000;
+                    if (isNotAnImage) {
+                        showToast({ text: "Please upload an image file", colorFamily: ButtonColorFamilyEnum.ConnotationColorEnum.Negative, title: "" });
+                    }
+                    else if (sizeLimitKB && fileSizeKB > sizeLimitKB) {
+                        showToast({
+                            title: "File size exceeded",
+                            text: "File size of ".concat(formatBytesToString.formatBytesToString({ bytes: file.size }), " exceeds ").concat(sizeLimitKB.toLocaleString(), "kb limit"),
+                            colorFamily: ButtonColorFamilyEnum.ConnotationColorEnum.Negative,
+                        });
+                    }
+                    else {
+                        reader = new FileReader();
+                        reader.onload = function (progress) {
+                            var _a;
+                            setTempFile((_a = progress === null || progress === void 0 ? void 0 : progress.target) === null || _a === void 0 ? void 0 : _a.result);
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                    return [2 /*return*/, file];
+                case 4:
+                    _c.sent();
+                    showToast({
+                        title: "",
+                        text: "Error processing FIle",
+                        colorFamily: ButtonColorFamilyEnum.ConnotationColorEnum.Negative,
+                    });
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
-            else if (sizeLimitKB && fileSizeKB > sizeLimitKB) {
-                showToast({
-                    title: "File size exceeded",
-                    text: "File size of ".concat(formatBytesToString.formatBytesToString({ bytes: file.size }), " exceeds ").concat(sizeLimitKB.toLocaleString(), "kb limit"),
-                    colorFamily: ButtonColorFamilyEnum.ConnotationColorEnum.Negative,
-                });
-            }
-            else {
-                var reader = new FileReader();
-                reader.onload = function (progress) {
-                    var _a;
-                    setTempFile((_a = progress === null || progress === void 0 ? void 0 : progress.target) === null || _a === void 0 ? void 0 : _a.result);
-                };
-                reader.readAsDataURL(file);
-            }
-        }
-    };
+        });
+    }); };
     React.useEffect(function () {
         var firstTwo = placeholderInitials === null || placeholderInitials === void 0 ? void 0 : placeholderInitials.slice(0, 2);
         setFormattedInitials(firstTwo === null || firstTwo === void 0 ? void 0 : firstTwo.toUpperCase());
@@ -224,7 +332,7 @@ var ImagePicker = function (_a) {
         }
     }, [inputGroupMeasure.width, showValidationMessage, imageLabel, validationMessage]);
     // Clear input
-    var inputRef = innerRef || React.useRef(null);
+    var inputRef = React.useRef(null);
     var clearInput = function () {
         if (inputRef.current) {
             inputRef.current.value = "";
@@ -245,10 +353,33 @@ var ImagePicker = function (_a) {
                         labelColor: labelColor,
                         htmlFor: "".concat(imageLabel, "_imagePicker"),
                         removePaddingRight: required,
-                    }), required && (jsxRuntime.jsx(Inputs.Asterisk, _tslib.__assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxRuntime.jsxs(PickerBox, _tslib.__assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsxRuntime.jsx(ImageInputLoading, { "$themeOverride": themeOverride }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ImageInput, _tslib.__assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
-                                    readURI(event);
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                                }, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsxRuntime.jsx(PlaceholderCircle, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsxRuntime.jsx(PlaceholderInitials, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxRuntime.jsxs(CenterGrid, _tslib.__assign({ "$themeOverride": themeOverride }, { children: [jsxRuntime.jsx(PlaceholderIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsxRuntime.jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsxRuntime.jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.ButtonVariantEnum.Text ? (jsxRuntime.jsx(FakeTextLink, _tslib.__assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsxRuntime.jsx(SingleButton.SingleButton, { variant: actionButtonVariant, text: actionText, onClick: isEmptyObject.noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsxRuntime.jsx(EditIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsxRuntime.jsx(Edit.Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsxRuntime.jsx(DeleteIconBox, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(IconButton.IconButton, { Icon: Delete.Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsxRuntime.jsx(Inputs.ValidationText, _tslib.__assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsxRuntime.jsx(Inputs.HelperText, _tslib.__assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
+                    }), required && (jsxRuntime.jsx(Inputs.Asterisk, _tslib.__assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxRuntime.jsxs(PickerBox, _tslib.__assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsxRuntime.jsx(EllipsisContainer, { children: jsxRuntime.jsx(LoadingEllipsis.LoadingEllipsis, {}, void 0) }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ImageInput, _tslib.__assign({}, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*,.heic", disabled: disabled, onChange: function (event) { return _tslib.__awaiter(void 0, void 0, void 0, function () {
+                                    var file, error_2;
+                                    var _a;
+                                    return _tslib.__generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                _b.trys.push([0, 2, 3, 4]);
+                                                setLoading(true);
+                                                return [4 /*yield*/, readURI(event)];
+                                            case 1:
+                                                file = _b.sent();
+                                                if (file && ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0])) {
+                                                    event.target.files[0] = file;
+                                                }
+                                                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                                                return [3 /*break*/, 4];
+                                            case 2:
+                                                error_2 = _b.sent();
+                                                console.error("Error processing image: ".concat(error_2));
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setLoading(false);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); }, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsxRuntime.jsx(PlaceholderCircle, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsxRuntime.jsx(PlaceholderInitials, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxRuntime.jsxs(CenterGrid, _tslib.__assign({ "$themeOverride": themeOverride }, { children: [jsxRuntime.jsx(PlaceholderIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsxRuntime.jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsxRuntime.jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.ButtonVariantEnum.Text ? (jsxRuntime.jsx(FakeTextLink, _tslib.__assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsxRuntime.jsx(SingleButton.SingleButton, { variant: actionButtonVariant, text: actionText, onClick: isEmptyObject.noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsxRuntime.jsx(EditIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsxRuntime.jsx(Edit.Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsxRuntime.jsx(DeleteIconBox, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(IconButton.IconButton, { Icon: Delete.Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsxRuntime.jsx(Inputs.ValidationText, _tslib.__assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsxRuntime.jsx(Inputs.HelperText, _tslib.__assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
 };
 ImagePicker.defaultProps = {
     editButtonColorFamily: ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue,
@@ -256,4 +387,4 @@ ImagePicker.defaultProps = {
 };
 exports.ImagePicker = ImagePicker;
-//# sourceMappingURL=ImagePicker-454ad23d.js.map
+//# sourceMappingURL=ImagePicker-08a324fc.js.map

package/lib/cjs/{ImagePicker-454ad23d.js.map → ImagePicker-08a324fc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImagePicker-~~454ad23d~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ImagePicker-08a324fc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/ImagePicker.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-var ImagePicker = require('./ImagePicker-454ad23d.js');
+var ImagePicker = require('./ImagePicker-08a324fc.js');
 require('./_tslib-955e611e.js');
 require('react/jsx-runtime');
 require('react');
@@ -16,7 +16,7 @@ require('./Edit.cjs');
 require('./formatBytesToString.cjs');
 require('./Inputs-0137c1dc.js');
 require('./ButtonColorFamilyEnum.cjs');
-require('./Toast-0d6d285e.js');
+require('./Toast-2bc00b54.js');
 require('./Close-e95e8120.js');
 require('./TextLink-54c3c4ed.js');
 require('./IndicatorDown.cjs');
@@ -40,13 +40,13 @@ require('./ButtonVariantEnum.cjs');
 require('./CheckmarkCircle.cjs');
 require('./Warning-0428175d.js');
 require('react-dom');
+require('browser-image-compression');
+require('libheif-js/wasm-bundle');
 require('./showLabel-8e3c09f1.js');
 require('./SingleButton-6f14308b.js');
 require('./IconButton-99b9f2dd.js');
 require('./focusAfter.cjs');
 require('./helpers-b07f14f3.js');
-require('./Loading.cjs');
-require('./Scroller.cjs');

package/lib/cjs/{SnackContainer-980dbf9f.js → SnackContainer-dcea49a1.js} RENAMED Viewed

@@ -4,7 +4,7 @@ var _tslib = require('./_tslib-955e611e.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Toast = require('./Toast-0d6d285e.js');
+var Toast = require('./Toast-2bc00b54.js');
 var isEmptyObject = require('./isEmptyObject.cjs');
 var useMeasure = require('./useMeasure-39ee8db4.js');
 var ButtonColorFamilyEnum = require('./ButtonColorFamilyEnum.cjs');
@@ -264,4 +264,4 @@ var SnackContainer = function (_a) {
 };
 exports.SnackContainer = SnackContainer;
-//# sourceMappingURL=SnackContainer-980dbf9f.js.map
+//# sourceMappingURL=SnackContainer-dcea49a1.js.map

package/lib/cjs/{SnackContainer-980dbf9f.js.map → SnackContainer-dcea49a1.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SnackContainer-~~980dbf9f~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"SnackContainer-dcea49a1.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/ThemeProvider.cjs CHANGED Viewed

@@ -6,8 +6,8 @@ var _tslib = require('./_tslib-955e611e.js');
 var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
 var cerebellumTheme = require('./cerebellumTheme.cjs');
-var Toast = require('./Toast-0d6d285e.js');
-var SnackContainer = require('./SnackContainer-980dbf9f.js');
+var Toast = require('./Toast-2bc00b54.js');
+var SnackContainer = require('./SnackContainer-dcea49a1.js');
 require('./colors.cjs');
 require('./ButtonColorFamilyEnum.cjs');
 require('react');

package/lib/cjs/{Toast-0d6d285e.js → Toast-2bc00b54.js} RENAMED Viewed

@@ -161,7 +161,7 @@ var BarBase = styled.styled.section(templateObject_4 || (templateObject_4 = _tsl
     var $removingThisOne = _a.$removingThisOne;
     return ($removingThisOne ? 1 : 2);
 });
-var ToastBase = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
+var ToastBase = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  min-width: ", ";\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  min-width: ", ";\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
     var $bgColor = _a.$bgColor;
     return $bgColor;
 }, function (_a) {
@@ -189,6 +189,9 @@ var ToastBase = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib
         : $slideUp
             ? "transform 350ms ease-out 50ms"
             : "opacity 350ms ease-out 50ms";
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.minToastWidth) ? "".concat($themeOverride.minToastWidth, "px") : "auto");
 });
 styled.styled.div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: inline-block;\n  padding: 15px 30px;\n  max-width: 70%;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: inline-block;\n  padding: 15px 30px;\n  max-width: 70%;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
     var $bgColor = _a.$bgColor;
@@ -276,4 +279,4 @@ exports.DialogHandler = DialogHandler$1;
 exports.RightSidedToastBox = RightSidedToastBox;
 exports.Toast = Toast;
 exports.connotationColors = connotationColors;
-//# sourceMappingURL=Toast-0d6d285e.js.map
+//# sourceMappingURL=Toast-2bc00b54.js.map

package/lib/cjs/{Toast-0d6d285e.js.map → Toast-2bc00b54.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast-~~0d6d285e~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Toast-2bc00b54.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/index.cjs CHANGED Viewed

@@ -46,13 +46,13 @@ var helpers = require('./helpers-b07f14f3.js');
 var DrawerDivider = require('./DrawerDivider-8f1e423f.js');
 var EmailInput = require('./EmailInput-ee2e8ac8.js');
 var Footer = require('./Footer.cjs');
-var FormikContainer = require('./FormikContainer-ed00a147.js');
+var FormikContainer = require('./FormikContainer-cebc6fbe.js');
 var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
 var FiltersBar = require('./FiltersBar-1c53d614.js');
 var HorizontalTabMenu = require('./HorizontalTabMenu-55955f88.js');
 var IconButton = require('./IconButton-99b9f2dd.js');
 var IconTile = require('./IconTile-64cb919a.js');
-var ImagePicker = require('./ImagePicker-454ad23d.js');
+var ImagePicker = require('./ImagePicker-08a324fc.js');
 var InlineCreditCardInput = require('./InlineCreditCardInput-673b3096.js');
 var InlineCurrencyInput = require('./InlineCurrencyInput-1680f1a4.js');
 var InlineEmailInput = require('./InlineEmailInput-78e3cce8.js');
@@ -79,7 +79,7 @@ var RadioItem = require('./RadioItem-8d5f6119.js');
 var RJSForm = require('./RJSForm-e54c2a95.js');
 require('./types-92e1c1ae.js');
 var RJSFormRenderer = require('./RJSFormRenderer-c2239d6e.js');
-var Toast = require('./Toast-0d6d285e.js');
+var Toast = require('./Toast-2bc00b54.js');
 require('react-dom');
 var ButtonColorFamilyEnum = require('./ButtonColorFamilyEnum.cjs');
 var addOrRemoveById = require('./addOrRemoveById.cjs');
@@ -288,6 +288,8 @@ require('./useIsomorphicLayoutEffect-e0094154.js');
 require('dayjs');
 require('./RadioStyles-12980dcd.js');
 require('formik');
+require('browser-image-compression');
+require('libheif-js/wasm-bundle');
 require('@rjsf/core');
 require('@rjsf/validator-ajv8');
 require('./filtering-43f0db28.js');
@@ -296,7 +298,7 @@ require('./TableStyles-bfbc4be4.js');
 require('immutability-helper');
 require('react-dropzone');
 require('./DropdownInputStyles-13901ba5.js');
-require('./SnackContainer-980dbf9f.js');
+require('./SnackContainer-dcea49a1.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/lib/cjs/index.cjs.map CHANGED Viewed

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

package/lib/esm/DialogHandler.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export { D as DialogHandler } from './Toast-40d9f007.js';
-export { S as SnackContainer } from './SnackContainer-8156c4a6.js';
+export { D as DialogHandler } from './Toast-d07ba541.js';
+export { S as SnackContainer } from './SnackContainer-227df6f4.js';
 import './colors.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';

package/lib/esm/Form.js CHANGED Viewed

@@ -1,5 +1,5 @@
 export { F as FormWrapper } from './FormStyles-bf01f03c.js';
-export { F as Form } from './FormikContainer-972cb7b5.js';
+export { F as Form } from './FormikContainer-140aa2e4.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
 import './_tslib-1a4c929e.js';
 import 'styled-components';
@@ -102,14 +102,16 @@ import './DescriptiveDropdownInput-1c8009a6.js';
 import './EmailInput-3d43f7fe.js';
 import './InlineEmailInput-b6c8b8b2.js';
 import './Email.js';
-import './ImagePicker-5b68b937.js';
+import './ImagePicker-a93304aa.js';
 import './Delete-717a8dd0.js';
 import './Edit.js';
-import './Toast-40d9f007.js';
+import './Toast-d07ba541.js';
 import './Typography-a45f29be.js';
 import './TextVariantEnum.js';
 import './CheckmarkCircle.js';
 import './Warning-09535167.js';
+import 'browser-image-compression';
+import 'libheif-js/wasm-bundle';
 import './SingleButton-4b90fc1f.js';
 import './MultiSelect-fabde188.js';
 import './Clear.js';

package/lib/esm/Form.js.map CHANGED Viewed

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

package/lib/esm/{FormikContainer-972cb7b5.js → FormikContainer-140aa2e4.js} RENAMED Viewed

@@ -40,7 +40,7 @@ import { SwitchTypeEnum } from './SwitchTypeEnum.js';
 import { D as DescriptiveDropdownInput } from './DescriptiveDropdownInput-1c8009a6.js';
 import { E as EmailInput } from './EmailInput-3d43f7fe.js';
 import { I as InlineEmailInput } from './InlineEmailInput-b6c8b8b2.js';
-import { I as ImagePicker } from './ImagePicker-5b68b937.js';
+import { I as ImagePicker } from './ImagePicker-a93304aa.js';
 import { M as MultiSelect } from './MultiSelect-fabde188.js';
 import { I as InlineInput } from './InlineInput-6e99d8b3.js';
 import { I as Input } from './Input-b6886dba.js';
@@ -1293,4 +1293,4 @@ FormikContainer.defaultProps = {
 };
 export { FormikContainer as F };
-//# sourceMappingURL=FormikContainer-972cb7b5.js.map
+//# sourceMappingURL=FormikContainer-140aa2e4.js.map

package/lib/esm/{FormikContainer-972cb7b5.js.map → FormikContainer-140aa2e4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormikContainer-~~972cb7b5~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"FormikContainer-140aa2e4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/{ImagePicker-5b68b937.js → ImagePicker-a93304aa.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
+import { c as __awaiter, d as __generator, a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { styled, useTheme } from 'styled-components';
@@ -9,21 +9,99 @@ import { Edit } from './Edit.js';
 import { formatBytesToString } from './formatBytesToString.js';
 import { L as LabelBox, A as Asterisk, V as ValidationText, H as HelperText } from './Inputs-e6fa30e2.js';
 import { ButtonColorFamilyEnum, ConnotationColorEnum, SnackTypeEnum } from './ButtonColorFamilyEnum.js';
-import { D as DialogHandler } from './Toast-40d9f007.js';
+import { D as DialogHandler } from './Toast-d07ba541.js';
 import 'react-dom';
 import { noop } from './isEmptyObject.js';
 import { u as useMeasure } from './useMeasure-c4c687e9.js';
+import imageCompression from 'browser-image-compression';
+import libheif from 'libheif-js/wasm-bundle';
 import { s as showLabel } from './showLabel-b80f881c.js';
 import './Button.js';
 import { S as SingleButton } from './SingleButton-4b90fc1f.js';
 import { ButtonVariantEnum } from './ButtonVariantEnum.js';
 import { I as IconButton } from './IconButton-3083ac19.js';
 import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
+import { L as LoadingEllipsis } from './LoadingEllipsis-505a407e.js';
 import { HeadingH2 } from './BodyLEmphasis.js';
-import { loadingPseudo } from './Loading.js';
-import './Scroller.js';
 import { focusAfter, absoluteFill } from './focusAfter.js';
+var compressImage = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var options, compressedFile;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                options = {
+                    maxSizeMB: 2,
+                    maxWidthOrHeight: 1920,
+                    useWebWorker: true,
+                    alwaysKeepResolution: true,
+                };
+                return [4 /*yield*/, imageCompression(file, options)];
+            case 1:
+                compressedFile = _a.sent();
+                return [2 /*return*/, compressedFile];
+        }
+    });
+}); };
+function dataURLToBlob(dataUrl) {
+    var byteString = atob(dataUrl.split(",")[1]);
+    var mimeString = dataUrl.split(",")[0].split(":")[1].split(";")[0];
+    var ab = new ArrayBuffer(byteString.length);
+    var ia = new Uint8Array(ab);
+    for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    return new Blob([ab], { type: mimeString });
+}
+var convertHEICtoPNG = function (file) { return __awaiter(void 0, void 0, void 0, function () {
+    var arrayBuffer, decoder, data, image_1, originalWidth, originalHeight, canvas, context, imageData_1, dataUrl, blob, convertedFile, error_1;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 3, , 4]);
+                return [4 /*yield*/, file.arrayBuffer()];
+            case 1:
+                arrayBuffer = _a.sent();
+                if (!arrayBuffer) {
+                    throw new Error("Error: arrayBuffer is null or undefined");
+                }
+                decoder = new libheif.HeifDecoder();
+                data = decoder.decode(new Uint8Array(arrayBuffer));
+                image_1 = data[0];
+                originalWidth = image_1.get_width();
+                originalHeight = image_1.get_height();
+                canvas = document.createElement("canvas");
+                canvas.width = originalWidth;
+                canvas.height = originalHeight;
+                context = canvas.getContext("2d");
+                if (!context) {
+                    throw new Error("Error: context undefined");
+                }
+                imageData_1 = context.createImageData(originalWidth, originalHeight);
+                return [4 /*yield*/, new Promise(function (resolve, reject) {
+                        image_1.display(imageData_1, function (displayData) {
+                            if (!displayData) {
+                                return reject(new Error("HEIF processing error"));
+                            }
+                            resolve();
+                        });
+                    })];
+            case 2:
+                _a.sent();
+                context.putImageData(imageData_1, 0, 0);
+                dataUrl = canvas.toDataURL("image/png");
+                blob = dataURLToBlob(dataUrl);
+                convertedFile = new File([blob], "image.png", { type: "image/png" });
+                return [2 /*return*/, convertedFile];
+            case 3:
+                error_1 = _a.sent();
+                throw new Error("This is the error ".concat(error_1));
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
 var Base = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n"], ["\n  position: relative;\n  width: ", "px;\n"])), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size;
@@ -61,16 +139,7 @@ var ImageInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemp
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
 });
-var ImageInputLoading = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-radius: ", "px;\n  display: block;\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n  z-index: -1;\n  ", "\n"], ["\n  border-radius: ", "px;\n  display: block;\n  position: relative;\n  height: ", "px;\n  width: ", "px;\n  z-index: -1;\n  ", "\n"])), function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius;
-}, function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.height) || theme.imagePicker.size) - 2;
-}, function (_a) {
-    var $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
-}, loadingPseudo({}));
+var EllipsisContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n"])));
 var CenterImage = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  border-radius: ", "px;\n  display: flex;\n  overflow: hidden;\n  padding: ", "px;\n  pointer-events: none;\n"], ["\n  ", ";\n  border-radius: ", "px;\n  display: flex;\n  overflow: hidden;\n  padding: ", "px;\n  pointer-events: none;\n"])), absoluteFill({}), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius - 1;
@@ -135,7 +204,7 @@ var FakeTextLink = styled.span(templateObject_14 || (templateObject_14 = __makeT
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
 var ImagePicker = function (_a) {
-    var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage, innerRef = _a.innerRef, loading = _a.loading;
+    var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage;
     var theme = useTheme();
     var colorFamilies = theme.colorFamilies;
     var disabledColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor) || theme.imagePicker.disabledColor;
@@ -148,10 +217,11 @@ var ImagePicker = function (_a) {
     var _g = useState(""), tempFile = _g[0], setTempFile = _g[1];
     var _h = useState(""), placeholder = _h[0], setPlaceholder = _h[1];
     var _j = useState(""), formattedInitials = _j[0], setFormattedInitials = _j[1];
+    var _k = useState(false), loading = _k[0], setLoading = _k[1];
     var labelBoxRef = useRef(null);
-    var _k = useMeasure(), inputGroupRef = _k[0], inputGroupMeasure = _k[1];
+    var _l = useMeasure(), inputGroupRef = _l[0], inputGroupMeasure = _l[1];
     var validationRef = useRef(null);
-    var _l = useState(false), designSwitch = _l[0], setDesignSwitch = _l[1];
+    var _m = useState(false), designSwitch = _m[0], setDesignSwitch = _m[1];
     var helperTextVisible = imageLabel ? !showValidationMessage || !designSwitch : !showValidationMessage || !validationMessage;
     var shortestDimension = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.width) && (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.height) ? Math.min(themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.width, themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.height) : theme.imagePicker.size;
     var showToast = function (_a) {
@@ -164,6 +234,10 @@ var ImagePicker = function (_a) {
             title: title,
         });
     };
+    var getFileExtension = function (filename) {
+        var parts = filename.split(".");
+        return parts.length > 1 ? parts.pop().toLowerCase() : "";
+    };
     // This is required when we have an initialValue.
     // This does feel like a hack, but it works.
     useEffect(function () {
@@ -179,32 +253,61 @@ var ImagePicker = function (_a) {
             reader.readAsDataURL(placeholderImageUrl);
         }
     }, [placeholderImageUrl]);
-    var readURI = function (event) {
+    var readURI = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var file, fileExtension, convertedFile, compressedFile, isNotAnImage, fileSizeKB, reader;
         var _a, _b;
-        var file = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
-        if (file) {
-            var isNotAnImage = !file.type.match(/^image\/+/g);
-            var fileSizeKB = file.size / 1000;
-            if (isNotAnImage) {
-                showToast({ text: "Please upload an image file", colorFamily: ConnotationColorEnum.Negative, title: "" });
-            }
-            else if (sizeLimitKB && fileSizeKB > sizeLimitKB) {
-                showToast({
-                    title: "File size exceeded",
-                    text: "File size of ".concat(formatBytesToString({ bytes: file.size }), " exceeds ").concat(sizeLimitKB.toLocaleString(), "kb limit"),
-                    colorFamily: ConnotationColorEnum.Negative,
-                });
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 4, , 5]);
+                    file = (_b = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+                    if (!file) {
+                        throw new Error("Error: file is undefined");
+                    }
+                    fileExtension = getFileExtension(file.name);
+                    if (!(fileExtension === "heic")) return [3 /*break*/, 3];
+                    return [4 /*yield*/, convertHEICtoPNG(file)];
+                case 1:
+                    convertedFile = _c.sent();
+                    return [4 /*yield*/, compressImage(convertedFile)];
+                case 2:
+                    compressedFile = _c.sent();
+                    file = compressedFile;
+                    _c.label = 3;
+                case 3:
+                    isNotAnImage = !file.type.match(/^image\/+/g);
+                    fileSizeKB = file.size / 1000;
+                    if (isNotAnImage) {
+                        showToast({ text: "Please upload an image file", colorFamily: ConnotationColorEnum.Negative, title: "" });
+                    }
+                    else if (sizeLimitKB && fileSizeKB > sizeLimitKB) {
+                        showToast({
+                            title: "File size exceeded",
+                            text: "File size of ".concat(formatBytesToString({ bytes: file.size }), " exceeds ").concat(sizeLimitKB.toLocaleString(), "kb limit"),
+                            colorFamily: ConnotationColorEnum.Negative,
+                        });
+                    }
+                    else {
+                        reader = new FileReader();
+                        reader.onload = function (progress) {
+                            var _a;
+                            setTempFile((_a = progress === null || progress === void 0 ? void 0 : progress.target) === null || _a === void 0 ? void 0 : _a.result);
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                    return [2 /*return*/, file];
+                case 4:
+                    _c.sent();
+                    showToast({
+                        title: "",
+                        text: "Error processing FIle",
+                        colorFamily: ConnotationColorEnum.Negative,
+                    });
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
             }
-            else {
-                var reader = new FileReader();
-                reader.onload = function (progress) {
-                    var _a;
-                    setTempFile((_a = progress === null || progress === void 0 ? void 0 : progress.target) === null || _a === void 0 ? void 0 : _a.result);
-                };
-                reader.readAsDataURL(file);
-            }
-        }
-    };
+        });
+    }); };
     useEffect(function () {
         var firstTwo = placeholderInitials === null || placeholderInitials === void 0 ? void 0 : placeholderInitials.slice(0, 2);
         setFormattedInitials(firstTwo === null || firstTwo === void 0 ? void 0 : firstTwo.toUpperCase());
@@ -222,7 +325,7 @@ var ImagePicker = function (_a) {
         }
     }, [inputGroupMeasure.width, showValidationMessage, imageLabel, validationMessage]);
     // Clear input
-    var inputRef = innerRef || useRef(null);
+    var inputRef = useRef(null);
     var clearInput = function () {
         if (inputRef.current) {
             inputRef.current.value = "";
@@ -243,10 +346,33 @@ var ImagePicker = function (_a) {
                         labelColor: labelColor,
                         htmlFor: "".concat(imageLabel, "_imagePicker"),
                         removePaddingRight: required,
-                    }), required && (jsx(Asterisk, __assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxs(PickerBox, __assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsx(ImageInputLoading, { "$themeOverride": themeOverride }, void 0)) : (jsxs(Fragment, { children: [jsx(ImageInput, __assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
-                                    readURI(event);
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                                }, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsx(PlaceholderCircle, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsx(PlaceholderInitials, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxs(CenterGrid, __assign({ "$themeOverride": themeOverride }, { children: [jsx(PlaceholderIconBox, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.Text ? (jsx(FakeTextLink, __assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsx(SingleButton, { variant: actionButtonVariant, text: actionText, onClick: noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsx(EditIconBox, __assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsx(Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsx(DeleteIconBox, __assign({ "$themeOverride": themeOverride }, { children: jsx(IconButton, { Icon: Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsx(ValidationText, __assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsx(HelperText, __assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
+                    }), required && (jsx(Asterisk, __assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxs(PickerBox, __assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsx(EllipsisContainer, { children: jsx(LoadingEllipsis, {}, void 0) }, void 0)) : (jsxs(Fragment, { children: [jsx(ImageInput, __assign({}, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*,.heic", disabled: disabled, onChange: function (event) { return __awaiter(void 0, void 0, void 0, function () {
+                                    var file, error_2;
+                                    var _a;
+                                    return __generator(this, function (_b) {
+                                        switch (_b.label) {
+                                            case 0:
+                                                _b.trys.push([0, 2, 3, 4]);
+                                                setLoading(true);
+                                                return [4 /*yield*/, readURI(event)];
+                                            case 1:
+                                                file = _b.sent();
+                                                if (file && ((_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0])) {
+                                                    event.target.files[0] = file;
+                                                }
+                                                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+                                                return [3 /*break*/, 4];
+                                            case 2:
+                                                error_2 = _b.sent();
+                                                console.error("Error processing image: ".concat(error_2));
+                                                return [3 /*break*/, 4];
+                                            case 3:
+                                                setLoading(false);
+                                                return [7 /*endfinally*/];
+                                            case 4: return [2 /*return*/];
+                                        }
+                                    });
+                                }); }, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsx(PlaceholderCircle, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsx(PlaceholderInitials, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxs(CenterGrid, __assign({ "$themeOverride": themeOverride }, { children: [jsx(PlaceholderIconBox, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.Text ? (jsx(FakeTextLink, __assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsx(SingleButton, { variant: actionButtonVariant, text: actionText, onClick: noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsx(EditIconBox, __assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsx(Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsx(DeleteIconBox, __assign({ "$themeOverride": themeOverride }, { children: jsx(IconButton, { Icon: Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsx(ValidationText, __assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsx(HelperText, __assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
 };
 ImagePicker.defaultProps = {
     editButtonColorFamily: ButtonColorFamilyEnum.Blue,
@@ -254,4 +380,4 @@ ImagePicker.defaultProps = {
 };
 export { ImagePicker as I };
-//# sourceMappingURL=ImagePicker-5b68b937.js.map
+//# sourceMappingURL=ImagePicker-a93304aa.js.map

package/lib/esm/{ImagePicker-5b68b937.js.map → ImagePicker-a93304aa.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImagePicker-~~5b68b937~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"ImagePicker-a93304aa.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/ImagePicker.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { I as ImagePicker } from './ImagePicker-5b68b937.js';
+export { I as ImagePicker } from './ImagePicker-a93304aa.js';
 import './_tslib-1a4c929e.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -12,7 +12,7 @@ import './Edit.js';
 import './formatBytesToString.js';
 import './Inputs-e6fa30e2.js';
 import './ButtonColorFamilyEnum.js';
-import './Toast-40d9f007.js';
+import './Toast-d07ba541.js';
 import './Close-51d14759.js';
 import './TextLink-eff022f2.js';
 import './IndicatorDown.js';
@@ -36,11 +36,11 @@ import './ButtonVariantEnum.js';
 import './CheckmarkCircle.js';
 import './Warning-09535167.js';
 import 'react-dom';
+import 'browser-image-compression';
+import 'libheif-js/wasm-bundle';
 import './showLabel-b80f881c.js';
 import './SingleButton-4b90fc1f.js';
 import './IconButton-3083ac19.js';
 import './focusAfter.js';
 import './helpers-e2f33583.js';
-import './Loading.js';
-import './Scroller.js';
 //# sourceMappingURL=ImagePicker.js.map

package/lib/esm/{SnackContainer-8156c4a6.js → SnackContainer-227df6f4.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { f as __spreadArray, _ as __assign } from './_tslib-1a4c929e.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useReducer, useRef, useState, useEffect, useImperativeHandle } from 'react';
 import ReactDOM__default from 'react-dom';
-import { S as SnackActionType, C as CentralToastBox, B as Bar, T as Toast, R as RightSidedToastBox, a as Dialog, c as connotationColors } from './Toast-40d9f007.js';
+import { S as SnackActionType, C as CentralToastBox, B as Bar, T as Toast, R as RightSidedToastBox, a as Dialog, c as connotationColors } from './Toast-d07ba541.js';
 import { isBrowser } from './isEmptyObject.js';
 import { u as useMeasure } from './useMeasure-c4c687e9.js';
 import { SnackTypeEnum, ConnotationColorEnum } from './ButtonColorFamilyEnum.js';
@@ -258,4 +258,4 @@ var SnackContainer = function (_a) {
 };
 export { SnackContainer as S };
-//# sourceMappingURL=SnackContainer-8156c4a6.js.map
+//# sourceMappingURL=SnackContainer-227df6f4.js.map

package/lib/esm/{SnackContainer-8156c4a6.js.map → SnackContainer-227df6f4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SnackContainer-~~8156c4a6~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"SnackContainer-227df6f4.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/ThemeProvider.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { _ as __assign } from './_tslib-1a4c929e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { cerebellumTheme } from './cerebellumTheme.js';
-import { D as DialogHandler } from './Toast-40d9f007.js';
-import { S as SnackContainer } from './SnackContainer-8156c4a6.js';
+import { D as DialogHandler } from './Toast-d07ba541.js';
+import { S as SnackContainer } from './SnackContainer-227df6f4.js';
 import './colors.js';
 import './ButtonColorFamilyEnum.js';
 import 'react';

package/lib/esm/{Toast-40d9f007.js → Toast-d07ba541.js} RENAMED Viewed

@@ -155,7 +155,7 @@ var BarBase = styled.section(templateObject_4 || (templateObject_4 = __makeTempl
     var $removingThisOne = _a.$removingThisOne;
     return ($removingThisOne ? 1 : 2);
 });
-var ToastBase = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
+var ToastBase = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  min-width: ", ";\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: grid;\n  place-content: center;\n  margin-top: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding: 15px 30px;\n  transform: ", ";\n  transition: ", ";\n  width: fit-content;\n  min-width: ", ";\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
     var $bgColor = _a.$bgColor;
     return $bgColor;
 }, function (_a) {
@@ -183,6 +183,9 @@ var ToastBase = styled.div(templateObject_5 || (templateObject_5 = __makeTemplat
         : $slideUp
             ? "transform 350ms ease-out 50ms"
             : "opacity 350ms ease-out 50ms";
+}, function (_a) {
+    var $themeOverride = _a.$themeOverride;
+    return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.minToastWidth) ? "".concat($themeOverride.minToastWidth, "px") : "auto");
 });
 styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: inline-block;\n  padding: 15px 30px;\n  max-width: 70%;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 8px;\n  box-shadow: ", ";\n  color: ", ";\n  display: inline-block;\n  padding: 15px 30px;\n  max-width: 70%;\n  @media (max-width: 400px) {\n    max-width: 85%;\n    padding: 15px 15px;\n  }\n  @media print {\n    display: none;\n  }\n"])), function (_a) {
     var $bgColor = _a.$bgColor;
@@ -264,4 +267,4 @@ var Toast = React__default.forwardRef(function (_a, ref) {
 });
 export { Bar as B, CentralToastBox as C, DialogHandler$1 as D, RightSidedToastBox as R, SnackActionType as S, Toast as T, Dialog as a, connotationColors as c };
-//# sourceMappingURL=Toast-40d9f007.js.map
+//# sourceMappingURL=Toast-d07ba541.js.map

package/lib/esm/{Toast-40d9f007.js.map → Toast-d07ba541.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast-~~40d9f007~~.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"Toast-d07ba541.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/index.js CHANGED Viewed

@@ -47,13 +47,13 @@ import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
 export { D as DrawerDivider } from './DrawerDivider-5b10a31b.js';
 export { E as EmailInput } from './EmailInput-3d43f7fe.js';
 export { Footer } from './Footer.js';
-export { F as Form } from './FormikContainer-972cb7b5.js';
+export { F as Form } from './FormikContainer-140aa2e4.js';
 export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
 export { F as FiltersBar } from './FiltersBar-25250ff0.js';
 export { H as HorizontalTabMenu } from './HorizontalTabMenu-7f72f11a.js';
 export { I as IconButton } from './IconButton-3083ac19.js';
 export { I as IconTile } from './IconTile-ccdd2d4e.js';
-export { I as ImagePicker } from './ImagePicker-5b68b937.js';
+export { I as ImagePicker } from './ImagePicker-a93304aa.js';
 export { I as InlineCreditCardInput, a as applyCreditCardMask } from './InlineCreditCardInput-326e0e7f.js';
 export { I as InlineCurrencyInput, a as applyCurrencyMask } from './InlineCurrencyInput-51a48ddd.js';
 export { I as InlineEmailInput } from './InlineEmailInput-b6c8b8b2.js';
@@ -83,7 +83,7 @@ export { R as RadioItem } from './RadioItem-ff07936b.js';
 export { R as RJSForm } from './RJSForm-36c6596e.js';
 import './types-20c5eba5.js';
 export { R as RJSFormRenderer } from './RJSFormRenderer-e4689356.js';
-export { D as DialogHandler } from './Toast-40d9f007.js';
+export { D as DialogHandler } from './Toast-d07ba541.js';
 import 'react-dom';
 export { ButtonColorFamilyEnum, ConnotationColorEnum, CountryMaskEnum, FileTypeEnum, InputTheme, SnackTypeEnum, TextStyleEnum, USStatesEnum } from './ButtonColorFamilyEnum.js';
 export { addOrRemoveById, addOrRemoveString, getObjectById, makeIdString, removeById, removeByIdArray, removeString, replaceObjectById, setAllKeysToValue, setObjectById, toggleObjectById } from './addOrRemoveById.js';
@@ -292,6 +292,8 @@ import './useIsomorphicLayoutEffect-02f8ff90.js';
 import 'dayjs';
 import './RadioStyles-876d7b0d.js';
 import 'formik';
+import 'browser-image-compression';
+import 'libheif-js/wasm-bundle';
 import '@rjsf/core';
 import '@rjsf/validator-ajv8';
 import './filtering-ce417fc1.js';
@@ -300,7 +302,7 @@ import './TableStyles-10912ab4.js';
 import 'immutability-helper';
 import 'react-dropzone';
 import './DropdownInputStyles-fab99b6a.js';
-import './SnackContainer-8156c4a6.js';
+import './SnackContainer-227df6f4.js';
 var DesktopSelfie = function (props) {
     var _a = props.boxed, boxed = _a === void 0 ? false : _a, _b = props.boxedSize, boxedSize = _b === void 0 ? 67 : _b, boxColor = props.boxColor, _c = props.fill, fill = _c === void 0 ? "#000000" : _c, _d = props.round, round = _d === void 0 ? false : _d, _e = props.scale, scale = _e === void 0 ? 1 : _e, title = props.title;

package/lib/esm/index.js.map CHANGED Viewed

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

package/lib/types/src/components/ImagePicker/ImagePickerStyles.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { BaseProps, CenterGridProps, CenterImageProps, DeleteIconBoxProps, EditI
 export declare const Base: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BaseProps>>;
 export declare const PickerBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PickerBoxProps>>;
 export declare const ImageInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ImageInputProps>>;
-export declare const ImageInputLoading: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ImageInputProps>>;
+export declare const EllipsisContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const CenterImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CenterImageProps>>;
 export declare const LoadedImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>;
 export declare const PlaceholderCircle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderCircleProps>>;

package/lib/types/src/components/ImagePicker/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ChangeEvent, RefObject } from "react";
+import { ChangeEvent } from "react";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { ColorFamilyType } from "../../sharedTypes/types";
 import { ButtonVariantEnum } from "../Button";
@@ -50,10 +50,6 @@ export interface ImagePickerType {
     themeOverride?: ThemeOverride;
     /** A message for when the input fails validation. Only displays if `showValidationMessage: true`  */
     validationMessage?: string;
-    /** Used to pass a ref to the ImagePicker component */
-    innerRef?: RefObject<HTMLInputElement>;
-    /** Displays a loading animation in middle of the component when true */
-    loading?: boolean;
 }
 export interface ThemeOverride {
     actionButtonGap?: number;

package/lib/types/src/components/SnackContainer/types.d.ts CHANGED Viewed

@@ -10,6 +10,7 @@ export interface ThemeOverride {
     borderRadius?: number;
     buttonHeight?: number;
     buttonPaddingString?: string;
+    minToastWidth?: number;
     shadow?: string;
 }
 export declare enum SnackActionType {

package/lib/types/src/helpers/compress-image.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const compressImage: (file: File) => Promise<File>;

package/lib/types/src/helpers/convert-heic-to-png.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const convertHEICtoPNG: (file: File) => Promise<File>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "13.4.0",
+  "version": "13.4.1",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "lib/cjs/index.cjs",
@@ -87,6 +87,7 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^29.5.12",
     "@types/jscodeshift": "^0.11.7",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.66",
     "@types/react-datepicker": "^6.0.3",
     "@types/react-dom": "^18.2.22",
@@ -130,11 +131,13 @@
     "@rjsf/core": "^5.10.0",
     "@rjsf/utils": "^5.10.0",
     "@rjsf/validator-ajv8": "^5.12.0",
+    "browser-image-compression": "^2.0.2",
     "country-flag-icons": "^1.5.11",
     "dayjs": "^1.10.7",
     "dotenv": "^10.0.0",
     "formik": "^2.2.9",
     "immutability-helper": "^3.1.1",
+    "libheif-js": "^1.17.1",
     "react-datepicker": "^6.2.0",
     "react-dropzone": "^14.2.2",
     "react-google-autocomplete": "^2.6.1",