@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/loading/LoadingPrompt.scss

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+
+// cspell:ignore loadingprompt
+
+.core-loadingprompt {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: $buic-foreground-body;
+  }
+
+  .message {
+    font-size: 14px;
+    margin-bottom: 1.75em;
+    color: $buic-foreground-body;
+  }
+}
+
+/* cancel button */
+.loading-prompt-cancel {
+  margin-top: 2em;
+}

package/lib/esm/core-react/loading/LoadingSpinner.d.ts

@@ -0,0 +1,34 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingSpinner.scss";
+import * as React from "react";
+import { ProgressRadialProps } from "@itwin/itwinui-react";
+import { SpinnerSize } from "./Spinner";
+/** Type for ProgressRadialProps.size
+ * @public
+ */
+export declare type RadialSizeType = ProgressRadialProps["size"];
+/** Properties for [[LoadingSpinner]] component
+ * @public
+ */
+export interface LoadingSpinnerProps extends Omit<ProgressRadialProps, "size"> {
+    /** Message (text) displayed */
+    message?: string;
+    /** Position the message above or below the spinner (defaults to bottom) */
+    messageOnTop?: boolean;
+    /**
+       * Size of the progress indicator. Defaults to medium size.
+       * @default ''
+       */
+    size?: RadialSizeType | SpinnerSize;
+}
+/**
+ * A loading spinner component that optionally shows a text message.
+ * @public
+ */
+export declare class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {
+    static defaultProps: Partial<LoadingSpinnerProps>;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=LoadingSpinner.d.ts.map

package/lib/esm/core-react/loading/LoadingSpinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAkB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC;;GAEG;AACH,oBAAY,cAAc,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;SAGK;IACL,IAAI,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;CACrC;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC;IAC1E,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAEtD;IAEc,MAAM;CA0BvB"}

package/lib/esm/core-react/loading/LoadingSpinner.js

@@ -0,0 +1,42 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingSpinner.scss";
+import * as React from "react";
+import { ProgressRadial } from "@itwin/itwinui-react";
+import { SpinnerSize } from "./Spinner";
+/**
+ * A loading spinner component that optionally shows a text message.
+ * @public
+ */
+export class LoadingSpinner extends React.PureComponent {
+    render() {
+        const { message, messageOnTop, size, ...rest } = this.props;
+        const getRadialSize = (sizeProp) => {
+            if (sizeProp === undefined || typeof sizeProp === "string")
+                return sizeProp;
+            else {
+                switch (sizeProp) {
+                    case SpinnerSize.Large: // eslint-disable-line deprecation/deprecation
+                    case SpinnerSize.XLarge: // eslint-disable-line deprecation/deprecation
+                        return "large";
+                    case SpinnerSize.Small: // eslint-disable-line deprecation/deprecation
+                        return "x-small";
+                }
+            }
+            return undefined;
+        };
+        return (React.createElement("div", { className: "core-ls" },
+            (message && messageOnTop) && React.createElement("span", { className: "ls-message-top" }, message),
+            React.createElement(ProgressRadial, { size: getRadialSize(size), ...rest, indeterminate: true }),
+            (message && !messageOnTop) && React.createElement("span", { className: "ls-message-bottom" }, message)));
+    }
+}
+LoadingSpinner.defaultProps = {
+    messageOnTop: false,
+};
+//# sourceMappingURL=LoadingSpinner.js.map

package/lib/esm/core-react/loading/LoadingSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingSpinner.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAuB,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsBxC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAkC;IAK1D,MAAM;QACpB,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAE5D,MAAM,aAAa,GAAG,CAAC,QAAkB,EAAE,EAAE;YAC3C,IAAI,QAAQ,KAAK,SAAS,IAAI,OAAO,QAAQ,KAAK,QAAQ;gBACxD,OAAO,QAAQ,CAAC;iBACb;gBACH,QAAQ,QAAQ,EAAE;oBAChB,KAAK,WAAW,CAAC,KAAK,CAAC,CAAG,8CAA8C;oBACxE,KAAK,WAAW,CAAC,MAAM,EAAG,8CAA8C;wBACtE,OAAO,OAAO,CAAC;oBACjB,KAAK,WAAW,CAAC,KAAK,EAAI,8CAA8C;wBACtE,OAAO,SAAS,CAAC;iBACpB;aACF;YACD,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;YACrB,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,gBAAgB,IAAE,OAAO,CAAQ;YAC/E,oBAAC,cAAc,IAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,KAAM,IAAI,EAAE,aAAa,SAAG;YACpE,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,8BAAM,SAAS,EAAC,mBAAmB,IAAE,OAAO,CAAQ,CAC/E,CACP,CAAC;IACJ,CAAC;;AA7Ba,2BAAY,GAAiC;IACzD,YAAY,EAAE,KAAK;CACpB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Loading\n */\n\nimport \"./LoadingSpinner.scss\";\nimport * as React from \"react\";\nimport { ProgressRadial, ProgressRadialProps } from \"@itwin/itwinui-react\";\nimport { SpinnerSize } from \"./Spinner\";\n\n/** Type for ProgressRadialProps.size\n * @public\n */\nexport type RadialSizeType = ProgressRadialProps[\"size\"];\n\n/** Properties for [[LoadingSpinner]] component\n * @public\n */\nexport interface LoadingSpinnerProps extends Omit<ProgressRadialProps, \"size\"> {\n  /** Message (text) displayed */\n  message?: string;\n  /** Position the message above or below the spinner (defaults to bottom) */\n  messageOnTop?: boolean;\n  /**\n     * Size of the progress indicator. Defaults to medium size.\n     * @default ''\n     */\n  size?: RadialSizeType | SpinnerSize; // eslint-disable-line deprecation/deprecation\n}\n\n/**\n * A loading spinner component that optionally shows a text message.\n * @public\n */\nexport class LoadingSpinner extends React.PureComponent<LoadingSpinnerProps> {\n  public static defaultProps: Partial<LoadingSpinnerProps> = {\n    messageOnTop: false,\n  };\n\n  public override render() {\n    const { message, messageOnTop, size, ...rest } = this.props;\n    type SizeType = LoadingSpinnerProps[\"size\"];\n    const getRadialSize = (sizeProp: SizeType) => {\n      if (sizeProp === undefined || typeof sizeProp === \"string\")\n        return sizeProp;\n      else {\n        switch (sizeProp) {\n          case SpinnerSize.Large:   // eslint-disable-line deprecation/deprecation\n          case SpinnerSize.XLarge:  // eslint-disable-line deprecation/deprecation\n            return \"large\";\n          case SpinnerSize.Small:   // eslint-disable-line deprecation/deprecation\n            return \"x-small\";\n        }\n      }\n      return undefined;\n    };\n\n    return (\n      <div className=\"core-ls\">\n        {(message && messageOnTop) && <span className=\"ls-message-top\">{message}</span>}\n        <ProgressRadial size={getRadialSize(size)} {...rest} indeterminate />\n        {(message && !messageOnTop) && <span className=\"ls-message-bottom\">{message}</span>}\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/loading/LoadingSpinner.scss

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/space";
+
+ .core-ls{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .ls-message {
+    color: $buic-foreground-body;
+  }
+
+  .ls-message-top {
+    @extend .ls-message;
+    margin-bottom: $iui-sm;
+  }
+
+  .ls-message-bottom {
+    @extend .ls-message;
+    margin-top: $iui-sm;
+  }
+}

package/lib/esm/core-react/loading/LoadingStatus.d.ts

@@ -0,0 +1,25 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingStatus.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[LoadingStatus]] component
+ * @public
+ */
+export interface LoadingStatusProps extends CommonProps {
+    /** Message (text) displayed */
+    message: string;
+    /** Percent displayed (as text) */
+    percent: number;
+}
+/**
+ * A loading indicator that shows status text along with the percentage.
+ * @public
+ */
+export declare class LoadingStatus extends React.PureComponent<LoadingStatusProps> {
+    static defaultProps: Partial<LoadingStatusProps>;
+    private inRange;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=LoadingStatus.d.ts.map

package/lib/esm/core-react/loading/LoadingStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingStatus.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingStatus.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,WAAW;IACrD,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC;IACxE,OAAc,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAGrD;IAGF,OAAO,CAAC,OAAO;IAMC,MAAM;CAUvB"}

package/lib/esm/core-react/loading/LoadingStatus.js

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./LoadingStatus.scss";
+import classnames from "classnames";
+import * as React from "react";
+/**
+ * A loading indicator that shows status text along with the percentage.
+ * @public
+ */
+export class LoadingStatus extends React.PureComponent {
+    // sanity check to keep percentage between 0 & 100
+    inRange(percent) {
+        let value = Math.min(percent, 100);
+        value = Math.max(value, 0);
+        return value;
+    }
+    render() {
+        const percent = `${this.inRange(this.props.percent)}%`;
+        const containerClass = classnames(this.props.className, "loading-status-container");
+        return (React.createElement("div", { className: containerClass, style: this.props.style },
+            React.createElement("span", { className: "loading-status-message" }, this.props.message),
+            React.createElement("span", { className: "loading-status-percent" }, percent)));
+    }
+}
+LoadingStatus.defaultProps = {
+    message: "",
+    percent: 0,
+};
+//# sourceMappingURL=LoadingStatus.js.map

package/lib/esm/core-react/loading/LoadingStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingStatus.js","sourceRoot":"","sources":["../../../../src/core-react/loading/LoadingStatus.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,aAAiC;IAMxE,kDAAkD;IAC1C,OAAO,CAAC,OAAe;QAC7B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QACnC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC3B,OAAO,KAAK,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACvD,MAAM,cAAc,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,0BAA0B,CAAC,CAAC;QACpF,OAAO,CACL,6BAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACrD,8BAAM,SAAS,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAQ;YACpE,8BAAM,SAAS,EAAC,wBAAwB,IAAE,OAAO,CAAQ,CACrD,CACP,CAAC;IACJ,CAAC;;AArBa,0BAAY,GAAgC;IACxD,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,CAAC;CACX,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Loading\n */\n\nimport \"./LoadingStatus.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[LoadingStatus]] component\n * @public\n */\nexport interface LoadingStatusProps extends CommonProps {\n  /** Message (text) displayed */\n  message: string;\n  /** Percent displayed (as text) */\n  percent: number;\n}\n\n/**\n * A loading indicator that shows status text along with the percentage.\n * @public\n */\nexport class LoadingStatus extends React.PureComponent<LoadingStatusProps> {\n  public static defaultProps: Partial<LoadingStatusProps> = {\n    message: \"\",\n    percent: 0,\n  };\n\n  // sanity check to keep percentage between 0 & 100\n  private inRange(percent: number): number {\n    let value = Math.min(percent, 100);\n    value = Math.max(value, 0);\n    return value;\n  }\n\n  public override render() {\n    const percent = `${this.inRange(this.props.percent)}%`;\n    const containerClass = classnames(this.props.className, \"loading-status-container\");\n    return (\n      <div className={containerClass} style={this.props.style}>\n        <span className=\"loading-status-message\">{this.props.message}</span>\n        <span className=\"loading-status-percent\">{percent}</span>\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/loading/LoadingStatus.scss

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.loading-status-container {
+  display: flex;
+  align-items: center;
+  opacity: 0.90;
+  font-size: 12px;
+}
+
+.loading-status-message {
+  flex: 1;
+}
+
+.loading-status-percent {
+  flex: initial;
+  margin-right: auto;
+}

package/lib/esm/core-react/loading/Spinner.d.ts

@@ -0,0 +1,38 @@
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./Spinner.scss";
+import * as React from "react";
+/** Size for [[Spinner]] component
+ * @public
+ * @deprecated Use `size` in ProgressRadialProps in itwinui-react instead.
+ */
+export declare enum SpinnerSize {
+    /** width/height of 16px */
+    Small = 0,
+    /** width/height of 32px */
+    Medium = 1,
+    /** width/height of 64px */
+    Large = 2,
+    /** width/height of 96px */
+    XLarge = 3
+}
+/** Properties for [[Spinner]] component
+ * @public
+ * @deprecated Use ProgressRadialProps in itwinui-react instead.
+ */
+export interface SpinnerProps {
+    /** Size of spinner */
+    size?: SpinnerSize;
+    /** CSS class for size of spinner */
+    sizeClass?: string;
+}
+/**
+ * An indeterminate spinner component.
+ * @public
+ * @deprecated Use ProgressRadial in itwinui-react with `indeterminate` prop instead.
+ */
+export declare class Spinner extends React.PureComponent<SpinnerProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=Spinner.d.ts.map

package/lib/esm/core-react/loading/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/core-react/loading/Spinner.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;GAGG;AACH,oBAAY,WAAW;IACrB,2BAA2B;IAC3B,KAAK,IAAA;IACL,2BAA2B;IAC3B,MAAM,IAAA;IACN,2BAA2B;IAC3B,KAAK,IAAA;IACL,2BAA2B;IAC3B,MAAM,IAAA;CACP;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,sBAAsB;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAE5C,MAAM;CA2BvB"}

package/lib/esm/core-react/loading/Spinner.js

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Loading
+ */
+import "./Spinner.scss";
+import * as React from "react";
+/* eslint-disable deprecation/deprecation */
+// cspell:ignore xlarge
+/** Size for [[Spinner]] component
+ * @public
+ * @deprecated Use `size` in ProgressRadialProps in itwinui-react instead.
+ */
+export var SpinnerSize;
+(function (SpinnerSize) {
+    /** width/height of 16px */
+    SpinnerSize[SpinnerSize["Small"] = 0] = "Small";
+    /** width/height of 32px */
+    SpinnerSize[SpinnerSize["Medium"] = 1] = "Medium";
+    /** width/height of 64px */
+    SpinnerSize[SpinnerSize["Large"] = 2] = "Large";
+    /** width/height of 96px */
+    SpinnerSize[SpinnerSize["XLarge"] = 3] = "XLarge";
+})(SpinnerSize || (SpinnerSize = {}));
+/**
+ * An indeterminate spinner component.
+ * @public
+ * @deprecated Use ProgressRadial in itwinui-react with `indeterminate` prop instead.
+ */
+export class Spinner extends React.PureComponent {
+    render() {
+        let sizeClass;
+        if (this.props.sizeClass)
+            sizeClass = this.props.sizeClass;
+        else {
+            switch (this.props.size) {
+                case SpinnerSize.Small:
+                    sizeClass = "core-spinner-small";
+                    break;
+                case SpinnerSize.Large:
+                    sizeClass = "core-spinner-large";
+                    break;
+                case SpinnerSize.XLarge:
+                    sizeClass = "core-spinner-xlarge";
+                    break;
+                case SpinnerSize.Medium:
+                default:
+                    sizeClass = "core-spinner-medium";
+                    break;
+            }
+        }
+        return (React.createElement("div", { className: sizeClass }));
+    }
+}
+//# sourceMappingURL=Spinner.js.map

package/lib/esm/core-react/loading/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../src/core-react/loading/Spinner.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,4CAA4C;AAC5C,uBAAuB;AAEvB;;;GAGG;AACH,MAAM,CAAN,IAAY,WASX;AATD,WAAY,WAAW;IACrB,2BAA2B;IAC3B,+CAAK,CAAA;IACL,2BAA2B;IAC3B,iDAAM,CAAA;IACN,2BAA2B;IAC3B,+CAAK,CAAA;IACL,2BAA2B;IAC3B,iDAAM,CAAA;AACR,CAAC,EATW,WAAW,KAAX,WAAW,QAStB;AAaD;;;;GAIG;AACH,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,aAA2B;IAE5C,MAAM;QACpB,IAAI,SAAiB,CAAC;QAEtB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACtB,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;aAC9B;YACH,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;gBACvB,KAAK,WAAW,CAAC,KAAK;oBACpB,SAAS,GAAG,oBAAoB,CAAC;oBACjC,MAAM;gBACR,KAAK,WAAW,CAAC,KAAK;oBACpB,SAAS,GAAG,oBAAoB,CAAC;oBACjC,MAAM;gBACR,KAAK,WAAW,CAAC,MAAM;oBACrB,SAAS,GAAG,qBAAqB,CAAC;oBAClC,MAAM;gBACR,KAAK,WAAW,CAAC,MAAM,CAAC;gBACxB;oBACE,SAAS,GAAG,qBAAqB,CAAC;oBAClC,MAAM;aACT;SACF;QAED,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,GAAI,CAC9B,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Loading\n */\n\nimport \"./Spinner.scss\";\nimport * as React from \"react\";\n\n/* eslint-disable deprecation/deprecation */\n// cspell:ignore xlarge\n\n/** Size for [[Spinner]] component\n * @public\n * @deprecated Use `size` in ProgressRadialProps in itwinui-react instead.\n */\nexport enum SpinnerSize {\n  /** width/height of 16px */\n  Small,\n  /** width/height of 32px */\n  Medium,\n  /** width/height of 64px */\n  Large,\n  /** width/height of 96px */\n  XLarge,\n}\n\n/** Properties for [[Spinner]] component\n * @public\n * @deprecated Use ProgressRadialProps in itwinui-react instead.\n */\nexport interface SpinnerProps {\n  /** Size of spinner */\n  size?: SpinnerSize;\n  /** CSS class for size of spinner */\n  sizeClass?: string;\n}\n\n/**\n * An indeterminate spinner component.\n * @public\n * @deprecated Use ProgressRadial in itwinui-react with `indeterminate` prop instead.\n */\nexport class Spinner extends React.PureComponent<SpinnerProps> {\n\n  public override render() {\n    let sizeClass: string;\n\n    if (this.props.sizeClass)\n      sizeClass = this.props.sizeClass;\n    else {\n      switch (this.props.size) {\n        case SpinnerSize.Small:\n          sizeClass = \"core-spinner-small\";\n          break;\n        case SpinnerSize.Large:\n          sizeClass = \"core-spinner-large\";\n          break;\n        case SpinnerSize.XLarge:\n          sizeClass = \"core-spinner-xlarge\";\n          break;\n        case SpinnerSize.Medium:\n        default:\n          sizeClass = \"core-spinner-medium\";\n          break;\n      }\n    }\n\n    return (\n      <div className={sizeClass} />\n    );\n  }\n}\n"]}

