@artsy/palette 18.10.0 → 18.11.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v18.11.0 (Wed Dec 08 2021)
+
+#### 🚀  Enhancement
+
+- feat(modaldialog): implements new modal [#1083](https://github.com/artsy/palette/pull/1083) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- fix(modaldialog): addresses feedback ([@dzucconi](https://github.com/dzucconi))
+- feat(modaldialog): implements transition ([@dzucconi](https://github.com/dzucconi))
+- feat(modaldialog): implements new modal ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.10.0 (Tue Dec 07 2021)
 
 #### 🚀  Enhancement

package/dist/elements/Dialog/Dialog.d.ts

@@ -13,7 +13,7 @@ interface DialogProps {
 }
 /**
  * Dialog.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5b9a7bdaa2fa5551fff7c014
+ * @deprecated: Use `ModalDialog` instead
  */
 export declare const Dialog: SFC<DialogProps>;
 export {};

package/dist/elements/Dialog/Dialog.js

@@ -23,7 +23,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /**
  * Dialog.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5b9a7bdaa2fa5551fff7c014
+ * @deprecated: Use `ModalDialog` instead
  */
 var Dialog = function Dialog(_ref) {
   var title = _ref.title,

package/dist/elements/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Dialog/Dialog.tsx"],"names":["Dialog","title","detail","show","primaryCta","secondaryCta","onClose","StyledSans","Sans","ModalButton","props","ModalWidth","Narrow","action","text","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBA;AACA;AACA;AACA;AACO,IAAMA,MAAwB,GAAG,SAA3BA,MAA2B,OAOlC;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,uBAJJC,IAII;AAAA,MAJJA,IAII,0BAJG,IAIH;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,0BADJC,OACI;AAAA,MADJA,OACI,6BADM;AAAA,WAAM,IAAN;AAAA,GACN;AACJ,MAAMC,UAAU,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,iEAGL,oBAAM,WAAN,CAHK,CAAhB;;AAMA,MAAMC,WAGJ,GAAG,SAHCA,WAGD,CAACC,KAAD,EAAW;AACd,wBAAO,6BAAC,UAAD;AAAY,MAAA,EAAE,EAAE,CAAhB;AAAmB,MAAA,IAAI,EAAC,GAAxB;AAA4B,MAAA,MAAM,EAAC;AAAnC,OAAgDA,KAAhD,EAAP;AACD,GALD;;AAOA,sBACE,6BAAC,YAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,OAAO,EAAEG,OAFX;AAGE,IAAA,UAAU,EAAEK,kBAAWC,MAHzB;AAIE,IAAA,eAAe;AAJjB,kBAME,yEACE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC;AAApB,kBACE,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,GAAX;AAAe,IAAA,MAAM,EAAC,QAAtB;AAA+B,IAAA,EAAE,EAAE;AAAnC,KACGX,KADH,CADF,EAIGC,MAAM,iBACL,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,GAAX;AAAe,IAAA,KAAK,EAAC;AAArB,KACGA,MADH,CALJ,CADF,eAWE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAE,CAAV;AAAa,IAAA,cAAc,EAAC;AAA5B,KACGG,YAAY,iBACX,6BAAC,WAAD;AAAa,IAAA,SAAS,MAAtB;AAAuB,IAAA,OAAO,EAAEA,YAAY,CAACQ;AAA7C,KACGR,YAAY,CAACS,IADhB,CAFJ,eAME,6BAAC,WAAD;AAAa,IAAA,OAAO,EAAEV,UAAU,CAACS;AAAjC,KACGT,UAAU,CAACU,IADd,CANF,CAXF,CANF,CADF;AA+BD,CApDM;;;AAAMd,M;AAsDbA,MAAM,CAACe,WAAP,GAAqB,QAArB","sourcesContent":["import React, { SFC } from \"react\"\nimport styled from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { Flex } from \"../Flex\"\nimport { Modal, ModalWidth } from \"../Modal\"\nimport { Sans } from \"../Typography\"\n\ninterface CtaProps {\n  action(): void\n  text: React.ReactNode\n}\n\ninterface DialogProps {\n  detail?: React.ReactNode\n  primaryCta: CtaProps\n  secondaryCta?: CtaProps\n  onClose?: () => void\n  show?: boolean\n  title: string\n}\n\n/**\n * Dialog.\n * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5b9a7bdaa2fa5551fff7c014\n */\nexport const Dialog: SFC<DialogProps> = ({\n  title,\n  detail,\n  show = true,\n  primaryCta,\n  secondaryCta,\n  onClose = () => null,\n}) => {\n  const StyledSans = styled(Sans)`\n    transition: color 0.14s ease;\n    cursor: pointer;\n    color: ${color(\"purple100\")};\n  `\n\n  const ModalButton: React.FC<{\n    secondary?: boolean\n    onClick: () => void\n  }> = (props) => {\n    return <StyledSans pl={4} size=\"3\" weight=\"medium\" {...props} />\n  }\n\n  return (\n    <Modal\n      show={show}\n      onClose={onClose}\n      modalWidth={ModalWidth.Narrow}\n      hideCloseButton\n    >\n      <>\n        <Flex flexDirection=\"column\">\n          <Sans size=\"4\" weight=\"medium\" mb={10}>\n            {title}\n          </Sans>\n          {detail && (\n            <Sans size=\"3\" color=\"black60\">\n              {detail}\n            </Sans>\n          )}\n        </Flex>\n        <Flex mt={3} justifyContent=\"flex-end\">\n          {secondaryCta && (\n            <ModalButton secondary onClick={secondaryCta.action}>\n              {secondaryCta.text}\n            </ModalButton>\n          )}\n          <ModalButton onClick={primaryCta.action}>\n            {primaryCta.text}\n          </ModalButton>\n        </Flex>\n      </>\n    </Modal>\n  )\n}\n\nDialog.displayName = \"Dialog\"\n"],"file":"Dialog.js"}
+{"version":3,"sources":["../../../src/elements/Dialog/Dialog.tsx"],"names":["Dialog","title","detail","show","primaryCta","secondaryCta","onClose","StyledSans","Sans","ModalButton","props","ModalWidth","Narrow","action","text","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBA;AACA;AACA;AACA;AACO,IAAMA,MAAwB,GAAG,SAA3BA,MAA2B,OAOlC;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,uBAJJC,IAII;AAAA,MAJJA,IAII,0BAJG,IAIH;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,0BADJC,OACI;AAAA,MADJA,OACI,6BADM;AAAA,WAAM,IAAN;AAAA,GACN;AACJ,MAAMC,UAAU,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,iEAGL,oBAAM,WAAN,CAHK,CAAhB;;AAMA,MAAMC,WAGJ,GAAG,SAHCA,WAGD,CAACC,KAAD,EAAW;AACd,wBAAO,6BAAC,UAAD;AAAY,MAAA,EAAE,EAAE,CAAhB;AAAmB,MAAA,IAAI,EAAC,GAAxB;AAA4B,MAAA,MAAM,EAAC;AAAnC,OAAgDA,KAAhD,EAAP;AACD,GALD;;AAOA,sBACE,6BAAC,YAAD;AACE,IAAA,IAAI,EAAEP,IADR;AAEE,IAAA,OAAO,EAAEG,OAFX;AAGE,IAAA,UAAU,EAAEK,kBAAWC,MAHzB;AAIE,IAAA,eAAe;AAJjB,kBAME,yEACE,6BAAC,UAAD;AAAM,IAAA,aAAa,EAAC;AAApB,kBACE,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,GAAX;AAAe,IAAA,MAAM,EAAC,QAAtB;AAA+B,IAAA,EAAE,EAAE;AAAnC,KACGX,KADH,CADF,EAIGC,MAAM,iBACL,6BAAC,gBAAD;AAAM,IAAA,IAAI,EAAC,GAAX;AAAe,IAAA,KAAK,EAAC;AAArB,KACGA,MADH,CALJ,CADF,eAWE,6BAAC,UAAD;AAAM,IAAA,EAAE,EAAE,CAAV;AAAa,IAAA,cAAc,EAAC;AAA5B,KACGG,YAAY,iBACX,6BAAC,WAAD;AAAa,IAAA,SAAS,MAAtB;AAAuB,IAAA,OAAO,EAAEA,YAAY,CAACQ;AAA7C,KACGR,YAAY,CAACS,IADhB,CAFJ,eAME,6BAAC,WAAD;AAAa,IAAA,OAAO,EAAEV,UAAU,CAACS;AAAjC,KACGT,UAAU,CAACU,IADd,CANF,CAXF,CANF,CADF;AA+BD,CApDM;;;AAAMd,M;AAsDbA,MAAM,CAACe,WAAP,GAAqB,QAArB","sourcesContent":["import React, { SFC } from \"react\"\nimport styled from \"styled-components\"\nimport { color } from \"../../helpers\"\nimport { Flex } from \"../Flex\"\nimport { Modal, ModalWidth } from \"../Modal\"\nimport { Sans } from \"../Typography\"\n\ninterface CtaProps {\n  action(): void\n  text: React.ReactNode\n}\n\ninterface DialogProps {\n  detail?: React.ReactNode\n  primaryCta: CtaProps\n  secondaryCta?: CtaProps\n  onClose?: () => void\n  show?: boolean\n  title: string\n}\n\n/**\n * Dialog.\n * @deprecated: Use `ModalDialog` instead\n */\nexport const Dialog: SFC<DialogProps> = ({\n  title,\n  detail,\n  show = true,\n  primaryCta,\n  secondaryCta,\n  onClose = () => null,\n}) => {\n  const StyledSans = styled(Sans)`\n    transition: color 0.14s ease;\n    cursor: pointer;\n    color: ${color(\"purple100\")};\n  `\n\n  const ModalButton: React.FC<{\n    secondary?: boolean\n    onClick: () => void\n  }> = (props) => {\n    return <StyledSans pl={4} size=\"3\" weight=\"medium\" {...props} />\n  }\n\n  return (\n    <Modal\n      show={show}\n      onClose={onClose}\n      modalWidth={ModalWidth.Narrow}\n      hideCloseButton\n    >\n      <>\n        <Flex flexDirection=\"column\">\n          <Sans size=\"4\" weight=\"medium\" mb={10}>\n            {title}\n          </Sans>\n          {detail && (\n            <Sans size=\"3\" color=\"black60\">\n              {detail}\n            </Sans>\n          )}\n        </Flex>\n        <Flex mt={3} justifyContent=\"flex-end\">\n          {secondaryCta && (\n            <ModalButton secondary onClick={secondaryCta.action}>\n              {secondaryCta.text}\n            </ModalButton>\n          )}\n          <ModalButton onClick={primaryCta.action}>\n            {primaryCta.text}\n          </ModalButton>\n        </Flex>\n      </>\n    </Modal>\n  )\n}\n\nDialog.displayName = \"Dialog\"\n"],"file":"Dialog.js"}

package/dist/elements/Modal/Modal.d.ts

@@ -22,6 +22,7 @@ export declare enum ModalWidth {
 /**
  * Modal.
  * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
+ * @deprecated: Use `ModalDialog` instead
  */
 export declare const Modal: FC<ModalProps>;
 export {};

package/dist/elements/Modal/Modal.js

@@ -29,7 +29,7 @@ var _Spacer = require("../Spacer");
 
 var _Text = require("../Text");
 
-var _useOnScroll2 = require("../../utils/useOnScroll");
+var _useSentinelVisibility = require("../../utils/useSentinelVisibility");
 
 var _templateObject, _templateObject2;
 
@@ -57,6 +57,7 @@ var ModalWidth;
 /**
  * Modal.
  * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
+ * @deprecated: Use `ModalDialog` instead
  */
 
 exports.ModalWidth = ModalWidth;
@@ -84,9 +85,9 @@ var Modal = function Modal(_ref) {
       fadeIn = _useState2[0],
       setFadeIn = _useState2[1];
 
-  var _useOnScroll = (0, _useOnScroll2.useOnScroll)(),
-      isScrolled = _useOnScroll.isScrolled,
-      elementRef = _useOnScroll.elementRef;
+  var _useSentinelVisibilit = (0, _useSentinelVisibility.useSentinelVisibility)(),
+      sentinel = _useSentinelVisibilit.sentinel,
+      isScrolled = _useSentinelVisibilit.isSentinelVisible;
 
   var handleEscapeKey = function handleEscapeKey(event) {
     if (event && event.key === "Escape") {
@@ -174,9 +175,7 @@ var Modal = function Modal(_ref) {
     px: 2,
     py: 1,
     pb: 2
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Sentinel, {
-    ref: elementRef
-  }), children)), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sentinel, children)), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, {
     isScrolled: isScrolled,
     p: 2
   }, FixedButton))))));
