@activecollab/components 2.0.435 → 2.0.437

package/dist/esm/components/Dialog/DialogContent.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "scroll"];
 import React from "react";
 import classnames from "classnames";
 import { StyledDialogContent } from "./Styles";
-// import { useDialogContext } from "./DialogContext";
-
 export const DialogContent = _ref => {
   let className = _ref.className,
     children = _ref.children,
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // useDialogContext();
-
   return /*#__PURE__*/React.createElement(StyledDialogContent, _extends({
+    $scroll: scroll,
     className: classnames("c-dialog-content", className)
   }, rest), children);
 };

package/dist/esm/components/Dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","names":["React","classnames","StyledDialogContent","DialogContent","_ref","className","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","displayName"],"sources":["../../../../src/components/Dialog/DialogContent.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledDialogContent } from \"./Styles\";\n// import { useDialogContext } from \"./DialogContext\";\n\nexport const DialogContent = ({\n  className,\n  children,\n  ...rest\n}: HTMLAttributes<HTMLDivElement>) => {\n  // useDialogContext();\n\n  return (\n    <StyledDialogContent\n      className={classnames(\"c-dialog-content\", className)}\n      {...rest}\n    >\n      {children}\n    </StyledDialogContent>\n  );\n};\n\nDialogContent.displayName = \"DialogContent\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,mBAAmB,QAAQ,UAAU;AAC9C;;AAEA,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAIS;EAAA,IAHpCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA;EAEP;;EAEA,oBACET,KAAA,CAAAU,aAAA,CAACR,mBAAmB,EAAAS,QAAA;IAClBN,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,GACjDE,IAAI,GAEPD,QACkB,CAAC;AAE1B,CAAC;AAEDH,aAAa,CAACS,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"file":"DialogContent.js","names":["React","classnames","StyledDialogContent","DialogContent","_ref","className","children","_ref$scroll","scroll","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$scroll","displayName"],"sources":["../../../../src/components/Dialog/DialogContent.tsx"],"sourcesContent":["import React, { HTMLAttributes } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledDialogContent } from \"./Styles\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n  /** Turn off when the content runs its own scroll container. */\n  scroll?: boolean;\n}\n\nexport const DialogContent = ({\n  className,\n  children,\n  scroll = true,\n  ...rest\n}: DialogContentProps) => {\n  return (\n    <StyledDialogContent\n      $scroll={scroll}\n      className={classnames(\"c-dialog-content\", className)}\n      {...rest}\n    >\n      {children}\n    </StyledDialogContent>\n  );\n};\n\nDialogContent.displayName = \"DialogContent\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA0B,OAAO;AAE7C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,mBAAmB,QAAQ,UAAU;AAO9C,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAKH;EAAA,IAJxBC,SAAS,GAAAD,IAAA,CAATC,SAAS;IACTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IACVE,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP,oBACEX,KAAA,CAAAY,aAAA,CAACV,mBAAmB,EAAAW,QAAA;IAClBC,OAAO,EAAEN,MAAO;IAChBH,SAAS,EAAEJ,UAAU,CAAC,kBAAkB,EAAEI,SAAS;EAAE,GACjDI,IAAI,GAEPH,QACkB,CAAC;AAE1B,CAAC;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/esm/components/Dialog/DialogContext.d.ts

@@ -1,5 +1,15 @@
 export interface DialogContextProps {
+    /** Starts the closing transition. The dialog's own onClose runs once it finishes. */
+    requestClose?: () => void;
+    /** The handler the dialog was given, used to recognise a button that only closes. */
+    onClose?: () => void;
 }
 export declare const DialogContext: import("react").Context<DialogContextProps | null>;
-export declare const useDialogContext: () => DialogContextProps;
+export declare const useDialogContext: () => DialogContextProps | null;
+/**
+ * Closes the dialog the way clicking the overlay does: the exit transition runs first, and the
+ * dialog's own onClose fires once it finishes. Use it for a Cancel button instead of calling the
+ * parent's close handler, which would unmount the dialog before it can animate out.
+ */
+export declare const useDialogClose: (fallback?: () => void) => () => void;
 //# sourceMappingURL=DialogContext.d.ts.map

package/dist/esm/components/Dialog/DialogContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/DialogContext.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;CAAG;AAEtC,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,eAAO,MAAM,gBAAgB,0BAU5B,CAAC"}
+{"version":3,"file":"DialogContext.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/DialogContext.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,qFAAqF;IACrF,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,eAAO,MAAM,gBAAgB,iCAAkC,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,IAAI,WAd7B,IAkBtB,CAAC"}

package/dist/esm/components/Dialog/DialogContext.js

@@ -1,13 +1,15 @@
 import { createContext, useContext } from "react";
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-
 export const DialogContext = /*#__PURE__*/createContext(null);
