@itwin/core-react 4.0.0-dev.1 → 4.0.0-dev.11

package/lib/cjs/core-react/dialog/Dialog.scss

@@ -8,14 +8,11 @@
 @import "../text/block";
 @import "../z-index";
 @import "../scrollbar";
-@import "~@itwin/itwinui-css/scss/style/typography";
-@import "~@itwin/itwinui-css/scss/style/variables";
-@import "~@itwin/itwinui-css/scss/text/mixins";
 
 // cspell:ignore titlebar outoffocus nwse
 
 .core-dialog {
-  @include iui-font-family;
+  font-family: var(--iui-font-sans);
 
   display: none;
   position: fixed;
@@ -106,17 +103,17 @@
       display: flex;
       flex-grow: 1;
       flex-direction: column;
-      border: 1px solid $buic-background-dialog-stroke;
-      border-radius: $iui-border-radius;
-      background-color: $buic-background-dialog;
-      color: $buic-text-color;
+      border: 1px solid var(--iui-color-border);
+      border-radius: var(--iui-border-radius-1);
+      background-color: var(--iui-color-background);
+      color: var(--iui-color-text);
       padding: 0;
 
       > .core-dialog-head {
         flex-shrink: 0;
         align-items: center;
-        background-color: $buic-background-titlebar; /* $buic-background-titlebar-outoffocus; */
-        color: $buic-text-color;
+        background-color: var(--iui-color-background-backdrop);
+        color: var(--iui-color-text);
         display: flex;
         padding: 4px;
 
@@ -128,37 +125,48 @@
         > .core-dialog-title {
           flex: 1 1;
 
-          @include iui-text(leading);
+          padding: 0;
+          border: none;
+          vertical-align: baseline;
+          font-size: var(--iui-font-size-2);
+          font-weight: var(--iui-font-weight-normal);
+          line-height: var(--iui-size-l);
 
           margin: 0;
           margin-left: 4px;
         }
 
         &.core-dialog-modal {
-          background-color: $buic-background-dialog;
+          background-color: var(--iui-color-background);
 
           > .core-dialog-title {
-            @include iui-text(subheading);
+            margin: 0;
+            padding: 0;
+            border: none;
+            vertical-align: baseline;
+            font-size: var(--iui-font-size-3);
+            font-weight: var(--iui-font-weight-normal);
+            line-height: calc(1.5 * var(--iui-size-l));
           }
         }
 
         > .core-dialog-close {
           cursor: pointer;
-          height: $iui-font-size-title;
-          width: $iui-font-size-title;
-          line-height: $iui-font-size-title;
+          height: var(--iui-font-size-4);
+          width: var(--iui-font-size-4);
+          line-height: var(--iui-font-size-4);
           flex: 0 0 $uicore-icons-medium;
           text-align: center;
-          color: $buic-text-color-muted;
+          color: var(--iui-color-icon);
           border: none;
           background-color: transparent;
 
           &:hover,
           &:focus {
-            color: $buic-foreground-activehover;
+            color: var(--iui-color-icon-hover);
           }
           &:focus {
-            outline: 1px solid $buic-foreground-focus;
+            outline: 1px solid var(--iui-color-border-accent);
           }
         }
       }
@@ -198,14 +206,6 @@
           }
         }
       }
-
-      /*
-      &:focus-within {
-        .core-dialog-head {
-          background-color: $buic-background-titlebar;
-        }
-      }
-      */
     }
 
     $dialog-resize-bar-width: 8px;

package/lib/cjs/core-react/elementseparator/ElementSeparator.scss

@@ -9,7 +9,7 @@
   @return linear-gradient(
     $orientation,
     transparent calc(50% - 1px),
-    $buic-foreground-primary calc(50%),
+    var(--iui-color-icon-accent) calc(50%),
     transparent calc(50% + 1px));
 }
 

package/lib/cjs/core-react/expandable/ExpandableList.d.ts

@@ -14,6 +14,8 @@ export interface ExpandableListProps extends CommonProps {
     singleExpandOnly?: boolean;
     /** Indicates whether the single expanded block is collapsible */
     singleIsCollapsible?: boolean;
+    /** Content */
+    children?: React.ReactNode;
 }
 /** @internal */
 interface ExpandableListState {

package/lib/cjs/core-react/expandable/ExpandableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;gBAEnF,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,YAAY;IAUpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}
+{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;gBAEnF,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,YAAY;IAUpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}

