@newskit-render/my-account 0.138.1 → 0.141.0

package/dist/esm/Components/Sections/Form/Payment/Stripe/index.js

@@ -0,0 +1,242 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useRef, useState } from 'react';
+import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js/pure';
+import { TextInput, styled, Block, withTheme, getMediaQueryFromTheme, } from 'newskit';
+import { ButtonGroup, } from '@newskit-render/shared-components';
+import onFormSubmit from '../../onFormSubmit';
+import { useRouter } from 'next/router';
+import { useAccountContext, } from '../../../../../context';
+import { ContextName } from '../../../../../context/types';
+var PaymentElements = function (_a) {
+    var _b;
+    var buttonGroupProps = _a.buttonGroupProps, theme = _a.theme;
+    var contextName = ContextName.payment;
+    var stripe = useStripe();
+    var elements = useElements();
+    var router = useRouter();
+    var nameInput = useRef(null);
+    var _c = useState(false), hasError = _c[0], setHasError = _c[1];
+    var cardNumberRef = useRef(null);
+    var cardExpiryRef = useRef(null);
+    var cardCVCRef = useRef(null);
+    var expiryCaption = 'Date format: MM/YY';
+    var cvcCaption = 'Last 3 digits on the back or 4 on the front of your card';
+    var _d = useAccountContext(contextName), handleError = _d.handleError, handleSuccess = _d.handleSuccess, handleLoading = _d.handleLoading, baseUrl = _d.baseUrl, errorMessages = _d.errorMessages, genericErrorMessage = _d.genericErrorMessage;
+    var handleChangeElement = function (event) {
+        switch (event.elementType) {
+            case 'cardNumber':
+                return handleTextChange(cardNumberRef, event, '');
+            case 'cardExpiry':
+                return handleTextChange(cardExpiryRef, event, expiryCaption);
+            case 'cardCvc':
+                return handleTextChange(cardCVCRef, event, cvcCaption);
+        }
+    };
+    var handleTextChange = function (ref, event, successMessage) {
+        if (event.error && ref.current) {
+            ref.current.textContent = event.error.message;
+            ref.current.style.color = theme.colors['red070'];
+        }
+        else if (ref.current) {
+            ref.current.textContent = successMessage;
+            ref.current.style.color = theme.colors['neutral080'];
+        }
+    };
+    var Caption = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: 8px;\n    width: 100%;\n  "], ["\n    margin-bottom: 8px;\n    width: 100%;\n  "])));
+    var Subscript = styled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0px;\n    padding: 0px 5px;\n    margin-top: 6px;\n  "], ["\n    margin: 0px;\n    padding: 0px 5px;\n    margin-top: 6px;\n  "])));
+    var StyledInputWrapper = styled(Block)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 50%;\n    :last-of-type {\n      margin-left: 16px;\n    }\n  "], ["\n    width: 50%;\n    :last-of-type {\n      margin-left: 16px;\n    }\n  "])));
+    var StyledNumberWrapper = styled(Block)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    min-height: 80px;\n  "], ["\n    min-height: 80px;\n  "])));
+    var StyledInputFlex = styled(Block)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: flex;\n    margin-bottom: 32px;\n  "], ["\n    display: flex;\n    margin-bottom: 32px;\n  "])));
+    var PaymentWrapper = styled(Block)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding-bottom: 224px;\n    ", " {\n      padding-bottom: 0;\n    }\n  "], ["\n    padding-bottom: 224px;\n    ", " {\n      padding-bottom: 0;\n    }\n  "])), getMediaQueryFromTheme('sm'));
+    var handleFormError = function () {
+        setHasError(true);
+        if (handleError)
+            handleError('payment', errorMessages, genericErrorMessage);
+    };
+    var onSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var cardElement, _a, error, paymentMethod, result, parsedResult, confirmedPayment, error_1;
+        var _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!stripe || !elements) {
+                        // Stripe.js has not loaded yet. Make sure to disable
+                        // form submission until Stripe.js has loaded.
+                        return [2 /*return*/];
+                    }
+                    cardElement = elements.getElement(CardNumberElement);
+                    return [4 /*yield*/, stripe.createPaymentMethod({
+                            type: 'card',
+                            card: cardElement,
+                            billing_details: {
+                                name: (_b = nameInput.current) === null || _b === void 0 ? void 0 : _b.value,
+                            },
+                        })];
+                case 1:
+                    _a = _g.sent(), error = _a.error, paymentMethod = _a.paymentMethod;
+                    if (!error) return [3 /*break*/, 2];
+                    console.error('[error]', error);
+                    setHasError(true);
+                    if (handleError)
+                        handleError('payment', errorMessages, genericErrorMessage, error.message);
+                    return [3 /*break*/, 13];
+                case 2:
+                    setHasError(false);
+                    if (handleLoading)
+                        handleLoading('payment', errorMessages, genericErrorMessage);
+                    return [4 /*yield*/, onFormSubmit({ paymentMethodId: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, moto: false }, 'paymentMethodId', undefined, handleFormError, handleSuccess, baseUrl)];
+                case 3:
+                    result = _g.sent();
+                    _g.label = 4;
+                case 4:
+                    _g.trys.push([4, 12, , 13]);
+                    return [4 /*yield*/, result.json()];
+                case 5:
+                    parsedResult = _g.sent();
+                    if (!((_d = (_c = parsedResult === null || parsedResult === void 0 ? void 0 : parsedResult.data) === null || _c === void 0 ? void 0 : _c.stripeUpdatePaymentMethod) === null || _d === void 0 ? void 0 : _d.clientSecret)) return [3 /*break*/, 10];
+                    return [4 /*yield*/, stripe.confirmCardSetup(parsedResult.data.stripeUpdatePaymentMethod.clientSecret, {
+                            payment_method: {
+                                card: cardElement,
+                                billing_details: {
+                                    name: (_e = nameInput.current) === null || _e === void 0 ? void 0 : _e.value,
+                                },
+                            },
+                        })];
+                case 6:
+                    confirmedPayment = _g.sent();
+                    if (!(((_f = confirmedPayment === null || confirmedPayment === void 0 ? void 0 : confirmedPayment.setupIntent) === null || _f === void 0 ? void 0 : _f.status) === 'succeeded')) return [3 /*break*/, 8];
+                    return [4 /*yield*/, onFormSubmit({
+                            paymentMethodId: confirmedPayment.setupIntent.payment_method,
+                            moto: false,
+                        }, 'paymentMethodId', undefined, handleFormError, handleSuccess, baseUrl)];
+                case 7:
+                    _g.sent();
+                    if (handleSuccess)
+                        handleSuccess();
+                    if (baseUrl)
+                        router.push(baseUrl + "/subscription-and-billing?success=payment");
+                    return [3 /*break*/, 9];
+                case 8:
+                    if (confirmedPayment === null || confirmedPayment === void 0 ? void 0 : confirmedPayment.error) {
+                        setHasError(true);
+                        if (handleError)
+                            handleError('payment', errorMessages, genericErrorMessage, confirmedPayment === null || confirmedPayment === void 0 ? void 0 : confirmedPayment.error.message);
+                    }
+                    _g.label = 9;
+                case 9: return [3 /*break*/, 11];
+                case 10:
+                    if (handleSuccess)
+                        handleSuccess();
+                    if (baseUrl)
+                        router.push(baseUrl + "/subscription-and-billing?success=payment");
+                    _g.label = 11;
+                case 11: return [3 /*break*/, 13];
+                case 12:
+                    error_1 = _g.sent();
+                    console.error(error_1);
+                    setHasError(true);
+                    if (handleError)
+                        handleError('payment', { error: error_1.message });
+                    return [3 /*break*/, 13];
+                case 13: return [2 /*return*/];
+            }
+        });
+    }); };
+    //Remove font family from typography, because it breaks the styling
+    var typographyPreset = Object.assign({}, (_b = theme.typographyPresets) === null || _b === void 0 ? void 0 : _b['utilityBody020']);
+    delete typographyPreset.fontFamily;
+    return (React.createElement(PaymentWrapper, null,
+        React.createElement("style", null, "\n        .stripe-input{\n          padding: 16px;\n          font-family: \"Noto Sans\",sans-serif;\n        }\n        .stripe-input:hover{\n          background-color: #fafafa;\n        }\n        .stripe-input.StripeElement--focus {\n          outline: -webkit-focus-ring-color auto 1px;\n\n        }\n        "),
+        React.createElement(TextInput, { ref: nameInput, label: "Name on card", name: "name" }),
+        React.createElement(Caption, null, "Card number"),
+        React.createElement(StyledNumberWrapper, null,
+            React.createElement(CardNumberElement, { options: {
+                    showIcon: true,
+                }, className: 'stripe-input', onChange: handleChangeElement }),
+            React.createElement(Subscript, { ref: cardNumberRef }, " ")),
+        React.createElement(StyledInputFlex, null,
+            React.createElement(StyledInputWrapper, null,
+                React.createElement(Caption, null, "Expiry date"),
+                React.createElement(CardExpiryElement, { className: 'stripe-input', onChange: handleChangeElement }),
+                React.createElement(Subscript, { ref: cardExpiryRef }, expiryCaption)),
+            React.createElement(StyledInputWrapper, null,
+                React.createElement(Caption, null, "Security code"),
+                React.createElement(CardCvcElement, { className: 'stripe-input', onChange: handleChangeElement }),
+                React.createElement(Subscript, { ref: cardCVCRef }, cvcCaption))),
+        React.createElement(ButtonGroup, __assign({}, buttonGroupProps, { primaryButton: __assign(__assign({}, buttonGroupProps === null || buttonGroupProps === void 0 ? void 0 : buttonGroupProps.primaryButton), { onClick: onSubmit }), hasError: hasError }))));
+};
+var Payment = function (_a) {
+    var theme = _a.theme, formProps = __rest(_a, ["theme"]);
+    if (globalThis && !globalThis.stripeMemo) {
+        loadStripe.setLoadParameters({ advancedFraudSignals: false });
+        globalThis.stripeMemo = loadStripe(process.env.STRIPE_KEY || 'pk_test_NF8QJSH780UFA7tLvSrFdU36002fCTkfzI');
+    }
+    return (React.createElement(Elements, { stripe: globalThis.stripeMemo },
+        React.createElement(PaymentElements, __assign({}, formProps, { theme: theme }))));
+};
+export default withTheme(Payment);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Sections/Form/Payment/Stripe/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/Components/Sections/Form/Payment/Stripe/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Components/Sections/Form/Payment/Zuora/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ZuoraPaymentData, ZuoraCustomErrorMessages } from './types';
+export declare const addZuoraScript: (onLoadCallback: () => void) => void;
+declare const Zuora: React.FC;
+export { ZuoraPaymentData, ZuoraCustomErrorMessages };
+export default Zuora;

