@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 8px;
+}
+
+.popper {
+  width: unset !important;
+}

package/dist/esm/components/UTSelect/versions/V1/utils.js

@@ -0,0 +1,110 @@
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import clone from 'lodash/clone';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { NO_CATEGORY } from '../../../UTCheckList/versions/V1/constants';
+const shouldResetMultipleSelect = (value, options) => !isEmpty(value) && (isEmpty(options) || value.some(el => !options.some(opt => opt.value === el) && !options.some(opt => opt.subOptions && opt.subOptions.some(sub => sub.value === el))));
+const shouldResetSimpleSelect = (value, options) => value && (isEmpty(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
+export const shouldReset = (value, options, isMultiple) => {
+  if (isMultiple) return shouldResetMultipleSelect(value, options);
+  return shouldResetSimpleSelect(value, options);
+};
+export const getDisplayValue = (inputValue, options, multiple) => {
+  if (inputValue === null || inputValue === undefined || inputValue === '') return '';
+  const findLabel = optionValue => {
+    var _options$find;
+    return "".concat((_options$find = options.find(o => o.value === optionValue)) === null || _options$find === void 0 ? void 0 : _options$find.name) || '';
+  };
+  const displayValue = multiple ? inputValue.map(findLabel).join(', ') : findLabel(inputValue);
+  return displayValue;
+};
+export const getLeftAdornments = _ref => {
+  let {
+    error,
+    multiple,
+    prefix,
+    value,
+    icon
+  } = _ref;
+  const adornments = [];
+  if (error) adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      showOnlyOnError: true
+    }
+  });
+  if (multiple && !isEmpty(value)) adornments.push({
+    name: COMPONENT_KEYS.BADGE,
+    props: {
+      text: value.length,
+      colorTheme: error ? 'error' : 'accent'
+    }
+  });
+  if (prefix) adornments.push({
+    name: COMPONENT_KEYS.PREFIX,
+    props: {
+      text: prefix
+    }
+  });
+  if (icon) adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      Icon: icon
+    }
+  });
+  return adornments;
+};
+export const getRightAdornments = _ref2 => {
+  let {
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  } = _ref2;
+  const adornments = [];
+  if (suffix) adornments.push({
+    name: COMPONENT_KEYS.SUFFIX,
+    props: {
+      text: suffix
+    }
+  });
+  if (showClearButton && clearable && !disabled && !readOnly) adornments.push({
+    key: 'clearAction',
+    name: COMPONENT_KEYS.ACTION,
+    props: {
+      action: {
+        Icon: 'IconX',
+        onClick: handleClearSelection,
+        size: 'small'
+      }
+    }
+  });
+  adornments.push({
+    name: COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconChevronDown',
+      changeIconOnError: false,
+      changeOnError: true,
+      ...(variant === 'picker' && !disabled && {
+        colorTheme: 'dark'
+      })
+    }
+  });
+  if (action) adornments.push({
+    name: COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  });
+  return adornments;
+};
+export const sortOptions = (options, value, multiple) => {
+  const copiedOptions = clone(options);
+  return copiedOptions.map(option => ({
+    ...option,
+    category: multiple ? value !== null && value !== void 0 && value.includes(option.value) ? NO_CATEGORY : option.category : option.value === value ? NO_CATEGORY : option.category
+  })).sort((a, b) => a.category === NO_CATEGORY ? -1 : b.category === NO_CATEGORY ? 1 : 0);
+};

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

