@widergy/utilitygo-smart-bill-web 1.13.2 → 1.13.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.13.4](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.13.3...v1.13.4) (2022-09-16)
+
+
+### Bug Fixes
+
+* markdown problem in smarttbill ([#28](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/28)) ([13b9b30](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/13b9b30315ae0449dc8009d978ab2cb84d1e11bc))
+
+## [1.13.3](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.13.2...v1.13.3) (2022-04-06)
+
+
+### Bug Fixes
+
+* adjust visual bugs by gap ([#27](https://github.com/widergy/UtilityGO-Smart-Bill-Web/issues/27)) ([c140016](https://github.com/widergy/UtilityGO-Smart-Bill-Web/commit/c14001678a4881812290da716101d0d9b8666e5d))
+
 ## [1.13.2](https://github.com/widergy/UtilityGO-Smart-Bill-Web/compare/v1.13.1...v1.13.2) (2022-03-14)
 
 

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

@@ -16,7 +16,6 @@
 .header {
   align-items: center;
   display: flex;
-  gap: 8px;
   margin-bottom: 24px;
 
   @media #{$tablet-mobile} {
@@ -29,6 +28,7 @@
 }
 
 .title {
+  margin-left: 8px;
   @media #{$tablet-mobile} {
     font-size: $small;
   }

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

@@ -8,7 +8,6 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-direction: column;
-  gap: 16px;
   margin-bottom: $default-spacing;
   padding: $default-container-padding;
 
@@ -22,6 +21,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 16px;
 
   @media #{$tablet-mobile} {
     align-items: center;
@@ -35,6 +35,10 @@
   align-items: center;
   display: flex;
 
+  @media #{$mobile} {
+    margin-top: 16px;
+  }
+
   @media #{$desktop} {
     white-space: nowrap;
   }
@@ -54,7 +58,6 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 16px;
   justify-content: space-between;
   
 

package/dist/components/BarChart/index.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var BarChartSection = function BarChartSection(_ref) {
   var _colors$barChart;

package/dist/components/BillCalculation/components/ConceptCard/index.js

@@ -61,7 +61,7 @@ var ConceptCard = function ConceptCard(_ref) {
       className: _stylesModule.default.lineContainer,
       key: list.title
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.conceptLineContainer
+      className: "".concat(_stylesModule.default.conceptLineContainer, " ").concat(list.description && _stylesModule.default.conceptLineContainerMarginBottom)
     }, /*#__PURE__*/_react.default.createElement(Label, {
       alias: _aliases.CONCEPT_TITLE
     }, list.title), /*#__PURE__*/_react.default.createElement(_StyledAmount.default, {

package/dist/components/BillCalculation/components/ConceptCard/styles.module.scss

@@ -18,7 +18,6 @@
 .lineContainer {
   display: flex;
   flex-direction: column;
-  gap: 12px;
   justify-content: space-between;
   padding: $default-spacing 0 0;
   @media #{$tablet-mobile} {
@@ -32,6 +31,10 @@
   justify-content: space-between;
 }
 
+.conceptLineContainerMarginBottom {
+  margin-bottom: 12px;
+}
+
 .container {
   background: $white;
   border: 1px solid $borders-gray;
@@ -53,8 +56,8 @@
 }
 
 .expandIcon {
-  width: 24px;
   padding: 0;
+  width: 24px;
 }
 
 .expandableContent {

package/dist/components/BillSummary/components/BilledConcepts/components/PieChartContainer/index.js

@@ -21,7 +21,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var PieChartContainer = function PieChartContainer(_ref) {
   var concepts = _ref.concepts,

package/dist/components/ConsumptionComparison/components/ConsumptionAdvice/styles.module.scss

@@ -30,8 +30,11 @@
 .header {
   align-items: center;
   display: flex;
-  gap: 8px;
   margin-bottom: 16px;
+
+  > svg {
+    margin-right: 18px;
+  }
 }
 
 .externalLink {

package/dist/components/ConsumptionComparison/components/PercentageComparison/styles.module.scss

@@ -14,12 +14,16 @@ $icon-size: 25px;
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  gap: 16px;
   justify-content: center;
   max-width: 200px;
   padding: 24px;
 
+  @media #{$desktop} {
+    margin-left: 16px;
+  }
+
   @media #{$tablet-mobile} {
+    margin-top: 16px;
     max-width: 100%;
     padding: 24px;
     text-align: center;
@@ -30,11 +34,12 @@ $icon-size: 25px;
 .header {
   align-items: center;
   display: flex;
+  margin-bottom: 16px;
 }
 
 .icon {
-  margin-right: 10px;
   height: $icon-size;
+  margin-right: 10px;
   width: $icon-size;
 }
 

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

@@ -16,7 +16,6 @@
 
 .comparisonComponentsContainer {
   display: flex;
-  gap: 16px;
   margin-bottom: 16px;
 
   @media #{$tablet-mobile} {
@@ -39,8 +38,8 @@
 
   @media #{$desktop} {
     display: flex;
-    flex-grow: 1;
     flex-flow: column;
+    flex-grow: 1;
     justify-content: center;
     width: 75%;
   }

package/dist/components/ConsumptionIncluded/components/TimelineRow/index.js

@@ -25,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var TimelineRow = function TimelineRow(_ref) {
   var contextApiInfo = _ref.contextApiInfo,

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/components/ReadingRow/index.js

@@ -39,7 +39,10 @@ var ReadingRow = function ReadingRow(_ref) {
     unitAlias: unitAlias,
     value: value,
     unit: unit,
-    disableUnit: disableUnit
+    disableUnit: disableUnit,
+    classes: {
+      container: _stylesModule.default.magnitudeContainer
+    }
   }));
 };
 

package/dist/components/ConsumptionPeriod/components/ConsumptionSummary/components/ReadingRow/styles.module.scss

@@ -3,8 +3,11 @@
 .container {
   align-items: center;
   display: flex;
-  gap: 16px;
   justify-content: space-between;
-  width: 100%;
   padding: 0 24px;
+  width: 100%;
+}
+
+.magnitudeContainer {
+  margin-left: 16px;
 }

package/dist/components/ConsumptionPeriod/components/Reading/styles.module.scss

@@ -31,7 +31,6 @@
 .detailsContainer {
   display: flex;
   flex-direction: column;
-  gap: 16px;
   padding: 16px 24px;
 
   @media #{$tablet-mobile} {
@@ -39,3 +38,17 @@
     flex-wrap: wrap;
   }
 }
+
+.iconAndDetailsContainer {
+  margin-bottom: 16px;
+
+  @media #{$mobile} {
+    margin-bottom: 0;
+    margin-right: 16px;
+  }
+
+  @media #{$small-mobile} {
+    margin-bottom: 16px;
+  }
+
+}

package/dist/components/ConsumptionPeriod/index.js

@@ -31,7 +31,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var ConsumptionPeriod = function ConsumptionPeriod(_ref) {
   var _currentPeriod$settle, _currentPeriod$settle2;

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

@@ -13,7 +13,6 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 16px;
-  gap: 16px;
   width: 100%;
 
   @media #{$mobile} {
@@ -25,12 +24,14 @@
   width: 30%;
 
   @media #{$mobile} {
+    margin-right: 0;
     width: 100%;
   }
 }
 
 .initialReadingContainer {
   justify-content: flex-start;
+  margin-right: 16px;
 }
 
 .finalReadingContainer {
@@ -38,10 +39,12 @@
 
   @media #{$mobile} {
     margin-left: 0;
+    margin-top: 16px;
   }
 }
 
 .desktopSummary {
+  margin-right: 16px;
   width: 50%;
 
   @media #{$mobile} {

package/dist/components/Date/index.js

@@ -32,7 +32,7 @@ var Date = function Date(_ref) {
     className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: mainAlias,
-    className: _stylesModule.default.valueContainer
+    className: "".concat(_stylesModule.default.valueContainer, " ").concat(classes.value)
   }, (0, _dayjs.default)(date, 'YYYY-MM-DD').format('DD/MM/YYYY')), /*#__PURE__*/_react.default.createElement(Label, {
     alias: detailAlias
   }, text));
