@elliemae/ds-dropzone 3.25.0-rc.0 → 3.26.0-next.2

package/dist/cjs/DSDropzone.js

@@ -34,35 +34,53 @@ __export(DSDropzone_exports, {
 module.exports = __toCommonJS(DSDropzone_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useDSDropzone = require("./config/useDSDropzone.js");
 var import_constants = require("./constants/index.js");
 var import_styled = require("./styled.js");
 var import_DSActivezone = require("./parts/DSActivezone/DSActivezone.js");
+var import_lodash = require("lodash");
 const DSDropzone = (props) => {
-  const { propsWithDefault, globalProps, xstyledProps, dropZoneState } = (0, import_useDSDropzone.useDSDropzone)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    import_styled.StyledDropZone,
+  const {
+    propsWithDefault,
+    globalProps,
+    xstyledProps,
+    isDragInside,
+    onDragEnterHandler,
+    onDragOverHandler,
+    onDragLeaveHandler,
+    onDropHandler
+  } = (0, import_useDSDropzone.useDSDropzone)(props);
+  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  const safeGlobalProps = (0, import_lodash.omit)(globalProps, "onDrop", "hasError");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styled.StyledDropZoneHolder,
     {
-      ...globalProps,
+      ...safeGlobalProps,
       ...xstyledProps,
-      ...dropZoneState.getRootProps({
-        isFocused: dropZoneState.isFocused,
-        isDragAccept: dropZoneState.isDragAccept,
-        isDragReject: dropZoneState.isDragReject
-      }),
-      isFocused: dropZoneState.isFocused,
-      isDragAccept: dropZoneState.isDragAccept,
-      isDragReject: dropZoneState.isDragReject,
-      isDragActive: dropZoneState.isDragActive,
-      hasError: propsWithDefault.hasError,
-      disabled: propsWithDefault.dropConfig.disabled,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...dropZoneState.getInputProps() }),
-        propsWithDefault.children,
-        dropZoneState.isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSActivezone.DSActivezone, {}) : null
-      ]
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_styled.StyledDropZone,
+        {
+          onDragEnter: onDragEnterHandler,
+          onDragOver: onDragOverHandler,
+          onDragLeave: onDragLeaveHandler,
+          onDrop: onDropHandler,
+          hasError: Boolean(propsWithDefault.hasError),
+          disabled: Boolean(propsWithDefault.disabled),
+          isDragActive: isDragInside,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            propsWithDefault.children,
+            isDragInside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSActivezone.DSActivezone, {}) : null
+          ]
+        }
+      )
     }
   );
 };

package/dist/cjs/DSDropzone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSDropzone.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, dropZoneState } = useDSDropzone(props);\n  return (\n    <StyledDropZone\n      {...globalProps}\n      {...xstyledProps}\n      {...dropZoneState.getRootProps({\n        isFocused: dropZoneState.isFocused,\n        isDragAccept: dropZoneState.isDragAccept,\n        isDragReject: dropZoneState.isDragReject,\n      })}\n      isFocused={dropZoneState.isFocused}\n      isDragAccept={dropZoneState.isDragAccept}\n      isDragReject={dropZoneState.isDragReject}\n      isDragActive={dropZoneState.isDragActive}\n      hasError={propsWithDefault.hasError}\n      disabled={propsWithDefault.dropConfig.disabled}\n    >\n      <input {...dropZoneState.getInputProps()} />\n      {propsWithDefault.children}\n      {dropZoneState.isDragActive ? <DSActivezone /> : null}\n    </StyledDropZone>\n  );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWnB;AAVJ,8BAAyB;AACzB,mCAA4D;AAC5D,2BAA8B;AAC9B,uBAA+B;AAC/B,oBAA+B;AAC/B,0BAA6B;AAE7B,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,EAAE,kBAAkB,aAAa,cAAc,cAAc,QAAI,oCAAc,KAAK;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,cAAc,aAAa;AAAA,QAC7B,WAAW,cAAc;AAAA,QACzB,cAAc,cAAc;AAAA,QAC5B,cAAc,cAAc;AAAA,MAC9B,CAAC;AAAA,MACD,WAAW,cAAc;AAAA,MACzB,cAAc,cAAc;AAAA,MAC5B,cAAc,cAAc;AAAA,MAC5B,cAAc,cAAc;AAAA,MAC5B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,iBAAiB,WAAW;AAAA,MAEtC;AAAA,oDAAC,WAAO,GAAG,cAAc,cAAc,GAAG;AAAA,QACzC,iBAAiB;AAAA,QACjB,cAAc,eAAe,4CAAC,oCAAa,IAAK;AAAA;AAAA;AAAA,EACnD;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
-  "names": []
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    globalProps,\n    xstyledProps,\n    isDragInside,\n    onDragEnterHandler,\n    onDragOverHandler,\n    onDragLeaveHandler,\n    onDropHandler,\n  } = useDSDropzone(props);\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n  return (\n    <StyledDropZoneHolder\n      {...safeGlobalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledDropZone\n        onDragEnter={onDragEnterHandler}\n        onDragOver={onDragOverHandler}\n        onDragLeave={onDragLeaveHandler}\n        onDrop={onDropHandler}\n        hasError={Boolean(propsWithDefault.hasError)}\n        disabled={Boolean(propsWithDefault.disabled)}\n        isDragActive={isDragInside}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {propsWithDefault.children}\n        {isDragInside ? <DSActivezone /> : null}\n      </StyledDropZone>\n    </StyledDropZoneHolder>\n  );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA9BN,mBAAkB;AAClB,8BAAyB;AACzB,mCAA4D;AAC5D,2BAA8B;AAC9B,uBAA+B;AAC/B,oBAAqD;AACrD,0BAA6B;AAC7B,oBAAqB;AAErB,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,oCAAc,KAAK;AACvB,QAAM,gBAAgB,aAAAA,QAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyB,aAAAA,QAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,sBAAkB,oBAAK,aAAa,UAAU,UAAU;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,QAAQ;AAAA,UACR,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,cAAc;AAAA,UACd;AAAA,UACA;AAAA,UAEC;AAAA,6BAAiB;AAAA,YACjB,eAAe,4CAAC,oCAAa,IAAK;AAAA;AAAA;AAAA,MACrC;AAAA;AAAA,EACF;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,kCAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "names": ["React"]
 }

package/dist/cjs/config/useDSDropzone.js

@@ -37,7 +37,6 @@ var import_lodash = require("lodash");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_uid = require("uid");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
-var import_react_dropzone = require("react-dropzone");
 var import_useValidateProps = require("./useValidateProps.js");
 const useDSDropzone = (propsFromUser) => {
   const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
@@ -48,28 +47,54 @@ const useDSDropzone = (propsFromUser) => {
     "wrap"
   ]);
   const xstyledProps = (0, import_ds_utilities.useGetXstyledProps)(propsWithDefault);
-  const { id, dropConfig } = propsWithDefault;
+  const { id, onDrop } = propsWithDefault;
   const instanceUid = import_react.default.useMemo(() => id || (0, import_uid.uid)(5), [id]);
   const [isDragInside, setIsDragInside] = import_react.default.useState(false);
-  const dropConfigDefault = import_react.default.useMemo(
-    () => ({
-      ...dropConfig,
-      noKeyboard: true,
-      onDragEnter: (event) => {
-        dropConfig?.onDragEnter?.(event);
-        setIsDragInside(true);
-      }
-    }),
-    [dropConfig]
+  const onBodyDragDropEvent = import_react.default.useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  import_react.default.useEffect(() => {
+    document.body.addEventListener("drop", onBodyDragDropEvent);
+    return () => {
+      document.body.removeEventListener("drop", onBodyDragDropEvent);
+    };
+  }, [onBodyDragDropEvent]);
+  const onDragEnterHandler = import_react.default.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(true);
+  }, []);
+  const onDragOverHandler = import_react.default.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(true);
+  }, []);
+  const onDragLeaveHandler = import_react.default.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(false);
+  }, []);
+  const onDropHandler = import_react.default.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragInside(false);
+      const filesArray = Array.from(e.dataTransfer?.files ?? []);
+      onDrop?.(filesArray, e);
+    },
+    [onDrop]
   );
-  const dropZoneState = (0, import_react_dropzone.useDropzone)(dropConfigDefault);
   return import_react.default.useMemo(
     () => ({
       propsWithDefault,
       globalProps,
       xstyledProps,
       instanceUid,
-      dropZoneState
+      isDragInside,
+      onDragEnterHandler,
+      onDragOverHandler,
+      onDragLeaveHandler,
+      onDropHandler
       // ...eventHandlers,
     }),
     [
@@ -77,7 +102,11 @@ const useDSDropzone = (propsFromUser) => {
       globalProps,
       xstyledProps,
       instanceUid,
-      dropZoneState
+      isDragInside,
+      onDragEnterHandler,
+      onDragOverHandler,
+      onDragLeaveHandler,
+      onDropHandler
       // eventHandlers,
     ]
   );

package/dist/cjs/config/useDSDropzone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useDSDropzone.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useDropzone } from 'react-dropzone';\n\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n  propsWithDefault: DSDropzoneT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDropzonePropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n    'cols',\n    'rows',\n    'wrap',\n  ]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id, dropConfig } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const [isDragInside, setIsDragInside] = React.useState(false);\n\n  const dropConfigDefault = React.useMemo(\n    () => ({\n      ...dropConfig,\n      noKeyboard: true,\n      onDragEnter: (event) => {\n        dropConfig?.onDragEnter?.(event);\n        setIsDragInside(true);\n      },\n    }),\n    [dropConfig],\n  );\n  const dropZoneState = useDropzone(dropConfigDefault);\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      dropZoneState,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      dropZoneState,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoE;AACpE,4BAA4B;AAE5B,8BAAiC;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,uBAAmB,kDAAwD,eAAe,yCAAY;AAC5G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,kBAAc,wBAAK,4CAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,WAAW,IAAI;AAC3B,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE5D,QAAM,oBAAoB,aAAAA,QAAM;AAAA,IAC9B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ,aAAa,CAAC,UAAU;AACtB,oBAAY,cAAc,KAAK;AAC/B,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,oBAAgB,mCAAY,iBAAiB;AACnD,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n  propsWithDefault: DSDropzoneT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDropzonePropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n    'cols',\n    'rows',\n    'wrap',\n  ]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id, onDrop } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const [isDragInside, setIsDragInside] = React.useState(false);\n\n  const onBodyDragDropEvent = React.useCallback((e: Event) => {\n    e.preventDefault();\n  }, []);\n\n  /**\n   * Prevent default open file in browser\n   */\n  React.useEffect(() => {\n    document.body.addEventListener('drop', onBodyDragDropEvent);\n    return () => {\n      document.body.removeEventListener('drop', onBodyDragDropEvent);\n    };\n  }, [onBodyDragDropEvent]);\n\n  const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(true);\n  }, []);\n  const onDragOverHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(true);\n  }, []);\n  const onDragLeaveHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(false);\n  }, []);\n  const onDropHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragInside(false);\n      const filesArray = Array.from(e.dataTransfer?.files ?? []);\n      onDrop?.(filesArray, e);\n    },\n    [onDrop],\n  );\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      isDragInside,\n      onDragEnterHandler,\n      onDragOverHandler,\n      onDragLeaveHandler,\n      onDropHandler,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      isDragInside,\n      onDragEnterHandler,\n      onDragOverHandler,\n      onDragLeaveHandler,\n      onDropHandler,\n      // eventHandlers,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,oBAAqB;AACrB,0BAAyF;AACzF,iBAAoB;AACpB,mCAAoE;AACpE,8BAAiC;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,uBAAmB,kDAAwD,eAAe,yCAAY;AAC5G,gDAAiB,kBAAkB,gDAAmB;AAItD,QAAM,kBAAc,wBAAK,4CAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,mBAAe,wCAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,OAAO,IAAI;AACvB,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE5D,QAAM,sBAAsB,aAAAA,QAAM,YAAY,CAAC,MAAa;AAC1D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,eAAAA,QAAM,UAAU,MAAM;AACpB,aAAS,KAAK,iBAAiB,QAAQ,mBAAmB;AAC1D,WAAO,MAAM;AACX,eAAS,KAAK,oBAAoB,QAAQ,mBAAmB;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,qBAA6D,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC1F,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4D,aAAAA,QAAM,YAAY,CAAC,MAAM;AACzF,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AACL,QAAM,qBAA6D,aAAAA,QAAM,YAAY,CAAC,MAAM;AAC1F,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,CAAC;AACL,QAAM,gBAAwD,aAAAA,QAAM;AAAA,IAClE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AACrB,YAAM,aAAa,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC;AACzD,eAAS,YAAY,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/cjs/constants/index.js