package/dist/esm/Components/Sections/Form/Payment/Zuora/index.js

@@ -0,0 +1,115 @@
+import { useAccountContext, } from '../../../../../context';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { ContextName } from '../../../../../context/types';
+export var addZuoraScript = function (onLoadCallback) {
+    var script = document.createElement('script');
+    script.src =
+        'https://static.zuora.com/Resources/libs/hosted/1.3.1/zuora-min.js';
+    script.async = true;
+    script.onload = function () { return onLoadCallback(); };
+    document.body.appendChild(script);
+};
+var Zuora = function () {
+    var contextName = ContextName.payment;
+    var _a = useAccountContext(contextName), paymentData = _a.paymentData, handleError = _a.handleError, baseUrl = _a.baseUrl, errorMessages = _a.errorMessages, zuoraCustomErrorMessages = _a.zuoraCustomErrorMessages;
+    var _b = paymentData, signature = _b.signature, token = _b.token, tenantId = _b.tenantId, key = _b.key, pageId = _b.pageId, url = _b.url;
+    var _c = zuoraCustomErrorMessages, creditCardHolderName = _c.creditCardHolderName, creditCardNumber = _c.creditCardNumber, cardSecurityCode = _c.cardSecurityCode, creditCardExpiration = _c.creditCardExpiration, creditCardPostalCode = _c.creditCardPostalCode, creditCardCountry = _c.creditCardCountry;
+    var router = useRouter();
+    var hostedPageCallback = function (response) {
+        if (response.success) {
+            // const { refId } = response
+            // TODO: Add request to MAIN
+            router.push(baseUrl + "/subscription-and-billing?success=payment%20method");
+        }
+        else if (!response.success) {
+            handleError && handleError('paymentFailure', errorMessages);
+        }
+        else {
+            handleError && handleError('payment', errorMessages);
+        }
+    };
+    var errorMessageCallback = function (key, code, message, rawGatewayInfo) {
+        var errorMessage = message;
+        if (key != 'error') {
+            switch (key) {
+                case 'creditCardHolderName':
+                    if (code == '001') {
+                        errorMessage = creditCardHolderName;
+                    }
+                    break;
+                case 'creditCardNumber':
+                    if (code == '001') {
+                        errorMessage = creditCardNumber.one;
+                    }
+                    if (code == '002') {
+                        errorMessage = creditCardNumber.two;
+                    }
+                    if (code == '003') {
+                        errorMessage = creditCardNumber.three;
+                    }
+                    break;
+                case 'cardSecurityCode':
+                    if (code == '001') {
+                        errorMessage = cardSecurityCode.one;
+                    }
+                    if (code == '004') {
+                        errorMessage = cardSecurityCode.four;
+                    }
+                    break;
+                case 'creditCardExpirationYear':
+                case 'creditCardExpirationMonth':
+                    if (code == '001') {
+                        errorMessage = creditCardExpiration;
+                    }
+                    break;
+                case 'creditCardPostalCode':
+                    if (code == '001') {
+                        errorMessage = creditCardPostalCode;
+                    }
+                    break;
+                case 'creditCardCountry':
+                    if (code == '001') {
+                        errorMessage = creditCardCountry;
+                    }
+                    break;
+            }
+        }
+        else {
+            if (code == 'unknown' && rawGatewayInfo) {
+                // customize error message based on the rawGatewayInfo
+                errorMessage = rawGatewayInfo.responseCode + ": " + rawGatewayInfo.responseMessage;
+            }
+            else {
+                errorMessage =
+                    'Validation failed on server-side, Please check your input values.';
+            }
+        }
+        ;
+        window.Z.sendErrorMessageToHpm(key, errorMessage);
+    };
+    var loadHostedPage = function () {
+        ;
+        window.Z.renderWithErrorHandler({
+            tenantId: tenantId,
+            token: token,
+            signature: signature,
+            key: key,
+            style: 'inline',
+            submitEnabled: 'true',
+            url: url,
+            id: pageId,
+        }, {
+            creditCardCountry: 'GBR',
+        }, hostedPageCallback, errorMessageCallback);
+    };
+    useEffect(function () {
+        if (typeof window !== 'undefined') {
+            addZuoraScript(loadHostedPage);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { id: "zuora_payment" })));
+};
+export default Zuora;
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Sections/Form/Payment/Zuora/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/Components/Sections/Form/Payment/Zuora/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/Components/Sections/Form/Payment/Zuora/types.d.ts

