@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/components/ListRow/utils.js

@@ -0,0 +1,7 @@
+export const getDynamicPosition = (ref, position, setPosition) => {
+  var _ref$current, _sibling$clientHeight, _sibling$offsetTop;
+  const sibling = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.previousSibling;
+  const height = (_sibling$clientHeight = sibling === null || sibling === void 0 ? void 0 : sibling.clientHeight) !== null && _sibling$clientHeight !== void 0 ? _sibling$clientHeight : 0;
+  const offsetTop = (_sibling$offsetTop = sibling === null || sibling === void 0 ? void 0 : sibling.offsetTop) !== null && _sibling$offsetTop !== void 0 ? _sibling$offsetTop : 0;
+  if (position !== offsetTop + height) setPosition(sibling ? offsetTop + height : 0);
+};

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/constants.js

@@ -0,0 +1,11 @@
+export const CACHE = {
+  height: 200
+};
+export const SCROLL_EVENT_OPTIONS = {
+  passive: true,
+  capture: true
+};
+export const SCROLL_EVENT = 'scroll';
+export const SCROLL_THROTTLE_DELAY = 50;
+export const MAX_LIMIT_MULTIPLIER = 4;
+export const DEFAULT_LIMIT_MULTIPLIER = 2;

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/hooks/use-ledger.js

@@ -0,0 +1,22 @@
+import { useState, useEffect, useRef } from 'react';
+import { KEY } from '../components/ListRow/constants';
+const useLedger = data => {
+  const [ledger, setLedger] = useState({});
+  const ledgerRef = useRef(ledger);
+  ledgerRef.current = ledger;
+  const resetLedger = () => {
+    const newLedger = {};
+    data.forEach((_, index) => {
+      newLedger["".concat(KEY).concat(index)] = {
+        height: 0,
+        offset: 0
+      };
+    });
+    return newLedger;
+  };
+  useEffect(() => {
+    if (Object.keys(ledger).length !== data.length) setLedger(resetLedger());
+  }, [data]);
+  return [ledgerRef, setLedger];
+};
+export default useLedger;

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/hooks/use-virtualized-data.js

@@ -0,0 +1,44 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { useScrollbarThrottle } from '@widergy/energy-hooks';
+import { SCROLL_THROTTLE_DELAY } from '../constants';
+import { createRowRenderer, renderVirtualScreen, nullifyDataInBetween, addVirtualizedElements, updateLedger } from '../utils';
+import useHeightLedger from './use-ledger';
+const useVirtualizedData = (data, totalElements, overscan, listViewportHeight, listViewportWidth, configItemRender, listViewportRef, elementsPerRow, effect, reRenderOnChange) => {
+  const [shouldReRender, setShouldReRender] = useState(false);
+  const [scroll, setScroll] = useState(0);
+  const [virtualizedData, setVirtualizedData] = useState([]);
+  const [heightLedger, setHeightLedger] = useHeightLedger(data);
+  const updateScroll = _ref => {
+    let {
+      target
+    } = _ref;
+    if (target === listViewportRef.current) {
+      const currentScroll = target.scrollTop;
+      setScroll(currentScroll);
+    }
+  };
+  useScrollbarThrottle(updateScroll, listViewportRef, SCROLL_THROTTLE_DELAY);
+  const rowRenderer = useCallback(createRowRenderer(configItemRender, effect), [configItemRender, effect]);
+  const {
+    virtualScreenStart,
+    virtualScreenEnd,
+    listHeight
+  } = useMemo(() => renderVirtualScreen(scroll, overscan, totalElements, listViewportHeight, heightLedger.current), [scroll, overscan, totalElements, heightLedger.current, listViewportHeight]);
+  useEffect(() => {
+    setShouldReRender(true);
+  }, [listViewportWidth, rowRenderer, elementsPerRow, heightLedger.current, data, reRenderOnChange]);
+  const ledgerUpdater = useMemo(() => updateLedger(heightLedger, setHeightLedger), [heightLedger, setHeightLedger]);
+  useEffect(() => {
+    const newVirtualizedData = shouldReRender ? new Array(totalElements).fill(null) : [...virtualizedData];
+    nullifyDataInBetween(newVirtualizedData, 0, virtualScreenStart);
+    nullifyDataInBetween(newVirtualizedData, virtualScreenEnd, newVirtualizedData.length);
+    addVirtualizedElements(data, newVirtualizedData, virtualScreenStart, virtualScreenEnd, rowRenderer, ledgerUpdater, heightLedger);
+    setVirtualizedData(newVirtualizedData);
+    if (shouldReRender) setShouldReRender(false);
+  }, [virtualScreenStart, virtualScreenEnd, shouldReRender, ledgerUpdater]);
+  return {
+    virtualizedData,
+    listHeight
+  };
+};
+export default useVirtualizedData;

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/index.js

