@widergy/energy-ui 3.45.0 → 3.47.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.47.0](https://github.com/widergy/energy-ui/compare/v3.46.0...v3.47.0) (2024-12-03)
+
+
+### Features
+
+* added react-credit-cards ([#538](https://github.com/widergy/energy-ui/issues/538)) ([5364625](https://github.com/widergy/energy-ui/commit/5364625a91519253ca26892bee9103c5fef7c232))
+
+# [3.46.0](https://github.com/widergy/energy-ui/compare/v3.45.0...v3.46.0) (2024-12-02)
+
+
+### Features
+
+* ut credit card ([#535](https://github.com/widergy/energy-ui/issues/535)) ([29ee660](https://github.com/widergy/energy-ui/commit/29ee660cdddece438b99fc820f4e693b029a77e3))
+
 # [3.45.0](https://github.com/widergy/energy-ui/compare/v3.44.3...v3.45.0) (2024-12-02)
 
 

package/dist/components/UTBaseInputField/theme.js

@@ -64,6 +64,7 @@ const getBackgroundColorOnHover = _ref3 => {
   return undefined;
 };
 const retrieveStyle = _ref4 => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4, _theme$Palette$action5;
   let {
     alwaysShowPlaceholder,
     disabled: receivedDisabled,
@@ -115,7 +116,7 @@ const retrieveStyle = _ref4 => {
         ...(!disabled && !readOnly && {
           backgroundColor: theme.Palette.light['01'],
           '& $inputContainer': {
-            borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(theme.Palette.accent['04'], " !important"),
+            borderColor: error ? "".concat(theme.Palette.error['04'], " !important") : "".concat(((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.accent['04']) || theme.Palette.accent['04'], " !important"),
             borderWidth: '2px'
           },
           '& $input': {
@@ -146,12 +147,12 @@ const retrieveStyle = _ref4 => {
     },
     withValueRoot: {
       ...(variant === 'transparent' && !error && {
-        backgroundColor: theme.Palette.accent['01']
+        backgroundColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['01']) || theme.Palette.accent['01']
       })
     },
     focusedInputContainer: {
       ...(!error && {
-        borderColor: "".concat(theme.Palette.accent['04'], " !important"),
+        borderColor: "".concat(((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['04']) || theme.Palette.accent['04'], " !important"),
         borderWidth: '2px'
       }),
       ...(error && {
@@ -164,7 +165,7 @@ const retrieveStyle = _ref4 => {
         variant: 'body',
         weight: 'regular'
       }),
-      caretColor: theme.Palette.accent['04'],
+      caretColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['04']) || theme.Palette.accent['04'],
       color: theme.Palette.dark['05'],
       minHeight: '22px',
       overflow: 'auto',
@@ -177,7 +178,7 @@ const retrieveStyle = _ref4 => {
         userSelect: 'none'
       },
       '&::selection': {
-        backgroundColor: theme.Palette.accent['02']
+        backgroundColor: ((_theme$Palette$action5 = theme.Palette.actions) === null || _theme$Palette$action5 === void 0 ? void 0 : _theme$Palette$action5.accent['02']) || theme.Palette.accent['02']
       },
       '&:focus': {
         '&::placeholder': {

package/dist/components/UTCheckbox/versions/V1/theme.js

@@ -28,6 +28,7 @@ const baseCheckBoxTheme = theme => ({
   }
 });
 const conditionalStyles = _ref => {
+  var _theme$Palette$action, _theme$Palette$action2, _theme$Palette$action3, _theme$Palette$action4;
   let {
     value,
     indeterminate,
@@ -57,8 +58,8 @@ const conditionalStyles = _ref => {
     },
     iconContainer: {
       ...((value === true || indeterminate) && {
-        backgroundColor: theme.Palette.accent['04'],
-        borderColor: theme.Palette.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'],
+        borderColor: ((_theme$Palette$action2 = theme.Palette.actions) === null || _theme$Palette$action2 === void 0 ? void 0 : _theme$Palette$action2.accent['04']) || theme.Palette.accent['04']
       })
     },
     boxContainer: {
@@ -71,8 +72,8 @@ const conditionalStyles = _ref => {
       ...(variant !== _constants.BUTTON_VARIANT && {
         '&:active': {
           '& $box': {
-            backgroundColor: theme.Palette.accent['02'],
-            borderColor: theme.Palette.accent['03'],
+            backgroundColor: ((_theme$Palette$action3 = theme.Palette.actions) === null || _theme$Palette$action3 === void 0 ? void 0 : _theme$Palette$action3.accent['02']) || theme.Palette.accent['02'],
+            borderColor: ((_theme$Palette$action4 = theme.Palette.actions) === null || _theme$Palette$action4 === void 0 ? void 0 : _theme$Palette$action4.accent['03']) || theme.Palette.accent['03'],
             borderWidth: 1,
             overflow: 'hidden'
           }

package/dist/components/UTCreditCard/README.MD

@@ -0,0 +1,16 @@
+# UTCreditCard
+
+## Description
+
+`UTCreditCard` is a flexible and customizable component designed for collecting and validating credit card information in a form. It allows users to input details such as card number, expiration date, and CVV in an easy-to-use interface. The component supports real-time validation of input fields, displaying error messages when invalid data is entered, and provides customizable labels.
+
+## Props
+
+| Name        | Type        | Default | Description                                                                 |
+| ----------- | ----------- | ------- | --------------------------------------------------------------------------- |
+| `value`     | object      |         | The current value of the component, usually an object representing the state. |
+| `onChange`  | func        |         | A required function that is called when the value changes.                  |
+| `childKeys` | array       |         | An array of keys to access child elements or properties in the `value` object. |
+| `error`     | string      |         | Error message to display when there is a validation issue.                  |
+| `texts`     | object      |         | An object containing various text strings used within the component          |
+| `className` | string      |         | Custom class name to apply to the root element of the component.            |

package/dist/components/UTCreditCard/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFormater = exports.fields = exports.DEFAULT_TEXTS = exports.DEFAULT_CHILD_KEYS = void 0;
+var _normalize = require("@widergy/web-utils/lib/normalize");
+const fields = exports.fields = {
+  NUMBER: 'number',
+  EXPIRY: 'expiry',
+  CVC: 'cvc',
+  NAME: 'name'
+};
+const getFormater = (cardField, nameFiled, cvcField, expires) => ({
+  [cardField]: _normalize.formatCreditCardNumber,
+  [cvcField]: _normalize.formatCVC,
+  [expires]: _normalize.formatExpirationDate,
+  [nameFiled]: _normalize.normalizeName
+});
+exports.getFormater = getFormater;
+const DEFAULT_CHILD_KEYS = exports.DEFAULT_CHILD_KEYS = ['cardNumber', 'holderName', 'securityCode', 'expMonth', 'expYear', 'expires'];
+const DEFAULT_TEXTS = exports.DEFAULT_TEXTS = {
+  cardExpDate: 'Vencimiento',
+  cardNamePlaceholder: 'Nombre completo',
+  cvcTitle: 'Cod. seguridad',
+  expiryTitle: 'Vencimiento',
+  nameTitle: 'Nombre y apellido',
+  numberTitle: 'N° de tarjeta'
+};

package/dist/components/UTCreditCard/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = require("prop-types");
+var _reactCreditCards = _interopRequireDefault(require("react-credit-cards"));
+var _react = _interopRequireWildcard(require("react"));
+var _UTPasswordField = _interopRequireDefault(require("../UTPasswordField"));
+var _UTTextInput = _interopRequireDefault(require("../UTTextInput"));
+require("react-credit-cards/es/styles-compiled.css");
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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 }; }
+const UTCreditCard = _ref => {
+  var _value$expYearField;
+  let {
+    childKeys = _constants.DEFAULT_CHILD_KEYS,
+    className,
+    error,
+    onChange,
+    texts: {
+      cardExpDate,
+      cardNamePlaceholder,
+      cvcTitle,
+      expiryTitle,
+      nameTitle,
+      numberTitle
+    } = _constants.DEFAULT_TEXTS,
+    value = {}
+  } = _ref;
+  const [cardField, nameFiled, cvcField, expMonthField, expYearField, expires] = childKeys;
+  const formater = (0, _constants.getFormater)(cardField, nameFiled, cvcField, expires);
+  const [cvcVisibility, setCvcVisibility] = (0, _react.useState)(false);
+  const [values, setValues] = (0, _react.useReducer)((state, _ref2) => {
+    let {
+      field,
+      newVal
+    } = _ref2;
+    const formatedValue = formater[field](newVal, state[cardField]);
+    const newState = {
+      ...state,
+      [field]: formatedValue
+    };
+    if (field === expires) {
+      newState[expMonthField] = formatedValue.substring(0, 2);
+      newState[expYearField] = "20".concat(formatedValue.substring(3, 5));
+    }
+    onChange(newState);
+    return newState;
+  }, {
+    [cardField]: '',
+    [nameFiled]: '',
+    [cvcField]: '',
+    [expMonthField]: '',
+    [expYearField]: '',
+    [expires]: value[expMonthField] ? "".concat(value[expMonthField], "/").concat((_value$expYearField = value[expYearField]) === null || _value$expYearField === void 0 ? void 0 : _value$expYearField.substring(2, 4)) : '',
+    ...value
+  });
+  const [focused, setFocused] = (0, _react.useState)('');
+  const errors = error ? JSON.parse(error) : {};
+  const onChangeField = field => newVal => setValues({
+    field,
+    newVal
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(className)
+  }, /*#__PURE__*/_react.default.createElement(_reactCreditCards.default, {
+    cvc: cvcVisibility ? values[cvcField] : values[cvcField].replace(/./g, '*'),
+    expiry: values.expiry,
+    focused: focused,
+    locale: {
+      valid: cardExpDate
+    },
+    name: values[nameFiled],
+    number: values[cardField] || '',
+    placeholders: {
+      name: cardNamePlaceholder
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fields
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    error: errors[cardField],
+    onChange: onChangeField(cardField),
+    onFocus: () => setFocused(_constants.fields.NUMBER),
+    required: true,
+    title: numberTitle,
+    value: values[cardField],
+    version: "V1"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.row
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    classNames: {
+      container: _stylesModule.default.inRow
+    },
+    error: errors[expires],
+    onChange: onChangeField(expires),
+    onFocus: () => setFocused(_constants.fields.EXPIRY),
+    required: true,
+    title: expiryTitle,
+    value: values[expires],
+    version: "V1"
+  }), /*#__PURE__*/_react.default.createElement(_UTPasswordField.default, {
+    classNames: {
+      container: _stylesModule.default.inRow
+    },
+    error: errors[cvcField],
+    onChange: onChangeField(cvcField),
+    onVisibilityToggle: setCvcVisibility,
+    title: cvcTitle,
+    required: true,
+    onFocus: () => setFocused(_constants.fields.CVC),
+    value: values[cvcField],
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    error: errors[nameFiled],
+    onChange: onChangeField(nameFiled),
+    required: true,
+    onFocus: () => setFocused(_constants.fields.NAME),
+    title: nameTitle,
+    value: values[nameFiled],
+    version: "V1"
+  })));
+};
+UTCreditCard.propTypes = {
+  value: _propTypes.object,
+  onChange: _propTypes.func,
+  childKeys: _propTypes.array,
+  error: _propTypes.object,
+  texts: _propTypes.object,
+  className: _propTypes.string
+};
+var _default = exports.default = UTCreditCard;

package/dist/components/UTCreditCard/styles.module.scss

@@ -0,0 +1,36 @@
+@use '../../scss/variables/mediaQueries.module.scss' as *;
+
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: row-reverse;
+  grid-gap: 32px;
+  justify-content: space-between;
+
+  @media #{$mobile} {
+    flex-direction: column;
+    grid-gap: 16px;
+  }
+
+  :global(.rccs) {
+    align-self: center;
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 16px;
+}
+
+.fields {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 16px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.inRow {
+  flex-grow: 1;
+}

package/dist/components/UTPasswordField/versions/V1/index.js

@@ -15,10 +15,14 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 const UTPasswordField = _ref => {
   let {
     type,
+    onVisibilityToggle,
     ...props
   } = _ref;
   const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
-  const toggleVisibility = () => setIsPasswordVisible(!isPasswordVisible);
+  const toggleVisibility = () => {
+    onVisibilityToggle === null || onVisibilityToggle === void 0 || onVisibilityToggle(!isPasswordVisible);
+    setIsPasswordVisible(!isPasswordVisible);
+  };
   const action = {
     Icon: isPasswordVisible ? _constants.ICON_EYE : _constants.ICON_EYE_OFF,
     onClick: toggleVisibility

package/dist/components/UTStatusMessage/theme.js

@@ -6,49 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 exports.retrieveStyle = void 0;
 var _constants = require("./constants");
 const getIconBackgroundColor = (colorTheme, theme) => {
-  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12;
+  var _theme$Palette, _theme$Palette2, _theme$Palette3, _theme$Palette4, _theme$Palette5, _theme$Palette6, _theme$Palette7, _theme$Palette8, _theme$Palette9, _theme$Palette10, _theme$Palette11, _theme$Palette12, _theme$Palette13;
   return {
-    [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01'],
-    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.light['03'],
-    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.error['01'],
+    [_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 || (_theme$Palette = _theme$Palette.actions) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.accent['01']) || ((_theme$Palette2 = theme.Palette) === null || _theme$Palette2 === void 0 ? void 0 : _theme$Palette2.accent['01']),
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette3 = theme.Palette) === null || _theme$Palette3 === void 0 ? void 0 : _theme$Palette3.light['03'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.error['01'],
     [_constants.COLOR_THEMES.GRADIENT]: 'light',
-    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette4 = theme.Palette) === null || _theme$Palette4 === void 0 ? void 0 : _theme$Palette4.light['03'],
-    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 || (_theme$Palette5 = _theme$Palette5.identitySolid) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5['01'],
-    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['02'],
-    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['03'],
-    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['04'],
-    [_constants.COLOR_THEMES.INFO]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9.information['01'],
-    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.light['01'],
-    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.success['01'],
-    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.warning['01']
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette5 = theme.Palette) === null || _theme$Palette5 === void 0 ? void 0 : _theme$Palette5.light['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette6 = theme.Palette) === null || _theme$Palette6 === void 0 || (_theme$Palette6 = _theme$Palette6.identitySolid) === null || _theme$Palette6 === void 0 ? void 0 : _theme$Palette6['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette7 = theme.Palette) === null || _theme$Palette7 === void 0 || (_theme$Palette7 = _theme$Palette7.identitySolid) === null || _theme$Palette7 === void 0 ? void 0 : _theme$Palette7['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette8 = theme.Palette) === null || _theme$Palette8 === void 0 || (_theme$Palette8 = _theme$Palette8.identitySolid) === null || _theme$Palette8 === void 0 ? void 0 : _theme$Palette8['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette9 = theme.Palette) === null || _theme$Palette9 === void 0 || (_theme$Palette9 = _theme$Palette9.identitySolid) === null || _theme$Palette9 === void 0 ? void 0 : _theme$Palette9['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette10 = theme.Palette) === null || _theme$Palette10 === void 0 ? void 0 : _theme$Palette10.information['01'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette11 = theme.Palette) === null || _theme$Palette11 === void 0 ? void 0 : _theme$Palette11.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette12 = theme.Palette) === null || _theme$Palette12 === void 0 ? void 0 : _theme$Palette12.success['01'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.warning['01']
   }[colorTheme];
 };
 const getBannerBackgroundColor = (colorTheme, theme) => {
-  var _theme$Palette13, _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24;
+  var _theme$Palette14, _theme$Palette15, _theme$Palette16, _theme$Palette17, _theme$Palette18, _theme$Palette19, _theme$Palette20, _theme$Palette21, _theme$Palette22, _theme$Palette23, _theme$Palette24, _theme$Palette25, _theme$Palette26;
   return {
-    [_constants.COLOR_THEMES.ACCENT]: (_theme$Palette13 = theme.Palette) === null || _theme$Palette13 === void 0 ? void 0 : _theme$Palette13.accent['03'],
-    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.gray['05'],
-    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.error['03'],
+    [_constants.COLOR_THEMES.ACCENT]: ((_theme$Palette14 = theme.Palette) === null || _theme$Palette14 === void 0 || (_theme$Palette14 = _theme$Palette14.actions) === null || _theme$Palette14 === void 0 ? void 0 : _theme$Palette14.accent['03']) || ((_theme$Palette15 = theme.Palette) === null || _theme$Palette15 === void 0 ? void 0 : _theme$Palette15.accent['03']),
+    [_constants.COLOR_THEMES.DEFAULT]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['05'],
+    [_constants.COLOR_THEMES.ERROR]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17.error['03'],
     [_constants.COLOR_THEMES.GRADIENT]: null,
-    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette16 = theme.Palette) === null || _theme$Palette16 === void 0 ? void 0 : _theme$Palette16.gray['03'],
-    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette17 = theme.Palette) === null || _theme$Palette17 === void 0 || (_theme$Palette17 = _theme$Palette17.identitySolid) === null || _theme$Palette17 === void 0 ? void 0 : _theme$Palette17['01'],
-    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 || (_theme$Palette18 = _theme$Palette18.identitySolid) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18['02'],
-    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['03'],
-    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['04'],
-    [_constants.COLOR_THEMES.INFO]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21.information['03'],
-    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22.light['01'],
-    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.success['03'],
-    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.warning['03']
+    [_constants.COLOR_THEMES.GRAY]: (_theme$Palette18 = theme.Palette) === null || _theme$Palette18 === void 0 ? void 0 : _theme$Palette18.gray['03'],
+    [_constants.COLOR_THEMES.IDENTITY_1]: (_theme$Palette19 = theme.Palette) === null || _theme$Palette19 === void 0 || (_theme$Palette19 = _theme$Palette19.identitySolid) === null || _theme$Palette19 === void 0 ? void 0 : _theme$Palette19['01'],
+    [_constants.COLOR_THEMES.IDENTITY_2]: (_theme$Palette20 = theme.Palette) === null || _theme$Palette20 === void 0 || (_theme$Palette20 = _theme$Palette20.identitySolid) === null || _theme$Palette20 === void 0 ? void 0 : _theme$Palette20['02'],
+    [_constants.COLOR_THEMES.IDENTITY_3]: (_theme$Palette21 = theme.Palette) === null || _theme$Palette21 === void 0 || (_theme$Palette21 = _theme$Palette21.identitySolid) === null || _theme$Palette21 === void 0 ? void 0 : _theme$Palette21['03'],
+    [_constants.COLOR_THEMES.IDENTITY_4]: (_theme$Palette22 = theme.Palette) === null || _theme$Palette22 === void 0 || (_theme$Palette22 = _theme$Palette22.identitySolid) === null || _theme$Palette22 === void 0 ? void 0 : _theme$Palette22['04'],
+    [_constants.COLOR_THEMES.INFO]: (_theme$Palette23 = theme.Palette) === null || _theme$Palette23 === void 0 ? void 0 : _theme$Palette23.information['03'],
+    [_constants.COLOR_THEMES.NEGATIVE]: (_theme$Palette24 = theme.Palette) === null || _theme$Palette24 === void 0 ? void 0 : _theme$Palette24.light['01'],
+    [_constants.COLOR_THEMES.SUCCESS]: (_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25.success['03'],
+    [_constants.COLOR_THEMES.WARNING]: (_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26.warning['03']
   }[colorTheme];
 };
 const retrieveStyle = _ref => {
-  var _theme$Palette25, _theme$Palette26;
+  var _theme$Palette27, _theme$Palette28;
   let {
     showBanner = true,
     theme,
     colorTheme = _constants.COLOR_THEMES.DEFAULT
   } = _ref;
-  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette25 = theme.Palette) === null || _theme$Palette25 === void 0 || (_theme$Palette25 = _theme$Palette25.identityGradient) === null || _theme$Palette25 === void 0 ? void 0 : _theme$Palette25['01'], " 0%, ").concat((_theme$Palette26 = theme.Palette) === null || _theme$Palette26 === void 0 || (_theme$Palette26 = _theme$Palette26.identityGradient) === null || _theme$Palette26 === void 0 ? void 0 : _theme$Palette26['02'], " 100%);");
+  const gradient = "linear-gradient(45deg, ".concat((_theme$Palette27 = theme.Palette) === null || _theme$Palette27 === void 0 || (_theme$Palette27 = _theme$Palette27.identityGradient) === null || _theme$Palette27 === void 0 ? void 0 : _theme$Palette27['01'], " 0%, ").concat((_theme$Palette28 = theme.Palette) === null || _theme$Palette28 === void 0 || (_theme$Palette28 = _theme$Palette28.identityGradient) === null || _theme$Palette28 === void 0 ? void 0 : _theme$Palette28['02'], " 100%);");
   return {
     iconContainer: {
       alignItems: 'center',

package/dist/index.js

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "UTConsumptionBar", {
     return _UTConsumptionBar.default;
   }
 });
+Object.defineProperty(exports, "UTCreditCard", {
+  enumerable: true,
+  get: function () {
+    return _UTCreditCard.default;
+  }
+});
 Object.defineProperty(exports, "UTCuit", {
   enumerable: true,
   get: function () {
@@ -456,6 +462,7 @@ var _UTCBUInput = _interopRequireDefault(require("./components/UTCBUInput"));
 var _UTCheckbox = _interopRequireDefault(require("./components/UTCheckbox"));
 var _UTCheckList = _interopRequireDefault(require("./components/UTCheckList"));
 var _UTConsumptionBar = _interopRequireDefault(require("./components/UTConsumptionBar"));
+var _UTCreditCard = _interopRequireDefault(require("./components/UTCreditCard"));
 var _UTCuit = _interopRequireDefault(require("./components/UTCuit"));
 var _UTDatePicker = _interopRequireDefault(require("./components/UTDatePicker"));
 var _UTDialog = _interopRequireDefault(require("./components/UTDialog"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.45.0",
+  "version": "3.47.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "intro.js-react": "0.7.1",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",
+    "react-credit-cards": "^0.7.0",
     "react-google-maps": ">=9.2.2",
     "react-google-recaptcha": "^3.1.0",
     "react-jss": "^8.6.1",