@transferwise/components 0.0.0-experimental-6528439 → 0.0.0-experimental-1ffdc56

package/build/criticalBanner/CriticalCommsBanner.js

@@ -1,36 +1,8 @@
 'use strict';
 
-var icons = require('@transferwise/icons');
-var componentsTheming = require('@wise/components-theming');
+var Alert = require('../alert/Alert.js');
 var clsx = require('clsx');
-var avatarTypes = require('../avatar/avatarTypes.js');
-var Avatar = require('../avatar/Avatar.js');
-var Body = require('../body/Body.js');
-var Button = require('../button/Button.js');
-require('../common/theme.js');
-require('../common/direction.js');
-var control = require('../common/propsValues/control.js');
-require('../common/propsValues/breakpoint.js');
-var size = require('../common/propsValues/size.js');
-var typography = require('../common/propsValues/typography.js');
-require('../common/propsValues/width.js');
-require('../common/propsValues/type.js');
-require('../common/propsValues/dateMode.js');
-require('../common/propsValues/monthFormat.js');
-require('../common/propsValues/position.js');
-require('../common/propsValues/layouts.js');
-require('../common/propsValues/status.js');
-require('../common/propsValues/sentiment.js');
-require('../common/propsValues/profileType.js');
-require('../common/propsValues/variant.js');
-require('../common/propsValues/scroll.js');
-require('../common/propsValues/markdownNodeType.js');
-require('../common/fileType.js');
-require('react');
-require('react-intl');
-require('../common/closeButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Title = require('../title/Title.js');
 
 function CriticalCommsBanner({
   title,
@@ -38,52 +10,17 @@ function CriticalCommsBanner({
   action,
   className
 }) {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('critical-comms', className),
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "critical-comms-body",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
-        size: size.Size.MEDIUM,
-        type: avatarTypes.AvatarType.ICON,
-        className: clsx.clsx(isModern ? 'm-r-2' : 'm-r-1'),
-        backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
-        children: isModern ? /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircleFill, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
-          size: 24
-        })
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "critical-comms-content d-flex align-items-center flex-grow-1",
-        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: clsx.clsx('flex-grow-1', {
-            'p-x-2': !isModern
-          }),
-          children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
-            type: isModern ? typography.Typography.TITLE_BODY : typography.Typography.TITLE_GROUP,
-            className: "critical-comms--title",
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx(Body, {
-            className: "critical-comms--subtitle",
-            children: subtitle
-          })]
-        }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "critical-comms--cta",
-          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
-            block: isModern,
-            size: size.Size.SMALL,
-            type: control.ControlType.NEGATIVE,
-            priority: isModern ? control.Priority.SECONDARY : control.Priority.PRIMARY,
-            className: "cta-btn",
-            onClick: () => {
-              if (action) {
-                window.location.href = action.href;
-              }
-            },
-            children: action.label
-          })
-        }) : null]
-      })]
+    children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
+      title: title,
+      message: subtitle,
+      action: {
+        target: action?.href,
+        text: action?.label
+      },
+      className: className,
+      type: "critical"
     })
   });
 }

package/build/criticalBanner/CriticalCommsBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  const { isModern } = useTheme();\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <div className=\"critical-comms-body\">\n        <Avatar\n          size={Size.MEDIUM}\n          type={AvatarType.ICON}\n          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n          backgroundColor={\n            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n          }\n        >\n          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n        </Avatar>\n        <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n            <Title\n              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n              className=\"critical-comms--title\"\n            >\n              {title}\n            </Title>\n            <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n          </div>\n          {action ? (\n            <div className=\"critical-comms--cta\">\n              <Button\n                block={isModern}\n                size={Size.SMALL}\n                type={ControlType.NEGATIVE}\n                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n                className=\"cta-btn\"\n                onClick={() => {\n                  if (action) {\n                    window.location.href = action.href;\n                  }\n                }}\n              >\n                {action.label}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,MAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ target: action?.href, text: action?.label }}\n        className={className}\n        type=\"critical\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","target","href","text","label","type"],"mappings":";;;;;;AAaA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;AAC3F,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,SAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,cAAA,CAACG,aAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,MAAM,EAAEP,MAAM,EAAEQ,IAAI;QAAEC,IAAI,EAAET,MAAM,EAAEU,KAAAA;OAAQ;AACtDT,MAAAA,SAAS,EAAEA,SAAU;AACrBU,MAAAA,IAAI,EAAC,UAAA;KAET,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/criticalBanner/CriticalCommsBanner.mjs

