@homefile/components-v2 1.0.2 → 1.0.4

package/dist/components/myProfile/payment/CreditCardButton.js

@@ -1,18 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCardButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var utils_1 = require("../../../utils");
-var images_1 = require("../../../assets/images");
-var CreditCardButton = function (_a) {
-    var hasError = _a.hasError, brand = _a.brand, cardNumber = _a.cardNumber;
-    var alt = (0, utils_1.getIconAltText)(images_1.CreditCard);
-    var altWarning = (0, utils_1.getIconAltText)(images_1.Warning);
-    var maskedCardNumber = cardNumber
-        ? (0, utils_1.creditCardNumberMask)(cardNumber, 'short')
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Center, Image, Text } from '@chakra-ui/react';
+import { getIconAltText, creditCardNumberMask } from '../../../utils';
+import { CreditCard as icon, Warning } from '../../../assets/images';
+export const CreditCardButton = ({ hasError, brand, cardNumber, }) => {
+    const alt = getIconAltText(icon);
+    const altWarning = getIconAltText(Warning);
+    const maskedCardNumber = cardNumber
+        ? creditCardNumberMask(cardNumber, 'short')
         : '****';
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", h: "6rem", w: "100%", children: [hasError && ((0, jsx_runtime_1.jsx)(react_1.Center, { bg: "error.2", h: "full", w: "38px", children: (0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Warning, alt: altWarning, boxSize: "21px", objectFit: "scale-down" }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", w: "100%", px: "base", align: "center", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.CreditCard, alt: alt, w: "45px", h: "auto" }), (0, jsx_runtime_1.jsx)(react_1.Text, { children: brand || (0, i18next_1.t)('myProfile.payment.newCard') })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { children: maskedCardNumber })] })] }));
+    return (_jsxs(Flex, { align: "center", h: "6rem", w: "100%", children: [hasError && (_jsx(Center, { bg: "error.2", h: "full", w: "38px", children: _jsx(Image, { src: Warning, alt: altWarning, boxSize: "21px", objectFit: "scale-down" }) })), _jsxs(Flex, { justify: "space-between", w: "100%", px: "base", align: "center", children: [_jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: icon, alt: alt, w: "45px", h: "auto" }), _jsx(Text, { children: brand || t('myProfile.payment.newCard') })] }), _jsx(Text, { children: maskedCardNumber })] })] }));
 };
-exports.CreditCardButton = CreditCardButton;

