@hai-dev/ui-kit 1.2.0 → 1.2.2

package/dist/components/photo-crop-uploader/components/upload-dialog/upload-dialog.js

@@ -1,460 +1,168 @@
-import { jsxs as S, jsx as r, Fragment as Z } from "react/jsx-runtime";
-import * as O from "react";
-import { useState as q, useCallback as G } from "react";
-import { useScaledMinDimension as J } from "./use-scaled-min-dimension.js";
-import { S as Q } from "../../../../index-CcueJ2sD.js";
-import { c as i } from "../../../../index-YnD2EP-S.js";
-import { s as n, U as X } from "../../../../upload-dialog-errors-CCRxzIZp.js";
-import { PhotoList as oo } from "../photo-list/photo-list.js";
-import { localizedText as g } from "../../locale.js";
-import { EN_LOCALE as eo, DARK_THEME as to } from "../../../../constants.js";
-import { DEFAULT_MIN_DIMENSION as ao, DEFAULT_ASPECT_RATIO as ro } from "../../constants.js";
-import '../../../../assets/inter.css';import '../../../../assets/upload-dialog.css';/* empty css                               */
-import { D as k } from "../../../../Dialog-BK9lMUKV.js";
-import { a as A, b as D, D as no } from "../../../../DialogTitle-ByUfLB5M.js";
-import { CircularProgressLoader as io } from "../../../circular-progress-loader/circular-progress-loader.js";
-import { g as so, a as lo, c as co, b as f, P as t } from "../../../../createTheme-BoOmbNvy.js";
-import { m as M } from "../../../../memoTheme-BYBJ2Fe6.js";
-import { c as U } from "../../../../createSimplePaletteValueFilter-B7--0ryQ.js";
-import { u as po, c as go, s as j, b as uo } from "../../../../chainPropTypes-DgqFdXGi.js";
-import { u as mo } from "../../../../useId-CK6Kn3Tn.js";
-import { B as fo } from "../../../../ButtonBase-C4krg_zd.js";
-import { C as bo } from "../../../../CircularProgress-BoaEg4rF.js";
-import { Button as P } from "../../../button/button.js";
-function ho(o) {
-  return so("MuiIconButton", o);
-}
-const W = lo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), Co = (o) => {
+import { jsx as t, jsxs as d, Fragment as V } from "react/jsx-runtime";
+import { useState as y, useCallback as H } from "react";
+import { useScaledMinDimension as O } from "./use-scaled-min-dimension.js";
+import { Dialog as u, DialogContent as L, DialogActions as C, IconButton as j, DialogTitle as K } from "@mui/material";
+import Z from "react-image-crop";
+import e from "classnames";
+import { s as o, U as q } from "../../../../upload-dialog-errors-B7V0G-Ey.js";
+import { PhotoList as G } from "../photo-list/photo-list.js";
+import { localizedText as n } from "../../locale.js";
+import { EN_LOCALE as J, DARK_THEME as Q } from "../../../../constants.js";
+import { DEFAULT_MIN_DIMENSION as X, DEFAULT_ASPECT_RATIO as Y } from "../../constants.js";
+import { CircularProgressLoader as $ } from "../../../circular-progress-loader/circular-progress-loader.js";
+import { Button as b } from "../../../button/button.js";
+import '../../../../assets/upload-dialog.css';const oo = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.27623%200.391122C1.75553%20-0.129577%200.911316%20-0.129578%200.390616%200.391122C-0.130083%200.911821%20-0.130083%201.75604%200.390616%202.27674L6.04747%207.93359L0.390616%2013.5904C-0.130083%2014.1111%20-0.130083%2014.9554%200.390616%2015.4761C0.911316%2015.9968%201.75553%2015.9968%202.27623%2015.4761L7.93309%209.81921L13.5899%2015.4761C14.1106%2015.9968%2014.9549%2015.9968%2015.4756%2015.4761C15.9963%2014.9554%2015.9963%2014.1111%2015.4756%2013.5904L9.81871%207.93359L15.4756%202.27674C15.9963%201.75604%2015.9963%200.911822%2015.4756%200.391122C14.9549%20-0.129577%2014.1106%20-0.129578%2013.5899%200.391123L7.93309%206.04798L2.27623%200.391122Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", uo = (D) => {
   const {
-    classes: e,
-    disabled: a,
-    color: l,
-    edge: u,
-    size: b,
-    loading: c
-  } = o, m = {
-    root: ["root", c && "loading", a && "disabled", l !== "default" && `color${f(l)}`, u && `edge${f(u)}`, `size${f(b)}`],
-    loadingIndicator: ["loadingIndicator"],
-    loadingWrapper: ["loadingWrapper"]
-  };
-  return go(m, ho, e);
-}, yo = j(fo, {
-  name: "MuiIconButton",
-  slot: "Root",
-  overridesResolver: (o, e) => {
-    const {
-      ownerState: a
-    } = o;
-    return [e.root, a.loading && e.loading, a.color !== "default" && e[`color${f(a.color)}`], a.edge && e[`edge${f(a.edge)}`], e[`size${f(a.size)}`]];
-  }
-})(M(({
-  theme: o
-}) => ({
-  textAlign: "center",
-  flex: "0 0 auto",
-  fontSize: o.typography.pxToRem(24),
-  padding: 8,
-  borderRadius: "50%",
-  color: (o.vars || o).palette.action.active,
-  transition: o.transitions.create("background-color", {
-    duration: o.transitions.duration.shortest
-  }),
-  variants: [{
-    props: (e) => !e.disableRipple,
-    style: {
-      "--IconButton-hoverBg": o.alpha((o.vars || o).palette.action.active, (o.vars || o).palette.action.hoverOpacity),
-      "&:hover": {
-        backgroundColor: "var(--IconButton-hoverBg)",
-        // Reset on touch devices, it doesn't add specificity
-        "@media (hover: none)": {
-          backgroundColor: "transparent"
-        }
-      }
-    }
-  }, {
-    props: {
-      edge: "start"
-    },
-    style: {
-      marginLeft: -12
-    }
-  }, {
-    props: {
-      edge: "start",
-      size: "small"
-    },
-    style: {
-      marginLeft: -3
-    }
-  }, {
-    props: {
-      edge: "end"
-    },
-    style: {
-      marginRight: -12
-    }
-  }, {
-    props: {
-      edge: "end",
-      size: "small"
-    },
-    style: {
-      marginRight: -3
-    }
-  }]
-})), M(({
-  theme: o
-}) => ({
-  variants: [{
-    props: {
-      color: "inherit"
-    },
-    style: {
-      color: "inherit"
-    }
-  }, ...Object.entries(o.palette).filter(U()).map(([e]) => ({
-    props: {
-      color: e
-    },
-    style: {
-      color: (o.vars || o).palette[e].main
-    }
-  })), ...Object.entries(o.palette).filter(U()).map(([e]) => ({
-    props: {
-      color: e
-    },
-    style: {
-      "--IconButton-hoverBg": o.alpha((o.vars || o).palette[e].main, (o.vars || o).palette.action.hoverOpacity)
-    }
-  })), {
-    props: {
-      size: "small"
-    },
-    style: {
-      padding: 5,
-      fontSize: o.typography.pxToRem(18)
-    }
-  }, {
-    props: {
-      size: "large"
-    },
-    style: {
-      padding: 12,
-      fontSize: o.typography.pxToRem(28)
-    }
-  }],
-  [`&.${W.disabled}`]: {
-    backgroundColor: "transparent",
-    color: (o.vars || o).palette.action.disabled
-  },
-  [`&.${W.loading}`]: {
-    color: "transparent"
-  }
-}))), vo = j("span", {
-  name: "MuiIconButton",
-  slot: "LoadingIndicator"
-})(({
-  theme: o
-}) => ({
-  display: "none",
-  position: "absolute",
-  visibility: "visible",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  color: (o.vars || o).palette.action.disabled,
-  variants: [{
-    props: {
-      loading: !0
-    },
-    style: {
-      display: "flex"
-    }
-  }]
-})), F = /* @__PURE__ */ O.forwardRef(function(e, a) {
-  const l = po({
-    props: e,
-    name: "MuiIconButton"
-  }), {
-    edge: u = !1,
-    children: b,
-    className: c,
-    color: m = "default",
-    disabled: y = !1,
-    disableFocusRipple: v = !1,
-    size: z = "medium",
-    id: I,
-    loading: d = null,
-    loadingIndicator: L,
-    ...s
-  } = l, N = mo(I), B = L ?? /* @__PURE__ */ r(bo, {
-    "aria-labelledby": N,
-    color: "inherit",
-    size: 16
-  }), h = {
-    ...l,
-    edge: u,
-    color: m,
-    disabled: y,
-    disableFocusRipple: v,
-    loading: d,
-    loadingIndicator: B,
-    size: z
-  }, p = Co(h);
-  return /* @__PURE__ */ S(yo, {
-    id: d ? N : I,
-    className: co(p.root, c),
-    centerRipple: !0,
-    focusRipple: !v,
-    disabled: y || d,
-    ref: a,
-    ...s,
-    ownerState: h,
-    children: [typeof d == "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ r("span", {
-      className: p.loadingWrapper,
-      style: {
-        display: "contents"
-      },
-      children: /* @__PURE__ */ r(vo, {
-        className: p.loadingIndicator,
-        ownerState: h,
-        children: d && B
-      })
-    }), b]
-  });
-});
-process.env.NODE_ENV !== "production" && (F.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The icon to display.
-   */
-  children: uo(t.node, (o) => O.Children.toArray(o.children).some((a) => /* @__PURE__ */ O.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
-`)) : null),
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: t.object,
-  /**
-   * @ignore
-   */
-  className: t.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'default'
-   */
-  color: t.oneOfType([t.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), t.string]),
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: t.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: t.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: t.bool,
-  /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   * @default false
-   */
-  edge: t.oneOf(["end", "start", !1]),
-  /**
-   * @ignore
-   */
-  id: t.string,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: t.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: t.node,
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size: t.oneOfType([t.oneOf(["small", "medium", "large"]), t.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
-});
-const Io = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.27623%200.391122C1.75553%20-0.129577%200.911316%20-0.129578%200.390616%200.391122C-0.130083%200.911821%20-0.130083%201.75604%200.390616%202.27674L6.04747%207.93359L0.390616%2013.5904C-0.130083%2014.1111%20-0.130083%2014.9554%200.390616%2015.4761C0.911316%2015.9968%201.75553%2015.9968%202.27623%2015.4761L7.93309%209.81921L13.5899%2015.4761C14.1106%2015.9968%2014.9549%2015.9968%2015.4756%2015.4761C15.9963%2014.9554%2015.9963%2014.1111%2015.4756%2013.5904L9.81871%207.93359L15.4756%202.27674C15.9963%201.75604%2015.9963%200.911822%2015.4756%200.391122C14.9549%20-0.129577%2014.1106%20-0.129578%2013.5899%200.391123L7.93309%206.04798L2.27623%200.391122Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", _o = (o) => {
-  const {
-    onCloseDialogHandler: e,
+    onCloseDialogHandler: r,
     photoSources: a = [],
-    photoCrops: l = [],
-    onCropChange: u = () => {
+    photoCrops: E = [],
+    onCropChange: k = () => {
     },
-    onPhotoLoad: b,
-    imageRef: c,
-    photoError: m,
-    onPhotoCrop: y,
-    onNextPhoto: v,
-    onSkipCrop: z,
-    onClearErrors: I,
-    minDimension: d = ao,
-    aspectRatio: L = ro,
-    locale: s = eo,
-    circular: N,
-    keepSelection: B = !0,
-    photoSourceLoading: h,
-    className: p,
-    photoIndex: C,
-    loadingValue: $,
-    errors: R,
-    theme: T = to,
-    ...x
-  } = o, E = a.slice(C).length > 1, [V, _] = q(null), H = G(
-    (w) => {
-      c && (c.current = w), _(w);
+    onPhotoLoad: x,
+    imageRef: s,
+    photoError: f,
+    onPhotoCrop: A,
+    onNextPhoto: S,
+    onSkipCrop: I,
+    onClearErrors: T,
+    minDimension: P = X,
+    aspectRatio: v = Y,
+    locale: l = J,
+    circular: w,
+    keepSelection: R = !0,
+    photoSourceLoading: _,
+    className: c,
+    photoIndex: i,
+    loadingValue: F,
+    errors: m,
+    theme: h = Q,
+    ...g
+  } = D, p = a.slice(i).length > 1, [M, U] = y(null), W = H(
+    (N) => {
+      s && (s.current = N), U(N);
     },
-    [c]
-  ), { minWidth: K, minHeight: Y } = J(V, d);
-  return h || !a.length && !R?.length ? /* @__PURE__ */ r(
-    k,
+    [s]
+  ), { minWidth: z, minHeight: B } = O(M, P);
+  return _ || !a.length && !m?.length ? /* @__PURE__ */ t(
+    u,
     {
-      className: i(n.dialog, p, n[T]),
-      onClose: e,
-      ...x,
-      children: /* @__PURE__ */ r(A, { className: i(n.content), children: /* @__PURE__ */ r(io, { value: $ }) })
+      className: e(o.dialog, c, o[h]),
+      onClose: r,
+      ...g,
+      children: /* @__PURE__ */ t(L, { className: e(o.content), children: /* @__PURE__ */ t($, { value: F }) })
     }
-  ) : R?.length ? /* @__PURE__ */ r(
-    k,
+  ) : m?.length ? /* @__PURE__ */ t(
+    u,
     {
-      className: i(n.dialog, p, n[T]),
-      onClose: e,
-      ...x,
-      children: /* @__PURE__ */ r(
-        X,
+      className: e(o.dialog, c, o[h]),
+      onClose: r,
+      ...g,
+      children: /* @__PURE__ */ t(
+        q,
         {
-          locale: s,
+          locale: l,
           photoSources: a,
-          errors: R,
-          onCloseDialogHandler: e,
-          onClearErrors: I
+          errors: m,
+          onCloseDialogHandler: r,
+          onClearErrors: T
         }
       )
     }
-  ) : /* @__PURE__ */ S(
-    k,
+  ) : /* @__PURE__ */ d(
+    u,
     {
-      className: i(n.dialog, p, n[T]),
-      onClose: e,
-      ...x,
+      className: e(o.dialog, c, o[h]),
+      onClose: r,
+      ...g,
       children: [
-        /* @__PURE__ */ r(D, { className: i(n.topActions), children: /* @__PURE__ */ r(
-          F,
+        /* @__PURE__ */ t(C, { className: e(o.topActions), children: /* @__PURE__ */ t(
+          j,
           {
-            onClick: e,
-            className: i(n.close),
-            "aria-label": g[s].back,
-            children: /* @__PURE__ */ r(
+            onClick: r,
+            className: e(o.close),
+            "aria-label": n[l].back,
+            children: /* @__PURE__ */ t(
               "img",
               {
                 draggable: !1,
-                src: Io,
-                alt: g[s].back
+                src: oo,
+                alt: n[l].back
               }
             )
           }
         ) }),
-        /* @__PURE__ */ r(no, { className: i(n.title), children: g[s]["photo-crop"] }),
-        /* @__PURE__ */ S(A, { className: i(n.content, E && n.many), children: [
-          !!a.length && /* @__PURE__ */ r(
-            Q,
+        /* @__PURE__ */ t(K, { className: e(o.title), children: n[l]["photo-crop"] }),
+        /* @__PURE__ */ d(L, { className: e(o.content, p && o.many), children: [
+          !!a.length && /* @__PURE__ */ t(
+            Z,
             {
-              className: i(n.crop),
-              crop: l[C],
-              circularCrop: N,
-              keepSelection: B,
-              aspect: L,
-              minWidth: K,
-              minHeight: Y,
-              onChange: u,
-              children: /* @__PURE__ */ r(
+              className: e(o.crop),
+              crop: E[i],
+              circularCrop: w,
+              keepSelection: R,
+              aspect: v,
+              minWidth: z,
+              minHeight: B,
+              onChange: k,
+              children: /* @__PURE__ */ t(
                 "img",
                 {
-                  onLoad: b,
-                  src: a[C],
-                  ref: H,
-                  alt: g[s]["photo-crop"],
+                  onLoad: x,
+                  src: a[i],
+                  ref: W,
+                  alt: n[l]["photo-crop"],
                   draggable: !1
                 },
-                C
+                i
               )
             }
           ),
-          E && /* @__PURE__ */ r(
-            oo,
+          p && /* @__PURE__ */ t(
+            G,
             {
-              locale: s,
+              locale: l,
               photoSources: a,
-              photoIndex: C
+              photoIndex: i
             }
           )
         ] }),
-        m && /* @__PURE__ */ r(D, { className: i(n.dialogText), children: m }),
-        /* @__PURE__ */ r(D, { className: i(n.botActions), children: E ? /* @__PURE__ */ S(Z, { children: [
-          /* @__PURE__ */ r(
-            P,
+        f && /* @__PURE__ */ t(C, { className: e(o.dialogText), children: f }),
+        /* @__PURE__ */ t(C, { className: e(o.botActions), children: p ? /* @__PURE__ */ d(V, { children: [
+          /* @__PURE__ */ t(
+            b,
             {
               buttonSize: "small",
               buttonColor: "red",
               buttonVariant: "outlined",
               buttonWeight: 500,
-              className: i(n.button),
-              onClick: z,
-              children: g[s].skip
+              className: e(o.button),
+              onClick: I,
+              children: n[l].skip
             }
           ),
-          /* @__PURE__ */ r(
-            P,
+          /* @__PURE__ */ t(
+            b,
             {
               buttonSize: "small",
               buttonColor: "blue",
               buttonVariant: "outlined",
               buttonWeight: 500,
-              className: i(n.button),
-              onClick: v,
-              children: g[s].continue
+              className: e(o.button),
+              onClick: S,
+              children: n[l].continue
             }
           )
-        ] }) : /* @__PURE__ */ r(
-          P,
+        ] }) : /* @__PURE__ */ t(
+          b,
           {
             minWidth: "100%",
             buttonSize: "small",
             buttonColor: "blue",
             buttonVariant: "outlined",
             buttonWeight: 500,
-            className: i(n.button),
-            onClick: y,
-            children: g[s].crop
+            className: e(o.button),
+            onClick: A,
+            children: n[l].crop
           }
         ) })
       ]
@@ -462,5 +170,5 @@ const Io = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%20
   );
 };
 export {
-  _o as UploadDialog
+  uo as UploadDialog
 };

package/dist/components/photo-crop-uploader/photo-crop-uploader.js

@@ -1,7 +1,7 @@
 import { jsxs as Ho, Fragment as Vo, jsx as A } from "react/jsx-runtime";
 import { useState as i, useRef as U } from "react";
-import { v as bo, D as ko } from "../../index-CcueJ2sD.js";
-import { c as zo } from "../../index-YnD2EP-S.js";
+import { convertToPercentCrop as bo, convertToPixelCrop as ko } from "react-image-crop";
+import zo from "classnames";
 import { localizedText as jo } from "./locale.js";
 import { EN_LOCALE as Wo, DARK_THEME as Bo } from "../../constants.js";
 import { DEFAULT_MIN_DIMENSION as Go, DEFAULT_ASPECT_RATIO as Xo, DEFAULT_TIMEOUT as Yo, DEFAULT_FILE_MAX_SIZE as Zo, DEFAULT_VIDEO_FILE_MAX_SIZE as Ko, DEFAULT_BASE_DIMENSION as qo, FULL_PROGRESS_VALUE as oo, PHOTO_LOADING_DELAY as Jo, RESET_DATA_DELAY as d } from "./constants.js";
@@ -61,7 +61,7 @@ function Te(a) {
     onEndCrop: se,
     onClose: ae,
     ..._o
-  } = Lo, [To, g] = i(!1), [P, D] = i([]), [I, x] = i([]), f = U([]), h = U([]), [p, W] = i(0), B = U(null), G = U(null), [c, O] = i(!1), [Ao, X] = i(0), [Y, Z] = i(""), [Uo, S] = i([]), [wo, K] = i(!1), vo = To || c && E, Io = () => {
+  } = Lo, [To, g] = i(!1), [P, D] = i([]), [x, I] = i([]), f = U([]), h = U([]), [p, W] = i(0), B = U(null), G = U(null), [c, O] = i(!1), [Ao, X] = i(0), [Y, Z] = i(""), [Uo, S] = i([]), [wo, K] = i(!1), vo = To || c && E, xo = () => {
     S([]);
   }, F = (e = []) => {
     c || (a.returnCropParams === !0 && a.onClose?.(
@@ -81,10 +81,10 @@ function Te(a) {
     }, d));
   }, q = () => {
     c || (a.returnCropParams === !0 ? F([]) : R([]));
-  }, xo = () => {
+  }, Io = () => {
     K(!1);
   }, L = (e, t = e, o = [], r = !1) => {
-    lo(e), Z(""), D(e), x(Array(e.length)), W(0), g(!0), f.current = t, h.current = o, !e.length && !r && q();
+    lo(e), Z(""), D(e), I(Array(e.length)), W(0), g(!0), f.current = t, h.current = o, !e.length && !r && q();
   }, M = (e) => {
     e instanceof Error && (console.warn(e.message), co(e), Z(e.message), K(!0), D([]), g(!1), f.current = [], h.current = []);
   }, Oo = async (e) => {
@@ -164,20 +164,20 @@ function Te(a) {
       !1,
       So
     );
-    x((_) => {
+    I((_) => {
       const u = [..._];
       return u[p] = r, u;
     });
   }, Ro = (e, t) => {
-    x((o) => {
+    I((o) => {
       const r = [...o];
       return r[p] = t, r;
     });
   }, J = () => {
     const e = G.current, t = B.current;
-    if (e && t && I)
+    if (e && t && x)
       try {
-        const o = I[p];
+        const o = x[p];
         if (!o) return !1;
         if (po(), a.returnCropParams === !0) {
           if (b) {
@@ -279,11 +279,11 @@ function Te(a) {
         photoSourceLoading: c,
         loadingValue: Ao,
         errors: Uo,
-        photoCrops: I,
+        photoCrops: x,
         photoSources: P,
         onNextPhoto: Mo,
         onSkipCrop: yo,
-        onClearErrors: Io,
+        onClearErrors: xo,
         photoError: Y,
         onCloseDialogHandler: q,
         onCropChange: Ro,
@@ -305,7 +305,7 @@ function Te(a) {
         className: z,
         open: mo && wo,
         photoError: Y,
-        onCloseErrorDialog: xo,
+        onCloseErrorDialog: Io,
         locale: n,
         theme: j
       }