@sps-woodland/file-upload 7.0.0

package/README.md

@@ -0,0 +1,3 @@
+## [@sps-woodland/file-upload](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/file-upload#readme)
+
+SPS Woodland Design System file upload component

package/lib/FileUpload.css.d.ts

@@ -0,0 +1,74 @@
+export declare const fileUpload: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            borderColor: string;
+            borderStyle: "solid";
+        };
+        false: {};
+    };
+    mini: {
+        true: {
+            padding: string;
+        };
+        false: {};
+    };
+    error: {
+        true: {
+            borderColor: string;
+        };
+        false: {};
+    };
+    shown: {
+        true: {};
+        false: {
+            display: "none";
+        };
+    };
+}>;
+export declare const fileUploadContent: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    constrainContentWidth: {
+        true: {
+            width: "50%";
+        };
+        false: {};
+    };
+}>;
+export declare const fileUploadInstructions: string;
+export declare const fileUploadIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    mini: {
+        true: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        false: {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+    error: {
+        true: {
+            color: string;
+        };
+        false: {};
+    };
+}>;
+export declare const fileUploadTitle: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
+    mini: {
+        true: {
+            fontSize: string;
+            lineHeight: string;
+        };
+        false: {
+            fontSize: string;
+            lineHeight: string;
+        };
+    };
+}>;
+export declare const erroredFiles: string;
+export declare const erroredFileName: string;
+export declare const erroredFilenameSegment: string;
+export declare const fileUploadRequirements: string;
+export declare const fileUploadDownloadButton: string;
+export declare const fileUploadCloseButton: string;
+export declare const fileUploadForm: string;

package/lib/FileUpload.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { ComponentProps } from "@sps-woodland/core";
+export declare function FileUpload({ constrainContentWidth, description, multiple, dismissable, processing, mini, downloadLabel, acceptExtensions, maxSize, customRequirement, onSelection, onDismiss, download, shown, className, children, ...rest }: ComponentProps<{
+    constrainContentWidth?: boolean;
+    description?: string;
+    multiple?: boolean;
+    dismissable?: boolean;
+    processing?: boolean;
+    mini?: boolean;
+    downloadLabel?: string;
+    acceptExtensions?: string[] | string;
+    maxSize?: string;
+    customRequirement?: string;
+    shown?: boolean;
+    onSelection: (files: File[]) => void;
+    onDismiss?: () => void;
+    download?: () => void;
+}>): React.ReactElement;

package/lib/FileUpload.examples.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifestEntry } from "@sps-woodland/core";
+export declare const FileUploadExamples: ComponentManifestEntry;

package/lib/index.cjs.js

