@hai-dev/ui-kit 1.1.11 → 1.1.12

package/dist/assets/error-upload-dialog.css

@@ -1 +1 @@
-._dialog_lyvu5_1 ._dialogErrorText_lyvu5_1{color:#e2402fe0}
+._dialog_6kik7_1._dark_6kik7_1 .MuiPaper-root{background-color:#191b28;color:#fff}._dialog_6kik7_1._dark_6kik7_1 .MuiPaper-root ._dialogErrorText_6kik7_5::-webkit-scrollbar{height:8px;width:8px}._dialog_6kik7_1._dark_6kik7_1 .MuiPaper-root ._dialogErrorText_6kik7_5::-webkit-scrollbar-track{background:#070e1d;border-radius:16px}._dialog_6kik7_1._dark_6kik7_1 .MuiPaper-root ._dialogErrorText_6kik7_5::-webkit-scrollbar-thumb{background-color:#ffffff24;border-radius:16px}._dialog_6kik7_1 ._dialogErrorText_6kik7_5::-webkit-scrollbar{height:8px;width:8px}._dialog_6kik7_1 ._dialogErrorText_6kik7_5::-webkit-scrollbar-track{background:#f2f3f5;border-radius:16px}._dialog_6kik7_1 ._dialogErrorText_6kik7_5::-webkit-scrollbar-thumb{background-color:#e6e6e6;border-radius:16px}._dialog_6kik7_1 ._dialogErrorText_6kik7_5{color:#e2402fe0}

package/dist/assets/upload-dialog-errors.css

@@ -1 +1 @@
-._dialog_1h5av_1 .MuiPaper-root{border-radius:24px;padding:48px;min-width:840px;max-width:100%}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7::-webkit-scrollbar{height:8px;width:8px}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7::-webkit-scrollbar-track{background:#f2f3f5;border-radius:16px}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7::-webkit-scrollbar-thumb{background-color:#e6e6e6;border-radius:16px}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7{margin:32px 0 24px}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7 ._errorItem_1h5av_22{font-size:22px;letter-spacing:0%;line-height:150%;font-weight:500;color:#e2402fe0}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7 ._errorItem_1h5av_22 ._fileName_1h5av_29{font-weight:700}._dialog_1h5av_1 .MuiPaper-root ._errorContent_1h5av_7 *+*{margin-top:16px}._dialog_1h5av_1 .MuiPaper-root ._topActions_1h5av_35{position:absolute;right:0;top:0;padding:32px}._dialog_1h5av_1 .MuiPaper-root ._topActions_1h5av_35 ._close_1h5av_41{width:40px;height:40px}._dialog_1h5av_1 .MuiPaper-root ._botActions_1h5av_45{padding:0;display:flex;justify-content:space-between}._dialog_1h5av_1 .MuiPaper-root ._botActions_1h5av_45 ._button_1h5av_50{width:100%;text-transform:none}._dialog_1h5av_1 .MuiPaper-root ._title_1h5av_54{padding:0;font-weight:600;font-size:32px;line-height:100%}._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60{margin:32px 0 24px;padding-bottom:0;display:flex;align-items:center;justify-content:center;overflow:visible}._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60._many_1h5av_68{justify-content:space-between}._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60 ._photoList_1h5av_71{display:flex;flex-direction:column}._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60 ._crop_1h5av_75{max-height:670px}._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60 ._crop_1h5av_75 .ReactCrop__child-wrapper,._dialog_1h5av_1 .MuiPaper-root ._content_1h5av_60 ._crop_1h5av_75 .ReactCrop__crop-mask{border-radius:12px}._dialog_1h5av_1 .MuiPaper-root ._dialogText_1h5av_84{color:#e2402fe0}
+._dialog_n5vpn_1._dark_n5vpn_1 .MuiPaper-root{background-color:#191b28;color:#fff}._dialog_n5vpn_1._dark_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar{height:8px;width:8px}._dialog_n5vpn_1._dark_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar-track{background:#070e1d;border-radius:16px}._dialog_n5vpn_1._dark_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar-thumb{background-color:#ffffff24;border-radius:16px}._dialog_n5vpn_1 .MuiPaper-root{border-radius:24px;padding:48px;min-width:840px;max-width:100%}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar{height:8px;width:8px}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar-track{background:#f2f3f5;border-radius:16px}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5::-webkit-scrollbar-thumb{background-color:#e6e6e6;border-radius:16px}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5{margin:32px 0 24px}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5 ._errorItem_n5vpn_38{font-size:22px;letter-spacing:0%;line-height:150%;font-weight:500;color:#e2402fe0}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5 ._errorItem_n5vpn_38 ._fileName_n5vpn_45{font-weight:700}._dialog_n5vpn_1 .MuiPaper-root ._errorContent_n5vpn_5 *+*{margin-top:16px}._dialog_n5vpn_1 .MuiPaper-root ._topActions_n5vpn_51{position:absolute;right:0;top:0;padding:32px}._dialog_n5vpn_1 .MuiPaper-root ._topActions_n5vpn_51 ._close_n5vpn_57{width:40px;height:40px}._dialog_n5vpn_1 .MuiPaper-root ._botActions_n5vpn_61{padding:0;display:flex;justify-content:space-between}._dialog_n5vpn_1 .MuiPaper-root ._botActions_n5vpn_61 ._button_n5vpn_66{width:100%;text-transform:none}._dialog_n5vpn_1 .MuiPaper-root ._title_n5vpn_70{padding:0;font-weight:600;font-size:32px;line-height:100%}._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76{margin:32px 0 24px;padding-bottom:0;display:flex;align-items:center;justify-content:center;overflow:visible}._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76._many_n5vpn_84{justify-content:space-between}._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76 ._photoList_n5vpn_87{display:flex;flex-direction:column}._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76 ._crop_n5vpn_91{max-height:670px}._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76 ._crop_n5vpn_91 .ReactCrop__child-wrapper,._dialog_n5vpn_1 .MuiPaper-root ._content_n5vpn_76 ._crop_n5vpn_91 .ReactCrop__crop-mask{border-radius:12px}._dialog_n5vpn_1 .MuiPaper-root ._dialogText_n5vpn_100{color:#e2402fe0}

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

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { c as p } from "../../../../index-YnD2EP-S.js";
+import { c as d } from "../../../../index-YnD2EP-S.js";
 import { localizedText as m } from "../../locale.js";
-import { EN_LOCALE as u } from "../../../../constants.js";
+import { EN_LOCALE as T, DARK_THEME as u } from "../../../../constants.js";
 import { D as x } from "../../../../Dialog-Cf0d7zi7.js";
-import { D as T, a as C, b as D } from "../../../../DialogTitle-BtvmXSZP.js";
-import * as y from "react";
-import { g as h, a as E, c as N, P as o } from "../../../../createTheme-D8R2Cz2N.js";
-import { u as _, c as b, s as P, r as j } from "../../../../chainPropTypes-DiJb1lGa.js";
-import { T as v } from "../../../../Typography-Bjd6ZHeX.js";
-import { B as w } from "../../../../Button-BN3fv8kr.js";
+import { D as C, a as D, b as y } from "../../../../DialogTitle-BtvmXSZP.js";
+import * as h from "react";
+import { g as E, a as _, c as k, P as o } from "../../../../createTheme-D8R2Cz2N.js";
+import { u as N, c as b, s as P, r as j } from "../../../../chainPropTypes-DiJb1lGa.js";
+import { T as w } from "../../../../Typography-Bjd6ZHeX.js";
+import { B as M } from "../../../../Button-BN3fv8kr.js";
 import '../../../../assets/error-upload-dialog.css';function O(t) {
-  return h("MuiDialogContentText", t);
+  return E("MuiDialogContentText", t);
 }
-E("MuiDialogContentText", ["root"]);
-const U = (t) => {
+_("MuiDialogContentText", ["root"]);
+const R = (t) => {
   const {
     classes: r
   } = t, s = b({
@@ -24,28 +24,28 @@ const U = (t) => {
     // forward classes to the Typography
     ...s
   };
-}, M = P(v, {
+}, U = P(w, {
   shouldForwardProp: (t) => j(t) || t === "classes",
   name: "MuiDialogContentText",
   slot: "Root"
-})({}), g = /* @__PURE__ */ y.forwardRef(function(r, a) {
-  const s = _({
+})({}), g = /* @__PURE__ */ h.forwardRef(function(r, a) {
+  const s = N({
     props: r,
     name: "MuiDialogContentText"
   }), {
-    children: n,
-    className: l,
-    ...i
-  } = s, c = U(i);
-  return /* @__PURE__ */ e(M, {
+    children: c,
+    className: n,
+    ...l
+  } = s, p = R(l);
+  return /* @__PURE__ */ e(U, {
     component: "p",
     variant: "body1",
     color: "textSecondary",
     ref: a,
-    ownerState: i,
-    className: N(c.root, l),
+    ownerState: l,
+    className: k(p.root, n),
     ...s,
-    classes: c
+    classes: p
   });
 });
 process.env.NODE_ENV !== "production" && (g.propTypes = {
@@ -70,31 +70,33 @@ process.env.NODE_ENV !== "production" && (g.propTypes = {
    */
   sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object])
 });
-const R = "_dialog_lyvu5_1", S = "_dialogErrorText_lyvu5_1", d = {
-  dialog: R,
-  dialogErrorText: S
-}, I = (t) => {
+const S = "_dialog_6kik7_1", v = "_dark_6kik7_1", A = "_dialogErrorText_6kik7_5", i = {
+  dialog: S,
+  dark: v,
+  dialogErrorText: A
+}, J = (t) => {
   const {
     photoError: r,
     onCloseErrorDialog: a,
-    locale: s = u,
+    locale: s = T,
+    theme: c = u,
     className: n,
     ...l
   } = t;
   return /* @__PURE__ */ f(
     x,
     {
-      className: p(d.dialog, n),
+      className: d(i.dialog, n, i[c]),
       onClose: a,
       ...l,
       children: [
-        /* @__PURE__ */ e(T, { children: m[s].error }),
-        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(g, { className: p(d.dialogErrorText), children: r }) }),
-        /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(w, { onClick: a, children: m[s].back }) })
+        /* @__PURE__ */ e(C, { children: m[s].error }),
+        /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(g, { className: d(i.dialogErrorText), children: r }) }),
+        /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(M, { onClick: a, children: m[s].back }) })
       ]
     }
   );
 };
 export {
-  I as ErrorUploadDialog
+  J as ErrorUploadDialog
 };

package/dist/components/photo-crop-uploader/components/error-upload-dialog/types.d.ts

@@ -1,9 +1,10 @@
 import { DialogProps } from '@mui/material';
-import { Locale } from '../../../../types';
+import { Locale, Theme } from '../../../../types';
 type ErrorUploadDialogCustomProps = {
     onCloseErrorDialog?: () => void;
     photoError?: string;
     locale?: Locale;
+    theme?: Theme;
 };
 export type ErrorUploadDialogProps = ErrorUploadDialogCustomProps & DialogProps;
 export {};

package/dist/components/photo-crop-uploader/components/upload-dialog/types.d.ts

@@ -1,7 +1,7 @@
 import { SyntheticEvent } from 'react';
 import { DialogProps } from '@mui/material';
 import { Crop, PercentCrop, PixelCrop } from 'react-image-crop';
-import { Locale } from '../../../../types';
+import { Locale, Theme } from '../../../../types';
 import { FileErrorItem, PhotoDataUrl } from '../../types';
 type OnPhotoLoad = (event: SyntheticEvent<HTMLImageElement, Event>) => void;
 type OnCropChange = (pixelCrop: PixelCrop, percentCrop: PercentCrop) => void;
@@ -29,6 +29,7 @@ type UploadDialogCustomProps = {
     photoSourceLoading: boolean;
     loadingValue?: number;
     errors?: FileErrorItem[];
+    theme?: Theme;
 };
 export type UploadDialogProps = UploadDialogCustomProps & DialogProps;
 export type UploadDialogErrorsProps = {

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

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../../../index-YnD2EP-S.js";
 import "../../locale.js";
 import "../../../../constants.js";
-import { U as s } from "../../../../upload-dialog-errors-Cyz6_7n4.js";
+import { U as s } from "../../../../upload-dialog-errors-DHl0bh1n.js";
 import "../../../../DialogTitle-BtvmXSZP.js";
 import "../../../button/button.js";
 export {

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

@@ -1,28 +1,28 @@
-import { jsxs as L, jsx as a, Fragment as _ } from "react/jsx-runtime";
-import * as k from "react";
-import { S as $ } from "../../../../index-CcueJ2sD.js";
+import { jsxs as L, jsx as a, Fragment as $ } from "react/jsx-runtime";
+import * as w from "react";
+import { S as V } from "../../../../index-CcueJ2sD.js";
 import { c as i } from "../../../../index-YnD2EP-S.js";
-import { s as n, U as V } from "../../../../upload-dialog-errors-Cyz6_7n4.js";
-import { PhotoList as H } from "../photo-list/photo-list.js";
+import { s as n, U as H } from "../../../../upload-dialog-errors-DHl0bh1n.js";
+import { PhotoList as Z } from "../photo-list/photo-list.js";
 import { localizedText as p } from "../../locale.js";
-import { EN_LOCALE as Z } from "../../../../constants.js";
-import { CLOSE_ICON_SIZE as w } from "./constants.js";
-import { DEFAULT_MIN_DIMENSION as Y, DEFAULT_ASPECT_RATIO as q } from "../../constants.js";
+import { EN_LOCALE as K, DARK_THEME as Y } from "../../../../constants.js";
+import { CLOSE_ICON_SIZE as D } from "./constants.js";
+import { DEFAULT_MIN_DIMENSION as q, DEFAULT_ASPECT_RATIO as G } from "../../constants.js";
 import { D as O } from "../../../../Dialog-Cf0d7zi7.js";
-import { a as D, b as E, D as G } from "../../../../DialogTitle-BtvmXSZP.js";
-import { CircularProgressLoader as J } from "../../../circular-progress-loader/circular-progress-loader.js";
-import { g as K, a as Q, c as X, b as m, P as t } from "../../../../createTheme-D8R2Cz2N.js";
-import { m as A } from "../../../../memoTheme-D5VCpQCz.js";
-import { c as M } from "../../../../createSimplePaletteValueFilter-B7--0ryQ.js";
-import { u as oo, c as eo, s as W, b as to } from "../../../../chainPropTypes-DiJb1lGa.js";
-import { u as ao } from "../../../../useId-CK6Kn3Tn.js";
-import { B as ro } from "../../../../ButtonBase-CSWuFxUv.js";
-import { C as no } from "../../../../CircularProgress-sPARyPfh.js";
-import { Button as P } from "../../../button/button.js";
-import '../../../../assets/upload-dialog.css';function io(o) {
-  return K("MuiIconButton", o);
+import { a as A, b as P, D as J } from "../../../../DialogTitle-BtvmXSZP.js";
+import { CircularProgressLoader as Q } from "../../../circular-progress-loader/circular-progress-loader.js";
+import { g as X, a as oo, c as eo, b as m, P as t } from "../../../../createTheme-D8R2Cz2N.js";
+import { m as M } from "../../../../memoTheme-D5VCpQCz.js";
+import { c as U } from "../../../../createSimplePaletteValueFilter-B7--0ryQ.js";
+import { u as to, c as ao, s as _, b as ro } from "../../../../chainPropTypes-DiJb1lGa.js";
+import { u as no } from "../../../../useId-CK6Kn3Tn.js";
+import { B as io } from "../../../../ButtonBase-CSWuFxUv.js";
+import { C as lo } from "../../../../CircularProgress-sPARyPfh.js";
+import { Button as k } from "../../../button/button.js";
+import '../../../../assets/upload-dialog.css';function so(o) {
+  return X("MuiIconButton", o);
 }
-const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), lo = (o) => {
+const W = oo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), co = (o) => {
   const {
     classes: e,
     disabled: r,
@@ -35,8 +35,8 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
-  return eo(u, io, e);
-}, so = W(ro, {
+  return ao(u, so, e);
+}, po = _(io, {
   name: "MuiIconButton",
   slot: "Root",
   overridesResolver: (o, e) => {
@@ -45,7 +45,7 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     } = o;
     return [e.root, r.loading && e.loading, r.color !== "default" && e[`color${m(r.color)}`], r.edge && e[`edge${m(r.edge)}`], e[`size${m(r.size)}`]];
   }
-})(A(({
+})(M(({
   theme: o
 }) => ({
   textAlign: "center",
@@ -100,7 +100,7 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
       marginRight: -3
     }
   }]
-})), A(({
+})), M(({
   theme: o
 }) => ({
   variants: [{
@@ -110,14 +110,14 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     style: {
       color: "inherit"
     }
-  }, ...Object.entries(o.palette).filter(M()).map(([e]) => ({
+  }, ...Object.entries(o.palette).filter(U()).map(([e]) => ({
     props: {
       color: e
     },
     style: {
       color: (o.vars || o).palette[e].main
     }
-  })), ...Object.entries(o.palette).filter(M()).map(([e]) => ({
+  })), ...Object.entries(o.palette).filter(U()).map(([e]) => ({
     props: {
       color: e
     },
@@ -141,14 +141,14 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
       fontSize: o.typography.pxToRem(28)
     }
   }],
-  [`&.${U.disabled}`]: {
+  [`&.${W.disabled}`]: {
     backgroundColor: "transparent",
     color: (o.vars || o).palette.action.disabled
   },
-  [`&.${U.loading}`]: {
+  [`&.${W.loading}`]: {
     color: "transparent"
   }
-}))), co = W("span", {
+}))), go = _("span", {
   name: "MuiIconButton",
   slot: "LoadingIndicator"
 })(({
@@ -169,8 +169,8 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
       display: "flex"
     }
   }]
-})), j = /* @__PURE__ */ k.forwardRef(function(e, r) {
-  const c = oo({
+})), j = /* @__PURE__ */ w.forwardRef(function(e, r) {
+  const c = to({
     props: e,
     name: "MuiIconButton"
   }), {
@@ -185,7 +185,7 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     loading: s = null,
     loadingIndicator: R,
     ...l
-  } = c, N = ao(v), B = R ?? /* @__PURE__ */ a(no, {
+  } = c, N = no(v), B = R ?? /* @__PURE__ */ a(lo, {
     "aria-labelledby": N,
     color: "inherit",
     size: 16
@@ -198,10 +198,10 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
     loading: s,
     loadingIndicator: B,
     size: z
-  }, d = lo(h);
-  return /* @__PURE__ */ L(so, {
+  }, d = co(h);
+  return /* @__PURE__ */ L(po, {
     id: s ? N : v,
-    className: X(d.root, b),
+    className: eo(d.root, b),
     centerRipple: !0,
     focusRipple: !I,
     disabled: y || s,
@@ -214,7 +214,7 @@ const U = Q("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary"
       style: {
         display: "contents"
       },
-      children: /* @__PURE__ */ a(co, {
+      children: /* @__PURE__ */ a(go, {
         className: d.loadingIndicator,
         ownerState: h,
         children: s && B
@@ -230,7 +230,7 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
   /**
    * The icon to display.
    */
-  children: to(t.node, (o) => k.Children.toArray(o.children).some((r) => /* @__PURE__ */ k.isValidElement(r) && r.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(`
+  children: ro(t.node, (o) => w.Children.toArray(o.children).some((r) => /* @__PURE__ */ w.isValidElement(r) && r.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.
@@ -301,7 +301,7 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.3434%2015.4595C16.8227%2014.9388%2015.9785%2014.9388%2015.4578%2015.4595C14.9371%2015.9802%2014.9371%2016.8244%2015.4578%2017.3451L21.1146%2023.002L15.4578%2028.6588C14.9371%2029.1795%2014.9371%2030.0237%2015.4578%2030.5444C15.9785%2031.0651%2016.8227%2031.0651%2017.3434%2030.5444L23.0002%2024.8876L28.6571%2030.5444C29.1778%2031.0651%2030.022%2031.0651%2030.5427%2030.5444C31.0634%2030.0237%2031.0634%2029.1795%2030.5427%2028.6588L24.8858%2023.002L30.5427%2017.3451C31.0634%2016.8244%2031.0634%2015.9802%2030.5427%2015.4595C30.022%2014.9388%2029.1778%2014.9388%2028.6571%2015.4595L23.0002%2021.1163L17.3434%2015.4595Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", Po = (o) => {
+const uo = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.3434%2015.4595C16.8227%2014.9388%2015.9785%2014.9388%2015.4578%2015.4595C14.9371%2015.9802%2014.9371%2016.8244%2015.4578%2017.3451L21.1146%2023.002L15.4578%2028.6588C14.9371%2029.1795%2014.9371%2030.0237%2015.4578%2030.5444C15.9785%2031.0651%2016.8227%2031.0651%2017.3434%2030.5444L23.0002%2024.8876L28.6571%2030.5444C29.1778%2031.0651%2030.022%2031.0651%2030.5427%2030.5444C31.0634%2030.0237%2031.0634%2029.1795%2030.5427%2028.6588L24.8858%2023.002L30.5427%2017.3451C31.0634%2016.8244%2031.0634%2015.9802%2030.5427%2015.4595C30.022%2014.9388%2029.1778%2014.9388%2028.6571%2015.4595L23.0002%2021.1163L17.3434%2015.4595Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", wo = (o) => {
   const {
     onCloseDialogHandler: e,
     photoSources: r = [],
@@ -315,38 +315,39 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
     onNextPhoto: I,
     onSkipCrop: z,
     onClearErrors: v,
-    minDimension: s = Y,
-    aspectRatio: R = q,
-    locale: l = Z,
+    minDimension: s = q,
+    aspectRatio: R = G,
+    locale: l = K,
     circular: N,
     keepSelection: B = !0,
     photoSourceLoading: h,
     className: d,
     photoIndex: C,
     loadingValue: F,
-    errors: x,
-    ...T
+    errors: T,
+    theme: x = Y,
+    ...E
   } = o, S = r.slice(C).length > 1;
-  return h || !r.length && !x?.length ? /* @__PURE__ */ a(
+  return h || !r.length && !T?.length ? /* @__PURE__ */ a(
     O,
     {
-      className: i(n.dialog, d),
+      className: i(n.dialog, d, n[x]),
       onClose: e,
-      ...T,
-      children: /* @__PURE__ */ a(D, { className: i(n.content), children: /* @__PURE__ */ a(J, { value: F }) })
+      ...E,
+      children: /* @__PURE__ */ a(A, { className: i(n.content), children: /* @__PURE__ */ a(Q, { value: F }) })
     }
-  ) : x?.length ? /* @__PURE__ */ a(
+  ) : T?.length ? /* @__PURE__ */ a(
     O,
     {
-      className: i(n.dialog, d),
+      className: i(n.dialog, d, n[x]),
       onClose: e,
-      ...T,
+      ...E,
       children: /* @__PURE__ */ a(
-        V,
+        H,
         {
           locale: l,
           photoSources: r,
-          errors: x,
+          errors: T,
           onCloseDialogHandler: e,
           onClearErrors: v
         }
@@ -355,11 +356,11 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
   ) : /* @__PURE__ */ L(
     O,
     {
-      className: i(n.dialog, d),
+      className: i(n.dialog, d, n[x]),
       onClose: e,
-      ...T,
+      ...E,
       children: [
-        /* @__PURE__ */ a(E, { className: i(n.topActions), children: /* @__PURE__ */ a(
+        /* @__PURE__ */ a(P, { className: i(n.topActions), children: /* @__PURE__ */ a(
           j,
           {
             onClick: e,
@@ -369,19 +370,19 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
               "img",
               {
                 draggable: !1,
-                width: w,
-                height: w,
-                src: po,
+                width: D,
+                height: D,
+                src: uo,
                 alt: p[l].back
               }
             )
           }
         ) }),
-        /* @__PURE__ */ a(G, { className: i(n.title), children: p[l]["photo-crop"] }),
-        /* @__PURE__ */ L(D, { className: i(n.content, S && n.many), children: [
+        /* @__PURE__ */ a(J, { className: i(n.title), children: p[l]["photo-crop"] }),
+        /* @__PURE__ */ L(A, { className: i(n.content, S && n.many), children: [
           S && /* @__PURE__ */ a("span", {}),
           !!r.length && /* @__PURE__ */ a(
-            $,
+            V,
             {
               className: i(n.crop),
               crop: c[C],
@@ -404,12 +405,12 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
               )
             }
           ),
-          S && /* @__PURE__ */ a(H, { photoSources: r, photoIndex: C })
+          S && /* @__PURE__ */ a(Z, { photoSources: r, photoIndex: C })
         ] }),
-        u && /* @__PURE__ */ a(E, { className: i(n.dialogText), children: u }),
-        /* @__PURE__ */ a(E, { className: i(n.botActions), children: S ? /* @__PURE__ */ L(_, { children: [
+        u && /* @__PURE__ */ a(P, { className: i(n.dialogText), children: u }),
+        /* @__PURE__ */ a(P, { className: i(n.botActions), children: S ? /* @__PURE__ */ L($, { children: [
           /* @__PURE__ */ a(
-            P,
+            k,
             {
               buttonSize: "small",
               buttonColor: "blue",
@@ -421,7 +422,7 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
             }
           ),
           /* @__PURE__ */ a(
-            P,
+            k,
             {
               buttonSize: "small",
               buttonColor: "blue",
@@ -433,7 +434,7 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
             }
           )
         ] }) : /* @__PURE__ */ a(
-          P,
+          k,
           {
             minWidth: "100%",
             buttonSize: "small",
@@ -450,5 +451,5 @@ const po = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
   );
 };
 export {
-  Po as UploadDialog
+  wo as UploadDialog
 };

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

@@ -1,73 +1,74 @@
-import { jsxs as No, Fragment as Ho, jsx as U } from "react/jsx-runtime";
-import { useState as i, useRef as A } from "react";
-import { v as Vo, D as bo } from "../../index-CcueJ2sD.js";
-import { c as ko } from "../../index-YnD2EP-S.js";
-import { localizedText as zo } from "./locale.js";
-import { EN_LOCALE as jo } from "../../constants.js";
-import { DEFAULT_MIN_DIMENSION as Wo, DEFAULT_ASPECT_RATIO as Bo, DEFAULT_TIMEOUT as Go, DEFAULT_FILE_MAX_SIZE as Xo, DEFAULT_VIDEO_FILE_MAX_SIZE as Yo, DEFAULT_BASE_DIMENSION as Zo, FULL_PROGRESS_VALUE as $, PHOTO_LOADING_DELAY as qo, RESET_DATA_DELAY as d } from "./constants.js";
-import { UploadDialog as Jo } from "./components/upload-dialog/upload-dialog.js";
-import { UploadButton as Ko } from "./components/upload-button/upload-button.js";
-import { ErrorUploadDialog as Qo } from "./components/error-upload-dialog/error-upload-dialog.js";
-import { isVideo as oo } from "./utils/is-video.js";
-import { validateVideoFile as eo } from "./utils/validate-video-file.js";
-import { validatePhotoFile as to } from "./utils/validate-photo-file.js";
-import { readPhoto as ro } from "./utils/read-photo.js";
-import { getPhotoCrop as $o } from "./utils/get-photo-crop.js";
-import { getCroppedSource as oe } from "./utils/get-cropped-source.js";
-import { getDefaultCroppedPhoto as no } from "./utils/get-default-cropped-photo.js";
-import '../../assets/photo-crop-uploader.css';const ee = "_photoCropCanvas_1i4lr_1", te = {
-  photoCropCanvas: ee
+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 { 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";
+import { UploadDialog as Qo } from "./components/upload-dialog/upload-dialog.js";
+import { UploadButton as $o } from "./components/upload-button/upload-button.js";
+import { ErrorUploadDialog as oe } from "./components/error-upload-dialog/error-upload-dialog.js";
+import { isVideo as eo } from "./utils/is-video.js";
+import { validateVideoFile as to } from "./utils/validate-video-file.js";
+import { validatePhotoFile as ro } from "./utils/validate-photo-file.js";
+import { readPhoto as no } from "./utils/read-photo.js";
+import { getPhotoCrop as ee } from "./utils/get-photo-crop.js";
+import { getCroppedSource as te } from "./utils/get-cropped-source.js";
+import { getDefaultCroppedPhoto as so } from "./utils/get-default-cropped-photo.js";
+import '../../assets/photo-crop-uploader.css';const re = "_photoCropCanvas_1i4lr_1", ne = {
+  photoCropCanvas: re
 };
-function Le(a) {
+function Te(a) {
   const {
-    buttonClassname: so = "",
-    onStartUpload: ao = () => {
+    buttonClassname: ao = "",
+    onStartUpload: io = () => {
     },
-    onEndUpload: io = () => {
+    onEndUpload: lo = () => {
     },
-    onError: lo = () => {
+    onError: co = () => {
     },
-    onStartCrop: co = () => {
+    onStartCrop: po = () => {
     },
-    onDragOver: po = () => {
+    onDragOver: uo = () => {
     },
-    onDragLeave: uo = () => {
+    onDragLeave: fo = () => {
     },
-    onDragDrop: fo = () => {
+    onDragDrop: ho = () => {
     },
-    showErrorPopup: ho = !1,
-    minDimension: l = Wo,
-    aspectRatio: C = Bo,
-    locale: n = jo,
-    timeout: M = Go,
-    fileMaxSize: N = Xo,
-    videoFileMaxSize: H = Yo,
+    showErrorPopup: mo = !1,
+    minDimension: l = Go,
+    aspectRatio: C = Xo,
+    locale: n = Wo,
+    timeout: y = Yo,
+    fileMaxSize: N = Zo,
+    videoFileMaxSize: H = Ko,
     allowedExtensions: w,
     allowedMimeTypes: V,
-    circular: mo,
+    circular: Co,
     usePercentCrop: b = !0,
-    width: Co,
+    width: Eo,
     keepSelection: go,
-    uploadButton: Eo,
-    multiple: g = !1,
+    uploadButton: Po,
+    multiple: E = !1,
     fromSources: k,
     withVideoUploaded: v = !1,
-    returnCropParams: Po = !1,
+    returnCropParams: Do = !1,
     dialogClassname: z,
-    defaultDimension: Do = Zo,
-    ...So
-  } = a, {
-    onEndCrop: re,
-    onClose: ne,
+    theme: j = Bo,
+    defaultDimension: So = qo,
     ...Lo
-  } = So, [_o, E] = i(!1), [P, D] = i([]), [I, x] = i([]), f = A([]), h = A([]), [p, j] = i(0), W = A(null), B = A(null), [c, O] = i(!1), [To, G] = i(0), [X, Y] = i(""), [Uo, S] = i([]), [Ao, Z] = i(!1), wo = _o || c && g, vo = () => {
+  } = 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 = () => {
     S([]);
   }, F = (e = []) => {
     c || (a.returnCropParams === !0 && a.onClose?.(
       e,
       f.current,
       h.current
-    ), E(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
+    ), g(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
       f.current = [], h.current = [];
     }, d));
   }, R = (e = []) => {
@@ -75,32 +76,32 @@ function Le(a) {
       e,
       f.current,
       h.current
-    ), E(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
+    ), g(!1), setTimeout(() => S([]), d), setTimeout(() => D([]), d), setTimeout(() => {
       f.current = [], h.current = [];
     }, d));
   }, q = () => {
     c || (a.returnCropParams === !0 ? F([]) : R([]));
-  }, Io = () => {
-    Z(!1);
+  }, xo = () => {
+    K(!1);
   }, L = (e, t = e, o = [], r = !1) => {
-    io(e), Y(""), D(e), x(Array(e.length)), j(0), E(!0), f.current = t, h.current = o, !e.length && !r && q();
-  }, y = (e) => {
-    e instanceof Error && (console.warn(e.message), lo(e), Y(e.message), Z(!0), D([]), E(!1), f.current = [], h.current = []);
-  }, xo = async (e) => {
+    lo(e), Z(""), D(e), x(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) => {
     const { files: t } = e.target;
     if (t?.length && !c)
       try {
-        if (O(!0), ao(), g) {
-          const o = Array.from(t), r = $ / o.length, _ = [], u = [], K = [], T = [];
+        if (O(!0), io(), E) {
+          const o = Array.from(t), r = oo / o.length, _ = [], u = [], Q = [], T = [];
           for (const m of o) {
-            const Mo = oo(m);
+            const No = eo(m);
             try {
-              if (v && Mo) {
-                eo(m, H, n);
+              if (v && No) {
+                to(m, H, n);
                 const s = URL.createObjectURL(m);
-                K.push(u.length), u.push(s);
+                Q.push(u.length), u.push(s);
               } else {
-                to(
+                ro(
                   m,
                   {
                     maxSize: N,
@@ -109,85 +110,85 @@ function Le(a) {
                   },
                   n
                 );
-                const s = await ro(
+                const s = await no(
                   m,
                   l,
                   n,
-                  M
+                  y
                 );
                 _.push(s), u.push(s);
               }
             } catch (s) {
-              let Q = "";
-              s instanceof Error && (Q = s.message), T.push({
+              let $ = "";
+              s instanceof Error && ($ = s.message), T.push({
                 photoName: m.name,
-                errorMessage: Q
+                errorMessage: $
               });
             }
-            G(
-              (s) => Math.min($, s + r)
+            X(
+              (s) => Math.min(oo, s + r)
             ), await new Promise((s) => setTimeout(s, 0));
           }
           if (k?.length)
             throw new Error(T[0]?.errorMessage);
-          S(T), L(_, u, K, T.length > 0);
+          S(T), L(_, u, Q, T.length > 0);
         } else {
           const o = t[0];
-          if (v && oo(o)) {
-            eo(o, H, n);
+          if (v && eo(o)) {
+            to(o, H, n);
             const r = URL.createObjectURL(o);
             L([], [r], [0]);
           } else {
-            to(
+            ro(
               o,
               { maxSize: N, allowedExtensions: w, allowedMimeTypes: V },
               n
             );
-            const r = await ro(o, l, n, M);
+            const r = await no(o, l, n, y);
             L([r]);
           }
         }
       } catch (o) {
-        y(o);
+        M(o);
       } finally {
-        g ? setTimeout(() => {
-          e.target.value = "", G(0), O(!1);
-        }, qo) : (e.target.value = "", O(!1));
+        E ? setTimeout(() => {
+          e.target.value = "", X(0), O(!1);
+        }, Jo) : (e.target.value = "", O(!1));
       }
-  }, Oo = (e) => {
-    const { width: t, height: o } = e.currentTarget, r = $o(
+  }, Fo = (e) => {
+    const { width: t, height: o } = e.currentTarget, r = ee(
       t,
       o,
       l,
       C,
       !1,
-      Do
+      So
     );
     x((_) => {
       const u = [..._];
       return u[p] = r, u;
     });
-  }, Fo = (e, t) => {
+  }, Ro = (e, t) => {
     x((o) => {
       const r = [...o];
       return r[p] = t, r;
     });
   }, J = () => {
-    const e = B.current, t = W.current;
+    const e = G.current, t = B.current;
     if (e && t && I)
       try {
         const o = I[p];
         if (!o) return !1;
-        if (co(), a.returnCropParams === !0) {
+        if (po(), a.returnCropParams === !0) {
           if (b) {
-            const r = Vo(
+            const r = bo(
               o,
               t.naturalWidth,
               t.naturalHeight
             );
             a.onEndCrop?.(r);
           } else {
-            const r = bo(
+            const r = ko(
               o,
               t.naturalWidth,
               t.naturalHeight
@@ -196,7 +197,7 @@ function Le(a) {
           }
           p >= P.length - 1 && F();
         } else {
-          const r = oe(
+          const r = te(
             t,
             e,
             o,
@@ -206,19 +207,19 @@ function Le(a) {
         }
         return !0;
       } catch (o) {
-        return o instanceof Error && (console.warn(o), y(o)), !1;
+        return o instanceof Error && (console.warn(o), M(o)), !1;
       }
     else
       return !1;
-  }, Ro = () => {
-    J() && j((t) => t + 1);
+  }, Mo = () => {
+    J() && W((t) => t + 1);
   }, yo = async () => {
     const e = P.slice(p);
     try {
-      if (Po) {
+      if (Do) {
         const t = await Promise.all(
           e.map(
-            (o) => no(
+            (o) => so(
               o,
               l,
               C,
@@ -232,7 +233,7 @@ function Le(a) {
       } else {
         const t = await Promise.all(
           e.map(
-            (o) => no(
+            (o) => so(
               o,
               l,
               C,
@@ -244,80 +245,82 @@ function Le(a) {
         R(t);
       }
     } catch (t) {
-      y(t);
+      M(t);
     }
   };
-  return /* @__PURE__ */ No(Ho, { children: [
-    /* @__PURE__ */ U(
-      Ko,
+  return /* @__PURE__ */ Ho(Vo, { children: [
+    /* @__PURE__ */ A(
+      $o,
       {
-        onChange: xo,
+        onChange: Oo,
         onPhotoDataLoaded: L,
-        buttonClassname: so,
+        buttonClassname: ao,
         disabled: c,
         buttonDisabled: c,
         locale: n,
-        width: Co,
+        width: Eo,
         allowedExtensions: w,
-        onDragDrop: fo,
-        onDragLeave: uo,
-        onDragOver: po,
-        button: Eo,
-        multiple: g,
+        onDragDrop: ho,
+        onDragLeave: fo,
+        onDragOver: uo,
+        button: Po,
+        multiple: E,
         fromSources: k,
         withVideoUploaded: v,
-        ...Lo,
-        children: zo[n].upload
+        ..._o,
+        children: jo[n].upload
       }
     ),
-    /* @__PURE__ */ U(
-      Jo,
+    /* @__PURE__ */ A(
+      Qo,
       {
-        open: wo,
+        open: vo,
         className: z,
         photoSourceLoading: c,
-        loadingValue: To,
+        loadingValue: Ao,
         errors: Uo,
         photoCrops: I,
         photoSources: P,
-        onNextPhoto: Ro,
+        onNextPhoto: Mo,
         onSkipCrop: yo,
-        onClearErrors: vo,
-        photoError: X,
+        onClearErrors: Io,
+        photoError: Y,
         onCloseDialogHandler: q,
-        onCropChange: Fo,
+        onCropChange: Ro,
         onPhotoCrop: J,
-        onPhotoLoad: Oo,
-        imageRef: W,
+        onPhotoLoad: Fo,
+        imageRef: B,
         minDimension: l,
         aspectRatio: C,
         locale: n,
-        circular: mo,
+        circular: Co,
         keepSelection: go,
-        photoIndex: p
+        photoIndex: p,
+        theme: j
       }
     ),
-    /* @__PURE__ */ U(
-      Qo,
+    /* @__PURE__ */ A(
+      oe,
       {
         className: z,
-        open: ho && Ao,
-        photoError: X,
-        onCloseErrorDialog: Io,
-        locale: n
+        open: mo && wo,
+        photoError: Y,
+        onCloseErrorDialog: xo,
+        locale: n,
+        theme: j
       }
     ),
-    /* @__PURE__ */ U(
+    /* @__PURE__ */ A(
       "canvas",
       {
-        className: ko(te.photoCropCanvas),
+        className: zo(ne.photoCropCanvas),
         width: l,
         height: l,
-        ref: B
+        ref: G
       }
     )
   ] });
 }
 export {
-  Le as PhotoCropUploader
+  Te as PhotoCropUploader
 };

package/dist/components/photo-crop-uploader/types.d.ts

@@ -1,6 +1,6 @@
 import { DragEvent, InputHTMLAttributes, ReactNode } from 'react';
 import { Crop } from 'react-image-crop';
-import { Locale } from '../../types';
+import { Locale, Theme } from '../../types';
 import { BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, ICO_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, JPEG_IMAGE_EXT, JPG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, WEBP_IMAGE_EXT } from './constants';
 export type PhotoDataUrl = string;
 export type PhotoFileSize = number;
@@ -53,6 +53,7 @@ export type PhotoCropUploaderCustomProps = {
     fromSources?: PhotoDataUrl[];
     withVideoUploaded?: boolean;
     dialogClassname?: string;
+    theme?: Theme;
 };
 export type PhotoCropUploaderProps = PhotoCropUploaderCustomProps & CropProps & InputHTMLAttributes<HTMLInputElement>;
 export type PhotoCropUploaderLocaleText = Record<Locale, Record<string, string>>;

package/dist/constants.d.ts

@@ -3,3 +3,5 @@ export declare const RU_LOCALE = "ru";
 export declare const BYTE_TO_KILOBYTE = 1024;
 export declare const PERCENT_SYMBOL = "%";
 export declare const DASH_SYMBOL = "-";
+export declare const LIGHT_THEME = "light";
+export declare const DARK_THEME = "dark";

package/dist/constants.js

@@ -1,8 +1,10 @@
-const E = "en", L = "ru", n = 1024, o = "%", t = "-";
+const E = "en", t = "ru", n = 1024, o = "%", L = "-", _ = "light", c = "dark";
 export {
   n as BYTE_TO_KILOBYTE,
-  t as DASH_SYMBOL,
+  c as DARK_THEME,
+  L as DASH_SYMBOL,
   E as EN_LOCALE,
+  _ as LIGHT_THEME,
   o as PERCENT_SYMBOL,
-  L as RU_LOCALE
+  t as RU_LOCALE
 };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { PhotoCropUploader, Button, CircularProgressLoader, CodeInput } from './components';
+export { PhotoCropUploader, Button, CircularProgressLoader, CodeInput, } from './components';
 export { drawCroppedImage } from './components';
 export type { Crop, PercentCrop, PixelCrop } from 'react-image-crop';
 export type { CodeInputProps } from './components';
-export type { Locale } from './types';
+export type { Locale, Theme } from './types';
 export type { PhotoDataUrl, PhotoFileSize, PhotoExtension, PhotoMimeType, PhotoFileOptions, PhotoCropUploaderProps, } from './components/photo-crop-uploader/types';
-export { EN_LOCALE, RU_LOCALE, BYTE_TO_KILOBYTE } from './constants';
+export { EN_LOCALE, RU_LOCALE, BYTE_TO_KILOBYTE, LIGHT_THEME, DARK_THEME, } from './constants';
 export { JPG_IMAGE_EXT, JPEG_IMAGE_EXT, PNG_IMAGE_EXT, SVG_IMAGE_EXT, BMP_IMAGE_EXT, GIF_IMAGE_EXT, WEBP_IMAGE_EXT, ICO_IMAGE_EXT, BMP_IMAGE_TYPE, GIF_IMAGE_TYPE, ICO_IMAGE_TYPE, JPEG_IMAGE_TYPE, JPG_IMAGE_TYPE, MICROSOFT_ICO_IMAGE_TYPE, PNG_IMAGE_TYPE, SVG_IMAGE_TYPE, WEBP_IMAGE_TYPE, } from './components/photo-crop-uploader/constants';

package/dist/index.js

@@ -1,34 +1,36 @@
-import { BYTE_TO_KILOBYTE as G, EN_LOCALE as I, RU_LOCALE as o } from "./constants.js";
-import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as T, GIF_IMAGE_EXT as M, GIF_IMAGE_TYPE as A, ICO_IMAGE_EXT as e, ICO_IMAGE_TYPE as p, JPEG_IMAGE_EXT as t, JPEG_IMAGE_TYPE as Y, JPG_IMAGE_EXT as C, JPG_IMAGE_TYPE as O, MICROSOFT_ICO_IMAGE_TYPE as m, PNG_IMAGE_EXT as X, PNG_IMAGE_TYPE as f, SVG_IMAGE_EXT as x, SVG_IMAGE_TYPE as B, WEBP_IMAGE_EXT as L, WEBP_IMAGE_TYPE as a } from "./components/photo-crop-uploader/constants.js";
-import { Button as J } from "./components/button/button.js";
-import { CircularProgressLoader as F } from "./components/circular-progress-loader/circular-progress-loader.js";
+import { BYTE_TO_KILOBYTE as G, DARK_THEME as I, EN_LOCALE as T, LIGHT_THEME as o, RU_LOCALE as r } from "./constants.js";
+import { BMP_IMAGE_EXT as P, BMP_IMAGE_TYPE as A, GIF_IMAGE_EXT as e, GIF_IMAGE_TYPE as p, ICO_IMAGE_EXT as t, ICO_IMAGE_TYPE as Y, JPEG_IMAGE_EXT as C, JPEG_IMAGE_TYPE as O, JPG_IMAGE_EXT as m, JPG_IMAGE_TYPE as X, MICROSOFT_ICO_IMAGE_TYPE as f, PNG_IMAGE_EXT as x, PNG_IMAGE_TYPE as B, SVG_IMAGE_EXT as L, SVG_IMAGE_TYPE as a, WEBP_IMAGE_EXT as d, WEBP_IMAGE_TYPE as J } from "./components/photo-crop-uploader/constants.js";
+import { Button as F } from "./components/button/button.js";
+import { CircularProgressLoader as N } from "./components/circular-progress-loader/circular-progress-loader.js";
 import { CodeInput as S } from "./components/code-input/code-input.js";
 import { PhotoCropUploader as l } from "./components/photo-crop-uploader/photo-crop-uploader.js";
 import { drawCroppedImage as s } from "./components/photo-crop-uploader/utils/draw-cropped-image.js";
 export {
   P as BMP_IMAGE_EXT,
-  T as BMP_IMAGE_TYPE,
+  A as BMP_IMAGE_TYPE,
   G as BYTE_TO_KILOBYTE,
-  J as Button,
-  F as CircularProgressLoader,
+  F as Button,
+  N as CircularProgressLoader,
   S as CodeInput,
-  I as EN_LOCALE,
-  M as GIF_IMAGE_EXT,
-  A as GIF_IMAGE_TYPE,
-  e as ICO_IMAGE_EXT,
-  p as ICO_IMAGE_TYPE,
-  t as JPEG_IMAGE_EXT,
-  Y as JPEG_IMAGE_TYPE,
-  C as JPG_IMAGE_EXT,
-  O as JPG_IMAGE_TYPE,
-  m as MICROSOFT_ICO_IMAGE_TYPE,
-  X as PNG_IMAGE_EXT,
-  f as PNG_IMAGE_TYPE,
+  I as DARK_THEME,
+  T as EN_LOCALE,
+  e as GIF_IMAGE_EXT,
+  p as GIF_IMAGE_TYPE,
+  t as ICO_IMAGE_EXT,
+  Y as ICO_IMAGE_TYPE,
+  C as JPEG_IMAGE_EXT,
+  O as JPEG_IMAGE_TYPE,
+  m as JPG_IMAGE_EXT,
+  X as JPG_IMAGE_TYPE,
+  o as LIGHT_THEME,
+  f as MICROSOFT_ICO_IMAGE_TYPE,
+  x as PNG_IMAGE_EXT,
+  B as PNG_IMAGE_TYPE,
   l as PhotoCropUploader,
-  o as RU_LOCALE,
-  x as SVG_IMAGE_EXT,
-  B as SVG_IMAGE_TYPE,
-  L as WEBP_IMAGE_EXT,
-  a as WEBP_IMAGE_TYPE,
+  r as RU_LOCALE,
+  L as SVG_IMAGE_EXT,
+  a as SVG_IMAGE_TYPE,
+  d as WEBP_IMAGE_EXT,
+  J as WEBP_IMAGE_TYPE,
   s as drawCroppedImage
 };

package/dist/types.d.ts

@@ -1,2 +1,3 @@
-import { EN_LOCALE, RU_LOCALE } from './constants';
+import { DARK_THEME, EN_LOCALE, LIGHT_THEME, RU_LOCALE } from './constants';
 export type Locale = typeof EN_LOCALE | typeof RU_LOCALE;
+export type Theme = typeof LIGHT_THEME | typeof DARK_THEME;

package/dist/{upload-dialog-errors-Cyz6_7n4.js → upload-dialog-errors-DHl0bh1n.js}

@@ -1,33 +1,33 @@
 import { jsx as s, jsxs as g, Fragment as x } from "react/jsx-runtime";
 import { c } from "./index-YnD2EP-S.js";
 import { localizedText as f } from "./components/photo-crop-uploader/locale.js";
-import { EN_LOCALE as S, DASH_SYMBOL as L } from "./constants.js";
+import { EN_LOCALE as L, DASH_SYMBOL as S } from "./constants.js";
 import { D as I, a as R, b as W } from "./DialogTitle-BtvmXSZP.js";
 import * as O from "react";
-import { g as V, a as B, c as $, P as r } from "./createTheme-D8R2Cz2N.js";
+import { g as V, a as k, c as B, P as r } from "./createTheme-D8R2Cz2N.js";
 import { m as C } from "./memoTheme-D5VCpQCz.js";
-import { u as z, c as E, s as w } from "./chainPropTypes-DiJb1lGa.js";
+import { u as $, c as z, s as w } from "./chainPropTypes-DiJb1lGa.js";
 import { Button as y } from "./components/button/button.js";
-import './assets/upload-dialog-errors.css';function M(e) {
+import './assets/upload-dialog-errors.css';function E(e) {
   return V("MuiDivider", e);
 }
-B("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-const U = (e) => {
+k("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
+const M = (e) => {
   const {
     absolute: t,
     children: o,
-    classes: p,
+    classes: d,
     flexItem: h,
     light: i,
     orientation: n,
-    textAlign: a,
-    variant: l
+    textAlign: l,
+    variant: a
   } = e;
-  return E({
-    root: ["root", t && "absolute", l, i && "light", n === "vertical" && "vertical", h && "flexItem", o && "withChildren", o && n === "vertical" && "withChildrenVertical", a === "right" && n !== "vertical" && "textAlignRight", a === "left" && n !== "vertical" && "textAlignLeft"],
+  return z({
+    root: ["root", t && "absolute", a, i && "light", n === "vertical" && "vertical", h && "flexItem", o && "withChildren", o && n === "vertical" && "withChildrenVertical", l === "right" && n !== "vertical" && "textAlignRight", l === "left" && n !== "vertical" && "textAlignLeft"],
     wrapper: ["wrapper", n === "vertical" && "wrapperVertical"]
-  }, M, p);
-}, j = w("div", {
+  }, E, d);
+}, U = w("div", {
   name: "MuiDivider",
   slot: "Root",
   overridesResolver: (e, t) => {
@@ -168,7 +168,7 @@ const U = (e) => {
       }
     }
   }]
-}))), k = w("span", {
+}))), j = w("span", {
   name: "MuiDivider",
   slot: "Wrapper",
   overridesResolver: (e, t) => {
@@ -194,41 +194,41 @@ const U = (e) => {
     }
   }]
 }))), v = /* @__PURE__ */ O.forwardRef(function(t, o) {
-  const p = z({
+  const d = $({
     props: t,
     name: "MuiDivider"
   }), {
     absolute: h = !1,
     children: i,
     className: n,
-    orientation: a = "horizontal",
-    component: l = i || a === "vertical" ? "div" : "hr",
+    orientation: l = "horizontal",
+    component: a = i || l === "vertical" ? "div" : "hr",
     flexItem: b = !1,
     light: A = !1,
-    role: m = l !== "hr" ? "separator" : void 0,
+    role: m = a !== "hr" ? "separator" : void 0,
     textAlign: D = "center",
     variant: N = "fullWidth",
     ...T
-  } = p, u = {
-    ...p,
+  } = d, u = {
+    ...d,
     absolute: h,
-    component: l,
+    component: a,
     flexItem: b,
     light: A,
-    orientation: a,
+    orientation: l,
     role: m,
     textAlign: D,
     variant: N
-  }, _ = U(u);
-  return /* @__PURE__ */ s(j, {
-    as: l,
-    className: $(_.root, n),
+  }, _ = M(u);
+  return /* @__PURE__ */ s(U, {
+    as: a,
+    className: B(_.root, n),
     role: m,
     ref: o,
     ownerState: u,
-    "aria-orientation": m === "separator" && (l !== "hr" || a === "vertical") ? a : void 0,
+    "aria-orientation": m === "separator" && (a !== "hr" || l === "vertical") ? l : void 0,
     ...T,
-    children: i ? /* @__PURE__ */ s(k, {
+    children: i ? /* @__PURE__ */ s(j, {
       className: _.wrapper,
       ownerState: u,
       children: i
@@ -299,39 +299,41 @@ process.env.NODE_ENV !== "production" && (v.propTypes = {
    */
   variant: r.oneOfType([r.oneOf(["fullWidth", "inset", "middle"]), r.string])
 });
-const H = "_dialog_1h5av_1", P = "_errorContent_1h5av_7", F = "_errorItem_1h5av_22", Y = "_fileName_1h5av_29", q = "_topActions_1h5av_35", G = "_close_1h5av_41", J = "_botActions_1h5av_45", K = "_button_1h5av_50", Q = "_title_1h5av_54", X = "_content_1h5av_60", Z = "_many_1h5av_68", tt = "_crop_1h5av_75", et = "_dialogText_1h5av_84", d = {
+const H = "_dialog_n5vpn_1", P = "_dark_n5vpn_1", F = "_errorContent_n5vpn_5", Y = "_errorItem_n5vpn_38", q = "_fileName_n5vpn_45", G = "_topActions_n5vpn_51", J = "_close_n5vpn_57", K = "_botActions_n5vpn_61", Q = "_button_n5vpn_66", X = "_title_n5vpn_70", Z = "_content_n5vpn_76", tt = "_many_n5vpn_84", et = "_photoList_n5vpn_87", ot = "_crop_n5vpn_91", rt = "_dialogText_n5vpn_100", p = {
   dialog: H,
-  errorContent: P,
-  errorItem: F,
-  fileName: Y,
-  topActions: q,
-  close: G,
-  botActions: J,
-  button: K,
-  title: Q,
-  content: X,
-  many: Z,
-  crop: tt,
-  dialogText: et
-}, pt = (e) => {
+  dark: P,
+  errorContent: F,
+  errorItem: Y,
+  fileName: q,
+  topActions: G,
+  close: J,
+  botActions: K,
+  button: Q,
+  title: X,
+  content: Z,
+  many: tt,
+  photoList: et,
+  crop: ot,
+  dialogText: rt
+}, gt = (e) => {
   const {
     photoSources: t,
     errors: o = [],
-    onCloseDialogHandler: p,
+    onCloseDialogHandler: d,
     onClearErrors: h,
-    locale: i = S
+    locale: i = L
   } = e;
   return /* @__PURE__ */ g(x, { children: [
-    /* @__PURE__ */ s(I, { className: c(d.title), children: t.length ? f[i]["some-not-uploaded"] : f[i]["not-uploaded"] }),
-    /* @__PURE__ */ s(R, { className: c(d.errorContent), children: o.map(({ photoName: n, errorMessage: a }, l) => /* @__PURE__ */ g(x, { children: [
-      !!l && /* @__PURE__ */ s(v, {}),
-      /* @__PURE__ */ g("div", { className: c(d.errorItem), children: [
-        /* @__PURE__ */ s("span", { className: c(d.fileName), children: n }),
+    /* @__PURE__ */ s(I, { className: c(p.title), children: t.length ? f[i]["some-not-uploaded"] : f[i]["not-uploaded"] }),
+    /* @__PURE__ */ s(R, { className: c(p.errorContent), children: o.map(({ photoName: n, errorMessage: l }, a) => /* @__PURE__ */ g(x, { children: [
+      !!a && /* @__PURE__ */ s(v, {}),
+      /* @__PURE__ */ g("div", { className: c(p.errorItem), children: [
+        /* @__PURE__ */ s("span", { className: c(p.fileName), children: n }),
         " ",
-        ` ${L} ${a}`
+        ` ${S} ${l}`
       ] })
-    ] }, l)) }),
-    /* @__PURE__ */ g(W, { className: c(d.botActions), children: [
+    ] }, a)) }),
+    /* @__PURE__ */ g(W, { className: c(p.botActions), children: [
       /* @__PURE__ */ s(
         y,
         {
@@ -339,8 +341,8 @@ const H = "_dialog_1h5av_1", P = "_errorContent_1h5av_7", F = "_errorItem_1h5av_
           buttonColor: "blue",
           buttonVariant: "outlined",
           buttonWeight: 500,
-          onClick: p,
-          className: c(d.button),
+          onClick: d,
+          className: c(p.button),
           children: f[i].close
         }
       ),
@@ -352,7 +354,7 @@ const H = "_dialog_1h5av_1", P = "_errorContent_1h5av_7", F = "_errorItem_1h5av_
           buttonVariant: "filled",
           buttonWeight: 500,
           onClick: h,
-          className: c(d.button),
+          className: c(p.button),
           children: f[i].continue
         }
       )
@@ -360,6 +362,6 @@ const H = "_dialog_1h5av_1", P = "_errorContent_1h5av_7", F = "_errorItem_1h5av_
   ] });
 };
 export {
-  pt as U,
-  d as s
+  gt as U,
+  p as s
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hai-dev/ui-kit",
   "private": false,
-  "version": "1.1.11",
+  "version": "1.1.12",
   "license": "UNLICENSED",
   "author": {
     "name": "Vladislav Knitrunov",