@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/Layout/components/BackPage/backPageView.js

@@ -1,48 +1,21 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackPageView = void 0;
-const react_1 = __importStar(require("react"));
-const backPageView_styles_1 = require("./backPageView.styles");
-const BackPageView = ({ isDetailOverview = false, mainColumn, sideColumn, Tabs, top, }) => {
+import React, { Fragment } from "react";
+import { BackPageContent, BackPageContentMainColumn, BackPageContentSideColumn, BackPageHero, BackPageTabs, BackPageView as BackPageLayout, DetailPageOverviewContent, DetailPageOverviewContentMainColumn, DetailPageOverviewContentSideColumn, } from "./backPageView.styles";
+export const BackPageView = ({ isDetailOverview = false, mainColumn, sideColumn, Tabs, top, }) => {
     const Content = isDetailOverview
-        ? backPageView_styles_1.DetailPageOverviewContent
-        : backPageView_styles_1.BackPageContent;
+        ? DetailPageOverviewContent
+        : BackPageContent;
     const MainColumn = isDetailOverview
-        ? backPageView_styles_1.DetailPageOverviewContentMainColumn
+        ? DetailPageOverviewContentMainColumn
         : sideColumn
-            ? backPageView_styles_1.BackPageContentMainColumn
-            : react_1.Fragment;
+            ? BackPageContentMainColumn
+            : Fragment;
     const SideColumn = isDetailOverview
-        ? backPageView_styles_1.DetailPageOverviewContentSideColumn
-        : backPageView_styles_1.BackPageContentSideColumn;
-    return (react_1.default.createElement(backPageView_styles_1.BackPageView, null,
-        react_1.default.createElement(backPageView_styles_1.BackPageHero, null, top),
-        Tabs && react_1.default.createElement(backPageView_styles_1.BackPageTabs, null, Tabs),
-        react_1.default.createElement(Content, null,
-            react_1.default.createElement(MainColumn, null, mainColumn),
-            sideColumn && react_1.default.createElement(SideColumn, null, sideColumn))));
+        ? DetailPageOverviewContentSideColumn
+        : BackPageContentSideColumn;
+    return (React.createElement(BackPageLayout, null,
+        React.createElement(BackPageHero, null, top),
+        Tabs && React.createElement(BackPageTabs, null, Tabs),
+        React.createElement(Content, null,
+            React.createElement(MainColumn, null, mainColumn),
+            sideColumn && React.createElement(SideColumn, null, sideColumn))));
 };
-exports.BackPageView = BackPageView;

package/lib/components/Layout/components/BackPage/backPageView.stories.js

@@ -1,48 +1,41 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a, _b, _c, _d;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackPageViewStory = void 0;
-const react_1 = __importDefault(require("react"));
-const collaboratingOrganizations_stories_1 = require("../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories");
-const contacts_stories_1 = require("../../../Project/components/Contacts/contacts.stories");
-const contributors_stories_1 = require("../../../Project/components/Contributors/contributors.stories");
-const dataCurators_stories_1 = require("../../../Project/components/DataCurators/dataCurators.stories");
-const dataReleasePolicy_stories_1 = require("../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories");
-const description_stories_1 = require("../../../Project/components/Description/description.stories");
-const details_stories_1 = require("../../../Project/components/Details/details.stories");
-const publications_stories_1 = require("../../../Project/components/Publications/publications.stories");
-const supplementaryLinks_stories_1 = require("../../../Project/components/SupplementaryLinks/supplementaryLinks.stories");
-const backPageView_1 = require("./backPageView");
-exports.default = {
+import React from "react";
+import { CollaboratingOrganizationsStory } from "../../../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { ContactsStory } from "../../../Project/components/Contacts/contacts.stories";
+import { ContributorsStory } from "../../../Project/components/Contributors/contributors.stories";
+import { DataCuratorsStory } from "../../../Project/components/DataCurators/dataCurators.stories";
+import { DataReleasePolicyStory } from "../../../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DescriptionStory } from "../../../Project/components/Description/description.stories";
+import { DetailsStory } from "../../../Project/components/Details/details.stories";
+import { PublicationsStory } from "../../../Project/components/Publications/publications.stories";
+import { SupplementaryLinksStory } from "../../../Project/components/SupplementaryLinks/supplementaryLinks.stories";
+import { BackPageView } from "./backPageView";
+export default {
     argTypes: {
         isDetailOverview: { control: "boolean" },
         mainColumn: { table: { disable: true } },
         sideColumn: { table: { disable: true } },
         top: { table: { disable: true } },
     },
-    component: backPageView_1.BackPageView,
+    component: BackPageView,
     parameters: {
         layout: "fullscreen",
     },
     title: "Views/BackPage",
 };
-const BackPageViewTemplate = (args) => (react_1.default.createElement(backPageView_1.BackPageView, Object.assign({}, args)));
-exports.BackPageViewStory = BackPageViewTemplate.bind({});
-exports.BackPageViewStory.args = {
+const BackPageViewTemplate = (args) => (React.createElement(BackPageView, { ...args }));
+export const BackPageViewStory = BackPageViewTemplate.bind({});
+BackPageViewStory.args = {
     isDetailOverview: true,
-    mainColumn: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(description_stories_1.DescriptionStory, { projectDescription: ((_a = description_stories_1.DescriptionStory.args) === null || _a === void 0 ? void 0 : _a.projectDescription) || "None" }),
-        react_1.default.createElement(contacts_stories_1.ContactsStory, Object.assign({}, contacts_stories_1.ContactsStory.args)),
-        react_1.default.createElement(publications_stories_1.PublicationsStory, Object.assign({}, publications_stories_1.PublicationsStory.args)),
-        react_1.default.createElement(contributors_stories_1.ContributorsStory, Object.assign({}, contributors_stories_1.ContributorsStory.args)),
-        react_1.default.createElement(collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory, Object.assign({}, collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory.args)),
-        react_1.default.createElement(dataCurators_stories_1.DataCuratorsStory, Object.assign({}, dataCurators_stories_1.DataCuratorsStory.args)),
-        react_1.default.createElement(supplementaryLinks_stories_1.SupplementaryLinksStory, Object.assign({}, supplementaryLinks_stories_1.SupplementaryLinksStory.args)),
-        react_1.default.createElement(dataReleasePolicy_stories_1.DataReleasePolicyStory, null))),
-    sideColumn: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(details_stories_1.DetailsStory, { title: (_c = (_b = details_stories_1.DetailsStory.args) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : "", keyValuePairs: (_d = details_stories_1.DetailsStory.args) === null || _d === void 0 ? void 0 : _d.keyValuePairs }))),
-    top: react_1.default.createElement(react_1.default.Fragment, null),
+    mainColumn: (React.createElement(React.Fragment, null,
+        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
+        React.createElement(ContactsStory, { ...ContactsStory.args }),
+        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
+        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
+        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
+        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
+        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
+        React.createElement(DataReleasePolicyStory, null))),
+    sideColumn: (React.createElement(React.Fragment, null,
+        React.createElement(DetailsStory, { title: DetailsStory.args?.title ?? "", keyValuePairs: DetailsStory.args?.keyValuePairs }))),
+    top: React.createElement(React.Fragment, null),
 };

