@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTTracker/UTTracker.stories.js

@@ -0,0 +1,325 @@
+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); }
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+import UTTracker from '.';
+const subSteps = [{
+  id: 1,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 2,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 3,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}];
+const defaultSteps = [{
+  id: 1,
+  subSteps,
+  title: 'Solicitud confirmada'
+}, {
+  id: 2,
+  subSteps,
+  title: 'En preparación'
+}, {
+  id: 3,
+  title: 'En camino'
+}, {
+  description: 'Fecha estimada 07 de agosto',
+  id: 4,
+  title: 'Entregado'
+}];
+export default {
+  args: {
+    currentStep: 2,
+    description: 'Hora estimada de entrega 7:00 PM',
+    detailsTab: {
+      enabled: true,
+      title: 'Ver Detalle'
+    },
+    mode: CARD,
+    steps: defaultSteps,
+    subtitle: '',
+    title: 'Pedido en curso',
+    variant: STANDARD
+  },
+  argTypes: {
+    classes: {
+      control: false,
+      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Objeto de clases CSS para override de estilos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: 'Número del paso activo actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del subtítulo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    detailsTab: {
+      control: 'object',
+      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ enabled: boolean, title: string }'
+        }
+      }
+    },
+    mode: {
+      control: 'inline-radio',
+      description: 'Determina el modo visual del componente.',
+      options: [CARD, FLAT],
+      table: {
+        defaultValue: {
+          summary: CARD
+        },
+        type: {
+          summary: joinArgTypes([CARD, FLAT])
+        }
+      }
+    },
+    steps: {
+      control: 'object',
+      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Determina la variante visual del componente.',
+      options: [STANDARD, ERROR],
+      table: {
+        defaultValue: {
+          summary: STANDARD
+        },
+        type: {
+          summary: joinArgTypes([STANDARD, ERROR])
+        }
+      }
+    }
+  },
+  component: UTTracker,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTTracker'
+};
+export const Default = {
+  name: 'Playground'
+};
+export const CardMode = {
+  args: {
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Modo Card',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
+      }
+    }
+  }
+};
+export const FlatMode = {
+  args: {
+    mode: FLAT,
+    variant: STANDARD
+  },
+  name: 'Modo Flat',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
+      }
+    }
+  }
+};
+export const ErrorVariant = {
+  args: {
+    description: 'Quería recargas catalíticas y pedí normales',
+    mode: CARD,
+    subtitle: 'Me equivoqué en el pedido',
+    variant: ERROR
+  },
+  name: 'Variante Error',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
+      }
+    }
+  }
+};
+export const WithoutDetailsTab = {
+  args: {
+    detailsTab: undefined,
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Sin Pestaña de Detalle',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
+      }
+    }
+  }
+};
+export const WithoutTitle = {
+  args: {
+    mode: CARD,
+    title: undefined,
+    variant: STANDARD
+  },
+  name: 'Sin Título',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin título.'
+      }
+    }
+  }
+};
+export const AllModes = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, [CARD, FLAT].map(mode => /*#__PURE__*/React.createElement("div", {
+    key: mode,
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    mode: mode,
+    title: "Modo: ".concat(mode)
+  }))))),
+  name: 'Todos los Modos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
+      }
+    }
+  }
+};
+export const AllVariants = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Hora estimada de entrega 7:00 PM",
+    subtitle: "",
+    title: "Variante: standard",
+    variant: STANDARD
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
+    subtitle: "Me equivoqu\xE9 en el pedido",
+    title: "Variante: error",
+    variant: ERROR
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
+      }
+    }
+  }
+};

package/dist/esm/components/UTTracker/components/Step/index.js