@@ -230,14 +229,7 @@ var CloseIconWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
 var Logo = (0, _styledComponents.default)(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon).withConfig({
   displayName: "Modal__Logo",
   componentId: "qjtwq0-8"
-})(["width:78px;"]); // This <div> is positioned such that when it leaves the top of
-// the ModalScrollContent we use IntersectionObserver within the hook
-// to switch on and of the shadows of the sticky elements
-
-var Sentinel = (0, _styledComponents.default)(_Box.Box).withConfig({
-  displayName: "Modal__Sentinel",
-  componentId: "qjtwq0-9"
-})(["position:relative;width:100%;height:0;"]);
+})(["width:78px;"]);
 Modal.displayName = "Modal";
 ModalWrapper.displayName = "ModalWrapper";
 ModalScrollContent.displayName = "ModalScrollContent";

package/dist/elements/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","isScrolled","elementRef","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","Sentinel","displayName"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useOnScroll } from \"../../utils/useOnScroll\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { isScrolled, elementRef } = useOnScroll()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer my={1} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer py={1} />}>\n                      {hasLogo && <Logo my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer py={1} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  <Sentinel ref={elementRef} />\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Flex)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: calc(100vh - ${themeGet(\"space.4\")});\n    width: calc(100vw - ${themeGet(\"space.4\")});\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 78px;\n`\n\n// This <div> is positioned such that when it leaves the top of\n// the ModalScrollContent we use IntersectionObserver within the hook\n// to switch on and of the shadows of the sticky elements\nconst Sentinel = styled(Box)`\n  position: relative;\n  width: 100%;\n  height: 0;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","sentinel","isScrolled","isSentinelVisible","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","displayName"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n * @deprecated: Use `ModalDialog` instead\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { sentinel, isSentinelVisible: isScrolled } = useSentinelVisibility()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer my={1} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer py={1} />}>\n                      {hasLogo && <Logo my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer py={1} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  {sentinel}\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Flex)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: calc(100vh - ${themeGet(\"space.4\")});\n    width: calc(100vw - ${themeGet(\"space.4\")});\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 78px;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}

package/dist/elements/Modal/ModalBase.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ZIndexProps } from "styled-system";
 import { FlexProps } from "../Flex";
 /** BaseModal */
-export declare type ModalBaseProps = FlexProps & ZIndexProps & {
+export declare type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> & FlexProps & ZIndexProps & {
     children?: React.ReactNode;
     dialogProps?: FlexProps;
     onClose?(): void;

package/dist/elements/Modal/ModalBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/ModalBase.tsx"],"names":["ScrollIsolation","RemoveScroll","Container","Flex","systemZIndex","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","children","zIndex","dialogProps","onClose","rest","appendEl","document","createElement","containerEl","scrollIsolationEl","handleMouseDown","event","target","current","body","appendChild","handleKeydown","key","preventDefault","stopPropagation","addEventListener","removeEventListener","window","innerHeight","maxHeight","setMaxHeight","updateMaxHeight","passive","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { useFocusLock } from \"../../utils/useFocusLock\"\nimport { Flex, FlexProps } from \"../Flex\"\n\n// TODO: Update TypeScript definitions for this library\n// https://github.com/theKashey/react-remove-scroll\nconst ScrollIsolation = styled(RemoveScroll as any)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<ModalBaseProps> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const appendEl = useRef(document.createElement(\"div\"))\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const scrollIsolationEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === scrollIsolationEl.current) {\n      onClose()\n    }\n  }\n\n  useFocusLock(containerEl)\n\n  useEffect(() => {\n    if (appendEl.current === null) return\n\n    // Append the dialog\n    document.body.appendChild(appendEl.current)\n  }, [])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  return createPortal(\n    <Container ref={containerEl as any} zIndex={zIndex} {...rest}>\n      <ScrollIsolation\n        ref={scrollIsolationEl as any}\n        onMouseDown={handleMouseDown}\n      >\n        <Dialog maxHeight={maxHeight} {...dialogProps}>\n          {children}\n        </Dialog>\n      </ScrollIsolation>\n    </Container>,\n    appendEl.current\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"file":"ModalBase.js"}
+{"version":3,"sources":["../../../src/elements/Modal/ModalBase.tsx"],"names":["ScrollIsolation","RemoveScroll","Container","Flex","systemZIndex","Dialog","attrs","role","DEFAULT_MODAL_Z_INDEX","ModalBase","children","zIndex","dialogProps","onClose","rest","appendEl","document","createElement","containerEl","scrollIsolationEl","handleMouseDown","event","target","current","body","appendChild","handleKeydown","key","preventDefault","stopPropagation","addEventListener","removeEventListener","window","innerHeight","maxHeight","setMaxHeight","updateMaxHeight","passive","displayName"],"mappings":"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","sourcesContent":["import React, { useEffect, useRef, useState } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport styled from \"styled-components\"\nimport { zIndex as systemZIndex, ZIndexProps } from \"styled-system\"\nimport { useFocusLock } from \"../../utils/useFocusLock\"\nimport { Flex, FlexProps } from \"../Flex\"\n\n// TODO: Update TypeScript definitions for this library\n// https://github.com/theKashey/react-remove-scroll\nconst ScrollIsolation = styled(RemoveScroll as any)`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nconst Container = styled(Flex)`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  align-items: center;\n  justify-content: center;\n  ${systemZIndex}\n`\n\nconst Dialog = styled(Flex).attrs({ role: \"dialog\" })`\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n\n  > * {\n    max-height: 100%;\n  }\n`\n\n/** BaseModal */\nexport type ModalBaseProps = React.HTMLAttributes<HTMLDivElement> &\n  FlexProps &\n  ZIndexProps & {\n    children?: React.ReactNode\n    dialogProps?: FlexProps\n    onClose?(): void\n  }\n\n/**\n * It seems we've landed on this value as the 'top'\n */\nexport const DEFAULT_MODAL_Z_INDEX = 9999\n\n/**\n * BaseModal\n * Low-level modal that has no opinions about layout/overlay\n * Modals content using a portal, locks scroll.\n */\nexport const ModalBase: React.FC<ModalBaseProps> = ({\n  children,\n  zIndex = DEFAULT_MODAL_Z_INDEX,\n  dialogProps = {},\n  onClose = () => null,\n  ...rest\n}) => {\n  const appendEl = useRef(document.createElement(\"div\"))\n  const containerEl = useRef<HTMLDivElement | null>(null)\n  const scrollIsolationEl = useRef<HTMLDivElement | null>(null)\n\n  const handleMouseDown = (\n    event: React.MouseEvent<HTMLDivElement, MouseEvent>\n  ) => {\n    if (event.target === scrollIsolationEl.current) {\n      onClose()\n    }\n  }\n\n  useFocusLock(containerEl)\n\n  useEffect(() => {\n    if (appendEl.current === null) return\n\n    // Append the dialog\n    document.body.appendChild(appendEl.current)\n  }, [])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      switch (event.key) {\n        case \"Escape\":\n          // Prevent <esc> from interfering with the returned focus\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Handle close\n          return onClose()\n        default:\n          break\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [onClose])\n\n  // Sets to `innerHeight` so as to simulate `100vh` on iOS\n  const [maxHeight, setMaxHeight] = useState(window.innerHeight)\n\n  // Keeps `maxHeight` in sync\n  useEffect(() => {\n    const updateMaxHeight = () => {\n      setMaxHeight(window.innerHeight)\n    }\n\n    window.addEventListener(\"resize\", updateMaxHeight, { passive: true })\n    return () => {\n      window.removeEventListener(\"resize\", updateMaxHeight)\n    }\n  }, [])\n\n  return createPortal(\n    <Container ref={containerEl as any} zIndex={zIndex} {...rest}>\n      <ScrollIsolation\n        ref={scrollIsolationEl as any}\n        onMouseDown={handleMouseDown}\n      >\n        <Dialog maxHeight={maxHeight} {...dialogProps}>\n          {children}\n        </Dialog>\n      </ScrollIsolation>\n    </Container>,\n    appendEl.current\n  )\n}\n\nModalBase.displayName = \"ModalBase\"\n"],"file":"ModalBase.js"}

package/dist/elements/ModalDialog/ModalDialog.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ModalBaseProps } from "../Modal";
+import { ModalDialogContentProps } from "./ModalDialogContent";
+export declare type ModalDialogProps = ModalBaseProps & ModalDialogContentProps;
+export declare const ModalDialog: React.FC<ModalDialogProps>;

package/dist/elements/ModalDialog/ModalDialog.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalDialog = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Modal = require("../Modal");
+
+var _ModalDialogContent = require("./ModalDialogContent");
+
+var _Box = require("../Box");
+
+var _useDidMount = require("../../utils/useDidMount");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
+
+var ModalDialog = function ModalDialog(_ref) {
+  var children = _ref.children,
+      footer = _ref.footer,
+      hasLogo = _ref.hasLogo,
+      onClose = _ref.onClose,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["children", "footer", "hasLogo", "onClose", "title"]);
+
+  var isMounted = (0, _useDidMount.useDidMount)();
+
+  var _splitBoxProps = (0, _Box.splitBoxProps)(rest),
+      _splitBoxProps2 = _slicedToArray(_splitBoxProps, 2),
+      boxProps = _splitBoxProps2[0],
+      modalProps = _splitBoxProps2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalBase, _extends({
+    onClose: onClose,
+    style: isMounted ? {
+      backgroundColor: "rgba(229, 229, 229, 0.5)",
+      transition: "background-color 250ms"
+    } : {
+      backgroundColor: "transparent"
+    }
+  }, modalProps), /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, _extends({
+    footer: footer,
+    hasLogo: hasLogo,
+    onClose: onClose,
+    title: title,
+    width: 440,
+    style: isMounted ? {
+      opacity: 1,
+      transition: "opacity 250ms, transform 250ms"
+    } : {
+      opacity: 0,
+      transform: "translateY(10px)"
+    }
+  }, boxProps), children));
+};
+
+exports.ModalDialog = ModalDialog;
+ModalDialog.displayName = "ModalDialog";
+//# sourceMappingURL=ModalDialog.js.map

