@widergy/energy-ui 3.172.1 → 3.172.3

package/dist/components/UTChip/index.js

@@ -1,74 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
-var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _utils = require("./utils");
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-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); }
-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 UTChip = _ref => {
-  let {
-    active,
-    adornment,
-    children,
-    dataTestId,
-    disabled,
-    isDragging,
-    onClick,
-    onClose,
-    size = _constants.CHIP_SIZES.MEDIUM,
-    variant = _constants.CHIP_VARIANT.DEFAULT
-  } = _ref;
-  const {
-    Adornment,
-    adornmentProps,
-    buttonProps,
-    Container,
-    containerProps,
-    labelProps
-  } = (0, _utils.getItemsProps)({
-    active,
-    adornment,
-    dataTestId,
-    disabled,
-    isDragging,
-    onClick,
-    size,
-    variant
-  });
-  const handleClose = onClose ? e => {
-    e.stopPropagation();
-    onClose(e);
-  } : undefined;
-  return /*#__PURE__*/_react.default.createElement(Container, _extends({
-    className: "\n        ".concat(_stylesModule.default.chipContainer, "\n        ").concat(_stylesModule.default[size], "\n        ").concat(_stylesModule.default[variant], "\n        ").concat(active ? _stylesModule.default.active : '', "\n        ").concat(disabled ? _stylesModule.default.disabled : '', "\n        ").concat(isDragging ? _stylesModule.default.dragging : '', "\n        ").concat(onClick && !disabled ? _stylesModule.default.interactive : _stylesModule.default.nonInteractive, "\n      ")
-  }, containerProps), Adornment && /*#__PURE__*/_react.default.createElement(Adornment, adornmentProps), /*#__PURE__*/_react.default.createElement(_UTLabel.default, labelProps, children), handleClose && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({}, buttonProps, {
-    Icon: "IconX",
-    onClick: handleClose,
-    size: "small",
-    variant: "text"
-  })));
-};
-UTChip.propTypes = {
-  active: _propTypes.bool,
-  adornment: (0, _propTypes.shape)({
-    props: _propTypes.object,
-    type: (0, _propTypes.oneOf)([_constants.ADORNMENT_TYPES.ICON, _constants.ADORNMENT_TYPES.AVATAR, _constants.ADORNMENT_TYPES.IMAGE])
-  }),
-  dataTestId: _propTypes.string,
-  disabled: _propTypes.bool,
-  isDragging: _propTypes.bool,
-  onClick: _propTypes.func,
-  onClose: _propTypes.func,
-  size: (0, _propTypes.oneOf)([_constants.CHIP_SIZES.MEDIUM, _constants.CHIP_SIZES.SMALL]),
-  variant: (0, _propTypes.oneOf)([_constants.CHIP_VARIANT.DEFAULT, _constants.CHIP_VARIANT.OUTLINE])
-};
-var _default = exports.default = /*#__PURE__*/(0, _react.memo)(UTChip);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_UTButton=_interopRequireDefault(require("../UTButton")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_utils=require("./utils"),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));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)}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 UTChip=_ref=>{let{active:active,adornment:adornment,children:children,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,onClose:onClose,size:size=_constants.CHIP_SIZES.MEDIUM,variant:variant=_constants.CHIP_VARIANT.DEFAULT}=_ref;const{Adornment:Adornment,adornmentProps:adornmentProps,buttonProps:buttonProps,Container:Container,containerProps:containerProps,labelProps:labelProps}=(0,_utils.getItemsProps)({active:active,adornment:adornment,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,size:size,variant:variant}),handleClose=onClose?e=>{e.stopPropagation(),onClose(e)}:void 0;return _react.default.createElement(Container,_extends({className:"\n        ".concat(_stylesModule.default.chipContainer,"\n        ").concat(_stylesModule.default[size],"\n        ").concat(_stylesModule.default[variant],"\n        ").concat(active?_stylesModule.default.active:"","\n        ").concat(disabled?_stylesModule.default.disabled:"","\n        ").concat(isDragging?_stylesModule.default.dragging:"","\n        ").concat(onClick&&!disabled?_stylesModule.default.interactive:_stylesModule.default.nonInteractive,"\n      ")},containerProps),Adornment&&_react.default.createElement(Adornment,adornmentProps),_react.default.createElement(_UTLabel.default,labelProps,children),handleClose&&_react.default.createElement(_UTButton.default,_extends({},buttonProps,{Icon:"IconX",onClick:handleClose,size:"small",variant:"text"})))};UTChip.propTypes={active:_propTypes.bool,adornment:(0,_propTypes.shape)({props:_propTypes.object,type:(0,_propTypes.oneOf)([_constants.ADORNMENT_TYPES.ICON,_constants.ADORNMENT_TYPES.AVATAR,_constants.ADORNMENT_TYPES.IMAGE])}),dataTestId:_propTypes.string,disabled:_propTypes.bool,isDragging:_propTypes.bool,onClick:_propTypes.func,onClose:_propTypes.func,size:(0,_propTypes.oneOf)([_constants.CHIP_SIZES.MEDIUM,_constants.CHIP_SIZES.SMALL]),variant:(0,_propTypes.oneOf)([_constants.CHIP_VARIANT.DEFAULT,_constants.CHIP_VARIANT.OUTLINE])};var _default=exports.default=(0,_react.memo)(UTChip);