@@ -1 +1,59 @@
-import React from"react";import{bool,func,object}from"prop-types";import UTLabel from"../../../UTLabel";import{StepPropTypes,VariantPropTypes}from"../../propTypes";import UTIcon from"../../../UTIcon";import{ERROR}from"../../constants";import{mergeClasses}from"../../../../utils/classesUtils";import{getLabelTheme}from"../../utils";import ownStyles from"./styles.module.scss";const ERROR_ICON_SIZE=16,Step=_ref=>{let{first:first,isActive:isActive,isCompleted:isCompleted,step:step,classes:classes={},variant:variant}=_ref;const stepCompleted=isCompleted(step.id),stepActive=isActive(step.id),themedStyles=mergeClasses(classes,ownStyles);return React.createElement("div",{className:"\n     ".concat(themedStyles.outerContainer,"\n      ").concat(stepActive&&themedStyles.activeOuterContainer,"\n      ").concat(first&&ownStyles.stepMargin,"\n    ")},React.createElement("div",{className:themedStyles.containerStep},React.createElement("div",{className:"\n        ".concat(themedStyles.container,"\n        ").concat(classes.containerStep,"\n        ").concat(stepCompleted&&classes.completedLight,"\n        ").concat(stepActive&&classes.activeContainer,"\n        ").concat(stepActive&&variant===ERROR&&classes.fullContainer,"\n      ")},React.createElement("div",{className:"\n          ".concat(themedStyles.innerContainer,"\n          ").concat(classes.innerContainer,"\n          ").concat(stepCompleted&&classes.completedInnerContainer,"\n          ").concat(stepActive&&classes.activeInnerContainer,"\n          ").concat(stepCompleted&&themedStyles.completedOuterContainer,"\n        ")},stepActive&&variant===ERROR&&React.createElement(UTIcon,{colorTheme:"light",name:"IconX",size:16,className:themedStyles.icon})))),React.createElement("div",{className:"".concat(themedStyles.textContainer," ").concat(stepCompleted&&themedStyles.completedOuterContainer)},step.title&&React.createElement(UTLabel,{className:"".concat(stepCompleted?themedStyles.completedTitleColor:stepActive?themedStyles.activeTitleColor:themedStyles.titleColor),colorTheme:stepActive?getLabelTheme(variant):"dark",variant:"small",weight:"medium"},step.title),step.subtitle&&React.createElement(UTLabel,{className:"".concat(themedStyles.subtitleColor," ").concat(themedStyles.subtitle)},step.subtitle),step.description&&React.createElement(UTLabel,{variant:"small",colorTheme:"gray",className:themedStyles.description},step.description)))};Step.propTypes={classes:object,first:bool,isActive:func,isCompleted:func,step:StepPropTypes,variant:VariantPropTypes};export default Step;
+import React from 'react';
+import { bool, func, object } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import { StepPropTypes, VariantPropTypes } from '../../propTypes';
+import UTIcon from '../../../UTIcon';
+import { ERROR } from '../../constants';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { getLabelTheme } from '../../utils';
+import ownStyles from './styles.module.scss';
+const ERROR_ICON_SIZE = 16;
+const Step = _ref => {
+  let {
+    first,
+    isActive,
+    isCompleted,
+    step,
+    classes = {},
+    variant
+  } = _ref;
+  const stepCompleted = isCompleted(step.id);
+  const stepActive = isActive(step.id);
+  const themedStyles = mergeClasses(classes, ownStyles);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "\n     ".concat(themedStyles.outerContainer, "\n      ").concat(stepActive && themedStyles.activeOuterContainer, "\n      ").concat(first && ownStyles.stepMargin, "\n    ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: themedStyles.containerStep
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(themedStyles.container, "\n        ").concat(classes.containerStep, "\n        ").concat(stepCompleted && classes.completedLight, "\n        ").concat(stepActive && classes.activeContainer, "\n        ").concat(stepActive && variant === ERROR && classes.fullContainer, "\n      ")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "\n          ".concat(themedStyles.innerContainer, "\n          ").concat(classes.innerContainer, "\n          ").concat(stepCompleted && classes.completedInnerContainer, "\n          ").concat(stepActive && classes.activeInnerContainer, "\n          ").concat(stepCompleted && themedStyles.completedOuterContainer, "\n        ")
+  }, stepActive && variant === ERROR && /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "light",
+    name: "IconX",
+    size: ERROR_ICON_SIZE,
+    className: themedStyles.icon
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(themedStyles.textContainer, " ").concat(stepCompleted && themedStyles.completedOuterContainer)
+  }, step.title && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(stepCompleted ? themedStyles.completedTitleColor : stepActive ? themedStyles.activeTitleColor : themedStyles.titleColor),
+    colorTheme: stepActive ? getLabelTheme(variant) : 'dark',
+    variant: "small",
+    weight: "medium"
+  }, step.title), step.subtitle && /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(themedStyles.subtitleColor, " ").concat(themedStyles.subtitle)
+  }, step.subtitle), step.description && /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "small",
+    colorTheme: "gray",
+    className: themedStyles.description
+  }, step.description)));
+};
+Step.propTypes = {
+  classes: object,
+  first: bool,
+  isActive: func,
+  isCompleted: func,
+  step: StepPropTypes,
+  variant: VariantPropTypes
+};
+export default Step;

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