package/dist/elements/ModalDialog/ModalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.tsx"],"names":["ModalDialog","children","footer","hasLogo","onClose","title","rest","isMounted","boxProps","modalProps","backgroundColor","transition","opacity","transform"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAIA;;AACA;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAOjD;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,SAAS,GAAG,+BAAlB;;AADI,uBAE2B,wBAAcD,IAAd,CAF3B;AAAA;AAAA,MAEGE,QAFH;AAAA,MAEaC,UAFb;;AAIJ,sBACE,6BAAC,gBAAD;AACE,IAAA,OAAO,EAAEL,OADX;AAEE,IAAA,KAAK,EACHG,SAAS,GACL;AACEG,MAAAA,eAAe,EAAE,0BADnB;AAEEC,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAED,MAAAA,eAAe,EAAE;AAAnB;AARR,KAUMD,UAVN,gBAYE,6BAAC,sCAAD;AACE,IAAA,MAAM,EAAEP,MADV;AAEE,IAAA,OAAO,EAAEC,OAFX;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,KAAK,EAAE,GALT;AAME,IAAA,KAAK,EACHE,SAAS,GACL;AACEK,MAAAA,OAAO,EAAE,CADX;AAEED,MAAAA,UAAU,EAAE;AAFd,KADK,GAKL;AAAEC,MAAAA,OAAO,EAAE,CAAX;AAAcC,MAAAA,SAAS,EAAE;AAAzB;AAZR,KAcML,QAdN,GAgBGP,QAhBH,CAZF,CADF;AAiCD,CA5CM;;;AAAMD,W","sourcesContent":["import React from \"react\"\nimport { ModalBase, ModalBaseProps } from \"../Modal\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { splitBoxProps } from \"../Box\"\nimport { useDidMount } from \"../../utils/useDidMount\"\n\nexport type ModalDialogProps = ModalBaseProps & ModalDialogContentProps\n\nexport const ModalDialog: React.FC<ModalDialogProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const isMounted = useDidMount()\n  const [boxProps, modalProps] = splitBoxProps(rest)\n\n  return (\n    <ModalBase\n      onClose={onClose}\n      style={\n        isMounted\n          ? {\n              backgroundColor: \"rgba(229, 229, 229, 0.5)\",\n              transition: \"background-color 250ms\",\n            }\n          : { backgroundColor: \"transparent\" }\n      }\n      {...modalProps}\n    >\n      <ModalDialogContent\n        footer={footer}\n        hasLogo={hasLogo}\n        onClose={onClose}\n        title={title}\n        width={440}\n        style={\n          isMounted\n            ? {\n                opacity: 1,\n                transition: \"opacity 250ms, transform 250ms\",\n              }\n            : { opacity: 0, transform: \"translateY(10px)\" }\n        }\n        {...boxProps}\n      >\n        {children}\n      </ModalDialogContent>\n    </ModalBase>\n  )\n}\n"],"file":"ModalDialog.js"}