@@ -0,0 +1,61 @@
+import React, { useMemo, Fragment, memo } from 'react';
+import { array, number, func, string, bool } from 'prop-types';
+import { refType } from '../../../../types/commonTypes';
+import useVirtualizedData from './hooks/use-virtualized-data';
+import { createRows } from './utils';
+import styles from './styles.module.scss';
+const VirtualizedData = _ref => {
+  let {
+    data,
+    elementsPerRow,
+    overscan,
+    itemRenderer,
+    itemPadding,
+    listViewportRef,
+    listViewportHeight,
+    listViewportWidth,
+    effect,
+    reRenderOnChange,
+    headerRenderer,
+    footerRenderer
+  } = _ref;
+  const elementWidth = Math.floor(listViewportWidth / elementsPerRow);
+  const rows = useMemo(() => createRows(data, elementsPerRow), [data, elementsPerRow]);
+  const totalRows = rows.length;
+  const configItemRender = useMemo(() => ({
+    itemRenderer,
+    itemPadding,
+    elementWidth
+  }), [itemRenderer, itemPadding, elementWidth]);
+  const {
+    virtualizedData,
+    listHeight
+  } = useVirtualizedData(rows, totalRows, overscan, listViewportHeight, listViewportWidth, configItemRender, listViewportRef, elementsPerRow, effect, reRenderOnChange);
+  return /*#__PURE__*/React.createElement(Fragment, null, headerRenderer && /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, headerRenderer()), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: listHeight,
+      position: 'relative',
+      scrollBehavior: 'smooth',
+      width: '100%'
+    }
+  }, virtualizedData), footerRenderer && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, footerRenderer()));
+};
+VirtualizedData.propTypes = {
+  data: array,
+  elementsPerRow: number,
+  overscan: number,
+  itemRenderer: func,
+  itemPadding: number,
+  listViewportRef: refType,
+  listViewportHeight: number,
+  listViewportWidth: number,
+  effect: string,
+  reRenderOnChange: bool,
+  headerRenderer: func,
+  footerRenderer: func
+};
+export default /*#__PURE__*/memo(VirtualizedData);

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/styles.module.scss

@@ -0,0 +1,5 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}