@@ -45,7 +45,8 @@ const DROPZONE_SLOTS = {
   ACTIVEZONE_LABEL: "activezone-label",
   ACTIVEZONE_ICON: "activezone-icon",
   ACTIVEZONE_WRAPPER: "activezone-wrapper",
-  WRAPPER: "wrapper"
+  WRAPPER: "wrapper",
+  WRAPPER_HOLDER: "wrapper_holder"
 };
 const DROPZONE_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSDropzoneName, DROPZONE_SLOTS);
 //# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSDropzoneName = 'DSDropzone';\n\nexport const DROP_ZONE_CONSTANTS = {\n  BORDER_WIDTH: 1,\n  BORDER_RADIUS: 2,\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_SLOTS = {\n  ACTIVEZONE_LABEL: 'activezone-label',\n  ACTIVEZONE_ICON: 'activezone-icon',\n  ACTIVEZONE_WRAPPER: 'activezone-wrapper',\n  WRAPPER: 'wrapper',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_DATA_TESTID = slotObjectToDataTestIds(DSDropzoneName, DROPZONE_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAAA,EACjC,cAAc;AAAA,EACd,eAAe;AACjB;AAGO,MAAM,iBAAiB;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,SAAS;AACX;AAGO,MAAM,2BAAuB,0CAAwB,gBAAgB,cAAc;",
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSDropzoneName = 'DSDropzone';\n\nexport const DROP_ZONE_CONSTANTS = {\n  BORDER_WIDTH: 1,\n  BORDER_RADIUS: 2,\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_SLOTS = {\n  ACTIVEZONE_LABEL: 'activezone-label',\n  ACTIVEZONE_ICON: 'activezone-icon',\n  ACTIVEZONE_WRAPPER: 'activezone-wrapper',\n  WRAPPER: 'wrapper',\n  WRAPPER_HOLDER: 'wrapper_holder',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_DATA_TESTID = slotObjectToDataTestIds(DSDropzoneName, DROPZONE_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAAA,EACjC,cAAc;AAAA,EACd,eAAe;AACjB;AAGO,MAAM,iBAAiB;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,gBAAgB;AAClB;AAGO,MAAM,2BAAuB,0CAAwB,gBAAgB,cAAc;",
   "names": []
 }

package/dist/cjs/parts/DSActivezone/DSActivezone.js

@@ -42,7 +42,6 @@ var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_typography = require("@elliemae/ds-typography");
 var import_useActivezone = require("./config/useActivezone.js");
 var import_constants = require("../../constants/index.js");
-console.log(import_constants.DROPZONE_SLOTS);
 const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`
   cursor: grabbing;
   position: absolute;
@@ -52,6 +51,7 @@ const StyledWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
   left: 0;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 `;
 const StyledLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;
 const StyledIcon = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.ACTIVEZONE_ICON })``;
@@ -77,7 +77,7 @@ const DSActivezone = (props) => {
       ...globalProps,
       ...xstyledProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledIcon, { justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: "neutral-000" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledIcon, { justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "l", color: ["neutral", "0"] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLabel, { variant: "b2", color: "neutral-000", children: label })
       ]
     }

