@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/components/UTTracker/components/SubStep/index.js

@@ -1 +1,38 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_merge=_interopRequireDefault(require("lodash/merge")),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const SubStep=_ref=>{let{style:style,subtitle:subtitle,title:title}=_ref;const themedStyles=(0,_merge.default)({},_stylesModule.default,style);return _react.default.createElement("div",{className:themedStyles.container},_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:themedStyles.titleColor,variant:"small"},title),_react.default.createElement(_UTLabel.default,{colorTheme:"gray",className:themedStyles.subtitleColor,variant:"small",shade:"01"},subtitle))};SubStep.propTypes={style:_propTypes.string,subtitle:_propTypes.string,title:_propTypes.string};var _default=exports.default=SubStep;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _merge = _interopRequireDefault(require("lodash/merge"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SubStep = _ref => {
+  let {
+    style,
+    subtitle,
+    title
+  } = _ref;
+  const themedStyles = (0, _merge.default)({}, _stylesModule.default, style);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: themedStyles.container
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: themedStyles.titleColor,
+    variant: "small"
+  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    className: themedStyles.subtitleColor,
+    variant: "small",
+    shade: "01"
+  }, subtitle));
+};
+SubStep.propTypes = {
+  style: _propTypes.string,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+};
+var _default = exports.default = SubStep;

package/dist/components/UTTracker/constants.js

