text: (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1109:function(module,exports,__webpack_require__){"use strict";var _clientApi=__webpack_require__(57),_clientLogger=__webpack_require__(37),_configFilename=__webpack_require__(1110);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}(_configFilename.args||_configFilename.argTypes)&&_clientLogger.logger.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify({args:_configFilename.args,argTypes:_configFilename.argTypes})),_configFilename.decorators&&_configFilename.decorators.forEach((function(decorator){return(0,_clientApi.addDecorator)(decorator,!1)})),_configFilename.loaders&&_configFilename.loaders.forEach((function(loader){return(0,_clientApi.addLoader)(loader,!1)})),(_configFilename.parameters||_configFilename.globals||_configFilename.globalTypes)&&(0,_clientApi.addParameters)(_objectSpread(_objectSpread({},_configFilename.parameters),{},{globals:_configFilename.globals,globalTypes:_configFilename.globalTypes}),!1),_configFilename.argTypesEnhancers&&_configFilename.argTypesEnhancers.forEach((function(enhancer){return(0,_clientApi.addArgTypesEnhancer)(enhancer)}))},1110:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"parameters",(function(){return parameters}));__webpack_require__(1111);var parameters={actions:{argTypesRegex:"^on[A-Z].*"},layout:"fullscreen"}},1111:function(module,exports,__webpack_require__){},1112:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(369).configure)([__webpack_require__(1113),__webpack_require__(1114)],module,!1)}).call(this,__webpack_require__(101)(module))},1113:function(module,exports,__webpack_require__){var map={"./Introduction.stories.mdx":1120};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1113},1114:function(module,exports,__webpack_require__){var map={"./useDrag/Drag.stories.tsx":1121};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1114},1120:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));__webpack_require__(0);var esm=__webpack_require__(8),blocks=__webpack_require__(219),code_brackets=__webpack_require__.p+"static/media/code-brackets.2e1112d7.svg",colors=__webpack_require__.p+"static/media/colors.a4bd0486.svg",comments=__webpack_require__.p+"static/media/comments.a3859089.svg",direction=__webpack_require__.p+"static/media/direction.b770f9af.svg",flow=__webpack_require__.p+"static/media/flow.edad2ac1.svg",assets_plugin=__webpack_require__.p+"static/media/plugin.d494b228.svg",repo=__webpack_require__.p+"static/media/repo.6d496322.svg",stackalt=__webpack_require__.p+"static/media/stackalt.dba9fbb3.svg";function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target}).apply(this,arguments)}const layoutProps={};function MDXContent({components:components,...props}){return Object(esm.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(esm.mdx)(blocks.Meta,{title:"Introduction",mdxType:"Meta"}),Object(esm.mdx)("style",null,"\n  .subheading {\n    --mediumdark: '#999999';\n    font-weight: 900;\n    font-size: 13px;\n    color: #999;\n    letter-spacing: 6px;\n    line-height: 24px;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n    margin-top: 40px;\n  }\n\n  .link-list {\n    display: grid;\n    grid-template-columns: 1fr;\n    grid-template-rows: 1fr 1fr;\n    row-gap: 10px;\n  }\n\n  @media (min-width: 620px) {\n    .link-list {\n      row-gap: 20px;\n      column-gap: 20px;\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  @media all and (-ms-high-contrast:none) {\n  .link-list {\n      display: -ms-grid;\n      -ms-grid-columns: 1fr 1fr;\n      -ms-grid-rows: 1fr 1fr;\n    }\n  }\n\n  .link-item {\n    display: block;\n    padding: 20px 30px 20px 15px;\n    border: 1px solid #00000010;\n    border-radius: 5px;\n    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;\n    color: #333333;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .link-item:hover {\n    border-color: #1EA7FD50;\n    transform: translate3d(0, -3px, 0);\n    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;\n  }\n\n  .link-item:active {\n    border-color: #1EA7FD;\n    transform: translate3d(0, 0, 0);\n  }\n\n  .link-item strong {\n    font-weight: 700;\n    display: block;\n    margin-bottom: 2px;\n  }\n  \n  .link-item img {\n    height: 40px;\n    width: 40px;\n    margin-right: 15px;\n    flex: none;\n  }\n\n  .link-item span {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .tip {\n    display: inline-block;\n    border-radius: 1em;\n    font-size: 11px;\n    line-height: 12px;\n    font-weight: 700;\n    background: #E7FDD8;\n    color: #66BF3C;\n    padding: 4px 12px;\n    margin-right: 10px;\n    vertical-align: top;\n  }\n\n  .tip-wrapper {\n    font-size: 13px;\n    line-height: 20px;\n    margin-top: 40px;\n    margin-bottom: 40px;\n  }\n\n  .tip-wrapper code {\n    font-size: 12px;\n    display: inline-block;\n  }\n\n  \n"),Object(esm.mdx)("h1",{id:"welcome-to-storybook"},"Welcome to Storybook"),Object(esm.mdx)("p",null,"Storybook helps you build UI components in isolation from your app's business logic, data, and context.\nThat makes it easy to develop hard-to-reach states. Save these UI states as ",Object(esm.mdx)("strong",{parentName:"p"},"stories")," to revisit during development, testing, or QA."),Object(esm.mdx)("p",null,"Browse example stories now by navigating to them in the sidebar.\nView their code in the ",Object(esm.mdx)("inlineCode",{parentName:"p"},"src/stories")," directory to learn how they work.\nWe recommend building UIs with a ",Object(esm.mdx)("a",{parentName:"p",href:"https://componentdriven.org",target:"_blank",rel:"nofollow noopener noreferrer"},Object(esm.mdx)("strong",{parentName:"a"},"component-driven"))," process starting with atomic components and ending with pages."),Object(esm.mdx)("div",{className:"subheading"},"Configure"),Object(esm.mdx)("div",{className:"link-list"},Object(esm.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/addons/addon-types",target:"_blank"},Object(esm.mdx)("img",{src:assets_plugin,alt:"plugin"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Presets for popular tools"),"Easy setup for TypeScript, SCSS and more.")),Object(esm.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/webpack",target:"_blank"},Object(esm.mdx)("img",{src:stackalt,alt:"Build"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Build configuration"),"How to customize webpack and Babel")),Object(esm.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/configure/styling-and-css",target:"_blank"},Object(esm.mdx)("img",{src:colors,alt:"colors"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Styling"),"How to load and configure CSS libraries")),Object(esm.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack",target:"_blank"},Object(esm.mdx)("img",{src:flow,alt:"flow"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Data"),"Providers and mocking for data libraries"))),Object(esm.mdx)("div",{className:"subheading"},"Learn"),Object(esm.mdx)("div",{className:"link-list"},Object(esm.mdx)("a",{className:"link-item",href:"https://storybook.js.org/docs",target:"_blank"},Object(esm.mdx)("img",{src:repo,alt:"repo"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Storybook documentation"),"Configure, customize, and extend")),Object(esm.mdx)("a",{className:"link-item",href:"https://www.learnstorybook.com",target:"_blank"},Object(esm.mdx)("img",{src:direction,alt:"direction"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"In-depth guides"),"Best practices from leading teams")),Object(esm.mdx)("a",{className:"link-item",href:"https://github.com/storybookjs/storybook",target:"_blank"},Object(esm.mdx)("img",{src:code_brackets,alt:"code"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"GitHub project"),"View the source and add issues")),Object(esm.mdx)("a",{className:"link-item",href:"https://discord.gg/storybook",target:"_blank"},Object(esm.mdx)("img",{src:comments,alt:"comments"}),Object(esm.mdx)("span",null,Object(esm.mdx)("strong",null,"Discord chat"),"Chat with maintainers and the community"))),Object(esm.mdx)("div",{className:"tip-wrapper"},Object(esm.mdx)("span",{className:"tip"},"Tip"),"Edit the Markdown in"," ",Object(esm.mdx)("code",null,"src/stories/Introduction.stories.mdx")))}MDXContent.isMDXComponent=!0;const __page=()=>{throw new Error("Docs-only story")};__page.parameters={docsOnly:!0};const componentMeta={title:"Introduction",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:()=>Object(esm.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(esm.mdx)(MDXContent,null))};__webpack_exports__.default=componentMeta},1121:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"DragOnly",(function(){return Drag_stories_DragOnly})),__webpack_require__.d(__webpack_exports__,"DragAndDrop",(function(){return Drag_stories_DragAndDrop}));var objectSpread2=__webpack_require__(49),react=__webpack_require__(0),taggedTemplateLiteral=__webpack_require__(489),styled_components_browser_esm=__webpack_require__(491),slicedToArray=__webpack_require__(81),lodash=__webpack_require__(490),defaultValue={hoverID:"",setHoverID:function setHoverID(){},dragData:{dragSource:"",height:0,width:0},setDragData:function setDragData(){},dropData:{dropHandlers:{}},setDropData:function setDropData(){}},context_GripsContext=Object(react.createContext)(defaultValue);function useDrag(_ref){var draggableRef=_ref.draggableRef,handleRef=_ref.handleRef,onDragStart=_ref.onDragStart,hRef=Object(react.useRef)(null),dRef=Object(react.useRef)(null),_useContext=Object(react.useContext)(context_GripsContext),setHoverID=_useContext.setHoverID,dropData=_useContext.dropData,dragData=_useContext.dragData,_useState=Object(react.useState)({isDragging:!1,draggedBy:0,clickX:0,clickY:0,currentX:0,currentY:0,deltaX:0,deltaY:0,hoverID:""}),_useState2=Object(slicedToArray.a)(_useState,2),dragState=_useState2[0],setDragState=_useState2[1];Object(react.useEffect)((function(){dragState.isDragging&&setHoverID(dragState.hoverID)}),[dragState.isDragging,setHoverID,dragState.hoverID]),Object(react.useEffect)((function(){draggableRef&&dRef.current!==draggableRef.current&&(dRef.current=draggableRef.current),handleRef&&hRef.current!==handleRef.current&&(hRef.current=handleRef.current)}),[draggableRef,handleRef]),Object(react.useEffect)((function(){var node=(null!==hRef.current?hRef:dRef).current;function onStart(e,i){dRef.current&&(dRef.current.style.zIndex="5000"),onDragStart&&onDragStart(),setDragState((function(prev){return Object(objectSpread2.a)(Object(objectSpread2.a)({},prev),{},{draggedBy:i,isDragging:!0,clickX:e.pageX,clickY:e.pageY,currentX:e.pageX,currentY:e.pageY,deltaX:0,deltaY:0})}))}function onMouseDown(e){e.preventDefault(),0===e.button&&onStart(e,1)}function onTouchStart(e){e.preventDefault(),onStart(e.touches[0],2)}return node&&(node.addEventListener("mousedown",onMouseDown),node.addEventListener("touchstart",onTouchStart)),function(){node&&(node.removeEventListener("mousedown",onMouseDown),node.removeEventListener("touchstart",onTouchStart))}}),[dRef,hRef,onDragStart]),Object(react.useEffect)((function(){function onMove(e){var X=e.pageX-dragState.clickX,Y=e.pageY-dragState.clickY;updateDropID.current(e.pageX,e.pageY),setDragState((function(prev){return Object(objectSpread2.a)(Object(objectSpread2.a)({},prev),{},{currentX:e.pageX,currentY:e.pageY,deltaX:X,deltaY:Y})}))}function onMouseMove(e){e.preventDefault(),onMove(e)}function onTouchMove(e){e.preventDefault(),onMove(e.touches[0])}function onStop(){dropData.dropHandlers[dragState.hoverID]&&dropData.dropHandlers[dragState.hoverID](dragData),setDragState((function(prev){return Object(objectSpread2.a)(Object(objectSpread2.a)({},prev),{},{isDragging:!1,draggedBy:0,deltaX:0,deltaY:0,hoverID:""})})),setHoverID(""),setTimeout((function(){dRef.current&&(dRef.current.style.zIndex="unset")}),300)}function onMouseUp(e){e.preventDefault(),onStop()}function onTouchEnd(e){e.preventDefault(),onStop()}return 1===dragState.draggedBy&&(document.addEventListener("mousemove",onMouseMove),document.addEventListener("mouseup",onMouseUp)),2===dragState.draggedBy&&(document.addEventListener("touchmove",onTouchMove,{passive:!1}),document.addEventListener("touchend",onTouchEnd,{passive:!1})),function(){document.removeEventListener("mousemove",onMouseMove),document.removeEventListener("mouseup",onMouseUp),document.removeEventListener("touchmove",onTouchMove),document.removeEventListener("touchend",onTouchEnd)}}),[dragState.draggedBy,dragState.clickX,dragState.clickY,setHoverID,dragState.hoverID,dropData.dropHandlers,dragData]);var updateDropID=Object(react.useRef)(Object(lodash.throttle)((function(x,y){var drop;document.elementsFromPoint(x,y).forEach((function(el){void 0===drop&&(null==el?void 0:el.getAttribute("data-dropid"))&&el!==dRef.current&&(drop=el)})),setDragState((function(prev){var _drop,h=prev.isDragging&&(null===(_drop=drop)||void 0===_drop?void 0:_drop.getAttribute("data-dropid"))||"";return Object(objectSpread2.a)(Object(objectSpread2.a)({},prev),{},{hoverID:h})}))}),256));return{draggableRef:dRef,handleRef:hRef,dragState:dragState}}try{useDrag.displayName="useDrag",useDrag.__docgenInfo={description:"",displayName:"useDrag",props:{draggableRef:{defaultValue:null,description:"",name:"draggableRef",required:!1,type:{name:"MutableRefObject<HTMLDivElement | null>"}},handleRef:{defaultValue:null,description:"",name:"handleRef",required:!1,type:{name:"MutableRefObject<HTMLDivElement | null>"}},onDragStart:{defaultValue:null,description:"",name:"onDragStart",required:!1,type:{name:"((props?: any) => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/hooks/useDrag.tsx#useDrag"]={docgenInfo:useDrag.__docgenInfo,name:"useDrag",path:"src/hooks/useDrag.tsx#useDrag"})}catch(__react_docgen_typescript_loader_error){}var _templateObject,jsx_runtime=__webpack_require__(24),Header=styled_components_browser_esm.a.div(_templateObject||(_templateObject=Object(taggedTemplateLiteral.a)(["\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n"])));function Card(props){var _useDrag=useDrag({}),draggableRef=_useDrag.draggableRef,handleRef=_useDrag.handleRef,dragState=_useDrag.dragState;return Object(jsx_runtime.jsxs)("div",{ref:draggableRef,style:{display:"flex",flexDirection:"column",width:"150px",backgroundColor:"white",padding:"2rem",borderRadius:"1rem",border:"1px solid #eee",transition:dragState.isDragging?"0s":"0.3s",transform:"translate(".concat(dragState.deltaX,"px, ").concat(dragState.deltaY,"px)"),opacity:dragState.hoverID?"0.5":"unset"},children:[Object(jsx_runtime.jsx)(Header,{children:Object(jsx_runtime.jsx)("h2",{ref:handleRef,style:{margin:0},children:props.title})}),props.children]})}try{DraggableCard.displayName="DraggableCard",DraggableCard.__docgenInfo={description:"",displayName:"DraggableCard",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/components/DraggableCard.tsx#DraggableCard"]={docgenInfo:DraggableCard.__docgenInfo,name:"DraggableCard",path:"src/stories/components/DraggableCard.tsx#DraggableCard"})}catch(__react_docgen_typescript_loader_error){}function DragOnly_DragOnly(){return Object(jsx_runtime.jsx)("div",{style:{display:"flex",height:"100vh",width:"100vw",overflow:"hidden",alignItems:"center",justifyContent:"center",backgroundColor:"#f8f8f8"},children:Object(jsx_runtime.jsx)(Card,{title:"Drag Me",children:Object(jsx_runtime.jsxs)("p",{children:["text text text",Object(jsx_runtime.jsx)("br",{})," more text ",Object(jsx_runtime.jsx)("br",{})," even more text!! (but longer)",Object(jsx_runtime.jsx)("br",{})," text"]})})})}var toConsumableArray=__webpack_require__(493),defineProperty=__webpack_require__(74),classnames=__webpack_require__(327),classnames_default=__webpack_require__.n(classnames);function GripsProvider(_ref){var children=_ref.children,_useState=Object(react.useState)(defaultValue.hoverID),_useState2=Object(slicedToArray.a)(_useState,2),gripsHoverID=_useState2[0],setgripsHoverID=_useState2[1],_useState3=Object(react.useState)(defaultValue.dragData),_useState4=Object(slicedToArray.a)(_useState3,2),gripsDragData=_useState4[0],setGripsDragData=_useState4[1],_useState5=Object(react.useState)(defaultValue.dropData),_useState6=Object(slicedToArray.a)(_useState5,2),gripsDropData=_useState6[0],setGripsDropData=_useState6[1];return Object(jsx_runtime.jsx)(context_GripsContext.Provider,{value:{hoverID:gripsHoverID,setHoverID:setgripsHoverID,dragData:gripsDragData,setDragData:setGripsDragData,dropData:gripsDropData,setDropData:setGripsDropData},children:children})}try{GripsProvider.displayName="GripsProvider",GripsProvider.__docgenInfo={description:"",displayName:"GripsProvider",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/context/GripsProvider.tsx#GripsProvider"]={docgenInfo:GripsProvider.__docgenInfo,name:"GripsProvider",path:"src/context/GripsProvider.tsx#GripsProvider"})}catch(__react_docgen_typescript_loader_error){}function useDrop(_ref){var dropID=_ref.dropID,dropHandler=_ref.dropHandler,_useContext=Object(react.useContext)(context_GripsContext),hoverID=_useContext.hoverID,dragData=_useContext.dragData,setDropData=_useContext.setDropData,_useState=Object(react.useState)(!1),_useState2=Object(slicedToArray.a)(_useState,2),isDraggedOver=_useState2[0],setIsDraggedOver=_useState2[1];return Object(react.useEffect)((function(){setIsDraggedOver((function(){return hoverID===dropID}))}),[hoverID,dropID]),Object(react.useEffect)((function(){setDropData((function(prev){return Object(objectSpread2.a)(Object(objectSpread2.a)({},prev),{},{dropHandlers:Object(objectSpread2.a)(Object(objectSpread2.a)({},prev.dropHandlers),{},Object(defineProperty.a)({},dropID,dropHandler))})}))}),[setDropData,dropID,dropHandler]),{isDraggedOver:isDraggedOver,dragData:dragData}}try{useDrop.displayName="useDrop",useDrop.__docgenInfo={description:"",displayName:"useDrop",props:{dropID:{defaultValue:null,description:"",name:"dropID",required:!0,type:{name:"string"}},dropHandler:{defaultValue:null,description:"",name:"dropHandler",required:!0,type:{name:"(props: DragDataType) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/hooks/useDrop.tsx#useDrop"]={docgenInfo:useDrop.__docgenInfo,name:"useDrop",path:"src/hooks/useDrop.tsx#useDrop"})}catch(__react_docgen_typescript_loader_error){}var DragAndDrop_module=__webpack_require__(59),DragAndDrop_module_default=__webpack_require__.n(DragAndDrop_module);function DragAndDrop_DraggableCard(props){var _classNames,_useDrag=useDrag({onDragStart:function handleDragStart(){var _draggableRef$current,_draggableRef$current2;setDragData({dragSource:"CARD",height:(null===(_draggableRef$current=draggableRef.current)||void 0===_draggableRef$current?void 0:_draggableRef$current.clientHeight)||0,width:(null===(_draggableRef$current2=draggableRef.current)||void 0===_draggableRef$current2?void 0:_draggableRef$current2.clientWidth)||0,payload:{text:"".concat(Math.random())}})}}),draggableRef=_useDrag.draggableRef,handleRef=_useDrag.handleRef,dragState=_useDrag.dragState,setDragData=Object(react.useContext)(context_GripsContext).setDragData;return Object(jsx_runtime.jsxs)("div",{ref:draggableRef,style:{transform:"translate(".concat(dragState.deltaX,"px, ").concat(dragState.deltaY,"px)")},className:classnames_default()((_classNames={},Object(defineProperty.a)(_classNames,DragAndDrop_module_default.a.Card,!0),Object(defineProperty.a)(_classNames,DragAndDrop_module_default.a.TransformTransition,dragState.isDragging),Object(defineProperty.a)(_classNames,DragAndDrop_module_default.a.Opacity,dragState.hoverID),_classNames)),children:[Object(jsx_runtime.jsx)("div",{className:DragAndDrop_module_default.a.Header,children:Object(jsx_runtime.jsx)("h2",{className:DragAndDrop_module_default.a.Grab,ref:handleRef,children:props.title})}),props.children]})}function Droppable(props){var _classNames2,_useState=Object(react.useState)([{title:"1",text:"one"},{title:"2",text:"two"},{title:"3",text:"three"},{title:"1",text:"one"},{title:"2",text:"two"},{title:"3",text:"three"}]),_useState2=Object(slicedToArray.a)(_useState,2),list=_useState2[0],setList=_useState2[1],_useDrag2=useDrag({}),draggableRef=_useDrag2.draggableRef,handleRef=_useDrag2.handleRef,dragState=_useDrag2.dragState,_useDrop=useDrop({dropID:"drop1",dropHandler:Object(react.useCallback)((function(dragData){console.log("dropped"),setList((function(prev){var _dragData$payload;return[{title:"".concat(dragData.dragSource),text:" - ".concat(null===(_dragData$payload=dragData.payload)||void 0===_dragData$payload?void 0:_dragData$payload.text)}].concat(Object(toConsumableArray.a)(prev))}))}),[])}),isDraggedOver=_useDrop.isDraggedOver,dragData=_useDrop.dragData;return Object(jsx_runtime.jsxs)("div",{ref:draggableRef,className:classnames_default()((_classNames2={},Object(defineProperty.a)(_classNames2,DragAndDrop_module_default.a.Droppable,!0),Object(defineProperty.a)(_classNames2,DragAndDrop_module_default.a.TransformTransition,dragState.isDragging),Object(defineProperty.a)(_classNames2,DragAndDrop_module_default.a.Opacity,dragState.hoverID),_classNames2)),"data-dropid":"drop1",style:{transform:"translate(".concat(dragState.deltaX,"px, ").concat(dragState.deltaY,"px)")},children:[Object(jsx_runtime.jsx)("div",{className:DragAndDrop_module_default.a.Header,children:Object(jsx_runtime.jsx)("h2",{className:DragAndDrop_module_default.a.Grab,ref:handleRef,children:props.title})}),Object(jsx_runtime.jsx)("div",{className:DragAndDrop_module_default.a.Placeholder,style:{height:isDraggedOver?"".concat(dragData.height,"px"):"0px"},children:"+"}),list.map((function(item,index){return Object(jsx_runtime.jsxs)("div",{className:DragAndDrop_module_default.a.Item,children:[item.title,item.text]},index)})),props.children]})}function DragAndDrop_DragAndDrop(){return Object(jsx_runtime.jsx)(GripsProvider,{children:Object(jsx_runtime.jsxs)("div",{className:DragAndDrop_module_default.a.Container,children:[Object(jsx_runtime.jsx)(DragAndDrop_DraggableCard,{title:"Drag Me",dragData:{title:"this is new"},children:Object(jsx_runtime.jsxs)("p",{children:["text text text",Object(jsx_runtime.jsx)("br",{})," more text ",Object(jsx_runtime.jsx)("br",{})," even more text!! (but longer)",Object(jsx_runtime.jsx)("br",{})," text"]})}),Object(jsx_runtime.jsx)(Droppable,{title:"DROP HERE"})]})})}__webpack_exports__.default={title:"useDrag"};var Drag_stories_DragOnly=function DragOnly(){return Object(jsx_runtime.jsx)(DragOnly_DragOnly,{})},Drag_stories_DragAndDrop=function DragAndDrop(){return Object(jsx_runtime.jsx)(DragAndDrop_DragAndDrop,{})};Drag_stories_DragOnly.parameters=Object(objectSpread2.a)({storySource:{source:"() => <DragOnlyImport />"}},Drag_stories_DragOnly.parameters),Drag_stories_DragAndDrop.parameters=Object(objectSpread2.a)({storySource:{source:"() => <DragAndDropImport />"}},Drag_stories_DragAndDrop.parameters);try{Drag_stories_DragOnly.displayName="DragOnly",Drag_stories_DragOnly.__docgenInfo={description:"",displayName:"DragOnly",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/useDrag/Drag.stories.tsx#DragOnly"]={docgenInfo:Drag_stories_DragOnly.__docgenInfo,name:"DragOnly",path:"src/stories/useDrag/Drag.stories.tsx#DragOnly"})}catch(__react_docgen_typescript_loader_error){}try{Drag_stories_DragAndDrop.displayName="DragAndDrop",Drag_stories_DragAndDrop.__docgenInfo={description:"",displayName:"DragAndDrop",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/stories/useDrag/Drag.stories.tsx#DragAndDrop"]={docgenInfo:Drag_stories_DragAndDrop.__docgenInfo,name:"DragAndDrop",path:"src/stories/useDrag/Drag.stories.tsx#DragAndDrop"})}catch(__react_docgen_typescript_loader_error){}},496:function(module,exports,__webpack_require__){__webpack_require__(497),__webpack_require__(662),__webpack_require__(663),__webpack_require__(828),__webpack_require__(1047),__webpack_require__(1080),__webpack_require__(1088),__webpack_require__(1100),__webpack_require__(1102),__webpack_require__(1107),__webpack_require__(1109),module.exports=__webpack_require__(1112)},571:function(module,exports){},59:function(module,exports,__webpack_require__){module.exports={Container:"DragAndDrop_Container__2FYQp",Grab:"DragAndDrop_Grab__3FCxW",Card:"DragAndDrop_Card__QCy-N",Header:"DragAndDrop_Header__3HYyU",Droppable:"DragAndDrop_Droppable__1KL5c",Placeholder:"DragAndDrop_Placeholder__xHak6",Item:"DragAndDrop_Item__3y-gd",TransformTransition:"DragAndDrop_TransformTransition__2ZIdP",Opacity:"DragAndDrop_Opacity__2JaS5"}},663:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(369)}},[[496,1,2]]]);
  //# sourceMappingURL=main.0c717a5781c36c98690c.bundle.js.map