package/dist/components/myProfile/payment/CreditCardContainer.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,15 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCardContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../..");
-var CreditCardContainer = function (_a) {
-    var brand = _a.brand, _b = _a.hasError, hasError = _b === void 0 ? false : _b, onAddCard = _a.onAddCard, onDeleteCard = _a.onDeleteCard, _c = _a.onSubmit, onSubmit = _c === void 0 ? function () { return null; } : _c, cardNumber = _a.cardNumber, _d = _a.showEdition, showEdition = _d === void 0 ? false : _d, props = __rest(_a, ["brand", "hasError", "onAddCard", "onDeleteCard", "onSubmit", "cardNumber", "showEdition"]);
-    var formAttributes = __assign({ cardNumber: cardNumber }, props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasError && (0, jsx_runtime_1.jsx)(components_1.CreditCardError, {}), (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: hasError ? 'error.1' : 'lightGreen.1', w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", w: "full", pt: "base", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "home", textTransform: "uppercase", pl: "base", children: (0, i18next_1.t)('myProfile.payment.activePayment') }), (0, jsx_runtime_1.jsx)(components_1.LeftButtonAnimated, { onClick: onAddCard, label: (0, i18next_1.t)('myProfile.payment.addCrediCard'), marginLeft: "auto", fontSize: "sm", width: "11" })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { py: "6", px: "base", children: (0, jsx_runtime_1.jsx)(components_1.CreditCard, { brand: brand, cardNumber: cardNumber, hasError: hasError, showEdition: showEdition, onClick: onDeleteCard, children: showEdition && ((0, jsx_runtime_1.jsx)(components_1.PaymentFormProvider, __assign({}, formAttributes, { onSubmit: onSubmit }))) }) })] })] }));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { CreditCard, CreditCardError, LeftButtonAnimated, PaymentFormProvider, } from '../..';
+export const CreditCardContainer = (_a) => {
+    var { brand, hasError = false, onAddCard, onDeleteCard, onSubmit = () => null, cardNumber, showEdition = false } = _a, props = __rest(_a, ["brand", "hasError", "onAddCard", "onDeleteCard", "onSubmit", "cardNumber", "showEdition"]);
+    const formAttributes = Object.assign({ cardNumber }, props);
+    return (_jsxs(_Fragment, { children: [hasError && _jsx(CreditCardError, {}), _jsxs(Box, { bg: hasError ? 'error.1' : 'lightGreen.1', w: "100%", children: [_jsxs(Flex, { justify: "space-between", w: "full", pt: "base", align: "center", children: [_jsx(Text, { variant: "home", textTransform: "uppercase", pl: "base", children: t('myProfile.payment.activePayment') }), _jsx(LeftButtonAnimated, { onClick: onAddCard, label: t('myProfile.payment.addCrediCard'), marginLeft: "auto", fontSize: "sm", width: "11" })] }), _jsx(Box, { py: "6", px: "base", children: _jsx(CreditCard, { brand, cardNumber, hasError, showEdition, onClick: onDeleteCard, children: showEdition && (_jsx(PaymentFormProvider, Object.assign({}, formAttributes, { onSubmit: onSubmit }))) }) })] })] }));
 };
-exports.CreditCardContainer = CreditCardContainer;

package/dist/components/myProfile/payment/CreditCardError.js

@@ -1,13 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCardError = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var utils_1 = require("../../../utils");
-var CreditCardError = function () {
-    var altWarning = (0, utils_1.getIconAltText)(images_1.Warning);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", p: "4", align: "center", bg: "error.2", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Warning, alt: altWarning, boxSize: "30px", objectFit: "scale-down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", fontWeight: "bold", color: "neutral.white", lineHeight: "1.2", children: (0, i18next_1.t)('myProfile.payment.creditCardErrorMessage') })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Image, Text } from '@chakra-ui/react';
+import { Warning } from '../../../assets/images';
+import { getIconAltText } from '../../../utils';
+export const CreditCardError = () => {
+    const altWarning = getIconAltText(Warning);
+    return (_jsxs(Flex, { gap: "base", p: "4", align: "center", bg: "error.2", children: [_jsx(Image, { src: Warning, alt: altWarning, boxSize: "30px", objectFit: "scale-down" }), _jsx(Text, { fontFamily: "secondary", fontWeight: "bold", color: "neutral.white", lineHeight: "1.2", children: t('myProfile.payment.creditCardErrorMessage') })] }));
 };
-exports.CreditCardError = CreditCardError;

package/dist/components/myProfile/payment/CreditCardForm.js

@@ -1,33 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCardForm = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var react_hook_form_1 = require("react-hook-form");
-var components_1 = require("../..");
-var utils_1 = require("../../../utils");
-var CreditCardForm = function () {
-    var control = (0, react_hook_form_1.useFormContext)().control;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "base", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "cardHolder", control: control, defaultValue: "", render: function (_a) {
-                    var _b = _a.field, value = _b.value, onBlur = _b.onBlur, onChange = _b.onChange, _c = _a.fieldState, invalid = _c.invalid, error = _c.error;
-                    return ((0, jsx_runtime_1.jsx)(components_1.ControlledInput, { placeholder: (0, i18next_1.t)('myProfile.placeholders.cardHolder'), onChange: onChange, onBlur: onBlur, value: value, type: "text", hasError: invalid, errorMessage: error === null || error === void 0 ? void 0 : error.message }));
-                } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "cardNumber", control: control, defaultValue: "", render: function (_a) {
-                    var _b = _a.field, value = _b.value, onBlur = _b.onBlur, onChange = _b.onChange, _c = _a.fieldState, invalid = _c.invalid, error = _c.error;
-                    return ((0, jsx_runtime_1.jsx)(components_1.ControlledInput, { placeholder: (0, i18next_1.t)('myProfile.placeholders.cardNumber'), onChange: function (e) {
-                            var newValue = e.target.value;
-                            e.target.value = (0, utils_1.normalizeCardNumber)(newValue);
-                            onChange(e);
-                        }, onBlur: onBlur, value: value, type: "tel", inputMode: "numeric", autoComplete: "cc-number", hasError: invalid, errorMessage: error === null || error === void 0 ? void 0 : error.message }));
-                } }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: ['2', 'base'], children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: "CVV" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "cvv", control: control, defaultValue: "", render: function (_a) {
-                                    var _b = _a.field, value = _b.value, onBlur = _b.onBlur, onChange = _b.onChange, invalid = _a.fieldState.invalid;
-                                    return ((0, jsx_runtime_1.jsx)(components_1.ControlledInput, { w: ['60px', '65px'], placeholder: "000", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 4 }));
-                                } })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: ['2', 'base'], children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: "Exp" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "expirationMonth", control: control, defaultValue: "", render: function (_a) {
-                                    var _b = _a.field, value = _b.value, onBlur = _b.onBlur, onChange = _b.onChange, invalid = _a.fieldState.invalid;
-                                    return ((0, jsx_runtime_1.jsx)(components_1.ControlledInput, { w: "50px", placeholder: "00", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 2 }));
-                                } }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: "/" }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "expirationYear", control: control, defaultValue: "", render: function (_a) {
-                                    var _b = _a.field, value = _b.value, onBlur = _b.onBlur, onChange = _b.onChange, invalid = _a.fieldState.invalid;
-                                    return ((0, jsx_runtime_1.jsx)(components_1.ControlledInput, { w: ['65px', '70px'], placeholder: "0000", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 4 }));
-                                } })] })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Text, Flex, Stack } from '@chakra-ui/react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { ControlledInput } from '../..';
+import { normalizeCardNumber } from '../../../utils';
+export const CreditCardForm = () => {
+    const { control } = useFormContext();
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Controller, { name: "cardHolder", control: control, defaultValue: "", render: ({ field: { value, onBlur, onChange }, fieldState: { invalid, error }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.cardHolder'), onChange: onChange, onBlur: onBlur, value: value, type: "text", hasError: invalid, errorMessage: error === null || error === void 0 ? void 0 : error.message })) }), _jsx(Controller, { name: "cardNumber", control: control, defaultValue: "", render: ({ field: { value, onBlur, onChange }, fieldState: { invalid, error }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.cardNumber'), onChange: (e) => {
+                        const { value: newValue } = e.target;
+                        e.target.value = normalizeCardNumber(newValue);
+                        onChange(e);
+                    }, onBlur: onBlur, value: value, type: "tel", inputMode: "numeric", autoComplete: "cc-number", hasError: invalid, errorMessage: error === null || error === void 0 ? void 0 : error.message })) }), _jsxs(Flex, { justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: ['2', 'base'], children: [_jsx(Text, { fontFamily: "secondary", children: "CVV" }), _jsx(Controller, { name: "cvv", control: control, defaultValue: "", render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { w: ['60px', '65px'], placeholder: "000", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 4 })) })] }), _jsxs(Flex, { align: "center", gap: ['2', 'base'], children: [_jsx(Text, { fontFamily: "secondary", children: "Exp" }), _jsx(Controller, { name: "expirationMonth", control: control, defaultValue: "", render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { w: "50px", placeholder: "00", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 2 })) }), _jsx(Text, { fontFamily: "secondary", children: "/" }), _jsx(Controller, { name: "expirationYear", control: control, defaultValue: "", render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { w: ['65px', '70px'], placeholder: "0000", onChange: onChange, onBlur: onBlur, value: value, type: "tel", hasError: invalid, maxLength: 4 })) })] })] })] }));
 };