package/dist/elements/ModalDialog/ModalDialog.story.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/elements/ModalDialog/ModalDialog.story.js

@@ -0,0 +1,122 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _storybookStates = require("storybook-states");
+
+var _Text = require("../Text");
+
+var _Button = require("../Button");
+
+var _ModalDialog = require("./ModalDialog");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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; }
+
+var LOREM = "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. ";
+var _default = {
+  title: "Components/ModalDialog"
+};
+exports.default = _default;
+
+var Demo = function Demo(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["children"]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    onClick: function onClick() {
+      return setOpen(true);
+    }
+  }, "Open Modal"), open && /*#__PURE__*/_react.default.createElement(_ModalDialog.ModalDialog, _extends({
+    onClose: function onClose() {
+      return setOpen(false);
+    }
+  }, rest), children ? children : /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm"
+  }, LOREM.repeat(15))));
+};
+
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{
+      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "sm"
+      }, LOREM)
+    }, {
+      title: "Modal Title"
+    }, {
+      title: "100% Width",
+      width: "100%"
+    }, {
+      title: "Responsive Width",
+      width: ["100%", 550]
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines"
+    }, {
+      hasLogo: true
+    }, {
+      title: "Modal Title",
+      hasLogo: true
+    }, {
+      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "sm"
+      }, LOREM),
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title",
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      hasLogo: true,
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }]
+  }, function (props) {
+    return /*#__PURE__*/_react.default.createElement(Demo, props);
+  });
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+//# sourceMappingURL=ModalDialog.story.js.map

package/dist/elements/ModalDialog/ModalDialog.story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialog.story.tsx"],"names":["LOREM","title","Demo","children","rest","open","setOpen","repeat","Default","width","hasLogo","footer","props"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,KAAK,GACT,+MADF;eAGe;AACbC,EAAAA,KAAK,EAAE;AADM,C;;;AAIf,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAsD;AAAA,MAAnDC,QAAmD,QAAnDA,QAAmD;AAAA,MAAtCC,IAAsC;;AAAA,kBACzC,qBAAS,KAAT,CADyC;AAAA;AAAA,MAC1DC,IAD0D;AAAA,MACpDC,OADoD;;AAGjE,sBACE,yEACE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAMA,OAAO,CAAC,IAAD,CAAb;AAAA;AAAjB,kBADF,EAGGD,IAAI,iBACH,6BAAC,wBAAD;AAAa,IAAA,OAAO,EAAE;AAAA,aAAMC,OAAO,CAAC,KAAD,CAAb;AAAA;AAAtB,KAAgDF,IAAhD,GACGD,QAAQ,GAAGA,QAAH,gBAAc,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBH,KAAK,CAACO,MAAN,CAAa,EAAb,CAApB,CADzB,CAJJ,CADF;AAWD,CAdD;;AAgBO,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEL,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB;AADZ,KADM,EAIN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAJM,EAKN;AAAEA,MAAAA,KAAK,EAAE,YAAT;AAAuBQ,MAAAA,KAAK,EAAE;AAA9B,KALM,EAMN;AAAER,MAAAA,KAAK,EAAE,kBAAT;AAA6BQ,MAAAA,KAAK,EAAE,CAAC,MAAD,EAAS,GAAT;AAApC,KANM,EAON;AACER,MAAAA,KAAK,EACH;AAFJ,KAPM,EAWN;AAAES,MAAAA,OAAO,EAAE;AAAX,KAXM,EAYN;AAAET,MAAAA,KAAK,EAAE,aAAT;AAAwBS,MAAAA,OAAO,EAAE;AAAjC,KAZM,EAaN;AACEP,MAAAA,QAAQ,eAAE,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,SAAoBH,KAApB,CADZ;AAEEW,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAFV,KAbM,EAiBN;AAAEV,MAAAA,KAAK,EAAE,aAAT;AAAwBU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KAjBM,EAkBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGEU,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KAlBM,EAuBN;AACEV,MAAAA,KAAK,EACH,kFAFJ;AAGES,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KAvBM;AADV,KAgCG,UAACC,KAAD;AAAA,wBAAW,6BAAC,IAAD,EAAUA,KAAV,CAAX;AAAA,GAhCH,CADF;AAoCD,CArCM;;;AAAMJ,O","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\nimport { ModalDialog, ModalDialogProps } from \"./ModalDialog\"\n\nconst LOREM =\n  \"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus sed iure repellendus animi, aliquid aut fuga maxime nemo minus quas. Error, incidunt fugit similique quidem culpa hic! Nemo, quas rerum. \"\n\nexport default {\n  title: \"Components/ModalDialog\",\n}\n\nconst Demo = ({ children, ...rest }: Partial<ModalDialogProps>) => {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Modal</Button>\n\n      {open && (\n        <ModalDialog onClose={() => setOpen(false)} {...rest}>\n          {children ? children : <Text variant=\"sm\">{LOREM.repeat(15)}</Text>}\n        </ModalDialog>\n      )}\n    </>\n  )\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogProps>>\n      states={[\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n        },\n        { title: \"Modal Title\" },\n        { title: \"100% Width\", width: \"100%\" },\n        { title: \"Responsive Width\", width: [\"100%\", 550] },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: <Text variant=\"sm\">{LOREM}</Text>,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n      ]}\n    >\n      {(props) => <Demo {...props} />}\n    </States>\n  )\n}\n"],"file":"ModalDialog.story.js"}

package/dist/elements/ModalDialog/ModalDialogContent.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { BoxProps } from "../Box";
+export interface ModalDialogContentProps extends BoxProps, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    hasLogo?: boolean;
+    onClose: () => void;
+    title?: string;
+}
+export declare const ModalDialogContent: React.FC<ModalDialogContentProps>;

