@widergy/energy-ui 3.158.1 → 3.159.0

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

@@ -0,0 +1,27 @@
+.stepper {
+  padding: 24px 0 48px;
+}
+
+.paddingContainer {
+  display: flex;
+  justify-content: space-around;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+
+  > :first-child {
+    > div {
+      left: -4px;
+    }
+  }
+
+  > :nth-last-child(2) {
+    > div {
+      right: -4px;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette0, _theme$Palette1;
+  let {
+    theme
+  } = _ref;
+  return {
+    connector: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['05']
+    },
+    coloredProgress: {
+      backgroundColor: "".concat(((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.actions) === null || _theme$Palette2 === void 0 || (_theme$Palette2 = _theme$Palette2.accent) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2['04']) || theme.Palette.accent['04'], " !important")
+    },
+    stepContainerS: {
+      backgroundColor: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['05'],
+      borderColor: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03']
+    },
+    stepContainerL: {
+      backgroundColor: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03']
+    },
+    activeS: {
+      backgroundColor: Colors.white,
+      borderColor: ((_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.actions) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.accent) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['04']) || theme.Palette.accent['04']
+    },
+    activeL: {
+      backgroundColor: ((_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.actions) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.accent) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['04']) || theme.Palette.accent['04']
+    },
+    completed: {
+      backgroundColor: ((_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.actions) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.accent) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['04']) || theme.Palette.accent['04'],
+      borderColor: ((_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.actions) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.accent) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04']) || theme.Palette.accent['04']
+    },
+    activeIcon: {
+      fill: Colors.white
+    },
+    nextIcon: {
+      fill: (_theme$Palette0 = theme.Palette) === null || _theme$Palette0 === void 0 ? void 0 : _theme$Palette0.gray['04']
+    },
+    coloredLabel: {
+      color: "".concat(((_theme$Palette1 = theme.Palette) === null || _theme$Palette1 === void 0 || (_theme$Palette1 = _theme$Palette1.actions) === null || _theme$Palette1 === void 0 || (_theme$Palette1 = _theme$Palette1.accent) === null || _theme$Palette1 === void 0 ? void 0 : _theme$Palette1['04']) || theme.Palette.accent['04'], " !important")
+    }
+  };
+};

package/dist/esm/components/UTSwitch/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 UTSwitch = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTSwitch.propTypes = {
+  version: string
+};
+export default UTSwitch;

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

@@ -0,0 +1,6 @@
+export const STATES = {
+  ON: 'SI',
+  OFF: 'NO'
+};
+export const DEFAULT_SWITCH_ID = 'switch';
+export const TRUE = 'true';

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

