@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import Checkbox from "../../atoms/checkbox";
+import { Box, Stack } from "../../atoms/layouts";
+import DisplayBox from "../../atoms/display-box";
+import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
+var TermsAndConditions = function (_a) {
+    var onCheck = _a.onCheck, isChecked = _a.isChecked, html = _a.html, terms = _a.terms, _b = _a.error, error = _b === void 0 ? false : _b;
+    var _c = useState(false), showTerms = _c[0], toggleShowTerms = _c[1];
+    return (React.createElement(DisplayBox, null,
+        React.createElement(Stack, null,
+            React.createElement(Checkbox, { name: "terms", title: "Terms and Conditions", error: error, checked: isChecked, onChange: onCheck }),
+            React.createElement(Box, { padding: "0 0 0 58px" },
+                React.createElement(Stack, null,
+                    React.createElement(Box, { padding: "0" }, html),
+                    terms && (React.createElement(TermsAndConditionsModal, { link: "Learn More", terms: terms, isOpen: showTerms, toggleOpen: toggleShowTerms })))))));
+};
+export default TermsAndConditions;

package/dist/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.d.ts

@@ -0,0 +1,7 @@
+export function termsAndConditions(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/terms-and-conditions/TermsAndConditions.stories.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import TermsAndConditions from "./TermsAndConditions";
+import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
+var groupId = "props";
+export var termsAndConditions = function () { return (React.createElement(TermsAndConditions, { onCheck: noop, isChecked: boolean("isChecked", false, groupId), html: text("html", "terms and conditions summary", groupId), terms: text("terms", "terms and conditions modal text", groupId), error: boolean("error", false, groupId) })); };
+var story = page({
+    title: "Components|Molecules/TermsAndConditions",
+    Component: TermsAndConditions
+});
+export default story;

package/dist/src/components/molecules/terms-and-conditions/index.d.ts

@@ -0,0 +1,2 @@
+export default TermsAndConditions;
+import TermsAndConditions from "./TermsAndConditions";

package/dist/src/components/molecules/terms-and-conditions/index.js

@@ -0,0 +1,2 @@
+import TermsAndConditions from "./TermsAndConditions";
+export default TermsAndConditions;

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.d.ts

@@ -0,0 +1,5 @@
+declare const _default: ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;
+export default _default;

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -0,0 +1,16 @@
+import React from "react";
+import Modal from "../modal";
+import Text from "../../atoms/text";
+import { Box } from "../../atoms/layouts";
+import { fallbackValues } from "./TermsAndConditionsModal.theme";
+import { themeComponent } from "../../../util/themeUtils";
+var TermsAndConditionsModal = function (_a) {
+    var link = _a.link, _b = _a.title, title = _b === void 0 ? "Terms & Conditions" : _b, isOpen = _a.isOpen, toggleOpen = _a.toggleOpen, toggleAccepted = _a.toggleAccepted, acceptText = _a.acceptText, terms = _a.terms, variant = _a.variant, themeValues = _a.themeValues;
+    return (React.createElement(Modal, { modalOpen: isOpen, hideModal: function () { return toggleOpen(false); }, showModal: function () { return toggleOpen(true); }, modalHeaderText: title, modalBodyText: React.createElement(Box, { background: themeValues.backgroundColor, border: "1px solid ".concat(themeValues.border), borderRadius: "3px", extraStyles: "overflow: scroll; max-height: 20rem;" },
+            React.createElement(Text, { variant: "p", extraStyles: "& a { text-decoration: underline; }" }, terms)), defaultWrapper: false, onlyCloseButton: !acceptText, continueButtonText: acceptText, continueAction: function () {
+            toggleAccepted(true);
+            toggleOpen(false);
+        } },
+        React.createElement(Text, { variant: variant === "default" ? "pS" : "pXS", onClick: function () { return toggleOpen(true); }, onKeyPress: function (e) { return e.key === "Enter" && toggleOpen(true); }, tabIndex: "0", color: themeValues.linkColor, weight: themeValues.fontWeight, hoverStyles: themeValues.modalLinkHoverFocus, extraStyles: "display: inline-block; width: fit-content;" }, link)));
+};
+export default themeComponent(TermsAndConditionsModal, "TermsAndConditionsModal", fallbackValues, "default");

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.d.ts

@@ -0,0 +1,7 @@
+export function termsAndConditionsModal(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+import page from "../../../../.storybook/page";
+var variants = {
+    default: "default",
+    footer: "footer",
+    None: undefined
+};
+var groupId = "props";
+export var termsAndConditionsModal = function () { return (React.createElement(TermsAndConditionsModal, { link: text("text", "Show modal", groupId), title: text("title", "Title", groupId), isOpen: boolean("isOpen", false, groupId), 
+    // toggleOpen={setShowTerms}
+    // toggleAccepted={toggleTermsAccepted}
+    acceptText: text("acceptText", "Accept", groupId), terms: text("terms", "terms and conditions", groupId), variant: select("variants", variants, "default", groupId) })); };
+var story = page({
+    title: "Components|Molecules/TermsAndConditionsModal",
+    Component: TermsAndConditionsModal
+});
+export default story;

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.d.ts

@@ -0,0 +1,50 @@
+export namespace fallbackValues {
+    export { backgroundColor };
+    export { linkColor };
+    export { border };
+    export { fontSize };
+    export { lineHeight };
+    export { fontWeight };
+    export { modalLinkHoverFocus };
+}
+declare namespace backgroundColor {
+    const _default: string;
+    export { _default as default };
+    export const footer: string;
+}
+declare namespace linkColor {
+    const _default_1: string;
+    export { _default_1 as default };
+    const footer_1: string;
+    export { footer_1 as footer };
+}
+declare namespace border {
+    const _default_2: string;
+    export { _default_2 as default };
+    const footer_2: string;
+    export { footer_2 as footer };
+}
+declare namespace fontSize {
+    const _default_3: string;
+    export { _default_3 as default };
+    const footer_3: string;
+    export { footer_3 as footer };
+}
+declare namespace lineHeight {
+    const _default_4: string;
+    export { _default_4 as default };
+    const footer_4: string;
+    export { footer_4 as footer };
+}
+declare namespace fontWeight {
+    export { FONT_WEIGHT_REGULAR as default };
+    export { FONT_WEIGHT_SEMIBOLD as footer };
+}
+declare namespace modalLinkHoverFocus {
+    export { standardInteractionStyles as default };
+    export { standardInteractionStyles as footer };
+}
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+declare const standardInteractionStyles: "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
+export {};

package/dist/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -0,0 +1,24 @@
+import { FONT_WEIGHT_REGULAR, FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+var backgroundColor = { default: "#ffffff", footer: "#ffffff" };
+var linkColor = { default: "#3176AA", footer: "#ffffff" };
+var border = { default: "#cdcdcd", footer: "#cdcdcd" };
+var fontSize = { default: "1rem", footer: "0.875rem" };
+var lineHeight = { default: "1.5rem", footer: "1.25rem" };
+var fontWeight = {
+    default: FONT_WEIGHT_REGULAR,
+    footer: FONT_WEIGHT_SEMIBOLD
+};
+var standardInteractionStyles = "\n    &:hover {\n      outline: none; \n      text-decoration: underline;\n    }\n    &:focus {\n      outline: 3px solid #3181E3;\n      outline-offset: 2px;\n    }\n";
+var modalLinkHoverFocus = {
+    default: standardInteractionStyles,
+    footer: standardInteractionStyles
+};
+export var fallbackValues = {
+    backgroundColor: backgroundColor,
+    linkColor: linkColor,
+    border: border,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    fontWeight: fontWeight,
+    modalLinkHoverFocus: modalLinkHoverFocus
+};

package/dist/src/components/molecules/terms-and-conditions-modal/index.d.ts

@@ -0,0 +1,2 @@
+export default TermsAndConditionsModal;
+import TermsAndConditionsModal from "./TermsAndConditionsModal";

package/dist/src/components/molecules/terms-and-conditions-modal/index.js

@@ -0,0 +1,2 @@
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+export default TermsAndConditionsModal;

package/dist/src/components/molecules/timeout/Timeout.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/molecules/timeout/Timeout.js

@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { Box, Stack, Center, Cover } from "../../atoms/layouts";
+import { TimeoutImage } from "../../atoms/icons";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
+import Paragraph from "../../atoms/paragraph";
+import withWindowSize from "../../withWindowSize";
+var Timeout = function (_a) {
+    var onLogout = _a.onLogout;
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Cover, null,
+        React.createElement(Center, { intrinsic: true },
+            React.createElement(Box, { padding: "0", maxWidth: isMobile ? "100%" : "500px" },
+                React.createElement(Stack, { childGap: "32px", justify: "center" },
+                    React.createElement(Box, { padding: isMobile ? "1rem" : "0" },
+                        React.createElement(TimeoutImage, null)),
+                    React.createElement(Box, { padding: "0" },
+                        React.createElement(Heading, { textAlign: "center", weight: FONT_WEIGHT_BOLD }, "Request Timed Out"),
+                        React.createElement(Paragraph, { variant: "pL", extraStyles: "text-align: center;" }, "That was taking longer than we expected and your request timed out. Please log out, log back in, and then try again.")),
+                    React.createElement(Center, { intrinsic: true },
+                        React.createElement(Box, { padding: "0" },
+                            React.createElement(ButtonWithAction, { variant: "primary", text: "Log out", action: onLogout }))))))));
+};
+export default withWindowSize(Timeout);

package/dist/src/components/molecules/timeout/index.d.ts

@@ -0,0 +1,2 @@
+export default Timeout;
+import Timeout from "./Timeout";

package/dist/src/components/molecules/timeout/index.js

@@ -0,0 +1,2 @@
+import Timeout from "./Timeout";
+export default Timeout;

package/dist/src/components/molecules/welcome-module/WelcomeModule.d.ts

@@ -0,0 +1,6 @@
+declare const _default: React.MemoExoticComponent<({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any>;
+export default _default;
+import React from "react";

package/dist/src/components/molecules/welcome-module/WelcomeModule.js

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { Fragment, memo } from "react";
+import styled from "styled-components";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./WelcomeModule.theme";
+import Heading from "../../atoms/heading";
+import { Box, Cluster } from "../../atoms/layouts";
+var WelcomeImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: auto;\n  height: 215px;\n"], ["\n  width: auto;\n  height: 215px;\n"])));
+var WelcomeModule = function (_a) {
+    var heading = _a.heading, isMobile = _a.isMobile, themeValues = _a.themeValues;
+    var welcomeImage = "https://cb-public-assets.s3-us-west-2.amazonaws.com/profile-assets/profile-welcome-image.png";
+    return (React.createElement(Fragment, null,
+        React.createElement(Box, { padding: "0" },
+            isMobile && (React.createElement(Box, { padding: "0", background: themeValues.imageBackgroundColor },
+                React.createElement(Cluster, { justify: "center" },
+                    React.createElement(WelcomeImage, { src: welcomeImage })))),
+            React.createElement(Box, { padding: isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem", background: themeValues.headerBackgroundColor },
+                React.createElement(Heading, { variant: "h6", weight: themeValues.fontWeight, color: themeValues.fontColor, textAlign: themeValues.textAlign, as: "h6" }, heading)),
+            !isMobile && (React.createElement(Box, { padding: "0", background: themeValues.imageBackgroundColor },
+                React.createElement(Cluster, { justify: "center", align: "flex-end" },
+                    React.createElement(WelcomeImage, { src: welcomeImage })))))));
+};
+export default memo(themeComponent(WelcomeModule, "WelcomeModule", fallbackValues));
+var templateObject_1;

package/dist/src/components/molecules/welcome-module/WelcomeModule.theme.d.ts

@@ -0,0 +1,13 @@
+export namespace fallbackValues {
+    export { fontWeight };
+    export { fontColor };
+    export { textAlign };
+    export { headerBackgroundColor };
+    export { imageBackgroundColor };
+}
+declare const fontWeight: "600";
+declare const fontColor: "#FFFFFF";
+declare const textAlign: "left";
+declare const headerBackgroundColor: "#3B414D";
+declare const imageBackgroundColor: "#15749D";
+export {};

package/dist/src/components/molecules/welcome-module/WelcomeModule.theme.js

@@ -0,0 +1,13 @@
+import { MATISSE_BLUE, BRIGHT_GREY, WHITE } from "../../../constants/colors";
+var fontWeight = "600";
+var fontColor = WHITE;
+var textAlign = "left";
+var headerBackgroundColor = BRIGHT_GREY;
+var imageBackgroundColor = MATISSE_BLUE;
+export var fallbackValues = {
+    fontWeight: fontWeight,
+    fontColor: fontColor,
+    textAlign: textAlign,
+    headerBackgroundColor: headerBackgroundColor,
+    imageBackgroundColor: imageBackgroundColor
+};

package/dist/src/components/molecules/welcome-module/index.d.ts

@@ -0,0 +1,2 @@
+export default WelcomeModule;
+import WelcomeModule from "./WelcomeModule";

package/dist/src/components/molecules/welcome-module/index.js

@@ -0,0 +1,2 @@
+import WelcomeModule from "./WelcomeModule";
+export default WelcomeModule;

package/dist/src/components/molecules/workflow-tile/WorkflowTile.d.ts

@@ -0,0 +1,7 @@
+export default WorkflowTile;
+declare function WorkflowTile({ workflowName, workflowDescription, workflowActionName, slug }: {
+    workflowName?: string | undefined;
+    workflowDescription?: string | undefined;
+    workflowActionName?: string | undefined;
+    slug: any;
+}): JSX.Element;

package/dist/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Heading from "../../atoms/heading";
+import Paragraph from "../../atoms/paragraph";
+import { MATISSE_BLUE, CHARADE_GREY, STORM_GREY, WHITE, GHOST_GREY, GRECIAN_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import ButtonWithLink from "../../atoms/button-with-link";
+import { Box, Stack } from "../../atoms/layouts";
+var WorkflowTile = function (_a) {
+    var _b = _a.workflowName, workflowName = _b === void 0 ? "Test Workflow" : _b, _c = _a.workflowDescription, workflowDescription = _c === void 0 ? "Link your benefit plan" : _c, _d = _a.workflowActionName, workflowActionName = _d === void 0 ? "Search" : _d, slug = _a.slug;
+    return (React.createElement(Box, { background: WHITE, boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY), padding: 0 },
+        React.createElement(Stack, { childGap: 0, bottomItem: 3, fullHeight: true },
+            React.createElement(Box, { padding: "1rem 1rem 0 1rem" },
+                React.createElement(Heading, { variant: "h6", weight: FONT_WEIGHT_SEMIBOLD, color: CHARADE_GREY, margin: "0 0 0.5rem 0" }, workflowName)),
+            React.createElement(Box, { padding: "0 1rem 1rem 1rem", minHeight: "4.25rem" },
+                React.createElement(Paragraph, { variant: "pS", color: STORM_GREY }, workflowDescription)),
+            React.createElement(Box, { padding: "1.5rem 1rem", background: GRECIAN_GREY },
+                React.createElement(ButtonWithLink, { primary: true, primaryBG: MATISSE_BLUE, fontWeight: FONT_WEIGHT_SEMIBOLD, fontSize: "1.125rem", borderRadius: "0px", text: workflowActionName, minWidth: "100%", url: "/service/".concat(slug), extraStyles: "width: 100%;", linkExtraStyles: "justify-content: center;", dataQa: slug })))));
+};
+export default WorkflowTile;

package/dist/src/components/molecules/workflow-tile/WorkflowTile.stories.d.ts

@@ -0,0 +1,7 @@
+export function workflowTile(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/workflow-tile/WorkflowTile.stories.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { text } from "@storybook/addon-knobs";
+import WorkflowTile from "./WorkflowTile";
+import page from "../../../../.storybook/page";
+var groupId = "props";
+export var workflowTile = function () { return (React.createElement(WorkflowTile, { workflowName: text("workflowName", "Test Workflow", groupId), workflowDescription: text("workflowDescription", "Workflow Description", groupId), slug: text("slug", "slug", groupId) })); };
+var story = page({
+    title: "Components|Molecules/WorkflowTile",
+    Component: WorkflowTile
+});
+export default story;

package/dist/src/components/molecules/workflow-tile/index.d.ts

@@ -0,0 +1,2 @@
+export default WorkflowTile;
+import WorkflowTile from "./WorkflowTile";

package/dist/src/components/molecules/workflow-tile/index.js

@@ -0,0 +1,2 @@
+import WorkflowTile from "./WorkflowTile";
+export default WorkflowTile;

package/dist/src/components/templates/center-single/CenterSingle.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/templates/center-single/CenterSingle.js

@@ -0,0 +1,20 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
+var CenterSingle = function (_a) {
+    var header = _a.header, footer = _a.footer, subHeader = _a.subHeader, _b = _a.hideMobileSubHeader, hideMobileSubHeader = _b === void 0 ? true : _b, _c = _a.maxContentWidth, maxContentWidth = _c === void 0 ? "36.75rem" : _c, _d = _a.fullWidthMobile, fullWidthMobile = _d === void 0 ? true : _d, _e = _a.centeredMobileContent, centeredMobileContent = _e === void 0 ? false : _e, content = _a.content, themeValues = _a.themeValues;
+    var themeContext = useContext(ThemeContext);
+    var isMobile = themeContext.isMobile;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", background: COOL_GREY_05, extraStyles: "flex-grow: 1;" },
+        React.createElement(Cover, { centerOverride: isMobile && !centeredMobileContent },
+            header ? header : React.createElement(Box, { padding: "0" }),
+            React.createElement(Box, { padding: "0", minWidth: "100%", extraStyles: "z-index: 1;", role: "main" },
+                subHeader && !(isMobile && hideMobileSubHeader) ? (subHeader) : (React.createElement(Fragment, null)),
+                React.createElement(Center, { maxWidth: isMobile && fullWidthMobile ? "100%" : maxContentWidth, intrinsic: !isMobile }, centeredMobileContent ? (React.createElement(Cover, { minHeight: "100%", singleChild: true }, content)) : (React.createElement(Box, { padding: "0" }, content)))),
+            footer ? footer : React.createElement(Box, { padding: "0" }))));
+};
+export default withWindowResize(themeComponent(CenterSingle, "Global", fallbackValues));

package/dist/src/components/templates/center-single/index.d.ts

@@ -0,0 +1,2 @@
+export default CenterSingle;
+import CenterSingle from "./CenterSingle";

package/dist/src/components/templates/center-single/index.js

@@ -0,0 +1,2 @@
+import CenterSingle from "./CenterSingle";
+export default CenterSingle;

package/dist/src/components/templates/center-stack/CenterStack.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/templates/center-stack/CenterStack.js

@@ -0,0 +1,22 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Stack } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
+var CenterStack = function (_a) {
+    var header = _a.header, footer = _a.footer, subHeader = _a.subHeader, _b = _a.hideMobileSubHeader, hideMobileSubHeader = _b === void 0 ? true : _b, _c = _a.contentSpacing, contentSpacing = _c === void 0 ? "1rem" : _c, _d = _a.maxContentWidth, maxContentWidth = _d === void 0 ? "36.75rem" : _d, _e = _a.fullWidthMobile, fullWidthMobile = _e === void 0 ? true : _e, content = _a.content, themeValues = _a.themeValues;
+    var themeContext = useContext(ThemeContext);
+    var isMobile = themeContext.isMobile;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", background: COOL_GREY_05, extraStyles: "flex-grow: 1;" },
+        React.createElement(Cover, null,
+            header ? header : React.createElement(Box, { padding: "0" }),
+            React.createElement(Box, { padding: "0", minWidth: "100%", role: "main" },
+                subHeader && !(isMobile && hideMobileSubHeader) ? (subHeader) : (React.createElement(Fragment, null)),
+                React.createElement(Center, { maxWidth: isMobile && fullWidthMobile ? "100%" : maxContentWidth, intrinsic: !isMobile },
+                    React.createElement(Cover, { minHeight: "100%", singleChild: true },
+                        React.createElement(Stack, { childGap: contentSpacing }, content)))),
+            footer ? footer : React.createElement(Box, { padding: "0" }))));
+};
+export default withWindowResize(themeComponent(CenterStack, "Global", fallbackValues));

