@newskit-render/checkout 0.0.0-e16014a0

package/README.md

@@ -0,0 +1,11 @@
+# @newskit-render/checkout
+
+Adding checkout to core.
+
+## How to use:
+
+Describe usage
+
+## Initializing Options
+
+.

package/dist/cjs/Components/Icons/Paypal/index.d.ts

@@ -0,0 +1 @@
+export declare const IconPayPal: import("newskit").NewsKitIcon;

package/dist/cjs/Components/Icons/Paypal/index.js

@@ -0,0 +1,25 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconPayPal = void 0;
+var react_1 = __importDefault(require("react"));
+var newskit_1 = require("newskit");
+exports.IconPayPal = (0, newskit_1.customToNewsKitIcon)('IconPayPal', function (props) { return (react_1.default.createElement(newskit_1.Svg, __assign({}, props, { viewBox: "0 0 24 25" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.69286 20.2717L9.95867 18.4004L9.36655 18.3851H6.53906L8.50406 4.57582C8.51019 4.534 8.52998 4.49518 8.55888 4.46757C8.58792 4.43995 8.62494 4.4248 8.66366 4.4248H13.4312C15.0141 4.4248 16.1064 4.78979 16.6766 5.51029C16.9439 5.84829 17.1142 6.20159 17.1967 6.59025C17.2831 6.99815 17.2845 7.48542 17.2002 8.07984L17.1941 8.12308V8.504L17.4615 8.6719C17.6866 8.80429 17.8655 8.95577 18.0028 9.12919C18.2314 9.41827 18.3793 9.78562 18.4418 10.221C18.5065 10.6688 18.4851 11.2018 18.3793 11.8053C18.2573 12.4992 18.0601 13.1038 17.7938 13.5983C17.5489 14.054 17.2368 14.4321 16.8662 14.725C16.5124 15.0033 16.0921 15.2146 15.6169 15.3498C15.1563 15.4827 14.6313 15.5498 14.0554 15.5498H13.6844C13.4191 15.5498 13.1614 15.6557 12.9591 15.8455C12.7563 16.0393 12.6221 16.304 12.581 16.5936L12.5529 16.7621L12.0833 20.0605L12.0621 20.1816C12.0564 20.2199 12.0467 20.239 12.0324 20.2519C12.0198 20.2638 12.0015 20.2717 11.9837 20.2717H9.69286Z", fill: "#28356A" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.7148 8.16724C17.7007 8.26807 17.6843 8.37111 17.6661 8.47699C17.0374 12.0549 14.8863 13.2909 12.1391 13.2909H10.7403C10.4043 13.2909 10.1212 13.5612 10.0689 13.9285L9.14991 20.3895C9.11588 20.6308 9.28359 20.8481 9.50313 20.8481H11.9841C12.2778 20.8481 12.5274 20.6115 12.5736 20.2904L12.598 20.1508L13.0651 16.8653L13.0951 16.6851C13.1408 16.3629 13.391 16.1262 13.6847 16.1262H14.0557C16.4594 16.1262 18.3411 15.0446 18.8911 11.9146C19.1207 10.6071 19.0018 9.51529 18.3939 8.74745C18.21 8.51597 17.9817 8.32377 17.7148 8.16724Z", fill: "#298FC2" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.0566 7.87657C16.9605 7.84549 16.8614 7.8174 16.7598 7.79199C16.6576 7.76722 16.5529 7.74529 16.4451 7.72603C16.068 7.6585 15.6547 7.62646 15.2121 7.62646H11.4753C11.3832 7.62646 11.2957 7.6495 11.2176 7.69116C11.0452 7.783 10.9172 7.96383 10.8861 8.18522L10.0911 13.7658L10.0684 13.9285C10.1206 13.5612 10.4038 13.2909 10.7398 13.2909H12.1386C14.8858 13.2909 17.0368 12.0542 17.6656 8.47699C17.6843 8.37111 17.7001 8.26806 17.7142 8.16723C17.5552 8.07366 17.3829 7.99366 17.1974 7.92549C17.1516 7.9086 17.1043 7.89235 17.0566 7.87657Z", fill: "#22284F" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.8866 8.18521C10.9176 7.96383 11.0456 7.78299 11.218 7.69178C11.2967 7.64997 11.3836 7.62693 11.4757 7.62693H15.2125C15.6551 7.62693 16.0684 7.65912 16.4456 7.72666C16.5533 7.74575 16.658 7.76784 16.7602 7.79262C16.8619 7.81786 16.9609 7.84611 17.057 7.87704C17.1047 7.89282 17.152 7.90923 17.1983 7.92548C17.3838 7.99365 17.5562 8.07428 17.7152 8.16723C17.9023 6.84505 17.7137 5.94482 17.0687 5.12964C16.3576 4.2321 15.0742 3.84802 13.432 3.84802H8.66428C8.32886 3.84802 8.04269 4.11833 7.99087 4.48631L6.00508 18.4376C5.96593 18.7135 6.15799 18.9626 6.40913 18.9626H9.3525L10.8866 8.18521Z", fill: "#28356A" }))); });
+//# sourceMappingURL=index.js.map

package/dist/cjs/Components/Icons/Paypal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/Components/Icons/Paypal/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,mCAAkD;AAErC,QAAA,UAAU,GAAG,IAAA,6BAAmB,EAAC,YAAY,EAAE,UAAC,KAAK,IAAK,OAAA,CACrE,8BAAC,aAAG,eAAK,KAAK,IAAE,OAAO,EAAC,WAAW;IACjC,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,66BAA66B,EAC/6B,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,uhBAAuhB,EACzhB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,4hBAA4hB,EAC9hB,IAAI,EAAC,SAAS,GACd;IACF,wCACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,olBAAolB,EACtlB,IAAI,EAAC,SAAS,GACd,CACE,CACP,EA3BsE,CA2BtE,CAAC,CAAA"}

package/dist/cjs/Components/Templates/AccountCreationRender.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AccountCreationRender: React.FC<{
+    validation?: Record<string, any>;
+}>;

package/dist/cjs/Components/Templates/AccountCreationRender.js

@@ -0,0 +1,110 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountCreationRender = void 0;
+var react_1 = __importStar(require("react"));
+var yup_1 = require("@hookform/resolvers/yup");
+var newskit_1 = require("newskit");
+var shared_components_1 = require("@newskit-render/shared-components");
+var Title_1 = __importDefault(require("./AccountCreationTemplates/Title"));
+var DateOfBirth_1 = __importDefault(require("./AccountCreationTemplates/DateOfBirth"));
+var RenderAgreementCheckboxes_1 = __importDefault(require("./AccountCreationTemplates/RenderAgreementCheckboxes"));
+var context_1 = require("../../context");
+var constants_1 = require("../../constants");
+var router_1 = require("next/router");
+var AccountCreationRender = function (_a) {
+    var _b = _a.validation, validation = _b === void 0 ? {} : _b;
+    var _c = (0, react_1.useState)(false), tcAccepted = _c[0], setTCAccepted = _c[1];
+    var _d = (0, react_1.useState)(false), opAccepted = _d[0], setOPAccepted = _d[1];
+    var _e = (0, react_1.useState)(false), loading = _e[0], setLoading = _e[1];
+    var bp = (0, newskit_1.useBreakpointKey)();
+    var _f = (0, context_1.useCheckoutContext)(), header = _f.header, accountCreationPage = _f.accountCreationPage;
+    var router = (0, router_1.useRouter)();
+    var _g = (0, react_1.useState)('xs'), breakpoint = _g[0], setBreakpoint = _g[1];
+    (0, react_1.useEffect)(function () {
+        setBreakpoint(bp);
+    }, [bp]);
+    var handleTCAccept = function (selected) {
+        setTCAccepted(selected);
+    };
+    var handleOPAccept = function (selected) {
+        setOPAccepted(selected);
+    };
+    var handleSubmit = function () {
+        setLoading(true);
+        router.push('/checkout/payment-details');
+    };
+    var pageContext = accountCreationPage || constants_1.defaultAccountCreationPage.accountCreationPage;
+    var _h = (0, react_1.useState)(pageContext.modalOverrides.open || false), showModal = _h[0], setShowModal = _h[1];
+    var handleModal = function () {
+        setShowModal(!showModal);
+    };
+    var dismissModal = (accountCreationPage === null || accountCreationPage === void 0 ? void 0 : accountCreationPage.modalOverrides.onDismiss) || handleModal;
+    var schema = validation['accountCreationPage'];
+    var resolver = (0, yup_1.yupResolver)(schema);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
+        react_1.default.createElement(shared_components_1.Modal, { closePosition: (accountCreationPage === null || accountCreationPage === void 0 ? void 0 : accountCreationPage.modalOverrides.closePosition) || 'right', open: showModal, onDismiss: dismissModal, overrides: __assign({}, pageContext.modalOverrides.overrides), introduction: __assign({}, pageContext.modalOverrides.introduction) }),
+        react_1.default.createElement(newskit_1.Form, { "data-testid": "accountCreationForm", onSubmit: handleSubmit, resolver: resolver, validationMode: "onBlur", reValidationMode: "onBlur" },
+            react_1.default.createElement(Title_1.default, { name: "title", options: pageContext.userData.titleOptions, placeholder: '', label: "Title" }),
+            react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space050' },
+                react_1.default.createElement(newskit_1.FormInput, { name: "firstName" },
+                    react_1.default.createElement(newskit_1.FormInputLabel, { overrides: {
+                            typographyPreset: 'utilityLabel020',
+                        } }, "First name"),
+                    react_1.default.createElement(newskit_1.FormInputTextField, { "data-testid": "firstName", name: "firstName", overrides: {
+                            width: breakpoint === 'xs' ? '100%' : '45%',
+                        } }))),
+            react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space050' },
+                react_1.default.createElement(newskit_1.FormInput, { name: "lastName" },
+                    react_1.default.createElement(newskit_1.FormInputLabel, { overrides: {
+                            typographyPreset: 'utilityLabel020',
+                        } }, "Last name"),
+                    react_1.default.createElement(newskit_1.FormInputTextField, { "data-testid": "lastName", name: "lastName", overrides: {
+                            width: breakpoint === 'xs' ? '100%' : '45%',
+                        } }))),
+            react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space080' },
+                react_1.default.createElement(DateOfBirth_1.default, null)),
+            react_1.default.createElement(RenderAgreementCheckboxes_1.default, { tcAccepted: tcAccepted, opAccepted: opAccepted, handleModal: handleModal, handleTCAccept: handleTCAccept, handleOPAccept: handleOPAccept }),
+            react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space070' },
+                react_1.default.createElement(shared_components_1.ButtonGroup, __assign({ loading: loading }, pageContext.buttonGroupProps))),
+            react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space090' }))));
+};
+exports.AccountCreationRender = AccountCreationRender;
+//# sourceMappingURL=AccountCreationRender.js.map

package/dist/cjs/Components/Templates/AccountCreationRender.js.map

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

package/dist/cjs/Components/Templates/AccountCreationTemplates/DateOfBirth.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DateOfBirth: () => JSX.Element;
+export default DateOfBirth;

package/dist/cjs/Components/Templates/AccountCreationTemplates/DateOfBirth.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var newskit_1 = require("newskit");
+var DOBWrapper = (0, newskit_1.styled)(newskit_1.Stack)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    max-width: 82%;\n  }\n"], ["\n  ", " {\n    max-width: 82%;\n  }\n"])), (0, newskit_1.getMediaQueryFromTheme)('sm'));
+var DateOfBirth = function () {
+    return (react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space050' },
+        react_1.default.createElement(newskit_1.Label, { size: 'large', overrides: {
+                typographyPreset: {
+                    xs: 'utilityLabel020',
+                },
+            } }, "Date of birth"),
+        react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space010' }),
+        react_1.default.createElement(DOBWrapper, { spaceInline: { sm: 'space040', xs: 'space020' }, wrap: "nowrap", flow: "horizontal-top", height: 'auto', stackDistribution: 'flex-start' },
+            react_1.default.createElement(newskit_1.Block, null,
+                react_1.default.createElement(newskit_1.FormInput, { name: "dd", "data-testid": "testid", rules: {
+                        required: 'Day is required',
+                    } },
+                    react_1.default.createElement(newskit_1.FormInputTextField, { "data-testid": "dd", name: "dd" }),
+                    react_1.default.createElement(newskit_1.FormInputAssistiveText, { overrides: { typographyPreset: 'utilityLabel020' } }, "DD"))),
+            react_1.default.createElement(newskit_1.Block, null,
+                react_1.default.createElement(newskit_1.FormInput, { name: "mm", rules: {
+                        required: 'Month is required',
+                    } },
+                    react_1.default.createElement(newskit_1.FormInputTextField, { "data-testid": "mm", name: "mm" }),
+                    react_1.default.createElement(newskit_1.FormInputAssistiveText, { overrides: { typographyPreset: 'utilityLabel020' } }, "MM"))),
+            react_1.default.createElement(newskit_1.Block, null,
+                react_1.default.createElement(newskit_1.FormInput, { name: "yyyy", rules: {
+                        required: 'Year is required',
+                    } },
+                    react_1.default.createElement(newskit_1.FormInputTextField, { "data-testid": "yyyy", name: "yyyy" }),
+                    react_1.default.createElement(newskit_1.FormInputAssistiveText, { overrides: { typographyPreset: 'utilityLabel020' } }, "YYYY"))))));
+};
+exports.default = DateOfBirth;
+var templateObject_1;
+//# sourceMappingURL=DateOfBirth.js.map

package/dist/cjs/Components/Templates/AccountCreationTemplates/DateOfBirth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateOfBirth.js","sourceRoot":"","sources":["../../../../../src/Components/Templates/AccountCreationTemplates/DateOfBirth.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,gDAAyB;AACzB,mCAUgB;AAChB,IAAM,UAAU,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,2GAAA,MAC5B,EAA4B,gCAG/B,KAHG,IAAA,gCAAsB,EAAC,IAAI,CAAC,CAG/B,CAAA;AAED,IAAM,WAAW,GAAG;IAClB,OAAO,CACL,8BAAC,eAAK,IAAC,cAAc,EAAE,UAAU;QAC/B,8BAAC,eAAK,IACJ,IAAI,EAAE,OAAwB,EAC9B,SAAS,EAAE;gBACT,gBAAgB,EAAE;oBAChB,EAAE,EAAE,iBAAiB;iBACtB;aACF,oBAGK;QACR,8BAAC,eAAK,IAAC,cAAc,EAAE,UAAU,GAAI;QACrC,8BAAC,UAAU,IACT,WAAW,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,EAC/C,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,gBAAgB,EACrB,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,YAAY;YAE/B,8BAAC,eAAK;gBACJ,8BAAC,mBAAS,IACR,IAAI,EAAC,IAAI,iBACG,QAAQ,EACpB,KAAK,EAAE;wBACL,QAAQ,EAAE,iBAAiB;qBAC5B;oBAED,8BAAC,4BAAkB,mBAAa,IAAI,EAAC,IAAI,EAAC,IAAI,GAAG;oBACjD,8BAAC,gCAAsB,IACrB,SAAS,EAAE,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,SAG3B,CACf,CACN;YACR,8BAAC,eAAK;gBACJ,8BAAC,mBAAS,IACR,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;wBACL,QAAQ,EAAE,mBAAmB;qBAC9B;oBAED,8BAAC,4BAAkB,mBAAa,IAAI,EAAC,IAAI,EAAC,IAAI,GAAG;oBACjD,8BAAC,gCAAsB,IACrB,SAAS,EAAE,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,SAG3B,CACf,CACN;YACR,8BAAC,eAAK;gBACJ,8BAAC,mBAAS,IACR,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;wBACL,QAAQ,EAAE,kBAAkB;qBAC7B;oBAED,8BAAC,4BAAkB,mBAAa,MAAM,EAAC,IAAI,EAAC,MAAM,GAAG;oBACrD,8BAAC,gCAAsB,IACrB,SAAS,EAAE,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,WAG3B,CACf,CACN,CACG,CACP,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/dist/cjs/Components/Templates/AccountCreationTemplates/RenderAgreementCheckboxes.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const RenderAgreementCheckboxes: ({ tcAccepted, handleModal, handleTCAccept, opAccepted, handleOPAccept, }: {
+    tcAccepted?: boolean | undefined;
+    handleModal: (x: boolean) => void;
+    handleTCAccept: (x: boolean) => void;
+    opAccepted: boolean;
+    handleOPAccept: (x: boolean) => void;
+}) => JSX.Element;
+export default RenderAgreementCheckboxes;

package/dist/cjs/Components/Templates/AccountCreationTemplates/RenderAgreementCheckboxes.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var shared_components_1 = require("@newskit-render/shared-components");
+var newskit_1 = require("newskit");
+var react_1 = __importDefault(require("react"));
+var RenderAgreementCheckboxes = function (_a) {
+    var tcAccepted = _a.tcAccepted, handleModal = _a.handleModal, handleTCAccept = _a.handleTCAccept, opAccepted = _a.opAccepted, handleOPAccept = _a.handleOPAccept;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space050' },
+            react_1.default.createElement(newskit_1.FormInput, { name: "tc", rules: {
+                    required: 'Required field',
+                } },
+                react_1.default.createElement(newskit_1.Stack, { flow: 'horizontal-center', spaceInline: 'space010' },
+                    react_1.default.createElement(newskit_1.FormInputCheckbox, { name: "tc", "data-testid": "tcAccept", "aria-checked": tcAccepted, size: "small", label: "Agree to the ", onChange: function (e) {
+                            handleTCAccept(e.target.checked);
+                        }, defaultChecked: false, checked: tcAccepted, value: tcAccepted ? 'true' : 'false' }),
+                    react_1.default.createElement(shared_components_1.NextLink, { "data-testid": "tc-link", onClick: function (e) {
+                            e.preventDefault();
+                            handleModal(true);
+                        }, href: "#", type: "standalone" }, "Terms & conditions")),
+                react_1.default.createElement(newskit_1.FormInputAssistiveText, { validationIcon: true }, undefined))),
+        react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space110' },
+            react_1.default.createElement(newskit_1.FormInputCheckbox, { "aria-checked": opAccepted, "data-testid": "opAccept", name: "opAccepted", size: "small", checked: opAccepted, onChange: function () { return handleOPAccept(!opAccepted); }, label: react_1.default.createElement(newskit_1.TextBlock, { typographyPreset: 'utilityBody020' }, "I want to receive offers and promotions") }))));
+};
+exports.default = RenderAgreementCheckboxes;
+//# sourceMappingURL=RenderAgreementCheckboxes.js.map