@@ -0,0 +1,93 @@
+import React, { Fragment, useEffect, useMemo } from 'react';
+import { bool, string, objectOf } from 'prop-types';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import UTLabel from '../../../UTLabel/index.js';
+import { fieldType, inputPropTypes, metaPropTypes } from '../../../../types/formTypes.js';
+import WithTheme from '../../../WithTheme/index.js';
+import { mergeClasses } from '../../../../utils/classesUtils.js';
+import { STATES, DEFAULT_SWITCH_ID, TRUE } from './constants.js';
+import { retrieveStyle } from './theme';
+const UTSwitch = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    disabled,
+    field = {},
+    input = {},
+    meta = {},
+    showErrors
+  } = _ref;
+  const {
+    value,
+    onChange: onChange_
+  } = input;
+  const {
+    key,
+    field_options: fieldOptions,
+    configuration = {}
+  } = field;
+  const {
+    textOff: textOff_,
+    textOn: textOn_,
+    insideText = true,
+    withText
+  } = configuration;
+  const switchId = key || DEFAULT_SWITCH_ID;
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  const useFieldOptions = fieldOptions && !isEmpty(fieldOptions);
+  const [currentOption, switchedOption] = useFieldOptions ? [...fieldOptions].sort((_, _ref2) => {
+    let {
+      value: optionValue,
+      name
+    } = _ref2;
+    return [optionValue, name === TRUE].includes(value) ? 1 : -1;
+  }) : [];
+  const onChange = useFieldOptions ? () => onChange_(switchedOption.value) : onChange_;
+  useEffect(() => {
+    if (useFieldOptions && value === false) onChange_(currentOption.value);
+  }, [value]);
+  const textOn = textOn_ || STATES.ON;
+  const textOff = textOff_ || STATES.OFF;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.outerContainer
+  }, withText && !insideText && textOff, /*#__PURE__*/React.createElement("label", {
+    htmlFor: switchId,
+    className: "".concat(classes.container, " ").concat(disabled && classes.disabled)
+  }, /*#__PURE__*/React.createElement("input", {
+    className: classes.input,
+    id: switchId,
+    type: "checkbox",
+    checked: useFieldOptions ? currentOption.name === TRUE : value,
+    value: useFieldOptions ? currentOption.value : value,
+    onChange: onChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classes.sliderContainer, " ").concat(disabled && classes.disabled)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classes.sliderBack, " ").concat(disabled && classes.disabled)
+  }), withText && insideText && /*#__PURE__*/React.createElement("div", {
+    className: classes.textContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.checkedText
+  }, textOn), /*#__PURE__*/React.createElement("div", {
+    className: classes.uncheckedText
+  }, textOff)), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classes.sliderHover, " ").concat(disabled && classes.disabled)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classes.slider, " ").concat(disabled && classes.disabled)
+  }))), withText && !insideText && textOn), showErrors && meta && shouldShowErrors(meta) && /*#__PURE__*/React.createElement(UTLabel, {
+    colorTheme: "error",
+    variant: "small"
+  }, meta === null || meta === void 0 ? void 0 : meta.error));
+};
+UTSwitch.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  disabled: bool,
+  field: fieldType,
+  input: inputPropTypes.isRequired,
+  meta: metaPropTypes,
+  showErrors: bool
+};
+export default WithTheme(retrieveStyle)(UTSwitch);

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

