@widergy/energy-ui 3.77.0 → 3.78.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.78.0](https://github.com/widergy/energy-ui/compare/v3.77.0...v3.78.0) (2025-05-14)
+
+
+### Features
+
+* [CX-651] document wizard visual fixes ([#615](https://github.com/widergy/energy-ui/issues/615)) ([5fed4ed](https://github.com/widergy/energy-ui/commit/5fed4ed3ac2daf05eab8ae602af7c60b1a452bd9))
+
 # [3.77.0](https://github.com/widergy/energy-ui/compare/v3.76.0...v3.77.0) (2025-05-14)
 
 

package/dist/components/UTDocumentWizard/README.md

@@ -4,11 +4,14 @@ A component that provides an interactive document viewer with navigable sections
 
 ## Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| pages | array | [] | Array of page objects that define the document pages to be displayed. |
-| sections | array | [] | Array of section objects that define the interactive areas within each page. |
-| labels | object | {} | Object containing text labels for UI elements. |
+
+| Name        | Type                                                                                                                                           | Default | Description                                                                                                                                                                                                                                                |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| classNames  | objectOf(string)                                                                                                                               |         | Additional class names to apply for further styling.                                                                                                                                                                                                       |
+| pages       | array                                                                                                                                          | []      | Array of page objects that define the document pages to be displayed.                                                                                                                                                                                      |
+| scaleConfig | shapeOf({<br />extraSpacingLeft: number, extraSpacingRight: number, extraSpacingTop: number, extraSpacingBottom: number,<br /> scale: number}) | {}      | Object defining rendering scale and padding parameters: includes a numeric `scale` factor and optional `extraSpacingLeft`, `extraSpacingRight`, `extraSpacingTop` and `extraSpacingBottom` values to adjust the zoom level and margins around the content. |
+| sections    | array                                                                                                                                          | []      | Array of section objects that define the interactive areas within each page.                                                                                                                                                                               |
+| labels      | object                                                                                                                                         | {}      | Object containing text labels for UI elements.                                                                                                                                                                                                             |
 
 ### pages
 
@@ -91,13 +94,7 @@ const translations = {
   }
 };
 
-const MyComponent = () => (
-  <UTDocumentWizard
-    pages={pages}
-    sections={sections}
-    labels={labels}
-  />
-);
+const MyComponent = () => <UTDocumentWizard pages={pages} sections={sections} labels={labels} />;
 ```
 
 ## Features
@@ -106,4 +103,4 @@ const MyComponent = () => (
 - Mobile-responsive design
 - Clickable sections with detailed information panels
 - Support for multiple pages
-- Customizable text labels
+- Customizable text labels

package/dist/components/UTDocumentWizard/components/PageWizard/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_SPACING_TOP = exports.DEFAULT_SPACING_RIGHT = exports.DEFAULT_SPACING_LEFT = exports.DEFAULT_SPACING_BOTTOM = exports.DEFAULT_SCALE = void 0;
+const DEFAULT_SCALE = exports.DEFAULT_SCALE = 1;
+const DEFAULT_SPACING_BOTTOM = exports.DEFAULT_SPACING_BOTTOM = 0;
+const DEFAULT_SPACING_LEFT = exports.DEFAULT_SPACING_LEFT = 0;
+const DEFAULT_SPACING_RIGHT = exports.DEFAULT_SPACING_RIGHT = 36;
+const DEFAULT_SPACING_TOP = exports.DEFAULT_SPACING_TOP = 48;

package/dist/components/UTDocumentWizard/components/PageWizard/index.js

@@ -7,18 +7,27 @@ exports.default = void 0;
 var _propTypes = require("prop-types");
 var _react = _interopRequireWildcard(require("react"));
 var _utils = require("./utils");
+var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const PageWizard = _ref => {
   let {
     canvasRef,
+    classNames,
     clickedSection,
     isChangingTab,
     isMobileSize,
     isSheetOpen,
     onSectionChange,
     page,
+    scaleConfig = {
+      extraSpacingLeft: _constants.DEFAULT_SPACING_LEFT,
+      extraSpacingRight: _constants.DEFAULT_SPACING_RIGHT,
+      extraSpacingTop: _constants.DEFAULT_SPACING_TOP,
+      extraSpacingBottom: _constants.DEFAULT_SPACING_BOTTOM,
+      scale: _constants.DEFAULT_SCALE
+    },
     sectionSelected,
     sections
   } = _ref;
@@ -26,6 +35,13 @@ const PageWizard = _ref => {
   const sectionsCoord = {};
   const animations = (0, _react.useRef)({});
   const isPointer = false;
+  const {
+    extraSpacingLeft,
+    extraSpacingRight,
+    extraSpacingTop,
+    extraSpacingBottom,
+    scale
+  } = scaleConfig;
   const onClick = e => (0, _utils.handleCanvasClick)(e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord);
   const onMouseMove = e => (0, _utils.handleMouseMove)(e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer);
   (0, _react.useEffect)(() => {
@@ -35,14 +51,20 @@ const PageWizard = _ref => {
     const image = new Image();
     image.src = page.image;
     image.onload = () => {
-      const scale = window.devicePixelRatio || 1;
-      canvas.width = image.width * scale;
-      canvas.height = image.height * scale;
-      canvas.style.width = "".concat(image.width, "px");
-      canvas.style.height = "".concat(image.height, "px");
-      ctx.scale(scale, scale);
-      ctx.drawImage(image, 0, 0, image.width, image.height);
-      sections.map(section => (0, _utils.drawSection)(ctx, image, section, page, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize));
+      const dpi = window.devicePixelRatio || 1;
+      const userScale = scale;
+      const padLeft = extraSpacingLeft;
+      const padRight = extraSpacingRight;
+      const padTop = extraSpacingTop;
+      const padBottom = extraSpacingBottom;
+      canvas.width = (image.width + padLeft + padRight) * dpi;
+      canvas.height = (image.height + padTop + padBottom) * dpi;
+      canvas.style.width = "".concat((image.width + padLeft + padRight) * userScale, "px");
+      canvas.style.height = "".concat((image.height + padTop + padBottom) * userScale, "px");
+      ctx.setTransform(dpi, 0, 0, dpi, padLeft, padTop);
+      ctx.clearRect(-padLeft, -padTop, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0);
+      sections.forEach(section => (0, _utils.drawSection)(ctx, image, section, page, clickedSection, sectionsCoord, sectionsBadgeCoord, sectionSelected, animations, isSheetOpen, isMobileSize));
     };
   }, [page.image, sections, clickedSection, animations.current, isPointer, isSheetOpen]);
   (0, _react.useEffect)(() => {
@@ -51,18 +73,20 @@ const PageWizard = _ref => {
   return /*#__PURE__*/_react.default.createElement("canvas", {
     ref: canvasRef,
     tabIndex: "0",
-    className: "".concat(_stylesModule.default.container, " ").concat(isChangingTab ? _stylesModule.default.displayNone : _stylesModule.default.displayFlex),
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames === null || classNames === void 0 ? void 0 : classNames.canvasContainer, " ").concat(isChangingTab ? _stylesModule.default.displayNone : _stylesModule.default.displayFlex),
     onClick: onClick,
     onMouseMove: onMouseMove
   });
 };
 PageWizard.propTypes = {
   canvasRef: _propTypes.object,
+  classNames: _propTypes.object,
   clickedSection: _propTypes.string,
   isChangingTab: _propTypes.bool,
   isMobileSize: _propTypes.bool,
   isSheetOpen: _propTypes.bool,
   page: _propTypes.object,
+  scaleConfig: _propTypes.object,
   sectionSelected: _propTypes.object,
   sections: (0, _propTypes.arrayOf)({}),
   onSectionChange: _propTypes.func

package/dist/components/UTDocumentWizard/components/PageWizard/styles.module.scss

@@ -1,5 +1,12 @@
+@use '../../../../scss/variables/mediaQueries.module.scss' as *;
+
 .container {
+  margin-left: 36px;
   width: 100%;
+
+  @media #{$mobile} {
+    margin: 0;
+  }
 }
 
 .displayNone {

package/dist/components/UTDocumentWizard/components/PageWizard/utils.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleMouseMove = exports.handleCanvasClick = exports.drawSection = void 0;
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _colorUtils = require("../../../../utils/colorUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const drawRoundedStrokeRect = (ctx, x, y, width, height, radius) => {
-  ctx.fillStyle = 'rgba(37, 224, 166, 0.1)';
+  ctx.save();
+  ctx.globalAlpha = 0.1;
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.beginPath();
   ctx.moveTo(x + radius, y);
   ctx.lineTo(x + width - radius, y);
@@ -20,12 +23,13 @@ const drawRoundedStrokeRect = (ctx, x, y, width, height, radius) => {
   ctx.arcTo(x, y, x + radius, y, radius);
   ctx.closePath();
   ctx.fill();
-  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.restore();
+  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.lineWidth = 1;
   ctx.stroke();
 };
 const resizeText = (ctx, text, maxWidth) => {
-  let fontSize = 24;
+  let fontSize = 14;
   ctx.font = "600 ".concat(fontSize, "px Inter");
   while (ctx.measureText(text).width > maxWidth && fontSize > 10) {
     fontSize -= 1;
@@ -36,39 +40,40 @@ const resizeText = (ctx, text, maxWidth) => {
 const drawBadge = (ctx, x, y, radius, sectionLabel) => {
   ctx.beginPath();
   ctx.arc(x, y, radius, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
   ctx.fill();
   ctx.lineWidth = 1;
-  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.stroke();
   ctx.beginPath();
-  ctx.arc(x, y, 24, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(37, 224, 166, 1)';
+  ctx.arc(x, y, 14, 0, Math.PI * 2);
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.fill();
   ctx.stroke();
-  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--dark05', 'rgba(9, 30, 66, 1)');
   const fontSize = resizeText(ctx, "".concat(sectionLabel), 48);
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   ctx.fillText("".concat(sectionLabel), x, y + fontSize / 10);
 };
-const drawRoundedRect = (ctx, x, y, width, height, radius) => {
+const drawRoundedRect = (ctx, x, yProps, width, height, radius) => {
   const PADDING_TITLE = 12;
+  const y = yProps + 18;
   ctx.beginPath();
   ctx.arc(x - radius + PADDING_TITLE, y + radius, radius, Math.PI, 3 * Math.PI / 2);
-  ctx.arc(x + width - radius + PADDING_TITLE, y + radius, radius, -Math.PI / 2, 0);
+  ctx.arc(x + width - radius + PADDING_TITLE + 2, y + radius, radius, -Math.PI / 2, 0);
   ctx.arc(x + width - radius + PADDING_TITLE, y + height - radius, radius, 0, Math.PI / 2);
   ctx.arc(x - radius + PADDING_TITLE, y + height - radius, radius, Math.PI / 2, Math.PI);
   ctx.closePath();
   ctx.fillStyle = 'rgb(255, 255, 255)';
   ctx.fill();
   ctx.lineWidth = 1;
-  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.beginPath();
-  ctx.moveTo(x - radius, y);
+  ctx.moveTo(x - radius + 4, y);
   ctx.lineTo(x + PADDING_TITLE + width, y);
-  ctx.moveTo(x - radius, y + height);
-  ctx.lineTo(x + width - radius + PADDING_TITLE * 2, y + height);
+  ctx.moveTo(x - radius + 4, y + height);
+  ctx.lineTo(x + width - radius + PADDING_TITLE * 2 - 4, y + height);
   ctx.stroke();
 };
 const drawBadgeSelected = (ctx, x, y, radius, sectionLabel, sectionTitle) => {
@@ -76,34 +81,34 @@ const drawBadgeSelected = (ctx, x, y, radius, sectionLabel, sectionTitle) => {
   const renderTitle = "".concat(sectionTitle);
   const textMetrics = ctx.measureText(renderTitle);
   const textWidth = textMetrics.width;
-  const INTERNAL_CIRCLE_SIZE = 24;
+  const INTERNAL_CIRCLE_SIZE = 14;
   const PADDING_TITLE = 12;
   const newX = x - (PADDING_TITLE + textWidth / 2);
   ctx.beginPath();
   ctx.arc(newX + PADDING_TITLE, y, radius, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
   ctx.fill();
   ctx.lineWidth = 1;
-  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.stroke();
   ctx.beginPath();
   ctx.arc(newX + textWidth + PADDING_TITLE * 2, y, radius, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--light01', 'rgba(255, 255, 255, 1)');
   ctx.fill();
   ctx.lineWidth = 1;
-  ctx.strokeStyle = 'rgba(37, 224, 166, 1)';
+  ctx.strokeStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.stroke();
   drawRoundedRect(ctx, newX + PADDING_TITLE, y - 40, textWidth, radius * 2, Math.PI * 2);
   ctx.textAlign = 'right';
   ctx.textBaseline = 'middle';
-  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
-  ctx.fillText(renderTitle, newX + textWidth + INTERNAL_CIRCLE_SIZE + PADDING_TITLE * 2, y + fontSize / 10);
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--dark05', 'rgba(9, 30, 66, 1)');
+  ctx.fillText(renderTitle, newX + textWidth + INTERNAL_CIRCLE_SIZE + PADDING_TITLE * 2 - 4, y + fontSize / 10);
   ctx.beginPath();
   ctx.arc(newX + PADDING_TITLE, y, INTERNAL_CIRCLE_SIZE, 0, Math.PI * 2);
-  ctx.fillStyle = 'rgba(37, 224, 166, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--identitySolidTone3', 'rgba(37, 224, 166, 1)');
   ctx.fill();
   ctx.stroke();
-  ctx.fillStyle = 'rgba(9, 30, 66, 1)';
+  ctx.fillStyle = (0, _colorUtils.getColorValue)('--dark05', 'rgba(9, 30, 66, 1)');
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   ctx.fillText("".concat(sectionLabel), newX + PADDING_TITLE, y + fontSize / 10);
@@ -164,7 +169,7 @@ const drawSection = (ctx, image, section, actualPage, clickedSection, sectionsCo
       height,
       radius: 8
     };
-    const EXTERNAL_RADIUS = 40;
+    const EXTERNAL_RADIUS = 22;
     const xCircle = (x2 + x1) / 2;
     const yCircle = isClickedSection ? y1 : (y2 + y1) / 2;
     sectionsBadgeCoord[section.id] = {
@@ -197,9 +202,14 @@ const drawSection = (ctx, image, section, actualPage, clickedSection, sectionsCo
 exports.drawSection = drawSection;
 const handleCanvasClick = (e, canvasRef, onSectionChange, sectionsBadgeCoord, sectionsCoord) => {
   const canvas = canvasRef.current;
+  const ctx = canvas.getContext('2d');
   const rect = canvas.getBoundingClientRect();
-  const xClick = e.clientX - rect.left;
-  const yClick = e.clientY - rect.top;
+  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
+  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
+  const inv = ctx.getTransform().invertSelf();
+  const point = new DOMPoint(px, py).matrixTransform(inv);
+  const xClick = point.x;
+  const yClick = point.y;
   const onClick = key => {
     onSectionChange(key);
   };
@@ -234,9 +244,14 @@ const handleCanvasClick = (e, canvasRef, onSectionChange, sectionsBadgeCoord, se
 exports.handleCanvasClick = handleCanvasClick;
 const handleMouseMove = (e, canvasRef, sectionsBadgeCoord, sectionsCoord, isPointer) => {
   const canvas = canvasRef.current;
+  const ctx = canvas.getContext('2d');
   const rect = canvas.getBoundingClientRect();
-  const xMove = e.clientX - rect.left;
-  const yMove = e.clientY - rect.top;
+  const px = (e.clientX - rect.left) * (canvas.width / rect.width);
+  const py = (e.clientY - rect.top) * (canvas.height / rect.height);
+  const inv = ctx.getTransform().invertSelf();
+  const point = new DOMPoint(px, py).matrixTransform(inv);
+  const xMove = point.x;
+  const yMove = point.y;
   Object.keys(sectionsBadgeCoord).forEach(key => {
     const {
       x,

package/dist/components/UTDocumentWizard/components/SectionDetails/index.js

@@ -29,6 +29,7 @@ const SectionDetails = _ref => {
     className: _stylesModule.default.titleDefault,
     variant: "title3"
   }, titleDefault), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
     variant: "body",
     className: _stylesModule.default.details
   }, descriptionDefault));

package/dist/components/UTDocumentWizard/components/SectionDetails/styles.module.scss

@@ -25,10 +25,6 @@
 }
 
 .details {
-  color: #677489;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 22px;
   text-align: center;
 }
 

package/dist/components/UTDocumentWizard/components/Sheet/index.js

@@ -27,8 +27,7 @@ const Sheet = _ref => {
     className: _stylesModule.default.title,
     variant: "title3"
   }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    colorTheme: "secondary",
-    className: _stylesModule.default.description,
+    colorTheme: "gray",
     variant: "body"
   }, description));
 };

package/dist/components/UTDocumentWizard/components/Sheet/styles.module.scss

@@ -7,10 +7,6 @@
   padding-bottom: 8px;
 }
 
-.description {
-  color: #677489;
-}
-
 .swipeContainer {
   align-items: center;
   display: flex;
@@ -19,7 +15,7 @@
 }
 
 .swipe {
-  background-color: #F4F5F7;
+  background-color: var(--light03, #F4F5F7);
   border-radius: 100px;
   height: 8px;
   margin-bottom: 16px;

package/dist/components/UTDocumentWizard/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
 var _UTTabs = _interopRequireDefault(require("../UTTabs"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _Loading = _interopRequireDefault(require("../Loading"));
@@ -25,9 +24,11 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const UTDocumentWizard = _ref => {
   var _tabsOptions$;
   let {
-    sections = [],
+    classNames,
+    labels,
     pages = [],
-    labels
+    scaleConfig,
+    sections = []
   } = _ref;
   const canvasRef = (0, _react.useRef)(null);
   const tabsOptions = (0, _utils.getTabsOptions)(pages);
@@ -110,12 +111,12 @@ const UTDocumentWizard = _ref => {
     sectionDetails
   } = labels;
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames === null || classNames === void 0 ? void 0 : classNames.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.pageWizardContainer,
     ref: containerRef
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.pageManagerSection
+    className: "".concat(_stylesModule.default.pageManagerSection, " ").concat(classNames === null || classNames === void 0 ? void 0 : classNames.pageManagerSection)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.slidePageManagerContainer
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
@@ -138,7 +139,7 @@ const UTDocumentWizard = _ref => {
       indicator: _stylesModule.default.indicator
     },
     lastOptionProps: _constants.LAST_OPTION_PROPS
-  }))), /*#__PURE__*/_react.default.createElement(_reactPerfectScrollbar.default, {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.scrollContainer
   }, isChangingTab && /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.loadingContainer
@@ -146,16 +147,18 @@ const UTDocumentWizard = _ref => {
     size: _constants.LOADING_SIZE,
     thickness: _constants.LOADING_THICKNESS
   })), !isChangingTab && actualPage && /*#__PURE__*/_react.default.createElement(_PageWizard.default, {
-    clickedSection: clickedSection,
     canvasRef: canvasRef,
+    classNames: classNames,
+    clickedSection: clickedSection,
     containerRef: containerRef,
-    sectionSelected: sectionSelected,
-    sections: sections,
-    onSectionChange: onSectionChange,
-    page: actualPage,
     isChangingTab: isChangingTab,
+    isMobileSize: isMobileSize,
     isSheetOpen: sheetOpen,
-    isMobileSize: isMobileSize
+    onSectionChange: onSectionChange,
+    page: actualPage,
+    scaleConfig: scaleConfig,
+    sections: sections,
+    sectionSelected: sectionSelected
   }))), /*#__PURE__*/_react.default.createElement(_SectionDetails.default, _extends({
     sectionSelected: sectionSelected
   }, sectionDetails))), /*#__PURE__*/_react.default.createElement(_UTSheet.default, {
@@ -166,8 +169,10 @@ const UTDocumentWizard = _ref => {
   }, SheetChildren));
 };
 UTDocumentWizard.propTypes = {
+  classNames: _propTypes.object,
+  labels: _propTypes.object,
   pages: (0, _propTypes.arrayOf)({}),
-  sections: (0, _propTypes.arrayOf)({}),
-  labels: _propTypes.object
+  scaleConfig: _propTypes.object,
+  sections: (0, _propTypes.arrayOf)({})
 };
 var _default = exports.default = UTDocumentWizard;

package/dist/components/UTDocumentWizard/styles.module.scss

@@ -11,6 +11,7 @@ $assigned-to-icon-size: 24px;
 
   @media #{$mobile} {
     flex-direction: column;
+    padding: 24px 16px;
   }
 }
 
@@ -21,7 +22,7 @@ $assigned-to-icon-size: 24px;
 
 .tabRoot {
   background-color: transparent;
-  color: rgba(103, 116, 137, 1);
+  color: var(--gray04, rgba(103, 116, 137, 1));
   height: 46px;
   margin-left: 4px;
   margin-right: 8px;
@@ -40,10 +41,10 @@ $assigned-to-icon-size: 24px;
 }
 
 .selected {
-  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--light01, rgba(255, 255, 255, 1));
   border-radius: 4px;
-  box-shadow: 0px 3px 6px 0px rgba(40, 90, 255, 0.1);
-  color: rgba(1, 54, 231, 1);
+  box-shadow: var(--shadow, 0px 3px 6px 0px rgba(40, 90, 255, 0.1));
+  color: var(--actionAccent05, rgba(1, 54, 231, 1));
   width: 100%;
 }
 
@@ -51,7 +52,7 @@ $assigned-to-icon-size: 24px;
   display: none;
 }
 
-.pageWizardContainer{
+.pageWizardContainer {
   align-items: flex-start;
   display: flex;
   flex: 1;
@@ -65,12 +66,10 @@ $assigned-to-icon-size: 24px;
 }
 
 .pageManagerSection {
-  margin-bottom: 24px;
-    width: 100%;
+  width: 100%;
 }
 
 .pageManagerContainer {
-  padding-top: 8px;
   width: 100%;
   @media #{$mobile} {
     display: none;
@@ -84,21 +83,10 @@ $assigned-to-icon-size: 24px;
     flex: 1;
     flex-direction: row;
     justify-content: space-between;
-    margin-right: 12px;
     padding: 6.5px 0px 6.5px 0px;
   }
 }
 
-.icon {
-  background-color: rgba(233, 239, 255, 1);
-  border-radius: 4px;
-  border-width: 0;
-}
-
-.iconDisabled {
-  background-color: rgba(233, 239, 255, 0.5)
-}
-
 .loadingContainer {
   align-items: center;
   display: flex;
@@ -109,7 +97,9 @@ $assigned-to-icon-size: 24px;
 
 .scrollContainer {
   display: flex;
-  justify-content: center;
+  height: fit-content;
+  justify-content: space-around;
   white-space: nowrap;
   width: 100%;
-}
+  overflow-x: auto;
+}

package/dist/utils/colorUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColorValue = void 0;
+const getColorValue = function (varName) {
+  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  if (typeof window === 'undefined' || typeof document === 'undefined') return fallback;
+  try {
+    var _window$getComputedSt, _window, _window$getComputedSt2;
+    const root = document.documentElement;
+    const cssValue = (_window$getComputedSt = (_window = window).getComputedStyle) === null || _window$getComputedSt === void 0 || (_window$getComputedSt = _window$getComputedSt.call(_window, root)) === null || _window$getComputedSt === void 0 || (_window$getComputedSt2 = _window$getComputedSt.getPropertyValue) === null || _window$getComputedSt2 === void 0 || (_window$getComputedSt2 = _window$getComputedSt2.call(_window$getComputedSt, varName)) === null || _window$getComputedSt2 === void 0 ? void 0 : _window$getComputedSt2.trim();
+    return cssValue || fallback;
+  } catch {
+    return fallback;
+  }
+};
+exports.getColorValue = getColorValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.77.0",
+  "version": "3.78.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",