@@ -1 +1,39 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ownModeStyles=exports.VARIANTS=exports.STANDARD=exports.OVAL_SIZE=exports.FLAT=exports.ERROR=exports.DETAILS_ICON_FLAT_SIZE=exports.DETAILS_ICON_CARD_SIZE=exports.DEFAULT_PROPS=exports.CARD=void 0;const CARD=exports.CARD="card",FLAT=exports.FLAT="flat",STANDARD=exports.STANDARD="standard",ERROR=exports.ERROR="error",OVAL_SIZE=exports.OVAL_SIZE=20,DETAILS_ICON_CARD_SIZE=exports.DETAILS_ICON_CARD_SIZE=20,DETAILS_ICON_FLAT_SIZE=exports.DETAILS_ICON_FLAT_SIZE=24,ownModeStyles=exports.ownModeStyles={[CARD]:{container:{backgroundColor:"white",elevation:2,shadowColor:"black",shadowOffset:{height:3,width:0},shadowOpacity:.1}},[FLAT]:{container:{backgroundColor:"transparent"}}},VARIANTS=exports.VARIANTS={error:"error",standar:"standar"},DEFAULT_PROPS=exports.DEFAULT_PROPS={variant:"standar"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ownModeStyles = exports.VARIANTS = exports.STANDARD = exports.OVAL_SIZE = exports.FLAT = exports.ERROR = exports.DETAILS_ICON_FLAT_SIZE = exports.DETAILS_ICON_CARD_SIZE = exports.DEFAULT_PROPS = exports.CARD = void 0;
+const CARD = exports.CARD = 'card';
+const FLAT = exports.FLAT = 'flat';
+const STANDARD = exports.STANDARD = 'standard';
+const ERROR = exports.ERROR = 'error';
+const OVAL_SIZE = exports.OVAL_SIZE = 20;
+const DETAILS_ICON_CARD_SIZE = exports.DETAILS_ICON_CARD_SIZE = 20;
+const DETAILS_ICON_FLAT_SIZE = exports.DETAILS_ICON_FLAT_SIZE = 24;
+const ownModeStyles = exports.ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+const VARIANTS = exports.VARIANTS = {
+  error: 'error',
+  standar: 'standar'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'standar'
+};

package/dist/components/UTTracker/index.js

@@ -1 +1,119 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_UTButton=_interopRequireDefault(require("../UTButton")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_classesUtils=require("../../utils/classesUtils"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss")),_Step=_interopRequireDefault(require("./components/Step")),_SubStep=_interopRequireDefault(require("./components/SubStep")),_propTypes2=require("./propTypes"),_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)}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 UTTracker=_ref=>{let{classes:themeClasses={},classNames:classNames,currentStep:currentStep,description:description,detailsTab:detailsTab,mode:mode=_constants.CARD,steps:steps,subtitle:subtitle,title:title,variant:variant=_constants.STANDARD}=_ref;const classes=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(themeClasses,classNames),[classNames]),[isCollapsed,setIsCollapsed]=(0,_react.useState)(!1),[height,setHeight]=(0,_react.useState)(0),isCompleted=stepNumber=>stepNumber<currentStep,isActive=stepNumber=>stepNumber===currentStep;return _react.default.createElement("div",{className:"".concat(classes.outerContainer)},_react.default.createElement("div",{className:"".concat(classes.container," ").concat(mode!==_constants.FLAT?_stylesModule.default.container:_stylesModule.default.containerFlat," ").concat(!detailsTab&&_stylesModule.default.roundedBorders)},title&&(mode===_constants.FLAT&&null!=detailsTab&&detailsTab.enabled?_react.default.createElement(_UTButton.default,{onClick:()=>setIsCollapsed(!isCollapsed),classNames:{childrenContainer:_stylesModule.default.button,root:_stylesModule.default.titleTouchable,text:_stylesModule.default.text},variant:"text",Icon:isCollapsed?"IconChevronUp":"IconChevronDown",iconPlacement:"right"},title):_react.default.createElement(_UTLabel.default,{weight:"medium",variant:"subtitle1"},title)),_react.default.createElement("div",null,(subtitle||description)&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.subtitleAndDescription," ").concat(mode===_constants.FLAT?_stylesModule.default.paddingLeft:""," ").concat(variant===_constants.ERROR?classes.errorBanner:"")},subtitle&&variant===_constants.ERROR&&_react.default.createElement(_UTLabel.default,{variant:"small",weight:"medium"},subtitle),description&&_react.default.createElement(_UTLabel.default,{colorTheme:"gray",variant:"small"},description)),_react.default.createElement("div",{style:{height:height},className:"".concat(title&&_stylesModule.default.connectorTitle," ").concat(isCollapsed?_stylesModule.default.connectorCollapsed:_stylesModule.default.connector," ").concat(classes.connector)}),steps&&_react.default.createElement("div",{ref:el=>{el&&setHeight(el.getBoundingClientRect().height-45)}},null==steps?void 0:steps.map((step,index)=>{var _step$subSteps;return _react.default.createElement("div",{key:step.id},_react.default.createElement(_Step.default,{first:0===index,index:index,isActive:isActive,isCompleted:isCompleted,step:step,variant:variant,classes:classes}),isCollapsed&&_react.default.createElement("div",null,!(0,_isEmpty.default)(step.subSteps)&&(null===(_step$subSteps=step.subSteps)||void 0===_step$subSteps?void 0:_step$subSteps.map(subStep=>_react.default.createElement(_SubStep.default,_extends({key:subStep.id},subStep,{className:classes.subStep}))))))})))),(null==detailsTab?void 0:detailsTab.enabled)&&mode===_constants.CARD&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.detailButtonContainer," ").concat(classes.detailButtonContainer)},_react.default.createElement(_UTButton.default,{classNames:{childrenContainer:_stylesModule.default.button,icon:_stylesModule.default.detailIcon,text:_stylesModule.default.text},Icon:isCollapsed?"IconChevronUp":"IconChevronDown",iconPlacement:"right",onClick:()=>setIsCollapsed(!isCollapsed),variant:"text"},detailsTab.title)))};UTTracker.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),currentStep:_propTypes.number,description:_propTypes.string,detailsTab:_propTypes2.DetailsTabPropTypes,mode:_propTypes2.ModePropTypes,steps:_propTypes2.StepsPropTypes,subtitle:_propTypes.string,title:_propTypes.string,variant:_propTypes2.VariantPropTypes};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTTracker);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _Step = _interopRequireDefault(require("./components/Step"));
+var _SubStep = _interopRequireDefault(require("./components/SubStep"));
+var _propTypes2 = require("./propTypes");
+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); }
+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 UTTracker = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStep,
+    description,
+    detailsTab,
+    mode = _constants.CARD,
+    steps,
+    subtitle,
+    title,
+    variant = _constants.STANDARD
+  } = _ref;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
+  const [isCollapsed, setIsCollapsed] = (0, _react.useState)(false);
+  const [height, setHeight] = (0, _react.useState)(0);
+  const isCompleted = stepNumber => stepNumber < currentStep;
+  const isActive = stepNumber => stepNumber === currentStep;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.outerContainer)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.container, " ").concat(mode !== _constants.FLAT ? _stylesModule.default.container : _stylesModule.default.containerFlat, " ").concat(!detailsTab && _stylesModule.default.roundedBorders)
+  }, title && (mode === _constants.FLAT && detailsTab !== null && detailsTab !== void 0 && detailsTab.enabled ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    onClick: () => setIsCollapsed(!isCollapsed),
+    classNames: {
+      childrenContainer: _stylesModule.default.button,
+      root: _stylesModule.default.titleTouchable,
+      text: _stylesModule.default.text
+    },
+    variant: "text",
+    Icon: isCollapsed ? 'IconChevronUp' : 'IconChevronDown',
+    iconPlacement: "right"
+  }, title) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    weight: "medium",
+    variant: "subtitle1"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, (subtitle || description) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.subtitleAndDescription, " ").concat(mode === _constants.FLAT ? _stylesModule.default.paddingLeft : '', " ").concat(variant === _constants.ERROR ? classes.errorBanner : '')
+  }, subtitle && variant === _constants.ERROR && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    weight: "medium"
+  }, subtitle), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small"
+  }, description)), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height
+    },
+    className: "".concat(title && _stylesModule.default.connectorTitle, " ").concat(isCollapsed ? _stylesModule.default.connectorCollapsed : _stylesModule.default.connector, " ").concat(classes.connector)
+  }), steps && /*#__PURE__*/_react.default.createElement("div", {
+    ref: el => {
+      if (!el) return;
+      setHeight(el.getBoundingClientRect().height - 45);
+    }
+  }, steps === null || steps === void 0 ? void 0 : steps.map((step, index) => {
+    var _step$subSteps;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: step.id
+    }, /*#__PURE__*/_react.default.createElement(_Step.default, {
+      first: index === 0,
+      index,
+      isActive,
+      isCompleted,
+      step,
+      variant,
+      classes: classes
+    }), isCollapsed && /*#__PURE__*/_react.default.createElement("div", null, !(0, _isEmpty.default)(step.subSteps) && ((_step$subSteps = step.subSteps) === null || _step$subSteps === void 0 ? void 0 : _step$subSteps.map(subStep => /*#__PURE__*/_react.default.createElement(_SubStep.default, _extends({
+      key: subStep.id
+    }, subStep, {
+      className: classes.subStep
+    }))))));
+  })))), (detailsTab === null || detailsTab === void 0 ? void 0 : detailsTab.enabled) && mode === _constants.CARD && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.detailButtonContainer, " ").concat(classes.detailButtonContainer)
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      childrenContainer: _stylesModule.default.button,
+      icon: _stylesModule.default.detailIcon,
+      text: _stylesModule.default.text
+    },
+    Icon: isCollapsed ? 'IconChevronUp' : 'IconChevronDown',
+    iconPlacement: "right",
+    onClick: () => setIsCollapsed(!isCollapsed),
+    variant: "text"
+  }, detailsTab.title)));
+};
+UTTracker.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  currentStep: _propTypes.number,
+  description: _propTypes.string,
+  detailsTab: _propTypes2.DetailsTabPropTypes,
+  mode: _propTypes2.ModePropTypes,
+  steps: _propTypes2.StepsPropTypes,
+  subtitle: _propTypes.string,
+  title: _propTypes.string,
+  variant: _propTypes2.VariantPropTypes
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTracker);