@@ -0,0 +1,132 @@
+import { getIn } from 'seamless-immutable';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    outerContainer: {
+      alignItems: getIn(theme, ['UTSwitch', 'outerContainer', 'alignItems'], 'center'),
+      color: getIn(theme, ['UTSwitch', 'outerContainer', 'color']),
+      columnGap: getIn(theme, ['UTSwitch', 'outerContainer', 'columnGap']),
+      display: getIn(theme, ['UTSwitch', 'outerContainer', 'display'], 'flex')
+    },
+    container: {
+      boxSizing: getIn(theme, ['UTSwitch', 'container', 'boxSizing'], 'border-box'),
+      cursor: getIn(theme, ['UTSwitch', 'container', 'cursor'], 'pointer'),
+      height: getIn(theme, ['UTSwitch', 'container', 'height'], '26px'),
+      position: getIn(theme, ['UTSwitch', 'container', 'position'], 'relative'),
+      flexShrink: getIn(theme, ['UTSwitch', 'container', 'flexShrink'], '0'),
+      width: getIn(theme, ['UTSwitch', 'container', 'width'], '54px'),
+      '&.disabled': {
+        cursor: getIn(theme, ['UTSwitch', 'container', 'disabled', 'cursor'], 'default')
+      },
+      padding: getIn(theme, ['UTSwitch', 'container', 'padding']),
+      margin: getIn(theme, ['UTSwitch', 'container', 'margin']),
+      '&:hover > $sliderContainer > $sliderBack': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'sliderBack', 'hover', 'backgroundColor'], Colors.switchGrayHover)
+      },
+      '&:hover > $sliderContainer > $sliderHover': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'sliderHover', 'hover', 'backgroundColor'], Colors.switchHover)
+      },
+      '&:hover > $sliderContainer > $slider': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'slider', 'hover', 'backgroundColor'], getIn(['UTSwitch', 'slider', 'backgroundColor'], Colors.switchGrayHover))
+      },
+      '&:Active > $sliderContainer > $sliderHover': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'sliderHover', 'active', 'backgroundColor'], Colors.switchActive)
+      }
+    },
+    textContainer: {
+      boxSizing: getIn(theme, ['UTSwitch', 'textContainer', 'boxSizing'], 'border-box'),
+      display: getIn(theme, ['UTSwitch', 'textContainer', 'display'], 'flex'),
+      height: getIn(theme, ['UTSwitch', 'textContainer', 'height'], '100%'),
+      width: getIn(theme, ['UTSwitch', 'textContainer', 'width'], '100%'),
+      position: getIn(theme, ['UTSwitch', 'textContainer', 'position'], 'absolute'),
+      padding: getIn(theme, ['UTSwitch', 'textContainer', 'padding'], '0'),
+      justifyContent: getIn(theme, ['UTSwitch', 'textContainer', 'justifyContent'], 'space-evenly'),
+      alignItems: getIn(theme, ['UTSwitch', 'textContainer', 'alignItems'], 'center')
+    },
+    checkedText: {
+      opacity: getIn(theme, ['UTSwitch', 'checkedText', 'opacity'], '0'),
+      color: getIn(theme, ['UTSwitch', 'checkedText', 'color'], Colors.white),
+      fontSize: getIn(theme, ['UTSwitch', 'checkedText', 'fontSize'], getIn(theme, ['Fonts', 'small'])),
+      fontWeight: getIn(theme, ['UTSwitch', 'checkedText', 'fontWeight'], 500)
+    },
+    uncheckedText: {
+      transition: getIn(theme, ['UTSwitch', 'uncheckedText', 'transition'], 'all 0.3s ease'),
+      opacity: getIn(theme, ['UTSwitch', 'uncheckedText', 'opacity'], '1'),
+      color: getIn(theme, ['UTSwitch', 'uncheckedText', 'color'], Colors.gray2),
+      fontSize: getIn(theme, ['UTSwitch', 'uncheckedText', 'fontSize'], getIn(theme, ['Fonts', 'small'])),
+      fontWeight: getIn(theme, ['UTSwitch', 'uncheckedText', 'fontWeight'], 500)
+    },
+    sliderContainer: {
+      height: getIn(theme, ['UTSwitch', 'sliderContainer', 'height'], '100%'),
+      width: getIn(theme, ['UTSwitch', 'sliderContainer', 'width'], '100%'),
+      display: getIn(theme, ['UTSwitch', 'sliderContainer', 'display'], 'flex'),
+      justifyContent: getIn(theme, ['UTSwitch', 'sliderContainer', 'justifyContent'], 'center'),
+      alignItems: getIn(theme, ['UTSwitch', 'sliderContainer', 'alignItems'], 'center')
+    },
+    disabled: {
+      filter: getIn(theme, ['UTSwitch', 'disabled', 'filter'], 'grayscale(1) contrast(0.5) brightness(1.2)'),
+      pointerEvents: getIn(theme, ['UTSwitch', 'disabled', 'pointerEvents'], 'none')
+    },
+    slider: {
+      backgroundColor: getIn(theme, ['UTSwitch', 'slider', 'backgroundColor'], Colors.switchGray),
+      borderRadius: getIn(theme, ['UTSwitch', 'slider', 'borderRadius'], '26px'),
+      height: getIn(theme, ['UTSwitch', 'slider', 'height'], '18px'),
+      width: getIn(theme, ['UTSwitch', 'slider', 'width'], '18px'),
+      marginLeft: getIn(theme, ['UTSwitch', 'slider', 'marginLeft'], '-28px'),
+      zIndex: getIn(theme, ['UTSwitch', 'slider', 'zIndex'], '0'),
+      boxShadow: getIn(theme, ['UTSwitch', 'slider', 'boxShadow'], 'none'),
+      pointerEvents: getIn(theme, ['UTSwitch', 'slider', 'pointerEvents'], 'none'),
+      transition: getIn(theme, ['UTSwitch', 'slider', 'transition'], 'all 0.3s ease-in-out')
+    },
+    sliderHover: {
+      backgroundColor: getIn(theme, ['UTSwitch', 'sliderHover', 'backgroundColor'], Colors.transparent),
+      transition: getIn(theme, ['UTSwitch', 'slider', 'transition'], 'all 0.3s ease-in-out'),
+      position: getIn(theme, ['UTSwitch', 'sliderHover', 'position'], 'absolute'),
+      width: getIn(theme, ['UTSwitch', 'sliderHover', 'width'], '40px'),
+      height: getIn(theme, ['UTSwitch', 'sliderHover', 'height'], '40px'),
+      marginLeft: getIn(theme, ['UTSwitch', 'slider', 'marginLeft'], '-28px'),
+      borderRadius: getIn(theme, ['UTSwitch', 'sliderHover', 'borderRadius'], '50%')
+    },
+    sliderBack: {
+      backgroundColor: getIn(theme, ['UTSwitch', 'sliderBack', 'backgroundColor'], Colors.white),
+      borderRadius: getIn(theme, ['UTSwitch', 'sliderBack', 'borderRadius'], '26px'),
+      border: getIn(theme, ['UTSwitch', 'sliderBack', 'border'], "1px solid ".concat(Colors.switchGray)),
+      height: getIn(theme, ['UTSwitch', 'sliderBack', 'height'], '100%'),
+      width: getIn(theme, ['UTSwitch', 'sliderBack', 'width'], '100%'),
+      position: getIn(theme, ['UTSwitch', 'sliderBack', 'position'], 'absolute'),
+      boxShadow: getIn(theme, ['UTSwitch', 'sliderBack', 'boxShadow'], 'none'),
+      transition: getIn(theme, ['UTSwitch', 'sliderBack', 'transition'], 'all 0.3s ease-in-out')
+    },
+    input: {
+      height: getIn(theme, ['UTSwitch', 'input', 'height'], '0'),
+      opacity: getIn(theme, ['UTSwitch', 'input', 'opacity'], '0'),
+      width: getIn(theme, ['UTSwitch', 'input', 'width'], '0'),
+      position: getIn(theme, ['UTSwitch', 'input', 'position'], 'absolute'),
+      '&:checked ~ $sliderContainer > $sliderBack': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'backgroundColor'], Colors.blue),
+        border: getIn(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'border'], "1px solid ".concat(Colors.blue))
+      },
+      '&:checked ~ $sliderContainer:hover > $sliderBack': {
+        backgroundColor: getIn(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'hover', 'backgroundColor'], Colors.darkBlue),
+        border: getIn(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'hover', 'border'])
+      },
+      '&:checked ~ $sliderContainer > $sliderHover': {
+        transform: getIn(theme, ['UTSwitch', 'slider', 'checkedSlider', 'transform'], 'translateX(27px)')
+      },
+      '&:checked ~ $sliderContainer > $slider': {
+        transform: getIn(theme, ['UTSwitch', 'slider', 'checkedSlider', 'transform'], 'translateX(27px)'),
+        backgroundColor: getIn(theme, ['UTSwitch', 'slider', 'checkedSlider', 'backgroundColor'], Colors.switchGray)
+      },
+      '&:checked ~ $sliderContainer > $textContainer > $checkedText': {
+        transition: getIn(theme, ['UTSwitch', 'checkedText', 'checked', 'transition'], 'all 0.3s ease'),
+        opacity: getIn(theme, ['UTSwitch', 'checkedText', 'checked', 'opacity'], '1')
+      },
+      '&:checked ~ $sliderContainer > $textContainer > $uncheckedText': {
+        opacity: getIn(theme, ['UTSwitch', 'uncheckedText', 'checked', 'opacity'], '0')
+      }
+    }
+  };
+};

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