-exports.CreditCardForm = CreditCardForm;

package/dist/components/myProfile/payment/NotBeChargedBanner.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotBeChargedBanner = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var NotBeChargedBanner = function () {
-    return ((0, jsx_runtime_1.jsx)(react_1.Center, { h: "60px", children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", children: (0, i18next_1.t)('myProfile.payment.notBeCharged') }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Center, Text } from '@chakra-ui/react';
+export const NotBeChargedBanner = () => {
+    return (_jsx(Center, { h: "60px", children: _jsx(Text, { fontFamily: "secondary", children: t('myProfile.payment.notBeCharged') }) }));
 };
-exports.NotBeChargedBanner = NotBeChargedBanner;

package/dist/components/myProfile/payment/PaymentFormProvider.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,20 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaymentFormProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var react_hook_form_1 = require("react-hook-form");
-var components_1 = require("../..");
-var hooks_1 = require("../../../hooks");
-var PaymentFormProvider = function (_a) {
-    var onSubmit = _a.onSubmit, props = __rest(_a, ["onSubmit"]);
-    var formAttributes = __assign({}, props);
-    var _b = (0, hooks_1.usePaymentFormProvider)(formAttributes), handleSubmit = _b.handleSubmit, reset = _b.reset, methods = _b.methods, showButtons = _b.showButtons;
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.FormProvider, __assign({}, methods, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { borderTop: "1px solid", borderColor: "lightBlue.6", children: (0, jsx_runtime_1.jsxs)(components_1.PaymentItemContainer, { title: "card details", children: [(0, jsx_runtime_1.jsx)(components_1.CreditCardForm, {}), (0, jsx_runtime_1.jsx)(react_1.Box, { h: "5px" }), showButtons && ((0, jsx_runtime_1.jsx)(components_1.ContextButtons, { onSave: handleSubmit(function (data) {
-                            var parsedData = __assign(__assign({}, data), { cardNumber: Number(data.cardNumber.replaceAll(' ', '')), cvv: Number(data.cvv), expirationMonth: Number(data.expirationMonth), expirationYear: Number(data.expirationYear) });
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { FormProvider } from 'react-hook-form';
+import { ContextButtons, CreditCardForm, PaymentItemContainer, } from '../..';
+import { usePaymentFormProvider } from '../../../hooks';
+export const PaymentFormProvider = (_a) => {
+    var { onSubmit } = _a, props = __rest(_a, ["onSubmit"]);
+    const formAttributes = Object.assign({}, props);
+    const { handleSubmit, reset, methods, showButtons } = usePaymentFormProvider(formAttributes);
+    return (_jsx(FormProvider, Object.assign({}, methods, { children: _jsx(Box, { borderTop: "1px solid", borderColor: "lightBlue.6", children: _jsxs(PaymentItemContainer, { title: "card details", children: [_jsx(CreditCardForm, {}), _jsx(Box, { h: "5px" }), showButtons && (_jsx(ContextButtons, { onSave: handleSubmit((data) => {
+                            const parsedData = Object.assign(Object.assign({}, data), { cardNumber: Number(data.cardNumber.replaceAll(' ', '')), cvv: Number(data.cvv), expirationMonth: Number(data.expirationMonth), expirationYear: Number(data.expirationYear) });
                             onSubmit(parsedData);
                         }), onCancel: reset }))] }) }) })));
 };
-exports.PaymentFormProvider = PaymentFormProvider;

package/dist/components/myProfile/payment/PaymentItemContainer.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,15 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaymentItemContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var utils_1 = require("../../../utils");
-var images_1 = require("../../../assets/images");
-var PaymentItemContainer = function (_a) {
-    var children = _a.children, _b = _a.icon, icon = _b === void 0 ? images_1.CreditCard : _b, title = _a.title, props = __rest(_a, ["children", "icon", "title"]);
-    var alt = (0, utils_1.getIconAltText)(icon);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, __assign({ px: "base", py: "4", spacing: "4" }, props, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "4", w: "full", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: icon, alt: alt, boxSize: "26px", objectFit: "scale-down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", textTransform: "uppercase", children: title })] }), children] })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Text, Stack } from '@chakra-ui/react';
+import { getIconAltText } from '../../../utils';
+import { CreditCard } from '../../../assets/images';
+export const PaymentItemContainer = (_a) => {
+    var { children, icon = CreditCard, title } = _a, props = __rest(_a, ["children", "icon", "title"]);
+    const alt = getIconAltText(icon);
+    return (_jsxs(Stack, Object.assign({ px: "base", py: "4", spacing: "4" }, props, { children: [_jsxs(Flex, { gap: "4", w: "full", align: "center", children: [_jsx(Image, { src: icon, alt: alt, boxSize: "26px", objectFit: "scale-down" }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: title })] }), children] })));
 };
-exports.PaymentItemContainer = PaymentItemContainer;

package/dist/components/myProfile/payment/PaymentReceiptCard.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaymentReceiptCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var utils_1 = require("../../../utils");
-var components_1 = require("../..");
-var PaymentReceiptCard = function (_a) {
-    var date = _a.date, menuItems = _a.menuItems;
-    var alt = (0, utils_1.getImageAltText)(images_1.Receipt);
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "neutral.white", px: "base", pb: "base", pt: "1", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "start", gap: "base", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Receipt, alt: alt, w: "38px", h: "auto", mt: "base" }), (0, jsx_runtime_1.jsxs)(react_1.Box, { flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xxs", children: date }), (0, jsx_runtime_1.jsx)(components_1.IconMenu, { icon: (0, jsx_runtime_1.jsx)(components_1.MoreHorizontal, { size: 28 }), menuItems: menuItems, disabled: !(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { lineHeight: "1", children: (0, i18next_1.t)('myProfile.payment.receiptName') })] })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { Receipt } from '../../../assets/images';
+import { getImageAltText } from '../../../utils';
+import { IconMenu, MoreHorizontal } from '../..';
+export const PaymentReceiptCard = ({ date, menuItems, }) => {
+    const alt = getImageAltText(Receipt);
+    return (_jsx(Box, { bg: "neutral.white", px: "base", pb: "base", pt: "1", children: _jsxs(Flex, { align: "start", gap: "base", children: [_jsx(Image, { src: Receipt, alt: alt, w: "38px", h: "auto", mt: "base" }), _jsxs(Box, { flex: "1", children: [_jsxs(Flex, { justify: "space-between", align: "center", children: [_jsx(Text, { fontSize: "xxs", children: date }), _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 28 }), menuItems: menuItems, disabled: !(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) })] }), _jsx(Text, { lineHeight: "1", children: t('myProfile.payment.receiptName') })] })] }) }));
 };
-exports.PaymentReceiptCard = PaymentReceiptCard;

package/dist/components/myProfile/payment/PaymentReceipts.js

@@ -1,16 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaymentReceipts = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var components_1 = require("../..");
-var PaymentReceipts = function (_a) {
-    var receipts = _a.receipts, menuItems = _a.menuItems;
-    return ((0, jsx_runtime_1.jsx)(components_1.PaymentItemContainer, { icon: images_1.BillingAddress, title: (0, i18next_1.t)('myProfile.payment.receiptsTitle'), children: (0, jsx_runtime_1.jsx)(react_1.Box, { children: receipts === null || receipts === void 0 ? void 0 : receipts.map(function (_a, idx) {
-                var date = _a.date, id = _a.id;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(components_1.PaymentReceiptCard, { date: date, menuItems: menuItems }), idx !== receipts.length - 1 && (0, jsx_runtime_1.jsx)(react_1.Divider, {})] }, id));
-            }) }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Divider } from '@chakra-ui/react';
+import { BillingAddress as ReceiptsIcon } from '../../../assets/images';
+import { PaymentReceiptCard, PaymentItemContainer } from '../..';
+export const PaymentReceipts = ({ receipts, menuItems }) => {
+    return (_jsx(PaymentItemContainer, { icon: ReceiptsIcon, title: t('myProfile.payment.receiptsTitle'), children: _jsx(Box, { children: receipts === null || receipts === void 0 ? void 0 : receipts.map(({ date, id }, idx) => (_jsxs(Box, { children: [_jsx(PaymentReceiptCard, { date: date, menuItems: menuItems }), idx !== receipts.length - 1 && _jsx(Divider, {})] }, id))) }) }));
 };
-exports.PaymentReceipts = PaymentReceipts;

package/dist/components/myProfile/payment/index.js

@@ -1,28 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./newCreditCard"), exports);
-__exportStar(require("./AddCardBanner"), exports);
-__exportStar(require("./CreditCard"), exports);
-__exportStar(require("./CreditCardButton"), exports);
-__exportStar(require("./CreditCardContainer"), exports);
-__exportStar(require("./CreditCardError"), exports);
-__exportStar(require("./CreditCardForm"), exports);
-__exportStar(require("./NotBeChargedBanner"), exports);
-__exportStar(require("./PaymentFormProvider"), exports);
-__exportStar(require("./PaymentItemContainer"), exports);
-__exportStar(require("./PaymentReceiptCard"), exports);
-__exportStar(require("./PaymentReceipts"), exports);
+export * from './newCreditCard';
+export * from './AddCardBanner';
+export * from './CreditCard';
+export * from './CreditCardButton';
+export * from './CreditCardContainer';
+export * from './CreditCardError';
+export * from './CreditCardForm';
+export * from './NotBeChargedBanner';
+export * from './PaymentFormProvider';
+export * from './PaymentItemContainer';
+export * from './PaymentReceiptCard';
+export * from './PaymentReceipts';

package/dist/components/myProfile/payment/newCreditCard/NewCreditCard.js

@@ -1,24 +1,9 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCreditCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var NewCreditCard = function (_a) {
-    var _b = _a.hasError, hasError = _b === void 0 ? false : _b, onSubmit = _a.onSubmit;
-    var formAttributes = {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Stack, Text } from '@chakra-ui/react';
+import { CreditCard, PaymentFormProvider } from '../../..';
+export const NewCreditCard = ({ hasError = false, onSubmit, }) => {
+    const formAttributes = {
         brand: '',
         cardHolder: '',
         cardNumber: '',
@@ -26,6 +11,5 @@ var NewCreditCard = function (_a) {
         expirationMonth: '',
         expirationYear: '',
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { p: "base", spacing: "base", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "home", children: (0, i18next_1.t)('myProfile.payment.toDelete') }), (0, jsx_runtime_1.jsx)(components_1.CreditCard, __assign({}, formAttributes, { hasError: hasError, defaultIndex: [0], children: (0, jsx_runtime_1.jsx)(components_1.PaymentFormProvider, __assign({}, formAttributes, { onSubmit: onSubmit })) }))] }));
+    return (_jsxs(Stack, { p: "base", spacing: "base", children: [_jsx(Text, { variant: "home", children: t('myProfile.payment.toDelete') }), _jsx(CreditCard, Object.assign({}, formAttributes, { hasError, defaultIndex: [0], children: _jsx(PaymentFormProvider, Object.assign({}, formAttributes, { onSubmit: onSubmit })) }))] }));
 };
-exports.NewCreditCard = NewCreditCard;

package/dist/components/myProfile/payment/newCreditCard/NewCreditCardHeader.js

@@ -1,12 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NewCreditCardHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../../..");
-var NewCreditCardHeader = function (_a) {
-    var onClick = _a.onClick;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "lightBlue.2", p: "base", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.BackCircleButton, { onClick: onClick }), (0, jsx_runtime_1.jsx)(react_1.Text, { children: (0, i18next_1.t)('myProfile.payment.addNew') })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { BackCircleButton } from '../../..';
+export const NewCreditCardHeader = ({ onClick }) => {
+    return (_jsx(Box, { bg: "lightBlue.2", p: "base", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(BackCircleButton, { onClick: onClick }), _jsx(Text, { children: t('myProfile.payment.addNew') })] }) }));
 };
