@itwin/imodel-components-react 4.0.0-dev.9 → 4.0.0

package/lib/esm/imodel-components-react.js

@@ -1,88 +1,87 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat
-export { UiIModelComponents } from "./imodel-components-react/UiIModelComponents";
-export * from "./imodel-components-react/color/AlphaSlider";
-export * from "./imodel-components-react/color/ColorPickerButton";
-export * from "./imodel-components-react/color/ColorPickerDialog";
-export * from "./imodel-components-react/color/ColorPickerPanel";
-export * from "./imodel-components-react/color/ColorPickerPopup";
-export * from "./imodel-components-react/color/getCSSColorFromDef";
-export * from "./imodel-components-react/color/HueSlider";
-export * from "./imodel-components-react/color/SaturationPicker";
-export * from "./imodel-components-react/color/Swatch";
-export * from "./imodel-components-react/editors/ColorEditor";
-export * from "./imodel-components-react/editors/WeightEditor";
-export * from "./imodel-components-react/inputs/QuantityInput";
-export * from "./imodel-components-react/inputs/QuantityNumberInput";
-export * from "./imodel-components-react/lineweight/Swatch";
-export * from "./imodel-components-react/lineweight/WeightPickerButton";
-export * from "./imodel-components-react/navigationaids/Cube";
-export * from "./imodel-components-react/navigationaids/CubeNavigationAid";
-export * from "./imodel-components-react/navigationaids/DrawingNavigationAid";
-export * from "./imodel-components-react/quantityformat/FormatPanel";
-export * from "./imodel-components-react/quantityformat/FormatPrecision";
-export * from "./imodel-components-react/quantityformat/FormatSample";
-export * from "./imodel-components-react/quantityformat/FormatType";
-export * from "./imodel-components-react/quantityformat/FormatUnitLabel";
-export * from "./imodel-components-react/quantityformat/FormatUnits";
-export * from "./imodel-components-react/quantityformat/MiscFormatOptions";
-export * from "./imodel-components-react/quantityformat/QuantityFormatPanel";
-export * from "./imodel-components-react/timeline/interfaces";
-export * from "./imodel-components-react/timeline/BaseTimelineDataProvider";
-export * from "./imodel-components-react/timeline/InlineEdit";
-export * from "./imodel-components-react/timeline/PlayerButton";
-export * from "./imodel-components-react/timeline/Scrubber";
-export * from "./imodel-components-react/timeline/TimelineComponent";
-export * from "./imodel-components-react/timeline/SolarTimeline";
-export * from "./imodel-components-react/timeline/BaseSolarDataProvider";
-export * from "./imodel-components-react/viewport/ViewportComponent";
-export * from "./imodel-components-react/viewport/ViewportComponentEvents";
-/** @docs-package-description
- * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.
- * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.
- * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).
- */
-/**
- * @docs-group-description Color
- * Classes and components for working with and picking a Color.
- */
-/**
- * @docs-group-description Common
- * Common classes used across various UI components.
- */
-/**
- * @docs-group-description Cube
- * Component for 3D Cube.
- */
-/**
- * @docs-group-description Inputs
- * Input Components that format and parse input for IModelApps.
- */
-/**
- * @docs-group-description LineWeight
- * Classes and components for working with and picking a Line Weight.
- */
-/**
- * @docs-group-description NavigationAids
- * Classes and components for working with Navigation Aids.
- */
-/**
- * @docs-group-description PropertyEditors
- * Classes and components for working with Property Editors.
- */
-/**
- * @docs-group-description QuantityFormat
- * Classes and components for working with a Quantity Formats.
- */
-/**
- * @docs-group-description Timeline
- * Classes and components that provide a timeline
- */
-/**
- * @docs-group-description Viewport
- * Classes and components for working with a Viewport.
- */
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat
+export { UiIModelComponents } from "./imodel-components-react/UiIModelComponents";
+export * from "./imodel-components-react/color/AlphaSlider";
+export * from "./imodel-components-react/color/ColorPickerButton";
+export * from "./imodel-components-react/color/ColorPickerDialog";
+export * from "./imodel-components-react/color/ColorPickerPopup";
+export * from "./imodel-components-react/color/getCSSColorFromDef";
+export * from "./imodel-components-react/color/HueSlider";
+export * from "./imodel-components-react/color/SaturationPicker";
+export * from "./imodel-components-react/color/Swatch";
+export * from "./imodel-components-react/editors/ColorEditor";
+export * from "./imodel-components-react/editors/WeightEditor";
+export * from "./imodel-components-react/inputs/QuantityInput";
+export * from "./imodel-components-react/inputs/QuantityNumberInput";
+export * from "./imodel-components-react/lineweight/Swatch";
+export * from "./imodel-components-react/lineweight/WeightPickerButton";
+export * from "./imodel-components-react/navigationaids/Cube";
+export * from "./imodel-components-react/navigationaids/CubeNavigationAid";
+export * from "./imodel-components-react/navigationaids/DrawingNavigationAid";
+export * from "./imodel-components-react/quantityformat/FormatPanel";
+export * from "./imodel-components-react/quantityformat/FormatPrecision";
+export * from "./imodel-components-react/quantityformat/FormatSample";
+export * from "./imodel-components-react/quantityformat/FormatType";
+export * from "./imodel-components-react/quantityformat/FormatUnitLabel";
+export * from "./imodel-components-react/quantityformat/FormatUnits";
+export * from "./imodel-components-react/quantityformat/MiscFormatOptions";
+export * from "./imodel-components-react/quantityformat/QuantityFormatPanel";
+export * from "./imodel-components-react/timeline/interfaces";
+export * from "./imodel-components-react/timeline/BaseTimelineDataProvider";
+export * from "./imodel-components-react/timeline/InlineEdit";
+export * from "./imodel-components-react/timeline/PlayerButton";
+export * from "./imodel-components-react/timeline/Scrubber";
+export * from "./imodel-components-react/timeline/TimelineComponent";
+export * from "./imodel-components-react/timeline/SolarTimeline";
+export * from "./imodel-components-react/timeline/BaseSolarDataProvider";
+export * from "./imodel-components-react/viewport/ViewportComponent";
+export * from "./imodel-components-react/viewport/ViewportComponentEvents";
+/** @docs-package-description
+ * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.
+ * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.
+ * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).
+ */
+/**
+ * @docs-group-description Color
+ * Classes and components for working with and picking a Color.
+ */
+/**
+ * @docs-group-description Common
+ * Common classes used across various UI components.
+ */
+/**
+ * @docs-group-description Cube
+ * Component for 3D Cube.
+ */
+/**
+ * @docs-group-description Inputs
+ * Input Components that format and parse input for IModelApps.
+ */
+/**
+ * @docs-group-description LineWeight
+ * Classes and components for working with and picking a Line Weight.
+ */
+/**
+ * @docs-group-description NavigationAids
+ * Classes and components for working with Navigation Aids.
+ */
+/**
+ * @docs-group-description PropertyEditors
+ * Classes and components for working with Property Editors.
+ */
+/**
+ * @docs-group-description QuantityFormat
+ * Classes and components for working with a Quantity Formats.
+ */
+/**
+ * @docs-group-description Timeline
+ * Classes and components that provide a timeline
+ */
+/**
+ * @docs-group-description Viewport
+ * Classes and components for working with a Viewport.
+ */
 //# sourceMappingURL=imodel-components-react.js.map