@@ -0,0 +1,155 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const pe=require("react"),w=require("@sps-woodland/core"),d=require("@spscommerce/utils"),k=require("@spscommerce/ds-react"),O=require("@spscommerce/ds-shared");function fe(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const l=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(o,a,l.get?l:{enumerable:!0,get:()=>e[a]})}}return o.default=e,Object.freeze(o)}const t=fe(pe);var Z=(e=>(e["7Z"]="application/x-7z-compressed",e.AAC="audio/aac",e.ABW="application/x-abiword",e.ARC="application/octet-stream",e.AVI="video/x-msvideo",e.AZW="application/vnd.amazon.ebook",e.BIN="application/octet-stream",e.BMP="image/bmp",e.BZ="application/x-bzip",e.BZ2="application/x-bzip2",e.CSH="application/x-csh",e.CSS="text/css",e.CSV="text/csv,application/vnd.ms-excel",e.DOC="application/msword",e.DOCX="application/vnd.openxmlformats-officedocument.wordprocessingml.document",e.EOT="application/vnd.ms-fontobject",e.EPUB="application/epub+zip",e.ES="application/ecmascript",e.FLV="video/x-flv",e.GIF="image/gif",e.GZ="application/x-gzip",e.HTM="text/html",e.HTML="text/html",e.ICO="image/x-icon",e.ICS="text/calendar",e.JAR="application/java-archive",e.JPEG="image/jpeg",e.JPG="image/jpeg",e.JS="application/javascript",e.JSON="application/json",e.M3U="audio/x-mpequrl",e.MID="audio/midi",e.MIDI="audio/midi",e.MOV="video/quicktime",e.MP3="audio/mpeg3",e.MP4="video/mp4",e.MPEG="video/mpeg",e.MPKG="application/vnd.apple.installer+xml",e.ODP="application/vnd.oasis.opendocument.presentation",e.ODS="application/vnd.oasis.opendocument.spreadsheet",e.ODT="application/vnd.oasis.opendocument.text",e.OGA="audio/ogg",e.OGV="video/ogg",e.OGX="application/ogg",e.OTF="font/otf",e.PNG="image/png",e.PDF="application/pdf",e.PPT="application/vnd.ms-powerpoint",e.PPTX="application/vnd.openxmlformats-officedocument.presentationml.presentation",e.RAR="application/x-rar-compressed",e.RTF="application/rtf",e.SH="application/x-sh",e.SVG="image/svg+xml",e.SWF="application/x-shockwave-flash",e.TAR="application/x-tar",e.TIF="image/tiff",e.TIFF="image/tiff",e.TS="application/typescript",e.TTF="font/ttf",e.TXT="text/plain",e.VSD="application/vnd.visio",e.WAV="audio/wav",e.WEBA="audio/webm",e.WEBM="video/webm",e.WEBP="image/webp",e.WOFF="font/woff",e.WOFF2="font/woff2",e.XHTML="application/xhtml+xml",e.XLS="application/vnd.ms-excel",e.XLSX="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",e.XML="application/xml",e.XUL="application/vnd.mozilla.xul+xml",e.ZIP="application/zip",e))(Z||{});function ue(e,o,a){return o in e?Object.defineProperty(e,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[o]=a,e}function G(e,o){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);o&&(l=l.filter(function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable})),a.push.apply(a,l)}return a}function _(e){for(var o=1;o<arguments.length;o++){var a=arguments[o]!=null?arguments[o]:{};o%2?G(Object(a),!0).forEach(function(l){ue(e,l,a[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):G(Object(a)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))})}return e}var me=(e,o,a)=>{for(var l of Object.keys(e)){var n;if(e[l]!==((n=o[l])!==null&&n!==void 0?n:a[l]))return!1}return!0},D=e=>o=>{var a=e.defaultClassName,l=_(_({},e.defaultVariants),o);for(var n in l){var h,g=(h=l[n])!==null&&h!==void 0?h:e.defaultVariants[n];if(g!=null){var c=g;typeof c=="boolean"&&(c=c===!0?"true":"false");var p=e.variantClassNames[n][c];p&&(a+=" "+p)}}for(var[S,N]of e.compoundVariants)me(S,l,e.defaultVariants)&&(a+=" "+N);return a},he="rh07jwm",q="rh07jwn",ve="rh07jwl",we=D({defaultClassName:"rh07jw0",variantClassNames:{active:{true:"rh07jw1",false:"rh07jw2"},mini:{true:"rh07jw3",false:"rh07jw4"},error:{true:"rh07jw5",false:"rh07jw6"},shown:{true:"rh07jw7",false:"rh07jw8"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0},compoundVariants:[]}),ge="rh07jwq",Fe=D({defaultClassName:"rh07jw9",variantClassNames:{constrainContentWidth:{true:"rh07jwa",false:"rh07jwb"}},defaultVariants:{constrainContentWidth:!1},compoundVariants:[]}),Se="rh07jwp",be="rh07jwr",xe=D({defaultClassName:"rh07jwd",variantClassNames:{mini:{true:"rh07jwe",false:"rh07jwf"},error:{true:"rh07jwg",false:"rh07jwh"}},defaultVariants:{mini:!1,error:!1},compoundVariants:[]}),K="rh07jwc",Ue="rh07jwo",Ce=D({defaultClassName:"rh07jwi",variantClassNames:{mini:{true:"rh07jwj",false:"rh07jwk"}},defaultVariants:{mini:!1},compoundVariants:[]});function V({constrainContentWidth:e,description:o,multiple:a=!1,dismissable:l,processing:n,mini:h,downloadLabel:g,acceptExtensions:c,maxSize:p,customRequirement:S,onSelection:N,onDismiss:W,download:z,shown:b,className:H,children:De,...J}){let x=new Set;const[Y,L]=t.useState(b),[Ne,Q]=t.useState([]),[$,y]=t.useState(""),[R,E]=t.useState(),[T,U]=t.useState(!1),[F,C]=t.useState(!1),[P,X]=t.useState([]),[I,M]=t.useState(""),{t:u}=t.useContext(w.I18nContext),A=u(a?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),ee=o||(a?"Files":"File"),v=t.useRef(null);t.useEffect(()=>{b&&L(b)},[b]),t.useEffect(()=>{p&&ie(p)},[p]),t.useEffect(()=>{c&&ae(c)},[c]);function te(){l&&(L(!1),W&&W())}function ie(i){try{E(d.parseFileSize(i))}catch{throw new Error(`Could not parse "${i}" as a file size.`)}}function ae(i){const f=(Array.isArray(i)?i:i.trim().split(/\s?,\s?/)).map(m=>m.replace(/^\./,"")),r=f.map(m=>`.${m}`.toLowerCase());M(r.map((m,j)=>j>0&&j===r.length-1?`or ${m}`:m).join(r.length>2?", ":" ")),x.clear();for(const m of f)for(const j of Z[m.toUpperCase()].split(","))x.add(j);y(r.concat(Array.from(x)).join(","))}function B(i){X([]);let s=[];const f=Array.from(i);for(const r of f)r===null?s.push("Not a file"):(c&&!x.has(r.type)&&s.push(r.name),p&&R&&r.size>R&&s.indexOf(r.name)===-1&&s.push(r.name));s.length?(C(!0),v.current&&v.current.value&&(v.current.value="")):(Q(f),N(f)),X(s)}function le(i){i.preventDefault(),C(!1),v.current&&v.current.click()}function oe(){z&&z()}function ne(i){i.stopPropagation(),B(i.target.files||[])}function se(i){i.preventDefault(),i.stopPropagation(),U(!0),C(!1)}function re(i){i.preventDefault(),U(!0),C(!1)}function ce(i){i.preventDefault(),U(!1)}function de(i){i.preventDefault(),i.stopPropagation(),U(!1),i.dataTransfer.items?B(Array.from(i.dataTransfer.items).map(s=>s.getAsFile())):B(i.dataTransfer.files)}return t.createElement("div",{onDrop:de,onDragOver:se,onDragLeave:ce,onDragEnter:re,className:w.cl(we({active:T,mini:h,error:F,shown:Y}),H),...J},t.createElement("div",{className:w.cl(Fe({constrainContentWidth:e}))},n?t.createElement("div",null,t.createElement(w.Spinner,{size:"md","aria-hidden":"true"}),t.createElement("div",{className:K},u("design-system:fileUpload.processing"))):t.createElement("div",null,t.createElement(w.Icon,{className:xe({mini:h,error:F}),icon:F?"exclamation-circle":"upload-cloud","aria-hidden":"true"}),t.createElement("div",{className:Ce({mini:h})},F?t.createElement("div",null,u(P.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):t.createElement("div",null,u("design-system:fileUpload.title",{description:ee}))),F?t.createElement("div",{className:ve},new Set(P.map((i,s)=>{const f=Math.floor(i.length/2);return t.createElement("div",{className:he,key:i},t.createElement("span",{className:q},i.substr(0,f)),t.createElement("div",{className:q},t.createElement("span",null,i.substr(f))),s<P.length-1?",":"")}))):t.createElement("span",null),t.createElement("div",{className:K},t.createElement("div",null,t.createElement("span",null,A[0]),t.createElement("a",{href:"",onClick:le},A[1]),t.createElement("span",null,A[2]))),t.createElement("div",{className:Ue},c?t.createElement("span",null,"("," ",u("design-system:fileUpload.acceptedTypes",{fileTypes:I})," ",")"):"",p?t.createElement("span",null,"( ",u("design-system:fileUpload.maximumSize",{size:p})," )"):"",S?t.createElement("span",null," ",S," "):""),g&&t.createElement("div",{className:Se},t.createElement(k.SpsButton,{kind:O.ButtonKind.LINK,icon:O.SpsIcon.DOWNLOAD_CLOUD,onClick:oe},g)))),l&&!n&&t.createElement("div",{className:ge},t.createElement(k.SpsButton,{kind:O.ButtonKind.ICON,icon:O.SpsIcon.X,title:u("design-system:fileUpload.close"),onClick:te})),t.createElement("form",{className:be},t.createElement("input",{ref:v,type:"file",accept:$||"*/*",multiple:a||void 0,onChange:ne})))}w.Metadata.set(V,{name:"FileUpload",props:{constrainContentWidth:{type:"boolean"},description:{type:"string"},multiple:{type:"boolean"},dismissable:{type:"boolean"},mini:{type:"boolean"},downloadLabel:{type:"string"},acceptExtensions:{type:"string[] | string"},maxSize:{type:"string"},customRequirement:{type:"string"},onSelection:{type:"(files: File[]) => void",required:!0},dismissal:{type:"() => void"},download:{type:"() => void"}}});const je={components:[V],examples:{basic:{label:"Basic File Upload",description:"Simply allow the user to drag-and-drop or select a single file or multiple files at once.",examples:{basic:{description:"Single file upload",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} />
+              )
+            }
+          `},multiple:{description:"Multiple file upload",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} multiple />
+              )
+            }
+          `}}},restrictions:{label:"Restrictions",description:"You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",examples:{maxSize:{description:"Maximum size",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} maxSize="100KB" />
+              )
+            }
+          `},fileWhitelist:{description:"File type whitelist",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  multiple
+                />
+              )
+            }
+          `},bothRestrictions:{description:"Both restrictions",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  maxSize="100KB"
+                  multiple
+                />
+              )
+            }
+          `}}},dismissable:{label:"Dismissable",description:"With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",examples:{basic:{react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              const [showFileUpload, setShowFileUpload] = React.useState(true);
+              function handleDismissal() {
+                setShowFileUpload(false);
+              }
+
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <>
+                  <FileUpload
+                    onSelection={selectFile}
+                    dismissable
+                    onDismiss={handleDismissal}
+                    shown={showFileUpload}
+                  />
+                  {!showFileUpload && (
+                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                      Reset
+                    </SpsButton>
+                  )}
+                </>
+              )
+            }
+          `}}},download:{label:"Download Button",description:"You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",examples:{basic:{react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              function handleDownload() {
+                console.log("Download triggered");
+              }
+
+              return (
+                <FileUpload
+                  onSelection={selectFile}
+                  description="Spreadsheet"
+                  acceptExtensions="xlsx"
+                  downloadLabel="Download Excel Template"
+                  download={handleDownload}
+                />
+              )
+            }
+          `}}},mini:{label:"Mini File Upload",description:"When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",examples:{basic:{react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} mini />
+                  </div>
+                </div>
+              )
+            }
+          `}}},constrainContentWidth:{label:"Constrain Content Width",description:"If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",examples:{basic:{react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} constrainContentWidth />
+                  </div>
+                </div>
+              )
+            }
+          `}}}}},Oe={"File Upload":je};exports.FileUpload=V;exports.MANIFEST=Oe;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FileUpload";
+export * from "./manifest";

package/lib/index.es.js

@@ -0,0 +1,456 @@
+import * as t from "react";
+import { Metadata as fe, I18nContext as me, cl as z, Spinner as ue, Icon as he } from "@sps-woodland/core";
+import { parseFileSize as ve, code as f } from "@spscommerce/utils";
+import { SpsButton as R } from "@spscommerce/ds-react";
+import { ButtonKind as X, SpsIcon as k } from "@spscommerce/ds-shared";
+var H = /* @__PURE__ */ ((e) => (e["7Z"] = "application/x-7z-compressed", e.AAC = "audio/aac", e.ABW = "application/x-abiword", e.ARC = "application/octet-stream", e.AVI = "video/x-msvideo", e.AZW = "application/vnd.amazon.ebook", e.BIN = "application/octet-stream", e.BMP = "image/bmp", e.BZ = "application/x-bzip", e.BZ2 = "application/x-bzip2", e.CSH = "application/x-csh", e.CSS = "text/css", e.CSV = "text/csv,application/vnd.ms-excel", e.DOC = "application/msword", e.DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document", e.EOT = "application/vnd.ms-fontobject", e.EPUB = "application/epub+zip", e.ES = "application/ecmascript", e.FLV = "video/x-flv", e.GIF = "image/gif", e.GZ = "application/x-gzip", e.HTM = "text/html", e.HTML = "text/html", e.ICO = "image/x-icon", e.ICS = "text/calendar", e.JAR = "application/java-archive", e.JPEG = "image/jpeg", e.JPG = "image/jpeg", e.JS = "application/javascript", e.JSON = "application/json", e.M3U = "audio/x-mpequrl", e.MID = "audio/midi", e.MIDI = "audio/midi", e.MOV = "video/quicktime", e.MP3 = "audio/mpeg3", e.MP4 = "video/mp4", e.MPEG = "video/mpeg", e.MPKG = "application/vnd.apple.installer+xml", e.ODP = "application/vnd.oasis.opendocument.presentation", e.ODS = "application/vnd.oasis.opendocument.spreadsheet", e.ODT = "application/vnd.oasis.opendocument.text", e.OGA = "audio/ogg", e.OGV = "video/ogg", e.OGX = "application/ogg", e.OTF = "font/otf", e.PNG = "image/png", e.PDF = "application/pdf", e.PPT = "application/vnd.ms-powerpoint", e.PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation", e.RAR = "application/x-rar-compressed", e.RTF = "application/rtf", e.SH = "application/x-sh", e.SVG = "image/svg+xml", e.SWF = "application/x-shockwave-flash", e.TAR = "application/x-tar", e.TIF = "image/tiff", e.TIFF = "image/tiff", e.TS = "application/typescript", e.TTF = "font/ttf", e.TXT = "text/plain", e.VSD = "application/vnd.visio", e.WAV = "audio/wav", e.WEBA = "audio/webm", e.WEBM = "video/webm", e.WEBP = "image/webp", e.WOFF = "font/woff", e.WOFF2 = "font/woff2", e.XHTML = "application/xhtml+xml", e.XLS = "application/vnd.ms-excel", e.XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", e.XML = "application/xml", e.XUL = "application/vnd.mozilla.xul+xml", e.ZIP = "application/zip", e))(H || {});
+function we(e, o, a) {
+  return o in e ? Object.defineProperty(e, o, {
+    value: a,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[o] = a, e;
+}
+function G(e, o) {
+  var a = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var l = Object.getOwnPropertySymbols(e);
+    o && (l = l.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(e, n).enumerable;
+    })), a.push.apply(a, l);
+  }
+  return a;
+}
+function K(e) {
+  for (var o = 1; o < arguments.length; o++) {
+    var a = arguments[o] != null ? arguments[o] : {};
+    o % 2 ? G(Object(a), !0).forEach(function(l) {
+      we(e, l, a[l]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(a)) : G(Object(a)).forEach(function(l) {
+      Object.defineProperty(e, l, Object.getOwnPropertyDescriptor(a, l));
+    });
+  }
+  return e;
+}
+var ge = (e, o, a) => {
+  for (var l of Object.keys(e)) {
+    var n;
+    if (e[l] !== ((n = o[l]) !== null && n !== void 0 ? n : a[l]))
+      return !1;
+  }
+  return !0;
+}, j = (e) => (o) => {
+  var a = e.defaultClassName, l = K(K({}, e.defaultVariants), o);
+  for (var n in l) {
+    var h, w = (h = l[n]) !== null && h !== void 0 ? h : e.defaultVariants[n];
+    if (w != null) {
+      var c = w;
+      typeof c == "boolean" && (c = c === !0 ? "true" : "false");
+      var p = e.variantClassNames[n][c];
+      p && (a += " " + p);
+    }
+  }
+  for (var [F, O] of e.compoundVariants)
+    ge(F, l, e.defaultVariants) && (a += " " + O);
+  return a;
+}, Fe = "rh07jwm", Z = "rh07jwn", xe = "rh07jwl", Se = j({ defaultClassName: "rh07jw0", variantClassNames: { active: { true: "rh07jw1", false: "rh07jw2" }, mini: { true: "rh07jw3", false: "rh07jw4" }, error: { true: "rh07jw5", false: "rh07jw6" }, shown: { true: "rh07jw7", false: "rh07jw8" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0 }, compoundVariants: [] }), be = "rh07jwq", Ue = j({ defaultClassName: "rh07jw9", variantClassNames: { constrainContentWidth: { true: "rh07jwa", false: "rh07jwb" } }, defaultVariants: { constrainContentWidth: !1 }, compoundVariants: [] }), Ce = "rh07jwp", je = "rh07jwr", Oe = j({ defaultClassName: "rh07jwd", variantClassNames: { mini: { true: "rh07jwe", false: "rh07jwf" }, error: { true: "rh07jwg", false: "rh07jwh" } }, defaultVariants: { mini: !1, error: !1 }, compoundVariants: [] }), q = "rh07jwc", De = "rh07jwo", Ne = j({ defaultClassName: "rh07jwi", variantClassNames: { mini: { true: "rh07jwj", false: "rh07jwk" } }, defaultVariants: { mini: !1 }, compoundVariants: [] });
+function J({
+  constrainContentWidth: e,
+  description: o,
+  multiple: a = !1,
+  dismissable: l,
+  processing: n,
+  mini: h,
+  downloadLabel: w,
+  acceptExtensions: c,
+  maxSize: p,
+  customRequirement: F,
+  onSelection: O,
+  onDismiss: A,
+  download: B,
+  shown: x,
+  className: _,
+  children: Ae,
+  ...Y
+}) {
+  let S = /* @__PURE__ */ new Set();
+  const [Q, V] = t.useState(x), [Be, $] = t.useState([]), [y, E] = t.useState(""), [W, T] = t.useState(), [I, b] = t.useState(!1), [g, U] = t.useState(!1), [D, L] = t.useState([]), [M, ee] = t.useState(""), { t: m } = t.useContext(me), N = m(a ? "design-system:fileUpload.instructions_plural" : "design-system:fileUpload.instructions").split("|"), te = o || (a ? "Files" : "File"), v = t.useRef(null);
+  t.useEffect(() => {
+    x && V(x);
+  }, [x]), t.useEffect(() => {
+    p && ae(p);
+  }, [p]), t.useEffect(() => {
+    c && le(c);
+  }, [c]);
+  function ie() {
+    l && (V(!1), A && A());
+  }
+  function ae(i) {
+    try {
+      T(ve(i));
+    } catch {
+      throw new Error(`Could not parse "${i}" as a file size.`);
+    }
+  }
+  function le(i) {
+    const d = (Array.isArray(i) ? i : i.trim().split(/\s?,\s?/)).map((u) => u.replace(/^\./, "")), r = d.map((u) => `.${u}`.toLowerCase());
+    ee(
+      r.map((u, C) => C > 0 && C === r.length - 1 ? `or ${u}` : u).join(r.length > 2 ? ", " : " ")
+    ), S.clear();
+    for (const u of d)
+      for (const C of H[u.toUpperCase()].split(","))
+        S.add(C);
+    E(r.concat(Array.from(S)).join(","));
+  }
+  function P(i) {
+    L([]);
+    let s = [];
+    const d = Array.from(i);
+    for (const r of d)
+      r === null ? s.push("Not a file") : (c && !S.has(r.type) && s.push(r.name), p && W && r.size > W && s.indexOf(r.name) === -1 && s.push(r.name));
+    s.length ? (U(!0), v.current && v.current.value && (v.current.value = "")) : ($(d), O(d)), L(s);
+  }
+  function oe(i) {
+    i.preventDefault(), U(!1), v.current && v.current.click();
+  }
+  function ne() {
+    B && B();
+  }
+  function se(i) {
+    i.stopPropagation(), P(i.target.files || []);
+  }
+  function re(i) {
+    i.preventDefault(), i.stopPropagation(), b(!0), U(!1);
+  }
+  function ce(i) {
+    i.preventDefault(), b(!0), U(!1);
+  }
+  function pe(i) {
+    i.preventDefault(), b(!1);
+  }
+  function de(i) {
+    i.preventDefault(), i.stopPropagation(), b(!1), i.dataTransfer.items ? P(
+      Array.from(i.dataTransfer.items).map(
+        (s) => s.getAsFile()
+      )
+    ) : P(i.dataTransfer.files);
+  }
+  return /* @__PURE__ */ t.createElement("div", {
+    onDrop: de,
+    onDragOver: re,
+    onDragLeave: pe,
+    onDragEnter: ce,
+    className: z(Se({ active: I, mini: h, error: g, shown: Q }), _),
+    ...Y
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: z(Ue({ constrainContentWidth: e }))
+  }, n ? /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(ue, {
+    size: "md",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: q
+  }, m("design-system:fileUpload.processing"))) : /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(he, {
+    className: Oe({ mini: h, error: g }),
+    icon: g ? "exclamation-circle" : "upload-cloud",
+    "aria-hidden": "true"
+  }), /* @__PURE__ */ t.createElement("div", {
+    className: Ne({ mini: h })
+  }, g ? /* @__PURE__ */ t.createElement("div", null, m(
+    D.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
+  )) : /* @__PURE__ */ t.createElement("div", null, m("design-system:fileUpload.title", { description: te }))), g ? /* @__PURE__ */ t.createElement("div", {
+    className: xe
+  }, new Set(
+    D.map((i, s) => {
+      const d = Math.floor(i.length / 2);
+      return /* @__PURE__ */ t.createElement("div", {
+        className: Fe,
+        key: i
+      }, /* @__PURE__ */ t.createElement("span", {
+        className: Z
+      }, i.substr(0, d)), /* @__PURE__ */ t.createElement("div", {
+        className: Z
+      }, /* @__PURE__ */ t.createElement("span", null, i.substr(d))), s < D.length - 1 ? "," : "");
+    })
+  )) : /* @__PURE__ */ t.createElement("span", null), /* @__PURE__ */ t.createElement("div", {
+    className: q
+  }, /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement("span", null, N[0]), /* @__PURE__ */ t.createElement("a", {
+    href: "",
+    onClick: oe
+  }, N[1]), /* @__PURE__ */ t.createElement("span", null, N[2]))), /* @__PURE__ */ t.createElement("div", {
+    className: De
+  }, c ? /* @__PURE__ */ t.createElement("span", null, "(", " ", m("design-system:fileUpload.acceptedTypes", {
+    fileTypes: M
+  }), " ", ")") : "", p ? /* @__PURE__ */ t.createElement("span", null, "( ", m("design-system:fileUpload.maximumSize", { size: p }), " )") : "", F ? /* @__PURE__ */ t.createElement("span", null, " ", F, " ") : ""), w && /* @__PURE__ */ t.createElement("div", {
+    className: Ce
+  }, /* @__PURE__ */ t.createElement(R, {
+    kind: X.LINK,
+    icon: k.DOWNLOAD_CLOUD,
+    onClick: ne
+  }, w)))), l && !n && /* @__PURE__ */ t.createElement("div", {
+    className: be
+  }, /* @__PURE__ */ t.createElement(R, {
+    kind: X.ICON,
+    icon: k.X,
+    title: m("design-system:fileUpload.close"),
+    onClick: ie
+  })), /* @__PURE__ */ t.createElement("form", {
+    className: je
+  }, /* @__PURE__ */ t.createElement("input", {
+    ref: v,
+    type: "file",
+    accept: y || "*/*",
+    multiple: a || void 0,
+    onChange: se
+  })));
+}
+fe.set(J, {
+  name: "FileUpload",
+  props: {
+    constrainContentWidth: { type: "boolean" },
+    description: { type: "string" },
+    multiple: { type: "boolean" },
+    dismissable: { type: "boolean" },
+    mini: { type: "boolean" },
+    downloadLabel: { type: "string" },
+    acceptExtensions: { type: "string[] | string" },
+    maxSize: { type: "string" },
+    customRequirement: { type: "string" },
+    onSelection: { type: "(files: File[]) => void", required: !0 },
+    dismissal: { type: "() => void" },
+    download: { type: "() => void" }
+  }
+});
+const Pe = {
+  components: [J],
+  examples: {
+    basic: {
+      label: "Basic File Upload",
+      description: "Simply allow the user to drag-and-drop or select a single file or multiple files at once.",
+      examples: {
+        basic: {
+          description: "Single file upload",
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} />
+              )
+            }
+          `
+        },
+        multiple: {
+          description: "Multiple file upload",
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} multiple />
+              )
+            }
+          `
+        }
+      }
+    },
+    restrictions: {
+      label: "Restrictions",
+      description: "You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",
+      examples: {
+        maxSize: {
+          description: "Maximum size",
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} maxSize="100KB" />
+              )
+            }
+          `
+        },
+        fileWhitelist: {
+          description: "File type whitelist",
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  multiple
+                />
+              )
+            }
+          `
+        },
+        bothRestrictions: {
+          description: "Both restrictions",
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  maxSize="100KB"
+                  multiple
+                />
+              )
+            }
+          `
+        }
+      }
+    },
+    dismissable: {
+      label: "Dismissable",
+      description: "With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",
+      examples: {
+        basic: {
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              const [showFileUpload, setShowFileUpload] = React.useState(true);
+              function handleDismissal() {
+                setShowFileUpload(false);
+              }
+
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <>
+                  <FileUpload
+                    onSelection={selectFile}
+                    dismissable
+                    onDismiss={handleDismissal}
+                    shown={showFileUpload}
+                  />
+                  {!showFileUpload && (
+                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                      Reset
+                    </SpsButton>
+                  )}
+                </>
+              )
+            }
+          `
+        }
+      }
+    },
+    download: {
+      label: "Download Button",
+      description: "You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",
+      examples: {
+        basic: {
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              function handleDownload() {
+                console.log("Download triggered");
+              }
+
+              return (
+                <FileUpload
+                  onSelection={selectFile}
+                  description="Spreadsheet"
+                  acceptExtensions="xlsx"
+                  downloadLabel="Download Excel Template"
+                  download={handleDownload}
+                />
+              )
+            }
+          `
+        }
+      }
+    },
+    mini: {
+      label: "Mini File Upload",
+      description: "When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",
+      examples: {
+        basic: {
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} mini />
+                  </div>
+                </div>
+              )
+            }
+          `
+        }
+      }
+    },
+    constrainContentWidth: {
+      label: "Constrain Content Width",
+      description: "If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",
+      examples: {
+        basic: {
+          react: f`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} constrainContentWidth />
+                  </div>
+                </div>
+              )
+            }
+          `
+        }
+      }
+    }
+  }
+}, Re = {
+  "File Upload": Pe
+};
+export {
+  J as FileUpload,
+  Re as MANIFEST
+};

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@sps-woodland/core";
+export declare const MANIFEST: ComponentManifest;

package/lib/mime-type.enum.d.ts

@@ -0,0 +1,75 @@
+export declare enum MIMEType {
+    "7Z" = "application/x-7z-compressed",
+    AAC = "audio/aac",
+    ABW = "application/x-abiword",
+    ARC = "application/octet-stream",
+    AVI = "video/x-msvideo",
+    AZW = "application/vnd.amazon.ebook",
+    BIN = "application/octet-stream",
+    BMP = "image/bmp",
+    BZ = "application/x-bzip",
+    BZ2 = "application/x-bzip2",
+    CSH = "application/x-csh",
+    CSS = "text/css",
+    CSV = "text/csv,application/vnd.ms-excel",
+    DOC = "application/msword",
+    DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    EOT = "application/vnd.ms-fontobject",
+    EPUB = "application/epub+zip",
+    ES = "application/ecmascript",
+    FLV = "video/x-flv",
+    GIF = "image/gif",
+    GZ = "application/x-gzip",
+    HTM = "text/html",
+    HTML = "text/html",
+    ICO = "image/x-icon",
+    ICS = "text/calendar",
+    JAR = "application/java-archive",
+    JPEG = "image/jpeg",
+    JPG = "image/jpeg",
+    JS = "application/javascript",
+    JSON = "application/json",
+    M3U = "audio/x-mpequrl",
+    MID = "audio/midi",
+    MIDI = "audio/midi",
+    MOV = "video/quicktime",
+    MP3 = "audio/mpeg3",
+    MP4 = "video/mp4",
+    MPEG = "video/mpeg",
+    MPKG = "application/vnd.apple.installer+xml",
+    ODP = "application/vnd.oasis.opendocument.presentation",
+    ODS = "application/vnd.oasis.opendocument.spreadsheet",
+    ODT = "application/vnd.oasis.opendocument.text",
+    OGA = "audio/ogg",
+    OGV = "video/ogg",
+    OGX = "application/ogg",
+    OTF = "font/otf",
+    PNG = "image/png",
+    PDF = "application/pdf",
+    PPT = "application/vnd.ms-powerpoint",
+    PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    RAR = "application/x-rar-compressed",
+    RTF = "application/rtf",
+    SH = "application/x-sh",
+    SVG = "image/svg+xml",
+    SWF = "application/x-shockwave-flash",
+    TAR = "application/x-tar",
+    TIF = "image/tiff",
+    TIFF = "image/tiff",
+    TS = "application/typescript",
+    TTF = "font/ttf",
+    TXT = "text/plain",
+    VSD = "application/vnd.visio",
+    WAV = "audio/wav",
+    WEBA = "audio/webm",
+    WEBM = "video/webm",
+    WEBP = "image/webp",
+    WOFF = "font/woff",
+    WOFF2 = "font/woff2",
+    XHTML = "application/xhtml+xml",
+    XLS = "application/vnd.ms-excel",
+    XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    XML = "application/xml",
+    XUL = "application/vnd.mozilla.xul+xml",
+    ZIP = "application/zip"
+}

package/lib/style.css

@@ -0,0 +1 @@
+.rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.rh07jw3{padding:1rem}.rh07jw5{border-color:#de002e}.rh07jw8{display:none}.rh07jw9{color:#4b5356;margin:0 auto;text-align:center}.rh07jwa{width:50%}.rh07jwc{font-size:.75rem;line-height:1.25rem}.rh07jwd{color:#717779;display:block;margin-bottom:.25rem}.rh07jwe{font-size:1.5rem;line-height:1.5rem}.rh07jwf{font-size:3rem;line-height:3rem}.rh07jwg{color:#de002e}.rh07jwi{font-weight:600;margin-bottom:.25rem}.rh07jwj{font-size:1rem;line-height:1.25rem}.rh07jwk{font-size:1.125rem;line-height:1.25rem}.rh07jwl{font-size:.875rem;font-weight:600;line-height:1.25rem}.rh07jwm{display:flex;justify-content:center;white-space:nowrap}.rh07jwn{max-width:50%;overflow:hidden}.rh07jwn:first-child{text-overflow:ellipsis}.rh07jwn:last-child{float:right}.rh07jwo{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.rh07jwo>span+span{margin-left:.125rem}.rh07jwp{margin-top:1rem}.rh07jwq{position:absolute;right:.5rem;top:.5rem}.rh07jwr{display:none}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sps-woodland/file-upload",
+  "description": "SPS Woodland Design System file upload component",
+  "version": "7.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/file-upload",
+  "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/file-upload#readme",
+  "main": "./lib/index.es.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@spscommerce/ds-react": "7.0.0",
+    "@spscommerce/ds-shared": "7.0.0",
+    "@spscommerce/ds-colors": "7.0.0",
+    "@spscommerce/illustrations": "6.37.3",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "devDependencies": {
+    "@sps-woodland/core": "7.0.0",
+    "@sps-woodland/tokens": "7.0.0",
+    "@spscommerce/utils": "^6.12.1",
+    "@spscommerce/ds-react": "7.0.0",
+    "@spscommerce/ds-shared": "7.0.0",
+    "@spscommerce/ds-colors": "7.0.0",
+    "@spscommerce/ds-illustrations": "6.37.3",
+    "@vanilla-extract/css": "^1.9.1",
+    "@vanilla-extract/recipes": "^0.2.5",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "node ../../../scripts/publish-package.js"
+  }
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});