package/dist/components/UTChip/utils.js

@@ -1,114 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTextVariant = exports.getTextColorTheme = exports.getItemsProps = exports.getDefaultAdornmentProps = exports.getButtonColorTheme = void 0;
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-var _Palette = require("../../constants/Palette");
-var _constants = require("../UTLabel/constants");
-var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../UTTouchableWithoutFeedback"));
-var _constants2 = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getTextColorTheme = _ref => {
-  let {
-    active,
-    disabled,
-    isDragging,
-    variant
-  } = _ref;
-  if (active && !disabled && !isDragging) return variant === _constants2.CHIP_VARIANT.DEFAULT ? _Palette.COLOR_THEMES.light : _Palette.COLOR_THEMES.accent;
-  return _Palette.COLOR_THEMES.gray;
-};
-exports.getTextColorTheme = getTextColorTheme;
-const getButtonColorTheme = _ref2 => {
-  let {
-    active,
-    disabled,
-    isDragging,
-    variant
-  } = _ref2;
-  if (active && !disabled && !isDragging) return variant === _constants2.CHIP_VARIANT.DEFAULT ? _Palette.COLOR_THEMES.negative : _Palette.COLOR_THEMES.primary;
-  return _Palette.COLOR_THEMES.gray;
-};
-exports.getButtonColorTheme = getButtonColorTheme;
-const getTextVariant = size => size === _constants2.CHIP_SIZES.SMALL ? _constants.VARIANTS_NAMES.SMALL : _constants.VARIANTS_NAMES.BODY;
-exports.getTextVariant = getTextVariant;
-const getDefaultAdornmentProps = _ref3 => {
-  var _adornment$props;
-  let {
-    active,
-    adornment,
-    disabled,
-    isDragging,
-    variant
-  } = _ref3;
-  if ((0, _isEmpty.default)(adornment) || !adornment.type) return {};
-  if (adornment.type === _constants2.ADORNMENT_TYPES.ICON) return {
-    ...adornment.props,
-    colorTheme: getTextColorTheme({
-      active,
-      disabled,
-      isDragging,
-      variant
-    }),
-    size: 20
-  };
-  if (adornment.type === _constants2.ADORNMENT_TYPES.AVATAR) return {
-    ...adornment.props,
-    size: 'small'
-  };
-  if (adornment.type === _constants2.ADORNMENT_TYPES.IMAGE) return {
-    ...adornment.props,
-    className: "".concat(_stylesModule.default.imageAdornment, " ").concat(((_adornment$props = adornment.props) === null || _adornment$props === void 0 ? void 0 : _adornment$props.className) || '')
-  };
-  return {};
-};
-exports.getDefaultAdornmentProps = getDefaultAdornmentProps;
-const getItemsProps = _ref4 => {
-  let {
-    active,
-    adornment,
-    dataTestId,
-    disabled,
-    isDragging,
-    onClick,
-    size,
-    variant
-  } = _ref4;
-  return {
-    Adornment: adornment !== null && adornment !== void 0 && adornment.type ? _constants2.ADORNMENT_COMPONENT_MAPPER[adornment === null || adornment === void 0 ? void 0 : adornment.type] : null,
-    adornmentProps: getDefaultAdornmentProps({
-      active,
-      adornment,
-      disabled,
-      variant
-    }),
-    Container: onClick && !disabled ? _UTTouchableWithoutFeedback.default : 'div',
-    containerProps: onClick && !disabled ? {
-      onClick,
-      dataTestId
-    } : {
-      'data-testid': dataTestId
-    },
-    labelProps: {
-      colorTheme: getTextColorTheme({
-        active,
-        disabled,
-        isDragging,
-        variant
-      }),
-      variant: getTextVariant(size)
-    },
-    buttonProps: {
-      colorTheme: getButtonColorTheme({
-        active,
-        disabled,
-        isDragging,
-        variant
-      })
-    }
-  };
-};
-exports.getItemsProps = getItemsProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getTextVariant=exports.getTextColorTheme=exports.getItemsProps=exports.getDefaultAdornmentProps=exports.getButtonColorTheme=void 0;var _isEmpty=_interopRequireDefault(require("lodash/isEmpty")),_Palette=require("../../constants/Palette"),_constants=require("../UTLabel/constants"),_UTTouchableWithoutFeedback=_interopRequireDefault(require("../UTTouchableWithoutFeedback")),_constants2=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const getTextColorTheme=_ref=>{let{active:active,disabled:disabled,isDragging:isDragging,variant:variant}=_ref;return!active||disabled||isDragging?_Palette.COLOR_THEMES.gray:variant===_constants2.CHIP_VARIANT.DEFAULT?_Palette.COLOR_THEMES.light:_Palette.COLOR_THEMES.accent};exports.getTextColorTheme=getTextColorTheme;const getButtonColorTheme=_ref2=>{let{active:active,disabled:disabled,isDragging:isDragging,variant:variant}=_ref2;return!active||disabled||isDragging?_Palette.COLOR_THEMES.gray:variant===_constants2.CHIP_VARIANT.DEFAULT?_Palette.COLOR_THEMES.negative:_Palette.COLOR_THEMES.primary};exports.getButtonColorTheme=getButtonColorTheme;const getTextVariant=size=>size===_constants2.CHIP_SIZES.SMALL?_constants.VARIANTS_NAMES.SMALL:_constants.VARIANTS_NAMES.BODY;exports.getTextVariant=getTextVariant;const getDefaultAdornmentProps=_ref3=>{var _adornment$props;let{active:active,adornment:adornment,disabled:disabled,isDragging:isDragging,variant:variant}=_ref3;return(0,_isEmpty.default)(adornment)||!adornment.type?{}:adornment.type===_constants2.ADORNMENT_TYPES.ICON?{...adornment.props,colorTheme:getTextColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant}),size:20}:adornment.type===_constants2.ADORNMENT_TYPES.AVATAR?{...adornment.props,size:"small"}:adornment.type===_constants2.ADORNMENT_TYPES.IMAGE?{...adornment.props,className:"".concat(_stylesModule.default.imageAdornment," ").concat((null===(_adornment$props=adornment.props)||void 0===_adornment$props?void 0:_adornment$props.className)||"")}:{}};exports.getDefaultAdornmentProps=getDefaultAdornmentProps;const getItemsProps=_ref4=>{let{active:active,adornment:adornment,dataTestId:dataTestId,disabled:disabled,isDragging:isDragging,onClick:onClick,size:size,variant:variant}=_ref4;return{Adornment:null!=adornment&&adornment.type?_constants2.ADORNMENT_COMPONENT_MAPPER[null==adornment?void 0:adornment.type]:null,adornmentProps:getDefaultAdornmentProps({active:active,adornment:adornment,disabled:disabled,variant:variant}),Container:onClick&&!disabled?_UTTouchableWithoutFeedback.default:"div",containerProps:onClick&&!disabled?{onClick:onClick,dataTestId:dataTestId}:{"data-testid":dataTestId},labelProps:{colorTheme:getTextColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant}),variant:getTextVariant(size)},buttonProps:{colorTheme:getButtonColorTheme({active:active,disabled:disabled,isDragging:isDragging,variant:variant})}}};exports.getItemsProps=getItemsProps;