-export const useDialogContext = () => {
+export const useDialogContext = () => useContext(DialogContext);
+
+/**
+ * Closes the dialog the way clicking the overlay does: the exit transition runs first, and the
+ * dialog's own onClose fires once it finishes. Use it for a Cancel button instead of calling the
+ * parent's close handler, which would unmount the dialog before it can animate out.
+ */
+export const useDialogClose = fallback => {
+  var _ref, _context$requestClose;
   const context = useContext(DialogContext);
-  if (!context) {
-    throw new Error("Child components of Dialog can not be rendered outside the Dialog component!");
-  }
-  return context;
+  return (_ref = (_context$requestClose = context == null ? void 0 : context.requestClose) != null ? _context$requestClose : fallback) != null ? _ref : () => undefined;
 };
 //# sourceMappingURL=DialogContext.js.map

package/dist/esm/components/Dialog/DialogContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContext.js","names":["createContext","useContext","DialogContext","useDialogContext","context","Error"],"sources":["../../../../src/components/Dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface DialogContextProps {}\n\nexport const DialogContext = createContext<DialogContextProps | null>(null);\n\nexport const useDialogContext = () => {\n  const context = useContext(DialogContext);\n\n  if (!context) {\n    throw new Error(\n      \"Child components of Dialog can not be rendered outside the Dialog component!\"\n    );\n  }\n\n  return context;\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAEjD;;AAGA,OAAO,MAAMC,aAAa,gBAAGF,aAAa,CAA4B,IAAI,CAAC;AAE3E,OAAO,MAAMG,gBAAgB,GAAGA,CAAA,KAAM;EACpC,MAAMC,OAAO,GAAGH,UAAU,CAACC,aAAa,CAAC;EAEzC,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,8EACF,CAAC;EACH;EAEA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
+{"version":3,"file":"DialogContext.js","names":["createContext","useContext","DialogContext","useDialogContext","useDialogClose","fallback","_ref","_context$requestClose","context","requestClose","undefined"],"sources":["../../../../src/components/Dialog/DialogContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface DialogContextProps {\n  /** Starts the closing transition. The dialog's own onClose runs once it finishes. */\n  requestClose?: () => void;\n  /** The handler the dialog was given, used to recognise a button that only closes. */\n  onClose?: () => void;\n}\n\nexport const DialogContext = createContext<DialogContextProps | null>(null);\n\nexport const useDialogContext = () => useContext(DialogContext);\n\n/**\n * Closes the dialog the way clicking the overlay does: the exit transition runs first, and the\n * dialog's own onClose fires once it finishes. Use it for a Cancel button instead of calling the\n * parent's close handler, which would unmount the dialog before it can animate out.\n */\nexport const useDialogClose = (fallback?: () => void) => {\n  const context = useContext(DialogContext);\n\n  return context?.requestClose ?? fallback ?? (() => undefined);\n};\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AASjD,OAAO,MAAMC,aAAa,gBAAGF,aAAa,CAA4B,IAAI,CAAC;AAE3E,OAAO,MAAMG,gBAAgB,GAAGA,CAAA,KAAMF,UAAU,CAACC,aAAa,CAAC;;AAE/D;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,cAAc,GAAIC,QAAqB,IAAK;EAAA,IAAAC,IAAA,EAAAC,qBAAA;EACvD,MAAMC,OAAO,GAAGP,UAAU,CAACC,aAAa,CAAC;EAEzC,QAAAI,IAAA,IAAAC,qBAAA,GAAOC,OAAO,oBAAPA,OAAO,CAAEC,YAAY,YAAAF,qBAAA,GAAIF,QAAQ,YAAAC,IAAA,GAAK,MAAMI,SAAS;AAC9D,CAAC","ignoreList":[]}

package/dist/esm/components/Dialog/DialogTitle.d.ts

@@ -2,9 +2,12 @@ import React, { PropsWithChildren } from "react";
 export interface DialogTitleProps {
     className?: string;
     disableDefaultHeading?: boolean;
+    /** Draws a close button next to the heading. */
+    onClose?: () => void;
+    closeLabel?: string;
 }
 export declare const DialogTitle: {
-    ({ children, className, disableDefaultHeading, ...rest }: PropsWithChildren<DialogTitleProps>): React.JSX.Element;
+    ({ children, className, disableDefaultHeading, onClose, closeLabel, ...rest }: PropsWithChildren<DialogTitleProps>): React.JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=DialogTitle.d.ts.map

package/dist/esm/components/Dialog/DialogTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/DialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQjD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,WAAW;8DAKrB,iBAAiB,CAAC,gBAAgB,CAAC;;CAWrC,CAAC"}
+{"version":3,"file":"DialogTitle.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/DialogTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAcjD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW;mFAOrB,iBAAiB,CAAC,gBAAgB,CAAC;;CAoCrC,CAAC"}

package/dist/esm/components/Dialog/DialogTitle.js

@@ -1,23 +1,37 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "disableDefaultHeading"];
+const _excluded = ["children", "className", "disableDefaultHeading", "onClose", "closeLabel"];
 import React from "react";
 import classnames from "classnames";
-import { StyledDialogTitle } from "./Styles";
+import { useDialogContext } from "./DialogContext";
+import { StyledDialogTitle, StyledDialogTitleBar, StyledDialogTitleClose } from "./Styles";
+import { IconButton } from "../IconButton";
+import { CancelCrossIcon } from "../Icons";
 import { Header3 } from "../Typography/Variants/Header3";
-// import { useDialogContext } from "./DialogContext";
-
 export const DialogTitle = _ref => {
+  var _dialog$requestClose;
   let children = _ref.children,
     className = _ref.className,
     _ref$disableDefaultHe = _ref.disableDefaultHeading,
     disableDefaultHeading = _ref$disableDefaultHe === void 0 ? false : _ref$disableDefaultHe,
+    onClose = _ref.onClose,
+    _ref$closeLabel = _ref.closeLabel,
+    closeLabel = _ref$closeLabel === void 0 ? "Close" : _ref$closeLabel,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // useDialogContext();
+  const dialog = useDialogContext();
+  const heading = disableDefaultHeading ? children : /*#__PURE__*/React.createElement(Header3, null, children);
 
+  // Closing through the dialog lets the exit transition run; the caller's onClose fires once it
+  // finishes. Falling back keeps a title used outside a dialog working.
+  const handleClose = (_dialog$requestClose = dialog == null ? void 0 : dialog.requestClose) != null ? _dialog$requestClose : onClose;
   return /*#__PURE__*/React.createElement(StyledDialogTitle, _extends({
     className: classnames("c-dialog-title-wrapper", className)
-  }, rest), disableDefaultHeading ? children : /*#__PURE__*/React.createElement(Header3, null, children));
+  }, rest), onClose ? /*#__PURE__*/React.createElement(StyledDialogTitleBar, null, heading, /*#__PURE__*/React.createElement(StyledDialogTitleClose, null, /*#__PURE__*/React.createElement(IconButton, {
+    type: "button",
+    variant: "text gray",
+    "aria-label": closeLabel,
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))) : heading);
 };
 DialogTitle.displayName = "DialogTitle";
 //# sourceMappingURL=DialogTitle.js.map

package/dist/esm/components/Dialog/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.js","names":["React","classnames","StyledDialogTitle","Header3","DialogTitle","_ref","children","className","_ref$disableDefaultHe","disableDefaultHeading","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","displayName"],"sources":["../../../../src/components/Dialog/DialogTitle.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledDialogTitle } from \"./Styles\";\nimport { Header3 } from \"../Typography/Variants/Header3\";\n// import { useDialogContext } from \"./DialogContext\";\n\nexport interface DialogTitleProps {\n  className?: string;\n  disableDefaultHeading?: boolean;\n}\n\nexport const DialogTitle = ({\n  children,\n  className,\n  disableDefaultHeading = false,\n  ...rest\n}: PropsWithChildren<DialogTitleProps>) => {\n  // useDialogContext();\n\n  return (\n    <StyledDialogTitle\n      className={classnames(\"c-dialog-title-wrapper\", className)}\n      {...rest}\n    >\n      {disableDefaultHeading ? children : <Header3>{children}</Header3>}\n    </StyledDialogTitle>\n  );\n};\n\nDialogTitle.displayName = \"DialogTitle\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA6B,OAAO;AAEhD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiB,QAAQ,UAAU;AAC5C,SAASC,OAAO,QAAQ,gCAAgC;AACxD;;AAOA,OAAO,MAAMC,WAAW,GAAGC,IAAA,IAKgB;EAAA,IAJzCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAAC,qBAAA,GAAAH,IAAA,CACTI,qBAAqB;IAArBA,qBAAqB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAC1BE,IAAI,GAAAC,6BAAA,CAAAN,IAAA,EAAAO,SAAA;EAEP;;EAEA,oBACEZ,KAAA,CAAAa,aAAA,CAACX,iBAAiB,EAAAY,QAAA;IAChBP,SAAS,EAAEN,UAAU,CAAC,wBAAwB,EAAEM,SAAS;EAAE,GACvDG,IAAI,GAEPD,qBAAqB,GAAGH,QAAQ,gBAAGN,KAAA,CAAAa,aAAA,CAACV,OAAO,QAAEG,QAAkB,CAC/C,CAAC;AAExB,CAAC;AAEDF,WAAW,CAACW,WAAW,GAAG,aAAa","ignoreList":[]}
+{"version":3,"file":"DialogTitle.js","names":["React","classnames","useDialogContext","StyledDialogTitle","StyledDialogTitleBar","StyledDialogTitleClose","IconButton","CancelCrossIcon","Header3","DialogTitle","_ref","_dialog$requestClose","children","className","_ref$disableDefaultHe","disableDefaultHeading","onClose","_ref$closeLabel","closeLabel","rest","_objectWithoutPropertiesLoose","_excluded","dialog","heading","createElement","handleClose","requestClose","_extends","type","variant","onClick","displayName"],"sources":["../../../../src/components/Dialog/DialogTitle.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { useDialogContext } from \"./DialogContext\";\nimport {\n  StyledDialogTitle,\n  StyledDialogTitleBar,\n  StyledDialogTitleClose,\n} from \"./Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { CancelCrossIcon } from \"../Icons\";\nimport { Header3 } from \"../Typography/Variants/Header3\";\n\nexport interface DialogTitleProps {\n  className?: string;\n  disableDefaultHeading?: boolean;\n  /** Draws a close button next to the heading. */\n  onClose?: () => void;\n  closeLabel?: string;\n}\n\nexport const DialogTitle = ({\n  children,\n  className,\n  disableDefaultHeading = false,\n  onClose,\n  closeLabel = \"Close\",\n  ...rest\n}: PropsWithChildren<DialogTitleProps>) => {\n  const dialog = useDialogContext();\n  const heading = disableDefaultHeading ? (\n    children\n  ) : (\n    <Header3>{children}</Header3>\n  );\n\n  // Closing through the dialog lets the exit transition run; the caller's onClose fires once it\n  // finishes. Falling back keeps a title used outside a dialog working.\n  const handleClose = dialog?.requestClose ?? onClose;\n\n  return (\n    <StyledDialogTitle\n      className={classnames(\"c-dialog-title-wrapper\", className)}\n      {...rest}\n    >\n      {onClose ? (\n        <StyledDialogTitleBar>\n          {heading}\n          <StyledDialogTitleClose>\n            <IconButton\n              type=\"button\"\n              variant=\"text gray\"\n              aria-label={closeLabel}\n              onClick={handleClose}\n            >\n              <CancelCrossIcon />\n            </IconButton>\n          </StyledDialogTitleClose>\n        </StyledDialogTitleBar>\n      ) : (\n        heading\n      )}\n    </StyledDialogTitle>\n  );\n};\n\nDialogTitle.displayName = \"DialogTitle\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAA6B,OAAO;AAEhD,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,gBAAgB,QAAQ,iBAAiB;AAClD,SACEC,iBAAiB,EACjBC,oBAAoB,EACpBC,sBAAsB,QACjB,UAAU;AACjB,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,eAAe,QAAQ,UAAU;AAC1C,SAASC,OAAO,QAAQ,gCAAgC;AAUxD,OAAO,MAAMC,WAAW,GAAGC,IAAA,IAOgB;EAAA,IAAAC,oBAAA;EAAA,IANzCC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,qBAAA,GAAAJ,IAAA,CACTK,qBAAqB;IAArBA,qBAAqB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAC7BE,OAAO,GAAAN,IAAA,CAAPM,OAAO;IAAAC,eAAA,GAAAP,IAAA,CACPQ,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,OAAO,GAAAA,eAAA;IACjBE,IAAI,GAAAC,6BAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP,MAAMC,MAAM,GAAGpB,gBAAgB,CAAC,CAAC;EACjC,MAAMqB,OAAO,GAAGR,qBAAqB,GACnCH,QAAQ,gBAERZ,KAAA,CAAAwB,aAAA,CAAChB,OAAO,QAAEI,QAAkB,CAC7B;;EAED;EACA;EACA,MAAMa,WAAW,IAAAd,oBAAA,GAAGW,MAAM,oBAANA,MAAM,CAAEI,YAAY,YAAAf,oBAAA,GAAIK,OAAO;EAEnD,oBACEhB,KAAA,CAAAwB,aAAA,CAACrB,iBAAiB,EAAAwB,QAAA;IAChBd,SAAS,EAAEZ,UAAU,CAAC,wBAAwB,EAAEY,SAAS;EAAE,GACvDM,IAAI,GAEPH,OAAO,gBACNhB,KAAA,CAAAwB,aAAA,CAACpB,oBAAoB,QAClBmB,OAAO,eACRvB,KAAA,CAAAwB,aAAA,CAACnB,sBAAsB,qBACrBL,KAAA,CAAAwB,aAAA,CAAClB,UAAU;IACTsB,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAC,WAAW;IACnB,cAAYX,UAAW;IACvBY,OAAO,EAAEL;EAAY,gBAErBzB,KAAA,CAAAwB,aAAA,CAACjB,eAAe,MAAE,CACR,CACU,CACJ,CAAC,GAEvBgB,OAEe,CAAC;AAExB,CAAC;AAEDd,WAAW,CAACsB,WAAW,GAAG,aAAa","ignoreList":[]}

package/dist/esm/components/Dialog/Styles.d.ts

@@ -1,6 +1,23 @@
-export declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const dialogSizes: {
+    readonly s: 440;
+    readonly m: 540;
+    readonly l: 700;
+    readonly xl: 840;
+    readonly xxl: 1000;
+    readonly xxxl: 1120;
+};
+export type DialogSize = keyof typeof dialogSizes;
+export declare const StyledDialogViewport: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDialog: import("styled-components").StyledComponent<"div", any, {
+    $maxWidth: number;
+    $height?: string;
+}, never>;
 export declare const StyledDialogTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDialogTitleBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDialogTitleClose: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDialogContent: import("styled-components").StyledComponent<"div", any, {
+    $scroll: boolean;
+}, never>;
 export declare const StyledDialogContentDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledDialogActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Dialog/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,oEA2BxB,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAK7B,CAAC;AAGF,eAAO,MAAM,mBAAmB,oEAQ/B,CAAC;AAGF,eAAO,MAAM,0BAA0B,oEAGtC,CAAC;AAGF,eAAO,MAAM,mBAAmB,oEAK/B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAQlD,eAAO,MAAM,oBAAoB,oEAoChC,CAAC;AAIF,eAAO,MAAM,YAAY;eACZ,MAAM;cACP,MAAM;SA4BjB,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAM7B,CAAC;AASF,eAAO,MAAM,oBAAoB,oEAKhC,CAAC;AAGF,eAAO,MAAM,sBAAsB,oEAMlC,CAAC;AAGF,eAAO,MAAM,mBAAmB;aAAyB,OAAO;SAQ/D,CAAC;AAGF,eAAO,MAAM,0BAA0B,oEAItC,CAAC;AAGF,eAAO,MAAM,mBAAmB,oEAS/B,CAAC"}

package/dist/esm/components/Dialog/Styles.js

@@ -1,30 +1,66 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { BoxSizingStyle } from "../BoxSizingStyle";
 import { screen } from "../BreakPoints";
 import { FontStyle } from "../FontStyle";
+export const dialogSizes = {
+  s: 440,
+  m: 540,
+  l: 700,
+  xl: 840,
+  xxl: 1000,
+  xxxl: 1120
+};
+const MIN_GAP = "2.5vh";
+const MAX_DIALOG_HEIGHT = "95vh";
+
+// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at
+// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both
+// shrink from the same basis, so the gaps stay equal down to MIN_GAP.
+export const StyledDialogViewport = styled.div.withConfig({
+  displayName: "Styles__StyledDialogViewport",
+  componentId: "sc-jwpvgm-0"
+})(["position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;padding-left:16px;padding-right:16px;pointer-events:none;--ac-dialog-offset:60px;", "{--ac-dialog-offset:126px;}&::before,&::after{content:\"\";flex-shrink:1;flex-basis:var(--ac-dialog-offset);min-height:", ";}&::before{flex-grow:0;}&::after{flex-grow:1;}", ""], screen.sm, MIN_GAP, BoxSizingStyle);
+StyledDialogViewport.displayName = "StyledDialogViewport";
 export const StyledDialog = styled.div.withConfig({
   displayName: "Styles__StyledDialog",
-  componentId: "sc-jwpvgm-0"
-})(["display:flex;flex-direction:column;flex:1 1 auto;max-height:calc(100vh - 156px);background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;width:310px;margin:60px auto 30px auto;position:relative;@media (max-width:640px){width:calc(100% - 32px);max-width:640px;margin-left:16px !important;margin-right:16px !important;}", " ", " ", "{width:540px;margin:126px auto 30px auto;}"], FontStyle, BoxSizingStyle, screen.sm);
+  componentId: "sc-jwpvgm-1"
+})(["display:flex;flex-direction:column;flex:0 0 auto;pointer-events:auto;width:100%;max-width:", "px;max-height:", ";background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:8px;position:relative;transition:max-width 0.2s ease,height 0.2s ease;@media (prefers-reduced-motion:reduce){transition:none;}", " ", " ", ""], props => props.$maxWidth, MAX_DIALOG_HEIGHT, props => props.$height && css(["height:", ";"], props.$height), FontStyle, BoxSizingStyle);
 StyledDialog.displayName = "StyledDialog";
 export const StyledDialogTitle = styled.div.withConfig({
   displayName: "Styles__StyledDialogTitle",
-  componentId: "sc-jwpvgm-1"
-})(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
+  componentId: "sc-jwpvgm-2"
+})(["padding:20px 30px;flex:0 0 auto;", " ", ""], FontStyle, BoxSizingStyle);
 StyledDialogTitle.displayName = "StyledDialogTitle";
