@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTWorkflowContainer/versions/V0/components/ActionButton/styles.module.scss

@@ -0,0 +1,4 @@
+.hiddenButton {
+  pointer-events: none;
+  visibility: hidden;
+}

package/dist/esm/components/UTWorkflowContainer/versions/V0/constants.js

@@ -0,0 +1,3 @@
+export const NEXT = 'Siguiente';
+export const BACK = 'Atrás';
+export const STEP = 'Paso';

package/dist/esm/components/UTWorkflowContainer/versions/V0/hooks/use-previous.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from 'react';
+export const usePrevious = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};

package/dist/esm/components/UTWorkflowContainer/versions/V0/index.js

@@ -0,0 +1,142 @@
+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, { useEffect, useMemo, useState } from 'react';
+import { bool, element, func, number, objectOf, oneOfType, shape, string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import UTProgressBar from '../../../UTProgressBar';
+import UTWizard from '../../../UTWizard';
+import WithTheme from '../../../WithTheme';
+import { TEST_IDS } from '../../../../constants/testIds';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import ActionButton from './components/ActionButton';
+import styles from './styles.module.scss';
+import { BACK, NEXT, STEP } from './constants';
+import { buttonTypes } from './types';
+import { retrieveStyle } from './theme';
+import { usePrevious } from './hooks/use-previous';
+const {
+  workflowContainer
+} = TEST_IDS;
+const UTWorkflowContainer = _ref => {
+  let {
+    backButton,
+    children,
+    classNames,
+    classes: themeClasses = {},
+    currentStep,
+    extraActions,
+    forceStepNumber = false,
+    hideStepCounter,
+    nextButton,
+    onExit,
+    smallButtons = false,
+    stepCounter: StepCounter,
+    stepsCount,
+    subtitle,
+    subtitleDataTestId = workflowContainer.header.subtitle,
+    title,
+    titleDataTestId = workflowContainer.header.tagline,
+    TitleIcon,
+    withIcon = false,
+    wizardConfig = {}
+  } = _ref;
+  useEffect(() => () => onExit && onExit(), []);
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const BackIcon = backButton.Icon || 'IconArrowLeft';
+  const NextIcon = nextButton.Icon || 'IconArrowRight';
+  const previousStepNumber = usePrevious(currentStep);
+  const [visibleStepNumber, setVisibleStepNumber] = useState(currentStep);
+  const skippedStepsQuantity = currentStep - visibleStepNumber;
+  useEffect(() => {
+    if (previousStepNumber) setVisibleStepNumber(visibleStepNumber + Math.sign(currentStep - previousStepNumber));
+  }, [currentStep]);
+  const hideActions = (currentStep === 1 && !backButton.isVisible || backButton.isHidden) && hideStepCounter && nextButton.isHidden;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.progress
+  }, stepsCount && /*#__PURE__*/React.createElement(UTProgressBar, {
+    classNames: {
+      colorPrimary: classes.colorPrimary,
+      barColorPrimary: classes.barColorPrimary
+    },
+    value: visibleStepNumber / (stepsCount - skippedStepsQuantity) * 100
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.workflowContainer, " ").concat(styles.workflowContainer)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "\n            ".concat(styles.actionsContainer, "\n            ").concat(classes.actionsContainer, "\n            ").concat(hideActions ? styles.hidden : '')
+  }, /*#__PURE__*/React.createElement(ActionButton, {
+    button: backButton,
+    buttonProps: {
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && BackIcon,
+      iconPlacement: 'left',
+      variant: 'semitransparent'
+    },
+    className: "".concat(classes.backButton, " ").concat(styles.backButton),
+    isHidden: currentStep === 1 && !backButton.isVisible || backButton.isHidden
+  }, !smallButtons && (backButton.label || BACK)), !hideStepCounter && visibleStepNumber && (StepCounter ? /*#__PURE__*/React.createElement(StepCounter, null) : /*#__PURE__*/React.createElement(UTLabel, {
+    className: "".concat(styles.stepInfo, " ").concat(classes.stepCounter),
+    weight: "medium"
+  }, "".concat(STEP, " ").concat(forceStepNumber ? currentStep : visibleStepNumber))), extraActions, /*#__PURE__*/React.createElement(ActionButton, {
+    button: nextButton,
+    isHidden: nextButton.isHidden,
+    buttonProps: {
+      colorTheme: 'primary',
+      Icon: (withIcon || smallButtons) && NextIcon,
+      iconPlacement: 'right'
+    },
+    className: "".concat(classes.nextButton, " ").concat(styles.nextButton)
+  }, !smallButtons && (nextButton.label || NEXT))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.workflowContent, " ").concat(classes.content)
+  }, (title || subtitle) && /*#__PURE__*/React.createElement("div", {
+    className: classes.titles
+  }, title && /*#__PURE__*/React.createElement("div", {
+    className: styles.titleAndTitleIconContainer
+  }, TitleIcon && /*#__PURE__*/React.createElement(TitleIcon, {
+    className: classes.titleIcon
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    dataTestId: subtitleDataTestId,
+    variant: "title2",
+    weight: "medium",
+    withMarkdown: true
+  }, title)), subtitle && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.subtitle,
+    colorTheme: "gray",
+    dataTestId: titleDataTestId,
+    withMarkdown: true
+  }, subtitle)), children), /*#__PURE__*/React.createElement(UTWizard, _extends({
+    classNames: {
+      container: styles.wizardContainer,
+      buttonContainer: styles.wizardButtonContainer
+    }
+  }, wizardConfig))));
+};
+UTWorkflowContainer.propTypes = {
+  backButton: buttonTypes,
+  children: element,
+  classNames: objectOf(string),
+  classes: objectOf(string),
+  currentStep: number.isRequired,
+  extraActions: element,
+  forceStepNumber: bool,
+  hideStepCounter: bool,
+  nextButton: buttonTypes,
+  onExit: func,
+  smallButtons: bool,
+  stepCounter: oneOfType([func, element]),
+  stepsCount: number,
+  subtitle: string,
+  subtitleDataTestId: string,
+  title: string,
+  titleDataTestId: string,
+  TitleIcon: element,
+  withIcon: bool,
+  wizardConfig: shape({
+    description: string,
+    enabled: bool,
+    handleOnClick: func,
+    title: string,
+    variant: string
+  })
+};
+export default WithTheme(retrieveStyle)(UTWorkflowContainer);

