@databiosphere/findable-ui 10.2.0 → 12.0.0

package/lib/components/Layout/components/Header/common/entities.d.ts

@@ -1,16 +1,17 @@
 import { BreakpointKey } from "../../../../../hooks/useBreakpointHelper";
 import { Social } from "../../../../common/Socials/socials";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-export declare type Navigation = [
+export type Navigation = [
     NavLinkItem[] | undefined,
     NavLinkItem[] | undefined,
     NavLinkItem[] | undefined
 ];
-export declare type SelectedMatch = SELECTED_MATCH | Partial<Record<BreakpointKey, boolean | SELECTED_MATCH>>;
+export type SelectedMatch = SELECTED_MATCH | Partial<Record<BreakpointKey, boolean | SELECTED_MATCH>>;
 export declare enum SELECTED_MATCH {
     EQUALS = "EQUALS",
     STARTS_WITH = "STARTS_WITH"
 }
 export interface SocialMedia {
     socials: Social[];
+    visible?: Partial<Record<BreakpointKey, boolean>>;
 }

package/lib/components/Layout/components/Header/common/utils.d.ts

@@ -1,6 +1,7 @@
 import { Breakpoint } from "@mui/material";
+import { UseBreakpoint } from "../../../../../hooks/useBreakpoint";
 import { NavLinkItem } from "../components/Content/components/Navigation/navigation";
-import { Navigation } from "./entities";
+import { Navigation, SocialMedia } from "./entities";
 /**
  * Returns the configured menu navigation links.
  * @param navigation - Navigation links.
@@ -14,3 +15,10 @@ export declare function getMenuNavigationLinks(navigation?: Navigation): NavLink
  * @returns navigation links.
  */
 export declare function getNavigationLinks(navigationLinks?: NavLinkItem[], breakpoint?: Breakpoint): NavLinkItem[];
+/**
+ * Returns true if the social media is visible at the current breakpoint.
+ * @param bp - Breakpoint.
+ * @param socialMedia - Social media.
+ * @returns true.
+ */
+export declare function isSocialsVisible(bp: Pick<UseBreakpoint, "breakpoint" | "lgUp">, socialMedia?: SocialMedia): boolean;

package/lib/components/Layout/components/Header/common/utils.js

@@ -1,5 +1,5 @@
 import { isClientSideNavigation } from "../../../../Links/common/utils";
-import { SELECTED_MATCH } from "./entities";
+import { SELECTED_MATCH, } from "./entities";
 /**
  * Adds to the set of selected patterns, for the navigation link, at the current breakpoint.
  * @param setOfPatterns - Set of selected patterns.
@@ -126,6 +126,21 @@ function isLinkVisible(navLinkItem, breakpoint) {
         return true; // Default is visible.
     return navLinkItem.visible[breakpoint] !== false;
 }
+/**
+ * Returns true if the social media is visible at the current breakpoint.
+ * @param bp - Breakpoint.
+ * @param socialMedia - Social media.
+ * @returns true.
+ */
+export function isSocialsVisible(bp, socialMedia) {
+    if (!socialMedia)
+        return false;
+    if (!bp.breakpoint)
+        return false;
+    if (!socialMedia.visible)
+        return bp.lgUp;
+    return socialMedia.visible[bp.breakpoint] !== false;
+}
 /**
  * Returns the navigation link with the selected matches, for the current breakpoint.
  * @param navLinkItem - Navigation link.

package/lib/components/Layout/components/Header/components/Announcements/announcements.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ComponentsConfig } from "../../../../../../config/entities";
 export interface AnnouncementsProps {
     announcements?: ComponentsConfig;

package/lib/components/Layout/components/Header/components/Content/components/Actions/actions.styles.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const HeaderActions: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UserProfile } from "../../../../../../../../../../../../hooks/useAuthentication/useFetchGoogleProfile";
 export interface AuthenticationMenuProps {
     onLogout: () => void;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.js

@@ -1,6 +1,6 @@
 import { MenuItem } from "@mui/material";
 import React, { useState } from "react";
-import { AuthenticationMenu as Menu, Avatar, UserIcon, UserNames, UserSummary, } from "./authenticationMenu.styles";
+import { Avatar, AuthenticationMenu as Menu, UserIcon, UserNames, UserSummary, } from "./authenticationMenu.styles";
 export const AuthenticationMenu = ({ onLogout, userProfile, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./authenticationMenu").AuthenticationMenuProps>;
+import { Meta } from "@storybook/react";
+import { AuthenticationMenu } from "./authenticationMenu";
+declare const _default: Meta<typeof AuthenticationMenu>;
 export default _default;
-export declare const AuthenticationMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./authenticationMenu").AuthenticationMenuProps>;
+export declare const AuthenticationMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./authenticationMenu").AuthenticationMenuProps>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/AuthenticationMenu/authenticationMenu.styles.d.ts

@@ -1,86 +1,23 @@
-/// <reference types="react" />
 export declare const AuthenticationMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const UserIcon: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "inkLight" | "ink" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: "large" | "medium" | "small" | "xsmall" | "xxsmall" | "xlarge" | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const UserIcon: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const UserSummary: import("@emotion/styled").StyledComponent<{
-    autoFocus?: boolean | undefined;
-    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
-    dense?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableGutters?: boolean | undefined;
-    divider?: boolean | undefined;
-    selected?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "dense" | "disableGutters" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const UserSummary: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "style" | "className" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const UserNames: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "fontSize" | "fontWeight" | "lineHeight" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontStyle" | "letterSpacing" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "p" | "style" | "className" | "classes" | "color" | "children" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const Avatar: import("@emotion/styled").StyledComponent<{
-    alt?: string | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
-    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
-        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    }) | undefined;
-    sizes?: string | undefined;
-    src?: string | undefined;
-    srcSet?: string | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "square" | "rounded" | "circular" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "imgProps"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const Avatar: import("@emotion/styled").StyledComponent<import("@mui/material").AvatarOwnProps & import("@mui/material").AvatarSlotsAndSlotProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "sx" | "variant" | "alt" | "src" | "sizes" | "srcSet" | "slotProps" | "slots" | "imgProps"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.d.ts

@@ -1,36 +1,5 @@
-/// <reference types="react" />
-export declare const StyledButton: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
-    disabled?: boolean | undefined;
-    disableElevation?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    endIcon?: import("react").ReactNode;
-    fullWidth?: boolean | undefined;
-    href?: string | undefined;
-    size?: "large" | "medium" | "small" | undefined;
-    startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Navigation/navigation.styles.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const Navigation: import("@emotion/styled").StyledComponent<import("../../../../../../../Navigation/navigation").NavigationProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const DrawerNavigation: import("@emotion/styled").StyledComponent<import("../../../../../../../Navigation/navigation").NavigationProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Content/components/Socials/socials.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Socials: import("@emotion/styled").StyledComponent<import("../../../../../../../../../../../../../common/Socials/socials").SocialsProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,5 +1,5 @@
 import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
-import { Dialog as MDialog, Fade, IconButton } from "@mui/material";
+import { Fade, IconButton, Dialog as MDialog } from "@mui/material";
 import React, { forwardRef, Fragment, useEffect } from "react";
 import { getMenuNavigationLinks } from "../../../../../../common/utils";
 import { AppBar } from "../../../../../../header.styles";

package/lib/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.d.ts

@@ -1,36 +1,5 @@
-/// <reference types="react" />
-export declare const StyledButton: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | undefined;
-    disabled?: boolean | undefined;
-    disableElevation?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    endIcon?: import("react").ReactNode;
-    fullWidth?: boolean | undefined;
-    href?: string | undefined;
-    size?: "large" | "medium" | "small" | undefined;
-    startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "nav" | "text" | "outlined" | "contained" | "activeNav" | "backNav" | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "fullWidth" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     closeMenu: () => void;
     closeSearch: () => void;

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import { IconButton } from "../../../../../../../../../../../common/IconButton/iconButton";
 export declare const SearchBar: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const SearchForm: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;
 export declare const SearchInput: import("@emotion/styled").StyledComponent<import("@mui/material").InputProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const ClearButton: ({ className, Icon, iconProps, open, size, ...props }: import("../../../../../../../../../../../common/IconButton/iconButton").IconButtonProps) => JSX.Element;
+export declare const ClearButton: typeof IconButton;

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ImageSrc } from "../../../../../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../../../../../Links/common/entities";
 export interface LogoProps {

package/lib/components/Layout/components/Header/components/Content/components/Logo/logo.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const StyledLink: import("@emotion/styled").StyledComponent<import("../../../../../../../Links/components/Link/link").LinkProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationDrawer/navigationDrawer.styles.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 export declare const Dialog: import("@emotion/styled").StyledComponent<import("@mui/material").DialogProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.js

@@ -1,5 +1,5 @@
 import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
-import { ClickAwayListener as MClickAwayListener, Grow, MenuList as MMenuList, Paper as MPaper, } from "@mui/material";
+import { Grow, ClickAwayListener as MClickAwayListener, MenuList as MMenuList, Paper as MPaper, } from "@mui/material";
 import React, { Fragment, useEffect } from "react";
 import { useMenu } from "../../../../../../../../../common/Menu/hooks/useMenu";
 import { NavigationButtonLabel } from "../NavigationButtonLabel/navigationButtonLabel";

package/lib/components/Layout/components/Header/components/Content/components/Navigation/components/NavigationMenu/navigationMenu.styles.d.ts

@@ -1,50 +1,15 @@
-/// <reference types="react" />
 interface Props {
     isActive: boolean;
 }
-export declare const StyledPopper: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
-    component?: import("react").ElementType<any> | undefined;
-    components?: {
-        Root?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    componentsProps?: {
-        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
-    } | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const StyledPopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const Button: import("@emotion/styled").StyledComponent<Omit<import("../../../../../../../../../common/Button/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
-export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<{
-    autoFocus?: boolean | undefined;
-    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
-    dense?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableGutters?: boolean | undefined;
-    divider?: boolean | undefined;
-    selected?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "dense" | "disableGutters" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "divider"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("@mui/material").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
+}, "style" | "className" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "disabled" | "action" | "selected" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters" | "divider"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export {};

package/lib/components/Layout/components/Header/components/Content/components/Navigation/navigation.styles.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 interface Props {
     isMenuIn: boolean;
 }
 export declare const Navigation: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Layout/components/Header/components/Content/components/Slogan/slogan.styles.d.ts

@@ -1,20 +1,9 @@
-/// <reference types="react" />
 export declare const Slogan: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Divider: import("@emotion/styled").StyledComponent<{
-    absolute?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").DividerClasses> | undefined;
-    flexItem?: boolean | undefined;
-    light?: boolean | undefined;
-    orientation?: "horizontal" | "vertical" | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    textAlign?: "center" | "right" | "left" | undefined;
-    variant?: "inset" | "middle" | "fullWidth" | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
-    ref?: ((instance: HTMLHRElement | null) => void) | import("react").RefObject<HTMLHRElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "textAlign" | "sx" | "variant" | "orientation" | "absolute" | "light" | "flexItem"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const Divider: import("@emotion/styled").StyledComponent<import("@mui/material").DividerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    ref?: ((instance: HTMLHRElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHRElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "textAlign" | "sx" | "variant" | "orientation" | "light" | "absolute" | "flexItem"> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/components/Socials/socials.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Socials: import("@emotion/styled").StyledComponent<import("../../../../../../../common/Socials/socials").SocialsProps & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Header/components/Content/content.styles.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/header.stories.d.ts

@@ -1,6 +1,6 @@
-import { StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { Header } from "./header";
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./header").HeaderProps>;
+declare const _default: Meta<typeof Header>;
 export default _default;
-declare type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof Header>;
 export declare const HeaderStory: Story;

package/lib/components/Layout/components/Header/header.styles.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="react" />
-export declare const AppBar: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").AppBarTypeMap<{}, "header">>;
+import { AppBar as MAppBar } from "@mui/material";
+export declare const AppBar: typeof MAppBar;
 export declare const Left: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Center: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Right: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/Header/hooks/useHeaderVisibility.js

@@ -1,4 +1,5 @@
 import { useBreakpoint } from "../../../../../hooks/useBreakpoint";
+import { isSocialsVisible } from "../common/utils";
 /**
  * Returns header component visibility for header related rendering logic.
  * @param headerProps - Header component props.
@@ -25,7 +26,7 @@ export const useHeaderVisibility = (headerProps) => {
     const isNavigationIn = smUp;
     const isMenuIn = hasMenu;
     const isSloganIn = hasSlogan && mdUp;
-    const isSocialsIn = hasSocials && lgUp;
+    const isSocialsIn = hasSocials && isSocialsVisible({ breakpoint, lgUp }, socialMedia);
     // Determines navigation visibility.
     const isCenterNavigationIn = isNavigationIn && hasNavItemsC;
     const isLeftNavigationIn = isNavigationIn && hasNavItemsL;