package/dist/cjs/Components/Templates/AccountCreationTemplates/RenderAgreementCheckboxes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenderAgreementCheckboxes.js","sourceRoot":"","sources":["../../../../../src/Components/Templates/AccountCreationTemplates/RenderAgreementCheckboxes.tsx"],"names":[],"mappings":";;;;;AAAA,uEAA4D;AAC5D,mCAOgB;AAChB,gDAAyB;AAEzB,IAAM,yBAAyB,GAAG,UAAC,EAYlC;QAXC,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,UAAU,gBAAA,EACV,cAAc,oBAAA;IAQd,OAAO,CACL;QACE,8BAAC,eAAK,IAAC,cAAc,EAAE,UAAU;YAC/B,8BAAC,mBAAS,IACR,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;oBACL,QAAQ,EAAE,gBAAgB;iBAC3B;gBAED,8BAAC,eAAK,IAAC,IAAI,EAAE,mBAAmB,EAAE,WAAW,EAAE,UAAU;oBACvD,8BAAC,2BAAiB,IAChB,IAAI,EAAC,IAAI,iBACG,UAAU,kBACR,UAAU,EACxB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,UAAC,CAAC;4BACV,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;wBAClC,CAAC,EACD,cAAc,EAAE,KAAK,EACrB,OAAO,EAAE,UAAU,EACnB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,GACpC;oBACF,8BAAC,4BAAQ,mBACK,SAAS,EACrB,OAAO,EAAE,UAAC,CAAC;4BACT,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,WAAW,CAAC,IAAI,CAAC,CAAA;wBACnB,CAAC,EACD,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,YAAY,yBAGR,CACL;gBACR,8BAAC,gCAAsB,IAAC,cAAc,UACnC,SAAS,CACa,CACf,CACN;QAER,8BAAC,eAAK,IAAC,cAAc,EAAE,UAAU;YAC/B,8BAAC,2BAAiB,oBACF,UAAU,iBACZ,UAAU,EACtB,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,cAAM,OAAA,cAAc,CAAC,CAAC,UAAU,CAAC,EAA3B,CAA2B,EAC3C,KAAK,EACH,8BAAC,mBAAS,IAAC,gBAAgB,EAAE,gBAAgB,8CAEjC,GAEd,CACI,CACP,CACJ,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,yBAAyB,CAAA"}

