@activecollab/components 2.0.435 → 2.0.436

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":";;;AAAA,OAAOA,KAAK,IACVC,UAAU,EAEVC,MAAM,EACNC,YAAY,EACZC,OAAO,EACPC,WAAW,EAEXC,QAAQ,EACRC,SAAS,QAEJ,OAAO;AAEd,OAAOC,qBAAqB,MAAM,mCAAmC;AACrE,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,MAAM,QAAQ,WAAW;AAclC,MAAMC,gBAAgB,GAAIC,QAAQ,IAAc;EAC9C,OAAOA,QAAQ,CAACC,KAAK,GACjBC,MAAM,CAACC,SAAS,CAACC,cAAc,CAACC,IAAI,CAACL,QAAQ,CAACC,KAAK,EAAE,IAAI,CAAC,GAC1D,KAAK;AACX,CAAC;AAED,OAAO,MAAMK,KAAK,gBAAGlB,UAAU,CAI7B,CAAAmB,IAAA,EAaEC,GAAG,KACA;EAAA,IAZDR,QAAQ,GAAAO,IAAA,CAARP,QAAQ;IAAAS,qBAAA,GAAAF,IAAA,CACRG,gBAAgB;IAAhBA,gBAAgB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAJ,IAAA,CACxBK,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAN,IAAA,CACzBO,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,sBAAA,GAAAR,IAAA,CAC9BS,sBAAsB;IAAtBA,sBAAsB,GAAAD,sBAAA,cAAG,KAAK,GAAAA,sBAAA;IAAAE,qBAAA,GAAAV,IAAA,CAC9BW,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,SAAA,GAAAZ,IAAA,CACzBa,IAAI;IAAEC,WAAW,GAAAF,SAAA,cAAG,KAAK,GAAAA,SAAA;IACzBG,OAAO,GAAAf,IAAA,CAAPe,OAAO;IACPC,cAAc,GAAAhB,IAAA,CAAdgB,cAAc;IACXC,IAAI,GAAAC,6BAAA,CAAAlB,IAAA,EAAAmB,SAAA;EAIT,MAAAC,SAAA,GAAwBlC,QAAQ,CAAC4B,WAAW,CAAC;IAAtCD,IAAI,GAAAO,SAAA;IAAEC,OAAO,GAAAD,SAAA;EACpB,MAAAE,UAAA,GAA4BpC,QAAQ,CAAC,IAAI,CAAC;IAAnCqC,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,MAAMG,QAAQ,GAAG3C,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAM4C,SAAS,GAAGrC,UAAU,CAACoC,QAAQ,EAAExB,GAAG,CAAC;EAE3C,MAAM0B,aAAa,GAAG3C,OAAO,CAAC,MAAM;IAClC,OAAOQ,gBAAgB,CAACC,QAAQ,CAAC;EACnC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,SAAS,CAAC,MAAM;IACdkC,OAAO,CAACP,WAAW,CAAC;EACtB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMc,WAAW,GAAG3C,WAAW,CAAC,MAAM;IACpCoC,OAAO,CAAC,KAAK,CAAC;IACd,IAAI,CAACM,aAAa,EAAE;MAClB,OAAOZ,OAAO,KAAK,UAAU,IAAIA,OAAO,CAAC,CAAC;IAC5C;EACF,CAAC,EAAE,CAACY,aAAa,EAAEZ,OAAO,CAAC,CAAC;EAE5B,MAAMc,qBAAqB,GAAG5C,WAAW,CACtC6C,KAAiC,IAAK;IACrC,IAAI,CAACvB,sBAAsB,EAAE;MAC3BuB,KAAK,CAACC,cAAc,CAAC,CAAC;MACtB,OAAOH,WAAW,CAAC,CAAC;IACtB;IAEA,IAAIZ,cAAc,EAAE;MAClBA,cAAc,CAACc,KAAK,CAAC;IACvB;EACF,CAAC,EACD,CAACvB,sBAAsB,EAAES,cAAc,EAAEY,WAAW,CACtD,CAAC;EAED,MAAMI,WAAW,GAAG/C,WAAW,CAAC,MAAM;IACpCuC,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,YAAY,GAAGhD,WAAW,CAAC,MAAM;IACrCuC,SAAS,CAAC,IAAI,CAAC;IACf,OAAOT,OAAO,KAAK,UAAU,IAAIA,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,MAAMmB,UAAU,GAAGlD,OAAO,CAAC,MAAM;IAC/B,IAAIU,KAAK,GAAG,CAAC,CAAC;;IAEd;IACA,IAAIiC,aAAa,IAAIlC,QAAQ,EAAE;MAC7BC,KAAK,GAAG;QACNyC,OAAO,EAAE/C,qBAAqB,CAAC4C,WAAW,EAAEvC,QAAQ,CAACC,KAAK,CAACyC,OAAO,CAAC;QACnEC,QAAQ,EAAEhD,qBAAqB,CAC7B6C,YAAY,EACZxC,QAAQ,CAACC,KAAK,CAAC0C,QACjB,CAAC;QACDC,EAAE,EAAExB;MACN,CAAC;IACH;IAEA,OAAOnB,KAAK;EACd,CAAC,EAAE,CAACD,QAAQ,EAAEuC,WAAW,EAAEC,YAAY,EAAEN,aAAa,EAAEd,IAAI,CAAC,CAAC;EAE9D,IAAI,CAACA,IAAI,KAAK,CAACc,aAAa,IAAIJ,MAAM,CAAC,EAAE;IACvC,OAAO,IAAI;EACb;EAEA,oBACE3C,KAAA,CAAA0D,aAAA,CAAC/C,MAAM,EAAAgD,QAAA,KACDtB,IAAI;IACRhB,GAAG,EAAEyB,SAAU;IACfX,OAAO,EAAEa,WAAY;IACrBzB,gBAAgB,EAAEA,gBAAiB;IACnCE,iBAAiB,EAAEA,iBAAkB;IACrCM,iBAAiB,EAAEA;EAAkB,IAEpCE,IAAI,gBACHjC,KAAA,CAAA0D,aAAA,CAAChD,OAAO;IACNkD,OAAO,EAAEX,qBAAsB;IAC/BpB,sBAAsB,EAAEA;EAAuB,CAChD,CAAC,GACA,IAAI,eACP1B,YAAY,CAACU,QAAQ,EAAEyC,UAAU,CAC5B,CAAC;AAEb,CACF,CAAC;AAEDnC,KAAK,CAAC0C,WAAW,GAAG,OAAO","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)
     });
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"SlideFromTop.js","names":["React","cloneElement","Transition","defaultStyle","transitionProperty","transitionTimingFunction","transform","opacity","transitionStyles","entering","transitionDuration","entered","exiting","exited","SlideFromTop","_ref","_ref$in","in","inProp","onEnter","onExited","children","style","_ref$timeout","timeout","createElement","appear","state","_extends","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface ISlideFromTop extends Omit<TransitionProps, \"timeout\"> {\n  children: ReactElement;\n  timeout?: number;\n}\n\nconst defaultStyle = {\n  transitionProperty: \"opacity, transform\",\n  transitionTimingFunction: \"linear ease-out\",\n  transform: \"translateY(-100%)\",\n  opacity: 0,\n};\n\nconst transitionStyles = {\n  entering: {\n    opacity: 1,\n    transform: \"translateY(0)\",\n    transitionDuration: \".3s\",\n  },\n  entered: {\n    opacity: 1,\n    transform: \"translateY(0)\",\n    transitionDuration: \".3s\",\n  },\n  exiting: {\n    opacity: 0,\n    transform: \"translateY(-100%)\",\n    transitionDuration: \".2s\",\n  },\n  exited: {\n    opacity: 0,\n    transform: \"translateY(-100%)\",\n    transitionDuration: \".2s\",\n  },\n};\n\nexport const SlideFromTop: FC<ISlideFromTop> = ({\n  in: inProp = false,\n  onEnter,\n  onExited,\n  children,\n  style,\n  timeout = 400,\n}) => (\n  <Transition\n    appear\n    in={inProp}\n    timeout={timeout}\n    onEnter={onEnter}\n    onExited={onExited}\n  >\n    {(state): ReactElement => {\n      return cloneElement(children, {\n        style: {\n          visibility: state === \"exited\" && !inProp ? \"hidden\" : undefined,\n          ...defaultStyle,\n          ...transitionStyles[state],\n          ...style,\n          ...children.props.style,\n        },\n      });\n    }}\n  </Transition>\n);\n\nSlideFromTop.displayName = \"SlideFromTop\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAsBC,YAAY,QAAQ,OAAO;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AASnD,MAAMC,YAAY,GAAG;EACnBC,kBAAkB,EAAE,oBAAoB;EACxCC,wBAAwB,EAAE,iBAAiB;EAC3CC,SAAS,EAAE,mBAAmB;EAC9BC,OAAO,EAAE;AACX,CAAC;AAED,MAAMC,gBAAgB,GAAG;EACvBC,QAAQ,EAAE;IACRF,OAAO,EAAE,CAAC;IACVD,SAAS,EAAE,eAAe;IAC1BI,kBAAkB,EAAE;EACtB,CAAC;EACDC,OAAO,EAAE;IACPJ,OAAO,EAAE,CAAC;IACVD,SAAS,EAAE,eAAe;IAC1BI,kBAAkB,EAAE;EACtB,CAAC;EACDE,OAAO,EAAE;IACPL,OAAO,EAAE,CAAC;IACVD,SAAS,EAAE,mBAAmB;IAC9BI,kBAAkB,EAAE;EACtB,CAAC;EACDG,MAAM,EAAE;IACNN,OAAO,EAAE,CAAC;IACVD,SAAS,EAAE,mBAAmB;IAC9BI,kBAAkB,EAAE;EACtB;AACF,CAAC;AAED,OAAO,MAAMI,YAA+B,GAAGC,IAAA;EAAA,IAAAC,OAAA,GAAAD,IAAA,CAC7CE,EAAE;IAAEC,MAAM,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,YAAA,GAAAR,IAAA,CACLS,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;EAAA,oBAEbvB,KAAA,CAAAyB,aAAA,CAACvB,UAAU;IACTwB,MAAM;IACNT,EAAE,EAAEC,MAAO;IACXM,OAAO,EAAEA,OAAQ;IACjBL,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA;EAAS,GAEjBO,KAAK,IAAmB;IACxB,oBAAO1B,YAAY,CAACoB,QAAQ,EAAE;MAC5BC,KAAK,EAAAM,QAAA;QACHC,UAAU,EAAEF,KAAK,KAAK,QAAQ,IAAI,CAACT,MAAM,GAAG,QAAQ,GAAGY;MAAS,GAC7D3B,YAAY,EACZK,gBAAgB,CAACmB,KAAK,CAAC,EACvBL,KAAK,EACLD,QAAQ,CAACU,KAAK,CAACT,KAAK;IAE3B,CAAC,CAAC;EACJ,CACU,CAAC;AAAA,CACd;AAEDR,YAAY,CAACkB,WAAW,GAAG,cAAc","ignoreList":[]}
+{"version":3,"file":"SlideFromTop.js","names":["React","cloneElement","Transition","DEFAULT_DISTANCE","buildStyles","distance","away","base","transitionProperty","transitionTimingFunction","transform","opacity","entering","transitionDuration","entered","exiting","exited","SlideFromTop","_ref","_ref$in","in","inProp","onEnter","onExited","children","style","_ref$timeout","timeout","_ref$distance","styles","handleEnter","node","isAppearing","offsetHeight","createElement","appear","state","_extends","visibility","undefined","props","displayName"],"sources":["../../../../../src/components/Transitions/SlideFromTop/SlideFromTop.tsx"],"sourcesContent":["import React, { FC, ReactElement, cloneElement } from \"react\";\nimport { Transition } from \"react-transition-group\";\n\nimport { TransitionProps } from \"../types\";\n\ninterface ISlideFromTop extends Omit<TransitionProps, \"timeout\"> {\n  children: ReactElement;\n  timeout?: number;\n  /** How far above its resting place the element starts. A fixed travel, not a share of its height. */\n  distance?: number;\n}\n\nconst DEFAULT_DISTANCE = 25;\n\nconst buildStyles = (distance: number) => {\n  const away = `translateY(-${distance}px)`;\n\n  return {\n    base: {\n      transitionProperty: \"opacity, transform\",\n      transitionTimingFunction: \"ease-out\",\n      transform: away,\n      opacity: 0,\n    },\n    entering: {\n      opacity: 1,\n      transform: \"translateY(0)\",\n      transitionDuration: \".3s\",\n    },\n    entered: {\n      opacity: 1,\n      transform: \"translateY(0)\",\n      transitionDuration: \".3s\",\n    },\n    exiting: { opacity: 0, transform: away, transitionDuration: \".2s\" },\n    exited: { opacity: 0, transform: away, transitionDuration: \".2s\" },\n  };\n};\n\nexport const SlideFromTop: FC<ISlideFromTop> = ({\n  in: inProp = false,\n  onEnter,\n  onExited,\n  children,\n  style,\n  timeout = 400,\n  distance = DEFAULT_DISTANCE,\n}) => {\n  const styles = buildStyles(distance);\n\n  // React flushes the state change that follows onEnter before the browser paints, so without a\n  // forced layout here the element never holds its starting style and the transition is skipped.\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      onExited={onExited}\n    >\n      {(state): ReactElement => {\n        return cloneElement(children, {\n          style: {\n            visibility: state === \"exited\" && !inProp ? \"hidden\" : undefined,\n            ...styles.base,\n            ...styles[state],\n            ...style,\n            ...children.props.style,\n          },\n        });\n      }}\n    </Transition>\n  );\n};\n\nSlideFromTop.displayName = \"SlideFromTop\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAsBC,YAAY,QAAQ,OAAO;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AAWnD,MAAMC,gBAAgB,GAAG,EAAE;AAE3B,MAAMC,WAAW,GAAIC,QAAgB,IAAK;EACxC,MAAMC,IAAI,oBAAkBD,QAAQ,QAAK;EAEzC,OAAO;IACLE,IAAI,EAAE;MACJC,kBAAkB,EAAE,oBAAoB;MACxCC,wBAAwB,EAAE,UAAU;MACpCC,SAAS,EAAEJ,IAAI;MACfK,OAAO,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACRD,OAAO,EAAE,CAAC;MACVD,SAAS,EAAE,eAAe;MAC1BG,kBAAkB,EAAE;IACtB,CAAC;IACDC,OAAO,EAAE;MACPH,OAAO,EAAE,CAAC;MACVD,SAAS,EAAE,eAAe;MAC1BG,kBAAkB,EAAE;IACtB,CAAC;IACDE,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAED,SAAS,EAAEJ,IAAI;MAAEO,kBAAkB,EAAE;IAAM,CAAC;IACnEG,MAAM,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAED,SAAS,EAAEJ,IAAI;MAAEO,kBAAkB,EAAE;IAAM;EACnE,CAAC;AACH,CAAC;AAED,OAAO,MAAMI,YAA+B,GAAGC,IAAA,IAQzC;EAAA,IAAAC,OAAA,GAAAD,IAAA,CAPJE,EAAE;IAAEC,MAAM,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAClBG,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,YAAA,GAAAR,IAAA,CACLS,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,GAAG,GAAAA,YAAA;IAAAE,aAAA,GAAAV,IAAA,CACbb,QAAQ;IAARA,QAAQ,GAAAuB,aAAA,cAAGzB,gBAAgB,GAAAyB,aAAA;EAE3B,MAAMC,MAAM,GAAGzB,WAAW,CAACC,QAAQ,CAAC;;EAEpC;EACA;EACA,MAAMyB,WAAW,GAAGA,CAACC,IAAiB,EAAEC,WAAoB,KAAK;IAC/D,IAAID,IAAI,EAAE;MACR,KAAKA,IAAI,CAACE,YAAY;IACxB;IACAX,OAAO,YAAPA,OAAO,CAAGS,IAAI,EAAEC,WAAW,CAAC;EAC9B,CAAC;EAED,oBACEhC,KAAA,CAAAkC,aAAA,CAAChC,UAAU;IACTiC,MAAM;IACNf,EAAE,EAAEC,MAAO;IACXM,OAAO,EAAEA,OAAQ;IACjBL,OAAO,EAAEQ,WAAY;IACrBP,QAAQ,EAAEA;EAAS,GAEjBa,KAAK,IAAmB;IACxB,oBAAOnC,YAAY,CAACuB,QAAQ,EAAE;MAC5BC,KAAK,EAAAY,QAAA;QACHC,UAAU,EAAEF,KAAK,KAAK,QAAQ,IAAI,CAACf,MAAM,GAAG,QAAQ,GAAGkB;MAAS,GAC7DV,MAAM,CAACtB,IAAI,EACXsB,MAAM,CAACO,KAAK,CAAC,EACbX,KAAK,EACLD,QAAQ,CAACgB,KAAK,CAACf,KAAK;IAE3B,CAAC,CAAC;EACJ,CACU,CAAC;AAEjB,CAAC;AAEDR,YAAY,CAACwB,WAAW,GAAG,cAAc","ignoreList":[]}

package/dist/esm/components/Wizard/Step.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { DialogSize } from "../Dialog/Styles";
 export interface IStep {
     index?: number;
     isLast?: boolean;
@@ -14,6 +15,9 @@ export interface IStep {
     disableBackButton?: boolean;
     customRightHeader?: ReactNode;
     skip?: boolean;
+    /** Read by Wizard off the active step and passed to the dialog. */
+    size?: DialogSize;
+    height?: string;
 }
 export declare const Step: FC<IStep>;
 //# sourceMappingURL=Step.d.ts.map

package/dist/esm/components/Wizard/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Wizard/Step.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAc1D,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAyE1B,CAAC"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../../src/components/Wizard/Step.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAW1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAK9C,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA4E1B,CAAC"}

package/dist/esm/components/Wizard/Step.js

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import { StepActionButton } from "./StepActionButton";
 import { StyledStepTitle, StyledStepHeaderLeft, StyledStepHeader, StyledCustomStep } from "./Styles";
 import { Dialog } from "../Dialog";
+import { useDialogClose } from "../Dialog/DialogContext";
 import { IconButton } from "../IconButton";
 import { ArrowBackMobileIcon, CancelCrossIcon } from "../Icons";
 import { Caption2, Header3 } from "../Typography";
@@ -25,6 +26,8 @@ export const Step = _ref => {
     customRightHeader = _ref.customRightHeader,
     _ref$skip = _ref.skip,
     skip = _ref$skip === void 0 ? false : _ref$skip;
+  // The close button goes through the dialog so the exit transition runs before the caller unmounts.
+  const closeDialog = useDialogClose(onClose);
   const onActionButtonClick = useCallback(() => {
     if (isLast && onClose) {
       return onClose();
@@ -37,7 +40,7 @@ export const Step = _ref => {
     className: "tw--ml-3 tw-mr-2",
     disabled: changingStepInProgress
   }, /*#__PURE__*/React.createElement(ArrowBackMobileIcon, null)) : null, /*#__PURE__*/React.createElement(StyledStepTitle, null, /*#__PURE__*/React.createElement(Caption2, null, title), /*#__PURE__*/React.createElement(Header3, null, subtitle))), customRightHeader ? customRightHeader : /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose,
+    onClick: closeDialog,
     variant: "text gray",
     disabled: changingStepInProgress
   }, /*#__PURE__*/React.createElement(CancelCrossIcon, null))), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), shouldRenderNextButton ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.Content, null, children), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Actions, null, /*#__PURE__*/React.createElement(StepActionButton, {

package/dist/esm/components/Wizard/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","names":["React","useCallback","StepActionButton","StyledStepTitle","StyledStepHeaderLeft","StyledStepHeader","StyledCustomStep","Dialog","IconButton","ArrowBackMobileIcon","CancelCrossIcon","Caption2","Header3","Step","_ref","index","isLast","subtitle","title","onNextButtonClick","onPreviousButtonClick","onClose","children","_ref$actionLabel","actionLabel","_ref$shouldRenderNext","shouldRenderNextButton","_ref$changingStepInPr","changingStepInProgress","_ref$disableBackButto","disableBackButton","customRightHeader","_ref$skip","skip","onActionButtonClick","createElement","Fragment","onClick","variant","className","disabled","ContentDivider","Content","Actions","displayName"],"sources":["../../../../src/components/Wizard/Step.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback } from \"react\";\n\nimport { StepActionButton } from \"./StepActionButton\";\nimport {\n  StyledStepTitle,\n  StyledStepHeaderLeft,\n  StyledStepHeader,\n  StyledCustomStep,\n} from \"./Styles\";\nimport { Dialog } from \"../Dialog\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowBackMobileIcon, CancelCrossIcon } from \"../Icons\";\nimport { Caption2, Header3 } from \"../Typography\";\n\nexport interface IStep {\n  index?: number;\n  isLast?: boolean;\n  subtitle: string;\n  title?: string;\n  onNextButtonClick?: () => void;\n  onPreviousButtonClick?: () => void;\n  onClose?: () => void;\n  children: ReactNode;\n  actionLabel?: string;\n  shouldRenderNextButton?: boolean;\n  changingStepInProgress?: boolean;\n  disableBackButton?: boolean;\n  customRightHeader?: ReactNode;\n  skip?: boolean;\n}\n\nexport const Step: FC<IStep> = ({\n  index,\n  isLast,\n  subtitle,\n  title,\n  onNextButtonClick,\n  onPreviousButtonClick,\n  onClose,\n  children,\n  actionLabel = \"Proceed\",\n  shouldRenderNextButton = true,\n  changingStepInProgress = false,\n  disableBackButton = false,\n  customRightHeader,\n  skip = false,\n}) => {\n  const onActionButtonClick = useCallback(() => {\n    if (isLast && onClose) {\n      return onClose();\n    }\n\n    return onNextButtonClick && onNextButtonClick();\n  }, [isLast, onClose, onNextButtonClick]);\n\n  return !skip ? (\n    <>\n      <StyledStepHeader>\n        <StyledStepHeaderLeft>\n          {!disableBackButton && index && index > 0 ? (\n            <IconButton\n              onClick={onPreviousButtonClick}\n              variant=\"text gray\"\n              className=\"tw--ml-3 tw-mr-2\"\n              disabled={changingStepInProgress}\n            >\n              <ArrowBackMobileIcon />\n            </IconButton>\n          ) : null}\n          <StyledStepTitle>\n            <Caption2>{title}</Caption2>\n            <Header3>{subtitle}</Header3>\n          </StyledStepTitle>\n        </StyledStepHeaderLeft>\n        {customRightHeader ? (\n          customRightHeader\n        ) : (\n          <IconButton\n            onClick={onClose}\n            variant=\"text gray\"\n            disabled={changingStepInProgress}\n          >\n            <CancelCrossIcon />\n          </IconButton>\n        )}\n      </StyledStepHeader>\n      <Dialog.ContentDivider />\n      {shouldRenderNextButton ? (\n        <>\n          <Dialog.Content>{children}</Dialog.Content>\n          <Dialog.ContentDivider />\n          <Dialog.Actions>\n            <StepActionButton\n              isLast={isLast}\n              actionLabel={actionLabel}\n              onNextButtonClick={onActionButtonClick}\n            />\n          </Dialog.Actions>\n        </>\n      ) : (\n        <StyledCustomStep>{children}</StyledCustomStep>\n      )}\n    </>\n  ) : null;\n};\n\nStep.displayName = \"Step\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,QAAQ,OAAO;AAEzD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,gBAAgB,EAChBC,gBAAgB,QACX,UAAU;AACjB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,UAAU;AAC/D,SAASC,QAAQ,EAAEC,OAAO,QAAQ,eAAe;AAmBjD,OAAO,MAAMC,IAAe,GAAGC,IAAA,IAezB;EAAA,IAdJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,iBAAiB,GAAAL,IAAA,CAAjBK,iBAAiB;IACjBC,qBAAqB,GAAAN,IAAA,CAArBM,qBAAqB;IACrBC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IAAAC,gBAAA,GAAAT,IAAA,CACRU,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,SAAS,GAAAA,gBAAA;IAAAE,qBAAA,GAAAX,IAAA,CACvBY,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAb,IAAA,CAC7Bc,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAf,IAAA,CAC9BgB,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACzBE,iBAAiB,GAAAjB,IAAA,CAAjBiB,iBAAiB;IAAAC,SAAA,GAAAlB,IAAA,CACjBmB,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,KAAK,GAAAA,SAAA;EAEZ,MAAME,mBAAmB,GAAGjC,WAAW,CAAC,MAAM;IAC5C,IAAIe,MAAM,IAAIK,OAAO,EAAE;MACrB,OAAOA,OAAO,CAAC,CAAC;IAClB;IAEA,OAAOF,iBAAiB,IAAIA,iBAAiB,CAAC,CAAC;EACjD,CAAC,EAAE,CAACH,MAAM,EAAEK,OAAO,EAAEF,iBAAiB,CAAC,CAAC;EAExC,OAAO,CAACc,IAAI,gBACVjC,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,qBACEpC,KAAA,CAAAmC,aAAA,CAAC9B,gBAAgB,qBACfL,KAAA,CAAAmC,aAAA,CAAC/B,oBAAoB,QAClB,CAAC0B,iBAAiB,IAAIf,KAAK,IAAIA,KAAK,GAAG,CAAC,gBACvCf,KAAA,CAAAmC,aAAA,CAAC3B,UAAU;IACT6B,OAAO,EAAEjB,qBAAsB;IAC/BkB,OAAO,EAAC,WAAW;IACnBC,SAAS,EAAC,kBAAkB;IAC5BC,QAAQ,EAAEZ;EAAuB,gBAEjC5B,KAAA,CAAAmC,aAAA,CAAC1B,mBAAmB,MAAE,CACZ,CAAC,GACX,IAAI,eACRT,KAAA,CAAAmC,aAAA,CAAChC,eAAe,qBACdH,KAAA,CAAAmC,aAAA,CAACxB,QAAQ,QAAEO,KAAgB,CAAC,eAC5BlB,KAAA,CAAAmC,aAAA,CAACvB,OAAO,QAAEK,QAAkB,CACb,CACG,CAAC,EACtBc,iBAAiB,GAChBA,iBAAiB,gBAEjB/B,KAAA,CAAAmC,aAAA,CAAC3B,UAAU;IACT6B,OAAO,EAAEhB,OAAQ;IACjBiB,OAAO,EAAC,WAAW;IACnBE,QAAQ,EAAEZ;EAAuB,gBAEjC5B,KAAA,CAAAmC,aAAA,CAACzB,eAAe,MAAE,CACR,CAEE,CAAC,eACnBV,KAAA,CAAAmC,aAAA,CAAC5B,MAAM,CAACkC,cAAc,MAAE,CAAC,EACxBf,sBAAsB,gBACrB1B,KAAA,CAAAmC,aAAA,CAAAnC,KAAA,CAAAoC,QAAA,qBACEpC,KAAA,CAAAmC,aAAA,CAAC5B,MAAM,CAACmC,OAAO,QAAEpB,QAAyB,CAAC,eAC3CtB,KAAA,CAAAmC,aAAA,CAAC5B,MAAM,CAACkC,cAAc,MAAE,CAAC,eACzBzC,KAAA,CAAAmC,aAAA,CAAC5B,MAAM,CAACoC,OAAO,qBACb3C,KAAA,CAAAmC,aAAA,CAACjC,gBAAgB;IACfc,MAAM,EAAEA,MAAO;IACfQ,WAAW,EAAEA,WAAY;IACzBL,iBAAiB,EAAEe;EAAoB,CACxC,CACa,CAChB,CAAC,gBAEHlC,KAAA,CAAAmC,aAAA,CAAC7B,gBAAgB,QAAEgB,QAA2B,CAEhD,CAAC,GACD,IAAI;AACV,CAAC;AAEDT,IAAI,CAAC+B,WAAW,GAAG,MAAM","ignoreList":[]}
+{"version":3,"file":"Step.js","names":["React","useCallback","StepActionButton","StyledStepTitle","StyledStepHeaderLeft","StyledStepHeader","StyledCustomStep","Dialog","useDialogClose","IconButton","ArrowBackMobileIcon","CancelCrossIcon","Caption2","Header3","Step","_ref","index","isLast","subtitle","title","onNextButtonClick","onPreviousButtonClick","onClose","children","_ref$actionLabel","actionLabel","_ref$shouldRenderNext","shouldRenderNextButton","_ref$changingStepInPr","changingStepInProgress","_ref$disableBackButto","disableBackButton","customRightHeader","_ref$skip","skip","closeDialog","onActionButtonClick","createElement","Fragment","onClick","variant","className","disabled","ContentDivider","Content","Actions","displayName"],"sources":["../../../../src/components/Wizard/Step.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback } from \"react\";\n\nimport { StepActionButton } from \"./StepActionButton\";\nimport {\n  StyledStepTitle,\n  StyledStepHeaderLeft,\n  StyledStepHeader,\n  StyledCustomStep,\n} from \"./Styles\";\nimport { Dialog } from \"../Dialog\";\nimport { useDialogClose } from \"../Dialog/DialogContext\";\nimport { DialogSize } from \"../Dialog/Styles\";\nimport { IconButton } from \"../IconButton\";\nimport { ArrowBackMobileIcon, CancelCrossIcon } from \"../Icons\";\nimport { Caption2, Header3 } from \"../Typography\";\n\nexport interface IStep {\n  index?: number;\n  isLast?: boolean;\n  subtitle: string;\n  title?: string;\n  onNextButtonClick?: () => void;\n  onPreviousButtonClick?: () => void;\n  onClose?: () => void;\n  children: ReactNode;\n  actionLabel?: string;\n  shouldRenderNextButton?: boolean;\n  changingStepInProgress?: boolean;\n  disableBackButton?: boolean;\n  customRightHeader?: ReactNode;\n  skip?: boolean;\n  /** Read by Wizard off the active step and passed to the dialog. */\n  size?: DialogSize;\n  height?: string;\n}\n\nexport const Step: FC<IStep> = ({\n  index,\n  isLast,\n  subtitle,\n  title,\n  onNextButtonClick,\n  onPreviousButtonClick,\n  onClose,\n  children,\n  actionLabel = \"Proceed\",\n  shouldRenderNextButton = true,\n  changingStepInProgress = false,\n  disableBackButton = false,\n  customRightHeader,\n  skip = false,\n}) => {\n  // The close button goes through the dialog so the exit transition runs before the caller unmounts.\n  const closeDialog = useDialogClose(onClose);\n\n  const onActionButtonClick = useCallback(() => {\n    if (isLast && onClose) {\n      return onClose();\n    }\n\n    return onNextButtonClick && onNextButtonClick();\n  }, [isLast, onClose, onNextButtonClick]);\n\n  return !skip ? (\n    <>\n      <StyledStepHeader>\n        <StyledStepHeaderLeft>\n          {!disableBackButton && index && index > 0 ? (\n            <IconButton\n              onClick={onPreviousButtonClick}\n              variant=\"text gray\"\n              className=\"tw--ml-3 tw-mr-2\"\n              disabled={changingStepInProgress}\n            >\n              <ArrowBackMobileIcon />\n            </IconButton>\n          ) : null}\n          <StyledStepTitle>\n            <Caption2>{title}</Caption2>\n            <Header3>{subtitle}</Header3>\n          </StyledStepTitle>\n        </StyledStepHeaderLeft>\n        {customRightHeader ? (\n          customRightHeader\n        ) : (\n          <IconButton\n            onClick={closeDialog}\n            variant=\"text gray\"\n            disabled={changingStepInProgress}\n          >\n            <CancelCrossIcon />\n          </IconButton>\n        )}\n      </StyledStepHeader>\n      <Dialog.ContentDivider />\n      {shouldRenderNextButton ? (\n        <>\n          <Dialog.Content>{children}</Dialog.Content>\n          <Dialog.ContentDivider />\n          <Dialog.Actions>\n            <StepActionButton\n              isLast={isLast}\n              actionLabel={actionLabel}\n              onNextButtonClick={onActionButtonClick}\n            />\n          </Dialog.Actions>\n        </>\n      ) : (\n        <StyledCustomStep>{children}</StyledCustomStep>\n      )}\n    </>\n  ) : null;\n};\n\nStep.displayName = \"Step\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,QAAQ,OAAO;AAEzD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,gBAAgB,EAChBC,gBAAgB,QACX,UAAU;AACjB,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,cAAc,QAAQ,yBAAyB;AAExD,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,UAAU;AAC/D,SAASC,QAAQ,EAAEC,OAAO,QAAQ,eAAe;AAsBjD,OAAO,MAAMC,IAAe,GAAGC,IAAA,IAezB;EAAA,IAdJC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,iBAAiB,GAAAL,IAAA,CAAjBK,iBAAiB;IACjBC,qBAAqB,GAAAN,IAAA,CAArBM,qBAAqB;IACrBC,OAAO,GAAAP,IAAA,CAAPO,OAAO;IACPC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IAAAC,gBAAA,GAAAT,IAAA,CACRU,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,SAAS,GAAAA,gBAAA;IAAAE,qBAAA,GAAAX,IAAA,CACvBY,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,IAAI,GAAAA,qBAAA;IAAAE,qBAAA,GAAAb,IAAA,CAC7Bc,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAAE,qBAAA,GAAAf,IAAA,CAC9BgB,iBAAiB;IAAjBA,iBAAiB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IACzBE,iBAAiB,GAAAjB,IAAA,CAAjBiB,iBAAiB;IAAAC,SAAA,GAAAlB,IAAA,CACjBmB,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,KAAK,GAAAA,SAAA;EAEZ;EACA,MAAME,WAAW,GAAG3B,cAAc,CAACc,OAAO,CAAC;EAE3C,MAAMc,mBAAmB,GAAGnC,WAAW,CAAC,MAAM;IAC5C,IAAIgB,MAAM,IAAIK,OAAO,EAAE;MACrB,OAAOA,OAAO,CAAC,CAAC;IAClB;IAEA,OAAOF,iBAAiB,IAAIA,iBAAiB,CAAC,CAAC;EACjD,CAAC,EAAE,CAACH,MAAM,EAAEK,OAAO,EAAEF,iBAAiB,CAAC,CAAC;EAExC,OAAO,CAACc,IAAI,gBACVlC,KAAA,CAAAqC,aAAA,CAAArC,KAAA,CAAAsC,QAAA,qBACEtC,KAAA,CAAAqC,aAAA,CAAChC,gBAAgB,qBACfL,KAAA,CAAAqC,aAAA,CAACjC,oBAAoB,QAClB,CAAC2B,iBAAiB,IAAIf,KAAK,IAAIA,KAAK,GAAG,CAAC,gBACvChB,KAAA,CAAAqC,aAAA,CAAC5B,UAAU;IACT8B,OAAO,EAAElB,qBAAsB;IAC/BmB,OAAO,EAAC,WAAW;IACnBC,SAAS,EAAC,kBAAkB;IAC5BC,QAAQ,EAAEb;EAAuB,gBAEjC7B,KAAA,CAAAqC,aAAA,CAAC3B,mBAAmB,MAAE,CACZ,CAAC,GACX,IAAI,eACRV,KAAA,CAAAqC,aAAA,CAAClC,eAAe,qBACdH,KAAA,CAAAqC,aAAA,CAACzB,QAAQ,QAAEO,KAAgB,CAAC,eAC5BnB,KAAA,CAAAqC,aAAA,CAACxB,OAAO,QAAEK,QAAkB,CACb,CACG,CAAC,EACtBc,iBAAiB,GAChBA,iBAAiB,gBAEjBhC,KAAA,CAAAqC,aAAA,CAAC5B,UAAU;IACT8B,OAAO,EAAEJ,WAAY;IACrBK,OAAO,EAAC,WAAW;IACnBE,QAAQ,EAAEb;EAAuB,gBAEjC7B,KAAA,CAAAqC,aAAA,CAAC1B,eAAe,MAAE,CACR,CAEE,CAAC,eACnBX,KAAA,CAAAqC,aAAA,CAAC9B,MAAM,CAACoC,cAAc,MAAE,CAAC,EACxBhB,sBAAsB,gBACrB3B,KAAA,CAAAqC,aAAA,CAAArC,KAAA,CAAAsC,QAAA,qBACEtC,KAAA,CAAAqC,aAAA,CAAC9B,MAAM,CAACqC,OAAO,QAAErB,QAAyB,CAAC,eAC3CvB,KAAA,CAAAqC,aAAA,CAAC9B,MAAM,CAACoC,cAAc,MAAE,CAAC,eACzB3C,KAAA,CAAAqC,aAAA,CAAC9B,MAAM,CAACsC,OAAO,qBACb7C,KAAA,CAAAqC,aAAA,CAACnC,gBAAgB;IACfe,MAAM,EAAEA,MAAO;IACfQ,WAAW,EAAEA,WAAY;IACzBL,iBAAiB,EAAEgB;EAAoB,CACxC,CACa,CAChB,CAAC,gBAEHpC,KAAA,CAAAqC,aAAA,CAAC/B,gBAAgB,QAAEiB,QAA2B,CAEhD,CAAC,GACD,IAAI;AACV,CAAC;AAEDT,IAAI,CAACgC,WAAW,GAAG,MAAM","ignoreList":[]}