@@ -0,0 +1,6 @@
+export const STATES = {
+  ON: 'SI',
+  OFF: 'NO'
+};
+export const DEFAULT_SWITCH_ID = 'switch';
+export const TRUE = 'true';

package/dist/esm/components/UTSwitch/versions/V1/index.js

@@ -0,0 +1,94 @@
+import React, { Fragment, useEffect, useMemo, useCallback } from 'react';
+import { bool, string, objectOf, arrayOf, object, func } from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import { v4 as uuid4 } from 'uuid';
+import { formatErrorToValidation } from '../../../UTValidation/utils.js';
+import UTValidation from '../../../UTValidation';
+import WithTheme from '../../../WithTheme/index.js';
+import { mergeClasses } from '../../../../utils/classesUtils.js';
+import UTLabel from '../../../UTLabel/index.js';
+import styles from './styles.module.scss';
+import { retrieveStyle } from './theme';
+import { STATES, TRUE } from './constants.js';
+const UTSwitch = _ref => {
+  let {
+    classes: themeClasses = {},
+    classNames,
+    dataTestId,
+    disabled = false,
+    error,
+    key,
+    onChange,
+    options = [],
+    reverse = false,
+    textOff,
+    textOn,
+    value,
+    withText = false
+  } = _ref;
+  const switchId = useMemo(() => key || uuid4(), []);
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [themeClasses, classNames]);
+  const useFieldOptions = options && !isEmpty(options);
+  const [currentOption, switchedOption] = useFieldOptions ? [...options].sort((_, _ref2) => {
+    let {
+      value: optionValue,
+      name
+    } = _ref2;
+    return [optionValue, name === TRUE].includes(value) ? 1 : -1;
+  }) : [];
+  const handleOnChange = useCallback(() => {
+    if (useFieldOptions) {
+      onChange(switchedOption === null || switchedOption === void 0 ? void 0 : switchedOption.value);
+    } else {
+      onChange();
+    }
+  }, [useFieldOptions, switchedOption === null || switchedOption === void 0 ? void 0 : switchedOption.value, onChange]);
+  useEffect(() => {
+    if (useFieldOptions && value === false) {
+      onChange(currentOption === null || currentOption === void 0 ? void 0 : currentOption.value);
+    }
+  }, [useFieldOptions, value, currentOption === null || currentOption === void 0 ? void 0 : currentOption.value, onChange]);
+  const textOnLabel = textOn || STATES.ON;
+  const textOffLabel = textOff || STATES.OFF;
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.outerContainer,
+    "data-testid": dataTestId
+  }, reverse && withText && /*#__PURE__*/React.createElement(UTLabel, null, value ? textOnLabel : textOffLabel), /*#__PURE__*/React.createElement("label", {
+    htmlFor: switchId,
+    className: "".concat(styles.container, " ").concat(classes.container, " ").concat(disabled ? styles.disabled : ''),
+    "aria-label": "".concat(textOnLabel, " / ").concat(textOffLabel)
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "".concat(styles.input, " ").concat(classes.input),
+    id: switchId,
+    type: "checkbox",
+    checked: useFieldOptions ? currentOption.name === TRUE : value,
+    value: useFieldOptions ? currentOption.value : value,
+    onChange: handleOnChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.sliderContainer, " ").concat(classes.sliderContainer, " ").concat(disabled && classes.disabled)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.sliderBack, " ").concat(classes.sliderBack, " ").concat(disabled && classes.disabled)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "".concat(styles.slider, " ").concat(classes.slider, " ").concat(disabled && classes.disabled)
+  }))), !reverse && withText && /*#__PURE__*/React.createElement(UTLabel, null, value ? textOnLabel : textOffLabel)), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    validationData: validationData
+  }));
+};
+UTSwitch.propTypes = {
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  dataTestId: string,
+  disabled: bool,
+  error: string,
+  key: string,
+  onChange: func,
+  options: arrayOf(object),
+  reverse: bool,
+  textOff: string,
+  textOn: string,
+  value: bool,
+  withText: bool
+};
+export default WithTheme(retrieveStyle)(UTSwitch);