package/dist/src/components/templates/center-stack/index.d.ts

@@ -0,0 +1,2 @@
+export default CenterStack;
+import CenterStack from "./CenterStack";

package/dist/src/components/templates/center-stack/index.js

@@ -0,0 +1,2 @@
+import CenterStack from "./CenterStack";
+export default CenterStack;

package/dist/src/components/templates/default-page-template/DefaultPageTemplate.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -0,0 +1,20 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
+var CenterSingle = function (_a) {
+    var header = _a.header, footer = _a.footer, subHeader = _a.subHeader, _b = _a.hideMobileSubHeader, hideMobileSubHeader = _b === void 0 ? false : _b, content = _a.content, themeValues = _a.themeValues, _c = _a.maxWidth, maxWidth = _c === void 0 ? "75rem" : _c, _d = _a.gutters, gutters = _d === void 0 ? "2rem" : _d;
+    var themeContext = useContext(ThemeContext);
+    var isMobile = themeContext.isMobile;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", background: COOL_GREY_05, extraStyles: "flex-grow: 1;" },
+        React.createElement(Cover, { childGap: "0", fillCenter: true },
+            header ? header : React.createElement(Box, { padding: "0" }),
+            React.createElement(Box, { padding: "0", minWidth: "100%", minHeight: "100%", extraStyles: "z-index: 1;", role: "main" },
+                subHeader && !(isMobile && hideMobileSubHeader) ? (subHeader) : (React.createElement(Fragment, null)),
+                React.createElement(Center, { maxWidth: maxWidth, gutters: gutters }, content)),
+            footer ? footer : React.createElement(Box, { padding: "0" }))));
+};
+export default withWindowResize(themeComponent(CenterSingle, "Global", fallbackValues));