@@ -45,7 +45,8 @@ Date.propTypes = {
   mainAlias: _propTypes.string,
   detailAlias: _propTypes.string,
   classes: (0, _propTypes.shape)({
-    container: _propTypes.string
+    container: _propTypes.string,
+    value: _propTypes.string
   })
 };
 

package/dist/components/Magnitude/index.js

@@ -23,7 +23,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var Magnitude = function Magnitude(props) {
   var contextApiInfo = props.contextApiInfo,

package/dist/components/MainBillData/components/BillAlert/styles.module.scss

@@ -31,11 +31,10 @@
 
 .iconAndLabelContainer {
   align-items: center;
-  gap: 8px;
 }
 
 .label {
-  margin-left: 5px;
   color: $primary;
+  margin-left: 13px;
   text-decoration: underline;
 }

package/dist/components/MainBillData/components/BillBody/styles.module.scss

@@ -5,10 +5,6 @@
   flex-flow: row;
   width: 100%;
 
-  @media #{$desktop} {
-    gap: 16px;
-  }
-
   @media #{$tablet-mobile} {
     flex-flow: column;
   }
@@ -26,6 +22,7 @@
 .amountAndConsumptionLeftContainer {
   @extend %containers;
   @media #{$desktop} {
+    margin-right: 16px;
     width: 45%;
   }
 }