package/dist/esm/components/UTVirtualizedList/components/VirtualizedData/utils.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { KEY } from './components/ListRow/constants';
+import ListRow from './components/ListRow';
+import { MAX_LIMIT_MULTIPLIER, DEFAULT_LIMIT_MULTIPLIER } from './constants';
+export const createRows = (data, elementsPerRow) => {
+  const totalRows = Math.ceil(data.length / elementsPerRow);
+  const rows = new Array(totalRows).fill(0).map(() => []);
+  for (let i = 0; i < data.length; i++) {
+    rows[Math.floor(i / elementsPerRow)].push(data[i]);
+  }
+  return rows;
+};
+export const applyToIndex = (index, target, object) => index === target ? object : null;
+export const createRowRenderer = (configItemRender, effect) => (row, index, updateLedger, ledgerRef) => /*#__PURE__*/React.createElement(ListRow, {
+  row: row,
+  index: index,
+  effect: effect,
+  configItemRender: configItemRender,
+  updateLedger: updateLedger,
+  ledgerRef: ledgerRef
+});
+const getOffsets = ledger => Object.values(ledger).map(_ref => {
+  let {
+    offset
+  } = _ref;
+  return offset;
+});
+const getFirstIndex = (ledger, scroll) => {
+  const offsets = getOffsets(ledger);
+  return Math.max(offsets.findIndex(offset => offset > scroll) - 1, 0);
+};
+const getElementsInViewport = (ledger, scroll, listViewportHeight, firstIndex, totalElements) => {
+  const offsets = getOffsets(ledger);
+  const index = offsets.findIndex(offset => offset > scroll + listViewportHeight);
+  return (index !== -1 ? index : totalElements) - 1 - firstIndex;
+};
+const getListHeight = ledger => {
+  const values = Object.values(ledger);
+  const lastUsableIndex = values.findIndex(_ref2 => {
+    let {
+      height
+    } = _ref2;
+    return !height;
+  });
+  const {
+    height = 0,
+    offset = 0
+  } = values[lastUsableIndex !== -1 ? lastUsableIndex : values.length - 1] || {};
+  return offset + height;
+};
+export const renderVirtualScreen = (scrollPosition, overscan, totalElements, listViewportHeight, ledger) => {
+  const listHeight = getListHeight(ledger);
+  if (!listViewportHeight) return {
+    virtualScreenStart: 0,
+    virtualScreenEnd: Math.min(2 * overscan, totalElements)
+  };
+  const firstElementIndex = getFirstIndex(ledger, scrollPosition);
+  const elementsInViewport = listHeight ? getElementsInViewport(ledger, scrollPosition, listViewportHeight, firstElementIndex, totalElements) : 0;
+  const upperScan = Math.min(firstElementIndex, overscan);
+  const lowerScan = Math.min(totalElements - (firstElementIndex + elementsInViewport), overscan);
+  const normalizedUpperScan = upperScan + overscan - lowerScan;
+  const normalizedLowerScan = lowerScan + overscan - upperScan;
+  const virtualScreenStart = Math.max(firstElementIndex - normalizedUpperScan, 0);
+  let virtualScreenEnd = Math.min(firstElementIndex + elementsInViewport + normalizedLowerScan, totalElements);
+  if (virtualScreenEnd - virtualScreenStart >= MAX_LIMIT_MULTIPLIER * overscan) virtualScreenEnd = virtualScreenStart + DEFAULT_LIMIT_MULTIPLIER * overscan;
+  return {
+    virtualScreenStart,
+    virtualScreenEnd,
+    listHeight
+  };
+};
+export const nullifyDataInBetween = (data, startIndex, endIndex) => {
+  for (let i = startIndex; i < endIndex; i++) data[i] = null;
+};
+export const addVirtualizedElements = (data, virtualizedData, startIndex, endIndex, rowRenderer, updateLedger, ledgerRef) => {
+  for (let i = startIndex; i < endIndex; i++) {
+    if (!virtualizedData[i]) virtualizedData[i] = rowRenderer(data[i], i, updateLedger, ledgerRef);
+  }
+};
+export const updateLedger = (ledgerRef, setLedgerRef) => (key, height) => {
+  var _ledgerRef$current;
+  const currentHeight = (_ledgerRef$current = ledgerRef.current) === null || _ledgerRef$current === void 0 || (_ledgerRef$current = _ledgerRef$current[key]) === null || _ledgerRef$current === void 0 ? void 0 : _ledgerRef$current.height;
+  if (currentHeight !== height) {
+    const newLedger = {
+      ...ledgerRef.current,
+      [key]: {
+        height
+      }
+    };
+    let accumulator = 0;
+    const keys = Object.keys(newLedger);
+    keys.forEach((currentKey, index) => {
+      if (!newLedger[currentKey].height) {
+        newLedger[currentKey].height = height;
+      }
+      if (index) {
+        accumulator += newLedger["".concat(KEY).concat(index - 1)].height;
+      }
+      newLedger[currentKey] = {
+        ...newLedger[currentKey],
+        offset: accumulator
+      };
+    });
+    setLedgerRef(newLedger);
+  }
+};

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

