@agility/plenum-ui 1.1.0 → 1.1.3

package/lib/index.esm.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import React__default, { createContext, forwardRef, useEffect, useCallback, useMemo, useContext, useState, useRef, useReducer, createRef, Fragment, useLayoutEffect, isValidElement, cloneElement, createElement, useImperativeHandle } from 'react';
+import React__default, { createContext, forwardRef, useEffect, useCallback, useMemo, useContext, useState, useRef, useReducer, createRef, Fragment, useLayoutEffect, isValidElement, cloneElement, createElement, memo, useImperativeHandle } from 'react';
 import { createPortal } from 'react-dom';
+import { jsx } from 'react/jsx-runtime';
 
 var classnames = {exports: {}};
 
@@ -7035,7 +7036,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*\n! tailwindcss v3.0.21 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n}\n\nselect {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          color-adjust: exact;\n}\n\n[multiple] {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          color-adjust: unset;\n}\n\n[type='checkbox'],[type='radio'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='checkbox'] {\n  border-radius: 0px;\n}\n\n[type='radio'] {\n  border-radius: 100%;\n}\n\n[type='checkbox']:focus,[type='radio']:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\n[type='checkbox']:checked,[type='radio']:checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n}\n\n[type='radio']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n}\n\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='checkbox']:indeterminate {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='file'] {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n\n[type='file']:focus {\n  outline: 1px auto -webkit-focus-ring-color;\n}\n\n*, ::before, ::after {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-8 {\n  bottom: 2rem;\n}\n.left-4 {\n  left: 1rem;\n}\n.top-8 {\n  top: 2rem;\n}\n.top-\\[10px\\] {\n  top: 10px;\n}\n.left-0 {\n  left: 0px;\n}\n.z-30 {\n  z-index: 30;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.m-auto {\n  margin: auto;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mr-3 {\n  margin-right: 0.75rem;\n}\n.ml-0 {\n  margin-left: 0px;\n}\n.ml-3 {\n  margin-left: 0.75rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.-ml-px {\n  margin-left: -1px;\n}\n.-mr-px {\n  margin-right: -1px;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-16 {\n  height: 4rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-\\[38px\\] {\n  height: 38px;\n}\n.h-\\[28px\\] {\n  height: 28px;\n}\n.h-\\[18px\\] {\n  height: 18px;\n}\n.h-\\[34px\\] {\n  height: 34px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[500px\\] {\n  height: 500px;\n}\n.h-\\[2px\\] {\n  height: 2px;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-auto {\n  height: auto;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.max-h-60 {\n  max-height: 15rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-16 {\n  width: 4rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-56 {\n  width: 14rem;\n}\n.w-\\[74px\\] {\n  width: 74px;\n}\n.w-\\[64px\\] {\n  width: 64px;\n}\n.w-\\[34px\\] {\n  width: 34px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[calc\\(100\\%-16px\\)\\] {\n  width: calc(100% - 16px);\n}\n.w-4 {\n  width: 1rem;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.grow {\n  flex-grow: 1;\n}\n.origin-bottom-right {\n  transform-origin: bottom right;\n}\n.translate-x-9 {\n  --tw-translate-x: 2.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-0 {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-4 {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-95 {\n  --tw-scale-x: .95;\n  --tw-scale-y: .95;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@-webkit-keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  -webkit-animation: spin 1s linear infinite;\n          animation: spin 1s linear infinite;\n}\n.cursor-auto {\n  cursor: auto;\n}\n.cursor-default {\n  cursor: default;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.grid-flow-row {\n  grid-auto-flow: row;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(243 244 246 / var(--tw-divide-opacity));\n}\n.self-end {\n  align-self: flex-end;\n}\n.self-center {\n  align-self: center;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-none {\n  border-radius: 0px;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.\\!rounded-r-none {\n  border-top-right-radius: 0px !important;\n  border-bottom-right-radius: 0px !important;\n}\n.\\!rounded-l-md {\n  border-top-left-radius: 0.375rem !important;\n  border-bottom-left-radius: 0.375rem !important;\n}\n.\\!rounded-r-md {\n  border-top-right-radius: 0.375rem !important;\n  border-bottom-right-radius: 0.375rem !important;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.border-8 {\n  border-width: 8px;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.\\!border-l-0 {\n  border-left-width: 0px !important;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-purple-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(126 34 206 / var(--tw-border-opacity));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.border-red-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(252 165 165 / var(--tw-border-opacity));\n}\n.border-red-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(239 68 68 / var(--tw-border-opacity));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-indigo-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(99 102 241 / var(--tw-border-opacity));\n}\n.\\!border-red-500 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important;\n}\n.border-r-gray-200 {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n.border-l-gray-300 {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.\\!border-l-white {\n  --tw-border-opacity: 1 !important;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n.\\!border-r-white {\n  --tw-border-opacity: 1 !important;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n.border-r-white {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.border-l-white {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.bg-purple-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(147 51 234 / var(--tw-bg-opacity));\n}\n.bg-purple-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 232 255 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-red-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.fill-white {\n  fill: #fff;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-16 {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.py-\\[6px\\] {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.pl-3 {\n  padding-left: 0.75rem;\n}\n.pr-10 {\n  padding-right: 2.5rem;\n}\n.pr-9 {\n  padding-right: 2.25rem;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-10 {\n  padding-left: 2.5rem;\n}\n.pl-7 {\n  padding-left: 1.75rem;\n}\n.pr-7 {\n  padding-right: 1.75rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.font-muli {\n  font-family: Muli, sans-serif;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-normal {\n  font-weight: 400;\n}\n.leading-5 {\n  line-height: 1.25rem;\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.text-purple-700 {\n  --tw-text-opacity: 1;\n  color: rgb(126 34 206 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.text-purple-600 {\n  --tw-text-opacity: 1;\n  color: rgb(147 51 234 / var(--tw-text-opacity));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.text-gray-200 {\n  --tw-text-opacity: 1;\n  color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-indigo-600 {\n  --tw-text-opacity: 1;\n  color: rgb(79 70 229 / var(--tw-text-opacity));\n}\n.text-gray-700\\/\\[\\.5\\] {\n  color: rgb(55 65 81 / .5);\n}\n.text-purple-500 {\n  --tw-text-opacity: 1;\n  color: rgb(168 85 247 / var(--tw-text-opacity));\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.outline-indigo-500 {\n  outline-color: #6366f1;\n}\n.outline-red-500 {\n  outline-color: #ef4444;\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-black {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.ring-opacity-5 {\n  --tw-ring-opacity: 0.05;\n}\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition {\n  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-100 {\n  transition-duration: 100ms;\n}\n.duration-75 {\n  transition-duration: 75ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.focus-within\\:z-20:focus-within {\n  z-index: 20;\n}\n.focus-within\\:z-10:focus-within {\n  z-index: 10;\n}\n.hover\\:bg-purple-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(126 34 206 / var(--tw-bg-opacity));\n}\n.hover\\:bg-purple-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 213 255 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.hover\\:text-purple-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(126 34 206 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.hover\\:text-red-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.focus\\:border-purple-500:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 85 247 / var(--tw-border-opacity));\n}\n.focus\\:border-indigo-500:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(99 102 241 / var(--tw-border-opacity));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-purple-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));\n}\n.focus\\:ring-indigo-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));\n}\n.focus\\:ring-red-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-white:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n.focus-visible\\:ring-opacity-75:focus-visible {\n  --tw-ring-opacity: 0.75;\n}\n.group:hover .group-hover\\:block {\n  display: block;\n}\n.group:hover .group-hover\\:text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.group:hover .group-hover\\:text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n@media (prefers-color-scheme: dark) {\n\n  .dark\\:text-purple-500 {\n    --tw-text-opacity: 1;\n    color: rgb(168 85 247 / var(--tw-text-opacity));\n  }\n}\n@media (min-width: 640px) {\n\n  .sm\\:text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n}\n";
+var css_248z = "/*\n! tailwindcss v3.0.21 | MIT License | https://tailwindcss.com\n*//*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: #e5e7eb; /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n*/\n\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\nEnsure the default browser behavior of the `hidden` attribute.\n*/\n\n[hidden] {\n  display: none;\n}\n\n[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  border-radius: 0px;\n  padding-top: 0.5rem;\n  padding-right: 0.75rem;\n  padding-bottom: 0.5rem;\n  padding-left: 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  border-color: #2563eb;\n}\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\ninput:-ms-input-placeholder, textarea:-ms-input-placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\ninput::placeholder,textarea::placeholder {\n  color: #6b7280;\n  opacity: 1;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-date-and-time-value {\n  min-height: 1.5em;\n}\n\nselect {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 0.5rem center;\n  background-repeat: no-repeat;\n  background-size: 1.5em 1.5em;\n  padding-right: 2.5rem;\n  -webkit-print-color-adjust: exact;\n          color-adjust: exact;\n}\n\n[multiple] {\n  background-image: initial;\n  background-position: initial;\n  background-repeat: unset;\n  background-size: initial;\n  padding-right: 0.75rem;\n  -webkit-print-color-adjust: unset;\n          color-adjust: unset;\n}\n\n[type='checkbox'],[type='radio'] {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  padding: 0;\n  -webkit-print-color-adjust: exact;\n          color-adjust: exact;\n  display: inline-block;\n  vertical-align: middle;\n  background-origin: border-box;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  flex-shrink: 0;\n  height: 1rem;\n  width: 1rem;\n  color: #2563eb;\n  background-color: #fff;\n  border-color: #6b7280;\n  border-width: 1px;\n  --tw-shadow: 0 0 #0000;\n}\n\n[type='checkbox'] {\n  border-radius: 0px;\n}\n\n[type='radio'] {\n  border-radius: 100%;\n}\n\n[type='checkbox']:focus,[type='radio']:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 2px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: #2563eb;\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\n\n[type='checkbox']:checked,[type='radio']:checked {\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\");\n}\n\n[type='radio']:checked {\n  background-image: url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\");\n}\n\n[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='checkbox']:indeterminate {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");\n  border-color: transparent;\n  background-color: currentColor;\n  background-size: 100% 100%;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {\n  border-color: transparent;\n  background-color: currentColor;\n}\n\n[type='file'] {\n  background: unset;\n  border-color: inherit;\n  border-width: 0;\n  border-radius: 0;\n  padding: 0;\n  font-size: unset;\n  line-height: inherit;\n}\n\n[type='file']:focus {\n  outline: 1px auto -webkit-focus-ring-color;\n}\n\n*, ::before, ::after {\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n.container {\n  width: 100%;\n}\n@media (min-width: 640px) {\n\n  .container {\n    max-width: 640px;\n  }\n}\n@media (min-width: 768px) {\n\n  .container {\n    max-width: 768px;\n  }\n}\n@media (min-width: 1024px) {\n\n  .container {\n    max-width: 1024px;\n  }\n}\n@media (min-width: 1280px) {\n\n  .container {\n    max-width: 1280px;\n  }\n}\n@media (min-width: 1536px) {\n\n  .container {\n    max-width: 1536px;\n  }\n}\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n.pointer-events-none {\n  pointer-events: none;\n}\n.absolute {\n  position: absolute;\n}\n.relative {\n  position: relative;\n}\n.inset-y-0 {\n  top: 0px;\n  bottom: 0px;\n}\n.right-0 {\n  right: 0px;\n}\n.bottom-0 {\n  bottom: 0px;\n}\n.bottom-8 {\n  bottom: 2rem;\n}\n.left-4 {\n  left: 1rem;\n}\n.top-8 {\n  top: 2rem;\n}\n.top-\\[10px\\] {\n  top: 10px;\n}\n.left-0 {\n  left: 0px;\n}\n.z-30 {\n  z-index: 30;\n}\n.z-10 {\n  z-index: 10;\n}\n.z-20 {\n  z-index: 20;\n}\n.m-auto {\n  margin: auto;\n}\n.mt-5 {\n  margin-top: 1.25rem;\n}\n.mt-1 {\n  margin-top: 0.25rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mr-3 {\n  margin-right: 0.75rem;\n}\n.ml-0 {\n  margin-left: 0px;\n}\n.ml-3 {\n  margin-left: 0.75rem;\n}\n.mt-10 {\n  margin-top: 2.5rem;\n}\n.mb-1 {\n  margin-bottom: 0.25rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mr-1 {\n  margin-right: 0.25rem;\n}\n.-ml-px {\n  margin-left: -1px;\n}\n.-mr-px {\n  margin-right: -1px;\n}\n.block {\n  display: block;\n}\n.inline-block {\n  display: inline-block;\n}\n.inline {\n  display: inline;\n}\n.flex {\n  display: flex;\n}\n.inline-flex {\n  display: inline-flex;\n}\n.table {\n  display: table;\n}\n.grid {\n  display: grid;\n}\n.contents {\n  display: contents;\n}\n.hidden {\n  display: none;\n}\n.h-6 {\n  height: 1.5rem;\n}\n.h-16 {\n  height: 4rem;\n}\n.h-5 {\n  height: 1.25rem;\n}\n.h-\\[38px\\] {\n  height: 38px;\n}\n.h-\\[28px\\] {\n  height: 28px;\n}\n.h-\\[18px\\] {\n  height: 18px;\n}\n.h-\\[34px\\] {\n  height: 34px;\n}\n.h-\\[24px\\] {\n  height: 24px;\n}\n.h-\\[14px\\] {\n  height: 14px;\n}\n.h-\\[500px\\] {\n  height: 500px;\n}\n.h-\\[2px\\] {\n  height: 2px;\n}\n.h-4 {\n  height: 1rem;\n}\n.h-auto {\n  height: auto;\n}\n.h-7 {\n  height: 1.75rem;\n}\n.max-h-60 {\n  max-height: 15rem;\n}\n.w-6 {\n  width: 1.5rem;\n}\n.w-16 {\n  width: 4rem;\n}\n.w-5 {\n  width: 1.25rem;\n}\n.w-full {\n  width: 100%;\n}\n.w-56 {\n  width: 14rem;\n}\n.w-\\[74px\\] {\n  width: 74px;\n}\n.w-\\[64px\\] {\n  width: 64px;\n}\n.w-\\[34px\\] {\n  width: 34px;\n}\n.w-\\[24px\\] {\n  width: 24px;\n}\n.w-\\[14px\\] {\n  width: 14px;\n}\n.w-\\[calc\\(100\\%-16px\\)\\] {\n  width: calc(100% - 16px);\n}\n.w-4 {\n  width: 1rem;\n}\n.min-w-\\[320px\\] {\n  min-width: 320px;\n}\n.flex-shrink-0 {\n  flex-shrink: 0;\n}\n.shrink-0 {\n  flex-shrink: 0;\n}\n.flex-grow {\n  flex-grow: 1;\n}\n.grow {\n  flex-grow: 1;\n}\n.origin-bottom-right {\n  transform-origin: bottom right;\n}\n.translate-x-9 {\n  --tw-translate-x: 2.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-0 {\n  --tw-translate-x: 0px;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.translate-x-4 {\n  --tw-translate-x: 1rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-95 {\n  --tw-scale-x: .95;\n  --tw-scale-y: .95;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.transform {\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@-webkit-keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spin {\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n.animate-spin {\n  -webkit-animation: spin 1s linear infinite;\n          animation: spin 1s linear infinite;\n}\n.cursor-auto {\n  cursor: auto;\n}\n.cursor-default {\n  cursor: default;\n}\n.cursor-pointer {\n  cursor: pointer;\n}\n.select-none {\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.grid-flow-row {\n  grid-auto-flow: row;\n}\n.flex-row {\n  flex-direction: row;\n}\n.flex-col {\n  flex-direction: column;\n}\n.items-start {\n  align-items: flex-start;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.gap-4 {\n  gap: 1rem;\n}\n.gap-3 {\n  gap: 0.75rem;\n}\n.space-x-2 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.5rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.space-x-3 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.75rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));\n}\n.divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-opacity: 1;\n  border-color: rgb(243 244 246 / var(--tw-divide-opacity));\n}\n.self-end {\n  align-self: flex-end;\n}\n.self-center {\n  align-self: center;\n}\n.overflow-auto {\n  overflow: auto;\n}\n.overflow-hidden {\n  overflow: hidden;\n}\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.rounded-full {\n  border-radius: 9999px;\n}\n.rounded-md {\n  border-radius: 0.375rem;\n}\n.rounded {\n  border-radius: 0.25rem;\n}\n.rounded-none {\n  border-radius: 0px;\n}\n.rounded-r-md {\n  border-top-right-radius: 0.375rem;\n  border-bottom-right-radius: 0.375rem;\n}\n.\\!rounded-r-none {\n  border-top-right-radius: 0px !important;\n  border-bottom-right-radius: 0px !important;\n}\n.\\!rounded-l-md {\n  border-top-left-radius: 0.375rem !important;\n  border-bottom-left-radius: 0.375rem !important;\n}\n.\\!rounded-r-md {\n  border-top-right-radius: 0.375rem !important;\n  border-bottom-right-radius: 0.375rem !important;\n}\n.rounded-l-md {\n  border-top-left-radius: 0.375rem;\n  border-bottom-left-radius: 0.375rem;\n}\n.border-8 {\n  border-width: 8px;\n}\n.border {\n  border-width: 1px;\n}\n.border-2 {\n  border-width: 2px;\n}\n.\\!border-l-0 {\n  border-left-width: 0px !important;\n}\n.border-l {\n  border-left-width: 1px;\n}\n.border-purple-700 {\n  --tw-border-opacity: 1;\n  border-color: rgb(126 34 206 / var(--tw-border-opacity));\n}\n.border-gray-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.border-red-300 {\n  --tw-border-opacity: 1;\n  border-color: rgb(252 165 165 / var(--tw-border-opacity));\n}\n.border-red-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(239 68 68 / var(--tw-border-opacity));\n}\n.border-transparent {\n  border-color: transparent;\n}\n.border-purple-500 {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 85 247 / var(--tw-border-opacity));\n}\n.\\!border-red-500 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgb(239 68 68 / var(--tw-border-opacity)) !important;\n}\n.border-r-gray-200 {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(229 231 235 / var(--tw-border-opacity));\n}\n.border-l-gray-300 {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(209 213 219 / var(--tw-border-opacity));\n}\n.\\!border-l-white {\n  --tw-border-opacity: 1 !important;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n.\\!border-r-white {\n  --tw-border-opacity: 1 !important;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;\n}\n.border-r-white {\n  --tw-border-opacity: 1;\n  border-right-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.border-l-white {\n  --tw-border-opacity: 1;\n  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));\n}\n.bg-purple-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(147 51 234 / var(--tw-bg-opacity));\n}\n.bg-purple-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 232 255 / var(--tw-bg-opacity));\n}\n.bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-red-600 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(220 38 38 / var(--tw-bg-opacity));\n}\n.bg-gray-100 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.bg-gray-200 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(229 231 235 / var(--tw-bg-opacity));\n}\n.bg-purple-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(168 85 247 / var(--tw-bg-opacity));\n}\n.bg-gray-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.fill-white {\n  fill: #fff;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.px-5 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.py-16 {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n.px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.py-\\[6px\\] {\n  padding-top: 6px;\n  padding-bottom: 6px;\n}\n.pl-3 {\n  padding-left: 0.75rem;\n}\n.pr-10 {\n  padding-right: 2.5rem;\n}\n.pr-9 {\n  padding-right: 2.25rem;\n}\n.pr-4 {\n  padding-right: 1rem;\n}\n.pl-0 {\n  padding-left: 0px;\n}\n.pl-2 {\n  padding-left: 0.5rem;\n}\n.pl-10 {\n  padding-left: 2.5rem;\n}\n.pl-7 {\n  padding-left: 1.75rem;\n}\n.pr-7 {\n  padding-right: 1.75rem;\n}\n.text-left {\n  text-align: left;\n}\n.text-center {\n  text-align: center;\n}\n.align-middle {\n  vertical-align: middle;\n}\n.font-muli {\n  font-family: Muli, sans-serif;\n}\n.text-lg {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n}\n.text-base {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n.text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.font-medium {\n  font-weight: 500;\n}\n.font-semibold {\n  font-weight: 600;\n}\n.font-normal {\n  font-weight: 400;\n}\n.leading-5 {\n  line-height: 1.25rem;\n}\n.text-gray-600 {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.text-purple-700 {\n  --tw-text-opacity: 1;\n  color: rgb(126 34 206 / var(--tw-text-opacity));\n}\n.text-gray-700 {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.text-gray-400 {\n  --tw-text-opacity: 1;\n  color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.text-gray-900 {\n  --tw-text-opacity: 1;\n  color: rgb(17 24 39 / var(--tw-text-opacity));\n}\n.text-purple-600 {\n  --tw-text-opacity: 1;\n  color: rgb(147 51 234 / var(--tw-text-opacity));\n}\n.text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.text-gray-200 {\n  --tw-text-opacity: 1;\n  color: rgb(229 231 235 / var(--tw-text-opacity));\n}\n.text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.text-gray-700\\/\\[\\.5\\] {\n  color: rgb(55 65 81 / .5);\n}\n.text-purple-500 {\n  --tw-text-opacity: 1;\n  color: rgb(168 85 247 / var(--tw-text-opacity));\n}\n.opacity-50 {\n  opacity: 0.5;\n}\n.opacity-0 {\n  opacity: 0;\n}\n.opacity-100 {\n  opacity: 1;\n}\n.shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.shadow-none {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.outline {\n  outline-style: solid;\n}\n.outline-purple-500 {\n  outline-color: #a855f7;\n}\n.\\!outline-red-500 {\n  outline-color: #ef4444 !important;\n}\n.outline-red-500 {\n  outline-color: #ef4444;\n}\n.ring-1 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-0 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.ring-black {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.ring-opacity-5 {\n  --tw-ring-opacity: 0.05;\n}\n.blur {\n  --tw-blur: blur(8px);\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.filter {\n  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition {\n  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.transition-colors {\n  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.duration-100 {\n  transition-duration: 100ms;\n}\n.duration-75 {\n  transition-duration: 75ms;\n}\n.duration-200 {\n  transition-duration: 200ms;\n}\n.ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.focus-within\\:z-20:focus-within {\n  z-index: 20;\n}\n.focus-within\\:z-10:focus-within {\n  z-index: 10;\n}\n.hover\\:bg-purple-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(126 34 206 / var(--tw-bg-opacity));\n}\n.hover\\:bg-purple-200:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(233 213 255 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(249 250 251 / var(--tw-bg-opacity));\n}\n.hover\\:bg-red-700:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(185 28 28 / var(--tw-bg-opacity));\n}\n.hover\\:bg-gray-100:hover {\n  --tw-bg-opacity: 1;\n  background-color: rgb(243 244 246 / var(--tw-bg-opacity));\n}\n.hover\\:text-purple-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(126 34 206 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-700:hover {\n  --tw-text-opacity: 1;\n  color: rgb(55 65 81 / var(--tw-text-opacity));\n}\n.hover\\:text-white:hover {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.hover\\:text-gray-600:hover {\n  --tw-text-opacity: 1;\n  color: rgb(75 85 99 / var(--tw-text-opacity));\n}\n.hover\\:text-red-500:hover {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.focus\\:border-purple-500:focus {\n  --tw-border-opacity: 1;\n  border-color: rgb(168 85 247 / var(--tw-border-opacity));\n}\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.focus\\:ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ring-purple-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));\n}\n.focus\\:ring-red-500:focus {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));\n}\n.focus-visible\\:ring-2:focus-visible {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.focus-visible\\:ring-white:focus-visible {\n  --tw-ring-opacity: 1;\n  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));\n}\n.focus-visible\\:ring-opacity-75:focus-visible {\n  --tw-ring-opacity: 0.75;\n}\n.group:hover .group-hover\\:block {\n  display: block;\n}\n.group:hover .group-hover\\:text-gray-500 {\n  --tw-text-opacity: 1;\n  color: rgb(107 114 128 / var(--tw-text-opacity));\n}\n.group:hover .group-hover\\:text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n@media (prefers-color-scheme: dark) {\n\n  .dark\\:text-purple-500 {\n    --tw-text-opacity: 1;\n    color: rgb(168 85 247 / var(--tw-text-opacity));\n  }\n}\n@media (min-width: 640px) {\n\n  .sm\\:text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n  }\n}\n";
 styleInject(css_248z);
 
 function Loader(_a) {
@@ -7088,9 +7089,9 @@ function classNames() {
     }
     return classes.filter(Boolean).join(' ');
 }
-/** Comment */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 var Combobox = function (_a) {
-    var label = _a.label, items = _a.items, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
+    var label = _a.label, items = _a.items, displayProperty = _a.displayProperty, keyProperty = _a.keyProperty, onChange = _a.onChange, placeholder = _a.placeholder, isDisabled = _a.isDisabled, isError = _a.isError, isRequired = _a.isRequired, id = _a.id;
     var _b = useState(''), query = _b[0], setQuery = _b[1];
     var _c = useState(), selectedItem = _c[0], setSelectedItem = _c[1];
     useEffect(function () {
@@ -7099,7 +7100,7 @@ var Combobox = function (_a) {
     var filteredItems = query === ''
         ? items
         : items.filter(function (item) {
-            return item.value.toLowerCase().includes(query.toLowerCase());
+            return "".concat(item[displayProperty]).toLowerCase().includes(query.toLowerCase());
         });
     var inputStyles = cn$1('w-full rounded-md border bg-white py-2 pl-3 pr-10 shadow-sm sm:text-sm', 'focus:border-purple-500 focus:outline-none focus:ring-1 focus:ring-purple-500', { 'border-red-500': isError }, { 'border-gray-300': !isError });
     var labelStyles = cn$1('block text-sm font-medium text-gray-700');
@@ -7109,16 +7110,16 @@ var Combobox = function (_a) {
         label && (React__default.createElement(Na.Label, { className: labelStyles },
             React__default.createElement(InputLabel, { isPlaceholder: true, isActive: true, label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled }))),
         React__default.createElement("div", { className: "relative" },
-            React__default.createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return item.value; }, placeholder: placeholder }),
+            React__default.createElement(Na.Input, { className: inputStyles, onChange: function (event) { return setQuery(event.target.value); }, displayValue: function (item) { return "".concat(item[displayProperty]); }, placeholder: placeholder }),
             React__default.createElement(Na.Button, { className: buttonStyles },
                 React__default.createElement(DynamicIcons, { icon: "SelectorIcon", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" })),
-            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default.createElement(Na.Option, { key: index, value: item, className: function (_a) {
+            filteredItems.length > 0 && (React__default.createElement(Na.Options, { className: optionStyles }, filteredItems.map(function (item, index) { return (React__default.createElement(Na.Option, { key: "".concat(item[keyProperty], "-").concat(index), value: item, className: function (_a) {
                     var active = _a.active;
                     return classNames('relative cursor-default select-none py-2 pl-3 pr-9', active ? 'bg-purple-600 text-white' : 'text-gray-900');
                 } }, function (_a) {
                 var active = _a.active, selected = _a.selected;
                 return (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, item.value),
+                    React__default.createElement("span", { className: classNames('block truncate', selected ? 'font-semibold' : '') }, "".concat(item[displayProperty])),
                     selected && (React__default.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-purple-600') },
                         React__default.createElement(DynamicIcons, { icon: "CheckIcon", className: "h-5 w-5", "aria-hidden": "true" })))));
             })); }))))));
@@ -7199,430 +7200,1870 @@ function __spreadArray$1(to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 }
 
-let emptyImage;
-function getEmptyImage() {
-    if (!emptyImage) {
-        emptyImage = new Image();
-        emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-    }
-    return emptyImage;
-}
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
-
-function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classPrivateFieldGet$1(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor$1(receiver, privateMap, "get"); return _classApplyDescriptorGet$1(receiver, descriptor); }
-
-function _classApplyDescriptorGet$1(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
-
-function _classPrivateFieldSet$1(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor$1(receiver, privateMap, "set"); _classApplyDescriptorSet$1(receiver, descriptor, value); return value; }
-
-function _classExtractFieldDescriptor$1(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
-
-function _classApplyDescriptorSet$1(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+/**
+ * Create the React Context
+ */ const DndContext = createContext({
+    dragDropManager: undefined
+});
 
-var _previews$1 = new WeakMap();
+/**
+ * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
+ *
+ * Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
+ * during build.
+ * @param {number} code
+ */
+function formatProdErrorMessage(code) {
+  return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
+}
 
-var PreviewListImpl =
-/*private*/
-function PreviewListImpl() {
-  var _this = this;
+// Inlined version of the `symbol-observable` polyfill
+var $$observable = (function () {
+  return typeof Symbol === 'function' && Symbol.observable || '@@observable';
+})();
 
-  _classCallCheck$1(this, PreviewListImpl);
+/**
+ * These are private action types reserved by Redux.
+ * For any unknown actions, you must return the current state.
+ * If the current state is undefined, you must return the initial state.
+ * Do not reference these action types directly in your code.
+ */
+var randomString = function randomString() {
+  return Math.random().toString(36).substring(7).split('').join('.');
+};
 
-  _previews$1.set(this, {
-    writable: true,
-    value: void 0
-  });
+var ActionTypes = {
+  INIT: "@@redux/INIT" + randomString(),
+  REPLACE: "@@redux/REPLACE" + randomString(),
+  PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
+    return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
+  }
+};
 
-  _defineProperty$1(this, "register", function (preview) {
-    _classPrivateFieldGet$1(_this, _previews$1).push(preview);
-  });
+/**
+ * @param {any} obj The object to inspect.
+ * @returns {boolean} True if the argument appears to be a plain object.
+ */
+function isPlainObject(obj) {
+  if (typeof obj !== 'object' || obj === null) return false;
+  var proto = obj;
 
-  _defineProperty$1(this, "unregister", function (preview) {
-    var index;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
 
-    while ((index = _classPrivateFieldGet$1(_this, _previews$1).indexOf(preview)) !== -1) {
-      _classPrivateFieldGet$1(_this, _previews$1).splice(index, 1);
-    }
-  });
+  return Object.getPrototypeOf(obj) === proto;
+}
 
-  _defineProperty$1(this, "backendChanged", function (backend) {
-    var _iterator = _createForOfIteratorHelper(_classPrivateFieldGet$1(_this, _previews$1)),
-        _step;
+// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of
+function miniKindOf(val) {
+  if (val === void 0) return 'undefined';
+  if (val === null) return 'null';
+  var type = typeof val;
 
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var preview = _step.value;
-        preview.backendChanged(backend);
+  switch (type) {
+    case 'boolean':
+    case 'string':
+    case 'number':
+    case 'symbol':
+    case 'function':
+      {
+        return type;
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  });
-
-  _classPrivateFieldSet$1(this, _previews$1, []);
-};
-
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+  }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+  if (Array.isArray(val)) return 'array';
+  if (isDate(val)) return 'date';
+  if (isError(val)) return 'error';
+  var constructorName = ctorName(val);
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+  switch (constructorName) {
+    case 'Symbol':
+    case 'Promise':
+    case 'WeakMap':
+    case 'WeakSet':
+    case 'Map':
+    case 'Set':
+      return constructorName;
+  } // other
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
+}
 
-function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+function ctorName(val) {
+  return typeof val.constructor === 'function' ? val.constructor.name : null;
+}
 
-function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+function isError(val) {
+  return val instanceof Error || typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number';
+}
 
-function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+function isDate(val) {
+  if (val instanceof Date) return true;
+  return typeof val.toDateString === 'function' && typeof val.getDate === 'function' && typeof val.setDate === 'function';
+}
 
-function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+function kindOf(val) {
+  var typeOfVal = typeof val;
 
-function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+  if (process.env.NODE_ENV !== 'production') {
+    typeOfVal = miniKindOf(val);
+  }
 
-var _current = new WeakMap();
+  return typeOfVal;
+}
 
-var _previews = new WeakMap();
+/**
+ * @deprecated
+ *
+ * **We recommend using the `configureStore` method
+ * of the `@reduxjs/toolkit` package**, which replaces `createStore`.
+ *
+ * Redux Toolkit is our recommended approach for writing Redux logic today,
+ * including store setup, reducers, data fetching, and more.
+ *
+ * **For more details, please read this Redux docs page:**
+ * **https://redux.js.org/introduction/why-rtk-is-redux-today**
+ *
+ * `configureStore` from Redux Toolkit is an improved version of `createStore` that
+ * simplifies setup and helps avoid common bugs.
+ *
+ * You should not be using the `redux` core package by itself today, except for learning purposes.
+ * The `createStore` method from the core `redux` package will not be removed, but we encourage
+ * all users to migrate to using Redux Toolkit for all Redux code.
+ *
+ * If you want to use `createStore` without this visual deprecation warning, use
+ * the `legacy_createStore` import instead:
+ *
+ * `import { legacy_createStore as createStore} from 'redux'`
+ *
+ */
 
-var _backends = new WeakMap();
+function createStore(reducer, preloadedState, enhancer) {
+  var _ref2;
 
-var _backendsList = new WeakMap();
+  if (typeof preloadedState === 'function' && typeof enhancer === 'function' || typeof enhancer === 'function' && typeof arguments[3] === 'function') {
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(0) : 'It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.');
+  }
 
-var _nodes = new WeakMap();
+  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
+    enhancer = preloadedState;
+    preloadedState = undefined;
+  }
 
-var _createBackend = new WeakMap();
+  if (typeof enhancer !== 'undefined') {
+    if (typeof enhancer !== 'function') {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(1) : "Expected the enhancer to be a function. Instead, received: '" + kindOf(enhancer) + "'");
+    }
 
-var _addEventListeners = new WeakMap();
+    return enhancer(createStore)(reducer, preloadedState);
+  }
 
-var _removeEventListeners = new WeakMap();
+  if (typeof reducer !== 'function') {
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(2) : "Expected the root reducer to be a function. Instead, received: '" + kindOf(reducer) + "'");
+  }
 
-var _backendSwitcher = new WeakMap();
+  var currentReducer = reducer;
+  var currentState = preloadedState;
+  var currentListeners = [];
+  var nextListeners = currentListeners;
+  var isDispatching = false;
+  /**
+   * This makes a shallow copy of currentListeners so we can use
+   * nextListeners as a temporary list while dispatching.
+   *
+   * This prevents any bugs around consumers calling
+   * subscribe/unsubscribe in the middle of a dispatch.
+   */
+
+  function ensureCanMutateNextListeners() {
+    if (nextListeners === currentListeners) {
+      nextListeners = currentListeners.slice();
+    }
+  }
+  /**
+   * Reads the state tree managed by the store.
+   *
+   * @returns {any} The current state tree of your application.
+   */
 
-var _callBackend = new WeakMap();
 
-var _connectBackend = new WeakMap();
+  function getState() {
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(3) : 'You may not call store.getState() while the reducer is executing. ' + 'The reducer has already received the state as an argument. ' + 'Pass it down from the top reducer instead of reading it from the store.');
+    }
 
-var MultiBackendImpl =
-/*private*/
+    return currentState;
+  }
+  /**
+   * Adds a change listener. It will be called any time an action is dispatched,
+   * and some part of the state tree may potentially have changed. You may then
+   * call `getState()` to read the current state tree inside the callback.
+   *
+   * You may call `dispatch()` from a change listener, with the following
+   * caveats:
+   *
+   * 1. The subscriptions are snapshotted just before every `dispatch()` call.
+   * If you subscribe or unsubscribe while the listeners are being invoked, this
+   * will not have any effect on the `dispatch()` that is currently in progress.
+   * However, the next `dispatch()` call, whether nested or not, will use a more
+   * recent snapshot of the subscription list.
+   *
+   * 2. The listener should not expect to see all state changes, as the state
+   * might have been updated multiple times during a nested `dispatch()` before
+   * the listener is called. It is, however, guaranteed that all subscribers
+   * registered before the `dispatch()` started will be called with the latest
+   * state by the time it exits.
+   *
+   * @param {Function} listener A callback to be invoked on every dispatch.
+   * @returns {Function} A function to remove this change listener.
+   */
+
+
+  function subscribe(listener) {
+    if (typeof listener !== 'function') {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(4) : "Expected the listener to be a function. Instead, received: '" + kindOf(listener) + "'");
+    }
+
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(5) : 'You may not call store.subscribe() while the reducer is executing. ' + 'If you would like to be notified after the store has been updated, subscribe from a ' + 'component and invoke store.getState() in the callback to access the latest state. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
+    }
+
+    var isSubscribed = true;
+    ensureCanMutateNextListeners();
+    nextListeners.push(listener);
+    return function unsubscribe() {
+      if (!isSubscribed) {
+        return;
+      }
 
-/*private*/
+      if (isDispatching) {
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(6) : 'You may not unsubscribe from a store listener while the reducer is executing. ' + 'See https://redux.js.org/api/store#subscribelistener for more details.');
+      }
 
-/*private*/
+      isSubscribed = false;
+      ensureCanMutateNextListeners();
+      var index = nextListeners.indexOf(listener);
+      nextListeners.splice(index, 1);
+      currentListeners = null;
+    };
+  }
+  /**
+   * Dispatches an action. It is the only way to trigger a state change.
+   *
+   * The `reducer` function, used to create the store, will be called with the
+   * current state tree and the given `action`. Its return value will
+   * be considered the **next** state of the tree, and the change listeners
+   * will be notified.
+   *
+   * The base implementation only supports plain object actions. If you want to
+   * dispatch a Promise, an Observable, a thunk, or something else, you need to
+   * wrap your store creating function into the corresponding middleware. For
+   * example, see the documentation for the `redux-thunk` package. Even the
+   * middleware will eventually dispatch plain object actions using this method.
+   *
+   * @param {Object} action A plain object representing “what changed”. It is
+   * a good idea to keep actions serializable so you can record and replay user
+   * sessions, or use the time travelling `redux-devtools`. An action must have
+   * a `type` property which may not be `undefined`. It is a good idea to use
+   * string constants for action types.
+   *
+   * @returns {Object} For convenience, the same action object you dispatched.
+   *
+   * Note that, if you use a custom middleware, it may wrap `dispatch()` to
+   * return something else (for example, a Promise you can await).
+   */
+
+
+  function dispatch(action) {
+    if (!isPlainObject(action)) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(7) : "Actions must be plain objects. Instead, the actual type was: '" + kindOf(action) + "'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.");
+    }
+
+    if (typeof action.type === 'undefined') {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
+    }
+
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(9) : 'Reducers may not dispatch actions.');
+    }
 
-/*private*/
+    try {
+      isDispatching = true;
+      currentState = currentReducer(currentState, action);
+    } finally {
+      isDispatching = false;
+    }
 
-/*private*/
-function MultiBackendImpl(_manager, _context, _options) {
-  var _this = this;
+    var listeners = currentListeners = nextListeners;
 
-  _classCallCheck(this, MultiBackendImpl);
+    for (var i = 0; i < listeners.length; i++) {
+      var listener = listeners[i];
+      listener();
+    }
 
-  _current.set(this, {
-    writable: true,
-    value: void 0
-  });
+    return action;
+  }
+  /**
+   * Replaces the reducer currently used by the store to calculate the state.
+   *
+   * You might need this if your app implements code splitting and you want to
+   * load some of the reducers dynamically. You might also need this if you
+   * implement a hot reloading mechanism for Redux.
+   *
+   * @param {Function} nextReducer The reducer for the store to use instead.
+   * @returns {void}
+   */
+
+
+  function replaceReducer(nextReducer) {
+    if (typeof nextReducer !== 'function') {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(10) : "Expected the nextReducer to be a function. Instead, received: '" + kindOf(nextReducer));
+    }
+
+    currentReducer = nextReducer; // This action has a similiar effect to ActionTypes.INIT.
+    // Any reducers that existed in both the new and old rootReducer
+    // will receive the previous state. This effectively populates
+    // the new state tree with any relevant data from the old one.
+
+    dispatch({
+      type: ActionTypes.REPLACE
+    });
+  }
+  /**
+   * Interoperability point for observable/reactive libraries.
+   * @returns {observable} A minimal observable of state changes.
+   * For more information, see the observable proposal:
+   * https://github.com/tc39/proposal-observable
+   */
+
+
+  function observable() {
+    var _ref;
+
+    var outerSubscribe = subscribe;
+    return _ref = {
+      /**
+       * The minimal observable subscription method.
+       * @param {Object} observer Any object that can be used as an observer.
+       * The observer object should have a `next` method.
+       * @returns {subscription} An object with an `unsubscribe` method that can
+       * be used to unsubscribe the observable from the store, and prevent further
+       * emission of values from the observable.
+       */
+      subscribe: function subscribe(observer) {
+        if (typeof observer !== 'object' || observer === null) {
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(11) : "Expected the observer to be an object. Instead, received: '" + kindOf(observer) + "'");
+        }
 
-  _previews.set(this, {
-    writable: true,
-    value: void 0
-  });
+        function observeState() {
+          if (observer.next) {
+            observer.next(getState());
+          }
+        }
 
-  _backends.set(this, {
-    writable: true,
-    value: void 0
-  });
+        observeState();
+        var unsubscribe = outerSubscribe(observeState);
+        return {
+          unsubscribe: unsubscribe
+        };
+      }
+    }, _ref[$$observable] = function () {
+      return this;
+    }, _ref;
+  } // When a store is created, an "INIT" action is dispatched so that every
+  // reducer returns their initial state. This effectively populates
+  // the initial state tree.
 
-  _backendsList.set(this, {
-    writable: true,
-    value: void 0
-  });
 
-  _nodes.set(this, {
-    writable: true,
-    value: void 0
+  dispatch({
+    type: ActionTypes.INIT
   });
+  return _ref2 = {
+    dispatch: dispatch,
+    subscribe: subscribe,
+    getState: getState,
+    replaceReducer: replaceReducer
+  }, _ref2[$$observable] = observable, _ref2;
+}
 
-  _createBackend.set(this, {
-    writable: true,
-    value: function value(manager, context, backend) {
-      var _backend$preview, _backend$skipDispatch;
+/**
+ * Prints a warning in the console if it exists.
+ *
+ * @param {String} message The warning message.
+ * @returns {void}
+ */
+function warning(message) {
+  /* eslint-disable no-console */
+  if (typeof console !== 'undefined' && typeof console.error === 'function') {
+    console.error(message);
+  }
+  /* eslint-enable no-console */
 
-      if (!backend.backend) {
-        throw new Error("You must specify a 'backend' property in your Backend entry: ".concat(JSON.stringify(backend)));
-      }
 
-      var instance = backend.backend(manager, context, backend.options);
-      var id = backend.id; // Try to infer an `id` if one doesn't exist
+  try {
+    // This error was thrown as a convenience so that if you enable
+    // "break on all exceptions" in your console,
+    // it would pause the execution at this line.
+    throw new Error(message);
+  } catch (e) {} // eslint-disable-line no-empty
 
-      var inferName = !backend.id && instance && instance.constructor;
+}
 
-      if (inferName) {
-        id = instance.constructor.name;
-      }
+/*
+ * This is a dummy function to check if the function name has been altered by minification.
+ * If the function has been minified and NODE_ENV !== 'production', warn the user.
+ */
 
-      if (!id) {
-        throw new Error("You must specify an 'id' property in your Backend entry: ".concat(JSON.stringify(backend), "\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-5xx"));
-      } else if (inferName) {
-        console.warn( // eslint-disable-line no-console
-        "Deprecation notice: You are using a pipeline which doesn't include backends' 'id'.\n        This might be unsupported in the future, please specify 'id' explicitely for every backend.");
-      }
+function isCrushed() {}
 
-      if (_classPrivateFieldGet(_this, _backends)[id]) {
-        throw new Error("You must specify a unique 'id' property in your Backend entry:\n        ".concat(JSON.stringify(backend), " (conflicts with: ").concat(JSON.stringify(_classPrivateFieldGet(_this, _backends)[id]), ")"));
-      }
+if (process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed') {
+  warning('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
+}
 
-      return {
-        id: id,
-        instance: instance,
-        preview: (_backend$preview = backend.preview) !== null && _backend$preview !== void 0 ? _backend$preview : false,
-        transition: backend.transition,
-        skipDispatchOnTransition: (_backend$skipDispatch = backend.skipDispatchOnTransition) !== null && _backend$skipDispatch !== void 0 ? _backend$skipDispatch : false
-      };
+/**
+ * Use invariant() to assert state which your program assumes to be true.
+ *
+ * Provide sprintf-style format (only %s is supported) and arguments
+ * to provide information about what broke and what you were
+ * expecting.
+ *
+ * The invariant message will be stripped in production, but the invariant
+ * will remain to ensure logic does not differ in production.
+ */ function invariant(condition, format, ...args) {
+    if (isProduction()) {
+        if (format === undefined) {
+            throw new Error('invariant requires an error message argument');
+        }
     }
-  });
-
-  _defineProperty(this, "setup", function () {
-    if (typeof window === 'undefined') {
-      return;
+    if (!condition) {
+        let error;
+        if (format === undefined) {
+            error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+        } else {
+            let argIndex = 0;
+            error = new Error(format.replace(/%s/g, function() {
+                return args[argIndex++];
+            }));
+            error.name = 'Invariant Violation';
+        }
+        error.framesToPop = 1 // we don't care about invariant's own frame
+        ;
+        throw error;
     }
+}
+function isProduction() {
+    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
+}
 
-    if (MultiBackendImpl.isSetUp) {
-      throw new Error('Cannot have two MultiBackends at the same time.');
-    }
-
-    MultiBackendImpl.isSetUp = true;
+// cheap lodash replacements
+/**
+ * drop-in replacement for _.get
+ * @param obj
+ * @param path
+ * @param defaultValue
+ */ function get(obj, path, defaultValue) {
+    return path.split('.').reduce((a, c)=>a && a[c] ? a[c] : defaultValue || null
+    , obj);
+}
+/**
+ * drop-in replacement for _.without
+ */ function without$1(items, item) {
+    return items.filter((i)=>i !== item
+    );
+}
+/**
+ * drop-in replacement for _.isString
+ * @param input
+ */ function isObject(input) {
+    return typeof input === 'object';
+}
+/**
+ * replacement for _.xor
+ * @param itemsA
+ * @param itemsB
+ */ function xor(itemsA, itemsB) {
+    const map = new Map();
+    const insertItem = (item)=>{
+        map.set(item, map.has(item) ? map.get(item) + 1 : 1);
+    };
+    itemsA.forEach(insertItem);
+    itemsB.forEach(insertItem);
+    const result = [];
+    map.forEach((count, key)=>{
+        if (count === 1) {
+            result.push(key);
+        }
+    });
+    return result;
+}
+/**
+ * replacement for _.intersection
+ * @param itemsA
+ * @param itemsB
+ */ function intersection(itemsA, itemsB) {
+    return itemsA.filter((t)=>itemsB.indexOf(t) > -1
+    );
+}
 
-    _classPrivateFieldGet(_this, _addEventListeners).call(_this, window);
+const INIT_COORDS = 'dnd-core/INIT_COORDS';
+const BEGIN_DRAG = 'dnd-core/BEGIN_DRAG';
+const PUBLISH_DRAG_SOURCE = 'dnd-core/PUBLISH_DRAG_SOURCE';
+const HOVER = 'dnd-core/HOVER';
+const DROP = 'dnd-core/DROP';
+const END_DRAG = 'dnd-core/END_DRAG';
 
-    _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.setup();
-  });
+function setClientOffset(clientOffset, sourceClientOffset) {
+    return {
+        type: INIT_COORDS,
+        payload: {
+            sourceClientOffset: sourceClientOffset || null,
+            clientOffset: clientOffset || null
+        }
+    };
+}
 
-  _defineProperty(this, "teardown", function () {
-    if (typeof window === 'undefined') {
-      return;
+const ResetCoordinatesAction = {
+    type: INIT_COORDS,
+    payload: {
+        clientOffset: null,
+        sourceClientOffset: null
     }
-
-    MultiBackendImpl.isSetUp = false;
-
-    _classPrivateFieldGet(_this, _removeEventListeners).call(_this, window);
-
-    _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.teardown();
-  });
-
-  _defineProperty(this, "connectDragSource", function (sourceId, node, options) {
-    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDragSource', sourceId, node, options);
-  });
-
-  _defineProperty(this, "connectDragPreview", function (sourceId, node, options) {
-    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDragPreview', sourceId, node, options);
-  });
-
-  _defineProperty(this, "connectDropTarget", function (sourceId, node, options) {
-    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDropTarget', sourceId, node, options);
-  });
-
-  _defineProperty(this, "profile", function () {
-    return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.profile();
-  });
-
-  _defineProperty(this, "previewEnabled", function () {
-    return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].preview;
-  });
-
-  _defineProperty(this, "previewsList", function () {
-    return _classPrivateFieldGet(_this, _previews);
-  });
-
-  _defineProperty(this, "backendsList", function () {
-    return _classPrivateFieldGet(_this, _backendsList);
-  });
-
-  _addEventListeners.set(this, {
-    writable: true,
-    value: function value(target) {
-      _classPrivateFieldGet(_this, _backendsList).forEach(function (backend) {
-        if (backend.transition) {
-          target.addEventListener(backend.transition.event, _classPrivateFieldGet(_this, _backendSwitcher));
+};
+function createBeginDrag(manager) {
+    return function beginDrag(sourceIds = [], options = {
+        publishSource: true
+    }) {
+        const { publishSource =true , clientOffset , getSourceClientOffset ,  } = options;
+        const monitor = manager.getMonitor();
+        const registry = manager.getRegistry();
+        // Initialize the coordinates using the client offset
+        manager.dispatch(setClientOffset(clientOffset));
+        verifyInvariants$1(sourceIds, monitor, registry);
+        // Get the draggable source
+        const sourceId = getDraggableSource(sourceIds, monitor);
+        if (sourceId == null) {
+            manager.dispatch(ResetCoordinatesAction);
+            return;
         }
-      });
-    }
-  });
-
-  _removeEventListeners.set(this, {
-    writable: true,
-    value: function value(target) {
-      _classPrivateFieldGet(_this, _backendsList).forEach(function (backend) {
-        if (backend.transition) {
-          target.removeEventListener(backend.transition.event, _classPrivateFieldGet(_this, _backendSwitcher));
+        // Get the source client offset
+        let sourceClientOffset = null;
+        if (clientOffset) {
+            if (!getSourceClientOffset) {
+                throw new Error('getSourceClientOffset must be defined');
+            }
+            verifyGetSourceClientOffsetIsFunction(getSourceClientOffset);
+            sourceClientOffset = getSourceClientOffset(sourceId);
         }
-      });
-    }
-  });
-
-  _backendSwitcher.set(this, {
-    writable: true,
-    value: function value(event) {
-      var oldBackend = _classPrivateFieldGet(_this, _current);
-
-      _classPrivateFieldGet(_this, _backendsList).some(function (backend) {
-        if (backend.id !== _classPrivateFieldGet(_this, _current) && backend.transition && backend.transition.check(event)) {
-          _classPrivateFieldSet(_this, _current, backend.id);
-
-          return true;
+        // Initialize the full coordinates
+        manager.dispatch(setClientOffset(clientOffset, sourceClientOffset));
+        const source = registry.getSource(sourceId);
+        const item = source.beginDrag(monitor, sourceId);
+        // If source.beginDrag returns null, this is an indicator to cancel the drag
+        if (item == null) {
+            return undefined;
         }
+        verifyItemIsObject(item);
+        registry.pinSource(sourceId);
+        const itemType = registry.getSourceType(sourceId);
+        return {
+            type: BEGIN_DRAG,
+            payload: {
+                itemType,
+                item,
+                sourceId,
+                clientOffset: clientOffset || null,
+                sourceClientOffset: sourceClientOffset || null,
+                isSourcePublic: !!publishSource
+            }
+        };
+    };
+}
+function verifyInvariants$1(sourceIds, monitor, registry) {
+    invariant(!monitor.isDragging(), 'Cannot call beginDrag while dragging.');
+    sourceIds.forEach(function(sourceId) {
+        invariant(registry.getSource(sourceId), 'Expected sourceIds to be registered.');
+    });
+}
+function verifyGetSourceClientOffsetIsFunction(getSourceClientOffset) {
+    invariant(typeof getSourceClientOffset === 'function', 'When clientOffset is provided, getSourceClientOffset must be a function.');
+}
+function verifyItemIsObject(item) {
+    invariant(isObject(item), 'Item must be an object.');
+}
+function getDraggableSource(sourceIds, monitor) {
+    let sourceId = null;
+    for(let i = sourceIds.length - 1; i >= 0; i--){
+        if (monitor.canDragSource(sourceIds[i])) {
+            sourceId = sourceIds[i];
+            break;
+        }
+    }
+    return sourceId;
+}
 
-        return false;
-      });
-
-      if (_classPrivateFieldGet(_this, _current) !== oldBackend) {
-        var _event$target;
-
-        _classPrivateFieldGet(_this, _backends)[oldBackend].instance.teardown();
-
-        Object.keys(_classPrivateFieldGet(_this, _nodes)).forEach(function (id) {
-          var _classPrivateFieldGet2;
-
-          var node = _classPrivateFieldGet(_this, _nodes)[id];
-
-          node.unsubscribe();
-          node.unsubscribe = (_classPrivateFieldGet2 = _classPrivateFieldGet(_this, _callBackend)).call.apply(_classPrivateFieldGet2, [_this, node.func].concat(_toConsumableArray(node.args)));
+function _defineProperty$6(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
         });
-
-        _classPrivateFieldGet(_this, _previews).backendChanged(_this);
-
-        var newBackend = _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)];
-
-        newBackend.instance.setup();
-
-        if (newBackend.skipDispatchOnTransition) {
-          return;
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread$4(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
         }
-
-        var newEvent = null;
-
-        try {
-          newEvent = event.constructor(event.type, event);
-        } catch (_e) {
-          newEvent = document.createEvent('Event');
-          newEvent.initEvent(event.type, event.bubbles, event.cancelable);
+        ownKeys.forEach(function(key) {
+            _defineProperty$6(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function createDrop(manager) {
+    return function drop(options = {}) {
+        const monitor = manager.getMonitor();
+        const registry = manager.getRegistry();
+        verifyInvariants(monitor);
+        const targetIds = getDroppableTargets(monitor);
+        // Multiple actions are dispatched here, which is why this doesn't return an action
+        targetIds.forEach((targetId, index)=>{
+            const dropResult = determineDropResult(targetId, index, registry, monitor);
+            const action = {
+                type: DROP,
+                payload: {
+                    dropResult: _objectSpread$4({}, options, dropResult)
+                }
+            };
+            manager.dispatch(action);
+        });
+    };
+}
+function verifyInvariants(monitor) {
+    invariant(monitor.isDragging(), 'Cannot call drop while not dragging.');
+    invariant(!monitor.didDrop(), 'Cannot call drop twice during one drag operation.');
+}
+function determineDropResult(targetId, index, registry, monitor) {
+    const target = registry.getTarget(targetId);
+    let dropResult = target ? target.drop(monitor, targetId) : undefined;
+    verifyDropResultType(dropResult);
+    if (typeof dropResult === 'undefined') {
+        dropResult = index === 0 ? {} : monitor.getDropResult();
+    }
+    return dropResult;
+}
+function verifyDropResultType(dropResult) {
+    invariant(typeof dropResult === 'undefined' || isObject(dropResult), 'Drop result must either be an object or undefined.');
+}
+function getDroppableTargets(monitor) {
+    const targetIds = monitor.getTargetIds().filter(monitor.canDropOnTarget, monitor);
+    targetIds.reverse();
+    return targetIds;
+}
+
+function createEndDrag(manager) {
+    return function endDrag() {
+        const monitor = manager.getMonitor();
+        const registry = manager.getRegistry();
+        verifyIsDragging(monitor);
+        const sourceId = monitor.getSourceId();
+        if (sourceId != null) {
+            const source = registry.getSource(sourceId, true);
+            source.endDrag(monitor, sourceId);
+            registry.unpinSource();
         }
+        return {
+            type: END_DRAG
+        };
+    };
+}
+function verifyIsDragging(monitor) {
+    invariant(monitor.isDragging(), 'Cannot call endDrag while not dragging.');
+}
 
-        (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.dispatchEvent(newEvent);
-      }
+function matchesType(targetType, draggedItemType) {
+    if (draggedItemType === null) {
+        return targetType === null;
     }
-  });
+    return Array.isArray(targetType) ? targetType.some((t)=>t === draggedItemType
+    ) : targetType === draggedItemType;
+}
 
-  _callBackend.set(this, {
-    writable: true,
-    value: function value(func, sourceId, node, options) {
-      return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance[func](sourceId, node, options);
+function createHover(manager) {
+    return function hover(targetIdsArg, { clientOffset  } = {}) {
+        verifyTargetIdsIsArray(targetIdsArg);
+        const targetIds = targetIdsArg.slice(0);
+        const monitor = manager.getMonitor();
+        const registry = manager.getRegistry();
+        const draggedItemType = monitor.getItemType();
+        removeNonMatchingTargetIds(targetIds, registry, draggedItemType);
+        checkInvariants(targetIds, monitor, registry);
+        hoverAllTargets(targetIds, monitor, registry);
+        return {
+            type: HOVER,
+            payload: {
+                targetIds,
+                clientOffset: clientOffset || null
+            }
+        };
+    };
+}
+function verifyTargetIdsIsArray(targetIdsArg) {
+    invariant(Array.isArray(targetIdsArg), 'Expected targetIds to be an array.');
+}
+function checkInvariants(targetIds, monitor, registry) {
+    invariant(monitor.isDragging(), 'Cannot call hover while not dragging.');
+    invariant(!monitor.didDrop(), 'Cannot call hover after drop.');
+    for(let i = 0; i < targetIds.length; i++){
+        const targetId = targetIds[i];
+        invariant(targetIds.lastIndexOf(targetId) === i, 'Expected targetIds to be unique in the passed array.');
+        const target = registry.getTarget(targetId);
+        invariant(target, 'Expected targetIds to be registered.');
+    }
+}
+function removeNonMatchingTargetIds(targetIds, registry, draggedItemType) {
+    // Remove those targetIds that don't match the targetType.  This
+    // fixes shallow isOver which would only be non-shallow because of
+    // non-matching targets.
+    for(let i = targetIds.length - 1; i >= 0; i--){
+        const targetId = targetIds[i];
+        const targetType = registry.getTargetType(targetId);
+        if (!matchesType(targetType, draggedItemType)) {
+            targetIds.splice(i, 1);
+        }
     }
-  });
-
-  _connectBackend.set(this, {
-    writable: true,
-    value: function value(func, sourceId, node, options) {
-      var nodeId = "".concat(func, "_").concat(sourceId);
+}
+function hoverAllTargets(targetIds, monitor, registry) {
+    // Finally call hover on all matching targets.
+    targetIds.forEach(function(targetId) {
+        const target = registry.getTarget(targetId);
+        target.hover(monitor, targetId);
+    });
+}
 
-      var unsubscribe = _classPrivateFieldGet(_this, _callBackend).call(_this, func, sourceId, node, options);
+function createPublishDragSource(manager) {
+    return function publishDragSource() {
+        const monitor = manager.getMonitor();
+        if (monitor.isDragging()) {
+            return {
+                type: PUBLISH_DRAG_SOURCE
+            };
+        }
+        return;
+    };
+}
 
-      _classPrivateFieldGet(_this, _nodes)[nodeId] = {
-        func: func,
-        args: [sourceId, node, options],
-        unsubscribe: unsubscribe
-      };
-      return function () {
-        _classPrivateFieldGet(_this, _nodes)[nodeId].unsubscribe();
+function createDragDropActions(manager) {
+    return {
+        beginDrag: createBeginDrag(manager),
+        publishDragSource: createPublishDragSource(manager),
+        hover: createHover(manager),
+        drop: createDrop(manager),
+        endDrag: createEndDrag(manager)
+    };
+}
 
-        delete _classPrivateFieldGet(_this, _nodes)[nodeId];
-      };
+class DragDropManagerImpl {
+    receiveBackend(backend) {
+        this.backend = backend;
     }
-  });
-
-  if (!_options || !_options.backends || _options.backends.length < 1) {
-    throw new Error("You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx");
-  }
-
-  _classPrivateFieldSet(this, _previews, new PreviewListImpl());
-
-  _classPrivateFieldSet(this, _backends, {});
-
-  _classPrivateFieldSet(this, _backendsList, []);
-
-  _options.backends.forEach(function (backend) {
-    var backendRecord = _classPrivateFieldGet(_this, _createBackend).call(_this, _manager, _context, backend);
-
-    _classPrivateFieldGet(_this, _backends)[backendRecord.id] = backendRecord;
-
-    _classPrivateFieldGet(_this, _backendsList).push(backendRecord);
-  });
-
-  _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _backendsList)[0].id);
-
-  _classPrivateFieldSet(this, _nodes, {});
-};
-
-_defineProperty(MultiBackendImpl, "isSetUp", false);
+    getMonitor() {
+        return this.monitor;
+    }
+    getBackend() {
+        return this.backend;
+    }
+    getRegistry() {
+        return this.monitor.registry;
+    }
+    getActions() {
+        /* eslint-disable-next-line @typescript-eslint/no-this-alias */ const manager = this;
+        const { dispatch  } = this.store;
+        function bindActionCreator(actionCreator) {
+            return (...args)=>{
+                const action = actionCreator.apply(manager, args);
+                if (typeof action !== 'undefined') {
+                    dispatch(action);
+                }
+            };
+        }
+        const actions = createDragDropActions(this);
+        return Object.keys(actions).reduce((boundActions, key)=>{
+            const action = actions[key];
+            boundActions[key] = bindActionCreator(action);
+            return boundActions;
+        }, {});
+    }
+    dispatch(action) {
+        this.store.dispatch(action);
+    }
+    constructor(store, monitor){
+        this.isSetUp = false;
+        this.handleRefCountChange = ()=>{
+            const shouldSetUp = this.store.getState().refCount > 0;
+            if (this.backend) {
+                if (shouldSetUp && !this.isSetUp) {
+                    this.backend.setup();
+                    this.isSetUp = true;
+                } else if (!shouldSetUp && this.isSetUp) {
+                    this.backend.teardown();
+                    this.isSetUp = false;
+                }
+            }
+        };
+        this.store = store;
+        this.monitor = monitor;
+        store.subscribe(this.handleRefCountChange);
+    }
+}
 
 /**
- * Use invariant() to assert state which your program assumes to be true.
+ * Coordinate addition
+ * @param a The first coordinate
+ * @param b The second coordinate
+ */ function add(a, b) {
+    return {
+        x: a.x + b.x,
+        y: a.y + b.y
+    };
+}
+/**
+ * Coordinate subtraction
+ * @param a The first coordinate
+ * @param b The second coordinate
+ */ function subtract(a, b) {
+    return {
+        x: a.x - b.x,
+        y: a.y - b.y
+    };
+}
+/**
+ * Returns the cartesian distance of the drag source component's position, based on its position
+ * at the time when the current drag operation has started, and the movement difference.
  *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
+ * Returns null if no item is being dragged.
  *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */ function invariant(condition, format, ...args) {
-    if (isProduction()) {
-        if (format === undefined) {
-            throw new Error('invariant requires an error message argument');
+ * @param state The offset state to compute from
+ */ function getSourceClientOffset(state) {
+    const { clientOffset , initialClientOffset , initialSourceClientOffset  } = state;
+    if (!clientOffset || !initialClientOffset || !initialSourceClientOffset) {
+        return null;
+    }
+    return subtract(add(clientOffset, initialSourceClientOffset), initialClientOffset);
+}
+/**
+ * Determines the x,y offset between the client offset and the initial client offset
+ *
+ * @param state The offset state to compute from
+ */ function getDifferenceFromInitialOffset(state) {
+    const { clientOffset , initialClientOffset  } = state;
+    if (!clientOffset || !initialClientOffset) {
+        return null;
+    }
+    return subtract(clientOffset, initialClientOffset);
+}
+
+const NONE = [];
+const ALL = [];
+NONE.__IS_NONE__ = true;
+ALL.__IS_ALL__ = true;
+/**
+ * Determines if the given handler IDs are dirty or not.
+ *
+ * @param dirtyIds The set of dirty handler ids
+ * @param handlerIds The set of handler ids to check
+ */ function areDirty(dirtyIds, handlerIds) {
+    if (dirtyIds === NONE) {
+        return false;
+    }
+    if (dirtyIds === ALL || typeof handlerIds === 'undefined') {
+        return true;
+    }
+    const commonIds = intersection(handlerIds, dirtyIds);
+    return commonIds.length > 0;
+}
+
+class DragDropMonitorImpl {
+    subscribeToStateChange(listener, options = {}) {
+        const { handlerIds  } = options;
+        invariant(typeof listener === 'function', 'listener must be a function.');
+        invariant(typeof handlerIds === 'undefined' || Array.isArray(handlerIds), 'handlerIds, when specified, must be an array of strings.');
+        let prevStateId = this.store.getState().stateId;
+        const handleChange = ()=>{
+            const state = this.store.getState();
+            const currentStateId = state.stateId;
+            try {
+                const canSkipListener = currentStateId === prevStateId || currentStateId === prevStateId + 1 && !areDirty(state.dirtyHandlerIds, handlerIds);
+                if (!canSkipListener) {
+                    listener();
+                }
+            } finally{
+                prevStateId = currentStateId;
+            }
+        };
+        return this.store.subscribe(handleChange);
+    }
+    subscribeToOffsetChange(listener) {
+        invariant(typeof listener === 'function', 'listener must be a function.');
+        let previousState = this.store.getState().dragOffset;
+        const handleChange = ()=>{
+            const nextState = this.store.getState().dragOffset;
+            if (nextState === previousState) {
+                return;
+            }
+            previousState = nextState;
+            listener();
+        };
+        return this.store.subscribe(handleChange);
+    }
+    canDragSource(sourceId) {
+        if (!sourceId) {
+            return false;
         }
+        const source = this.registry.getSource(sourceId);
+        invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
+        if (this.isDragging()) {
+            return false;
+        }
+        return source.canDrag(this, sourceId);
     }
-    if (!condition) {
-        let error;
-        if (format === undefined) {
-            error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+    canDropOnTarget(targetId) {
+        // undefined on initial render
+        if (!targetId) {
+            return false;
+        }
+        const target = this.registry.getTarget(targetId);
+        invariant(target, `Expected to find a valid target. targetId=${targetId}`);
+        if (!this.isDragging() || this.didDrop()) {
+            return false;
+        }
+        const targetType = this.registry.getTargetType(targetId);
+        const draggedItemType = this.getItemType();
+        return matchesType(targetType, draggedItemType) && target.canDrop(this, targetId);
+    }
+    isDragging() {
+        return Boolean(this.getItemType());
+    }
+    isDraggingSource(sourceId) {
+        // undefined on initial render
+        if (!sourceId) {
+            return false;
+        }
+        const source = this.registry.getSource(sourceId, true);
+        invariant(source, `Expected to find a valid source. sourceId=${sourceId}`);
+        if (!this.isDragging() || !this.isSourcePublic()) {
+            return false;
+        }
+        const sourceType = this.registry.getSourceType(sourceId);
+        const draggedItemType = this.getItemType();
+        if (sourceType !== draggedItemType) {
+            return false;
+        }
+        return source.isDragging(this, sourceId);
+    }
+    isOverTarget(targetId, options = {
+        shallow: false
+    }) {
+        // undefined on initial render
+        if (!targetId) {
+            return false;
+        }
+        const { shallow  } = options;
+        if (!this.isDragging()) {
+            return false;
+        }
+        const targetType = this.registry.getTargetType(targetId);
+        const draggedItemType = this.getItemType();
+        if (draggedItemType && !matchesType(targetType, draggedItemType)) {
+            return false;
+        }
+        const targetIds = this.getTargetIds();
+        if (!targetIds.length) {
+            return false;
+        }
+        const index = targetIds.indexOf(targetId);
+        if (shallow) {
+            return index === targetIds.length - 1;
         } else {
-            let argIndex = 0;
-            error = new Error(format.replace(/%s/g, function() {
-                return args[argIndex++];
-            }));
-            error.name = 'Invariant Violation';
+            return index > -1;
         }
-        error.framesToPop = 1 // we don't care about invariant's own frame
-        ;
-        throw error;
     }
+    getItemType() {
+        return this.store.getState().dragOperation.itemType;
+    }
+    getItem() {
+        return this.store.getState().dragOperation.item;
+    }
+    getSourceId() {
+        return this.store.getState().dragOperation.sourceId;
+    }
+    getTargetIds() {
+        return this.store.getState().dragOperation.targetIds;
+    }
+    getDropResult() {
+        return this.store.getState().dragOperation.dropResult;
+    }
+    didDrop() {
+        return this.store.getState().dragOperation.didDrop;
+    }
+    isSourcePublic() {
+        return Boolean(this.store.getState().dragOperation.isSourcePublic);
+    }
+    getInitialClientOffset() {
+        return this.store.getState().dragOffset.initialClientOffset;
+    }
+    getInitialSourceClientOffset() {
+        return this.store.getState().dragOffset.initialSourceClientOffset;
+    }
+    getClientOffset() {
+        return this.store.getState().dragOffset.clientOffset;
+    }
+    getSourceClientOffset() {
+        return getSourceClientOffset(this.store.getState().dragOffset);
+    }
+    getDifferenceFromInitialOffset() {
+        return getDifferenceFromInitialOffset(this.store.getState().dragOffset);
+    }
+    constructor(store, registry){
+        this.store = store;
+        this.registry = registry;
+    }
+}
+
+// Safari 6 and 6.1 for desktop, iPad, and iPhone are the only browsers that
+// have WebKitMutationObserver but not un-prefixed MutationObserver.
+// Must use `global` or `self` instead of `window` to work in both frames and web
+// workers. `global` is a provision of Browserify, Mr, Mrs, or Mop.
+/* globals self */ const scope = typeof global !== 'undefined' ? global : self;
+const BrowserMutationObserver = scope.MutationObserver || scope.WebKitMutationObserver;
+function makeRequestCallFromTimer(callback) {
+    return function requestCall() {
+        // We dispatch a timeout with a specified delay of 0 for engines that
+        // can reliably accommodate that request. This will usually be snapped
+        // to a 4 milisecond delay, but once we're flushing, there's no delay
+        // between events.
+        const timeoutHandle = setTimeout(handleTimer, 0);
+        // However, since this timer gets frequently dropped in Firefox
+        // workers, we enlist an interval handle that will try to fire
+        // an event 20 times per second until it succeeds.
+        const intervalHandle = setInterval(handleTimer, 50);
+        function handleTimer() {
+            // Whichever timer succeeds will cancel both timers and
+            // execute the callback.
+            clearTimeout(timeoutHandle);
+            clearInterval(intervalHandle);
+            callback();
+        }
+    };
 }
-function isProduction() {
-    return typeof process !== 'undefined' && process.env['NODE_ENV'] === 'production';
+// To request a high priority event, we induce a mutation observer by toggling
+// the text of a text node between "1" and "-1".
+function makeRequestCallFromMutationObserver(callback) {
+    let toggle = 1;
+    const observer = new BrowserMutationObserver(callback);
+    const node = document.createTextNode('');
+    observer.observe(node, {
+        characterData: true
+    });
+    return function requestCall() {
+        toggle = -toggle;
+        node.data = toggle;
+    };
+}
+const makeRequestCall = typeof BrowserMutationObserver === 'function' ? // reliably everywhere they are implemented.
+// They are implemented in all modern browsers.
+//
+// - Android 4-4.3
+// - Chrome 26-34
+// - Firefox 14-29
+// - Internet Explorer 11
+// - iPad Safari 6-7.1
+// - iPhone Safari 7-7.1
+// - Safari 6-7
+makeRequestCallFromMutationObserver : // task queue, are implemented in Internet Explorer 10, Safari 5.0-1, and Opera
+// 11-12, and in web workers in many engines.
+// Although message channels yield to any queued rendering and IO tasks, they
+// would be better than imposing the 4ms delay of timers.
+// However, they do not work reliably in Internet Explorer or Safari.
+// Internet Explorer 10 is the only browser that has setImmediate but does
+// not have MutationObservers.
+// Although setImmediate yields to the browser's renderer, it would be
+// preferrable to falling back to setTimeout since it does not have
+// the minimum 4ms penalty.
+// Unfortunately there appears to be a bug in Internet Explorer 10 Mobile (and
+// Desktop to a lesser extent) that renders both setImmediate and
+// MessageChannel useless for the purposes of ASAP.
+// https://github.com/kriskowal/q/issues/396
+// Timers are implemented universally.
+// We fall back to timers in workers in most engines, and in foreground
+// contexts in the following browsers.
+// However, note that even this simple case requires nuances to operate in a
+// broad spectrum of browsers.
+//
+// - Firefox 3-13
+// - Internet Explorer 6-9
+// - iPad Safari 4.3
+// - Lynx 2.8.7
+makeRequestCallFromTimer;
+
+class AsapQueue {
+    // Use the fastest means possible to execute a task in its own turn, with
+    // priority over other events including IO, animation, reflow, and redraw
+    // events in browsers.
+    //
+    // An exception thrown by a task will permanently interrupt the processing of
+    // subsequent tasks. The higher level `asap` function ensures that if an
+    // exception is thrown by a task, that the task queue will continue flushing as
+    // soon as possible, but if you use `rawAsap` directly, you are responsible to
+    // either ensure that no exceptions are thrown from your task, or to manually
+    // call `rawAsap.requestFlush` if an exception is thrown.
+    enqueueTask(task) {
+        const { queue: q , requestFlush  } = this;
+        if (!q.length) {
+            requestFlush();
+            this.flushing = true;
+        }
+        // Equivalent to push, but avoids a function call.
+        q[q.length] = task;
+    }
+    constructor(){
+        this.queue = [];
+        // We queue errors to ensure they are thrown in right order (FIFO).
+        // Array-as-queue is good enough here, since we are just dealing with exceptions.
+        this.pendingErrors = [];
+        // Once a flush has been requested, no further calls to `requestFlush` are
+        // necessary until the next `flush` completes.
+        // @ts-ignore
+        this.flushing = false;
+        // The position of the next task to execute in the task queue. This is
+        // preserved between calls to `flush` so that it can be resumed if
+        // a task throws an exception.
+        this.index = 0;
+        // If a task schedules additional tasks recursively, the task queue can grow
+        // unbounded. To prevent memory exhaustion, the task queue will periodically
+        // truncate already-completed tasks.
+        this.capacity = 1024;
+        // The flush function processes all tasks that have been scheduled with
+        // `rawAsap` unless and until one of those tasks throws an exception.
+        // If a task throws an exception, `flush` ensures that its state will remain
+        // consistent and will resume where it left off when called again.
+        // However, `flush` does not make any arrangements to be called again if an
+        // exception is thrown.
+        this.flush = ()=>{
+            const { queue: q  } = this;
+            while(this.index < q.length){
+                const currentIndex = this.index;
+                // Advance the index before calling the task. This ensures that we will
+                // begin flushing on the next task the task throws an error.
+                this.index++;
+                q[currentIndex].call();
+                // Prevent leaking memory for long chains of recursive calls to `asap`.
+                // If we call `asap` within tasks scheduled by `asap`, the queue will
+                // grow, but to avoid an O(n) walk for every task we execute, we don't
+                // shift tasks off the queue after they have been executed.
+                // Instead, we periodically shift 1024 tasks off the queue.
+                if (this.index > this.capacity) {
+                    // Manually shift all values starting at the index back to the
+                    // beginning of the queue.
+                    for(let scan = 0, newLength = q.length - this.index; scan < newLength; scan++){
+                        q[scan] = q[scan + this.index];
+                    }
+                    q.length -= this.index;
+                    this.index = 0;
+                }
+            }
+            q.length = 0;
+            this.index = 0;
+            this.flushing = false;
+        };
+        // In a web browser, exceptions are not fatal. However, to avoid
+        // slowing down the queue of pending tasks, we rethrow the error in a
+        // lower priority turn.
+        this.registerPendingError = (err)=>{
+            this.pendingErrors.push(err);
+            this.requestErrorThrow();
+        };
+        // `requestFlush` requests that the high priority event queue be flushed as
+        // soon as possible.
+        // This is useful to prevent an error thrown in a task from stalling the event
+        // queue if the exception handled by Node.js’s
+        // `process.on("uncaughtException")` or by a domain.
+        // `requestFlush` is implemented using a strategy based on data collected from
+        // every available SauceLabs Selenium web driver worker at time of writing.
+        // https://docs.google.com/spreadsheets/d/1mG-5UYGup5qxGdEMWkhP6BWCz053NUb2E1QoUTU16uA/edit#gid=783724593
+        this.requestFlush = makeRequestCall(this.flush);
+        this.requestErrorThrow = makeRequestCallFromTimer(()=>{
+            // Throw first error
+            if (this.pendingErrors.length) {
+                throw this.pendingErrors.shift();
+            }
+        });
+    }
+} // The message channel technique was discovered by Malte Ubl and was the
+ // original foundation for this library.
+ // http://www.nonblocking.io/2011/06/windownexttick.html
+ // Safari 6.0.5 (at least) intermittently fails to create message ports on a
+ // page's first load. Thankfully, this version of Safari supports
+ // MutationObservers, so we don't need to fall back in that case.
+ // function makeRequestCallFromMessageChannel(callback) {
+ //     var channel = new MessageChannel();
+ //     channel.port1.onmessage = callback;
+ //     return function requestCall() {
+ //         channel.port2.postMessage(0);
+ //     };
+ // }
+ // For reasons explained above, we are also unable to use `setImmediate`
+ // under any circumstances.
+ // Even if we were, there is another bug in Internet Explorer 10.
+ // It is not sufficient to assign `setImmediate` to `requestFlush` because
+ // `setImmediate` must be called *by name* and therefore must be wrapped in a
+ // closure.
+ // Never forget.
+ // function makeRequestCallFromSetImmediate(callback) {
+ //     return function requestCall() {
+ //         setImmediate(callback);
+ //     };
+ // }
+ // Safari 6.0 has a problem where timers will get lost while the user is
+ // scrolling. This problem does not impact ASAP because Safari 6.0 supports
+ // mutation observers, so that implementation is used instead.
+ // However, if we ever elect to use timers in Safari, the prevalent work-around
+ // is to add a scroll event listener that calls for a flush.
+ // `setTimeout` does not call the passed callback if the delay is less than
+ // approximately 7 in web workers in Firefox 8 through 18, and sometimes not
+ // even then.
+ // This is for `asap.js` only.
+ // Its name will be periodically randomized to break any code that depends on
+ // // its existence.
+ // rawAsap.makeRequestCallFromTimer = makeRequestCallFromTimer
+ // ASAP was originally a nextTick shim included in Q. This was factored out
+ // into this ASAP package. It was later adapted to RSVP which made further
+ // amendments. These decisions, particularly to marginalize MessageChannel and
+ // to capture the MutationObserver implementation in a closure, were integrated
+ // back into ASAP proper.
+ // https://github.com/tildeio/rsvp.js/blob/cddf7232546a9cf858524b75cde6f9edf72620a7/lib/rsvp/asap.js
+
+// `call`, just like a function.
+class RawTask {
+    call() {
+        try {
+            this.task && this.task();
+        } catch (error) {
+            this.onError(error);
+        } finally{
+            this.task = null;
+            this.release(this);
+        }
+    }
+    constructor(onError, release){
+        this.onError = onError;
+        this.release = release;
+        this.task = null;
+    }
+}
+
+class TaskFactory {
+    create(task) {
+        const tasks = this.freeTasks;
+        const t1 = tasks.length ? tasks.pop() : new RawTask(this.onError, (t)=>tasks[tasks.length] = t
+        );
+        t1.task = task;
+        return t1;
+    }
+    constructor(onError){
+        this.onError = onError;
+        this.freeTasks = [];
+    }
 }
 
+const asapQueue = new AsapQueue();
+const taskFactory = new TaskFactory(asapQueue.registerPendingError);
 /**
- * Create the React Context
- */ const DndContext = createContext({
-    dragDropManager: undefined
+ * Calls a task as soon as possible after returning, in its own event, with priority
+ * over other events like animation, reflow, and repaint. An error thrown from an
+ * event will not interrupt, nor even substantially slow down the processing of
+ * other events, but will be rather postponed to a lower priority event.
+ * @param {{call}} task A callable object, typically a function that takes no
+ * arguments.
+ */ function asap(task) {
+    asapQueue.enqueueTask(taskFactory.create(task));
+}
+
+const ADD_SOURCE = 'dnd-core/ADD_SOURCE';
+const ADD_TARGET = 'dnd-core/ADD_TARGET';
+const REMOVE_SOURCE = 'dnd-core/REMOVE_SOURCE';
+const REMOVE_TARGET = 'dnd-core/REMOVE_TARGET';
+function addSource(sourceId) {
+    return {
+        type: ADD_SOURCE,
+        payload: {
+            sourceId
+        }
+    };
+}
+function addTarget(targetId) {
+    return {
+        type: ADD_TARGET,
+        payload: {
+            targetId
+        }
+    };
+}
+function removeSource(sourceId) {
+    return {
+        type: REMOVE_SOURCE,
+        payload: {
+            sourceId
+        }
+    };
+}
+function removeTarget(targetId) {
+    return {
+        type: REMOVE_TARGET,
+        payload: {
+            targetId
+        }
+    };
+}
+
+function validateSourceContract(source) {
+    invariant(typeof source.canDrag === 'function', 'Expected canDrag to be a function.');
+    invariant(typeof source.beginDrag === 'function', 'Expected beginDrag to be a function.');
+    invariant(typeof source.endDrag === 'function', 'Expected endDrag to be a function.');
+}
+function validateTargetContract(target) {
+    invariant(typeof target.canDrop === 'function', 'Expected canDrop to be a function.');
+    invariant(typeof target.hover === 'function', 'Expected hover to be a function.');
+    invariant(typeof target.drop === 'function', 'Expected beginDrag to be a function.');
+}
+function validateType(type, allowArray) {
+    if (allowArray && Array.isArray(type)) {
+        type.forEach((t)=>validateType(t, false)
+        );
+        return;
+    }
+    invariant(typeof type === 'string' || typeof type === 'symbol', allowArray ? 'Type can only be a string, a symbol, or an array of either.' : 'Type can only be a string or a symbol.');
+}
+
+var HandlerRole;
+(function(HandlerRole) {
+    HandlerRole["SOURCE"] = "SOURCE";
+    HandlerRole["TARGET"] = "TARGET";
+})(HandlerRole || (HandlerRole = {}));
+
+let nextUniqueId = 0;
+function getNextUniqueId() {
+    return nextUniqueId++;
+}
+
+function getNextHandlerId(role) {
+    const id = getNextUniqueId().toString();
+    switch(role){
+        case HandlerRole.SOURCE:
+            return `S${id}`;
+        case HandlerRole.TARGET:
+            return `T${id}`;
+        default:
+            throw new Error(`Unknown Handler Role: ${role}`);
+    }
+}
+function parseRoleFromHandlerId(handlerId) {
+    switch(handlerId[0]){
+        case 'S':
+            return HandlerRole.SOURCE;
+        case 'T':
+            return HandlerRole.TARGET;
+        default:
+            throw new Error(`Cannot parse handler ID: ${handlerId}`);
+    }
+}
+function mapContainsValue(map, searchValue) {
+    const entries = map.entries();
+    let isDone = false;
+    do {
+        const { done , value: [, value] ,  } = entries.next();
+        if (value === searchValue) {
+            return true;
+        }
+        isDone = !!done;
+    }while (!isDone)
+    return false;
+}
+class HandlerRegistryImpl {
+    addSource(type, source) {
+        validateType(type);
+        validateSourceContract(source);
+        const sourceId = this.addHandler(HandlerRole.SOURCE, type, source);
+        this.store.dispatch(addSource(sourceId));
+        return sourceId;
+    }
+    addTarget(type, target) {
+        validateType(type, true);
+        validateTargetContract(target);
+        const targetId = this.addHandler(HandlerRole.TARGET, type, target);
+        this.store.dispatch(addTarget(targetId));
+        return targetId;
+    }
+    containsHandler(handler) {
+        return mapContainsValue(this.dragSources, handler) || mapContainsValue(this.dropTargets, handler);
+    }
+    getSource(sourceId, includePinned = false) {
+        invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
+        const isPinned = includePinned && sourceId === this.pinnedSourceId;
+        const source = isPinned ? this.pinnedSource : this.dragSources.get(sourceId);
+        return source;
+    }
+    getTarget(targetId) {
+        invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
+        return this.dropTargets.get(targetId);
+    }
+    getSourceType(sourceId) {
+        invariant(this.isSourceId(sourceId), 'Expected a valid source ID.');
+        return this.types.get(sourceId);
+    }
+    getTargetType(targetId) {
+        invariant(this.isTargetId(targetId), 'Expected a valid target ID.');
+        return this.types.get(targetId);
+    }
+    isSourceId(handlerId) {
+        const role = parseRoleFromHandlerId(handlerId);
+        return role === HandlerRole.SOURCE;
+    }
+    isTargetId(handlerId) {
+        const role = parseRoleFromHandlerId(handlerId);
+        return role === HandlerRole.TARGET;
+    }
+    removeSource(sourceId) {
+        invariant(this.getSource(sourceId), 'Expected an existing source.');
+        this.store.dispatch(removeSource(sourceId));
+        asap(()=>{
+            this.dragSources.delete(sourceId);
+            this.types.delete(sourceId);
+        });
+    }
+    removeTarget(targetId) {
+        invariant(this.getTarget(targetId), 'Expected an existing target.');
+        this.store.dispatch(removeTarget(targetId));
+        this.dropTargets.delete(targetId);
+        this.types.delete(targetId);
+    }
+    pinSource(sourceId) {
+        const source = this.getSource(sourceId);
+        invariant(source, 'Expected an existing source.');
+        this.pinnedSourceId = sourceId;
+        this.pinnedSource = source;
+    }
+    unpinSource() {
+        invariant(this.pinnedSource, 'No source is pinned at the time.');
+        this.pinnedSourceId = null;
+        this.pinnedSource = null;
+    }
+    addHandler(role, type, handler) {
+        const id = getNextHandlerId(role);
+        this.types.set(id, type);
+        if (role === HandlerRole.SOURCE) {
+            this.dragSources.set(id, handler);
+        } else if (role === HandlerRole.TARGET) {
+            this.dropTargets.set(id, handler);
+        }
+        return id;
+    }
+    constructor(store){
+        this.types = new Map();
+        this.dragSources = new Map();
+        this.dropTargets = new Map();
+        this.pinnedSourceId = null;
+        this.pinnedSource = null;
+        this.store = store;
+    }
+}
+
+const strictEquality = (a, b)=>a === b
+;
+/**
+ * Determine if two cartesian coordinate offsets are equal
+ * @param offsetA
+ * @param offsetB
+ */ function areCoordsEqual(offsetA, offsetB) {
+    if (!offsetA && !offsetB) {
+        return true;
+    } else if (!offsetA || !offsetB) {
+        return false;
+    } else {
+        return offsetA.x === offsetB.x && offsetA.y === offsetB.y;
+    }
+}
+/**
+ * Determines if two arrays of items are equal
+ * @param a The first array of items
+ * @param b The second array of items
+ */ function areArraysEqual(a, b, isEqual = strictEquality) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    for(let i = 0; i < a.length; ++i){
+        if (!isEqual(a[i], b[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function reduce$5(// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_state = NONE, action) {
+    switch(action.type){
+        case HOVER:
+            break;
+        case ADD_SOURCE:
+        case ADD_TARGET:
+        case REMOVE_TARGET:
+        case REMOVE_SOURCE:
+            return NONE;
+        case BEGIN_DRAG:
+        case PUBLISH_DRAG_SOURCE:
+        case END_DRAG:
+        case DROP:
+        default:
+            return ALL;
+    }
+    const { targetIds =[] , prevTargetIds =[]  } = action.payload;
+    const result = xor(targetIds, prevTargetIds);
+    const didChange = result.length > 0 || !areArraysEqual(targetIds, prevTargetIds);
+    if (!didChange) {
+        return NONE;
+    }
+    // Check the target ids at the innermost position. If they are valid, add them
+    // to the result
+    const prevInnermostTargetId = prevTargetIds[prevTargetIds.length - 1];
+    const innermostTargetId = targetIds[targetIds.length - 1];
+    if (prevInnermostTargetId !== innermostTargetId) {
+        if (prevInnermostTargetId) {
+            result.push(prevInnermostTargetId);
+        }
+        if (innermostTargetId) {
+            result.push(innermostTargetId);
+        }
+    }
+    return result;
+}
+
+function _defineProperty$5(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread$3(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty$5(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const initialState$3 = {
+    initialSourceClientOffset: null,
+    initialClientOffset: null,
+    clientOffset: null
+};
+function reduce$4(state = initialState$3, action) {
+    const { payload  } = action;
+    switch(action.type){
+        case INIT_COORDS:
+        case BEGIN_DRAG:
+            return {
+                initialSourceClientOffset: payload.sourceClientOffset,
+                initialClientOffset: payload.clientOffset,
+                clientOffset: payload.clientOffset
+            };
+        case HOVER:
+            if (areCoordsEqual(state.clientOffset, payload.clientOffset)) {
+                return state;
+            }
+            return _objectSpread$3({}, state, {
+                clientOffset: payload.clientOffset
+            });
+        case END_DRAG:
+        case DROP:
+            return initialState$3;
+        default:
+            return state;
+    }
+}
+
+function _defineProperty$4(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread$2(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty$4(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const initialState$2 = {
+    itemType: null,
+    item: null,
+    sourceId: null,
+    targetIds: [],
+    dropResult: null,
+    didDrop: false,
+    isSourcePublic: null
+};
+function reduce$3(state = initialState$2, action) {
+    const { payload  } = action;
+    switch(action.type){
+        case BEGIN_DRAG:
+            return _objectSpread$2({}, state, {
+                itemType: payload.itemType,
+                item: payload.item,
+                sourceId: payload.sourceId,
+                isSourcePublic: payload.isSourcePublic,
+                dropResult: null,
+                didDrop: false
+            });
+        case PUBLISH_DRAG_SOURCE:
+            return _objectSpread$2({}, state, {
+                isSourcePublic: true
+            });
+        case HOVER:
+            return _objectSpread$2({}, state, {
+                targetIds: payload.targetIds
+            });
+        case REMOVE_TARGET:
+            if (state.targetIds.indexOf(payload.targetId) === -1) {
+                return state;
+            }
+            return _objectSpread$2({}, state, {
+                targetIds: without$1(state.targetIds, payload.targetId)
+            });
+        case DROP:
+            return _objectSpread$2({}, state, {
+                dropResult: payload.dropResult,
+                didDrop: true,
+                targetIds: []
+            });
+        case END_DRAG:
+            return _objectSpread$2({}, state, {
+                itemType: null,
+                item: null,
+                sourceId: null,
+                dropResult: null,
+                didDrop: false,
+                isSourcePublic: null,
+                targetIds: []
+            });
+        default:
+            return state;
+    }
+}
+
+function reduce$2(state = 0, action) {
+    switch(action.type){
+        case ADD_SOURCE:
+        case ADD_TARGET:
+            return state + 1;
+        case REMOVE_SOURCE:
+        case REMOVE_TARGET:
+            return state - 1;
+        default:
+            return state;
+    }
+}
+
+function reduce$1(state = 0) {
+    return state + 1;
+}
+
+function _defineProperty$3(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread$1(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty$3(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function reduce(state = {}, action) {
+    return {
+        dirtyHandlerIds: reduce$5(state.dirtyHandlerIds, {
+            type: action.type,
+            payload: _objectSpread$1({}, action.payload, {
+                prevTargetIds: get(state, 'dragOperation.targetIds', [])
+            })
+        }),
+        dragOffset: reduce$4(state.dragOffset, action),
+        refCount: reduce$2(state.refCount, action),
+        dragOperation: reduce$3(state.dragOperation, action),
+        stateId: reduce$1(state.stateId)
+    };
+}
+
+function createDragDropManager(backendFactory, globalContext = undefined, backendOptions = {}, debugMode = false) {
+    const store = makeStoreInstance(debugMode);
+    const monitor = new DragDropMonitorImpl(store, new HandlerRegistryImpl(store));
+    const manager = new DragDropManagerImpl(store, monitor);
+    const backend = backendFactory(manager, globalContext, backendOptions);
+    manager.receiveBackend(backend);
+    return manager;
+}
+function makeStoreInstance(debugMode) {
+    // TODO: if we ever make a react-native version of this,
+    // we'll need to consider how to pull off dev-tooling
+    const reduxDevTools = typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__;
+    return createStore(reduce, debugMode && reduxDevTools && reduxDevTools({
+        name: 'dnd-core',
+        instanceId: 'dnd-core'
+    }));
+}
+
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+let refCount = 0;
+const INSTANCE_SYM = Symbol.for('__REACT_DND_CONTEXT_INSTANCE__');
+var DndProvider = /*#__PURE__*/ memo(function DndProvider(_param) {
+    var { children  } = _param, props = _objectWithoutProperties(_param, [
+        "children"
+    ]);
+    const [manager, isGlobalInstance] = getDndContextValue(props) // memoized from props
+    ;
+    /**
+		 * If the global context was used to store the DND context
+		 * then where theres no more references to it we should
+		 * clean it up to avoid memory leaks
+		 */ useEffect(()=>{
+        if (isGlobalInstance) {
+            const context = getGlobalContext();
+            ++refCount;
+            return ()=>{
+                if (--refCount === 0) {
+                    context[INSTANCE_SYM] = null;
+                }
+            };
+        }
+        return;
+    }, []);
+    return /*#__PURE__*/ jsx(DndContext.Provider, {
+        value: manager,
+        children: children
+    });
 });
+function getDndContextValue(props) {
+    if ('manager' in props) {
+        const manager = {
+            dragDropManager: props.manager
+        };
+        return [
+            manager,
+            false
+        ];
+    }
+    const manager = createSingletonDndContext(props.backend, props.context, props.options, props.debugMode);
+    const isGlobalInstance = !props.context;
+    return [
+        manager,
+        isGlobalInstance
+    ];
+}
+function createSingletonDndContext(backend, context = getGlobalContext(), options, debugMode) {
+    const ctx = context;
+    if (!ctx[INSTANCE_SYM]) {
+        ctx[INSTANCE_SYM] = {
+            dragDropManager: createDragDropManager(backend, context, options, debugMode)
+        };
+    }
+    return ctx[INSTANCE_SYM];
+}
+function getGlobalContext() {
+    return typeof global !== 'undefined' ? global : window;
+}
 
 // do not edit .js files directly - edit src/index.jst
 
@@ -8560,6 +10001,1368 @@ function useRegisteredDropTarget(spec, monitor, connector) {
     ];
 }
 
+// cheap lodash replacements
+function memoize(fn) {
+    let result = null;
+    const memoized = ()=>{
+        if (result == null) {
+            result = fn();
+        }
+        return result;
+    };
+    return memoized;
+}
+/**
+ * drop-in replacement for _.without
+ */ function without(items, item) {
+    return items.filter((i)=>i !== item
+    );
+}
+function union(itemsA, itemsB) {
+    const set = new Set();
+    const insertItem = (item)=>set.add(item)
+    ;
+    itemsA.forEach(insertItem);
+    itemsB.forEach(insertItem);
+    const result = [];
+    set.forEach((key)=>result.push(key)
+    );
+    return result;
+}
+
+class EnterLeaveCounter {
+    enter(enteringNode) {
+        const previousLength = this.entered.length;
+        const isNodeEntered = (node)=>this.isNodeInDocument(node) && (!node.contains || node.contains(enteringNode))
+        ;
+        this.entered = union(this.entered.filter(isNodeEntered), [
+            enteringNode
+        ]);
+        return previousLength === 0 && this.entered.length > 0;
+    }
+    leave(leavingNode) {
+        const previousLength = this.entered.length;
+        this.entered = without(this.entered.filter(this.isNodeInDocument), leavingNode);
+        return previousLength > 0 && this.entered.length === 0;
+    }
+    reset() {
+        this.entered = [];
+    }
+    constructor(isNodeInDocument){
+        this.entered = [];
+        this.isNodeInDocument = isNodeInDocument;
+    }
+}
+
+class NativeDragSource {
+    initializeExposedProperties() {
+        Object.keys(this.config.exposeProperties).forEach((property)=>{
+            Object.defineProperty(this.item, property, {
+                configurable: true,
+                enumerable: true,
+                get () {
+                    // eslint-disable-next-line no-console
+                    console.warn(`Browser doesn't allow reading "${property}" until the drop event.`);
+                    return null;
+                }
+            });
+        });
+    }
+    loadDataTransfer(dataTransfer) {
+        if (dataTransfer) {
+            const newProperties = {};
+            Object.keys(this.config.exposeProperties).forEach((property)=>{
+                const propertyFn = this.config.exposeProperties[property];
+                if (propertyFn != null) {
+                    newProperties[property] = {
+                        value: propertyFn(dataTransfer, this.config.matchesTypes),
+                        configurable: true,
+                        enumerable: true
+                    };
+                }
+            });
+            Object.defineProperties(this.item, newProperties);
+        }
+    }
+    canDrag() {
+        return true;
+    }
+    beginDrag() {
+        return this.item;
+    }
+    isDragging(monitor, handle) {
+        return handle === monitor.getSourceId();
+    }
+    endDrag() {
+    // empty
+    }
+    constructor(config){
+        this.config = config;
+        this.item = {};
+        this.initializeExposedProperties();
+    }
+}
+
+const FILE = '__NATIVE_FILE__';
+const URL = '__NATIVE_URL__';
+const TEXT = '__NATIVE_TEXT__';
+const HTML = '__NATIVE_HTML__';
+
+var NativeTypes = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	FILE: FILE,
+	URL: URL,
+	TEXT: TEXT,
+	HTML: HTML
+});
+
+function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
+    const result = typesToTry.reduce((resultSoFar, typeToTry)=>resultSoFar || dataTransfer.getData(typeToTry)
+    , '');
+    return result != null ? result : defaultValue;
+}
+
+const nativeTypesConfig = {
+    [FILE]: {
+        exposeProperties: {
+            files: (dataTransfer)=>Array.prototype.slice.call(dataTransfer.files)
+            ,
+            items: (dataTransfer)=>dataTransfer.items
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Files'
+        ]
+    },
+    [HTML]: {
+        exposeProperties: {
+            html: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Html',
+            'text/html'
+        ]
+    },
+    [URL]: {
+        exposeProperties: {
+            urls: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Url',
+            'text/uri-list'
+        ]
+    },
+    [TEXT]: {
+        exposeProperties: {
+            text: (dataTransfer, matchesTypes)=>getDataFromDataTransfer(dataTransfer, matchesTypes, '')
+            ,
+            dataTransfer: (dataTransfer)=>dataTransfer
+        },
+        matchesTypes: [
+            'Text',
+            'text/plain'
+        ]
+    }
+};
+
+function createNativeDragSource(type, dataTransfer) {
+    const config = nativeTypesConfig[type];
+    if (!config) {
+        throw new Error(`native type ${type} has no configuration`);
+    }
+    const result = new NativeDragSource(config);
+    result.loadDataTransfer(dataTransfer);
+    return result;
+}
+function matchNativeItemType(dataTransfer) {
+    if (!dataTransfer) {
+        return null;
+    }
+    const dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []);
+    return Object.keys(nativeTypesConfig).filter((nativeItemType)=>{
+        const typeConfig = nativeTypesConfig[nativeItemType];
+        if (!(typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.matchesTypes)) {
+            return false;
+        }
+        return typeConfig.matchesTypes.some((t)=>dataTransferTypes.indexOf(t) > -1
+        );
+    })[0] || null;
+}
+
+const isFirefox = memoize(()=>/firefox/i.test(navigator.userAgent)
+);
+const isSafari = memoize(()=>Boolean(window.safari)
+);
+
+class MonotonicInterpolant {
+    interpolate(x) {
+        const { xs , ys , c1s , c2s , c3s  } = this;
+        // The rightmost point in the dataset should give an exact result
+        let i = xs.length - 1;
+        if (x === xs[i]) {
+            return ys[i];
+        }
+        // Search for the interval x is in, returning the corresponding y if x is one of the original xs
+        let low = 0;
+        let high = c3s.length - 1;
+        let mid;
+        while(low <= high){
+            mid = Math.floor(0.5 * (low + high));
+            const xHere = xs[mid];
+            if (xHere < x) {
+                low = mid + 1;
+            } else if (xHere > x) {
+                high = mid - 1;
+            } else {
+                return ys[mid];
+            }
+        }
+        i = Math.max(0, high);
+        // Interpolate
+        const diff = x - xs[i];
+        const diffSq = diff * diff;
+        return ys[i] + c1s[i] * diff + c2s[i] * diffSq + c3s[i] * diff * diffSq;
+    }
+    constructor(xs, ys){
+        const { length  } = xs;
+        // Rearrange xs and ys so that xs is sorted
+        const indexes = [];
+        for(let i = 0; i < length; i++){
+            indexes.push(i);
+        }
+        indexes.sort((a, b)=>xs[a] < xs[b] ? -1 : 1
+        );
+        const dxs = [];
+        const ms = [];
+        let dx;
+        let dy;
+        for(let i1 = 0; i1 < length - 1; i1++){
+            dx = xs[i1 + 1] - xs[i1];
+            dy = ys[i1 + 1] - ys[i1];
+            dxs.push(dx);
+            ms.push(dy / dx);
+        }
+        // Get degree-1 coefficients
+        const c1s = [
+            ms[0]
+        ];
+        for(let i2 = 0; i2 < dxs.length - 1; i2++){
+            const m2 = ms[i2];
+            const mNext = ms[i2 + 1];
+            if (m2 * mNext <= 0) {
+                c1s.push(0);
+            } else {
+                dx = dxs[i2];
+                const dxNext = dxs[i2 + 1];
+                const common = dx + dxNext;
+                c1s.push(3 * common / ((common + dxNext) / m2 + (common + dx) / mNext));
+            }
+        }
+        c1s.push(ms[ms.length - 1]);
+        // Get degree-2 and degree-3 coefficients
+        const c2s = [];
+        const c3s = [];
+        let m;
+        for(let i3 = 0; i3 < c1s.length - 1; i3++){
+            m = ms[i3];
+            const c1 = c1s[i3];
+            const invDx = 1 / dxs[i3];
+            const common = c1 + c1s[i3 + 1] - m - m;
+            c2s.push((m - c1 - common) * invDx);
+            c3s.push(common * invDx * invDx);
+        }
+        this.xs = xs;
+        this.ys = ys;
+        this.c1s = c1s;
+        this.c2s = c2s;
+        this.c3s = c3s;
+    }
+}
+
+const ELEMENT_NODE = 1;
+function getNodeClientOffset(node) {
+    const el = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
+    if (!el) {
+        return null;
+    }
+    const { top , left  } = el.getBoundingClientRect();
+    return {
+        x: left,
+        y: top
+    };
+}
+function getEventClientOffset(e) {
+    return {
+        x: e.clientX,
+        y: e.clientY
+    };
+}
+function isImageNode(node) {
+    var ref;
+    return node.nodeName === 'IMG' && (isFirefox() || !((ref = document.documentElement) === null || ref === void 0 ? void 0 : ref.contains(node)));
+}
+function getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight) {
+    let dragPreviewWidth = isImage ? dragPreview.width : sourceWidth;
+    let dragPreviewHeight = isImage ? dragPreview.height : sourceHeight;
+    // Work around @2x coordinate discrepancies in browsers
+    if (isSafari() && isImage) {
+        dragPreviewHeight /= window.devicePixelRatio;
+        dragPreviewWidth /= window.devicePixelRatio;
+    }
+    return {
+        dragPreviewWidth,
+        dragPreviewHeight
+    };
+}
+function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint) {
+    // The browsers will use the image intrinsic size under different conditions.
+    // Firefox only cares if it's an image, but WebKit also wants it to be detached.
+    const isImage = isImageNode(dragPreview);
+    const dragPreviewNode = isImage ? sourceNode : dragPreview;
+    const dragPreviewNodeOffsetFromClient = getNodeClientOffset(dragPreviewNode);
+    const offsetFromDragPreview = {
+        x: clientOffset.x - dragPreviewNodeOffsetFromClient.x,
+        y: clientOffset.y - dragPreviewNodeOffsetFromClient.y
+    };
+    const { offsetWidth: sourceWidth , offsetHeight: sourceHeight  } = sourceNode;
+    const { anchorX , anchorY  } = anchorPoint;
+    const { dragPreviewWidth , dragPreviewHeight  } = getDragPreviewSize(isImage, dragPreview, sourceWidth, sourceHeight);
+    const calculateYOffset = ()=>{
+        const interpolantY = new MonotonicInterpolant([
+            0,
+            0.5,
+            1
+        ], [
+            // Dock to the top
+            offsetFromDragPreview.y,
+            // Align at the center
+            (offsetFromDragPreview.y / sourceHeight) * dragPreviewHeight,
+            // Dock to the bottom
+            offsetFromDragPreview.y + dragPreviewHeight - sourceHeight, 
+        ]);
+        let y = interpolantY.interpolate(anchorY);
+        // Work around Safari 8 positioning bug
+        if (isSafari() && isImage) {
+            // We'll have to wait for @3x to see if this is entirely correct
+            y += (window.devicePixelRatio - 1) * dragPreviewHeight;
+        }
+        return y;
+    };
+    const calculateXOffset = ()=>{
+        // Interpolate coordinates depending on anchor point
+        // If you know a simpler way to do this, let me know
+        const interpolantX = new MonotonicInterpolant([
+            0,
+            0.5,
+            1
+        ], [
+            // Dock to the left
+            offsetFromDragPreview.x,
+            // Align at the center
+            (offsetFromDragPreview.x / sourceWidth) * dragPreviewWidth,
+            // Dock to the right
+            offsetFromDragPreview.x + dragPreviewWidth - sourceWidth, 
+        ]);
+        return interpolantX.interpolate(anchorX);
+    };
+    // Force offsets if specified in the options.
+    const { offsetX , offsetY  } = offsetPoint;
+    const isManualOffsetX = offsetX === 0 || offsetX;
+    const isManualOffsetY = offsetY === 0 || offsetY;
+    return {
+        x: isManualOffsetX ? offsetX : calculateXOffset(),
+        y: isManualOffsetY ? offsetY : calculateYOffset()
+    };
+}
+
+class OptionsReader {
+    get window() {
+        if (this.globalContext) {
+            return this.globalContext;
+        } else if (typeof window !== 'undefined') {
+            return window;
+        }
+        return undefined;
+    }
+    get document() {
+        var ref;
+        if ((ref = this.globalContext) === null || ref === void 0 ? void 0 : ref.document) {
+            return this.globalContext.document;
+        } else if (this.window) {
+            return this.window.document;
+        } else {
+            return undefined;
+        }
+    }
+    get rootElement() {
+        var ref;
+        return ((ref = this.optionsArgs) === null || ref === void 0 ? void 0 : ref.rootElement) || this.window;
+    }
+    constructor(globalContext, options){
+        this.ownerDocument = null;
+        this.globalContext = globalContext;
+        this.optionsArgs = options;
+    }
+}
+
+function _defineProperty$2(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === 'function') {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty$2(target, key, source[key]);
+        });
+    }
+    return target;
+}
+class HTML5BackendImpl {
+    /**
+	 * Generate profiling statistics for the HTML5Backend.
+	 */ profile() {
+        var ref, ref1;
+        return {
+            sourcePreviewNodes: this.sourcePreviewNodes.size,
+            sourcePreviewNodeOptions: this.sourcePreviewNodeOptions.size,
+            sourceNodeOptions: this.sourceNodeOptions.size,
+            sourceNodes: this.sourceNodes.size,
+            dragStartSourceIds: ((ref = this.dragStartSourceIds) === null || ref === void 0 ? void 0 : ref.length) || 0,
+            dropTargetIds: this.dropTargetIds.length,
+            dragEnterTargetIds: this.dragEnterTargetIds.length,
+            dragOverTargetIds: ((ref1 = this.dragOverTargetIds) === null || ref1 === void 0 ? void 0 : ref1.length) || 0
+        };
+    }
+    // public for test
+    get window() {
+        return this.options.window;
+    }
+    get document() {
+        return this.options.document;
+    }
+    /**
+	 * Get the root element to use for event subscriptions
+	 */ get rootElement() {
+        return this.options.rootElement;
+    }
+    setup() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        if (root.__isReactDndBackendSetUp) {
+            throw new Error('Cannot have two HTML5 backends at the same time.');
+        }
+        root.__isReactDndBackendSetUp = true;
+        this.addEventListeners(root);
+    }
+    teardown() {
+        const root = this.rootElement;
+        if (root === undefined) {
+            return;
+        }
+        root.__isReactDndBackendSetUp = false;
+        this.removeEventListeners(this.rootElement);
+        this.clearCurrentDragSourceNode();
+        if (this.asyncEndDragFrameId) {
+            var ref;
+            (ref = this.window) === null || ref === void 0 ? void 0 : ref.cancelAnimationFrame(this.asyncEndDragFrameId);
+        }
+    }
+    connectDragPreview(sourceId, node, options) {
+        this.sourcePreviewNodeOptions.set(sourceId, options);
+        this.sourcePreviewNodes.set(sourceId, node);
+        return ()=>{
+            this.sourcePreviewNodes.delete(sourceId);
+            this.sourcePreviewNodeOptions.delete(sourceId);
+        };
+    }
+    connectDragSource(sourceId, node, options) {
+        this.sourceNodes.set(sourceId, node);
+        this.sourceNodeOptions.set(sourceId, options);
+        const handleDragStart = (e)=>this.handleDragStart(e, sourceId)
+        ;
+        const handleSelectStart = (e)=>this.handleSelectStart(e)
+        ;
+        node.setAttribute('draggable', 'true');
+        node.addEventListener('dragstart', handleDragStart);
+        node.addEventListener('selectstart', handleSelectStart);
+        return ()=>{
+            this.sourceNodes.delete(sourceId);
+            this.sourceNodeOptions.delete(sourceId);
+            node.removeEventListener('dragstart', handleDragStart);
+            node.removeEventListener('selectstart', handleSelectStart);
+            node.setAttribute('draggable', 'false');
+        };
+    }
+    connectDropTarget(targetId, node) {
+        const handleDragEnter = (e)=>this.handleDragEnter(e, targetId)
+        ;
+        const handleDragOver = (e)=>this.handleDragOver(e, targetId)
+        ;
+        const handleDrop = (e)=>this.handleDrop(e, targetId)
+        ;
+        node.addEventListener('dragenter', handleDragEnter);
+        node.addEventListener('dragover', handleDragOver);
+        node.addEventListener('drop', handleDrop);
+        return ()=>{
+            node.removeEventListener('dragenter', handleDragEnter);
+            node.removeEventListener('dragover', handleDragOver);
+            node.removeEventListener('drop', handleDrop);
+        };
+    }
+    addEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.addEventListener) {
+            return;
+        }
+        target.addEventListener('dragstart', this.handleTopDragStart);
+        target.addEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.addEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.addEventListener('dragenter', this.handleTopDragEnter);
+        target.addEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.addEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.addEventListener('dragover', this.handleTopDragOver);
+        target.addEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.addEventListener('drop', this.handleTopDrop);
+        target.addEventListener('drop', this.handleTopDropCapture, true);
+    }
+    removeEventListeners(target) {
+        // SSR Fix (https://github.com/react-dnd/react-dnd/pull/813
+        if (!target.removeEventListener) {
+            return;
+        }
+        target.removeEventListener('dragstart', this.handleTopDragStart);
+        target.removeEventListener('dragstart', this.handleTopDragStartCapture, true);
+        target.removeEventListener('dragend', this.handleTopDragEndCapture, true);
+        target.removeEventListener('dragenter', this.handleTopDragEnter);
+        target.removeEventListener('dragenter', this.handleTopDragEnterCapture, true);
+        target.removeEventListener('dragleave', this.handleTopDragLeaveCapture, true);
+        target.removeEventListener('dragover', this.handleTopDragOver);
+        target.removeEventListener('dragover', this.handleTopDragOverCapture, true);
+        target.removeEventListener('drop', this.handleTopDrop);
+        target.removeEventListener('drop', this.handleTopDropCapture, true);
+    }
+    getCurrentSourceNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourceNodeOptions = this.sourceNodeOptions.get(sourceId);
+        return _objectSpread({
+            dropEffect: this.altKeyPressed ? 'copy' : 'move'
+        }, sourceNodeOptions || {});
+    }
+    getCurrentDropEffect() {
+        if (this.isDraggingNativeItem()) {
+            // It makes more sense to default to 'copy' for native resources
+            return 'copy';
+        }
+        return this.getCurrentSourceNodeOptions().dropEffect;
+    }
+    getCurrentSourcePreviewNodeOptions() {
+        const sourceId = this.monitor.getSourceId();
+        const sourcePreviewNodeOptions = this.sourcePreviewNodeOptions.get(sourceId);
+        return _objectSpread({
+            anchorX: 0.5,
+            anchorY: 0.5,
+            captureDraggingState: false
+        }, sourcePreviewNodeOptions || {});
+    }
+    isDraggingNativeItem() {
+        const itemType = this.monitor.getItemType();
+        return Object.keys(NativeTypes).some((key)=>NativeTypes[key] === itemType
+        );
+    }
+    beginDragNativeItem(type, dataTransfer) {
+        this.clearCurrentDragSourceNode();
+        this.currentNativeSource = createNativeDragSource(type, dataTransfer);
+        this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
+        this.actions.beginDrag([
+            this.currentNativeHandle
+        ]);
+    }
+    setCurrentDragSourceNode(node) {
+        this.clearCurrentDragSourceNode();
+        this.currentDragSourceNode = node;
+        // A timeout of > 0 is necessary to resolve Firefox issue referenced
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        const MOUSE_MOVE_TIMEOUT = 1000;
+        // Receiving a mouse event in the middle of a dragging operation
+        // means it has ended and the drag source node disappeared from DOM,
+        // so the browser didn't dispatch the dragend event.
+        //
+        // We need to wait before we start listening for mousemove events.
+        // This is needed because the drag preview needs to be drawn or else it fires an 'mousemove' event
+        // immediately in some browsers.
+        //
+        // See:
+        //   * https://github.com/react-dnd/react-dnd/pull/928
+        //   * https://github.com/react-dnd/react-dnd/issues/869
+        //
+        this.mouseMoveTimeoutTimer = setTimeout(()=>{
+            var ref;
+            return (ref = this.rootElement) === null || ref === void 0 ? void 0 : ref.addEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+        }, MOUSE_MOVE_TIMEOUT);
+    }
+    clearCurrentDragSourceNode() {
+        if (this.currentDragSourceNode) {
+            this.currentDragSourceNode = null;
+            if (this.rootElement) {
+                var ref;
+                (ref = this.window) === null || ref === void 0 ? void 0 : ref.clearTimeout(this.mouseMoveTimeoutTimer || undefined);
+                this.rootElement.removeEventListener('mousemove', this.endDragIfSourceWasRemovedFromDOM, true);
+            }
+            this.mouseMoveTimeoutTimer = null;
+            return true;
+        }
+        return false;
+    }
+    handleDragStart(e, sourceId) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!this.dragStartSourceIds) {
+            this.dragStartSourceIds = [];
+        }
+        this.dragStartSourceIds.unshift(sourceId);
+    }
+    handleDragEnter(_e, targetId) {
+        this.dragEnterTargetIds.unshift(targetId);
+    }
+    handleDragOver(_e, targetId) {
+        if (this.dragOverTargetIds === null) {
+            this.dragOverTargetIds = [];
+        }
+        this.dragOverTargetIds.unshift(targetId);
+    }
+    handleDrop(_e, targetId) {
+        this.dropTargetIds.unshift(targetId);
+    }
+    constructor(manager, globalContext, options){
+        this.sourcePreviewNodes = new Map();
+        this.sourcePreviewNodeOptions = new Map();
+        this.sourceNodes = new Map();
+        this.sourceNodeOptions = new Map();
+        this.dragStartSourceIds = null;
+        this.dropTargetIds = [];
+        this.dragEnterTargetIds = [];
+        this.currentNativeSource = null;
+        this.currentNativeHandle = null;
+        this.currentDragSourceNode = null;
+        this.altKeyPressed = false;
+        this.mouseMoveTimeoutTimer = null;
+        this.asyncEndDragFrameId = null;
+        this.dragOverTargetIds = null;
+        this.lastClientOffset = null;
+        this.hoverRafId = null;
+        this.getSourceClientOffset = (sourceId)=>{
+            const source = this.sourceNodes.get(sourceId);
+            return source && getNodeClientOffset(source) || null;
+        };
+        this.endDragNativeItem = ()=>{
+            if (!this.isDraggingNativeItem()) {
+                return;
+            }
+            this.actions.endDrag();
+            if (this.currentNativeHandle) {
+                this.registry.removeSource(this.currentNativeHandle);
+            }
+            this.currentNativeHandle = null;
+            this.currentNativeSource = null;
+        };
+        this.isNodeInDocument = (node)=>{
+            // Check the node either in the main document or in the current context
+            return Boolean(node && this.document && this.document.body && this.document.body.contains(node));
+        };
+        this.endDragIfSourceWasRemovedFromDOM = ()=>{
+            const node = this.currentDragSourceNode;
+            if (node == null || this.isNodeInDocument(node)) {
+                return;
+            }
+            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.scheduleHover = (dragOverTargetIds)=>{
+            if (this.hoverRafId === null && typeof requestAnimationFrame !== 'undefined') {
+                this.hoverRafId = requestAnimationFrame(()=>{
+                    if (this.monitor.isDragging()) {
+                        this.actions.hover(dragOverTargetIds || [], {
+                            clientOffset: this.lastClientOffset
+                        });
+                    }
+                    this.hoverRafId = null;
+                });
+            }
+        };
+        this.cancelHover = ()=>{
+            if (this.hoverRafId !== null && typeof cancelAnimationFrame !== 'undefined') {
+                cancelAnimationFrame(this.hoverRafId);
+                this.hoverRafId = null;
+            }
+        };
+        this.handleTopDragStartCapture = ()=>{
+            this.clearCurrentDragSourceNode();
+            this.dragStartSourceIds = [];
+        };
+        this.handleTopDragStart = (e)=>{
+            if (e.defaultPrevented) {
+                return;
+            }
+            const { dragStartSourceIds  } = this;
+            this.dragStartSourceIds = null;
+            const clientOffset = getEventClientOffset(e);
+            // Avoid crashing if we missed a drop event or our previous drag died
+            if (this.monitor.isDragging()) {
+                this.actions.endDrag();
+                this.cancelHover();
+            }
+            // Don't publish the source just yet (see why below)
+            this.actions.beginDrag(dragStartSourceIds || [], {
+                publishSource: false,
+                getSourceClientOffset: this.getSourceClientOffset,
+                clientOffset
+            });
+            const { dataTransfer  } = e;
+            const nativeType = matchNativeItemType(dataTransfer);
+            if (this.monitor.isDragging()) {
+                if (dataTransfer && typeof dataTransfer.setDragImage === 'function') {
+                    // Use custom drag image if user specifies it.
+                    // If child drag source refuses drag but parent agrees,
+                    // use parent's node as drag image. Neither works in IE though.
+                    const sourceId = this.monitor.getSourceId();
+                    const sourceNode = this.sourceNodes.get(sourceId);
+                    const dragPreview = this.sourcePreviewNodes.get(sourceId) || sourceNode;
+                    if (dragPreview) {
+                        const { anchorX , anchorY , offsetX , offsetY  } = this.getCurrentSourcePreviewNodeOptions();
+                        const anchorPoint = {
+                            anchorX,
+                            anchorY
+                        };
+                        const offsetPoint = {
+                            offsetX,
+                            offsetY
+                        };
+                        const dragPreviewOffset = getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint, offsetPoint);
+                        dataTransfer.setDragImage(dragPreview, dragPreviewOffset.x, dragPreviewOffset.y);
+                    }
+                }
+                try {
+                    // Firefox won't drag without setting data
+                    dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.setData('application/json', {});
+                } catch (err) {
+                // IE doesn't support MIME types in setData
+                }
+                // Store drag source node so we can check whether
+                // it is removed from DOM and trigger endDrag manually.
+                this.setCurrentDragSourceNode(e.target);
+                // Now we are ready to publish the drag source.. or are we not?
+                const { captureDraggingState  } = this.getCurrentSourcePreviewNodeOptions();
+                if (!captureDraggingState) {
+                    // Usually we want to publish it in the next tick so that browser
+                    // is able to screenshot the current (not yet dragging) state.
+                    //
+                    // It also neatly avoids a situation where render() returns null
+                    // in the same tick for the source element, and browser freaks out.
+                    setTimeout(()=>this.actions.publishDragSource()
+                    , 0);
+                } else {
+                    // In some cases the user may want to override this behavior, e.g.
+                    // to work around IE not supporting custom drag previews.
+                    //
+                    // When using a custom drag layer, the only way to prevent
+                    // the default drag preview from drawing in IE is to screenshot
+                    // the dragging state in which the node itself has zero opacity
+                    // and height. In this case, though, returning null from render()
+                    // will abruptly end the dragging, which is not obvious.
+                    //
+                    // This is the reason such behavior is strictly opt-in.
+                    this.actions.publishDragSource();
+                }
+            } else if (nativeType) {
+                // A native item (such as URL) dragged from inside the document
+                this.beginDragNativeItem(nativeType);
+            } else if (dataTransfer && !dataTransfer.types && (e.target && !e.target.hasAttribute || !e.target.hasAttribute('draggable'))) {
+                // Looks like a Safari bug: dataTransfer.types is null, but there was no draggable.
+                // Just let it drag. It's a native type (URL or text) and will be picked up in
+                // dragenter handler.
+                return;
+            } else {
+                // If by this time no drag source reacted, tell browser not to drag.
+                e.preventDefault();
+            }
+        };
+        this.handleTopDragEndCapture = ()=>{
+            if (this.clearCurrentDragSourceNode() && this.monitor.isDragging()) {
+                // Firefox can dispatch this event in an infinite loop
+                // if dragend handler does something like showing an alert.
+                // Only proceed if we have not handled it already.
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.handleTopDragEnterCapture = (e)=>{
+            this.dragEnterTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            }
+            const isFirstEnter = this.enterLeaveCounter.enter(e.target);
+            if (!isFirstEnter || this.monitor.isDragging()) {
+                return;
+            }
+            const { dataTransfer  } = e;
+            const nativeType = matchNativeItemType(dataTransfer);
+            if (nativeType) {
+                // A native item (such as file or URL) dragged from outside the document
+                this.beginDragNativeItem(nativeType, dataTransfer);
+            }
+        };
+        this.handleTopDragEnter = (e)=>{
+            const { dragEnterTargetIds  } = this;
+            this.dragEnterTargetIds = [];
+            if (!this.monitor.isDragging()) {
+                // This is probably a native item type we don't understand.
+                return;
+            }
+            this.altKeyPressed = e.altKey;
+            // If the target changes position as the result of `dragenter`, `dragover` might still
+            // get dispatched despite target being no longer there. The easy solution is to check
+            // whether there actually is a target before firing `hover`.
+            if (dragEnterTargetIds.length > 0) {
+                this.actions.hover(dragEnterTargetIds, {
+                    clientOffset: getEventClientOffset(e)
+                });
+            }
+            const canDrop = dragEnterTargetIds.some((targetId)=>this.monitor.canDropOnTarget(targetId)
+            );
+            if (canDrop) {
+                // IE requires this to fire dragover events
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+                }
+            }
+        };
+        this.handleTopDragOverCapture = (e)=>{
+            this.dragOverTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            }
+        };
+        this.handleTopDragOver = (e)=>{
+            const { dragOverTargetIds  } = this;
+            this.dragOverTargetIds = [];
+            if (!this.monitor.isDragging()) {
+                // This is probably a native item type we don't understand.
+                // Prevent default "drop and blow away the whole document" action.
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'none';
+                }
+                return;
+            }
+            this.altKeyPressed = e.altKey;
+            this.lastClientOffset = getEventClientOffset(e);
+            this.scheduleHover(dragOverTargetIds);
+            const canDrop = (dragOverTargetIds || []).some((targetId)=>this.monitor.canDropOnTarget(targetId)
+            );
+            if (canDrop) {
+                // Show user-specified drop effect.
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = this.getCurrentDropEffect();
+                }
+            } else if (this.isDraggingNativeItem()) {
+                // Don't show a nice cursor but still prevent default
+                // "drop and blow away the whole document" action.
+                e.preventDefault();
+            } else {
+                e.preventDefault();
+                if (e.dataTransfer) {
+                    e.dataTransfer.dropEffect = 'none';
+                }
+            }
+        };
+        this.handleTopDragLeaveCapture = (e)=>{
+            if (this.isDraggingNativeItem()) {
+                e.preventDefault();
+            }
+            const isLastLeave = this.enterLeaveCounter.leave(e.target);
+            if (!isLastLeave) {
+                return;
+            }
+            if (this.isDraggingNativeItem()) {
+                setTimeout(()=>this.endDragNativeItem()
+                , 0);
+            }
+            this.cancelHover();
+        };
+        this.handleTopDropCapture = (e)=>{
+            this.dropTargetIds = [];
+            if (this.isDraggingNativeItem()) {
+                var ref;
+                e.preventDefault();
+                (ref = this.currentNativeSource) === null || ref === void 0 ? void 0 : ref.loadDataTransfer(e.dataTransfer);
+            } else if (matchNativeItemType(e.dataTransfer)) {
+                // Dragging some elements, like <a> and <img> may still behave like a native drag event,
+                // even if the current drag event matches a user-defined type.
+                // Stop the default behavior when we're not expecting a native item to be dropped.
+                e.preventDefault();
+            }
+            this.enterLeaveCounter.reset();
+        };
+        this.handleTopDrop = (e)=>{
+            const { dropTargetIds  } = this;
+            this.dropTargetIds = [];
+            this.actions.hover(dropTargetIds, {
+                clientOffset: getEventClientOffset(e)
+            });
+            this.actions.drop({
+                dropEffect: this.getCurrentDropEffect()
+            });
+            if (this.isDraggingNativeItem()) {
+                this.endDragNativeItem();
+            } else if (this.monitor.isDragging()) {
+                this.actions.endDrag();
+            }
+            this.cancelHover();
+        };
+        this.handleSelectStart = (e)=>{
+            const target = e.target;
+            // Only IE requires us to explicitly say
+            // we want drag drop operation to start
+            if (typeof target.dragDrop !== 'function') {
+                return;
+            }
+            // Inputs and textareas should be selectable
+            if (target.tagName === 'INPUT' || target.tagName === 'SELECT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            // For other targets, ask IE
+            // to enable drag and drop
+            e.preventDefault();
+            target.dragDrop();
+        };
+        this.options = new OptionsReader(globalContext, options);
+        this.actions = manager.getActions();
+        this.monitor = manager.getMonitor();
+        this.registry = manager.getRegistry();
+        this.enterLeaveCounter = new EnterLeaveCounter(this.isNodeInDocument);
+    }
+}
+
+let emptyImage;
+function getEmptyImage() {
+    if (!emptyImage) {
+        emptyImage = new Image();
+        emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+    }
+    return emptyImage;
+}
+
+const HTML5Backend = function createBackend(manager, context, options) {
+    return new HTML5BackendImpl(manager, context, options);
+};
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
+
+function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classPrivateFieldGet$1(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor$1(receiver, privateMap, "get"); return _classApplyDescriptorGet$1(receiver, descriptor); }
+
+function _classApplyDescriptorGet$1(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet$1(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor$1(receiver, privateMap, "set"); _classApplyDescriptorSet$1(receiver, descriptor, value); return value; }
+
+function _classExtractFieldDescriptor$1(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+
+function _classApplyDescriptorSet$1(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+
+var _previews$1 = new WeakMap();
+
+var PreviewListImpl =
+/*private*/
+function PreviewListImpl() {
+  var _this = this;
+
+  _classCallCheck$1(this, PreviewListImpl);
+
+  _previews$1.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _defineProperty$1(this, "register", function (preview) {
+    _classPrivateFieldGet$1(_this, _previews$1).push(preview);
+  });
+
+  _defineProperty$1(this, "unregister", function (preview) {
+    var index;
+
+    while ((index = _classPrivateFieldGet$1(_this, _previews$1).indexOf(preview)) !== -1) {
+      _classPrivateFieldGet$1(_this, _previews$1).splice(index, 1);
+    }
+  });
+
+  _defineProperty$1(this, "backendChanged", function (backend) {
+    var _iterator = _createForOfIteratorHelper(_classPrivateFieldGet$1(_this, _previews$1)),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var preview = _step.value;
+        preview.backendChanged(backend);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  });
+
+  _classPrivateFieldSet$1(this, _previews$1, []);
+};
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
+
+function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
+
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+
+function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
+
+var _current = new WeakMap();
+
+var _previews = new WeakMap();
+
+var _backends = new WeakMap();
+
+var _backendsList = new WeakMap();
+
+var _nodes = new WeakMap();
+
+var _createBackend = new WeakMap();
+
+var _addEventListeners = new WeakMap();
+
+var _removeEventListeners = new WeakMap();
+
+var _backendSwitcher = new WeakMap();
+
+var _callBackend = new WeakMap();
+
+var _connectBackend = new WeakMap();
+
+var MultiBackendImpl =
+/*private*/
+
+/*private*/
+
+/*private*/
+
+/*private*/
+
+/*private*/
+function MultiBackendImpl(_manager, _context, _options) {
+  var _this = this;
+
+  _classCallCheck(this, MultiBackendImpl);
+
+  _current.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _previews.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _backends.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _backendsList.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _nodes.set(this, {
+    writable: true,
+    value: void 0
+  });
+
+  _createBackend.set(this, {
+    writable: true,
+    value: function value(manager, context, backend) {
+      var _backend$preview, _backend$skipDispatch;
+
+      if (!backend.backend) {
+        throw new Error("You must specify a 'backend' property in your Backend entry: ".concat(JSON.stringify(backend)));
+      }
+
+      var instance = backend.backend(manager, context, backend.options);
+      var id = backend.id; // Try to infer an `id` if one doesn't exist
+
+      var inferName = !backend.id && instance && instance.constructor;
+
+      if (inferName) {
+        id = instance.constructor.name;
+      }
+
+      if (!id) {
+        throw new Error("You must specify an 'id' property in your Backend entry: ".concat(JSON.stringify(backend), "\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-5xx"));
+      } else if (inferName) {
+        console.warn( // eslint-disable-line no-console
+        "Deprecation notice: You are using a pipeline which doesn't include backends' 'id'.\n        This might be unsupported in the future, please specify 'id' explicitely for every backend.");
+      }
+
+      if (_classPrivateFieldGet(_this, _backends)[id]) {
+        throw new Error("You must specify a unique 'id' property in your Backend entry:\n        ".concat(JSON.stringify(backend), " (conflicts with: ").concat(JSON.stringify(_classPrivateFieldGet(_this, _backends)[id]), ")"));
+      }
+
+      return {
+        id: id,
+        instance: instance,
+        preview: (_backend$preview = backend.preview) !== null && _backend$preview !== void 0 ? _backend$preview : false,
+        transition: backend.transition,
+        skipDispatchOnTransition: (_backend$skipDispatch = backend.skipDispatchOnTransition) !== null && _backend$skipDispatch !== void 0 ? _backend$skipDispatch : false
+      };
+    }
+  });
+
+  _defineProperty(this, "setup", function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    if (MultiBackendImpl.isSetUp) {
+      throw new Error('Cannot have two MultiBackends at the same time.');
+    }
+
+    MultiBackendImpl.isSetUp = true;
+
+    _classPrivateFieldGet(_this, _addEventListeners).call(_this, window);
+
+    _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.setup();
+  });
+
+  _defineProperty(this, "teardown", function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    MultiBackendImpl.isSetUp = false;
+
+    _classPrivateFieldGet(_this, _removeEventListeners).call(_this, window);
+
+    _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.teardown();
+  });
+
+  _defineProperty(this, "connectDragSource", function (sourceId, node, options) {
+    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDragSource', sourceId, node, options);
+  });
+
+  _defineProperty(this, "connectDragPreview", function (sourceId, node, options) {
+    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDragPreview', sourceId, node, options);
+  });
+
+  _defineProperty(this, "connectDropTarget", function (sourceId, node, options) {
+    return _classPrivateFieldGet(_this, _connectBackend).call(_this, 'connectDropTarget', sourceId, node, options);
+  });
+
+  _defineProperty(this, "profile", function () {
+    return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance.profile();
+  });
+
+  _defineProperty(this, "previewEnabled", function () {
+    return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].preview;
+  });
+
+  _defineProperty(this, "previewsList", function () {
+    return _classPrivateFieldGet(_this, _previews);
+  });
+
+  _defineProperty(this, "backendsList", function () {
+    return _classPrivateFieldGet(_this, _backendsList);
+  });
+
+  _addEventListeners.set(this, {
+    writable: true,
+    value: function value(target) {
+      _classPrivateFieldGet(_this, _backendsList).forEach(function (backend) {
+        if (backend.transition) {
+          target.addEventListener(backend.transition.event, _classPrivateFieldGet(_this, _backendSwitcher));
+        }
+      });
+    }
+  });
+
+  _removeEventListeners.set(this, {
+    writable: true,
+    value: function value(target) {
+      _classPrivateFieldGet(_this, _backendsList).forEach(function (backend) {
+        if (backend.transition) {
+          target.removeEventListener(backend.transition.event, _classPrivateFieldGet(_this, _backendSwitcher));
+        }
+      });
+    }
+  });
+
+  _backendSwitcher.set(this, {
+    writable: true,
+    value: function value(event) {
+      var oldBackend = _classPrivateFieldGet(_this, _current);
+
+      _classPrivateFieldGet(_this, _backendsList).some(function (backend) {
+        if (backend.id !== _classPrivateFieldGet(_this, _current) && backend.transition && backend.transition.check(event)) {
+          _classPrivateFieldSet(_this, _current, backend.id);
+
+          return true;
+        }
+
+        return false;
+      });
+
+      if (_classPrivateFieldGet(_this, _current) !== oldBackend) {
+        var _event$target;
+
+        _classPrivateFieldGet(_this, _backends)[oldBackend].instance.teardown();
+
+        Object.keys(_classPrivateFieldGet(_this, _nodes)).forEach(function (id) {
+          var _classPrivateFieldGet2;
+
+          var node = _classPrivateFieldGet(_this, _nodes)[id];
+
+          node.unsubscribe();
+          node.unsubscribe = (_classPrivateFieldGet2 = _classPrivateFieldGet(_this, _callBackend)).call.apply(_classPrivateFieldGet2, [_this, node.func].concat(_toConsumableArray(node.args)));
+        });
+
+        _classPrivateFieldGet(_this, _previews).backendChanged(_this);
+
+        var newBackend = _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)];
+
+        newBackend.instance.setup();
+
+        if (newBackend.skipDispatchOnTransition) {
+          return;
+        }
+
+        var newEvent = null;
+
+        try {
+          newEvent = event.constructor(event.type, event);
+        } catch (_e) {
+          newEvent = document.createEvent('Event');
+          newEvent.initEvent(event.type, event.bubbles, event.cancelable);
+        }
+
+        (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.dispatchEvent(newEvent);
+      }
+    }
+  });
+
+  _callBackend.set(this, {
+    writable: true,
+    value: function value(func, sourceId, node, options) {
+      return _classPrivateFieldGet(_this, _backends)[_classPrivateFieldGet(_this, _current)].instance[func](sourceId, node, options);
+    }
+  });
+
+  _connectBackend.set(this, {
+    writable: true,
+    value: function value(func, sourceId, node, options) {
+      var nodeId = "".concat(func, "_").concat(sourceId);
+
+      var unsubscribe = _classPrivateFieldGet(_this, _callBackend).call(_this, func, sourceId, node, options);
+
+      _classPrivateFieldGet(_this, _nodes)[nodeId] = {
+        func: func,
+        args: [sourceId, node, options],
+        unsubscribe: unsubscribe
+      };
+      return function () {
+        _classPrivateFieldGet(_this, _nodes)[nodeId].unsubscribe();
+
+        delete _classPrivateFieldGet(_this, _nodes)[nodeId];
+      };
+    }
+  });
+
+  if (!_options || !_options.backends || _options.backends.length < 1) {
+    throw new Error("You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)\n        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx");
+  }
+
+  _classPrivateFieldSet(this, _previews, new PreviewListImpl());
+
+  _classPrivateFieldSet(this, _backends, {});
+
+  _classPrivateFieldSet(this, _backendsList, []);
+
+  _options.backends.forEach(function (backend) {
+    var backendRecord = _classPrivateFieldGet(_this, _createBackend).call(_this, _manager, _context, backend);
+
+    _classPrivateFieldGet(_this, _backends)[backendRecord.id] = backendRecord;
+
+    _classPrivateFieldGet(_this, _backendsList).push(backendRecord);
+  });
+
+  _classPrivateFieldSet(this, _current, _classPrivateFieldGet(this, _backendsList)[0].id);
+
+  _classPrivateFieldSet(this, _nodes, {});
+};
+
+_defineProperty(MultiBackendImpl, "isSetUp", false);
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -9375,25 +12178,26 @@ var TreeView = function (_a, ref) {
             setShowTree(false);
         }
     }, [initialOpen, treeData]);
-    return (React__default.createElement(React__default.Fragment, null, showTree && (React__default.createElement(Tree, { ref: ref, tree: list, classes: {
-            root: 'pl-0 ml-0 !border-l-0',
-            container: 'border-l pl-2 ml-3 border-l-gray-300 relative',
-            listItem: 'flex text-sm font-medium rounded-md flex-col',
-            dropTarget: 'classes-dropTarget',
-            draggingSource: 'classes-draggingSource',
-            placeholder: 'bg-purple-500 h-[2px] absolute w-[calc(100%-16px)] left-4'
-        }, rootId: 0, onDrop: handleDrop, sort: false, insertDroppableFirst: false, canDrop: function (tree, _a) {
-            var dragSource = _a.dragSource, dropTargetId = _a.dropTargetId;
-            if ((dragSource === null || dragSource === void 0 ? void 0 : dragSource.parent) === dropTargetId) {
-                return true;
-            }
-        }, initialOpen: openKeys, dropTargetOffset: 5, placeholderRender: function (node, _a) {
-            var depth = _a.depth;
-            return (React__default.createElement(Placeholder, { node: node, depth: depth }));
-        }, render: function (node, _a) {
-            var depth = _a.depth, isOpen = _a.isOpen, onToggle = _a.onToggle;
-            return (React__default.createElement(CustomNode, { node: node, depth: depth, isOpen: isOpen, onToggle: onToggle, onUpdate: handleUpdateList }));
-        } }))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(DndProvider, { backend: HTML5Backend }, showTree && (React__default.createElement(Tree, { ref: ref, tree: list, classes: {
+                root: 'pl-0 ml-0 !border-l-0',
+                container: 'border-l pl-2 ml-3 border-l-gray-300 relative',
+                listItem: 'flex text-sm font-medium rounded-md flex-col',
+                dropTarget: 'classes-dropTarget',
+                draggingSource: 'classes-draggingSource',
+                placeholder: 'bg-purple-500 h-[2px] absolute w-[calc(100%-16px)] left-4'
+            }, rootId: 0, onDrop: handleDrop, sort: false, insertDroppableFirst: false, canDrop: function (tree, _a) {
+                var dragSource = _a.dragSource, dropTargetId = _a.dropTargetId;
+                if ((dragSource === null || dragSource === void 0 ? void 0 : dragSource.parent) === dropTargetId) {
+                    return true;
+                }
+            }, initialOpen: openKeys, dropTargetOffset: 5, placeholderRender: function (node, _a) {
+                var depth = _a.depth;
+                return (React__default.createElement(Placeholder, { node: node, depth: depth }));
+            }, render: function (node, _a) {
+                var depth = _a.depth, isOpen = _a.isOpen, onToggle = _a.onToggle;
+                return (React__default.createElement(CustomNode, { node: node, depth: depth, isOpen: isOpen, onToggle: onToggle, onUpdate: handleUpdateList }));
+            } })))));
 };
 var _TreeView = forwardRef(TreeView);
 
@@ -9471,7 +12275,7 @@ var TextInput = function (_a) {
         setIsFocus(false);
         setIsActive(!(input && input.value === ''));
     };
-    var inputStyles = cn$1('border py-2 px-3 rounded-md text-sm leading-5 font-normal w-full', { 'border-gray-300 shadow-sm': !isFocus && !isError }, { 'focus:ring-indigo-500 border-indigo-500 outline-indigo-500 shadow-none': isFocus && !isError }, { 'focus:ring-red-500 !border-red-500 shadow-none': isError });
+    var inputStyles = cn$1('border py-2 px-3 rounded-md text-sm leading-5 font-normal w-full', { 'border-gray-300 shadow-sm': !isFocus && !isError }, { 'focus:ring-purple-500 border-purple-500 outline-purple-500 shadow-none': isFocus && !isError }, { 'focus:ring-red-500 !border-red-500 shadow-none': isError });
     var discriptionStyles = cn$1('text-sm mt-1 block', { 'text-gray-500': !isError }, { 'text-red-500': isError });
     return (React__default.createElement("div", null,
         React__default.createElement(InputLabel, { isPlaceholder: true, label: label, isRequired: isRequired, id: id, isError: isError, isActive: isActive, isDisabled: isDisabled }),
@@ -9489,7 +12293,7 @@ var InputCta = function (_a) {
     var handleClick = function () {
         onClickHandler && onClickHandler();
     };
-    var buttonStyle = cn$1('relative z-10 inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500', {
+    var buttonStyle = cn$1('relative z-10 inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500', {
         'rounded-r-md text-gray-700 -ml-px': align === 'right'
     }, {
         'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left'
@@ -9542,7 +12346,7 @@ var TextInputAddon = function (_a) {
         setIsFocus(false);
         // add other focus effects here
     };
-    var inputStyles = cn$1('border py-2 px-3 rounded-md text-sm leading-5 font-normal w-full border-gray-300 shadow-sm', { 'focus:ring-red-500 border-red-500 outline-red-500 shadow-none': isError }, { 'pl-10': inlineIcon }, { '!rounded-r-none !rounded-l-md': (trailIcon || trailLabel) && !(leadIcon || leadLabel) }, { '!rounded-r-none !rounded-r-md': !(trailIcon || trailLabel) && (leadIcon || leadLabel) }, { 'rounded-none': (trailIcon || trailLabel) && (leadIcon || leadLabel) });
+    var inputStyles = cn$1('border py-2 px-3 rounded-md text-sm leading-5 font-normal w-full border-gray-300 outline-purple-500 shadow-sm focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500 ', { 'focus:ring-red-500 !border-red-500 !outline-red-500 shadow-none': isError }, { 'pl-10': inlineIcon }, { '!rounded-r-none !rounded-l-md': (trailIcon || trailLabel) && !(leadIcon || leadLabel) }, { '!rounded-r-none !rounded-r-md': !(trailIcon || trailLabel) && (leadIcon || leadLabel) }, { 'rounded-none': (trailIcon || trailLabel) && (leadIcon || leadLabel) });
     var discriptionStyles = cn$1('text-sm mt-1 block', { 'text-gray-500': !isError }, { 'text-red-500': isError });
     return (React__default.createElement("div", null,
         label && (React__default.createElement(InputLabel, { label: label, isRequired: isRequired, id: id, isError: isError, isDisabled: isDisabled })),
@@ -9568,7 +12372,7 @@ var InputSelect = function (_a) {
         onSelectOption && onSelectOption(targetValue);
         setSelectedOption(targetValue);
     };
-    var selectStyle = cn$1('relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500', { 'rounded-r-md text-gray-700 -ml-px': align === 'right' }, { 'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left' }, { 'cursor-default': !onSelectOption }, { 'border-l-white': align === 'right' }, { 'border-r-white': align === 'left' });
+    var selectStyle = cn$1('relative z-10 inline-flex items-center space-x-2 bg-white px-4 py-2 pr-7 border border-gray-300 text-sm font-medium focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500', { 'rounded-r-md text-gray-700 -ml-px': align === 'right' }, { 'rounded-l-md text-gray-500 -mr-px focus-within:z-10': align === 'left' }, { 'cursor-default': !onSelectOption }, { 'border-l-white': align === 'right' }, { 'border-r-white': align === 'left' });
     if (!(inputOptions === null || inputOptions === void 0 ? void 0 : inputOptions.length))
         return null;
     return (React__default.createElement("select", { className: selectStyle, onChange: handleChange, value: selectedOption }, inputOptions.map(function (option) { return (React__default.createElement("option", { key: option.value, value: option.value }, option.label)); })));
@@ -9698,7 +12502,7 @@ var Select = function (_a) {
 /** Comment */
 var Checkbox = function (_a) {
     var label = _a.label, id = _a.id, isDisabled = _a.isDisabled, isChecked = _a.isChecked, isRequired = _a.isRequired, isError = _a.isError, message = _a.message, onChange = _a.onChange;
-    var checboxStyles = cn$1('focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded', { 'border-red-500 shadow-none': isError });
+    var checboxStyles = cn$1('focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded', { 'border-red-500 shadow-none': isError });
     var wrapperStyles = cn$1('relative flex items-start', { 'opacity-50': isDisabled });
     var handleChange = function (e) {
         var targetValue = e.currentTarget.value;