@homefile/components-v2 1.0.2 → 1.0.3

package/dist/components/myProfile/ProfileAccountTab.js

@@ -1,33 +1,16 @@
-"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.ProfileAccountTab = 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 ProfileAccountTab = function (_a) {
-    var planOptions = _a.planOptions, _b = _a.currentPlan, currentPlan = _b === void 0 ? 'single' : _b, onChange = _a.onChange, isActive = _a.isActive;
-    var _c = (0, react_1.useRadioGroup)({
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Stack, useRadioGroup, Center, Text } from '@chakra-ui/react';
+import { RadioCard, PlanRadioCardContent } from '..';
+export const ProfileAccountTab = ({ planOptions, currentPlan = 'single', onChange, isActive, }) => {
+    const { getRootProps, getRadioProps } = useRadioGroup({
         name: 'plan',
         defaultValue: currentPlan,
-        onChange: onChange,
-    }), getRootProps = _c.getRootProps, getRadioProps = _c.getRadioProps;
-    var group = getRootProps();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isActive ? ((0, jsx_runtime_1.jsx)(react_1.Center, { children: (0, jsx_runtime_1.jsx)(react_1.Text, { p: "1rem", children: (0, i18next_1.t)('myProfile.account.inActive') }) })) : ((0, jsx_runtime_1.jsx)(react_1.Stack, __assign({}, group, { spacing: "input.sm", p: "6", bg: "lightBlue.2", children: planOptions.map(function (_a) {
-                var value = _a.value, label = _a.label, homes = _a.homes, price = _a.price;
-                var radio = getRadioProps({ value: value });
-                return ((0, jsx_runtime_1.jsx)(components_1.RadioCard, __assign({}, radio, { children: (0, jsx_runtime_1.jsx)(components_1.PlanRadioCardContent, { value: value, label: label, homes: homes, price: price }) }), value));
+        onChange,
+    });
+    const group = getRootProps();
+    return (_jsx(_Fragment, { children: !isActive ? (_jsx(Center, { children: _jsx(Text, { p: "1rem", children: t('myProfile.account.inActive') }) })) : (_jsx(Stack, Object.assign({}, group, { spacing: "input.sm", p: "6", bg: "lightBlue.2", children: planOptions.map(({ value, label, homes, price }) => {
+                const radio = getRadioProps({ value });
+                return (_jsx(RadioCard, Object.assign({}, radio, { children: _jsx(PlanRadioCardContent, { value, label, homes, price }) }), value));
             }) }))) }));
 };
-exports.ProfileAccountTab = ProfileAccountTab;

package/dist/components/myProfile/ProfileDetailsTab.js

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileDetailsTab = 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 hooks_1 = require("../../hooks");
-var valtio_1 = require("valtio");
-var proxies_1 = require("../../proxies");
-var ProfileDetailsTab = function (_a) {
-    var email = _a.email, firstName = _a.firstName, lastName = _a.lastName, buttonLabel = _a.buttonLabel, handleSubmit = _a.handleSubmit;
-    var _b = (0, hooks_1.useProfileDetail)({ email: email, firstName: firstName, lastName: lastName }), currentEmail = _b.currentEmail, currentFirstName = _b.currentFirstName, currentLastName = _b.currentLastName, handleEmail = _b.handleEmail, handleEmailValidation = _b.handleEmailValidation, handleErrorMessage = _b.handleErrorMessage, handleFirstNameValidation = _b.handleFirstNameValidation, handleLastNameValidation = _b.handleLastNameValidation, handleFirstName = _b.handleFirstName, handleLastName = _b.handleLastName, nameInitials = _b.nameInitials;
-    var validations = (0, valtio_1.useSnapshot)(proxies_1.userDetailsProxy).validations;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { h: "121px", w: "121px", bg: "blue.2", children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { flex: "1", spacing: "input.sm", children: [(0, jsx_runtime_1.jsx)(components_1.TextInput, { id: "firstName", handleChange: handleFirstName, placeholder: (0, i18next_1.t)('myProfile.placeholders.firstName'), value: currentFirstName, onBlurCapture: handleFirstNameValidation, hasError: !validations.isFirstNameValid, errorMessage: handleErrorMessage('firstName') }), (0, jsx_runtime_1.jsx)(components_1.TextInput, { id: "lastName", handleChange: handleLastName, placeholder: (0, i18next_1.t)('myProfile.placeholders.lastName'), value: currentLastName, onBlurCapture: handleLastNameValidation, hasError: !validations.isLastNameValid, errorMessage: handleErrorMessage('lastName') }), (0, jsx_runtime_1.jsx)(components_1.TextInput, { id: "email", handleChange: handleEmail, placeholder: (0, i18next_1.t)('myProfile.placeholders.email'), value: currentEmail, onBlurCapture: handleEmailValidation, hasError: !validations.isEmailValid, errorMessage: handleErrorMessage('email') }), (buttonLabel !== "") && ((0, jsx_runtime_1.jsx)(react_1.Flex, { justifyContent: "center", alignItems: "center", mt: "1rem", children: (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "primaryFooter", onClick: handleSubmit, w: 'fit-content', children: buttonLabel }) }))] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Text, Center, Flex, Stack, Button } from '@chakra-ui/react';
+import { TextInput } from '..';
+import { useProfileDetail } from '../../hooks';
+import { useSnapshot } from 'valtio';
+import { userDetailsProxy } from '../../proxies';
+export const ProfileDetailsTab = ({ email, firstName, lastName, buttonLabel, handleSubmit }) => {
+    const { currentEmail, currentFirstName, currentLastName, handleEmail, handleEmailValidation, handleErrorMessage, handleFirstNameValidation, handleLastNameValidation, handleFirstName, handleLastName, nameInitials, } = useProfileDetail({ email, firstName, lastName });
+    const { validations } = useSnapshot(userDetailsProxy);
+    return (_jsxs(Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", children: [_jsx(Center, { h: "121px", w: "121px", bg: "blue.2", children: _jsx(Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), _jsxs(Stack, { flex: "1", spacing: "input.sm", children: [_jsx(TextInput, { id: "firstName", handleChange: handleFirstName, placeholder: t('myProfile.placeholders.firstName'), value: currentFirstName, onBlurCapture: handleFirstNameValidation, hasError: !validations.isFirstNameValid, errorMessage: handleErrorMessage('firstName') }), _jsx(TextInput, { id: "lastName", handleChange: handleLastName, placeholder: t('myProfile.placeholders.lastName'), value: currentLastName, onBlurCapture: handleLastNameValidation, hasError: !validations.isLastNameValid, errorMessage: handleErrorMessage('lastName') }), _jsx(TextInput, { id: "email", handleChange: handleEmail, placeholder: t('myProfile.placeholders.email'), value: currentEmail, onBlurCapture: handleEmailValidation, hasError: !validations.isEmailValid, errorMessage: handleErrorMessage('email') }), (buttonLabel !== "") && (_jsx(Flex, { justifyContent: "center", alignItems: "center", mt: "1rem", children: _jsx(Button, { variant: "primaryFooter", onClick: handleSubmit, w: 'fit-content', children: buttonLabel }) }))] })] }));
 };
-exports.ProfileDetailsTab = ProfileDetailsTab;

package/dist/components/myProfile/ProfilePaymentTab.js

@@ -1,16 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfilePaymentTab = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var react_2 = require("@chakra-ui/react");
-var ProfilePaymentTab = function (_a) {
-    var paymentMethod = _a.paymentMethod, receipts = _a.receipts, handleDelete = _a.handleDelete, isStandAlone = _a.isStandAlone, handleAddCard = _a.handleAddCard, handleNewCard = _a.handleNewCard, buttonLabel = _a.buttonLabel;
-    var _b = (0, react_1.useState)(false), hasSavedCreditCard = _b[0], updateSavedCard = _b[1];
-    var handleSubmit = (0, hooks_1.usePaymentMethod)(handleAddCard).handleSubmit;
-    (0, react_1.useEffect)(function () {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { AddCreditCard, MyProfileReceipts, CreditCardContainer, } from '..';
+import { usePaymentMethod } from '../../hooks';
+import { Button, Flex } from '@chakra-ui/react';
+export const ProfilePaymentTab = ({ paymentMethod, receipts, handleDelete, isStandAlone, handleAddCard, handleNewCard, buttonLabel, }) => {
+    const [hasSavedCreditCard, updateSavedCard] = useState(false);
+    const { handleSubmit } = usePaymentMethod(handleAddCard);
+    useEffect(() => {
         if (paymentMethod.number) {
             updateSavedCard(true);
         }
@@ -18,12 +14,11 @@ var ProfilePaymentTab = function (_a) {
             updateSavedCard(false);
         }
     }, [paymentMethod]);
-    var hasReceipts = receipts.length > 0;
-    var _c = paymentMethod || {
+    const hasReceipts = receipts.length > 0;
+    const { brand, number, isPaymentMethodValid } = paymentMethod || {
         brand: '',
         number: '',
         isPaymentMethodValid: false,
-    }, brand = _c.brand, number = _c.number, isPaymentMethodValid = _c.isPaymentMethodValid;
-    return hasSavedCreditCard ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.CreditCardContainer, { brand: brand, cardNumber: number, hasError: !isPaymentMethodValid, onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: function () { return null; }, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '' }), hasReceipts && (0, jsx_runtime_1.jsx)(components_1.MyProfileReceipts, { receipts: receipts })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: 'column', w: "100%", alignItems: 'center', children: [(0, jsx_runtime_1.jsx)(components_1.AddCreditCard, {}), isStandAlone && ((0, jsx_runtime_1.jsx)(react_2.Flex, { justifyContent: 'center', alignItems: "center", mt: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.Button, { variant: 'primaryFooter', onClick: handleSubmit, w: 'fit-content', children: buttonLabel }) }))] }));
+    };
+    return hasSavedCreditCard ? (_jsxs(_Fragment, { children: [_jsx(CreditCardContainer, { brand: brand, cardNumber: number, hasError: !isPaymentMethodValid, onAddCard: handleNewCard, onDeleteCard: handleDelete, onSubmit: () => null, cardHolder: '', cvv: '', expirationMonth: '', expirationYear: '' }), hasReceipts && _jsx(MyProfileReceipts, { receipts })] })) : (_jsxs(Flex, { flexDir: 'column', w: "100%", alignItems: 'center', children: [_jsx(AddCreditCard, {}), isStandAlone && (_jsx(Flex, { justifyContent: 'center', alignItems: "center", mt: '1rem', children: _jsx(Button, { variant: 'primaryFooter', onClick: handleSubmit, w: 'fit-content', children: buttonLabel }) }))] }));
 };
-exports.ProfilePaymentTab = ProfilePaymentTab;

package/dist/components/myProfile/details/TwoFactorSetting.js

@@ -1,44 +1,21 @@
-"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);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Controller } from 'react-hook-form';
+import { Stack, Flex, Img, Text, Box, FormControl, FormLabel, Switch, Button, } from '@chakra-ui/react';
+import { Security } from '../../../assets/images';
+import { ControlledInput, Loading, RadioButton, TextInput, } from '../..';
+import { useTwoFactorSetting } from '../../../hooks';
+export const TwoFactorSetting = ({ defaultValue = 'email', email = '', loading, onChange, onSave, sms = '', twoFactor, }) => {
+    const { altText, control, emailRadio, group, handleEmailValidation, handlePhoneValidation, handleSubmit, is2faEnabled, radioValue, showButtons, smsRadio, } = useTwoFactorSetting({
+        defaultValue,
+        email,
+        onChange,
+        onSave,
+        sms,
+        twoFactor,
+    });
+    return (_jsxs(Box, { position: "relative", children: [loading && _jsx(Loading, {}), _jsxs(Stack, { bg: "lightBlue.1", px: "base", py: "4", spacing: "8", children: [_jsxs(Stack, { spacing: "4", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Img, { src: Security, alt: altText }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: t('myProfile.details.2FactorTitle') })] }), _jsx(Controller, { name: "2fa", control: control, render: ({ field: { value, onChange, onBlur } }) => {
+                                            const label = value ? 'ON' : 'OFF';
+                                            return (_jsxs(FormControl, { display: "flex", alignItems: "center", w: "fit-content", children: [_jsx(FormLabel, { htmlFor: "2fa", mb: "0", fontSize: "sm", children: label }), _jsx(Switch, { id: "2fa", size: "lg", isChecked: value, onChange: onChange, onBlur: onBlur })] }));
+                                        } })] }), _jsx(Text, { fontFamily: "secondary", lineHeight: "1.2", children: t('myProfile.details.2FactorSubtitle') })] }), _jsxs(Stack, Object.assign({}, group, { spacing: "4", children: [_jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, emailRadio, { isDisabled: !is2faEnabled, children: "Email" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "email", control: control, rules: { validate: handleEmailValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(TextInput, { placeholder: t('myProfile.placeholders.email'), handleChange: onChange, onBlur: onBlur, value: value, hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.email')}`, isDisabled: radioValue === 'sms' || !is2faEnabled })) }) })] }), _jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, smsRadio, { isDisabled: !is2faEnabled, children: "SMS" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "sms", control: control, rules: { validate: handlePhoneValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.sms'), onChange: onChange, onBlur: onBlur, value: value, type: "number", hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.phone')}`, isDisabled: radioValue === 'email' || !is2faEnabled })) }) })] }), _jsx(Box, { w: "75%", alignSelf: "end", children: showButtons && (_jsx(Button, { variant: "secondaryFooter", type: "submit", bg: "neutral.white", fontWeight: "medium", onClick: handleSubmit(onSave), children: t('buttons.save').toUpperCase() })) })] }))] })] }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TwoFactorSetting = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var components_1 = require("../..");
-var hooks_1 = require("../../../hooks");
-var TwoFactorSetting = function (_a) {
-    var _b = _a.defaultValue, defaultValue = _b === void 0 ? 'email' : _b, _c = _a.email, email = _c === void 0 ? '' : _c, loading = _a.loading, onChange = _a.onChange, onSave = _a.onSave, _d = _a.sms, sms = _d === void 0 ? '' : _d, twoFactor = _a.twoFactor;
-    var _e = (0, hooks_1.useTwoFactorSetting)({
-        defaultValue: defaultValue,
-        email: email,
-        onChange: onChange,
-        onSave: onSave,
-        sms: sms,
-        twoFactor: twoFactor,
-    }), altText = _e.altText, control = _e.control, emailRadio = _e.emailRadio, group = _e.group, handleEmailValidation = _e.handleEmailValidation, handlePhoneValidation = _e.handlePhoneValidation, handleSubmit = _e.handleSubmit, is2faEnabled = _e.is2faEnabled, radioValue = _e.radioValue, showButtons = _e.showButtons, smsRadio = _e.smsRadio;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [loading && (0, jsx_runtime_1.jsx)(components_1.Loading, {}), (0, jsx_runtime_1.jsxs)(react_1.Stack, { bg: "lightBlue.1", px: "base", py: "4", spacing: "8", children: [(0, jsx_runtime_1.jsxs)(react_1.Stack, { spacing: "4", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Img, { src: images_1.Security, alt: altText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", textTransform: "uppercase", children: (0, i18next_1.t)('myProfile.details.2FactorTitle') })] }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "2fa", control: control, render: function (_a) {
-                                            var _b = _a.field, value = _b.value, onChange = _b.onChange, onBlur = _b.onBlur;
-                                            var label = value ? 'ON' : 'OFF';
-                                            return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { display: "flex", alignItems: "center", w: "fit-content", children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { htmlFor: "2fa", mb: "0", fontSize: "sm", children: label }), (0, jsx_runtime_1.jsx)(react_1.Switch, { id: "2fa", size: "lg", isChecked: value, onChange: onChange, onBlur: onBlur })] }));
-                                        } })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "secondary", lineHeight: "1.2", children: (0, i18next_1.t)('myProfile.details.2FactorSubtitle') })] }), (0, jsx_runtime_1.jsxs)(react_1.Stack, __assign({}, group, { spacing: "4", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(components_1.RadioButton, __assign({}, emailRadio, { isDisabled: !is2faEnabled, children: "Email" })), (0, jsx_runtime_1.jsx)(react_1.Box, { w: "75%", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "email", control: control, rules: { validate: handleEmailValidation }, 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.TextInput, { placeholder: (0, i18next_1.t)('myProfile.placeholders.email'), handleChange: onChange, onBlur: onBlur, value: value, hasError: invalid, errorMessage: "".concat((0, i18next_1.t)('forms.invalid'), " ").concat((0, i18next_1.t)('forms.email')), isDisabled: radioValue === 'sms' || !is2faEnabled }));
-                                            } }) })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(components_1.RadioButton, __assign({}, smsRadio, { isDisabled: !is2faEnabled, children: "SMS" })), (0, jsx_runtime_1.jsx)(react_1.Box, { w: "75%", children: (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "sms", control: control, rules: { validate: handlePhoneValidation }, 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, { placeholder: (0, i18next_1.t)('myProfile.placeholders.sms'), onChange: onChange, onBlur: onBlur, value: value, type: "number", hasError: invalid, errorMessage: "".concat((0, i18next_1.t)('forms.invalid'), " ").concat((0, i18next_1.t)('forms.phone')), isDisabled: radioValue === 'email' || !is2faEnabled }));
-                                            } }) })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { w: "75%", alignSelf: "end", children: showButtons && ((0, jsx_runtime_1.jsx)(react_1.Button, { variant: "secondaryFooter", type: "submit", bg: "neutral.white", fontWeight: "medium", onClick: handleSubmit(onSave), children: (0, i18next_1.t)('buttons.save').toUpperCase() })) })] }))] })] }));
-};
-exports.TwoFactorSetting = TwoFactorSetting;

