@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,123 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.sortOptions=exports.shouldReset=exports.getRightAdornments=exports.getLeftAdornments=exports.getDisplayValue=void 0;var _clone=_interopRequireDefault(require("lodash/clone")),_isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_Palette=require("../../../../constants/Palette"),_constants=require("../../../UTBaseInputField/constants"),_constants2=require("../../../UTCheckList/versions/V1/constants"),_constants3=require("./constants");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const shouldResetMultipleSelect=(value,options)=>!(0,_isEmpty.default)(value)&&((0,_isEmpty.default)(options)||value.some(el=>!options.some(opt=>opt.value===el)&&!options.some(opt=>opt.subOptions&&opt.subOptions.some(sub=>sub.value===el)))),shouldResetSimpleSelect=(value,options)=>value&&((0,_isEmpty.default)(options)||!options.some(el=>el.value===value)&&!options.some(el=>el.subOptions&&el.subOptions.some(sub=>sub.value===value))),shouldReset=(value,options,isMultiple)=>isMultiple?shouldResetMultipleSelect(value,options):shouldResetSimpleSelect(value,options);exports.shouldReset=shouldReset;const getDisplayValue=(inputValue,options,multiple)=>{if(null==inputValue||""===inputValue)return"";const findLabel=optionValue=>{var _options$find;return"".concat(null===(_options$find=options.find(o=>o.value===optionValue))||void 0===_options$find?void 0:_options$find.name)||""};return multiple?inputValue.map(findLabel).join(", "):findLabel(inputValue)};exports.getDisplayValue=getDisplayValue;const getLeftAdornments=_ref=>{let{error:error,multiple:multiple,prefix:prefix,value:value,icon:icon}=_ref;const adornments=[];return error&&adornments.push({name:_constants.COMPONENT_KEYS.ICON,props:{showOnlyOnError:!0}}),multiple&&!(0,_isEmpty.default)(value)&&adornments.push({name:_constants.COMPONENT_KEYS.BADGE,props:{text:value.length,colorTheme:error?_Palette.COLOR_THEMES.error:_Palette.COLOR_THEMES.accent}}),prefix&&adornments.push({name:_constants.COMPONENT_KEYS.PREFIX,props:{text:prefix}}),icon&&adornments.push({name:_constants.COMPONENT_KEYS.ICON,props:{Icon:icon}}),adornments};exports.getLeftAdornments=getLeftAdornments;const getRightAdornments=_ref2=>{let{action:action,clearable:clearable,disabled:disabled,handleClearSelection:handleClearSelection,readOnly:readOnly,showClearButton:showClearButton,suffix:suffix,variant:variant}=_ref2;const adornments=[];return suffix&&adornments.push({name:_constants.COMPONENT_KEYS.SUFFIX,props:{text:suffix}}),showClearButton&&clearable&&!disabled&&!readOnly?adornments.push({key:"clearAction",name:_constants.COMPONENT_KEYS.ACTION,props:{action:{Icon:"IconX",onClick:handleClearSelection,size:"small"}}}):adornments.push({name:_constants.COMPONENT_KEYS.ICON,props:{Icon:"IconChevronDown",changeIconOnError:!1,changeOnError:!0,...variant===_constants3.VARIANTS.picker&&!disabled&&{colorTheme:_Palette.COLOR_THEMES.dark}}}),action&&adornments.push({name:_constants.COMPONENT_KEYS.ACTION,props:{action:action}}),adornments};exports.getRightAdornments=getRightAdornments;const sortOptions=(options,value,multiple)=>(0,_clone.default)(options).map(option=>({...option,category:multiple?null!=value&&value.includes(option.value)?_constants2.NO_CATEGORY:option.category:option.value===value?_constants2.NO_CATEGORY:option.category})).sort((a,b)=>a.category===_constants2.NO_CATEGORY?-1:b.category===_constants2.NO_CATEGORY?1:0);exports.sortOptions=sortOptions;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortOptions = exports.shouldReset = exports.getRightAdornments = exports.getLeftAdornments = exports.getDisplayValue = void 0;
+var _clone = _interopRequireDefault(require("lodash/clone"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _Palette = require("../../../../constants/Palette");
+var _constants = require("../../../UTBaseInputField/constants");
+var _constants2 = require("../../../UTCheckList/versions/V1/constants");
+var _constants3 = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const shouldResetMultipleSelect = (value, options) => !(0, _isEmpty.default)(value) && ((0, _isEmpty.default)(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 && ((0, _isEmpty.default)(options) || !options.some(el => el.value === value) && !options.some(el => el.subOptions && el.subOptions.some(sub => sub.value === value)));
+const shouldReset = (value, options, isMultiple) => {
+  if (isMultiple) return shouldResetMultipleSelect(value, options);
+  return shouldResetSimpleSelect(value, options);
+};
+exports.shouldReset = shouldReset;
+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;
+};
+exports.getDisplayValue = getDisplayValue;
+const getLeftAdornments = _ref => {
+  let {
+    error,
+    multiple,
+    prefix,
+    value,
+    icon
+  } = _ref;
+  const adornments = [];
+  if (error) adornments.push({
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      showOnlyOnError: true
+    }
+  });
+  if (multiple && !(0, _isEmpty.default)(value)) adornments.push({
+    name: _constants.COMPONENT_KEYS.BADGE,
+    props: {
+      text: value.length,
+      colorTheme: error ? _Palette.COLOR_THEMES.error : _Palette.COLOR_THEMES.accent
+    }
+  });
+  if (prefix) adornments.push({
+    name: _constants.COMPONENT_KEYS.PREFIX,
+    props: {
+      text: prefix
+    }
+  });
+  if (icon) adornments.push({
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      Icon: icon
+    }
+  });
+  return adornments;
+};
+exports.getLeftAdornments = getLeftAdornments;
+const getRightAdornments = _ref2 => {
+  let {
+    action,
+    clearable,
+    disabled,
+    handleClearSelection,
+    readOnly,
+    showClearButton,
+    suffix,
+    variant
+  } = _ref2;
+  const adornments = [];
+  if (suffix) adornments.push({
+    name: _constants.COMPONENT_KEYS.SUFFIX,
+    props: {
+      text: suffix
+    }
+  });
+  if (showClearButton && clearable && !disabled && !readOnly) adornments.push({
+    key: 'clearAction',
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action: {
+        Icon: 'IconX',
+        onClick: handleClearSelection,
+        size: 'small'
+      }
+    }
+  });else adornments.push({
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      Icon: 'IconChevronDown',
+      changeIconOnError: false,
+      changeOnError: true,
+      ...(variant === _constants3.VARIANTS.picker && !disabled && {
+        colorTheme: _Palette.COLOR_THEMES.dark
+      })
+    }
+  });
+  if (action) adornments.push({
+    name: _constants.COMPONENT_KEYS.ACTION,
+    props: {
+      action
+    }
+  });
+  return adornments;
+};
+exports.getRightAdornments = getRightAdornments;
+const sortOptions = (options, value, multiple) => {
+  const copiedOptions = (0, _clone.default)(options);
+  return copiedOptions.map(option => ({
+    ...option,
+    category: multiple ? value !== null && value !== void 0 && value.includes(option.value) ? _constants2.NO_CATEGORY : option.category : option.value === value ? _constants2.NO_CATEGORY : option.category
+  })).sort((a, b) => a.category === _constants2.NO_CATEGORY ? -1 : b.category === _constants2.NO_CATEGORY ? 1 : 0);
+};
+exports.sortOptions = sortOptions;