package/dist/cjs/parts/DSActivezone/DSActivezone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/DSActivezone/DSActivezone.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { type DSActivezoneT, DSActivezonePropTypesSchema } from './react-desc-prop-types.js';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { useActivezone } from './config/useActivezone.js';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from '../../constants/index.js';\n\nconsole.log(DROPZONE_SLOTS);\n\nconst StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`\n  cursor: grabbing;\n  position: absolute;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  padding: ${(props) => props.theme.space.xxxs} 1.8461538461538463rem;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\nconst StyledLabel = styled(DSTypography, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;\nconst StyledIcon = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_ICON })``;\n\nconst colsDef = {\n  largeFont: ['auto'],\n  mediumFont: ['auto', 'auto'],\n  smallFont: ['auto', 'auto'],\n};\n\nconst DSActivezone: React.ComponentType<DSActivezoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useActivezone(props);\n  const { Icon, label } = propsWithDefault;\n  const mainContentCols = useFontsizeMedia(colsDef);\n  return (\n    <StyledWrapper\n      rows={['auto']}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bg=\"brand-600\"\n      gutter=\"xxs\"\n      cols={mainContentCols}\n      getOwnerProps={() => propsWithDefault}\n      {...globalProps}\n      {...xstyledProps}\n    >\n      <StyledIcon justifyContent=\"center\">\n        <Icon size=\"l\" color=\"neutral-000\" />\n      </StyledIcon>\n      <StyledLabel variant=\"b2\" color=\"neutral-000\">\n        {label}\n      </StyledLabel>\n    </StyledWrapper>\n  );\n};\n\nDSActivezone.displayName = 'DSActivezone';\nconst DSActivezoneWithSchema = describe(DSActivezone);\nDSActivezoneWithSchema.propTypes = DSActivezonePropTypesSchema;\n\nexport { DSActivezone, DSActivezoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCnB;AAnCJ,8BAAyB;AACzB,qCAAiC;AACjC,mCAAgE;AAChE,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAC7B,2BAA8B;AAC9B,uBAAoE;AAEpE,QAAQ,IAAI,+BAAc;AAE1B,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,mBAAmB,CAAC;AAAA;AAAA;AAAA,mBAGjF,qCAAoB;AAAA,aAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,iCAAgB,MAAM,gCAAe,iBAAiB,CAAC;AACxG,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,gBAAgB,CAAC;AAE9F,MAAM,UAAU;AAAA,EACd,WAAW,CAAC,MAAM;AAAA,EAClB,YAAY,CAAC,QAAQ,MAAM;AAAA,EAC3B,WAAW,CAAC,QAAQ,MAAM;AAC5B;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,aAAa,QAAI,oCAAc,KAAK;AAC3E,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,QAAM,sBAAkB,iDAAiB,OAAO;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAG;AAAA,MACH,QAAO;AAAA,MACP,MAAM;AAAA,MACN,eAAe,MAAM;AAAA,MACpB,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,oDAAC,cAAW,gBAAe,UACzB,sDAAC,QAAK,MAAK,KAAI,OAAM,eAAc,GACrC;AAAA,QACA,4CAAC,eAAY,SAAQ,MAAK,OAAM,eAC7B,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { type DSActivezoneT, DSActivezonePropTypesSchema } from './react-desc-prop-types.js';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { useActivezone } from './config/useActivezone.js';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from '../../constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`\n  cursor: grabbing;\n  position: absolute;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  padding: ${(props) => props.theme.space.xxxs} 1.8461538461538463rem;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n`;\nconst StyledLabel = styled(DSTypography, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;\nconst StyledIcon = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_ICON })``;\n\nconst colsDef = {\n  largeFont: ['auto'],\n  mediumFont: ['auto', 'auto'],\n  smallFont: ['auto', 'auto'],\n};\n\nconst DSActivezone: React.ComponentType<DSActivezoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useActivezone(props);\n  const { Icon, label } = propsWithDefault;\n  const mainContentCols = useFontsizeMedia(colsDef);\n  return (\n    <StyledWrapper\n      rows={['auto']}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bg=\"brand-600\"\n      gutter=\"xxs\"\n      cols={mainContentCols}\n      getOwnerProps={() => propsWithDefault}\n      {...globalProps}\n      {...xstyledProps}\n    >\n      <StyledIcon justifyContent=\"center\">\n        <Icon size=\"l\" color={['neutral', '0']} />\n      </StyledIcon>\n      <StyledLabel variant=\"b2\" color=\"neutral-000\">\n        {label}\n      </StyledLabel>\n    </StyledWrapper>\n  );\n};\n\nDSActivezone.displayName = 'DSActivezone';\nconst DSActivezoneWithSchema = describe(DSActivezone);\nDSActivezoneWithSchema.propTypes = DSActivezonePropTypesSchema;\n\nexport { DSActivezone, DSActivezoneWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCnB;AAlCJ,8BAAyB;AACzB,qCAAiC;AACjC,mCAAgE;AAChE,uBAAuB;AACvB,qBAAqB;AACrB,2BAA6B;AAC7B,2BAA8B;AAC9B,uBAAoE;AAEpE,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,mBAAmB,CAAC;AAAA;AAAA;AAAA,mBAGjF,qCAAoB;AAAA,aAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,kBAAc,yBAAO,mCAAc,EAAE,MAAM,iCAAgB,MAAM,gCAAe,iBAAiB,CAAC;AACxG,MAAM,iBAAa,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,gBAAgB,CAAC;AAE9F,MAAM,UAAU;AAAA,EACd,WAAW,CAAC,MAAM;AAAA,EAClB,YAAY,CAAC,QAAQ,MAAM;AAAA,EAC3B,WAAW,CAAC,QAAQ,MAAM;AAC5B;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,aAAa,QAAI,oCAAc,KAAK;AAC3E,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,QAAM,sBAAkB,iDAAiB,OAAO;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAG;AAAA,MACH,QAAO;AAAA,MACP,MAAM;AAAA,MACN,eAAe,MAAM;AAAA,MACpB,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,oDAAC,cAAW,gBAAe,UACzB,sDAAC,QAAK,MAAK,KAAI,OAAO,CAAC,WAAW,GAAG,GAAG,GAC1C;AAAA,QACA,4CAAC,eAAY,SAAQ,MAAK,OAAM,eAC7B,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -42,86 +42,16 @@ const DSDropzonePropTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
   children: import_ds_props_helpers.PropTypes.any,
+  disabled: import_ds_props_helpers.PropTypes.bool.description("Enable/disable the dropzone"),
   hasError: import_ds_props_helpers.PropTypes.bool.description("Show error border color"),
-  dropConfig: import_ds_props_helpers.PropTypes.shape({
-    accept: import_ds_props_helpers.PropTypes.objectOf(import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string)).description(`
-    Set accepted file types.
-    Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option 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 (https://github.com/react-dropzone/react-dropzone/issues/276).
-  `),
-    multiple: import_ds_props_helpers.PropTypes.bool.description("Allow drag 'n' drop (or selection from the file dialog) of multiple files"),
-    preventDropOnDocument: import_ds_props_helpers.PropTypes.bool.description(
-      "If false, allow dropped items to take over the current browser window"
-    ),
-    noClick: import_ds_props_helpers.PropTypes.bool.description("If true, disables click to open the native file selection dialog"),
-    noKeyboard: import_ds_props_helpers.PropTypes.bool.description(`
-  If true, disables SPACE/ENTER to open the native file selection dialog.
-  Note that it also stops tracking the focus state.`),
-    noDrag: import_ds_props_helpers.PropTypes.bool.description("If true, disables drag&drop"),
-    noDragEventsBubbling: import_ds_props_helpers.PropTypes.bool.description("If true, stops drag event propagation to parents"),
-    minSize: import_ds_props_helpers.PropTypes.number.description("Minimum file size (in bytes)"),
-    maxSize: import_ds_props_helpers.PropTypes.number.description("Maximum file size (in bytes)"),
-    maxFiles: import_ds_props_helpers.PropTypes.number.description(`
-  Maximum accepted number of files
-  The default value is 0 which means there is no limitation to how many files are accepted.
-  `),
-    disabled: import_ds_props_helpers.PropTypes.bool.description("Enable/disable the dropzone"),
-    getFilesFromEvent: import_ds_props_helpers.PropTypes.func.description(`
-  Use this to provide a custom file aggregator
-  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-  `),
-    onFileDialogCancel: import_ds_props_helpers.PropTypes.func.description("Cb for when closing the file dialog with no selection"),
-    onFileDialogOpen: import_ds_props_helpers.PropTypes.func.description("Cb for when opening the file dialog"),
-    useFsAccessApi: import_ds_props_helpers.PropTypes.bool.description(`
-  Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
-  to open the file picker instead of using an <input type="file"> click event.
-  `),
-    onDragEnter: import_ds_props_helpers.PropTypes.func.description(`
-  Cb for when the dragenter event occurs.
-  @param {DragEvent} event`),
-    onDragLeave: import_ds_props_helpers.PropTypes.func.description(`
-  Cb for when the dragleave event occurs
-  @param {DragEvent} event
-  `),
-    onDragOver: import_ds_props_helpers.PropTypes.func.description(`
-  Cb for when the dragover event occurs
-  @param {DragEvent} event
-  `),
-    onDrop: import_ds_props_helpers.PropTypes.func.description(`
-   Cb for when the drop event occurs.
-   onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
-   For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:  
-   @param {File[]} acceptedFiles
-   @param {FileRejection[]} fileRejections
-   @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-  `),
-    onDropAccepted: import_ds_props_helpers.PropTypes.func.description(`
+  onDrop: import_ds_props_helpers.PropTypes.func.description(
+    `
   Cb for when the drop event occurs.
-  Note that if no files are accepted, this callback is not invoked.
+  onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
   @param {File[]} files
-  @param {(DragEvent|Event)} event
-  `),
-    onDropRejected: import_ds_props_helpers.PropTypes.func.description(`
-  Cb for when the drop event occurs.
-  Note that if no files are rejected, this callback is not invoked.  
-  @param {FileRejection[]} fileRejections
-  @param {(DragEvent|Event)} event
-  `),
-    onError: import_ds_props_helpers.PropTypes.func.description(`
-  Cb for when there's some error from any of the promises.
-  @param {Error} error
-  `),
-    validator: import_ds_props_helpers.PropTypes.func.description(`
-    Custom validation function. It must return null if there's no errors.
-    @param {File} file
-    @returns {FileError|FileError[]|null}
-    `)
-  }).description(`react-dropzone options, see https://react-dropzone.js.org/ for more information V14.2.3`).defaultValue({})
-  // onSomethingEvent: PropTypes.func
-  //   .description('some example of function, required if something is not foo')
-  //   .signature('(( newVal: string, e: React.SyntheticEvent, metaInfo: Record<string,unknown> ) => void )'),
+  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+ `
+  ).signature("(( file: File[], event: React.DragEvent ) => void )")
 };
 const DSDropzonePropTypesSchema = DSDropzonePropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DropzoneOptions } from 'react-dropzone';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSDropzoneT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    dropConfig?: DropzoneOptions;\n    hasError?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: DSDropzoneT.DefaultProps = {\n  dropConfig: {},\n};\n\nexport const DSDropzonePropTypes: DSPropTypesSchema<DSDropzoneT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.any,\n  hasError: PropTypes.bool.description('Show error border color'),\n  dropConfig: PropTypes.shape({\n    accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).description(`\n    Set accepted file types.\n    Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n    Keep in mind that mime type determination is not reliable across platforms. CSV files,\n    for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n    Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n  `),\n    multiple: PropTypes.bool.description(\"Allow drag 'n' drop (or selection from the file dialog) of multiple files\"),\n\n    preventDropOnDocument: PropTypes.bool.description(\n      'If false, allow dropped items to take over the current browser window',\n    ),\n    noClick: PropTypes.bool.description('If true, disables click to open the native file selection dialog'),\n    noKeyboard: PropTypes.bool.description(`\n  If true, disables SPACE/ENTER to open the native file selection dialog.\n  Note that it also stops tracking the focus state.`),\n    noDrag: PropTypes.bool.description('If true, disables drag&drop'),\n    noDragEventsBubbling: PropTypes.bool.description('If true, stops drag event propagation to parents'),\n    minSize: PropTypes.number.description('Minimum file size (in bytes)'),\n    maxSize: PropTypes.number.description('Maximum file size (in bytes)'),\n    maxFiles: PropTypes.number.description(`\n  Maximum accepted number of files\n  The default value is 0 which means there is no limitation to how many files are accepted.\n  `),\n    disabled: PropTypes.bool.description('Enable/disable the dropzone'),\n    getFilesFromEvent: PropTypes.func.description(`\n  Use this to provide a custom file aggregator\n  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n  `),\n    onFileDialogCancel: PropTypes.func.description('Cb for when closing the file dialog with no selection'),\n    onFileDialogOpen: PropTypes.func.description('Cb for when opening the file dialog'),\n    useFsAccessApi: PropTypes.bool.description(`\n  Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n  to open the file picker instead of using an <input type=\"file\"> click event.\n  `),\n    onDragEnter: PropTypes.func.description(`\n  Cb for when the dragenter event occurs.\n  @param {DragEvent} event`),\n    onDragLeave: PropTypes.func.description(`\n  Cb for when the dragleave event occurs\n  @param {DragEvent} event\n  `),\n    onDragOver: PropTypes.func.description(`\n  Cb for when the dragover event occurs\n  @param {DragEvent} event\n  `),\n    onDrop: PropTypes.func.description(`\n   Cb for when the drop event occurs.\n   onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n   For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:  \n   @param {File[]} acceptedFiles\n   @param {FileRejection[]} fileRejections\n   @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n  `),\n    onDropAccepted: PropTypes.func.description(`\n  Cb for when the drop event occurs.\n  Note that if no files are accepted, this callback is not invoked.\n  @param {File[]} files\n  @param {(DragEvent|Event)} event\n  `),\n    onDropRejected: PropTypes.func.description(`\n  Cb for when the drop event occurs.\n  Note that if no files are rejected, this callback is not invoked.  \n  @param {FileRejection[]} fileRejections\n  @param {(DragEvent|Event)} event\n  `),\n    onError: PropTypes.func.description(`\n  Cb for when there's some error from any of the promises.\n  @param {Error} error\n  `),\n    validator: PropTypes.func.description(`\n    Custom validation function. It must return null if there's no errors.\n    @param {File} file\n    @returns {FileError|FileError[]|null}\n    `),\n  })\n    .description(`react-dropzone options, see https://react-dropzone.js.org/ for more information V14.2.3`)\n    .defaultValue({}),\n  // onSomethingEvent: PropTypes.func\n  //   .description('some example of function, required if something is not foo')\n  //   .signature('(( newVal: string, e: React.SyntheticEvent, metaInfo: Record<string,unknown> ) => void )'),\n};\n\nexport const DSDropzonePropTypesSchema = DSDropzonePropTypes as unknown as WeakValidationMap<DSDropzoneT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA+BhE,MAAM,eAAyC;AAAA,EACpD,YAAY,CAAC;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU;AAAA,EACpB,UAAU,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EAC9D,YAAY,kCAAU,MAAM;AAAA,IAC1B,QAAQ,kCAAU,SAAS,kCAAU,QAAQ,kCAAU,MAAM,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E;AAAA,IACC,UAAU,kCAAU,KAAK,YAAY,2EAA2E;AAAA,IAEhH,uBAAuB,kCAAU,KAAK;AAAA,MACpC;AAAA,IACF;AAAA,IACA,SAAS,kCAAU,KAAK,YAAY,kEAAkE;AAAA,IACtG,YAAY,kCAAU,KAAK,YAAY;AAAA;AAAA,oDAES;AAAA,IAChD,QAAQ,kCAAU,KAAK,YAAY,6BAA6B;AAAA,IAChE,sBAAsB,kCAAU,KAAK,YAAY,kDAAkD;AAAA,IACnG,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,IACpE,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,IACpE,UAAU,kCAAU,OAAO,YAAY;AAAA;AAAA;AAAA,GAGxC;AAAA,IACC,UAAU,kCAAU,KAAK,YAAY,6BAA6B;AAAA,IAClE,mBAAmB,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAG/C;AAAA,IACC,oBAAoB,kCAAU,KAAK,YAAY,uDAAuD;AAAA,IACtG,kBAAkB,kCAAU,KAAK,YAAY,qCAAqC;AAAA,IAClF,gBAAgB,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAG5C;AAAA,IACC,aAAa,kCAAU,KAAK,YAAY;AAAA;AAAA,2BAEjB;AAAA,IACvB,aAAa,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGzC;AAAA,IACC,YAAY,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGxC;AAAA,IACC,QAAQ,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpC;AAAA,IACC,gBAAgB,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GAK5C;AAAA,IACC,gBAAgB,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GAK5C;AAAA,IACC,SAAS,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGrC;AAAA,IACC,WAAW,kCAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,KAIrC;AAAA,EACH,CAAC,EACE,YAAY,yFAAyF,EACrG,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAIpB;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSDropzoneT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    onDrop?: (files: File[], event: React.DragEvent<HTMLDivElement>) => void;\n    hasError?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: DSDropzoneT.DefaultProps = {\n  dropConfig: {},\n};\n\nexport const DSDropzonePropTypes: DSPropTypesSchema<DSDropzoneT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.any,\n  disabled: PropTypes.bool.description('Enable/disable the dropzone'),\n  hasError: PropTypes.bool.description('Show error border color'),\n  onDrop: PropTypes.func\n    .description(\n      `\n  Cb for when the drop event occurs.\n  onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n  @param {File[]} files\n  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n `,\n    )\n    .signature('(( file: File[], event: React.DragEvent ) => void )'),\n};\n\nexport const DSDropzonePropTypesSchema = DSDropzonePropTypes as unknown as WeakValidationMap<DSDropzoneT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AA8BhE,MAAM,eAAyC;AAAA,EACpD,YAAY,CAAC;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU;AAAA,EACpB,UAAU,kCAAU,KAAK,YAAY,6BAA6B;AAAA,EAClE,UAAU,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EAC9D,QAAQ,kCAAU,KACf;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMF,EACC,UAAU,qDAAqD;AACpE;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -28,7 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styled_exports = {};
 __export(styled_exports, {
-  StyledDropZone: () => StyledDropZone
+  StyledDropZone: () => StyledDropZone,
+  StyledDropZoneHolder: () => StyledDropZoneHolder
 });
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
@@ -36,10 +37,14 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_constants = require("./constants/index.js");
 const borderImage = (color) => `url("data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}' ry='${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${import_constants.DROP_ZONE_CONSTANTS.BORDER_WIDTH}' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`;
