@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/atoms/link/Link.stories.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { boolean, select, text, number } from "@storybook/addon-knobs";
+import page from "../../../../.storybook/page";
+import InternalLink from "./InternalLink";
+import ExternalLink from "./ExternalLink";
+import { FONT_WEIGHT_BOLD, FONT_WEIGHT_SEMIBOLD, FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
+var fontWeights = {
+    FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
+    FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
+    FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR
+};
+var variantsLabel = "variant";
+var variants = {
+    primary: "primary",
+    secondary: "secondary"
+};
+var defaultValue = "primary";
+var groupId = "props";
+export var internalLink = function () { return (React.createElement(InternalLink, { variant: select(variantsLabel, variants, defaultValue, groupId), to: text("to", "https://google.com", "props"), extraStyles: text("extraStyles", "text-align: center;", "props"), margin: number("margin", 0, { min: 0, max: 99 }, "props"), fontWeight: select("fontWeight", fontWeights, 400, "props"), color: select("color", colors, "black", "props") }, "Internal Link")); };
+export var externalLink = function () { return (React.createElement(ExternalLink, { variant: select(variantsLabel, variants, defaultValue, groupId), href: text("href", "https://google.com", "props"), newTab: boolean("newTab", true, "props"), extraStyles: text("extraStyles", "text-align: center;", "props"), margin: number("margin", 0, { min: 0, max: 99 }, "props"), weight: select("weight", fontWeights, 400, "props"), color: select("color", colors, "black", "props") }, "External Link")); };
+var story = page({
+    title: "Components|Atoms/Link",
+    Component: InternalLink
+});
+export default story;

package/dist/src/components/atoms/link/Link.theme.d.ts

@@ -0,0 +1,14 @@
+export namespace fallbackValues {
+    export { fontFamily };
+    export { hoverColor };
+    export { activeColor };
+    export { externalLinkColor };
+}
+declare namespace fontFamily {
+    const primary: string;
+    const secondary: string;
+}
+declare const hoverColor: "#116285";
+declare const activeColor: "#0E506D";
+declare const externalLinkColor: "#15749D";
+export {};

package/dist/src/components/atoms/link/Link.theme.js

@@ -0,0 +1,13 @@
+var fontFamily = {
+    primary: "Public Sans",
+    secondary: "Open Sans"
+};
+var hoverColor = "#116285";
+var activeColor = "#0E506D";
+var externalLinkColor = "#15749D";
+export var fallbackValues = {
+    fontFamily: fontFamily,
+    hoverColor: hoverColor,
+    activeColor: activeColor,
+    externalLinkColor: externalLinkColor
+};

package/dist/src/components/atoms/link/index.d.ts

@@ -0,0 +1,3 @@
+import ExternalLink from "./ExternalLink";
+import InternalLink from "./InternalLink";
+export { ExternalLink, InternalLink };

package/dist/src/components/atoms/link/index.js

@@ -0,0 +1,3 @@
+import ExternalLink from "./ExternalLink";
+import InternalLink from "./InternalLink";
+export { ExternalLink, InternalLink };

package/dist/src/components/atoms/loading/Loading.d.ts

@@ -0,0 +1,2 @@
+export default Loading;
+declare function Loading(): JSX.Element;

package/dist/src/components/atoms/loading/Loading.js

@@ -0,0 +1,9 @@
+import React from "react";
+import Spinner from "../spinner";
+import { Box, Cover, Center } from "../layouts";
+var Loading = function () { return (React.createElement(Box, { key: "spinner-container", extraStyles: "position: fixed; top: 0; bottom: 0; left: 0; right: 0;" },
+    React.createElement(Cover, { minHeight: "100%", singleChild: true },
+        React.createElement(Center, { intrinsic: true },
+            React.createElement(Box, null,
+                React.createElement(Spinner, { size: "100" })))))); };
+export default Loading;

package/dist/src/components/atoms/loading/index.d.ts

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

package/dist/src/components/atoms/loading/index.js

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

package/dist/src/components/atoms/nav-footer/NavFooter.d.ts

@@ -0,0 +1,13 @@
+export default NavFooter;
+declare function NavFooter({ leftContent, rightContent, footerMinHeight, backgroundColor, largeSide, largeSideSize, footerPadding, isMobile, footerWidth, ...rest }: {
+    [x: string]: any;
+    leftContent: any;
+    rightContent: any;
+    footerMinHeight?: string | undefined;
+    backgroundColor: any;
+    largeSide?: string | undefined;
+    largeSideSize?: string | undefined;
+    footerPadding?: string | undefined;
+    isMobile: any;
+    footerWidth: any;
+}): JSX.Element;

package/dist/src/components/atoms/nav-footer/NavFooter.js

@@ -0,0 +1,38 @@
+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;
+};
+import React from "react";
+import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
+var NavFooter = function (_a) {
+    var leftContent = _a.leftContent, rightContent = _a.rightContent, _b = _a.footerMinHeight, footerMinHeight = _b === void 0 ? "104px" : _b, backgroundColor = _a.backgroundColor, _c = _a.largeSide, largeSide = _c === void 0 ? "right" : _c, _d = _a.largeSideSize, largeSideSize = _d === void 0 ? "2" : _d, _e = _a.footerPadding, footerPadding = _e === void 0 ? "1.5rem 1rem" : _e, isMobile = _a.isMobile, footerWidth = _a.footerWidth, rest = __rest(_a, ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"]);
+    return (React.createElement(Box, __assign({ padding: footerPadding, background: backgroundColor, minHeight: footerMinHeight, minWidth: "100%", extraStyles: isMobile
+            ? "overflow: hidden;"
+            : "height: ".concat(footerMinHeight, "; > * { height: 100%; };") }, rest),
+        React.createElement(Center, { maxWidth: footerWidth || "76.5rem" },
+            React.createElement(Cover, { singleChild: true, minHeight: "100%" },
+                React.createElement(Box, { minHeight: "100%", padding: "0" },
+                    React.createElement(Switcher, { breakpoint: isMobile ? "999px" : "700px", largeChild: largeSide === "right" ? "2" : "1", largeChildSize: largeSideSize, childGap: "0.5rem" },
+                        leftContent,
+                        React.createElement(Cluster, { justify: isMobile ? "flex-start" : "flex-end", align: "center", childGap: "0.5rem" },
+                            React.createElement(Switcher, { maxChildrenOnly: true, maxChildren: isMobile ? 1 : 99, childGap: isMobile ? "1rem" : "2rem" }, rightContent))))))));
+};
+export default NavFooter;

package/dist/src/components/atoms/nav-footer/NavFooter.stories.d.ts

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

package/dist/src/components/atoms/nav-footer/NavFooter.stories.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import NavFooter from "./NavFooter";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
+var story = page({
+    title: "Components|Atoms/NavFooter",
+    Component: NavFooter
+});
+export default story;
+var Left = function () { return (React.createElement("div", { style: { border: "2px solid black", width: "50px" } }, "Left Content")); };
+var Right = function () { return (React.createElement("div", { style: { border: "2px solid black", width: "50px" } }, "Right Content")); };
+export var navFooter = function () { return (React.createElement(NavFooter, { leftContent: React.createElement(Left, null), rightContent: React.createElement(Right, null), "$headerHeight": text("headerHeight", "105px", "props"), backgroundColor: select("activeColor", colors, "white", "props"), footerPadding: text("footerPadding", "1.5rem 1rem", "props"), isMobile: boolean("isMobile", false, "props") })); };

package/dist/src/components/atoms/nav-footer/index.d.ts

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

package/dist/src/components/atoms/nav-footer/index.js

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

package/dist/src/components/atoms/nav-header/NavHeader.d.ts

@@ -0,0 +1,10 @@
+export default NavHeader;
+declare function NavHeader({ leftContent, rightContent, headerHeight, isMobile, backgroundColor, headerWidth, ...rest }: {
+    [x: string]: any;
+    leftContent: any;
+    rightContent: any;
+    headerHeight?: string | undefined;
+    isMobile: any;
+    backgroundColor: any;
+    headerWidth: any;
+}): JSX.Element;

package/dist/src/components/atoms/nav-header/NavHeader.js

@@ -0,0 +1,37 @@
+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;
+};
+import React from "react";
+import { Box, Cluster, Center, Cover } from "../layouts";
+var NavHeader = function (_a) {
+    var leftContent = _a.leftContent, rightContent = _a.rightContent, _b = _a.headerHeight, headerHeight = _b === void 0 ? "105px" : _b, isMobile = _a.isMobile, backgroundColor = _a.backgroundColor, headerWidth = _a.headerWidth, rest = __rest(_a, ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"]);
+    return (React.createElement(Box, __assign({ padding: "0 16px 4px", background: backgroundColor, extraStyles: isMobile
+            ? "height: 72px; > * { height: 100%; }; z-index: 2;"
+            : "height: ".concat(headerHeight, "; > * { height: 100%; }; z-index: 2;"), minWidth: "100%" }, rest),
+        React.createElement(Center, { maxWidth: headerWidth || "76.5rem" },
+            React.createElement(Box, { minHeight: "100%", padding: "0" },
+                React.createElement(Cover, { singleChild: true, minHeight: isMobile ? "72px" : headerHeight },
+                    React.createElement(Cluster, { justify: "space-between", align: "center", overflow: true },
+                        React.createElement(Box, { padding: "0" }, leftContent),
+                        React.createElement(Box, { padding: "0" }, rightContent)))))));
+};
+export default NavHeader;

package/dist/src/components/atoms/nav-header/NavHeader.stories.d.ts

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

package/dist/src/components/atoms/nav-header/NavHeader.stories.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { text, select } from "@storybook/addon-knobs";
+import NavHeader from "./NavHeader";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
+var story = page({
+    title: "Components|Atoms/NavHeader",
+    Component: NavHeader
+});
+export default story;
+var Left = function () { return (React.createElement("div", { style: { border: "2px solid black", width: "50px" } }, "Left Content")); };
+var Right = function () { return (React.createElement("div", { style: { border: "2px solid black", width: "50px" } }, "Right Content")); };
+export var navHeader = function () { return (React.createElement(NavHeader, { leftContent: React.createElement(Left, null), rightContent: React.createElement(Right, null), headerHeight: text("headerHeight", "105px", "props"), backgroundColor: select("activeColor", colors, "white", "props") })); };

package/dist/src/components/atoms/nav-header/index.d.ts

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

package/dist/src/components/atoms/nav-header/index.js

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

package/dist/src/components/atoms/nav-tabs/NavTab.d.ts

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

package/dist/src/components/atoms/nav-tabs/NavTab.js

@@ -0,0 +1,20 @@
+import React, { useContext, useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { ThemeContext } from "styled-components";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./NavTab.theme";
+import InternalLink from "../link/InternalLink";
+import Box from "../layouts/Box";
+var NavTab = function (_a) {
+    var path = _a.path, label = _a.label, themeValues = _a.themeValues;
+    var isMobile = useContext(ThemeContext).isMobile;
+    var _b = useState(false), isActive = _b[0], setIsActive = _b[1];
+    var location = useLocation();
+    useEffect(function () {
+        setIsActive(location.pathname.includes(path));
+    }, [location.pathname]);
+    var border = "border-bottom: 3px solid ".concat(themeValues.activeColor);
+    return (React.createElement(Box, { padding: 0 },
+        React.createElement(InternalLink, { color: isActive ? themeValues.activeColor : themeValues.linkColor, to: path, extraStyles: "\n          border-bottom: 3px solid transparent;\n          font-family: ".concat(themeValues.fontFamily, ";\n          text-decoration: none;\n          ").concat(isActive && !isMobile ? border : "none", ";\n          &:hover {\n            text-decoration: none;\n            color: ").concat(themeValues.activeColor, ";\n            ").concat(isMobile ? "" : "".concat(border), "\n          };\n          padding: 1.25rem 0.1rem;\n        ") }, label)));
+};
+export default themeComponent(NavTab, "NavTab", fallbackValues);

package/dist/src/components/atoms/nav-tabs/NavTab.theme.d.ts

@@ -0,0 +1,9 @@
+export namespace fallbackValues {
+    export { fontFamily };
+    export { activeColor };
+    export { linkColor };
+}
+declare const fontFamily: "Public Sans, sans-serif";
+declare const activeColor: "#15749D";
+declare const linkColor: "#292A33";
+export {};

package/dist/src/components/atoms/nav-tabs/NavTab.theme.js

@@ -0,0 +1,9 @@
+import { MATISSE_BLUE, CHARADE_GREY } from "../../../constants/colors";
+var fontFamily = "Public Sans, sans-serif";
+var activeColor = MATISSE_BLUE;
+var linkColor = CHARADE_GREY;
+export var fallbackValues = {
+    fontFamily: fontFamily,
+    activeColor: activeColor,
+    linkColor: linkColor,
+};

package/dist/src/components/atoms/nav-tabs/NavTabs.d.ts

@@ -0,0 +1,4 @@
+export default NavTabs;
+declare function NavTabs({ tabsConfig }: {
+    tabsConfig: any;
+}): JSX.Element;

package/dist/src/components/atoms/nav-tabs/NavTabs.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import BoxWithShadow from "../box-with-shadow";
+import Center from "../layouts/Center";
+import Cluster from "../layouts/Cluster";
+import NavTab from "./NavTab";
+var NavTabs = function (_a) {
+    var tabsConfig = _a.tabsConfig;
+    var isMobile = useContext(ThemeContext).isMobile;
+    var tabs = tabsConfig.map(function (tabConfig) {
+        return React.createElement(NavTab, __assign({ key: tabConfig.path }, tabConfig));
+    });
+    return (React.createElement(BoxWithShadow, { variant: "insetStandard", extraStyles: "padding: 0" },
+        React.createElement(Center, { intrinsic: true }, isMobile ? tabs : React.createElement(Cluster, { childGap: "5rem" }, tabs))));
+};
+export default NavTabs;

package/dist/src/components/atoms/nav-tabs/TabConfig.d.ts

@@ -0,0 +1,4 @@
+export declare type TabConfig = {
+    label: string;
+    path: string;
+};

package/dist/src/components/atoms/nav-tabs/TabConfig.js

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

package/dist/src/components/atoms/nav-tabs/index.d.ts

@@ -0,0 +1 @@
+export default NavTabs;

package/dist/src/components/atoms/nav-tabs/index.js

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

package/dist/src/components/atoms/paragraph/Paragraph.d.ts

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

package/dist/src/components/atoms/paragraph/Paragraph.js

@@ -0,0 +1,40 @@
+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;
+};
+/*
+03/30/2022
+
+For new pages/applications, please us <Title /> and <Detail /> atoms (specify "as" prop with value of "p")
+
+*/
+import React from "react";
+import { fallbackValues } from "./Paragraph.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { ParagraphText } from "./Paragraph.styled";
+import { safeChildren } from "../../../util/general";
+var Paragraph = function (_a) {
+    var themeValues = _a.themeValues, _b = _a.weight, weight = _b === void 0 ? FONT_WEIGHT_REGULAR : _b, _c = _a.color, color = _c === void 0 ? FIREFLY_GREY : _c, _d = _a.margin, margin = _d === void 0 ? 0 : _d, _e = _a.extraStyles, extraStyles = _e === void 0 ? "" : _e, dataQa = _a.dataQa, children = _a.children, as = _a.as, rest = __rest(_a, ["themeValues", "weight", "color", "margin", "extraStyles", "dataQa", "children", "as"]);
+    return (React.createElement(ParagraphText, __assign({ weight: weight, color: color, margin: margin, fontFamily: themeValues.fontFamily, fontSize: themeValues.fontSize, as: as, extraStyles: extraStyles, "data-qa": dataQa }, rest), safeChildren(children, React.createElement("span", null))));
+};
+export default themeComponent(Paragraph, "Paragraph", fallbackValues, "p");

package/dist/src/components/atoms/paragraph/Paragraph.stories.d.ts

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

package/dist/src/components/atoms/paragraph/Paragraph.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { text, number, select } from "@storybook/addon-knobs";
+import Paragraph from "./Paragraph";
+import page from "../../../../.storybook/page";
+import { FONT_WEIGHT_BOLD, FONT_WEIGHT_SEMIBOLD, FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
+var fontWeights = {
+    FONT_WEIGHT_BOLD: FONT_WEIGHT_BOLD,
+    FONT_WEIGHT_SEMIBOLD: FONT_WEIGHT_SEMIBOLD,
+    FONT_WEIGHT_REGULAR: FONT_WEIGHT_REGULAR
+};
+var story = page({
+    title: "Components|Atoms/Paragraph",
+    Component: Paragraph
+});
+export default story;
+export var paragraph = function () { return (React.createElement(Paragraph, { extraStyles: text("extraStyles", "text-align: center;", "props"), margin: number("margin", 0, { min: 0, max: 99 }, "props"), weight: select("weight", fontWeights, 400, "props"), color: select("activeColor", colors, "black", "props") }, text("children", "Lorem Ipsum", "props"))); };

package/dist/src/components/atoms/paragraph/Paragraph.styled.d.ts

@@ -0,0 +1 @@
+export const ParagraphText: any;

package/dist/src/components/atoms/paragraph/Paragraph.styled.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from "styled-components";
+export var ParagraphText = styled.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n\n  ", "\n"], ["\n  --font-size: ", ";\n  font-size: var(--font-size);\n  line-height: calc(1.5 * var(--font-size));\n  font-weight: ", ";\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n\n  ", "\n"])), function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var weight = _a.weight;
+    return weight;
+}, function (_a) {
+    var fontFamily = _a.fontFamily;
+    return fontFamily;
+}, function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var margin = _a.margin;
+    return margin;
+}, function (_a) {
+    var extraStyles = _a.extraStyles;
+    return extraStyles;
+});
+var templateObject_1;

