@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.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.AuthenticationMenuStory = void 0;
-const react_1 = __importDefault(require("react"));
-const authenticationMenu_1 = require("./authenticationMenu");
-exports.default = {
+import React from "react";
+import { AuthenticationMenu } from "./authenticationMenu";
+export default {
     argTypes: {
         onLogout: {
             description: "Callback to be called when 'Logout' button is clicked",
@@ -15,12 +9,12 @@ exports.default = {
             description: "User profile with name and avatar",
         },
     },
-    component: authenticationMenu_1.AuthenticationMenu,
+    component: AuthenticationMenu,
     title: "Components/Navigation/AuthenticationMenu",
 };
-const AuthenticationMenuTemplate = (args) => react_1.default.createElement(authenticationMenu_1.AuthenticationMenu, Object.assign({}, args));
-exports.AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
-exports.AuthenticationMenuStory.args = {
+const AuthenticationMenuTemplate = (args) => React.createElement(AuthenticationMenu, { ...args });
+export const AuthenticationMenuStory = AuthenticationMenuTemplate.bind({});
+AuthenticationMenuStory.args = {
     userProfile: {
         email: "john@smith.com",
         email_verified: true,

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.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.Avatar = exports.UserNames = exports.UserSummary = exports.UserIcon = exports.AuthenticationMenu = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-exports.AuthenticationMenu = (0, styled_1.default)(material_1.Menu) `
+import styled from "@emotion/styled";
+import { Avatar as MAvatar, IconButton as MIconButton, Menu as MMenu, MenuItem, Typography, } from "@mui/material";
+export const AuthenticationMenu = styled(MMenu) `
   margin: 4px 0;
 `;
-exports.UserIcon = (0, styled_1.default)(material_1.IconButton) `
+export const UserIcon = styled(MIconButton) `
   padding: 0;
 `;
-exports.UserSummary = (0, styled_1.default)(material_1.MenuItem) `
+export const UserSummary = styled(MenuItem) `
   display: block;
   cursor: inherit;
   border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
@@ -24,11 +18,11 @@ exports.UserSummary = (0, styled_1.default)(material_1.MenuItem) `
     background: inherit;
   }
 `;
-exports.UserNames = (0, styled_1.default)(material_1.Typography) `
+export const UserNames = styled(Typography) `
   font-weight: 500;
   max-width: 200px;
 `;
-exports.Avatar = (0, styled_1.default)(material_1.Avatar) `
+export const Avatar = styled(MAvatar) `
   height: 32px;
   width: 32px;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.js

@@ -1,27 +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.RequestAuthentication = void 0;
-const LoginRounded_1 = __importDefault(require("@mui/icons-material/LoginRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../../../../../theme/common/breakpoints");
-const constants_1 = require("../../../../../../../../common/constants");
-const requestAuthentication_styles_1 = require("./requestAuthentication.styles");
-const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const switchProps = constants_1.SWITCH_TRANSITION_PROPS;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: smDesktop }, switchProps),
-            react_1.default.createElement(requestAuthentication_styles_1.Button, { onClick: requestAuthorization, startIcon: react_1.default.createElement(LoginRounded_1.default, null), variant: "nav" }, "Sign in")),
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: !smDesktop }, switchProps),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: () => {
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import { Fade, IconButton } from "@mui/material";
+import React from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
+import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
+import { Button } from "./requestAuthentication.styles";
+export const RequestAuthentication = ({ closeMenu, requestAuthorization, }) => {
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const switchProps = SWITCH_TRANSITION_PROPS;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Fade, { in: smDesktop, ...switchProps },
+            React.createElement(Button, { onClick: requestAuthorization, startIcon: React.createElement(LoginRoundedIcon, null), variant: "nav" }, "Sign in")),
+        React.createElement(Fade, { in: !smDesktop, ...switchProps },
+            React.createElement(IconButton, { color: "ink", onClick: () => {
                     closeMenu();
                     requestAuthorization();
                 } },
-                react_1.default.createElement(LoginRounded_1.default, null)))));
+                React.createElement(LoginRoundedIcon, null)))));
 };
-exports.RequestAuthentication = RequestAuthentication;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const fonts_1 = require("../../../../../../../../../../../../styles/common/mixins/fonts");
-exports.Button = (0, styled_1.default)(material_1.Button) `
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
   & {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 6px 12px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.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.DrawerNavigation = exports.Navigation = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../../../../../../../../../../../../../styles/common/mixins/fonts");
-const navigation_1 = require("../../../../../../../Navigation/navigation");
-exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
+import styled from "@emotion/styled";
+import { textBody500, textBodyLarge500, } from "../../../../../../../../../../../../../../styles/common/mixins/fonts";
+import { Navigation as DXNavigation } from "../../../../../../../Navigation/navigation";
+export const Navigation = styled(DXNavigation) `
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -16,7 +10,7 @@ exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
   justify-content: flex-start;
 
   .MuiButton-nav {
-    ${fonts_1.textBodyLarge500};
+    ${textBodyLarge500};
     justify-content: space-between;
     padding: 12px 24px;
 
@@ -25,11 +19,11 @@ exports.Navigation = (0, styled_1.default)(navigation_1.Navigation) `
     }
   }
 `;
-exports.DrawerNavigation = (0, styled_1.default)(exports.Navigation) `
+export const DrawerNavigation = styled(Navigation) `
   gap: 0;
 
   .MuiButton-nav {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 14px 24px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Socials/socials.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.Socials = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const socials_1 = require("../../../../../../../../../../../../../common/Socials/socials");
-exports.Socials = (0, styled_1.default)(socials_1.Socials) `
+import styled from "@emotion/styled";
+import { Socials as DXSocials } from "../../../../../../../../../../../../../common/Socials/socials";
+export const Socials = styled(DXSocials) `
   gap: 16px;
   padding: 8px 16px;
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.js

@@ -1,48 +1,18 @@
-"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.Toolbar = void 0;
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const actions_1 = require("../../../../actions");
-const authentication_1 = require("../../../Authentication/authentication");
-const search_1 = require("../../../Search/search");
-const Toolbar = ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }) => {
-    return (react_1.default.createElement(react_1.Fragment, null,
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import { IconButton, Toolbar as MToolbar } from "@mui/material";
+import React, { Fragment } from "react";
+import { Actions } from "../../../../actions";
+import { Authentication } from "../../../Authentication/authentication";
+import { Search } from "../../../Search/search";
+export const Toolbar = ({ actions, Announcements, authenticationEnabled, Logo, onClose, searchEnabled, searchURL, }) => {
+    return (React.createElement(Fragment, null,
         Announcements,
-        react_1.default.createElement(material_1.Toolbar, null,
+        React.createElement(MToolbar, null,
             Logo,
-            react_1.default.createElement(actions_1.Actions, null,
-                react_1.default.createElement(search_1.Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
-                react_1.default.createElement(authentication_1.Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
+            React.createElement(Actions, null,
+                React.createElement(Search, { closeMenu: onClose, searchEnabled: searchEnabled, searchURL: searchURL }),
+                React.createElement(Authentication, { authenticationEnabled: authenticationEnabled, closeMenu: onClose }),
                 actions,
-                react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: onClose },
-                    react_1.default.createElement(CloseRounded_1.default, null))))));
+                React.createElement(IconButton, { color: "ink", onClick: onClose },
+                    React.createElement(CloseRoundedIcon, null))))));
 };
-exports.Toolbar = Toolbar;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/menu.js

@@ -1,64 +1,35 @@
-"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.Menu = void 0;
-const MenuRounded_1 = __importDefault(require("@mui/icons-material/MenuRounded"));
-const material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../../../theme/common/breakpoints");
-const constants_1 = require("../../../../../../common/constants");
-const utils_1 = require("../../../../../../common/utils");
-const header_styles_1 = require("../../../../../../header.styles");
-const content_styles_1 = require("../../../../content.styles");
-const slogan_1 = require("../../../Slogan/slogan");
-const navigation_styles_1 = require("./components/Content/components/Navigation/navigation.styles");
-const socials_styles_1 = require("./components/Content/components/Socials/socials.styles");
-const toolbar_1 = require("./components/Toolbar/toolbar");
-exports.Menu = (0, react_1.forwardRef)(function HeaderMenu({ closeMenu, headerProps, open, openMenu, style }, ref) {
+import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
+import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
+import React, { forwardRef, useEffect } from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../../../../../theme/common/breakpoints";
+import { SWITCH_TRANSITION_PROPS } from "../../../../../../common/constants";
+import { flattenNavigationLinks } from "../../../../../../common/utils";
+import { AppBar } from "../../../../../../header.styles";
+import { Content } from "../../../../content.styles";
+import { Slogan } from "../../../Slogan/slogan";
+import { Navigation } from "./components/Content/components/Navigation/navigation.styles";
+import { Socials } from "./components/Content/components/Socials/socials.styles";
+import { Toolbar } from "./components/Toolbar/toolbar";
+export const Menu = forwardRef(function HeaderMenu({ closeMenu, headerProps, open, openMenu, style }, ref) {
     const { navLinks, slogan, socialMedia } = headerProps;
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const switchProps = constants_1.SWITCH_TRANSITION_PROPS;
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const switchProps = SWITCH_TRANSITION_PROPS;
     // Set drawer open state to false on change of media breakpoint from mobile to "small desktop".
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (smDesktop) {
             closeMenu();
         }
     }, [closeMenu, smDesktop]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: !smDesktop }, switchProps),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
-                react_1.default.createElement(MenuRounded_1.default, null))),
-        react_1.default.createElement(material_1.Dialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: material_1.Fade, transitionDuration: smDesktop ? 0 : 600, TransitionProps: { easing: "ease-out" } },
-            react_1.default.createElement(header_styles_1.AppBar, { component: "div", elevation: 0 },
-                react_1.default.createElement(toolbar_1.Toolbar, Object.assign({ onClose: closeMenu }, headerProps))),
-            react_1.default.createElement(content_styles_1.Content, null,
-                slogan && react_1.default.createElement(slogan_1.Slogan, { slogan: slogan }),
-                react_1.default.createElement(navigation_styles_1.Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: (0, utils_1.flattenNavigationLinks)(navLinks) }),
-                socialMedia && (react_1.default.createElement(socials_styles_1.Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Fade, { in: !smDesktop, ...switchProps },
+            React.createElement(IconButton, { color: "ink", onClick: openMenu, ref: ref, style: style },
+                React.createElement(MenuRoundedIcon, null))),
+        React.createElement(MDialog, { disableScrollLock: true, fullScreen: true, hideBackdrop: true, keepMounted: false, onClose: closeMenu, open: open, PaperProps: { elevation: 0 }, TransitionComponent: Fade, transitionDuration: smDesktop ? 0 : 600, TransitionProps: { easing: "ease-out" } },
+            React.createElement(AppBar, { component: "div", elevation: 0 },
+                React.createElement(Toolbar, { onClose: closeMenu, ...headerProps })),
+            React.createElement(Content, null,
+                slogan && React.createElement(Slogan, { slogan: slogan }),
+                React.createElement(Navigation, { closeAncestor: closeMenu, headerProps: headerProps, links: flattenNavigationLinks(navLinks) }),
+                socialMedia && (React.createElement(Socials, { buttonSize: "xlarge", socials: socialMedia.socials }))))));
 });

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.js

@@ -1,46 +1,17 @@
-"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 });
-const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
-const react_1 = __importStar(require("react"));
-const buttonPrimary_1 = require("../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary");
-const searchIcon_1 = require("../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon");
-const searchBar_styles_1 = require("./searchBar.styles");
-function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
-    const inputRef = (0, react_1.useRef)(null);
-    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import React, { useRef, useState } from "react";
+import { ButtonPrimary } from "../../../../../../../../../../../common/Button/components/ButtonPrimary/buttonPrimary";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { ClearButton, SearchBar as SearchDialog, SearchForm, SearchInput, } from "./searchBar.styles";
+export default function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
+    const inputRef = useRef(null);
+    const [searchTerm, setSearchTerm] = useState("");
     /**
      * Clears search term and refocuses input.
      */
     const handleClear = () => {
-        var _a;
         setSearchTerm("");
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.current?.focus();
     };
     /**
      * Callback fired when the search term is changed.
@@ -74,10 +45,9 @@ function SearchBar({ closeMenu, closeSearch, searchOpen, searchURL, }) {
             window.location.href = location.href;
         }
     };
-    return (react_1.default.createElement(searchBar_styles_1.SearchBar, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
-        react_1.default.createElement(searchBar_styles_1.SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
-            react_1.default.createElement(searchIcon_1.SearchIcon, { fontSize: "small" }),
-            react_1.default.createElement(searchBar_styles_1.SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (react_1.default.createElement(searchBar_styles_1.ClearButton, { edge: "end", Icon: CloseRounded_1.default, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
-            react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { type: "submit" }, "Search"))));
+    return (React.createElement(SearchDialog, { fullWidth: true, hideBackdrop: true, maxWidth: false, onClose: closeSearch, open: searchOpen, PaperProps: { variant: "searchbar" }, TransitionProps: { onExited: handleExited } },
+        React.createElement(SearchForm, { onSubmit: (e) => handleSubmit(e, searchTerm, searchURL) },
+            React.createElement(SearchIcon, { fontSize: "small" }),
+            React.createElement(SearchInput, { autoFocus: true, disableUnderline: true, endAdornment: searchTerm ? (React.createElement(ClearButton, { edge: "end", Icon: CloseRoundedIcon, onClick: handleClear, size: "small" })) : undefined, fullWidth: true, inputRef: inputRef, onChange: handleChange, placeholder: "Type in keywords...", value: searchTerm }),
+            React.createElement(ButtonPrimary, { type: "submit" }, "Search"))));
 }
-exports.default = SearchBar;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchBar/searchBar.styles.js

@@ -1,30 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClearButton = exports.SearchInput = exports.SearchForm = exports.SearchBar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const iconButton_1 = require("../../../../../../../../../../../common/IconButton/iconButton");
-const constants_1 = require("../../../../../../../../common/constants");
-exports.SearchBar = (0, styled_1.default)(material_1.Dialog) `
+import styled from "@emotion/styled";
+import { Dialog, Input } from "@mui/material";
+import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
+import { HEADER_HEIGHT } from "../../../../../../../../common/constants";
+export const SearchBar = styled(Dialog) `
   .MuiDialog-container {
     width: 100%;
 
     .MuiDialog-paper {
-      margin-top: ${constants_1.HEADER_HEIGHT}px;
+      margin-top: ${HEADER_HEIGHT}px;
     }
   }
 `;
-exports.SearchForm = styled_1.default.form `
+export const SearchForm = styled.form `
   align-items: center;
   display: flex;
   gap: 16px;
   margin: 0;
   padding: 12px 16px;
 `;
-exports.SearchInput = (0, styled_1.default)(material_1.Input) `
+export const SearchInput = styled(Input) `
   border-bottom: 1px solid ${({ theme }) => theme.palette.smoke.main};
   height: 40px;
   padding: 0;
@@ -34,6 +28,6 @@ exports.SearchInput = (0, styled_1.default)(material_1.Input) `
     opacity: 1;
   }
 `;
-exports.ClearButton = (0, styled_1.default)(iconButton_1.IconButton) `
+export const ClearButton = styled(IconButton) `
   color: ${({ theme }) => theme.palette.ink.light};
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.js

@@ -1,24 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { Fade, IconButton } from "@mui/material";
+import React from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../../../../../../../../../hooks/useBreakpointHelper";
+import { DESKTOP_SM } from "../../../../../../../../../../../../theme/common/breakpoints";
+import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { SWITCH_TRANSITION_PROPS } from "../../../../../../../../common/constants";
+import { Button } from "./searchButton.styles";
+export const SearchButton = ({ openSearch }) => {
+    const smDesktop = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, DESKTOP_SM);
+    const switchProps = SWITCH_TRANSITION_PROPS;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Fade, { in: smDesktop, ...switchProps },
+            React.createElement(Button, { onClick: openSearch, startIcon: React.createElement(SearchIcon, null), variant: "nav" }, "Search")),
+        React.createElement(Fade, { in: !smDesktop, ...switchProps },
+            React.createElement(IconButton, { color: "ink", onClick: openSearch },
+                React.createElement(SearchIcon, { fontSize: "medium" })))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchButton = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const useBreakpointHelper_1 = require("../../../../../../../../../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../../../../../../../../../theme/common/breakpoints");
-const searchIcon_1 = require("../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon");
-const constants_1 = require("../../../../../../../../common/constants");
-const searchButton_styles_1 = require("./searchButton.styles");
-const SearchButton = ({ openSearch }) => {
-    const smDesktop = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.UP, breakpoints_1.DESKTOP_SM);
-    const switchProps = constants_1.SWITCH_TRANSITION_PROPS;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: smDesktop }, switchProps),
-            react_1.default.createElement(searchButton_styles_1.Button, { onClick: openSearch, startIcon: react_1.default.createElement(searchIcon_1.SearchIcon, null), variant: "nav" }, "Search")),
-        react_1.default.createElement(material_1.Fade, Object.assign({ in: !smDesktop }, switchProps),
-            react_1.default.createElement(material_1.IconButton, { color: "ink", onClick: openSearch },
-                react_1.default.createElement(searchIcon_1.SearchIcon, { fontSize: "medium" })))));
-};
-exports.SearchButton = SearchButton;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const fonts_1 = require("../../../../../../../../../../../../styles/common/mixins/fonts");
-exports.Button = (0, styled_1.default)(material_1.Button) `
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
+export const Button = styled(MButton) `
   & {
-    ${fonts_1.textBody500};
+    ${textBody500};
     padding: 6px 12px;
   }
 `;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.js

@@ -1,39 +1,9 @@
-"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;
+import React, { useState } from "react";
+import SearchBar from "./components/SearchBar/searchBar";
+import { SearchButton } from "./components/SearchButton/searchButton";
+export const Search = ({ closeMenu, searchEnabled, searchURL, }) => {
+    const [searchOpen, setSearchOpen] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        searchEnabled && (React.createElement(SearchButton, { openSearch: () => setSearchOpen(true) })),
+        React.createElement(SearchBar, { closeMenu: closeMenu, closeSearch: () => setSearchOpen(false), searchOpen: searchOpen, searchURL: searchURL })));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Search = void 0;
-const react_1 = __importStar(require("react"));
-const searchBar_1 = __importDefault(require("./components/SearchBar/searchBar"));
-const searchButton_1 = require("./components/SearchButton/searchButton");
-const Search = ({ closeMenu, searchEnabled, searchURL, }) => {
-    const [searchOpen, setSearchOpen] = (0, react_1.useState)(false);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        searchEnabled && (react_1.default.createElement(searchButton_1.SearchButton, { openSearch: () => setSearchOpen(true) })),
-        react_1.default.createElement(searchBar_1.default, { closeMenu: closeMenu, closeSearch: () => setSearchOpen(false), searchOpen: searchOpen, searchURL: searchURL })));
-};
-exports.Search = Search;