-const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.WRAPPER })`
+const StyledDropZoneHolder = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSDropzoneName,
+  slot: import_constants.DROPZONE_SLOTS.WRAPPER_HOLDER
+})`
   position: relative;
+`;
+const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_constants.DSDropzoneName, slot: import_constants.DROPZONE_SLOTS.WRAPPER })`
   border-radius: ${import_constants.DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;
-
   background-color: ${(props) => props.theme.colors.neutral["000"]};
   background-image: ${(props) => {
   if (props.disabled) {
@@ -48,12 +53,9 @@ const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
   if (props.isDragActive) {
     return borderImage(props.theme.colors.brand[600]);
   }
-  if (props.isDragReject || props.hasError) {
+  if (props.hasError) {
     return borderImage(props.theme.colors.danger[900]);
   }
-  if (props.isFocused) {
-    return borderImage(props.theme.colors.brand[600]);
-  }
   return borderImage(props.theme.colors.neutral[400]);
 }};
   padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;
@@ -65,14 +67,12 @@ const StyledDropZone = (0, import_ds_system.styled)(import_ds_grid.Grid, { name:
   if (props.isDragActive) {
     return borderImage(props.theme.colors.brand[600]);
   }
-  if (props.isDragReject) {
+  if (props.hasError) {
     return borderImage(props.theme.colors.danger[900]);
   }
-  if (props.isFocused) {
-    return borderImage(props.theme.colors.brand[600]);
-  }
   return borderImage(props.theme.colors.brand[600]);
 }};
   }
+  cursor: ${(props) => props.isDragActive ? "grabbing" : "default"};
 `;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\nimport type { DropzoneState } from 'react-dropzone';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n//   encodeURIComponent(\n//     `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n//   );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n//   const { isDragAccept, isDragReject, isFocused } = props;\n//   console.log(props);\n//   if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n//   if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n//   return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n  `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n    DROP_ZONE_CONSTANTS.BORDER_RADIUS\n  }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n    DROP_ZONE_CONSTANTS.BORDER_WIDTH\n  }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<\n  DropzoneState & {\n    disabled: boolean;\n    hasError: boolean;\n  }\n>`\n  position: relative;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  background-image: ${(props) => {\n    if (props.disabled) {\n      return borderImage(props.theme.colors.neutral[400]);\n    }\n    if (props.isDragActive) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    if (props.isDragReject || props.hasError) {\n      return borderImage(props.theme.colors.danger[900]);\n    }\n    if (props.isFocused) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    return borderImage(props.theme.colors.neutral[400]);\n  }};\n  padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n  &:hover {\n    background-image: ${(props) => {\n      if (props.disabled) {\n        return borderImage(props.theme.colors.neutral[400]);\n      }\n      if (props.isDragActive) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      if (props.isDragReject) {\n        return borderImage(props.theme.colors.danger[900]);\n      }\n      if (props.isFocused) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      return borderImage(props.theme.colors.brand[600]);\n    }};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAoE;AAgBpE,MAAM,cAAc,CAAC,UACnB,gLACE,qCAAoB,sBACb,qCAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,qCAAoB;AAGjB,MAAM,qBAAiB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,QAAQ,CAAC;AAAA;AAAA,mBAO9E,qCAAoB;AAAA;AAAA,sBAEjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,gBAAgB,MAAM,UAAU;AACxC,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,MAAI,MAAM,WAAW;AACnB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,MAAI,MAAM,WAAW;AACnB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA;",
+  "sourcesContent": ["import type {} from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n//   encodeURIComponent(\n//     `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n//   );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n//   const { isDragAccept, isDragReject, isFocused } = props;\n//   console.log(props);\n//   if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n//   if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n//   return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n  `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n    DROP_ZONE_CONSTANTS.BORDER_RADIUS\n  }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n    DROP_ZONE_CONSTANTS.BORDER_WIDTH\n  }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n  isDragActive: boolean;\n  disabled: boolean;\n  hasError: boolean;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n  name: DSDropzoneName,\n  slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n  position: relative;\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  background-image: ${(props) => {\n    if (props.disabled) {\n      return borderImage(props.theme.colors.neutral[400]);\n    }\n    if (props.isDragActive) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    if (props.hasError) {\n      return borderImage(props.theme.colors.danger[900]);\n    }\n    return borderImage(props.theme.colors.neutral[400]);\n  }};\n  padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n  &:hover {\n    background-image: ${(props) => {\n      if (props.disabled) {\n        return borderImage(props.theme.colors.neutral[400]);\n      }\n      if (props.isDragActive) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      if (props.hasError) {\n        return borderImage(props.theme.colors.danger[900]);\n      }\n      return borderImage(props.theme.colors.brand[600]);\n    }};\n  }\n  cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,uBAAoE;AAepE,MAAM,cAAc,CAAC,UACnB,gLACE,qCAAoB,sBACb,qCAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,qCAAoB;AAUjB,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,gCAAe;AACvB,CAAC;AAAA;AAAA;AAGM,MAAM,qBAAiB,yBAAO,qBAAM,EAAE,MAAM,iCAAgB,MAAM,gCAAe,QAAQ,CAAC;AAAA,mBAC9E,qCAAoB;AAAA,sBACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA,YAEQ,CAAC,UAAW,MAAM,eAAe,aAAa;AAAA;",
   "names": []
 }

package/dist/esm/DSDropzone.js

@@ -1,34 +1,52 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
 import { describe } from "@elliemae/ds-props-helpers";
 import { DSDropzonePropTypesSchema } from "./react-desc-prop-types.js";
 import { useDSDropzone } from "./config/useDSDropzone.js";
 import { DSDropzoneName } from "./constants/index.js";
-import { StyledDropZone } from "./styled.js";
+import { StyledDropZone, StyledDropZoneHolder } from "./styled.js";
 import { DSActivezone } from "./parts/DSActivezone/DSActivezone.js";
+import { omit } from "lodash";
 const DSDropzone = (props) => {
-  const { propsWithDefault, globalProps, xstyledProps, dropZoneState } = useDSDropzone(props);
-  return /* @__PURE__ */ jsxs(
-    StyledDropZone,
+  const {
+    propsWithDefault,
+    globalProps,
+    xstyledProps,
+    isDragInside,
+    onDragEnterHandler,
+    onDragOverHandler,
+    onDragLeaveHandler,
+    onDropHandler
+  } = useDSDropzone(props);
+  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  const safeGlobalProps = omit(globalProps, "onDrop", "hasError");
+  return /* @__PURE__ */ jsx(
+    StyledDropZoneHolder,
     {
-      ...globalProps,
+      ...safeGlobalProps,
       ...xstyledProps,
-      ...dropZoneState.getRootProps({
-        isFocused: dropZoneState.isFocused,
-        isDragAccept: dropZoneState.isDragAccept,
-        isDragReject: dropZoneState.isDragReject
-      }),
-      isFocused: dropZoneState.isFocused,
-      isDragAccept: dropZoneState.isDragAccept,
-      isDragReject: dropZoneState.isDragReject,
-      isDragActive: dropZoneState.isDragActive,
-      hasError: propsWithDefault.hasError,
-      disabled: propsWithDefault.dropConfig.disabled,
-      children: [
-        /* @__PURE__ */ jsx("input", { ...dropZoneState.getInputProps() }),
-        propsWithDefault.children,
-        dropZoneState.isDragActive ? /* @__PURE__ */ jsx(DSActivezone, {}) : null
-      ]
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: /* @__PURE__ */ jsxs(
+        StyledDropZone,
+        {
+          onDragEnter: onDragEnterHandler,
+          onDragOver: onDragOverHandler,
+          onDragLeave: onDragLeaveHandler,
+          onDrop: onDropHandler,
+          hasError: Boolean(propsWithDefault.hasError),
+          disabled: Boolean(propsWithDefault.disabled),
+          isDragActive: isDragInside,
+          getOwnerProps,
+          getOwnerPropsArguments,
+          children: [
+            propsWithDefault.children,
+            isDragInside ? /* @__PURE__ */ jsx(DSActivezone, {}) : null
+          ]
+        }
+      )
     }
   );
 };

package/dist/esm/DSDropzone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSDropzone.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps, dropZoneState } = useDSDropzone(props);\n  return (\n    <StyledDropZone\n      {...globalProps}\n      {...xstyledProps}\n      {...dropZoneState.getRootProps({\n        isFocused: dropZoneState.isFocused,\n        isDragAccept: dropZoneState.isDragAccept,\n        isDragReject: dropZoneState.isDragReject,\n      })}\n      isFocused={dropZoneState.isFocused}\n      isDragAccept={dropZoneState.isDragAccept}\n      isDragReject={dropZoneState.isDragReject}\n      isDragActive={dropZoneState.isDragActive}\n      hasError={propsWithDefault.hasError}\n      disabled={propsWithDefault.dropConfig.disabled}\n    >\n      <input {...dropZoneState.getInputProps()} />\n      {propsWithDefault.children}\n      {dropZoneState.isDragActive ? <DSActivezone /> : null}\n    </StyledDropZone>\n  );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWnB,SAeE,KAfF;AAVJ,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAE7B,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM,EAAE,kBAAkB,aAAa,cAAc,cAAc,IAAI,cAAc,KAAK;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,cAAc,aAAa;AAAA,QAC7B,WAAW,cAAc;AAAA,QACzB,cAAc,cAAc;AAAA,QAC5B,cAAc,cAAc;AAAA,MAC9B,CAAC;AAAA,MACD,WAAW,cAAc;AAAA,MACzB,cAAc,cAAc;AAAA,MAC5B,cAAc,cAAc;AAAA,MAC5B,cAAc,cAAc;AAAA,MAC5B,UAAU,iBAAiB;AAAA,MAC3B,UAAU,iBAAiB,WAAW;AAAA,MAEtC;AAAA,4BAAC,WAAO,GAAG,cAAc,cAAc,GAAG;AAAA,QACzC,iBAAiB;AAAA,QACjB,cAAc,eAAe,oBAAC,gBAAa,IAAK;AAAA;AAAA;AAAA,EACnD;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSDropzoneT, DSDropzonePropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSDropzone } from './config/useDSDropzone.js';\nimport { DSDropzoneName } from './constants/index.js';\nimport { StyledDropZone, StyledDropZoneHolder } from './styled.js';\nimport { DSActivezone } from './parts/DSActivezone/DSActivezone.js';\nimport { omit } from 'lodash';\n\nconst DSDropzone: React.ComponentType<DSDropzoneT.Props> = (props) => {\n  const {\n    propsWithDefault,\n    globalProps,\n    xstyledProps,\n    isDragInside,\n    onDragEnterHandler,\n    onDragOverHandler,\n    onDragLeaveHandler,\n    onDropHandler,\n  } = useDSDropzone(props);\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const safeGlobalProps = omit(globalProps, 'onDrop', 'hasError');\n  return (\n    <StyledDropZoneHolder\n      {...safeGlobalProps}\n      {...xstyledProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledDropZone\n        onDragEnter={onDragEnterHandler}\n        onDragOver={onDragOverHandler}\n        onDragLeave={onDragLeaveHandler}\n        onDrop={onDropHandler}\n        hasError={Boolean(propsWithDefault.hasError)}\n        disabled={Boolean(propsWithDefault.disabled)}\n        isDragActive={isDragInside}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {propsWithDefault.children}\n        {isDragInside ? <DSActivezone /> : null}\n      </StyledDropZone>\n    </StyledDropZoneHolder>\n  );\n};\n\nDSDropzone.propTypes = DSDropzonePropTypesSchema;\nDSDropzone.displayName = DSDropzoneName;\nconst DSDropzoneWithSchema = describe(DSDropzone);\nDSDropzoneWithSchema.propTypes = DSDropzonePropTypesSchema;\n\nexport { DSDropzone, DSDropzoneWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BjB,SAYkB,KAZlB;AA9BN,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,4BAA4B;AACrD,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAErB,MAAM,aAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc,KAAK;AACvB,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/D,QAAM,kBAAkB,KAAK,aAAa,UAAU,UAAU;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,YAAY;AAAA,UACZ,aAAa;AAAA,UACb,QAAQ;AAAA,UACR,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,UAAU,QAAQ,iBAAiB,QAAQ;AAAA,UAC3C,cAAc;AAAA,UACd;AAAA,UACA;AAAA,UAEC;AAAA,6BAAiB;AAAA,YACjB,eAAe,oBAAC,gBAAa,IAAK;AAAA;AAAA;AAAA,MACrC;AAAA;AAAA,EACF;AAEJ;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
+  "names": ["React"]
 }

package/dist/esm/config/useDSDropzone.js

@@ -4,7 +4,6 @@ import { omit } from "lodash";
 import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
 import { uid } from "uid";
 import { DSDropzonePropTypes, defaultProps } from "../react-desc-prop-types.js";
-import { useDropzone } from "react-dropzone";
 import { useValidateProps } from "./useValidateProps.js";
 const useDSDropzone = (propsFromUser) => {
   const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
@@ -15,28 +14,54 @@ const useDSDropzone = (propsFromUser) => {
     "wrap"
   ]);
   const xstyledProps = useGetXstyledProps(propsWithDefault);
-  const { id, dropConfig } = propsWithDefault;
+  const { id, onDrop } = propsWithDefault;
   const instanceUid = React2.useMemo(() => id || uid(5), [id]);
   const [isDragInside, setIsDragInside] = React2.useState(false);
-  const dropConfigDefault = React2.useMemo(
-    () => ({
-      ...dropConfig,
-      noKeyboard: true,
-      onDragEnter: (event) => {
-        dropConfig?.onDragEnter?.(event);
-        setIsDragInside(true);
-      }
-    }),
-    [dropConfig]
+  const onBodyDragDropEvent = React2.useCallback((e) => {
+    e.preventDefault();
+  }, []);
+  React2.useEffect(() => {
+    document.body.addEventListener("drop", onBodyDragDropEvent);
+    return () => {
+      document.body.removeEventListener("drop", onBodyDragDropEvent);
+    };
+  }, [onBodyDragDropEvent]);
+  const onDragEnterHandler = React2.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(true);
+  }, []);
+  const onDragOverHandler = React2.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(true);
+  }, []);
+  const onDragLeaveHandler = React2.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragInside(false);
+  }, []);
+  const onDropHandler = React2.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragInside(false);
+      const filesArray = Array.from(e.dataTransfer?.files ?? []);
+      onDrop?.(filesArray, e);
+    },
+    [onDrop]
   );