package/dist/src/components/atoms/paragraph/Paragraph.theme.d.ts

@@ -0,0 +1,27 @@
+export namespace fallbackValues {
+    export { fontFamily };
+    export { fontSize };
+}
+declare namespace fontFamily {
+    const p: string;
+    const pL: string;
+    const pS: string;
+    const pXS: string;
+    const pXXS: string;
+    const pXL: string;
+}
+declare namespace fontSize {
+    const p_1: string;
+    export { p_1 as p };
+    const pL_1: string;
+    export { pL_1 as pL };
+    const pS_1: string;
+    export { pS_1 as pS };
+    const pXS_1: string;
+    export { pXS_1 as pXS };
+    const pXXS_1: string;
+    export { pXXS_1 as pXXS };
+    const pXL_1: string;
+    export { pXL_1 as pXL };
+}
+export {};

package/dist/src/components/atoms/paragraph/Paragraph.theme.js

@@ -0,0 +1,21 @@
+var fontFamily = {
+    p: "Public Sans",
+    pL: "Public Sans",
+    pS: "Public Sans",
+    pXS: "Public Sans",
+    pXXS: "Public Sans",
+    pXL: "Public Sans"
+};
+// Comments assume base font size of 16px
+var fontSize = {
+    p: "1rem",
+    pL: "1.125rem",
+    pS: "0.875rem",
+    pXS: "0.75rem",
+    pXXS: "0.65rem",
+    pXL: "1.5rem" // 24px
+};
+export var fallbackValues = {
+    fontFamily: fontFamily,
+    fontSize: fontSize
+};

