@itwin/appui-react 4.17.6 → 5.0.0-dev.3

package/lib/esm/appui-react/pickers/ListPicker.scss

@@ -2,23 +2,23 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
-@import "~@itwin/core-react/lib/cjs/core-react/scrollbar";
-@import "~@itwin/core-react/lib/cjs/core-react/typography";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
+@use "~@itwin/core-react/lib/core-react/typography" as *;
 
 $no-shadow: none;
-$shadow: drop-shadow(0 1px 0 $buic-text-color-reverse);
+$shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
 $space-after-label: 16px;
 $space-before-label: 16px;
 $label-color: var(--iui-color-text);
-$border-color: $buic-background-control-stroke;
+$border-color: var(--iui-color-background-disabled);
 $item-height: 32px;
 
 .ListPicker-separator {
   height: 1px;
-  background: $buic-background-divider;
-  border-bottom: 1px solid $buic-background-control-stroke;
+  background: var(--iui-color-background-backdrop-hover);
+  border-bottom: 1px solid var(--iui-color-background-disabled);
 }
 
 .ListPicker-column {
@@ -39,7 +39,7 @@ $item-height: 32px;
   padding-right: 0px;
   padding-bottom: 0px;
   padding-top: 0px;
-  background-color: $buic-background-window;
+  background-color: var(--iui-color-background-hover);
 }
 
 .ListPickerInnerContainer-expander {
@@ -86,10 +86,10 @@ $item-height: 32px;
 
 .ListPicker-item {
   $label-color: var(--iui-color-text);
-  $pressed-label-color: $buic-foreground-activehover;
-  $hovered-label-color: $buic-foreground-primary-tone;
-  $focused-label-color: $buic-foreground-primary-tone;
-  $active-label-color: $buic-foreground-primary-tone;
+  $pressed-label-color: var(--iui-color-text);
+  $hovered-label-color: var(--iui-color-text-accent-hover);
+  $focused-label-color: var(--iui-color-text-accent-hover);
+  $active-label-color: var(--iui-color-text-accent-hover);
   $item-height: 32px;
   $item-border-width: 2px;
   $active-tool-stripe-height: 22px;
@@ -150,7 +150,7 @@ $item-height: 32px;
 
   &.is-focused {
     color: $focused-label-color;
-    border-color: $buic-foreground-primary;
+    border-color: var(--iui-color-icon-accent);
     border-width: $item-border-width;
     border-style: solid;
 
@@ -188,10 +188,10 @@ $item-height: 32px;
 
 .ListPickerWidget-item {
   $label-color: var(--iui-color-text);
-  $pressed-label-color: $buic-foreground-activehover;
-  $hovered-label-color: $buic-foreground-primary;
-  $focused-label-color: $buic-foreground-primary;
-  $active-label-color: $buic-foreground-primary;
+  $pressed-label-color: var(--iui-color-text);
+  $hovered-label-color: var(--iui-color-icon-accent);
+  $focused-label-color: var(--iui-color-icon-accent);
+  $active-label-color: var(--iui-color-icon-accent);
   $item-height: 32px;
   $item-border-width: 2px;
   $active-tool-stripe-height: 22px;
@@ -212,7 +212,9 @@ $item-height: 32px;
     margin-right: $space-after-label;
     margin-left: $space-before-label;
     line-height: $item-height;
-    filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
+    filter: drop-shadow(
+      0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+    );
 
     &:after {
       display: block;
@@ -232,23 +234,27 @@ $item-height: 32px;
 
     > .icon,
     .label {
-      filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
+      filter: drop-shadow(
+        0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+      );
     }
   }
 
   &:active {
-    background: $buic-foreground-primary-tone;
+    background: var(--iui-color-text-accent-hover);
     color: $pressed-label-color;
 
     > .icon,
     .label {
-      filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
+      filter: drop-shadow(
+        0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+      );
     }
   }
 
   &.is-focused {
     color: $focused-label-color;
-    border-color: $buic-foreground-primary;
+    border-color: var(--iui-color-icon-accent);
     border-width: $item-border-width;
     border-style: solid;
 
@@ -256,7 +262,9 @@ $item-height: 32px;
 
     > .icon,
     .label {
-      filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
+      filter: drop-shadow(
+        0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+      );
     }
   }
 
@@ -290,7 +298,9 @@ $item-height: 32px;
   white-space: nowrap;
   text-align: center;
   color: var(--iui-color-text);
-  filter: drop-shadow(0 1px 0 $buic-text-color-reverse);
+  filter: drop-shadow(
+    0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+  );
   margin-bottom: 9px;
   margin-left: $horizontal-margin;
   margin-right: $horizontal-margin;

package/lib/esm/appui-react/popup/CardPopup.scss

@@ -2,11 +2,10 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .uifw-card {
-  background-color: $buic-background-card;
+  background-color: hsl(var(--iui-color-background-hsl) / 0.9);
   @include uicore-z-index(content-card-popup);
 
   .uifw-card-content {
@@ -16,7 +15,7 @@
   .uifw-card-separator {
     height: 2px;
     margin-bottom: 1px;
-    background: rgba($buic-foreground-body-reverse-rgb, 0.45);
+    background: rgba(var(--iui-color-foreground-hsl), 0.45);
   }
 }
 

package/lib/esm/appui-react/popup/KeyinPalettePanel.scss

@@ -2,17 +2,16 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .uifw-command-palette-popup-container {
   @include uicore-z-index(keyin-palette-overlay);
 
   box-sizing: border-box;
-  background: $buic-background-control;
+  background: var(--iui-color-background);
   color: var(--iui-color-text);
-  -webkit-box-shadow: 0 3px 6px $buic-popup-boxshadow;
-  box-shadow: 0px 3px 6px $buic-popup-boxshadow;
+  -webkit-box-shadow: 0 3px 6px var(--iui-focus-box-shadow);
+  box-shadow: 0px 3px 6px var(--iui-focus-box-shadow);
 
   .uifw-command-palette-panel {
     margin: 4px;
@@ -26,6 +25,6 @@
   .uifw-history-bottom-border {
     border-bottom-width: 1px;
     border-bottom-style: solid;
-    border-bottom-color: $buic-foreground-disabled;
+    border-bottom-color: var(--iui-color-text-disabled);
   }
 }

package/lib/esm/appui-react/popup/PositionPopup.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.
  *--------------------------------------------------------------------------------------------*/
-@import "../variables";
+@use "../variables" as *;
 
 .uifw-position-popup {
   border: {

package/lib/esm/appui-react/preview/enable-maximized-widget/useMaximizedWidget.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.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 @layer appui.preview.enable-maximized-widget {
   .uifw-preview-enableMaximizedWidget_panel-layout {

package/lib/esm/appui-react/settings/quantityformatting/QuantityFormat.scss

@@ -2,9 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .quantity-formatting-container {
   box-sizing: border-box;

package/lib/esm/appui-react/settings/ui/UiSettingsPage.scss

@@ -2,10 +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 "~@itwin/core-react/lib/cjs/core-react/base/base";
-
-// cspell:ignore leftpanel rightpanel
-
 $settings-leftpanel-width: 225px;
 $settings-rightpanel-width: 220px;
 

package/lib/esm/appui-react/statusbar/LabelIndicator.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.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
 
 .uifw-statusbar-labelIndicator {
   &.uifw-reversed {

package/lib/esm/appui-react/statusbar/StatusBar.scss

@@ -2,8 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/index";
-@import "../layout/safearea";
+@use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
+@use "../layout/safearea" as *;
 
 .uifw-statusBar {
   display: flex;

package/lib/esm/appui-react/statusbar/popup/ExpandIndicator.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.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/geometry";
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
 
 .uifw-statusBar-popup-expandIndicator {
   position: absolute;

package/lib/esm/appui-react/statusbar/popup/Popup.scss

@@ -2,8 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/index";
-@import "~@itwin/core-react/lib/cjs/core-react/z-index";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
 
 .nz-status-bar-popup {
   font-size: var(--iui-font-size-1);

package/lib/esm/appui-react/statusfields/SectionsField.scss

@@ -2,8 +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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 .uifw-sections-footer-contents {
   display: flex;
   flex-direction: column;

package/lib/esm/appui-react/statusfields/SelectionScope.scss

@@ -2,8 +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 "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-
 .uifw-statusFields-selectionScope {
   display: flex;
   align-items: center;

package/lib/esm/appui-react/statusfields/message-center/MessageCenterMessage.scss

@@ -2,8 +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 "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 .uifw-statusFields-messageCenter-messageCenterMessage {
   min-height: 48px;
   box-sizing: border-box;

package/lib/esm/appui-react/statusfields/tileloading/TileLoadingIndicator.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.
  *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
+@use "~@itwin/core-react/lib/core-react/style/breakpoints" as *;
 
 .uifw-tile-loading-bar {
   $font-size-medium: var(--iui-font-size-0);

package/lib/esm/appui-react/statusfields/toolassistance/ToolAssistanceField.scss

@@ -2,9 +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 "~@itwin/core-react/lib/cjs/core-react/style/breakpoints";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-
 $image-size: 22px;
 $image-size-wide: 30px;
 $image-size-medium: 16px;

package/lib/esm/appui-react/toolbar/new-toolbars/Badge.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-badge {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ExpandIndicator.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+
+.uifw-toolbar-group-expandIndicator {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+
+  @include triangle-bottom-right(
+    $width: 5px,
+    $height: 5px,
+    $color: currentColor
+  );
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Surface.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-surface {
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  transition: border-color var(--iui-duration-1) ease;
+  // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
+  pointer-events: all;
+  // TODO: fixes an issues on Safari where borders and backgrounds are overlapped by the viewport.
+  position: relative;
+
+  @supports (backdrop-filter: blur(5px)) {
+    background-color: hsl(
+      var(--iui-color-background-hsl) / var(--iui-opacity-2)
+    );
+    backdrop-filter: blur(5px);
+  }
+
+  &.uifw-vertical {
+    flex-direction: column;
+  }
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--iui-color-border-foreground-hover);
+  }
+
+  &:empty {
+    display: none;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ToolGroup.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-toolGroup_container {
+  flex: 1 1 100%;
+  min-width: 0;
+
+  &.uifw-vertical {
+    height: 100%;
+  }
+
+  &.uifw-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/lib/esm/appui-react/widgets/BackstageAppButton.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widget-backstageAppButton {
+  block-size: 2.5rem;
+  aspect-ratio: 1;
+}
+
+.uifw-widget-backstageAppButton_icon {
+  font-size: 1.5rem;
+
+  svg {
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+  }
+}
+
+.uifw-widget-backstageAppButton_label {
+  pointer-events: none;
+}
+
+.uifw-widget-backstageAppButton_bars {
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  left: -1px;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+
+  > .uifw-bar {
+    background-color: var(--iui-color-icon);
+    width: 4px;
+    height: 2px;
+    border-top-right-radius: var(--iui-border-radius-round);
+    border-bottom-right-radius: var(--iui-border-radius-round);
+    filter: drop-shadow(0 1px 0 var(--buic-foreground-body-reverse));
+  }
+
+  > .uifw-bar:not(:first-child) {
+    margin-top: 5px;
+  }
+}

package/lib/public/locales/en/UiFramework.json

@@ -122,7 +122,7 @@
     "yes": "Yes",
     "no": "No",
     "clearSelection": "Clear Selection",
-    "openBackstageMenu": "Open Backstage Menu"
+    "openBackstageMenu": "Open backstage menu"
   },
   "navigationAid": {
     "sheetsModalFrontstage": "Sheet Views"

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@itwin/appui-react",
-  "version": "4.17.6",
-  "description": "UI framework",
-  "main": "lib/cjs/appui-react.js",
-  "module": "lib/esm/appui-react.js",
-  "typings": "lib/cjs/appui-react",
+  "version": "5.0.0-dev.3",
+  "description": "A react component library for AppUI framework",
+  "type": "module",
+  "types": "./lib/appui-react.d.ts",
+  "exports": {
+    ".": "./lib/appui-react.js",
+    "./package.json": "./package.json",
+    "./lib/cjs/*": {
+      "sass": "./lib/*"
+    },
+    "./lib/esm/*": {
+      "sass": "./lib/*"
+    },
+    "./*": {
+      "sass": "./*"
+    }
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,38 +34,36 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^3.7.0 || ^4.0.0",
-    "@itwin/components-react": "^4.17.6",
-    "@itwin/core-bentley": "^3.7.0 || ^4.0.0",
-    "@itwin/core-common": "^3.7.0 || ^4.0.0",
-    "@itwin/core-frontend": "^3.7.0 || ^4.0.0",
-    "@itwin/core-geometry": "^3.7.0 || ^4.0.0",
-    "@itwin/core-quantity": "^3.7.0 || ^4.0.0",
-    "@itwin/core-react": "^4.17.6",
-    "@itwin/core-telemetry": "^3.7.0 || ^4.0.0",
-    "@itwin/imodel-components-react": "^4.17.6",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@itwin/appui-abstract": "^4.0.0",
+    "@itwin/components-react": "^5.0.0-dev.3",
+    "@itwin/core-bentley": "^4.0.0",
+    "@itwin/core-common": "^4.0.0",
+    "@itwin/core-frontend": "^4.0.0",
+    "@itwin/core-geometry": "^4.0.0",
+    "@itwin/core-quantity": "^4.0.0",
+    "@itwin/core-react": "^5.0.0-dev.3",
+    "@itwin/core-telemetry": "^4.0.0",
+    "@itwin/imodel-components-react": "^5.0.0-dev.3",
+    "@itwin/itwinui-react": "^3.15.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-redux": "^7.2.2",
     "redux": "^4.1.0"
   },
-  "//devDependencies": [
-    "NOTE: All peerDependencies should also be listed as devDependencies since peerDependencies are not considered by npm install",
-    "NOTE: All tools used by scripts in this package must be listed as devDependencies"
-  ],
   "devDependencies": {
-    "@itwin/appui-abstract": "^3.7.0 || ^4.0.0",
-    "@itwin/build-tools": "^3.7.0 || ^4.6.0-dev.27",
-    "@itwin/core-bentley": "^3.7.0 || ^4.0.0",
-    "@itwin/core-common": "^3.7.0 || ^4.0.0",
-    "@itwin/core-frontend": "^3.7.0 || ^4.0.0",
-    "@itwin/core-geometry": "^3.7.0 || ^4.0.0",
-    "@itwin/core-orbitgt": "^3.7.0 || ^4.0.0",
-    "@itwin/core-quantity": "^3.7.0 || ^4.0.0",
-    "@itwin/core-telemetry": "^3.7.0 || ^4.0.0",
-    "@itwin/ecschema-metadata": "^3.7.0 || ^4.0.0",
-    "@itwin/eslint-plugin": "^4.0.0-dev.52",
-    "@itwin/webgl-compatibility": "^3.7.0 || ^4.0.0",
+    "@itwin/appui-abstract": "^4.0.0",
+    "@itwin/build-tools": "4.10.0-dev.31",
+    "@itwin/core-bentley": "^4.0.0",
+    "@itwin/core-common": "^4.0.0",
+    "@itwin/core-frontend": "^4.0.0",
+    "@itwin/core-geometry": "^4.0.0",
+    "@itwin/core-orbitgt": "^4.0.0",
+    "@itwin/core-quantity": "^4.0.0",
+    "@itwin/core-telemetry": "^4.0.0",
+    "@itwin/ecschema-metadata": "^4.0.0",
+    "@itwin/eslint-plugin": "^4.1.1",
+    "@itwin/itwinui-react": "^3.15.0",
+    "@itwin/webgl-compatibility": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -65,10 +75,9 @@
     "@types/react-redux": "^7.1.18",
     "@types/react-transition-group": "^4.4.4",
     "@types/rimraf": "^2.0.2",
-    "@types/use-sync-external-store": "^0.0.6",
     "@vitest/coverage-v8": "^1.4.0",
     "cpx2": "^3.0.0",
-    "eslint": "^8.44.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "~8.8.0",
     "faker": "^4.1.0",
     "ignore-styles": "^5.0.1",
@@ -85,44 +94,36 @@
     "typescript": "~5.3.3",
     "upath": "^2.0.1",
     "vitest": "^1.6.0",
-    "@itwin/core-react": "4.17.6",
-    "@itwin/components-react": "4.17.6",
-    "@itwin/imodel-components-react": "4.17.6"
+    "@itwin/components-react": "5.0.0-dev.3",
+    "@itwin/imodel-components-react": "5.0.0-dev.3",
+    "@itwin/core-react": "5.0.0-dev.3"
   },
-  "//dependencies": [
-    "NOTE: these dependencies should be only for things that DO NOT APPEAR IN THE API",
-    "NOTE: core-frontend should remain UI technology agnostic, so no react/angular dependencies are allowed"
-  ],
   "dependencies": {
     "@bentley/icons-generic": "^1.0.34",
-    "@itwin/itwinui-react": "^3.11.2",
-    "@itwin/itwinui-react-v2": "npm:@itwin/itwinui-react@^2.11.11",
-    "@itwin/itwinui-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-illustrations-react": "^2.0.1",
-    "classnames": "2.3.1",
-    "immer": "9.0.6",
+    "classnames": "2.5.1",
+    "immer": "^10.1.1",
     "lodash": "^4.17.10",
     "react-error-boundary": "4.0.3",
     "react-transition-group": "^4.4.2",
     "rxjs": "^7.8.1",
     "ts-key-enum": "~2.0.12",
-    "use-sync-external-store": "^1.2.0",
     "zustand": "^4.4.1"
   },
   "scripts": {
-    "start": "run-p -l \"build:** -- -w\" \"copy:** -- -w\"",
-    "build": "npm run -s copy:locale && npm run -s build:cjs && npm run -s build:esm",
-    "build:cjs": "npm run -s copy:cjs && tsc -p tsconfig.cjs.json",
-    "build:esm": "npm run -s copy:esm && tsc -p tsconfig.esm.json",
-    "copy:cjs": "cpx \"./src/**/*.{*css,json,svg}\" \"./lib/cjs\"",
-    "copy:esm": "cpx \"./src/**/*.{*css,json,svg}\" \"./lib/esm\"",
+    "start": "run-p -l \"build -- -w\" \"copy:** -- -w\"",
+    "build": "npm run copy:css && npm run compat:css && npm run copy:locale && tsc",
+    "copy:css": "cpx \"./src/**/*.{*css,json,svg}\" ./lib",
     "copy:locale": "cpx ./src/appui-react/UiFramework.json ./lib/public/locales/en",
+    "compat:css": "npm run compat:cjs && npm run compat:esm",
+    "compat:cjs": "cpx \"./src/**/*.{*css,svg}\" ./lib/cjs",
+    "compat:esm": "cpx \"./src/**/*.{*css,svg}\" ./lib/esm",
     "clean": "rimraf lib .rush/temp/package-deps*.json",
     "cover": "vitest run --coverage",
     "lint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
     "lint:fix": "npm run -s lint -- --fix",
-    "extract-api": "betools extract-api --entry=appui-react",
+    "extract-api": "betools extract-api --entry=./lib/appui-react",
     "test": "vitest",
     "docs": "npm run -s docs:extract && npm run -s docs:reference && npm run -s docs:changelog",
     "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/reference/appui-react",