package/dist/components/UTTracker/propTypes.js

@@ -1 +1,26 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.VariantPropTypes=exports.SubStepPropTypes=exports.StepsPropTypes=exports.StepPropTypes=exports.ModePropTypes=exports.DetailsTabPropTypes=void 0;var _propTypes=require("prop-types"),_constants=require("./constants");const SubStepPropTypes=exports.SubStepPropTypes=(0,_propTypes.shape)({id:_propTypes.number,subtitle:_propTypes.string,title:_propTypes.string}),StepPropTypes=exports.StepPropTypes=(0,_propTypes.shape)({id:_propTypes.number,subSteps:(0,_propTypes.arrayOf)(SubStepPropTypes),subtitle:_propTypes.string,title:_propTypes.string}),StepsPropTypes=exports.StepsPropTypes=(0,_propTypes.arrayOf)(StepPropTypes),DetailsTabPropTypes=exports.DetailsTabPropTypes=(0,_propTypes.shape)({enabled:_propTypes.bool,title:_propTypes.string}),ModePropTypes=exports.ModePropTypes=(0,_propTypes.oneOf)([_constants.CARD,_constants.FLAT]),VariantPropTypes=exports.VariantPropTypes=(0,_propTypes.oneOf)([_constants.STANDARD,_constants.ERROR]);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariantPropTypes = exports.SubStepPropTypes = exports.StepsPropTypes = exports.StepPropTypes = exports.ModePropTypes = exports.DetailsTabPropTypes = void 0;
+var _propTypes = require("prop-types");
+var _constants = require("./constants");
+const SubStepPropTypes = exports.SubStepPropTypes = (0, _propTypes.shape)({
+  id: _propTypes.number,
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+});
+const StepPropTypes = exports.StepPropTypes = (0, _propTypes.shape)({
+  id: _propTypes.number,
+  subSteps: (0, _propTypes.arrayOf)(SubStepPropTypes),
+  subtitle: _propTypes.string,
+  title: _propTypes.string
+});
+const StepsPropTypes = exports.StepsPropTypes = (0, _propTypes.arrayOf)(StepPropTypes);
+const DetailsTabPropTypes = exports.DetailsTabPropTypes = (0, _propTypes.shape)({
+  enabled: _propTypes.bool,
+  title: _propTypes.string
+});
+const ModePropTypes = exports.ModePropTypes = (0, _propTypes.oneOf)([_constants.CARD, _constants.FLAT]);
+const VariantPropTypes = exports.VariantPropTypes = (0, _propTypes.oneOf)([_constants.STANDARD, _constants.ERROR]);