package/lib/cjs/core-react/expandable/ExpandableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAoB/B;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAE/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAAC,KAAa,EAAE,QAAuC,EAAE,EAAE;YACtF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QArBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAsBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBACjG,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC9H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvG,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AAnDH,wCAoDC;AA5Ce,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Expandable\r\n */\r\n\r\nimport \"./ExpandableList.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[ExpandableList]] component\r\n * @public\r\n */\r\nexport interface ExpandableListProps extends CommonProps {\r\n  /** Index of the default active block */\r\n  defaultActiveBlock?: number;\r\n  /** Indicates whether to allow only one expanded block */\r\n  singleExpandOnly?: boolean;\r\n  /** Indicates whether the single expanded block is collapsible */\r\n  singleIsCollapsible?: boolean;\r\n}\r\n\r\n/** @internal */\r\ninterface ExpandableListState {\r\n  activeBlock: number;\r\n}\r\n\r\n/**\r\n * ExpandableList React component is a container for ExpandableBlock components.\r\n * @public\r\n */\r\nexport class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {\r\n\r\n  constructor(props: ExpandableListProps) {\r\n    super(props);\r\n\r\n    this.state = { activeBlock: this.props.defaultActiveBlock! };\r\n  }\r\n\r\n  public static defaultProps: Partial<ExpandableListProps> = {\r\n    singleExpandOnly: false,\r\n    defaultActiveBlock: 0,\r\n  };\r\n\r\n  // set active block\r\n  private _handleBlockToggle = (index: number, onToggle: (isExpanding: boolean) => any) => {\r\n    let activeBlock = index;\r\n\r\n    if (this.props.singleIsCollapsible && index === this.state.activeBlock)\r\n      activeBlock = -1;\r\n\r\n    this.setState({ activeBlock });\r\n\r\n    // istanbul ignore else\r\n    if (onToggle) {\r\n      onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\r\n    }\r\n  };\r\n\r\n  private renderBlocks() {\r\n    return React.Children.map(this.props.children, (child: any, i) => {\r\n      return React.cloneElement(child, {\r\n        key: i,\r\n        isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,\r\n        onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\r\n      });\r\n    });\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: ExpandableListProps) {\r\n    if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {\r\n      this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\r\n    }\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <div className={classnames(\"uicore-expandable-blocks-list\", this.props.className)} style={this.props.style}>\r\n        {this.renderBlocks()}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,iCAA+B;AAC/B,2CAAoC;AACpC,+BAA+B;AAsB/B;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAE/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAAC,KAAa,EAAE,QAAuC,EAAE,EAAE;YACtF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QArBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAsBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBACjG,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC9H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvG,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AAnDH,wCAoDC;AA5Ce,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Expandable\r\n */\r\n\r\nimport \"./ExpandableList.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[ExpandableList]] component\r\n * @public\r\n */\r\nexport interface ExpandableListProps extends CommonProps {\r\n  /** Index of the default active block */\r\n  defaultActiveBlock?: number;\r\n  /** Indicates whether to allow only one expanded block */\r\n  singleExpandOnly?: boolean;\r\n  /** Indicates whether the single expanded block is collapsible */\r\n  singleIsCollapsible?: boolean;\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** @internal */\r\ninterface ExpandableListState {\r\n  activeBlock: number;\r\n}\r\n\r\n/**\r\n * ExpandableList React component is a container for ExpandableBlock components.\r\n * @public\r\n */\r\nexport class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {\r\n\r\n  constructor(props: ExpandableListProps) {\r\n    super(props);\r\n\r\n    this.state = { activeBlock: this.props.defaultActiveBlock! };\r\n  }\r\n\r\n  public static defaultProps: Partial<ExpandableListProps> = {\r\n    singleExpandOnly: false,\r\n    defaultActiveBlock: 0,\r\n  };\r\n\r\n  // set active block\r\n  private _handleBlockToggle = (index: number, onToggle: (isExpanding: boolean) => any) => {\r\n    let activeBlock = index;\r\n\r\n    if (this.props.singleIsCollapsible && index === this.state.activeBlock)\r\n      activeBlock = -1;\r\n\r\n    this.setState({ activeBlock });\r\n\r\n    // istanbul ignore else\r\n    if (onToggle) {\r\n      onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\r\n    }\r\n  };\r\n\r\n  private renderBlocks() {\r\n    return React.Children.map(this.props.children, (child: any, i) => {\r\n      return React.cloneElement(child, {\r\n        key: i,\r\n        isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,\r\n        onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\r\n      });\r\n    });\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: ExpandableListProps) {\r\n    if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {\r\n      this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\r\n    }\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <div className={classnames(\"uicore-expandable-blocks-list\", this.props.className)} style={this.props.style}>\r\n        {this.renderBlocks()}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/expandable/list.scss