package/dist/src/components/templates/default-page-template/index.d.ts

@@ -0,0 +1,2 @@
+export default DefaultPageTemplate;
+import DefaultPageTemplate from "./DefaultPageTemplate";

package/dist/src/components/templates/default-page-template/index.js

@@ -0,0 +1,2 @@
+import DefaultPageTemplate from "./DefaultPageTemplate";
+export default DefaultPageTemplate;

package/dist/src/components/templates/index.d.ts

@@ -0,0 +1,5 @@
+export { default as CenterSingle } from "./center-single";
+export { default as CenterStack } from "./center-stack";
+export { default as DefaultPageTemplate } from "./default-page-template";
+export { default as SidebarSingleContent } from "./sidebar-single-content";
+export { default as SidebarStackContent } from "./sidebar-stack-content";

package/dist/src/components/templates/index.js

@@ -0,0 +1,5 @@
+export { default as CenterSingle } from "./center-single";
+export { default as CenterStack } from "./center-stack";
+export { default as DefaultPageTemplate } from "./default-page-template";
+export { default as SidebarSingleContent } from "./sidebar-single-content";
+export { default as SidebarStackContent } from "./sidebar-stack-content";

package/dist/src/components/templates/sidebar-single-content/SidebarSingleContent.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/templates/sidebar-single-content/SidebarSingleContent.js