package/lib/components/Layout/components/BackPage/backPageView.styles.js

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DetailPageOverviewContentSideColumn = exports.DetailPageOverviewContentMainColumn = exports.BackPageContentSideColumn = exports.BackPageContentMainColumn = exports.BackPageContentSingleColumn = exports.DetailPageOverviewContent = exports.BackPageContent = exports.BackPageTabs = exports.BackPageHero = exports.BackPageView = void 0;
-const react_1 = require("@emotion/react");
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const sections_1 = require("../../../common/Sections/sections");
-exports.BackPageView = styled_1.default.div `
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TABLET } from "../../../../theme/common/breakpoints";
+import { Sections } from "../../../common/Sections/sections";
+export const BackPageView = styled.div `
   display: grid;
   flex: 1;
   gap: 16px;
@@ -16,29 +10,29 @@ exports.BackPageView = styled_1.default.div `
   margin: 0 16px;
   padding: 24px 0;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     grid-template-columns: repeat(12, 1fr);
     margin: 0 auto;
     max-width: min(calc(100% - 32px), 1232px);
   }
 `;
-exports.BackPageHero = styled_1.default.div `
+export const BackPageHero = styled.div `
   display: contents;
 
   > * {
     grid-column: 1 / -1;
   }
 `;
-exports.BackPageTabs = styled_1.default.div `
+export const BackPageTabs = styled.div `
   grid-column: 1 / -1;
 
-  ${({ theme }) => theme.breakpoints.down(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.down(TABLET)} {
     margin-left: -16px;
     margin-right: -16px;
   }
 `;
 // Back page content (main and side column wrapper).