+
+// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the
+// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.
+const CLOSE_OFFSET = 8;
+const CLOSE_RESERVE = 44 - CLOSE_OFFSET;
+
+// The header is as tall as its heading, with or without a close button.
+export const StyledDialogTitleBar = styled.div.withConfig({
+  displayName: "Styles__StyledDialogTitleBar",
+  componentId: "sc-jwpvgm-3"
+})(["position:relative;display:flex;align-items:center;padding-right:", "px;"], CLOSE_RESERVE);
+StyledDialogTitleBar.displayName = "StyledDialogTitleBar";
+export const StyledDialogTitleClose = styled.div.withConfig({
+  displayName: "Styles__StyledDialogTitleClose",
+  componentId: "sc-jwpvgm-4"
+})(["position:absolute;right:-", "px;top:50%;transform:translateY(-50%);line-height:0;"], CLOSE_OFFSET);
+StyledDialogTitleClose.displayName = "StyledDialogTitleClose";
 export const StyledDialogContent = styled.div.withConfig({
   displayName: "Styles__StyledDialogContent",
-  componentId: "sc-jwpvgm-2"
-})(["padding:20px 30px;max-height:580px;overflow-y:auto;flex:1 1 auto;", " ", ""], FontStyle, BoxSizingStyle);
+  componentId: "sc-jwpvgm-5"
+})(["padding:20px 30px;flex:1 1 auto;min-height:0;overflow-y:", ";", " ", ""], props => props.$scroll ? "auto" : "visible", FontStyle, BoxSizingStyle);
 StyledDialogContent.displayName = "StyledDialogContent";
 export const StyledDialogContentDivider = styled.div.withConfig({
   displayName: "Styles__StyledDialogContentDivider",
-  componentId: "sc-jwpvgm-3"
-})(["border-top:1px solid var(--border-primary);height:1px;"]);
+  componentId: "sc-jwpvgm-6"
+})(["border-top:1px solid var(--border-primary);height:1px;flex:0 0 auto;"]);
 StyledDialogContentDivider.displayName = "StyledDialogContentDivider";
 export const StyledDialogActions = styled.div.withConfig({
   displayName: "Styles__StyledDialogActions",
-  componentId: "sc-jwpvgm-4"
-})(["padding:20px 30px;", " ", ""], FontStyle, BoxSizingStyle);
+  componentId: "sc-jwpvgm-7"
+})(["padding:20px 30px;flex:0 0 auto;display:flex;align-items:center;gap:12px;", " ", ""], FontStyle, BoxSizingStyle);
 StyledDialogActions.displayName = "StyledDialogActions";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Dialog/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","BoxSizingStyle","screen","FontStyle","StyledDialog","div","withConfig","displayName","componentId","sm","StyledDialogTitle","StyledDialogContent","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledDialog = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  max-height: calc(100vh - 156px);\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 8px;\n  width: 310px;\n  margin: 60px auto 30px auto;\n  position: relative;\n\n  @media (max-width: 640px) {\n    width: calc(100% - 32px);\n    max-width: 640px;\n    margin-left: 16px !important;\n    margin-right: 16px !important;\n  }\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${screen.sm} {\n    width: 540px;\n    margin: 126px auto 30px auto;\n  }\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n  padding: 20px 30px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\nexport const StyledDialogContent = styled.div`\n  padding: 20px 30px;\n  max-height: 580px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n  border-top: 1px solid var(--border-primary);\n  height: 1px;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n  padding: 20px 30px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,YAAY,GAAGJ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6bAoBlCL,SAAS,EACTF,cAAc,EAEdC,MAAM,CAACO,EAAE,CAIZ;AAEDL,YAAY,CAACG,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMG,iBAAiB,GAAGV,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGvCL,SAAS,EACTF,cAAc,CACjB;AACDS,iBAAiB,CAACH,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMI,mBAAmB,GAAGX,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mFAMzCL,SAAS,EACTF,cAAc,CACjB;AACDU,mBAAmB,CAACJ,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMK,0BAA0B,GAAGZ,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8DAGnD;AACDI,0BAA0B,CAACL,WAAW,GAAG,4BAA4B;AAErE,OAAO,MAAMM,mBAAmB,GAAGb,MAAM,CAACK,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAGzCL,SAAS,EACTF,cAAc,CACjB;AACDY,mBAAmB,CAACN,WAAW,GAAG,qBAAqB","ignoreList":[]}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","screen","FontStyle","dialogSizes","s","m","l","xl","xxl","xxxl","MIN_GAP","MAX_DIALOG_HEIGHT","StyledDialogViewport","div","withConfig","displayName","componentId","sm","StyledDialog","props","$maxWidth","$height","StyledDialogTitle","CLOSE_OFFSET","CLOSE_RESERVE","StyledDialogTitleBar","StyledDialogTitleClose","StyledDialogContent","$scroll","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const dialogSizes = {\n  s: 440,\n  m: 540,\n  l: 700,\n  xl: 840,\n  xxl: 1000,\n  xxxl: 1120,\n} as const;\n\nexport type DialogSize = keyof typeof dialogSizes;\n\nconst MIN_GAP = \"2.5vh\";\nconst MAX_DIALOG_HEIGHT = \"95vh\";\n\n// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at\n// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both\n// shrink from the same basis, so the gaps stay equal down to MIN_GAP.\nexport const StyledDialogViewport = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-left: 16px;\n  padding-right: 16px;\n  pointer-events: none;\n\n  --ac-dialog-offset: 60px;\n\n  ${screen.sm} {\n    --ac-dialog-offset: 126px;\n  }\n\n  &::before,\n  &::after {\n    content: \"\";\n    flex-shrink: 1;\n    flex-basis: var(--ac-dialog-offset);\n    min-height: ${MIN_GAP};\n  }\n\n  &::before {\n    flex-grow: 0;\n  }\n\n  &::after {\n    flex-grow: 1;\n  }\n\n  ${BoxSizingStyle}\n`;\n\nStyledDialogViewport.displayName = \"StyledDialogViewport\";\n\nexport const StyledDialog = styled.div<{\n  $maxWidth: number;\n  $height?: string;\n}>`\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  pointer-events: auto;\n  width: 100%;\n  max-width: ${(props) => props.$maxWidth}px;\n  max-height: ${MAX_DIALOG_HEIGHT};\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 8px;\n  position: relative;\n  transition: max-width 0.2s ease, height 0.2s ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n\n  ${(props) =>\n    props.$height &&\n    css`\n      height: ${props.$height};\n    `}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\n// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the\n// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.\nconst CLOSE_OFFSET = 8;\nconst CLOSE_RESERVE = 44 - CLOSE_OFFSET;\n\n// The header is as tall as its heading, with or without a close button.\nexport const StyledDialogTitleBar = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding-right: ${CLOSE_RESERVE}px;\n`;\nStyledDialogTitleBar.displayName = \"StyledDialogTitleBar\";\n\nexport const StyledDialogTitleClose = styled.div`\n  position: absolute;\n  right: -${CLOSE_OFFSET}px;\n  top: 50%;\n  transform: translateY(-50%);\n  line-height: 0;\n`;\nStyledDialogTitleClose.displayName = \"StyledDialogTitleClose\";\n\nexport const StyledDialogContent = styled.div<{ $scroll: boolean }>`\n  padding: 20px 30px;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: ${(props) => (props.$scroll ? \"auto\" : \"visible\")};\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n  border-top: 1px solid var(--border-primary);\n  height: 1px;\n  flex: 0 0 auto;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n  padding: 20px 30px;\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,SAAS,QAAQ,cAAc;AAExC,OAAO,MAAMC,WAAW,GAAG;EACzBC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,CAAC,EAAE,GAAG;EACNC,EAAE,EAAE,GAAG;EACPC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE;AACR,CAAU;AAIV,MAAMC,OAAO,GAAG,OAAO;AACvB,MAAMC,iBAAiB,GAAG,MAAM;;AAEhC;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGd,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kXAe1Cf,MAAM,CAACgB,EAAE,EASKP,OAAO,EAWrBV,cAAc,CACjB;AAEDY,oBAAoB,CAACG,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMG,YAAY,GAAGpB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0XAStBG,KAAK,IAAKA,KAAK,CAACC,SAAS,EACzBT,iBAAiB,EAY5BQ,KAAK,IACNA,KAAK,CAACE,OAAO,IACbtB,GAAG,mBACSoB,KAAK,CAACE,OAAO,CACxB,EAEDnB,SAAS,EACTF,cAAc,CACjB;AAEDkB,YAAY,CAACH,WAAW,GAAG,cAAc;AAEzC,OAAO,MAAMO,iBAAiB,GAAGxB,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,kDAIvCd,SAAS,EACTF,cAAc,CACjB;AACDsB,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;;AAEnD;AACA;AACA,MAAMQ,YAAY,GAAG,CAAC;AACtB,MAAMC,aAAa,GAAG,EAAE,GAAGD,YAAY;;AAEvC;AACA,OAAO,MAAME,oBAAoB,GAAG3B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gFAI3BQ,aAAa,CAC/B;AACDC,oBAAoB,CAACV,WAAW,GAAG,sBAAsB;AAEzD,OAAO,MAAMW,sBAAsB,GAAG5B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0FAEpCO,YAAY,CAIvB;AACDG,sBAAsB,CAACX,WAAW,GAAG,wBAAwB;AAE7D,OAAO,MAAMY,mBAAmB,GAAG7B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+EAI5BG,KAAK,IAAMA,KAAK,CAACS,OAAO,GAAG,MAAM,GAAG,SAAU,EAE3D1B,SAAS,EACTF,cAAc,CACjB;AACD2B,mBAAmB,CAACZ,WAAW,GAAG,qBAAqB;AAEvD,OAAO,MAAMc,0BAA0B,GAAG/B,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAInD;AACDa,0BAA0B,CAACd,WAAW,GAAG,4BAA4B;AAErE,OAAO,MAAMe,mBAAmB,GAAGhC,MAAM,CAACe,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAOzCd,SAAS,EACTF,cAAc,CACjB;AACD8B,mBAAmB,CAACf,WAAW,GAAG,qBAAqB","ignoreList":[]}