package/dist/esm/components/UTWorkflowContainer/versions/V0/styles.module.scss

@@ -0,0 +1,44 @@
+.workflowContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.actionsContainer {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 16px 0 24px;
+  position: relative;
+  width: 100%;
+}
+
+.stepInfo {
+  margin: 0 auto;
+}
+
+.titleAndTitleIconContainer {
+  align-items: center;
+  display: flex;
+  text-align: center;
+
+  & + .subtitle {
+    margin-top: 8px;
+  }
+}
+
+.subtitle {
+  line-height: 22px;
+  text-align: center;
+}
+
+.hidden {
+  display: none;
+}
+
+.wizardButtonContainer {
+  bottom: 16px;
+}
+
+.wizardContainer {
+  bottom: 16px;
+}

package/dist/esm/components/UTWorkflowContainer/versions/V0/theme.js

@@ -0,0 +1,116 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../../../scss/variables/colors.module.scss';
+import { withImportant } from '../../../../utils/classesUtils';
+export const retrieveStyle = _ref => {
+  var _theme$UTWorkflowCont, _theme$UTWorkflowCont2, _theme$UTWorkflowCont3;
+  let {
+    theme
+  } = _ref;
+  const mobile = getIn(theme, ['Media', 'mobile']);
+  const tabletMobile = getIn(theme, ['Media', 'tabletMobile']);
+  const desktop = getIn(theme, ['Media', 'desktop']);
+  return {
+    container: {
+      border: getIn(theme, ['UTWorkflowContainer', 'container', 'border'], 0),
+      borderRadius: getIn(theme, ['UTWorkflowContainer', 'container', 'borderRadius'], '4px'),
+      backgroundColor: getIn(theme, ['UTWorkflowContainer', 'container', 'backgroundColor'], Colors.cardBackground),
+      boxShadow: getIn(theme, ['UTWorkflowContainer', 'container', 'boxShadow'], "1px 1px 3px 0 ".concat(Colors.cardShadow1, ", -0.5px -0.5px 2px 0 ").concat(Colors.cardShadow2)),
+      boxSizing: 'border-box',
+      display: 'flex',
+      margin: getIn(theme, ['UTWorkflowContainer', 'container', 'margin']),
+      minHeight: getIn(theme, ['UTWorkflowContainer', 'container', 'minHeight']),
+      overflow: 'hidden',
+      padding: getIn(theme, ['UTWorkflowContainer', 'container', 'padding'], '0 20px 15px'),
+      position: getIn(theme, ['UTWorkflowContainer', 'container', 'position']),
+      width: getIn(theme, ['UTWorkflowContainer', 'container', 'width']),
+      flexDirection: 'column',
+      [tabletMobile]: {
+        margin: getIn(theme, ['UTWorkflowContainer', 'container', 'tabletMobile', 'margin']),
+        padding: getIn(theme, ['UTWorkflowContainer', 'container', 'tabletMobile', 'padding'], '0 10px 10px')
+      },
+      [mobile]: {
+        border: getIn(theme, ['UTWorkflowContainer', 'container', 'mobile', 'border'])
+      }
+    },
+    actionsContainer: {
+      padding: getIn(theme, ['UTWorkflowContainer', 'actionsContainer', 'padding']),
+      marginTop: getIn(theme, ['UTWorkflowContainer', 'actionsContainer', 'marginTop']),
+      marginBottom: getIn(theme, ['UTWorkflowContainer', 'actionsContainer', 'marginBottom']),
+      [tabletMobile]: {
+        marginTop: getIn(theme, ['UTWorkflowContainer', 'actionsContainer', 'tabletMobile', 'marginTop'])
+      }
+    },
+    progress: {
+      margin: getIn(theme, ['UTWorkflowContainer', 'progress', 'margin'], '0'),
+      [desktop]: {
+        marginBottom: getIn(theme, ['UTWorkflowContainer', 'progress', 'desktop', 'marginBottom'])
+      }
+    },
+    colorPrimary: {
+      backgroundColor: getIn(theme, ['UTWorkflowContainer', 'progress', 'color']),
+      borderRadius: getIn(theme, ['UTWorkflowContainer', 'progress', 'borderRadius'], '0 0 4px 4px')
+    },
+    barColorPrimary: {
+      backgroundColor: getIn(theme, ['UTWorkflowContainer', 'progress', 'backgroundColor']),
+      borderRadius: getIn(theme, ['UTWorkflowContainer', 'progress', 'borderRadius'], '0 0 4px 4px')
+    },
+    content: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    titles: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: 12,
+      alignItems: 'center',
+      maxWidth: getIn(theme, ['UTWorkflowContainer', 'titles', 'maxWidth']),
+      [tabletMobile]: {
+        maxWidth: getIn(theme, ['UTWorkflowContainer', 'titles', 'tabletMobile', 'maxWidth'])
+      }
+    },
+    backButton: {
+      minWidth: getIn(theme, ['UTWorkflowContainer', 'backButton', 'minWidth']),
+      [tabletMobile]: {
+        minWidth: withImportant((theme === null || theme === void 0 || (_theme$UTWorkflowCont = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.backButton) === null || _theme$UTWorkflowCont === void 0 || (_theme$UTWorkflowCont = _theme$UTWorkflowCont.tabletMobile) === null || _theme$UTWorkflowCont === void 0 ? void 0 : _theme$UTWorkflowCont.minWidth) || '1px')
+      }
+    },
+    nextButton: {
+      minWidth: getIn(theme, ['UTWorkflowContainer', 'backButton', 'minWidth']),
+      [tabletMobile]: {
+        minWidth: withImportant((theme === null || theme === void 0 || (_theme$UTWorkflowCont2 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont2 === void 0 || (_theme$UTWorkflowCont2 = _theme$UTWorkflowCont2.nextButton) === null || _theme$UTWorkflowCont2 === void 0 || (_theme$UTWorkflowCont2 = _theme$UTWorkflowCont2.tabletMobile) === null || _theme$UTWorkflowCont2 === void 0 ? void 0 : _theme$UTWorkflowCont2.minWidth) || '1px')
+      }
+    },
+    titleIcon: {
+      color: getIn(theme, ['UTWorkflowContainer', 'titleIcon', 'color']),
+      height: getIn(theme, ['UTWorkflowContainer', 'titleIcon', 'height']),
+      margin: getIn(theme, ['UTWorkflowContainer', 'titleIcon', 'margin']),
+      width: getIn(theme, ['UTWorkflowContainer', 'titleIcon', 'width']),
+      marginBottom: getIn(theme, ['UTWorkflowContainer', 'title', 'marginBottom'])
+    },
+    stepCounter: {
+      alignItems: getIn(theme, ['UTWorkflowContainer', 'stepCounter', 'alignItems']),
+      color: getIn(theme, ['UTWorkflowContainer', 'stepCounter', 'color']),
+      display: 'flex',
+      height: getIn(theme, ['UTWorkflowContainer', 'stepCounter', 'height']),
+      [tabletMobile]: {
+        height: getIn(theme, ['UTWorkflowContainer', 'stepCounter', 'tabletMobile', 'height'])
+      }
+    },
+    bottomActionsContainer: {
+      alignItems: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'alignItems']),
+      backgroundColor: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'backgroundColor']),
+      height: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'height']),
+      justifyContent: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'justifyContent']),
+      margin: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'padding'], '0'),
+      minHeight: getIn(theme, ['UTWorkflowContainer', 'bottomActions', 'container', 'minHeight'], '90px'),
+      padding: withImportant((theme === null || theme === void 0 || (_theme$UTWorkflowCont3 = theme.UTWorkflowContainer) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.bottomActions) === null || _theme$UTWorkflowCont3 === void 0 || (_theme$UTWorkflowCont3 = _theme$UTWorkflowCont3.container) === null || _theme$UTWorkflowCont3 === void 0 ? void 0 : _theme$UTWorkflowCont3.padding) || 0)
+    },
+    workflowContainer: {
+      padding: getIn(theme, ['UTWorkflowContainer', 'workflowContainer', 'padding']),
+      [mobile]: {
+        padding: getIn(theme, ['UTWorkflowContainer', 'workflowContainer', 'mobile', 'padding'])
+      }
+    }
+  };
+};