@@ -1 +1,31 @@
-import React from"react";import{string}from"prop-types";import merge from"lodash/merge";import UTLabel from"../../../UTLabel";import ownStyles from"./styles.module.scss";const SubStep=_ref=>{let{style:style,subtitle:subtitle,title:title}=_ref;const themedStyles=merge({},ownStyles,style);return React.createElement("div",{className:themedStyles.container},React.createElement(UTLabel,{colorTheme:"gray",className:themedStyles.titleColor,variant:"small"},title),React.createElement(UTLabel,{colorTheme:"gray",className:themedStyles.subtitleColor,variant:"small",shade:"01"},subtitle))};SubStep.propTypes={style:string,subtitle:string,title:string};export default SubStep;
+import React from 'react';
+import { string } from 'prop-types';
+import merge from 'lodash/merge';
+import UTLabel from '../../../UTLabel';
+import ownStyles from './styles.module.scss';
+const SubStep = _ref => {
+  let {
+    style,
+    subtitle,
+    title
+  } = _ref;
+  const themedStyles = merge({}, ownStyles, style);
+  return /*#__PURE__*/React.createElement("div", {
+    className: themedStyles.container
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: themedStyles.titleColor,
+    variant: "small"
+  }, title), /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "gray",
+    className: themedStyles.subtitleColor,
+    variant: "small",
+    shade: "01"
+  }, subtitle));
+};
+SubStep.propTypes = {
+  style: string,
+  subtitle: string,
+  title: string
+};
+export default SubStep;

package/dist/esm/components/UTTracker/constants.js

@@ -1 +1,33 @@
-export const CARD="card";export const FLAT="flat";export const STANDARD="standard";export const ERROR="error";export const OVAL_SIZE=20;export const DETAILS_ICON_CARD_SIZE=20;export const DETAILS_ICON_FLAT_SIZE=24;export const ownModeStyles={[CARD]:{container:{backgroundColor:"white",elevation:2,shadowColor:"black",shadowOffset:{height:3,width:0},shadowOpacity:.1}},[FLAT]:{container:{backgroundColor:"transparent"}}};export const VARIANTS={error:"error",standar:"standar"};export const DEFAULT_PROPS={variant:"standar"};
+export const CARD = 'card';
+export const FLAT = 'flat';
+export const STANDARD = 'standard';
+export const ERROR = 'error';
+export const OVAL_SIZE = 20;
+export const DETAILS_ICON_CARD_SIZE = 20;
+export const DETAILS_ICON_FLAT_SIZE = 24;
+export const ownModeStyles = {
+  [CARD]: {
+    container: {
+      backgroundColor: 'white',
+      elevation: 2,
+      shadowColor: 'black',
+      shadowOffset: {
+        height: 3,
+        width: 0
+      },
+      shadowOpacity: 0.1
+    }
+  },
+  [FLAT]: {
+    container: {
+      backgroundColor: 'transparent'
+    }
+  }
+};
+export const VARIANTS = {
+  error: 'error',
+  standar: 'standar'
+};
+export const DEFAULT_PROPS = {
+  variant: 'standar'
+};

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

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

package/dist/esm/components/UTTracker/propTypes.js

@@ -1 +1,20 @@
-import{arrayOf,bool,number,oneOf,shape,string}from"prop-types";import{CARD,ERROR,FLAT,STANDARD}from"./constants";export const SubStepPropTypes=shape({id:number,subtitle:string,title:string});export const StepPropTypes=shape({id:number,subSteps:arrayOf(SubStepPropTypes),subtitle:string,title:string});export const StepsPropTypes=arrayOf(StepPropTypes);export const DetailsTabPropTypes=shape({enabled:bool,title:string});export const ModePropTypes=oneOf([CARD,FLAT]);export const VariantPropTypes=oneOf([STANDARD,ERROR]);
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+export const SubStepPropTypes = shape({
+  id: number,
+  subtitle: string,
+  title: string
+});
+export const StepPropTypes = shape({
+  id: number,
+  subSteps: arrayOf(SubStepPropTypes),
+  subtitle: string,
+  title: string
+});
+export const StepsPropTypes = arrayOf(StepPropTypes);
+export const DetailsTabPropTypes = shape({
+  enabled: bool,
+  title: string
+});
+export const ModePropTypes = oneOf([CARD, FLAT]);
+export const VariantPropTypes = oneOf([STANDARD, ERROR]);