@databiosphere/findable-ui 6.0.0 → 8.0.0

package/lib/components/Layout/components/Sidebar/components/SidebarButton/sidebarButton.styles.js

@@ -1,31 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.SidebarButton = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-const buttonSecondary_1 = require("../../../../../common/Button/components/ButtonSecondary/buttonSecondary");
-exports.SidebarButton = (0, styled_1.default)(buttonSecondary_1.ButtonSecondary) `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp, mediaTabletUp, } from "../../../../../../styles/common/mixins/breakpoints";
+import { primaryMain, white, } from "../../../../../../styles/common/mixins/colors";
+import { ButtonSecondary } from "../../../../../common/Button/components/ButtonSecondary/buttonSecondary";
+export const SidebarButton = styled(ButtonSecondary) `
   grid-column: 1 / -1;
   padding: 10px;
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     grid-column: 2;
     justify-self: flex-end;
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     display: none;
   }
 `;
-exports.Badge = styled_1.default.div `
+export const Badge = styled.div `
   align-items: center;
-  background-color: ${colors_1.primaryMain};
+  background-color: ${primaryMain};
   border-radius: 10px;
-  color: ${colors_1.white};
+  color: ${white};
   display: flex;
   flex: none;
   font-size: 12px;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.js

@@ -1,22 +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.SidebarDrawer = void 0;
-const icons_material_1 = require("@mui/icons-material");
-const react_1 = __importDefault(require("react"));
-const iconButton_styles_1 = require("../../../../../common/IconButton/iconButton.styles");
-const drawerTransition_1 = require("../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition");
-const sidebarDrawer_styles_1 = require("./sidebarDrawer.styles");
+import { CloseRounded } from "@mui/icons-material";
+import React from "react";
+import { CloseDrawerIconButton } from "../../../../../common/IconButton/iconButton.styles";
+import { DrawerTransition } from "../../../../../Filter/components/Filter/components/DrawerTransition/drawerTransition";
+import { TemporarySidebar } from "./sidebarDrawer.styles";
 const DEFAULT_POSITION = { left: 0, top: 0 };
 const DRAWER_SLOT_PROPS = {
     paper: { square: true },
     root: { slotProps: { backdrop: { invisible: false } } },
 };
-const SidebarDrawer = ({ children, drawerOpen = false, onDrawerClose, }) => {
-    return (react_1.default.createElement(sidebarDrawer_styles_1.TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: drawerTransition_1.DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
-        react_1.default.createElement(iconButton_styles_1.CloseDrawerIconButton, { Icon: icons_material_1.CloseRounded, onClick: onDrawerClose, size: "medium" }),
+export const SidebarDrawer = ({ children, drawerOpen = false, onDrawerClose, }) => {
+    return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
+        React.createElement(CloseDrawerIconButton, { Icon: CloseRounded, onClick: onDrawerClose, size: "medium" }),
         children));
 };
-exports.SidebarDrawer = SidebarDrawer;

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.styles.js

@@ -1,18 +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.TemporarySidebar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-const colors_1 = require("../../../../../../styles/common/mixins/colors");
-exports.TemporarySidebar = (0, styled_1.default)(material_1.Popover) `
+import styled from "@emotion/styled";
+import { Popover as MPopover } from "@mui/material";
+import { mediaDesktopSmallDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { smokeLight } from "../../../../../../styles/common/mixins/colors";
+export const TemporarySidebar = styled(MPopover) `
   &.MuiPopover-root {
-    ${breakpoints_1.mediaDesktopSmallDown} {
+    ${mediaDesktopSmallDown} {
       & .MuiPaper-root {
-        background-color: ${colors_1.smokeLight};
+        background-color: ${smokeLight};
         box-shadow: 0 1px 4px 0 transparent; // required; possible bug - box shadow "none" affects rendering of main content.
         height: 100%;
         max-height: 100%;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_LARGE_500 } from "../../../../../../theme/common/typography";
+export const SidebarLabel = ({ label }) => {
+    return (React.createElement(Typography, { component: "div", variant: TEXT_BODY_LARGE_500 }, label));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarLabel = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const SidebarLabel = ({ label }) => {
-    return (react_1.default.createElement(material_1.Typography, { component: "div", variant: typography_1.TEXT_BODY_LARGE_500 }, label));
-};
-exports.SidebarLabel = SidebarLabel;

package/lib/components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel.stories.js

@@ -1,20 +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.SidebarLabelStory = void 0;
-const react_1 = __importDefault(require("react"));
-const sidebarLabel_1 = require("./sidebarLabel");
-exports.default = {
+import React from "react";
+import { SidebarLabel } from "./sidebarLabel";
+export default {
     argTypes: {
         label: { control: "text" },
     },
-    component: sidebarLabel_1.SidebarLabel,
+    component: SidebarLabel,
     title: "Components/Label",
 };
-const SidebarLabelTemplate = (args) => (react_1.default.createElement(sidebarLabel_1.SidebarLabel, Object.assign({}, args)));
-exports.SidebarLabelStory = SidebarLabelTemplate.bind({});
-exports.SidebarLabelStory.args = {
+const SidebarLabelTemplate = (args) => (React.createElement(SidebarLabel, { ...args }));
+export const SidebarLabelStory = SidebarLabelTemplate.bind({});
+SidebarLabelStory.args = {
     label: "Filter",
 };

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.js

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { SIDEBAR_POSITIONER } from "../../../../../../common/selectors";
+import { useLayoutState } from "../../../../../../hooks/useLayoutState";
+import { SidebarPositioner as Positioner } from "./sidebarPositioner.styles";
+export const SidebarPositioner = ({ children, }) => {
+    const { layoutState: { headerHeight }, } = useLayoutState();
+    return (React.createElement(Positioner, { headerHeight: headerHeight, id: SIDEBAR_POSITIONER }, children));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarPositioner = void 0;
-const react_1 = __importDefault(require("react"));
-const selectors_1 = require("../../../../../../common/selectors");
-const useLayoutState_1 = require("../../../../../../hooks/useLayoutState");
-const sidebarPositioner_styles_1 = require("./sidebarPositioner.styles");
-const SidebarPositioner = ({ children, }) => {
-    const { layoutState: { headerHeight }, } = (0, useLayoutState_1.useLayoutState)();
-    return (react_1.default.createElement(sidebarPositioner_styles_1.SidebarPositioner, { headerHeight: headerHeight, id: selectors_1.SIDEBAR_POSITIONER }, children));
-};
-exports.SidebarPositioner = SidebarPositioner;

package/lib/components/Layout/components/Sidebar/components/SidebarPositioner/sidebarPositioner.styles.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarPositioner = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-exports.SidebarPositioner = (0, styled_1.default)("div") `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+export const SidebarPositioner = styled("div") `
   height: 100%;
   overflow: visible;
   padding: 16px 0;
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     height: ${({ headerHeight }) => `calc(100vh - ${headerHeight}px)`};
     overflow: auto;
     padding: ${({ headerHeight }) => headerHeight}px 0 0;

package/lib/components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.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.SidebarTools = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../styles/common/mixins/breakpoints");
-exports.SidebarTools = styled_1.default.div `
+import styled from "@emotion/styled";
+import { mediaDesktopSmallUp } from "../../../../../../styles/common/mixins/breakpoints";
+export const SidebarTools = styled.div `
   display: grid;
   gap: 8px 0;
   grid-template-columns: 1fr auto;
@@ -17,7 +11,7 @@ exports.SidebarTools = styled_1.default.div `
     grid-column: 1 / -1; // SearchAllFilters component to utilize full width of the grid.
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     padding: 8px 16px;
   }
 `;

package/lib/components/Layout/components/Sidebar/sidebar.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.Sidebar = void 0;
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const sidebarDrawer_1 = require("./components/SidebarDrawer/sidebarDrawer");
-const sidebarPositioner_1 = require("./components/SidebarPositioner/sidebarPositioner");
-const sidebar_styles_1 = require("./sidebar.styles");
-const Sidebar = ({ children, drawerOpen, onDrawerClose, }) => {
-    const desktopSmDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.DESKTOP_SM);
+import React, { useEffect } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
+import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
+import { Sidebar as PermanentSidebar } from "./sidebar.styles";
+export const Sidebar = ({ children, drawerOpen, onDrawerClose, }) => {
+    const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const controlledSidebar = typeof drawerOpen === "boolean";
     const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
-    const Bar = drawerSidebar ? sidebarDrawer_1.SidebarDrawer : sidebar_styles_1.Sidebar;
+    const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
     const barProps = drawerSidebar ? { drawerOpen, onDrawerClose } : {};
     // Closes an open, controlled drawer sidebar with a change of breakpoint.
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (drawerOpen && !desktopSmDown) {
-            onDrawerClose === null || onDrawerClose === void 0 ? void 0 : onDrawerClose();
+            onDrawerClose?.();
         }
     }, [drawerOpen, onDrawerClose, desktopSmDown]);
-    return (react_1.default.createElement(Bar, Object.assign({}, barProps),
-        react_1.default.createElement(sidebarPositioner_1.SidebarPositioner, null, children)));
+    return (React.createElement(Bar, { ...barProps },
+        React.createElement(SidebarPositioner, null, children)));
 };
-exports.Sidebar = Sidebar;

package/lib/components/Layout/components/Sidebar/sidebar.stories.js

@@ -1,44 +1,38 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemporaryOpenSidebarStory = exports.TemporaryClosedSidebarStory = exports.PermanentSidebarStory = void 0;
-const react_1 = __importDefault(require("react"));
-const sidebar_1 = require("./sidebar");
-exports.default = {
+import React from "react";
+import { Sidebar } from "./sidebar";
+export default {
     argTypes: {
         children: { control: { disable: true } },
         drawerOpen: { control: { disable: true } },
         onDrawerClose: { control: { disable: true } },
     },
-    component: sidebar_1.Sidebar,
+    component: Sidebar,
     decorators: [
-        (Story) => (react_1.default.createElement("div", { style: {
+        (Story) => (React.createElement("div", { style: {
                 display: "flex",
                 minHeight: "100vh",
             } },
-            react_1.default.createElement(Story, null))),
+            React.createElement(Story, null))),
     ],
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Layout/Sidebar",
 };
-exports.PermanentSidebarStory = {
+export const PermanentSidebarStory = {
     args: {
-        children: react_1.default.createElement("div", null),
+        children: React.createElement("div", null),
     },
 };
-exports.TemporaryClosedSidebarStory = {
+export const TemporaryClosedSidebarStory = {
     args: {
-        children: react_1.default.createElement("div", null),
+        children: React.createElement("div", null),
         drawerOpen: false,
     },
 };
-exports.TemporaryOpenSidebarStory = {
+export const TemporaryOpenSidebarStory = {
     args: {
-        children: react_1.default.createElement("div", null),
+        children: React.createElement("div", null),
         drawerOpen: true,
     },
 };

package/lib/components/Layout/components/Sidebar/sidebar.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.Sidebar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.Sidebar = styled_1.default.div `
+import styled from "@emotion/styled";
+export const Sidebar = styled.div `
   align-self: stretch;
   border-right: 1px solid ${({ theme }) => theme.palette.smoke.main};
   box-sizing: content-box;

package/lib/components/Links/common/constants.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.URL_OBJECT_KEYS = void 0;
-exports.URL_OBJECT_KEYS = ["href", "query"];
+export const URL_OBJECT_KEYS = ["href", "query"];

package/lib/components/Links/common/entities.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ANCHOR_TARGET = void 0;
-var ANCHOR_TARGET;
+export var ANCHOR_TARGET;
 (function (ANCHOR_TARGET) {
     ANCHOR_TARGET["BLANK"] = "_blank";
     ANCHOR_TARGET["SELF"] = "_self";
-})(ANCHOR_TARGET = exports.ANCHOR_TARGET || (exports.ANCHOR_TARGET = {}));
+})(ANCHOR_TARGET || (ANCHOR_TARGET = {}));

package/lib/components/Links/common/utils.js

@@ -1,32 +1,26 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isURLString = exports.isURLObjectWithHrefAndQuery = exports.isClientSideNavigation = void 0;
-const constants_1 = require("./constants");
+import { URL_OBJECT_KEYS } from "./constants";
 /**
  * Returns true if the given link is an internal link.
  * @param link - Link.
  * @returns true if the given link is an internal link.
  */
-function isClientSideNavigation(link) {
+export function isClientSideNavigation(link) {
     return /^\/(?!\/)/.test(link);
 }
-exports.isClientSideNavigation = isClientSideNavigation;
 /**
  * Returns true if the given url is a URL object with href and query.
  * @param value - URL.
  * @returns true if the given url is a URL object with href and query.
  */
-function isURLObjectWithHrefAndQuery(value) {
+export function isURLObjectWithHrefAndQuery(value) {
     return (typeof value !== "string" &&
-        Object.entries(value).every(([key, value]) => constants_1.URL_OBJECT_KEYS.includes(key) && !!value));
+        Object.entries(value).every(([key, value]) => URL_OBJECT_KEYS.includes(key) && !!value));
 }
-exports.isURLObjectWithHrefAndQuery = isURLObjectWithHrefAndQuery;
 /**
  * Returns true if the given url is a string.
  * @param value - URL.
  * @returns true if the given url is a string.
  */
-function isURLString(value) {
+export function isURLString(value) {
     return typeof value === "string";
 }
-exports.isURLString = isURLString;

package/lib/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.js

@@ -1,57 +1,27 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExploreViewLink = void 0;
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importStar(require("react"));
-const useExploreState_1 = require("../../../../../../hooks/useExploreState");
-const exploreState_1 = require("../../../../../../providers/exploreState");
-const entities_1 = require("../../../../common/entities");
+import Link from "next/link";
+import React, { useCallback } from "react";
+import { useExploreState } from "../../../../../../hooks/useExploreState";
+import { ExploreActionKind, } from "../../../../../../providers/exploreState";
+import { ANCHOR_TARGET, } from "../../../../common/entities";
 const PARAM_FILTER = "filter";
 const PARAM_SORTING = "sorting";
-const ExploreViewLink = ({ className, label, onClick, target = entities_1.ANCHOR_TARGET.SELF, url, }) => {
-    const { exploreDispatch, exploreState } = (0, useExploreState_1.useExploreState)();
+export const ExploreViewLink = ({ className, label, onClick, target = ANCHOR_TARGET.SELF, url, }) => {
+    const { exploreDispatch, exploreState } = useExploreState();
     if (!isValidExploreURL(url, exploreState)) {
         throwError(url);
     }
-    const onNavigate = (0, react_1.useCallback)(() => {
+    const onNavigate = useCallback(() => {
         const entityListType = getEntityListType(url.href);
         const filters = getSelectedFilters(url.query);
         const sorting = getSorting(url.query);
         exploreDispatch({
             payload: { entityListType, filters, sorting },
-            type: exploreState_1.ExploreActionKind.UpdateEntityFilters,
+            type: ExploreActionKind.UpdateEntityFilters,
         });
-        onClick === null || onClick === void 0 ? void 0 : onClick();
+        onClick?.();
     }, [exploreDispatch, onClick, url]);
-    return (react_1.default.createElement(link_1.default, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
+    return (React.createElement(Link, { className: className, href: url.href, onClick: onNavigate, rel: "noopener", target: target }, label));
 };
-exports.ExploreViewLink = ExploreViewLink;
 /**
  * Returns the entity list type "entityListType" inferred from the given href.
  * @param href - Href.

package/lib/components/Links/components/Link/link.js

@@ -1,38 +1,31 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
-const material_1 = require("@mui/material");
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("../../../../common/utils");
-const copyToClipboard_1 = require("../../../common/CopyToClipboard/copyToClipboard");
-const entities_1 = require("../../common/entities");
-const utils_2 = require("../../common/utils");
-const exploreViewLink_1 = require("./components/ExploreViewLink/exploreViewLink");
-const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, }) => {
-    if ((0, utils_2.isURLObjectWithHrefAndQuery)(url)) {
+import { Link as MLink, Typography as MTypography, } from "@mui/material";
+import NLink from "next/link";
+import React from "react";
+import { isValidUrl } from "../../../../common/utils";
+import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
+import { ANCHOR_TARGET } from "../../common/entities";
+import { isClientSideNavigation, isURLObjectWithHrefAndQuery, isURLString, } from "../../common/utils";
+import { ExploreViewLink } from "./components/ExploreViewLink/exploreViewLink";
+export const Link = ({ className, copyable = false, label, noWrap = false, onClick, target, TypographyProps, url, }) => {
+    if (isURLObjectWithHrefAndQuery(url)) {
         /* Internal navigation - explore link */
-        return (react_1.default.createElement(exploreViewLink_1.ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
+        return (React.createElement(ExploreViewLink, { className: className, label: label, onClick: onClick, target: target, url: url }));
     }
-    if ((0, utils_2.isURLString)(url)) {
-        if ((0, utils_2.isClientSideNavigation)(url)) {
+    if (isURLString(url)) {
+        if (isClientSideNavigation(url)) {
             /* Client-side navigation */
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(link_1.default, { href: url, legacyBehavior: true, passHref: true },
-                    react_1.default.createElement(material_1.Link, Object.assign({ className: className, rel: "noopener", noWrap: noWrap, target: target || entities_1.ANCHOR_TARGET.SELF, onClick: onClick }, TypographyProps), label)),
-                copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(NLink, { href: url, legacyBehavior: true, passHref: true },
+                    React.createElement(MLink, { className: className, rel: "noopener", noWrap: noWrap, target: target || ANCHOR_TARGET.SELF, onClick: onClick, ...TypographyProps }, label)),
+                copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
-        if ((0, utils_1.isValidUrl)(url)) {
+        if (isValidUrl(url)) {
             /* External navigation */
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Link, Object.assign({ className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || entities_1.ANCHOR_TARGET.BLANK }, TypographyProps), label),
-                copyable && react_1.default.createElement(copyToClipboard_1.CopyToClipboard, { copyStr: url })));
+            return (React.createElement(React.Fragment, null,
+                React.createElement(MLink, { className: className, href: url, noWrap: noWrap, onClick: onClick, rel: "noopener noreferrer", target: target || ANCHOR_TARGET.BLANK, ...TypographyProps }, label),
+                copyable && React.createElement(CopyToClipboard, { copyStr: url })));
         }
     }
     /* Invalid URL */
-    return (react_1.default.createElement(material_1.Typography, Object.assign({ component: "span", variant: "inherit" }, TypographyProps), label));
+    return (React.createElement(MTypography, { component: "span", variant: "inherit", ...TypographyProps }, label));
 };
-exports.Link = Link;

package/lib/components/Links/links.js

@@ -1,18 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Links = void 0;
-const react_1 = __importDefault(require("react"));
-const link_1 = require("./components/Link/link");
-const Links = ({ divider, links }) => {
+import React from "react";
+import { Link } from "./components/Link/link";
+export const Links = ({ divider, links }) => {
     const lastLinkIndex = links.length - 1;
-    return (react_1.default.createElement(react_1.default.Fragment, null, links.map(({ copyable, label, noWrap, target, url }, i) => {
+    return (React.createElement(React.Fragment, null, links.map(({ copyable, label, noWrap, target, url }, i) => {
         const showDivider = i < lastLinkIndex && divider;
-        return (react_1.default.createElement("span", { key: `${url}${i}` },
-            react_1.default.createElement(link_1.Link, { copyable: copyable, label: label, noWrap: noWrap, target: target, url: url }),
+        return (React.createElement("span", { key: `${url}${i}` },
+            React.createElement(Link, { copyable: copyable, label: label, noWrap: noWrap, target: target, url: url }),
             showDivider && divider));
     })));
 };
-exports.Links = Links;

package/lib/components/Links/links.stories.js

@@ -1,24 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LinksStory = void 0;
-const react_1 = __importDefault(require("react"));
-const links_1 = require("./links");
-exports.default = {
+import React from "react";
+import { Links } from "./links";
+export default {
     argTypes: {
         links: { control: "array" },
     },
-    component: links_1.Links,
+    component: Links,
     title: "Components/Deprecated/Links",
 };
-const LinksTemplate = (args) => (react_1.default.createElement(links_1.Links, Object.assign({}, args)));
+const LinksTemplate = (args) => (React.createElement(Links, { ...args }));
 const FACEBOOK_URL = "https://www.facebook.com";
 const GOOGLE_URL = "https://www.google.com";
 const TWITTER_URL = "https://www.twitter.com";
-exports.LinksStory = LinksTemplate.bind({});
-exports.LinksStory.args = {
+export const LinksStory = LinksTemplate.bind({});
+LinksStory.args = {
     links: [
         { label: "Facebook", url: FACEBOOK_URL },
         { label: "Google", url: GOOGLE_URL },