-  const dropZoneState = useDropzone(dropConfigDefault);
   return React2.useMemo(
     () => ({
       propsWithDefault,
       globalProps,
       xstyledProps,
       instanceUid,
-      dropZoneState
+      isDragInside,
+      onDragEnterHandler,
+      onDragOverHandler,
+      onDragLeaveHandler,
+      onDropHandler
       // ...eventHandlers,
     }),
     [
@@ -44,7 +69,11 @@ const useDSDropzone = (propsFromUser) => {
       globalProps,
       xstyledProps,
       instanceUid,
-      dropZoneState
+      isDragInside,
+      onDragEnterHandler,
+      onDragOverHandler,
+      onDragLeaveHandler,
+      onDropHandler
       // eventHandlers,
     ]
   );

package/dist/esm/config/useDSDropzone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSDropzone.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useDropzone } from 'react-dropzone';\n\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n  propsWithDefault: DSDropzoneT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDropzonePropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n    'cols',\n    'rows',\n    'wrap',\n  ]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id, dropConfig } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const [isDragInside, setIsDragInside] = React.useState(false);\n\n  const dropConfigDefault = React.useMemo(\n    () => ({\n      ...dropConfig,\n      noKeyboard: true,\n      onDragEnter: (event) => {\n        dropConfig?.onDragEnter?.(event);\n        setIsDragInside(true);\n      },\n    }),\n    [dropConfig],\n  );\n  const dropZoneState = useDropzone(dropConfigDefault);\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      dropZoneState,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      dropZoneState,\n      // eventHandlers,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAC5G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,cAAc,KAAK,uBAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,WAAW,IAAI;AAC3B,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAS,KAAK;AAE5D,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL,GAAG;AAAA,MACH,YAAY;AAAA,MACZ,aAAa,CAAC,UAAU;AACtB,oBAAY,cAAc,KAAK;AAC/B,wBAAgB,IAAI;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,gBAAgB,YAAY,iBAAiB;AACnD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { uid } from 'uid';\nimport { type DSDropzoneT, DSDropzonePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DropzoneCTX {\n  propsWithDefault: DSDropzoneT.InternalProps;\n  globalProps: ReturnType<typeof useGetGlobalAttributes>;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useDSDropzone = (propsFromUser: DSDropzoneT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDropzoneT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDropzonePropTypes);\n  // =============================================================================\n  // GLOBAL ATTRIBUTES & XSTYLED PROPS\n  // =============================================================================\n  const globalProps = omit(useGetGlobalAttributes<DSDropzoneT.InternalProps>(propsWithDefault), [\n    'cols',\n    'rows',\n    'wrap',\n  ]);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const { id, onDrop } = propsWithDefault;\n  const instanceUid = React.useMemo(() => id || uid(5), [id]);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n  const [isDragInside, setIsDragInside] = React.useState(false);\n\n  const onBodyDragDropEvent = React.useCallback((e: Event) => {\n    e.preventDefault();\n  }, []);\n\n  /**\n   * Prevent default open file in browser\n   */\n  React.useEffect(() => {\n    document.body.addEventListener('drop', onBodyDragDropEvent);\n    return () => {\n      document.body.removeEventListener('drop', onBodyDragDropEvent);\n    };\n  }, [onBodyDragDropEvent]);\n\n  const onDragEnterHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(true);\n  }, []);\n  const onDragOverHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(true);\n  }, []);\n  const onDragLeaveHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback((e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setIsDragInside(false);\n  }, []);\n  const onDropHandler: React.DragEventHandler<HTMLDivElement> = React.useCallback(\n    (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setIsDragInside(false);\n      const filesArray = Array.from(e.dataTransfer?.files ?? []);\n      onDrop?.(filesArray, e);\n    },\n    [onDrop],\n  );\n\n  return React.useMemo(\n    () => ({\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      isDragInside,\n      onDragEnterHandler,\n      onDragOverHandler,\n      onDragLeaveHandler,\n      onDropHandler,\n      // ...eventHandlers,\n    }),\n    [\n      propsWithDefault,\n      globalProps,\n      xstyledProps,\n      instanceUid,\n      isDragInside,\n      onDragEnterHandler,\n      onDragOverHandler,\n      onDragLeaveHandler,\n      onDropHandler,\n      // eventHandlers,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AAS1B,MAAM,gBAAgB,CAAC,kBAAqC;AAIjE,QAAM,mBAAmB,6BAAwD,eAAe,YAAY;AAC5G,mBAAiB,kBAAkB,mBAAmB;AAItD,QAAM,cAAc,KAAK,uBAAkD,gBAAgB,GAAG;AAAA,IAC5F;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,EAAE,IAAI,OAAO,IAAI;AACvB,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAS,KAAK;AAE5D,QAAM,sBAAsBA,OAAM,YAAY,CAAC,MAAa;AAC1D,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAKL,EAAAA,OAAM,UAAU,MAAM;AACpB,aAAS,KAAK,iBAAiB,QAAQ,mBAAmB;AAC1D,WAAO,MAAM;AACX,eAAS,KAAK,oBAAoB,QAAQ,mBAAmB;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,qBAA6DA,OAAM,YAAY,CAAC,MAAM;AAC1F,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AACL,QAAM,oBAA4DA,OAAM,YAAY,CAAC,MAAM;AACzF,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AACL,QAAM,qBAA6DA,OAAM,YAAY,CAAC,MAAM;AAC1F,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,CAAC;AACL,QAAM,gBAAwDA,OAAM;AAAA,IAClE,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAClB,sBAAgB,KAAK;AACrB,YAAM,aAAa,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC;AACzD,eAAS,YAAY,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,EACF;AACF;",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -9,7 +9,8 @@ const DROPZONE_SLOTS = {
   ACTIVEZONE_LABEL: "activezone-label",
   ACTIVEZONE_ICON: "activezone-icon",
   ACTIVEZONE_WRAPPER: "activezone-wrapper",