package/dist/esm/components/UTWorkflowContainer/versions/V0/types.js

@@ -0,0 +1,8 @@
+import { func, bool, string, shape, element, object, oneOfType, elementType } from 'prop-types';
+export const buttonTypes = oneOfType([element, shape({
+  onClick: func,
+  disabled: bool,
+  label: string,
+  buttonProps: object,
+  Icon: oneOfType([bool, element, func, elementType])
+})]);

package/dist/esm/components/UTWorkflowContainer/versions/V1/README.md

@@ -0,0 +1,46 @@
+# UTWorkflowContainer
+
+### Description
+
+This component serves as a wrapper for each step of a workflow
+
+## Props
+
+| Name               | Type             | Default   | Description                                                                                                                                                                                                                                                                                                                |
+| ------------------ | ---------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| backButton         | buttonType       |           | Defines behaviour and/or rendering of the button on the left corner.                                                                                                                                                                                                                                                       |
+| banner             | bannerType       |           | If present, it will render a banner at the bottom of the header.                                                                                                                                                                                                                                                           |
+| checkbox           | checkboxType     |           | If present, it will render a checkbox above the bottom navigation.                                                                                                                                                                                                                                                         |
+| children           | element          |           | The contents that will be rendered inside the component.                                                                                                                                                                                                                                                                   |
+| classes            | object of string |           | Classes returned by UTWorkflowContainer's own [theme](./theme.js#L40) `retrieveStyle`.                                                                                                                                                                                                                                     |
+| classNames         | object of string |           | Additional classes.                                                                                                                                                                                                                                                                                                        |
+| currentStage       | number           |           | Receives a number that represents which stage id will be active. It is up to the parent component to update this number accordingly.                                                                                                                                                                                       |
+| currentStep        | number           | 1         | Receives a number that will fill up the progress bar proportionally to the number of steps given. It will also hide the backButton if its equal to 1. It is up to the parent component to update this number accordingly.                                                                                                  |
+| helpText           | string           |           | Text that will be rendered at the bottom of the header.                                                                                                                                                                                                                                                                    |
+| headerActions      | headerActionType |           | Actions to be displayed in a dropdown menu at the corner of the header, the first one that has the prop `main` as true will be displayed next to the menu with its own icon.                                                                                                                                               |
+| navHidden          | bool             | false     | If true, the navigation bar will be hidden, overriding the default `backButton`, `nextButton` and last step condition.                                                                                                                                                                                                     |
+| nextButton         | buttonTypes      |           | Defines behaviour and/or rendering of the button on the right corner.                                                                                                                                                                                                                                                      |
+| onExit             | function         |           | Cleanup function.                                                                                                                                                                                                                                                                                                          |
+| primaryAction      | buttonType       |           | Defines behaviour and/or rendering for the button next to the `nextButton`.                                                                                                                                                                                                                                                |
+| requiredFieldInfo  | string           |           | Text to display as a helper for required fields, it will be rendered below the description.                                                                                                                                                                                                                                |
+| secondaryAction    | buttonType       |           | Defines behaviour and/or rendering for the button next to the `backButton`.                                                                                                                                                                                                                                                |
+| stages             | stageType        |           | Defines the structure of the stepper indicator at the top of the component. It is required for each element 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'.                              |
+| stepsCount         | number           |           | Receives a number that represent the total amount of steps. Its only purpose is for properly rendering the progressBar.                                                                                                                                                                                                    |
+| subtitle           | string           |           | Text that will be rendered below the title.                                                                                                                                                                                                                                                                                |
+| tagline            | string           |           | Text that will be rendered in uppercase on top of the title.                                                                                                                                                                                                                                                               |
+| title              | string           |           | Text that will be rendered between the stages and the content. It is required in order to show any other text header elements.                                                                                                                                                                                             |
+| TitleIcon          | element          |           | Icon that will be rendered on top of the title.                                                                                                                                                                                                                                                                            |
+| variant            | string           | 'default' | Defines which variant to show. There are two options:`default` or `fullWidth`.                                                                                                                                                                                                                                             |
+| withIcon           | bool             | false     | Defines whether the nextButton and backButton will aditionally have their own icons inside.                                                                                                                                                                                                                                |
+| withStepperPadding | bool             | true      | 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                                                                                                             |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------- |
+| buttonType       | element \| `{ onClick: func, disabled: bool, label: string, buttonProps: object, Icon: bool \| element \| func }` |
+| bannerType       | `{ Icon: element, text: string }`                                                                                 |
+| checkboxType     | objectOf( UTCheckbox props )                                                                                      |
+| headerActionType | `{ label: string, onClick: func, main: bool, Icon: element }`                                                     |
+| stageType        | arrayOf( `{ id: number, label: string, Icon: element }` )                                                         |