-exports.BackPageContent = styled_1.default.div `
+export const BackPageContent = styled.div `
   align-items: flex-start;
   display: grid;
   gap: 16px 0;
@@ -47,7 +41,7 @@ exports.BackPageContent = styled_1.default.div `
   margin-left: -16px;
   margin-right: -16px;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     display: grid;
     gap: 16px;
     grid-template-columns: inherit;
@@ -61,47 +55,47 @@ exports.BackPageContent = styled_1.default.div `
 // These styles render:
 // - mobile - a gridded, flat paper environment, each section stacked with a 1px gap, and
 // - tablet - a main and side column arrangement, and within each column, a gridded, rounded paper environment, each section stacked with a 1px gap.
-exports.DetailPageOverviewContent = (0, styled_1.default)(exports.BackPageContent) `
+export const DetailPageOverviewContent = styled(BackPageContent) `
   background-color: ${({ theme }) => theme.palette.smoke.main};
   gap: 1px;
   padding: 1px 0;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     background-color: transparent;
     padding: 0;
   }
 `;
 // Back page content column.
-const BackPageContentColumn = styled_1.default.div `
+const BackPageContentColumn = styled.div `
   display: flex;
   flex-direction: column;
   gap: 16px 0;
 `;
-const mainColumn = (0, react_1.css) `
+const mainColumn = css `
   grid-column: 1 / 9;
 `;
-const sideColumn = (0, react_1.css) `
+const sideColumn = css `
   grid-column: 9 / -1;
 `;
 // Single column.
-exports.BackPageContentSingleColumn = (0, styled_1.default)(BackPageContentColumn) `
+export const BackPageContentSingleColumn = styled(BackPageContentColumn) `
   grid-column: 1 / -1;
 `;
 // Main column.
-exports.BackPageContentMainColumn = (0, styled_1.default)(BackPageContentColumn) `
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+export const BackPageContentMainColumn = styled(BackPageContentColumn) `
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     ${mainColumn};
   }
 `;
 // Side column.
-exports.BackPageContentSideColumn = (0, styled_1.default)(BackPageContentColumn) `
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+export const BackPageContentSideColumn = styled(BackPageContentColumn) `
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     ${sideColumn};
   }
 `;
 // EntityDetailView back page "overview" main column.
 // Typically used by back page "project" or "datasets" tab.
-exports.DetailPageOverviewContentMainColumn = (0, styled_1.default)(sections_1.Sections) `
+export const DetailPageOverviewContentMainColumn = styled(Sections) `
   display: contents;
 
   // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
@@ -109,7 +103,7 @@ exports.DetailPageOverviewContentMainColumn = (0, styled_1.default)(sections_1.S
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     align-self: flex-start;
     display: grid;
     ${mainColumn};
@@ -122,7 +116,7 @@ exports.DetailPageOverviewContentMainColumn = (0, styled_1.default)(sections_1.S
 `;
 // EntityDetailView back page "overview" side column.
 // Typically used by back page "project" or "datasets" tab.
-exports.DetailPageOverviewContentSideColumn = (0, styled_1.default)(sections_1.Sections) `
+export const DetailPageOverviewContentSideColumn = styled(Sections) `
   display: contents;
 
   // Added negation pseudo-class to ensure the display style is not applied to the style tag during initial rendering.
