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

package/lib/esm/components-react/editors/TextareaEditor.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/colors";
-
 .components-textarea-editor {
   min-width: 100%;
   margin: 0;

package/lib/esm/components-react/editors/variables.scss

@@ -2,7 +2,9 @@
  * 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";
+@use "~@itwin/core-react/lib/core-react/inputs/variables";
+
+@forward "~@itwin/core-react/lib/core-react/inputs/variables";
 
 $editor-component-height-small: 24px;
-$editor-iui-input-padding: $uicore-iui-input-padding;
+$editor-iui-input-padding: variables.$uicore-iui-input-padding;

package/lib/esm/components-react/filtering/FilteringInput.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/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-filtering-input {
   display: flex;

package/lib/esm/components-react/filtering/ResultSelector.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";
-
 .components-result-selector {
   display: flex;
   align-items: center;
@@ -47,7 +45,7 @@
 }
 
 .components-result-selector-button:hover {
-  background-color: $buic-row-hover;
+  background-color: var(--iui-color-background-hover);
   border-radius: 2px;
 }
 
@@ -63,6 +61,6 @@
 
 .components-result-selector-button:disabled,
 .components-result-selector-button[disabled]:hover {
-  background-color: $buic-background-control-disabled;
+  background-color: var(--iui-color-background-backdrop);
   cursor: default;
 }

package/lib/esm/components-react/iconpicker/IconPickerButton.scss

@@ -2,12 +2,11 @@
  * 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 *;
 
 .components-iconpicker-button {
   color: var(--iui-color-text);
-  background: $buic-background-control;
+  background: var(--iui-color-background);
   box-sizing: border-box;
   border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
@@ -42,7 +41,7 @@
 
   .components-iconpicker-popup-container {
     color: var(--iui-color-text);
-    background: $buic-background-control;
+    background: var(--iui-color-background);
 
     .components-iconpicker-popup-icons {
       display: grid;
@@ -57,7 +56,7 @@
         border-radius: var(--iui-border-radius-1);
         border-style: solid;
         border-color: rgba(0, 0, 0, 0.2);
-        background: $buic-background-control;
+        background: var(--iui-color-background);
         transition: scale 0.2s ease;
         cursor: pointer;
         outline: none;

package/lib/esm/components-react/inputs/ParsedInput.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/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
 
 .components-parsed-input {
   width: auto;

package/lib/esm/components-react/properties/renderers/NonPrimitivePropertyRenderer.scss

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-@import "~@itwin/core-react/lib/cjs/core-react/style/colors";
+@use "~@itwin/core-react/lib/core-react/style/colors" as *;
 
 .components-nonprimitive-property {
   padding: 10px;

package/lib/esm/components-react/properties/renderers/PropertyView.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";
-
 $text-font-size: var(--iui-font-size-1);
 $text-font-color: var(--iui-color-text);
 
@@ -97,7 +95,7 @@ $text-font-color: var(--iui-color-text);
     white-space: nowrap;
     border: none;
     background: none;
-    color: var(--buic-foreground-primary);
+    color: var(--iui-color-icon-accent);
     font-size: 12px;
     cursor: pointer;
 

package/lib/esm/components-react/properties/renderers/label/PropertyLabelRenderer.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";
-
 @mixin rotate($amount) {
   -webkit-transform: rotate($amount);
   -ms-transform: rotate($amount);
@@ -33,7 +31,7 @@
   display: flex;
 
   .components-label-popup {
-    background: $buic-background-window;
+    background: var(--iui-color-background-hover);
     width: max-content;
     padding: 5px;
   }

package/lib/esm/components-react/propertygrid/component/PropertyGrid.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/scrollbar";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
 
 .components-property-grid-loader {
   position: relative;

package/lib/esm/components-react/propertygrid/component/VirtualizedPropertyGrid.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/scrollbar";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
 
 .components-virtualized-property-grid-loader {
   height: 100%;

package/lib/esm/components-react/toolbar/Item.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 *;
 
 .components-toolbar-button-item {
   box-sizing: border-box;

package/lib/esm/components-react/toolbar/Items.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 *;
 
 $separator-color: var(--iui-color-border-subtle);
 

package/lib/esm/components-react/toolbar/Overflow.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/z-index";
-@import "variables";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "variables" as *;
 
 .components-toolbar-button-item.components-ellipsis-icon {
   position: relative;

package/lib/esm/components-react/toolbar/OverflowPanel.scss

@@ -2,10 +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 "variables";
+@use "variables" as *;
 
 .components-toolbar-overflow-panel {
-  background: $buic-background-1;
+  background: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   display: flex;
   height: unset;

package/lib/esm/components-react/toolbar/PopupItem.scss

@@ -2,9 +2,9 @@
  * 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";
-@import "~@itwin/core-react/lib/cjs/core-react/geometry";
-@import "variables";
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
 
 .components-toolbar-expandable-button {
   $triangle-width: 4px;
@@ -25,7 +25,7 @@
     @include triangle-bottom-right(
       $width: $triangle-width,
       $height: $triangle-height,
-      $color: $buic-icon-color
+      $color: var(--iui-color-text)
     );
   }
 
@@ -65,8 +65,8 @@
 .components-toolbar-popupItem_popupItemPopup {
   @include uicore-z-index(toolbar-panels);
   width: fit-content;
-  background: $buic-background-1;
-  border-color: $buic-background-5;
+  background: var(--iui-color-background);
+  border-color: var(--iui-color-background-disabled);
   border-width: 1px;
   border-style: solid;
   border-radius: var(--iui-border-radius-1);

package/lib/esm/components-react/toolbar/Toolbar.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/z-index";
-@import "variables";
-
 .components-toolbar-overflow-sizer {
   display: inline-block;
   position: relative;

package/lib/esm/components-react/toolbar/_variables.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/index";
+@forward "~@itwin/core-react/lib/core-react/style/breakpoints";
 
 $components-desktop-item-width: 40px;
 $components-desktop-item-height: 40px;
@@ -23,10 +23,10 @@ $font-size: var(--iui-font-size-1);
 $icon-size: 16px;
 $icon-color: var(--iui-color-icon);
 $hovered-icon-color: var(--iui-color-icon-hover);
-$pressed-icon-color: $buic-foreground-activehover;
+$pressed-icon-color: var(--iui-color-text);
 $active-icon-color: var(--iui-color-icon-accent);
 $disabled-icon-color: var(--iui-color-icon-disabled);
-$icon-shadow-color: $buic-icon-color-reverse;
+$icon-shadow-color: hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2));
 $icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
 $no-shadow: drop-shadow(0 0 0 transparent);
 

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.scss

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 @use "sass:math";
-@import "../../target";
-@import "variables";
+@use "../../target" as *;
+@use "variables" as *;
 
 .components-toolbar-item-expandable-group-backArrow {
   $border: solid $back-arrow-thickness currentColor;

package/lib/esm/components-react/toolbar/groupPanel/Panel.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 *;
 
 .components-toolbar-item-expandable-group-panel {
   line-height: normal;

package/lib/esm/components-react/toolbar/groupPanel/Title.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 *;
 
 .components-toolbar-item-expandable-group-title {
   white-space: nowrap;

package/lib/esm/components-react/toolbar/groupPanel/_variables.scss

@@ -2,9 +2,9 @@
  * 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/typography";
-@import "../variables";
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+@forward "~@itwin/core-react/lib/core-react/typography";
+@forward "../variables";
 
 $panel-padding-left: 16px;
 $panel-padding-right: 8px;

package/lib/esm/components-react/toolbar/groupPanel/tool/Expander.scss

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 @use "sass:math";
-@import "variables";
+@use "variables" as *;
 
 .components-toolbar-item-expandable-group-tool-expander {
   > .components-expansion-indicator {

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.scss

@@ -2,9 +2,9 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@import "../../../target";
-@import "~@itwin/core-react/lib/cjs/core-react/typography";
-@import "variables";
+@use "~@itwin/core-react/lib/core-react/typography" as *;
+@use "../../../target" as *;
+@use "variables" as *;
 
 .components-toolbar-item-expandable-group-tool-item {
   $item-height: 32px;

package/lib/esm/components-react/toolbar/groupPanel/tool/_variables.scss

@@ -2,10 +2,12 @@
  * 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";
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
 
 $no-shadow: none;
-$shadow: drop-shadow(0 1px 0 $buic-foreground-body-reverse);
+$shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
 $space-after-label: 16px;
 
 $expander-arrow-thickness: 2px;

package/lib/esm/components-react/tree/controlled/component/ControlledTree.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/scrollbar";
+@use "~@itwin/core-react/lib/core-react/scrollbar" as *;
 
 .components-controlledTree-loader {
   position: relative;

package/lib/internal.d.ts

@@ -0,0 +1,8 @@
+export { useTranslation } from "./components-react/l10n/useTranslation.js";
+export { GroupTool } from "./components-react/toolbar/groupPanel/tool/Tool.js";
+export { GroupColumn } from "./components-react/toolbar/groupPanel/Column.js";
+export { Columns } from "./components-react/toolbar/groupPanel/Columns.js";
+export { Panel } from "./components-react/toolbar/groupPanel/Panel.js";
+export { Title } from "./components-react/toolbar/groupPanel/Title.js";
+export { CommonToolbarItemWithBadgeKind } from "./components-react/toolbar/InternalToolbarComponent.js";
+//# sourceMappingURL=internal.d.ts.map

package/lib/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,gDAAgD,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,gDAAgD,CAAC;AAEvE,OAAO,EAAE,8BAA8B,EAAE,MAAM,wDAAwD,CAAC"}

package/lib/internal.js

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { useTranslation } from "./components-react/l10n/useTranslation.js";
+export { GroupTool } from "./components-react/toolbar/groupPanel/tool/Tool.js";
+export { GroupColumn } from "./components-react/toolbar/groupPanel/Column.js";
+export { Columns } from "./components-react/toolbar/groupPanel/Columns.js";
+export { Panel } from "./components-react/toolbar/groupPanel/Panel.js";
+export { Title } from "./components-react/toolbar/groupPanel/Title.js";
+//# sourceMappingURL=internal.js.map

package/lib/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../src/internal.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AAE/E,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAC3E,OAAO,EAAE,KAAK,EAAE,MAAM,gDAAgD,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,gDAAgD,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 *--------------------------------------------------------------------------------------------*/\nexport { useTranslation } from \"./components-react/l10n/useTranslation.js\";\n\nexport { GroupTool } from \"./components-react/toolbar/groupPanel/tool/Tool.js\";\n\nexport { GroupColumn } from \"./components-react/toolbar/groupPanel/Column.js\";\nexport { Columns } from \"./components-react/toolbar/groupPanel/Columns.js\";\nexport { Panel } from \"./components-react/toolbar/groupPanel/Panel.js\";\nexport { Title } from \"./components-react/toolbar/groupPanel/Title.js\";\n\nexport { CommonToolbarItemWithBadgeKind } from \"./components-react/toolbar/InternalToolbarComponent.js\";\n"]}

package/package.json

@@ -1,10 +1,23 @@
 {
   "name": "@itwin/components-react",
-  "version": "4.17.6",
-  "description": "iTwin.js UI complex components",
-  "main": "lib/cjs/components-react.js",
-  "module": "lib/esm/components-react.js",
-  "typings": "lib/cjs/components-react",
+  "version": "5.0.0-dev.3",
+  "description": "A react component library of iTwin.js UI data-oriented components",
+  "type": "module",
+  "types": "./lib/components-react.d.ts",
+  "exports": {
+    ".": "./lib/components-react.js",
+    "./internal": "./lib/internal.js",
+    "./package.json": "./package.json",
+    "./lib/cjs/*": {
+      "sass": "./lib/*"
+    },
+    "./lib/esm/*": {
+      "sass": "./lib/*"
+    },
+    "./*": {
+      "sass": "./*"
+    }
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,24 +35,22 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^3.7.0 || ^4.0.0",
-    "@itwin/core-bentley": "^3.7.0 || ^4.0.0",
-    "@itwin/core-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/core-bentley": "^4.0.0",
+    "@itwin/core-react": "^5.0.0-dev.3",
+    "@itwin/itwinui-react": "^3.15.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.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-geometry": "^3.7.0 || ^4.0.0",
-    "@itwin/core-i18n": "^3.7.0 || ^4.0.0",
-    "@itwin/eslint-plugin": "^4.0.0-dev.52",
+    "@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-geometry": "^4.0.0",
+    "@itwin/core-i18n": "^4.0.0",
+    "@itwin/eslint-plugin": "^4.1.1",
+    "@itwin/itwinui-react": "^3.15.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -52,7 +63,7 @@
     "@types/react-window": "^1.8.2",
     "@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",
@@ -67,19 +78,13 @@
     "typescript": "~5.3.3",
     "upath": "^2.0.1",
     "vitest": "^1.6.0",
-    "@itwin/core-react": "4.17.6"
+    "@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-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
-    "@itwin/itwinui-react": "^3.11.2",
-    "classnames": "2.3.1",
-    "immer": "9.0.6",
+    "classnames": "2.5.1",
+    "immer": "^10.1.1",
     "linkify-it": "~2.2.0",
     "lodash": "^4.17.10",
     "react-window": "^1.8.9",
@@ -87,18 +92,18 @@
     "ts-key-enum": "~2.0.12"
   },
   "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 1>&2 --outDir lib/cjs",
-    "build:esm": "npm run -s copy:esm && tsc 1>&2 --module ES2020 --outDir lib/esm",
-    "copy:cjs": "cpx \"./src/**/*.*css\" ./lib/cjs",
-    "copy:esm": "cpx \"./src/**/*.*css\" ./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\" ./lib",
     "copy:locale": "cpx ./src/components-react/UiComponents.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=components-react",
+    "extract-api": "betools extract-api --entry=./lib/components-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/components-react",

package/lib/cjs/components-react/UiComponents.d.ts

@@ -1,32 +0,0 @@
-/** @packageDocumentation
- * @module Common
- */
-import type { Localization } from "@itwin/core-common";
-/**
- * Manages the localization service for the components-react package.
- * @public
- */
-export declare class UiComponents {
-    private static _initialized;
-    private static _localization?;
-    /**
-     * Registers the localization service namespace for UiComponents. Also initializes UiCore.
-     * @param localization The internationalization service created by the host application.
-     */
-    static initialize(localization: Localization): Promise<void>;
-    /** Unregisters the UiComponents localization namespace */
-    static terminate(): void;
-    /** Determines if UiComponents has been initialized */
-    static get initialized(): boolean;
-    /** The internationalization service namespace. */
-    static get localizationNamespace(): string;
-    /** @internal */
-    static get packageName(): string;
-    /** Calls localization.getLocalizedString with the "UiComponents" namespace. Do NOT include the namespace in the key.
-     * @internal
-     */
-    static translate(key: string | string[]): string;
-    /** @internal */
-    static loggerCategory(obj: any): string;
-}
-//# sourceMappingURL=UiComponents.d.ts.map

package/lib/cjs/components-react/UiComponents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UiComponents.d.ts","sourceRoot":"","sources":["../../../src/components-react/UiComponents.ts"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD;;;GAGG;AACH,qBAAa,YAAY;IACvB,OAAO,CAAC,MAAM,CAAC,YAAY,CAAS;IACpC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAe;IAE5C;;;OAGG;WACiB,UAAU,CAAC,YAAY,EAAE,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC;IAoBzE,0DAA0D;WAC5C,SAAS;IAYvB,sDAAsD;IACtD,WAAkB,WAAW,IAAI,OAAO,CAEvC;IAED,kDAAkD;IAClD,WAAkB,qBAAqB,IAAI,MAAM,CAEhD;IAED,gBAAgB;IAChB,WAAkB,WAAW,IAAI,MAAM,CAEtC;IAED;;OAEG;WACW,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM;IAavD,gBAAgB;WACF,cAAc,CAAC,GAAG,EAAE,GAAG,GAAG,MAAM;CAM/C"}