package/dist/cjs/Components/Templates/AccountCreationTemplates/Title.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type UserTitle = {
+    name: string;
+    options: string[];
+    placeholder?: string;
+    label?: string;
+};
+declare const Title: ({ name, options, placeholder, label, }: UserTitle) => JSX.Element;
+export default Title;

package/dist/cjs/Components/Templates/AccountCreationTemplates/Title.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var newskit_1 = require("newskit");
+var react_1 = __importDefault(require("react"));
+var Title = function (_a) {
+    var name = _a.name, options = _a.options, placeholder = _a.placeholder, label = _a.label;
+    return (react_1.default.createElement(newskit_1.Block, { marginBlockEnd: 'space050' },
+        react_1.default.createElement(newskit_1.FormInput, { name: "title" },
+            react_1.default.createElement(newskit_1.Label, { overrides: {
+                    typographyPreset: {
+                        xs: 'utilityLabel020',
+                    },
+                } }, label),
+            react_1.default.createElement(newskit_1.FormInputSelect, { "data-testid": "selectTitle", overrides: {
+                    button: {
+                        width: {
+                            xs: '132px',
+                            sm: '128px',
+                            md: '136px',
+                        },
+                    },
+                }, placeholder: placeholder, name: name }, options.map(function (option) {
+                return (react_1.default.createElement(newskit_1.SelectOption, { value: option, key: option, "data-testid": option },
+                    react_1.default.createElement(newskit_1.TextBlock, null, option)));
+            })))));
+};
+exports.default = Title;
+//# sourceMappingURL=Title.js.map