package/dist/elements/ModalDialog/ModalDialogContent.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalDialogContent = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Clickable = require("../Clickable");
+
+var _shadow = require("../../helpers/shadow");
+
+var _Box = require("../Box");
+
+var _Flex = require("../Flex");
+
+var _Text = require("../Text");
+
+var _CloseIcon = require("../../svgs/CloseIcon");
+
+var _ArtsyLogoBlackIcon = require("../../svgs/ArtsyLogoBlackIcon");
+
+var _useSentinelVisibility = require("../../utils/useSentinelVisibility");
+
+var _Spacer = require("../Spacer");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+var ModalDialogContent = function ModalDialogContent(_ref) {
+  var children = _ref.children,
+      footer = _ref.footer,
+      hasLogo = _ref.hasLogo,
+      onClose = _ref.onClose,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["children", "footer", "hasLogo", "onClose", "title"]);
+
+  var _useSentinelVisibilit = (0, _useSentinelVisibility.useSentinelVisibility)(),
+      topSentinel = _useSentinelVisibilit.sentinel,
+      isAtTop = _useSentinelVisibilit.isSentinelVisible;
+
+  var _useSentinelVisibilit2 = (0, _useSentinelVisibility.useSentinelVisibility)(),
+      bottomSentinel = _useSentinelVisibilit2.sentinel,
+      isAtBottom = _useSentinelVisibilit2.isSentinelVisible;
+
+  return /*#__PURE__*/_react.default.createElement(_Flex.Flex, _extends({
+    bg: "white100",
+    flexDirection: "column",
+    overflow: "hidden",
+    m: 2,
+    style: {
+      boxShadow: _shadow.DROP_SHADOW
+    }
+  }, rest), /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    style: {
+      transition: "box-shadow 250ms",
+      boxShadow: isAtTop ? _shadow.DROP_SHADOW : undefined
+    }
+  }, (title || hasLogo) && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    m: 2
+  }, hasLogo && /*#__PURE__*/_react.default.createElement(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon, {
+    display: "block",
+    style: {
+      width: "75px",
+      height: "26px"
+    }
+  }), hasLogo && title && /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    mt: 2
+  }), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "lg"
+  }, title)), /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
+    p: 2,
+    ml: "auto",
+    onClick: onClose,
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.CloseIcon, {
+    fill: "black100",
+    display: "block"
+  }))), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    px: 2,
+    pb: 2,
+    flex: 1,
+    overflow: "auto",
+    style: {
+      WebkitOverflowScrolling: "touch"
+    }
+  }, topSentinel, children, bottomSentinel), footer && /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    p: 2,
+    style: {
+      transition: "box-shadow 250ms",
+      boxShadow: isAtBottom ? _shadow.DROP_SHADOW : undefined
+    }
+  }, footer));
+};
+
+exports.ModalDialogContent = ModalDialogContent;
+ModalDialogContent.displayName = "ModalDialogContent";
+//# sourceMappingURL=ModalDialogContent.js.map

package/dist/elements/ModalDialog/ModalDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.tsx"],"names":["ModalDialogContent","children","footer","hasLogo","onClose","title","rest","topSentinel","sentinel","isAtTop","isSentinelVisible","bottomSentinel","isAtBottom","boxShadow","DROP_SHADOW","transition","undefined","width","height","WebkitOverflowScrolling"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAYO,IAAMA,kBAAqD,GAAG,SAAxDA,kBAAwD,OAO/D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,MAKI,QALJA,MAKI;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,KAEI,QAFJA,KAEI;AAAA,MADDC,IACC;;AAAA,8BAIA,mDAJA;AAAA,MAEQC,WAFR,yBAEFC,QAFE;AAAA,MAGiBC,OAHjB,yBAGFC,iBAHE;;AAAA,+BASA,mDATA;AAAA,MAOQC,cAPR,0BAOFH,QAPE;AAAA,MAQiBI,UARjB,0BAQFF,iBARE;;AAWJ,sBACE,6BAAC,UAAD;AACE,IAAA,EAAE,EAAC,UADL;AAEE,IAAA,aAAa,EAAC,QAFhB;AAGE,IAAA,QAAQ,EAAC,QAHX;AAIE,IAAA,CAAC,EAAE,CAJL;AAKE,IAAA,KAAK,EAAE;AAAEG,MAAAA,SAAS,EAAEC;AAAb;AALT,KAMMR,IANN,gBAQE,6BAAC,UAAD;AACE,IAAA,UAAU,EAAC,YADb;AAEE,IAAA,cAAc,EAAC,eAFjB;AAGE,IAAA,KAAK,EAAE;AACLS,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAEJ,OAAO,GAAGK,mBAAH,GAAiBE;AAF9B;AAHT,KAQG,CAACX,KAAK,IAAIF,OAAV,kBACC,6BAAC,QAAD;AAAK,IAAA,CAAC,EAAE;AAAR,KACGA,OAAO,iBACN,6BAAC,sCAAD;AACE,IAAA,OAAO,EAAC,OADV;AAEE,IAAA,KAAK,EAAE;AAAEc,MAAAA,KAAK,EAAE,MAAT;AAAiBC,MAAAA,MAAM,EAAE;AAAzB;AAFT,IAFJ,EAQGf,OAAO,IAAIE,KAAX,iBAAoB,6BAAC,cAAD;AAAQ,IAAA,EAAE,EAAE;AAAZ,IARvB,EAUGA,KAAK,iBAAI,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,KAAoBA,KAApB,CAVZ,CATJ,eAuBE,6BAAC,oBAAD;AAAW,IAAA,CAAC,EAAE,CAAd;AAAiB,IAAA,EAAE,EAAC,MAApB;AAA2B,IAAA,OAAO,EAAED,OAApC;AAA6C,kBAAW;AAAxD,kBACE,6BAAC,oBAAD;AAAW,IAAA,IAAI,EAAC,UAAhB;AAA2B,IAAA,OAAO,EAAC;AAAnC,IADF,CAvBF,CARF,eAoCE,6BAAC,QAAD;AACE,IAAA,EAAE,EAAE,CADN;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,IAAI,EAAE,CAHR;AAIE,IAAA,QAAQ,EAAC,MAJX;AAKE,IAAA,KAAK,EAAE;AAAEe,MAAAA,uBAAuB,EAAE;AAA3B;AALT,KAOGZ,WAPH,EAQGN,QARH,EASGU,cATH,CApCF,EAgDGT,MAAM,iBACL,6BAAC,QAAD;AACE,IAAA,CAAC,EAAE,CADL;AAEE,IAAA,KAAK,EAAE;AACLa,MAAAA,UAAU,EAAE,kBADP;AAELF,MAAAA,SAAS,EAAED,UAAU,GAAGE,mBAAH,GAAiBE;AAFjC;AAFT,KAOGd,MAPH,CAjDJ,CADF;AA8DD,CAhFM;;;AAAMF,kB","sourcesContent":["import React from \"react\"\nimport { Clickable } from \"../Clickable\"\nimport { DROP_SHADOW } from \"../../helpers/shadow\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Text } from \"../Text\"\nimport { CloseIcon } from \"../../svgs/CloseIcon\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { useSentinelVisibility } from \"../../utils/useSentinelVisibility\"\nimport { Spacer } from \"../Spacer\"\n\nexport interface ModalDialogContentProps\n  extends BoxProps,\n    React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  footer?: React.ReactNode\n  hasLogo?: boolean\n  onClose: () => void\n  title?: string\n}\n\nexport const ModalDialogContent: React.FC<ModalDialogContentProps> = ({\n  children,\n  footer,\n  hasLogo,\n  onClose,\n  title,\n  ...rest\n}) => {\n  const {\n    sentinel: topSentinel,\n    isSentinelVisible: isAtTop,\n  } = useSentinelVisibility()\n\n  const {\n    sentinel: bottomSentinel,\n    isSentinelVisible: isAtBottom,\n  } = useSentinelVisibility()\n\n  return (\n    <Flex\n      bg=\"white100\"\n      flexDirection=\"column\"\n      overflow=\"hidden\"\n      m={2}\n      style={{ boxShadow: DROP_SHADOW }}\n      {...rest}\n    >\n      <Flex\n        alignItems=\"flex-start\"\n        justifyContent=\"space-between\"\n        style={{\n          transition: \"box-shadow 250ms\",\n          boxShadow: isAtTop ? DROP_SHADOW : undefined,\n        }}\n      >\n        {(title || hasLogo) && (\n          <Box m={2}>\n            {hasLogo && (\n              <ArtsyLogoBlackIcon\n                display=\"block\"\n                style={{ width: \"75px\", height: \"26px\" }}\n              />\n            )}\n\n            {hasLogo && title && <Spacer mt={2} />}\n\n            {title && <Text variant=\"lg\">{title}</Text>}\n          </Box>\n        )}\n\n        <Clickable p={2} ml=\"auto\" onClick={onClose} aria-label=\"Close\">\n          <CloseIcon fill=\"black100\" display=\"block\" />\n        </Clickable>\n      </Flex>\n\n      <Box\n        px={2}\n        pb={2}\n        flex={1}\n        overflow=\"auto\"\n        style={{ WebkitOverflowScrolling: \"touch\" }}\n      >\n        {topSentinel}\n        {children}\n        {bottomSentinel}\n      </Box>\n\n      {footer && (\n        <Box\n          p={2}\n          style={{\n            transition: \"box-shadow 250ms\",\n            boxShadow: isAtBottom ? DROP_SHADOW : undefined,\n          }}\n        >\n          {footer}\n        </Box>\n      )}\n    </Flex>\n  )\n}\n"],"file":"ModalDialogContent.js"}