@@ -0,0 +1,23 @@
+# UTSelectableCard
+
+### Description
+Selectable card component.
+
+### Props
+
+| Name            | Type                                     | Default   |Description                                                           |
+|-----------------|------------------------------------------|-----------|----------------------------------------------------------------------|
+| aditionalInfo   | object: { title: '', description: ''}    |           | Aditional information to show in the card                            |
+| appareance      | string: 'white' \| 'gray' \|             | white     | The card appareance.                                                 |
+| checkIcon       | bool                                     | true      | Indicates if on "active" status shows a check icon                   |
+| classes         | string                                   |           | Classes returned by UTLabel's own [theme](./theme.js#)retrieveStyle. |
+| className       | string                                   |           | Additional classes.                                                  |
+| description     | string                                   |           | Card description                                                     |
+| disabled        | bool                                     | false     | Indicates if the card is disabled                                    |
+| Icon            | node                                     |           | An Icon component that can be displayed.                             |
+| OnClick         | func                                     |           | Function to be executed when clicking the card                       |
+| selected        | bool                                     | false     | Indicates if the current card has "Active" status                    |
+| size            | string: 'medium' \| 'small' \|           | medium    | Card size                                                            |
+| titleText       | string                                   |           | Title to show in the card                                            |
+| tooltip         | string                                   |           | Help icon tooltip as text                                            |
+

package/dist/esm/components/UTSelectableCard/assets/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7071 6.29289C21.0976 6.68342 21.0976 7.31658 20.7071 7.70711L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071L4.29289 12.7071C3.90237 12.3166 3.90237 11.6834 4.29289 11.2929C4.68342 10.9024 5.31658 10.9024 5.70711 11.2929L10 15.5858L19.2929 6.29289C19.6834 5.90237 20.3166 5.90237 20.7071 6.29289Z" fill="#0136E7"/>
+</svg>

package/dist/esm/components/UTSelectableCard/assets/help.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0001 3.33341C6.31818 3.33341 3.33341 6.31818 3.33341 10.0001C3.33341 13.682 6.31818 16.6667 10.0001 16.6667C13.682 16.6667 16.6667 13.682 16.6667 10.0001C16.6667 6.31818 13.682 3.33341 10.0001 3.33341ZM1.66675 10.0001C1.66675 5.39771 5.39771 1.66675 10.0001 1.66675C14.6025 1.66675 18.3334 5.39771 18.3334 10.0001C18.3334 14.6025 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6025 1.66675 10.0001ZM8.72905 5.28749C9.14521 5.08156 9.6035 4.97505 10.0678 4.97634C10.5322 4.97763 10.9899 5.08668 11.4049 5.29491C11.8199 5.50314 12.1809 5.80487 12.4595 6.17633C12.7381 6.54779 12.9267 6.97886 13.0104 7.43558C13.0941 7.89231 13.0706 8.36222 12.9418 8.80834C12.8131 9.25445 12.5825 9.66459 12.2683 10.0065C11.9541 10.3483 11.5648 10.6126 11.1311 10.7784C11.124 10.7811 11.117 10.7837 11.1099 10.7862C11.0246 10.8162 10.9515 10.873 10.9014 10.9482C10.8513 11.0233 10.827 11.1127 10.8321 11.2029C10.8581 11.6624 10.5068 12.056 10.0473 12.0821C9.58777 12.1081 9.19415 11.7568 9.16809 11.2973C9.14251 10.8464 9.26414 10.3994 9.51464 10.0237C9.76252 9.65183 10.1233 9.36967 10.5437 9.21866C10.7332 9.14477 10.9034 9.02847 11.0412 8.87861C11.1808 8.72667 11.2833 8.54438 11.3405 8.34611C11.3978 8.14784 11.4082 7.93898 11.371 7.736C11.3338 7.53301 11.25 7.34142 11.1262 7.17633C11.0024 7.01123 10.8419 6.87713 10.6574 6.78459C10.473 6.69204 10.2696 6.64357 10.0632 6.643C9.85684 6.64243 9.65316 6.68977 9.46819 6.78129C9.28323 6.87281 9.12203 7.00602 8.9973 7.17042C8.71912 7.53708 8.19638 7.6088 7.82972 7.33062C7.46307 7.05244 7.39135 6.5297 7.66953 6.16304C7.95019 5.79313 8.31288 5.49341 8.72905 5.28749ZM10.0001 13.3334C10.4603 13.3334 10.8334 13.7065 10.8334 14.1667V14.1751C10.8334 14.6353 10.4603 15.0084 10.0001 15.0084C9.53984 15.0084 9.16675 14.6353 9.16675 14.1751V14.1667C9.16675 13.7065 9.53984 13.3334 10.0001 13.3334Z" fill="#091E42"/>
+</svg>

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