@@ -0,0 +1,4 @@
+export const DEFAULT_ITEM_PADDING = 10;
+export const DEFAULT_OVERSCAN = 10;
+export const DEFAULT_EFFECT = 'fadeIn';
+export const DEFAULT_ELEMENTS_PER_ROW = 1;

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { array, string, number, func, bool } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { useComponentDimensions } from '@widergy/energy-hooks';
+import UTLoading from '../UTLoading';
+import styles from './styles.module.scss';
+import { DEFAULT_ITEM_PADDING, DEFAULT_OVERSCAN, DEFAULT_EFFECT, DEFAULT_ELEMENTS_PER_ROW } from './constants';
+import VirtualizedData from './components/VirtualizedData';
+const UTVirtualizedList = _ref => {
+  let {
+    data,
+    className,
+    elementsPerRow,
+    overscan,
+    itemRenderer,
+    itemPadding,
+    NoDataComponent,
+    effect,
+    loading,
+    reRenderOnChange,
+    headerRenderer,
+    footerRenderer
+  } = _ref;
+  const {
+    height: listViewportHeight,
+    width: listViewportWidth,
+    ref: listViewportRef
+  } = useComponentDimensions();
+  const [reRender, setReRender] = useState(false);
+  useEffect(() => {
+    setReRender(!reRender);
+  }, [...reRenderOnChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className),
+    ref: listViewportRef
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: loading
+  }, isEmpty(data) ? NoDataComponent ? /*#__PURE__*/React.createElement(NoDataComponent, null) : null : /*#__PURE__*/React.createElement(VirtualizedData, {
+    headerRenderer: headerRenderer,
+    footerRenderer: footerRenderer,
+    reRenderOnChange: reRender,
+    listViewportHeight: listViewportHeight,
+    listViewportWidth: listViewportWidth,
+    listViewportRef: listViewportRef,
+    data: data,
+    elementsPerRow: elementsPerRow,
+    overscan: overscan,
+    itemRenderer: itemRenderer,
+    itemPadding: itemPadding,
+    effect: effect
+  })));
+};
+UTVirtualizedList.propTypes = {
+  data: array,
+  className: string,
+  elementsPerRow: number,
+  overscan: number,
+  itemRenderer: func,
+  itemPadding: number,
+  NoDataComponent: func,
+  effect: string,
+  loading: bool,
+  reRenderOnChange: array,
+  headerRenderer: func,
+  footerRenderer: func
+};
+UTVirtualizedList.defaultProps = {
+  data: [],
+  itemPadding: DEFAULT_ITEM_PADDING,
+  overscan: DEFAULT_OVERSCAN,
+  effect: DEFAULT_EFFECT,
+  elementsPerRow: DEFAULT_ELEMENTS_PER_ROW,
+  reRenderOnChange: []
+};
+export default UTVirtualizedList;

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

@@ -0,0 +1,6 @@
+.container {
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+}

package/dist/esm/components/UTWizard/components/StepImage/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { oneOfType, string, elementType } from 'prop-types';
+import styles from './styles.module.scss';
+const StepImage = _ref => {
+  let {
+    Image
+  } = _ref;
+  return typeof Image === 'string' ? /*#__PURE__*/React.createElement("img", {
+    alt: "",
+    className: styles.image,
+    src: Image
+  }) : /*#__PURE__*/React.createElement(Image, {
+    className: styles.image
+  });
+};
+StepImage.propTypes = {
+  Image: oneOfType([string, elementType])
+};
+export default StepImage;

package/dist/esm/components/UTWizard/components/StepImage/styles.module.scss

@@ -0,0 +1,6 @@
+.image {
+  align-self: center;
+  display: flex;
+  max-height: 180px;
+  max-width: 264px;
+}

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