package/dist/elements/ModalDialog/ModalDialogContent.story.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/elements/ModalDialog/ModalDialogContent.story.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Default = exports.default = void 0;
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _storybookStates = require("storybook-states");
+
+var _ModalDialogContent = require("./ModalDialogContent");
+
+var _Text = require("../Text");
+
+var _Button = require("../Button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: "Components/ModalDialogContent"
+};
+exports.default = _default;
+
+var Default = function Default() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{
+      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "sm"
+      }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?")
+    }, {
+      title: "Modal Title"
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines"
+    }, {
+      hasLogo: true
+    }, {
+      title: "Modal Title",
+      hasLogo: true
+    }, {
+      children: /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "sm"
+      }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur?"),
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title",
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }, {
+      title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+      hasLogo: true,
+      footer: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        width: "100%"
+      }, "Confirm")
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_ModalDialogContent.ModalDialogContent, {
+    onClose: (0, _addonActions.action)("onClose"),
+    maxHeight: 400
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "sm"
+  }, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure explicabo itaque accusantium, consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores quae nihil minima praesentium, quaerat cupiditate amet dolor similique corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi voluptatem inventore!")));
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+//# sourceMappingURL=ModalDialogContent.story.js.map

package/dist/elements/ModalDialog/ModalDialogContent.story.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/ModalDialog/ModalDialogContent.story.tsx"],"names":["title","Default","children","hasLogo","footer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AACEC,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd;AAFJ,KADM,EAWN;AAAEF,MAAAA,KAAK,EAAE;AAAT,KAXM,EAYN;AACEA,MAAAA,KAAK,EACH;AAFJ,KAZM,EAgBN;AAAEG,MAAAA,OAAO,EAAE;AAAX,KAhBM,EAiBN;AAAEH,MAAAA,KAAK,EAAE,aAAT;AAAwBG,MAAAA,OAAO,EAAE;AAAjC,KAjBM,EAkBN;AACED,MAAAA,QAAQ,eACN,6BAAC,UAAD;AAAM,QAAA,OAAO,EAAC;AAAd,gPAFJ;AASEE,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AATV,KAlBM,EA6BN;AAAEJ,MAAAA,KAAK,EAAE,aAAT;AAAwBI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAAhC,KA7BM,EA8BN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEI,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAHV,KA9BM,EAmCN;AACEJ,MAAAA,KAAK,EACH,kFAFJ;AAGEG,MAAAA,OAAO,EAAE,IAHX;AAIEC,MAAAA,MAAM,eAAE,6BAAC,cAAD;AAAQ,QAAA,KAAK,EAAC;AAAd;AAJV,KAnCM;AADV,kBA4CE,6BAAC,sCAAD;AAAoB,IAAA,OAAO,EAAE,0BAAO,SAAP,CAA7B;AAAgD,IAAA,SAAS,EAAE;AAA3D,kBACE,6BAAC,UAAD;AAAM,IAAA,OAAO,EAAC;AAAd,2qFADF,CA5CF,CADF;AA4FD,CA7FM;;;AAAMH,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport {\n  ModalDialogContent,\n  ModalDialogContentProps,\n} from \"./ModalDialogContent\"\nimport { Text } from \"../Text\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/ModalDialogContent\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<ModalDialogContentProps>>\n      states={[\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n        },\n        { title: \"Modal Title\" },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n        },\n        { hasLogo: true },\n        { title: \"Modal Title\", hasLogo: true },\n        {\n          children: (\n            <Text variant=\"sm\">\n              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque,\n              neque voluptates! Sapiente, sint magnam. Assumenda, hic eius\n              asperiores iure explicabo itaque accusantium, consectetur aut sit\n              maxime culpa ab aliquid consequatur?\n            </Text>\n          ),\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        { title: \"Modal Title\", footer: <Button width=\"100%\">Confirm</Button> },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n        {\n          title:\n            \"Modal Title with a longer title or headline text that runs on for mutliple lines\",\n          hasLogo: true,\n          footer: <Button width=\"100%\">Confirm</Button>,\n        },\n      ]}\n    >\n      <ModalDialogContent onClose={action(\"onClose\")} maxHeight={400}>\n        <Text variant=\"sm\">\n          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, neque\n          voluptates! Sapiente, sint magnam. Assumenda, hic eius asperiores iure\n          explicabo itaque accusantium, consectetur aut sit maxime culpa ab\n          aliquid consequatur? Lorem, ipsum dolor sit amet consectetur\n          adipisicing elit. Quam enim vel accusamus dolor voluptatibus? Cumque\n          dicta blanditiis debitis rerum asperiores quae nihil minima\n          praesentium, quaerat cupiditate amet dolor similique corporis? Lorem,\n          ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque\n          placeat mollitia aliquam porro molestiae recusandae eos iusto\n          obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore! Lorem ipsum, dolor sit amet consectetur\n          adipisicing elit. Eaque, neque voluptates! Sapiente, sint magnam.\n          Assumenda, hic eius asperiores iure explicabo itaque accusantium,\n          consectetur aut sit maxime culpa ab aliquid consequatur? Lorem, ipsum\n          dolor sit amet consectetur adipisicing elit. Quam enim vel accusamus\n          dolor voluptatibus? Cumque dicta blanditiis debitis rerum asperiores\n          quae nihil minima praesentium, quaerat cupiditate amet dolor similique\n          corporis? Lorem, ipsum dolor sit amet consectetur adipisicing elit.\n          Quibusdam, eaque placeat mollitia aliquam porro molestiae recusandae\n          eos iusto obcaecati quo ducimus in iure tenetur vitae animi ullam nisi\n          voluptatem inventore!\n        </Text>\n      </ModalDialogContent>\n    </States>\n  )\n}\n"],"file":"ModalDialogContent.story.js"}

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

@@ -0,0 +1,2 @@
+export * from "./ModalDialog";
+export * from "./ModalDialogContent";

package/dist/elements/ModalDialog/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ModalDialog = require("./ModalDialog");
+
+Object.keys(_ModalDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalDialog[key];
+    }
+  });
+});
+
+var _ModalDialogContent = require("./ModalDialogContent");
+
+Object.keys(_ModalDialogContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalDialogContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalDialogContent[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/ModalDialog/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./ModalDialog\"\nexport * from \"./ModalDialogContent\"\n"],"file":"index.js"}

package/dist/elements/index.d.ts

@@ -34,6 +34,7 @@ export * from "./Link";
 export * from "./Menu";
 export * from "./Message";
 export * from "./Modal";
+export * from "./ModalDialog";
 export * from "./MultiSelect";
 export * from "./Pagination";
 export * from "./PasswordInput";

package/dist/elements/index.js

@@ -472,6 +472,19 @@ Object.keys(_Modal).forEach(function (key) {
   });
 });
 