@@ -0,0 +1,10 @@
+export const APPEARANCES = {
+  GRAY: 'gray',
+  WHITE: 'white'
+};
+export const SIZES = {
+  XLARGE: 'xlarge',
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};

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

@@ -0,0 +1,131 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { bool, func, elementType, objectOf, oneOf, shape, string } from 'prop-types';
+import { objectIsEmpty } from '@widergy/web-utils/lib/object';
+import UTLabel from '../UTLabel';
+import UTTooltip from '../UTTooltip';
+import WithTheme from '../WithTheme';
+import { isUTIcon } from '../../utils/componentUtils';
+import UTIcon from '../UTIcon';
+import UTAvatar from '../UTAvatar';
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L10 15.586l9.293-9.293a1 1 0 0 1 1.414 0Z",
+    fill: "#0136E7"
+  }));
+};
+CheckIcon.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var HelpIcon = function HelpIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 3.333a6.667 6.667 0 1 0 0 13.334 6.667 6.667 0 0 0 0-13.334ZM1.667 10a8.333 8.333 0 1 1 16.666 0 8.333 8.333 0 0 1-16.666 0Zm7.062-4.713a3 3 0 1 1 2.38 5.5.416.416 0 0 0-.277.416.833.833 0 0 1-1.664.094 2.083 2.083 0 0 1 1.376-2.078A1.334 1.334 0 1 0 8.997 7.17.833.833 0 1 1 7.67 6.163a3 3 0 0 1 1.06-.876ZM10 13.333c.46 0 .833.373.833.834v.008a.833.833 0 0 1-1.666 0v-.008c0-.46.373-.834.833-.834Z",
+    fill: "#091E42"
+  }));
+};
+HelpIcon.defaultProps = {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+import { APPEARANCES, SIZES } from './constants';
+import { retrieveStyle } from './theme';
+const UTSelectableCard = _ref => {
+  let {
+    aditionalInfo = {},
+    appearance = APPEARANCES.WHITE,
+    checkIcon = true,
+    classes,
+    classNames = {},
+    dataTestId,
+    description,
+    disabled = false,
+    avatar,
+    avatarProps = {},
+    Icon,
+    iconProps = {},
+    onClick,
+    selected = false,
+    size = SIZES.MEDIUM,
+    titleText,
+    tooltip
+  } = _ref;
+  const IconComponent = isUTIcon(Icon) ? /*#__PURE__*/React.createElement(UTIcon, _extends({
+    size: 48,
+    colorTheme: selected ? 'accent' : 'dark',
+    name: Icon
+  }, iconProps)) : /*#__PURE__*/React.createElement(Icon, {
+    className: "".concat(classes.icon, " ").concat(classNames.icon)
+  });
+  const AvatarComponent = avatar ? /*#__PURE__*/React.createElement(UTAvatar, _extends({
+    size: SIZES.LARGE
+  }, avatarProps)) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "\n  ".concat(classes.item, "\n  ").concat(disabled ? "".concat(classes["".concat(appearance, "DisabledContainer")], " ").concat(classNames["".concat(appearance, "DisabledContainer")] || '') : selected ? "".concat(classes["".concat(appearance, "SelectedContainer")], " ").concat(classNames["".concat(appearance, "SelectedContainer")] || '') : "".concat(classes["".concat(appearance, "Apareance")], " ").concat(classNames["".concat(appearance, "Apareance")] || ''), "\n  ").concat(classes["".concat(size, "Size")], "\n"),
+    "data-testid": dataTestId,
+    onClick: () => !disabled && onClick(),
+    role: "button"
+  }, Icon && !avatar && IconComponent, avatar && !Icon && AvatarComponent, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.column
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.titleAndTooltip
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.titleText,
+    variant: "subtitle1",
+    weight: "medium"
+  }, titleText), tooltip && /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.tooltip
+  }, /*#__PURE__*/React.createElement(HelpIcon, {
+    className: "".concat(classes.infoIcon)
+  })))), description && /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.description
+  }, description)), !objectIsEmpty(aditionalInfo) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
+  }, !!aditionalInfo.title && /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.aditionalInfoTitle,
+    variant: "small",
+    weight: "semibold"
+  }, aditionalInfo.title), !!aditionalInfo.description && /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.aditionalInfoDescription,
+    variant: "small"
+  }, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/React.createElement(CheckIcon, {
+    className: classes.checkIcon
+  }));
+};
+UTSelectableCard.propTypes = {
+  aditionalInfo: shape({
+    description: string,
+    title: string
+  }),
+  appearance: oneOf([APPEARANCES.GRAY, APPEARANCES.WHITE]),
+  avatar: bool,
+  avatarProps: objectOf(string),
+  checkIcon: bool,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  dataTestId: string,
+  description: string,
+  disabled: bool,
+  Icon: elementType,
+  iconProps: objectOf(string),
+  onClick: func,
+  selected: bool,
+  size: oneOf([SIZES.MEDIUM, SIZES.SMALL]),
+  titleText: string,
+  tooltip: string
+};
+export default WithTheme(retrieveStyle)(UTSelectableCard);

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