@@ -0,0 +1,23 @@
+export interface ZuoraCustomErrorMessages {
+    creditCardHolderName: string;
+    creditCardNumber: {
+        one: string;
+        two: string;
+        three: string;
+    };
+    cardSecurityCode: {
+        one: string;
+        four: string;
+    };
+    creditCardExpiration: string;
+    creditCardPostalCode: string;
+    creditCardCountry: string;
+}
+export interface ZuoraPaymentData {
+    signature: string;
+    token: string;
+    tenantId: number;
+    key: string;
+    pageId: string;
+    url: string;
+}

package/dist/esm/Components/Sections/Form/Payment/Zuora/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/Components/Sections/Form/Payment/Zuora/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/Components/Sections/Form/Payment/Zuora/types.ts"],"names":[],"mappings":""}

package/dist/esm/Components/Sections/Form/Payment/index.d.ts

@@ -0,0 +1,4 @@
+import Stripe from './Stripe';
+import Zuora, { ZuoraPaymentData, ZuoraCustomErrorMessages } from './Zuora';
+import { PaymentProvider } from './types';
+export { Stripe, Zuora, ZuoraPaymentData, ZuoraCustomErrorMessages, PaymentProvider, };

package/dist/esm/Components/Sections/Form/Payment/index.js

@@ -0,0 +1,5 @@
+import Stripe from './Stripe';
+import Zuora from './Zuora';
+import { PaymentProvider } from './types';
+export { Stripe, Zuora, PaymentProvider, };
+//# sourceMappingURL=index.js.map