+var _ModalDialog = require("./ModalDialog");
+
+Object.keys(_ModalDialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalDialog[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ModalDialog[key];
+    }
+  });
+});
+
 var _MultiSelect = require("./MultiSelect");
 
 Object.keys(_MultiSelect).forEach(function (key) {

package/dist/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./Colors\"\nexport * from \"./CSSGrid\"\nexport * from \"./Dialog\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./Grid\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Menu\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressBarTimer\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./StaticCountdownTimer\"\nexport * from \"./Stepper\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Tags\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./TimeRemaining\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./Typography\"\nexport * from \"./VisuallyHidden\"\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/elements/index.tsx"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./AutocompleteInput\"\nexport * from \"./Avatar\"\nexport * from \"./Banner\"\nexport * from \"./BaseTabs\"\nexport * from \"./BorderBox\"\nexport * from \"./BorderedRadio\"\nexport * from \"./Box\"\nexport * from \"./Breadcrumbs\"\nexport * from \"./Button\"\nexport * from \"./Cards\"\nexport * from \"./Carousel\"\nexport * from \"./CarouselBar\"\nexport * from \"./Checkbox\"\nexport * from \"./CleanTag\"\nexport * from \"./Clickable\"\nexport * from \"./Collapse\"\nexport * from \"./Colors\"\nexport * from \"./CSSGrid\"\nexport * from \"./Dialog\"\nexport * from \"./Dropdown\"\nexport * from \"./EntityHeader\"\nexport * from \"./Expandable\"\nexport * from \"./Flex\"\nexport * from \"./FullBleed\"\nexport * from \"./Grid\"\nexport * from \"./GridColumns\"\nexport * from \"./HorizontalOverflow\"\nexport * from \"./HTML\"\nexport * from \"./Image\"\nexport * from \"./Input\"\nexport * from \"./Join\"\nexport * from \"./LabeledInput\"\nexport * from \"./Link\"\nexport * from \"./Menu\"\nexport * from \"./Message\"\nexport * from \"./Modal\"\nexport * from \"./ModalDialog\"\nexport * from \"./MultiSelect\"\nexport * from \"./Pagination\"\nexport * from \"./PasswordInput\"\nexport * from \"./Pill\"\nexport * from \"./Popover\"\nexport * from \"./ProgressBar\"\nexport * from \"./ProgressBarTimer\"\nexport * from \"./ProgressDots\"\nexport * from \"./Radio\"\nexport * from \"./RadioGroup\"\nexport * from \"./ReadMore\"\nexport * from \"./ResponsiveBox\"\nexport * from \"./Select\"\nexport * from \"./Separator\"\nexport * from \"./Shelf\"\nexport * from \"./Skeleton\"\nexport * from \"./Skip\"\nexport * from \"./Spacer\"\nexport * from \"./Spinner\"\nexport * from \"./StackableBorderBox\"\nexport * from \"./StaticCountdownTimer\"\nexport * from \"./Stepper\"\nexport * from \"./Sup\"\nexport * from \"./Swiper\"\nexport * from \"./Tabs\"\nexport * from \"./Tags\"\nexport * from \"./Text\"\nexport * from \"./TextArea\"\nexport * from \"./TimeRemaining\"\nexport * from \"./Toasts\"\nexport * from \"./Toggle\"\nexport * from \"./Tooltip\"\nexport * from \"./Typography\"\nexport * from \"./VisuallyHidden\"\n"],"file":"index.js"}

package/dist/utils/index.d.ts

@@ -1,8 +1,10 @@
 export * from "./useClickOutside";
 export * from "./useContainsFocus";
+export * from "./useDidMount";
 export * from "./useFocusLock";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./useMutationObserver";
 export * from "./usePosition";
+export * from "./useSentinelVisibility";
 export * from "./useUpdateEffect";
 export * from "./useWidthOf";

package/dist/utils/index.js

@@ -30,6 +30,19 @@ Object.keys(_useContainsFocus).forEach(function (key) {
   });
 });
 
+var _useDidMount = require("./useDidMount");
+
+Object.keys(_useDidMount).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useDidMount[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useDidMount[key];
+    }
+  });
+});
+
 var _useFocusLock = require("./useFocusLock");
 
 Object.keys(_useFocusLock).forEach(function (key) {
@@ -82,6 +95,19 @@ Object.keys(_usePosition).forEach(function (key) {
   });
 });
 
+var _useSentinelVisibility = require("./useSentinelVisibility");
+
+Object.keys(_useSentinelVisibility).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useSentinelVisibility[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useSentinelVisibility[key];
+    }
+  });
+});
+
 var _useUpdateEffect = require("./useUpdateEffect");
 
 Object.keys(_useUpdateEffect).forEach(function (key) {

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./useClickOutside\"\nexport * from \"./useContainsFocus\"\nexport * from \"./useFocusLock\"\nexport * from \"./useIsomorphicLayoutEffect\"\nexport * from \"./useMutationObserver\"\nexport * from \"./usePosition\"\nexport * from \"./useUpdateEffect\"\nexport * from \"./useWidthOf\"\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./useClickOutside\"\nexport * from \"./useContainsFocus\"\nexport * from \"./useDidMount\"\nexport * from \"./useFocusLock\"\nexport * from \"./useIsomorphicLayoutEffect\"\nexport * from \"./useMutationObserver\"\nexport * from \"./usePosition\"\nexport * from \"./useSentinelVisibility\"\nexport * from \"./useUpdateEffect\"\nexport * from \"./useWidthOf\"\n"],"file":"index.js"}

package/dist/utils/useDidMount.d.ts

@@ -0,0 +1 @@
+export declare const useDidMount: (defaultMounted?: boolean) => boolean;

package/dist/utils/{useOnScroll.js → useDidMount.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useOnScroll = void 0;
+exports.useDidMount = void 0;
 
 var _react = require("react");
 
@@ -19,40 +19,19 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/**
- * useOnScroll is used to track if an element is scrolled vertically or not
- */
-var useOnScroll = function useOnScroll() {
-  var _useState = (0, _react.useState)(false),
+var useDidMount = function useDidMount() {
+  var defaultMounted = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  var _useState = (0, _react.useState)(defaultMounted),
       _useState2 = _slicedToArray(_useState, 2),
-      isScrolled = _useState2[0],
-      setIsScrolled = _useState2[1];
+      isMounted = _useState2[0],
+      toggleMounted = _useState2[1];
 
-  var elementRef = (0, _react.useRef)(null);
-  var node = elementRef.current;
   (0, _react.useEffect)(function () {
-    if (!("IntersectionObserver" in window)) return;
-    if (!node) return;
-    var observer = new IntersectionObserver(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 1),
-          entry = _ref2[0];
-
-      setIsScrolled(!entry.isIntersecting);
-    }, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 1.0
-    });
-    observer.observe(node);
-    return function () {
-      observer.unobserve(node);
-    };
-  }, [node, isScrolled]);
-  return {
-    isScrolled: isScrolled,
-    elementRef: elementRef
-  };
+    toggleMounted(true);
+  }, []);
+  return isMounted;
 };
 
-exports.useOnScroll = useOnScroll;
-//# sourceMappingURL=useOnScroll.js.map
+exports.useDidMount = useDidMount;
+//# sourceMappingURL=useDidMount.js.map

package/dist/utils/useDidMount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useDidMount.ts"],"names":["useDidMount","defaultMounted","isMounted","toggleMounted"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAA4B;AAAA,MAA3BC,cAA2B,uEAAV,KAAU;;AAAA,kBAClB,qBAASA,cAAT,CADkB;AAAA;AAAA,MAC9CC,SAD8C;AAAA,MACnCC,aADmC;;AAGrD,wBAAU,YAAM;AACdA,IAAAA,aAAa,CAAC,IAAD,CAAb;AACD,GAFD,EAEG,EAFH;AAIA,SAAOD,SAAP;AACD,CARM","sourcesContent":["import { useEffect, useState } from \"react\"\n\nexport const useDidMount = (defaultMounted = false) => {\n  const [isMounted, toggleMounted] = useState(defaultMounted)\n\n  useEffect(() => {\n    toggleMounted(true)\n  }, [])\n\n  return isMounted\n}\n"],"file":"useDidMount.js"}