package/dist/esm/components/Dialog/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Dialog";
+export * from "./DialogContext";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

package/dist/esm/components/Dialog/index.js

@@ -1,2 +1,3 @@
 export * from "./Dialog";
+export * from "./DialogContext";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Dialog/index.ts"],"sourcesContent":["export * from \"./Dialog\";\n"],"mappings":"AAAA,cAAc,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Dialog/index.ts"],"sourcesContent":["export * from \"./Dialog\";\nexport * from \"./DialogContext\";\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,iBAAiB","ignoreList":[]}

package/dist/esm/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,sHAuGjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,YAAY,EAIb,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,MAAM;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,YAAY,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,KAAK,KAAA,KAAK,IAAI,CAAC;CAClC;AAQD,eAAO,MAAM,KAAK,sHAwGjB,CAAC"}

package/dist/esm/components/Modal/Modal.js

@@ -70,11 +70,12 @@ export const Modal = /*#__PURE__*/forwardRef((_ref, ref) => {
       props = {
         onEnter: createChainedFunction(handleEnter, children.props.onEnter),
         onExited: createChainedFunction(handleExited, children.props.onExited),
-        in: open
+        in: open,
+        forceClose: handleClose
       };
     }
     return props;
-  }, [children, handleEnter, handleExited, hasTransition, open]);
+  }, [children, handleClose, handleEnter, handleExited, hasTransition, open]);
   if (!open && (!hasTransition || exited)) {
     return null;
   }

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","createChainedFunction","useForkRef","Overlay","Window","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","_ref","ref","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundClick","_ref$disableBackgroun2","disableBackgroundColor","_ref$disableCloseOnEs","disableCloseOnEsc","_ref$open","open","defaultOpen","onClose","onClickOutside","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","createElement","_extends","onClick","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\n\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","createChainedFunction","useForkRef","Overlay","Window","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","_ref","ref","_ref$disableFocusLock","disableFocusLock","_ref$disableScrollLoc","disableScrollLock","_ref$disableBackgroun","disableBackgroundClick","_ref$disableBackgroun2","disableBackgroundColor","_ref$disableCloseOnEs","disableCloseOnEsc","_ref$open","open","defaultOpen","onClose","onClickOutside","rest","_objectWithoutPropertiesLoose","_excluded","_useState","setOpen","_useState2","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","forceClose","createElement","_extends","onClick","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\n\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Overlay } from \"../Overlay\";\nimport { Window } from \"../Window\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n          forceClose: handleClose,\n        };\n      }\n\n      return props;\n    }, [children, handleClose, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Transitions/Fade/Fade.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fade.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/Fade/Fade.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,UAAW,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgBD,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,UAAU,CAoB/B,CAAC"}
+{"version":3,"file":"Fade.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/Fade/Fade.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,UAAW,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC3D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgBD,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,UAAU,CAqC/B,CAAC"}