@@ -0,0 +1,203 @@
+import { getShadow } from '../../utils/shadowUtils';
+export const retrieveStyle = _ref => {
+  var _theme$Palette$shadow, _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5, _theme$Palette$action6, _theme$Palette$action7, _theme$Palette$action8, _theme$Palette$action9, _theme$Palette$action0, _theme$Palette$action1, _theme$Palette$action10, _theme$Palette$action11;
+  let {
+    theme
+  } = _ref;
+  return {
+    aditionalInfoColumn: {
+      textAlign: 'end !important'
+    },
+    amountContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    column: {
+      alignSelf: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      gridGap: '4px',
+      justifyContent: 'space-between',
+      textAlign: 'initial'
+    },
+    detailContainer: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '8px'
+    },
+    item: {
+      alignItems: 'center',
+      borderRadius: '4px',
+      boxSizing: 'border-box',
+      display: 'flex',
+      gridGap: '16px',
+      transition: 'background-color 0.1s ease-in-out',
+      width: '100%',
+      '& + div': {
+        marginTop: '20px'
+      }
+    },
+    mediumSize: {
+      padding: '24px'
+    },
+    smallSize: {
+      padding: '16px'
+    },
+    textContainer: {
+      display: 'flex',
+      gridGap: '8px',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    textContainerWithCheckedIcon: {
+      minHeight: 24
+    },
+    titleAndTooltip: {
+      alignItems: 'center',
+      display: 'flex',
+      gridGap: '4px'
+    },
+    tooltip: {
+      display: 'flex'
+    },
+    checkIcon: {
+      flexShrink: 0
+    },
+    icon: {
+      flexShrink: 0,
+      height: '36px',
+      width: '36px'
+    },
+    infoIcon: {
+      flexShrink: 0
+    },
+    titleText: {},
+    description: {},
+    aditionalInfoTitle: {},
+    aditionalInfoDescription: {},
+    // White apareance
+    whiteApareance: {
+      backgroundColor: theme.Palette.light['01'],
+      boxShadow: getShadow({
+        color: (_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow.grayscale,
+        level: 1
+      }),
+      outline: "2px solid transparent",
+      '& $titleText, & $aditionalInfoTitle': {
+        color: theme.Palette.dark['05']
+      },
+      '& $icon path, & $infoIcon path': {
+        fill: theme.Palette.dark['05']
+      },
+      '& $description, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        boxShadow: 'none'
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['04'],
+        boxShadow: 'none',
+        '& $aditionalInfoDescription': {
+          color: theme.Palette.gray['03']
+        }
+      }
+    },
+    whiteSelectedContainer: {
+      boxShadow: 'none',
+      outline: "2px solid ".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['05']) || theme.Palette.accent['05']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['05']) || theme.Palette.accent['05']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['05']) || theme.Palette.accent['05']
+      },
+      '&:hover': {
+        backgroundColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['01']) || theme.Palette.accent['01'],
+        outline: "2px solid ".concat(((_theme$Palette$action5 = theme.Palette.actions) === null || _theme$Palette$action5 === void 0 ? void 0 : _theme$Palette$action5.accent['05']) || theme.Palette.accent['05'])
+      },
+      '&:active': {
+        backgroundColor: ((_theme$Palette$action6 = theme.Palette.actions) === null || _theme$Palette$action6 === void 0 ? void 0 : _theme$Palette$action6.accent['02']) || theme.Palette.accent['02'],
+        outline: "2px solid ".concat(((_theme$Palette$action7 = theme.Palette.actions) === null || _theme$Palette$action7 === void 0 ? void 0 : _theme$Palette$action7.accent['05']) || theme.Palette.accent['05'])
+      }
+    },
+    whiteDisabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
+      boxShadow: 'none',
+      outline: "2px solid transparent",
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        outline: "2px solid transparent",
+        pointerEvents: 'none'
+      }
+    },
+    // Gray apareance
+    grayApareance: {
+      backgroundColor: theme.Palette.light['03'],
+      outline: "1px solid ".concat(theme.Palette.light['05']),
+      '& $titleText, & $aditionalInfoTitle': {
+        color: theme.Palette.dark['05']
+      },
+      '& $icon path, & $infoIcon path': {
+        fill: theme.Palette.dark['05']
+      },
+      '& $description, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['04']
+      },
+      '&:active': {
+        backgroundColor: theme.Palette.light['05'],
+        '& $aditionalInfoDescription': {
+          color: theme.Palette.gray['03']
+        }
+      }
+    },
+    graySelectedContainer: {
+      backgroundColor: ((_theme$Palette$action8 = theme.Palette.actions) === null || _theme$Palette$action8 === void 0 ? void 0 : _theme$Palette$action8.accent['01']) || theme.Palette.accent['01'],
+      outline: "2px solid ".concat(((_theme$Palette$action9 = theme.Palette.actions) === null || _theme$Palette$action9 === void 0 ? void 0 : _theme$Palette$action9.accent['03']) || theme.Palette.accent['03']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: ((_theme$Palette$action0 = theme.Palette.actions) === null || _theme$Palette$action0 === void 0 ? void 0 : _theme$Palette$action0.accent['05']) || theme.Palette.accent['05']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: ((_theme$Palette$action1 = theme.Palette.actions) === null || _theme$Palette$action1 === void 0 ? void 0 : _theme$Palette$action1.accent['05']) || theme.Palette.accent['05']
+      },
+      '&:hover': {
+        backgroundColor: ((_theme$Palette$action10 = theme.Palette.actions) === null || _theme$Palette$action10 === void 0 ? void 0 : _theme$Palette$action10.accent['02']) || theme.Palette.accent['02']
+      },
+      '&:active': {
+        backgroundColor: ((_theme$Palette$action11 = theme.Palette.actions) === null || _theme$Palette$action11 === void 0 ? void 0 : _theme$Palette$action11.accent['03']) || theme.Palette.accent['03'],
+        '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+          color: theme.Palette.light['01']
+        },
+        '& $icon path, & $infoIcon path, & $checkIcon path': {
+          fill: theme.Palette.light['01']
+        }
+      }
+    },
+    grayDisabledContainer: {
+      backgroundColor: theme.Palette.light['03'],
+      outline: "2px solid ".concat(theme.Palette.light['05']),
+      '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
+        color: theme.Palette.gray['04']
+      },
+      '& $icon path, & $infoIcon path, & $checkIcon path': {
+        fill: theme.Palette.gray['04']
+      },
+      '&:hover': {
+        backgroundColor: theme.Palette.light['03'],
+        cursor: 'default',
+        pointerEvents: 'none'
+      }
+    }
+  };
+};

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

