@zeniai/web-components 3.16.43 → 3.16.45

package/dist/AttachmentView-ORR8Xngf.cjs

@@ -0,0 +1,101 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-DHyNpoQL.cjs"),d=require("react"),a=require("@emotion/styled"),t=require("./index-8_ku3pKD.cjs");function D(l){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const o in l)if(o!=="default"){const c=Object.getOwnPropertyDescriptor(l,o);Object.defineProperty(r,o,c.get?c:{enumerable:!0,get:()=>l[o]})}}return r.default=l,Object.freeze(r)}const e=D(d),H=l=>e.createElement("svg",{viewBox:"0 0 256 256",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l},e.createElement("mask",{id:"mask0_7035_44507",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:21,width:256,height:235},e.createElement("path",{d:"M128 191.5C57.3075 191.5 0 220.154 0 255.5V21H256V255.5C256 220.154 198.692 191.5 128 191.5Z",fill:"#A6ACB1"})),e.createElement("g",{mask:"url(#mask0_7035_44507)"},e.createElement("path",{opacity:.48,d:"M130.32 110.317C72.9958 143.404 22.4581 128.82 6.33066 119.367L-23.5559 217.842C4.16976 236.952 83.9545 259.222 143.005 214.811C202.055 170.401 247.709 199.656 267.94 217.411L288.577 113.633C248.24 85.7948 201.975 68.9579 130.32 110.317Z",fill:"url(#paint0_linear_7035_44507)"}),e.createElement("path",{opacity:.8,d:"M156.893 121.426C205.03 166.853 257.569 164.33 275.443 158.856L281.789 261.571C250.4 273.763 167.63 277.012 120.427 220.169C73.2248 163.326 22.05 181.252 -1.73368 193.857L2.14475 88.1173C47.8185 70.3435 96.7211 64.6422 156.893 121.426Z",fill:"url(#paint1_linear_7035_44507)"})),e.createElement("path",{opacity:.14,d:"M128 191C57.3075 191 0 219.654 0 255H256C256 219.654 198.692 191 128 191Z",fill:"url(#paint2_linear_7035_44507)"}),e.createElement("path",{d:"M150.05 129.769L144.5 127L138.95 129.769L133.4 127L127.85 129.769L122.3 127L116.75 129.769L111.2 127L105.65 129.769L100.1 127V193.462C100.1 196.522 102.583 199 105.65 199H150.05C153.116 199 155.6 196.522 155.6 193.462V127L150.05 129.769ZM130.625 185.154H113.975C112.443 185.154 111.2 183.913 111.2 182.385C111.2 180.856 112.443 179.615 113.975 179.615H130.625C132.157 179.615 133.4 180.856 133.4 182.385C133.4 183.913 132.157 185.154 130.625 185.154ZM111.2 171.308C111.2 169.779 112.443 168.538 113.975 168.538H125.075C126.607 168.538 127.85 169.779 127.85 171.308C127.85 172.836 126.607 174.077 125.075 174.077H113.975C112.443 174.077 111.2 172.836 111.2 171.308ZM130.625 163H113.975C112.443 163 111.2 161.759 111.2 160.231C111.2 158.702 112.443 157.462 113.975 157.462H130.625C132.157 157.462 133.4 158.702 133.4 160.231C133.4 161.759 132.157 163 130.625 163ZM141.725 185.154C140.193 185.154 138.95 183.913 138.95 182.385C138.95 180.856 140.193 179.615 141.725 179.615C143.257 179.615 144.5 180.856 144.5 182.385C144.5 183.913 143.257 185.154 141.725 185.154ZM141.725 174.077C140.193 174.077 138.95 172.836 138.95 171.308C138.95 169.779 140.193 168.538 141.725 168.538C143.257 168.538 144.5 169.779 144.5 171.308C144.5 172.836 143.257 174.077 141.725 174.077ZM141.725 163C140.193 163 138.95 161.759 138.95 160.231C138.95 158.702 140.193 157.462 141.725 157.462C143.257 157.462 144.5 158.702 144.5 160.231C144.5 161.759 143.257 163 141.725 163ZM141.725 146.385H113.975C112.443 146.385 111.2 145.144 111.2 143.615C111.2 142.087 112.443 140.846 113.975 140.846H141.725C143.257 140.846 144.5 142.087 144.5 143.615C144.5 145.144 143.257 146.385 141.725 146.385Z",fill:"#D4D8DD"}),e.createElement("circle",{cx:164,cy:175,r:4,fill:"#E9ECF0"}),e.createElement("circle",{cx:88,cy:95,r:4,fill:"#E9ECF0"}),e.createElement("circle",{cx:192,cy:149,r:3,fill:"#F3F5F7"}),e.createElement("circle",{cx:84,cy:186,r:3,fill:"#F3F5F7"}),e.createElement("path",{d:"M81.8285 157.243C82.219 157.633 82.8522 157.633 83.2427 157.243C83.6332 156.852 83.6332 156.219 83.2427 155.828L80.4143 153L83.2427 150.172C83.6332 149.781 83.6332 149.148 83.2427 148.757C82.8522 148.367 82.219 148.367 81.8285 148.757L79.0001 151.586L76.1716 148.757C75.7811 148.367 75.1479 148.367 74.7574 148.757C74.3669 149.148 74.3669 149.781 74.7574 150.172L77.5858 153L74.7574 155.828C74.3669 156.219 74.3669 156.852 74.7574 157.243C75.1479 157.633 75.7811 157.633 76.1716 157.243L79.0001 154.414L81.8285 157.243Z",fill:"#E9ECF0"}),e.createElement("path",{d:"M174.057 115.828C174.318 116.089 174.74 116.089 175 115.828C175.26 115.568 175.26 115.146 175 114.885L173.114 113L175 111.114C175.26 110.854 175.26 110.432 175 110.171C174.74 109.911 174.318 109.911 174.057 110.171L172.172 112.057L170.286 110.171C170.026 109.911 169.604 109.911 169.343 110.171C169.083 110.432 169.083 110.854 169.343 111.114L171.229 113L169.343 114.885C169.083 115.146 169.083 115.568 169.343 115.828C169.604 116.089 170.026 116.089 170.286 115.828L172.172 113.943L174.057 115.828Z",fill:"#E9ECF0"}),e.createElement("circle",{cx:48,cy:139,r:2,fill:"#E9ECF0"}),e.createElement("defs",null,e.createElement("linearGradient",{id:"paint0_linear_7035_44507",x1:28.1591,y1:163.749,x2:270.657,y2:184.887,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"white",stopOpacity:0}),e.createElement("stop",{offset:.494355,stopColor:"white"}),e.createElement("stop",{offset:1,stopColor:"white",stopOpacity:0})),e.createElement("linearGradient",{id:"paint1_linear_7035_44507",x1:243.958,y1:197,x2:3.13134,y2:161.584,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"white",stopOpacity:0}),e.createElement("stop",{offset:.494355,stopColor:"white"}),e.createElement("stop",{offset:1,stopColor:"white",stopOpacity:0})),e.createElement("linearGradient",{id:"paint2_linear_7035_44507",x1:128,y1:191,x2:128,y2:223,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#A6ACB1"}),e.createElement("stop",{offset:1,stopColor:"#A6ACB1",stopOpacity:0})))),Z=l=>e.createElement("svg",{viewBox:"0 0 256 256",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l},e.createElement("mask",{id:"mask0_7062_39278",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:21,width:256,height:235},e.createElement("path",{d:"M128 191.5C57.3075 191.5 0 220.154 0 255.5V21H256V255.5C256 220.154 198.692 191.5 128 191.5Z",fill:"#A6ACB1"})),e.createElement("g",{mask:"url(#mask0_7062_39278)"},e.createElement("path",{opacity:.32,d:"M130.32 110.317C72.9958 143.404 22.4581 128.82 6.33066 119.367L-23.5559 217.842C4.16976 236.952 83.9545 259.222 143.005 214.811C202.055 170.401 247.709 199.656 267.94 217.411L288.577 113.633C248.24 85.7948 201.975 68.9579 130.32 110.317Z",fill:"url(#paint0_linear_7062_39278)"}),e.createElement("path",{d:"M156.893 121.426C205.03 166.853 257.569 164.33 275.443 158.856L281.789 261.571C250.4 273.763 167.63 277.012 120.427 220.169C73.2248 163.326 22.05 181.252 -1.73368 193.857L2.14475 88.1173C47.8185 70.3435 96.7211 64.6422 156.893 121.426Z",fill:"url(#paint1_linear_7062_39278)"})),e.createElement("path",{opacity:.32,d:"M128 191C57.3075 191 0 219.654 0 255H256C256 219.654 198.692 191 128 191Z",fill:"url(#paint2_linear_7062_39278)"}),e.createElement("path",{d:"M150.05 129.769L144.5 127L138.95 129.769L133.4 127L127.85 129.769L122.3 127L116.75 129.769L111.2 127L105.65 129.769L100.1 127V193.462C100.1 196.522 102.583 199 105.65 199H150.05C153.116 199 155.6 196.522 155.6 193.462V127L150.05 129.769ZM130.625 185.154H113.975C112.443 185.154 111.2 183.913 111.2 182.385C111.2 180.856 112.443 179.615 113.975 179.615H130.625C132.157 179.615 133.4 180.856 133.4 182.385C133.4 183.913 132.157 185.154 130.625 185.154ZM111.2 171.308C111.2 169.779 112.443 168.538 113.975 168.538H125.075C126.607 168.538 127.85 169.779 127.85 171.308C127.85 172.836 126.607 174.077 125.075 174.077H113.975C112.443 174.077 111.2 172.836 111.2 171.308ZM130.625 163H113.975C112.443 163 111.2 161.759 111.2 160.231C111.2 158.702 112.443 157.462 113.975 157.462H130.625C132.157 157.462 133.4 158.702 133.4 160.231C133.4 161.759 132.157 163 130.625 163ZM141.725 185.154C140.193 185.154 138.95 183.913 138.95 182.385C138.95 180.856 140.193 179.615 141.725 179.615C143.257 179.615 144.5 180.856 144.5 182.385C144.5 183.913 143.257 185.154 141.725 185.154ZM141.725 174.077C140.193 174.077 138.95 172.836 138.95 171.308C138.95 169.779 140.193 168.538 141.725 168.538C143.257 168.538 144.5 169.779 144.5 171.308C144.5 172.836 143.257 174.077 141.725 174.077ZM141.725 163C140.193 163 138.95 161.759 138.95 160.231C138.95 158.702 140.193 157.462 141.725 157.462C143.257 157.462 144.5 158.702 144.5 160.231C144.5 161.759 143.257 163 141.725 163ZM141.725 146.385H113.975C112.443 146.385 111.2 145.144 111.2 143.615C111.2 142.087 112.443 140.846 113.975 140.846H141.725C143.257 140.846 144.5 142.087 144.5 143.615C144.5 145.144 143.257 146.385 141.725 146.385Z",fill:"#54595C"}),e.createElement("circle",{cx:164,cy:175,r:4,fill:"#3E4043"}),e.createElement("circle",{cx:88,cy:95,r:4,fill:"#2C2E2F"}),e.createElement("circle",{cx:192,cy:149,r:3,fill:"#2C2E2F"}),e.createElement("circle",{cx:84,cy:186,r:3,fill:"#2C2E2F"}),e.createElement("path",{d:"M81.8285 157.243C82.219 157.633 82.8522 157.633 83.2427 157.243C83.6332 156.852 83.6332 156.219 83.2427 155.828L80.4143 153L83.2427 150.172C83.6332 149.781 83.6332 149.148 83.2427 148.757C82.8522 148.367 82.219 148.367 81.8285 148.757L79.0001 151.586L76.1716 148.757C75.7811 148.367 75.1479 148.367 74.7574 148.757C74.3669 149.148 74.3669 149.781 74.7574 150.172L77.5858 153L74.7574 155.828C74.3669 156.219 74.3669 156.852 74.7574 157.243C75.1479 157.633 75.7811 157.633 76.1716 157.243L79.0001 154.414L81.8285 157.243Z",fill:"#3E4043"}),e.createElement("path",{d:"M174.057 115.828C174.318 116.089 174.74 116.089 175 115.828C175.26 115.568 175.26 115.146 175 114.885L173.114 113L175 111.114C175.26 110.854 175.26 110.432 175 110.171C174.74 109.911 174.318 109.911 174.057 110.171L172.172 112.057L170.286 110.171C170.026 109.911 169.604 109.911 169.343 110.171C169.083 110.432 169.083 110.854 169.343 111.114L171.229 113L169.343 114.885C169.083 115.146 169.083 115.568 169.343 115.828C169.604 116.089 170.026 116.089 170.286 115.828L172.172 113.943L174.057 115.828Z",fill:"#2C2E2F"}),e.createElement("circle",{cx:48,cy:139,r:2,fill:"#2C2E2F"}),e.createElement("defs",null,e.createElement("linearGradient",{id:"paint0_linear_7062_39278",x1:28.1591,y1:163.749,x2:270.657,y2:184.887,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#202122",stopOpacity:0}),e.createElement("stop",{offset:.494355,stopColor:"#2C2E2F"}),e.createElement("stop",{offset:1,stopColor:"#202122",stopOpacity:0})),e.createElement("linearGradient",{id:"paint1_linear_7062_39278",x1:243.958,y1:197,x2:3.13134,y2:161.584,gradientUnits:"userSpaceOnUse"},e.createElement("stop",{stopColor:"#202122",stopOpacity:0}),e.createElement("stop",{offset:.494355,stopColor:"#2C2E2F"}),e.createElement("stop",{offset:1,stopColor:"#202122",stopOpacity:0})),e.createElement("linearGradient",{id:"paint2_linear_7062_39278",x1:128,y1:191,x2:128,y2:236,gradientUnits:"userSpaceOnUse"},e.createElement("stop",null),e.createElement("stop",{offset:1,stopOpacity:0})))),F=l=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",fill:"none",...l},e.createElement("circle",{cx:128,cy:128,r:128,fill:"url(#paint0_radial_815_6867)",fillOpacity:.15}),e.createElement("mask",{id:"mask0_815_6867",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:0,width:256,height:256},e.createElement("circle",{cx:128,cy:128,r:128,fill:"url(#paint1_radial_815_6867)"})),e.createElement("g",{mask:"url(#mask0_815_6867)"},e.createElement("path",{d:"M327.25 292C327.25 327.003 305.08 358.797 269.017 381.878C232.962 404.953 183.107 419.25 128 419.25C72.8929 419.25 23.0379 404.953 -13.0171 381.878C-49.0805 358.797 -71.25 327.003 -71.25 292C-71.25 256.997 -49.0805 225.203 -13.0171 202.122C23.0379 179.047 72.8929 164.75 128 164.75C183.107 164.75 232.962 179.047 269.017 202.122C305.08 225.203 327.25 256.997 327.25 292Z",stroke:"#545B5C",strokeWidth:1.5})),e.createElement("path",{d:"M77.792 77.2179C77.6078 77.0337 77.3091 77.0337 77.1249 77.2179C76.9407 77.4021 76.9407 77.7008 77.1249 77.885L79.2919 80.052L77.1769 82.167C76.9927 82.3512 76.9927 82.6499 77.1769 82.8341C77.3611 83.0183 77.6598 83.0183 77.844 82.8341L79.959 80.7191L82.1146 82.8747C82.2988 83.059 82.5975 83.059 82.7817 82.8747C82.966 82.6905 82.966 82.3918 82.7817 82.2076L80.6261 80.052L82.8337 77.8444C83.018 77.6602 83.018 77.3615 82.8337 77.1772C82.6495 76.993 82.3508 76.993 82.1666 77.1772L79.959 79.3849L77.792 77.2179Z",fill:"#545B5C"}),e.createElement("path",{d:"M180.931 125.913C180.793 125.775 180.569 125.775 180.43 125.913C180.292 126.052 180.292 126.276 180.43 126.414L182.056 128.039L180.469 129.625C180.331 129.763 180.331 129.987 180.469 130.126C180.607 130.264 180.832 130.264 180.97 130.126L182.556 128.539L184.173 130.156C184.311 130.294 184.535 130.294 184.673 130.156C184.811 130.018 184.811 129.794 184.673 129.656L183.056 128.039L184.712 126.383C184.85 126.245 184.85 126.021 184.712 125.883C184.574 125.745 184.35 125.745 184.212 125.883L182.556 127.539L180.931 125.913Z",fill:"#545B5C"}),e.createElement("path",{d:"M77.2907 156.829C77.2569 156.703 77.1276 156.629 77.0018 156.662C76.876 156.696 76.8013 156.826 76.835 156.951L77.2316 158.431L75.787 158.818C75.6612 158.852 75.5865 158.982 75.6202 159.107C75.654 159.233 75.7833 159.308 75.9091 159.274L77.3537 158.887L77.7482 160.359C77.7819 160.485 77.9112 160.56 78.0371 160.526C78.1629 160.492 78.2376 160.363 78.2038 160.237L77.8093 158.765L79.3172 158.361C79.443 158.327 79.5177 158.198 79.4839 158.072C79.4502 157.946 79.3209 157.872 79.1951 157.905L77.6872 158.309L77.2907 156.829Z",fill:"#545B5C"}),e.createElement("circle",{cx:80,cy:128,r:3.5,stroke:"#545B5C"}),e.createElement("circle",{cx:174,cy:94,r:1.5,stroke:"#545B5C"}),e.createElement("circle",{cx:167,cy:167,r:2.5,fill:"#727979",stroke:"#545B5C"}),e.createElement("path",{d:"M162.001 156L155.914 147.649V136.522C156.035 132.188 149.632 127.123 144.957 123.13",stroke:"#727979",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M149.875 141.391L143.326 134.647C142.841 134.163 142.184 133.891 141.499 133.891C140.815 133.891 140.158 134.163 139.673 134.647C139.189 135.131 138.917 135.788 138.917 136.473C138.917 137.158 139.189 137.815 139.673 138.299L146.174 146.261V149.913C146.174 152.348 149.973 156 149.973 156",stroke:"#727979",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M114.455 100.755C114.869 100.755 115.205 101.091 115.205 101.505V104.444C115.205 104.858 114.869 105.194 114.455 105.194C114.041 105.194 113.705 104.858 113.705 104.444V101.505C113.705 101.091 114.041 100.755 114.455 100.755Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M112.889 103.694L118.852 103.694C119.266 103.694 119.602 104.03 119.602 104.444C119.602 104.858 119.266 105.194 118.852 105.194H112.89C112.148 105.194 111.43 105.453 110.858 105.925C110.287 106.397 109.897 107.054 109.756 107.782C109.616 108.51 109.733 109.264 110.087 109.915C110.442 110.566 111.012 111.074 111.699 111.35C111.7 111.351 111.699 111.35 111.699 111.35L117.766 113.778C118.777 114.185 119.614 114.931 120.136 115.888C120.657 116.845 120.829 117.953 120.622 119.023C120.415 120.093 119.843 121.058 119.002 121.752C118.162 122.446 117.106 122.826 116.017 122.826H110.036C109.622 122.826 109.286 122.491 109.286 122.076C109.286 121.662 109.622 121.326 110.036 121.326H116.016C116.757 121.326 117.475 121.067 118.047 120.595C118.619 120.123 119.009 119.467 119.149 118.739C119.29 118.011 119.173 117.256 118.818 116.605C118.464 115.954 117.894 115.447 117.207 115.17C117.206 115.17 117.206 115.17 117.206 115.17L111.14 112.742C110.129 112.335 109.291 111.59 108.77 110.633C108.249 109.675 108.077 108.567 108.284 107.497C108.49 106.427 109.063 105.462 109.903 104.768C110.744 104.075 111.8 103.695 112.889 103.694Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M114.455 121.326C114.869 121.326 115.205 121.662 115.205 122.076V125.015C115.205 125.429 114.869 125.765 114.455 125.765C114.041 125.765 113.705 125.429 113.705 125.015V122.076C113.705 121.662 114.041 121.326 114.455 121.326Z",fill:"#727979"}),e.createElement("path",{d:"M126.715 95.6655C126.448 95.5555 126.162 95.4992 125.874 95.5L125.872 95.5H103.689C103.108 95.5 102.552 95.7306 102.141 96.1411C101.731 96.5516 101.5 97.1083 101.5 97.6888V151.403C101.5 151.984 101.731 152.54 102.141 152.951C102.552 153.361 103.108 153.592 103.689 153.592H141.77V155.092H103.689C102.71 155.092 101.772 154.703 101.08 154.011C100.389 153.32 100 152.381 100 151.403V97.6888C100 96.7105 100.389 95.7722 101.08 95.0804C101.772 94.3886 102.71 94 103.689 94H125.871C126.357 93.9988 126.838 94.0936 127.287 94.2789C127.736 94.4644 128.145 94.7369 128.489 95.0808L144.399 110.991C145.091 111.683 145.48 112.621 145.48 113.599L145.469 135.501H143.969L143.98 113.599C143.979 113.019 143.749 112.462 143.338 112.052L127.428 96.1414C127.224 95.9374 126.981 95.7756 126.715 95.6655Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M126.076 94.2644C126.49 94.2644 126.826 94.6002 126.826 95.0144V109.444C126.826 110.024 127.057 110.581 127.467 110.991C127.878 111.402 128.434 111.633 129.015 111.633H143.444C143.859 111.633 144.194 111.968 144.194 112.383C144.194 112.797 143.859 113.133 143.444 113.133H129.015C128.037 113.133 127.098 112.744 126.407 112.052C125.715 111.36 125.326 110.422 125.326 109.444V95.0144C125.326 94.6002 125.662 94.2644 126.076 94.2644Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M110.729 132.296C110.729 131.882 111.065 131.546 111.479 131.546H135.562C135.976 131.546 136.312 131.882 136.312 132.296C136.312 132.71 135.976 133.046 135.562 133.046H111.479C111.065 133.046 110.729 132.71 110.729 132.296Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M110.729 142.296C110.729 141.882 111.065 141.546 111.479 141.546H135.562C135.976 141.546 136.312 141.882 136.312 142.296C136.312 142.71 135.976 143.046 135.562 143.046H111.479C111.065 143.046 110.729 142.71 110.729 142.296Z",fill:"#727979"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M125.729 121.954C125.729 121.54 126.065 121.204 126.479 121.204H136.126C136.541 121.204 136.876 121.54 136.876 121.954C136.876 122.368 136.541 122.704 136.126 122.704H126.479C126.065 122.704 125.729 122.368 125.729 121.954Z",fill:"#727979"}),e.createElement("path",{d:"M203.5 96.5C203.627 95.875 204.643 95 206.929 94.625C209.033 94.2798 209.849 92.875 209.976 92M204.643 99C205.024 98.375 206.243 97.8 208.071 97.5C210.357 97.125 211.119 95.625 211.5 94.5",stroke:"#3E4343",strokeLinecap:"round"}),e.createElement("path",{d:"M51.5 152.5C51.373 151.875 50.3571 151 48.0714 150.625C45.9671 150.28 45.1508 148.875 45.0238 148M50.3571 155C49.9762 154.375 48.7571 153.8 46.9286 153.5C44.6429 153.125 43.881 151.625 43.5 150.5",stroke:"#3E4343",strokeLinecap:"round"}),e.createElement("defs",null,e.createElement("radialGradient",{id:"paint0_radial_815_6867",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(128 128) rotate(143.842) scale(128.81)"},e.createElement("stop",null),e.createElement("stop",{offset:1,stopOpacity:0})),e.createElement("radialGradient",{id:"paint1_radial_815_6867",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(128 128) rotate(143.842) scale(128.81)"},e.createElement("stop",{stopColor:"white"}),e.createElement("stop",{offset:1,stopColor:"white",stopOpacity:0})))),B=l=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",fill:"none",...l},e.createElement("circle",{cx:128,cy:128,r:128,fill:"url(#paint0_radial_720_6441)"}),e.createElement("mask",{id:"mask0_720_6441",style:{maskType:"alpha"},maskUnits:"userSpaceOnUse",x:0,y:0,width:256,height:256},e.createElement("circle",{cx:128,cy:128,r:128,fill:"url(#paint1_radial_720_6441)"})),e.createElement("g",{mask:"url(#mask0_720_6441)"},e.createElement("path",{d:"M327.25 292C327.25 327.003 305.08 358.797 269.017 381.878C232.962 404.953 183.107 419.25 128 419.25C72.8929 419.25 23.0379 404.953 -13.0171 381.878C-49.0805 358.797 -71.25 327.003 -71.25 292C-71.25 256.997 -49.0805 225.203 -13.0171 202.122C23.0379 179.047 72.8929 164.75 128 164.75C183.107 164.75 232.962 179.047 269.017 202.122C305.08 225.203 327.25 256.997 327.25 292Z",stroke:"#D4DCDD",strokeWidth:1.5})),e.createElement("path",{d:"M77.792 77.2179C77.6078 77.0337 77.3091 77.0337 77.1249 77.2179C76.9407 77.4021 76.9407 77.7008 77.1249 77.885L79.2919 80.052L77.1769 82.167C76.9927 82.3512 76.9927 82.6499 77.1769 82.8341C77.3611 83.0183 77.6598 83.0183 77.844 82.8341L79.959 80.7191L82.1146 82.8747C82.2988 83.059 82.5975 83.059 82.7817 82.8747C82.966 82.6905 82.966 82.3918 82.7817 82.2076L80.6261 80.052L82.8337 77.8444C83.018 77.6602 83.018 77.3615 82.8337 77.1772C82.6495 76.993 82.3508 76.993 82.1666 77.1772L79.959 79.3849L77.792 77.2179Z",fill:"#D4DCDD"}),e.createElement("path",{d:"M180.931 125.913C180.793 125.775 180.569 125.775 180.43 125.913C180.292 126.052 180.292 126.276 180.43 126.414L182.056 128.039L180.469 129.625C180.331 129.763 180.331 129.987 180.469 130.126C180.607 130.264 180.832 130.264 180.97 130.126L182.556 128.539L184.173 130.156C184.311 130.294 184.535 130.294 184.673 130.156C184.811 130.018 184.811 129.794 184.673 129.656L183.056 128.039L184.712 126.383C184.85 126.245 184.85 126.021 184.712 125.883C184.574 125.745 184.35 125.745 184.212 125.883L182.556 127.539L180.931 125.913Z",fill:"#D4DCDD"}),e.createElement("path",{d:"M77.2907 156.829C77.2569 156.703 77.1276 156.629 77.0018 156.662C76.876 156.696 76.8013 156.826 76.835 156.951L77.2316 158.431L75.787 158.818C75.6612 158.852 75.5865 158.982 75.6202 159.107C75.654 159.233 75.7833 159.308 75.9091 159.274L77.3537 158.887L77.7482 160.359C77.7819 160.485 77.9112 160.56 78.0371 160.526C78.1629 160.492 78.2376 160.363 78.2038 160.237L77.8093 158.765L79.3172 158.361C79.443 158.327 79.5177 158.198 79.4839 158.072C79.4502 157.946 79.3209 157.872 79.1951 157.905L77.6872 158.309L77.2907 156.829Z",fill:"#D4DCDD"}),e.createElement("circle",{cx:80,cy:128,r:3.5,stroke:"#D4DCDD"}),e.createElement("circle",{cx:174,cy:94,r:1.5,stroke:"#D4DCDD"}),e.createElement("circle",{cx:167,cy:167,r:2.5,fill:"#F3F7F7",stroke:"#D4DCDD"}),e.createElement("path",{d:"M162.001 156L155.914 147.649V136.522C156.035 132.188 149.632 127.123 144.957 123.13",stroke:"#A6B0B1",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{d:"M149.875 141.391L143.326 134.647C142.841 134.163 142.184 133.891 141.499 133.891C140.815 133.891 140.158 134.163 139.673 134.647C139.189 135.131 138.917 135.788 138.917 136.473C138.917 137.158 139.189 137.815 139.673 138.299L146.174 146.261V149.913C146.174 152.348 149.973 156 149.973 156",stroke:"#A6B0B1",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M114.455 100.755C114.869 100.755 115.205 101.091 115.205 101.505V104.444C115.205 104.858 114.869 105.194 114.455 105.194C114.041 105.194 113.705 104.858 113.705 104.444V101.505C113.705 101.091 114.041 100.755 114.455 100.755Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M112.889 103.694L118.852 103.694C119.266 103.694 119.602 104.03 119.602 104.444C119.602 104.858 119.266 105.194 118.852 105.194H112.89C112.148 105.194 111.43 105.453 110.858 105.925C110.287 106.397 109.897 107.054 109.756 107.782C109.616 108.51 109.733 109.264 110.087 109.915C110.442 110.566 111.012 111.074 111.699 111.35C111.7 111.351 111.699 111.35 111.699 111.35L117.766 113.778C118.777 114.185 119.614 114.931 120.136 115.888C120.657 116.845 120.829 117.953 120.622 119.023C120.415 120.093 119.843 121.058 119.002 121.752C118.162 122.446 117.106 122.826 116.017 122.826H110.036C109.622 122.826 109.286 122.491 109.286 122.076C109.286 121.662 109.622 121.326 110.036 121.326H116.016C116.757 121.326 117.475 121.067 118.047 120.595C118.619 120.123 119.009 119.467 119.149 118.739C119.29 118.011 119.173 117.256 118.818 116.605C118.464 115.954 117.894 115.447 117.207 115.17C117.206 115.17 117.206 115.17 117.206 115.17L111.14 112.742C110.129 112.335 109.291 111.59 108.77 110.633C108.249 109.675 108.077 108.567 108.284 107.497C108.49 106.427 109.063 105.462 109.903 104.768C110.744 104.075 111.8 103.695 112.889 103.694Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M114.455 121.326C114.869 121.326 115.205 121.662 115.205 122.076V125.015C115.205 125.429 114.869 125.765 114.455 125.765C114.041 125.765 113.705 125.429 113.705 125.015V122.076C113.705 121.662 114.041 121.326 114.455 121.326Z",fill:"#A6B0B1"}),e.createElement("path",{d:"M126.715 95.6655C126.448 95.5555 126.162 95.4992 125.874 95.5L125.872 95.5H103.689C103.108 95.5 102.552 95.7306 102.141 96.1411C101.731 96.5516 101.5 97.1083 101.5 97.6888V151.403C101.5 151.984 101.731 152.54 102.141 152.951C102.552 153.361 103.108 153.592 103.689 153.592H141.77V155.092H103.689C102.71 155.092 101.772 154.703 101.08 154.011C100.389 153.32 100 152.381 100 151.403V97.6888C100 96.7105 100.389 95.7722 101.08 95.0804C101.772 94.3886 102.71 94 103.689 94H125.871C126.357 93.9988 126.838 94.0936 127.287 94.2789C127.736 94.4644 128.145 94.7369 128.489 95.0808L144.399 110.991C145.091 111.683 145.48 112.621 145.48 113.599L145.469 135.501H143.969L143.98 113.599C143.979 113.019 143.749 112.462 143.338 112.052L127.428 96.1414C127.224 95.9374 126.981 95.7756 126.715 95.6655Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M126.076 94.2644C126.49 94.2644 126.826 94.6002 126.826 95.0144V109.444C126.826 110.024 127.057 110.581 127.467 110.991C127.878 111.402 128.434 111.633 129.015 111.633H143.444C143.859 111.633 144.194 111.968 144.194 112.383C144.194 112.797 143.859 113.133 143.444 113.133H129.015C128.037 113.133 127.098 112.744 126.407 112.052C125.715 111.36 125.326 110.422 125.326 109.444V95.0144C125.326 94.6002 125.662 94.2644 126.076 94.2644Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M110.729 132.296C110.729 131.882 111.065 131.546 111.479 131.546H135.562C135.976 131.546 136.312 131.882 136.312 132.296C136.312 132.71 135.976 133.046 135.562 133.046H111.479C111.065 133.046 110.729 132.71 110.729 132.296Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M110.729 142.296C110.729 141.882 111.065 141.546 111.479 141.546H135.562C135.976 141.546 136.312 141.882 136.312 142.296C136.312 142.71 135.976 143.046 135.562 143.046H111.479C111.065 143.046 110.729 142.71 110.729 142.296Z",fill:"#A6B0B1"}),e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M125.729 121.954C125.729 121.54 126.065 121.204 126.479 121.204H136.126C136.541 121.204 136.876 121.54 136.876 121.954C136.876 122.368 136.541 122.704 136.126 122.704H126.479C126.065 122.704 125.729 122.368 125.729 121.954Z",fill:"#A6B0B1"}),e.createElement("path",{d:"M203.5 96.5C203.627 95.875 204.643 95 206.929 94.625C209.033 94.2798 209.849 92.875 209.976 92M204.643 99C205.024 98.375 206.243 97.8 208.071 97.5C210.357 97.125 211.119 95.625 211.5 94.5",stroke:"#E9F0F0",strokeLinecap:"round"}),e.createElement("path",{d:"M51.5 152.5C51.373 151.875 50.3571 151 48.0714 150.625C45.9671 150.28 45.1508 148.875 45.0238 148M50.3571 155C49.9762 154.375 48.7571 153.8 46.9286 153.5C44.6429 153.125 43.881 151.625 43.5 150.5",stroke:"#E9F0F0",strokeLinecap:"round"}),e.createElement("defs",null,e.createElement("radialGradient",{id:"paint0_radial_720_6441",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(128 128) rotate(143.842) scale(128.81)"},e.createElement("stop",{stopColor:"#FAFCFC"}),e.createElement("stop",{offset:1,stopColor:"#FAFCFC",stopOpacity:0})),e.createElement("radialGradient",{id:"paint1_radial_720_6441",cx:0,cy:0,r:1,gradientUnits:"userSpaceOnUse",gradientTransform:"translate(128 128) rotate(143.842) scale(128.81)"},e.createElement("stop",null),e.createElement("stop",{offset:1,stopOpacity:0})))),O=a.div`
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  cursor: pointer;
+  padding: ${t.Space.sp3};
+  img {
+    width: 100% !important;
+  }
+  .actionIcons {
+    ${l=>l.windowSize==="small"&&`
+    display: flex;
+  `}
+  }
+  &:hover {
+    .actionIcons {
+      display: flex;
+    }
+  }
+`,V=a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`,b=a.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${l=>l.windowSize==="small"?t.Space.sp2:t.Space.sp0};
+  overflow: ${l=>l.windowSize==="small"?"unset":"hidden"};
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  background: ${l=>l.theme.colors.grey3};
+  border-radius: ${t.Space.sp2};
+`,U=a.div`
+  margin-top: -${t.Space.sp11};
+  color: ${l=>l.theme.colors.hero};
+`,A=a(H)`
+  margin-bottom: ${t.Space.sp4};
+  height: 256px;
+  width: 256px;
+`,$=a(Z)`
+  margin-bottom: ${t.Space.sp4};
+  height: 256px;
+  width: 256px;
+`,T=a(B)`
+  margin-bottom: ${t.Space.sp4};
+  height: 256px;
+  width: 256px;
+`,I=a(F)`
+  margin-bottom: ${t.Space.sp4};
+  height: 256px;
+  width: 256px;
+`,N="invoice",z=({type:l="bill",file:r,noAttachmentText:o,showTitlebar:c,showTitlebarIcon:m,pdfTitle:u,allowMultiFiles:E,title:h,onReplaceClick:k,onDeleteClick:C,openSizeLimitPopup:L,onUploadAttachment:f})=>{const p=t.useWindowSizeContext(),[w,s]=d.useState(!1),M=t.appLocale.getLocalizedStrings().spendManagement.billPay.billDetails,x=t.appLocale.getLocalizedStrings().spendManagement.reimbursement.reimbursementDetail,R=n.useTheme(),v=()=>{s(!1)},g=d.useRef(null),j=()=>{g.current?.click()},S=i=>{if(i.target.files!=null){const _=i.target.files[0];f?.([_],[_.name])}},y=l==="bill"||l==="w9";return n.jsxRuntimeExports.jsxs(b,{windowSize:p,children:[h??null,r?.contentType=="application/pdf"&&r.fileDownloadUrl!=null?n.jsxRuntimeExports.jsx(t.RenderPdf,{fileUrl:r.fileDownloadUrl.href,isFullScreen:!1,showTitlebar:c,showTitlebarIcon:m,pdfTitle:u,onDeleteClick:C,onReplaceClick:k,onUploadAttachment:f,setShowFullScreenView:s,allowMultiFiles:E,openSizeLimitPopup:L}):(r?.contentType=="image/jpeg"||r?.contentType=="image/jpg"||r?.contentType=="image/png"||r?.contentType=="image/heic"||r?.contentType=="image/heif")&&r?.fileDownloadUrl!=null?n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(t.FileInputElement,{fileRef:g,name:N,onFileChange:S,multiple:E,sizeLimit:t.SizeLimit32MB,onFileSizeError:i=>L?.(i)}),n.jsxRuntimeExports.jsx(O,{onClick:()=>s(!0),windowSize:p,"data-testid":t.generateDataTestId("attachment-container",r?.fileId),children:n.jsxRuntimeExports.jsxs(W,{children:[c===!0?n.jsxRuntimeExports.jsxs(G,{children:[n.jsxRuntimeExports.jsx(P,{children:u}),m===!0?n.jsxRuntimeExports.jsxs(q,{className:"actionIcons",children:[n.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,display:"flex",title:x.replace,placement:"top-end",children:n.jsxRuntimeExports.jsx(J,{onClick:i=>{i.stopPropagation(),j()},"data-testid":t.generateDataTestId("replace-attachment",r?.fileId)})}),p==="small"?n.jsxRuntimeExports.jsx(Q,{onClick:i=>{i.stopPropagation(),C?.()},"data-testid":t.generateDataTestId("delete-attachment",r?.fileId)}):n.jsxRuntimeExports.jsx(t.Tooltip,{enterDelay:600,display:"flex",title:x.delete,placement:"top",children:n.jsxRuntimeExports.jsx(K,{onClick:i=>{i.stopPropagation(),C?.()},"data-testid":t.generateDataTestId("delete-attachment",r?.fileId)})})]}):null]}):null,n.jsxRuntimeExports.jsx("img",{src:r?.fileDownloadUrl.href,alt:"invoice"})]})})]}):n.jsxRuntimeExports.jsx(V,{children:n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[R.mode==="light"?y?n.jsxRuntimeExports.jsx(A,{}):n.jsxRuntimeExports.jsx(T,{}):y?n.jsxRuntimeExports.jsx($,{}):n.jsxRuntimeExports.jsx(I,{}),n.jsxRuntimeExports.jsx(U,{children:o??M.noBillAttached})]})}),w&&r?.fileDownloadUrl!=null?n.jsxRuntimeExports.jsx(t.FullScreenView,{title:r.fileName,file:r,onCrossClick:()=>v(),setShowFullScreenView:s}):null]})},W=a.div`
+  width: 100%;
+  overflow-y: auto;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`,G=a.div`
+  position: sticky;
+  background: ${l=>l.theme.colors.grey3};
+  width: 100%;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: ${t.Space.sp3};
+  cursor: default;
+`,P=a(t.LargeMedium)``,q=a.div`
+  display: none;
+  flex-direction: row;
+`,J=a(t.SvgNewVendor)`
+  margin-right: 26px;
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${l=>l.theme.colors.grey1};
+  :hover {
+    color: ${l=>l.theme.colors.primary};
+  }
+`,K=a(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${l=>l.theme.colors.grey1};
+  :hover {
+    color: ${t.Colors.important};
+  }
+`,Q=a(t.SvgDelete)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+  color: ${t.Colors.important};
+`;exports.default=z;

package/dist/BankAccountSection-BNWMyRWm.cjs

@@ -0,0 +1,79 @@
+"use strict";const i=require("./vendor-.pnpm-DHyNpoQL.cjs"),S=require("react"),u=require("@emotion/styled"),e=require("./index-8_ku3pKD.cjs"),N=u.div`
+  color: ${t=>t.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  display: flex;
+  padding: 0 ${e.Space.sp3};
+  pointer-events: initial;
+  min-height: 100%;
+`,z=u(e.StandardRegular)`
+  color: ${t=>t.theme.colors.grey1};
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  user-select: none;
+  margin-right: ${e.Space.sp2};
+`,L=t=>{const{placeholder:a,loaderSize:n="Small",style:s}=t;return i.jsxRuntimeExports.jsxs(N,{style:s,children:[a!=null?i.jsxRuntimeExports.jsxs(z,{children:[a," "]}):null,i.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:n,start:!0,style:{display:"flex"}})]})},r={width:new e.ResponsiveSized(343,580,726),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2])};function $({isDisabled:t,label:a,loader:n,style:s}){const c=e.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(k,{size:c,isDisabled:t!=null,style:s,"data-testid":e.generateDataTestId("labeled-item-with-loader",a.label),children:[i.jsxRuntimeExports.jsx(e.Label,{isDisabled:t,label:a.label,style:{marginLeft:r.labelMarginLeft.value(c),marginRight:r.labelMarginRight.value(c),marginTop:r.labelMarginTop.value(c),width:a.width??"auto"}}),i.jsxRuntimeExports.jsx(L,{...n,style:{minHeight:r.controlHeight.value(c),display:"flex",flexGrow:1,...n.style}})]})}const k=u.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  width: ${t=>r.width.valuePx(t.size)};
+  min-height: ${t=>r.height.valuePx(t.size)};
+  padding-right: ${t=>r.marginRight.valuePx(t.size)};
+  padding-top: ${t=>r.paddingTopBottom.valuePx(t.size)};
+  padding-bottom: ${t=>r.paddingTopBottom.valuePx(t.size)};
+  opacity: ${t=>t.isDisabled?.32:1};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`,p={largeLabelWidth:new e.ResponsiveSized(120,140,220),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6])},E=({sectionId:t,bankAccountToCreate:a,isDisabled:n,fetchBankNameByRoutingStatus:s,style:c})=>{const x=e.useWindowSizeContext(),{getValues:y,setValue:f,formState:{errors:j}}=i.useFormContext(),R=e.usePrevious(s.fetchState),g=e.usePrevious(a?.bankRoutingNumber),v=i.has(j,o(t,"bankName"));S.useEffect(()=>{(R==="In-Progress"||g!=null&&g!==a?.bankRoutingNumber)&&s.fetchState==="Completed"&&a?.bankName!=null&&f(o(t,"bankName"),a?.bankName,{shouldValidate:v})},[R,g,v,s.fetchState,t,a?.bankName,a?.bankRoutingNumber,f]);const w=s.fetchState==="Completed"||s.fetchState==="Error"?n:"disabled",b=e.appLocale.getLocalizedStrings().spendManagement.billPay.vendorCreation,{achDetails:l}=b,d=p.largeLabelWidth.value(x);return i.jsxRuntimeExports.jsx(P,{style:c,"data-testid":e.generateDataTestId("bank-account-section",t),children:i.jsxRuntimeExports.jsxs(T,{children:[i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:l.bankRoutingNumber,width:d},text:{type:"text",name:o(t,"bankRoutingNumber"),placeholder:e.getPlaceholderTextWithPrefix(l.bankRoutingNumber),defaultValue:a?.bankRoutingNumber,options:{required:!0,pattern:/^\d{9}$/}},isDisabled:n,style:{width:"auto"},showAdditionalInfoLabel:!1,additionalInfoLabel:l.invalidRoutingNumber}),i.jsxRuntimeExports.jsx(m,{}),s.fetchState==="In-Progress"?i.jsxRuntimeExports.jsx($,{label:{label:l.bankName,width:d},loader:{placeholder:l.fetchingBankName},style:{width:"auto"}}):i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:l.bankName,width:d},text:{type:"text",name:o(t,"bankName"),placeholder:e.getPlaceholderTextWithPrefix(l.bankName),defaultValue:a?.bankName,options:{required:!0}},isDisabled:w,style:{width:"auto",opacity:w==="disabled"?.32:1},showAdditionalInfoLabel:!1,additionalInfoLabel:l.invalidBankName}),i.jsxRuntimeExports.jsx(m,{}),i.jsxRuntimeExports.jsxs(A,{size:x,children:[i.jsxRuntimeExports.jsx(e.Label,{label:b.achDetails.accountTypeLabel,htmlFor:o(t,"bankAccountType"),style:{marginLeft:p.labelMarginLeft.value(x),marginRight:p.labelMarginRight.value(x),width:d}}),i.jsxRuntimeExports.jsxs(M,{labelWidth:d,size:x,children:[i.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:b.achDetails.checkingAccountTypeLabel},style:{paddingRight:`${e.Space.sp4}`,width:"auto"},radioField:{name:o(t,"bankAccountType"),id:"checking",value:"checking",registerOptions:{required:!0}}}),i.jsxRuntimeExports.jsx(e.LabeledRadioField,{label:{label:b.achDetails.savingsAccountTypeLabel},style:{width:"auto"},radioField:{name:o(t,"bankAccountType"),id:"savings",value:"savings",registerOptions:{required:!0}}})]})]}),i.jsxRuntimeExports.jsx(m,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:l.bankAccountNumber,width:d},text:{type:"text",name:o(t,"bankAccountNumber"),placeholder:e.getPlaceholderTextWithPrefix(l.bankAccountNumber),defaultValue:a?.bankAccountNumber,options:{required:!0,validate:h=>h!=null?i.distExports.accountNumber(h).isValid:!0,pattern:e.DIGITS_PATTERN}},isDisabled:n,style:{width:"auto"},showAdditionalInfoLabel:!1,additionalInfoLabel:l.invalidAccountNumber}),i.jsxRuntimeExports.jsx(m,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:l.confirmedBankAccountNumber,width:d},text:{type:"text",name:o(t,"confirmedBankAccountNumber"),placeholder:l.confirmedBankAccountNumberPlaceholder,defaultValue:a?.confirmedBankAccountNumber,options:{required:!0,pattern:e.DIGITS_PATTERN,validate:h=>h!=null?y(`${t}.bankAccountNumber`)===h:!1}},disableCopyPaste:!0,isDisabled:n,style:{width:"auto"},showAdditionalInfoLabel:!1,additionalInfoLabel:l.accountNumberDontMatch}),i.jsxRuntimeExports.jsx(m,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:l.accountNickName,width:d},text:{type:"text",name:o(t,"bankAccountName"),placeholder:e.getPlaceholderTextWithPrefix(l.accountNickName),defaultValue:a?.bankAccountName,options:{required:!1}},isDisabled:n,style:{width:"auto"}})]})})},o=(t,a)=>`${t}.${a}`,P=u.div`
+  display: flex;
+  flex-direction: column;
+`,T=u.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+`,m=u.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,A=u.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  min-height: ${t=>p.labelHeight.valuePx(t.size)};
+  padding-right: ${t=>p.labelMarginRight.valuePx(t.size)};
+  padding-top: ${t=>p.labelMarginTop.valuePx(t.size)};
+  padding-bottom: ${t=>p.paddingTopBottom.valuePx(t.size)};
+  align-items: center;
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+  }
+`,M=u.div`
+  display: flex;
+  flex-direction: row;
+  width: ${t=>`calc(100% - ${t.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${t=>p.controlHeight.valuePx(t.size)};
+  align-items: center;
+`;exports.BankAccountSection=E;

package/dist/BankAccountSection-D8_5fjrd.js

@@ -0,0 +1,398 @@
+import { j as a, d as D, m as V, bE as W } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useEffect as q } from "react";
+import h from "@emotion/styled";
+import { A as E, S as m, p as F, u as P, j as S, aB as A, R as i, D as t, aD as L, a as H, aQ as x, fh as y, at as z, aV as R } from "./index-CvyHeUzo.js";
+const B = h.div`
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  justify-content: flex-end;
+  display: flex;
+  padding: 0 ${m.sp3};
+  pointer-events: initial;
+  min-height: 100%;
+`, I = h(F)`
+  color: ${(e) => e.theme.colors.grey1};
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  user-select: none;
+  margin-right: ${m.sp2};
+`, G = (e) => {
+  const { placeholder: l, loaderSize: o = "Small", style: r } = e;
+  return /* @__PURE__ */ a.jsxs(B, { style: r, children: [
+    l != null ? /* @__PURE__ */ a.jsxs(I, { children: [
+      l,
+      " "
+    ] }) : null,
+    /* @__PURE__ */ a.jsx(
+      E,
+      {
+        size: o,
+        start: !0,
+        style: { display: "flex" }
+      }
+    )
+  ] });
+}, d = {
+  width: new i(343, 580, 726),
+  height: new i(t[6], t[6]),
+  controlHeight: new i(t[6], t[6]),
+  paddingTopBottom: new i(t[2], t[2]),
+  marginTop: new i(t[2], t[2]),
+  marginBottom: new i(t[2], t[2]),
+  marginRight: new i(t[2], t[2]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2])
+};
+function O({
+  isDisabled: e,
+  label: l,
+  loader: o,
+  style: r
+}) {
+  const b = P();
+  return /* @__PURE__ */ a.jsxs(
+    Q,
+    {
+      size: b,
+      isDisabled: e != null,
+      style: r,
+      "data-testid": S("labeled-item-with-loader", l.label),
+      children: [
+        /* @__PURE__ */ a.jsx(
+          A,
+          {
+            isDisabled: e,
+            label: l.label,
+            style: {
+              marginLeft: d.labelMarginLeft.value(b),
+              marginRight: d.labelMarginRight.value(b),
+              marginTop: d.labelMarginTop.value(b),
+              width: l.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          G,
+          {
+            ...o,
+            style: {
+              minHeight: d.controlHeight.value(b),
+              display: "flex",
+              flexGrow: 1,
+              ...o.style
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const Q = h.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => d.width.valuePx(e.size)};
+  min-height: ${(e) => d.height.valuePx(e.size)};
+  padding-right: ${(e) => d.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => d.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => d.paddingTopBottom.valuePx(e.size)};
+  opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`, u = {
+  largeLabelWidth: new i(120, 140, 220),
+  paddingTopBottom: new i(t[2], t[2]),
+  labelHeight: new i(t[6], t[6]),
+  labelMarginLeft: new i(t[3], t[4]),
+  labelMarginRight: new i(t[3], t[4]),
+  labelMarginTop: new i(t[2], t[2]),
+  controlHeight: new i(t[6], t[6])
+}, ee = ({
+  sectionId: e,
+  bankAccountToCreate: l,
+  isDisabled: o,
+  fetchBankNameByRoutingStatus: r,
+  style: b
+}) => {
+  const g = P(), {
+    getValues: M,
+    setValue: N,
+    formState: { errors: T }
+  } = D(), $ = L(
+    r.fetchState
+  ), v = L(l?.bankRoutingNumber), j = V(T, s(e, "bankName"));
+  q(() => {
+    ($ === "In-Progress" || v != null && v !== l?.bankRoutingNumber) && r.fetchState === "Completed" && l?.bankName != null && N(
+      s(e, "bankName"),
+      l?.bankName,
+      { shouldValidate: j }
+    );
+  }, [
+    $,
+    v,
+    j,
+    r.fetchState,
+    e,
+    l?.bankName,
+    l?.bankRoutingNumber,
+    N
+  ]);
+  const k = r.fetchState === "Completed" || r.fetchState === "Error" ? o : "disabled", w = H.getLocalizedStrings().spendManagement.billPay.vendorCreation, { achDetails: n } = w, c = u.largeLabelWidth.value(g);
+  return /* @__PURE__ */ a.jsx(
+    _,
+    {
+      style: b,
+      "data-testid": S("bank-account-section", e),
+      children: /* @__PURE__ */ a.jsxs(C, { children: [
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankRoutingNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankRoutingNumber"),
+              placeholder: y(
+                n.bankRoutingNumber
+              ),
+              defaultValue: l?.bankRoutingNumber,
+              options: {
+                required: !0,
+                pattern: /^\d{9}$/
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidRoutingNumber
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        r.fetchState === "In-Progress" ? /* @__PURE__ */ a.jsx(
+          O,
+          {
+            label: {
+              label: n.bankName,
+              width: c
+            },
+            loader: {
+              placeholder: n.fetchingBankName
+            },
+            style: {
+              width: "auto"
+            }
+          }
+        ) : /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankName,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankName"),
+              placeholder: y(n.bankName),
+              defaultValue: l?.bankName,
+              options: {
+                required: !0
+              }
+            },
+            isDisabled: k,
+            style: {
+              width: "auto",
+              opacity: k === "disabled" ? 0.32 : 1
+            },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidBankName
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsxs(J, { size: g, children: [
+          /* @__PURE__ */ a.jsx(
+            A,
+            {
+              label: w.achDetails.accountTypeLabel,
+              htmlFor: s(e, "bankAccountType"),
+              style: {
+                marginLeft: u.labelMarginLeft.value(g),
+                marginRight: u.labelMarginRight.value(g),
+                width: c
+              }
+            }
+          ),
+          /* @__PURE__ */ a.jsxs(K, { labelWidth: c, size: g, children: [
+            /* @__PURE__ */ a.jsx(
+              z,
+              {
+                label: {
+                  label: w.achDetails.checkingAccountTypeLabel
+                },
+                style: { paddingRight: `${m.sp4}`, width: "auto" },
+                radioField: {
+                  name: s(e, "bankAccountType"),
+                  id: "checking",
+                  value: "checking",
+                  registerOptions: {
+                    required: !0
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ a.jsx(
+              z,
+              {
+                label: {
+                  label: w.achDetails.savingsAccountTypeLabel
+                },
+                style: { width: "auto" },
+                radioField: {
+                  name: s(e, "bankAccountType"),
+                  id: "savings",
+                  value: "savings",
+                  registerOptions: {
+                    required: !0
+                  }
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.bankAccountNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankAccountNumber"),
+              placeholder: y(
+                n.bankAccountNumber
+              ),
+              defaultValue: l?.bankAccountNumber,
+              options: {
+                required: !0,
+                validate: (p) => p != null ? W.accountNumber(p).isValid : !0,
+                pattern: R
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.invalidAccountNumber
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.confirmedBankAccountNumber,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "confirmedBankAccountNumber"),
+              placeholder: n.confirmedBankAccountNumberPlaceholder,
+              defaultValue: l?.confirmedBankAccountNumber,
+              options: {
+                required: !0,
+                pattern: R,
+                validate: (p) => p != null ? M(`${e}.bankAccountNumber`) === p : !1
+              }
+            },
+            disableCopyPaste: !0,
+            isDisabled: o,
+            style: { width: "auto" },
+            showAdditionalInfoLabel: !1,
+            additionalInfoLabel: n.accountNumberDontMatch
+          }
+        ),
+        /* @__PURE__ */ a.jsx(f, {}),
+        /* @__PURE__ */ a.jsx(
+          x,
+          {
+            label: {
+              label: n.accountNickName,
+              width: c
+            },
+            text: {
+              type: "text",
+              name: s(e, "bankAccountName"),
+              placeholder: y(
+                n.accountNickName
+              ),
+              defaultValue: l?.bankAccountName,
+              options: {
+                required: !1
+              }
+            },
+            isDisabled: o,
+            style: { width: "auto" }
+          }
+        )
+      ] })
+    }
+  );
+}, s = (e, l) => `${e}.${l}`, _ = h.div`
+  display: flex;
+  flex-direction: column;
+`, C = h.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${m.sp0} 2px ${m.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${m.sp2};
+`, f = h.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, J = h.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${(e) => u.labelHeight.valuePx(e.size)};
+  padding-right: ${(e) => u.labelMarginRight.valuePx(e.size)};
+  padding-top: ${(e) => u.labelMarginTop.valuePx(e.size)};
+  padding-bottom: ${(e) => u.paddingTopBottom.valuePx(e.size)};
+  align-items: center;
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, K = h.div`
+  display: flex;
+  flex-direction: row;
+  width: ${(e) => `calc(100% - ${e.labelWidth}px)`};
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-grow: 1;
+  height: ${(e) => u.controlHeight.valuePx(e.size)};
+  align-items: center;
+`;
+export {
+  ee as B
+};