@@ -3,43 +3,33 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "../style/index";
-@import "~@itwin/itwinui-css/scss/style/speed";
 
 @mixin uicore-expandable-blocks-list {
-
   > div {
-
-    transition:               margin $iui-speed-fast ease-in-out;
+    transition: margin var(--iui-duration-1) ease-in-out;
 
     > .iui-header {
-
-      border-color:           $uicore-gray-a transparent transparent;
+      border-color: var(--iui-color-border);
     }
 
     &:first-child {
-
       > .iui-header {
-
-        border-top-color:   transparent;
+        border-top-color: var(--iui-color-border);
       }
     }
   }
 
   > .iui-expanded + div {
-
     > .iui-header {
-
-      border-top-color:       transparent;
+      border-top-color: var(--iui-color-border);
     }
 
-    &.iui-expanded  > .iui-header {
-
-        border-top-color:       $uicore-blue;
+    &.iui-expanded > .iui-header {
+      border-top-color: var(--iui-color-border-accent);
     }
   }
 
   > .iui-expanded + .iui-expanded {
-
-    margin-top:                 0; // $uicore-unbordered-padding;
+    margin-top: 0;
   }
 }

package/lib/cjs/core-react/hocs/withTimeout.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTimeout.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withTimeout.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,0CAAuC;AAYvC;;GAEG;AACI,MAAM,WAAW,GAAG;AACzB,gEAAgE;AAChE,SAA8C,EAC9C,EAAE;IACF,OAAO,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAgD;QAAhF;;YACE,UAAK,GAAU,IAAI,aAAK,CAAC,CAAC,CAAC,CAAC;QA6BrC,CAAC;QA3BiB,iBAAiB;YAC/B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;YAC9E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAEe,kBAAkB,CAAC,UAAuD;YACxF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAEe,oBAAoB;YAClC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;QAEe,MAAM;YACpB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;YAC7G,OAAO,CACL,oBAAC,SAAS,OAAK,KAAuB,KAAM,IAAI,CAAC,KAAK,GAAI,CAC3D,CAAC;QACJ,CAAC;QAEM,UAAU,CAAC,OAAe;YAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;gBACtB,OAAO;YAET,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,WAAW,eAmCtB","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Common\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Timer } from \"../utils/Timer\";\r\n\r\n/** Properties for [[withTimeout]] React higher-order component\r\n * @public\r\n */\r\nexport interface WithTimeoutProps {\r\n  /** Timeout duration in milliseconds */\r\n  timeout: number;\r\n  /** Callback function for timeout */\r\n  onTimeout?: () => void;\r\n}\r\n\r\n/** withTimeout is a React higher-order component that adds timeout support.\r\n * @public\r\n */\r\nexport const withTimeout = <ComponentProps extends {}>(\r\n  // eslint-disable-next-line @typescript-eslint/naming-convention\r\n  Component: React.ComponentType<ComponentProps>,\r\n) => {\r\n  return class WithTimeout extends React.PureComponent<ComponentProps & WithTimeoutProps> {\r\n    public timer: Timer = new Timer(0);\r\n\r\n    public override componentDidMount(): void {\r\n      this.timer.setOnExecute(() => this.props.onTimeout && this.props.onTimeout());\r\n      this.startTimer(this.props.timeout);\r\n    }\r\n\r\n    public override componentDidUpdate(_prevProps: Readonly<ComponentProps & WithTimeoutProps>): void {\r\n      this.startTimer(this.props.timeout);\r\n    }\r\n\r\n    public override componentWillUnmount(): void {\r\n      this.timer.stop();\r\n    }\r\n\r\n    public override render() {\r\n      const { timeout, onTimeout, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n      return (\r\n        <Component {...props as ComponentProps} {...this.state} />\r\n      );\r\n    }\r\n\r\n    public startTimer(timeout: number) {\r\n      if (this.timer.isRunning)\r\n        return;\r\n\r\n      this.timer.delay = timeout;\r\n      this.timer.start();\r\n    }\r\n  };\r\n};\r\n"]}
+{"version":3,"file":"withTimeout.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withTimeout.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA+B;AAC/B,0CAAuC;AAYvC;;GAEG;AACI,MAAM,WAAW,GAAG;AACzB,gEAAgE;AAChE,SAA8C,EAC9C,EAAE;IACF,OAAO,MAAM,WAAY,SAAQ,KAAK,CAAC,aAAgD;QAAhF;;YACE,UAAK,GAAU,IAAI,aAAK,CAAC,CAAC,CAAC,CAAC;QA6BrC,CAAC;QA3BiB,iBAAiB;YAC/B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;YAC9E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAEe,kBAAkB,CAAC,UAAuD;YACxF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAEe,oBAAoB;YAClC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QACpB,CAAC;QAEe,MAAM;YACpB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,wDAAwD;YAC7G,OAAO,CACL,oBAAC,SAAS,OAAK,KAAY,KAAM,IAAI,CAAC,KAAK,GAAI,CAChD,CAAC;QACJ,CAAC;QAEM,UAAU,CAAC,OAAe;YAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;gBACtB,OAAO;YAET,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC;YAC3B,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,WAAW,eAmCtB","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Common\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Timer } from \"../utils/Timer\";\r\n\r\n/** Properties for [[withTimeout]] React higher-order component\r\n * @public\r\n */\r\nexport interface WithTimeoutProps {\r\n  /** Timeout duration in milliseconds */\r\n  timeout: number;\r\n  /** Callback function for timeout */\r\n  onTimeout?: () => void;\r\n}\r\n\r\n/** withTimeout is a React higher-order component that adds timeout support.\r\n * @public\r\n */\r\nexport const withTimeout = <ComponentProps extends {}>(\r\n  // eslint-disable-next-line @typescript-eslint/naming-convention\r\n  Component: React.ComponentType<ComponentProps>,\r\n) => {\r\n  return class WithTimeout extends React.PureComponent<ComponentProps & WithTimeoutProps> {\r\n    public timer: Timer = new Timer(0);\r\n\r\n    public override componentDidMount(): void {\r\n      this.timer.setOnExecute(() => this.props.onTimeout && this.props.onTimeout());\r\n      this.startTimer(this.props.timeout);\r\n    }\r\n\r\n    public override componentDidUpdate(_prevProps: Readonly<ComponentProps & WithTimeoutProps>): void {\r\n      this.startTimer(this.props.timeout);\r\n    }\r\n\r\n    public override componentWillUnmount(): void {\r\n      this.timer.stop();\r\n    }\r\n\r\n    public override render() {\r\n      const { timeout, onTimeout, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\r\n      return (\r\n        <Component {...props as any} {...this.state} />\r\n      );\r\n    }\r\n\r\n    public startTimer(timeout: number) {\r\n      if (this.timer.isRunning)\r\n        return;\r\n\r\n      this.timer.delay = timeout;\r\n      this.timer.start();\r\n    }\r\n  };\r\n};\r\n"]}

package/lib/cjs/core-react/icons/ConditionalIconItem.d.ts

@@ -0,0 +1,27 @@
+/** @packageDocumentation
+ * @module Item
+ */
+import { IconSpec } from "./IconComponent";
+/** Class used to return an icon. The icon is variable and can be changed in response to subscribed event ids.
+ * @public
+ */
+export declare class ConditionalIconItem {
+    readonly iconGetter: () => IconSpec;
+    readonly syncEventIds: string[];
+    private _value?;
+    /** Constructor for ConditionalIconItem
+     * @param iconGetter Function to retrieve the icon that matches the condition. Returns an IconSpec.
+     * @param syncEventIds The array of event ids to be monitored. These events are triggered when the condition(s) that control the icon change.
+     * @param value The default IconSpec. If this is not specified, the function is run to get the initial value.
+    */
+    constructor(iconGetter: () => IconSpec, syncEventIds: string[], value?: IconSpec);
+    /** The current IconSpec according to conditions */
+    get value(): IconSpec;
+    /** Called to update the value by running the iconGetter */
+    refresh(): boolean;
+    /** A helper function that updates the IconSpec value when the specified events are triggered */
+    static refreshValue(conditionalValue: ConditionalIconItem | string | undefined, eventIds: Set<string>): boolean;
+    /** helper function to get the iconSpec from a ConditionIconItem as IconSpec | undefined*/
+    static getValue(conditionalValue: ConditionalIconItem | string | undefined): IconSpec | undefined;
+}
+//# sourceMappingURL=ConditionalIconItem.d.ts.map

