@payloadcms/ui 3.0.0-canary.9de3ffd → 3.0.0-canary.a14e066

package/dist/elements/DraggableSortable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","DndContext","KeyboardSensor","PointerSensor","closestCenter","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      if (!active || !over) return\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAH,aAAA,EAAyBoB,EAIzB,GACAjB,SAAA,CAAAJ,cAAA,EAA0B0B,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAAA,IAErB,CAACC,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAEZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAG,aAAA,EAEiBjB,GAAA,CAAAkB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQJ,MAAA,CAAAb,EAAS;UAAAkB,WAAA,EAC1CpB,GAAA,CAAAkB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQH,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAbF,MAAAyB,aAAA,GAAsBT,EAcJ;EAAA,IAAAU,EAAA;EAAA,IAAA1B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAAyB,aAAA,IAAAzB,CAAA,SAAAe,OAAA;IAIhBW,EAAA,GAAAC,IAAA,CAAAzC,UAAA;MAAA0C,kBAAA,EAAAvC,aAAA;MAAAgB,EAAA;MAAAD,SAAA,EAGaqB,aAAA;MAAAV,OAAA;MAAAd,QAAA,EAGX0B,IAAA,CAAAlC,eAAA;QAAAoC,KAAA,EAAwB1B,GAAA;QAAAF,QAAA,EACtB0B,IAAA,CAAC;UAAAzB,SAAA;UAAA4B,GAAA,EAA+BvB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpCyB,E;CAaJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","closestCenter","DndContext","KeyboardSensor","PointerSensor","useDroppable","useSensor","useSensors","SortableContext","sortableKeyboardCoordinates","React","useCallback","useId","DraggableSortable","props","$","children","className","ids","onDragEnd","id","t0","setNodeRef","t1","Symbol","for","activationConstraint","distance","t2","coordinateGetter","sensors","t3","event","active","over","activatorEvent","stopPropagation","moveFromIndex","findIndex","_id","moveToIndex","_id_0","handleDragEnd","t4","_jsx","collisionDetection","items","ref"],"sources":["../../../src/elements/DraggableSortable/index.tsx"],"sourcesContent":["'use client'\nimport type { DragEndEvent } from '@dnd-kit/core'\n\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useDroppable,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core'\nimport { SortableContext, sortableKeyboardCoordinates } from '@dnd-kit/sortable'\nimport React, { useCallback, useId } from 'react'\n\nimport type { Props } from './types.js'\n\nexport { Props }\n\nexport const DraggableSortable: React.FC<Props> = (props) => {\n  const { children, className, ids, onDragEnd } = props\n\n  const id = useId()\n\n  const { setNodeRef } = useDroppable({\n    id,\n  })\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  )\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event\n\n      event.activatorEvent.stopPropagation()\n\n      if (!active || !over) {\n        return\n      }\n\n      if (typeof onDragEnd === 'function') {\n        onDragEnd({\n          event,\n          moveFromIndex: ids.findIndex((_id) => _id === active.id),\n          moveToIndex: ids.findIndex((_id) => _id === over.id),\n        })\n      }\n    },\n    [onDragEnd, ids],\n  )\n\n  return (\n    <DndContext\n      collisionDetection={closestCenter}\n      id={id}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <SortableContext items={ids}>\n        <div className={className} ref={setNodeRef}>\n          {children}\n        </div>\n      </SortableContext>\n    </DndContext>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SACEC,aAAa,EACbC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,SAAS,EACTC,UAAU,QACL;AACP,SAASC,eAAe,EAAEC,2BAA2B,QAAQ;AAC7D,OAAOC,KAAA,IAASC,WAAW,EAAEC,KAAK,QAAQ;AAM1C,OAAO,MAAMC,iBAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAf,EAAA;EAChD;IAAAgB,QAAA;IAAAC,SAAA;IAAAC,GAAA;IAAAC;EAAA,IAAgDL,KAAA;EAEhD,MAAAM,EAAA,GAAWR,KAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA;IAEyBC,EAAA;MAAAD;IAAA;IAEpCL,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAFA;IAAAO;EAAA,IAAuBjB,YAAA,CAAagB,EAEpC;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAG2BF,EAAA;MAAAG,oBAAA;QAAAC,QAAA;MAAA;IAAA;IAIzBZ,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,IAAAa,EAAA;EAAA,IAAAb,CAAA,QAAAS,MAAA,CAAAC,GAAA;IAC0BG,EAAA;MAAAC,gBAAA,EAAApB;IAAA;IAE1BM,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EARF,MAAAe,OAAA,GAAgBvB,UAAA,CACdD,SAAA,CAAAF,aAAA,EAAyBmB,EAIzB,GACAjB,SAAA,CAAAH,cAAA,EAA0ByB,EAE1B;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAG,GAAA;IAIAa,EAAA,GAAAC,KAAA;MACE;QAAAC,MAAA;QAAAC;MAAA,IAAyBF,KAAA;MAEzBA,KAAA,CAAAG,cAAA,CAAAC,eAAA,CAAoC;MAAA,IAEhC,CAACH,MAAA,KAAWC,IAAA;QAAA;MAAA;MAAA,IAIZ,OAAOf,SAAA,KAAc;QACvBA,SAAA;UAAAa,KAAA;UAAAK,aAAA,EAEiBnB,GAAA,CAAAoB,SAAA,CAAAC,GAAA,IAAuBA,GAAA,KAAQN,MAAA,CAAAb,EAAS;UAAAoB,WAAA,EAC1CtB,GAAA,CAAAoB,SAAA,CAAAG,KAAA,IAAuBF,KAAA,KAAQL,IAAA,CAAAd,EAAO;QAAA,CACrD;MAAA;IAAA;IAEJL,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAjBF,MAAA2B,aAAA,GAAsBX,EAkBJ;EAAA,IAAAY,EAAA;EAAA,IAAA5B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,SAAAG,GAAA,IAAAH,CAAA,SAAAK,EAAA,IAAAL,CAAA,SAAA2B,aAAA,IAAA3B,CAAA,SAAAe,OAAA;IAIhBa,EAAA,GAAAC,IAAA,CAAA1C,UAAA;MAAA2C,kBAAA,EAAA5C,aAAA;MAAAmB,EAAA;MAAAD,SAAA,EAGauB,aAAA;MAAAZ,OAAA;MAAAd,QAAA,EAGX4B,IAAA,CAAApC,eAAA;QAAAsC,KAAA,EAAwB5B,GAAA;QAAAF,QAAA,EACtB4B,IAAA,CAAC;UAAA3B,SAAA;UAAA8B,GAAA,EAA+BzB,UAAA;UAAAN;QAAA,C;;;;;;;;;;;;;;SAPpC2B,E;CAaJ","ignoreList":[]}