package/lib/esm/imodel-components-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,qEAAqE;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","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\r\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\r\n\r\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\r\n\r\nexport * from \"./imodel-components-react/color/AlphaSlider\";\r\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\r\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\r\nexport * from \"./imodel-components-react/color/ColorPickerPanel\";\r\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\r\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\r\nexport * from \"./imodel-components-react/color/HueSlider\";\r\nexport * from \"./imodel-components-react/color/SaturationPicker\";\r\nexport * from \"./imodel-components-react/color/Swatch\";\r\n\r\nexport * from \"./imodel-components-react/editors/ColorEditor\";\r\nexport * from \"./imodel-components-react/editors/WeightEditor\";\r\n\r\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\r\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\r\n\r\nexport * from \"./imodel-components-react/lineweight/Swatch\";\r\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\r\n\r\nexport * from \"./imodel-components-react/navigationaids/Cube\";\r\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\r\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\r\n\r\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\r\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\r\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\r\n\r\nexport * from \"./imodel-components-react/timeline/interfaces\";\r\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\r\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\r\nexport * from \"./imodel-components-react/timeline/PlayerButton\";\r\nexport * from \"./imodel-components-react/timeline/Scrubber\";\r\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\r\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\r\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\r\n\r\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\r\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\r\n\r\n/** @docs-package-description\r\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\r\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\r\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\r\n */\r\n/**\r\n * @docs-group-description Color\r\n * Classes and components for working with and picking a Color.\r\n */\r\n/**\r\n * @docs-group-description Common\r\n * Common classes used across various UI components.\r\n */\r\n/**\r\n * @docs-group-description Cube\r\n * Component for 3D Cube.\r\n */\r\n/**\r\n * @docs-group-description Inputs\r\n * Input Components that format and parse input for IModelApps.\r\n */\r\n/**\r\n * @docs-group-description LineWeight\r\n * Classes and components for working with and picking a Line Weight.\r\n */\r\n/**\r\n * @docs-group-description NavigationAids\r\n * Classes and components for working with Navigation Aids.\r\n */\r\n/**\r\n * @docs-group-description PropertyEditors\r\n * Classes and components for working with Property Editors.\r\n */\r\n/**\r\n * @docs-group-description QuantityFormat\r\n * Classes and components for working with a Quantity Formats.\r\n */\r\n/**\r\n * @docs-group-description Timeline\r\n * Classes and components that provide a timeline\r\n */\r\n/**\r\n * @docs-group-description Viewport\r\n * Classes and components for working with a Viewport.\r\n */\r\n"]}
+{"version":3,"file":"imodel-components-react.js","sourceRoot":"","sources":["../../src/imodel-components-react.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F,qEAAqE;AAErE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAElF,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mDAAmD,CAAC;AAClE,cAAc,mDAAmD,CAAC;AAClE,cAAc,kDAAkD,CAAC;AACjE,cAAc,oDAAoD,CAAC;AACnE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,kDAAkD,CAAC;AACjE,cAAc,wCAAwC,CAAC;AAEvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAE/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,sDAAsD,CAAC;AAErE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yDAAyD,CAAC;AAExE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,+DAA+D,CAAC;AAE9E,cAAc,sDAAsD,CAAC;AACrE,cAAc,0DAA0D,CAAC;AACzE,cAAc,uDAAuD,CAAC;AACtE,cAAc,qDAAqD,CAAC;AACpE,cAAc,0DAA0D,CAAC;AACzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,8DAA8D,CAAC;AAE7E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,6DAA6D,CAAC;AAC5E,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,sDAAsD,CAAC;AACrE,cAAc,kDAAkD,CAAC;AACjE,cAAc,0DAA0D,CAAC;AAEzE,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAE3E;;;;GAIG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG;AACH;;;GAGG","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\r\n// cSpell:ignore iconpicker lineweight hocs datepicker quantityformat\r\n\r\nexport { UiIModelComponents } from \"./imodel-components-react/UiIModelComponents\";\r\n\r\nexport * from \"./imodel-components-react/color/AlphaSlider\";\r\nexport * from \"./imodel-components-react/color/ColorPickerButton\";\r\nexport * from \"./imodel-components-react/color/ColorPickerDialog\";\r\nexport * from \"./imodel-components-react/color/ColorPickerPopup\";\r\nexport * from \"./imodel-components-react/color/getCSSColorFromDef\";\r\nexport * from \"./imodel-components-react/color/HueSlider\";\r\nexport * from \"./imodel-components-react/color/SaturationPicker\";\r\nexport * from \"./imodel-components-react/color/Swatch\";\r\n\r\nexport * from \"./imodel-components-react/editors/ColorEditor\";\r\nexport * from \"./imodel-components-react/editors/WeightEditor\";\r\n\r\nexport * from \"./imodel-components-react/inputs/QuantityInput\";\r\nexport * from \"./imodel-components-react/inputs/QuantityNumberInput\";\r\n\r\nexport * from \"./imodel-components-react/lineweight/Swatch\";\r\nexport * from \"./imodel-components-react/lineweight/WeightPickerButton\";\r\n\r\nexport * from \"./imodel-components-react/navigationaids/Cube\";\r\nexport * from \"./imodel-components-react/navigationaids/CubeNavigationAid\";\r\nexport * from \"./imodel-components-react/navigationaids/DrawingNavigationAid\";\r\n\r\nexport * from \"./imodel-components-react/quantityformat/FormatPanel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatPrecision\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatSample\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatType\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnitLabel\";\r\nexport * from \"./imodel-components-react/quantityformat/FormatUnits\";\r\nexport * from \"./imodel-components-react/quantityformat/MiscFormatOptions\";\r\nexport * from \"./imodel-components-react/quantityformat/QuantityFormatPanel\";\r\n\r\nexport * from \"./imodel-components-react/timeline/interfaces\";\r\nexport * from \"./imodel-components-react/timeline/BaseTimelineDataProvider\";\r\nexport * from \"./imodel-components-react/timeline/InlineEdit\";\r\nexport * from \"./imodel-components-react/timeline/PlayerButton\";\r\nexport * from \"./imodel-components-react/timeline/Scrubber\";\r\nexport * from \"./imodel-components-react/timeline/TimelineComponent\";\r\nexport * from \"./imodel-components-react/timeline/SolarTimeline\";\r\nexport * from \"./imodel-components-react/timeline/BaseSolarDataProvider\";\r\n\r\nexport * from \"./imodel-components-react/viewport/ViewportComponent\";\r\nexport * from \"./imodel-components-react/viewport/ViewportComponentEvents\";\r\n\r\n/** @docs-package-description\r\n * The imodel-components-react package contains React components that depend on the core-frontend, core-common or core-quantity packages.\r\n * The components pertain to Color, Cube, LineWeight, Navigation Aids, Quantity Inputs, Timeline and Viewport.\r\n * For more information, see [learning about imodel-components-react]($docs/learning/ui/imodel-components/index.md).\r\n */\r\n/**\r\n * @docs-group-description Color\r\n * Classes and components for working with and picking a Color.\r\n */\r\n/**\r\n * @docs-group-description Common\r\n * Common classes used across various UI components.\r\n */\r\n/**\r\n * @docs-group-description Cube\r\n * Component for 3D Cube.\r\n */\r\n/**\r\n * @docs-group-description Inputs\r\n * Input Components that format and parse input for IModelApps.\r\n */\r\n/**\r\n * @docs-group-description LineWeight\r\n * Classes and components for working with and picking a Line Weight.\r\n */\r\n/**\r\n * @docs-group-description NavigationAids\r\n * Classes and components for working with Navigation Aids.\r\n */\r\n/**\r\n * @docs-group-description PropertyEditors\r\n * Classes and components for working with Property Editors.\r\n */\r\n/**\r\n * @docs-group-description QuantityFormat\r\n * Classes and components for working with a Quantity Formats.\r\n */\r\n/**\r\n * @docs-group-description Timeline\r\n * Classes and components that provide a timeline\r\n */\r\n/**\r\n * @docs-group-description Viewport\r\n * Classes and components for working with a Viewport.\r\n */\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/imodel-components-react",
-  "version": "4.0.0-dev.9",
+  "version": "4.0.0",
   "description": "iTwin.js UI IModel Components",
   "main": "lib/cjs/imodel-components-react.js",
   "module": "lib/esm/imodel-components-react.js",
@@ -8,9 +8,11 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/iTwin/appui/tree/master/ui/imodel-components-react"
+    "url": "https://github.com/iTwin/appui.git",
+    "directory": "ui/imodel-components-react"
   },
   "keywords": [
+    "AppUI",
     "Bentley",
     "BIM",
     "iModel"
@@ -20,41 +22,40 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^4.0.0-dev.9",
-    "@itwin/components-react": "^4.0.0-dev.9",
-    "@itwin/core-bentley": "^3.5.1",
-    "@itwin/core-common": "^3.5.1",
-    "@itwin/core-frontend": "^3.5.1",
-    "@itwin/core-geometry": "^3.5.1",
-    "@itwin/core-quantity": "^3.5.1",
-    "@itwin/core-react": "^4.0.0-dev.9",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@itwin/appui-abstract": ">=3.7.0",
+    "@itwin/components-react": "^4.0.0",
+    "@itwin/core-bentley": ">=3.7.0",
+    "@itwin/core-common": ">=3.7.0",
+    "@itwin/core-frontend": ">=3.7.0",
+    "@itwin/core-geometry": ">=3.7.0",
+    "@itwin/core-quantity": ">=3.7.0",
+    "@itwin/core-react": "^4.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^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": "4.0.0-dev.9",
-    "@itwin/build-tools": "^3.5.1",
-    "@itwin/components-react": "4.0.0-dev.9",
-    "@itwin/core-bentley": "^3.5.1",
-    "@itwin/core-common": "^3.5.1",
-    "@itwin/core-frontend": "^3.5.1",
-    "@itwin/core-geometry": "^3.5.1",
-    "@itwin/core-orbitgt": "^3.5.1",
-    "@itwin/core-quantity": "^3.5.1",
-    "@itwin/core-react": "4.0.0-dev.9",
-    "@itwin/eslint-plugin": "^3.5.1",
-    "@itwin/webgl-compatibility": "^3.5.1",
+    "@itwin/appui-abstract": "^3.7.0",
+    "@itwin/build-tools": "^3.7.0",
+    "@itwin/components-react": "4.0.0",
+    "@itwin/core-bentley": "^3.7.0",
+    "@itwin/core-common": "^3.7.0",
+    "@itwin/core-frontend": "^3.7.0",
+    "@itwin/core-geometry": "^3.7.0",
+    "@itwin/core-orbitgt": "^3.7.0",
+    "@itwin/core-quantity": "^3.7.0",
+    "@itwin/core-react": "4.0.0",
+    "@itwin/eslint-plugin": "^3.7.0",
+    "@itwin/webgl-compatibility": "^3.7.0",
     "@testing-library/dom": "^8.11.2",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^14.4.2",
     "@types/chai": "4.3.1",
     "@types/chai-as-promised": "^7",
-    "@types/chai-spies": "^1.0.0",
     "@types/chai-string": "^1.4.1",
     "@types/faker": "^4.1.0",
     "@types/mocha": "^8.2.2",
@@ -65,7 +66,6 @@
     "@types/sinon-chai": "^3.2.0",
     "chai": "^4.1.2",
     "chai-as-promised": "^7",
-    "chai-spies": "1.0.0",
     "chai-string": "^1.5.0",
     "cpx2": "^3.0.0",
     "eslint": "^7.11.0",
@@ -84,20 +84,18 @@
     "sinon-chai": "^3.2.0",
     "ts-node": "^10.8.2",
     "typemoq": "^2.1.0",
-    "typescript": "~4.4.0",
-    "xmlhttprequest": "^1.8.0"
+    "typescript": "~5.0.2"
   },
   "//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-webfont": "^1.0.15",
-    "@itwin/itwinui-css": "0.x",
-    "@itwin/itwinui-variables": "^1.0.0",
-    "@itwin/itwinui-react": "~1.42.0",
-    "classnames": "2.3.1",
-    "immer": "9.0.6"
+    "@bentley/icons-generic": "^1.0.34",
+    "@itwin/itwinui-react": "^2.5.0",
+    "@itwin/itwinui-variables": "^2.0.0",
+    "@itwin/itwinui-icons-react": "^2.1.0",
+    "classnames": "2.3.1"
   },
   "nyc": {
     "extends": "./node_modules/@itwin/build-tools/.nycrc",
@@ -137,8 +135,8 @@
     "test": "mocha --config ../.mocharc.json \"./lib/cjs/test/**/*.test.js\"",
     "test:watch": "npm -s test -- --reporter min --watch-extensions ts,tsx --watch",
     "docs": "npm run -s docs:reference && npm run -s docs:changelog",
-    "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/ui/imodel-components-react",
-    "docs:reference": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/ui/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson"
+    "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/reference/imodel-components-react",
+    "docs:reference": "betools docs --includes=../../generated-docs/extract --json=../../generated-docs/reference/imodel-components-react/file.json --tsIndexFile=./imodel-components-react.ts --onlyJson"
   },