-  WRAPPER: "wrapper"
+  WRAPPER: "wrapper",
+  WRAPPER_HOLDER: "wrapper_holder"
 };
 const DROPZONE_DATA_TESTID = slotObjectToDataTestIds(DSDropzoneName, DROPZONE_SLOTS);
 export {

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSDropzoneName = 'DSDropzone';\n\nexport const DROP_ZONE_CONSTANTS = {\n  BORDER_WIDTH: 1,\n  BORDER_RADIUS: 2,\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_SLOTS = {\n  ACTIVEZONE_LABEL: 'activezone-label',\n  ACTIVEZONE_ICON: 'activezone-icon',\n  ACTIVEZONE_WRAPPER: 'activezone-wrapper',\n  WRAPPER: 'wrapper',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_DATA_TESTID = slotObjectToDataTestIds(DSDropzoneName, DROPZONE_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAAA,EACjC,cAAc;AAAA,EACd,eAAe;AACjB;AAGO,MAAM,iBAAiB;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,SAAS;AACX;AAGO,MAAM,uBAAuB,wBAAwB,gBAAgB,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSDropzoneName = 'DSDropzone';\n\nexport const DROP_ZONE_CONSTANTS = {\n  BORDER_WIDTH: 1,\n  BORDER_RADIUS: 2,\n} as const;\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_SLOTS = {\n  ACTIVEZONE_LABEL: 'activezone-label',\n  ACTIVEZONE_ICON: 'activezone-icon',\n  ACTIVEZONE_WRAPPER: 'activezone-wrapper',\n  WRAPPER: 'wrapper',\n  WRAPPER_HOLDER: 'wrapper_holder',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const DROPZONE_DATA_TESTID = slotObjectToDataTestIds(DSDropzoneName, DROPZONE_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAAA,EACjC,cAAc;AAAA,EACd,eAAe;AACjB;AAGO,MAAM,iBAAiB;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,gBAAgB;AAClB;AAGO,MAAM,uBAAuB,wBAAwB,gBAAgB,cAAc;",
   "names": []
 }

package/dist/esm/parts/DSActivezone/DSActivezone.js

@@ -8,7 +8,6 @@ import { Grid } from "@elliemae/ds-grid";
 import { DSTypography } from "@elliemae/ds-typography";
 import { useActivezone } from "./config/useActivezone.js";
 import { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from "../../constants/index.js";
-console.log(DROPZONE_SLOTS);
 const StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`
   cursor: grabbing;
   position: absolute;
@@ -18,6 +17,7 @@ const StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.
   left: 0;
   width: 100%;
   height: 100%;
+  pointer-events: none;
 `;
 const StyledLabel = styled(DSTypography, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;
 const StyledIcon = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_ICON })``;
@@ -43,7 +43,7 @@ const DSActivezone = (props) => {
       ...globalProps,
       ...xstyledProps,
       children: [
-        /* @__PURE__ */ jsx(StyledIcon, { justifyContent: "center", children: /* @__PURE__ */ jsx(Icon, { size: "l", color: "neutral-000" }) }),
+        /* @__PURE__ */ jsx(StyledIcon, { justifyContent: "center", children: /* @__PURE__ */ jsx(Icon, { size: "l", color: ["neutral", "0"] }) }),
         /* @__PURE__ */ jsx(StyledLabel, { variant: "b2", color: "neutral-000", children: label })
       ]
     }

package/dist/esm/parts/DSActivezone/DSActivezone.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSActivezone/DSActivezone.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { type DSActivezoneT, DSActivezonePropTypesSchema } from './react-desc-prop-types.js';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { useActivezone } from './config/useActivezone.js';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from '../../constants/index.js';\n\nconsole.log(DROPZONE_SLOTS);\n\nconst StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`\n  cursor: grabbing;\n  position: absolute;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  padding: ${(props) => props.theme.space.xxxs} 1.8461538461538463rem;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\nconst StyledLabel = styled(DSTypography, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;\nconst StyledIcon = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_ICON })``;\n\nconst colsDef = {\n  largeFont: ['auto'],\n  mediumFont: ['auto', 'auto'],\n  smallFont: ['auto', 'auto'],\n};\n\nconst DSActivezone: React.ComponentType<DSActivezoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useActivezone(props);\n  const { Icon, label } = propsWithDefault;\n  const mainContentCols = useFontsizeMedia(colsDef);\n  return (\n    <StyledWrapper\n      rows={['auto']}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bg=\"brand-600\"\n      gutter=\"xxs\"\n      cols={mainContentCols}\n      getOwnerProps={() => propsWithDefault}\n      {...globalProps}\n      {...xstyledProps}\n    >\n      <StyledIcon justifyContent=\"center\">\n        <Icon size=\"l\" color=\"neutral-000\" />\n      </StyledIcon>\n      <StyledLabel variant=\"b2\" color=\"neutral-000\">\n        {label}\n      </StyledLabel>\n    </StyledWrapper>\n  );\n};\n\nDSActivezone.displayName = 'DSActivezone';\nconst DSActivezoneWithSchema = describe(DSActivezone);\nDSActivezoneWithSchema.propTypes = DSActivezonePropTypesSchema;\n\nexport { DSActivezone, DSActivezoneWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoCnB,SAYI,KAZJ;AAnCJ,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAA6B,mCAAmC;AAChE,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,qBAAqB,sBAAsB;AAEpE,QAAQ,IAAI,cAAc;AAE1B,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,mBAAmB,CAAC;AAAA;AAAA;AAAA,mBAGjF,oBAAoB;AAAA,aAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,gBAAgB,MAAM,eAAe,iBAAiB,CAAC;AACxG,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,gBAAgB,CAAC;AAE9F,MAAM,UAAU;AAAA,EACd,WAAW,CAAC,MAAM;AAAA,EAClB,YAAY,CAAC,QAAQ,MAAM;AAAA,EAC3B,WAAW,CAAC,QAAQ,MAAM;AAC5B;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,aAAa,IAAI,cAAc,KAAK;AAC3E,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,QAAM,kBAAkB,iBAAiB,OAAO;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAG;AAAA,MACH,QAAO;AAAA,MACP,MAAM;AAAA,MACN,eAAe,MAAM;AAAA,MACpB,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,4BAAC,cAAW,gBAAe,UACzB,8BAAC,QAAK,MAAK,KAAI,OAAM,eAAc,GACrC;AAAA,QACA,oBAAC,eAAY,SAAQ,MAAK,OAAM,eAC7B,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { type DSActivezoneT, DSActivezonePropTypesSchema } from './react-desc-prop-types.js';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { useActivezone } from './config/useActivezone.js';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from '../../constants/index.js';\n\nconst StyledWrapper = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_WRAPPER })`\n  cursor: grabbing;\n  position: absolute;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  padding: ${(props) => props.theme.space.xxxs} 1.8461538461538463rem;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n`;\nconst StyledLabel = styled(DSTypography, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_LABEL })``;\nconst StyledIcon = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.ACTIVEZONE_ICON })``;\n\nconst colsDef = {\n  largeFont: ['auto'],\n  mediumFont: ['auto', 'auto'],\n  smallFont: ['auto', 'auto'],\n};\n\nconst DSActivezone: React.ComponentType<DSActivezoneT.Props> = (props) => {\n  const { propsWithDefault, globalProps, xstyledProps } = useActivezone(props);\n  const { Icon, label } = propsWithDefault;\n  const mainContentCols = useFontsizeMedia(colsDef);\n  return (\n    <StyledWrapper\n      rows={['auto']}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bg=\"brand-600\"\n      gutter=\"xxs\"\n      cols={mainContentCols}\n      getOwnerProps={() => propsWithDefault}\n      {...globalProps}\n      {...xstyledProps}\n    >\n      <StyledIcon justifyContent=\"center\">\n        <Icon size=\"l\" color={['neutral', '0']} />\n      </StyledIcon>\n      <StyledLabel variant=\"b2\" color=\"neutral-000\">\n        {label}\n      </StyledLabel>\n    </StyledWrapper>\n  );\n};\n\nDSActivezone.displayName = 'DSActivezone';\nconst DSActivezoneWithSchema = describe(DSActivezone);\nDSActivezoneWithSchema.propTypes = DSActivezonePropTypesSchema;\n\nexport { DSActivezone, DSActivezoneWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmCnB,SAYI,KAZJ;AAlCJ,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAA6B,mCAAmC;AAChE,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,qBAAqB,sBAAsB;AAEpE,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,mBAAmB,CAAC;AAAA;AAAA;AAAA,mBAGjF,oBAAoB;AAAA,aAC1B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1C,MAAM,cAAc,OAAO,cAAc,EAAE,MAAM,gBAAgB,MAAM,eAAe,iBAAiB,CAAC;AACxG,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,gBAAgB,CAAC;AAE9F,MAAM,UAAU;AAAA,EACd,WAAW,CAAC,MAAM;AAAA,EAClB,YAAY,CAAC,QAAQ,MAAM;AAAA,EAC3B,WAAW,CAAC,QAAQ,MAAM;AAC5B;AAEA,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,aAAa,IAAI,cAAc,KAAK;AAC3E,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,QAAM,kBAAkB,iBAAiB,OAAO;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,MAAM;AAAA,MACb,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,IAAG;AAAA,MACH,QAAO;AAAA,MACP,MAAM;AAAA,MACN,eAAe,MAAM;AAAA,MACpB,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,4BAAC,cAAW,gBAAe,UACzB,8BAAC,QAAK,MAAK,KAAI,OAAO,CAAC,WAAW,GAAG,GAAG,GAC1C;AAAA,QACA,oBAAC,eAAY,SAAQ,MAAK,OAAM,eAC7B,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -7,86 +7,16 @@ const DSDropzonePropTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   children: PropTypes.any,
+  disabled: PropTypes.bool.description("Enable/disable the dropzone"),
   hasError: PropTypes.bool.description("Show error border color"),
-  dropConfig: PropTypes.shape({
-    accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).description(`
-    Set accepted file types.
-    Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option 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 (https://github.com/react-dropzone/react-dropzone/issues/276).
-  `),
-    multiple: PropTypes.bool.description("Allow drag 'n' drop (or selection from the file dialog) of multiple files"),
-    preventDropOnDocument: PropTypes.bool.description(
-      "If false, allow dropped items to take over the current browser window"
-    ),
-    noClick: PropTypes.bool.description("If true, disables click to open the native file selection dialog"),
-    noKeyboard: PropTypes.bool.description(`
-  If true, disables SPACE/ENTER to open the native file selection dialog.
-  Note that it also stops tracking the focus state.`),
-    noDrag: PropTypes.bool.description("If true, disables drag&drop"),
-    noDragEventsBubbling: PropTypes.bool.description("If true, stops drag event propagation to parents"),
-    minSize: PropTypes.number.description("Minimum file size (in bytes)"),
-    maxSize: PropTypes.number.description("Maximum file size (in bytes)"),
-    maxFiles: PropTypes.number.description(`
-  Maximum accepted number of files
-  The default value is 0 which means there is no limitation to how many files are accepted.
-  `),
-    disabled: PropTypes.bool.description("Enable/disable the dropzone"),
-    getFilesFromEvent: PropTypes.func.description(`
-  Use this to provide a custom file aggregator
-  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-  `),
-    onFileDialogCancel: PropTypes.func.description("Cb for when closing the file dialog with no selection"),
-    onFileDialogOpen: PropTypes.func.description("Cb for when opening the file dialog"),
-    useFsAccessApi: PropTypes.bool.description(`
-  Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API
-  to open the file picker instead of using an <input type="file"> click event.
-  `),
-    onDragEnter: PropTypes.func.description(`
-  Cb for when the dragenter event occurs.
-  @param {DragEvent} event`),
-    onDragLeave: PropTypes.func.description(`
-  Cb for when the dragleave event occurs
-  @param {DragEvent} event
-  `),
-    onDragOver: PropTypes.func.description(`
-  Cb for when the dragover event occurs
-  @param {DragEvent} event
-  `),
-    onDrop: PropTypes.func.description(`
-   Cb for when the drop event occurs.
-   onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
-   For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:  
-   @param {File[]} acceptedFiles
-   @param {FileRejection[]} fileRejections
-   @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
-  `),
-    onDropAccepted: PropTypes.func.description(`
+  onDrop: PropTypes.func.description(
+    `
   Cb for when the drop event occurs.
-  Note that if no files are accepted, this callback is not invoked.
+  onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.
   @param {File[]} files
-  @param {(DragEvent|Event)} event
-  `),
-    onDropRejected: PropTypes.func.description(`
-  Cb for when the drop event occurs.
-  Note that if no files are rejected, this callback is not invoked.  
-  @param {FileRejection[]} fileRejections
-  @param {(DragEvent|Event)} event
-  `),
-    onError: PropTypes.func.description(`
-  Cb for when there's some error from any of the promises.
-  @param {Error} error
-  `),
-    validator: PropTypes.func.description(`
-    Custom validation function. It must return null if there's no errors.
-    @param {File} file
-    @returns {FileError|FileError[]|null}
-    `)
-  }).description(`react-dropzone options, see https://react-dropzone.js.org/ for more information V14.2.3`).defaultValue({})
-  // onSomethingEvent: PropTypes.func
-  //   .description('some example of function, required if something is not foo')
-  //   .signature('(( newVal: string, e: React.SyntheticEvent, metaInfo: Record<string,unknown> ) => void )'),
+  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)
+ `
+  ).signature("(( file: File[], event: React.DragEvent ) => void )")
 };
 const DSDropzonePropTypesSchema = DSDropzonePropTypes;
 export {

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DropzoneOptions } from 'react-dropzone';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSDropzoneT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    dropConfig?: DropzoneOptions;\n    hasError?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: DSDropzoneT.DefaultProps = {\n  dropConfig: {},\n};\n\nexport const DSDropzonePropTypes: DSPropTypesSchema<DSDropzoneT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.any,\n  hasError: PropTypes.bool.description('Show error border color'),\n  dropConfig: PropTypes.shape({\n    accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).description(`\n    Set accepted file types.\n    Checkout https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker types option for more information.\n    Keep in mind that mime type determination is not reliable across platforms. CSV files,\n    for example, are reported as text/plain under macOS but as application/vnd.ms-excel under\n    Windows. In some cases there might not be a mime type set at all (https://github.com/react-dropzone/react-dropzone/issues/276).\n  `),\n    multiple: PropTypes.bool.description(\"Allow drag 'n' drop (or selection from the file dialog) of multiple files\"),\n\n    preventDropOnDocument: PropTypes.bool.description(\n      'If false, allow dropped items to take over the current browser window',\n    ),\n    noClick: PropTypes.bool.description('If true, disables click to open the native file selection dialog'),\n    noKeyboard: PropTypes.bool.description(`\n  If true, disables SPACE/ENTER to open the native file selection dialog.\n  Note that it also stops tracking the focus state.`),\n    noDrag: PropTypes.bool.description('If true, disables drag&drop'),\n    noDragEventsBubbling: PropTypes.bool.description('If true, stops drag event propagation to parents'),\n    minSize: PropTypes.number.description('Minimum file size (in bytes)'),\n    maxSize: PropTypes.number.description('Maximum file size (in bytes)'),\n    maxFiles: PropTypes.number.description(`\n  Maximum accepted number of files\n  The default value is 0 which means there is no limitation to how many files are accepted.\n  `),\n    disabled: PropTypes.bool.description('Enable/disable the dropzone'),\n    getFilesFromEvent: PropTypes.func.description(`\n  Use this to provide a custom file aggregator\n  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n  `),\n    onFileDialogCancel: PropTypes.func.description('Cb for when closing the file dialog with no selection'),\n    onFileDialogOpen: PropTypes.func.description('Cb for when opening the file dialog'),\n    useFsAccessApi: PropTypes.bool.description(`\n  Set to true to use the https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API\n  to open the file picker instead of using an <input type=\"file\"> click event.\n  `),\n    onDragEnter: PropTypes.func.description(`\n  Cb for when the dragenter event occurs.\n  @param {DragEvent} event`),\n    onDragLeave: PropTypes.func.description(`\n  Cb for when the dragleave event occurs\n  @param {DragEvent} event\n  `),\n    onDragOver: PropTypes.func.description(`\n  Cb for when the dragover event occurs\n  @param {DragEvent} event\n  `),\n    onDrop: PropTypes.func.description(`\n   Cb for when the drop event occurs.\n   onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n   For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:  \n   @param {File[]} acceptedFiles\n   @param {FileRejection[]} fileRejections\n   @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n  `),\n    onDropAccepted: PropTypes.func.description(`\n  Cb for when the drop event occurs.\n  Note that if no files are accepted, this callback is not invoked.\n  @param {File[]} files\n  @param {(DragEvent|Event)} event\n  `),\n    onDropRejected: PropTypes.func.description(`\n  Cb for when the drop event occurs.\n  Note that if no files are rejected, this callback is not invoked.  \n  @param {FileRejection[]} fileRejections\n  @param {(DragEvent|Event)} event\n  `),\n    onError: PropTypes.func.description(`\n  Cb for when there's some error from any of the promises.\n  @param {Error} error\n  `),\n    validator: PropTypes.func.description(`\n    Custom validation function. It must return null if there's no errors.\n    @param {File} file\n    @returns {FileError|FileError[]|null}\n    `),\n  })\n    .description(`react-dropzone options, see https://react-dropzone.js.org/ for more information V14.2.3`)\n    .defaultValue({}),\n  // onSomethingEvent: PropTypes.func\n  //   .description('some example of function, required if something is not foo')\n  //   .signature('(( newVal: string, e: React.SyntheticEvent, metaInfo: Record<string,unknown> ) => void )'),\n};\n\nexport const DSDropzonePropTypesSchema = DSDropzonePropTypes as unknown as WeakValidationMap<DSDropzoneT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA+BhE,MAAM,eAAyC;AAAA,EACpD,YAAY,CAAC;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAC9D,YAAY,UAAU,MAAM;AAAA,IAC1B,QAAQ,UAAU,SAAS,UAAU,QAAQ,UAAU,MAAM,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E;AAAA,IACC,UAAU,UAAU,KAAK,YAAY,2EAA2E;AAAA,IAEhH,uBAAuB,UAAU,KAAK;AAAA,MACpC;AAAA,IACF;AAAA,IACA,SAAS,UAAU,KAAK,YAAY,kEAAkE;AAAA,IACtG,YAAY,UAAU,KAAK,YAAY;AAAA;AAAA,oDAES;AAAA,IAChD,QAAQ,UAAU,KAAK,YAAY,6BAA6B;AAAA,IAChE,sBAAsB,UAAU,KAAK,YAAY,kDAAkD;AAAA,IACnG,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,IACpE,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,IACpE,UAAU,UAAU,OAAO,YAAY;AAAA;AAAA;AAAA,GAGxC;AAAA,IACC,UAAU,UAAU,KAAK,YAAY,6BAA6B;AAAA,IAClE,mBAAmB,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAG/C;AAAA,IACC,oBAAoB,UAAU,KAAK,YAAY,uDAAuD;AAAA,IACtG,kBAAkB,UAAU,KAAK,YAAY,qCAAqC;AAAA,IAClF,gBAAgB,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAG5C;AAAA,IACC,aAAa,UAAU,KAAK,YAAY;AAAA;AAAA,2BAEjB;AAAA,IACvB,aAAa,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGzC;AAAA,IACC,YAAY,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGxC;AAAA,IACC,QAAQ,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpC;AAAA,IACC,gBAAgB,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GAK5C;AAAA,IACC,gBAAgB,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GAK5C;AAAA,IACC,SAAS,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA,GAGrC;AAAA,IACC,WAAW,UAAU,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,KAIrC;AAAA,EACH,CAAC,EACE,YAAY,yFAAyF,EACrG,aAAa,CAAC,CAAC;AAAA;AAAA;AAAA;AAIpB;AAEO,MAAM,4BAA4B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSDropzoneT {\n  export interface RequiredProps {}\n\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    onDrop?: (files: File[], event: React.DragEvent<HTMLDivElement>) => void;\n    hasError?: boolean;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export type ExampleState = '0' | '1';\n}\n\nexport const defaultProps: DSDropzoneT.DefaultProps = {\n  dropConfig: {},\n};\n\nexport const DSDropzonePropTypes: DSPropTypesSchema<DSDropzoneT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  children: PropTypes.any,\n  disabled: PropTypes.bool.description('Enable/disable the dropzone'),\n  hasError: PropTypes.bool.description('Show error border color'),\n  onDrop: PropTypes.func\n    .description(\n      `\n  Cb for when the drop event occurs.\n  onDrop will provide you with an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which you can then process and send to a server.\n  @param {File[]} files\n  @param {(DragEvent|Event)} event A drag event or input change event (if files were selected via the file dialog)\n `,\n    )\n    .signature('(( file: File[], event: React.DragEvent ) => void )'),\n};\n\nexport const DSDropzonePropTypesSchema = DSDropzonePropTypes as unknown as WeakValidationMap<DSDropzoneT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AA8BhE,MAAM,eAAyC;AAAA,EACpD,YAAY,CAAC;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU;AAAA,EACpB,UAAU,UAAU,KAAK,YAAY,6BAA6B;AAAA,EAClE,UAAU,UAAU,KAAK,YAAY,yBAAyB;AAAA,EAC9D,QAAQ,UAAU,KACf;AAAA,IACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMF,EACC,UAAU,qDAAqD;AACpE;AAEO,MAAM,4BAA4B;",
   "names": []
 }

package/dist/esm/styled.js

@@ -3,10 +3,14 @@ import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from "./constants/index.js";
 const borderImage = (color) => `url("data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${DROP_ZONE_CONSTANTS.BORDER_WIDTH}' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e")`;
-const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })`
+const StyledDropZoneHolder = styled(Grid, {
+  name: DSDropzoneName,
+  slot: DROPZONE_SLOTS.WRAPPER_HOLDER
+})`
   position: relative;
+`;
+const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })`
   border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;
-
   background-color: ${(props) => props.theme.colors.neutral["000"]};
   background-image: ${(props) => {
   if (props.disabled) {
@@ -15,12 +19,9 @@ const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS
   if (props.isDragActive) {
     return borderImage(props.theme.colors.brand[600]);
   }
-  if (props.isDragReject || props.hasError) {
+  if (props.hasError) {
     return borderImage(props.theme.colors.danger[900]);
   }
-  if (props.isFocused) {
-    return borderImage(props.theme.colors.brand[600]);
-  }
   return borderImage(props.theme.colors.neutral[400]);
 }};
   padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;
@@ -32,17 +33,16 @@ const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS
   if (props.isDragActive) {
     return borderImage(props.theme.colors.brand[600]);
   }
-  if (props.isDragReject) {
+  if (props.hasError) {
     return borderImage(props.theme.colors.danger[900]);
   }
-  if (props.isFocused) {
-    return borderImage(props.theme.colors.brand[600]);
-  }
   return borderImage(props.theme.colors.brand[600]);
 }};
   }
+  cursor: ${(props) => props.isDragActive ? "grabbing" : "default"};
 `;
 export {
-  StyledDropZone
+  StyledDropZone,
+  StyledDropZoneHolder
 };
 //# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\nimport type { DropzoneState } from 'react-dropzone';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n//   encodeURIComponent(\n//     `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n//   );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n//   const { isDragAccept, isDragReject, isFocused } = props;\n//   console.log(props);\n//   if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n//   if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n//   return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n  `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n    DROP_ZONE_CONSTANTS.BORDER_RADIUS\n  }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n    DROP_ZONE_CONSTANTS.BORDER_WIDTH\n  }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<\n  DropzoneState & {\n    disabled: boolean;\n    hasError: boolean;\n  }\n>`\n  position: relative;\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  background-image: ${(props) => {\n    if (props.disabled) {\n      return borderImage(props.theme.colors.neutral[400]);\n    }\n    if (props.isDragActive) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    if (props.isDragReject || props.hasError) {\n      return borderImage(props.theme.colors.danger[900]);\n    }\n    if (props.isFocused) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    return borderImage(props.theme.colors.neutral[400]);\n  }};\n  padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n  &:hover {\n    background-image: ${(props) => {\n      if (props.disabled) {\n        return borderImage(props.theme.colors.neutral[400]);\n      }\n      if (props.isDragActive) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      if (props.isDragReject) {\n        return borderImage(props.theme.colors.danger[900]);\n      }\n      if (props.isFocused) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      return borderImage(props.theme.colors.brand[600]);\n    }};\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB,sBAAsB;AAgBpE,MAAM,cAAc,CAAC,UACnB,gLACE,oBAAoB,sBACb,oBAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,oBAAoB;AAGjB,MAAM,iBAAiB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,QAAQ,CAAC;AAAA;AAAA,mBAO9E,oBAAoB;AAAA;AAAA,sBAEjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,gBAAgB,MAAM,UAAU;AACxC,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,MAAI,MAAM,WAAW;AACnB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,MAAI,MAAM,WAAW;AACnB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-system';\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DROPZONE_SLOTS, DROP_ZONE_CONSTANTS, DSDropzoneName } from './constants/index.js';\n\n// const borderImageCreator = (color: any, stroke: number) =>\n//   encodeURIComponent(\n//     `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"8\" ry=\"8\" stroke=\"${color}\" stroke-width=\"${stroke}\" stroke-dasharray=\"6, 14\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/></svg>`,\n//   );\n\n// const handleBorder = (props: StyledProps<DSDropzoneT.InternalProps>): string => {\n//   const { isDragAccept, isDragReject, isFocused } = props;\n//   console.log(props);\n//   if (isDragAccept) return borderImageCreator(props.theme.colors.brand[600], 2);\n//   if (isDragReject) return borderImageCreator(props.theme.colors.danger[900], 2);\n//   return borderImageCreator(props.theme.colors.neutral[400], 2);\n// };\n\nconst borderImage = (color: string) =>\n  `url(\"data:image/svg+xml,%3csvg aria-hidden='true' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='${\n    DROP_ZONE_CONSTANTS.BORDER_RADIUS\n  }' ry='${DROP_ZONE_CONSTANTS.BORDER_RADIUS}' stroke='${encodeURIComponent(color)}' stroke-width='${\n    DROP_ZONE_CONSTANTS.BORDER_WIDTH\n  }' stroke-dasharray='4 6' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e\")`;\n\ninterface DropzoneStyledProps {\n  isDragActive: boolean;\n  disabled: boolean;\n  hasError: boolean;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\nexport const StyledDropZoneHolder = styled(Grid, {\n  name: DSDropzoneName,\n  slot: DROPZONE_SLOTS.WRAPPER_HOLDER,\n})`\n  position: relative;\n`;\nexport const StyledDropZone = styled(Grid, { name: DSDropzoneName, slot: DROPZONE_SLOTS.WRAPPER })<DropzoneStyledProps>`\n  border-radius: ${DROP_ZONE_CONSTANTS.BORDER_RADIUS}px;\n  background-color: ${(props) => props.theme.colors.neutral['000']};\n  background-image: ${(props) => {\n    if (props.disabled) {\n      return borderImage(props.theme.colors.neutral[400]);\n    }\n    if (props.isDragActive) {\n      return borderImage(props.theme.colors.brand[600]);\n    }\n    if (props.hasError) {\n      return borderImage(props.theme.colors.danger[900]);\n    }\n    return borderImage(props.theme.colors.neutral[400]);\n  }};\n  padding: ${(props) => props.theme.space.xs} 1.8461538461538463rem;\n  &:hover {\n    background-image: ${(props) => {\n      if (props.disabled) {\n        return borderImage(props.theme.colors.neutral[400]);\n      }\n      if (props.isDragActive) {\n        return borderImage(props.theme.colors.brand[600]);\n      }\n      if (props.hasError) {\n        return borderImage(props.theme.colors.danger[900]);\n      }\n      return borderImage(props.theme.colors.brand[600]);\n    }};\n  }\n  cursor: ${(props) => (props.isDragActive ? 'grabbing' : 'default')};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB,sBAAsB;AAepE,MAAM,cAAc,CAAC,UACnB,gLACE,oBAAoB,sBACb,oBAAoB,0BAA0B,mBAAmB,KAAK,oBAC7E,oBAAoB;AAUjB,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,eAAe;AACvB,CAAC;AAAA;AAAA;AAGM,MAAM,iBAAiB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,eAAe,QAAQ,CAAC;AAAA,mBAC9E,oBAAoB;AAAA,sBACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,sBAC3C,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AACpD;AAAA,aACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,wBAElB,CAAC,UAAU;AAC7B,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,MAAM,cAAc;AACtB,WAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,EAClD;AACA,MAAI,MAAM,UAAU;AAClB,WAAO,YAAY,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACA,SAAO,YAAY,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAClD;AAAA;AAAA,YAEQ,CAAC,UAAW,MAAM,eAAe,aAAa;AAAA;",
   "names": []
 }