package/dist/components/UTTracker/theme.js

@@ -1 +1,96 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _constants=require("./constants"),_utils=require("./utils");const getBorderColor=_ref=>{var _theme$Palette$action,_theme$Palette$accent;let{theme:theme,variant:variant}=_ref;return variant===_constants.VARIANTS.error?"".concat(theme.Palette.error["04"]," !important"):"".concat((null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.accent["04"])||(null===(_theme$Palette$accent=theme.Palette.accent)||void 0===_theme$Palette$accent?void 0:_theme$Palette$accent["04"])," !important")},getBorderLightColor=_ref2=>{var _theme$Palette$action2,_theme$Palette$accent2;let{theme:theme,variant:variant}=_ref2;return variant===_constants.VARIANTS.error?"".concat(theme.Palette.error["04"]," !important"):"".concat((null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.accent["04"])||(null===(_theme$Palette$accent2=theme.Palette.accent)||void 0===_theme$Palette$accent2?void 0:_theme$Palette$accent2["04"])," !important")},retrieveStyle=_ref3=>{let{theme:theme,variant:variant}=_ref3;const variantTheme=(0,_utils.getVariant)(variant);return{activeContainer:{borderColor:getBorderColor({theme:theme,variant:variantTheme})},activeInnerContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},completedContainer:{borderColor:getBorderColor({theme:theme,variant:variantTheme})},completedInnerContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},completedOuterContainer:{opacity:.5},fullContainer:{backgroundColor:getBorderColor({theme:theme,variant:variantTheme})},container:{backgroundColor:theme.Palette.light["01"]},connector:{borderLeft:"2px dashed ".concat(theme.Palette.gray["04"])},detailButtonContainer:{backgroundColor:theme.Palette.light["01"],borderTop:"1px solid ".concat(theme.Palette.light["04"])},containerStep:{backgroundColor:theme.Palette.light["01"],borderColor:theme.Palette.gray["04"]},innerContainer:{backgroundColor:theme.Palette.light["01"]},completedLight:{borderColor:getBorderLightColor({theme:theme,variant:variantTheme}),opacity:.5},errorBanner:{backgroundColor:theme.Palette.error["01"],borderRadius:4,padding:8}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+var _utils = require("./utils");
+const getBorderColor = _ref => {
+  var _theme$Palette$action, _theme$Palette$accent;
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === _constants.VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || ((_theme$Palette$accent = theme.Palette.accent) === null || _theme$Palette$accent === void 0 ? void 0 : _theme$Palette$accent['04']), " !important");
+};
+const getBorderLightColor = _ref2 => {
+  var _theme$Palette$action2, _theme$Palette$accent2;
+  let {
+    theme,
+    variant
+  } = _ref2;
+  return variant === _constants.VARIANTS.error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || ((_theme$Palette$accent2 = theme.Palette.accent) === null || _theme$Palette$accent2 === void 0 ? void 0 : _theme$Palette$accent2['04']), " !important");
+};
+const retrieveStyle = _ref3 => {
+  let {
+    theme,
+    variant
+  } = _ref3;
+  const variantTheme = (0, _utils.getVariant)(variant);
+  return {
+    activeContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    activeInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedContainer: {
+      borderColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedInnerContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    completedOuterContainer: {
+      opacity: 0.5
+    },
+    fullContainer: {
+      backgroundColor: getBorderColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    container: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    connector: {
+      borderLeft: "2px dashed ".concat(theme.Palette.gray['04'])
+    },
+    detailButtonContainer: {
+      backgroundColor: theme.Palette.light['01'],
+      borderTop: "1px solid ".concat(theme.Palette.light['04'])
+    },
+    containerStep: {
+      backgroundColor: theme.Palette.light['01'],
+      borderColor: theme.Palette.gray['04']
+    },
+    innerContainer: {
+      backgroundColor: theme.Palette.light['01']
+    },
+    completedLight: {
+      borderColor: getBorderLightColor({
+        theme,
+        variant: variantTheme
+      }),
+      opacity: 0.5
+    },
+    errorBanner: {
+      backgroundColor: theme.Palette.error['01'],
+      borderRadius: 4,
+      padding: 8
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTTracker/utils.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getVariant=exports.getLabelTheme=exports.getContainerStyle=void 0;var _constants=require("./constants");const getVariant=variant=>_constants.VARIANTS[variant]||_constants.VARIANTS[_constants.DEFAULT_PROPS.variant];exports.getVariant=getVariant;const getLabelTheme=variant=>({[_constants.VARIANTS.error]:"error",[_constants.VARIANTS.standar]:"accent"}[getVariant(variant)]);exports.getLabelTheme=getLabelTheme;const getContainerStyle=mode=>mode===_constants.FLAT?"transparent":"white";exports.getContainerStyle=getContainerStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariant = exports.getLabelTheme = exports.getContainerStyle = void 0;
+var _constants = require("./constants");
+const getVariant = variant => _constants.VARIANTS[variant] || _constants.VARIANTS[_constants.DEFAULT_PROPS.variant];
+exports.getVariant = getVariant;
+const getLabelTheme = variant => ({
+  [_constants.VARIANTS.error]: 'error',
+  [_constants.VARIANTS.standar]: 'accent'
+})[getVariant(variant)];
+exports.getLabelTheme = getLabelTheme;
+const getContainerStyle = mode => mode === _constants.FLAT ? 'transparent' : 'white';
+exports.getContainerStyle = getContainerStyle;

package/dist/components/UTValidation/README.md

@@ -0,0 +1,69 @@
+# UTValidation
+
+## Description
+
+`UTValidation` is a component designed to display input validation messages in a structured and customizable way. It supports various statuses such as `success`, `error`, and `default`, and can include optional icons for each validation message.
+
+## Props
+
+| Name           | Type   | Default | Description                                                                                  |
+| -------------- | ------ | ------- | -------------------------------------------------------------------------------------------- |
+| className      | string |         | Custom CSS class to apply to the root of the component.                                      |
+| dataTestId     | string |         | Component `data-testid`                                                                      |
+| validationData | array  | []      | Array of validation data objects to display messages, each with a status and optional icons. |
+
+### validationData
+
+The `validationData` prop is an array of objects, each representing a group of validation messages. Each object can optionally have a `title` and must have a `status` and an `items` array. The `items` array contains objects, each with `text`, `status`, and an optional `withIcon` property.
+
+#### Structure of validationData
+
+- **title** (optional): A string representing the title of the validation group.
+- **status** (optional): A string indicating the status of the validation group. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+- **items** (required): An array of objects, each representing an individual validation item.
+  - **text** (required): A string containing the validation message.
+  - **status** (optional): A string indicating the status of the validation item. Defaults to `default`. Possible values are `success`, `error`, and `default`.
+  - **withIcon** (optional): A boolean indicating whether to display an icon next to the validation message. Defaults to `true`.
+
+### Example
+
+```javascript
+const validationData = [
+  {
+    items: [
+      {
+        status: 'success',
+        text: 'Must be at least 8 characters long.',
+        withIcon: true // Optional, defaults to true
+      }
+    ]
+  },
+  {
+    title: 'Must meet at least 2 of the following conditions:',
+    status: 'error',
+    items: [
+      {
+        text: 'At least 1 lowercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        text: 'At least 1 uppercase letter.' // Defaults to "default" and "withIcon" to true
+      },
+      {
+        status: 'success',
+        text: 'At least 1 number.',
+        withIcon: false // Will not display an icon
+      }
+    ]
+  }
+];
+```
+
+## Statuses
+
+The `status` prop can be one of these values:
+
+- `success`
+- `error`
+- `default`
+
+If `status` is not provided, it defaults to `default`.

package/dist/components/UTValidation/constants.js

@@ -1 +1,27 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.STATUS_COLOR_MAPPER=exports.STATUSES_WITH_ICON=exports.STATUSES=exports.ICON_STATUS_COLOR_MAPPER=exports.ICON_SIZE=exports.ICON_MAPPER=void 0;const STATUSES=exports.STATUSES={success:"success",error:"error",default:"default"},ICON_STATUS_COLOR_MAPPER=exports.ICON_STATUS_COLOR_MAPPER={[STATUSES.success]:"success",[STATUSES.error]:"error",[STATUSES.default]:"light"},STATUS_COLOR_MAPPER=exports.STATUS_COLOR_MAPPER={[STATUSES.success]:"success",[STATUSES.error]:"error",[STATUSES.default]:"gray"},ICON_MAPPER=exports.ICON_MAPPER={[STATUSES.success]:"IconCheck",[STATUSES.error]:"IconX"},STATUSES_WITH_ICON=exports.STATUSES_WITH_ICON=[STATUSES.success,STATUSES.error],ICON_SIZE=exports.ICON_SIZE=15;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATUS_COLOR_MAPPER = exports.STATUSES_WITH_ICON = exports.STATUSES = exports.ICON_STATUS_COLOR_MAPPER = exports.ICON_SIZE = exports.ICON_MAPPER = void 0;
+const STATUSES = exports.STATUSES = {
+  success: 'success',
+  error: 'error',
+  default: 'default'
+};
+const ICON_STATUS_COLOR_MAPPER = exports.ICON_STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'light'
+};
+const STATUS_COLOR_MAPPER = exports.STATUS_COLOR_MAPPER = {
+  [STATUSES.success]: 'success',
+  [STATUSES.error]: 'error',
+  [STATUSES.default]: 'gray'
+};
+const ICON_MAPPER = exports.ICON_MAPPER = {
+  [STATUSES.success]: 'IconCheck',
+  [STATUSES.error]: 'IconX'
+};
+const STATUSES_WITH_ICON = exports.STATUSES_WITH_ICON = [STATUSES.success, STATUSES.error];
+const ICON_SIZE = exports.ICON_SIZE = 15;

package/dist/components/UTValidation/index.js

@@ -1 +1,89 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.validationDataProptypes=exports.default=void 0;var _react=_interopRequireDefault(require("react")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_propTypes=require("prop-types"),_componentUtils=require("../../utils/componentUtils"),_UTIcon=_interopRequireDefault(require("../UTIcon")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_constants=require("./constants"),_utils=require("./utils"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTValidation=_ref=>{let{classes:classes,className:className,dataTestId:dataTestId,validationData:validationData=[]}=_ref;if((0,_isEmpty.default)(validationData))return null;return _react.default.createElement("div",{className:"".concat(className," ").concat(_stylesModule.default.container)},validationData.map((_ref2,index)=>{let{items:items,status:status=_constants.STATUSES.default,title:title}=_ref2;return _react.default.createElement("div",{key:(0,_utils.generateKey)({items:items,status:status,title:title},index),className:_stylesModule.default.validationContainer},title&&_react.default.createElement(_UTLabel.default,{colorTheme:_constants.STATUS_COLOR_MAPPER[status],variant:"small"},title),_react.default.createElement("div",{className:_stylesModule.default.itemsContainer},items.map((_ref3,itemIndex)=>{let{text:text,status:itemStatus=_constants.STATUSES.default,withIcon:withIcon=!0}=_ref3;return _react.default.createElement("div",{key:(0,_utils.generateItemKey)({text:text,status:itemStatus},itemIndex),className:_stylesModule.default.itemContainer,"data-testid":"".concat(dataTestId,".").concat(index,".").concat(itemIndex)},withIcon&&_react.default.createElement("div",{className:"".concat(_stylesModule.default.iconContainer," ").concat(classes["icon".concat((0,_componentUtils.capitalize)(itemStatus))])},(status=>_constants.STATUSES_WITH_ICON.includes(status))(itemStatus)&&_react.default.createElement(_UTIcon.default,{colorTheme:itemStatus,name:_constants.ICON_MAPPER[itemStatus],size:_constants.ICON_SIZE})),_react.default.createElement(_UTLabel.default,{colorTheme:_constants.STATUS_COLOR_MAPPER[itemStatus],variant:"small"},text))})))}))},validationDataProptypes=exports.validationDataProptypes=(0,_propTypes.arrayOf)((0,_propTypes.shape)({items:(0,_propTypes.arrayOf)((0,_propTypes.shape)({status:_propTypes.string,text:_propTypes.string,withIcon:_propTypes.bool})),status:_propTypes.string,title:_propTypes.string}));UTValidation.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),className:_propTypes.string,dataTestId:_propTypes.string,validationData:validationDataProptypes};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTValidation);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validationDataProptypes = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _propTypes = require("prop-types");
+var _componentUtils = require("../../utils/componentUtils");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _constants = require("./constants");
+var _utils = require("./utils");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTValidation = _ref => {
+  let {
+    classes,
+    className,
+    dataTestId,
+    validationData = []
+  } = _ref;
+  if ((0, _isEmpty.default)(validationData)) return null;
+  const showIcon = status => _constants.STATUSES_WITH_ICON.includes(status);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(className, " ").concat(_stylesModule.default.container)
+  }, validationData.map((_ref2, index) => {
+    let {
+      items,
+      status = _constants.STATUSES.default,
+      title
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: (0, _utils.generateKey)({
+        items,
+        status,
+        title
+      }, index),
+      className: _stylesModule.default.validationContainer
+    }, title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: _constants.STATUS_COLOR_MAPPER[status],
+      variant: "small"
+    }, title), /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.itemsContainer
+    }, items.map((_ref3, itemIndex) => {
+      let {
+        text,
+        status: itemStatus = _constants.STATUSES.default,
+        withIcon = true
+      } = _ref3;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: (0, _utils.generateItemKey)({
+          text,
+          status: itemStatus
+        }, itemIndex),
+        className: _stylesModule.default.itemContainer,
+        "data-testid": "".concat(dataTestId, ".").concat(index, ".").concat(itemIndex)
+      }, withIcon && /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_stylesModule.default.iconContainer, " ").concat(classes["icon".concat((0, _componentUtils.capitalize)(itemStatus))])
+      }, showIcon(itemStatus) && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+        colorTheme: itemStatus,
+        name: _constants.ICON_MAPPER[itemStatus],
+        size: _constants.ICON_SIZE
+      })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        colorTheme: _constants.STATUS_COLOR_MAPPER[itemStatus],
+        variant: "small"
+      }, text));
+    })));
+  }));
+};
+const validationDataProptypes = exports.validationDataProptypes = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    status: _propTypes.string,
+    text: _propTypes.string,
+    withIcon: _propTypes.bool
+  })),
+  status: _propTypes.string,
+  title: _propTypes.string
+}));
+UTValidation.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  className: _propTypes.string,
+  dataTestId: _propTypes.string,
+  validationData: validationDataProptypes
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTValidation);