package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicator/index.js

@@ -1,50 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _numeral = _interopRequireDefault(require("numeral"));
-var _propTypes = require("prop-types");
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ConsumptionBarIndicator = _ref => {
-  let {
-    left,
-    value,
-    unit = 'kWh',
-    total,
-    classes,
-    hideAmount
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.indicator,
-    style: {
-      left: "".concat(left, "%")
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.indicatorMarker, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorMarker)
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.alignCenter,
-    colorTheme: "neutral",
-    shade: "03",
-    weight: "bold"
-  }, "".concat(Math.round(value), " ").concat(unit)), !hideAmount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.lightGray,
-    colorTheme: "gray",
-    weight: "bold"
-  }, (0, _numeral.default)(total || 0).format('$ 0,0'))));
-};
-ConsumptionBarIndicator.propTypes = {
-  classes: _propTypes.object,
-  hideAmount: _propTypes.bool,
-  left: _propTypes.number,
-  total: _propTypes.number,
-  unit: _propTypes.string,
-  value: _propTypes.number
-};
-var _default = exports.default = ConsumptionBarIndicator;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_numeral=_interopRequireDefault(require("numeral")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ConsumptionBarIndicator=_ref=>{let{left:left,value:value,unit:unit="kWh",total:total,classes:classes,hideAmount:hideAmount}=_ref;return _react.default.createElement("div",{className:_stylesModule.default.indicator,style:{left:"".concat(left,"%")}},_react.default.createElement("div",{className:"".concat(_stylesModule.default.indicatorMarker," ").concat(null==classes?void 0:classes.indicatorMarker)}),_react.default.createElement("div",{className:"".concat(_stylesModule.default.indicatorText," ").concat(null==classes?void 0:classes.indicatorText)},_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.alignCenter,colorTheme:"neutral",shade:"03",weight:"bold"},"".concat(Math.round(value)," ").concat(unit)),!hideAmount&&_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.lightGray,colorTheme:"gray",weight:"bold"},(0,_numeral.default)(total||0).format("$ 0,0"))))};ConsumptionBarIndicator.propTypes={classes:_propTypes.object,hideAmount:_propTypes.bool,left:_propTypes.number,total:_propTypes.number,unit:_propTypes.string,value:_propTypes.number};var _default=exports.default=ConsumptionBarIndicator;

