@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +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(props){return React.createElement("svg",props,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(props){return React.createElement("svg",props,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:aditionalInfo={},appearance:appearance=APPEARANCES.WHITE,checkIcon:checkIcon=!0,classes:classes,classNames:classNames={},dataTestId:dataTestId,description:description,disabled:disabled=!1,avatar:avatar,avatarProps:avatarProps={},Icon:Icon,iconProps:iconProps={},onClick:onClick,selected:selected=!1,size:size=SIZES.MEDIUM,titleText:titleText,tooltip:tooltip}=_ref;const IconComponent=isUTIcon(Icon)?React.createElement(UTIcon,_extends({size:48,colorTheme:selected?"accent":"dark",name:Icon},iconProps)):React.createElement(Icon,{className:"".concat(classes.icon," ").concat(classNames.icon)}),AvatarComponent=avatar?React.createElement(UTAvatar,_extends({size:SIZES.LARGE},avatarProps)):null;return 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,React.createElement("div",{className:"".concat(classes.textContainer," ").concat(checkIcon&&classes.textContainerWithCheckedIcon)},React.createElement("div",{className:classes.column},React.createElement("div",{className:classes.titleAndTooltip},React.createElement(UTLabel,{className:classes.titleText,variant:"subtitle1",weight:"medium"},titleText),tooltip&&React.createElement(UTTooltip,{content:tooltip},React.createElement("span",{className:classes.tooltip},React.createElement(HelpIcon,{className:"".concat(classes.infoIcon)})))),description&&React.createElement(UTLabel,{className:classes.description},description)),!objectIsEmpty(aditionalInfo)&&React.createElement("div",{className:"".concat(classes.column," ").concat(classes.aditionalInfoColumn)},!!aditionalInfo.title&&React.createElement(UTLabel,{className:classes.aditionalInfoTitle,variant:"small",weight:"semibold"},aditionalInfo.title),!!aditionalInfo.description&&React.createElement(UTLabel,{className:classes.aditionalInfoDescription,variant:"small"},aditionalInfo.description))),checkIcon&&selected&&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);
+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

@@ -1 +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: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:{},whiteApareance:{backgroundColor:theme.Palette.light["01"],boxShadow:getShadow({color:null===(_theme$Palette$shadow=theme.Palette.shadows)||void 0===_theme$Palette$shadow?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((null===(_theme$Palette$action=theme.Palette.actions)||void 0===_theme$Palette$action?void 0:_theme$Palette$action.accent["05"])||theme.Palette.accent["05"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:(null===(_theme$Palette$action2=theme.Palette.actions)||void 0===_theme$Palette$action2?void 0:_theme$Palette$action2.accent["05"])||theme.Palette.accent["05"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:(null===(_theme$Palette$action3=theme.Palette.actions)||void 0===_theme$Palette$action3?void 0:_theme$Palette$action3.accent["05"])||theme.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(_theme$Palette$action4=theme.Palette.actions)||void 0===_theme$Palette$action4?void 0:_theme$Palette$action4.accent["01"])||theme.Palette.accent["01"],outline:"2px solid ".concat((null===(_theme$Palette$action5=theme.Palette.actions)||void 0===_theme$Palette$action5?void 0:_theme$Palette$action5.accent["05"])||theme.Palette.accent["05"])},"&:active":{backgroundColor:(null===(_theme$Palette$action6=theme.Palette.actions)||void 0===_theme$Palette$action6?void 0:_theme$Palette$action6.accent["02"])||theme.Palette.accent["02"],outline:"2px solid ".concat((null===(_theme$Palette$action7=theme.Palette.actions)||void 0===_theme$Palette$action7?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"}},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:(null===(_theme$Palette$action8=theme.Palette.actions)||void 0===_theme$Palette$action8?void 0:_theme$Palette$action8.accent["01"])||theme.Palette.accent["01"],outline:"2px solid ".concat((null===(_theme$Palette$action9=theme.Palette.actions)||void 0===_theme$Palette$action9?void 0:_theme$Palette$action9.accent["03"])||theme.Palette.accent["03"]),"& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription":{color:(null===(_theme$Palette$action0=theme.Palette.actions)||void 0===_theme$Palette$action0?void 0:_theme$Palette$action0.accent["05"])||theme.Palette.accent["05"]},"& $icon path, & $infoIcon path, & $checkIcon path":{fill:(null===(_theme$Palette$action1=theme.Palette.actions)||void 0===_theme$Palette$action1?void 0:_theme$Palette$action1.accent["05"])||theme.Palette.accent["05"]},"&:hover":{backgroundColor:(null===(_theme$Palette$action10=theme.Palette.actions)||void 0===_theme$Palette$action10?void 0:_theme$Palette$action10.accent["02"])||theme.Palette.accent["02"]},"&:active":{backgroundColor:(null===(_theme$Palette$action11=theme.Palette.actions)||void 0===_theme$Palette$action11?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"}}}};
+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

@@ -1 +1,26 @@
-import{SwipeableDrawer}from"@material-ui/core";import{func,object,string}from"prop-types";import React from"react";const UTSheet=_ref=>{let{anchor:anchor,children:children,open:open,toggleDrawer:toggleDrawer,SlideProps:SlideProps}=_ref;return React.createElement(SwipeableDrawer,{SlideProps:SlideProps,anchor:anchor,open:open,onClose:()=>toggleDrawer(!1),onOpen:()=>toggleDrawer(!0)},children)};UTSheet.propTypes={anchor:string,open:func,toggleDrawer:func,SlideProps:object};export default UTSheet;
+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

@@ -1 +1,5 @@
-import{PANEL_POSITIONS}from"../../../../constants";export const ICON_BY_POSITION={[PANEL_POSITIONS.LEFT]:"IconChevronsRight",[PANEL_POSITIONS.RIGHT]:"IconChevronsLeft"};
+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

@@ -1 +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:dataTestId}=_ref;const{classes:classes,handleTogglePanel:handleTogglePanel,iconProps:iconProps,position:position}=useContext(UTShortcutPanelContext);return React.createElement(CollapsedPanelContent,{classes:classes,dataTestId:dataTestId,iconProps:iconProps,onClick:handleTogglePanel,position:position})};CollapsedPanelContentContainer.propTypes={dataTestId:string};export default CollapsedPanelContentContainer;
+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

@@ -1 +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:EXPAND_BUTTON,COLLAPSED_PANEL_CONTENT:COLLAPSED_PANEL_CONTENT}=ID_CONSTANTS,{filterGrouping:filterGrouping}=TEST_IDS,CollapsedPanelContent=_ref=>{let{classes:classes,dataTestId:dataTestId,iconProps:iconProps,onClick:onClick,position:position}=_ref;return React.createElement(UTTouchableWithoutFeedback,{className:classes.collapsedPanelContentExpandButton,dataTestId:dataTestId?"".concat(dataTestId,".").concat(COLLAPSED_PANEL_CONTENT,".").concat(EXPAND_BUTTON):filterGrouping.groupingPanel.collapsedPanelContent.expandButton,onClick:onClick},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;
+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

@@ -1 +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:EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY}=ID_CONSTANTS,ExpandedPanelContentCategoryEmptyContainer=_ref=>{let{dataTestId:dataTestId}=_ref;const{classes:classes,noFiltersText:noFiltersText,noFiltersTitle:noFiltersTitle}=useContext(UTShortcutPanelContext);return 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;
+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;

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

@@ -1 +1,43 @@
-import React from"react";import{objectOf,string}from"prop-types";import UTIcon from"../../../../../../../../../UTIcon";import UTLabel from"../../../../../../../../../UTLabel";import{ID_CONSTANTS}from"../../../../../../../../../../constants/testIds";const{DESCRIPTION:DESCRIPTION,ICON:ICON,TITLE:TITLE}=ID_CONSTANTS,ExpandedPanelContentCategoryEmpty=_ref=>{let{classes:classes,dataTestId:dataTestId,noFiltersText:noFiltersText,noFiltersTitle:noFiltersTitle}=_ref;return React.createElement("section",{className:classes.expandedPanelContentCategoryEmpty},React.createElement(UTIcon,{colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(ICON),name:"IconBookmarks"}),(noFiltersTitle||noFiltersText)&&React.createElement("div",{className:classes.expandedPanelContentCategoryEmptyText},React.createElement(UTLabel,{align:"center",dataTestId:"".concat(dataTestId,".").concat(TITLE),variant:"small"},noFiltersTitle),React.createElement(UTLabel,{align:"center",colorTheme:"gray",dataTestId:"".concat(dataTestId,".").concat(DESCRIPTION),variant:"small"},noFiltersText)))};ExpandedPanelContentCategoryEmpty.propTypes={classes:objectOf(string),dataTestId:string,noFiltersText:string,noFiltersTitle:string};export default ExpandedPanelContentCategoryEmpty;
+import React from 'react';
+import { objectOf, string } from 'prop-types';
+import UTIcon from '../../../../../../../../../UTIcon';
+import UTLabel from '../../../../../../../../../UTLabel';
+import { ID_CONSTANTS } from '../../../../../../../../../../constants/testIds';
+const {
+  DESCRIPTION,
+  ICON,
+  TITLE
+} = ID_CONSTANTS;
+const ExpandedPanelContentCategoryEmpty = _ref => {
+  let {
+    classes,
+    dataTestId,
+    noFiltersText,
+    noFiltersTitle
+  } = _ref;
+  return /*#__PURE__*/React.createElement("section", {
+    className: classes.expandedPanelContentCategoryEmpty
+  }, /*#__PURE__*/React.createElement(UTIcon, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(ICON),
+    name: "IconBookmarks"
+  }), (noFiltersTitle || noFiltersText) && /*#__PURE__*/React.createElement("div", {
+    className: classes.expandedPanelContentCategoryEmptyText
+  }, /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    variant: "small"
+  }, noFiltersTitle), /*#__PURE__*/React.createElement(UTLabel, {
+    align: "center",
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(DESCRIPTION),
+    variant: "small"
+  }, noFiltersText)));
+};
+ExpandedPanelContentCategoryEmpty.propTypes = {
+  classes: objectOf(string),
+  dataTestId: string,
+  noFiltersText: string,
+  noFiltersTitle: string
+};
+export default ExpandedPanelContentCategoryEmpty;

package/dist/esm/components/UTShortcutPanel/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/constants.js

@@ -1 +1,2 @@
-export const MOUSE_ENTER="enter";export const MOUSE_LEAVE="leave";
+export const MOUSE_ENTER = 'enter';
+export const MOUSE_LEAVE = 'leave';

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

@@ -1 +1,53 @@
-import React,{useContext,useState}from"react";import{bool,func,object,string}from"prop-types";import UTShortcutPanelContext from"../../../../../../../../context";import ExpandedPanelContentCategoryHeader from"./layout";import{MOUSE_ENTER,MOUSE_LEAVE}from"./constants";const ExpandedPanelContentCategoryHeaderContainer=_ref=>{let{category:category,categoryConfig:categoryConfig,collapsedCategory:collapsedCategory,dataTestId:dataTestId,handleToggleCollapsedCategory:handleToggleCollapsedCategory}=_ref;const{classes:classes,disableCollapsibleCategories:disableCollapsibleCategories}=useContext(UTShortcutPanelContext),{name:name}=category,{avatarPalette:avatarPalette,icon:icon}=categoryConfig,[hoverMode,setHoverMode]=useState(!1),handleHeaderHover=action=>{setHoverMode(action===MOUSE_ENTER)},headerEvents=disableCollapsibleCategories?{}:{onMouseEnter:()=>handleHeaderHover(MOUSE_ENTER),onMouseLeave:()=>handleHeaderHover(MOUSE_LEAVE)};return React.createElement(ExpandedPanelContentCategoryHeader,{avatarPalette:avatarPalette,classes:classes,collapsedCategory:collapsedCategory,dataTestId:dataTestId,disableCollapsibleCategories:disableCollapsibleCategories,handleToggleCollapsedCategory:handleToggleCollapsedCategory,headerEvents:headerEvents,hoverMode:hoverMode,icon:icon,title:name})};ExpandedPanelContentCategoryHeaderContainer.propTypes={category:object,categoryConfig:object,collapsedCategory:bool,dataTestId:string,handleToggleCollapsedCategory:func};export default ExpandedPanelContentCategoryHeaderContainer;
+import React, { useContext, useState } from 'react';
+import { bool, func, object, string } from 'prop-types';
+import UTShortcutPanelContext from '../../../../../../../../context';
+import ExpandedPanelContentCategoryHeader from './layout';
+import { MOUSE_ENTER, MOUSE_LEAVE } from './constants';
+const ExpandedPanelContentCategoryHeaderContainer = _ref => {
+  let {
+    category,
+    categoryConfig,
+    collapsedCategory,
+    dataTestId,
+    handleToggleCollapsedCategory
+  } = _ref;
+  const {
+    classes,
+    disableCollapsibleCategories
+  } = useContext(UTShortcutPanelContext);
+  const {
+    name
+  } = category;
+  const {
+    avatarPalette,
+    icon
+  } = categoryConfig;
+  const [hoverMode, setHoverMode] = useState(false);
+  const handleHeaderHover = action => {
+    setHoverMode(action === MOUSE_ENTER);
+  };
+  const headerEvents = disableCollapsibleCategories ? {} : {
+    onMouseEnter: () => handleHeaderHover(MOUSE_ENTER),
+    onMouseLeave: () => handleHeaderHover(MOUSE_LEAVE)
+  };
+  return /*#__PURE__*/React.createElement(ExpandedPanelContentCategoryHeader, {
+    avatarPalette: avatarPalette,
+    classes: classes,
+    collapsedCategory: collapsedCategory,
+    dataTestId: dataTestId,
+    disableCollapsibleCategories: disableCollapsibleCategories,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
+    headerEvents: headerEvents,
+    hoverMode: hoverMode,
+    icon: icon,
+    title: name
+  });
+};
+ExpandedPanelContentCategoryHeaderContainer.propTypes = {
+  category: object,
+  categoryConfig: object,
+  collapsedCategory: bool,
+  dataTestId: string,
+  handleToggleCollapsedCategory: func
+};
+export default ExpandedPanelContentCategoryHeaderContainer;