@react-magma/dropzone 15.0.0-rc.1 → 15.0.0

package/src/components/dropzone/FileIcon.tsx

@@ -25,61 +25,92 @@ const icons = {
   default: {
     Icon: InsertDriveFileIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   word: {
     Icon: FileWordIcon,
     style: {
-      color: magma.colors.info500,
+      color: magma.colors.blue500,
+    },
+    inverseStyle: {
+      color: magma.colors.blue500,
     },
   },
   excel: {
     Icon: FileExcelIcon,
     style: {
-      color: magma.colors.success500,
+      color: magma.colors.green500,
+    },
+    inverseStyle: {
+      color: magma.colors.green500,
     },
   },
   powerpoint: {
     Icon: FilePowerpointIcon,
     style: {
-      color: magma.colors.warning500,
+      color: magma.colors.tangerine600,
+    },
+    inverseStyle: {
+      color: magma.colors.tangerine500,
     },
   },
   pdf: {
     Icon: FilePdfIcon,
     style: {
-      color: magma.colors.danger500,
+      color: magma.colors.red600,
+    },
+    inverseStyle: {
+      color: magma.colors.red500,
     },
   },
   image: {
     Icon: ImageIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   video: {
     Icon: VideocamIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   audio: {
     Icon: AudiotrackIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
   archive: {
     Icon: FileZipIcon,
     style: {
-      color: magma.colors.neutral500,
+      color: magma.colors.neutral700,
+    },
+    inverseStyle: {
+      color: magma.colors.neutral300,
     },
   },
 };
 
 const iconMapping: {
-  [key: string]: { Icon: any; style: React.CSSProperties };
+  [key: string]: {
+    Icon: any;
+    style: React.CSSProperties;
+    inverseStyle: React.CSSProperties;
+  };
 } = {
   default: icons.default,
   xlsx: icons.excel,
@@ -110,8 +141,13 @@ export const FileIcon = ({ file, isInverse }: FileIconProps) => {
   const { path = '', type = '' } = file;
   const category = type.split('/')[0];
   const extension = path.split('.').pop() || 'default';
-  const { Icon, style } =
+  const { Icon, style, inverseStyle } =
     iconMapping[extension] || iconMapping[category] || iconMapping.default;
 
-  return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;
+  return (
+    <Icon
+      size={magma.iconSizes.medium}
+      style={isInverse ? inverseStyle : style}
+    />
+  );
 };

package/src/components/dropzone/Preview.tsx

@@ -4,6 +4,8 @@ import {
   ButtonColor,
   ButtonVariant,
   Card,
+  CardBorderRadius,
+  CardCornerTreatment,
   Flex,
   FlexAlignItems,
   FlexBehavior,
@@ -69,13 +71,47 @@ const StatusIcons = styled.div`
   }
 `;
 
+const PreviewIcon = ({
+  file,
+  isInverse,
+  theme,
+  thumbnails,
+}: {
+  file: FilePreview;
+  isInverse: boolean;
+  theme: ThemeInterface;
+  thumbnails: boolean;
+}) => {
+  if (file.errors) {
+    return (
+      <ErrorIcon
+        color={isInverse ? theme.colors.red500 : theme.colors.danger}
+        size={24}
+      />
+    );
+  }
+
+  if (
+    file.preview &&
+    thumbnails &&
+    file.type &&
+    file.type.startsWith('image')
+  ) {
+    return <Thumb role="img" file={file} />;
+  }
+
+  return <FileIcon isInverse={isInverse} file={file} />;
+};
+
 const IconStyles = {
   marginRight: '12px',
   display: 'flex',
 };
 
-const Errors = styled.div`
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};
+const Errors = styled.div<{ isInverse: boolean }>`
+  border-top: 1px solid
+    ${({ theme, isInverse }) =>
+      isInverse ? theme.colors.neutral500 : theme.colors.neutral300};
   padding: 16px;
   font-size: ${({ theme }) => theme.typeScale.size02.fontSize};
   line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};
@@ -104,10 +140,18 @@ const StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`
   border-color: ${({ file, theme, isInverse }) =>
     file.errors
       ? isInverse
-        ? theme.colors.danger300
+        ? theme.colors.red500
         : theme.colors.danger
-      : theme.colors.neutral300};
+      : isInverse
+        ? theme.colors.neutral800
+        : theme.colors.neutral200};
   border-width: 1px;
+  color: ${({ file, theme, isInverse }) =>
+    isInverse
+      ? theme.colors.neutral0
+      : file.errors
+        ? theme.colors.neutral700
+        : theme.colors.brand.navy};
   margin: 10px 0;
 `;
 
@@ -221,7 +265,7 @@ export const Preview = forwardRef<
           <IconButton
             onClick={handleRemoveFile}
             variant={ButtonVariant.link}
-            color={ButtonColor.secondary}
+            color={ButtonColor.subtle}
             aria-label={`${i18n.dropzone.removeFile} ${file.name}`}
             icon={<CloseIcon />}
           />
@@ -233,7 +277,9 @@ export const Preview = forwardRef<
       return (
         <StatusIcons>
           <Spinner
-            color={isInverse ? theme.colors.neutral100 : theme.colors.primary}
+            color={
+              isInverse ? theme.colors.brand.skyBlue : theme.colors.primary
+            }
           />
         </StatusIcons>
       );
@@ -243,7 +289,7 @@ export const Preview = forwardRef<
       <StatusIcons>
         <Transition isOpen={!done} unmountOnExit fade>
           <CheckCircleIcon
-            color={isInverse ? theme.colors.success200 : theme.colors.success}
+            color={isInverse ? theme.colors.green500 : theme.colors.success}
             style={{ marginTop: '4px' }}
           />
         </Transition>
@@ -251,7 +297,7 @@ export const Preview = forwardRef<
           <IconButton
             onClick={handleDeleteFile}
             variant={ButtonVariant.link}
-            color={ButtonColor.secondary}
+            color={ButtonColor.subtle}
             aria-label={`${i18n.dropzone.deleteFile} ${file.name}`}
             icon={<DeleteIcon />}
           />
@@ -267,6 +313,8 @@ export const Preview = forwardRef<
   return (
     <InverseContext.Provider value={{ isInverse }}>
       <StyledCard
+        borderRadius={CardBorderRadius.small}
+        cornerTreatment={CardCornerTreatment.all}
         isInverse={isInverse}
         theme={theme}
         file={file}
@@ -285,19 +333,12 @@ export const Preview = forwardRef<
             alignItems={FlexAlignItems.center}
             style={IconStyles}
           >
-            {file.errors ? (
-              <ErrorIcon
-                color={isInverse ? theme.colors.danger300 : theme.colors.danger}
-                size={24}
-              />
-            ) : file.preview &&
-              thumbnails &&
-              file.type &&
-              file.type.startsWith('image') ? (
-              <Thumb role="img" file={file} />
-            ) : (
-              <FileIcon isInverse={isInverse} file={file} />
-            )}
+            <PreviewIcon
+              file={file}
+              isInverse={isInverse}
+              theme={theme}
+              thumbnails={thumbnails}
+            />
           </Flex>
           <FileName xs behavior={FlexBehavior.item} theme={theme}>
             {file.name}
@@ -314,7 +355,7 @@ export const Preview = forwardRef<
           <Flex behavior={FlexBehavior.item}>{actions}</Flex>
         </StyledFlex>
         {file.errors && (
-          <Errors theme={theme}>
+          <Errors theme={theme} isInverse={isInverse}>
             {file.errors.slice(0, 1).map(({ code, ...rest }) => {
               const { header = '', message } = formatError(
                 { code, ...rest, ...i18n.dropzone.errors[code] },
@@ -327,7 +368,7 @@ export const Preview = forwardRef<
                   <ErrorHeader
                     style={{
                       color: isInverse
-                        ? theme.colors.danger200
+                        ? theme.colors.red500
                         : theme.colors.danger,
                     }}
                   >

package/src/components/dropzone/utils.ts

@@ -8,7 +8,6 @@ export const formatFileSize = (
   const k = 1024;
   const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-
   return (
     parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]
   );

package/dist/fileuploader.modern.mjs

@@ -1,83 +0,0 @@
-import{magma as e,styled as r,Flex as o,Card as i,ThemeContext as t,I18nContext as n,useIsInverse as l,InverseContext as s,FlexBehavior as a,FlexAlignItems as c,IconButton as d,ButtonVariant as p,ButtonColor as m,Spinner as g,Transition as u,useGenerateId as h,FormFieldContainer as f,Button as v,VisuallyHidden as x,Announce as y}from"react-magma-dom";import{InsertDriveFileIcon as b,FileWordIcon as z,FileExcelIcon as S,FilePowerpointIcon as $,FilePdfIcon as I,ImageIcon as w,VideocamIcon as F,AudiotrackIcon as k,FileZipIcon as D,CloseIcon as O,ErrorIcon as R,CheckCircleIcon as j,DeleteIcon as C,CloudUploadIcon as A}from"react-magma-icons";import{jsx as B,jsxs as M}from"react/jsx-runtime";import H,{forwardRef as L,useContext as P,useState as E,useEffect as N,useImperativeHandle as T}from"react";import{transparentize as U}from"polished";import{useDropzone as V}from"react-dropzone";const G={default:{Icon:b,style:{color:e.colors.neutral500}},word:{Icon:z,style:{color:e.colors.info500}},excel:{Icon:S,style:{color:e.colors.success500}},powerpoint:{Icon:$,style:{color:e.colors.warning500}},pdf:{Icon:I,style:{color:e.colors.danger500}},image:{Icon:w,style:{color:e.colors.neutral500}},video:{Icon:F,style:{color:e.colors.neutral500}},audio:{Icon:k,style:{color:e.colors.neutral500}},archive:{Icon:D,style:{color:e.colors.neutral500}}},K={default:G.default,xlsx:G.excel,xlsm:G.excel,xlsb:G.excel,xltx:G.excel,xls:G.excel,xlt:G.excel,doc:G.word,docx:G.word,docm:G.word,dotx:G.word,dotm:G.word,docb:G.word,pptx:G.powerpoint,pptm:G.powerpoint,ppt:G.powerpoint,pdf:G.pdf,png:G.image,svg:G.image,image:G.image,audio:G.audio,video:G.video,zip:G.archive},W=({file:r,isInverse:o})=>{const{path:i="",type:t=""}=r,n=t.split("/")[0],l=i.split(".").pop()||"default",{Icon:s,style:a}=K[l]||K[n]||K.default;/*#__PURE__*/return B(s,{size:e.iconSizes.medium,style:o?{}:a})};function Y(){return Y=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var i in o)({}).hasOwnProperty.call(o,i)&&(e[i]=o[i])}return e},Y.apply(null,arguments)}function Z(e,r){if(null==e)return{};var o={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(-1!==r.indexOf(i))continue;o[i]=e[i]}return o}const q=(e,r=2,o="Bytes")=>{if(void 0===e)return;if(0==e)return`0 ${o}`;const i=[o,"KB","MB","GB","TB","PB","EB","ZB","YB"],t=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,t)).toFixed(r))+" "+i[t]},J=["accept","file","isInverse","maxSize","minSize","onDeleteFile","onRemoveFile","testId","thumbnails"],Q=["code"];let X,_,ee,re,oe,ie,te,ne,le=e=>e;const se=r.div(X||(X=le`
-  background-image: ${0};
-  background-repeat: no-repeat;
-  background-size: cover;
-  display: inline-block;
-  vertical-align: middle;
-  height: 40px;
-  width: 40px;
-`),({file:e})=>`url('${"preview"in e&&e.preview}')`),ae=r.div(_||(_=le`
-  display: grid;
-  grid-template-areas: 'inner-div';
-  height: auto;
-  place-items: center;
-  width: 46px;
-  & > div {
-    display: inline-block;
-    right: 0;
-    grid-area: inner-div;
-  }
-`)),ce={marginRight:"12px",display:"flex"},de=r.div(ee||(ee=le`
-  border-top: 1px solid ${0};
-  padding: 16px;
-  font-size: ${0};
-  line-height: ${0};
-`),({theme:e})=>e.colors.neutral300,({theme:e})=>e.typeScale.size02.fontSize,({theme:e})=>e.typeScale.size02.lineHeight),pe=r(o)(re||(re=le`
-  height: 56px;
-  padding: 0 8px 0 16px;
-  font-size: ${0};
-  line-height: ${0};
-`),({theme:e})=>e.typeScale.size02.fontSize,({theme:e})=>e.typeScale.size02.lineHeight),me=r(o)(oe||(oe=le`
-  overflow: hidden;
-  white-space: nowrap;
-  align-items: center;
-  text-overflow: ellipsis;
-  display: block;
-  margin-right: 24px;
-  font-size: ${0};
-  line-height: ${0};
-`),({theme:e})=>e.typeScale.size02.fontSize,({theme:e})=>e.typeScale.size02.lineHeight),ge=r(i)(ie||(ie=le`
-  background-color: none;
-  border-color: ${0};
-  border-width: 1px;
-  margin: 10px 0;
-`),({file:e,theme:r,isInverse:o})=>e.errors?o?r.colors.danger300:r.colors.danger:r.colors.neutral300),ue=r.span(te||(te=le`
-  display: block;
-
-  > div {
-    display: flex;
-    align-self: center;
-    margin-right: 12px;
-  }
-`)),he=r.span(ne||(ne=le`
-  display: block;
-`)),fe=/*#__PURE__*/L((e,r)=>{var i;const{accept:h,file:f,isInverse:v,maxSize:x,minSize:y,onDeleteFile:b,onRemoveFile:z,thumbnails:S}=e,$=Z(e,J),I=P(t),w=H.useContext(n),F=l(v),[k,D]=E(/*#__PURE__*/B(O,{})),A=()=>{z&&"function"==typeof z&&z(f)},L=()=>{b&&"function"==typeof b&&b(f)},T=({status:e="ready"})=>{const[r,o]=E(!1);return N(()=>{let e=!0;return setTimeout(()=>{e&&o(!0)},1e3),()=>{e=!1}},[e]),"error"===e||"ready"===e?/*#__PURE__*/B(ae,{children:/*#__PURE__*/B(d,{onClick:A,variant:p.link,color:m.secondary,"aria-label":`${w.dropzone.removeFile} ${f.name}`,icon:/*#__PURE__*/B(O,{})})}):"pending"===e?/*#__PURE__*/B(ae,{children:/*#__PURE__*/B(g,{color:F?I.colors.neutral100:I.colors.primary})}):/*#__PURE__*/M(ae,{children:[/*#__PURE__*/B(u,{isOpen:!r,unmountOnExit:!0,fade:!0,children:/*#__PURE__*/B(j,{color:F?I.colors.success200:I.colors.success,style:{marginTop:"4px"}})}),/*#__PURE__*/B(u,{isOpen:r,unmountOnExit:!0,fade:!0,children:/*#__PURE__*/B(d,{onClick:L,variant:p.link,color:m.secondary,"aria-label":`${w.dropzone.deleteFile} ${f.name}`,icon:/*#__PURE__*/B(C,{})})})]})};return N(()=>{var e;D(/*#__PURE__*/B(T,{status:null==f||null==(e=f.processor)?void 0:e.status}))},[null==f||null==(i=f.processor)?void 0:i.status]),/*#__PURE__*/B(s.Provider,{value:{isInverse:F},children:/*#__PURE__*/M(ge,{isInverse:F,theme:I,file:f,"data-testid":e.testId,ref:r,role:f.errors?"alert":"",children:[/*#__PURE__*/M(pe,Y({theme:I,behavior:a.container,alignItems:c.center},$,{children:[/*#__PURE__*/B(o,{behavior:a.item,alignItems:c.center,style:ce,children:f.errors?/*#__PURE__*/B(R,{color:F?I.colors.danger300:I.colors.danger,size:24}):f.preview&&S&&f.type&&f.type.startsWith("image")?/*#__PURE__*/B(se,{role:"img",file:f}):/*#__PURE__*/B(W,{isInverse:F,file:f})}),/*#__PURE__*/B(me,{xs:!0,behavior:a.item,theme:I,children:f.name}),f.processor&&"pending"===f.processor.status&&/*#__PURE__*/B(o,{role:"progressbar",style:{marginLeft:"auto"},behavior:a.item,children:f.processor.percent}),/*#__PURE__*/B(o,{behavior:a.item,children:k})]})),f.errors&&/*#__PURE__*/B(de,{theme:I,children:f.errors.slice(0,1).map(e=>{let{code:r}=e,o=Z(e,Q);const{header:i="",message:t}=((e,r,o)=>{const i=Array.isArray(r.accept)&&1===r.accept.length?r.accept[0]:r.accept,t=Array.isArray(i)?`one of ${i.join(", ")}`:i;switch(e.code){case"file-too-large":return Y({},e,{message:`${e.message} ${q(r.maxSize,2,o)}.`});case"file-too-small":return Y({},e,{message:`${e.message} ${q(r.minSize,2,o)}.`});case"file-invalid-type":return Y({},e,{message:`${e.message}: ${t}`});default:return e}})(Y({code:r},o,w.dropzone.errors[r]),{accept:h,minSize:y,maxSize:x},w.dropzone.bytes);/*#__PURE__*/return M(H.Fragment,{children:[/*#__PURE__*/B(ue,{style:{color:F?I.colors.danger200:I.colors.danger},children:i}),/*#__PURE__*/B(he,{children:t})]},r)})})]})})}),ve=["accept","containerStyle","disabled","dropzoneOptions","helperMessage","id","inputSize","isInverse","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","maxSize","minSize","multiple","noDrag","onSendFile","onDeleteFile","onRemoveFile","sendFiles","testId","thumbnails"];let xe,ye,be,ze,Se,$e=e=>e;const Ie=r(o)(xe||(xe=$e`
-  flex-direction: column;
-  align-items: ${0};
-  justify-content: ${0};
-  text-align: ${0};
-  padding: ${0};
-  border-radius: ${0};
-  border: ${0};
-
-  border-style: ${0};
-  background-color: ${0};
-  outline: none;
-  transition: ${0};
-`),({noDrag:e})=>e?"left":"center",({noDrag:e})=>e?"left":"center",({noDrag:e})=>e?"left":"center",({noDrag:e})=>e?"0px":"24px",({noDrag:e})=>e?"0px":"4px",({dragState:e="default",noDrag:r,theme:o,isInverse:i})=>r?"0px":"dragReject"===e||"error"===e?i?`1px dashed ${o.colors.danger300}`:`1px dashed ${o.colors.danger}`:"dragActive"===e?`1px dashed ${o.colors.primary}`:"dragAccept"===e?`1px dashed ${o.colors.success}`:`1px dashed ${o.colors.neutral400}`,({dragState:e="default"})=>"error"===e?"solid":"dashed",({theme:e,noDrag:r,isInverse:o})=>r?"transparent":o?U(.75,e.colors.neutral900):e.colors.neutral200,({noDrag:e})=>`border ${e?0:".24s"} ease-in-out`),we=r.span(ye||(ye=$e`
-  color: ${0};
-  display: block;
-  font-size: 14px;
-  margin: -8px 0 16px 0;
-`),({theme:e,isInverse:r})=>r?e.colors.neutral100:e.colors.neutral700),Fe=r.div(be||(be=$e`
-  color: ${0};
-  margin: 0 0 24px 0;
-  font-size: ${0};
-  line-height: ${0};
-  font-weight: 500;
-  padding: ${0};
-`),({theme:e,isInverse:r})=>r?e.colors.neutral100:e.colors.neutral700,({theme:e})=>e.typeScale.size02.fontSize,({theme:e})=>e.typeScale.size02.lineHeight,({theme:e})=>e.spaceScale.spacing01),ke=r.ul(ze||(ze=$e`
-  list-style: none;
-  padding: 0;
-`)),De=r.li(Se||(Se=$e``)),Oe=/*#__PURE__*/H.forwardRef((e,r)=>{const{accept:i,containerStyle:c,disabled:d,dropzoneOptions:g={multiple:!0},helperMessage:u,id:b,inputSize:z,isInverse:S,isLabelVisuallyHidden:$,labelStyle:I,labelText:w,maxFiles:F,minFiles:k,maxSize:D,minSize:O,multiple:R=!0,noDrag:j=!1,onSendFile:C,onDeleteFile:L,onRemoveFile:P,sendFiles:E=!1,testId:N,thumbnails:U=!0}=e,G=Z(e,ve),[K,W]=H.useState([]),[q,J]=H.useState(null),[Q,X]=H.useState(""),_=l(S),ee=H.useContext(t),re=H.useContext(n),oe=h(b),ie=h(`${oe}-helper`),te=H.useRef(null),ne=H.useCallback((e,r)=>{const o=[...e.map(e=>Object.assign(e,{preview:URL.createObjectURL(e)})),...r.map(({file:e,errors:r})=>Object.assign(e,{errors:r}))];if(W(e=>[...e,...o]),e.length>0){const r=e.map(e=>e.name).join(", "),o=1===e.length?re.dropzone.fileAdded.replace(/\{fileName\}/g,r):re.dropzone.filesAdded.replace(/\{count\}/g,e.length.toString()).replace(/\{fileNames\}/g,r);X(o)}te.current&&te.current.focus()},[re]),{getInputProps:le,getRootProps:se,isDragAccept:ae,isDragActive:ce,isDragReject:de,open:pe,inputRef:me}=V(Y({noClick:!0,disabled:d,multiple:R,maxSize:D,minSize:O,accept:i,onDrop:ne,noDrag:j},g));T(r,()=>me.current);const ge=le({id:oe});let ue="default";q?ue="error":ae?ue="dragAccept":de?ue="dragReject":ce&&(ue="dragActive");const he=e=>{W(r=>r.filter(r=>r!==e)),P&&"function"==typeof P&&P(e);const r=re.dropzone.fileRemoved.replace(/\{fileName\}/g,e.name);X(r),te.current&&te.current.focus()},xe=e=>{W(r=>r.filter(r=>r!==e)),L&&"function"==typeof L&&L(e);const r=re.dropzone.fileDeleted.replace(/\{fileName\}/g,e.name);X(r),te.current&&te.current.focus()},ye=e=>{if(W(r=>r.map(r=>r===e.file?Object.assign(r,{processor:Y({},r.processor,{percent:`${e.percent}%`,status:"pending"})}):r)),e.percent>0&&e.percent%25==0){const r=re.dropzone.fileUploading.replace(/\{fileName\}/g,e.file.name).replace(/\{percent\}/g,e.percent.toString());X(r)}},be=e=>{W(r=>r.map(r=>r===e.file?Object.assign(r,{processor:Y({},r.processor,{percent:"",status:"finished"})}):r));const r=re.dropzone.fileUploaded.replace(/\{fileName\}/g,e.file.name);X(r)},ze=e=>{W(r=>r.map(r=>r===e.file?Object.assign(r,{errors:e.errors,processor:Y({},r.processor,{status:"error"})}):r))};return H.useEffect(()=>()=>{K.forEach(e=>e.preview&&URL.revokeObjectURL(e.preview))},[K]),H.useEffect(()=>{const e=k&&K.length<k,r=F&&K.length>F;let o=null;r?o="too-many-files":e&&(o="too-few-files"),J(((e,r)=>{if(null===e)return null;const o=re.dropzone.errors[e];switch(e){case"too-many-files":return`${o.message} ${r.maxFiles} ${re.dropzone.files}.`;case"too-few-files":return`${o.message} ${r.minFiles} ${re.dropzone.files}.`;default:return o.message}})(o,{minFiles:k,maxFiles:F})),E&&K.length>0&&!r&&!e&&W(e=>e.map(e=>(e.errors||e.processor||!C||C({file:e,onError:ze,onFinish:be,onProgress:ye}),e)))},[E,K.length,C,F,k,re.dropzone.errors,re.dropzone.files]),/*#__PURE__*/M(s.Provider,{value:{isInverse:_},children:[/*#__PURE__*/M(f,{actionable:!1,containerStyle:c,errorMessage:q,fieldId:oe,inputSize:z,isInverse:_,isLabelVisuallyHidden:$,labelStyle:I,labelText:w,messageStyle:{minHeight:0},"data-testid":N,children:[/*#__PURE__*/B(we,{id:ie,theme:ee,isInverse:_,children:u}),/*#__PURE__*/M(Ie,Y({behavior:a.container,dragState:ue,isInverse:_,noDrag:j,theme:ee},se(),G,{testId:N,tabIndex:-1,children:[/*#__PURE__*/B("input",{ref:me,type:ge.type,accept:ge.accept,autoComplete:ge.autoComplete,id:ge.id,multiple:ge.multiple,onChange:ge.onChange,onClick:ge.onClick,style:ge.style,tabIndex:ge.tabIndex,"data-testid":"file-input"}),j?/*#__PURE__*/B(o,{xs:!0,behavior:a.item,children:/*#__PURE__*/B(v,{color:m.primary,disabled:d,isInverse:_,onClick:pe,style:{margin:0},ref:te,"aria-describedby":u?ie:void 0,children:re.dropzone.browseFiles})}):/*#__PURE__*/M(o,{behavior:a.item,children:[/*#__PURE__*/B(A,{"aria-hidden":"true",color:_?ee.colors.neutral100:ee.colors.neutral500,size:48}),/*#__PURE__*/B(Fe,{isInverse:_,theme:ee,children:re.dropzone.dragMessage}),/*#__PURE__*/B(v,{color:m.primary,disabled:d,isInverse:_,onClick:pe,style:{margin:0},variant:p.solid,ref:te,"aria-describedby":u?ie:void 0,children:re.dropzone.browseFiles})]})]}))]}),/*#__PURE__*/B(ke,{children:K.map(e=>/*#__PURE__*/B(De,{children:/*#__PURE__*/B(fe,{accept:i,file:e,isInverse:_,maxSize:D,minSize:O,onDeleteFile:xe,onRemoveFile:he,thumbnails:U})},e.name))}),/*#__PURE__*/B(x,{children:/*#__PURE__*/B(y,{children:Q})})]})});export{Oe as Dropzone,W as FileIcon};
-//# sourceMappingURL=fileuploader.modern.mjs.map

package/dist/fileuploader.modern.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"fileuploader.modern.mjs","sources":["../src/components/dropzone/FileIcon.tsx","../src/components/dropzone/utils.ts","../src/components/dropzone/Preview.tsx","../src/components/dropzone/Dropzone.tsx"],"sourcesContent":["import React from 'react';\n\nimport { magma } from 'react-magma-dom';\nimport {\n  InsertDriveFileIcon,\n  ImageIcon,\n  AudiotrackIcon,\n  VideocamIcon,\n  FileExcelIcon,\n  FilePdfIcon,\n  FilePowerpointIcon,\n  FileWordIcon,\n  FileZipIcon,\n  IconProps,\n} from 'react-magma-icons';\n\nimport { FilePreview } from './FilePreview';\n\nexport interface FileIconProps extends IconProps {\n  file: FilePreview;\n  isInverse?: boolean;\n}\n\nconst icons = {\n  default: {\n    Icon: InsertDriveFileIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  word: {\n    Icon: FileWordIcon,\n    style: {\n      color: magma.colors.info500,\n    },\n  },\n  excel: {\n    Icon: FileExcelIcon,\n    style: {\n      color: magma.colors.success500,\n    },\n  },\n  powerpoint: {\n    Icon: FilePowerpointIcon,\n    style: {\n      color: magma.colors.warning500,\n    },\n  },\n  pdf: {\n    Icon: FilePdfIcon,\n    style: {\n      color: magma.colors.danger500,\n    },\n  },\n  image: {\n    Icon: ImageIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  video: {\n    Icon: VideocamIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  audio: {\n    Icon: AudiotrackIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n  archive: {\n    Icon: FileZipIcon,\n    style: {\n      color: magma.colors.neutral500,\n    },\n  },\n};\n\nconst iconMapping: {\n  [key: string]: { Icon: any; style: React.CSSProperties };\n} = {\n  default: icons.default,\n  xlsx: icons.excel,\n  xlsm: icons.excel,\n  xlsb: icons.excel,\n  xltx: icons.excel,\n  xls: icons.excel,\n  xlt: icons.excel,\n  doc: icons.word,\n  docx: icons.word,\n  docm: icons.word,\n  dotx: icons.word,\n  dotm: icons.word,\n  docb: icons.word,\n  pptx: icons.powerpoint,\n  pptm: icons.powerpoint,\n  ppt: icons.powerpoint,\n  pdf: icons.pdf,\n  png: icons.image,\n  svg: icons.image,\n  image: icons.image,\n  audio: icons.audio,\n  video: icons.video,\n  zip: icons.archive,\n};\n\nexport const FileIcon = ({ file, isInverse }: FileIconProps) => {\n  const { path = '', type = '' } = file;\n  const category = type.split('/')[0];\n  const extension = path.split('.').pop() || 'default';\n  const { Icon, style } =\n    iconMapping[extension] || iconMapping[category] || iconMapping.default;\n\n  return <Icon size={magma.iconSizes.medium} style={isInverse ? {} : style} />;\n};\n","export const formatFileSize = (\n  bytes: number | undefined,\n  decimalPoint = 2,\n  bytesLabel = 'Bytes'\n) => {\n  if (bytes === undefined) return;\n  if (bytes == 0) return `0 ${bytesLabel}`;\n  const k = 1024;\n  const sizes = [bytesLabel, 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return (\n    parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPoint)) + ' ' + sizes[i]\n  );\n};\n","import React, { forwardRef, useContext, useEffect, useState } from 'react';\n\nimport {\n  ButtonColor,\n  ButtonVariant,\n  Card,\n  Flex,\n  FlexAlignItems,\n  FlexBehavior,\n  FlexProps,\n  I18nContext,\n  I18nInterface,\n  IconButton,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  Transition,\n  Spinner,\n  useIsInverse,\n  styled,\n} from 'react-magma-dom';\nimport {\n  CheckCircleIcon,\n  CloseIcon,\n  DeleteIcon,\n  ErrorIcon,\n} from 'react-magma-icons';\n\nimport { FileIcon } from './FileIcon';\nimport { FilePreview } from './FilePreview';\nimport { formatFileSize } from './utils';\n\nexport interface PreviewProps extends Omit<FlexProps, 'behavior'> {\n  accept?: string | string[];\n  file: FilePreview;\n  isInverse?: boolean;\n  maxSize?: number;\n  minSize?: number;\n  onDeleteFile?: (file: FilePreview) => void;\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * @internal\n   */\n  testId?: string;\n  thumbnails: boolean;\n}\n\nconst Thumb = styled.div<{ file: FilePreview }>`\n  background-image: ${({ file }) =>\n    `url('${'preview' in file && file.preview}')`};\n  background-repeat: no-repeat;\n  background-size: cover;\n  display: inline-block;\n  vertical-align: middle;\n  height: 40px;\n  width: 40px;\n`;\n\nconst StatusIcons = styled.div`\n  display: grid;\n  grid-template-areas: 'inner-div';\n  height: auto;\n  place-items: center;\n  width: 46px;\n  & > div {\n    display: inline-block;\n    right: 0;\n    grid-area: inner-div;\n  }\n`;\n\nconst IconStyles = {\n  marginRight: '12px',\n  display: 'flex',\n};\n\nconst Errors = styled.div`\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral300};\n  padding: 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledFlex = styled(Flex)`\n  height: 56px;\n  padding: 0 8px 0 16px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst FileName = styled(Flex)`\n  overflow: hidden;\n  white-space: nowrap;\n  align-items: center;\n  text-overflow: ellipsis;\n  display: block;\n  margin-right: 24px;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n`;\n\nconst StyledCard = styled(Card)<{ file: FilePreview; isInverse: boolean }>`\n  background-color: none;\n  border-color: ${({ file, theme, isInverse }) =>\n    file.errors\n      ? isInverse\n        ? theme.colors.danger300\n        : theme.colors.danger\n      : theme.colors.neutral300};\n  border-width: 1px;\n  margin: 10px 0;\n`;\n\nconst ErrorHeader = styled.span`\n  display: block;\n\n  > div {\n    display: flex;\n    align-self: center;\n    margin-right: 12px;\n  }\n`;\n\nconst ErrorMessage = styled.span`\n  display: block;\n`;\n\nconst formatError = (\n  error: { header?: string; message: string; code: string },\n  constraints: {\n    maxSize?: number;\n    minSize?: number;\n    accept?: string | string[];\n  },\n  byteLabel: string\n) => {\n  const accept =\n    Array.isArray(constraints.accept) && constraints.accept.length === 1\n      ? constraints.accept[0]\n      : constraints.accept;\n  const messageSuffix = Array.isArray(accept)\n    ? `one of ${accept.join(', ')}`\n    : accept;\n\n  switch (error.code) {\n    case 'file-too-large':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.maxSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-too-small':\n      return {\n        ...error,\n        message: `${error.message} ${formatFileSize(\n          constraints.minSize,\n          2,\n          byteLabel\n        )}.`,\n      };\n    case 'file-invalid-type':\n      return { ...error, message: `${error.message}: ${messageSuffix}` };\n    default:\n      return error;\n  }\n};\n\nexport const Preview = forwardRef<\n  HTMLDivElement,\n  Omit<PreviewProps, 'children'>\n>((props, ref) => {\n  const {\n    accept,\n    file,\n    isInverse: isInverseProp,\n    maxSize,\n    minSize,\n    onDeleteFile,\n    onRemoveFile,\n    testId,\n    thumbnails,\n    ...rest\n  } = props;\n\n  const theme: ThemeInterface = useContext(ThemeContext);\n  const i18n: I18nInterface = React.useContext(I18nContext);\n  const isInverse = useIsInverse(isInverseProp);\n  const [actions, setActions] = useState(<CloseIcon />);\n\n  const handleRemoveFile = () => {\n    onRemoveFile && typeof onRemoveFile === 'function' && onRemoveFile(file);\n  };\n\n  const handleDeleteFile = () => {\n    onDeleteFile && typeof onDeleteFile === 'function' && onDeleteFile(file);\n  };\n\n  const FinishedActions = ({ status = 'ready' }: { status?: string }) => {\n    const [done, setDone] = useState<boolean>(false);\n\n    useEffect(() => {\n      let mounted = true;\n\n      setTimeout(() => {\n        if (mounted) {\n          setDone(true);\n        }\n      }, 1000);\n\n      return () => {\n        mounted = false;\n      };\n    }, [status]);\n\n    if (status === 'error' || status === 'ready') {\n      return (\n        <StatusIcons>\n          <IconButton\n            onClick={handleRemoveFile}\n            variant={ButtonVariant.link}\n            color={ButtonColor.secondary}\n            aria-label={`${i18n.dropzone.removeFile} ${file.name}`}\n            icon={<CloseIcon />}\n          />\n        </StatusIcons>\n      );\n    }\n\n    if (status === 'pending') {\n      return (\n        <StatusIcons>\n          <Spinner\n            color={isInverse ? theme.colors.neutral100 : theme.colors.primary}\n          />\n        </StatusIcons>\n      );\n    }\n\n    return (\n      <StatusIcons>\n        <Transition isOpen={!done} unmountOnExit fade>\n          <CheckCircleIcon\n            color={isInverse ? theme.colors.success200 : theme.colors.success}\n            style={{ marginTop: '4px' }}\n          />\n        </Transition>\n        <Transition isOpen={done} unmountOnExit fade>\n          <IconButton\n            onClick={handleDeleteFile}\n            variant={ButtonVariant.link}\n            color={ButtonColor.secondary}\n            aria-label={`${i18n.dropzone.deleteFile} ${file.name}`}\n            icon={<DeleteIcon />}\n          />\n        </Transition>\n      </StatusIcons>\n    );\n  };\n\n  useEffect(() => {\n    setActions(<FinishedActions status={file?.processor?.status} />);\n  }, [file?.processor?.status]);\n\n  return (\n    <InverseContext.Provider value={{ isInverse }}>\n      <StyledCard\n        isInverse={isInverse}\n        theme={theme}\n        file={file}\n        data-testid={props.testId}\n        ref={ref}\n        role={file.errors ? 'alert' : ''}\n      >\n        <StyledFlex\n          theme={theme}\n          behavior={FlexBehavior.container}\n          alignItems={FlexAlignItems.center}\n          {...rest}\n        >\n          <Flex\n            behavior={FlexBehavior.item}\n            alignItems={FlexAlignItems.center}\n            style={IconStyles}\n          >\n            {file.errors ? (\n              <ErrorIcon\n                color={isInverse ? theme.colors.danger300 : theme.colors.danger}\n                size={24}\n              />\n            ) : file.preview &&\n              thumbnails &&\n              file.type &&\n              file.type.startsWith('image') ? (\n              <Thumb role=\"img\" file={file} />\n            ) : (\n              <FileIcon isInverse={isInverse} file={file} />\n            )}\n          </Flex>\n          <FileName xs behavior={FlexBehavior.item} theme={theme}>\n            {file.name}\n          </FileName>\n          {file.processor && file.processor.status === 'pending' && (\n            <Flex\n              role=\"progressbar\"\n              style={{ marginLeft: 'auto' }}\n              behavior={FlexBehavior.item}\n            >\n              {file.processor.percent}\n            </Flex>\n          )}\n          <Flex behavior={FlexBehavior.item}>{actions}</Flex>\n        </StyledFlex>\n        {file.errors && (\n          <Errors theme={theme}>\n            {file.errors.slice(0, 1).map(({ code, ...rest }) => {\n              const { header = '', message } = formatError(\n                { code, ...rest, ...i18n.dropzone.errors[code] },\n                { accept, minSize, maxSize },\n                i18n.dropzone.bytes\n              );\n\n              return (\n                <React.Fragment key={code}>\n                  <ErrorHeader\n                    style={{\n                      color: isInverse\n                        ? theme.colors.danger200\n                        : theme.colors.danger,\n                    }}\n                  >\n                    {header}\n                  </ErrorHeader>\n                  <ErrorMessage>{message}</ErrorMessage>\n                </React.Fragment>\n              );\n            })}\n          </Errors>\n        )}\n      </StyledCard>\n    </InverseContext.Provider>\n  );\n});\n","/* eslint-disable no-empty-pattern */\n/**\n * HELPFUL NOTE!\n * SINCE THIS PACKAGE USES `FILE` WE MUST USE `Object.assign` IN LIEU OF SPREADING\n * `{...file}` WILL NOT COPY ALL OF THE FILE PROPERTIES\n */\n\nimport React, { useImperativeHandle } from 'react';\n\nimport { transparentize } from 'polished';\nimport {\n  useDropzone,\n  DropzoneOptions,\n  DropzoneRootProps,\n  FileRejection,\n} from 'react-dropzone';\nimport {\n  Button,\n  ButtonColor,\n  ButtonVariant,\n  Flex,\n  FlexBehavior,\n  FlexProps,\n  FormFieldContainer,\n  FormFieldContainerBaseProps,\n  I18nContext,\n  I18nInterface,\n  InverseContext,\n  ThemeContext,\n  ThemeInterface,\n  useGenerateId,\n  useIsInverse,\n  styled,\n  Announce,\n  VisuallyHidden,\n} from 'react-magma-dom';\nimport { CloudUploadIcon } from 'react-magma-icons';\n\nimport { FilePreview, FileError } from './FilePreview';\nimport { Preview } from './Preview';\n\nexport interface OnSendFileProps {\n  file: FilePreview;\n  onError?: ({}: { errors: FileError[]; file: FilePreview }) => void;\n  onFinish?: ({}: { file: FilePreview }) => void;\n  onProgress?: ({}: { percent: number; file: FilePreview }) => void;\n}\n\ntype DragState =\n  | 'error'\n  | 'dragAccept'\n  | 'dragReject'\n  | 'dragActive'\n  | 'default';\n\n// NOTE: These props are manually copied to dropzone.mdx\nexport interface DropzoneProps\n  extends Omit<FormFieldContainerBaseProps, 'fieldId' | 'errorMessage'> {\n  /**\n   * Set accepted file types. See https://github.com/okonet/attr-accept for more information. Keep in mind that mime type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows. In some cases there might not be a mime type set at all. See: https://github.com/react-dropzone/react-dropzone/issues/276\n   */\n  accept?: string | string[];\n  /**\n   * Enable/Disable the input\n   */\n  disabled?: boolean;\n  /**\n   * Additional props to pass to the dropzone, see https://react-dropzone.js.org/#src\n   */\n  dropzoneOptions?: Partial<Omit<DropzoneOptions, 'onDrop'>>;\n  /**\n   * Content of the helper message.\n   */\n  helperMessage?: string;\n  /**\n   * @internal\n   */\n  id?: string;\n  /**\n   * Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.\n   * @default 0\n   */\n  maxFiles?: number;\n  /**\n   * Minimum accepted number of files.\n   */\n  minFiles?: number;\n  /**\n   * Maximum file size (in bytes)\n   * @default Infinity\n   */\n  maxSize?: number;\n  /**\n   * Minimum file size (in bytes)\n   * @default 0\n   */\n  minSize?: number;\n  /**\n   * Allow drag 'n' drop (or selection from the file dialog) of multiple files.\n   * @default true\n   */\n  multiple?: boolean;\n  /**\n   * If true, disables drag 'n' drop\n   * @default false\n   */\n  noDrag?: boolean;\n  /**\n   * Callback for when a file is deleted\n   */\n  onDeleteFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is deleted\n   */\n  onRemoveFile?: (file: FilePreview) => void;\n  /**\n   * Callback for when a file is added to the preview list via dropping or selecting. Will be ran on new files when `sendFiles` is true.\n   */\n  onSendFile?: (props: OnSendFileProps) => void;\n  /**\n   * Run `onSendFile` on any new files. Delay processing by setting to `false` until processing is desired.\n   * @default false\n   */\n  sendFiles?: boolean;\n  /**\n   * @internal\n   */\n  testId?: string;\n  /**\n   * Show thumbnails for images in lieu of the file icon.\n   * @default true\n   */\n  thumbnails?: boolean;\n}\n\nconst Container = styled(Flex)<\n  DropzoneRootProps &\n    FlexProps & {\n      dragState?: DragState;\n      noDrag?: boolean;\n      isInverse?: boolean;\n    }\n>`\n  flex-direction: column;\n  align-items: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  justify-content: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  text-align: ${({ noDrag }) => (noDrag ? 'left' : 'center')};\n  padding: ${({ noDrag }) => (noDrag ? '0px' : '24px')};\n  border-radius: ${({ noDrag }) => (noDrag ? '0px' : '4px')};\n  border: ${({ dragState = 'default', noDrag, theme, isInverse }) =>\n    noDrag\n      ? `0px`\n      : dragState === 'dragReject' || dragState === 'error'\n        ? isInverse\n          ? `1px dashed ${theme.colors.danger300}`\n          : `1px dashed ${theme.colors.danger}`\n        : dragState === 'dragActive'\n          ? `1px dashed ${theme.colors.primary}`\n          : dragState === 'dragAccept'\n            ? `1px dashed ${theme.colors.success}`\n            : `1px dashed ${theme.colors.neutral400}`};\n\n  border-style: ${({ dragState = 'default' }) =>\n    dragState === 'error' ? 'solid' : 'dashed'};\n  background-color: ${({ theme, noDrag, isInverse }) =>\n    noDrag\n      ? 'transparent'\n      : isInverse\n        ? transparentize(0.75, theme.colors.neutral900)\n        : theme.colors.neutral200};\n  outline: none;\n  transition: ${({ noDrag }) => `border ${noDrag ? 0 : '.24s'} ease-in-out`};\n`;\n\nconst HelperMessage = styled.span<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  display: block;\n  font-size: 14px;\n  margin: -8px 0 16px 0;\n`;\n\nconst Wrapper = styled.div<{ isInverse?: boolean }>`\n  color: ${({ theme, isInverse }) =>\n    isInverse ? theme.colors.neutral100 : theme.colors.neutral700};\n  margin: 0 0 24px 0;\n  font-size: ${({ theme }) => theme.typeScale.size02.fontSize};\n  line-height: ${({ theme }) => theme.typeScale.size02.lineHeight};\n  font-weight: 500;\n  padding: ${({ theme }) => theme.spaceScale.spacing01};\n`;\n\nconst PreviewList = styled.ul`\n  list-style: none;\n  padding: 0;\n`;\n\nconst PreviewItem = styled.li``;\n\nexport const Dropzone = React.forwardRef<HTMLInputElement, DropzoneProps>(\n  (props, ref) => {\n    const {\n      accept,\n      containerStyle,\n      disabled,\n\n      dropzoneOptions = {\n        multiple: true,\n      },\n      helperMessage,\n      id: defaultId,\n      inputSize,\n      isInverse: isInverseProp,\n      isLabelVisuallyHidden,\n      labelStyle,\n      labelText,\n      maxFiles,\n      minFiles,\n      maxSize,\n      minSize,\n      multiple = true,\n      noDrag = false,\n      onSendFile,\n      onDeleteFile,\n      onRemoveFile,\n      sendFiles = false,\n      testId,\n      thumbnails = true,\n      ...rest\n    } = props;\n\n    const [files, setFiles] = React.useState<FilePreview[]>([]);\n    const [errorMessage, setErrorMessage] = React.useState<string | null>(null);\n    const [announcement, setAnnouncement] = React.useState<string>('');\n\n    const isInverse = useIsInverse(isInverseProp);\n    const theme: ThemeInterface = React.useContext(ThemeContext);\n    const i18n: I18nInterface = React.useContext(I18nContext);\n    const id = useGenerateId(defaultId);\n    const helperMessageId = useGenerateId(`${id}-helper`);\n\n    const browseFileButtonRef = React.useRef<HTMLButtonElement>(null);\n\n    const onDrop = React.useCallback(\n      (acceptedFiles: FilePreview[], rejectedFiles: FileRejection[]) => {\n        const newFiles = [\n          ...acceptedFiles.map((file: FilePreview) =>\n            Object.assign(file, {\n              preview: URL.createObjectURL(file),\n            })\n          ),\n          ...rejectedFiles.map(\n            ({ file, errors }: { file: FilePreview; errors: FileError[] }) =>\n              Object.assign(file, {\n                errors,\n              })\n          ),\n        ];\n\n        setFiles((prevFiles: FilePreview[]) => [...prevFiles, ...newFiles]);\n\n        if (acceptedFiles.length > 0) {\n          const fileNames = acceptedFiles.map(file => file.name).join(', ');\n          const message =\n            acceptedFiles.length === 1\n              ? i18n.dropzone.fileAdded.replace(/\\{fileName\\}/g, fileNames)\n              : i18n.dropzone.filesAdded\n                  .replace(/\\{count\\}/g, acceptedFiles.length.toString())\n                  .replace(/\\{fileNames\\}/g, fileNames);\n\n          setAnnouncement(message);\n        }\n\n        browseFileButtonRef.current && browseFileButtonRef.current.focus();\n      },\n      [i18n]\n    );\n\n    const {\n      getInputProps,\n      getRootProps,\n      isDragAccept,\n      isDragActive,\n      isDragReject,\n      open,\n      inputRef,\n    } = useDropzone({\n      noClick: true,\n      disabled,\n      multiple,\n      maxSize,\n      minSize,\n      accept,\n      onDrop,\n      noDrag,\n      ...dropzoneOptions,\n    });\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current\n    );\n\n    const inputProps = getInputProps({ id });\n\n    let dragState: DragState = 'default';\n\n    if (errorMessage) {\n      dragState = 'error';\n    } else if (isDragAccept) {\n      dragState = 'dragAccept';\n    } else if (isDragReject) {\n      dragState = 'dragReject';\n    } else if (isDragActive) {\n      dragState = 'dragActive';\n    }\n\n    const handleRemoveFile = (removedFile: FilePreview) => {\n      setFiles(prevFiles => prevFiles.filter(file => file !== removedFile));\n\n      if (onRemoveFile && typeof onRemoveFile === 'function') {\n        onRemoveFile(removedFile);\n      }\n\n      const message = i18n.dropzone.fileRemoved.replace(\n        /\\{fileName\\}/g,\n        removedFile.name\n      );\n\n      setAnnouncement(message);\n\n      browseFileButtonRef.current && browseFileButtonRef.current.focus();\n    };\n\n    const handleDeleteFile = (removedFile: FilePreview) => {\n      setFiles(prevFiles => prevFiles.filter(file => file !== removedFile));\n\n      if (onDeleteFile && typeof onDeleteFile === 'function') {\n        onDeleteFile(removedFile);\n      }\n\n      const message = i18n.dropzone.fileDeleted.replace(\n        /\\{fileName\\}/g,\n        removedFile.name\n      );\n\n      setAnnouncement(message);\n\n      browseFileButtonRef.current && browseFileButtonRef.current.focus();\n    };\n\n    const setProgress = (progressProps: {\n      percent: number;\n      file: FilePreview;\n    }) => {\n      setFiles(prevFiles =>\n        prevFiles.map(file =>\n          file === progressProps.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: `${progressProps.percent}%`,\n                  status: 'pending',\n                },\n              })\n            : file\n        )\n      );\n\n      // Announce progress every 25% to avoid too many announcements\n      if (progressProps.percent > 0 && progressProps.percent % 25 === 0) {\n        const message = i18n.dropzone.fileUploading\n          .replace(/\\{fileName\\}/g, progressProps.file.name)\n          .replace(/\\{percent\\}/g, progressProps.percent.toString());\n\n        setAnnouncement(message);\n      }\n    };\n\n    const setFinished = (finishedProps: { file: FilePreview }) => {\n      setFiles(prevFiles =>\n        prevFiles.map(file =>\n          file === finishedProps.file\n            ? Object.assign(file, {\n                processor: {\n                  ...file.processor,\n                  percent: '',\n                  status: 'finished',\n                },\n              })\n            : file\n        )\n      );\n\n      // Announce successful upload\n      const message = i18n.dropzone.fileUploaded.replace(\n        /\\{fileName\\}/g,\n        finishedProps.file.name\n      );\n\n      setAnnouncement(message);\n    };\n\n    const setError = (errorProps: {\n      errors: FileError[];\n      file: FilePreview;\n    }) => {\n      setFiles(prevFiles =>\n        prevFiles.map(file =>\n          file === errorProps.file\n            ? Object.assign(file, {\n                errors: errorProps.errors,\n                processor: { ...file.processor, status: 'error' },\n              })\n            : file\n        )\n      );\n    };\n\n    React.useEffect(\n      () => () => {\n        files.forEach(\n          file => file.preview && URL.revokeObjectURL(file.preview)\n        );\n      },\n      [files]\n    );\n\n    React.useEffect(() => {\n      const formatError = (\n        code: string | null,\n        constraints: { maxFiles?: number; minFiles?: number }\n      ) => {\n        if (code === null) return null;\n        const error = i18n.dropzone.errors[code];\n\n        switch (code) {\n          case 'too-many-files':\n            return `${error.message} ${constraints.maxFiles} ${i18n.dropzone.files}.`;\n          case 'too-few-files':\n            return `${error.message} ${constraints.minFiles} ${i18n.dropzone.files}.`;\n          default:\n            return error.message;\n        }\n      };\n\n      const minFileError = minFiles && files.length < minFiles;\n      const maxFileError = maxFiles && files.length > maxFiles;\n\n      let errorCode: string | null = null;\n\n      if (maxFileError) {\n        errorCode = 'too-many-files';\n      } else if (minFileError) {\n        errorCode = 'too-few-files';\n      }\n\n      setErrorMessage(formatError(errorCode, { minFiles, maxFiles }));\n\n      if (sendFiles && files.length > 0 && !maxFileError && !minFileError) {\n        setFiles((prevFiles: FilePreview[]) => {\n          return prevFiles.map((file: FilePreview) => {\n            if (!file.errors && !file.processor && onSendFile) {\n              onSendFile({\n                file,\n                onError: setError,\n                onFinish: setFinished,\n                onProgress: setProgress,\n              });\n            }\n\n            return file;\n          });\n        });\n      }\n    }, [\n      sendFiles,\n      files.length,\n      onSendFile,\n      maxFiles,\n      minFiles,\n      i18n.dropzone.errors,\n      i18n.dropzone.files,\n    ]);\n\n    return (\n      <InverseContext.Provider value={{ isInverse }}>\n        <FormFieldContainer\n          actionable={false}\n          containerStyle={containerStyle}\n          errorMessage={errorMessage}\n          fieldId={id}\n          inputSize={inputSize}\n          isInverse={isInverse}\n          isLabelVisuallyHidden={isLabelVisuallyHidden}\n          labelStyle={labelStyle}\n          labelText={labelText}\n          messageStyle={{ minHeight: 0 }}\n          data-testid={testId}\n        >\n          <HelperMessage\n            id={helperMessageId}\n            theme={theme}\n            isInverse={isInverse}\n          >\n            {helperMessage}\n          </HelperMessage>\n          <Container\n            behavior={FlexBehavior.container}\n            dragState={dragState}\n            isInverse={isInverse}\n            noDrag={noDrag}\n            theme={theme}\n            {...getRootProps()}\n            {...rest}\n            testId={testId}\n            tabIndex={-1}\n          >\n            <input\n              ref={inputRef}\n              type={inputProps.type}\n              accept={inputProps.accept}\n              autoComplete={inputProps.autoComplete}\n              id={inputProps.id}\n              multiple={inputProps.multiple}\n              onChange={inputProps.onChange}\n              onClick={inputProps.onClick}\n              style={inputProps.style}\n              tabIndex={inputProps.tabIndex}\n              data-testid=\"file-input\"\n            />\n            {noDrag ? (\n              <Flex xs behavior={FlexBehavior.item}>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                  ref={browseFileButtonRef}\n                  aria-describedby={helperMessage ? helperMessageId : undefined}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            ) : (\n              <Flex behavior={FlexBehavior.item}>\n                <CloudUploadIcon\n                  aria-hidden=\"true\"\n                  color={\n                    isInverse\n                      ? theme.colors.neutral100\n                      : theme.colors.neutral500\n                  }\n                  size={48}\n                />\n                <Wrapper isInverse={isInverse} theme={theme}>\n                  {i18n.dropzone.dragMessage}\n                </Wrapper>\n                <Button\n                  color={ButtonColor.primary}\n                  disabled={disabled}\n                  isInverse={isInverse}\n                  onClick={open}\n                  style={{ margin: 0 }}\n                  variant={ButtonVariant.solid}\n                  ref={browseFileButtonRef}\n                  aria-describedby={helperMessage ? helperMessageId : undefined}\n                >\n                  {i18n.dropzone.browseFiles}\n                </Button>\n              </Flex>\n            )}\n          </Container>\n        </FormFieldContainer>\n        <PreviewList>\n          {files.map((file: FilePreview) => (\n            <PreviewItem key={file.name}>\n              <Preview\n                accept={accept}\n                file={file}\n                isInverse={isInverse}\n                maxSize={maxSize}\n                minSize={minSize}\n                onDeleteFile={handleDeleteFile}\n                onRemoveFile={handleRemoveFile}\n                thumbnails={thumbnails}\n              />\n            </PreviewItem>\n          ))}\n        </PreviewList>\n\n        <VisuallyHidden>\n          <Announce>{announcement}</Announce>\n        </VisuallyHidden>\n      </InverseContext.Provider>\n    );\n  }\n);\n"],"names":["icons","default","Icon","InsertDriveFileIcon","style","color","magma","colors","neutral500","word","FileWordIcon","info500","excel","FileExcelIcon","success500","powerpoint","FilePowerpointIcon","warning500","pdf","FilePdfIcon","danger500","image","ImageIcon","video","VideocamIcon","audio","AudiotrackIcon","archive","FileZipIcon","iconMapping","xlsx","xlsm","xlsb","xltx","xls","xlt","doc","docx","docm","dotx","dotm","docb","pptx","pptm","ppt","png","svg","zip","FileIcon","file","isInverse","path","type","category","split","extension","pop","_jsx","size","iconSizes","medium","formatFileSize","bytes","decimalPoint","bytesLabel","undefined","sizes","i","Math","floor","log","parseFloat","pow","toFixed","_excluded","_excluded2","_t","_t2","_t3","_t4","_t5","_t6","_t7","_t8","_","t","Thumb","styled","div","preview","StatusIcons","IconStyles","marginRight","display","Errors","theme","neutral300","typeScale","size02","fontSize","lineHeight","StyledFlex","Flex","FileName","StyledCard","Card","errors","danger300","danger","ErrorHeader","span","ErrorMessage","Preview","forwardRef","props","ref","_file$processor2","accept","isInverseProp","maxSize","minSize","onDeleteFile","onRemoveFile","thumbnails","rest","_objectWithoutPropertiesLoose","useContext","ThemeContext","i18n","React","I18nContext","useIsInverse","actions","setActions","useState","CloseIcon","handleRemoveFile","handleDeleteFile","FinishedActions","status","done","setDone","useEffect","mounted","setTimeout","children","IconButton","onClick","variant","ButtonVariant","link","ButtonColor","secondary","dropzone","removeFile","name","icon","Spinner","neutral100","primary","_jsxs","Transition","isOpen","unmountOnExit","fade","CheckCircleIcon","success200","success","marginTop","deleteFile","DeleteIcon","_file$processor","processor","InverseContext","Provider","value","testId","role","_extends","behavior","FlexBehavior","container","alignItems","FlexAlignItems","center","item","ErrorIcon","startsWith","xs","marginLeft","percent","slice","map","_ref","code","header","message","formatError","error","constraints","byteLabel","Array","isArray","length","messageSuffix","join","Fragment","danger200","Container","noDrag","dragState","neutral400","transparentize","neutral900","neutral200","HelperMessage","neutral700","Wrapper","spaceScale","spacing01","PreviewList","ul","PreviewItem","li","Dropzone","containerStyle","disabled","dropzoneOptions","multiple","helperMessage","id","defaultId","inputSize","isLabelVisuallyHidden","labelStyle","labelText","maxFiles","minFiles","onSendFile","sendFiles","files","setFiles","errorMessage","setErrorMessage","announcement","setAnnouncement","useGenerateId","helperMessageId","browseFileButtonRef","useRef","onDrop","useCallback","acceptedFiles","rejectedFiles","newFiles","Object","assign","URL","createObjectURL","prevFiles","fileNames","fileAdded","replace","filesAdded","toString","current","focus","getInputProps","getRootProps","isDragAccept","isDragActive","isDragReject","open","inputRef","useDropzone","noClick","useImperativeHandle","inputProps","removedFile","filter","fileRemoved","fileDeleted","setProgress","progressProps","fileUploading","setFinished","finishedProps","fileUploaded","setError","errorProps","forEach","revokeObjectURL","minFileError","maxFileError","errorCode","onError","onFinish","onProgress","FormFieldContainer","actionable","fieldId","messageStyle","minHeight","tabIndex","autoComplete","onChange","Button","margin","browseFiles","CloudUploadIcon","dragMessage","solid","VisuallyHidden","Announce"],"mappings":"03BAuBA,MAAMA,EAAQ,CACZC,QAAS,CACPC,KAAMC,EACNC,MAAO,CACLC,MAAOC,EAAMC,OAAOC,aAGxBC,KAAM,CACJP,KAAMQ,EACNN,MAAO,CACLC,MAAOC,EAAMC,OAAOI,UAGxBC,MAAO,CACLV,KAAMW,EACNT,MAAO,CACLC,MAAOC,EAAMC,OAAOO,aAGxBC,WAAY,CACVb,KAAMc,EACNZ,MAAO,CACLC,MAAOC,EAAMC,OAAOU,aAGxBC,IAAK,CACHhB,KAAMiB,EACNf,MAAO,CACLC,MAAOC,EAAMC,OAAOa,YAGxBC,MAAO,CACLnB,KAAMoB,EACNlB,MAAO,CACLC,MAAOC,EAAMC,OAAOC,aAGxBe,MAAO,CACLrB,KAAMsB,EACNpB,MAAO,CACLC,MAAOC,EAAMC,OAAOC,aAGxBiB,MAAO,CACLvB,KAAMwB,EACNtB,MAAO,CACLC,MAAOC,EAAMC,OAAOC,aAGxBmB,QAAS,CACPzB,KAAM0B,EACNxB,MAAO,CACLC,MAAOC,EAAMC,OAAOC,cAKpBqB,EAEF,CACF5B,QAASD,EAAMC,QACf6B,KAAM9B,EAAMY,MACZmB,KAAM/B,EAAMY,MACZoB,KAAMhC,EAAMY,MACZqB,KAAMjC,EAAMY,MACZsB,IAAKlC,EAAMY,MACXuB,IAAKnC,EAAMY,MACXwB,IAAKpC,EAAMS,KACX4B,KAAMrC,EAAMS,KACZ6B,KAAMtC,EAAMS,KACZ8B,KAAMvC,EAAMS,KACZ+B,KAAMxC,EAAMS,KACZgC,KAAMzC,EAAMS,KACZiC,KAAM1C,EAAMe,WACZ4B,KAAM3C,EAAMe,WACZ6B,IAAK5C,EAAMe,WACXG,IAAKlB,EAAMkB,IACX2B,IAAK7C,EAAMqB,MACXyB,IAAK9C,EAAMqB,MACXA,MAAOrB,EAAMqB,MACbI,MAAOzB,EAAMyB,MACbF,MAAOvB,EAAMuB,MACbwB,IAAK/C,EAAM2B,SAGAqB,EAAWA,EAAGC,OAAMC,gBAC/B,MAAMC,KAAEA,EAAO,GAAEC,KAAEA,EAAO,IAAOH,EAC3BI,EAAWD,EAAKE,MAAM,KAAK,GAC3BC,EAAYJ,EAAKG,MAAM,KAAKE,OAAS,WACrCtD,KAAEA,EAAIE,MAAEA,GACZyB,EAAY0B,IAAc1B,EAAYwB,IAAaxB,EAAY5B,qBAEjE,OAAOwD,EAACvD,EAAI,CAACwD,KAAMpD,EAAMqD,UAAUC,OAAQxD,MAAO8C,EAAY,GAAK9C,0WCnH9D,MAAMyD,EAAiBA,CAC5BC,EACAC,EAAe,EACfC,EAAa,WAEb,QAAcC,IAAVH,EAAqB,OACzB,GAAa,GAATA,EAAY,MAAO,KAAKE,IAC5B,MACME,EAAQ,CAACF,EAAY,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,KAAM,MAC/DG,EAAIC,KAAKC,MAAMD,KAAKE,IAAIR,GAASM,KAAKE,IAFlC,OAIV,OACEC,YAAYT,EAAQM,KAAKI,IALjB,KAKwBL,IAAIM,QAAQV,IAAiB,IAAMG,EAAMC,ICZ7EO,EAAA,CAAA,SAAA,OAAA,YAAA,UAAA,UAAA,eAAA,eAAA,SAAA,cAAAC,EAAA,CAAA,QAAA,IAAAC,EAAAC,EAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC,GAAAA,EA+CA,MAAMC,GAAQC,EAAOC,IAAGZ,IAAAA,EAAAQ,EAAA;sBAAA;;;;;;;GACF,EAAGnC,UACrB,QAAQ,YAAaA,GAAQA,EAAKwC,aAShCC,GAAcH,EAAOC,IAAGX,IAAAA,EAAAO,EAAA;;;;;;;;;;;IAaxBO,GAAa,CACjBC,YAAa,OACbC,QAAS,QAGLC,GAASP,EAAOC,IAAGV,KAAAA,GAAAM,EAAA;0BAAA;;eAAA;iBAAA;GACC,EAAGW,WAAYA,EAAMxF,OAAOyF,WAEvC,EAAGD,WAAYA,EAAME,UAAUC,OAAOC,SACpC,EAAGJ,WAAYA,EAAME,UAAUC,OAAOE,YAGjDC,GAAad,EAAOe,EAAPf,CAAYR,KAAAA,GAAAK,EAAA;;;eAAA;iBAAA;GAGhB,EAAGW,WAAYA,EAAME,UAAUC,OAAOC,SACpC,EAAGJ,WAAYA,EAAME,UAAUC,OAAOE,YAGjDG,GAAWhB,EAAOe,EAAPf,CAAYP,KAAAA,GAAAI,EAAA;;;;;;;eAAA;iBAAA;GAOd,EAAGW,WAAYA,EAAME,UAAUC,OAAOC,SACpC,EAAGJ,WAAYA,EAAME,UAAUC,OAAOE,YAGjDI,GAAajB,EAAOkB,EAAPlB,CAAYN,KAAAA,GAAAG,EAAA;;kBAAA;;;GAEb,EAAGnC,OAAM8C,QAAO7C,eAC9BD,EAAKyD,OACDxD,EACE6C,EAAMxF,OAAOoG,UACbZ,EAAMxF,OAAOqG,OACfb,EAAMxF,OAAOyF,YAKfa,GAActB,EAAOuB,KAAI5B,KAAAA,GAAAE,EAAA;;;;;;;;IAUzB2B,GAAexB,EAAOuB,KAAI3B,KAAAA,GAAAC,EAAA;;IA+CnB4B,gBAAUC,EAGrB,CAACC,EAAOC,KAAOC,IAAAA,EACf,MAAMC,OACJA,EAAMpE,KACNA,EACAC,UAAWoE,EAAaC,QACxBA,EAAOC,QACPA,EAAOC,aACPA,EAAYC,aACZA,EAAYC,WAEZA,GAEET,EADCU,EAAIC,EACLX,EAAKxC,GAEHqB,EAAwB+B,EAAWC,GACnCC,EAAsBC,EAAMH,WAAWI,GACvChF,EAAYiF,EAAab,IACxBc,EAASC,GAAcC,eAAS7E,EAAC8E,EAAS,CAAA,IAE3CC,EAAmBA,KACvBd,GAAwC,mBAAjBA,GAA+BA,EAAazE,IAG/DwF,EAAmBA,KACvBhB,GAAwC,mBAAjBA,GAA+BA,EAAaxE,IAG/DyF,EAAkBA,EAAGC,OAAAA,EAAS,YAClC,MAAOC,EAAMC,GAAWP,GAAkB,GAgB1C,OAdAQ,EAAU,KACR,IAAIC,GAAU,EAQd,OANAC,WAAW,KACLD,GACFF,GAAQ,IAET,KAEI,KACLE,GAAU,IAEX,CAACJ,IAEW,UAAXA,GAAiC,UAAXA,eAEtBlF,EAACiC,GAAW,CAAAuD,sBACVxF,EAACyF,EAAU,CACTC,QAASX,EACTY,QAASC,EAAcC,KACvBjJ,MAAOkJ,EAAYC,UACnB,aAAY,GAAGxB,EAAKyB,SAASC,cAAczG,EAAK0G,OAChDC,kBAAMnG,EAAC8E,EAAS,CAAG,OAMZ,YAAXI,eAEAlF,EAACiC,GAAW,CAAAuD,sBACVxF,EAACoG,EAAO,CACNxJ,MAAO6C,EAAY6C,EAAMxF,OAAOuJ,WAAa/D,EAAMxF,OAAOwJ,yBAOhEC,EAACtE,GAAWuD,CAAAA,SACVxF,cAAAA,EAACwG,EAAWC,CAAAA,QAAStB,EAAMuB,eAAa,EAACC,MAAI,EAAAnB,sBAC3CxF,EAAC4G,EAAe,CACdhK,MAAO6C,EAAY6C,EAAMxF,OAAO+J,WAAavE,EAAMxF,OAAOgK,QAC1DnK,MAAO,CAAEoK,UAAW,wBAGxB/G,EAACwG,EAAWC,CAAAA,OAAQtB,EAAMuB,eAAcC,EAAAA,MAAInB,EAAAA,sBAC1CxF,EAACyF,EACCC,CAAAA,QAASV,EACTW,QAASC,EAAcC,KACvBjJ,MAAOkJ,EAAYC,UACnB,aAAY,GAAGxB,EAAKyB,SAASgB,cAAcxH,EAAK0G,OAChDC,kBAAMnG,EAACiH,EAAU,CAAG,WAW9B,OAJA5B,EAAU,KAAK6B,IAAAA,EACbtC,eAAW5E,EAACiF,EAAgBC,CAAAA,OAAYgC,MAAJ1H,GAAA0H,OAAIA,EAAJ1H,EAAM2H,gBAAND,EAAAA,EAAiBhC,WACpD,CAAKvB,MAAJnE,GAAAmE,OAAIA,EAAJnE,EAAM2H,gBAANxD,EAAAA,EAAiBuB,sBAGnBlF,EAACoH,EAAeC,SAAQ,CAACC,MAAO,CAAE7H,aAAY+F,sBAC5Ce,EAACxD,GAAU,CACTtD,UAAWA,EACX6C,MAAOA,EACP9C,KAAMA,EACN,cAAaiE,EAAM8D,OACnB7D,IAAKA,EACL8D,KAAMhI,EAAKyD,OAAS,QAAU,GAAGuC,SAAA,cAEjCe,EAAC3D,GAAU6E,EAAA,CACTnF,MAAOA,EACPoF,SAAUC,EAAaC,UACvBC,WAAYC,EAAeC,QACvB5D,EAAI,CAAAqB,SAAA,cAERxF,EAAC6C,EAAI,CACH6E,SAAUC,EAAaK,KACvBH,WAAYC,EAAeC,OAC3BpL,MAAOuF,GAAWsD,SAEjBhG,EAAKyD,oBACJjD,EAACiI,EACCrL,CAAAA,MAAO6C,EAAY6C,EAAMxF,OAAOoG,UAAYZ,EAAMxF,OAAOqG,OACzDlD,KAAM,KAENT,EAAKwC,SACPkC,GACA1E,EAAKG,MACLH,EAAKG,KAAKuI,WAAW,sBACrBlI,EAAC6B,GAAM2F,CAAAA,KAAK,MAAMhI,KAAMA,iBAExBQ,EAACT,EAASE,CAAAA,UAAWA,EAAWD,KAAMA,mBAG1CQ,EAAC8C,GAASqF,CAAAA,IAAGT,EAAAA,SAAUC,EAAaK,KAAM1F,MAAOA,EAAMkD,SACpDhG,EAAK0G,OAEP1G,EAAK2H,WAAuC,YAA1B3H,EAAK2H,UAAUjC,qBAChClF,EAAC6C,EAAI,CACH2E,KAAK,cACL7K,MAAO,CAAEyL,WAAY,QACrBV,SAAUC,EAAaK,KAAKxC,SAE3BhG,EAAK2H,UAAUkB,uBAGpBrI,EAAC6C,EAAI,CAAC6E,SAAUC,EAAaK,KAAKxC,SAAEb,QAErCnF,EAAKyD,qBACJjD,EAACqC,GAAM,CAACC,MAAOA,EAAMkD,SAClBhG,EAAKyD,OAAOqF,MAAM,EAAG,GAAGC,IAAIC,IAAC,IAAAC,KAAEA,GAAeD,EAANrE,EAAIC,EAAAoE,EAAAtH,GAC3C,MAAMwH,OAAEA,EAAS,GAAEC,QAAEA,GA/LfC,EAClBC,EACAC,EAKAC,KAEA,MAAMnF,EACJoF,MAAMC,QAAQH,EAAYlF,SAAyC,IAA9BkF,EAAYlF,OAAOsF,OACpDJ,EAAYlF,OAAO,GACnBkF,EAAYlF,OACZuF,EAAgBH,MAAMC,QAAQrF,GAChC,UAAUA,EAAOwF,KAAK,QACtBxF,EAEJ,OAAQiF,EAAMJ,MACZ,IAAK,iBACH,OAAAhB,EACKoB,CAAAA,EAAAA,EACHF,CAAAA,QAAS,GAAGE,EAAMF,WAAWvI,EAC3B0I,EAAYhF,QACZ,EACAiF,QAGN,IAAK,iBACH,OAAAtB,EAAA,CAAA,EACKoB,EAAK,CACRF,QAAS,GAAGE,EAAMF,WAAWvI,EAC3B0I,EAAY/E,QACZ,EACAgF,QAGN,IAAK,oBACH,OAAAtB,EAAA,GAAYoB,EAAK,CAAEF,QAAS,GAAGE,EAAMF,YAAYQ,MACnD,QACE,OAAON,IAwJkCD,CAAWnB,EAAA,CACxCgB,QAAStE,EAASI,EAAKyB,SAAS/C,OAAOwF,IACzC,CAAE7E,SAAQG,UAASD,WACnBS,EAAKyB,SAAS3F,oBAGhB,OACEkG,EAAC/B,EAAM6E,SAAQ,CAAA7D,SAAA,cACbxF,EAACoD,GAAW,CACVzG,MAAO,CACLC,MAAO6C,EACH6C,EAAMxF,OAAOwM,UACbhH,EAAMxF,OAAOqG,QACjBqC,SAEDkD,iBAEH1I,EAACsD,GAAY,CAAAkC,SAAEmD,MAVIF,cC9TrCxH,GAAA,CAAA,SAAA,iBAAA,WAAA,kBAAA,gBAAA,KAAA,YAAA,YAAA,wBAAA,aAAA,YAAA,WAAA,WAAA,UAAA,UAAA,WAAA,SAAA,aAAA,eAAA,eAAA,YAAA,SAAA,cAAA,IAAAE,GAAAC,GAAAC,GAAAC,GAAAC,GAAAI,GAAAC,GAAAA,EAgIA,MAAM2H,GAAYzH,EAAOe,EAAPf,CAAYX,KAAAA,GAAAQ,EAAA;;iBAAA;qBAAA;gBAAA;aAAA;mBAAA;YAAA;;kBAAA;sBAAA;;gBAAA;GASb,EAAG6H,YAAcA,EAAS,OAAS,SAC/B,EAAGA,YAAcA,EAAS,OAAS,SACxC,EAAGA,YAAcA,EAAS,OAAS,SACtC,EAAGA,YAAcA,EAAS,MAAQ,OAC5B,EAAGA,YAAcA,EAAS,MAAQ,MACzC,EAAGC,UAAAA,EAAY,UAAWD,SAAQlH,QAAO7C,eACjD+J,EACI,MACc,eAAdC,GAA4C,UAAdA,EAC5BhK,EACE,cAAc6C,EAAMxF,OAAOoG,YAC3B,cAAcZ,EAAMxF,OAAOqG,SACf,eAAdsG,EACE,cAAcnH,EAAMxF,OAAOwJ,UACb,eAAdmD,EACE,cAAcnH,EAAMxF,OAAOgK,UAC3B,cAAcxE,EAAMxF,OAAO4M,aAEvB,EAAGD,UAAAA,EAAY,aACf,UAAdA,EAAwB,QAAU,SAChB,EAAGnH,QAAOkH,SAAQ/J,eACpC+J,EACI,cACA/J,EACEkK,EAAe,IAAMrH,EAAMxF,OAAO8M,YAClCtH,EAAMxF,OAAO+M,WAEP,EAAGL,YAAa,UAAUA,EAAS,EAAI,sBAGjDM,GAAgBhI,EAAOuB,KAAIjC,KAAAA,GAAAO,EAAA;WAAA;;;;GACtB,EAAGW,QAAO7C,eACjBA,EAAY6C,EAAMxF,OAAOuJ,WAAa/D,EAAMxF,OAAOiN,YAMjDC,GAAUlI,EAAOC,IAAGV,KAAAA,GAAAM,EAAA;WAAA;;eAAA;iBAAA;;aAAA;GACf,EAAGW,QAAO7C,eACjBA,EAAY6C,EAAMxF,OAAOuJ,WAAa/D,EAAMxF,OAAOiN,WAExC,EAAGzH,WAAYA,EAAME,UAAUC,OAAOC,SACpC,EAAGJ,WAAYA,EAAME,UAAUC,OAAOE,WAE1C,EAAGL,WAAYA,EAAM2H,WAAWC,WAGvCC,GAAcrI,EAAOsI,GAAE9I,KAAAA,GAAAK,EAAA;;;IAKvB0I,GAAcvI,EAAOwI,GAAE/I,KAAAA,GAAAI,EAAA,KAEhB4I,gBAAW/F,EAAMhB,WAC5B,CAACC,EAAOC,KACN,MAAME,OACJA,EAAM4G,eACNA,EAAcC,SACdA,EAAQC,gBAERA,EAAkB,CAChBC,UAAU,GACXC,cACDA,EACAC,GAAIC,EAASC,UACbA,EACAtL,UAAWoE,EAAamH,sBACxBA,EAAqBC,WACrBA,EAAUC,UACVA,EAASC,SACTA,EAAQC,SACRA,EAAQtH,QACRA,EAAOC,QACPA,EAAO4G,SACPA,GAAW,EAAInB,OACfA,GAAS,EAAK6B,WACdA,EAAUrH,aACVA,EAAYC,aACZA,EAAYqH,UACZA,GAAY,EAAK/D,OACjBA,EAAMrD,WACNA,GAAa,GAEXT,EADCU,EAAIC,EACLX,EAAKxC,KAEFsK,EAAOC,GAAYhH,EAAMK,SAAwB,KACjD4G,EAAcC,GAAmBlH,EAAMK,SAAwB,OAC/D8G,EAAcC,GAAmBpH,EAAMK,SAAiB,IAEzDpF,EAAYiF,EAAab,GACzBvB,GAAwBkC,EAAMH,WAAWC,GACzCC,GAAsBC,EAAMH,WAAWI,GACvCoG,GAAKgB,EAAcf,GACnBgB,GAAkBD,EAAc,GAAGhB,aAEnCkB,GAAsBvH,EAAMwH,OAA0B,MAEtDC,GAASzH,EAAM0H,YACnB,CAACC,EAA8BC,KAC7B,MAAMC,EAAW,IACZF,EAAc5D,IAAK/I,GACpB8M,OAAOC,OAAO/M,EAAM,CAClBwC,QAASwK,IAAIC,gBAAgBjN,SAG9B4M,EAAc7D,IACf,EAAG/I,OAAMyD,YACPqJ,OAAOC,OAAO/M,EAAM,CAClByD,aAOR,GAFAuI,EAAUkB,GAA6B,IAAIA,KAAcL,IAErDF,EAAcjD,OAAS,EAAG,CAC5B,MAAMyD,EAAYR,EAAc5D,IAAI/I,GAAQA,EAAK0G,MAAMkD,KAAK,MACtDT,EACqB,IAAzBwD,EAAcjD,OACV3E,GAAKyB,SAAS4G,UAAUC,QAAQ,gBAAiBF,GACjDpI,GAAKyB,SAAS8G,WACXD,QAAQ,aAAcV,EAAcjD,OAAO6D,YAC3CF,QAAQ,iBAAkBF,GAEnCf,EAAgBjD,EAClB,CAEAoD,GAAoBiB,SAAWjB,GAAoBiB,QAAQC,SAE7D,CAAC1I,MAGG2I,cACJA,GAAaC,aACbA,GAAYC,aACZA,GAAYC,aACZA,GAAYC,aACZA,GAAYC,KACZA,GAAIC,SACJA,IACEC,EAAWhG,EACbiG,CAAAA,SAAS,EACTjD,WACAE,WACA7G,UACAC,UACAH,SACAqI,UACAzC,UACGkB,IAGLiD,EACEjK,EACA,IAAM8J,GAASR,SAGjB,MAAMY,GAAaV,GAAc,CAAErC,QAEnC,IAAIpB,GAAuB,UAEvBgC,EACFhC,GAAY,QACH2D,GACT3D,GAAY,aACH6D,GACT7D,GAAY,aACH4D,KACT5D,GAAY,cAGd,MAAM1E,GAAoB8I,IACxBrC,EAASkB,GAAaA,EAAUoB,OAAOtO,GAAQA,IAASqO,IAEpD5J,GAAwC,mBAAjBA,GACzBA,EAAa4J,GAGf,MAAMlF,EAAUpE,GAAKyB,SAAS+H,YAAYlB,QACxC,gBACAgB,EAAY3H,MAGd0F,EAAgBjD,GAEhBoD,GAAoBiB,SAAWjB,GAAoBiB,QAAQC,SAGvDjI,GAAoB6I,IACxBrC,EAASkB,GAAaA,EAAUoB,OAAOtO,GAAQA,IAASqO,IAEpD7J,GAAwC,mBAAjBA,GACzBA,EAAa6J,GAGf,MAAMlF,EAAUpE,GAAKyB,SAASgI,YAAYnB,QACxC,gBACAgB,EAAY3H,MAGd0F,EAAgBjD,GAEhBoD,GAAoBiB,SAAWjB,GAAoBiB,QAAQC,SAGvDgB,GAAeC,IAmBnB,GAfA1C,EAASkB,GACPA,EAAUnE,IAAI/I,GACZA,IAAS0O,EAAc1O,KACnB8M,OAAOC,OAAO/M,EAAM,CAClB2H,UAASM,EACJjI,CAAAA,EAAAA,EAAK2H,UAAS,CACjBkB,QAAS,GAAG6F,EAAc7F,WAC1BnD,OAAQ,cAGZ1F,IAKJ0O,EAAc7F,QAAU,GAAK6F,EAAc7F,QAAU,IAAO,EAAG,CACjE,MAAMM,EAAUpE,GAAKyB,SAASmI,cAC3BtB,QAAQ,gBAAiBqB,EAAc1O,KAAK0G,MAC5C2G,QAAQ,eAAgBqB,EAAc7F,QAAQ0E,YAEjDnB,EAAgBjD,EAClB,GAGIyF,GAAeC,IACnB7C,EAASkB,GACPA,EAAUnE,IAAI/I,GACZA,IAAS6O,EAAc7O,KACnB8M,OAAOC,OAAO/M,EAAM,CAClB2H,UAASM,EACJjI,CAAAA,EAAAA,EAAK2H,UACRkB,CAAAA,QAAS,GACTnD,OAAQ,eAGZ1F,IAKR,MAAMmJ,EAAUpE,GAAKyB,SAASsI,aAAazB,QACzC,gBACAwB,EAAc7O,KAAK0G,MAGrB0F,EAAgBjD,IAGZ4F,GAAYC,IAIhBhD,EAASkB,GACPA,EAAUnE,IAAI/I,GACZA,IAASgP,EAAWhP,KAChB8M,OAAOC,OAAO/M,EAAM,CAClByD,OAAQuL,EAAWvL,OACnBkE,UAASM,EAAA,CAAA,EAAOjI,EAAK2H,WAAWjC,OAAQ,YAE1C1F,KAuEV,OAlEAgF,EAAMa,UACJ,IAAM,KACJkG,EAAMkD,QACJjP,GAAQA,EAAKwC,SAAWwK,IAAIkC,gBAAgBlP,EAAKwC,WAGrD,CAACuJ,IAGH/G,EAAMa,UAAU,KACd,MAiBMsJ,EAAevD,GAAYG,EAAMrC,OAASkC,EAC1CwD,EAAezD,GAAYI,EAAMrC,OAASiC,EAEhD,IAAI0D,EAA2B,KAE3BD,EACFC,EAAY,iBACHF,IACTE,EAAY,iBAGdnD,EA5BoB9C,EAClBH,EACAK,KAEA,GAAa,OAATL,EAAe,OAAO,KAC1B,MAAMI,EAAQtE,GAAKyB,SAAS/C,OAAOwF,GAEnC,OAAQA,GACN,IAAK,iBACH,MAAO,GAAGI,EAAMF,WAAWG,EAAYqC,YAAY5G,GAAKyB,SAASuF,SACnE,IAAK,gBACH,MAAO,GAAG1C,EAAMF,WAAWG,EAAYsC,YAAY7G,GAAKyB,SAASuF,SACnE,QACE,OAAO1C,EAAMF,UAeHC,CAAYiG,EAAW,CAAEzD,WAAUD,cAE/CG,GAAaC,EAAMrC,OAAS,IAAM0F,IAAiBD,GACrDnD,EAAUkB,GACDA,EAAUnE,IAAK/I,IACfA,EAAKyD,QAAWzD,EAAK2H,YAAakE,GACrCA,EAAW,CACT7L,OACAsP,QAASP,GACTQ,SAAUX,GACVY,WAAYf,KAITzO,MAIZ,CACD8L,EACAC,EAAMrC,OACNmC,EACAF,EACAC,EACA7G,GAAKyB,SAAS/C,OACdsB,GAAKyB,SAASuF,qBAIdhF,EAACa,EAAeC,UAASC,MAAO,CAAE7H,aAAY+F,SAAA,cAC5Ce,EAAC0I,EAAkB,CACjBC,YAAY,EACZ1E,eAAgBA,EAChBiB,aAAcA,EACd0D,QAAStE,GACTE,UAAWA,EACXtL,UAAWA,EACXuL,sBAAuBA,EACvBC,WAAYA,EACZC,UAAWA,EACXkE,aAAc,CAAEC,UAAW,GAC3B,cAAa9H,EAAO/B,SAAA,cAEpBxF,EAAC8J,GAAa,CACZe,GAAIiB,GACJxJ,MAAOA,GACP7C,UAAWA,EAAU+F,SAEpBoF,iBAEHrE,EAACgD,GAAS9B,EAAA,CACRC,SAAUC,EAAaC,UACvB6B,UAAWA,GACXhK,UAAWA,EACX+J,OAAQA,EACRlH,MAAOA,IACH6K,KACAhJ,EAAI,CACRoD,OAAQA,EACR+H,UAAW,EAAE9J,SAAA,cAEbxF,EAAA,QAAA,CACE0D,IAAK8J,GACL7N,KAAMiO,GAAWjO,KACjBiE,OAAQgK,GAAWhK,OACnB2L,aAAc3B,GAAW2B,aACzB1E,GAAI+C,GAAW/C,GACfF,SAAUiD,GAAWjD,SACrB6E,SAAU5B,GAAW4B,SACrB9J,QAASkI,GAAWlI,QACpB/I,MAAOiR,GAAWjR,MAClB2S,SAAU1B,GAAW0B,SACrB,cAAY,eAEb9F,eACCxJ,EAAC6C,EAAI,CAACsF,IAAE,EAACT,SAAUC,EAAaK,KAAKxC,sBACnCxF,EAACyP,EAAM,CACL7S,MAAOkJ,EAAYQ,QACnBmE,SAAUA,EACVhL,UAAWA,EACXiG,QAAS6H,GACT5Q,MAAO,CAAE+S,OAAQ,GACjBhM,IAAKqI,GACL,mBAAkBnB,EAAgBkB,QAAkBtL,EAAUgF,SAE7DjB,GAAKyB,SAAS2J,6BAInBpJ,EAAC1D,EAAI,CAAC6E,SAAUC,EAAaK,KAAKxC,SAAA,cAChCxF,EAAC4P,EACC,CAAA,cAAY,OACZhT,MACE6C,EACI6C,GAAMxF,OAAOuJ,WACb/D,GAAMxF,OAAOC,WAEnBkD,KAAM,kBAERD,EAACgK,GAAO,CAACvK,UAAWA,EAAW6C,MAAOA,GAAMkD,SACzCjB,GAAKyB,SAAS6J,2BAEjB7P,EAACyP,EAAM,CACL7S,MAAOkJ,EAAYQ,QACnBmE,SAAUA,EACVhL,UAAWA,EACXiG,QAAS6H,GACT5Q,MAAO,CAAE+S,OAAQ,GACjB/J,QAASC,EAAckK,MACvBpM,IAAKqI,GACL,mBAAkBnB,EAAgBkB,QAAkBtL,EAAUgF,SAE7DjB,GAAKyB,SAAS2J,qCAMzB3P,EAACmK,GAAW3E,CAAAA,SACT+F,EAAMhD,IAAK/I,gBACVQ,EAACqK,GAAW,CAAA7E,sBACVxF,EAACuD,GACCK,CAAAA,OAAQA,EACRpE,KAAMA,EACNC,UAAWA,EACXqE,QAASA,EACTC,QAASA,EACTC,aAAcgB,GACdf,aAAcc,GACdb,WAAYA,KATE1E,EAAK0G,sBAe3BlG,EAAC+P,EAAcvK,CAAAA,sBACbxF,EAACgQ,GAAQxK,SAAEmG"}