package/dist/components/UTValidation/theme.js

@@ -1 +1,25 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _constants=require("./constants");const variantsColorTheme=(colorTheme,theme)=>theme.Palette[colorTheme],retrieveStyle=_ref=>{let{theme:theme}=_ref;return{iconSuccess:{backgroundColor:variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.success],theme)["01"]},iconError:{backgroundColor:variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.error],theme)["01"]},iconDefault:{backgroundColor:variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.default],theme)["04"]}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _constants = require("./constants");
+const variantsColorTheme = (colorTheme, theme) => theme.Palette[colorTheme];
+const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    iconSuccess: {
+      backgroundColor: variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.success], theme)['01']
+    },
+    iconError: {
+      backgroundColor: variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.error], theme)['01']
+    },
+    iconDefault: {
+      backgroundColor: variantsColorTheme(_constants.ICON_STATUS_COLOR_MAPPER[_constants.STATUSES.default], theme)['04']
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTValidation/utils.js

@@ -1 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.generateKey=exports.generateItemKey=exports.formatErrorToValidation=void 0;const generateKey=(data,index)=>{const titleKey=data.title||"",statusKey=data.status||"",itemsKey=data.items.map(item=>item.text).join("-");return"".concat(index,"-").concat(titleKey,"-").concat(statusKey,"-").concat(itemsKey)};exports.generateKey=generateKey;const generateItemKey=(item,index)=>"".concat(index,"-").concat(item.status,"-").concat(item.text);exports.generateItemKey=generateItemKey;const formatErrorToValidation=(error,options)=>[{items:[{text:error,status:"error",withIcon:null==options?void 0:options.withIcon}]}];exports.formatErrorToValidation=formatErrorToValidation;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateKey = exports.generateItemKey = exports.formatErrorToValidation = void 0;
+const generateKey = (data, index) => {
+  const titleKey = data.title || '';
+  const statusKey = data.status || '';
+  const itemsKey = data.items.map(item => item.text).join('-');
+  return "".concat(index, "-").concat(titleKey, "-").concat(statusKey, "-").concat(itemsKey);
+};
+exports.generateKey = generateKey;
+const generateItemKey = (item, index) => "".concat(index, "-").concat(item.status, "-").concat(item.text);
+exports.generateItemKey = generateItemKey;
+const formatErrorToValidation = (error, options) => [{
+  items: [{
+    text: error,
+    status: 'error',
+    withIcon: options === null || options === void 0 ? void 0 : options.withIcon
+  }]
+}];
+exports.formatErrorToValidation = formatErrorToValidation;