@@ -33,6 +30,7 @@
 .periodAndClientDataLeftContainer {
   @extend %containers;
   @media #{$desktop} {
+    margin-right: 16px;
     width: 55%;
   }
 }

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/index.js

@@ -26,14 +26,16 @@ var TypeAndNumber = function TypeAndNumber(_ref) {
       billType = _ref.billType,
       billNumber = _ref.billNumber,
       mainAlias = _ref.mainAlias,
-      detailAlias = _ref.detailAlias;
+      detailAlias = _ref.detailAlias,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
   var config = contextApiInfo.config,
       Label = contextApiInfo.Label;
   var texts = config.texts;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
+    className: "".concat(_stylesModule.default.container, " ").concat(classes.container)
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.billTypeAndNumberContainer
+    className: "".concat(_stylesModule.default.billTypeAndNumberContainer, " ").concat(classes.value)
   }, /*#__PURE__*/_react.default.createElement(Label, {
     alias: _aliases.TYPE_AND_NUMBER_TYPE,
     className: _stylesModule.default.billType
@@ -50,6 +52,10 @@ TypeAndNumber.propTypes = {
   billType: _propTypes.string,
   billNumber: _propTypes.string,
   mainAlias: _propTypes.string,
+  classes: (0, _propTypes.shape)({
+    container: _propTypes.string,
+    value: _propTypes.string
+  }),
   detailAlias: _propTypes.string
 };
 

package/dist/components/MainBillData/components/BillHeader/components/TypeAndNumber/styles.module.scss

@@ -5,7 +5,6 @@
   align-items: flex-start;
   display: flex;
   flex-flow: column;
-  gap: 8px;
 }
 
 .billTypeAndNumberContainer {
@@ -20,10 +19,10 @@
 
 .billType {
   align-items: center;
-  display: flex;
   background-color: $backgrounds-gray;
   border: 1px solid $borders-dark-gray;
   border-radius: 3px;
+  display: flex;
   height: 25px;
   justify-content: center;
   width: 25px;

package/dist/components/MainBillData/components/BillHeader/index.js

@@ -31,7 +31,7 @@ var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var BillHeader = function BillHeader(_ref) {
   var _currentPeriod$settle, _currentPeriod$settle2, _currentPeriod$settle3;
@@ -76,12 +76,17 @@ var BillHeader = function BillHeader(_ref) {
     className: _stylesModule.default.billDataAndDebtStateContainer
   }, /*#__PURE__*/_react.default.createElement(_TypeAndNumber.default, _extends({}, aliases, {
     billType: billData.bill_type,
-    billNumber: billData.bill_number
+    billNumber: billData.bill_number,
+    classes: {
+      value: _stylesModule.default.typeAndNumber,
+      container: _stylesModule.default.typeAndNumberContainer
+    }
   })), issuedOnDate && /*#__PURE__*/_react.default.createElement(_Date.default, _extends({}, aliases, {
     date: issuedOnDate,
     text: texts.commons.issuedOnDate,
     classes: {
-      container: _stylesModule.default.date
+      value: _stylesModule.default.date,
+      container: isDesktopSize && debtStatusValidation && _stylesModule.default.dateContainer
     }
   })), isDesktopSize && debtStatusValidation && /*#__PURE__*/_react.default.createElement(DebtStatusLabel, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.debtStatusLabelMobile

package/dist/components/MainBillData/components/BillHeader/styles.module.scss

@@ -21,7 +21,15 @@
 }
 
 .date {
-  gap: 8px;
+  margin-bottom: 11px;
+}
+
+.dateContainer {
+  margin-right: 24px;
+}
+
+.typeAndNumber{
+  margin-bottom: 11px;
 }
 
 .headerRow {
@@ -36,7 +44,6 @@
     border-top-right-radius: $default-container-border-radius;
     display: flex;
     flex-direction: column;
-    gap: 16px;
     padding: 16px;
     width: 100%;
   }
@@ -51,6 +58,7 @@
   @media #{$tablet-mobile} {
     align-items: flex-start;
     flex-flow: column;
+    margin-bottom: 16px;
   }
 }
 
@@ -58,7 +66,10 @@
   align-items: center;
   display: flex;
   width: 68%;
-  gap: 24px;
+
+  > .typeAndNumberContainer:nth-child(1) {
+    margin-right: 24px;
+  }
 
   @media #{$desktop} {
     justify-content: flex-end;
@@ -68,6 +79,7 @@
     align-items: flex-end;
     display: flex;
     flex-direction: row;
+    margin-bottom: 16px;
     width: 100%;
   }
 }