package/dist/components/myProfile/details/UserDetails.js

@@ -1,83 +1,41 @@
-"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 __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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserDetails = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var yup = __importStar(require("yup"));
-var yup_1 = require("@hookform/resolvers/yup");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../..");
-var schema = yup.object({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm, Controller } from 'react-hook-form';
+import { Text, Center, Flex, Stack } from '@chakra-ui/react';
+import { ContextButtons, TextInput } from '../..';
+const schema = yup.object({
     firstName: yup
         .string()
-        .required("".concat((0, i18next_1.t)('forms.firstName'), " ").concat((0, i18next_1.t)('forms.required'))),
+        .required(`${t('forms.firstName')} ${t('forms.required')}`),
     lastName: yup
         .string()
-        .required("".concat((0, i18next_1.t)('forms.lastName'), " ").concat((0, i18next_1.t)('forms.required'))),
+        .required(`${t('forms.lastName')} ${t('forms.required')}`),
     email: yup
         .string()
-        .email("".concat((0, i18next_1.t)('forms.invalid'), " ").concat((0, i18next_1.t)('forms.email')))
-        .required("".concat((0, i18next_1.t)('forms.email'), " ").concat((0, i18next_1.t)('forms.required'))),
+        .email(`${t('forms.invalid')} ${t('forms.email')}`)
+        .required(`${t('forms.email')} ${t('forms.required')}`),
 });
-var UserDetails = function (_a) {
-    var email = _a.email, firstName = _a.firstName, lastName = _a.lastName, onSave = _a.onSave, bg = _a.bg;
-    var nameInitials = "".concat(firstName.charAt(0)).concat(lastName.charAt(0)).toUpperCase();
-    var _b = (0, react_hook_form_1.useForm)({
+export const UserDetails = ({ email, firstName, lastName, onSave, bg }) => {
+    const nameInitials = `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+    const { control, handleSubmit, reset, formState: { errors, dirtyFields, touchedFields }, } = useForm({
         defaultValues: {
-            firstName: firstName,
-            lastName: lastName,
-            email: email,
+            firstName,
+            lastName,
+            email,
         },
-        resolver: (0, yup_1.yupResolver)(schema),
-    }), control = _b.control, handleSubmit = _b.handleSubmit, reset = _b.reset, _c = _b.formState, errors = _c.errors, dirtyFields = _c.dirtyFields, touchedFields = _c.touchedFields;
-    var showButtons = Object.keys(__assign(__assign({}, dirtyFields), touchedFields)).length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", pb: "6", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { h: "121px", w: "121px", bg: bg, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), (0, jsx_runtime_1.jsxs)(react_1.Stack, { flex: "1", spacing: "input.sm", children: [(0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "firstName", control: control, render: function (_a) {
-                            var _b;
-                            var _c = _a.field, value = _c.value, onBlur = _c.onBlur, onChange = _c.onChange, invalid = _a.fieldState.invalid;
-                            return ((0, jsx_runtime_1.jsx)(components_1.TextInput, { handleChange: onChange, placeholder: (0, i18next_1.t)('myProfile.placeholders.firstName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_b = errors.firstName) === null || _b === void 0 ? void 0 : _b.message }));
-                        } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "lastName", control: control, render: function (_a) {
-                            var _b;
-                            var _c = _a.field, value = _c.value, onBlur = _c.onBlur, onChange = _c.onChange, invalid = _a.fieldState.invalid;
-                            return ((0, jsx_runtime_1.jsx)(components_1.TextInput, { handleChange: onChange, placeholder: (0, i18next_1.t)('myProfile.placeholders.lastName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_b = errors.lastName) === null || _b === void 0 ? void 0 : _b.message }));
-                        } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "email", control: control, render: function (_a) {
-                            var _b;
-                            var _c = _a.field, value = _c.value, onBlur = _c.onBlur, onChange = _c.onChange, invalid = _a.fieldState.invalid;
-                            return ((0, jsx_runtime_1.jsx)(components_1.TextInput, { handleChange: onChange, placeholder: (0, i18next_1.t)('myProfile.placeholders.email'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_b = errors.email) === null || _b === void 0 ? void 0 : _b.message }));
-                        } }), showButtons && ((0, jsx_runtime_1.jsx)(components_1.ContextButtons, { onCancel: reset, onSave: handleSubmit(onSave) }))] })] }));
+        resolver: yupResolver(schema),
+    });
+    const showButtons = Object.keys(Object.assign(Object.assign({}, dirtyFields), touchedFields)).length > 0;
+    return (_jsxs(Flex, { align: "start", gap: "input.sm", bg: "lightBlue.2", p: "base", pb: "6", children: [_jsx(Center, { h: "121px", w: "121px", bg: bg, children: _jsx(Text, { fontSize: "5xl", fontWeight: "extrabold", fontFamily: "primary", color: "neutral.white", children: nameInitials }) }), _jsxs(Stack, { flex: "1", spacing: "input.sm", children: [_jsx(Controller, { name: "firstName", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
+                            var _a;
+                            return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.firstName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.firstName) === null || _a === void 0 ? void 0 : _a.message }));
+                        } }), _jsx(Controller, { name: "lastName", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
+                            var _a;
+                            return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.lastName'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.lastName) === null || _a === void 0 ? void 0 : _a.message }));
+                        } }), _jsx(Controller, { name: "email", control: control, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => {
+                            var _a;
+                            return (_jsx(TextInput, { handleChange: onChange, placeholder: t('myProfile.placeholders.email'), value: value, onBlur: onBlur, hasError: invalid, errorMessage: (_a = errors.email) === null || _a === void 0 ? void 0 : _a.message }));
+                        } }), showButtons && (_jsx(ContextButtons, { onCancel: reset, onSave: handleSubmit(onSave) }))] })] }));
 };
-exports.UserDetails = UserDetails;

package/dist/components/myProfile/details/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("./TwoFactorSetting"), exports);
-__exportStar(require("./UserDetails"), exports);
+export * from './TwoFactorSetting';
+export * from './UserDetails';

package/dist/components/myProfile/email/EmailPermissions.js

@@ -1,51 +1,34 @@
-"use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmailPermissions = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_hook_form_1 = require("react-hook-form");
-var react_1 = require("@chakra-ui/react");
-var images_1 = require("../../../assets/images");
-var headers_1 = require("../../headers");
-var EmailPermissions = function (_a) {
-    var emailPermissions = _a.emailPermissions, initialPermissions = _a.initialPermissions, onSubmit = _a.onSubmit, _b = _a.unsubscribed, unsubscribed = _b === void 0 ? false : _b;
-    var _c = (0, react_hook_form_1.useForm)({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { Box, Button, Checkbox, Stack, Text } from '@chakra-ui/react';
+import { Message } from '../../../assets/images';
+import { SectionHeader } from '../../headers';
+export const EmailPermissions = ({ emailPermissions, initialPermissions, onSubmit, unsubscribed = false, }) => {
+    const { handleSubmit, control, watch, setValue, formState: { dirtyFields }, } = useForm({
         defaultValues: {
             permissions: initialPermissions,
             unsubscribe: unsubscribed,
         },
-    }), handleSubmit = _c.handleSubmit, control = _c.control, watch = _c.watch, setValue = _c.setValue, dirtyFields = _c.formState.dirtyFields;
-    var watchPermissions = watch('permissions');
-    var hasUnsubscribe = watch('unsubscribe');
-    var showButton = Object.keys(dirtyFields).length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Stack, { bg: "lightBlue.2", p: "base", spacing: "4", children: [(0, jsx_runtime_1.jsx)(headers_1.SectionHeader, { titleIcon: images_1.Message, title: (0, i18next_1.t)('myProfile.email.emailPermissions') }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "permissions", control: control, render: function (_a) {
-                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                    return ((0, jsx_runtime_1.jsx)(react_1.Stack, { px: "base", py: "1", spacing: "base", children: emailPermissions.map(function (permission) {
-                            var handleChange = function (event) {
-                                var newValue = event.target.checked
-                                    ? __spreadArray(__spreadArray([], value, true), [permission], false) : value.filter(function (item) { return item !== permission; });
-                                onChange(newValue);
-                            };
-                            return ((0, jsx_runtime_1.jsx)(react_1.Checkbox, { size: "md", defaultChecked: value.includes(permission), isChecked: watchPermissions.includes(permission), onChange: handleChange, disabled: hasUnsubscribe, children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", fontWeight: "normal", children: permission }) }, permission));
-                        }) }));
-                } }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: "unsubscribe", control: control, render: function (_a) {
-                    var _b = _a.field, value = _b.value, onChange = _b.onChange;
-                    var handleChange = function (event) {
-                        var newValue = event.target.checked;
+    });
+    const watchPermissions = watch('permissions');
+    const hasUnsubscribe = watch('unsubscribe');
+    const showButton = Object.keys(dirtyFields).length > 0;
+    return (_jsxs(Stack, { bg: "lightBlue.2", p: "base", spacing: "4", children: [_jsx(SectionHeader, { titleIcon: Message, title: t('myProfile.email.emailPermissions') }), _jsx(Controller, { name: "permissions", control: control, render: ({ field: { value, onChange } }) => (_jsx(Stack, { px: "base", py: "1", spacing: "base", children: emailPermissions.map((permission) => {
+                        const handleChange = (event) => {
+                            const newValue = event.target.checked
+                                ? [...value, permission]
+                                : value.filter((item) => item !== permission);
+                            onChange(newValue);
+                        };
+                        return (_jsx(Checkbox, { size: "md", defaultChecked: value.includes(permission), isChecked: watchPermissions.includes(permission), onChange: handleChange, disabled: hasUnsubscribe, children: _jsx(Text, { variant: "info", fontWeight: "normal", children: permission }) }, permission));
+                    }) })) }), _jsx(Controller, { name: "unsubscribe", control: control, render: ({ field: { value, onChange } }) => {
+                    const handleChange = (event) => {
+                        const newValue = event.target.checked;
                         onChange(newValue);
                         if (newValue)
                             setValue('permissions', []);
                     };
-                    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "neutral.white", borderRadius: "md", px: "base", py: "4", children: (0, jsx_runtime_1.jsx)(react_1.Checkbox, { size: "md", defaultChecked: value, onChange: handleChange, children: (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "info", fontWeight: "normal", children: (0, i18next_1.t)('myProfile.email.unsubscribe') }) }) }));
-                } }), showButton && ((0, jsx_runtime_1.jsx)(react_1.Button, { variant: "secondaryFooter", type: "submit", bg: "transparent", fontWeight: "medium", onClick: handleSubmit(onSubmit), children: (0, i18next_1.t)('buttons.save').toUpperCase() }))] }));
+                    return (_jsx(Box, { bg: "neutral.white", borderRadius: "md", px: "base", py: "4", children: _jsx(Checkbox, { size: "md", defaultChecked: value, onChange: handleChange, children: _jsx(Text, { variant: "info", fontWeight: "normal", children: t('myProfile.email.unsubscribe') }) }) }));
+                } }), showButton && (_jsx(Button, { variant: "secondaryFooter", type: "submit", bg: "transparent", fontWeight: "medium", onClick: handleSubmit(onSubmit), children: t('buttons.save').toUpperCase() }))] }));
 };
-exports.EmailPermissions = EmailPermissions;

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

@@ -1,17 +1 @@
-"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("./EmailPermissions"), exports);
+export * from './EmailPermissions';

package/dist/components/myProfile/index.js

@@ -1,35 +1,19 @@
-"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("./email"), exports);
-__exportStar(require("./details"), exports);
-__exportStar(require("./payment"), exports);
-__exportStar(require("./AddCreditCard"), exports);
-__exportStar(require("./BillingAddress"), exports);
-__exportStar(require("./CancelAccount"), exports);
-__exportStar(require("./ContextButtons"), exports);
-__exportStar(require("./MyProfileBody"), exports);
-__exportStar(require("./MyProfileContent"), exports);
-__exportStar(require("./MyProfileFooter"), exports);
-__exportStar(require("./MyProfileHeader"), exports);
-__exportStar(require("./MyProfilePanel"), exports);
-__exportStar(require("./PaymentMethod"), exports);
-__exportStar(require("./PlanRadioCardContent"), exports);
-__exportStar(require("./ProfileAccountTab"), exports);
-__exportStar(require("./ProfileDetailsTab"), exports);
-__exportStar(require("./ProfilePaymentTab"), exports);
-__exportStar(require("./MyProfileReceiptCard"), exports);
-__exportStar(require("./MyProfileReceipts"), exports);
+export * from './email';
+export * from './details';
+export * from './payment';
+export * from './AddCreditCard';
+export * from './BillingAddress';
+export * from './CancelAccount';
+export * from './ContextButtons';
+export * from './MyProfileBody';
+export * from './MyProfileContent';
+export * from './MyProfileFooter';
+export * from './MyProfileHeader';
+export * from './MyProfilePanel';
+export * from './PaymentMethod';
+export * from './PlanRadioCardContent';
+export * from './ProfileAccountTab';
+export * from './ProfileDetailsTab';
+export * from './ProfilePaymentTab';
+export * from './MyProfileReceiptCard';
+export * from './MyProfileReceipts';

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

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AddCardBanner = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var AddCardBanner = function () {
-    return ((0, jsx_runtime_1.jsx)(react_1.Center, { h: "74px", bg: "violet.1", children: (0, jsx_runtime_1.jsx)(react_1.Text, { textTransform: "uppercase", color: "neutral.white", children: (0, i18next_1.t)('myProfile.payment.addCard') }) }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Center, Text } from '@chakra-ui/react';
+export const AddCardBanner = () => {
+    return (_jsx(Center, { h: "74px", bg: "violet.1", children: _jsx(Text, { textTransform: "uppercase", color: "neutral.white", children: t('myProfile.payment.addCard') }) }));
 };
-exports.AddCardBanner = AddCardBanner;

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

@@ -1,17 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CreditCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("../..");
-var CreditCard = function (_a) {
-    var defaultIndex = _a.defaultIndex, brand = _a.brand, children = _a.children, cardNumber = _a.cardNumber, hasError = _a.hasError, onClick = _a.onClick, _b = _a.showEdition, showEdition = _b === void 0 ? false : _b;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconButton, Accordion, AccordionItem, AccordionButton, AccordionPanel, Box, } from '@chakra-ui/react';
+import { CreditCardButton, TrashIcon } from '../..';
+export const CreditCard = ({ defaultIndex, brand, children, cardNumber, hasError, onClick, showEdition = false, }) => {
     if (!showEdition)
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "start", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { bg: "neutral.white", boxShadow: "md", w: "100%", children: (0, jsx_runtime_1.jsx)(components_1.CreditCardButton, { brand: brand, cardNumber: cardNumber, hasError: hasError }) }), !!onClick && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { mt: "3rem", transform: "translateY(-50%)", w: "2.5rem", h: "2.5rem", "aria-label": "Delete credit card", variant: "iconOutlined", icon: (0, jsx_runtime_1.jsx)(components_1.TrashIcon, {}), onClick: onClick }))] }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "base", align: "start", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Accordion, { flex: "1", defaultIndex: defaultIndex, allowMultiple: true, boxShadow: "md", children: (0, jsx_runtime_1.jsxs)(react_1.AccordionItem, { border: "none", children: [(0, jsx_runtime_1.jsx)(react_1.AccordionButton, { w: "100%", p: "0", bg: "neutral.white", transition: "all .2s ease-in-out", _hover: {
+        return (_jsxs(Flex, { gap: "base", align: "start", justify: "space-between", children: [_jsx(Box, { bg: "neutral.white", boxShadow: "md", w: "100%", children: _jsx(CreditCardButton, { brand, cardNumber, hasError }) }), !!onClick && (_jsx(IconButton, { mt: "3rem", transform: "translateY(-50%)", w: "2.5rem", h: "2.5rem", "aria-label": "Delete credit card", variant: "iconOutlined", icon: _jsx(TrashIcon, {}), onClick: onClick }))] }));
+    return (_jsxs(Flex, { gap: "base", align: "start", justify: "space-between", children: [_jsx(Accordion, { flex: "1", defaultIndex: defaultIndex, allowMultiple: true, boxShadow: "md", children: _jsxs(AccordionItem, { border: "none", children: [_jsx(AccordionButton, { w: "100%", p: "0", bg: "neutral.white", transition: "all .2s ease-in-out", _hover: {
                                 boxShadow: 'lg',
                             }, _focus: {
                                 outline: 'none',
-                            }, children: (0, jsx_runtime_1.jsx)(components_1.CreditCardButton, { brand: brand, cardNumber: cardNumber, hasError: hasError }) }), (0, jsx_runtime_1.jsx)(react_1.AccordionPanel, { p: "0", bg: "neutral.white", children: children })] }) }), !!onClick && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { mt: "3rem", transform: "translateY(-50%)", w: "2.5rem", h: "2.5rem", "aria-label": "Delete credit card", variant: "iconOutlined", icon: (0, jsx_runtime_1.jsx)(components_1.TrashIcon, {}), onClick: onClick }))] }));
+                            }, children: _jsx(CreditCardButton, { brand, cardNumber, hasError }) }), _jsx(AccordionPanel, { p: "0", bg: "neutral.white", children: children })] }) }), !!onClick && (_jsx(IconButton, { mt: "3rem", transform: "translateY(-50%)", w: "2.5rem", h: "2.5rem", "aria-label": "Delete credit card", variant: "iconOutlined", icon: _jsx(TrashIcon, {}), onClick: onClick }))] }));
 };
-exports.CreditCard = CreditCard;