package/dist/esm/components/UTWorkflowContainer/versions/V1/components/NavActions/constants.js

@@ -0,0 +1,2 @@
+export const NEXT = 'Siguiente';
+export const BACK = 'Atrás';

package/dist/esm/components/UTWorkflowContainer/versions/V1/components/NavActions/index.js

@@ -0,0 +1,97 @@
+import React, { memo } from 'react';
+import { bool, number, objectOf, shape, string } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import UTCheckbox from '../../../../../UTCheckbox';
+import { buttonTypes } from '../../types';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import { useScreenSize } from '../../../../../../utils/useScreenSize';
+import styles from './styles.module.scss';
+import { BACK, NEXT } from './constants';
+const {
+  workflowContainer
+} = TEST_IDS;
+const NavActions = _ref => {
+  var _backButton$dataTestI, _secondaryAction$data, _primaryAction$dataTe, _nextButton$dataTestI;
+  let {
+    backButton = {},
+    checkbox,
+    classes,
+    currentStep,
+    forceResponsive,
+    nextButton = {},
+    primaryAction,
+    secondaryAction
+  } = _ref;
+  const {
+    isMobileOrTablet
+  } = useScreenSize();
+  const isBackButtonHidden = currentStep === 1 && !backButton.isVisible || backButton.isHidden;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsContainer, " ").concat(classes.actionsContainer)
+  }, (!isMobileOrTablet || !isBackButtonHidden) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsGroup, " ").concat(!isBackButtonHidden && styles.actionsGroupResponsive)
+  }, !isBackButtonHidden && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(backButton.classes, "  ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: "secondary",
+    dataTestId: (_backButton$dataTestI = backButton.dataTestId) !== null && _backButton$dataTestI !== void 0 ? _backButton$dataTestI : workflowContainer.bottomNav.backButton,
+    disabled: backButton.disabled,
+    Icon: backButton === null || backButton === void 0 ? void 0 : backButton.Icon,
+    iconPlacement: "left",
+    onClick: backButton.onClick,
+    size: "large",
+    variant: "text"
+  }, backButton.label || BACK), secondaryAction && !isMobileOrTablet && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: secondaryAction.colorTheme || 'primary',
+    dataTestId: (_secondaryAction$data = secondaryAction.dataTestId) !== null && _secondaryAction$data !== void 0 ? _secondaryAction$data : workflowContainer.bottomNav.secondaryAction,
+    disabled: secondaryAction.disabled,
+    iconPlacement: "left",
+    onClick: secondaryAction.onClick,
+    size: "large",
+    variant: secondaryAction.variant || 'text'
+  }, secondaryAction.label), checkbox && !isMobileOrTablet && /*#__PURE__*/React.createElement("div", {
+    className: styles.checkboxContainer
+  }, /*#__PURE__*/React.createElement(UTCheckbox, checkbox))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.actionsGroup, " ").concat((isMobileOrTablet || forceResponsive) && styles.actionsGroupResponsive)
+  }, primaryAction && !isMobileOrTablet && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: primaryAction.colorTheme || 'primary',
+    dataTestId: (_primaryAction$dataTe = primaryAction.dataTestId) !== null && _primaryAction$dataTe !== void 0 ? _primaryAction$dataTe : workflowContainer.bottomNav.primaryAction,
+    disabled: primaryAction.disabled,
+    iconPlacement: "right",
+    onClick: primaryAction.onClick,
+    size: "large",
+    variant: primaryAction.variant || 'semitransparent'
+  }, primaryAction.label), !nextButton.isHidden && /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      root: "".concat(styles.navAction, " ").concat(nextButton.classes, "  ").concat(forceResponsive && styles.navActionResponsive)
+    },
+    colorTheme: "primary",
+    dataTestId: (_nextButton$dataTestI = nextButton.dataTestId) !== null && _nextButton$dataTestI !== void 0 ? _nextButton$dataTestI : workflowContainer.bottomNav.nextButton,
+    disabled: nextButton.disabled,
+    Icon: nextButton === null || nextButton === void 0 ? void 0 : nextButton.Icon,
+    iconPlacement: "right",
+    onClick: nextButton.onClick,
+    size: "large"
+  }, nextButton.label || NEXT)));
+};
+NavActions.propTypes = {
+  backButton: buttonTypes,
+  checkbox: shape({
+    text: string
+  }),
+  classes: objectOf(string),
+  currentStep: number,
+  forceResponsive: bool,
+  nextButton: buttonTypes,
+  primaryAction: buttonTypes,
+  secondaryAction: buttonTypes,
+  withIcon: bool
+};
+export default /*#__PURE__*/memo(NavActions);

