@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/image.js

@@ -0,0 +1,1348 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/Image/index.ts
+var Image_exports = {};
+__export(Image_exports, {
+  Cropper: () => Cropper_default,
+  MuiImageList: () => MuiImageList_default
+});
+module.exports = __toCommonJS(Image_exports);
+
+// src/components/elemental/Image/src/MuiImageList/MuiImageList.tsx
+var import_ImageList = __toESM(require("@mui/material/ImageList"));
+var import_ImageListItem = __toESM(require("@mui/material/ImageListItem"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var MuiImageList = ({ imageList, cols = 3, rowHeight = 164, width = "100%", height = "auto" }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ImageList.default, { sx: { width, height }, cols, rowHeight, children: imageList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ImageListItem.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: `${item.url}?w=${rowHeight * 2}&h=${rowHeight * 2}&fit=crop&auto=format`,
+      alt: item.title ?? "",
+      loading: "lazy",
+      width: rowHeight,
+      height: rowHeight,
+      style: { objectFit: "cover" }
+    }
+  ) }, item.id)) });
+};
+var MuiImageList_default = MuiImageList;
+
+// src/components/elemental/Image/src/Cropper/Cropper.tsx
+var import_ReactCrop = require("react-image-crop/dist/ReactCrop.css");
+
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Image/src/Cropper/theme.ts
+var cropperRootSx = {
+  "--image-border-radius": "var(--mui-shape-borderRadius)",
+  "--image-border": "2px solid var(--mui-palette-secondary-main)",
+  // react-image-crop selection theming
+  "--rc-border-color": "var(--mui-palette-border-1)",
+  "--rc-focus-color": "var(--mui-palette-primary-main)",
+  "--rc-drag-handle-bg-colour": "var(--mui-palette-focus-1)",
+  "& .ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection)": {
+    "--animated-dash-light-color": "var(--mui-palette-border-1)",
+    "--animated-dash-dark-color": "var(--mui-palette-grey-300)",
+    backgroundImage: `
+      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to right,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%),
+      linear-gradient(to bottom,var(--animated-dash-light-color) 50%,var(--animated-dash-dark-color) 50%)`
+  },
+  [`& .ReactCrop__rule-of-thirds-vt:before, 
+    .ReactCrop__rule-of-thirds-vt:after, 
+    .ReactCrop__rule-of-thirds-hz:before, 
+    .ReactCrop__rule-of-thirds-hz:after`]: {
+    background: "#fff6"
+  }
+};
+
+// src/components/elemental/Image/src/Cropper/layout/CropperLayout.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CropperLayout({
+  left,
+  right,
+  leftFooter,
+  footer
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { sx: mergeSx({ display: "flex", flexDirection: "column", gap: 2, height: "100%" }, cropperRootSx), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_Box.default,
+    {
+      sx: {
+        // stack children vertically on small screens, switch to two‑column grid at md
+        display: { xs: "table-row-group", md: "grid" },
+        flexDirection: { xs: "column", md: void 0 },
+        gridTemplateColumns: { xs: "1fr", md: "1fr 280px" },
+        gap: 2,
+        alignItems: "start",
+        minHeight: 0,
+        flex: "1 1 auto",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%", alignItems: "center", width: "-webkit-fill-available" }, children: [
+          left,
+          leftFooter
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%" }, children: [
+          right,
+          footer
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperSourceSection.tsx
+var import_react_image_crop = __toESM(require("react-image-crop"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function CropperSourceSection({
+  activeBlobUrl,
+  crop,
+  setCrop,
+  setCompletedCrop,
+  circularCrop,
+  defaultRatio,
+  resizeCropEnabled,
+  rotate,
+  scale,
+  imageRef,
+  onImageLoad
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_Box.default,
+    {
+      sx: {
+        minHeight: 0,
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "& .ReactCrop": {
+          borderRadius: "var(--image-border-radius)",
+          border: "var(--image-border)"
+        }
+      },
+      children: !!activeBlobUrl && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_image_crop.default,
+        {
+          crop,
+          onChange: (nextCrop) => setCrop(nextCrop),
+          onComplete: (nextCrop) => setCompletedCrop(nextCrop),
+          circularCrop,
+          aspect: defaultRatio,
+          keepSelection: true,
+          ruleOfThirds: true,
+          disabled: !resizeCropEnabled,
+          style: { maxWidth: "100%", maxHeight: 420, overflow: "hidden" },
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "img",
+            {
+              ref: imageRef,
+              alt: "Crop source",
+              src: activeBlobUrl,
+              style: {
+                display: "block",
+                width: "100%",
+                maxWidth: "100%",
+                maxHeight: 420,
+                objectFit: "contain",
+                transform: `rotate(${rotate}deg) scale(${scale})`,
+                transformOrigin: "center center"
+              },
+              onLoad: onImageLoad
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/components/elemental/Slider/src/Slider/index.ts
+var import_Slider = __toESM(require("@mui/material/Slider"));
+
+// src/components/elemental/Typography/src/Typography.ts
+var import_Typography = __toESM(require("@mui/material/Typography"));
+
+// src/components/elemental/Image/src/Cropper/sections/CropperControlsSection.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var scaleMarks = [
+  { value: 0.5, label: "0.5x" },
+  { value: 1, label: "1x" },
+  { value: 1.5, label: "1.5x" },
+  { value: 2, label: "2x" },
+  { value: 2.5, label: "2.5x" },
+  { value: 3, label: "3x" }
+];
+var rotationMarks = [
+  { value: -180, label: "-180\xB0" },
+  { value: -90, label: "-90\xB0" },
+  { value: 0, label: "0\xB0" },
+  { value: 90, label: "90\xB0" },
+  { value: 180, label: "180\xB0" }
+];
+function CropperControlsSection({
+  PreviewRenderer,
+  canvasRef,
+  rotate,
+  setRotate,
+  scale,
+  setScale
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Stack.default, { spacing: 2, sx: { minWidth: 0, px: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Box.default, { display: "flex", justifyContent: "center", children: PreviewRenderer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PreviewRenderer, { ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "canvas",
+      {
+        ref: canvasRef,
+        style: {
+          width: "100%",
+          maxWidth: 260,
+          border: "var(--image-border)",
+          borderRadius: "var(--image-border-radius)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Typography.default, { variant: "body2", sx: { mb: 1 }, children: [
+        "Rotation (",
+        rotate,
+        "\xB0)"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_Slider.default,
+        {
+          min: -180,
+          max: 180,
+          step: 1,
+          marks: rotationMarks,
+          value: rotate,
+          onChange: (_, value) => setRotate(Array.isArray(value) ? value[0] : value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Typography.default, { variant: "body2", sx: { mb: 1 }, children: [
+        "Resize scale (",
+        scale.toFixed(2),
+        "x)"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_Slider.default,
+        {
+          min: 0.5,
+          max: 3,
+          step: 0.05,
+          marks: scaleMarks,
+          value: scale,
+          onChange: (_, value) => setScale(Array.isArray(value) ? value[0] : value)
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/elemental/Button/src/Button/Button.tsx
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Button(p) {
+  const { children, slotProps, ...rest } = p;
+  const { sx, ...boxRest } = slotProps?.innerBox ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Button.default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_Box.default,
+    {
+      ...boxRest,
+      sx: mergeSx(
+        {
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "pre"
+        },
+        sx
+      ),
+      children
+    }
+  ) });
+}
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/Icons/MuiIcon/index.ts
+var import_ArrowRightAlt = __toESM(require("@mui/icons-material/ArrowRightAlt"));
+var import_DescriptionOutlined = __toESM(require("@mui/icons-material/DescriptionOutlined"));
+var import_Description = __toESM(require("@mui/icons-material/Description"));
+var import_PictureAsPdf = __toESM(require("@mui/icons-material/PictureAsPdf"));
+var import_AudioFile = __toESM(require("@mui/icons-material/AudioFile"));
+var import_VideoFile = __toESM(require("@mui/icons-material/VideoFile"));
+var import_TableChart = __toESM(require("@mui/icons-material/TableChart"));
+var import_FolderZip = __toESM(require("@mui/icons-material/FolderZip"));
+var import_InsertDriveFile = __toESM(require("@mui/icons-material/InsertDriveFile"));
+var import_ImageOutlined = __toESM(require("@mui/icons-material/ImageOutlined"));
+var import_LayersOutlined = __toESM(require("@mui/icons-material/LayersOutlined"));
+var import_TextFormat = __toESM(require("@mui/icons-material/TextFormat"));
+var import_Remove = __toESM(require("@mui/icons-material/Remove"));
+var import_PostAdd = __toESM(require("@mui/icons-material/PostAdd"));
+var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
+var import_QuestionMarkOutlined = __toESM(require("@mui/icons-material/QuestionMarkOutlined"));
+var import_MeetingRoomOutlined = __toESM(require("@mui/icons-material/MeetingRoomOutlined"));
+var import_PlaylistRemove = __toESM(require("@mui/icons-material/PlaylistRemove"));
+var import_ChecklistRtl = __toESM(require("@mui/icons-material/ChecklistRtl"));
+var import_HideImageOutlined = __toESM(require("@mui/icons-material/HideImageOutlined"));
+var import_RemoveRedEyeTwoTone = __toESM(require("@mui/icons-material/RemoveRedEyeTwoTone"));
+var import_PhotoSizeSelectLarge = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_LockPersonOutlined = __toESM(require("@mui/icons-material/LockPersonOutlined"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_InsertEmoticon = __toESM(require("@mui/icons-material/InsertEmoticon"));
+var import_RemoveDoneOutlined = __toESM(require("@mui/icons-material/RemoveDoneOutlined"));
+var import_Tag = __toESM(require("@mui/icons-material/Tag"));
+var import_Audiotrack = __toESM(require("@mui/icons-material/Audiotrack"));
+var import_Videocam = __toESM(require("@mui/icons-material/Videocam"));
+var import_Code = __toESM(require("@mui/icons-material/Code"));
+var import_Equalizer = __toESM(require("@mui/icons-material/Equalizer"));
+var import_PivotTableChart = __toESM(require("@mui/icons-material/PivotTableChart"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_DataObject = __toESM(require("@mui/icons-material/DataObject"));
+var import_SortByAlpha = __toESM(require("@mui/icons-material/SortByAlpha"));
+var import_ThumbUp = __toESM(require("@mui/icons-material/ThumbUp"));
+var import_AttachMoneyOutlined = __toESM(require("@mui/icons-material/AttachMoneyOutlined"));
+var import_Storage = __toESM(require("@mui/icons-material/Storage"));
+var import_WorkspacePremium = __toESM(require("@mui/icons-material/WorkspacePremium"));
+var import_Numbers = __toESM(require("@mui/icons-material/Numbers"));
+var import_Functions = __toESM(require("@mui/icons-material/Functions"));
+var import_Lightbulb = __toESM(require("@mui/icons-material/Lightbulb"));
+var import_CropRotate = __toESM(require("@mui/icons-material/CropRotate"));
+var import_PhotoSizeSelectLarge2 = __toESM(require("@mui/icons-material/PhotoSizeSelectLarge"));
+var import_CollectionsBookmark = __toESM(require("@mui/icons-material/CollectionsBookmark"));
+var import_Schedule = __toESM(require("@mui/icons-material/Schedule"));
+var import_Style = __toESM(require("@mui/icons-material/Style"));
+var import_Crop169 = __toESM(require("@mui/icons-material/Crop169"));
+var import_CropSquare = __toESM(require("@mui/icons-material/CropSquare"));
+var import_GraphicEqRounded = __toESM(require("@mui/icons-material/GraphicEqRounded"));
+var import_MemoryRounded = __toESM(require("@mui/icons-material/MemoryRounded"));
+var import_AddCircleOutlineRounded = __toESM(require("@mui/icons-material/AddCircleOutlineRounded"));
+var import_Add = __toESM(require("@mui/icons-material/Add"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_Autorenew = __toESM(require("@mui/icons-material/Autorenew"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Menu = __toESM(require("@mui/icons-material/Menu"));
+var import_MoreVert = __toESM(require("@mui/icons-material/MoreVert"));
+var import_MoreHoriz = __toESM(require("@mui/icons-material/MoreHoriz"));
+var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
+var import_ContentPaste = __toESM(require("@mui/icons-material/ContentPaste"));
+var import_Cloud = __toESM(require("@mui/icons-material/Cloud"));
+var import_DownloadOutlined = __toESM(require("@mui/icons-material/DownloadOutlined"));
+var import_DownloadDoneOutlined = __toESM(require("@mui/icons-material/DownloadDoneOutlined"));
+var import_StarBorderOutlined = __toESM(require("@mui/icons-material/StarBorderOutlined"));
+var import_DeleteForever = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_LayersClear = __toESM(require("@mui/icons-material/LayersClear"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_DoneAll = __toESM(require("@mui/icons-material/DoneAll"));
+var import_PowerSettingsNew = __toESM(require("@mui/icons-material/PowerSettingsNew"));
+var import_Send = __toESM(require("@mui/icons-material/Send"));
+var import_ZoomInMap = __toESM(require("@mui/icons-material/ZoomInMap"));
+var import_ZoomOutMap = __toESM(require("@mui/icons-material/ZoomOutMap"));
+var import_HomeRepairService = __toESM(require("@mui/icons-material/HomeRepairService"));
+var import_Construction = __toESM(require("@mui/icons-material/Construction"));
+var import_Help = __toESM(require("@mui/icons-material/Help"));
+var import_EmojiFlags = __toESM(require("@mui/icons-material/EmojiFlags"));
+var import_Edit = __toESM(require("@mui/icons-material/Edit"));
+var import_ForkRight = __toESM(require("@mui/icons-material/ForkRight"));
+var import_Settings = __toESM(require("@mui/icons-material/Settings"));
+var import_Restore = __toESM(require("@mui/icons-material/Restore"));
+var import_EditNote = __toESM(require("@mui/icons-material/EditNote"));
+var import_HomeOutlined = __toESM(require("@mui/icons-material/HomeOutlined"));
+var import_ExitToAppOutlined = __toESM(require("@mui/icons-material/ExitToAppOutlined"));
+var import_WbSunnyOutlined = __toESM(require("@mui/icons-material/WbSunnyOutlined"));
+var import_DarkModeOutlined = __toESM(require("@mui/icons-material/DarkModeOutlined"));
+var import_AttachFileOutlined = __toESM(require("@mui/icons-material/AttachFileOutlined"));
+var import_NoteAdd = __toESM(require("@mui/icons-material/NoteAdd"));
+var import_CloudUpload = __toESM(require("@mui/icons-material/CloudUpload"));
+var import_KeyboardDoubleArrowRight = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRight"));
+var import_KeyboardDoubleArrowLeft = __toESM(require("@mui/icons-material/KeyboardDoubleArrowLeft"));
+var import_KeyboardDoubleArrowRightRounded = __toESM(require("@mui/icons-material/KeyboardDoubleArrowRightRounded"));
+var import_FitScreen = __toESM(require("@mui/icons-material/FitScreen"));
+var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
+var import_Biotech = __toESM(require("@mui/icons-material/Biotech"));
+var import_Share = __toESM(require("@mui/icons-material/Share"));
+var import_FilterAlt = __toESM(require("@mui/icons-material/FilterAlt"));
+var import_Sync = __toESM(require("@mui/icons-material/Sync"));
+var import_PlayArrow = __toESM(require("@mui/icons-material/PlayArrow"));
+var import_PauseOutlined = __toESM(require("@mui/icons-material/PauseOutlined"));
+var import_Casino = __toESM(require("@mui/icons-material/Casino"));
+var import_Paid = __toESM(require("@mui/icons-material/Paid"));
+var import_Save = __toESM(require("@mui/icons-material/Save"));
+var import_StopRounded = __toESM(require("@mui/icons-material/StopRounded"));
+var import_Replay = __toESM(require("@mui/icons-material/Replay"));
+var import_AccountTree = __toESM(require("@mui/icons-material/AccountTree"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+var import_KeyboardArrowRight = __toESM(require("@mui/icons-material/KeyboardArrowRight"));
+var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
+var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
+var import_SortByAlphaRounded = __toESM(require("@mui/icons-material/SortByAlphaRounded"));
+var import_FilterAltOutlined = __toESM(require("@mui/icons-material/FilterAltOutlined"));
+var import_InboxOutlined = __toESM(require("@mui/icons-material/InboxOutlined"));
+var import_SearchOff = __toESM(require("@mui/icons-material/SearchOff"));
+var import_ClearRounded = __toESM(require("@mui/icons-material/ClearRounded"));
+var import_ArrowDropDownRounded = __toESM(require("@mui/icons-material/ArrowDropDownRounded"));
+var import_AccountBox = __toESM(require("@mui/icons-material/AccountBox"));
+var import_Logout = __toESM(require("@mui/icons-material/Logout"));
+var import_Login = __toESM(require("@mui/icons-material/Login"));
+var import_Dashboard = __toESM(require("@mui/icons-material/Dashboard"));
+var import_AccountTreeOutlined = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_HelpOutline = __toESM(require("@mui/icons-material/HelpOutline"));
+var import_NavigateBefore = __toESM(require("@mui/icons-material/NavigateBefore"));
+var import_NavigateNext = __toESM(require("@mui/icons-material/NavigateNext"));
+var import_Person2 = __toESM(require("@mui/icons-material/Person"));
+var import_CalendarToday = __toESM(require("@mui/icons-material/CalendarToday"));
+var import_QuestionAnswerOutlined = __toESM(require("@mui/icons-material/QuestionAnswerOutlined"));
+var import_Today = __toESM(require("@mui/icons-material/Today"));
+var import_DeleteForever2 = __toESM(require("@mui/icons-material/DeleteForever"));
+var import_AdsClick = __toESM(require("@mui/icons-material/AdsClick"));
+var import_Fingerprint = __toESM(require("@mui/icons-material/Fingerprint"));
+var import_SportsEsportsOutlined = __toESM(require("@mui/icons-material/SportsEsportsOutlined"));
+var import_HelpOutlineRounded = __toESM(require("@mui/icons-material/HelpOutlineRounded"));
+var import_AccountTreeOutlined2 = __toESM(require("@mui/icons-material/AccountTreeOutlined"));
+var import_SmartToyOutlined = __toESM(require("@mui/icons-material/SmartToyOutlined"));
+var import_AcUnit = __toESM(require("@mui/icons-material/AcUnit"));
+var import_Loop = __toESM(require("@mui/icons-material/Loop"));
+var import_Pending = __toESM(require("@mui/icons-material/Pending"));
+var import_AllInclusive = __toESM(require("@mui/icons-material/AllInclusive"));
+var import_WarningOutlined = __toESM(require("@mui/icons-material/WarningOutlined"));
+var import_InfoOutlined = __toESM(require("@mui/icons-material/InfoOutlined"));
+var import_AutoAwesomeRounded = __toESM(require("@mui/icons-material/AutoAwesomeRounded"));
+var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutlineOutlined"));
+var import_Download = __toESM(require("@mui/icons-material/Download"));
+
+// src/components/elemental/Image/src/Cropper/sections/CropperActionSection.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CropperActionSection({
+  onSave,
+  onResetTransforms,
+  onClear,
+  saveDisabled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_Box.default,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        flexWrap: "wrap"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { onClick: onResetTransforms, title: "Reset Scale & Rotation", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Replay.default, { fontSize: "small" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { onClick: onClear, color: "error", title: "Remove image", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Close2.default, { fontSize: "small" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconButton_default, { onClick: onSave, color: "success", disabled: saveDisabled, title: "Save", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.default, { fontSize: "small" }) })
+      ] })
+    }
+  );
+}
+
+// src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/components/compound/FileUploader/src/ReactDropzone.tsx
+var import_react2 = require("react");
+var import_react_dropzone = require("react-dropzone");
+
+// src/components/compound/FileUploader/src/theme.ts
+var fileUploaderRootSx = {
+  "--dropzone-bg": "var(--mui-palette-background-paper)",
+  "--dropzone-text-color": "var(--mui-palette-text-secondary)",
+  "--dropzone-border-hover": "var(--mui-palette-primary-main)",
+  "--dropzone-bg-hover": "var(--mui-palette-action-hover)"
+};
+
+// src/_utils/_func/downloadFile.ts
+var import_file_type = require("file-type");
+async function downloadFile(url, fetchOptions) {
+  const res = await fetch(url, fetchOptions);
+  const blob = await res.blob();
+  const buffer = await blob.arrayBuffer();
+  const fType = await (0, import_file_type.fileTypeFromBuffer)(buffer);
+  const data = {
+    blobUrl: URL.createObjectURL(blob),
+    size: blob.size,
+    mimeType: fType?.mime || blob.type
+    // use file-type to get the mime type
+  };
+  const nonImgRes = {
+    ...data,
+    dimensions: {
+      width: 0,
+      height: 0
+    }
+  };
+  try {
+    if (data.mimeType.includes("image/")) {
+      const dimensions = await handleImageDownload(data.blobUrl);
+      return {
+        ...data,
+        dimensions
+      };
+    } else {
+      return nonImgRes;
+    }
+  } catch (err) {
+    console.warn("Failed to handle image download:", err);
+    return nonImgRes;
+  }
+}
+async function handleImageDownload(blobUrl) {
+  const img = new Image();
+  img.src = blobUrl;
+  await new Promise((resolve, reject) => {
+    img.onload = resolve;
+    img.onerror = reject;
+  });
+  const metaData = {
+    width: img.width,
+    height: img.height
+  };
+  img.remove();
+  return metaData;
+}
+
+// src/_utils/_const/file.ts
+var FILE_STATUSs = {
+  // local status
+  uploadingToLocal: "local-uploading",
+  uploadedToLocal: "local-uploaded",
+  localError: "local-error",
+  pending: "pending",
+  // upload s3
+  uploadPending: "upload-pending",
+  gettingSignedURL: "upload-gettingSignedURL",
+  beginUploadToS3: "upload-beginUploadToS3",
+  uploadedToCloud: "upload-uploadedToCloud",
+  error: "upload-error",
+  // download
+  downloadPending: "download-pending",
+  downloading: "download-in-progress",
+  downloaded: "download-completed",
+  downloadError: "download-error"
+};
+var FILE_TYPEs = {
+  image: "image",
+  video: "video",
+  audio: "audio",
+  pdf: "pdf",
+  doc: "doc",
+  xls: "xls",
+  ppt: "ppt",
+  txt: "txt",
+  zip: "zip",
+  json: "json",
+  other: "other"
+};
+
+// src/_utils/classes/PreviewableFile.ts
+var PreviewableFile = class {
+  path;
+  blobUrl;
+  filename;
+  randomName;
+  fileType;
+  mimeType;
+  size;
+  displaySize;
+  url;
+  fetchOptions;
+  putUrl;
+  getUrl;
+  status;
+  revokeable;
+  imageProps;
+  constructor(props = {}) {
+    this.path = props.path ?? "";
+    this.blobUrl = props.blobUrl ?? "";
+    this.filename = props.filename ?? "";
+    this.randomName = props.randomName ?? "";
+    this.fileType = props.fileType ?? getFileType(props.mimeType ?? "");
+    this.mimeType = props.mimeType ?? "";
+    this.size = props.size ?? 0;
+    this.displaySize = props.displaySize ?? displayFileSize(props.size ?? 0);
+    this.url = props.url ?? "";
+    this.fetchOptions = props.fetchOptions ?? {};
+    this.putUrl = props.putUrl ?? "";
+    this.getUrl = props.getUrl ?? "";
+    this.status = props.status ?? FILE_STATUSs.pending;
+    this.revokeable = props.revokeable ?? true;
+    this.imageProps = props.imageProps ?? {
+      width: 0,
+      height: 0
+    };
+    Object.preventExtensions(this);
+  }
+  toPlainObj() {
+    return {
+      ...this
+    };
+  }
+  updateFile(file) {
+    if (!file) return;
+    this.path = file.path;
+    this.blobUrl = file.blobUrl;
+    this.filename = file.filename;
+    this.randomName = file.randomName;
+    this.fileType = file.fileType;
+    this.size = file.size;
+    this.displaySize = file.displaySize;
+    this.url = file.url;
+    this.fetchOptions = file.fetchOptions;
+    this.putUrl = file.putUrl;
+    this.getUrl = file.getUrl;
+    this.status = file.status;
+    this.revokeable = file.revokeable;
+    this.imageProps = file.imageProps;
+  }
+  updateStatus(status) {
+    this.status = status;
+  }
+  async downloadFile() {
+    if (!this.url) return this;
+    try {
+      const res = await downloadFile(this.url, this.fetchOptions);
+      this.url = res.blobUrl;
+      this.path = res.blobUrl;
+      this.status = FILE_STATUSs.downloaded;
+      this.blobUrl = res.blobUrl;
+      this.fileType = getFileType(res.mimeType);
+      this.mimeType = res.mimeType;
+      this.size = res.size;
+      this.displaySize = displayFileSize(res.size);
+      this.imageProps = res.dimensions;
+      return this;
+    } catch (err) {
+      console.log(err);
+      return this;
+    }
+  }
+  _displayFileSize() {
+    return displayFileSize(this.size);
+  }
+  getUploadFormat() {
+    return {
+      url: this.putUrl,
+      keyPath: this.putUrl,
+      filename: this.filename,
+      fileType: this.mimeType,
+      hostname: ""
+    };
+  }
+};
+function displayFileSize(size) {
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+  const sizeWithUnit = size.toFixed(2) + " " + units[unitIndex];
+  return `[${sizeWithUnit}]`;
+}
+function getFileType(mimeType) {
+  const types = Object.values(FILE_TYPEs);
+  const [type] = mimeType.split("/");
+  if (types.includes(type)) {
+    return type;
+  }
+  const found = types.find((t) => mimeType.includes(t) && t !== FILE_TYPEs.other);
+  if (found) {
+    return found;
+  }
+  return FILE_TYPEs.other;
+}
+
+// src/components/compound/DisplayFile/src/DisplayFile.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var getFileIcon = (fileType) => {
+  switch (fileType) {
+    case FILE_TYPEs.image:
+      return import_ImageOutlined.default;
+    case FILE_TYPEs.pdf:
+      return import_PictureAsPdf.default;
+    case FILE_TYPEs.audio:
+      return import_AudioFile.default;
+    case FILE_TYPEs.video:
+      return import_VideoFile.default;
+    case FILE_TYPEs.xls:
+      return import_TableChart.default;
+    case FILE_TYPEs.zip:
+      return import_FolderZip.default;
+    case FILE_TYPEs.json:
+      return import_DataObject.default;
+    case FILE_TYPEs.ppt:
+    case FILE_TYPEs.doc:
+    case FILE_TYPEs.txt:
+      return import_Description.default;
+    default:
+      return import_InsertDriveFile.default;
+  }
+};
+var FileThumbnail = ({ file, size = 60 }) => {
+  const isImage = file.fileType === FILE_TYPEs.image;
+  const FileIcon = getFileIcon(file.fileType || "");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_Box.default,
+    {
+      sx: {
+        width: size,
+        height: size,
+        minWidth: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "transparent",
+        borderRadius: 1,
+        overflow: "hidden"
+      },
+      children: isImage && file.blobUrl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_Box.default,
+        {
+          component: "img",
+          src: file.blobUrl,
+          alt: file.filename,
+          sx: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileIcon, { fontSize: size >= 60 ? "large" : "medium", color: "action" })
+    }
+  );
+};
+var DisplayFile = ({
+  file,
+  onDelete,
+  mode = "thumbnail"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: {
+    display: "flex",
+    alignItems: "center",
+    gap: 1,
+    p: 1,
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: 1,
+    width: mode === "thumbnail" ? "fit-content" : "100%",
+    maxWidth: "100%",
+    position: "relative"
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileThumbnail, { file }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { flex: 1, overflow: "hidden" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "body2", noWrap: true, sx: { maxWidth: 150 }, children: file.filename }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "caption", color: "text.secondary", children: file.displaySize })
+    ] }),
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      IconButton_default,
+      {
+        size: "small",
+        onClick: () => onDelete(file),
+        sx: { ml: "auto" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, { fontSize: "small" })
+      }
+    )
+  ] });
+};
+DisplayFile.DISPLAY_MODEs = {
+  thumbnail: "thumbnail",
+  name: "name"
+};
+var DisplayFile_default = DisplayFile;
+
+// src/components/compound/FileUploader/src/DropZoneBox.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DropZoneBox = ({ getRootProps, getInputProps, error }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_Box.default,
+    {
+      ...getRootProps(),
+      sx: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        p: 3,
+        border: "2px dashed",
+        borderColor: error ? "error.main" : "divider",
+        borderRadius: 1,
+        backgroundColor: "var(--dropzone-bg)",
+        outline: "none",
+        transition: "border .24s ease-in-out",
+        color: "var(--dropzone-text-color)",
+        cursor: "pointer",
+        "&:hover": {
+          borderColor: "var(--dropzone-border-hover)",
+          backgroundColor: "var(--dropzone-bg-hover)"
+        }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ...getInputProps() }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_NoteAdd.default, { sx: { fontSize: "2.5rem", mb: 1 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { variant: "caption", align: "center", children: 'Drag "n" drop some files here, or click to select files' })
+      ]
+    }
+  );
+};
+var DropZoneBox_default = DropZoneBox;
+
+// src/components/compound/FileUploader/src/DropZoneButton.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var DropZoneButton = ({
+  getRootProps,
+  getInputProps,
+  label = "Upload file",
+  error = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    Button,
+    {
+      variant: "outlined",
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_CloudUpload.default, {}),
+      color: error ? "error" : "primary",
+      ...getRootProps(),
+      children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { ...getInputProps() })
+      ]
+    }
+  );
+};
+var DropZoneButton_default = DropZoneButton;
+
+// src/components/compound/FileUploader/src/ReactDropzone.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ReactDropzone = ({
+  filesProps,
+  accept,
+  maxFiles = 0,
+  // 0 means unlimited
+  error = false,
+  dropzoneType = "box",
+  label = "Upload File"
+}) => {
+  const [files, setFiles] = filesProps;
+  const blobRegistryRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const onDrop = (0, import_react2.useCallback)((acceptedFiles) => {
+    const newFiles = acceptedFiles.map((file) => {
+      const blobUrl = URL.createObjectURL(file);
+      blobRegistryRef.current.add(blobUrl);
+      return new PreviewableFile({
+        path: file.path,
+        blobUrl,
+        filename: file.name,
+        mimeType: file.type,
+        size: file.size,
+        displaySize: displayFileSize(file.size),
+        fileType: file.type.startsWith("image/") ? "image" : file.type.startsWith("application/json") ? "json" : "other"
+      });
+    });
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, [setFiles]);
+  const isLimitReached = maxFiles > 0 && files.length >= maxFiles;
+  const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
+    onDrop,
+    accept,
+    maxFiles: maxFiles > 0 ? maxFiles - files.length : void 0,
+    disabled: isLimitReached
+  });
+  const handleDelete = (fileToDelete) => {
+    setFiles((prev) => prev.filter((f) => f !== fileToDelete));
+    if (fileToDelete.blobUrl) {
+      URL.revokeObjectURL(fileToDelete.blobUrl);
+      blobRegistryRef.current.delete(fileToDelete.blobUrl);
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    const blobRegistry = blobRegistryRef.current;
+    return () => {
+      blobRegistry.forEach((url) => URL.revokeObjectURL(url));
+      blobRegistry.clear();
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box.default, { sx: mergeSx({ maxWidth: "100%" }, fileUploaderRootSx), children: [
+    !isLimitReached && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Box.default, { component: "section", children: dropzoneType === "box" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZoneBox_default, { getRootProps, getInputProps, error }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZoneButton_default, { getRootProps, getInputProps, label, error }) }),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Stack.default, { spacing: 1, sx: { mt: 0 }, children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DisplayFile_default,
+      {
+        file,
+        onDelete: handleDelete
+      },
+      file.blobUrl || file.filename || file.path
+    )) })
+  ] });
+};
+var ReactDropzone_default = ReactDropzone;
+
+// src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CropperFileSelector({ accept = "image/*", buttonLabel = "Select Image", onPick }) {
+  const [files, setFiles] = import_react3.default.useState([]);
+  import_react3.default.useEffect(() => {
+  }, [files]);
+  const lastForwardedRef = import_react3.default.useRef(null);
+  import_react3.default.useEffect(() => {
+    if (!files.length) {
+      if (lastForwardedRef.current) {
+        lastForwardedRef.current = null;
+        onPick?.(null);
+      }
+      return;
+    }
+    const pf = files[0];
+    if (!pf.blobUrl) return;
+    if (lastForwardedRef.current === pf.blobUrl) {
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(pf.blobUrl);
+        const blob = await res.blob();
+        const file = new File([blob], pf.filename || "file", { type: pf.mimeType || void 0 });
+        if (!cancelled) {
+          lastForwardedRef.current = pf.blobUrl;
+          onPick?.(file);
+        }
+      } catch {
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [files, onPick]);
+  const acceptProp = typeof accept === "string" ? { [accept]: [] } : accept;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { sx: { display: "flex", alignItems: "center", pt: 0, width: "100%", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ReactDropzone_default, { filesProps: [files, setFiles], accept: acceptProp, maxFiles: 1, dropzoneType: "button", label: buttonLabel }) });
+}
+
+// src/components/elemental/Image/src/Cropper/hooks/useCropperState.ts
+var import_react4 = __toESM(require("react"));
+var import_react_image_crop2 = require("react-image-crop");
+function toRad(degrees) {
+  return degrees * Math.PI / 180;
+}
+function defaultCrop() {
+  return {
+    unit: "%",
+    x: 10,
+    y: 10,
+    width: 80,
+    height: 80
+  };
+}
+function makeCenteredAspectCrop(mediaWidth, mediaHeight, aspect) {
+  return (0, import_react_image_crop2.centerCrop)(
+    (0, import_react_image_crop2.makeAspectCrop)(
+      {
+        unit: "%",
+        width: 90
+      },
+      aspect,
+      mediaWidth,
+      mediaHeight
+    ),
+    mediaWidth,
+    mediaHeight
+  );
+}
+function initialCrop(mediaWidth, mediaHeight, defaultRatio, cropConfig) {
+  if (defaultRatio) {
+    return makeCenteredAspectCrop(mediaWidth, mediaHeight, defaultRatio);
+  }
+  return { ...defaultCrop(), ...cropConfig };
+}
+function drawPreviewToCanvas(image, canvas, crop, scale, rotate, circularCrop) {
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  if (!crop.width || !crop.height) return;
+  const scaleX = image.naturalWidth / image.width;
+  const scaleY = image.naturalHeight / image.height;
+  const pixelRatio = window.devicePixelRatio || 1;
+  canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
+  canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
+  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+  context.imageSmoothingQuality = "high";
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  const cropX = crop.x * scaleX;
+  const cropY = crop.y * scaleY;
+  const rotateRads = toRad(rotate);
+  const centerX = image.naturalWidth / 2;
+  const centerY = image.naturalHeight / 2;
+  context.save();
+  if (circularCrop) {
+    const width = crop.width * scaleX;
+    const height = crop.height * scaleY;
+    const radius = Math.min(width, height) / 2;
+    context.beginPath();
+    context.arc(width / 2, height / 2, radius, 0, Math.PI * 2);
+    context.closePath();
+    context.clip();
+  }
+  context.translate(-cropX, -cropY);
+  context.translate(centerX, centerY);
+  context.rotate(rotateRads);
+  context.scale(scale, scale);
+  context.translate(-centerX, -centerY);
+  context.drawImage(
+    image,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight,
+    0,
+    0,
+    image.naturalWidth,
+    image.naturalHeight
+  );
+  context.restore();
+}
+function useCropperState({
+  blobUrl,
+  onSave,
+  setImgNull,
+  circularCrop,
+  defaultRatio,
+  cropConfig
+}) {
+  const imageRef = import_react4.default.useRef(null);
+  const canvasRef = import_react4.default.useRef(null);
+  const cropConfigRef = import_react4.default.useRef(cropConfig);
+  cropConfigRef.current = cropConfig;
+  const scaleRef = import_react4.default.useRef(1);
+  const rotateRef = import_react4.default.useRef(0);
+  const [activeBlobUrl, setActiveBlobUrl] = import_react4.default.useState(blobUrl);
+  const [crop, setCrop] = import_react4.default.useState({ ...defaultCrop(), ...cropConfig });
+  const [completedCrop, setCompletedCrop] = import_react4.default.useState();
+  const [scale, setScale] = import_react4.default.useState(1);
+  const [rotate, setRotate] = import_react4.default.useState(0);
+  scaleRef.current = scale;
+  rotateRef.current = rotate;
+  const applyCropFromImage = import_react4.default.useCallback((image) => {
+    const { width, height } = image;
+    if (!width || !height) return;
+    const nextCrop = initialCrop(width, height, defaultRatio, cropConfigRef.current);
+    const pixelCrop = (0, import_react_image_crop2.convertToPixelCrop)(nextCrop, width, height);
+    if (!pixelCrop.width || !pixelCrop.height) return;
+    setCrop(nextCrop);
+    setCompletedCrop(pixelCrop);
+    const canvas = canvasRef.current;
+    if (canvas) {
+      drawPreviewToCanvas(
+        image,
+        canvas,
+        pixelCrop,
+        scaleRef.current,
+        rotateRef.current,
+        circularCrop
+      );
+    }
+  }, [circularCrop, defaultRatio]);
+  import_react4.default.useEffect(() => {
+    setActiveBlobUrl(blobUrl);
+  }, [blobUrl]);
+  import_react4.default.useLayoutEffect(() => {
+    if (!activeBlobUrl) {
+      setCrop({ ...defaultCrop(), ...cropConfigRef.current });
+      setCompletedCrop(void 0);
+      setScale(1);
+      setRotate(0);
+      return;
+    }
+    setScale(1);
+    setRotate(0);
+    const tryApply = () => {
+      const image = imageRef.current;
+      if (image?.complete && image.width > 0 && image.height > 0) {
+        applyCropFromImage(image);
+        return true;
+      }
+      return false;
+    };
+    if (tryApply()) return;
+    const frame = requestAnimationFrame(() => {
+      tryApply();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [activeBlobUrl, applyCropFromImage]);
+  import_react4.default.useEffect(() => {
+    if (!completedCrop || !imageRef.current || !canvasRef.current) return;
+    drawPreviewToCanvas(
+      imageRef.current,
+      canvasRef.current,
+      completedCrop,
+      scale,
+      rotate,
+      circularCrop
+    );
+  }, [completedCrop, scale, rotate, circularCrop]);
+  const onImageLoad = (e) => {
+    applyCropFromImage(e.currentTarget);
+  };
+  const handleCompletedCrop = (nextCrop) => {
+    if (!nextCrop.width || !nextCrop.height) return;
+    setCompletedCrop(nextCrop);
+  };
+  const handleSave = async () => {
+    if (!completedCrop || !imageRef.current) return;
+    const previewCanvas = document.createElement("canvas");
+    drawPreviewToCanvas(
+      imageRef.current,
+      previewCanvas,
+      completedCrop,
+      scale,
+      rotate,
+      circularCrop
+    );
+    const blob = await new Promise((resolve) => {
+      previewCanvas.toBlob((nextBlob) => resolve(nextBlob), "image/png");
+    });
+    if (!blob) return;
+    const resultUrl = URL.createObjectURL(blob);
+    await onSave(resultUrl);
+  };
+  const handleClear = () => {
+    setActiveBlobUrl("");
+    setImgNull();
+    imageRef.current = null;
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = canvas.getContext("2d");
+      if (context) {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+    setCrop({ ...defaultCrop(), ...cropConfigRef.current });
+    setScale(1);
+    setRotate(0);
+    setCompletedCrop(void 0);
+  };
+  const handleResetTransforms = () => {
+    setScale(1);
+    setRotate(0);
+  };
+  return {
+    imageRef,
+    canvasRef,
+    activeBlobUrl,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop: handleCompletedCrop,
+    scale,
+    setScale,
+    rotate,
+    setRotate,
+    onImageLoad,
+    handleSave,
+    handleClear,
+    handleResetTransforms
+  };
+}
+
+// src/components/elemental/Image/src/Cropper/Cropper.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Cropper = ({
+  blobUrl,
+  onSave,
+  setImgNull,
+  onClear,
+  // optional parent callback when the image is removed
+  circularCrop = false,
+  defaultRatio,
+  resizeCropEnabled = true,
+  cropConfig,
+  PreviewRenderer,
+  footerExtra,
+  showFileSelector = false,
+  fileSelectorAccept = "image/*",
+  fileSelectorButtonLabel = "Select Image",
+  onFileSelect
+}) => {
+  const {
+    imageRef,
+    canvasRef,
+    activeBlobUrl,
+    crop,
+    setCrop,
+    completedCrop,
+    setCompletedCrop,
+    scale,
+    setScale,
+    rotate,
+    setRotate,
+    onImageLoad,
+    handleSave,
+    handleClear,
+    handleResetTransforms
+  } = useCropperState({
+    blobUrl,
+    onSave,
+    setImgNull,
+    circularCrop,
+    defaultRatio,
+    cropConfig
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    CropperLayout,
+    {
+      left: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        CropperSourceSection,
+        {
+          activeBlobUrl,
+          crop,
+          setCrop,
+          setCompletedCrop,
+          circularCrop,
+          defaultRatio,
+          resizeCropEnabled,
+          rotate,
+          scale,
+          imageRef,
+          onImageLoad
+        }
+      ),
+      right: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        CropperControlsSection,
+        {
+          PreviewRenderer,
+          canvasRef,
+          rotate,
+          setRotate,
+          scale,
+          setScale
+        }
+      ),
+      leftFooter: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+        footerExtra,
+        showFileSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          CropperFileSelector,
+          {
+            accept: fileSelectorAccept,
+            buttonLabel: fileSelectorButtonLabel,
+            onPick: (f) => onFileSelect?.(f)
+          }
+        )
+      ] }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        CropperActionSection,
+        {
+          onSave: handleSave,
+          onResetTransforms: handleResetTransforms,
+          onClear: () => {
+            handleClear();
+            onClear?.();
+          },
+          saveDisabled: !completedCrop || !activeBlobUrl
+        }
+      )
+    }
+  );
+};
+var Cropper_default = Cropper;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Cropper,
+  MuiImageList
+});
+//# sourceMappingURL=image.js.map