package/dist/esm/Components/Sections/Form/Payment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Payment/index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,KAAqD,MAAM,SAAS,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,EACL,MAAM,EACN,KAAK,EAGL,eAAe,GAChB,CAAA"}

package/dist/esm/Components/Sections/Form/Payment/types.d.ts

@@ -0,0 +1,13 @@
+export declare enum PaymentTypes {
+    'visa' = "visa",
+    'mastercard' = "mastercard",
+    'discover' = "discover",
+    'diners' = "diners",
+    'americanexpress' = "amex",
+    'unionpay' = "unionpay",
+    'jcb' = "jcb"
+}
+export declare enum PaymentProvider {
+    Zuora = "Zuora",
+    Stripe = "Stripe"
+}

package/dist/esm/Components/Sections/Form/Payment/types.js

@@ -0,0 +1,16 @@
+export var PaymentTypes;
+(function (PaymentTypes) {
+    PaymentTypes["visa"] = "visa";
+    PaymentTypes["mastercard"] = "mastercard";
+    PaymentTypes["discover"] = "discover";
+    PaymentTypes["diners"] = "diners";
+    PaymentTypes["americanexpress"] = "amex";
+    PaymentTypes["unionpay"] = "unionpay";
+    PaymentTypes["jcb"] = "jcb";
+})(PaymentTypes || (PaymentTypes = {}));
+export var PaymentProvider;
+(function (PaymentProvider) {
+    PaymentProvider["Zuora"] = "Zuora";
+    PaymentProvider["Stripe"] = "Stripe";
+})(PaymentProvider || (PaymentProvider = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/Components/Sections/Form/Payment/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/Components/Sections/Form/Payment/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAQX;AARD,WAAY,YAAY;IACtB,6BAAe,CAAA;IACf,yCAA2B,CAAA;IAC3B,qCAAuB,CAAA;IACvB,iCAAmB,CAAA;IACnB,wCAA0B,CAAA;IAC1B,qCAAuB,CAAA;IACvB,2BAAa,CAAA;AACf,CAAC,EARW,YAAY,KAAZ,YAAY,QAQvB;AAED,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;AACnB,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B"}

package/dist/esm/Components/Sections/Form/Phone/Phone.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Theme } from 'newskit';
+import { PhoneProps } from './types';
+export declare const StyledLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const InputIconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledAssistiveText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & import("newskit").TextBlockProps & React.ClassAttributes<HTMLParagraphElement> & React.HTMLAttributes<HTMLParagraphElement> & {
+    children?: React.ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const _default: React.ComponentType<PhoneProps & {
+    theme?: Theme | undefined;
+}>;
+export default _default;