package/dist/cjs/Components/Templates/AccountCreationTemplates/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../../../src/Components/Templates/AccountCreationTemplates/Title.tsx"],"names":[],"mappings":";;;;;AAAA,mCAOgB;AAChB,gDAAyB;AAQzB,IAAM,KAAK,GAAG,UAAC,EAKH;QAJV,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,KAAK,WAAA;IAEL,OAAO,CACL,8BAAC,eAAK,IAAC,cAAc,EAAE,UAAU;QAC/B,8BAAC,mBAAS,IAAC,IAAI,EAAC,OAAO;YACrB,8BAAC,eAAK,IACJ,SAAS,EAAE;oBACT,gBAAgB,EAAE;wBAChB,EAAE,EAAE,iBAAiB;qBACtB;iBACF,IAEA,KAAK,CACA;YACR,8BAAC,yBAAe,mBACF,aAAa,EACzB,SAAS,EAAE;oBACT,MAAM,EAAE;wBACN,KAAK,EAAE;4BACL,EAAE,EAAE,OAAO;4BACX,EAAE,EAAE,OAAO;4BACX,EAAE,EAAE,OAAO;yBACZ;qBACF;iBACF,EACD,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,IAET,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM;gBAClB,OAAO,CACL,8BAAC,sBAAY,IAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,iBAAe,MAAM;oBAC3D,8BAAC,mBAAS,QAAE,MAAM,CAAa,CAClB,CAChB,CAAA;YACH,CAAC,CAAC,CACc,CACR,CACN,CACT,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA"}

