@widergy/energy-ui 3.76.0 → 3.78.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [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)
+
+
+### Features
+
+* [AUT-597] new testid structure object ([#618](https://github.com/widergy/energy-ui/issues/618)) ([adb5090](https://github.com/widergy/energy-ui/commit/adb509016b0bc7b009813f397199e7592b0630d4))
+
 # [3.76.0](https://github.com/widergy/energy-ui/compare/v3.75.0...v3.76.0) (2025-05-09)
 
 

package/dist/components/UTAlert/index.js

@@ -25,9 +25,8 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const {
-  closeButtonId,
-  labelId
-} = _testIds.COMPONENT_IDS.snackBarIds;
+  snackBar
+} = _testIds.TEST_IDS;
 const variantIcon = {
   error: _Error.default,
   info: _Info.default,
@@ -67,9 +66,9 @@ class UTAlert extends _react.PureComponent {
   render() {
     const {
       classes = {},
-      closeDataTestId = closeButtonId,
+      closeDataTestId = snackBar.closeButton,
       content: alert = {},
-      labelDataTestId = labelId,
+      labelDataTestId = snackBar.label,
       withoutIcon
     } = this.props;
     const anchor = {

package/dist/components/UTBarChart/components/Bars/components/Bar/index.js

@@ -14,8 +14,8 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
-  barTooltipId
-} = _testIds.COMPONENT_IDS.barChartIds;
+  barChart
+} = _testIds.TEST_IDS;
 const Bar = _ref => {
   let {
     width,
@@ -38,7 +38,7 @@ const Bar = _ref => {
   return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
     className: tooltipClassName,
     content: tooltipContent,
-    dataTestId: "".concat(barTooltipId).concat(id),
+    dataTestId: "".concat(barChart.bar.tooltip).concat(id),
     interactive: false,
     stringContentClassName: _stylesModule.default.tooltip
   }, /*#__PURE__*/_react.default.createElement("g", {

package/dist/components/UTBarChart/components/XAxis/index.js

@@ -16,9 +16,8 @@ var _constants = require("./constants");
 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 {
-  xAxisSecondaryLabelId,
-  xAxisMainLabelId
-} = _testIds.COMPONENT_IDS.barChartIds;
+  barChart
+} = _testIds.TEST_IDS;
 const XAxis = _ref => {
   let {
     data,
@@ -87,7 +86,7 @@ const XAxis = _ref => {
       labelBackgroundPadding: labelBackgroundPadding,
       labelYOffset: labelYOffset,
       mainLabel: mainLabel,
-      mainLabelDataTestId: "".concat(xAxisMainLabelId).concat(index),
+      mainLabelDataTestId: "".concat(barChart.xAxis.mainLabel).concat(index),
       mainLabelStyles: mainLabelStyles,
       selected: selected,
       selectedLabelBackground: selectedLabelBackground,
@@ -106,7 +105,7 @@ const XAxis = _ref => {
       color: color || '',
       graphYStart: graphYStart,
       secondaryLabel: secondaryLabel,
-      secondaryLabelDataTestId: "".concat(xAxisSecondaryLabelId).concat(index),
+      secondaryLabelDataTestId: "".concat(barChart.xAxis.secondaryLabel).concat(index),
       x: xAxis(index) + xOffset,
       yOffset: _constants.Y_OFFSET
     });

package/dist/components/UTBreadcrumbs/index.js

@@ -19,8 +19,8 @@ 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const {
-  buttonId
-} = _testIds.COMPONENT_IDS.breadcrumbsIds;
+  breadcrumbs: breadcrumbsIds
+} = _testIds.TEST_IDS;
 const UTBreadcrumbs = _ref => {
   let {
     breadcrumbs,
@@ -153,7 +153,7 @@ const UTBreadcrumbs = _ref => {
       key: "".concat(route, "-").concat(label)
     }, !route && !menuItems || disableMenu ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: _stylesModule.default.label,
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, ".").concat(index),
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
       variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), label) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
@@ -162,7 +162,7 @@ const UTBreadcrumbs = _ref => {
         childrenContainer: overflowControl ? _stylesModule.default.buttonContainer : null,
         text: overflowControl ? _stylesModule.default.ellipsis : null
       },
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, ".").concat(index),
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
       onClick: handleClick,
       size: "small",
       variant: "text"

package/dist/components/UTCreditCard/index.js

@@ -16,11 +16,8 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
-  nameFieldId,
-  expiresId,
-  cvcFieldId,
-  cardFieldId
-} = _testIds.COMPONENT_IDS.creditCardIds;
+  creditCard
+} = _testIds.TEST_IDS;
 const UTCreditCard = _ref => {
   var _value$expYearField;
   let {
@@ -89,13 +86,13 @@ const UTCreditCard = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.fields
   }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
-    dataTestId: cardFieldId,
+    dataTestId: creditCard.cardField,
     error: errors[cardField],
     onChange: onChangeField(cardField),
     onFocus: () => setFocused(_constants.fields.NUMBER),
     required: true,
     title: numberTitle,
-    validationDataTestId: "".concat(cardFieldId, ".validation"),
+    validationDataTestId: "".concat(creditCard.cardField, ".validation"),
     value: values[cardField],
     version: "V1"
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -104,37 +101,37 @@ const UTCreditCard = _ref => {
     classNames: {
       container: _stylesModule.default.inRow
     },
-    dataTestId: expiresId,
+    dataTestId: creditCard.expires,
     error: errors[expires],
     onChange: onChangeField(expires),
     onFocus: () => setFocused(_constants.fields.EXPIRY),
     required: true,
     title: expiryTitle,
-    validationDataTestId: "".concat(expiresId, ".validation"),
+    validationDataTestId: "".concat(creditCard.expires, ".validation"),
     value: values[expires],
     version: "V1"
   }), /*#__PURE__*/_react.default.createElement(_UTPasswordField.default, {
     classNames: {
       container: _stylesModule.default.inRow
     },
-    dataTestId: cvcFieldId,
+    dataTestId: creditCard.cvcField,
     error: errors[cvcField],
     onChange: onChangeField(cvcField),
     onVisibilityToggle: setCvcVisibility,
     title: cvcTitle,
     required: true,
     onFocus: () => setFocused(_constants.fields.CVC),
-    validationDataTestId: "".concat(cvcFieldId, ".validation"),
+    validationDataTestId: "".concat(creditCard.cvcField, ".validation"),
     value: values[cvcField],
     version: "V1"
   })), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
-    dataTestId: nameFieldId,
+    dataTestId: creditCard.nameField,
     error: errors[nameFiled],
     onChange: onChangeField(nameFiled),
     required: true,
     onFocus: () => setFocused(_constants.fields.NAME),
     title: nameTitle,
-    validationDataTestId: "".concat(nameFieldId, ".validation"),
+    validationDataTestId: "".concat(creditCard.nameField, ".validation"),
     value: values[nameFiled],
     version: "V1"
   })));

package/dist/components/UTDialog/index.js

@@ -22,22 +22,19 @@ var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const {
-  acceptButtontId,
-  cancelButtonId,
-  closeButtonId,
-  titleId
-} = _testIds.COMPONENT_IDS.dialogIds;
+  dialog
+} = _testIds.TEST_IDS;
 const UTDialog = _ref => {
   let {
     acceptButton,
-    acceptButtonDataTestId = acceptButtontId,
+    acceptButtonDataTestId = dialog.acceptButton,
     alertConfig,
     cancelButton,
-    cancelButtonDataTestId = cancelButtonId,
+    cancelButtonDataTestId = dialog.cancelButton,
     children,
     classNames,
     classes,
-    closeButtonDataTestId = closeButtonId,
+    closeButtonDataTestId = dialog.closeButton,
     contentName,
     dialogProps,
     disableEnforceFocus,
@@ -49,7 +46,7 @@ const UTDialog = _ref => {
     onRequestClose,
     roundedCloseButton,
     title,
-    titleDataTestId = titleId,
+    titleDataTestId = dialog.title,
     TransitionProps,
     warningAlert,
     whiteTitle,

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;