package/lib/esm/core-react/loading/Spinner.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./mixins";
+
+$spinner-size-xlarge: 96px;
+$spinner-size-large:  64px;
+$spinner-size-medium: 32px;
+$spinner-size-small:  16px;
+
+.core-spinner-xlarge {
+  @include uicore-spinner($spinner-size-xlarge);
+}
+
+.core-spinner-large {
+  @include uicore-spinner($spinner-size-large);
+}
+
+.core-spinner-medium {
+  @include uicore-spinner($spinner-size-medium);
+}
+
+.core-spinner-small {
+  @include uicore-spinner($spinner-size-small);
+}

package/lib/esm/core-react/loading/index.scss

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./mixins";

package/lib/esm/core-react/loading/mixins.scss

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+
+@mixin uicore-spinner(
+  $size,
+  $borderSize: $size * 0.125,
+  $activeColor: $buic-foreground-primary,
+  $selector: "&::after",
+  $time: 1.5s
+) {
+  // Animation Keyframes
+  @keyframes uicoreSpinner {
+    0% {
+      transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    }
+    100% {
+      transform: translate3d(-50%, -50%, 0) rotate(360deg);
+    }
+  }
+
+  display: inline-block;
+  position: relative;
+
+  width: $size;
+  height: $size;
+
+  // Styles to fade out spinner when loaded
+  &.-loaded {
+    opacity: 0;
+    transition: opacity linear 0.1s;
+  }
+
+  // Spinner
+  #{$selector} {
+    height: $size;
+    width: $size;
+
+    border: solid $borderSize $buic-background-control-stroke;
+    border-bottom-color: #{$activeColor};
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    content: "";
+    opacity: inherit;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    animation: $time 0.1s linear infinite uicoreSpinner;
+    transform: translate3d(-50%, -50%, 0);
+    transform-origin: center;
+    will-change: transform;
+  }
+}