package/dist/cjs/Components/Templates/LayoutTemplate.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const LayoutTemplate: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;

package/dist/cjs/Components/Templates/LayoutTemplate.js

@@ -0,0 +1,69 @@
+"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)
+        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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutTemplate = void 0;
+var react_1 = __importDefault(require("react"));
+var shared_components_1 = require("@newskit-render/shared-components");
+var newskit_1 = require("newskit");
+var context_1 = require("../../context");
+var router_1 = require("next/router");
+var withMediaQueryProvider = function (Component) {
+    return function (_a) {
+        var props = __rest(_a, []);
+        return (react_1.default.createElement(newskit_1.MediaQueryProvider, null,
+            react_1.default.createElement(Component, __assign({}, props, { children: props.children, context: props.context }))));
+    };
+};
+var NavigationPrimaryWrapper = function (_a) {
+    var customTheme = _a.customTheme, themeDropdownObject = _a.themeDropdownObject;
+    var navigationPrimary = (0, context_1.useCheckoutContext)().navigationPrimary;
+    return (react_1.default.createElement(shared_components_1.NavigationPrimary, __assign({}, navigationPrimary, { customTheme: customTheme, themeDropdownObject: themeDropdownObject })));
+};
+var SubscriptionDetailsWrapper = function () {
+    var _a, _b, _c, _d;
+    var paymentDetailsPage = (0, context_1.useCheckoutContext)().paymentDetailsPage;
+    /* istanbul ignore next */
+    return ((_a = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails) === null || _a === void 0 ? void 0 : _a.banner) ? (react_1.default.createElement(shared_components_1.SubscriptionDetails, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails, { banner: __assign(__assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner), { buttonText: ((_b = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _b === void 0 ? void 0 : _b.buttonText) || '', message: ((_c = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _c === void 0 ? void 0 : _c.message) || '', title: ((_d = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDetails.banner) === null || _d === void 0 ? void 0 : _d.title) || '', onClick: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerControl }) }))) : null;
+};
+var FooterWrapper = function () {
+    var _a = (0, context_1.useCheckoutContext)(), footer = _a.footer, footerOverrides = _a.footerOverrides;
+    return (react_1.default.createElement(shared_components_1.NavigationFooter, { footer: footer, footerOverrides: footerOverrides }));
+};
+var BaseLayoutTemplate = function (_a) {
+    var children = _a.children, customTheme = _a.customTheme, context = _a.context, themeDropdownObject = _a.themeDropdownObject, fullWidth = _a.fullWidth;
+    var router = (0, router_1.useRouter)();
+    return (react_1.default.createElement(context_1.CheckoutContextProvider, { context: context },
+        react_1.default.createElement(shared_components_1.SEOComponent, { title: context.siteTitle || '', description: context.siteDescription || '', url: "".concat(context.url).concat(router.pathname), siteHost: context.url || context.siteHost || '', fbType: context.fbType || '', fbImageUrl: context.fbImageUrl || '' }),
+        react_1.default.createElement(newskit_1.ThemeProvider, { theme: customTheme || shared_components_1.sharedTheme },
+            react_1.default.createElement(NavigationPrimaryWrapper, { customTheme: customTheme, themeDropdownObject: themeDropdownObject }),
+            react_1.default.createElement(newskit_1.Visible, { xs: true, sm: true, md: true },
+                react_1.default.createElement(SubscriptionDetailsWrapper, null)),
+            react_1.default.createElement(shared_components_1.MainContent, { fullWidth: fullWidth }, children),
+            react_1.default.createElement(FooterWrapper, null))));
+};
+exports.LayoutTemplate = withMediaQueryProvider(BaseLayoutTemplate);
+//# sourceMappingURL=LayoutTemplate.js.map