package/dist/esm/components/UTSwitch/versions/V1/styles.module.scss

@@ -0,0 +1,71 @@
+.outerContainer {
+  align-items: center;
+  color: inherit;
+  display: flex;
+  grid-gap: 8px;
+  justify-content: center;
+  min-width: 42px;
+}
+
+.container {
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 20px;
+  position: relative;
+  flex-shrink: 0;
+  width: 40px;
+  padding: 0;
+  margin: 0;
+
+  &.disabled {
+    cursor: default;
+  }
+}
+
+.sliderContainer {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.slider {
+  border-radius: 100px;
+  box-shadow: none;
+  height: 16px;
+  margin-left: -20px;
+  pointer-events: none;
+  transition: all 0.3s ease-in-out;
+  width: 16px;
+  z-index: 0;
+}
+
+.sliderBack {
+  border-radius: 100px;
+  box-shadow: none;
+  height: 100%;
+  position: absolute;
+  transition: all 0.3s ease-in-out;
+  width: 100%;
+}
+
+.input {
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  width: 0;
+
+  &:checked {
+    ~ .sliderContainer {
+      > .slider {
+        transform: translateX(20px);
+      }
+    }
+  }
+}

package/dist/esm/components/UTSwitch/versions/V1/theme.js

@@ -0,0 +1,45 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette;
+  let {
+    theme
+  } = _ref;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const paletteColors = theme.Palette;
+  const actionTheme = actionPaletteColors.accent || paletteColors.accent;
+  const grayTheme = actionPaletteColors.gray || paletteColors.gray;
+  const neutralTheme = actionPaletteColors.neutral || paletteColors.neutral;
+  const lightTheme = actionPaletteColors.light || paletteColors.light;
+  return {
+    sliderContainer: {
+      '&:hover > $sliderBack': {
+        backgroundColor: neutralTheme['01'],
+        border: "1px solid ".concat(neutralTheme['04'])
+      },
+      '&:hover > $slider': {
+        backgroundColor: grayTheme['04']
+      }
+    },
+    slider: {
+      backgroundColor: grayTheme['04']
+    },
+    sliderBack: {
+      backgroundColor: lightTheme['01'],
+      border: "1px solid ".concat(grayTheme['04'])
+    },
+    input: {
+      '&:checked': {
+        '& ~ $sliderContainer > $sliderBack': {
+          backgroundColor: actionTheme['04'],
+          border: "1px solid ".concat(actionTheme['04'])
+        },
+        '& ~ $sliderContainer:hover > $sliderBack': {
+          backgroundColor: actionTheme['03'],
+          border: "1px solid ".concat(actionTheme['04'])
+        },
+        '& ~ $sliderContainer > $slider': {
+          backgroundColor: actionTheme['01']
+        }
+      }
+    }
+  };
+};