@@ -130,7 +124,7 @@ exports.DetailPageOverviewContentSideColumn = (0, styled_1.default)(sections_1.S
     display: contents; // required to override nested GridPaper.
   }
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     align-self: flex-start;
     display: grid;
     ${sideColumn};

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.js

@@ -1,43 +1,16 @@
-"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackPageHero = void 0;
-const react_1 = __importStar(require("react"));
-const breadcrumbs_1 = require("../../../../../common/Breadcrumbs/breadcrumbs");
-const title_1 = require("../../../../../common/Title/title");
-const backPageHero_styles_1 = require("./backPageHero.styles");
-const subTitle_1 = require("./components/SubTitle/subTitle");
-const BackPageHero = ({ breadcrumbs, callToAction, children, subTitle, title, }) => {
-    const HeroHeadline = callToAction ? backPageHero_styles_1.BackPageHeroHeadline : react_1.Fragment;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        (breadcrumbs || title) && (react_1.default.createElement(HeroHeadline, null,
-            react_1.default.createElement(backPageHero_styles_1.HeroHeader, { gap: 1 },
-                breadcrumbs && react_1.default.createElement(breadcrumbs_1.Breadcrumbs, { breadcrumbs: breadcrumbs }),
-                title && react_1.default.createElement(title_1.Title, { title: title }),
-                react_1.default.createElement(subTitle_1.SubTitle, { subTitle: subTitle })),
-            callToAction && react_1.default.createElement(backPageHero_styles_1.CallToActionButton, { callToAction: callToAction }))),
+import React, { Fragment } from "react";
+import { Breadcrumbs, } from "../../../../../common/Breadcrumbs/breadcrumbs";
+import { Title } from "../../../../../common/Title/title";
+import { BackPageHeroHeadline, CallToActionButton, HeroHeader, } from "./backPageHero.styles";
+import { SubTitle } from "./components/SubTitle/subTitle";
+export const BackPageHero = ({ breadcrumbs, callToAction, children, subTitle, title, }) => {
+    const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+    return (React.createElement(React.Fragment, null,
+        (breadcrumbs || title) && (React.createElement(HeroHeadline, null,
+            React.createElement(HeroHeader, { gap: 1 },
+                breadcrumbs && React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs }),
+                title && React.createElement(Title, { title: title }),
+                React.createElement(SubTitle, { subTitle: subTitle })),
+            callToAction && React.createElement(CallToActionButton, { callToAction: callToAction }))),
         children));
 };
