@tesouro/embedded-components-react 0.2.93 → 0.2.94

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index356.js

@@ -1,26 +1,14 @@
-import { jsxs as a, jsx as n } from "@emotion/react/jsx-runtime";
-import { FinanceHowItWorks as s } from "./index351.js";
-import { useKanmonContext as c } from "./index56.js";
-import { Dialog as m } from "./index50.js";
-import { useLingui as l } from "@lingui/react";
-import { Stack as p, Button as r } from "@mui/material";
-import { useState as g } from "react";
-const w = () => {
-  const {
-    i18n: o
-  } = l(), {
-    startFinanceSession: t
-  } = c(), [e, i] = g(!1);
-  return /* @__PURE__ */ a(p, { direction: "row", gap: 1, alignItems: "center", children: [
-    /* @__PURE__ */ n(r, { variant: "text", onClick: () => i(!0), children: o._("How does invoice financing work?") }),
-    /* @__PURE__ */ n(r, { onClick: () => t(), variant: "contained", color: "primary", sx: {
-      px: 2.5,
-      py: 1.5,
-      height: 40
-    }, children: o._("Financing menu") }),
-    /* @__PURE__ */ n(m, { open: e, onClose: () => i(!1), alignDialog: "right", children: /* @__PURE__ */ n(s, {}) })
-  ] });
+const o = (e) => {
+  const t = e.lastIndexOf(".");
+  return t >= 0 ? e.slice(t + 1).toLowerCase() : "";
+}, l = (e, {
+  acceptedFormats: t,
+  acceptedExtensions: n,
+  maxFileSizeInMB: s
+}) => {
+  const a = t.includes(e.type), c = n.includes(o(e.name));
+  return !a && !c ? "unsupported_type" : e.size > s * 1024 * 1024 ? "too_large" : null;
 };
 export {
-  w as FinanceMenuButtons
+  l as validateAttachmentFile
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index357.js

@@ -1,65 +1,9 @@
-import { jsxs as a, jsx as e } from "@emotion/react/jsx-runtime";
-import { Fragment as m } from "react";
-import { useLingui as h } from "@lingui/react";
-import _ from "@mui/icons-material/MonetizationOnOutlined";
-import { useTheme as g, Box as i, Typography as n, lighten as f, List as x, ListItem as l } from "@mui/material";
-const F = ({
-  offers: p
-}) => {
-  const {
-    i18n: t
-  } = h(), d = g();
-  return !p || p.length === 0 ? null : /* @__PURE__ */ a(i, { width: "100%", children: [
-    /* @__PURE__ */ e(n, { variant: "subtitle1", sx: {
-      mb: 3,
-      display: "inline-block"
-    }, children: t._("Current offer") }),
-    /* @__PURE__ */ e(i, { sx: {
-      display: "flex",
-      gap: 2,
-      flexWrap: "wrap"
-    }, children: p.map((o, c) => o?.pricing_plans?.map((r, s) => /* @__PURE__ */ a(i, { width: 232, height: 148, px: 3, py: 2.5, sx: {
-      backgroundColor: d.palette.background.paper,
-      borderRadius: "16px",
-      border: `1px solid ${d.palette.divider}`
-    }, children: [
-      /* @__PURE__ */ a(i, { sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        mb: 2
-      }, children: [
-        /* @__PURE__ */ e(_, { sx: {
-          fontSize: 24,
-          color: f(d.palette.primary.main, 0.6)
-        } }),
-        /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 500, sx: {
-          flex: "1 1 0%",
-          width: "100%"
-        }, children: t._("Financing plan") })
-      ] }),
-      /* @__PURE__ */ e(x, { sx: {
-        p: 0
-      }, children: /* @__PURE__ */ a(m, { children: [
-        /* @__PURE__ */ e(l, { sx: {
-          p: 0
-        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("{itemAdvance_rate_percentage}% advance rate", {
-          itemAdvance_rate_percentage: r.advance_rate_percentage / 100
-        }) }) }),
-        /* @__PURE__ */ e(l, { sx: {
-          p: 0
-        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("Pay in {itemRepayment_duration_days} days", {
-          itemRepayment_duration_days: r.repayment_duration_days
-        }) }) }),
-        /* @__PURE__ */ e(l, { sx: {
-          p: 0
-        }, children: /* @__PURE__ */ e(n, { variant: "body1", fontWeight: 400, children: t._("{itemFee_percentage}% fee", {
-          itemFee_percentage: r.fee_percentage / 100
-        }) }) })
-      ] }, r.advance_rate_percentage) })
-    ] }, `${o.available_amount}-${c}-${o.total_amount}-${s}`))) })
-  ] });
+const e = (t) => {
+  if (t < 1024)
+    return `${t} B`;
+  const o = t / 1024;
+  return o < 1024 ? `${Math.round(o)} KB` : `${(o / 1024).toFixed(1)} MB`;
 };
 export {
-  F as FinanceOffers
+  e as formatFileSize
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index358.js

@@ -1,16 +1,4 @@
-import { jsxs as r, jsx as o } from "@emotion/react/jsx-runtime";
-import { Box as f } from "@mui/material";
-import { FinanceLimits as e } from "./index355.js";
-import { FinanceOffers as i } from "./index357.js";
-const p = ({
-  offers: s
-}) => /* @__PURE__ */ r(f, { sx: {
-  display: "flex",
-  gap: 2
-}, children: [
-  /* @__PURE__ */ o(e, { offers: s }),
-  s?.[0]?.status === "CURRENT" && /* @__PURE__ */ o(i, { offers: s })
-] });
+const r = (o) => o ? Array.from(o) : [];
 export {
-  p as FinanceWidget
+  r as toFileArray
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index359.js

@@ -1,14 +1,14 @@
 import { jsxs as n, jsx as e } from "@emotion/react/jsx-runtime";
 import { useForm as y, Controller as i } from "react-hook-form";
-import { prepareBankAccountCreatePayload as k } from "./index441.js";
+import { prepareBankAccountCreatePayload as k } from "./index444.js";
 import "date-fns";
-import { getCreateBankAccountSchema as x } from "./index173.js";
-import { safeZodResolver as C } from "./index321.js";
+import { getCreateBankAccountSchema as x } from "./index175.js";
+import { safeZodResolver as C } from "./index267.js";
 import { useLingui as S } from "@lingui/react";
 import { Field as d, FieldContent as c, FieldLabel as m, FieldError as u } from "./index153.js";
-import { Input as s } from "./index119.js";
+import { Input as s } from "./index122.js";
 import { Typography as h } from "./index85.js";
-import { useCreateEntityBankAccount as F } from "./index399.js";
+import { useCreateEntityBankAccount as F } from "./index432.js";
 import { Button as p } from "./index84.js";
 const J = ({
   bankAccountsLength: b,

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index36.js

@@ -1,19 +1,19 @@
 import { jsx as r, jsxs as l, Fragment as $ } from "@emotion/react/jsx-runtime";
-import { InvoicesCounterpartCell as K } from "./index160.js";
-import { InvoiceRecurrenceStatusChip as q } from "./index161.js";
+import { InvoicesCounterpartCell as K } from "./index162.js";
+import { InvoiceRecurrenceStatusChip as q } from "./index163.js";
 import { InvoiceStatusChip as B } from "./index55.js";
-import { InvoicesFilterBar as E } from "./index162.js";
-import { InvoiceStatusCardsFilter as U } from "./index163.js";
-import { useInvoicesFilter as V } from "./index164.js";
-import { useGetReceivables as j } from "./index143.js";
+import { InvoicesFilterBar as E } from "./index164.js";
+import { InvoiceStatusCardsFilter as U } from "./index165.js";
+import { useInvoicesFilter as V } from "./index166.js";
+import { useGetReceivables as j } from "./index142.js";
 import { useMoniteContext as x } from "./index57.js";
 import { MoniteScopedProviders as G } from "./index83.js";
 import { useCurrencies as Q } from "./index58.js";
-import { ReceivableCursorFields as C } from "./index165.js";
+import { ReceivableCursorFields as C } from "./index167.js";
 import { GetNoRowsOverlay as W } from "./index157.js";
-import { DueDateCell as H } from "./index166.js";
+import { DueDateCell as H } from "./index168.js";
 import { DataTable as J } from "./index158.js";
-import { Skeleton as X } from "./index134.js";
+import { Skeleton as X } from "./index132.js";
 import { useLingui as Y } from "@lingui/react";
 import Z from "@mui/icons-material/Sync";
 import { useState as u, useEffect as w } from "react";

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index367.js

@@ -1,48 +1,13 @@
-import { useEffect as _ } from "react";
-const c = (i, u, r) => {
-  _(() => {
-    if (!i?.data?.length) return;
-    const d = u(), m = new Map(i.data.map((e) => [e.id, e])), s = new Map(i.data.filter((e) => e.name).map((e) => [e.name?.toLowerCase(), e])), o = d.line_items.map((e) => {
-      const n = e.product.measure_unit_id, t = e.product.measure_unit_name || e.measure_unit?.name;
-      let a;
-      return n && m.has(n) ? a = m.get(n) : t && s.has(t.toLowerCase()) && (a = s.get(t.toLowerCase())), a ? {
-        ...e,
-        product: {
-          ...e.product,
-          measure_unit_id: a.id,
-          measure_unit_name: void 0
-        },
-        measure_unit: {
-          id: a.id,
-          name: a.name || ""
-        }
-      } : t ? {
-        ...e,
-        product: {
-          ...e.product,
-          measure_unit_id: void 0,
-          measure_unit_name: t
-        },
-        measure_unit: {
-          name: t,
-          id: null
-        }
-      } : n === "" || n === void 0 ? {
-        ...e,
-        product: {
-          ...e.product,
-          measure_unit_id: void 0
-        }
-      } : {
-        ...e
-      };
-    });
-    r({
-      ...d,
-      line_items: o
-    });
-  }, [i?.data, r, u]);
-};
+import { jsx as t } from "@emotion/react/jsx-runtime";
+import { Switch as a } from "radix-ui";
+import { cn as e } from "./index100.js";
+function o({
+  className: s,
+  size: r = "default",
+  ...i
+}) {
+  return /* @__PURE__ */ t(a.Root, { "data-slot": "switch", "data-size": r, className: e("ttw:peer ttw:group/switch ttw:inline-flex ttw:shrink-0 ttw:items-center ttw:rounded-full ttw:border ttw:border-transparent ttw:shadow-xs ttw:transition-all ttw:outline-none ttw:focus-visible:border-ring ttw:focus-visible:ring-[3px] ttw:focus-visible:ring-ring/50 ttw:disabled:cursor-not-allowed ttw:disabled:opacity-50 ttw:data-[size=default]:h-[1.15rem] ttw:data-[size=default]:w-8 ttw:data-[size=sm]:h-3.5 ttw:data-[size=sm]:w-6 ttw:data-[state=checked]:bg-primary ttw:data-[state=unchecked]:bg-input ttw:dark:data-[state=unchecked]:bg-input/80", s), ...i, children: /* @__PURE__ */ t(a.Thumb, { "data-slot": "switch-thumb", className: e("ttw:pointer-events-none ttw:block ttw:rounded-full ttw:bg-background ttw:ring-0 ttw:transition-transform ttw:group-data-[size=default]/switch:size-4 ttw:group-data-[size=sm]/switch:size-3 ttw:data-[state=checked]:translate-x-[calc(100%-2px)] ttw:data-[state=unchecked]:translate-x-0 ttw:dark:data-[state=checked]:bg-primary-foreground ttw:dark:data-[state=unchecked]:bg-foreground") }) });
+}
 export {
-  c as useMeasureUnitsMapping
+  o as Switch
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index368.js

@@ -1,42 +1,34 @@
-import { useMoniteContext as n } from "./index57.js";
-import { getAPIErrorMessage as p } from "./index118.js";
-import { useLingui as c } from "@lingui/react";
-import { toast as t } from "react-hot-toast";
-const v = (a) => {
-  const {
-    i18n: i
-  } = c(), {
-    api: e,
-    queryClient: s
-  } = n();
-  return e.finops.patchReceivablesId.useMutation({
-    path: {
-      receivable_id: a
-    }
-  }, {
-    onSuccess: async (r) => {
-      e.finops.getReceivablesId.setQueryData({
-        path: {
-          receivable_id: a
-        }
-      }, r, s), await Promise.all([e.finops.getReceivablesIdPdfLink.resetQueries({
-        parameters: {
-          path: {
-            receivable_id: a
-          }
-        }
-      }, s), e.finops.getReceivables.invalidateQueries(s)]), t.success(i._("{receivableType} has been updated", {
-        receivableType: r.type
-      }));
-    },
-    onError: (r) => {
-      const o = p(i, r);
-      t.error(i._("Failed to update receivable: {errorMessage}", {
-        errorMessage: o
-      }));
-    }
-  });
-};
+import { jsx as e } from "@emotion/react/jsx-runtime";
+import { cn as i } from "./index100.js";
+import * as o from "@radix-ui/react-popover";
+function m({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "popover", ...t });
+}
+function d({
+  ref: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "popover-trigger", ref: t, ...a });
+}
+d.displayName = o.Trigger.displayName;
+function f({
+  className: t,
+  align: a = "center",
+  sideOffset: r = 4,
+  ...n
+}) {
+  return /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(o.Content, { "data-slot": "popover-content", align: a, sideOffset: r, className: i("ttw:bg-popover ttw:text-popover-foreground ttw:data-[state=open]:animate-in ttw:data-[state=closed]:animate-out ttw:data-[state=closed]:fade-out-0 ttw:data-[state=open]:fade-in-0 ttw:data-[state=closed]:zoom-out-95 ttw:data-[state=open]:zoom-in-95 ttw:data-[side=bottom]:slide-in-from-top-2 ttw:data-[side=left]:slide-in-from-right-2 ttw:data-[side=right]:slide-in-from-left-2 ttw:data-[side=top]:slide-in-from-bottom-2 ttw:z-1300 ttw:w-72 ttw:origin-(--radix-popover-content-transform-origin) ttw:rounded-md ttw:border ttw:p-4 ttw:shadow-md ttw:outline-hidden", t), ...n }) });
+}
+function l({
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Anchor, { "data-slot": "popover-anchor", ...t });
+}
 export {
-  v as useUpdateReceivable
+  m as Popover,
+  l as PopoverAnchor,
+  f as PopoverContent,
+  d as PopoverTrigger
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index369.js

@@ -1,36 +1,18 @@
-import { useMoniteContext as o } from "./index57.js";
-import { getAPIErrorMessage as n } from "./index118.js";
-import { useLingui as p } from "@lingui/react";
-import { toast as c } from "react-hot-toast";
-const g = (e) => {
+import { useMoniteContext as e } from "./index57.js";
+const a = () => {
   const {
-    api: r,
+    api: t,
     queryClient: i
-  } = o(), {
-    i18n: t
-  } = p();
-  return r.finops.putReceivablesIdLineItems.useMutation({
-    path: {
-      receivable_id: e
-    }
-  }, {
-    onSuccess: async () => {
-      await r.finops.getReceivablesId.invalidateQueries({
-        parameters: {
-          path: {
-            receivable_id: e
-          }
-        }
-      }, i);
-    },
-    onError: (s) => {
-      const a = n(t, s);
-      c.error(t._("Failed to update receivable line items: {errorMessage}", {
-        errorMessage: a
-      }));
+  } = e();
+  return t.finops.putEntitiesIdLogo.useMutation(void 0, {
+    onSuccess: async (s) => {
+      t.finops.getEntityUsersMyEntity.setQueryData({}, (o) => o && {
+        ...o,
+        logo: s
+      }, i), await t.finops.getEntityUsersMyEntity.invalidateQueries(i);
     }
   });
 };
 export {
-  g as useUpdateReceivableLineItems
+  a as useUploadEntityLogo
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index37.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as $ } from "@emotion/react/jsx-runtime";
 import { ScopedCssBaselineContainerClassName as z } from "./index104.js";
 import { InvoiceStatusChip as D } from "./index55.js";
-import { ReceivableFilters as Q } from "./index167.js";
+import { ReceivableFilters as Q } from "./index169.js";
 import "react-hot-toast";
 import { useMoniteContext as k } from "./index57.js";
 import { useLingui as B } from "@lingui/react";
@@ -11,7 +11,7 @@ import "../../shared/data-access/dist/lib/EmbedApiContext.js";
 import "../../shared/data-access/dist/lib/rest/client.gen.js";
 import "@tanstack/react-query";
 import "../../shared/data-access/dist/lib/rest/zod.gen.js";
-import { useReceivablesFilters as A } from "./index168.js";
+import { useReceivablesFilters as A } from "./index170.js";
 import "date-fns";
 import { useCurrencies as W } from "./index58.js";
 import "clsx";
@@ -19,18 +19,18 @@ import "tailwind-merge";
 import "@radix-ui/react-dropdown-menu";
 import "lucide-react";
 import "./index84.js";
-import { useGetReceivables as j } from "./index143.js";
+import { useGetReceivables as j } from "./index142.js";
 import "./index92.js";
 import { useAreCounterpartsLoading as q, defaultCounterpartColumnWidth as E, useAutosizeGridColumns as V } from "./index62.js";
 import "react-hook-form";
 import { MoniteScopedProviders as H } from "./index83.js";
-import { ReceivableCursorFields as S } from "./index165.js";
+import { ReceivableCursorFields as S } from "./index167.js";
 import { CounterpartNameCellById as Y } from "./index156.js";
-import { DataGridEmptyState as J } from "./index169.js";
+import { DataGridEmptyState as J } from "./index171.js";
 import { GetNoRowsOverlay as K } from "./index157.js";
-import { DueDateCell as U } from "./index166.js";
+import { DueDateCell as U } from "./index168.js";
 import { TablePagination as X } from "./index86.js";
-import { classNames as Z } from "./index170.js";
+import { classNames as Z } from "./index172.js";
 import { hasSelectedText as ee } from "./index159.js";
 import { Stack as te, Typography as oe, Box as ae } from "@mui/material";
 import { DataGrid as ie } from "@mui/x-data-grid";

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index370.js

@@ -1,10 +1,26 @@
-import { useMoniteContext as t } from "./index57.js";
-const o = () => {
+import { toast as o } from "react-hot-toast";
+import { useMoniteContext as n } from "./index57.js";
+import { useLingui as r } from "@lingui/react";
+const p = (i) => {
   const {
-    api: e
-  } = t();
-  return e.finops.getPaymentTerms.useQuery();
+    api: t,
+    queryClient: s
+  } = n(), {
+    i18n: e
+  } = r();
+  return t.finops.deleteEntitiesIdLogo.useMutation({
+    path: {
+      entity_id: i
+    }
+  }, {
+    onSuccess: async () => {
+      await t.finops.getEntityUsersMyEntity.invalidateQueries(s), o.success(e._("Logo was removed."));
+    },
+    onError: () => {
+      o.error(e._("Failed to remove logo."));
+    }
+  });
 };
 export {
-  o as useGetPaymentTerms
+  p as useDeleteEntityLogo
 };

package/dist/libs/tesouro-embedded-components-react/monite-sdk/dist/index371.js

@@ -1,106 +1,52 @@
-import { jsx as e, jsxs as d, Fragment as C } from "@emotion/react/jsx-runtime";
-import { Controller as c } from "react-hook-form";
-import { DefaultEmail as v } from "./index445.js";
-import { useRootElements as y } from "./index92.js";
-import { useCounterpartById as S } from "./index70.js";
-import "@tanstack/react-query";
-import "./index57.js";
-import { useCounterpartContactList as F } from "./index74.js";
-import "date-fns";
-import "react";
-import "react-hot-toast";
-import { useLingui as I } from "@lingui/react";
-import { useGetReceivableById as N } from "./index82.js";
-import { Card as u, CardContent as m, Stack as f, Typography as h, TextField as b, CircularProgress as M, FormControl as T, Select as B, MenuItem as L, FormHelperText as W } from "@mui/material";
-import { getDefaultContact as _, getContactList as j } from "./index372.js";
-const K = ({
-  formName: n,
-  style: t,
-  children: i,
-  handleIssueAndSend: a
-}) => /* @__PURE__ */ e("form", { id: n, noValidate: !0, onSubmit: a, style: t, children: i }), k = ({
-  invoiceId: n,
-  control: t
+import { jsx as t, jsxs as e, Fragment as c } from "@emotion/react/jsx-runtime";
+import { useEffect as f } from "react";
+import { useLingui as h } from "@lingui/react";
+import { X as g, CloudUpload as x, AlertCircle as N, CheckCircle2 as b } from "lucide-react";
+import { LoadingSpinner as y } from "./index131.js";
+import { Typography as l } from "./index85.js";
+import { twMerge as v } from "tailwind-merge";
+import { UploadBar as C } from "./index445.js";
+const U = ({
+  isUploading: o,
+  isSuccess: r,
+  isError: i,
+  isDraggingOver: d,
+  resetUpload: a,
+  fileName: m,
+  onClick: u
 }) => {
   const {
-    data: i
-  } = N(n), {
-    data: a
-  } = S(i?.counterpart_id), {
-    data: r,
-    isLoading: o
-  } = F(i?.counterpart_id), {
-    root: x
-  } = y();
-  if (o) return /* @__PURE__ */ e(M, {});
-  const g = _(r, a);
-  return /* @__PURE__ */ e(c, { name: "to", control: t, render: ({
-    field: p,
-    fieldState: {
-      error: s
-    }
-  }) => /* @__PURE__ */ d(T, { variant: "standard", required: !0, fullWidth: !0, error: !!s, children: [
-    /* @__PURE__ */ e(B, { MenuProps: {
-      container: x
-    }, className: "Monite-NakedField Monite-RecipientSelector", "data-testid": `${p.name}-select`, ...p, children: j(r, g).map((l) => /* @__PURE__ */ e(L, { value: l.email, children: /* @__PURE__ */ e(v, { email: l.email ?? "", isDefault: l.is_default }) }, l.id)) }),
-    s && /* @__PURE__ */ e(W, { children: s.message })
+    i18n: s
+  } = h(), w = o || r || i;
+  function p() {
+    return i ? /* @__PURE__ */ t(N, { className: "ttw:size-5 ttw:text-danger" }) : r ? /* @__PURE__ */ t(b, { className: "ttw:size-5 ttw:text-success" }) : /* @__PURE__ */ t(y, { className: "ttw:w-5 ttw:h-5" });
+  }
+  return f(() => {
+    let n;
+    return r && (n = setTimeout(() => a(), 2e3)), () => clearTimeout(n);
+  }, [r, a]), /* @__PURE__ */ t("div", { className: v("ttw:w-full ttw:h-38 ttw:bg-white ttw:box-border ttw:transition-all ttw:flex ttw:flex-col ttw:items-center ttw:justify-center ttw:text-center ttw:gap-2 ttw:rounded-lg ttw:border ttw:px-4 ttw:py-6", d ? "ttw:border-solid ttw:border-primary" : "ttw:border-dashed ttw:border-border"), onClick: () => {
+    w || u();
+  }, children: w ? /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ e("div", { className: "ttw:flex ttw:gap-4 ttw:justify-center ttw:w-full", children: [
+      /* @__PURE__ */ e("div", { className: "ttw:flex ttw:gap-2 ttw:w-1/2 ttw:items-center", children: [
+        p(),
+        /* @__PURE__ */ t("span", { className: "ttw:w-full ttw:text-sm ttw:leading-5 ttw:text-medium ttw:text-neutral ttw:truncate", children: m })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "ttw:flex ttw:gap-2 ttw:items-center", children: [
+        /* @__PURE__ */ t(C, { shouldStartProgress: o, isError: i, isSuccess: r }),
+        i && /* @__PURE__ */ t("button", { type: "button", disabled: o, onClick: a, className: "ttw:border-none ttw:cursor-pointer", children: /* @__PURE__ */ t(g, { className: "ttw:size-4" }) })
+      ] })
+    ] }),
+    i && /* @__PURE__ */ t(l, { variant: "body2", color: "destructive", className: "ttw:font-medium", children: s._("Wrong file format. Please, upload the file in JPEG, PNG or GIF format.") })
+  ] }) : /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ t("div", { className: "ttw:p-3 ttw:bg-primary ttw:rounded-full", children: /* @__PURE__ */ t(x, { className: "ttw:text-white ttw:size-5" }) }),
+    /* @__PURE__ */ e(l, { variant: "body2", className: "ttw:font-medium", children: [
+      s._("Drop your files here, or "),
+      /* @__PURE__ */ t("span", { className: "ttw:text-primary ttw:underline ttw:hover:cursor-pointer", children: s._("click to browse") })
+    ] }),
+    /* @__PURE__ */ t(l, { variant: "caption", color: "muted", children: s._("PNG, JPG or GIF (max. 10MB)") })
   ] }) });
-}, O = ({
-  invoiceId: n,
-  control: t,
-  isDisabled: i
-}) => {
-  const {
-    i18n: a
-  } = I();
-  return /* @__PURE__ */ d(C, { children: [
-    /* @__PURE__ */ e(u, { sx: {
-      mb: 3
-    }, children: /* @__PURE__ */ e(m, { sx: {
-      px: 3,
-      pt: 1,
-      pb: 1,
-      "&:last-child": {
-        pb: 1
-      }
-      // last-child is necessary to override default style of the MUI theme
-    }, children: /* @__PURE__ */ d(f, { spacing: 2, direction: "row", alignItems: "center", children: [
-      /* @__PURE__ */ e(h, { variant: "body2", sx: {
-        minWidth: "52px"
-      }, children: a._("To") }),
-      /* @__PURE__ */ e(k, { invoiceId: n, control: t })
-    ] }) }) }),
-    /* @__PURE__ */ d(u, { children: [
-      /* @__PURE__ */ e(m, { sx: {
-        px: 3,
-        py: 1,
-        borderBottomWidth: "1px",
-        borderBottomStyle: "solid",
-        borderBottomColor: "divider"
-      }, children: /* @__PURE__ */ d(f, { spacing: 2, direction: "row", alignItems: "center", children: [
-        /* @__PURE__ */ e(h, { variant: "body2", children: a._("Subject") }),
-        /* @__PURE__ */ e(c, { name: "subject", control: t, render: ({
-          field: r,
-          fieldState: {
-            error: o
-          }
-        }) => /* @__PURE__ */ e(b, { id: r.name, "data-testid": `${r.name}-input`, variant: "standard", className: "Monite-NakedField", fullWidth: !0, error: !!o, helperText: o?.message, required: !0, ...r, disabled: i }) })
-      ] }) }),
-      /* @__PURE__ */ e(m, { sx: {
-        pl: 3,
-        pr: 3,
-        pb: 3,
-        pt: 1
-      }, children: /* @__PURE__ */ e(c, { name: "body", control: t, render: ({
-        field: r,
-        fieldState: {
-          error: o
-        }
-      }) => /* @__PURE__ */ e(b, { id: r.name, "data-testid": `${r.name}-input`, variant: "standard", className: "Monite-NakedField", fullWidth: !0, error: !!o, helperText: o?.message, required: !0, multiline: !0, rows: 8, ...r, disabled: i }) }) })
-    ] })
-  ] });
 };
 export {
-  K as Form,
-  O as FormContent
+  U as DragAndDropBox
 };