package/dist/esm/components/UTTable/UTTable.mdx

@@ -0,0 +1,56 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTTableStories from './UTTable.stories';
+
+<Meta of={UTTableStories} />
+
+<Title>UTTable</Title>
+
+<Description of={UTTableStories} />
+
+## Eventos y Callbacks
+
+La tabla proporciona múltiples callbacks para manejar interacciones:
+
+- `onRowClick`: Click en filas
+- `onSelectRow`: Selección individual de filas
+- `onSelectAllRows`: Selección masiva
+- `onPageChange`: Cambio de página
+- `onOrderChange`: Cambio de ordenamiento
+- `onRefresh`: Actualización manual
+- `onRowsPerPageChange`: Cambio de filas por página
+
+## Responsividad
+
+La tabla se adapta automáticamente a diferentes tamaños de pantalla:
+
+- **Desktop**: Vista completa con todas las columnas
+- **Tablet**: Algunas columnas pueden ocultarse según la configuración
+- **Mobile**: Vista de tarjetas responsivas
+
+Los breakpoints se pueden personalizar mediante las props `tabletBreakpoint` y `mobileBreakpoint`.
+
+## Accesibilidad
+
+El componente incluye:
+
+- Navegación por teclado
+- Roles ARIA apropiados
+- Etiquetas descriptivas
+- Soporte para lectores de pantalla
+- Data test IDs para testing automatizado
+
+<ArgTypes
+  exclude={[
+    'classes',
+    'classNames',
+    'actionDataTestId',
+    'cellDataTestId',
+    'headerActionDataTestId',
+    'headerCellDataTestId',
+    'headerSelectionComponentDataTestId',
+    'selectionComponentDataTestId',
+    'titleDataTestId',
+    'noResultDataTestId'
+  ]}
+/>