-exports.BackPageHero = BackPageHero;

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.stories.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BackPageHeroStory = void 0;
-const backPageHero_1 = require("./backPageHero");
-exports.default = {
-    component: backPageHero_1.BackPageHero,
+import { BackPageHero } from "./backPageHero";
+export default {
+    component: BackPageHero,
     title: "Components/Hero",
 };
-exports.BackPageHeroStory = {
+export const BackPageHeroStory = {
     args: {
         title: "A Single-Cell Transcriptomic Map of the Human and Mouse Pancreas Reveals Inter- and Intra-cell Population Structure",
     },

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.js

@@ -1,21 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CallToActionButton = exports.HeroHeader = exports.BackPageHeroHeadline = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../../../theme/common/breakpoints");
-const callToActionButton_1 = require("../../../../../common/Button/components/CallToActionButton/callToActionButton");
-exports.BackPageHeroHeadline = styled_1.default.div `
+import styled from "@emotion/styled";
+import { Stack } from "@mui/material";
+import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
+export const BackPageHeroHeadline = styled.div `
   display: contents;
 
   > * {
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -25,14 +19,14 @@ exports.BackPageHeroHeadline = styled_1.default.div `
     }
   }
 `;
-exports.HeroHeader = (0, styled_1.default)(material_1.Stack) `
+export const HeroHeader = styled(Stack) `
   flex: 1;
 `;
-exports.CallToActionButton = (0, styled_1.default)(callToActionButton_1.CallToActionButton) `
+export const CallToActionButton = styled(CTAButton) `
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     justify-self: flex-end;
   }
 `;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/SubTitle/subTitle.js

@@ -1,25 +1,6 @@
-"use strict";
-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 { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../../../../../theme/common/typography";
+export const SubTitle = ({ subTitle, ...props /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */ }) => {
+    return (React.createElement(React.Fragment, null, typeof subTitle === "string" ? (React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_SMALL_400, ...props }, subTitle)) : (subTitle)));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubTitle = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../../../theme/common/typography");
-const SubTitle = (_a) => {
-    var { subTitle } = _a, props = __rest(_a, ["subTitle"]) /* Spread props to allow for Typography specific props TypographyProps e.g. "gutterBottom" or "noWrap". */;
-    return (react_1.default.createElement(react_1.default.Fragment, null, typeof subTitle === "string" ? (react_1.default.createElement(material_1.Typography, Object.assign({ color: "ink.light", variant: typography_1.TEXT_BODY_SMALL_400 }, props), subTitle)) : (subTitle)));
-};
-exports.SubTitle = SubTitle;

package/lib/components/Layout/components/ContentLayout/common/constants.js

@@ -1,29 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LAYOUT_STYLE_NO_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_NO_CONTRAST_LIGHT = exports.LAYOUT_STYLE_NO_CONTRAST_DEFAULT = exports.LAYOUT_STYLE_CONTRAST_LIGHTEST = exports.LAYOUT_STYLE_CONTRAST_LIGHT = void 0;
-const entities_1 = require("./entities");
-exports.LAYOUT_STYLE_CONTRAST_LIGHT = {
-    content: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
-    navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
-    outline: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+import { PANEL_BACKGROUND_COLOR } from "./entities";
+export const LAYOUT_STYLE_CONTRAST_LIGHT = {
+    content: PANEL_BACKGROUND_COLOR.DEFAULT,
+    navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+    outline: PANEL_BACKGROUND_COLOR.DEFAULT,
 };
-exports.LAYOUT_STYLE_CONTRAST_LIGHTEST = {
-    content: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
-    navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
-    outline: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+export const LAYOUT_STYLE_CONTRAST_LIGHTEST = {
+    content: PANEL_BACKGROUND_COLOR.DEFAULT,
+    navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+    outline: PANEL_BACKGROUND_COLOR.DEFAULT,
 };
-exports.LAYOUT_STYLE_NO_CONTRAST_DEFAULT = {
-    content: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
-    navigation: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
-    outline: entities_1.PANEL_BACKGROUND_COLOR.DEFAULT,
+export const LAYOUT_STYLE_NO_CONTRAST_DEFAULT = {
+    content: PANEL_BACKGROUND_COLOR.DEFAULT,
+    navigation: PANEL_BACKGROUND_COLOR.DEFAULT,
+    outline: PANEL_BACKGROUND_COLOR.DEFAULT,
 };
-exports.LAYOUT_STYLE_NO_CONTRAST_LIGHT = {
-    content: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
-    navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
-    outline: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+export const LAYOUT_STYLE_NO_CONTRAST_LIGHT = {
+    content: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+    navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
+    outline: PANEL_BACKGROUND_COLOR.SMOKE_LIGHT,
 };
-exports.LAYOUT_STYLE_NO_CONTRAST_LIGHTEST = {
-    content: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
-    navigation: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
-    outline: entities_1.PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+export const LAYOUT_STYLE_NO_CONTRAST_LIGHTEST = {
+    content: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+    navigation: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
+    outline: PANEL_BACKGROUND_COLOR.SMOKE_LIGHTEST,
 };

package/lib/components/Layout/components/ContentLayout/common/entities.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PANEL_BACKGROUND_COLOR = void 0;
-var PANEL_BACKGROUND_COLOR;
+export var PANEL_BACKGROUND_COLOR;
 (function (PANEL_BACKGROUND_COLOR) {
     PANEL_BACKGROUND_COLOR["DEFAULT"] = "DEFAULT";
     PANEL_BACKGROUND_COLOR["SMOKE_LIGHT"] = "SMOKE_LIGHT";
     PANEL_BACKGROUND_COLOR["SMOKE_LIGHTEST"] = "SMOKE_LIGHTEST";
-})(PANEL_BACKGROUND_COLOR = exports.PANEL_BACKGROUND_COLOR || (exports.PANEL_BACKGROUND_COLOR = {}));
+})(PANEL_BACKGROUND_COLOR || (PANEL_BACKGROUND_COLOR = {}));

package/lib/components/Layout/components/ContentLayout/components/Main/main.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { Main as ContentMain } from "../../../Main/main.styles";
+export const Main = ({ children, className }) => {
+    return React.createElement(ContentMain, { className: className }, children);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Main = void 0;
-const react_1 = __importDefault(require("react"));
-const main_styles_1 = require("../../../Main/main.styles");
-const Main = ({ children, className }) => {
-    return react_1.default.createElement(main_styles_1.Main, { className: className }, children);
-};
-exports.Main = Main;

package/lib/components/Layout/components/ContentLayout/contentLayout.js

@@ -1,25 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { useRouter } from "next/router";
+import React from "react";
+import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { Content, ContentGrid, ContentLayout as Layout, Navigation as NavigationPositioner, NavigationGrid, Outline as OutlinePositioner, OutlineGrid, } from "./contentLayout.styles";
+export const ContentLayout = ({ className, content, layoutStyle, navigation, outline, }) => {
+    const { asPath } = useRouter();
+    const { layoutState: { headerHeight }, } = useLayoutState();
+    return (React.createElement(Layout, { className: className, panelColor: layoutStyle?.content },
+        navigation && (React.createElement(NavigationGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.navigation },
+            React.createElement(NavigationPositioner, null, navigation))),
+        React.createElement(ContentGrid, { headerHeight: headerHeight, panelColor: layoutStyle?.content },
+            React.createElement(Content, null, content)),
+        outline && (React.createElement(OutlineGrid, { key: getOutlineKey(asPath), headerHeight: headerHeight, panelColor: layoutStyle?.outline },
+            React.createElement(OutlinePositioner, null, outline)))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentLayout = void 0;
-const router_1 = require("next/router");
-const react_1 = __importDefault(require("react"));
-const useLayoutState_1 = require("../../../../hooks/useLayoutState");
-const contentLayout_styles_1 = require("./contentLayout.styles");
-const ContentLayout = ({ className, content, layoutStyle, navigation, outline, }) => {
-    const { asPath } = (0, router_1.useRouter)();
-    const { layoutState: { headerHeight }, } = (0, useLayoutState_1.useLayoutState)();
-    return (react_1.default.createElement(contentLayout_styles_1.ContentLayout, { className: className, panelColor: layoutStyle === null || layoutStyle === void 0 ? void 0 : layoutStyle.content },
-        navigation && (react_1.default.createElement(contentLayout_styles_1.NavigationGrid, { headerHeight: headerHeight, panelColor: layoutStyle === null || layoutStyle === void 0 ? void 0 : layoutStyle.navigation },
-            react_1.default.createElement(contentLayout_styles_1.Navigation, null, navigation))),
-        react_1.default.createElement(contentLayout_styles_1.ContentGrid, { headerHeight: headerHeight, panelColor: layoutStyle === null || layoutStyle === void 0 ? void 0 : layoutStyle.content },
-            react_1.default.createElement(contentLayout_styles_1.Content, null, content)),
-        outline && (react_1.default.createElement(contentLayout_styles_1.OutlineGrid, { key: getOutlineKey(asPath), headerHeight: headerHeight, panelColor: layoutStyle === null || layoutStyle === void 0 ? void 0 : layoutStyle.outline },
-            react_1.default.createElement(contentLayout_styles_1.Outline, null, outline)))));
-};
-exports.ContentLayout = ContentLayout;
 /**
  * Returns outline key.
  * Facilitates re-rendering of outline when path changes, prevents stale active outline tab on navigation.