package/dist/src/components/atoms/paragraph/index.d.ts

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

package/dist/src/components/atoms/paragraph/index.js

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

package/dist/src/components/atoms/password-requirements/PasswordRequirements.d.ts

@@ -0,0 +1,5 @@
+export default PasswordRequirements;
+declare function PasswordRequirements({ password, isMobile }: {
+    password: any;
+    isMobile: any;
+}): JSX.Element;

package/dist/src/components/atoms/password-requirements/PasswordRequirements.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { IconNeutral, IconInvalid, IconValid } from "../../../deprecated/icons";
+import Paragraph from "../paragraph";
+import { Cluster, Stack, Box, Sidebar, Cover } from "../layouts";
+import { getInputState, MIN_LENGTH_ERROR, HAS_NUMBER_ERROR, HAS_UPPERCASE_LETTER_ERROR, HAS_LOWERCASE_LETTER_ERROR, HAS_SPECIAL_CHARACTER_ERROR, INPUT_STATE_INVALID, INPUT_STATE_NEUTRAL, INPUT_STATE_VALID } from "../../../util/inputValidationUtils";
+import { MINESHAFT_GREY, ATHENS_GREY, FOREST_GREEN, RAZZMATAZZ_RED } from "../../../constants/colors";
+var PasswordRequirements = function (_a) {
+    var _b;
+    var password = _a.password, isMobile = _a.isMobile;
+    var iconMap = (_b = {},
+        _b[INPUT_STATE_NEUTRAL] = {
+            icon: React.createElement(IconNeutral, { margin: "0 0.5rem 0 0" }),
+            color: MINESHAFT_GREY
+        },
+        _b[INPUT_STATE_INVALID] = {
+            icon: React.createElement(IconInvalid, { margin: "0 0.5rem 0 0" }),
+            color: RAZZMATAZZ_RED
+        },
+        _b[INPUT_STATE_VALID] = {
+            icon: React.createElement(IconValid, { margin: "0 0.5rem 0 0" }),
+            color: FOREST_GREEN
+        },
+        _b);
+    var validationMap = {
+        charactersValidation: {
+            validationMessage: "Password must be 8 characters",
+            validationRequirement: [MIN_LENGTH_ERROR]
+        },
+        numbersValidation: {
+            validationMessage: "Password must contain at least one number",
+            validationRequirement: [HAS_NUMBER_ERROR]
+        },
+        letterCaseValidation: {
+            validationMessage: "Password must contain an upper and lower case letter",
+            validationRequirement: [
+                HAS_UPPERCASE_LETTER_ERROR,
+                HAS_LOWERCASE_LETTER_ERROR
+            ]
+        },
+        specialCharacterValidation: {
+            validationMessage: "Password must contain a special character (!@#$%^&*.?)",
+            validationRequirement: [HAS_SPECIAL_CHARACTER_ERROR]
+        }
+    };
+    return (React.createElement(Box, { background: ATHENS_GREY, padding: isMobile ? "1rem" : "1.5rem", width: "100%" },
+        React.createElement(Cluster, { justify: "center", align: "center" },
+            React.createElement(Stack, null, Object.values(validationMap).map(function (item) { return (React.createElement(Box, { padding: "0", key: item.validationMessage },
+                React.createElement(Sidebar, { width: "24px", childGap: "0rem" },
+                    React.createElement(Box, { padding: "0", minHeight: "100%" },
+                        React.createElement(Cover, { minHeight: "100%", singleChild: true },
+                            React.createElement(Box, { padding: "0" }, iconMap[getInputState(password, item.validationRequirement)].icon))),
+                    React.createElement(Box, { padding: "0" },
+                        React.createElement(Sidebar, { onRight: true, childGap: "0rem" },
+                            React.createElement(Box, { padding: "0.15rem 0 0 0" },
+                                React.createElement(Cluster, { justify: "flex-start", align: "center" },
+                                    React.createElement(Stack, { fullHeight: true, childGap: "0.25rem" },
+                                        React.createElement(Paragraph, { variant: "pS", color: iconMap[getInputState(password, item.validationRequirement)].color }, item.validationMessage))))))))); })))));
+};
+export default PasswordRequirements;

package/dist/src/components/atoms/password-requirements/PasswordRequirements.stories.d.ts

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