@databiosphere/findable-ui 6.0.0 → 7.0.0

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.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.SummariesStory = void 0;
-const react_1 = __importDefault(require("react"));
-const summaries_1 = require("./summaries");
-exports.default = {
+import React from "react";
+import { Summaries } from "./summaries";
+export default {
     argTypes: {
         summaries: { control: "array" },
     },
-    component: summaries_1.Summaries,
+    component: Summaries,
     title: "Components/Summary",
 };
-const SummariesTemplate = (args) => (react_1.default.createElement(summaries_1.Summaries, Object.assign({}, args)));
-exports.SummariesStory = SummariesTemplate.bind({});
-exports.SummariesStory.args = {
+const SummariesTemplate = (args) => (React.createElement(Summaries, { ...args }));
+export const SummariesStory = SummariesTemplate.bind({});
+SummariesStory.args = {
     summaries: [
         { count: "1", label: "Species" },
         { count: "1.1k", label: "Donors" },

package/lib/components/Index/components/Hero/components/Summaries/summaries.styles.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dot = exports.Summary = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-const dot_1 = require("../../../../../common/Dot/dot");
-exports.Summary = styled_1.default.div `
+import styled from "@emotion/styled";
+import { mediaTabletDown, mediaTabletUp, } from "../../../../../../styles/common/mixins/breakpoints";
+import { Dot as DXDot } from "../../../../../common/Dot/dot";
+export const Summary = styled.div `
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -20,13 +14,13 @@ exports.Summary = styled_1.default.div `
     overflow: hidden;
   }
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     flex: none;
     flex-direction: row;
   }
 `;
-exports.Dot = (0, styled_1.default)(dot_1.Dot) `
-  ${breakpoints_1.mediaTabletDown} {
+export const Dot = styled(DXDot) `
+  ${mediaTabletDown} {
     display: none;
   }
 `;

package/lib/components/Index/components/Hero/hero.js

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Hero = void 0;
-const react_1 = __importDefault(require("react"));
-const title_1 = require("../../../common/Title/title");
-const exportButton_1 = require("./components/ExportButton/exportButton");
-const hero_styles_1 = require("./hero.styles");
-const Hero = ({ SideBarButton, Summaries, title, }) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null, (title || SideBarButton || Summaries) && (react_1.default.createElement(hero_styles_1.HeroLayout, null,
-        react_1.default.createElement(title_1.Title, { title: title }),
+import React from "react";
+import { Title } from "../../../common/Title/title";
+import { ExportButton } from "./components/ExportButton/exportButton";
+import { HeroLayout, SummaryWidget, Widgets } from "./hero.styles";
+export const Hero = ({ SideBarButton, Summaries, title, }) => {
+    return (React.createElement(React.Fragment, null, (title || SideBarButton || Summaries) && (React.createElement(HeroLayout, null,
+        React.createElement(Title, { title: title }),
         SideBarButton,
-        Summaries && (react_1.default.createElement(hero_styles_1.Widgets, null,
-            react_1.default.createElement(hero_styles_1.SummaryWidget, { buttonWidget: true }, Summaries),
-            react_1.default.createElement(exportButton_1.ExportButton, null)))))));
+        Summaries && (React.createElement(Widgets, null,
+            React.createElement(SummaryWidget, { buttonWidget: true }, Summaries),
+            React.createElement(ExportButton, null)))))));
 };
-exports.Hero = Hero;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -1,26 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeroStory = void 0;
-const react_1 = __importDefault(require("react"));
-const summaries_stories_1 = require("./components/Summaries/summaries.stories");
-const hero_1 = require("./hero");
-exports.default = {
+import React from "react";
+import { SummariesStory } from "./components/Summaries/summaries.stories";
+import { Hero } from "./hero";
+export default {
     argTypes: {
         Summaries: { table: { disable: true } },
         title: { table: { disable: true } },
     },
-    component: hero_1.Hero,
+    component: Hero,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Hero/ExploreView",
 };
-const HeroTemplate = (args) => react_1.default.createElement(hero_1.Hero, Object.assign({}, args));
-exports.HeroStory = HeroTemplate.bind({});
-exports.HeroStory.args = {
-    Summaries: react_1.default.createElement(summaries_stories_1.SummariesStory, Object.assign({}, summaries_stories_1.SummariesStory.args)),
+const HeroTemplate = (args) => React.createElement(Hero, { ...args });
+export const HeroStory = HeroTemplate.bind({});
+HeroStory.args = {
+    Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
     title: "Data Explorer",
 };

package/lib/components/Index/components/Hero/hero.styles.js

@@ -1,39 +1,33 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SummaryWidget = exports.Widgets = exports.HeroLayout = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../styles/common/mixins/breakpoints");
-exports.HeroLayout = styled_1.default.div `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp, mediaTabletUp, } from "../../../../styles/common/mixins/breakpoints";
+export const HeroLayout = styled.div `
   align-items: center;
   display: grid;
   gap: 16px;
   grid-template-columns: 1fr;
   padding: 0 16px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     grid-template-columns: 1fr auto;
     padding: 0;
   }
 `;
-exports.Widgets = styled_1.default.div `
+export const Widgets = styled.div `
   align-items: center;
   display: flex;
   height: 60px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     height: 40px;
     justify-self: flex-start;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     grid-column: 2;
     justify-self: flex-end;
   }
 `;
-exports.SummaryWidget = styled_1.default.div `
+export const SummaryWidget = styled.div `
   align-items: center;
   border: 1px solid ${({ theme }) => theme.palette.smoke.main};
   border-radius: 4px;
@@ -43,7 +37,7 @@ exports.SummaryWidget = styled_1.default.div `
   height: inherit;
   padding: 12px 16px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     border-radius: ${({ buttonWidget }) => buttonWidget ? "4px 0 0 4px" : "4px"};
     flex: none;
   }

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.js

@@ -1,44 +1,7 @@
-"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;
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-const material_1 = require("@mui/material");
-const core_1 = require("@popperjs/core");
-const react_1 = __importStar(require("react"));
-const tooltip_styles_1 = require("./tooltip.styles");
+import { Tooltip as MTooltip, } from "@mui/material";
+import { detectOverflow } from "@popperjs/core";
+import React, { useMemo, useState } from "react";
+import { TooltipContent } from "./tooltip.styles";
 const DEFAULT_FLIP_MODIFIER = {
     enabled: true,
     name: "flip",
@@ -56,10 +19,9 @@ const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
 /**
  * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
  */
-const Tooltip = (_a) => {
-    var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
-    const [maxHeight, setMaxHeight] = (0, react_1.useState)();
-    const modifiers = (0, react_1.useMemo)(() => [
+export const Tooltip = ({ children, className, title, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    const [maxHeight, setMaxHeight] = useState();
+    const modifiers = useMemo(() => [
         {
             enabled: true,
             fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
@@ -70,19 +32,18 @@ const Tooltip = (_a) => {
         DEFAULT_FLIP_MODIFIER,
         DEFAULT_PREVENT_OVERFLOW_MODIFIER,
     ], []);
-    return (react_1.default.createElement(material_1.Tooltip, Object.assign({ arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+    return (React.createElement(MTooltip, { arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
             popper: { modifiers },
             tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
-        }, title: react_1.default.createElement(tooltip_styles_1.TooltipContent, null, title) }, props), children));
+        }, title: React.createElement(TooltipContent, null, title), ...props }, children));
 };
-exports.Tooltip = Tooltip;
 /**
  * Calculate the max height of the tooltip based on the current popper modifier state.
  * @param state - Popper modifier state.
  * @returns tooltip maximum height.
  */
 function calculateMaxHeight(state) {
-    const overflow = (0, core_1.detectOverflow)(state);
+    const overflow = detectOverflow(state);
     const { placement } = state;
     if (placement === "left" || placement === "right") {
         return window.innerHeight - 32;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipContent = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.TooltipContent = styled_1.default.span `
+import styled from "@emotion/styled";
+export const TooltipContent = styled.span `
   overflow: scroll;
   overscroll-behavior: none;
   padding: 8px 12px;

package/lib/components/Index/components/NTag/nTag.js

@@ -1,27 +1,8 @@
-"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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NTag = void 0;
-const react_1 = __importDefault(require("react"));
-const tooltip_1 = require("./components/Tooltip/tooltip");
+import React from "react";
+import { Tooltip } from "./components/Tooltip/tooltip";
 /**
  * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
  */
-const NTag = (_a) => {
-    var { className, Tag, TooltipTitle } = _a, props = __rest(_a, ["className", "Tag", "TooltipTitle"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
-    return (react_1.default.createElement(tooltip_1.Tooltip, Object.assign({ className: className, title: TooltipTitle }, props), Tag));
+export const NTag = ({ className, Tag, TooltipTitle, ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */ }) => {
+    return (React.createElement(Tooltip, { className: className, title: TooltipTitle, ...props }, Tag));
 };
-exports.NTag = NTag;

package/lib/components/Index/components/NTagCell/nTagCell.js

@@ -1,33 +1,7 @@
-"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.NTagCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const typography_1 = require("../../../../theme/common/typography");
-const nTag_1 = require("../NTag/nTag");
+import { Chip as MChip, Typography, } from "@mui/material";
+import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
+import { NTag } from "../NTag/nTag";
 // Template constants
 const MAX_DISPLAYABLE_VALUES = 1;
 /**
@@ -42,15 +16,14 @@ function stringifyMetadataValues(metadataValues) {
  * Renders tag for NTag component.
  * Tooltip children require forward ref.
  */
-const Tag = (0, react_1.forwardRef)(function Tag(props, ref) {
-    return react_1.default.createElement(material_1.Chip, Object.assign({ ref: ref }, props));
+const Tag = forwardRef(function Tag(props, ref) {
+    return React.createElement(MChip, { ref: ref, ...props });
 });
 /**
  * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
  */
-const NTagCell = ({ label, TypographyProps, values, }) => {
+export const NTagCell = ({ label, TypographyProps, values, }) => {
     const metadataCount = values.length;
     const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
-    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: typography_1.TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: `${value}${v}`, variant: "inherit" }, TypographyProps), value))))));
+    return (React.createElement(React.Fragment, null, showNTag ? (React.createElement(NTag, { Tag: React.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: React.createElement(Typography, { display: "block", variant: TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (React.createElement(Typography, { key: `${value}${v}`, variant: "inherit", ...TypographyProps }, value))))));
 };
-exports.NTagCell = NTagCell;

package/lib/components/Index/components/NTagCell/nTagCell.stories.js

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NTagCellStory = void 0;
-const react_1 = __importDefault(require("react"));
-const nTagCell_1 = require("./nTagCell");
-exports.default = {
+import React from "react";
+import { NTagCell } from "./nTagCell";
+export default {
     argTypes: {
         label: { control: "text" },
         values: { control: "array" },
     },
-    component: nTagCell_1.NTagCell,
+    component: NTagCell,
     title: "Components/Table/Cell/NTagCell",
 };
-const NTagCellTemplate = (args) => (react_1.default.createElement(nTagCell_1.NTagCell, Object.assign({}, args)));
-exports.NTagCellStory = NTagCellTemplate.bind({});
-exports.NTagCellStory.args = {
+const NTagCellTemplate = (args) => (React.createElement(NTagCell, { ...args }));
+export const NTagCellStory = NTagCellTemplate.bind({});
+NTagCellStory.args = {
     label: "species",
     values: ["Homo sapiens", "Mus musculus"],
 };

package/lib/components/Index/components/TitleCell/titleCell.js

@@ -1,29 +1,10 @@
-"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_400 } from "../../../../theme/common/typography";
+import { Link } from "../../../Links/components/Link/link";
+import { TitleCell as Cell } from "./titleCell.styles";
+export const TitleCell = ({ title, ...props }) => {
+    return (React.createElement(Cell, { gridSx: { gap: 1 } },
+        typeof title === "string" ? (React.createElement(Typography, { variant: TEXT_BODY_400 }, title)) : (title),
+        React.createElement(Link, { ...props })));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TitleCell = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../theme/common/typography");
-const link_1 = require("../../../Links/components/Link/link");
-const titleCell_styles_1 = require("./titleCell.styles");
-const TitleCell = (_a) => {
-    var { title } = _a, props = __rest(_a, ["title"]);
-    return (react_1.default.createElement(titleCell_styles_1.TitleCell, { gridSx: { gap: 1 } },
-        typeof title === "string" ? (react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 }, title)) : (title),
-        react_1.default.createElement(link_1.Link, Object.assign({}, props))));
-};
-exports.TitleCell = TitleCell;

package/lib/components/Index/components/TitleCell/titleCell.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TitleCell = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../styles/common/mixins/fonts");
-const grid_1 = require("../../../common/Grid/grid");
-exports.TitleCell = (0, styled_1.default)(grid_1.Grid) `
-  ${fonts_1.textBodySmall400};
+import styled from "@emotion/styled";
+import { textBodySmall400 } from "../../../../styles/common/mixins/fonts";
+import { Grid } from "../../../common/Grid/grid";
+export const TitleCell = styled(Grid) `
+  ${textBodySmall400};
 `;

package/lib/components/Index/index.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Index = void 0;
-const react_1 = __importDefault(require("react"));
-const useLayoutState_1 = require("../../hooks/useLayoutState");
-const hero_1 = require("./components/Hero/hero");
-const index_styles_1 = require("./index.styles");
-const Index = ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
-    const { layoutState } = (0, useLayoutState_1.useLayoutState)();
+import React from "react";
+import { useLayoutState } from "../../hooks/useLayoutState";
+import { Hero } from "./components/Hero/hero";
+import { Index as IndexLayout } from "./index.styles";
+export const Index = ({ className, List, ListHero, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
+    const { layoutState } = useLayoutState();
     const { headerHeight } = layoutState;
-    return (react_1.default.createElement(index_styles_1.Index, { className: className, marginTop: headerHeight },
-        react_1.default.createElement(hero_1.Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
+    return (React.createElement(IndexLayout, { className: className, marginTop: headerHeight },
+        React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
         SubTitleHero,
         Tabs,
         ListHero,
         List));
 };
-exports.Index = Index;

package/lib/components/Index/index.stories.js

@@ -1,29 +1,23 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IndexStory = void 0;
-const react_1 = __importDefault(require("react"));
-const summaries_stories_1 = require("./components/Hero/components/Summaries/summaries.stories");
-const index_1 = require("./index");
-exports.default = {
+import React from "react";
+import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
+import { Index } from "./index";
+export default {
     argTypes: {
         List: { table: { disable: true } },
         Summaries: { table: { disable: true } },
         Tabs: { table: { disable: true } },
         title: { table: { disable: true } },
     },
-    component: index_1.Index,
+    component: Index,
     parameters: {
         layout: "fullscreen",
     },
     title: "Views/ExploreView",
 };
-exports.IndexStory = {
+export const IndexStory = {
     args: {
         List: undefined,
-        Summaries: react_1.default.createElement(summaries_stories_1.SummariesStory, Object.assign({}, summaries_stories_1.SummariesStory.args)),
+        Summaries: React.createElement(SummariesStory, { ...SummariesStory.args }),
         Tabs: undefined,
         title: "Explore Data",
     },

package/lib/components/Index/index.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Index = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../styles/common/mixins/breakpoints");
-exports.Index = (0, styled_1.default)("div") `
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../styles/common/mixins/breakpoints";
+export const Index = styled("div") `
   display: grid;
   flex: 1;
   gap: 16px;
@@ -14,7 +8,7 @@ exports.Index = (0, styled_1.default)("div") `
   padding: 24px 0;
   place-content: flex-start stretch;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     padding: 24px;
   }
 `;

package/lib/components/Layout/components/AppLayout/appLayout.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppLayout = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.AppLayout = styled_1.default.div `
+import styled from "@emotion/styled";
+export const AppLayout = styled.div `
   display: flex;
   flex-direction: column;
   height: 100vh;