@@ -0,0 +1,13 @@
+export const VARIANTS = {
+  dark: 'dark',
+  information: 'information',
+  light: 'light'
+};
+export const DEFAULT_PROPS = {
+  variant: 'dark'
+};
+export const ACTIONS = {
+  NEXT: 'next',
+  PREVIOUS: 'previous',
+  RESET: 'reset'
+};

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

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo, useReducer, useState } from 'react';
+import { bool, func, objectOf, string, array, oneOf } from 'prop-types';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import isEmpty from 'lodash/isEmpty';
+import { mergeClasses } from '../../utils/classesUtils';
+import WithTheme from '../WithTheme';
+import UTButton from '../UTButton';
+import UTLabel from '../UTLabel';
+import StepImage from './components/StepImage';
+import { retrieveStyle } from './theme';
+import { getLabelTheme, getButtonTheme, getButtonMinimizedTheme } from './utils';
+import styles from './styles.module.scss';
+import { ACTIONS } from './constants';
+const UTWizard = _ref => {
+  var _subSteps$currentSubs;
+  let {
+    classes: themeClasses,
+    classNames,
+    enabled,
+    handleOnClick,
+    openByDefault = true,
+    subSteps = [],
+    variant
+  } = _ref;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const [currentSubstep, updateSubstep] = useReducer((state, action) => {
+    switch (action) {
+      case ACTIONS.RESET:
+        return 0;
+      case ACTIONS.PREVIOUS:
+        return state - 1;
+      case ACTIONS.NEXT:
+        return state + 1;
+      default:
+        return state;
+    }
+  }, 0);
+  const stepEnabled = enabled && !isEmpty(subSteps[currentSubstep]);
+  const {
+    title,
+    description,
+    image
+  } = (_subSteps$currentSubs = subSteps[currentSubstep]) !== null && _subSteps$currentSubs !== void 0 ? _subSteps$currentSubs : {};
+  const [isOpen, setIsOpen] = useState(openByDefault);
+  useEffect(() => {
+    updateSubstep(ACTIONS.RESET);
+  }, [enabled, subSteps]);
+  return stepEnabled ? isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.container, " ").concat(styles.container)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleContainer
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.grow,
+    colorTheme: getLabelTheme(variant),
+    weight: "medium",
+    withMarkdown: true
+  }, title), /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: getButtonTheme(variant),
+    Icon: "IconChevronDown",
+    onClick: () => setIsOpen(false),
+    size: "small",
+    variant: "text"
+  }), /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: getButtonTheme(variant),
+    Icon: "IconX",
+    onClick: handleOnClick,
+    size: "small",
+    variant: "text"
+  })), /*#__PURE__*/React.createElement(UTLabel, {
+    variant: "small",
+    colorTheme: getLabelTheme(variant),
+    withMarkdown: true
+  }, description)), image && /*#__PURE__*/React.createElement(StepImage, {
+    Image: image
+  }), subSteps.length > 1 && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.grow,
+    colorTheme: getLabelTheme(variant),
+    variant: "small",
+    withMarkdown: true
+  }, "".concat(currentSubstep + 1, " de ").concat(subSteps.length)), currentSubstep > 0 && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: getButtonTheme(variant),
+    onClick: () => updateSubstep(ACTIONS.PREVIOUS),
+    size: "small",
+    variant: "text",
+    weight: "medium"
+  }, "Atr\xE1s"), currentSubstep < subSteps.length - 1 && /*#__PURE__*/React.createElement(UTButton, {
+    colorTheme: getButtonTheme(variant),
+    onClick: () => updateSubstep(ACTIONS.NEXT),
+    size: "small",
+    variant: "filled",
+    weight: "medium"
+  }, "Siguiente")))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.buttonContainer, " ").concat(styles.buttonContainer)
+  }, /*#__PURE__*/React.createElement(UTButton, {
+    size: "small",
+    classNames: {
+      root: "".concat(styles.button, " ").concat(classes.buttonStyle)
+    },
+    onClick: () => setIsOpen(true),
+    colorTheme: getButtonMinimizedTheme(variant),
+    Icon: "IconQuestionMark"
+  })) : null;
+};
+UTWizard.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  enabled: oneOf(bool, string),
+  handleOnClick: func,
+  openByDefault: bool,
+  subSteps: array,
+  variant: string
+};
+export default WithTheme(retrieveStyle)(UTWizard);

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