-  "readme": "# @itwin/imodel-components-react\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.\r\n\r\n## Description\r\n\r\nThe __@itwin/imodel-components-react__ package contains React components that depend on the imodeljs-frontend, imodeljs-common or imodeljs-quantity packages.\r\n\r\n## Documentation\r\n\r\nSee the [iTwin.js](https://www.itwinjs.org) documentation for more information.\r\n"
+  "readme": "# @itwin/imodel-components-react\r\n\r\nCopyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.\r\n\r\n## Description\r\n\r\nThe __@itwin/imodel-components-react__ package contains React components that depend on the @itwin/core-frontend, @itwin/core-common or @itwin/core-quantity packages.\r\n\r\n## Documentation\r\n\r\nSee the [iTwin.js](https://www.itwinjs.org/learning/ui/imodel-components/) documentation for more information.\r\n"
 }

package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts

@@ -1,22 +0,0 @@
-/** @packageDocumentation
- * @module Color
- */
-/// <reference types="react" />
-import { ColorDef } from "@itwin/core-common";
-import "./ColorPickerPanel.scss";
-/** Properties for the [[ColorPickerPanel]] React component
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export interface ColorPickerPanelProps {
-    activeColor: ColorDef;
-    onColorChange: (selectedColor: ColorDef) => void;
-    colorPresets?: ColorDef[];
-    /** If set show either HSL or RGB input values. If undefined no input value is shown */
-    colorInputType?: "HSL" | "RGB";
-}
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
-//# sourceMappingURL=ColorPickerPanel.d.ts.map