package/dist/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/components/UTSelectableCard/constants.js

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SIZES=exports.APPEARANCES=void 0;const APPEARANCES=exports.APPEARANCES={GRAY:"gray",WHITE:"white"},SIZES=exports.SIZES={XLARGE:"xlarge",LARGE:"large",MEDIUM:"medium",SMALL:"small"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZES = exports.APPEARANCES = void 0;
+const APPEARANCES = exports.APPEARANCES = {
+  GRAY: 'gray',
+  WHITE: 'white'
+};
+const SIZES = exports.SIZES = {
+  XLARGE: 'xlarge',
+  LARGE: 'large',
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};

package/dist/components/UTSelectableCard/index.js

@@ -1 +1,138 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_object=require("@widergy/web-utils/lib/object"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTTooltip=_interopRequireDefault(require("../UTTooltip")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_componentUtils=require("../../utils/componentUtils"),_UTIcon=_interopRequireDefault(require("../UTIcon")),_UTAvatar=_interopRequireDefault(require("../UTAvatar")),_constants=require("./constants"),_theme=require("./theme");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}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)}var CheckIcon=function(props){return _react.default.createElement("svg",props,_react.default.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.default.createElement("svg",props,_react.default.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"};const UTSelectableCard=_ref=>{let{aditionalInfo:aditionalInfo={},appearance:appearance=_constants.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=_constants.SIZES.MEDIUM,titleText:titleText,tooltip:tooltip}=_ref;const IconComponent=(0,_componentUtils.isUTIcon)(Icon)?_react.default.createElement(_UTIcon.default,_extends({size:48,colorTheme:selected?"accent":"dark",name:Icon},iconProps)):_react.default.createElement(Icon,{className:"".concat(classes.icon," ").concat(classNames.icon)}),AvatarComponent=avatar?_react.default.createElement(_UTAvatar.default,_extends({size:_constants.SIZES.LARGE},avatarProps)):null;return _react.default.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.default.createElement("div",{className:"".concat(classes.textContainer," ").concat(checkIcon&&classes.textContainerWithCheckedIcon)},_react.default.createElement("div",{className:classes.column},_react.default.createElement("div",{className:classes.titleAndTooltip},_react.default.createElement(_UTLabel.default,{className:classes.titleText,variant:"subtitle1",weight:"medium"},titleText),tooltip&&_react.default.createElement(_UTTooltip.default,{content:tooltip},_react.default.createElement("span",{className:classes.tooltip},_react.default.createElement(HelpIcon,{className:"".concat(classes.infoIcon)})))),description&&_react.default.createElement(_UTLabel.default,{className:classes.description},description)),!(0,_object.objectIsEmpty)(aditionalInfo)&&_react.default.createElement("div",{className:"".concat(classes.column," ").concat(classes.aditionalInfoColumn)},!!aditionalInfo.title&&_react.default.createElement(_UTLabel.default,{className:classes.aditionalInfoTitle,variant:"small",weight:"semibold"},aditionalInfo.title),!!aditionalInfo.description&&_react.default.createElement(_UTLabel.default,{className:classes.aditionalInfoDescription,variant:"small"},aditionalInfo.description))),checkIcon&&selected&&_react.default.createElement(CheckIcon,{className:classes.checkIcon}))};UTSelectableCard.propTypes={aditionalInfo:(0,_propTypes.shape)({description:_propTypes.string,title:_propTypes.string}),appearance:(0,_propTypes.oneOf)([_constants.APPEARANCES.GRAY,_constants.APPEARANCES.WHITE]),avatar:_propTypes.bool,avatarProps:(0,_propTypes.objectOf)(_propTypes.string),checkIcon:_propTypes.bool,classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),dataTestId:_propTypes.string,description:_propTypes.string,disabled:_propTypes.bool,Icon:_propTypes.elementType,iconProps:(0,_propTypes.objectOf)(_propTypes.string),onClick:_propTypes.func,selected:_propTypes.bool,size:(0,_propTypes.oneOf)([_constants.SIZES.MEDIUM,_constants.SIZES.SMALL]),titleText:_propTypes.string,tooltip:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTSelectableCard);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _object = require("@widergy/web-utils/lib/object");
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _componentUtils = require("../../utils/componentUtils");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTAvatar = _interopRequireDefault(require("../UTAvatar"));
+var _constants = require("./constants");
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.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.default.createElement("svg", props, /*#__PURE__*/_react.default.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"
+};
+const UTSelectableCard = _ref => {
+  let {
+    aditionalInfo = {},
+    appearance = _constants.APPEARANCES.WHITE,
+    checkIcon = true,
+    classes,
+    classNames = {},
+    dataTestId,
+    description,
+    disabled = false,
+    avatar,
+    avatarProps = {},
+    Icon,
+    iconProps = {},
+    onClick,
+    selected = false,
+    size = _constants.SIZES.MEDIUM,
+    titleText,
+    tooltip
+  } = _ref;
+  const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    size: 48,
+    colorTheme: selected ? 'accent' : 'dark',
+    name: Icon
+  }, iconProps)) : /*#__PURE__*/_react.default.createElement(Icon, {
+    className: "".concat(classes.icon, " ").concat(classNames.icon)
+  });
+  const AvatarComponent = avatar ? /*#__PURE__*/_react.default.createElement(_UTAvatar.default, _extends({
+    size: _constants.SIZES.LARGE
+  }, avatarProps)) : null;
+  return /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "".concat(classes.textContainer, " ").concat(checkIcon && classes.textContainerWithCheckedIcon)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.column
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.titleAndTooltip
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.titleText,
+    variant: "subtitle1",
+    weight: "medium"
+  }, titleText), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.tooltip
+  }, /*#__PURE__*/_react.default.createElement(HelpIcon, {
+    className: "".concat(classes.infoIcon)
+  })))), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.description
+  }, description)), !(0, _object.objectIsEmpty)(aditionalInfo) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(classes.column, " ").concat(classes.aditionalInfoColumn)
+  }, !!aditionalInfo.title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.aditionalInfoTitle,
+    variant: "small",
+    weight: "semibold"
+  }, aditionalInfo.title), !!aditionalInfo.description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.aditionalInfoDescription,
+    variant: "small"
+  }, aditionalInfo.description))), checkIcon && selected && /*#__PURE__*/_react.default.createElement(CheckIcon, {
+    className: classes.checkIcon
+  }));
+};
+UTSelectableCard.propTypes = {
+  aditionalInfo: (0, _propTypes.shape)({
+    description: _propTypes.string,
+    title: _propTypes.string
+  }),
+  appearance: (0, _propTypes.oneOf)([_constants.APPEARANCES.GRAY, _constants.APPEARANCES.WHITE]),
+  avatar: _propTypes.bool,
+  avatarProps: (0, _propTypes.objectOf)(_propTypes.string),
+  checkIcon: _propTypes.bool,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  description: _propTypes.string,
+  disabled: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  iconProps: (0, _propTypes.objectOf)(_propTypes.string),
+  onClick: _propTypes.func,
+  selected: _propTypes.bool,
+  size: (0, _propTypes.oneOf)([_constants.SIZES.MEDIUM, _constants.SIZES.SMALL]),
+  titleText: _propTypes.string,
+  tooltip: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSelectableCard);