package/dist/types/config/useDSDropzone.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="lodash" />
+import React from 'react';
 import { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-utilities';
 import { type DSDropzoneT } from '../react-desc-prop-types.js';
 export interface DropzoneCTX {
@@ -12,5 +13,9 @@ export declare const useDSDropzone: (propsFromUser: DSDropzoneT.Props) => {
     globalProps: import("lodash").Omit<import("@elliemae/ds-utilities").GlobalAttributesT<Element>, "cols" | "rows" | "wrap">;
     xstyledProps: import("@elliemae/ds-utilities").XstyledProps;
     instanceUid: string;
-    dropZoneState: import("react-dropzone").DropzoneState;
+    isDragInside: boolean;
+    onDragEnterHandler: React.DragEventHandler<HTMLDivElement>;
+    onDragOverHandler: React.DragEventHandler<HTMLDivElement>;
+    onDragLeaveHandler: React.DragEventHandler<HTMLDivElement>;
+    onDropHandler: React.DragEventHandler<HTMLDivElement>;
 };

package/dist/types/constants/index.d.ts

@@ -8,5 +8,6 @@ export declare const DROPZONE_SLOTS: {
     readonly ACTIVEZONE_ICON: "activezone-icon";
     readonly ACTIVEZONE_WRAPPER: "activezone-wrapper";
     readonly WRAPPER: "wrapper";
+    readonly WRAPPER_HOLDER: "wrapper_holder";
 };
 export declare const DROPZONE_DATA_TESTID: Record<string, string>;

package/dist/types/react-desc-prop-types.d.ts

@@ -1,5 +1,4 @@
 import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
-import type { DropzoneOptions } from 'react-dropzone';
 import type { WeakValidationMap } from 'react';
 export declare namespace DSDropzoneT {
     interface RequiredProps {
@@ -7,7 +6,7 @@ export declare namespace DSDropzoneT {
     interface DefaultProps {
     }
     interface OptionalProps {
-        dropConfig?: DropzoneOptions;
+        onDrop?: (files: File[], event: React.DragEvent<HTMLDivElement>) => void;
         hasError?: boolean;
     }
     interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps {

package/dist/types/styled.d.ts

@@ -1,17 +1,11 @@
 /// <reference types="react" />
-export declare const StyledDropZone: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, import("react-dropzone").DropzoneRef & {
-    isFocused: boolean;
+interface DropzoneStyledProps {
     isDragActive: boolean;
-    isDragAccept: boolean;
-    isDragReject: boolean;
-    isFileDialogActive: boolean;
-    acceptedFiles: File[];
-    fileRejections: import("react-dropzone").FileRejection[];
-    rootRef: import("react").RefObject<HTMLElement>;
-    inputRef: import("react").RefObject<HTMLInputElement>;
-    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
-    getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
-} & {
     disabled: boolean;
     hasError: boolean;
-} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+    getOwnerProps: () => object;
+    getOwnerPropsArguments: () => object;
+}
+export declare const StyledDropZoneHolder: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledDropZone: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, DropzoneStyledProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dropzone",
-  "version": "3.25.0-rc.0",
+  "version": "3.26.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dropzone",
   "files": [
@@ -36,23 +36,22 @@
   },
   "dependencies": {
     "@xstyled/styled-components": "~3.6.0",
-    "react-dropzone": "~14.2.3",
     "uid": "^2.0.2",
-    "@elliemae/ds-button": "3.25.0-rc.0",
-    "@elliemae/ds-grid": "3.25.0-rc.0",
-    "@elliemae/ds-props-helpers": "3.25.0-rc.0",
-    "@elliemae/ds-icons": "3.25.0-rc.0",
-    "@elliemae/ds-hooks-fontsize-media": "3.25.0-rc.0",
-    "@elliemae/ds-system": "3.25.0-rc.0",
-    "@elliemae/ds-typography": "3.25.0-rc.0",
-    "@elliemae/ds-utilities": "3.25.0-rc.0"
+    "@elliemae/ds-button": "3.26.0-next.2",
+    "@elliemae/ds-grid": "3.26.0-next.2",
+    "@elliemae/ds-hooks-fontsize-media": "3.26.0-next.2",
+    "@elliemae/ds-props-helpers": "3.26.0-next.2",
+    "@elliemae/ds-icons": "3.26.0-next.2",
+    "@elliemae/ds-system": "3.26.0-next.2",
+    "@elliemae/ds-typography": "3.26.0-next.2",
+    "@elliemae/ds-utilities": "3.26.0-next.2"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "@xstyled/system": "3.7.0",
     "lodash": "^4.17.21",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.25.0-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.26.0-next.2"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
@@ -62,7 +61,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
+    "typeSafety": true
   },
   "scripts": {
     "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",