@@ -0,0 +1,25 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Sidebar } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
+var SidebarSingleContent = function (_a) {
+    var header = _a.header, footer = _a.footer, subHeader = _a.subHeader, _b = _a.hideMobileSubHeader, hideMobileSubHeader = _b === void 0 ? true : _b, _c = _a.sidebarWrapperPadding, sidebarWrapperPadding = _c === void 0 ? "0" : _c, _d = _a.sidebarWrapperMaxWidth, sidebarWrapperMaxWidth = _d === void 0 ? "auto" : _d, sidebarContent = _a.sidebarContent, mainContent = _a.mainContent, _e = _a.sidebarOnRight, sidebarOnRight = _e === void 0 ? false : _e, _f = _a.sidebarTargetWidth, sidebarTargetWidth = _f === void 0 ? "10rem" : _f, _g = _a.sidebarContentGap, sidebarContentGap = _g === void 0 ? "1rem" : _g, _h = _a.mainContentMinWidth, mainContentMinWidth = _h === void 0 ? "50%" : _h, _j = _a.sidebarVerticalCenter, sidebarVerticalCenter = _j === void 0 ? false : _j, themeValues = _a.themeValues;
+    var themeContext = useContext(ThemeContext);
+    var isMobile = themeContext.isMobile;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", background: COOL_GREY_05, extraStyles: "flex-grow: 1;" },
+        React.createElement(Cover, { centerOverride: !sidebarVerticalCenter },
+            header ? header : React.createElement(Box, { padding: "0" }),
+            React.createElement(Box, { padding: "0", minWidth: "100%", role: "main" },
+                subHeader && !(isMobile && hideMobileSubHeader) ? (subHeader) : (React.createElement(Fragment, null)),
+                React.createElement(Box, { padding: sidebarWrapperPadding },
+                    React.createElement(Center, { maxWidth: sidebarWrapperMaxWidth },
+                        React.createElement(Sidebar, { width: sidebarTargetWidth, childGap: sidebarContentGap, sidebarOnRight: sidebarOnRight, contentMinWidth: mainContentMinWidth },
+                            sidebarOnRight ? React.createElement(Fragment, null) : sidebarContent,
+                            mainContent,
+                            sidebarOnRight ? sidebarContent : React.createElement(Fragment, null))))),
+            footer ? footer : React.createElement(Box, { padding: "0" }))));
+};
+export default withWindowResize(themeComponent(SidebarSingleContent, "Global", fallbackValues));