package/dist/elements/Drawer/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Props, TogglerProps } from './types.js';
 import './index.scss';
+export declare const drawerZBase = 100;
 export declare const formatDrawerSlug: ({ slug, depth }: {
     depth: number;
     slug: string;

package/dist/elements/Drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAMrD,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAuBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFlC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAMrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,MAAM,CAAA;AAE9B,eAAO,MAAM,gBAAgB,oBAAqB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAG,MACzD,CAAA;AAE3B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyBhD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuFlC,CAAA"}

package/dist/elements/Drawer/index.js

@@ -10,7 +10,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { Gutter } from '../Gutter/index.js';
 import './index.scss';
 const baseClass = 'drawer';
-const zBase = 100;
+export const drawerZBase = 100;
 export const formatDrawerSlug = ({
   slug,
   depth
@@ -92,10 +92,10 @@ export const Drawer = t0 => {
   const $ = _c(26);
   const {
     slug,
-    Header,
     children,
     className,
     gutter: t1,
+    Header,
     hoverTitle,
     title
   } = t0;
@@ -155,7 +155,7 @@ export const Drawer = t0 => {
       t8 = $[10];
     }
     const t9 = t8.join(" ");
-    const t10 = zBase + drawerDepth;
+    const t10 = drawerZBase + drawerDepth;
     let t11;
     if ($[11] !== t10 || $[12] !== drawerDepth || $[13] !== t || $[14] !== slug || $[15] !== closeModal || $[16] !== Header || $[17] !== hoverTitle || $[18] !== title || $[19] !== children || $[20] !== gutter || $[21] !== t9) {
       let t12;

package/dist/elements/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","zBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","onClick","className","disabled","rest","children","openModal","t1","e","handleClick","t2","_jsx","type","Drawer","Header","gutter","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","t3","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","_jsxs","style","zIndex","id","width","left","right","Provider","value"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\nconst zBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') onClick(e)\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  Header,\n  children,\n  className,\n  gutter = true,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: zBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","Modal","useModal","React","useCallback","useEffect","useState","XIcon","EditDepthContext","useEditDepth","useTranslation","Gutter","baseClass","drawerZBase","formatDrawerSlug","slug","depth","useDrawerSlug","DrawerToggler","t0","$","onClick","className","disabled","rest","children","openModal","t1","e","handleClick","t2","_jsx","type","Drawer","gutter","Header","hoverTitle","title","undefined","t","closeModal","modalState","drawerDepth","isOpen","setIsOpen","animateIn","setAnimateIn","t3","t4","t5","t6","t7","t8","filter","Boolean","t9","join","t10","t11","t12","_jsxs","style","zIndex","id","width","left","right","Provider","value"],"sources":["../../../src/elements/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useEffect, useState } from 'react'\n\nimport type { Props, TogglerProps } from './types.js'\n\nimport { XIcon } from '../../icons/X/index.js'\nimport { EditDepthContext, useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport './index.scss'\n\nconst baseClass = 'drawer'\n\nexport const drawerZBase = 100\n\nexport const formatDrawerSlug = ({ slug, depth }: { depth: number; slug: string }): string =>\n  `drawer_${depth}_${slug}`\n\nexport { useDrawerSlug } from './useDrawerSlug.js'\n\nexport const DrawerToggler: React.FC<TogglerProps> = ({\n  slug,\n  children,\n  className,\n  disabled,\n  onClick,\n  ...rest\n}) => {\n  const { openModal } = useModal()\n\n  const handleClick = useCallback(\n    (e) => {\n      openModal(slug)\n      if (typeof onClick === 'function') {\n        onClick(e)\n      }\n    },\n    [openModal, slug, onClick],\n  )\n\n  return (\n    <button className={className} disabled={disabled} onClick={handleClick} type=\"button\" {...rest}>\n      {children}\n    </button>\n  )\n}\n\nexport const Drawer: React.FC<Props> = ({\n  slug,\n  children,\n  className,\n  gutter = true,\n  Header,\n  hoverTitle,\n  title,\n}) => {\n  const { t } = useTranslation()\n  const { closeModal, modalState } = useModal()\n  const drawerDepth = useEditDepth()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [animateIn, setAnimateIn] = useState(false)\n\n  useEffect(() => {\n    setIsOpen(modalState[slug]?.isOpen)\n  }, [slug, modalState])\n\n  useEffect(() => {\n    setAnimateIn(isOpen)\n  }, [isOpen])\n\n  if (isOpen) {\n    // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers\n    return (\n      <Modal\n        className={[\n          className,\n          baseClass,\n          animateIn && `${baseClass}--is-open`,\n          drawerDepth > 1 && `${baseClass}--nested`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        slug={slug}\n        style={{\n          zIndex: drawerZBase + drawerDepth,\n        }}\n      >\n        {(!drawerDepth || drawerDepth === 1) && <div className={`${baseClass}__blur-bg`} />}\n        <button\n          aria-label={t('general:close')}\n          className={`${baseClass}__close`}\n          id={`close-drawer__${slug}`}\n          onClick={() => closeModal(slug)}\n          type=\"button\"\n        />\n        <div\n          className={`${baseClass}__content`}\n          style={{\n            width: `calc(100% - (${drawerDepth} * var(--gutter-h))`,\n          }}\n        >\n          <div className={`${baseClass}__blur-bg-content`} />\n          <Gutter className={`${baseClass}__content-children`} left={gutter} right={gutter}>\n            <EditDepthContext.Provider value={drawerDepth + 1}>\n              {Header}\n              {Header === undefined && (\n                <div className={`${baseClass}__header`}>\n                  <h2 className={`${baseClass}__header__title`} title={hoverTitle ? title : null}>\n                    {title}\n                  </h2>\n                  {/* TODO: the `button` HTML element breaks CSS transitions on the drawer for some reason...\n                    i.e. changing to a `div` element will fix the animation issue but will break accessibility\n                  */}\n                  <button\n                    aria-label={t('general:close')}\n                    className={`${baseClass}__header__close`}\n                    id={`close-drawer__${slug}`}\n                    onClick={() => closeModal(slug)}\n                    type=\"button\"\n                  >\n                    <XIcon />\n                  </button>\n                </div>\n              )}\n              {children}\n            </EditDepthContext.Provider>\n          </Gutter>\n        </div>\n      </Modal>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Drawer/index.scss

@@ -2,138 +2,140 @@
 
 $transTime: 200;
 
-.drawer {
-  display: flex;
-  overflow: hidden;
-  position: fixed;
-  height: 100vh;
-
-  &__blur-bg {
-    @include blur-bg;
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    transition: all #{$transTime}ms linear;
-  }
-
-  &__content {
-    opacity: 0;
-    transform: translateX(calc(var(--base) * 4));
-    position: relative;
-    z-index: 2;
-    // NOTE: width is controlled by js
-    // width: calc(100% - var(--gutter-h));
+@layer payload-default {
+  .drawer {
+    display: flex;
     overflow: hidden;
-    transition: all #{$transTime}ms linear;
-    background-color: var(--theme-bg);
-  }
-
-  &__content-children {
-    position: relative;
-    z-index: 1;
-    overflow: auto;
-    height: 100%;
-  }
-
-  &--is-open {
-    .drawer {
-      &__content,
-      &__blur-bg {
-        opacity: 1;
-      }
-
-      &__close {
-        opacity: 0.1;
-        transition: opacity #{$transTime}ms linear;
-        transition-delay: #{calc($transTime / 2)}ms;
-      }
+    position: fixed;
+    height: 100vh;
+
+    &__blur-bg {
+      @include blur-bg;
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      opacity: 0;
+      transition: all #{$transTime}ms linear;
+    }
 
-      &__content {
-        transform: translateX(0);
-      }
+    &__content {
+      opacity: 0;
+      transform: translateX(calc(var(--base) * 4));
+      position: relative;
+      z-index: 2;
+      // NOTE: width is controlled by js
+      // width: calc(100% - var(--gutter-h));
+      overflow: hidden;
+      transition: all #{$transTime}ms linear;
+      background-color: var(--theme-bg);
     }
-  }
 
-  &__close {
-    @extend %btn-reset;
-    position: relative;
-    z-index: 2;
-    flex-shrink: 0;
-    text-indent: -9999px;
-    cursor: pointer;
-    opacity: 0;
-    will-change: opacity;
-    transition: none;
-    transition-delay: 0ms;
-    flex-grow: 1;
-    background: var(--theme-elevation-800);
-
-    &:active,
-    &:focus {
-      outline: 0;
+    &__content-children {
+      position: relative;
+      z-index: 1;
+      overflow: auto;
+      height: 100%;
     }
-  }
 
-  &__header {
-    display: flex;
-    align-items: center;
-    margin-top: base(2.5);
-    margin-bottom: base(1);
-    width: 100%;
+    &--is-open {
+      .drawer {
+        &__content,
+        &__blur-bg {
+          opacity: 1;
+        }
 
-    &__title {
-      margin: 0;
-      flex-grow: 1;
+        &__close {
+          opacity: 0.1;
+          transition: opacity #{$transTime}ms linear;
+          transition-delay: #{calc($transTime / 2)}ms;
+        }
+
+        &__content {
+          transform: translateX(0);
+        }
+      }
     }
 
     &__close {
-      border: 0;
-      background-color: transparent;
-      padding: 0;
+      @extend %btn-reset;
+      position: relative;
+      z-index: 2;
+      flex-shrink: 0;
+      text-indent: -9999px;
       cursor: pointer;
-      overflow: hidden;
-      direction: ltr;
+      opacity: 0;
+      will-change: opacity;
+      transition: none;
+      transition-delay: 0ms;
+      flex-grow: 1;
+      background: var(--theme-elevation-800);
+
+      &:active,
+      &:focus {
+        outline: 0;
+      }
+    }
+
+    &__header {
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: base(1.2);
-      height: base(1.2);
+      margin-top: base(2.5);
+      margin-bottom: base(1);
+      width: 100%;
 
-      svg {
-        margin: base(-1.2);
-        width: base(2.4);
-        height: base(2.4);
-
-        position: relative;
+      &__title {
+        margin: 0;
+        flex-grow: 1;
+      }
 
-        .stroke {
-          stroke-width: 1px;
-          vector-effect: non-scaling-stroke;
+      &__close {
+        border: 0;
+        background-color: transparent;
+        padding: 0;
+        cursor: pointer;
+        overflow: hidden;
+        direction: ltr;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: base(1.2);
+        height: base(1.2);
+
+        svg {
+          margin: base(-1.2);
+          width: base(2.4);
+          height: base(2.4);
+
+          position: relative;
+
+          .stroke {
+            stroke-width: 1px;
+            vector-effect: non-scaling-stroke;
+          }
         }
       }
     }
-  }
 
-  @include mid-break {
-    &__header {
-      margin-top: base(1.5);
+    @include mid-break {
+      &__header {
+        margin-top: base(1.5);
+      }
     }
   }
-}
 
-html[data-theme='dark'] {
-  .drawer {
-    &__close {
-      background: var(--color-base-1000);
-    }
+  html[data-theme='dark'] {
+    .drawer {
+      &__close {
+        background: var(--color-base-1000);
+      }
 
-    &--is-open {
-      .drawer__close {
-        opacity: 0.25;
+      &--is-open {
+        .drawer__close {
+          opacity: 0.25;
+        }
       }
     }
   }

package/dist/elements/Drawer/types.d.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'react';
 export type Props = {
-    readonly Header?: React.ReactNode;
     readonly children: React.ReactNode;
     readonly className?: string;
     readonly gutter?: boolean;
+    readonly Header?: React.ReactNode;
     readonly hoverTitle?: boolean;
     readonly slug: string;
     readonly title?: string;

package/dist/elements/Drawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/Drawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAA"}

package/dist/elements/Drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  readonly Header?: React.ReactNode\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAYA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/Drawer/types.ts"],"sourcesContent":["import type { HTMLAttributes } from 'react'\n\nexport type Props = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  readonly gutter?: boolean\n  readonly Header?: React.ReactNode\n  readonly hoverTitle?: boolean\n  readonly slug: string\n  readonly title?: string\n}\n\nexport type TogglerProps = {\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  slug: string\n} & HTMLAttributes<HTMLButtonElement>\n"],"mappings":"AAYA","ignoreList":[]}

package/dist/elements/Dropzone/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import './index.scss';
 export type Props = {
+    readonly children?: React.ReactNode;
     readonly className?: string;
-    readonly mimeTypes?: string[];
+    readonly disabled?: boolean;
+    readonly dropzoneStyle?: 'default' | 'none';
     readonly multipleFiles?: boolean;
     readonly onChange: (e: FileList) => void;
-    readonly onPasteUrlClick?: () => void;
 };
-export declare const Dropzone: React.FC<Props>;
+export declare function Dropzone({ children, className, disabled, dropzoneStyle, multipleFiles, onChange, }: Props): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Dropzone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IAC7B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2HpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Dropzone/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AASrB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC3C,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,aAAyB,EACzB,aAAa,EACb,QAAQ,GACT,EAAE,KAAK,qBA6FP"}

package/dist/elements/Dropzone/index.js

@@ -1,168 +1,82 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { useTranslation } from '../../providers/Translation/index.js';
-import { Button } from '../Button/index.js';
 import './index.scss';
 const handleDragOver = e => {
   e.preventDefault();
   e.stopPropagation();
 };
 const baseClass = 'dropzone';
-export const Dropzone = t0 => {
-  const $ = _c(14);
-  const {
-    className,
-    mimeTypes,
-    multipleFiles,
-    onChange,
-    onPasteUrlClick
-  } = t0;
+export function Dropzone({
+  children,
+  className,
+  disabled = false,
+  dropzoneStyle = 'default',
+  multipleFiles,
+  onChange
+}) {
   const dropRef = React.useRef(null);
   const [dragging, setDragging] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const {
-    t
-  } = useTranslation();
-  let t1;
-  if ($[0] !== onChange) {
-    t1 = e => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.clipboardData.files && e.clipboardData.files.length > 0) {
-        onChange(e.clipboardData.files);
-      }
-    };
-    $[0] = onChange;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const handlePaste = t1;
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = e_0 => {
-      e_0.preventDefault();
-      e_0.stopPropagation();
-      setDragging(true);
-    };
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  const handleDragEnter = t2;
-  let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = e_1 => {
-      e_1.preventDefault();
-      e_1.stopPropagation();
-      setDragging(false);
-    };
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  const handleDragLeave = t3;
-  let t4;
-  if ($[4] !== onChange) {
-    t4 = e_2 => {
-      e_2.preventDefault();
-      e_2.stopPropagation();
+  const addFiles = React.useCallback(files => {
+    if (!multipleFiles && files.length > 1) {
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(files[0]);
+      onChange(dataTransfer.files);
+    } else {
+      onChange(files);
+    }
+  }, [multipleFiles, onChange]);
+  const handlePaste = React.useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.clipboardData.files && e.clipboardData.files.length > 0) {
+      addFiles(e.clipboardData.files);
+    }
+  }, [addFiles]);
+  const handleDragEnter = React.useCallback(e_0 => {
+    e_0.preventDefault();
+    e_0.stopPropagation();
+    setDragging(true);
+  }, []);
+  const handleDragLeave = React.useCallback(e_1 => {
+    e_1.preventDefault();
+    e_1.stopPropagation();
+    setDragging(false);
+  }, []);
+  const handleDrop = React.useCallback(e_2 => {
+    e_2.preventDefault();
+    e_2.stopPropagation();
+    setDragging(false);
+    if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
+      addFiles(e_2.dataTransfer.files);
       setDragging(false);
-      if (e_2.dataTransfer.files && e_2.dataTransfer.files.length > 0) {
-        onChange(e_2.dataTransfer.files);
-        setDragging(false);
-        e_2.dataTransfer.clearData();
-      }
-    };
-    $[4] = onChange;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const handleDrop = t4;
-  let t5;
-  if ($[6] !== onChange) {
-    t5 = e_3 => {
-      if (e_3.target.files && e_3.target.files.length > 0) {
-        onChange(e_3.target.files);
-      }
-    };
-    $[6] = onChange;
-    $[7] = t5;
-  } else {
-    t5 = $[7];
-  }
-  const handleFileSelection = t5;
-  let t6;
-  if ($[8] !== handleDrop || $[9] !== handlePaste) {
-    t6 = [handleDragEnter, handleDragLeave, handleDrop, handlePaste];
-    $[8] = handleDrop;
-    $[9] = handlePaste;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
+      e_2.dataTransfer.clearData();
+    }
+  }, [addFiles]);
   React.useEffect(() => {
     const div = dropRef.current;
-    if (div) {
-      div.addEventListener("dragenter", handleDragEnter);
-      div.addEventListener("dragleave", handleDragLeave);
-      div.addEventListener("dragover", handleDragOver);
-      div.addEventListener("drop", handleDrop);
-      div.addEventListener("paste", handlePaste);
+    if (div && !disabled) {
+      div.addEventListener('dragenter', handleDragEnter);
+      div.addEventListener('dragleave', handleDragLeave);
+      div.addEventListener('dragover', handleDragOver);
+      div.addEventListener('drop', handleDrop);
+      div.addEventListener('paste', handlePaste);
       return () => {
-        div.removeEventListener("dragenter", handleDragEnter);
-        div.removeEventListener("dragleave", handleDragLeave);
-        div.removeEventListener("dragover", handleDragOver);
-        div.removeEventListener("drop", handleDrop);
-        div.removeEventListener("paste", handlePaste);
+        div.removeEventListener('dragenter', handleDragEnter);
+        div.removeEventListener('dragleave', handleDragLeave);
+        div.removeEventListener('dragover', handleDragOver);
+        div.removeEventListener('drop', handleDrop);
+        div.removeEventListener('paste', handlePaste);
       };
     }
     return () => null;
-  }, t6);
-  const t7 = dragging ? "dragging" : "";
-  let t8;
-  if ($[11] !== className || $[12] !== t7) {
-    t8 = [baseClass, className, t7].filter(Boolean);
-    $[11] = className;
-    $[12] = t7;
-    $[13] = t8;
-  } else {
-    t8 = $[13];
-  }
-  const classes = t8.join(" ");
-  return _jsxs("div", {
+  }, [disabled, handleDragEnter, handleDragLeave, handleDrop, handlePaste]);
+  const classes = [baseClass, className, dragging ? 'dragging' : '', `dropzoneStyle--${dropzoneStyle}`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
     className: classes,
     ref: dropRef,
-    children: [_jsx(Button, {
-      buttonStyle: "secondary",
-      className: `${baseClass}__file-button`,
-      onClick: () => {
-        inputRef.current.click();
-      },
-      size: "medium",
-      children: t("upload:selectFile")
-    }), typeof onPasteUrlClick === "function" && _jsx(Button, {
-      buttonStyle: "secondary",
-      className: `${baseClass}__file-button`,
-      onClick: onPasteUrlClick,
-      size: "medium",
-      children: t("upload:pasteURL")
-    }), _jsx("input", {
-      accept: mimeTypes?.join(","),
-      "aria-hidden": "true",
-      className: `${baseClass}__hidden-input`,
-      multiple: multipleFiles,
-      onChange: handleFileSelection,
-      ref: inputRef,
-      type: "file"
-    }), _jsxs("p", {
-      className: `${baseClass}__label`,
-      children: [t("general:or"), " ", t("upload:dragAndDrop")]
-    })]
+    children: children
   });
-};
+}
 //# sourceMappingURL=index.js.map