package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}

package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js

@@ -1,146 +0,0 @@
-"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 Color
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPanel = void 0;
-// cSpell:ignore colorpicker
-const React = __importStar(require("react"));
-const core_common_1 = require("@itwin/core-common");
-const Swatch_1 = require("./Swatch");
-const HueSlider_1 = require("./HueSlider");
-const SaturationPicker_1 = require("./SaturationPicker");
-require("./ColorPickerPanel.scss");
-const core_react_1 = require("@itwin/core-react");
-/**
- * Color Picker Dialog to use as modal dialog.
- * @public @deprecated use `ColorPicker` for itwinui-react
- */
-// istanbul ignore next
-function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
-    const handlePresetColorPick = React.useCallback((newColor, e) => {
-        e.preventDefault();
-        if (onColorChange) {
-            onColorChange(newColor);
-        }
-    }, [onColorChange]);
-    const handleHueChange = React.useCallback((newHsvColor) => {
-        // for a ColorDef to be created from hsv s can't be 0
-        if (newHsvColor.s === 0) {
-            newHsvColor = newHsvColor.clone(undefined, 0.5);
-        }
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const handleSaturationChange = React.useCallback((newHsvColor) => {
-        const newColorDef = newHsvColor.toColorDef();
-        if (onColorChange) {
-            onColorChange(newColorDef);
-        }
-    }, [onColorChange]);
-    const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);
-    const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);
-    const color = React.useMemo(() => activeColor.colors, [activeColor]);
-    const handleLightnessValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, undefined, (value !== null && value !== void 0 ? value : 0) / 100);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleHueValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone((value !== null && value !== void 0 ? value : 0) / 360, undefined, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleSaturationValueChange = React.useCallback((value, _stringValue) => {
-        const newHsl = currentHsl.clone(undefined, (value !== null && value !== void 0 ? value : 0) / 100, undefined);
-        if (onColorChange) {
-            const newColorDef = newHsl.toColorDef();
-            onColorChange(newColorDef);
-        }
-    }, [currentHsl, onColorChange]);
-    const handleRedChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(value, color.g, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleGreenChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, value, color.b);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    const handleBlueChange = React.useCallback((value, _stringValue) => {
-        if (undefined !== value) {
-            const newColorDef = core_common_1.ColorDef.from(color.r, color.g, value);
-            if (onColorChange) {
-                onColorChange(newColorDef);
-            }
-        }
-    }, [color, onColorChange]);
-    return (React.createElement("div", { "data-testid": "components-colorpicker-panel", className: "components-colorpicker-panel" },
-        React.createElement("div", { className: "components-colorpicker-panel-color" },
-            React.createElement("div", { className: "components-colorpicker-saturation" },
-                React.createElement(SaturationPicker_1.SaturationPicker, { hsv: currentHsv, onSaturationChange: handleSaturationChange })),
-            React.createElement("div", { className: "components-colorpicker-hue" },
-                React.createElement(HueSlider_1.HueSlider, { hsv: currentHsv, onHueChange: handleHueChange, isHorizontal: false }))),
-        (colorInputType === "RGB") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "R"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-red", value: color.r, onChange: handleRedChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "G"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-green", value: color.g, onChange: handleGreenChange, min: 0, max: 255 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "B"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-blue", value: color.b, onChange: handleBlueChange, min: 0, max: 255 }))),
-        (colorInputType === "HSL") &&
-            React.createElement("div", { "data-testid": "components-colorpicker-input-panel", className: "components-colorpicker-input-panel" },
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "H"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-hue", value: Math.round(currentHsl.h * 360), onChange: handleHueValueChange, min: 0, max: 360 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "S"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-saturation", value: Math.round(currentHsl.s * 100), onChange: handleSaturationValueChange, min: 0, max: 100 })),
-                React.createElement("div", { className: "components-colorpicker-input-value-wrapper" },
-                    React.createElement("span", { className: "uicore-inputs-labeled-input" }, "L"),
-                    React.createElement(core_react_1.NumberInput, { "data-testid": "components-colorpicker-input-value-lightness", value: Math.round(currentHsl.l * 100), onChange: handleLightnessValueChange, min: 0, max: 100 }))),
-        colorPresets && colorPresets.length &&
-            React.createElement("div", { className: "components-colorpicker-panel-presets" }, colorPresets.map((preset, index) => React.createElement(Swatch_1.ColorSwatch, { className: "components-colorpicker-panel-swatch", key: index, colorDef: preset, round: false, onColorPick: handlePresetColorPick })))));
-}
-exports.ColorPickerPanel = ColorPickerPanel;
-//# sourceMappingURL=ColorPickerPanel.js.map