package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicatorTop/index.js

@@ -1,45 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
-var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const ConsumptionBarIndicatorTop = _ref => {
-  let {
-    left,
-    title,
-    subtitle,
-    classes
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.indicator,
-    style: {
-      left: "".concat(left, "%")
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.indicatorText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.indicatorText)
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.alignCenter,
-    colorTheme: "neutral",
-    shade: "03",
-    weight: "bold"
-  }, title), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.subtitleLabel,
-    colorTheme: "gray",
-    weight: "bold"
-  }, subtitle)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.indicatorMarker
-  }));
-};
-ConsumptionBarIndicatorTop.propTypes = {
-  classes: _propTypes.object,
-  left: _propTypes.number,
-  title: _propTypes.string,
-  subtitle: _propTypes.string
-};
-var _default = exports.default = ConsumptionBarIndicatorTop;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireDefault(require("react")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ConsumptionBarIndicatorTop=_ref=>{let{left:left,title:title,subtitle:subtitle,classes:classes}=_ref;return _react.default.createElement("div",{className:_stylesModule.default.indicator,style:{left:"".concat(left,"%")}},_react.default.createElement("div",{className:"".concat(_stylesModule.default.indicatorText," ").concat(null==classes?void 0:classes.indicatorText)},_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.alignCenter,colorTheme:"neutral",shade:"03",weight:"bold"},title),_react.default.createElement(_UTLabel.default,{className:_stylesModule.default.subtitleLabel,colorTheme:"gray",weight:"bold"},subtitle)),_react.default.createElement("div",{className:_stylesModule.default.indicatorMarker}))};ConsumptionBarIndicatorTop.propTypes={classes:_propTypes.object,left:_propTypes.number,title:_propTypes.string,subtitle:_propTypes.string};var _default=exports.default=ConsumptionBarIndicatorTop;

package/dist/components/UTConsumptionBar/constants.js

@@ -1,9 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UP = exports.MIN_LINE_WIDTH = exports.DOWN = void 0;
-const UP = exports.UP = 'up';
-const DOWN = exports.DOWN = 'down';
-const MIN_LINE_WIDTH = exports.MIN_LINE_WIDTH = '550';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.UP=exports.MIN_LINE_WIDTH=exports.DOWN=void 0;const UP=exports.UP="up",DOWN=exports.DOWN="down",MIN_LINE_WIDTH=exports.MIN_LINE_WIDTH="550";

package/dist/components/UTConsumptionBar/index.js