@@ -1,34 +1,6 @@
-import { AlertCircleFill, Alert } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import Alert from '../alert/Alert.mjs';
 import { clsx } from 'clsx';
-import { AvatarType } from '../avatar/avatarTypes.mjs';
-import Avatar from '../avatar/Avatar.mjs';
-import Body from '../body/Body.mjs';
-import Button from '../button/Button.mjs';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import { ControlType, Priority } from '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import { Size } from '../common/propsValues/size.mjs';
-import { Typography } from '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
-import 'react';
-import 'react-intl';
-import '../common/closeButton/CloseButton.messages.mjs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import Title from '../title/Title.mjs';
+import { jsx } from 'react/jsx-runtime';
 
 function CriticalCommsBanner({
   title,
@@ -36,52 +8,17 @@ function CriticalCommsBanner({
   action,
   className
 }) {
-  const {
-    isModern
-  } = useTheme();
   return /*#__PURE__*/jsx("div", {
     className: clsx('critical-comms', className),
-    children: /*#__PURE__*/jsxs("div", {
-      className: "critical-comms-body",
-      children: [/*#__PURE__*/jsx(Avatar, {
-        size: Size.MEDIUM,
-        type: AvatarType.ICON,
-        className: clsx(isModern ? 'm-r-2' : 'm-r-1'),
-        backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
-        children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert, {
-          size: 24
-        })
-      }), /*#__PURE__*/jsxs("div", {
-        className: "critical-comms-content d-flex align-items-center flex-grow-1",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: clsx('flex-grow-1', {
-            'p-x-2': !isModern
-          }),
-          children: [/*#__PURE__*/jsx(Title, {
-            type: isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP,
-            className: "critical-comms--title",
-            children: title
-          }), /*#__PURE__*/jsx(Body, {
-            className: "critical-comms--subtitle",
-            children: subtitle
-          })]
-        }), action ? /*#__PURE__*/jsx("div", {
-          className: "critical-comms--cta",
-          children: /*#__PURE__*/jsx(Button, {
-            block: isModern,
-            size: Size.SMALL,
-            type: ControlType.NEGATIVE,
-            priority: isModern ? Priority.SECONDARY : Priority.PRIMARY,
-            className: "cta-btn",
-            onClick: () => {
-              if (action) {
-                window.location.href = action.href;
-              }
-            },
-            children: action.label
-          })
-        }) : null]
-      })]
+    children: /*#__PURE__*/jsx(Alert, {
+      title: title,
+      message: subtitle,
+      action: {
+        target: action?.href,
+        text: action?.label
+      },
+      className: className,
+      type: "critical"
     })
   });
 }

