@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTStatusMessage/stories/storiesConstants.js

@@ -0,0 +1,295 @@
+import { COLOR_THEMES } from '../constants';
+export const COMMON_ARG_TYPES = {
+  children: {
+    control: false,
+    description: 'Contenido adicional renderizado dentro del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del componente.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del componente.',
+    options: Object.values(COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: COLOR_THEMES.DEFAULT
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  description: {
+    control: 'text',
+    description: 'Texto descriptivo secundario. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  descriptionProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  HeaderComponent: {
+    control: false,
+    description: 'Componente personalizado para reemplazar el header (ícono) por defecto.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'elementType'
+      }
+    }
+  },
+  helpText: {
+    control: 'text',
+    description: 'Texto de ayuda adicional mostrado debajo de la descripción.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  helpTextProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel de helpText.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  icon: {
+    control: 'text',
+    description: 'Nombre del ícono Tabler a mostrar en el header.',
+    table: {
+      defaultValue: {
+        summary: 'IconInfoCircle'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  iconProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTIcon.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  iconSize: {
+    control: 'number',
+    description: 'Tamaño del ícono en píxeles. Mapea a `iconProps.size`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra un spinner en lugar del contenido.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  primaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón primario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  primaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  primaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción primaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  secondaryAction: {
+    control: false,
+    description: 'Callback ejecutado al hacer clic en el botón secundario.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  secondaryActionProps: {
+    control: 'object',
+    description: 'Props adicionales para el UTButton de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  secondaryActionText: {
+    control: 'text',
+    description: 'Texto del botón de acción secundaria.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  showHeader: {
+    control: 'boolean',
+    description: 'Si es `true`, muestra el header con el ícono o el HeaderComponent.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  title: {
+    control: 'text',
+    description: 'Título principal del mensaje de estado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  titleProps: {
+    control: false,
+    description: 'Props adicionales para el componente UTLabel del título.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  showPrimaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción primaria en el Playground. Mapea a `primaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  showSecondaryAction: {
+    control: 'boolean',
+    description: 'Activa o desactiva el botón de acción secundaria en el Playground. Mapea a `secondaryAction`.',
+    table: {
+      defaultValue: {
+        summary: true
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};
+export const COMMON_ARGS = {
+  colorTheme: COLOR_THEMES.DEFAULT,
+  loading: false,
+  showHeader: true
+};
+export const COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'descriptionProps', 'HeaderComponent', 'helpTextProps', 'iconProps', 'primaryAction', 'secondaryAction', 'titleProps']
+  },
+  docs: {
+    description: {
+      component: 'Componente de mensaje de estado que muestra un ícono, título, descripción y acciones opcionales. Soporta múltiples temas de color y un estado de carga.'
+    }
+  }
+};

package/dist/esm/components/UTStatusMessage/styles.module.scss

@@ -0,0 +1,37 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  grid-gap: 24px;
+  justify-content: center;
+  width: 100%;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  grid-gap: 24px;
+  justify-content: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.section {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+  justify-content: center;
+}
+
+.label {
+  text-align: center;
+}
+
+.image {
+  height: 200px;
+  width: 200px;
+}

package/dist/esm/components/UTStatusMessage/theme.js

@@ -0,0 +1,67 @@
+import { COLOR_THEMES } from './constants';
+const getIconBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette0, _theme$Palette1, _theme$Palette10, _theme$Palette11;
+  return {
+    [COLOR_THEMES.ACCENT]: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01']) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['01']),
+    [COLOR_THEMES.DEFAULT]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['03'],
+    [COLOR_THEMES.ERROR]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.error['01'],
+    [COLOR_THEMES.GRADIENT]: 'light',
+    [COLOR_THEMES.GRAY]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03'],
+    [COLOR_THEMES.IDENTITY_1]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['01'],
+    [COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
+    [COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
+    [COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
+    [COLOR_THEMES.INFO]: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.information['01'],
+    [COLOR_THEMES.NEGATIVE]: (_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1.light['01'],
+    [COLOR_THEMES.SUCCESS]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.success['01'],
+    [COLOR_THEMES.WARNING]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.warning['01']
+  }[colorTheme];
+};
+const getBannerBackgroundColor = (colorTheme, theme) => {
+  var _theme$Palette12, _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
+  return {
+    [COLOR_THEMES.ACCENT]: ((_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 || (_theme$Palette12 = _theme$Palette12.actions) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.accent['03']) || ((_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03']),
+    [COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
+    [COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
+    [COLOR_THEMES.GRADIENT]: null,
+    [COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
+    [COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
+    [COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
+    [COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
+    [COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
+    [COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
+    [COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
+    [COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
+    [COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
+  }[colorTheme];
+};
+export const retrieveStyle = _ref => {
+  var _theme$Palette25, _theme$Palette26;
+  let {
+    showBanner = true,
+    theme,
+    colorTheme = COLOR_THEMES.DEFAULT
+  } = _ref;
+  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
+  return {
+    iconContainer: {
+      alignItems: 'center',
+      background: colorTheme === COLOR_THEMES.GRADIENT && !showBanner ? gradient : '',
+      backgroundColor: getIconBackgroundColor(colorTheme, theme),
+      borderRadius: 100,
+      display: 'flex',
+      height: 56,
+      justifyContent: 'center',
+      width: 56
+    },
+    banner: {
+      alignItems: 'center',
+      background: colorTheme === COLOR_THEMES.GRADIENT && showBanner ? gradient : '',
+      backgroundColor: showBanner ? getBannerBackgroundColor(colorTheme, theme) : 'transparent',
+      display: 'flex',
+      justifyContent: 'center',
+      padding: '12px 0',
+      width: '100%'
+    }
+  };
+};

package/dist/esm/components/UTStepper/README.md

@@ -0,0 +1,22 @@
+# UTStepper
+
+### Description
+
+This components displays a chain of rounded icons which can be gradually completed and represent progress through a series of steps
+
+## Props
+
+| Name         | Type             | Default | Description                                                                                                                                                                                                                                                                                   |
+| ------------ | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| classes      | object of string |         | Classes returned by UTStepper's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                  |
+| classNames   | object of string |         | Additional classes.                                                                                                                                                                                                                                                                           |
+| currentStage | number           |         | Represents which stage id will be active.                                                                                                                                                                                                                                                     |
+| stages       | stageType        |         | Defines the structure of the stepper. It is required for each stage inside the array given to have a property `id`, the indicator will be ordered by id. Aditionally each stage is able to add a property `label` which will display at the bottom of the corresponding indicator.            |
+| stepperSize  | 'S' \| 'L'       | 'S'     | Variant that defines whether to use small icons for the stepper indicator or large ones. It is required for the 'L' variant that every stage has a custom icon defined. If size is set to 'L' but there's at least one stage without a defined custom icon the size will be defaulted to 'S'. |
+| withPadding  | bool             |         | If false, the stepper indicator will occupy the full width of the container, rendering the first and last stage's label aligned towards the center.                                                                                                                                           |
+
+### Custom types
+
+| Type      | Shape                                                     |
+| --------- | --------------------------------------------------------- |
+| stageType | arrayOf( `{ id: number, label: string, Icon: element }` ) |

package/dist/esm/components/UTStepper/components/Connectors/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { bool, func, number } from 'prop-types';
+import { classesType } from '../../../../types/commonTypes';
+import styles from './styles.module.scss';
+const Connectors = _ref => {
+  let {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  } = _ref;
+  const connectorMaxWidth = "".concat(100 / (numberOfSteps - 1), "%");
+  const containerMaxWidth = "".concat(100 - 100 / numberOfSteps, "%");
+  const connectors = new Array(numberOfSteps - 1).fill(null).map((key, index) => /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(styles.connector, " ").concat(classes.connector, " ").concat(isCompleted(index + 1) && classes.coloredProgress, "\n      ")
+    // eslint-disable-next-line react/no-array-index-key
+    ,
+    key: "connector_".concat(index),
+    style: {
+      maxWidth: withPadding ? connectorMaxWidth : null,
+      height: 2
+    }
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.connectorContainer),
+    style: {
+      maxWidth: withPadding ? containerMaxWidth : null
+    }
+  }, connectors));
+};
+Connectors.propTypes = {
+  classes: classesType,
+  isCompleted: func,
+  numberOfSteps: number,
+  withPadding: bool
+};
+export default Connectors;

package/dist/esm/components/UTStepper/components/Connectors/styles.module.scss

@@ -0,0 +1,19 @@
+.wrapper {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  transform: translateY(50%);
+  width: 100%;
+}
+
+.connectorContainer {
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+
+.connector {
+  height: 1px;
+  transition: all 0.5s;
+  width: 100vw;
+}

package/dist/esm/components/UTStepper/components/Step/assets/check.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L5.35355 8.85355C5.15829 9.04882 4.84171 9.04882 4.64645 8.85355L2.14645 6.35355C1.95118 6.15829 1.95118 5.84171 2.14645 5.64645C2.34171 5.45118 2.65829 5.45118 2.85355 5.64645L5 7.79289L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z"/>
+</g>
+</svg>

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

@@ -0,0 +1,61 @@
+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 { elementType, func, number, object, shape, string } from 'prop-types';
+import React from 'react';
+import UTLabel from '../../../UTLabel';
+import { classesType } from '../../../../types/commonTypes';
+import { SIZES } from '../../constants';
+import { useScreenSize } from '../../../../utils/useScreenSize';
+var CompletedIcon = function CompletedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "M10.354 3.146a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.793l4.646-4.647a.5.5 0 0 1 .708 0Z"
+  }));
+};
+CompletedIcon.defaultProps = {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import styles from './styles.module.scss';
+const Step = _ref => {
+  let {
+    classes,
+    isActive,
+    isCompleted,
+    size,
+    stage,
+    stepperLabelProps = {}
+  } = _ref;
+  const stageCompleted = isCompleted(stage === null || stage === void 0 ? void 0 : stage.id);
+  const stageActive = isActive(stage === null || stage === void 0 ? void 0 : stage.id);
+  const CustomIcon = stage.Icon;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "\n        ".concat(styles["stepContainer".concat(size)], " ").concat(classes["stepContainer".concat(size)], "\n        ").concat(stageActive ? classes["active".concat(size)] : '', " \n        ").concat(stageCompleted ? classes.completed : '', "\n      ")
+  }, stageCompleted && /*#__PURE__*/React.createElement(CompletedIcon, {
+    className: styles["checkIcon".concat(size)]
+  }), !stageCompleted && size === SIZES.LARGE && /*#__PURE__*/React.createElement(CustomIcon, {
+    className: "\n            ".concat(stageActive ? classes.activeIcon : classes.nextIcxon, " \n            ").concat(styles["customIcon".concat(size)], "\n          ")
+  }), (stageActive || !isMobileOrTablet && !(stepperLabelProps !== null && stepperLabelProps !== void 0 && stepperLabelProps.onlyDisplayActiveStepLabel)) && /*#__PURE__*/React.createElement(UTLabel, _extends({
+    variant: "xsmall",
+    className: "\n            ".concat(styles.label, "\n            ").concat(stageActive || stageCompleted ? classes.coloredLabel : '', "\n        "),
+    colorTheme: !stageActive && !stageCompleted ? 'gray' : null
+  }, stepperLabelProps), stage.label));
+};
+Step.propTypes = {
+  classes: classesType,
+  isActive: func,
+  isCompleted: func,
+  size: string,
+  stage: shape({
+    id: number,
+    label: string,
+    Icon: elementType
+  }),
+  stepperLabelProps: object
+};
+export default Step;

package/dist/esm/components/UTStepper/components/Step/styles.module.scss

@@ -0,0 +1,67 @@
+@use '../../../../scss/variables/colors.module.scss' as *;
+
+$vertical-label-offset: 10px;
+
+%stepContainer {
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  transition: all 0.5s;
+  z-index: 2;
+}
+
+.stepContainerS {
+  @extend %stepContainer;
+  border-style: solid;
+  border-width: 4px;
+  height: 8px;
+  width: 8px;
+}
+
+.stepContainerL {
+  @extend %stepContainer;
+  height: 32px;
+  width: 32px;
+}
+
+%customIcon {
+  position: absolute;
+  top: 4px;
+}
+
+.customIconS {
+  @extend %customIcon;
+  height: 12px;
+  width: 12px;
+}
+
+.customIconL {
+  @extend %customIcon;
+  height: 24px;
+  width: 24px;
+}
+
+.label {
+  bottom: 0;
+  position: absolute;
+  transform: translateY(calc(100% + #{$vertical-label-offset}));
+  white-space: nowrap;
+}
+
+%checkIcon {
+  fill: $white;
+  position: absolute;
+}
+
+.checkIconS {
+  @extend %checkIcon;
+  bottom: -2px;
+}
+
+.checkIconL {
+  @extend %checkIcon;
+  bottom: 4px;
+  height: 24px;
+  width: 24px;
+}

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

@@ -0,0 +1,4 @@
+export const SIZES = {
+  LARGE: 'L',
+  SMALL: 'S'
+};

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

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { bool, number, object, objectOf, oneOf, string } from 'prop-types';
+import WithTheme from '../WithTheme';
+import { mergeClasses } from '../../utils/classesUtils';
+import Step from './components/Step';
+import Connectors from './components/Connectors';
+import styles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+import { SIZES } from './constants';
+const UTStepper = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    currentStage,
+    stages,
+    stepperLabelProps = {},
+    stepperSize,
+    withPadding
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const orderedStages = Object.values(stages).sort((a, b) => (a === null || a === void 0 ? void 0 : a.id) - (b === null || b === void 0 ? void 0 : b.id));
+  const numberOfSteps = orderedStages.length;
+  const size = stepperSize === SIZES.LARGE && orderedStages.every(stage => stage.Icon) ? SIZES.LARGE : SIZES.SMALL;
+  const isCompleted = stageNumber => stageNumber < currentStage;
+  const isActive = stageNumber => stageNumber === currentStage;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.stepper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: withPadding ? styles.paddingContainer : styles.container
+  }, orderedStages.map(stage => /*#__PURE__*/React.createElement(Step, {
+    key: stage.id,
+    classes,
+    withPadding,
+    size,
+    isCompleted,
+    isActive,
+    stage,
+    stepperLabelProps
+  })), /*#__PURE__*/React.createElement(Connectors, {
+    classes,
+    withPadding,
+    isCompleted,
+    numberOfSteps
+  })));
+};
+UTStepper.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  currentStage: number,
+  stages: object,
+  stepperLabelProps: object,
+  stepperSize: oneOf([SIZES.LARGE, SIZES.SMALL]),
+  withPadding: bool
+};
+export default WithTheme(retrieveStyle)(UTStepper);