@@ -1,117 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = _interopRequireDefault(require("@tippy.js/react"));
-var _propTypes = require("prop-types");
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _ConsumptionBarIndicator = _interopRequireDefault(require("./components/ConsumptionBarIndicator"));
-var _ConsumptionBarIndicatorTop = _interopRequireDefault(require("./components/ConsumptionBarIndicatorTop"));
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-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 UTConsumptionBar = _ref => {
-  let {
-    categoryLines,
-    classes,
-    hideAmount = false,
-    values
-  } = _ref;
-  const widthRef = (0, _react.useRef)();
-  const [showLabel, setShowLabel] = (0, _react.useState)(true);
-  const handleSetShowLabel = () => {
-    if (widthRef.current.offsetWidth < _constants.MIN_LINE_WIDTH) setShowLabel(false);else setShowLabel(true);
-  };
-  (0, _react.useEffect)(() => {
-    window.addEventListener('resize', handleSetShowLabel);
-    handleSetShowLabel();
-    return () => window.removeEventListener('resize', handleSetShowLabel);
-  }, []);
-  const downIndicators = values.filter(value => value.position === _constants.DOWN);
-  const upIndicators = values.filter(value => value.position === _constants.UP);
-  const maxValue = Math.max(...categoryLines.rates.map(category => category.range[0]));
-  const getLeftPosition = watts => 25 * 100 / maxValue * (watts / 25);
-  const getIndicatorPosition = value => value <= maxValue && value >= 0 ? getLeftPosition(value) : value < 0 ? 0 : 101.7;
-  const renderCategoryLines = function () {
-    let categoryLine = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let index = arguments.length > 1 ? arguments[1] : undefined;
-    let elements = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    const {
-      range,
-      category,
-      name
-    } = categoryLine;
-    const kwh = range[0];
-    const barPosition = getLeftPosition(kwh);
-    let nextBarPosition;
-    if (elements.length === index + 1) {
-      nextBarPosition = barPosition + 4;
-    } else {
-      nextBarPosition = getLeftPosition(elements[index + 1].kwh);
-    }
-    const width = (nextBarPosition - barPosition) / 2;
-    const tippyContent = Number.isInteger(range[1]) ? "".concat(range[0], " - ").concat(range[1], " kWh") : "".concat(range[0], "+ kWh");
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: category,
-      className: _stylesModule.default.categoryLineContainer,
-      style: {
-        left: "calc(".concat(getLeftPosition(kwh), "%)"),
-        width: "calc(".concat(width, "% + 7px)")
-      }
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.lineContainer
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.line
-    })), /*#__PURE__*/_react.default.createElement(_react2.default, {
-      content: "Categor\xEDa ".concat(name, ": ").concat(tippyContent),
-      arrow: true
-    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: "".concat(_stylesModule.default.categoryLineText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.categoryLineText),
-      colorTheme: "information",
-      variant: "xsmall",
-      weight: "bold"
-    }, showLabel ? name : ''))));
-  };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.estimatedContainer
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.container, " ").concat(classes === null || classes === void 0 ? void 0 : classes.container)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.bar, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedBar),
-    ref: widthRef
-  }), upIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicatorTop.default, {
-    classes: classes,
-    key: indicator.title,
-    left: getIndicatorPosition(indicator.value),
-    title: indicator.title,
-    subtitle: indicator.subtitle
-  })), categoryLines.rates.map(renderCategoryLines), downIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicator.default, {
-    classes: classes,
-    className: _stylesModule.default.indicator,
-    hideAmount: hideAmount,
-    key: indicator.title,
-    left: getIndicatorPosition(indicator.value),
-    total: indicator.total,
-    unit: indicator.title,
-    value: indicator.value
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_stylesModule.default.finishLine1, " ").concat(downIndicators.length > 0 && _stylesModule.default.colorizedLine)
-  }));
-};
-UTConsumptionBar.propTypes = {
-  categoryLines: _propTypes.object,
-  classes: _propTypes.object,
-  hideAmount: _propTypes.bool,
-  values: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    position: _propTypes.string,
-    subtitle: _propTypes.string,
-    title: _propTypes.string,
-    total: _propTypes.number,
-    value: _propTypes.number
-  }))
-};
-var _default = exports.default = UTConsumptionBar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_react2=_interopRequireDefault(require("@tippy.js/react")),_propTypes=require("prop-types"),_UTLabel=_interopRequireDefault(require("../UTLabel")),_ConsumptionBarIndicator=_interopRequireDefault(require("./components/ConsumptionBarIndicator")),_ConsumptionBarIndicatorTop=_interopRequireDefault(require("./components/ConsumptionBarIndicatorTop")),_constants=require("./constants"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));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 UTConsumptionBar=_ref=>{let{categoryLines:categoryLines,classes:classes,hideAmount:hideAmount=!1,values:values}=_ref;const widthRef=(0,_react.useRef)(),[showLabel,setShowLabel]=(0,_react.useState)(!0),handleSetShowLabel=()=>{widthRef.current.offsetWidth<_constants.MIN_LINE_WIDTH?setShowLabel(!1):setShowLabel(!0)};(0,_react.useEffect)(()=>(window.addEventListener("resize",handleSetShowLabel),handleSetShowLabel(),()=>window.removeEventListener("resize",handleSetShowLabel)),[]);const downIndicators=values.filter(value=>value.position===_constants.DOWN),upIndicators=values.filter(value=>value.position===_constants.UP),maxValue=Math.max(...categoryLines.rates.map(category=>category.range[0])),getLeftPosition=watts=>2500/maxValue*(watts/25),getIndicatorPosition=value=>value<=maxValue&&value>=0?getLeftPosition(value):value<0?0:101.7;return _react.default.createElement("div",{className:_stylesModule.default.estimatedContainer},_react.default.createElement("div",{className:"".concat(_stylesModule.default.container," ").concat(null==classes?void 0:classes.container)},_react.default.createElement("div",{className:"".concat(_stylesModule.default.bar," ").concat(downIndicators.length>0&&_stylesModule.default.colorizedBar),ref:widthRef}),upIndicators.map(indicator=>_react.default.createElement(_ConsumptionBarIndicatorTop.default,{classes:classes,key:indicator.title,left:getIndicatorPosition(indicator.value),title:indicator.title,subtitle:indicator.subtitle})),categoryLines.rates.map(function(){let categoryLine=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},index=arguments.length>1?arguments[1]:void 0,elements=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];const{range:range,category:category,name:name}=categoryLine,kwh=range[0],barPosition=getLeftPosition(kwh);let nextBarPosition;nextBarPosition=elements.length===index+1?barPosition+4:getLeftPosition(elements[index+1].kwh);const width=(nextBarPosition-barPosition)/2,tippyContent=Number.isInteger(range[1])?"".concat(range[0]," - ").concat(range[1]," kWh"):"".concat(range[0],"+ kWh");return _react.default.createElement("div",{key:category,className:_stylesModule.default.categoryLineContainer,style:{left:"calc(".concat(getLeftPosition(kwh),"%)"),width:"calc(".concat(width,"% + 7px)")}},_react.default.createElement("div",{className:_stylesModule.default.lineContainer},_react.default.createElement("div",{className:_stylesModule.default.line})),_react.default.createElement(_react2.default,{content:"Categoría ".concat(name,": ").concat(tippyContent),arrow:!0},_react.default.createElement("span",null,_react.default.createElement(_UTLabel.default,{className:"".concat(_stylesModule.default.categoryLineText," ").concat(null==classes?void 0:classes.categoryLineText),colorTheme:"information",variant:"xsmall",weight:"bold"},showLabel?name:""))))}),downIndicators.map(indicator=>_react.default.createElement(_ConsumptionBarIndicator.default,{classes:classes,className:_stylesModule.default.indicator,hideAmount:hideAmount,key:indicator.title,left:getIndicatorPosition(indicator.value),total:indicator.total,unit:indicator.title,value:indicator.value}))),_react.default.createElement("div",{className:"".concat(_stylesModule.default.finishLine1," ").concat(downIndicators.length>0&&_stylesModule.default.colorizedLine)}))};UTConsumptionBar.propTypes={categoryLines:_propTypes.object,classes:_propTypes.object,hideAmount:_propTypes.bool,values:(0,_propTypes.arrayOf)((0,_propTypes.shape)({position:_propTypes.string,subtitle:_propTypes.string,title:_propTypes.string,total:_propTypes.number,value:_propTypes.number}))};var _default=exports.default=UTConsumptionBar;

package/dist/components/UTCreditCard/constants.js

@@ -1,29 +1 @@
-"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'
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),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"},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"],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

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