package/dist/esm/components/UTWorkflowContainer/versions/V1/components/NavActions/styles.module.scss

@@ -0,0 +1,39 @@
+@use '../../../../../../scss/variables/mediaQueries.module.scss' as *;
+
+.actionsContainer {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 16px 32px;
+
+  @media #{$tablet-mobile} {
+    padding: 16px;
+  }
+}
+
+.actionsGroup {
+  align-items: center;
+  display: flex;
+  grid-gap: 8px;
+}
+
+.actionsGroupResponsive {
+  flex-grow: 1;
+}
+
+.checkboxContainer {
+  width: 100%;
+}
+
+.navAction {
+  flex-shrink: 0;
+  @media #{$tablet-mobile} {
+    width: 100%;
+  }
+}
+
+.navActionResponsive {
+  width: 100%;
+}

package/dist/esm/components/UTWorkflowContainer/versions/V1/constants.js

@@ -0,0 +1,13 @@
+import styles from './styles.module.scss';
+const DEFAULT = 'default';
+const FULL_WIDTH = 'fullWidth';
+export const VARIANTS = {
+  DEFAULT,
+  FULL_WIDTH
+};
+export const childrenContentStyle = {
+  [VARIANTS.DEFAULT]: styles.childrenContent,
+  [VARIANTS.FULL_WIDTH]: styles.childrenContentFullWidth
+};
+export const CHILDREN_CONTAINER_ID = 'workflow-children-container-';
+export const FORMS_QUERY_SELECTOR = "#".concat(CHILDREN_CONTAINER_ID).concat(VARIANTS.DEFAULT, " form");