@@ -0,0 +1,26 @@
+import { SwipeableDrawer } from '@material-ui/core';
+import { func, object, string } from 'prop-types';
+import React from 'react';
+const UTSheet = _ref => {
+  let {
+    anchor,
+    children,
+    open,
+    toggleDrawer,
+    SlideProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(SwipeableDrawer, {
+    SlideProps: SlideProps,
+    anchor: anchor,
+    open: open,
+    onClose: () => toggleDrawer(false),
+    onOpen: () => toggleDrawer(true)
+  }, children);
+};
+UTSheet.propTypes = {
+  anchor: string,
+  open: func,
+  toggleDrawer: func,
+  SlideProps: object
+};
+export default UTSheet;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/CollapsedPanelContent/constants.js

@@ -0,0 +1,5 @@
+import { PANEL_POSITIONS } from '../../../../constants';
+export const ICON_BY_POSITION = {
+  [PANEL_POSITIONS.LEFT]: 'IconChevronsRight',
+  [PANEL_POSITIONS.RIGHT]: 'IconChevronsLeft'
+};

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/CollapsedPanelContent/index.js

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../context';
+import CollapsedPanelContent from './layout';
+const CollapsedPanelContentContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    handleTogglePanel,
+    iconProps,
+    position
+  } = useContext(UTShortcutPanelContext);
+  return /*#__PURE__*/React.createElement(CollapsedPanelContent, {
+    classes: classes,
+    dataTestId: dataTestId,
+    iconProps: iconProps,
+    onClick: handleTogglePanel,
+    position: position
+  });
+};
+CollapsedPanelContentContainer.propTypes = {
+  dataTestId: string
+};
+export default CollapsedPanelContentContainer;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/CollapsedPanelContent/layout.js