@@ -94,11 +106,11 @@
 }
 
 .periodContainer {
+  border: 1px solid $borders-dark-gray;
+  border-top: 0;
   display: flex;
   flex-flow: column;
   width: 60%;
-  border: 1px solid $borders-dark-gray;
-  border-top: 0;
   @media #{$desktop} {
     display: none;
   }

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

@@ -9,10 +9,13 @@
   border-radius: $default-container-border-radius;
   display: flex;
   flex-flow: column;
-  gap: 8px;
   margin-bottom: 17px;
   padding: $default-container-padding;
 
+  > .periodHeader {
+      margin-bottom: 8px;
+  }
+
   @media #{$tablet-mobile} {
     border: 1px solid $borders-dark-gray;
     border-radius: $default-container-border-radius;
@@ -26,7 +29,6 @@
   border: 1px solid $borders-gray;
   border-radius: $default-container-border-radius;
   display: flex;
-  gap: 16px;
   justify-content: center;
   margin-bottom: $default-spacing;
   padding: 16px;
@@ -46,10 +48,13 @@
 
 .header {
   align-items: center;
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+
+  > span {
+    margin-bottom: 8px;
+  }
 
   @media #{$tablet-mobile} {
     border: 0;
@@ -62,7 +67,9 @@
 
 .periodHeader {
   display: flex;
-  gap: 16px;
+  > svg {
+    margin-left: 16px;
+  }
 }
 
 .issueDateContainer {
@@ -85,7 +92,10 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  grid-gap: 5px;
+
+  > span {
+    margin-left: 5px;
+  }
 }
 
 .periodLabel {
@@ -97,6 +107,10 @@
 
 .debtState {
   width: fit-content;
+
+  @media #{$desktop} {
+    margin-top: 8px;
+  }
 }
 
 .text {

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

@@ -5,7 +5,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  grid-gap: 5px;
 }
 
 .multipleSettlementsContainer {
@@ -15,7 +14,7 @@
 
 .purchasedRate {
   font-size: $purchased-rate-font-size;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }
 
 .category {

package/dist/components/RatesDefinition/components/BillRate/components/RatePrices/styles.module.scss

@@ -4,7 +4,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 24px;
   justify-content: space-between;
 }
 
@@ -12,7 +11,11 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 16px;
+  margin-bottom: 24px;
+
+  > .charge:nth-child(1) {
+    margin-bottom: 16px;
+  }
 }
 
 .charge {

package/dist/components/RatesDefinition/components/BillRate/styles.module.scss

@@ -6,7 +6,6 @@
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 16px;
   padding: 16px;
   width: 100%;
 }
@@ -22,7 +21,12 @@
 
 .titleAndIcon {
   display: flex;
-  gap: 16px;
   justify-content: center;
+  margin-bottom: 16px;
   width: 100%;
+
+  > span {
+    margin-right: 16px;
+  }
+
 }

package/dist/components/RatesDefinition/components/CategoryByConsumption/components/Category/styles.module.scss

@@ -5,15 +5,21 @@
 .container {
   align-items: center;
   display: flex;
-  gap: 8px;
+  
+  > .title {
+    margin-right: 8px;
+  }
 }
 
 .containerWrap {
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 24px 0 8px
+  padding: 24px 0 8px;
+
+  > .title {
+    margin-bottom: 16px;
+  }
 }
 
 .title {

package/dist/components/RatesDefinition/components/CategoryByConsumption/styles.module.scss

@@ -25,14 +25,6 @@
   }
 }
 