package/build/criticalBanner/CriticalCommsBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  const { isModern } = useTheme();\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <div className=\"critical-comms-body\">\n        <Avatar\n          size={Size.MEDIUM}\n          type={AvatarType.ICON}\n          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n          backgroundColor={\n            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n          }\n        >\n          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n        </Avatar>\n        <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n            <Title\n              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n              className=\"critical-comms--title\"\n            >\n              {title}\n            </Title>\n            <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n          </div>\n          {action ? (\n            <div className=\"critical-comms--cta\">\n              <Button\n                block={isModern}\n                size={Size.SMALL}\n                type={ControlType.NEGATIVE}\n                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n                className=\"cta-btn\"\n                onClick={() => {\n                  if (action) {\n                    window.location.href = action.href;\n                  }\n                }}\n              >\n                {action.label}\n              </Button>\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,IAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,IAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,GAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,IAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,UAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,IAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,GAAA,CAACY,eAAe,EAAA,EAAG,CAAA,gBAAGZ,GAAA,CAACa,KAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,IAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,IAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,IAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,GAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,UAAU,CAACC,UAAU,GAAGD,UAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,GAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,GAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,GAAA,CAACmB,MAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,IAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,WAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,QAAQ,CAACC,SAAS,GAAGD,QAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n  title: string;\n  subtitle?: string;\n  action?: {\n    label: string;\n    href: string;\n  };\n  className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n  return (\n    <div className={clsx('critical-comms', className)}>\n      <Alert\n        title={title}\n        message={subtitle}\n        action={{ target: action?.href, text: action?.label }}\n        className={className}\n        type=\"critical\"\n      />\n    </div>\n  );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","target","href","text","label","type"],"mappings":";;;;AAaA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;AAC3F,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,IAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,GAAA,CAACG,KAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,MAAM,EAAEP,MAAM,EAAEQ,IAAI;QAAEC,IAAI,EAAET,MAAM,EAAEU,KAAAA;OAAQ;AACtDT,MAAAA,SAAS,EAAEA,SAAU;AACrBU,MAAAA,IAAI,EAAC,UAAA;KAET,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/dimmer/Dimmer.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
@@ -59,6 +60,7 @@ const Dimmer = ({
   onClose,
   onExited: handleExited
 }) => {
+  const [hasNotExited, setHasNotExited] = React.useState(false);
   const dimmerReference = React.useRef(null);
   const closeOnClick = event => {
     if (event.target === dimmerReference.current) {
@@ -81,11 +83,13 @@ const Dimmer = ({
     }
   }, [onClose]);
   const onEnter = () => {
+    setHasNotExited(true);
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
+    setHasNotExited(false);
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -104,54 +108,76 @@ const Dimmer = ({
       localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
     };
   }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-    nodeRef: dimmerReference,
-    in: open,
-    appear: true
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: {
-      enter: clsx.clsx({
-        'dimmer--enter-fade': fadeContentOnEnter
-      }),
-      enterDone: clsx.clsx('dimmer--enter-done', {
-        'dimmer--enter-fade': fadeContentOnEnter
-      }),
-      exit: clsx.clsx('dimmer--exit', {
-        'dimmer--exit-fade': fadeContentOnExit
-      })
-    },
-    unmountOnExit: true,
-    onEnter: onEnter,
-    onExited: onExited,
-    children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
-      scrollBody: !transparent,
-      children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          ref: dimmerReference,
-          className: clsx.clsx('dimmer', {
-            'dimmer--scrollable': scrollable,
-            'dimmer--transparent': transparent
-          }, className),
-          role: "presentation",
-          onClick: handleClick,
+  return /*#__PURE__*/jsxRuntime.jsx(DimmerWrapper, {
+    open: open,
+    hasNotExited: hasNotExited,
+    children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+      nodeRef: dimmerReference,
+      in: open,
+      appear: true
+      // Wait for animation to finish before unmount.
+      ,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION
+      },
+      classNames: {
+        enter: clsx.clsx({
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        enterDone: clsx.clsx('dimmer--enter-done', {
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        exit: clsx.clsx('dimmer--exit', {
+          'dimmer--exit-fade': fadeContentOnExit
+        })
+      },
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onExited: onExited,
+      children: /*#__PURE__*/jsxRuntime.jsx(DimmerContentWrapper, {
+        scrollBody: !transparent,
+        children: /*#__PURE__*/jsxRuntime.jsx(FocusBoundary, {
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: clsx.clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
-              'align-items-start': contentPosition === 'top',
-              'align-items-center': contentPosition === 'center',
-              'align-items-end': contentPosition === 'bottom'
-            }]),
-            children: children
+            ref: dimmerReference,
+            className: clsx.clsx('dimmer', {
+              'dimmer--scrollable': scrollable,
+              'dimmer--transparent': transparent
+            }, className),
+            role: "presentation",
+            onClick: handleClick,
+            children: /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: clsx.clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+                'align-items-start': contentPosition === 'top',
+                'align-items-center': contentPosition === 'center',
+                'align-items-end': contentPosition === 'bottom'
+              }]),
+              children: children
+            })
           })
         })
       })
     })
   });
 };