@@ -0,0 +1,39 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { func, objectOf, string } from 'prop-types';
+import UTIcon from '../../../../../UTIcon';
+import UTTouchableWithoutFeedback from '../../../../../UTTouchableWithoutFeedback';
+import { iconPropTypes } from '../../../../../../types/iconTypes';
+import { ID_CONSTANTS, TEST_IDS } from '../../../../../../constants/testIds';
+import { ICON_BY_POSITION } from './constants';
+const {
+  EXPAND_BUTTON,
+  COLLAPSED_PANEL_CONTENT
+} = ID_CONSTANTS;
+const {
+  filterGrouping
+} = TEST_IDS;
+const CollapsedPanelContent = _ref => {
+  let {
+    classes,
+    dataTestId,
+    iconProps,
+    onClick,
+    position
+  } = _ref;
+  return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
+    className: classes.collapsedPanelContentExpandButton,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSED_PANEL_CONTENT, ".").concat(EXPAND_BUTTON) : filterGrouping.groupingPanel.collapsedPanelContent.expandButton,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(UTIcon, _extends({
+    name: ICON_BY_POSITION[position]
+  }, iconProps)));
+};
+CollapsedPanelContent.propTypes = {
+  classes: objectOf(string),
+  dataTestId: string,
+  iconProps: iconPropTypes,
+  onClick: func,
+  position: string
+};
+export default CollapsedPanelContent;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryEmpty/index.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../../../context';
+import { ID_CONSTANTS } from '../../../../../../../../../../constants/testIds';
+import ExpandedPanelContentCategoryEmpty from './layout';
+const {
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategoryEmptyContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    noFiltersText,
+    noFiltersTitle
+  } = useContext(UTShortcutPanelContext);
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryEmpty, {
+    classes: classes,
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY),
+    noFiltersText: noFiltersText,
+    noFiltersTitle: noFiltersTitle
+  });
+};
+ExpandedPanelContentCategoryEmptyContainer.propTypes = {
+  dataTestId: string
+};
+export default ExpandedPanelContentCategoryEmptyContainer;