@@ -0,0 +1,57 @@
+.container {
+  border-radius: 4px;
+  bottom: calc(100% + 16px);
+  display: flex;
+  height: fit-content;
+  max-width: 296px;
+  padding: 16px;
+  position: absolute;
+  right: 16px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+  max-width: 264px;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 264px;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.titleContainer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+.footer {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 8px;
+}
+
+.buttonContainer {
+  bottom: calc(100% + 16px);
+  display: flex;
+  position: absolute;
+  right: 16px;
+  z-index: 1300;
+}
+
+.button {
+  border-radius: 50% !important;
+  height: 48px;
+  width: 48px;
+}

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

@@ -0,0 +1,30 @@
+import { VARIANTS } from './constants';
+import { getVariant } from './utils';
+const getBackgroundColor = _ref => {
+  let {
+    theme,
+    variant
+  } = _ref;
+  return variant === VARIANTS.light ? theme.Palette.light['01'] : theme.Palette[variant]['05'];
+};
+export const retrieveStyle = _ref2 => {
+  let {
+    theme,
+    variant
+  } = _ref2;
+  const variantTheme = getVariant(variant);
+  return {
+    container: {
+      backgroundColor: getBackgroundColor({
+        theme,
+        variant: variantTheme
+      })
+    },
+    buttonStyle: {
+      backgroundColor: "".concat(getBackgroundColor({
+        theme,
+        variant: variantTheme
+      }), " !important")
+    }
+  };
+};

package/dist/esm/components/UTWizard/utils.js

@@ -0,0 +1,17 @@
+import { DEFAULT_PROPS, VARIANTS } from './constants';
+export const getVariant = variant => VARIANTS[variant] || VARIANTS[DEFAULT_PROPS.variant];
+export const getLabelTheme = variant => ({
+  [VARIANTS.dark]: 'light',
+  [VARIANTS.information]: 'light',
+  [VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+export const getButtonTheme = variant => ({
+  [VARIANTS.dark]: 'negative',
+  [VARIANTS.information]: 'negative',
+  [VARIANTS.light]: 'dark'
+})[getVariant(variant)];
+export const getButtonMinimizedTheme = variant => ({
+  [VARIANTS.dark]: 'secondary',
+  [VARIANTS.information]: 'secondary',
+  [VARIANTS.light]: 'negative'
+})[getVariant(variant)];

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTWorkflowContainer = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTWorkflowContainer.propTypes = {
+  version: string
+};
+export default UTWorkflowContainer;

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

@@ -0,0 +1,36 @@
+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, { isValidElement, cloneElement } from 'react';
+import { string, object, bool } from 'prop-types';
+import UTButton from '../../../../../UTButton';
+import { buttonTypes } from '../../types';
+import styles from './styles.module.scss';
+const ActionButton = _ref => {
+  var _button$buttonProps;
+  let {
+    button,
+    className,
+    children,
+    isHidden,
+    buttonProps
+  } = _ref;
+  return /*#__PURE__*/isValidElement(button) ? (/*#__PURE__*/cloneElement(button, {
+    className: "".concat(button.props.className, " ").concat(isHidden && styles.hiddenButton)
+  })) : /*#__PURE__*/React.createElement(UTButton, _extends({
+    dataTestId: button.dataTestId,
+    disabled: button.disabled,
+    hideTextOnResponsive: true,
+    onClick: button.onClick
+  }, buttonProps, button.buttonProps, {
+    classNames: {
+      root: "\n        ".concat(className, "\n        ").concat(isHidden && styles.hiddenButton, "\n        ").concat(button === null || button === void 0 || (_button$buttonProps = button.buttonProps) === null || _button$buttonProps === void 0 ? void 0 : _button$buttonProps.className, "\n      "),
+      ...buttonProps.classNames
+    }
+  }), children);
+};
+ActionButton.propTypes = {
+  button: buttonTypes,
+  className: string,
+  isHidden: bool,
+  buttonProps: object
+};
+export default ActionButton;