package/dist/cjs/Components/Templates/LayoutTemplate.js.map

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

package/dist/cjs/Components/Templates/PaymentDetailsRender.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PaymentDetailsRender: React.FC;

package/dist/cjs/Components/Templates/PaymentDetailsRender.js

@@ -0,0 +1,62 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaymentDetailsRender = void 0;
+var react_1 = __importDefault(require("react"));
+var context_1 = require("../../context");
+var shared_components_1 = require("@newskit-render/shared-components");
+var newskit_1 = require("newskit");
+var ButtonGroupWrapper = newskit_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 200px;\n  ", " {\n    padding-bottom: 0;\n  }\n"], ["\n  padding-bottom: 200px;\n  ", " {\n    padding-bottom: 0;\n  }\n"])), (0, newskit_1.getMediaQueryFromTheme)('sm'));
+var StyledVisible = (0, newskit_1.styled)(newskit_1.Visible)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n"], ["\n  height: 100%;\n"])));
+var PaymentDetailsRender = function () {
+    var _a, _b, _c, _d, _e;
+    var _f = (0, context_1.useCheckoutContext)(), header = _f.header, paymentDetailsPage = _f.paymentDetailsPage, buttonGroupProps = _f.buttonGroupProps;
+    return (react_1.default.createElement(newskit_1.GridLayout, { columns: {
+            lg: '1fr 1fr',
+        }, columnGap: {
+            lg: 'space050',
+        }, overrides: {
+            paddingInline: {
+                lg: 'space050',
+            },
+        } },
+        react_1.default.createElement(newskit_1.GridLayoutItem, null,
+            react_1.default.createElement(shared_components_1.Header, __assign({}, header)),
+            ((_a = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.infoPanel) === null || _a === void 0 ? void 0 : _a.children) && (react_1.default.createElement(newskit_1.InlineMessage, { icon: paymentDetailsPage.infoPanel.icon, title: paymentDetailsPage.infoPanel.title, children: paymentDetailsPage.infoPanel.children, overrides: paymentDetailsPage.infoPanel.overrides || {} })),
+            react_1.default.createElement(newskit_1.Tabs, { distribution: "equal" },
+                react_1.default.createElement(newskit_1.Tab, __assign({}, (_b = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _b === void 0 ? void 0 : _b.tab1, { label: (_c = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _c === void 0 ? void 0 : _c.tab1.label, key: 'tab-1' }),
+                    react_1.default.createElement("h2", { key: 'tab-1-h2' }, "Page content here"),
+                    react_1.default.createElement("h3", { key: 'tab-1-h3' }, "Payment method here")),
+                react_1.default.createElement(newskit_1.Tab, __assign({}, (_d = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _d === void 0 ? void 0 : _d.tab2, { label: (_e = paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionTabs) === null || _e === void 0 ? void 0 : _e.tab2.label, key: 'tab-2' }),
+                    react_1.default.createElement("h2", { key: 'tab-2-h2' }, "Page content here"),
+                    react_1.default.createElement("h3", { key: 'tab-2-h3' }, "Paypal here"))),
+            (paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionMessage) && (react_1.default.createElement(newskit_1.Block, { marginBlockEnd: paymentDetailsPage.subscriptionMessage.marginBlockEnd },
+                react_1.default.createElement(newskit_1.TextBlock, { stylePreset: "inkBase", typographyPreset: "utilityBody020" }, paymentDetailsPage.subscriptionMessage.text))),
+            react_1.default.createElement(ButtonGroupWrapper, null,
+                react_1.default.createElement(shared_components_1.ButtonGroup, __assign({ loading: false }, buttonGroupProps))),
+            react_1.default.createElement(StyledVisible, { xs: true, sm: true, md: true },
+                react_1.default.createElement(shared_components_1.SubscriptionDrawer, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawer, { open: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerState, onDismiss: paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.subscriptionDrawerControl })))),
+        react_1.default.createElement(newskit_1.GridLayoutItem, null,
+            react_1.default.createElement(StyledVisible, { lg: true, xl: true },
+                react_1.default.createElement(shared_components_1.CorePackageContent, __assign({}, paymentDetailsPage === null || paymentDetailsPage === void 0 ? void 0 : paymentDetailsPage.corePackageContent))))));
+};
+exports.PaymentDetailsRender = PaymentDetailsRender;
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=PaymentDetailsRender.js.map

package/dist/cjs/Components/Templates/PaymentDetailsRender.js.map

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

package/dist/cjs/Components/Templates/__tests__/mocks/index.d.ts

@@ -0,0 +1,2 @@
+import { AccountCreationPageProps } from './../../../../context/types';
+export declare const accountCreationPageMock: AccountCreationPageProps;

package/dist/cjs/Components/Templates/__tests__/mocks/index.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accountCreationPageMock = void 0;
+exports.accountCreationPageMock = {
+    modalOverrides: {
+        closePosition: 'none',
+        open: false,
+        overrides: {
+            content: {
+                paddingInline: 'spaceInset050',
+                paddingBlock: 'spaceInset050',
+            },
+            panel: {
+                width: {
+                    xs: '288px',
+                    sm: '440px',
+                },
+                maxHeight: '95%',
+                height: {
+                    xs: '436px',
+                    sm: '360px',
+                },
+            },
+        },
+        introduction: {
+            title: 'test title',
+            titleOverrides: {
+                typographyPreset: {
+                    xs: 'utilityHeading040',
+                    md: 'utilityHeading050',
+                },
+                marginBlockEnd: {
+                    xs: 'space040',
+                    md: 'space050',
+                },
+            },
+            description: "Welcome to our subscriber terms. \n          Please read these terms carefully as they will set \n          out the terms for your subscription with us. \n          Where there are differences between our subscriptions for \n          The Times or The Sunday Times in the UK and Ireland \n          (for example, the price of your subscription or what it includes), \n          we have set out these details below. Unless otherwise stated, \n          any reference to a subscriber or a subscription shall include reference to all our subscribers.",
+            descriptionOverrides: {
+                typographyPreset: 'utilityBody020',
+                removeLastMarginBlockEnd: true,
+                marginBlockEnd: {
+                    xs: 'space040',
+                    md: 'space050',
+                },
+            },
+        },
+    },
+    buttonGroupProps: {
+        primaryButton: {
+            text: 'Continue',
+            overrides: {
+                stylePreset: 'buttonSolidPrimary',
+                width: '100%',
+            },
+        },
+    },
+    userData: {
+        titleOptions: ['Mr.', 'Mrs.', 'Ms.', 'Miss', 'Other'],
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/cjs/Components/Templates/__tests__/mocks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/Components/Templates/__tests__/mocks/index.ts"],"names":[],"mappings":";;;AACa,QAAA,uBAAuB,GAA6B;IAC/D,cAAc,EAAE;QACd,aAAa,EAAE,MAAM;QACrB,IAAI,EAAE,KAAK;QACX,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,aAAa,EAAE,eAAe;gBAC9B,YAAY,EAAE,eAAe;aAC9B;YACD,KAAK,EAAE;gBACL,KAAK,EAAE;oBACL,EAAE,EAAE,OAAO;oBACX,EAAE,EAAE,OAAO;iBACZ;gBACD,SAAS,EAAE,KAAK;gBAChB,MAAM,EAAE;oBACN,EAAE,EAAE,OAAO;oBACX,EAAE,EAAE,OAAO;iBACZ;aACF;SACF;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,YAAY;YACnB,cAAc,EAAE;gBACd,gBAAgB,EAAE;oBAChB,EAAE,EAAE,mBAAmB;oBACvB,EAAE,EAAE,mBAAmB;iBACxB;gBACD,cAAc,EAAE;oBACd,EAAE,EAAE,UAAU;oBACd,EAAE,EAAE,UAAU;iBACf;aACF;YACD,WAAW,EAAE,qiBAOuF;YACpG,oBAAoB,EAAE;gBACpB,gBAAgB,EAAE,gBAAgB;gBAClC,wBAAwB,EAAE,IAAI;gBAC9B,cAAc,EAAE;oBACd,EAAE,EAAE,UAAU;oBACd,EAAE,EAAE,UAAU;iBACf;aACF;SACF;KACF;IACD,gBAAgB,EAAE;QAChB,aAAa,EAAE;YACb,IAAI,EAAE,UAAU;YAChB,SAAS,EAAE;gBACT,WAAW,EAAE,oBAAoB;gBACjC,KAAK,EAAE,MAAM;aACd;SACF;KACF;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC;KACtD;CACF,CAAA"}

package/dist/cjs/Components/Templates/index.d.ts

@@ -0,0 +1 @@
+export * from './LayoutTemplate';

package/dist/cjs/Components/Templates/index.js

@@ -0,0 +1,18 @@
+"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("./LayoutTemplate"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/Components/Templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/Components/Templates/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,mDAAgC"}

package/dist/cjs/Components/Templates/types.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ContextOptions } from '../../context';
+import { UncompiledTheme } from 'newskit';
+import { ThemeDropdownObject } from '@newskit-render/shared-components';
+export type LayoutTemplateProps = {
+    children: React.ReactNode;
+    customTheme?: UncompiledTheme;
+    themeDropdownObject?: ThemeDropdownObject;
+    context: ContextOptions;
+    fullWidth?: boolean;
+};

package/dist/cjs/Components/Templates/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/Components/Templates/types.js.map

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

package/dist/cjs/__tests__/index.tests.d.ts

@@ -0,0 +1 @@
+export {};