package/lib/esm/core-react/messagebox/MessageBox.d.ts

@@ -0,0 +1,65 @@
+/** @packageDocumentation
+ * @module Dialog
+ */
+import "./MessageBox.scss";
+import * as React from "react";
+import { DialogButtonDef, MessageSeverity } from "@itwin/appui-abstract";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[MessageBox]] component
+ * @public
+ */
+export interface MessageBoxProps extends CommonProps {
+    /** Severity of MessageBox */
+    severity: MessageSeverity;
+    /** whether to show dialog or not */
+    opened: boolean;
+    /** List of [[DialogButtonDef]] objects specifying buttons and associated onClick events */
+    buttonCluster: DialogButtonDef[];
+    /** Title to show in title bar of dialog  */
+    title?: string | JSX.Element;
+    /** onClick event for X button for dialog */
+    onClose?: () => void;
+    /** 'keyup' event for <Esc> key */
+    onEscape?: () => void;
+    /** minimum width that the dialog may be resized to. Default: 400 */
+    minWidth?: number;
+    /** minimum height that the dialog may be resized to. Default: 400 */
+    minHeight?: number;
+    /** initial width of dialog.
+     * Displayed in px if value is a number, otherwise displayed in specified CSS unit.
+     * Default: "50%"
+     */
+    width?: string | number;
+    /** initial height of dialog.
+     * Displayed in px if value is a number, otherwise displayed in specified CSS unit.
+     * Default: ""
+     */
+    height?: string | number;
+    /** Whether to show background overlay. Default: true */
+    modal?: boolean;
+    /** Custom CSS class name for the content */
+    contentClassName?: string;
+    /** Custom CSS Style for the content */
+    contentStyle?: React.CSSProperties;
+}
+/** Message Box React component.
+ * @public
+ */
+export declare class MessageBox extends React.PureComponent<MessageBoxProps> {
+    static defaultProps: Partial<MessageBoxProps>;
+    render(): JSX.Element;
+}
+/** Properties for the [[MessageContainer]] component
+ * @public
+ */
+export interface MessageContainerProps extends CommonProps {
+    severity: MessageSeverity;
+}
+/** Message Container React component.
+ * @public
+ */
+export declare class MessageContainer extends React.PureComponent<MessageContainerProps> {
+    static getIconClassName(severity: MessageSeverity, hollow?: boolean): string;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=MessageBox.d.ts.map

package/lib/esm/core-react/messagebox/MessageBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,6BAA6B;IAC7B,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,2FAA2F;IAC3F,aAAa,EAAE,eAAe,EAAE,CAAC;IACjC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC;IAClE,OAAc,YAAY,EAAE,OAAO,CAAC,eAAe,CAAC,CAKlD;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;CAkBtC;AAED;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;WAChE,gBAAgB,CAAC,QAAQ,EAAE,eAAe,EAAE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM;IA2BnE,MAAM,IAAI,GAAG,CAAC,OAAO;CAgBtC"}

package/lib/esm/core-react/messagebox/MessageBox.js

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Dialog
+ */
+import "./MessageBox.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { MessageSeverity } from "@itwin/appui-abstract";
+import { Dialog } from "../dialog/Dialog";
+/** Message Box React component.
+ * @public
+ */
+export class MessageBox extends React.PureComponent {
+    render() {
+        return (React.createElement(Dialog, { title: this.props.title, buttonCluster: this.props.buttonCluster, opened: this.props.opened, width: this.props.width, onClose: this.props.onClose, onEscape: this.props.onEscape, modal: this.props.modal, className: this.props.className, style: this.props.style },
+            React.createElement(MessageContainer, { severity: this.props.severity, className: this.props.contentClassName, style: this.props.contentStyle }, this.props.children)));
+    }
+}
+MessageBox.defaultProps = {
+    minWidth: 400,
+    minHeight: 400,
+    width: "512px",
+    modal: true,
+};
+/** Message Container React component.
+ * @public
+ */
+export class MessageContainer extends React.PureComponent {
+    static getIconClassName(severity, hollow) {
+        let iconClassName = "";
+        switch (severity) {
+            case MessageSeverity.None:
+                iconClassName = hollow ? "icon-status-success-hollow" : "icon-status-success" + " core-message-box-success";
+                break;
+            case MessageSeverity.Information:
+                iconClassName = hollow ? "icon-info-hollow" : "icon-info" + " core-message-box-information";
+                break;
+            case MessageSeverity.Question:
+                iconClassName = hollow ? "icon-help-hollow" : "icon-help" + " core-message-box-question";
+                break;
+            case MessageSeverity.Warning:
+                iconClassName = hollow ? "icon-status-warning" : "icon-status-warning" + " core-message-box-warning"; // TODO - need icon-status-warning-hollow icon
+                break;
+            case MessageSeverity.Error:
+                iconClassName = hollow ? "icon-status-error-hollow" : "icon-status-error" + " core-message-box-error";
+                break;
+            case MessageSeverity.Fatal:
+                iconClassName = hollow ? "icon-status-rejected" : "icon-status-rejected" + " core-message-box-fatal";
+                break;
+        }
+        return iconClassName;
+    }
+    render() {
+        const iconClassName = classnames("icon", "core-message-box-icon", MessageContainer.getIconClassName(this.props.severity));
+        return (React.createElement("div", { className: "core-message-box-container" },
+            React.createElement("div", { className: iconClassName }),
+            React.createElement("div", { className: classnames("core-message-box-content", this.props.className), style: this.props.style }, this.props.children)));
+    }
+}
+//# sourceMappingURL=MessageBox.js.map

package/lib/esm/core-react/messagebox/MessageBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.js","sourceRoot":"","sources":["../../../../src/core-react/messagebox/MessageBox.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAyC1C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,aAA8B;IAQlD,MAAM;QACpB,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACvC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,IACpH,IAAI,CAAC,KAAK,CAAC,QAAQ,CACH,CACZ,CACV,CAAC;IACJ,CAAC;;AAxBa,uBAAY,GAA6B;IACrD,QAAQ,EAAE,GAAG;IACb,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,IAAI;CACZ,CAAC;AA6BJ;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IACvE,MAAM,CAAC,gBAAgB,CAAC,QAAyB,EAAE,MAAgB;QACxE,IAAI,aAAa,GAAG,EAAE,CAAC;QAEvB,QAAQ,QAAQ,EAAE;YAChB,KAAK,eAAe,CAAC,IAAI;gBACvB,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,GAAG,2BAA2B,CAAC;gBAC5G,MAAM;YACR,KAAK,eAAe,CAAC,WAAW;gBAC9B,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,GAAG,+BAA+B,CAAC;gBAC5F,MAAM;YACR,KAAK,eAAe,CAAC,QAAQ;gBAC3B,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,GAAG,4BAA4B,CAAC;gBACzF,MAAM;YACR,KAAK,eAAe,CAAC,OAAO;gBAC1B,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,GAAG,2BAA2B,CAAC,CAAE,8CAA8C;gBACrJ,MAAM;YACR,KAAK,eAAe,CAAC,KAAK;gBACxB,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,mBAAmB,GAAG,yBAAyB,CAAC;gBACtG,MAAM;YACR,KAAK,eAAe,CAAC,KAAK;gBACxB,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,GAAG,yBAAyB,CAAC;gBACrG,MAAM;SACT;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;IAEe,MAAM;QACpB,MAAM,aAAa,GAAG,UAAU,CAC9B,MAAM,EACN,uBAAuB,EACvB,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CACvD,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B;YACzC,6BAAK,SAAS,EAAE,aAAa,GAAI;YACjC,6BAAK,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAClG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAChB,CACF,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Dialog\n */\n\nimport \"./MessageBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { DialogButtonDef, MessageSeverity } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"../dialog/Dialog\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[MessageBox]] component\n * @public\n */\nexport interface MessageBoxProps extends CommonProps {\n  /** Severity of MessageBox */\n  severity: MessageSeverity;\n  /** whether to show dialog or not */\n  opened: boolean;\n  /** List of [[DialogButtonDef]] objects specifying buttons and associated onClick events */\n  buttonCluster: DialogButtonDef[];\n  /** Title to show in title bar of dialog  */\n  title?: string | JSX.Element;\n  /** onClick event for X button for dialog */\n  onClose?: () => void;\n  /** 'keyup' event for <Esc> key */\n  onEscape?: () => void;\n  /** minimum width that the dialog may be resized to. Default: 400 */\n  minWidth?: number;\n  /** minimum height that the dialog may be resized to. Default: 400 */\n  minHeight?: number;\n  /** initial width of dialog.\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\n   * Default: \"50%\"\n   */\n  width?: string | number;\n  /** initial height of dialog.\n   * Displayed in px if value is a number, otherwise displayed in specified CSS unit.\n   * Default: \"\"\n   */\n  height?: string | number;\n  /** Whether to show background overlay. Default: true */\n  modal?: boolean;\n  /** Custom CSS class name for the content */\n  contentClassName?: string;\n  /** Custom CSS Style for the content */\n  contentStyle?: React.CSSProperties;\n}\n\n/** Message Box React component.\n * @public\n */\nexport class MessageBox extends React.PureComponent<MessageBoxProps> {\n  public static defaultProps: Partial<MessageBoxProps> = {\n    minWidth: 400,\n    minHeight: 400,\n    width: \"512px\",\n    modal: true,\n  };\n\n  public override render(): JSX.Element {\n    return (\n      <Dialog\n        title={this.props.title}\n        buttonCluster={this.props.buttonCluster}\n        opened={this.props.opened}\n        width={this.props.width}\n        onClose={this.props.onClose}\n        onEscape={this.props.onEscape}\n        modal={this.props.modal}\n        className={this.props.className}\n        style={this.props.style} >\n        <MessageContainer severity={this.props.severity} className={this.props.contentClassName} style={this.props.contentStyle}>\n          {this.props.children}\n        </MessageContainer>\n      </Dialog>\n    );\n  }\n}\n\n/** Properties for the [[MessageContainer]] component\n * @public\n */\nexport interface MessageContainerProps extends CommonProps {\n  severity: MessageSeverity;\n}\n\n/** Message Container React component.\n * @public\n */\nexport class MessageContainer extends React.PureComponent<MessageContainerProps> {\n  public static getIconClassName(severity: MessageSeverity, hollow?: boolean): string {\n    let iconClassName = \"\";\n\n    switch (severity) {\n      case MessageSeverity.None:\n        iconClassName = hollow ? \"icon-status-success-hollow\" : \"icon-status-success\" + \" core-message-box-success\";\n        break;\n      case MessageSeverity.Information:\n        iconClassName = hollow ? \"icon-info-hollow\" : \"icon-info\" + \" core-message-box-information\";\n        break;\n      case MessageSeverity.Question:\n        iconClassName = hollow ? \"icon-help-hollow\" : \"icon-help\" + \" core-message-box-question\";\n        break;\n      case MessageSeverity.Warning:\n        iconClassName = hollow ? \"icon-status-warning\" : \"icon-status-warning\" + \" core-message-box-warning\";  // TODO - need icon-status-warning-hollow icon\n        break;\n      case MessageSeverity.Error:\n        iconClassName = hollow ? \"icon-status-error-hollow\" : \"icon-status-error\" + \" core-message-box-error\";\n        break;\n      case MessageSeverity.Fatal:\n        iconClassName = hollow ? \"icon-status-rejected\" : \"icon-status-rejected\" + \" core-message-box-fatal\";\n        break;\n    }\n\n    return iconClassName;\n  }\n\n  public override render(): JSX.Element {\n    const iconClassName = classnames(\n      \"icon\",\n      \"core-message-box-icon\",\n      MessageContainer.getIconClassName(this.props.severity),\n    );\n\n    return (\n      <div className=\"core-message-box-container\">\n        <div className={iconClassName} />\n        <div className={classnames(\"core-message-box-content\", this.props.className)} style={this.props.style}>\n          {this.props.children}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/lib/esm/core-react/messagebox/MessageBox.scss

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+ @import "../icons/variables";
+ @import "../style/colors";
+ @import "../style/themecolors";
+ @import "../style/baseline";
+
+.core-message-box-container {
+  display: flex;
+  color: $buic-foreground-body;
+
+  .core-message-box-icon {
+    flex: 0 0;
+    font-size: $uicore-icons-medium;
+    padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding $uicore-unbordered-padding;
+    margin-top: 10px;
+  }
+
+  .core-message-box-content {
+    flex: 1 1;
+  }
+}
+
+.core-message-box-success {
+  color: $buic-foreground-success;
+}
+.core-message-box-information {
+  color: $buic-foreground-primary;
+}
+.core-message-box-question {
+  color: $uicore-yellow;
+}
+.core-message-box-warning {
+  color: $buic-foreground-warning;
+}
+.core-message-box-error, .core-message-box-fatal {
+  color: $buic-foreground-alert;
+}
+
+.notifymessage-icon {
+  margin-right: 6px;
+}