package/dist/src/components/templates/sidebar-single-content/index.d.ts

@@ -0,0 +1,2 @@
+export default SidebarSingleContent;
+import SidebarSingleContent from "./SidebarSingleContent";

package/dist/src/components/templates/sidebar-single-content/index.js

@@ -0,0 +1,2 @@
+import SidebarSingleContent from "./SidebarSingleContent";
+export default SidebarSingleContent;

package/dist/src/components/templates/sidebar-stack-content/SidebarStackContent.d.ts

@@ -0,0 +1,4 @@
+declare const _default: ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+export default _default;

package/dist/src/components/templates/sidebar-stack-content/SidebarStackContent.js

@@ -0,0 +1,25 @@
+import React, { useContext, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { fallbackValues } from "../templates.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import withWindowResize from "../../withWindowSize";
+import { Box, Center, Cover, Sidebar, Stack } from "../../atoms/layouts";
+import { COOL_GREY_05 } from "../../../constants/colors";
+var SidebarStackContent = function (_a) {
+    var header = _a.header, footer = _a.footer, subHeader = _a.subHeader, _b = _a.hideMobileSubHeader, hideMobileSubHeader = _b === void 0 ? true : _b, _c = _a.sidebarWrapperPadding, sidebarWrapperPadding = _c === void 0 ? "0" : _c, _d = _a.sidebarWrapperMaxWidth, sidebarWrapperMaxWidth = _d === void 0 ? "auto" : _d, sidebarContent = _a.sidebarContent, mainContent = _a.mainContent, _e = _a.sidebarOnRight, sidebarOnRight = _e === void 0 ? false : _e, _f = _a.sidebarTargetWidth, sidebarTargetWidth = _f === void 0 ? "10rem" : _f, _g = _a.sidebarContentGap, sidebarContentGap = _g === void 0 ? "1rem" : _g, _h = _a.contentStackGap, contentStackGap = _h === void 0 ? "1rem" : _h, _j = _a.mainContentMinWidth, mainContentMinWidth = _j === void 0 ? "50%" : _j, _k = _a.sidebarVerticalCenter, sidebarVerticalCenter = _k === void 0 ? false : _k, themeValues = _a.themeValues;
+    var themeContext = useContext(ThemeContext);
+    var isMobile = themeContext.isMobile;
+    return (React.createElement(Box, { padding: "0", minWidth: "100%", background: COOL_GREY_05, key: "page-bg", extraStyles: "flex-grow: 1;" },
+        React.createElement(Cover, { centerOverride: !sidebarVerticalCenter, key: "page-cover" },
+            header ? header : React.createElement(Box, { padding: "0", key: "header-box" }),
+            React.createElement(Box, { padding: "0", minWidth: "100%", key: "content-box", role: "main" },
+                subHeader && !(isMobile && hideMobileSubHeader) ? (subHeader) : (React.createElement(Fragment, null)),
+                React.createElement(Box, { padding: sidebarWrapperPadding, key: "content-wrapper" },
+                    React.createElement(Center, { maxWidth: sidebarWrapperMaxWidth, key: "content-center" },
+                        React.createElement(Sidebar, { width: sidebarTargetWidth, childGap: sidebarContentGap, sidebarOnRight: sidebarOnRight, contentMinWidth: mainContentMinWidth, key: "content-sidebar" },
+                            sidebarOnRight ? (React.createElement(Fragment, { key: "sidebar-fragment" })) : (sidebarContent),
+                            React.createElement(Stack, { key: "content-stack", childGap: contentStackGap }, mainContent),
+                            sidebarOnRight ? (sidebarContent) : (React.createElement(Fragment, { key: "sidebar-fragment" })))))),
+            footer ? footer : React.createElement(Box, { padding: "0", key: "footer-box" }))));
+};
+export default withWindowResize(themeComponent(SidebarStackContent, "Global", fallbackValues));

package/dist/src/components/templates/sidebar-stack-content/index.d.ts

@@ -0,0 +1,2 @@
+export default SidebarStackContent;
+import SidebarStackContent from "./SidebarStackContent";

package/dist/src/components/templates/sidebar-stack-content/index.js

@@ -0,0 +1,2 @@
+import SidebarStackContent from "./SidebarStackContent";
+export default SidebarStackContent;

package/dist/src/components/templates/templates.theme.d.ts

@@ -0,0 +1,5 @@
+export namespace fallbackValues {
+    export { pageBackground };
+}
+declare const pageBackground: "#FBFCFD";
+export {};

package/dist/src/components/templates/templates.theme.js

@@ -0,0 +1,4 @@
+var pageBackground = "#FBFCFD";
+export var fallbackValues = {
+    pageBackground: pageBackground
+};

package/dist/src/components/withWindowSize.d.ts

@@ -0,0 +1,4 @@
+export default withWindowSize;
+declare function withWindowSize(Child: any): ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;