@zeniai/web-components 3.16.67 → 3.16.68

package/dist/InvoiceUploadSection-DxY_x8UK.js

@@ -0,0 +1,465 @@
+import { u as d1, j as t } from "./vendor-.pnpm-DtFedGku.js";
+import * as i from "react";
+import { useState as B, useRef as k1, useEffect as B1 } from "react";
+import l from "@emotion/styled";
+import { u as c1, a as J, A as Q, S as n, C as c, j as X, R as g, b0 as $1, iu as S1, aN as b1, aO as j1, aP as E1, ax as R1, y as m1, D as r, t as o1, K as z1, aj as H1, G as C1 } from "./index-SJFqjz6R.js";
+import A1 from "./AttachmentView-zuLFijwb.js";
+import { u as T1 } from "./uploadReceipts-Dp1dvCjf.js";
+const V1 = (e) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ i.createElement("mask", { id: "mask0_623_1439", style: {
+  maskType: "alpha"
+}, maskUnits: "userSpaceOnUse", x: 0, y: -16, width: 72, height: 88 }, /* @__PURE__ */ i.createElement("rect", { y: -16, width: 72, height: 88, fill: "url(#paint0_linear_623_1439)" })), /* @__PURE__ */ i.createElement("g", { mask: "url(#mask0_623_1439)" }, /* @__PURE__ */ i.createElement("path", { d: "M24.4551 10.7549C24.8693 10.7549 25.2051 11.0907 25.2051 11.5049V13.6938L28.3834 13.6938C28.7976 13.6938 29.1334 14.0296 29.1334 14.4438C29.1334 14.8581 28.7976 15.1938 28.3834 15.1938H22.4209C21.6794 15.1944 20.9613 15.4529 20.3896 15.925C19.8179 16.3972 19.4282 17.0536 19.2875 17.7816C19.1468 18.5096 19.2638 19.264 19.6184 19.9152C19.973 20.5662 20.543 21.0736 21.2306 21.3505L27.2968 23.7781C28.3078 24.1849 29.1457 24.9308 29.6669 25.8878C30.1881 26.8448 30.36 27.9534 30.1532 29.0234C29.9464 30.0933 29.3738 31.058 28.5335 31.7519C27.6933 32.4458 26.6377 32.8257 25.548 32.8265H25.2051V35.0149C25.2051 35.4292 24.8693 35.7649 24.4551 35.7649C24.0409 35.7649 23.7051 35.4292 23.7051 35.0149V32.8265H19.567C19.1528 32.8265 18.817 32.4907 18.817 32.0765C18.817 31.6623 19.1528 31.3265 19.567 31.3265H24.4327C24.4401 31.3263 24.4476 31.3262 24.4551 31.3262C24.4626 31.3262 24.47 31.3263 24.4775 31.3265H25.5469C26.2884 31.326 27.0066 31.0675 27.5784 30.5953C28.1501 30.1232 28.5398 29.4668 28.6805 28.7387C28.8212 28.0107 28.7042 27.2564 28.3496 26.6052C27.9951 25.9543 27.4253 25.4469 26.7378 25.1701L26.7369 25.1697L20.6712 22.7422C19.6602 22.3355 18.8223 21.5896 18.3011 20.6325C17.7799 19.6755 17.608 18.5669 17.8148 17.497C18.0216 16.427 18.5942 15.4624 19.4345 14.7684C20.2748 14.0745 21.3308 13.6946 22.4206 13.6938H23.7051V11.5049C23.7051 11.0907 24.0409 10.7549 24.4551 10.7549Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M37.0762 2.2644C37.4904 2.2644 37.8262 2.60019 37.8262 3.0144V17.4438C37.8262 18.0243 38.0568 18.581 38.4672 18.9915C38.8777 19.402 39.4344 19.6326 40.0149 19.6326H54.4443C54.8585 19.6326 55.1943 19.9684 55.1943 20.3826C55.1943 20.7968 54.8585 21.1326 54.4443 21.1326H40.0149C39.0366 21.1326 38.0984 20.7439 37.4066 20.0521C36.7148 19.3604 36.3262 18.4221 36.3262 17.4438V3.0144C36.3262 2.60019 36.662 2.2644 37.0762 2.2644Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7295 42.2959C17.7295 41.8817 18.0653 41.5459 18.4795 41.5459H42.5621C42.9763 41.5459 43.3121 41.8817 43.3121 42.2959C43.3121 42.7101 42.9763 43.0459 42.5621 43.0459H18.4795C18.0653 43.0459 17.7295 42.7101 17.7295 42.2959Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7295 52.2962C17.7295 51.882 18.0653 51.5462 18.4795 51.5462L40.7106 51.5461C41.1248 51.5461 41.4606 51.8819 41.4606 52.2961C41.4606 52.7104 41.1248 53.0461 40.7106 53.0461L18.4795 53.0462C18.0653 53.0462 17.7295 52.7104 17.7295 52.2962Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M37.7295 31.9541C37.7295 31.5399 38.0653 31.2041 38.4795 31.2041H48.1263C48.5406 31.2041 48.8763 31.5399 48.8763 31.9541C48.8763 32.3683 48.5406 32.7041 48.1263 32.7041H38.4795C38.0653 32.7041 37.7295 32.3683 37.7295 31.9541Z", fill: "#A6B0B1" })), /* @__PURE__ */ i.createElement("rect", { x: 40.75, y: 40.75, width: 30.5, height: 30.5, rx: 15.25, stroke: "#A6B0B1", strokeWidth: 1.5 }), /* @__PURE__ */ i.createElement("path", { d: "M63.1838 60.0608V61.3101C63.1836 61.807 62.9861 62.2834 62.6348 62.6348C62.2835 62.9861 61.807 63.1836 61.3101 63.1837H50.69C50.1931 63.1837 49.7166 62.9863 49.3652 62.635C49.0138 62.2836 48.8164 61.807 48.8164 61.3101V60.0608", stroke: "#A6B0B1", strokeWidth: 1.25, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M55.5502 49.191C55.6639 49.0732 55.8234 49 56 49C56 49 56 49 56 49C56.0071 49 56.0143 49.0001 56.0214 49.0004C56.1742 49.0055 56.3254 49.0664 56.4421 49.1831L61.0135 53.7545C61.2576 53.9986 61.2576 54.3943 61.0135 54.6384C60.7694 54.8824 60.3737 54.8824 60.1296 54.6384L56.625 51.1337V60.7976C56.625 61.1427 56.3452 61.4226 56 61.4226C55.6548 61.4226 55.375 61.1427 55.375 60.7976V51.134L51.8707 54.6384C51.6266 54.8824 51.2308 54.8824 50.9868 54.6384C50.7427 54.3943 50.7427 53.9986 50.9868 53.7545L55.5502 49.191Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M36.8739 3.50002C37.1624 3.49921 37.4482 3.55546 37.7149 3.66552C37.9816 3.77558 38.224 3.93737 38.428 4.14141L54.3387 20.0521C54.7491 20.4624 54.9797 21.0193 54.98 21.5996L54.9696 40.7471H56.4696L56.48 21.5993C56.4798 20.621 56.091 19.6829 55.3992 18.9913L39.4887 3.08083C39.145 2.73695 38.7366 2.46443 38.2871 2.27894C37.838 2.0936 37.3567 1.99881 36.8708 2.00001H12.6888C11.7105 2.00001 10.7722 2.38865 10.0804 3.08043C9.38864 3.77222 9 4.71048 9 5.68881V59.4034C9 60.3817 9.38864 61.32 10.0804 62.0117C10.7722 62.7035 11.7105 63.0922 12.6888 63.0922H42.0703V61.5922H12.6888C12.1083 61.5922 11.5516 61.3615 11.1411 60.9511C10.7306 60.5406 10.5 59.9839 10.5 59.4034V5.68881C10.5 5.1083 10.7306 4.55158 11.1411 4.1411C11.5516 3.73062 12.1083 3.50002 12.6888 3.50002H36.8718L36.8739 3.50002Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("defs", null, /* @__PURE__ */ i.createElement("linearGradient", { id: "paint0_linear_623_1439", x1: 36, y1: -16, x2: 36, y2: 72, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ i.createElement("stop", { stopColor: "#C9ABC7", stopOpacity: 0 }), /* @__PURE__ */ i.createElement("stop", { offset: 1e-4, stopColor: "#C9ABC7" })))), P1 = (e) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 72 72", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ i.createElement("mask", { id: "mask0_836_6609", style: {
+  maskType: "alpha"
+}, maskUnits: "userSpaceOnUse", x: 0, y: -16, width: 72, height: 88 }, /* @__PURE__ */ i.createElement("rect", { y: -16, width: 72, height: 88, fill: "url(#paint0_linear_836_6609)" })), /* @__PURE__ */ i.createElement("g", { mask: "url(#mask0_836_6609)" }, /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 18.25C5.41421 18.25 5.75 18.5858 5.75 19V61C5.75 63.8995 8.10051 66.25 11 66.25H35C35.4142 66.25 35.75 66.5858 35.75 67C35.75 67.4142 35.4142 67.75 35 67.75H11C7.27208 67.75 4.25 64.7279 4.25 61V19C4.25 18.5858 4.58579 18.25 5 18.25Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { d: "M24.4561 10.7549C24.8703 10.7549 25.2061 11.0907 25.2061 11.5049V13.6938L28.3843 13.6938C28.7985 13.6938 29.1343 14.0296 29.1343 14.4438C29.1343 14.8581 28.7985 15.1938 28.3843 15.1938H22.4218C21.6804 15.1944 20.9623 15.4529 20.3906 15.925C19.8189 16.3972 19.4292 17.0536 19.2885 17.7816C19.1478 18.5096 19.2648 19.264 19.6194 19.9152C19.974 20.5662 20.5439 21.0736 21.2316 21.3505L27.2978 23.7781C28.3087 24.1849 29.1467 24.9308 29.6679 25.8878C30.1891 26.8448 30.361 27.9534 30.1542 29.0234C29.9474 30.0933 29.3748 31.058 28.5345 31.7519C27.6942 32.4458 26.6387 32.8257 25.5489 32.8265H25.2061V35.0149C25.2061 35.4292 24.8703 35.7649 24.4561 35.7649C24.0418 35.7649 23.7061 35.4292 23.7061 35.0149V32.8265H19.568C19.1538 32.8265 18.818 32.4907 18.818 32.0765C18.818 31.6623 19.1538 31.3265 19.568 31.3265H24.4337C24.4411 31.3263 24.4486 31.3262 24.4561 31.3262C24.4635 31.3262 24.471 31.3263 24.4785 31.3265H25.5479C26.2894 31.326 27.0076 31.0675 27.5794 30.5953C28.1511 30.1232 28.5408 29.4668 28.6815 28.7387C28.8222 28.0107 28.7052 27.2564 28.3506 26.6052C27.9961 25.9543 27.4263 25.4469 26.7388 25.1701L26.7378 25.1697L20.6722 22.7422C19.6612 22.3355 18.8233 21.5896 18.3021 20.6325C17.7809 19.6755 17.609 18.5669 17.8158 17.497C18.0226 16.427 18.5952 15.4624 19.4355 14.7684C20.2757 14.0745 21.3318 13.6946 22.4216 13.6938H23.7061V11.5049C23.7061 11.0907 24.0418 10.7549 24.4561 10.7549Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M37.0762 2.2644C37.4904 2.2644 37.8262 2.60019 37.8262 3.0144V17.4438C37.8262 18.0243 38.0568 18.581 38.4672 18.9915C38.8777 19.402 39.4344 19.6326 40.0149 19.6326H54.4443C54.8585 19.6326 55.1943 19.9684 55.1943 20.3826C55.1943 20.7968 54.8585 21.1326 54.4443 21.1326H40.0149C39.0366 21.1326 38.0984 20.7439 37.4066 20.0521C36.7148 19.3604 36.3262 18.4221 36.3262 17.4438V3.0144C36.3262 2.60019 36.662 2.2644 37.0762 2.2644Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7305 42.2959C17.7305 41.8817 18.0663 41.5459 18.4805 41.5459H42.5631C42.9773 41.5459 43.3131 41.8817 43.3131 42.2959C43.3131 42.7101 42.9773 43.0459 42.5631 43.0459H18.4805C18.0663 43.0459 17.7305 42.7101 17.7305 42.2959Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7305 52.2962C17.7305 51.882 18.0663 51.5462 18.4805 51.5462L40.7116 51.5461C41.1258 51.5461 41.4616 51.8819 41.4616 52.2961C41.4616 52.7104 41.1258 53.0461 40.7116 53.0461L18.4805 53.0462C18.0663 53.0462 17.7305 52.7104 17.7305 52.2962Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M37.7305 31.9541C37.7305 31.5399 38.0663 31.2041 38.4805 31.2041H48.1273C48.5415 31.2041 48.8773 31.5399 48.8773 31.9541C48.8773 32.3683 48.5415 32.7041 48.1273 32.7041H38.4805C38.0663 32.7041 37.7305 32.3683 37.7305 31.9541Z", fill: "#A6B0B1" })), /* @__PURE__ */ i.createElement("path", { d: "M63.1838 60.0608V61.3101C63.1836 61.807 62.9861 62.2834 62.6348 62.6348C62.2835 62.9861 61.807 63.1836 61.3101 63.1837H50.69C50.1931 63.1837 49.7166 62.9863 49.3652 62.635C49.0138 62.2836 48.8164 61.807 48.8164 61.3101V60.0608", stroke: "#A6B0B1", strokeWidth: 1.25, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M55.5512 49.191C55.6649 49.0732 55.8244 49 56.001 49C56.001 49 56.001 49 56.001 49C56.0081 49 56.0153 49.0001 56.0224 49.0004C56.1752 49.0055 56.3264 49.0664 56.4431 49.1831L61.0145 53.7545C61.2586 53.9986 61.2586 54.3943 61.0145 54.6384C60.7704 54.8824 60.3747 54.8824 60.1306 54.6384L56.626 51.1337V60.7976C56.626 61.1427 56.3462 61.4226 56.001 61.4226C55.6558 61.4226 55.376 61.1427 55.376 60.7976V51.134L51.8716 54.6384C51.6276 54.8824 51.2318 54.8824 50.9877 54.6384C50.7437 54.3943 50.7437 53.9986 50.9877 53.7545L55.5512 49.191Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M36.8739 3.50002C37.1624 3.49921 37.4482 3.55546 37.7149 3.66552C37.9816 3.77558 38.224 3.93737 38.428 4.14141L54.3387 20.0521C54.7491 20.4624 54.9797 21.0193 54.98 21.5996L54.9696 40.7471H56.4696L56.48 21.5993C56.4798 20.621 56.091 19.6829 55.3992 18.9913L39.4887 3.08083C39.145 2.73695 38.7366 2.46443 38.2871 2.27894C37.838 2.0936 37.3567 1.99881 36.8708 2.00001H12.6888C11.7105 2.00001 10.7722 2.38865 10.0804 3.08043C9.38864 3.77222 9 4.71048 9 5.68881V59.4034C9 60.3817 9.38864 61.32 10.0804 62.0117C10.7722 62.7035 11.7105 63.0922 12.6888 63.0922H42.0703V61.5922H12.6888C12.1083 61.5922 11.5516 61.3615 11.1411 60.9511C10.7306 60.5406 10.5 59.9839 10.5 59.4034V5.68881C10.5 5.1083 10.7306 4.55158 11.1411 4.1411C11.5516 3.73062 12.1083 3.50002 12.6888 3.50002H36.8718L36.8739 3.50002Z", fill: "#A6B0B1" }), /* @__PURE__ */ i.createElement("rect", { x: 40.75, y: 40.75, width: 30.5, height: 30.5, rx: 15.25, stroke: "#A6B0B1", strokeWidth: 1.5 }), /* @__PURE__ */ i.createElement("defs", null, /* @__PURE__ */ i.createElement("linearGradient", { id: "paint0_linear_836_6609", x1: 36, y1: -16, x2: 36, y2: 72, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ i.createElement("stop", { stopColor: "#C9ABC7", stopOpacity: 0 }), /* @__PURE__ */ i.createElement("stop", { offset: 1e-4, stopColor: "#C9ABC7" })))), D1 = (e) => /* @__PURE__ */ i.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ i.createElement("path", { d: "M15.4931 3.87109H11.4776C10.5275 3.89973 9.62765 4.30445 8.97582 4.99631C8.324 5.68817 7.97357 6.61054 8.00156 7.56068C7.99312 8.23377 8.16758 8.89652 8.50634 9.47821C8.84509 10.0599 9.33542 10.5387 9.92501 10.8635L13.5771 12.8038C14.1642 13.1295 14.6523 13.6079 14.9896 14.1884C15.3269 14.7688 15.5009 15.4297 15.4931 16.101C15.5211 17.0505 15.1712 17.9724 14.5202 18.6641C13.8691 19.3559 12.9702 19.761 12.0208 19.7906H8.00156", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M11.2829 19.7908V22.6001", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ i.createElement("path", { d: "M13.1558 1V3.87113", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), x = {
+  attachmentContainerPaddingLeft: new g(r[0], r[11]),
+  memoPaddingTopBottomRight: new g(12, r[3]),
+  labelTitleMarginTop: new g(r[5], r[6]),
+  labelTitleMarginBottom: new g(r[3], r[3]),
+  billReceiptSize: new g(60, r[10]),
+  rootContainerPaddingTop: new g(r[3], 62),
+  rootContainerPaddingRight: new g(r[3], r[6]),
+  rootContainerPaddingBottom: new g(r[5], r[9]),
+  rootContainerPaddingLeft: new g(r[3], r[8])
+}, r1 = l(z1)`
+  color: ${(e) => e.isPlaceholderText === !0 ? e.theme.colors.grey1 : e.theme.colors.hero};
+  white-space: pre-wrap;
+  text-align: center;
+  ${(e) => e.isPlaceholderText === !0 ? o1.largeRegular.css : o1.extraSmallRegular.css};
+  display: flex;
+  align-items: baseline;
+`, a1 = l(H1)`
+  color: ${(e) => e.theme.colors.hero};
+  white-space: pre-wrap;
+  text-align: center;
+  display: flex;
+  align-items: baseline;
+`, s1 = l(m1)`
+  color: ${(e) => e.theme.colors.champion};
+`, j = l.div`
+  padding: 0 2px;
+`, U1 = l.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  border: 1px dashed ${(e) => e.theme.colors.primary};
+  box-sizing: border-box;
+  border-radius: ${n.sp2};
+  padding: ${(e) => x.memoPaddingTopBottomRight.valuePx(e.windowSize)};
+  align-items: center;
+  width: 100%;
+  cursor: pointer;
+  background-color: ${(e) => e.theme.colors.grey4};
+  .uploadIconStyled {
+    fill: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    .uploadIconStyled {
+      fill: ${(e) => e.theme.colors.primary};
+    }
+    .textContent {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, p1 = l.div`
+  border: 1px dashed ${(e) => e.theme.colors.primary};
+  border-radius: ${n.sp2};
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+  box-shadow: ${(e) => `${n.sp0} 2px ${n.sp1} ${e.theme.colors.dropShadowNormal}`};
+`, _1 = l.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-radius: ${n.sp2};
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey3};
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: ${(e) => e.type === "w9" ? n.sp0 : e.showTitlebar === !0 && e.windowSize !== "small" ? n.sp3 : n.sp0};
+  img {
+    width: inherit;
+    height: inherit;
+  }
+`, M1 = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: ${(e) => x.rootContainerPaddingTop.valuePx(e.windowSize)};
+  padding-right: ${(e) => x.rootContainerPaddingRight.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => x.rootContainerPaddingBottom.valuePx(e.windowSize)};
+  padding-left: ${(e) => x.rootContainerPaddingLeft.valuePx(e.windowSize)};
+  height: ${(e) => e.windowSize === "small" && e.showAutofill ? "100%" : e.windowSize === "small" ? "490px" : "auto"};
+  overflow: ${(e) => e.windowSize === "small" ? "unset" : "hidden"};
+  width: ${(e) => e.windowSize == "small" ? "100%" : "42%"};
+  background-color: ${(e) => e.showAutofill && e.windowSize !== "small" ? c.overlayDark : e.windowSize === "small" ? e.theme.colors.grey4 : e.theme.colors.background};
+  margin-top: ${(e) => e.windowSize === "small" && (e.type === "bill" || e.type === "w9") ? "76px" : "unset"};
+`, I1 = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+`, Z1 = l.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+`, W1 = l.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-content: center;
+  align-items: center;
+  margin-top: ${n.sp3};
+`, O1 = l(C1)`
+  color: ${(e) => e.windowSize === "small" && e.themeContext.mode === "light" ? e.theme.colors.primary : c.primaryDark};
+  margin-right: ${n.sp3};
+`, G1 = l.div`
+  color: ${(e) => e.windowSize === "small" && e.themeContext.mode === "light" ? e.theme.colors.primary : c.primaryDark};
+  padding: ${n.sp1} ${n.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  &:hover {
+    border-color: ${(e) => e.windowSize === "small" && e.themeContext.mode === "light" ? e.theme.colors.primary : c.primaryDark};
+  }
+  border-radius: ${n.sp1};
+  cursor: pointer;
+`, q = l.div`
+  background: ${c.importantLight};
+  padding: ${n.sp2};
+  border-radius: ${n.sp1};
+  margin: ${n.sp3} 0;
+  max-width: 330px;
+  text-align: center;
+`, N1 = l(P1)`
+  color: ${(e) => e.theme.colors.grey1};
+  margin-bottom: ${n.sp3};
+`, q1 = l(V1)`
+  color: ${(e) => e.theme.colors.grey1};
+  margin-bottom: ${n.sp3};
+`, K1 = l(D1)`
+  width: ${n.sp7};
+  height: ${n.sp7};
+  color: ${(e) => e.theme.colors.hero};
+`, K = l(C1)`
+  color: ${c.important};
+`, J1 = ({
+  type: e = "bill",
+  attachmentIdBeingUploaded: z,
+  uploadError: w,
+  uploadErrorMsg: y,
+  showAutofill: h,
+  allowMultiFiles: E = !1,
+  customError: R,
+  dropFilePlaceholder: a,
+  showInfoText: P,
+  showTitlebar: H,
+  pdfTitle: D,
+  openSizeLimitPopup: U,
+  onUploadAttachment: $,
+  uploadStatus: A
+}) => {
+  const f = d1(), [_, v] = B(!1), S = function(o) {
+    o.preventDefault(), o.stopPropagation(), o.type === "dragenter" || o.type === "dragover" ? v(!0) : o.type === "dragleave" && _ && v(!1);
+  }, M = function(o) {
+    if (o.preventDefault(), o.stopPropagation(), v(!1), o.dataTransfer.files.length > 0) {
+      const d = o.dataTransfer.files;
+      if (E) {
+        const s = [], p = [];
+        for (let m = 0; m < d.length; m++)
+          s.push(d[m].name), p.push(d[m]);
+        $?.(p, s, "dragdrop");
+      } else {
+        const s = d[0];
+        $?.([s], [s.name], "dragdrop");
+      }
+    }
+  }, C = c1(), T = k1(null), L = J.getLocalizedStrings().spendManagement.billPay.billDetails, b = () => {
+    T.current?.click();
+  }, I = (o) => {
+    if (o.target.files != null) {
+      const d = o.target.files;
+      if (E) {
+        const s = [], p = [];
+        for (let m = 0; m < d.length; m++)
+          s.push(d[m].name), p.push(d[m]);
+        $?.(p, s, "dragdrop");
+      } else {
+        const s = d[0];
+        $?.([s], [s.name], "upload");
+      }
+    }
+  }, Z = A != null ? A.fetchState == "In-Progress" : z;
+  return /* @__PURE__ */ t.jsxs(
+    _1,
+    {
+      showTitlebar: H,
+      windowSize: C,
+      type: e,
+      children: [
+        H === !0 ? /* @__PURE__ */ t.jsx(X1, { windowSize: C, type: e, children: D }) : null,
+        Z == !0 ? /* @__PURE__ */ t.jsx(p1, { children: e === "receipt" ? /* @__PURE__ */ t.jsx(
+          Q,
+          {
+            size: "Large",
+            start: !0,
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              padding: "1.5rem",
+              borderRadius: "100%",
+              backgroundColor: `${f.mode === "light" ? c.backgroundThemeLight : c.backgroundThemeDark}`,
+              border: `2px solid ${f.mode === "light" ? c.neutralGrey3Light : c.neutralGrey3Dark}`,
+              boxShadow: `${n.sp0} 2px ${n.sp1} ${f.mode === "light" ? c.dropShadowNormalLight : c.dropShadowNormalDark}`
+            }
+          }
+        ) : /* @__PURE__ */ t.jsx(Q, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsx(
+          Q1,
+          {
+            windowSize: C,
+            showAutofill: h,
+            type: e,
+            children: /* @__PURE__ */ t.jsxs(
+              U1,
+              {
+                windowSize: C,
+                onClick: () => b(),
+                onDragEnter: S,
+                onDragLeave: S,
+                onDragOver: S,
+                onDrop: M,
+                "data-testid": X("upload-tag", e),
+                children: [
+                  /* @__PURE__ */ t.jsxs(I1, { onDragEnter: S, children: [
+                    e === "receipt" ? /* @__PURE__ */ t.jsx(
+                      N1,
+                      {
+                        width: x.billReceiptSize.valuePx(C),
+                        height: x.billReceiptSize.valuePx(C)
+                      }
+                    ) : /* @__PURE__ */ t.jsx(
+                      q1,
+                      {
+                        width: x.billReceiptSize.valuePx(C),
+                        height: x.billReceiptSize.valuePx(C)
+                      }
+                    ),
+                    e === "receipt" ? /* @__PURE__ */ t.jsxs(r1, { isPlaceholderText: !0, children: [
+                      a?.upload != null ? /* @__PURE__ */ t.jsx(j, { children: a?.upload }) : null,
+                      a?.single != null ? /* @__PURE__ */ t.jsx(j, { children: /* @__PURE__ */ t.jsx(s1, { themeContext: f, children: a?.single }) }) : null,
+                      a?.or != null ? /* @__PURE__ */ t.jsx(j, { children: a?.or }) : null,
+                      a?.multiple != null ? /* @__PURE__ */ t.jsx(j, { children: /* @__PURE__ */ t.jsx(s1, { themeContext: f, children: a?.multiple }) }) : null,
+                      a?.receipts != null ? /* @__PURE__ */ t.jsx(j, { children: a?.receipts }) : null,
+                      a?.receipt != null ? /* @__PURE__ */ t.jsx(j, { children: a?.receipt }) : null
+                    ] }) : e === "w9" ? /* @__PURE__ */ t.jsx(a1, { children: L.dropW9 }) : /* @__PURE__ */ t.jsx(a1, { children: L.dropInvoice }),
+                    R != null && /* @__PURE__ */ t.jsx(q, { children: /* @__PURE__ */ t.jsx(K, { children: R }) }),
+                    w && y === "File size is too large" && /* @__PURE__ */ t.jsx(q, { children: /* @__PURE__ */ t.jsx(K, { children: L.uploadFileSizeExceedError }) }),
+                    w && y !== "File size is too large" && /* @__PURE__ */ t.jsx(q, { children: /* @__PURE__ */ t.jsx(K, { children: L.uploadError.replace("__type__", e) }) })
+                  ] }),
+                  /* @__PURE__ */ t.jsx(
+                    $1,
+                    {
+                      fileRef: T,
+                      name: "invoice",
+                      onFileChange: I,
+                      multiple: E,
+                      sizeLimit: S1,
+                      onFileSizeError: U
+                    }
+                  ),
+                  P === !0 ? /* @__PURE__ */ t.jsxs(Z1, { children: [
+                    /* @__PURE__ */ t.jsx(K1, {}),
+                    /* @__PURE__ */ t.jsx(
+                      r1,
+                      {
+                        isPlaceholderText: !1,
+                        style: { marginLeft: n.sp1 },
+                        children: L.currencyInfo
+                      }
+                    )
+                  ] }) : null
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, Q1 = l.div`
+  padding: ${(e) => e.type === "w9" ? n.sp0 : e.windowSize === "small" && e.showAutofill === !1 ? n.sp3 : n.sp0};
+  background-color: ${(e) => e.windowSize === "small" ? e.theme.colors.grey3 : e.theme.colors.grey4};
+  height: 100%;
+  width: 100%;
+  border-radius: ${n.sp2};
+`, X1 = l(m1)`
+  padding-bottom: ${(e) => e.type === "w9" ? n.sp0 : e.windowSize === "small" ? "12px" : n.sp3};
+  background-color: ${(e) => e.windowSize === "small" ? e.theme.colors.grey4 : e.theme.colors.grey3};
+  width: 100%;
+  color: ${(e) => e.theme.colors.primary};
+`, le = ({
+  uploadInvoiceEndPoint: e,
+  authParams: z,
+  showAutofill: w,
+  allowMultiFiles: y,
+  type: h = "bill",
+  customError: E,
+  pdfTitle: R,
+  entityId: a,
+  shouldNotShowAttachment: P,
+  analytics: H,
+  style: D,
+  noAttachmentText: U,
+  dropFilePlaceholder: $,
+  showInfoText: A,
+  showTitlebar: f,
+  showTitlebarIcon: _,
+  file: v,
+  attachmentTitle: S,
+  vendorLegalName: M,
+  onInvoiceUpload: C,
+  onSkipAutofill: T,
+  setFileUploaded: L,
+  updateInvoiceUploadFetchState: b,
+  onReplaceClick: I,
+  onDeleteClick: Z,
+  uploadStatus: o,
+  isLoading: d = !1
+}) => {
+  const s = d1(), p = c1(), [m, Y] = B(!1), F = J.getLocalizedStrings().spendManagement.billPay.billDetails, [h1, W] = B(!1), [u1, e1] = B(!1), [g1, x1] = B(""), [f1, O] = B(!1), [G, w1] = B({
+    title: "",
+    description: "",
+    primaryButtonText: ""
+  });
+  B1(() => {
+    v != null ? W(!0) : W(!1);
+  }, [v]);
+  async function t1(k, u, V, l1, v1) {
+    Y(!0), e1(!1), await T1(
+      `${k}/1.0/processors/${h}`,
+      u,
+      y === !0 ? V : [V[0]],
+      y === !0 ? l1 : [l1[0]],
+      x1
+    ).then(
+      (L1) => {
+        C?.(L1), W(!0), L?.();
+      }
+    ).catch(() => {
+      e1(!0), v1?.("Error");
+    }), Y(!1);
+  }
+  const i1 = (k) => {
+    const u = J.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail;
+    k ? (w1({
+      title: u.uploadLimitTitle,
+      description: u.uploadLimitDescription,
+      primaryButtonText: u.buttons.okay
+    }), O(!0)) : O(!1);
+  }, y1 = {
+    onOkClick: () => {
+      O(!1);
+    }
+  };
+  let n1 = a != null || (o != null ? o?.fetchState == "Completed" : h1);
+  h === "bill" && P === !0 && (n1 = !1);
+  const N = h === "bill" ? "bill_pay" : h === "receipt" ? "reimbursement" : "w9";
+  return /* @__PURE__ */ t.jsx(
+    M1,
+    {
+      showAutofill: w,
+      windowSize: p,
+      style: D,
+      type: h,
+      "data-testid": X("upload-section", N),
+      children: d ? /* @__PURE__ */ t.jsx(p1, { children: /* @__PURE__ */ t.jsx(Q, { size: "ExtraLarge", start: !0 }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        f1 ? /* @__PURE__ */ t.jsx(
+          b1,
+          {
+            titleComponent: /* @__PURE__ */ t.jsx(E1, { children: G.title }),
+            descriptionComponent: /* @__PURE__ */ t.jsx(j1, { children: G.description }),
+            primaryButtonText: G.primaryButtonText,
+            action: y1
+          }
+        ) : null,
+        !d && o?.fetchState !== "In-Progress" && n1 ? /* @__PURE__ */ t.jsx(
+          A1,
+          {
+            title: S,
+            type: h,
+            file: v,
+            noAttachmentText: U,
+            showTitlebar: f,
+            showTitlebarIcon: _,
+            pdfTitle: R,
+            onReplaceClick: I,
+            onDeleteClick: Z,
+            allowMultiFiles: y,
+            openSizeLimitPopup: i1,
+            onUploadAttachment: (k, u) => {
+              b?.("In-Progress"), t1(
+                e,
+                z,
+                k,
+                u,
+                b
+              );
+            }
+          }
+        ) : /* @__PURE__ */ t.jsx(
+          J1,
+          {
+            type: h,
+            uploadError: u1,
+            uploadErrorMsg: g1,
+            attachmentIdBeingUploaded: m,
+            dropFilePlaceholder: $,
+            showInfoText: A,
+            allowMultiFiles: y,
+            customError: E,
+            showTitlebar: f,
+            pdfTitle: R,
+            showAutofill: w,
+            openSizeLimitPopup: i1,
+            uploadStatus: o,
+            onUploadAttachment: (k, u, V) => {
+              H?.trackUploadInvoice(
+                V,
+                N,
+                M
+              ), b?.("In-Progress"), t1(
+                e,
+                z,
+                k,
+                u,
+                b
+              );
+            }
+          }
+        ),
+        w ? /* @__PURE__ */ t.jsxs(W1, { windowSize: p, children: [
+          /* @__PURE__ */ t.jsx(O1, { windowSize: p, themeContext: s, children: F.skipAutofillInfo }),
+          /* @__PURE__ */ t.jsx(
+            G1,
+            {
+              windowSize: p,
+              themeContext: s,
+              "data-testid": X("skip-autofill", N),
+              onClick: () => T?.(!w),
+              children: /* @__PURE__ */ t.jsx(R1, { children: F.skipAutofill })
+            }
+          )
+        ] }) : null
+      ] })
+    }
+  );
+};
+export {
+  J1 as AttachmentElement,
+  le as default
+};