+const DimmerWrapper = ({
+  open,
+  hasNotExited,
+  children
+}) => {
+  const {
+    screenMode,
+    theme
+  } = componentsTheming.useTheme();
+  return open || hasNotExited ? /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
+    theme: "personal",
+    screenMode: theme === 'personal' ? screenMode : 'light',
+    isNotRootProvider: true,
+    children: children
+  }) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: children
+  });
+};
 const DimmerContentWrapper = ({
   children,
   scrollBody

package/build/dimmer/Dimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <CSSTransition\n      nodeRef={dimmerReference}\n      in={open}\n      appear\n      // Wait for animation to finish before unmount.\n      timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n      classNames={{\n        enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n        enterDone: clsx('dimmer--enter-done', {\n          'dimmer--enter-fade': fadeContentOnEnter,\n        }),\n        exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n      }}\n      unmountOnExit\n      onEnter={onEnter}\n      onExited={onExited}\n    >\n      <DimmerContentWrapper scrollBody={!transparent}>\n        <FocusBoundary>\n          <div\n            ref={dimmerReference}\n            className={clsx(\n              'dimmer',\n              { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n              className,\n            )}\n            role=\"presentation\"\n            onClick={handleClick}\n          >\n            <div\n              className={clsx(\n                'dimmer-content-positioner',\n                contentPosition != null && [\n                  'd-flex justify-content-center',\n                  {\n                    'align-items-start': contentPosition === 'top',\n                    'align-items-center': contentPosition === 'center',\n                    'align-items-end': contentPosition === 'bottom',\n                  },\n                ],\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </FocusBoundary>\n      </DimmerContentWrapper>\n    </CSSTransition>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Dimmer.js","sources":["../../src/dimmer/Dimmer.tsx"],"sourcesContent":["import { ThemeProvider, useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport {\n  addNoScrollClass,\n  removeNoScrollClass,\n  type CommonProps,\n  type PositionBottom,\n  type PositionCenter,\n  type PositionTop,\n} from '../common';\nimport { isIosDevice } from '../common/deviceDetection';\nimport FocusBoundary from '../common/focusBoundary';\nimport withNextPortal from '../withNextPortal/withNextPortal';\n\nimport DimmerManager from './dimmerManager';\n\nexport const EXIT_ANIMATION = 350;\n\nconst dimmerManager = new DimmerManager();\n\nexport type DimmerProps = CommonProps & {\n  children?: ReactNode;\n  disableClickToClose?: boolean;\n  contentPosition?: PositionTop | PositionCenter | PositionBottom;\n  fadeContentOnEnter?: boolean;\n  fadeContentOnExit?: boolean;\n  open?: boolean;\n  scrollable?: boolean;\n  transparent?: boolean;\n  onClose?: (event: KeyboardEvent | MouseEvent) => void;\n  onExited?: () => void;\n};\n\nexport const handleTouchMove = (event: Event) => {\n  const isTouchedElementDimmer = (event.target as HTMLDivElement).classList.contains('dimmer');\n\n  // disable scroll on iOS devices for Dimmer area\n  // this is because of bug in WebKit https://bugs.webkit.org/show_bug.cgi?id=220908\n  // note: scrolling still works for children(s) as expected\n  if (isIosDevice() && isTouchedElementDimmer) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n};\n\nconst Dimmer = ({\n  children,\n  className,\n  disableClickToClose = false,\n  contentPosition,\n  fadeContentOnEnter = false,\n  fadeContentOnExit = false,\n  open = false,\n  scrollable = false,\n  transparent = false,\n  onClose,\n  onExited: handleExited,\n}: DimmerProps) => {\n  const [hasNotExited, setHasNotExited] = useState(false);\n  const dimmerReference = useRef<HTMLDivElement>(null);\n\n  const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (event.target === dimmerReference.current) {\n      onClose?.(event);\n    }\n  };\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    if (disableClickToClose || !onClose) {\n      return;\n    }\n\n    closeOnClick(event);\n  };\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') {\n        return;\n      }\n      event.stopPropagation();\n\n      if (onClose && dimmerReference.current && dimmerManager.isTop(dimmerReference.current)) {\n        onClose(event);\n      }\n    },\n    [onClose],\n  );\n\n  const onEnter = () => {\n    setHasNotExited(true);\n\n    if (dimmerReference.current) {\n      dimmerManager.add(dimmerReference.current);\n    }\n  };\n  const onExited = () => {\n    setHasNotExited(false);\n\n    if (dimmerReference.current) {\n      dimmerManager.remove(dimmerReference.current);\n    }\n\n    handleExited?.();\n  };\n\n  useEffect(() => {\n    const localReferenceCopy = dimmerReference.current;\n\n    if (open) {\n      document.addEventListener('keydown', handleKeyDown);\n      localReferenceCopy?.addEventListener('touchmove', handleTouchMove, { passive: true });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n\n      localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);\n    };\n  }, [handleKeyDown, open]);\n\n  return (\n    <DimmerWrapper open={open} hasNotExited={hasNotExited}>\n      <CSSTransition\n        nodeRef={dimmerReference}\n        in={open}\n        appear\n        // Wait for animation to finish before unmount.\n        timeout={{ enter: 0, exit: EXIT_ANIMATION }}\n        classNames={{\n          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),\n          enterDone: clsx('dimmer--enter-done', {\n            'dimmer--enter-fade': fadeContentOnEnter,\n          }),\n          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),\n        }}\n        unmountOnExit\n        onEnter={onEnter}\n        onExited={onExited}\n      >\n        <DimmerContentWrapper scrollBody={!transparent}>\n          <FocusBoundary>\n            <div\n              ref={dimmerReference}\n              className={clsx(\n                'dimmer',\n                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },\n                className,\n              )}\n              role=\"presentation\"\n              onClick={handleClick}\n            >\n              <div\n                className={clsx(\n                  'dimmer-content-positioner',\n                  contentPosition != null && [\n                    'd-flex justify-content-center',\n                    {\n                      'align-items-start': contentPosition === 'top',\n                      'align-items-center': contentPosition === 'center',\n                      'align-items-end': contentPosition === 'bottom',\n                    },\n                  ],\n                )}\n              >\n                {children}\n              </div>\n            </div>\n          </FocusBoundary>\n        </DimmerContentWrapper>\n      </CSSTransition>\n    </DimmerWrapper>\n  );\n};\n\nconst DimmerWrapper: React.ComponentType<{\n  open: boolean;\n  hasNotExited: boolean;\n  children: React.ReactNode;\n}> = ({ open, hasNotExited, children }) => {\n  const { screenMode, theme } = useTheme();\n\n  return open || hasNotExited ? (\n    <ThemeProvider\n      theme=\"personal\"\n      screenMode={theme === 'personal' ? screenMode : 'light'}\n      isNotRootProvider\n    >\n      {children}\n    </ThemeProvider>\n  ) : (\n    <>{children}</>\n  );\n};\n\nexport const DimmerContentWrapper = ({\n  children,\n  scrollBody,\n}: {\n  children: React.ReactElement;\n  scrollBody: boolean;\n}) => {\n  useEffect(() => {\n    if (scrollBody) {\n      addNoScrollClass();\n    }\n\n    return () => {\n      if (scrollBody) {\n        removeNoScrollClass();\n      }\n    };\n  }, [scrollBody]);\n\n  return children;\n};\n\n// Export without the Portal for tests only\nexport { Dimmer };\n\nexport default withNextPortal(Dimmer);\n"],"names":["EXIT_ANIMATION","dimmerManager","DimmerManager","handleTouchMove","event","isTouchedElementDimmer","target","classList","contains","isIosDevice","stopPropagation","preventDefault","Dimmer","children","className","disableClickToClose","contentPosition","fadeContentOnEnter","fadeContentOnExit","open","scrollable","transparent","onClose","onExited","handleExited","hasNotExited","setHasNotExited","useState","dimmerReference","useRef","closeOnClick","current","handleClick","handleKeyDown","useCallback","key","isTop","onEnter","add","remove","useEffect","localReferenceCopy","document","addEventListener","passive","removeEventListener","_jsx","DimmerWrapper","CSSTransition","nodeRef","in","appear","timeout","enter","exit","classNames","clsx","enterDone","unmountOnExit","DimmerContentWrapper","scrollBody","FocusBoundary","ref","role","onClick","screenMode","theme","useTheme","ThemeProvider","isNotRootProvider","_Fragment","addNoScrollClass","removeNoScrollClass","withNextPortal"],"mappings":"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"}

package/build/dimmer/Dimmer.mjs

@@ -1,5 +1,6 @@
+import { useTheme, ThemeProvider } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isIosDevice } from '../common/deviceDetection/deviceDetection.mjs';
 import { addNoScrollClass, removeNoScrollClass } from '../common/DOMOperations/DOMOperations.mjs';
@@ -25,7 +26,7 @@ import '../common/fileType.mjs';
 import '@transferwise/icons';
 import 'react-intl';
 import '../common/closeButton/CloseButton.messages.mjs';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import FocusBoundary from '../common/focusBoundary/FocusBoundary.mjs';
 import withNextPortalWrapper from '../withNextPortal/withNextPortal.mjs';
 import DimmerManager from './dimmerManager/DimmerManager.mjs';
@@ -55,6 +56,7 @@ const Dimmer = ({
   onClose,
   onExited: handleExited
 }) => {
+  const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef(null);
   const closeOnClick = event => {
     if (event.target === dimmerReference.current) {
@@ -77,11 +79,13 @@ const Dimmer = ({
     }
   }, [onClose]);
   const onEnter = () => {
+    setHasNotExited(true);
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
+    setHasNotExited(false);
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -100,54 +104,76 @@ const Dimmer = ({
       localReferenceCopy?.removeEventListener('touchmove', handleTouchMove);
     };
   }, [handleKeyDown, open]);
-  return /*#__PURE__*/jsx(CSSTransition, {
-    nodeRef: dimmerReference,
-    in: open,
-    appear: true
-    // Wait for animation to finish before unmount.
-    ,
-    timeout: {
-      enter: 0,
-      exit: EXIT_ANIMATION
-    },
-    classNames: {
-      enter: clsx({
-        'dimmer--enter-fade': fadeContentOnEnter
-      }),
-      enterDone: clsx('dimmer--enter-done', {
-        'dimmer--enter-fade': fadeContentOnEnter
-      }),
-      exit: clsx('dimmer--exit', {
-        'dimmer--exit-fade': fadeContentOnExit
-      })
-    },
-    unmountOnExit: true,
-    onEnter: onEnter,
-    onExited: onExited,
-    children: /*#__PURE__*/jsx(DimmerContentWrapper, {
-      scrollBody: !transparent,
-      children: /*#__PURE__*/jsx(FocusBoundary, {
-        children: /*#__PURE__*/jsx("div", {
-          ref: dimmerReference,
-          className: clsx('dimmer', {
-            'dimmer--scrollable': scrollable,
-            'dimmer--transparent': transparent
-          }, className),
-          role: "presentation",
-          onClick: handleClick,
+  return /*#__PURE__*/jsx(DimmerWrapper, {
+    open: open,
+    hasNotExited: hasNotExited,
+    children: /*#__PURE__*/jsx(CSSTransition, {
+      nodeRef: dimmerReference,
+      in: open,
+      appear: true
+      // Wait for animation to finish before unmount.
+      ,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION
+      },
+      classNames: {
+        enter: clsx({
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        enterDone: clsx('dimmer--enter-done', {
+          'dimmer--enter-fade': fadeContentOnEnter
+        }),
+        exit: clsx('dimmer--exit', {
+          'dimmer--exit-fade': fadeContentOnExit
+        })
+      },
+      unmountOnExit: true,
+      onEnter: onEnter,
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(DimmerContentWrapper, {
+        scrollBody: !transparent,
+        children: /*#__PURE__*/jsx(FocusBoundary, {
           children: /*#__PURE__*/jsx("div", {
-            className: clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
-              'align-items-start': contentPosition === 'top',
-              'align-items-center': contentPosition === 'center',
-              'align-items-end': contentPosition === 'bottom'
-            }]),
-            children: children
+            ref: dimmerReference,
+            className: clsx('dimmer', {
+              'dimmer--scrollable': scrollable,
+              'dimmer--transparent': transparent
+            }, className),
+            role: "presentation",
+            onClick: handleClick,
+            children: /*#__PURE__*/jsx("div", {
+              className: clsx('dimmer-content-positioner', contentPosition != null && ['d-flex justify-content-center', {
+                'align-items-start': contentPosition === 'top',
+                'align-items-center': contentPosition === 'center',
+                'align-items-end': contentPosition === 'bottom'
+              }]),
+              children: children
+            })
           })
         })
       })
     })
   });
 };
+const DimmerWrapper = ({
+  open,
+  hasNotExited,
+  children
+}) => {
+  const {
+    screenMode,
+    theme
+  } = useTheme();
+  return open || hasNotExited ? /*#__PURE__*/jsx(ThemeProvider, {
+    theme: "personal",
+    screenMode: theme === 'personal' ? screenMode : 'light',
+    isNotRootProvider: true,
+    children: children
+  }) : /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
 const DimmerContentWrapper = ({
   children,
   scrollBody