-exports.NewCreditCardHeader = NewCreditCardHeader;

package/dist/components/myProfile/payment/newCreditCard/index.js

@@ -1,18 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./NewCreditCard"), exports);
-__exportStar(require("./NewCreditCardHeader"), exports);
+export * from './NewCreditCard';
+export * from './NewCreditCardHeader';

package/dist/components/onboarding/BuildingApp.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuildingApp = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var react_spinners_1 = require("react-spinners");
-var images_1 = require("../../assets/images");
-var BuildingApp = function () {
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { maxW: "container.xl", children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { p: "12", spacing: "6", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Circle, { size: "204px", bg: "lightGreen.1", children: (0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Building, alt: "Building App" }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "heading", textAlign: "center", lineHeight: ['30px', ''], children: (0, i18next_1.t)('buildingApp.title') }), (0, jsx_runtime_1.jsx)(react_spinners_1.BeatLoader, { color: "gray", size: "8" }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", textAlign: "center", maxW: "container.md", children: (0, i18next_1.t)('buildingApp.subtitle') })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Text, Image, Stack, Circle } from '@chakra-ui/react';
+import { BeatLoader } from 'react-spinners';
+import { Building } from '../../assets/images';
+export const BuildingApp = () => {
+    return (_jsx(Container, { maxW: "container.xl", children: _jsxs(Stack, { p: "12", spacing: "6", alignItems: "center", children: [_jsx(Circle, { size: "204px", bg: "lightGreen.1", children: _jsx(Image, { src: Building, alt: "Building App" }) }), _jsx(Text, { variant: "heading", textAlign: "center", lineHeight: ['30px', ''], children: t('buildingApp.title') }), _jsx(BeatLoader, { color: "gray", size: "8" }), _jsx(Text, { variant: "info", textAlign: "center", maxW: "container.md", children: t('buildingApp.subtitle') })] }) }));
 };
-exports.BuildingApp = BuildingApp;

package/dist/components/onboarding/CardFooter.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardFooter = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var CardFooter = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, buttonLabel = _a.buttonLabel, handleButtonClick = _a.handleButtonClick;
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { variant: "secondary", centerContent: true, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { w: "full", px: ['container.sm', 'container.md', 'container.lg'], my: "auto", py: "2rem", children: [title !== '' && ((0, jsx_runtime_1.jsx)(react_1.Text, { mb: 4, textAlign: "center", variant: "body", children: title })), (0, jsx_runtime_1.jsx)(react_1.Button, { mb: 2, variant: "secondary", onClick: handleButtonClick, children: buttonLabel })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Container, Text, Button } from '@chakra-ui/react';
+export const CardFooter = ({ title = '', buttonLabel, handleButtonClick, }) => {
+    return (_jsx(Container, { variant: "secondary", centerContent: true, children: _jsxs(Box, { w: "full", px: ['container.sm', 'container.md', 'container.lg'], my: "auto", py: "2rem", children: [title !== '' && (_jsx(Text, { mb: 4, textAlign: "center", variant: "body", children: title })), _jsx(Button, { mb: 2, variant: "secondary", onClick: handleButtonClick, children: buttonLabel })] }) }));
 };
-exports.CardFooter = CardFooter;

package/dist/components/onboarding/Footer.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var Footer = function () {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { w: ['container.full', 'container.sm', 'container.md'], direction: ['column', 'row'], mx: "auto", my: 4, justifyContent: ['center', 'space-between'], alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: (0, i18next_1.t)('footer.copyright') }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: (0, jsx_runtime_1.jsx)("a", { target: "_blank", href: (0, i18next_1.t)('footer.termsUrl'), children: (0, i18next_1.t)('footer.termsLink') }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "label", children: (0, jsx_runtime_1.jsx)("a", { target: "_blank", href: (0, i18next_1.t)('footer.privacyUrl'), children: (0, i18next_1.t)('footer.privacyLink') }) })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Flex, Text } from '@chakra-ui/react';
+export const Footer = () => {
+    return (_jsxs(Flex, { w: ['container.full', 'container.sm', 'container.md'], direction: ['column', 'row'], mx: "auto", my: 4, justifyContent: ['center', 'space-between'], alignItems: "center", children: [_jsx(Text, { variant: "label", children: t('footer.copyright') }), _jsxs(Flex, { gap: 2, children: [_jsx(Text, { variant: "label", children: _jsx("a", { target: "_blank", href: t('footer.termsUrl'), children: t('footer.termsLink') }) }), _jsx(Text, { variant: "label", children: _jsx("a", { target: "_blank", href: t('footer.privacyUrl'), children: t('footer.privacyLink') }) })] })] }));
 };
-exports.Footer = Footer;

package/dist/components/onboarding/Logo.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logo = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../assets/images");
-var Logo = function () {
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { variant: "ghost", size: "full", children: (0, jsx_runtime_1.jsx)(react_1.Center, { h: "container.xxs", children: (0, jsx_runtime_1.jsx)(react_1.Image, { src: images_1.Homefile, alt: "Homefile", h: "image.logo" }) }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center, Container, Image } from '@chakra-ui/react';
+import { Homefile } from '../../assets/images';
+export const Logo = () => {
+    return (_jsx(Container, { variant: "ghost", size: "full", children: _jsx(Center, { h: "container.xxs", children: _jsx(Image, { src: Homefile, alt: "Homefile", h: "image.logo" }) }) }));
 };
-exports.Logo = Logo;

package/dist/components/onboarding/PageTitle.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageTitle = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var PageTitle = function (_a) {
-    var title = _a.title;
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { variant: "ghost", mt: 4, mb: 6, children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: title }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Container, Text } from '@chakra-ui/react';
+export const PageTitle = ({ title }) => {
+    return (_jsx(Container, { variant: "ghost", mt: 4, mb: 6, children: _jsx(Text, { variant: "title", textAlign: "center", px: [10, 0], noOfLines: [2, 1], children: title }) }));
 };
-exports.PageTitle = PageTitle;

package/dist/components/onboarding/WelcomeHeader.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WelcomeHeader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var WelcomeHeader = function (_a) {
-    var description = _a.description, greeting = _a.greeting, name = _a.name;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: 3, my: 8, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { variant: "info", children: [(0, jsx_runtime_1.jsx)(react_1.chakra.span, { children: greeting }), (0, jsx_runtime_1.jsx)(react_1.chakra.span, { children: "".concat(name, ",") })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", children: description })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chakra, Stack, Text } from '@chakra-ui/react';
+export const WelcomeHeader = ({ description, greeting, name }) => {
+    return (_jsxs(Stack, { spacing: 3, my: 8, children: [_jsxs(Text, { variant: "info", children: [_jsx(chakra.span, { children: greeting }), _jsx(chakra.span, { children: `${name},` })] }), _jsx(Text, { variant: "info", children: description })] }));
 };
-exports.WelcomeHeader = WelcomeHeader;