-.ratesLegend {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid $borders-gray;
-  gap: 24px;
-  padding: 24px;
-}
-
 .content {
   display: flex;
 

package/dist/components/RatesDefinition/components/PurchasedRate/styles.module.scss

@@ -8,10 +8,13 @@
   border-right: 1px solid $borders-gray;
   display: flex;
   flex-flow: column;
-  gap: 16px;
-  padding: 16px;
   justify-content: center;
   min-width: 50%;
+  padding: 16px;
+
+  > span {
+    margin-bottom: 16px;
+  }
 
   @media #{$tablet-mobile} {
     border-bottom: 1px solid $borders-gray;
@@ -23,13 +26,13 @@
 
 .rateAndCategoryContainer {
   flex-direction: column-reverse;
+  margin-bottom: 24px;
 }
 
 .data {
   align-items: center;
   display: flex;
   flex-flow: column;
-  gap: 24px;
   height: 100%;
   justify-content: space-between;
 }

package/dist/components/SmartBillProvider/index.js

@@ -25,7 +25,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -35,7 +35,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var SmartBillProvider = /*#__PURE__*/function (_PureComponent) {
   _inherits(SmartBillProvider, _PureComponent);

package/dist/components/WithContextApi/index.js

@@ -17,7 +17,7 @@ var _layout = _interopRequireDefault(require("./layout"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/dist/components/WithSeason/index.js

@@ -11,7 +11,7 @@ var _season = require("../../shared/utils/season");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 var withSeason = function withSeason() {
   return function (Component) {

package/dist/shared/constants/aliases.js

@@ -309,7 +309,8 @@ var DEFAULT_PROPS = (_DEFAULT_PROPS = {}, _defineProperty(_DEFAULT_PROPS, TITLE,
   variant: 'body'
 }), _defineProperty(_DEFAULT_PROPS, PERIOD, {
   weight: 'medium',
-  variant: 'subtitle1'
+  variant: 'subtitle1',
+  withMarkdown: true
 }), _defineProperty(_DEFAULT_PROPS, PERIOD_RESPONSIVE, {
   weight: 'regular'
 }), _defineProperty(_DEFAULT_PROPS, AMOUNT, {
@@ -487,7 +488,8 @@ var DEFAULT_PROPS = (_DEFAULT_PROPS = {}, _defineProperty(_DEFAULT_PROPS, TITLE,
 }), _defineProperty(_DEFAULT_PROPS, SUMMARY_RESULT, {
   variant: 'subtitle2',
   weight: 'medium',
-  color: COLORS.PRIMARY
+  color: COLORS.PRIMARY,
+  withMarkdown: true
 }), _defineProperty(_DEFAULT_PROPS, SUMMARY_RESULT_NUMBER, {
   variant: 'title2',
   weight: 'medium',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/utilitygo-smart-bill-web",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "description": "UtilityGO SmartBill Web",
   "license": "MIT",
   "main": "dist/index.js",