package/dist/components/UTSelectableCard/theme.js

@@ -1 +1,210 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _shadowUtils=require("../../utils/shadowUtils");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:(0,_shadowUtils.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"}}}};exports.retrieveStyle=retrieveStyle;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _shadowUtils = require("../../utils/shadowUtils");
+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: (0, _shadowUtils.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'
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTSheet/index.js

@@ -1 +1,33 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _core=require("@material-ui/core"),_propTypes=require("prop-types"),_react=_interopRequireDefault(require("react"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const UTSheet=_ref=>{let{anchor:anchor,children:children,open:open,toggleDrawer:toggleDrawer,SlideProps:SlideProps}=_ref;return _react.default.createElement(_core.SwipeableDrawer,{SlideProps:SlideProps,anchor:anchor,open:open,onClose:()=>toggleDrawer(!1),onOpen:()=>toggleDrawer(!0)},children)};UTSheet.propTypes={anchor:_propTypes.string,open:_propTypes.func,toggleDrawer:_propTypes.func,SlideProps:_propTypes.object};var _default=exports.default=UTSheet;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@material-ui/core");
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const UTSheet = _ref => {
+  let {
+    anchor,
+    children,
+    open,
+    toggleDrawer,
+    SlideProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_core.SwipeableDrawer, {
+    SlideProps: SlideProps,
+    anchor: anchor,
+    open: open,
+    onClose: () => toggleDrawer(false),
+    onOpen: () => toggleDrawer(true)
+  }, children);
+};
+UTSheet.propTypes = {
+  anchor: _propTypes.string,
+  open: _propTypes.func,
+  toggleDrawer: _propTypes.func,
+  SlideProps: _propTypes.object
+};
+var _default = exports.default = UTSheet;

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

@@ -1 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ICON_BY_POSITION=void 0;var _constants=require("../../../../constants");const ICON_BY_POSITION=exports.ICON_BY_POSITION={[_constants.PANEL_POSITIONS.LEFT]:"IconChevronsRight",[_constants.PANEL_POSITIONS.RIGHT]:"IconChevronsLeft"};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_BY_POSITION = void 0;
+var _constants = require("../../../../constants");
+const ICON_BY_POSITION = exports.ICON_BY_POSITION = {
+  [_constants.PANEL_POSITIONS.LEFT]: 'IconChevronsRight',
+  [_constants.PANEL_POSITIONS.RIGHT]: 'IconChevronsLeft'
+};

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

@@ -1 +1,34 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_context=_interopRequireDefault(require("../../../../context")),_layout=_interopRequireDefault(require("./layout"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}const CollapsedPanelContentContainer=_ref=>{let{dataTestId:dataTestId}=_ref;const{classes:classes,handleTogglePanel:handleTogglePanel,iconProps:iconProps,position:position}=(0,_react.useContext)(_context.default);return _react.default.createElement(_layout.default,{classes:classes,dataTestId:dataTestId,iconProps:iconProps,onClick:handleTogglePanel,position:position})};CollapsedPanelContentContainer.propTypes={dataTestId:_propTypes.string};var _default=exports.default=CollapsedPanelContentContainer;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _layout = _interopRequireDefault(require("./layout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CollapsedPanelContentContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    handleTogglePanel,
+    iconProps,
+    position
+  } = (0, _react.useContext)(_context.default);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    classes: classes,
+    dataTestId: dataTestId,
+    iconProps: iconProps,
+    onClick: handleTogglePanel,
+    position: position
+  });
+};
+CollapsedPanelContentContainer.propTypes = {
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = CollapsedPanelContentContainer;