package/dist/utils/useSentinelVisibility.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Used to track if the returned sentinel is in the viewport or not
+ */
+export declare const useSentinelVisibility: () => {
+    isSentinelVisible: boolean;
+    sentinel: JSX.Element;
+};

package/dist/utils/useSentinelVisibility.js

@@ -0,0 +1,72 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSentinelVisibility = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = require("../elements/Box");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * Used to track if the returned sentinel is in the viewport or not
+ */
+var useSentinelVisibility = function useSentinelVisibility() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isSentinelVisible = _useState2[0],
+      setSentinelVisibility = _useState2[1];
+
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!("IntersectionObserver" in window)) return; // Unsupported
+
+    var element = ref.current;
+    if (!element) return;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      setSentinelVisibility(!entry.isIntersecting);
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 1.0
+    });
+    observer.observe(element);
+    return function () {
+      observer.unobserve(element);
+    };
+  }, [isSentinelVisible]);
+  return {
+    isSentinelVisible: isSentinelVisible,
+    sentinel: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+      ref: ref,
+      position: "relative",
+      width: "100%",
+      height: 0
+    })
+  };
+};
+
+exports.useSentinelVisibility = useSentinelVisibility;
+//# sourceMappingURL=useSentinelVisibility.js.map

package/dist/utils/useSentinelVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useSentinelVisibility.tsx"],"names":["useSentinelVisibility","isSentinelVisible","setSentinelVisibility","ref","window","element","current","observer","IntersectionObserver","entry","isIntersecting","root","rootMargin","threshold","observe","unobserve","sentinel"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;AAEA;AACA;AACA;AACO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AAAA,kBACU,qBAAS,KAAT,CADV;AAAA;AAAA,MAClCC,iBADkC;AAAA,MACfC,qBADe;;AAEzC,MAAMC,GAAG,GAAG,mBAA2B,IAA3B,CAAZ;AAEA,wBAAU,YAAM;AACd,QAAI,EAAE,0BAA0BC,MAA5B,CAAJ,EAAyC,OAD3B,CACkC;;AAEhD,QAAMC,OAAO,GAAGF,GAAG,CAACG,OAApB;AACA,QAAI,CAACD,OAAL,EAAc;AAEd,QAAME,QAAQ,GAAG,IAAIC,oBAAJ,CACf,gBAAa;AAAA;AAAA,UAAXC,KAAW;;AACXP,MAAAA,qBAAqB,CAAC,CAACO,KAAK,CAACC,cAAR,CAArB;AACD,KAHc,EAIf;AACEC,MAAAA,IAAI,EAAE,IADR;AAEEC,MAAAA,UAAU,EAAE,KAFd;AAGEC,MAAAA,SAAS,EAAE;AAHb,KAJe,CAAjB;AAWAN,IAAAA,QAAQ,CAACO,OAAT,CAAiBT,OAAjB;AAEA,WAAO,YAAM;AACXE,MAAAA,QAAQ,CAACQ,SAAT,CAAmBV,OAAnB;AACD,KAFD;AAGD,GAtBD,EAsBG,CAACJ,iBAAD,CAtBH;AAwBA,SAAO;AACLA,IAAAA,iBAAiB,EAAjBA,iBADK;AAELe,IAAAA,QAAQ,eACN,6BAAC,QAAD;AAAK,MAAA,GAAG,EAAEb,GAAV;AAAsB,MAAA,QAAQ,EAAC,UAA/B;AAA0C,MAAA,KAAK,EAAC,MAAhD;AAAuD,MAAA,MAAM,EAAE;AAA/D;AAHG,GAAP;AAMD,CAlCM","sourcesContent":["import React, { useEffect, useState, useRef } from \"react\"\nimport { Box } from \"../elements/Box\"\n\n/**\n * Used to track if the returned sentinel is in the viewport or not\n */\nexport const useSentinelVisibility = () => {\n  const [isSentinelVisible, setSentinelVisibility] = useState(false)\n  const ref = useRef<HTMLElement | null>(null)\n\n  useEffect(() => {\n    if (!(\"IntersectionObserver\" in window)) return // Unsupported\n\n    const element = ref.current\n    if (!element) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setSentinelVisibility(!entry.isIntersecting)\n      },\n      {\n        root: null,\n        rootMargin: \"0px\",\n        threshold: 1.0,\n      }\n    )\n\n    observer.observe(element)\n\n    return () => {\n      observer.unobserve(element)\n    }\n  }, [isSentinelVisible])\n\n  return {\n    isSentinelVisible,\n    sentinel: (\n      <Box ref={ref as any} position=\"relative\" width=\"100%\" height={0} />\n    ),\n  }\n}\n"],"file":"useSentinelVisibility.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.10.0",
+  "version": "18.11.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -174,5 +174,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "5ed1b8df888f52c51ada1bce88adb179d66f88ad"
+  "gitHead": "21c3fa9a5b40f0cdec18ececfd229635f30ec9ea"
 }

package/dist/utils/useOnScroll.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * useOnScroll is used to track if an element is scrolled vertically or not
- */
-export declare const useOnScroll: () => {
-    isScrolled: boolean;
-    elementRef: import("react").MutableRefObject<null>;
-};

package/dist/utils/useOnScroll.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/utils/useOnScroll.ts"],"names":["useOnScroll","isScrolled","setIsScrolled","elementRef","node","current","window","observer","IntersectionObserver","entry","isIntersecting","root","rootMargin","threshold","observe","unobserve"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA,kBACK,qBAAS,KAAT,CADL;AAAA;AAAA,MACxBC,UADwB;AAAA,MACZC,aADY;;AAE/B,MAAMC,UAAU,GAAG,mBAAO,IAAP,CAAnB;AACA,MAAMC,IAAI,GAAGD,UAAU,CAACE,OAAxB;AAEA,wBAAU,YAAM;AACd,QAAI,EAAE,0BAA0BC,MAA5B,CAAJ,EAAyC;AACzC,QAAI,CAACF,IAAL,EAAW;AAEX,QAAMG,QAAQ,GAAG,IAAIC,oBAAJ,CACf,gBAAa;AAAA;AAAA,UAAXC,KAAW;;AACXP,MAAAA,aAAa,CAAC,CAACO,KAAK,CAACC,cAAR,CAAb;AACD,KAHc,EAIf;AACEC,MAAAA,IAAI,EAAE,IADR;AAEEC,MAAAA,UAAU,EAAE,KAFd;AAGEC,MAAAA,SAAS,EAAE;AAHb,KAJe,CAAjB;AAWAN,IAAAA,QAAQ,CAACO,OAAT,CAAiBV,IAAjB;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACQ,SAAT,CAAmBX,IAAnB;AACD,KAFD;AAGD,GApBD,EAoBG,CAACA,IAAD,EAAOH,UAAP,CApBH;AAsBA,SAAO;AAAEA,IAAAA,UAAU,EAAVA,UAAF;AAAcE,IAAAA,UAAU,EAAVA;AAAd,GAAP;AACD,CA5BM","sourcesContent":["import { useEffect, useState, useRef } from \"react\"\n\n/**\n * useOnScroll is used to track if an element is scrolled vertically or not\n */\nexport const useOnScroll = () => {\n  const [isScrolled, setIsScrolled] = useState(false)\n  const elementRef = useRef(null)\n  const node = elementRef.current\n\n  useEffect(() => {\n    if (!(\"IntersectionObserver\" in window)) return\n    if (!node) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsScrolled(!entry.isIntersecting)\n      },\n      {\n        root: null,\n        rootMargin: \"0px\",\n        threshold: 1.0,\n      }\n    )\n\n    observer.observe(node)\n\n    return () => {\n      observer.unobserve(node)\n    }\n  }, [node, isScrolled])\n\n  return { isScrolled, elementRef }\n}\n"],"file":"useOnScroll.js"}