package/lib/cjs/core-react/icons/ConditionalIconItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalIconItem.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/ConditionalIconItem.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;GAEG;AACH,qBAAa,mBAAmB;aAQF,UAAU,EAAE,MAAM,QAAQ;aAAkB,YAAY,EAAE,MAAM,EAAE;IAP9F,OAAO,CAAC,MAAM,CAAC,CAAW;IAE1B;;;;MAIE;gBAC0B,UAAU,EAAE,MAAM,QAAQ,EAAkB,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,QAAQ;IAIhH,mDAAmD;IACnD,IAAW,KAAK,IAAI,QAAQ,CAM3B;IAED,2DAA2D;IACpD,OAAO,IAAI,OAAO;IAUzB,gGAAgG;WAClF,YAAY,CAAC,gBAAgB,EAAE,mBAAmB,GAAG,MAAM,GAAG,SAAS,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO;IAYtH,0FAA0F;WAC5E,QAAQ,CAAC,gBAAgB,EAAE,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS;CAWzG"}

package/lib/cjs/core-react/icons/ConditionalIconItem.js

@@ -0,0 +1,65 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Item
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalIconItem = void 0;
+/** Class used to return an icon. The icon is variable and can be changed in response to subscribed event ids.
+ * @public
+ */
+class ConditionalIconItem {
+    /** Constructor for ConditionalIconItem
+     * @param iconGetter Function to retrieve the icon that matches the condition. Returns an IconSpec.
+     * @param syncEventIds The array of event ids to be monitored. These events are triggered when the condition(s) that control the icon change.
+     * @param value The default IconSpec. If this is not specified, the function is run to get the initial value.
+    */
+    constructor(iconGetter, syncEventIds, value) {
+        this.iconGetter = iconGetter;
+        this.syncEventIds = syncEventIds;
+        this._value = value;
+    }
+    /** The current IconSpec according to conditions */
+    get value() {
+        /* istanbul ignore else */
+        if (undefined !== this._value)
+            return this._value;
+        this._value = this.iconGetter();
+        return this._value;
+    }
+    /** Called to update the value by running the iconGetter */
+    refresh() {
+        const newValue = this.iconGetter();
+        /* istanbul ignore else */
+        if (newValue !== this._value) {
+            this._value = newValue;
+            return true;
+        }
+        return false;
+    }
+    /** A helper function that updates the IconSpec value when the specified events are triggered */
+    static refreshValue(conditionalValue, eventIds) {
+        /* istanbul ignore else */
+        if (undefined === conditionalValue || !(conditionalValue instanceof ConditionalIconItem))
+            return false;
+        /* istanbul ignore else */
+        if (conditionalValue.syncEventIds.some((value) => eventIds.has(value.toLowerCase())))
+            return conditionalValue.refresh();
+        return false;
+    }
+    /** helper function to get the iconSpec from a ConditionIconItem as IconSpec | undefined*/
+    static getValue(conditionalValue) {
+        /* istanbul ignore else */
+        if (undefined === conditionalValue)
+            return undefined;
+        /* istanbul ignore else */
+        if (conditionalValue instanceof ConditionalIconItem)
+            return conditionalValue.value;
+        return conditionalValue;
+    }
+}
+exports.ConditionalIconItem = ConditionalIconItem;
+//# sourceMappingURL=ConditionalIconItem.js.map

package/lib/cjs/core-react/icons/ConditionalIconItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalIconItem.js","sourceRoot":"","sources":["../../../../src/core-react/icons/ConditionalIconItem.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH;;GAEG;AACH,MAAa,mBAAmB;IAG9B;;;;MAIE;IACF,YAA4B,UAA0B,EAAkB,YAAsB,EAAE,KAAgB;QAApF,eAAU,GAAV,UAAU,CAAgB;QAAkB,iBAAY,GAAZ,YAAY,CAAU;QAC5F,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,mDAAmD;IACnD,IAAW,KAAK;QACd,0BAA0B;QAC1B,IAAI,SAAS,KAAK,IAAI,CAAC,MAAM;YAC3B,OAAO,IAAI,CAAC,MAAM,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,2DAA2D;IACpD,OAAO;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACnC,0BAA0B;QAC1B,IAAI,QAAQ,KAAK,IAAI,CAAC,MAAM,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;YACvB,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,gGAAgG;IACzF,MAAM,CAAC,YAAY,CAAC,gBAA0D,EAAE,QAAqB;QAC1G,0BAA0B;QAC1B,IAAI,SAAS,KAAK,gBAAgB,IAAI,CAAC,CAAC,gBAAgB,YAAY,mBAAmB,CAAC;YACtF,OAAO,KAAK,CAAC;QAEf,0BAA0B;QAC1B,IAAI,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,KAAa,EAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnG,OAAO,gBAAgB,CAAC,OAAO,EAAE,CAAC;QAEpC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,0FAA0F;IACnF,MAAM,CAAC,QAAQ,CAAC,gBAA0D;QAC/E,0BAA0B;QAC1B,IAAI,SAAS,KAAK,gBAAgB;YAChC,OAAO,SAAS,CAAC;QAEnB,0BAA0B;QAC1B,IAAI,gBAAgB,YAAY,mBAAmB;YACjD,OAAO,gBAAgB,CAAC,KAAK,CAAC;QAEhC,OAAO,gBAAgB,CAAC;IAC1B,CAAC;CACF;AAzDD,kDAyDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Item\r\n */\r\n\r\nimport { IconSpec } from \"./IconComponent\";\r\n\r\n/** Class used to return an icon. The icon is variable and can be changed in response to subscribed event ids.\r\n * @public\r\n */\r\nexport class ConditionalIconItem {\r\n  private _value?: IconSpec;\r\n\r\n  /** Constructor for ConditionalIconItem\r\n   * @param iconGetter Function to retrieve the icon that matches the condition. Returns an IconSpec.\r\n   * @param syncEventIds The array of event ids to be monitored. These events are triggered when the condition(s) that control the icon change.\r\n   * @param value The default IconSpec. If this is not specified, the function is run to get the initial value.\r\n  */\r\n  constructor(public readonly iconGetter: () => IconSpec, public readonly syncEventIds: string[], value?: IconSpec) {\r\n    this._value = value;\r\n  }\r\n\r\n  /** The current IconSpec according to conditions */\r\n  public get value(): IconSpec {\r\n    /* istanbul ignore else */\r\n    if (undefined !== this._value)\r\n      return this._value;\r\n    this._value = this.iconGetter();\r\n    return this._value;\r\n  }\r\n\r\n  /** Called to update the value by running the iconGetter */\r\n  public refresh(): boolean {\r\n    const newValue = this.iconGetter();\r\n    /* istanbul ignore else */\r\n    if (newValue !== this._value) {\r\n      this._value = newValue;\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /** A helper function that updates the IconSpec value when the specified events are triggered */\r\n  public static refreshValue(conditionalValue: ConditionalIconItem | string | undefined, eventIds: Set<string>): boolean {\r\n    /* istanbul ignore else */\r\n    if (undefined === conditionalValue || !(conditionalValue instanceof ConditionalIconItem))\r\n      return false;\r\n\r\n    /* istanbul ignore else */\r\n    if (conditionalValue.syncEventIds.some((value: string): boolean => eventIds.has(value.toLowerCase())))\r\n      return conditionalValue.refresh();\r\n\r\n    return false;\r\n  }\r\n\r\n  /** helper function to get the iconSpec from a ConditionIconItem as IconSpec | undefined*/\r\n  public static getValue(conditionalValue: ConditionalIconItem | string | undefined): IconSpec | undefined {\r\n    /* istanbul ignore else */\r\n    if (undefined === conditionalValue)\r\n      return undefined;\r\n\r\n    /* istanbul ignore else */\r\n    if (conditionalValue instanceof ConditionalIconItem)\r\n      return conditionalValue.value;\r\n\r\n    return conditionalValue;\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/icons/IconComponent.d.ts

