@widergy/energy-ui 3.12.0 → 3.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.13.0](https://github.com/widergy/energy-ui/compare/v3.12.1...v3.13.0) (2024-07-22)
+
+
+### Features
+
+* utpanel added prop ([e999fb1](https://github.com/widergy/energy-ui/commit/e999fb179562d14496d71798b4de912f77e3fbff))
+
+## [3.12.1](https://github.com/widergy/energy-ui/compare/v3.12.0...v3.12.1) (2024-07-18)
+
+
+### Bug Fixes
+
+* update uticon ([#464](https://github.com/widergy/energy-ui/issues/464)) ([c5320e6](https://github.com/widergy/energy-ui/commit/c5320e69a02d0840cf690194341d52f2406e7ae5))
+
 # [3.12.0](https://github.com/widergy/energy-ui/compare/v3.11.0...v3.12.0) (2024-07-17)
 
 

package/dist/components/UTBadge/theme.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.variantsColorTheme = exports.retrieveStyle = void 0;
 var _constants = require("./constants");
 const variantsColorTheme = (theme, colorTheme) => {
+  var _theme$Palette$action;
   const colorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const paletteTheme = theme.Palette[colorName] || theme.Palette.actions[colorName];
+  const paletteTheme = theme.Palette[colorName] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorName]);
   const backgroundColorMapper = {
     alert: paletteTheme['04'],
     information: paletteTheme['05'],

package/dist/components/UTButton/constants.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VARIANTS = exports.SIZES = exports.SHADOW_MAPPER = exports.ICON_PLACEMENTS = exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
+var _Palette = require("../../constants/Palette");
 const VARIANTS = exports.VARIANTS = {
   filled: 'contained',
   outlined: 'outlined',
@@ -30,11 +31,11 @@ const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   variant: 'filled'
 };
 const COLORS_MAPPER = exports.COLORS_MAPPER = {
-  error: 'error',
-  negative: 'negative',
-  primary: 'accent',
-  secondary: 'neutral',
-  success: 'success'
+  error: _Palette.COLOR_THEMES.error,
+  negative: _Palette.COLOR_THEMES.negative,
+  primary: _Palette.COLOR_THEMES.accent,
+  secondary: _Palette.COLOR_THEMES.neutral,
+  success: _Palette.COLOR_THEMES.success
 };
 const SHADOW_MAPPER = exports.SHADOW_MAPPER = {
   [COLORS_MAPPER.error]: 'accentError',

package/dist/components/UTButton/theme.js

@@ -10,10 +10,11 @@ var _constants = require("./constants");
 const variantsColorTheme = (theme, colorTheme, variant) => {
   var _theme$Palette$shadow;
   const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette.actions[actionColorName];
+  const actionPaletteColors = theme.Palette.actions || theme.Palette;
+  const actionTheme = actionPaletteColors[actionColorName];
   const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
-  const negativeTheme = theme.Palette.actions[_constants.COLORS_MAPPER.negative];
-  const neutralTheme = theme.Palette.actions[_constants.COLORS_MAPPER.secondary];
+  const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
+  const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
   const definition = {
     filled: {
       backgroundColor: actionTheme['04'],

package/dist/components/UTExternalLink/theme.js

@@ -7,8 +7,9 @@ exports.variantsColorTheme = exports.retrieveStyle = void 0;
 var _classesUtils = require("../../utils/classesUtils");
 var _constants = require("./constants");
 const variantsColorTheme = (colorTheme, theme) => {
+  var _theme$Palette$action;
   const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme];
-  const actionTheme = theme.Palette.actions[actionColorName];
+  const actionTheme = ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[actionColorName]) || theme.Palette[actionColorName];
   return actionTheme['05'];
 };
 exports.variantsColorTheme = variantsColorTheme;

package/dist/components/UTGoogleAutocomplete/theme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$Palette$action;
   let {
     theme
   } = _ref;
@@ -43,7 +44,7 @@ const retrieveStyle = _ref => {
       padding: '12px 0'
     },
     resultIcon: {
-      color: theme.Palette.actions.neutral['05'],
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
       minWidth: '20px'
     }
   };

package/dist/components/UTIcon/README.md

@@ -10,12 +10,13 @@ The icon name must be with the first letter of each word in uppercase.
 
 ### Props
 
-| Name      | Description                         |
-| --------- | ----------------------------------- |
-| name      | The name of the icon in TablerIcons |
-| classname | The classname to aplied to the Icon |
-| color     | The icon color                      |
-| size      | The icon size in px                 |
+| Name        | Description                         |
+| ----------- | ----------------------------------- |
+| name        | The name of the icon in TablerIcons |
+| classname   | The classname to aplied to the Icon |
+| colorTheme  | The icon color                      |
+| shade       | The icon color shade                |
+| size        | The icon size in px                 |
 
 ### Usage
 
@@ -27,7 +28,7 @@ import styles from './styles.module.scss';
 const MyComponent = () => {
   return (
     <div>
-      <UTIcon name="IconArrowLeft" color="red" size={48} className={styles.iconClassname} />
+      <UTIcon name="IconArrowLeft" colorTheme="dark" size={48} className={styles.iconClassname} />
     </div>
   );
 };

package/dist/components/UTIcon/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FILLED_ICON_SUFIX = exports.FILLED_ICON_COLOR = void 0;
+const FILLED_ICON_COLOR = exports.FILLED_ICON_COLOR = 'transparent';
+const FILLED_ICON_SUFIX = exports.FILLED_ICON_SUFIX = 'Filled';

package/dist/components/UTIcon/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -14,21 +16,41 @@ const UTIcon = _ref => {
   let {
     className,
     color,
+    colorTheme,
     name,
-    size
+    shade,
+    size,
+    theme
   } = _ref;
+  const {
+    iconColor,
+    iconStyle
+  } = (0, _theme.retrieveColor)({
+    color,
+    colorTheme,
+    name,
+    shade,
+    theme
+  });
   const IconComponent = TablerIcons[name];
   if (!IconComponent) return null;
   return /*#__PURE__*/_react.default.createElement(IconComponent, {
     className: className,
-    color: color,
-    size: size
+    color: iconColor,
+    size: size,
+    style: iconStyle
   });
 };
 UTIcon.propTypes = {
   className: _propTypes.string,
+  /**
+   * @deprecated The "color" prop is deprecated and will be removed in a future release. Please use "colorTheme" instead.
+   */
   color: _propTypes.string,
+  colorTheme: _propTypes.string,
   name: _propTypes.string,
-  size: _propTypes.number
+  shade: _propTypes.string,
+  size: _propTypes.number,
+  theme: _propTypes.object
 };
-var _default = exports.default = UTIcon;
+var _default = exports.default = (0, _WithTheme.default)()(UTIcon);

package/dist/components/UTIcon/theme.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveColor = void 0;
+var _Palette = require("../../constants/Palette");
+var _constants = require("./constants");
+const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
+const getIconColorDefinition = (color, iconName) => {
+  const filled = iconName.endsWith(_constants.FILLED_ICON_SUFIX);
+  return {
+    iconColor: filled ? _constants.FILLED_ICON_COLOR : color,
+    iconStyle: filled ? {
+      color
+    } : {}
+  };
+};
+const retrieveColor = _ref => {
+  var _theme$Palette$action;
+  let {
+    color,
+    colorTheme,
+    name,
+    shade,
+    theme
+  } = _ref;
+  if (color) return getIconColorDefinition(color, name);
+  if (!colorTheme) return {};
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]);
+  const colorShade = shade || getDefaultColorShade(colorTheme);
+  return getIconColorDefinition(colorThemeDefinition[colorShade], name);
+};
+exports.retrieveColor = retrieveColor;

package/dist/components/UTLabel/constants.js

@@ -3,18 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.SHADES = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = exports.COLOR_THEMES = void 0;
+exports.WEIGHTS = exports.VARIANTS_SIZES = exports.VARIANTS_LINE_HEIGHT = exports.VARIANTS = exports.MARKDOWN_RENDERERS = exports.DEFAULT_PROPS = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _Palette = require("../../constants/Palette");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable react/prop-types */
 
-const SHADES = exports.SHADES = {
-  shade01: '01',
-  shade02: '02',
-  shade03: '03',
-  shade04: '04',
-  shade05: '05'
-};
 const VARIANTS = exports.VARIANTS = {
   title1: 'h1',
   title2: 'h2',
@@ -62,15 +56,6 @@ const WEIGHTS = exports.WEIGHTS = {
   extrabold: 800,
   black: 900
 };
-const COLOR_THEMES = exports.COLOR_THEMES = {
-  dark: 'dark',
-  gray: 'gray',
-  light: 'light',
-  success: 'success',
-  error: 'error',
-  warning: 'warning',
-  information: 'information'
-};
 const MARKDOWN_RENDERERS = exports.MARKDOWN_RENDERERS = {
   a: _ref => {
     let {
@@ -85,7 +70,7 @@ const MARKDOWN_RENDERERS = exports.MARKDOWN_RENDERERS = {
   }
 };
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
-  colorTheme: 'dark',
+  colorTheme: _Palette.COLOR_THEMES.dark,
   field: {},
   markdownRenderers: MARKDOWN_RENDERERS,
   variant: 'body',

package/dist/components/UTLabel/theme.js

@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _Palette = require("../../constants/Palette");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getDefaultColorShade = colorTheme => colorTheme === _constants.COLOR_THEMES.gray ? _constants.SHADES.shade04 : colorTheme === _constants.COLOR_THEMES.light ? _constants.SHADES.shade01 : _constants.SHADES.shade05;
+const getDefaultColorShade = colorTheme => colorTheme === _Palette.COLOR_THEMES.gray ? _Palette.COLOR_SHADES.shade04 : colorTheme === _Palette.COLOR_THEMES.light ? _Palette.COLOR_SHADES.shade01 : _Palette.COLOR_SHADES.shade05;
 const variantsColorTheme = (colorTheme, shade, theme) => {
-  const colorThemeDefinition = theme.Palette[colorTheme] || theme.Palette.actions[colorTheme] || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
-  const colorShade = Object.values(_constants.SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
+  var _theme$Palette$action;
+  const colorThemeDefinition = theme.Palette[colorTheme] || ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action[colorTheme]) || theme.Palette[_constants.DEFAULT_PROPS.colorTheme];
+  const colorShade = Object.values(_Palette.COLOR_SHADES).includes(shade) ? shade : getDefaultColorShade(colorTheme);
   return colorThemeDefinition[colorShade] || _colorsModule.default.black;
 };
 const linkColor = (theme, colorTheme) => {
-  const color = colorTheme === _constants.COLOR_THEMES.light ? theme.Palette.actions.negative[_constants.SHADES.shade05] : colorTheme === _constants.COLOR_THEMES.error ? theme.Palette.actions.error[_constants.SHADES.shade05] : theme.Palette.actions.neutral[_constants.SHADES.shade05];
+  const actionPaletteColors = theme.Palette.actions || theme.Palette;
+  const color = colorTheme === _Palette.COLOR_THEMES.light ? actionPaletteColors.negative[_Palette.COLOR_SHADES.shade05] : colorTheme === _Palette.COLOR_THEMES.error ? actionPaletteColors.error[_Palette.COLOR_SHADES.shade05] : actionPaletteColors.neutral[_Palette.COLOR_SHADES.shade05];
   return color;
 };
 const retrieveStyle = _ref => {

package/dist/components/UTOnboarding/theme.js

@@ -24,17 +24,19 @@ const getLabelTheme = _ref2 => {
   }[variant];
 };
 const getButtonTheme = _ref3 => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
   let {
     theme,
     variant
   } = _ref3;
   return {
-    [_constants.VARIANTS.dark]: theme.Palette.actions.negative['04'],
-    [_constants.VARIANTS.information]: theme.Palette.actions.negative['04'],
-    [_constants.VARIANTS.light]: theme.Palette.actions.accent['04']
+    [_constants.VARIANTS.dark]: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.negative['04']) || theme.Palette.negative['04'],
+    [_constants.VARIANTS.information]: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.negative['04']) || theme.Palette.negative['04'],
+    [_constants.VARIANTS.light]: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['04']) || theme.Palette.accent['04']
   }[variant];
 };
 const getButtonNextTextTheme = _ref4 => {
+  var _theme$Palette$action4;
   let {
     theme,
     variant
@@ -42,7 +44,7 @@ const getButtonNextTextTheme = _ref4 => {
   return {
     [_constants.VARIANTS.dark]: theme.Palette.dark['05'],
     [_constants.VARIANTS.information]: theme.Palette.dark['05'],
-    [_constants.VARIANTS.light]: theme.Palette.actions.negative['05']
+    [_constants.VARIANTS.light]: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.negative['05']) || theme.Palette.negative['05']
   }[variant];
 };
 const validateProps = _ref5 => {

package/dist/components/UTPanel/index.js

@@ -15,6 +15,7 @@ var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _commonTypes = require("../../types/commonTypes");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 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); }
 const UTPanel = _ref => {
   let {
     children,
@@ -30,7 +31,8 @@ const UTPanel = _ref => {
     perfectScrollbarOptions,
     title,
     TitleComponent,
-    TitleIcon
+    TitleIcon,
+    ...props
   } = _ref;
   const {
     title: titleClass,
@@ -41,7 +43,7 @@ const UTPanel = _ref => {
     iconClose: iconCloseClass,
     ...drawerClasses
   } = classes;
-  return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, {
+  return /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, _extends({
     anchor: panelSide,
     open: open,
     onOpen: onOpen,
@@ -58,7 +60,7 @@ const UTPanel = _ref => {
       paper: "".concat(_stylesModule.default.paper, " ").concat(drawerClasses.paper),
       root: "".concat(containerRef && _stylesModule.default.root, " ").concat(drawerClasses.root)
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.titleContainer, " ").concat(titleContainerClass)
   }, TitleComponent || /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.iconTitleContainer

package/dist/components/UTProductItem/theme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 const retrieveStyle = _ref => {
+  var _theme$Palette$action, _theme$Palette$action2;
   let {
     theme
   } = _ref;
@@ -26,7 +27,7 @@ const retrieveStyle = _ref => {
       paddingBottom: '24px'
     },
     discountChip: {
-      backgroundColor: theme.Palette.actions.accent['04'],
+      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'],
       borderRadius: '4px',
       padding: '4px 8px'
     },
@@ -55,7 +56,7 @@ const retrieveStyle = _ref => {
       gridGap: '12px'
     },
     selectedQuantity: {
-      backgroundColor: theme.Palette.actions.neutral['04'],
+      backgroundColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['04']) || theme.Palette.neutral['04'],
       borderRadius: '4px',
       padding: '4px 8px'
     }

package/dist/components/UTSelectableCard/theme.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _shadowUtils = require("../../utils/shadowUtils");
 const retrieveStyle = _ref => {
-  var _theme$Palette$shadow;
+  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$action10, _theme$Palette$action11, _theme$Palette$action12, _theme$Palette$action13;
   let {
     theme
   } = _ref;
@@ -113,20 +113,20 @@ const retrieveStyle = _ref => {
     },
     whiteSelectedContainer: {
       boxShadow: 'none',
-      outline: "2px solid ".concat(theme.Palette.actions.accent['05']),
+      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.actions.accent['05']
+        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.actions.accent['05']
+        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.actions.accent['01'],
-        outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
+        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.actions.accent['02'],
-        outline: "2px solid ".concat(theme.Palette.actions.accent['05'])
+        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: {
@@ -169,19 +169,19 @@ const retrieveStyle = _ref => {
       }
     },
     graySelectedContainer: {
-      backgroundColor: theme.Palette.actions.accent['01'],
-      outline: "2px solid ".concat(theme.Palette.actions.accent['03']),
+      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.actions.accent['05']
+        color: ((_theme$Palette$action10 = theme.Palette.actions) === null || _theme$Palette$action10 === void 0 ? void 0 : _theme$Palette$action10.accent['05']) || theme.Palette.accent['05']
       },
       '& $icon path, & $infoIcon path, & $checkIcon path': {
-        fill: theme.Palette.actions.accent['05']
+        fill: ((_theme$Palette$action11 = theme.Palette.actions) === null || _theme$Palette$action11 === void 0 ? void 0 : _theme$Palette$action11.accent['05']) || theme.Palette.accent['05']
       },
       '&:hover': {
-        backgroundColor: theme.Palette.actions.accent['02']
+        backgroundColor: ((_theme$Palette$action12 = theme.Palette.actions) === null || _theme$Palette$action12 === void 0 ? void 0 : _theme$Palette$action12.accent['02']) || theme.Palette.accent['02']
       },
       '&:active': {
-        backgroundColor: theme.Palette.actions.accent['03'],
+        backgroundColor: ((_theme$Palette$action13 = theme.Palette.actions) === null || _theme$Palette$action13 === void 0 ? void 0 : _theme$Palette$action13.accent['03']) || theme.Palette.accent['03'],
         '& $titleText, & $description, & $aditionalInfoTitle, & $aditionalInfoDescription': {
           color: theme.Palette.light['01']
         },

package/dist/components/UTTable/theme.js

@@ -9,7 +9,7 @@ var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.
 var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
-  var _theme$UTTable, _theme$UTTable2, _theme$UTTable3, _theme$UTTable4, _theme$UTTable5, _theme$UTTable6, _theme$UTTable7, _theme$UTTable8, _theme$UTTable9, _theme$UTTable10, _theme$UTTable11, _theme$UTTable12, _theme$UTTable13, _theme$UTTable14, _theme$UTTable15, _theme$UTTable16, _theme$UTTable17, _theme$UTTable18, _theme$UTTable19, _theme$UTTable20, _theme$UTTable21, _theme$UTTable22, _theme$UTTable23, _theme$UTTable24, _theme$UTTable25, _theme$UTTable26, _theme$UTTable27;
+  var _theme$UTTable, _theme$UTTable2, _theme$UTTable3, _theme$UTTable4, _theme$UTTable5, _theme$UTTable6, _theme$UTTable7, _theme$UTTable8, _theme$UTTable9, _theme$UTTable10, _theme$UTTable11, _theme$UTTable12, _theme$UTTable13, _theme$UTTable14, _theme$UTTable15, _theme$UTTable16, _theme$UTTable17, _theme$UTTable18, _theme$UTTable19, _theme$UTTable20, _theme$UTTable21, _theme$UTTable22, _theme$UTTable23, _theme$UTTable24, _theme$UTTable25, _theme$UTTable26, _theme$UTTable27, _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3;
   let {
     theme
   } = _ref;
@@ -352,12 +352,12 @@ const retrieveStyle = _ref => {
       color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colorsModule.default.loadingBase)
     },
     actionIcon: {
-      color: theme.Palette.actions.neutral['05'],
-      fill: theme.Palette.actions.neutral['05']
+      color: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['05']) || theme.Palette.neutral['05'],
+      fill: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.neutral['05']) || theme.Palette.neutral['05']
     },
     actionIconButton: {
       '&:hover': {
-        backgroundColor: theme.Palette.actions.neutral['01']
+        backgroundColor: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.neutral['01']) || theme.Palette.neutral['01']
       }
     }
   };

package/dist/components/WithTheme/layout.js

@@ -44,9 +44,11 @@ const ThemedComponent = _ref => {
   return muiThemeUpdated ? /*#__PURE__*/_react.default.createElement(_styles.MuiThemeProvider, {
     theme: muiThemeUpdated
   }, /*#__PURE__*/_react.default.createElement(Component, _extends({
-    classes: classes
+    classes: classes,
+    theme: theme
   }, props))) : /*#__PURE__*/_react.default.createElement(Component, _extends({
-    classes: classes
+    classes: classes,
+    theme: theme
   }, props));
 };
 ThemedComponent.propTypes = {

package/dist/constants/Palette.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLOR_THEMES = exports.COLOR_SHADES = void 0;
+const COLOR_SHADES = exports.COLOR_SHADES = {
+  shade01: '01',
+  shade02: '02',
+  shade03: '03',
+  shade04: '04',
+  shade05: '05'
+};
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  accent: 'accent',
+  dark: 'dark',
+  error: 'error',
+  gray: 'gray',
+  information: 'information',
+  light: 'light',
+  negative: 'negative',
+  neutral: 'neutral',
+  success: 'success',
+  warning: 'warning'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",