package/dist/esm/components/Transitions/Fade/Fade.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["in", "children", "style", "timeout"];
+const _excluded = ["in", "children", "style", "timeout", "onEnter"];
 import React, { cloneElement } from "react";
 import { Transition } from "react-transition-group";
 const defaultStyle = duration => ({
@@ -28,11 +28,20 @@ export const Fade = _ref => {
     style = _ref.style,
     _ref$timeout = _ref.timeout,
     timeout = _ref$timeout === void 0 ? 500 : _ref$timeout,
+    onEnter = _ref.onEnter,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // Same forced layout as SlideFromTop: without it the starting opacity never lands in the DOM.
+  const handleEnter = (node, isAppearing) => {
+    if (node) {
+      void node.offsetHeight;
+    }
+    onEnter == null || onEnter(node, isAppearing);
+  };
   return /*#__PURE__*/React.createElement(Transition, _extends({
     appear: true,
     in: inProp,
-    timeout: timeout
+    timeout: timeout,
+    onEnter: handleEnter
   }, rest), state => {
     return /*#__PURE__*/cloneElement(children, {
       style: _extends({

package/dist/esm/components/Transitions/Fade/Fade.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fade.js","names":["React","cloneElement","Transition","defaultStyle","duration","transition","opacity","transitionStyles","entering","entered","exiting","exited","Fade","_ref","_ref$in","in","inProp","children","style","_ref$timeout","timeout","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","appear","state","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/Fade/Fade.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface IFadeProps extends Omit<TransitionProps, \"timeout\"> {\n  children: ReactElement;\n  timeout?: number;\n}\n\nconst defaultStyle = (\n  duration: number\n): Partial<{ transition: string; opacity: number }> => ({\n  transition: `all ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n  exited: { opacity: 0 },\n};\n\nexport const Fade: FC<IFadeProps> = ({\n  in: inProp = false,\n  children,\n  style,\n  timeout = 500,\n  ...rest\n}) => (\n  <Transition appear in={inProp} timeout={timeout} {...rest}>\n    {(state): ReactElement => {\n      return cloneElement(children, {\n        style: {\n          visibility: state === \"exited\" && !inProp ? \"hidden\" : undefined,\n          ...defaultStyle(timeout),\n          ...transitionStyles[state],\n          ...style,\n          ...children.props.style,\n        },\n      });\n    }}\n  </Transition>\n);\n\nFade.displayName = \"Fade\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAsBC,YAAY,QAAQ,OAAO;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AASnD,MAAMC,YAAY,GAChBC,QAAgB,KACsC;EACtDC,UAAU,WAASD,QAAQ,mBAAgB;EAC3CE,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,gBAAgB,GAAG;EACvBC,QAAQ,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAC;EACxBG,OAAO,EAAE;IAAEH,OAAO,EAAE;EAAE,CAAC;EACvBI,OAAO,EAAE;IAAEJ,OAAO,EAAE;EAAE,CAAC;EACvBK,MAAM,EAAE;IAAEL,OAAO,EAAE;EAAE;AACvB,CAAC;AAED,OAAO,MAAMM,IAAoB,GAAGC,IAAA;EAAA,IAAAC,OAAA,GAAAD,IAAA,CAClCE,EAAE;IAAEC,MAAM,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,YAAA,GAAAN,IAAA,CACLO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IACVE,IAAI,GAAAC,6BAAA,CAAAT,IAAA,EAAAU,SAAA;EAAA,oBAEPvB,KAAA,CAAAwB,aAAA,CAACtB,UAAU,EAAAuB,QAAA;IAACC,MAAM;IAACX,EAAE,EAAEC,MAAO;IAACI,OAAO,EAAEA;EAAQ,GAAKC,IAAI,GACrDM,KAAK,IAAmB;IACxB,oBAAO1B,YAAY,CAACgB,QAAQ,EAAE;MAC5BC,KAAK,EAAAO,QAAA;QACHG,UAAU,EAAED,KAAK,KAAK,QAAQ,IAAI,CAACX,MAAM,GAAG,QAAQ,GAAGa;MAAS,GAC7D1B,YAAY,CAACiB,OAAO,CAAC,EACrBb,gBAAgB,CAACoB,KAAK,CAAC,EACvBT,KAAK,EACLD,QAAQ,CAACa,KAAK,CAACZ,KAAK;IAE3B,CAAC,CAAC;EACJ,CACU,CAAC;AAAA,CACd;AAEDN,IAAI,CAACmB,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"file":"Fade.js","names":["React","cloneElement","Transition","defaultStyle","duration","transition","opacity","transitionStyles","entering","entered","exiting","exited","Fade","_ref","_ref$in","in","inProp","children","style","_ref$timeout","timeout","onEnter","rest","_objectWithoutPropertiesLoose","_excluded","handleEnter","node","isAppearing","offsetHeight","createElement","_extends","appear","state","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/Fade/Fade.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface IFadeProps extends Omit<TransitionProps, \"timeout\"> {\n  children: ReactElement;\n  timeout?: number;\n}\n\nconst defaultStyle = (\n  duration: number\n): Partial<{ transition: string; opacity: number }> => ({\n  transition: `all ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n  exited: { opacity: 0 },\n};\n\nexport const Fade: FC<IFadeProps> = ({\n  in: inProp = false,\n  children,\n  style,\n  timeout = 500,\n  onEnter,\n  ...rest\n}) => {\n  // Same forced layout as SlideFromTop: without it the starting opacity never lands in the DOM.\n  const handleEnter = (node: HTMLElement, isAppearing: boolean) => {\n    if (node) {\n      void node.offsetHeight;\n    }\n    onEnter?.(node, isAppearing);\n  };\n\n  return (\n    <Transition\n      appear\n      in={inProp}\n      timeout={timeout}\n      onEnter={handleEnter}\n      {...rest}\n    >\n      {(state): ReactElement => {\n        return cloneElement(children, {\n          style: {\n            visibility: state === \"exited\" && !inProp ? \"hidden\" : undefined,\n            ...defaultStyle(timeout),\n            ...transitionStyles[state],\n            ...style,\n            ...children.props.style,\n          },\n        });\n      }}\n    </Transition>\n  );\n};\n\nFade.displayName = \"Fade\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAsBC,YAAY,QAAQ,OAAO;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AASnD,MAAMC,YAAY,GAChBC,QAAgB,KACsC;EACtDC,UAAU,WAASD,QAAQ,mBAAgB;EAC3CE,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,gBAAgB,GAAG;EACvBC,QAAQ,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAC;EACxBG,OAAO,EAAE;IAAEH,OAAO,EAAE;EAAE,CAAC;EACvBI,OAAO,EAAE;IAAEJ,OAAO,EAAE;EAAE,CAAC;EACvBK,MAAM,EAAE;IAAEL,OAAO,EAAE;EAAE;AACvB,CAAC;AAED,OAAO,MAAMM,IAAoB,GAAGC,IAAA,IAO9B;EAAA,IAAAC,OAAA,GAAAD,IAAA,CANJE,EAAE;IAAEC,MAAM,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,YAAA,GAAAN,IAAA,CACLO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IACbE,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACJC,IAAI,GAAAC,6BAAA,CAAAV,IAAA,EAAAW,SAAA;EAEP;EACA,MAAMC,WAAW,GAAGA,CAACC,IAAiB,EAAEC,WAAoB,KAAK;IAC/D,IAAID,IAAI,EAAE;MACR,KAAKA,IAAI,CAACE,YAAY;IACxB;IACAP,OAAO,YAAPA,OAAO,CAAGK,IAAI,EAAEC,WAAW,CAAC;EAC9B,CAAC;EAED,oBACE3B,KAAA,CAAA6B,aAAA,CAAC3B,UAAU,EAAA4B,QAAA;IACTC,MAAM;IACNhB,EAAE,EAAEC,MAAO;IACXI,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEI;EAAY,GACjBH,IAAI,GAENU,KAAK,IAAmB;IACxB,oBAAO/B,YAAY,CAACgB,QAAQ,EAAE;MAC5BC,KAAK,EAAAY,QAAA;QACHG,UAAU,EAAED,KAAK,KAAK,QAAQ,IAAI,CAAChB,MAAM,GAAG,QAAQ,GAAGkB;MAAS,GAC7D/B,YAAY,CAACiB,OAAO,CAAC,EACrBb,gBAAgB,CAACyB,KAAK,CAAC,EACvBd,KAAK,EACLD,QAAQ,CAACkB,KAAK,CAACjB,KAAK;IAE3B,CAAC,CAAC;EACJ,CACU,CAAC;AAEjB,CAAC;AAEDN,IAAI,CAACwB,WAAW,GAAG,MAAM","ignoreList":[]}

package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.d.ts

@@ -3,6 +3,8 @@ import { TransitionProps } from "../types";
 interface ISlideFromTop extends Omit<TransitionProps, "timeout"> {
     children: ReactElement;
     timeout?: number;
+    /** How far above its resting place the element starts. A fixed travel, not a share of its height. */
+    distance?: number;
 }
 export declare const SlideFromTop: FC<ISlideFromTop>;
 export {};

package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideFromTop.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC9D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgCD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CA2B1C,CAAC"}
+{"version":3,"file":"SlideFromTop.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAgB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IAC9D,QAAQ,EAAE,YAAY,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,aAAa,CAyC1C,CAAC"}

package/dist/esm/components/Transitions/SlideFromTop/SlideFromTop.js

@@ -1,33 +1,37 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { cloneElement } from "react";
 import { Transition } from "react-transition-group";
-const defaultStyle = {
-  transitionProperty: "opacity, transform",
-  transitionTimingFunction: "linear ease-out",
-  transform: "translateY(-100%)",
-  opacity: 0
-};
-const transitionStyles = {
-  entering: {
-    opacity: 1,
-    transform: "translateY(0)",
-    transitionDuration: ".3s"
-  },
-  entered: {
-    opacity: 1,
-    transform: "translateY(0)",
-    transitionDuration: ".3s"
-  },
-  exiting: {
-    opacity: 0,
-    transform: "translateY(-100%)",
-    transitionDuration: ".2s"
-  },
-  exited: {
-    opacity: 0,
-    transform: "translateY(-100%)",
-    transitionDuration: ".2s"
-  }
+const DEFAULT_DISTANCE = 25;
+const buildStyles = distance => {
+  const away = "translateY(-" + distance + "px)";
+  return {
+    base: {
+      transitionProperty: "opacity, transform",
+      transitionTimingFunction: "ease-out",
+      transform: away,
+      opacity: 0
+    },
+    entering: {
+      opacity: 1,
+      transform: "translateY(0)",
+      transitionDuration: ".3s"
+    },
+    entered: {
+      opacity: 1,
+      transform: "translateY(0)",
+      transitionDuration: ".3s"
+    },
+    exiting: {
+      opacity: 0,
+      transform: away,
+      transitionDuration: ".2s"
+    },
+    exited: {
+      opacity: 0,
+      transform: away,
+      transitionDuration: ".2s"
+    }
+  };
 };
 export const SlideFromTop = _ref => {
   let _ref$in = _ref.in,
@@ -37,18 +41,30 @@ export const SlideFromTop = _ref => {
     children = _ref.children,
     style = _ref.style,
     _ref$timeout = _ref.timeout,
-    timeout = _ref$timeout === void 0 ? 400 : _ref$timeout;
+    timeout = _ref$timeout === void 0 ? 400 : _ref$timeout,
+    _ref$distance = _ref.distance,
+    distance = _ref$distance === void 0 ? DEFAULT_DISTANCE : _ref$distance;
+  const styles = buildStyles(distance);
+
+  // React flushes the state change that follows onEnter before the browser paints, so without a
+  // forced layout here the element never holds its starting style and the transition is skipped.
+  const handleEnter = (node, isAppearing) => {
+    if (node) {
+      void node.offsetHeight;
+    }
+    onEnter == null || onEnter(node, isAppearing);
+  };
   return /*#__PURE__*/React.createElement(Transition, {
     appear: true,
     in: inProp,
     timeout: timeout,
-    onEnter: onEnter,
+    onEnter: handleEnter,
     onExited: onExited
   }, state => {
     return /*#__PURE__*/cloneElement(children, {
       style: _extends({
         visibility: state === "exited" && !inProp ? "hidden" : undefined
-      }, defaultStyle, transitionStyles[state], style, children.props.style)
+      }, styles.base, styles[state], style, children.props.style)
     });
   });
 };