package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","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 Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n  activeColor: ColorDef;\r\n  onColorChange: (selectedColor: ColorDef) => void;\r\n  colorPresets?: ColorDef[];\r\n  /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n  colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n  const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n    e.preventDefault();\r\n    if (onColorChange) {\r\n      onColorChange(newColor);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    // for a ColorDef to be created from hsv s can't be 0\r\n    if (newHsvColor.s === 0) {\r\n      newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n    }\r\n\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n    const newColorDef = newHsvColor.toColorDef();\r\n    if (onColorChange) {\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [onColorChange]);\r\n\r\n  const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n  const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n  const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n  const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n    if (onColorChange) {\r\n      const newColorDef = newHsl.toColorDef();\r\n      onColorChange(newColorDef);\r\n    }\r\n  }, [currentHsl, onColorChange]);\r\n\r\n  const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(value, color.g, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, value, color.b);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n    if (undefined !== value) {\r\n      const newColorDef = ColorDef.from(color.r, color.g, value);\r\n      if (onColorChange) {\r\n        onColorChange(newColorDef);\r\n      }\r\n    }\r\n  }, [color, onColorChange]);\r\n\r\n  return (\r\n    <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n      <div className=\"components-colorpicker-panel-color\">\r\n        <div className=\"components-colorpicker-saturation\">\r\n          <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n        </div>\r\n        <div className=\"components-colorpicker-hue\">\r\n          <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n        </div>\r\n      </div>\r\n      {(colorInputType === \"RGB\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">R</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">G</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">B</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n          </div>\r\n        </div>}\r\n      {(colorInputType === \"HSL\") &&\r\n        <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">H</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">S</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n          </div>\r\n          <div className=\"components-colorpicker-input-value-wrapper\">\r\n            <span className=\"uicore-inputs-labeled-input\">L</span>\r\n            <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n          </div>\r\n        </div>}\r\n\r\n      {\r\n        colorPresets && colorPresets.length &&\r\n        <div className=\"components-colorpicker-panel-presets\">\r\n          {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n        </div>\r\n      }\r\n    </div>\r\n  );\r\n}\r\n"]}