@@ -5,15 +5,16 @@ import "./IconComponent.scss";
 import * as React from "react";
 import { ConditionalStringValue } from "@itwin/appui-abstract";
 import { CommonProps } from "../utils/Props";
+import { ConditionalIconItem } from "./ConditionalIconItem";
 /** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.
  * @public
  */
-export declare type IconSpec = string | ConditionalStringValue | React.ReactNode;
+export declare type IconSpec = string | ConditionalStringValue | React.ReactNode | ConditionalIconItem;
 /** Properties for the [[Icon]] React component
  * @public
  */
 export interface IconProps extends CommonProps {
-    /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly
+    /** CSS class name or SvgPath for icon. This is optional because it is improperly
      * used to extend other interfaces and changing it would break existing API.
      */
     iconSpec?: IconSpec;

package/lib/cjs/core-react/icons/IconComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAqB,MAAM,uBAAuB,CAAC;AAElF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C;;GAEG;AACH,oBAAY,QAAQ,GAAG,MAAM,GAAG,sBAAsB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sBAgDpC"}
+{"version":3,"file":"IconComponent.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,sBAAsB,EAAqB,MAAM,uBAAuB,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,oBAAY,QAAQ,GAAG,MAAM,GAAG,sBAAsB,GAAG,KAAK,CAAC,SAAS,GAAG,mBAAmB,CAAC;AAE/F;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sBAwCpC"}

package/lib/cjs/core-react/icons/IconComponent.js

@@ -13,7 +13,6 @@ require("./IconComponent.scss");
 const React = require("react");
 const classnames_1 = require("classnames");
 const appui_abstract_1 = require("@itwin/appui-abstract");
-const SvgSprite_1 = require("./SvgSprite");
 const dompurify_1 = require("dompurify"), DOMPurifyNS = dompurify_1;
 /** Icon Functional component displays an icon based on an [[IconSpec]].
  * @public
@@ -24,11 +23,6 @@ function Icon(props) {
     const iconString = (typeof props.iconSpec === "string" || props.iconSpec instanceof appui_abstract_1.ConditionalStringValue) ?
         appui_abstract_1.ConditionalStringValue.getValue(props.iconSpec) : undefined;
     if (iconString) {
-        const svgSource = appui_abstract_1.IconSpecUtilities.getSvgSource(iconString);
-        // if string begins with "svg:" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader
-        if (svgSource !== undefined)
-            return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className), style: props.style },
-                React.createElement(SvgSprite_1.SvgSprite, { src: svgSource })));
         const webComponentString = appui_abstract_1.IconSpecUtilities.getWebComponentSource(iconString);
         if (webComponentString) {
             const svgLoader = `<svg-loader src="${webComponentString}"></svg-loader>`;
@@ -49,7 +43,7 @@ function Icon(props) {
         }
         return (React.createElement("i", { className: (0, classnames_1.default)("icon", iconString, props.className), style: props.style }));
     }
-    return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className), style: props.style }, props.iconSpec));
+    return (React.createElement("i", { className: (0, classnames_1.default)("icon", "core-svg-icon", props.className), style: props.style }, props.iconSpec instanceof appui_abstract_1.ConditionalStringValue ? undefined : props.iconSpec));
 }
 exports.Icon = Icon;
 //# sourceMappingURL=IconComponent.js.map

package/lib/cjs/core-react/icons/IconComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAClF,2CAAwC;AAExC,oEAAoD;AAiBpD;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,SAAS,GAAG,kCAAiB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAC7D,kIAAkI;QAClI,IAAI,SAAS,KAAK,SAAS;YACzB,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;gBACpF,oBAAC,qBAAS,IAAC,GAAG,EAAE,SAAS,GAAI,CAC3B,CACL,CAAC;QACJ,MAAM,kBAAkB,GAAG,kCAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,oBAAoB,kBAAkB,iBAAiB,CAAC;YAC1E,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,mBAAS,aAAT,mBAAS,cAAT,mBAAS,GAAI,WAAW,CAAC;YAE3C,MAAM,eAAe,GAAG;gBACtB,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,iBAAiB,EAAE,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;aACzE,CAAC;YAEF,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;YACxE,iFAAiF;YACjF,+FAA+F;YAC/F,MAAM,gBAAgB,GAAG,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAQ,CAAC;YAC/F,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CAAC,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,CACb,CACL,CAAC;AACJ,CAAC;AAhDD,oBAgDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { SvgSprite } from \"./SvgSprite\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n  /** CSS class name or SvgSprite/SvgPath for icon. This is optional because it is improperly\r\n   * used to extend other interfaces and changing it would break existing API.\r\n   */\r\n  iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n  if (!props.iconSpec)\r\n    return null;\r\n\r\n  const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n    ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n  if (iconString) {\r\n    const svgSource = IconSpecUtilities.getSvgSource(iconString);\r\n    // if string begins with \"svg:\" then we assume it was imported (into extension source file) using webpack loader svg-sprite-loader\r\n    if (svgSource !== undefined)\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n          <SvgSprite src={svgSource} />\r\n        </i>\r\n      );\r\n    const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);\r\n    if (webComponentString) {\r\n      const svgLoader = `<svg-loader src=\"${webComponentString}\"></svg-loader>`;\r\n      const svgDiv = `<div>${svgLoader}</div>`;\r\n      // the esm build of dompurify has a default import but the cjs build does not\r\n      // if there is a default export, use it (likely esm), otherwise use the namespace\r\n      // istanbul ignore next\r\n      const sanitizer = DOMPurify ?? DOMPurifyNS;\r\n\r\n      const sanitizerConfig = {\r\n        ALLOWED_TAGS: [\"svg-loader\"],\r\n        ADD_URI_SAFE_ATTR: webComponentString.startsWith(\"data:\") ? [\"src\"] : [],\r\n      };\r\n\r\n      const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);\r\n      // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\r\n      // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger\r\n      const webComponentNode = <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>;\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} >\r\n          {webComponentNode}\r\n        </i>\r\n      );\r\n    }\r\n    return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n  }\r\n\r\n  return (\r\n    <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n      {props.iconSpec}\r\n    </i>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,gCAA8B;AAC9B,+BAA+B;AAC/B,2CAAoC;AACpC,0DAAkF;AAElF,oEAAoD;AAkBpD;;GAEG;AACH,SAAgB,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjB,OAAO,IAAI,CAAC;IAEd,MAAM,UAAU,GAAG,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC;QAC3G,uCAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAI,UAAU,EAAE;QACd,MAAM,kBAAkB,GAAG,kCAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QAC/E,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,oBAAoB,kBAAkB,iBAAiB,CAAC;YAC1E,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,mBAAS,aAAT,mBAAS,cAAT,mBAAS,GAAI,WAAW,CAAC;YAE3C,MAAM,eAAe,GAAG;gBACtB,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,iBAAiB,EAAE,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;aACzE,CAAC;YAEF,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;YACxE,iFAAiF;YACjF,+FAA+F;YAC/F,MAAM,gBAAgB,GAAG,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAQ,CAAC;YAC/F,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CAAC,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,CAAC,CAAC;KAChG;IAED,OAAO,CACL,2BAAG,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IACnF,KAAK,CAAC,QAAQ,YAAY,uCAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAC5E,CACL,CAAC;AACJ,CAAC;AAxCD,oBAwCC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./IconComponent.scss\";\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ConditionalStringValue, IconSpecUtilities } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\r\nimport { ConditionalIconItem } from \"./ConditionalIconItem\";\r\n\r\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\r\n * @public\r\n */\r\nexport type IconSpec = string | ConditionalStringValue | React.ReactNode | ConditionalIconItem;\r\n\r\n/** Properties for the [[Icon]] React component\r\n * @public\r\n */\r\nexport interface IconProps extends CommonProps {\r\n  /** CSS class name or SvgPath for icon. This is optional because it is improperly\r\n   * used to extend other interfaces and changing it would break existing API.\r\n   */\r\n  iconSpec?: IconSpec;\r\n}\r\n\r\n/** Icon Functional component displays an icon based on an [[IconSpec]].\r\n * @public\r\n */\r\nexport function Icon(props: IconProps) {\r\n  if (!props.iconSpec)\r\n    return null;\r\n\r\n  const iconString = (typeof props.iconSpec === \"string\" || props.iconSpec instanceof ConditionalStringValue) ?\r\n    ConditionalStringValue.getValue(props.iconSpec) : undefined;\r\n\r\n  if (iconString) {\r\n    const webComponentString = IconSpecUtilities.getWebComponentSource(iconString);\r\n    if (webComponentString) {\r\n      const svgLoader = `<svg-loader src=\"${webComponentString}\"></svg-loader>`;\r\n      const svgDiv = `<div>${svgLoader}</div>`;\r\n      // the esm build of dompurify has a default import but the cjs build does not\r\n      // if there is a default export, use it (likely esm), otherwise use the namespace\r\n      // istanbul ignore next\r\n      const sanitizer = DOMPurify ?? DOMPurifyNS;\r\n\r\n      const sanitizerConfig = {\r\n        ALLOWED_TAGS: [\"svg-loader\"],\r\n        ADD_URI_SAFE_ATTR: webComponentString.startsWith(\"data:\") ? [\"src\"] : [],\r\n      };\r\n\r\n      const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);\r\n      // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\r\n      // eslint-disable-next-line @typescript-eslint/naming-convention, jam3/no-sanitizer-with-danger\r\n      const webComponentNode = <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>;\r\n      return (\r\n        <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} >\r\n          {webComponentNode}\r\n        </i>\r\n      );\r\n    }\r\n    return (<i className={classnames(\"icon\", iconString, props.className)} style={props.style} />);\r\n  }\r\n\r\n  return (\r\n    <i className={classnames(\"icon\", \"core-svg-icon\", props.className)} style={props.style}>\r\n      {props.iconSpec instanceof ConditionalStringValue ? undefined : props.iconSpec}\r\n    </i>\r\n  );\r\n}\r\n"]}

package/lib/cjs/core-react/icons/SvgPath.d.ts

@@ -1,7 +1,7 @@
 /** @packageDocumentation
  * @module Icon
  */
-import "./SvgSprite.scss";
+import "./SvgPath.scss";
 import * as React from "react";
 import { CommonProps } from "../utils/Props";
 /** Properties of [[SvgPath]] component.

package/lib/cjs/core-react/icons/SvgPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SvgPath.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,yBAAyB;IACzB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,wBAAwB;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAC5C,MAAM;CAqBvB"}
+{"version":3,"file":"SvgPath.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,gBAAgB,CAAC;AAExB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,yBAAyB;IACzB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,wBAAwB;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC;IAC5C,MAAM;CAqBvB"}

package/lib/cjs/core-react/icons/SvgPath.js

@@ -8,7 +8,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SvgPath = void 0;
-require("./SvgSprite.scss");
+require("./SvgPath.scss");
 const classnames_1 = require("classnames");
 const React = require("react");
 /** Svg element wrapper with specified Svg paths.
@@ -16,7 +16,7 @@ const React = require("react");
  */
 class SvgPath extends React.PureComponent {
     render() {
-        const className = (0, classnames_1.default)("core-icons-svgSprite", this.props.className);
+        const className = (0, classnames_1.default)("core-icons-svgPath", this.props.className);
         const viewBox = `0 0 ${this.props.viewBoxWidth} ${this.props.viewBoxHeight}`;
         return (React.createElement("svg", { className: className, style: this.props.style, width: "100%", height: "100%", viewBox: viewBox },
             React.createElement("g", null, this.props.paths.map((path, index) => {

package/lib/cjs/core-react/icons/SvgPath.js.map

@@ -1 +1 @@
-{"version":3,"file":"SvgPath.js","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,4BAA0B;AAC1B,2CAAoC;AACpC,+BAA+B;AAe/B;;GAEG;AACH,MAAa,OAAQ,SAAQ,KAAK,CAAC,aAA2B;IAC5C,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,sBAAsB,EACtB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAE7E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO;YAC7F,+BAEI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;gBACnD,OAAO,CACL,8BAAM,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9B,CAAC;YACJ,CAAC,CAAC,CAEF,CACA,CACP,CAAC;IACJ,CAAC;CACF;AAtBD,0BAsBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./SvgSprite.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties of [[SvgPath]] component.\r\n * @public\r\n */\r\nexport interface SvgPathProps extends CommonProps {\r\n  /** Svg graphics paths */\r\n  paths: string[];\r\n  /** Svg viewBox width */\r\n  viewBoxWidth: number;\r\n  /** Svg viewBox height */\r\n  viewBoxHeight: number;\r\n}\r\n\r\n/** Svg element wrapper with specified Svg paths.\r\n * @public\r\n */\r\nexport class SvgPath extends React.PureComponent<SvgPathProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-icons-svgSprite\",\r\n      this.props.className,\r\n    );\r\n    const viewBox = `0 0 ${this.props.viewBoxWidth} ${this.props.viewBoxHeight}`;\r\n\r\n    return (\r\n      <svg className={className} style={this.props.style} width=\"100%\" height=\"100%\" viewBox={viewBox}>\r\n        <g>\r\n          {\r\n            this.props.paths.map((path: string, index: number) => {\r\n              return (\r\n                <path d={path} key={index} />\r\n              );\r\n            })\r\n          }\r\n        </g>\r\n      </svg>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"SvgPath.js","sourceRoot":"","sources":["../../../../src/core-react/icons/SvgPath.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,0BAAwB;AACxB,2CAAoC;AACpC,+BAA+B;AAe/B;;GAEG;AACH,MAAa,OAAQ,SAAQ,KAAK,CAAC,aAA2B;IAC5C,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,oBAAoB,EACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,OAAO,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAE7E,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAE,OAAO;YAC7F,+BAEI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE;gBACnD,OAAO,CACL,8BAAM,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAC9B,CAAC;YACJ,CAAC,CAAC,CAEF,CACA,CACP,CAAC;IACJ,CAAC;CACF;AAtBD,0BAsBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./SvgPath.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties of [[SvgPath]] component.\r\n * @public\r\n */\r\nexport interface SvgPathProps extends CommonProps {\r\n  /** Svg graphics paths */\r\n  paths: string[];\r\n  /** Svg viewBox width */\r\n  viewBoxWidth: number;\r\n  /** Svg viewBox height */\r\n  viewBoxHeight: number;\r\n}\r\n\r\n/** Svg element wrapper with specified Svg paths.\r\n * @public\r\n */\r\nexport class SvgPath extends React.PureComponent<SvgPathProps> {\r\n  public override render() {\r\n    const className = classnames(\r\n      \"core-icons-svgPath\",\r\n      this.props.className,\r\n    );\r\n    const viewBox = `0 0 ${this.props.viewBoxWidth} ${this.props.viewBoxHeight}`;\r\n\r\n    return (\r\n      <svg className={className} style={this.props.style} width=\"100%\" height=\"100%\" viewBox={viewBox}>\r\n        <g>\r\n          {\r\n            this.props.paths.map((path: string, index: number) => {\r\n              return (\r\n                <path d={path} key={index} />\r\n              );\r\n            })\r\n          }\r\n        </g>\r\n      </svg>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/{esm/core-react/icons/SvgSprite.scss → cjs/core-react/icons/SvgPath.scss}

@@ -2,7 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-.core-icons-svgSprite {
+.core-icons-svgPath {
   display: inline-block;
   box-sizing: border-box;
   background-color: transparent;

package/lib/cjs/core-react/icons/WebFontIcon.d.ts

@@ -2,7 +2,6 @@
  * @module Icon
  */
 import "./WebFontIcon.scss";
-import "@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css";
 import * as React from "react";
 import { CommonProps } from "../utils/Props";
 /** Properties for the [[WebFontIcon]] React component

package/lib/cjs/core-react/icons/WebFontIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebFontIcon.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uEAAuE,CAAC;AAE/E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChE,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiBlD"}
+{"version":3,"file":"WebFontIcon.d.ts","sourceRoot":"","sources":["../../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC;IACnD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChE,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAiBlD"}

package/lib/cjs/core-react/icons/WebFontIcon.js

@@ -9,7 +9,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebFontIcon = void 0;
 require("./WebFontIcon.scss");
-require("@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css");
 const classnames_1 = require("classnames");
 const React = require("react");
 /** WebFontIcon React component

package/lib/cjs/core-react/icons/WebFontIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebFontIcon.js","sourceRoot":"","sources":["../../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,8BAA4B;AAC5B,iFAA+E;AAC/E,2CAAoC;AACpC,+BAA+B;AAmB/B;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,KAAK,CAAC,aAAa,IAAI,kBAAkB,EACzC,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,8BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,cAAc,GACnB,CACH,CAAC;AACJ,CAAC;AAjBD,kCAiBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./WebFontIcon.scss\";\r\nimport \"@bentley/icons-generic-webfont/dist/bentley-icons-generic-webfont.css\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[WebFontIcon]] React component\r\n * @public\r\n */\r\nexport interface WebFontIconProps extends CommonProps {\r\n  /** Bentley Web Font icon name */\r\n  iconName: string;\r\n  /** Click event handler */\r\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\r\n  /** Text that will be shown when hovered on the icon. */\r\n  title?: string;\r\n  /** Size of the icon */\r\n  iconSize?: \"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\";\r\n  /** Class name of icon used for custom font-family icons */\r\n  iconClassName?: string;\r\n}\r\n\r\n/** WebFontIcon React component\r\n * @public\r\n */\r\nexport function WebFontIcon(props: WebFontIconProps) {\r\n  const className = classnames(\r\n    props.iconClassName || \"bui-webfont-icon\",\r\n    props.iconName,\r\n    props.iconSize ? `uicore-icons-${props.iconSize}` : undefined,\r\n    props.className,\r\n  );\r\n\r\n  return (\r\n    <span\r\n      className={className}\r\n      title={props.title}\r\n      style={props.style}\r\n      onClick={props.onClick}\r\n      role=\"presentation\"\r\n    />\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"WebFontIcon.js","sourceRoot":"","sources":["../../../../src/core-react/icons/WebFontIcon.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,8BAA4B;AAC5B,2CAAoC;AACpC,+BAA+B;AAmB/B;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,KAAK,CAAC,aAAa,IAAI,kBAAkB,EACzC,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAC7D,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,OAAO,CACL,8BACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,cAAc,GACnB,CACH,CAAC;AACJ,CAAC;AAjBD,kCAiBC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Icon\r\n */\r\n\r\nimport \"./WebFontIcon.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[WebFontIcon]] React component\r\n * @public\r\n */\r\nexport interface WebFontIconProps extends CommonProps {\r\n  /** Bentley Web Font icon name */\r\n  iconName: string;\r\n  /** Click event handler */\r\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\r\n  /** Text that will be shown when hovered on the icon. */\r\n  title?: string;\r\n  /** Size of the icon */\r\n  iconSize?: \"x-small\" | \"small\" | \"medium\" | \"large\" | \"x-large\";\r\n  /** Class name of icon used for custom font-family icons */\r\n  iconClassName?: string;\r\n}\r\n\r\n/** WebFontIcon React component\r\n * @public\r\n */\r\nexport function WebFontIcon(props: WebFontIconProps) {\r\n  const className = classnames(\r\n    props.iconClassName || \"bui-webfont-icon\",\r\n    props.iconName,\r\n    props.iconSize ? `uicore-icons-${props.iconSize}` : undefined,\r\n    props.className,\r\n  );\r\n\r\n  return (\r\n    <span\r\n      className={className}\r\n      title={props.title}\r\n      style={props.style}\r\n      onClick={props.onClick}\r\n      role=\"presentation\"\r\n    />\r\n  );\r\n}\r\n"]}

package/lib/cjs/core-react/icons/variables.scss

@@ -2,7 +2,6 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-@import "../style/colors";
 
 // Sizes
 $uicore-icons-x-small: 12px;
@@ -11,11 +10,3 @@ $uicore-icons-small: 16px;
 $uicore-icons-medium: 2 * $uicore-icons-small;
 $uicore-icons-large: 3 * $uicore-icons-small;
 $uicore-icons-x-large: 4 * $uicore-icons-small;
-
-// Colors
-$uicore-icons-light: $uicore-gray;
-$uicore-icons-dark: $uicore-gray-5;
-$uicore-icons-green: $uicore-green;
-$uicore-icons-red: $uicore-red;
-$uicore-icons-orange: $uicore-orange;
-$uicore-icons-blue: $uicore-teal-b;

package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.scss

@@ -4,7 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 @import "../style/index.scss";
 @import "../icons/variables.scss";
-@import "~@itwin/itwinui-css/scss/style/variables";
 
 .core-image-checkbox {
   display: inline-block;
@@ -22,11 +21,11 @@
   }
 
   input[type="checkbox"]:checked + .image {
-    color: $buic-foreground-primary;
+    color: var(--iui-color-text-accent);
   }
 
   input[type="checkbox"]:not(:checked) + .image {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
   }
 
   input[type="checkbox"] + .image {
@@ -39,7 +38,7 @@
 
   input[type="checkbox"]:disabled:not(:checked) + .image,
   input[type="checkbox"]:disabled:checked + .image {
-    opacity: .25;
+    opacity: 0.25;
   }
 
   /* accessibility */
@@ -49,7 +48,7 @@
 }
 .image-checkbox-border {
   border: 1px solid $buic-foreground-disabled;
-  background-color:  $buic-background-control;
-  border-radius: $iui-border-radius;
+  background-color: $buic-background-control;
+  border-radius: var(--iui-border-radius-1);
   padding: 1px 3px 0 2px;
-}
+}

package/lib/cjs/core-react/index.scss

@@ -19,9 +19,5 @@
 @import "./icons/index";
 @import "./inputs/index";
 @import "./loading/index";
-@import "./progress-indicators/index";
-@import "./radio/index";
-@import "./select/index";
 @import "./tabs/index";
 @import "./text/index";
-@import "./tiles/index";