@databiosphere/findable-ui 10.2.0 → 12.0.0

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.js

@@ -1,61 +1,30 @@
 import { Box } from "@mui/material";
-import React, { useEffect, useRef, useState } from "react";
-import { API_FILE_LOCATION_FETCH } from "../../../../apis/azul/common/constants";
-import { useRequestFileLocation } from "../../../../hooks/useRequestFileLocation";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import { useFileLocation } from "../../../../hooks/useFileLocation";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { LoadingIcon } from "../../../common/CustomIcon/components/LoadingIcon/loadingIcon";
 import { IconButton } from "../../../common/IconButton/iconButton";
 import { StyledIconButton } from "./azulFileDownload.styles";
+import { AZUL_FILE_DOWNLOAD_TEST_ID, AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, } from "./common/constants";
 export const AzulFileDownload = ({ url, }) => {
+    const { fileUrl, isLoading, run } = useFileLocation(url);
     const downloadRef = useRef(null);
-    // Used to prevent the download button from being clicked twice
-    const [isDownloading, setIsDownloading] = useState(false);
-    // Correct the file fetch URL as per the Azul spec.
-    const azulFetchUrl = buildFetchFileUrl(url);
-    const { data, isLoading, isSuccess, run } = useRequestFileLocation(azulFetchUrl);
-    const fileLocation = data?.location;
+    const [isRequestPending, setIsRequestPending] = useState(false);
     // Initiates file download when file location request is successful.
     useEffect(() => {
-        if (isSuccess && fileLocation && downloadRef.current) {
-            const downloadEl = downloadRef.current;
-            downloadEl.href = fileLocation;
-            downloadEl.click();
-            setIsDownloading(false);
-        }
-    }, [fileLocation, isLoading, isSuccess]);
-    /**
-     * Initiate file location request.
-     */
-    const onFileLocationRequested = async () => {
-        // Prevent duplicate downloads
-        setIsDownloading(true);
-        run();
-    };
-    if (isDownloading)
-        return (React.createElement(StyledIconButton, { color: "primary", Icon: LoadingIcon, size: "medium" }));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { color: "primary", disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: onFileLocationRequested, size: "medium" }),
-        React.createElement(Box, { component: "a", download: true, ref: downloadRef, sx: { display: "none" } })));
+        if (!fileUrl)
+            return;
+        if (!downloadRef.current)
+            return;
+        const downloadEl = downloadRef.current;
+        downloadEl.href = fileUrl;
+        downloadEl.click();
+        setIsRequestPending(false);
+    }, [fileUrl]);
+    return (React.createElement(Fragment, null,
+        isRequestPending ? (React.createElement(StyledIconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID, Icon: LoadingIcon, size: "medium" })) : (React.createElement(IconButton, { color: "primary", "data-testid": AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID, disabled: !url, Icon: isLoading ? LoadingIcon : DownloadIcon, onClick: () => {
+                setIsRequestPending(true);
+                run();
+            }, size: "medium" })),
+        React.createElement(Box, { component: "a", "data-testid": AZUL_FILE_DOWNLOAD_TEST_ID, download: true, ref: downloadRef, sx: { display: "none" } })));
 };
-/**
- * Prepend "/fetch" to the path of the specified file URL, if not already included. See #1596.
- * @param fileUrl - Original file URL as returned from Azul.
- * @returns Complete and correct URL to use when requesting file location from Azul or undefined if no fileUrl is passed.
- */
-function buildFetchFileUrl(fileUrl) {
-    if (!fileUrl) {
-        return;
-    }
-    try {
-        const url = new URL(fileUrl);
-        const path = url.pathname;
-        if (!path.includes(API_FILE_LOCATION_FETCH)) {
-            url.pathname = `${API_FILE_LOCATION_FETCH}${path}`;
-        }
-        return url.toString();
-    }
-    catch (error) {
-        //console.log("error parsing file URL", fileUrl);
-        return;
-    }
-}

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./azulFileDownload").AzulFileDownloadProps>;
+import { ComponentMeta } from "@storybook/react";
+import { AzulFileDownload } from "./azulFileDownload";
+declare const _default: ComponentMeta<typeof AzulFileDownload>;
 export default _default;
-export declare const AzulFileDownloadStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./azulFileDownload").AzulFileDownloadProps>;
+export declare const AzulFileDownloadStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./azulFileDownload").AzulFileDownloadProps>;

package/lib/components/Index/components/AzulFileDownload/azulFileDownload.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("../../../common/IconButton/iconButton").IconButtonProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Index/components/AzulFileDownload/common/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const AZUL_FILE_DOWNLOAD_TEST_ID = "azul-file-download";
+export declare const AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID = "azul-file-request-download-pending";
+export declare const AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID = "azul-file-request-download";

package/lib/components/Index/components/AzulFileDownload/common/constants.js

@@ -0,0 +1,3 @@
+export const AZUL_FILE_DOWNLOAD_TEST_ID = "azul-file-download";
+export const AZUL_FILE_REQUEST_DOWNLOAD_PENDING_TEST_ID = "azul-file-request-download-pending";
+export const AZUL_FILE_REQUEST_DOWNLOAD_TEST_ID = "azul-file-request-download";

package/lib/components/Index/components/Cell/cell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CellProps {
     value?: number | string | string[];
 }

package/lib/components/Index/components/Hero/components/ExportButton/exportButton.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const ExportButton: () => JSX.Element;

package/lib/components/Index/components/Hero/components/ExportButton/exportButton.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./summaries").SummariesProps>;
+import { ComponentMeta } from "@storybook/react";
+import { Summaries } from "./summaries";
+declare const _default: ComponentMeta<typeof Summaries>;
 export default _default;
-export declare const SummariesStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./summaries").SummariesProps>;
+export declare const SummariesStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./summaries").SummariesProps>;

package/lib/components/Index/components/Hero/components/Summaries/summaries.styles.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 export declare const Summary: 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 Dot: import("@emotion/styled").StyledComponent<import("../../../../../common/Dot/dot").DotProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./hero").HeroProps>;
+import { ComponentMeta } from "@storybook/react";
+import { Hero } from "./hero";
+declare const _default: ComponentMeta<typeof Hero>;
 export default _default;
-export declare const HeroStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./hero").HeroProps>;
+export declare const HeroStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./hero").HeroProps>;

package/lib/components/Index/components/Hero/hero.styles.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
 interface Props {
     buttonWidget: boolean;
 }
 export declare const HeroLayout: 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 Widgets: 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 SummaryWidget: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps as MTooltipProps } from "@mui/material";
 export interface TooltipProps extends MTooltipProps {
     className?: string;

package/lib/components/Index/components/NTag/components/Tooltip/tooltip.styles.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const TooltipContent: 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<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Index/components/NTagCell/nTagCell.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { TypographyProps } from "../../../common/Typography/common/entities";
-export declare type MetadataValue = string;
+export type MetadataValue = string;
 export interface NTagCellProps {
     label: string;
     TypographyProps?: TypographyProps;

package/lib/components/Index/components/NTagCell/nTagCell.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./nTagCell").NTagCellProps>;
+import { ComponentMeta } from "@storybook/react";
+import { NTagCell } from "./nTagCell";
+declare const _default: ComponentMeta<typeof NTagCell>;
 export default _default;
-export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./nTagCell").NTagCellProps>;
+export declare const NTagCellStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./nTagCell").NTagCellProps>;

package/lib/components/Index/components/Tabs/tabs.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Tabs: () => JSX.Element | null;

package/lib/components/Index/components/TitleCell/titleCell.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const TitleCell: import("@emotion/styled").StyledComponent<import("../../../common/Grid/grid").GridProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Index/index.stories.d.ts

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

package/lib/components/Index/index.styles.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 interface Props {
     marginTop: number;
 }
 export declare const Index: 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/AppLayout/appLayout.styles.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const AppLayout: 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/BackPage/backPageView.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { BackPageContent, BackPageContentMainColumn, BackPageContentSideColumn, BackPageHero, BackPageTabs, BackPageView as BackPageLayout, DetailPageOverviewContent, DetailPageOverviewContentMainColumn, DetailPageOverviewContentSideColumn, } from "./backPageView.styles";
+import { BackPageContent, BackPageContentMainColumn, BackPageContentSideColumn, BackPageHero, BackPageView as BackPageLayout, BackPageTabs, DetailPageOverviewContent, DetailPageOverviewContentMainColumn, DetailPageOverviewContentSideColumn, } from "./backPageView.styles";
 export const BackPageView = ({ isDetailOverview = false, mainColumn, sideColumn, Tabs, top, }) => {
     const Content = isDetailOverview
         ? DetailPageOverviewContent

package/lib/components/Layout/components/BackPage/backPageView.stories.d.ts

@@ -1,3 +1,5 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./backPageView").BackPageViewProps>;
+import { ComponentMeta } from "@storybook/react";
+import { BackPageView } from "./backPageView";
+declare const _default: ComponentMeta<typeof BackPageView>;
 export default _default;
-export declare const BackPageViewStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./backPageView").BackPageViewProps>;
+export declare const BackPageViewStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./backPageView").BackPageViewProps>;

package/lib/components/Layout/components/BackPage/backPageView.styles.d.ts

@@ -1,47 +1,46 @@
-/// <reference types="react" />
 export declare const BackPageView: 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 BackPageHero: 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 BackPageTabs: 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 BackPageContent: 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 DetailPageOverviewContent: 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").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const BackPageContentSingleColumn: 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").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const BackPageContentMainColumn: 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").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const BackPageContentSideColumn: 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").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const DetailPageOverviewContentMainColumn: import("@emotion/styled").StyledComponent<import("../../../common/Sections/sections").SectionsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const DetailPageOverviewContentSideColumn: import("@emotion/styled").StyledComponent<import("../../../common/Sections/sections").SectionsProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.d.ts

@@ -5,10 +5,11 @@ import { CallToAction } from "../../../../../common/Button/components/CallToActi
  * Back page hero component comprising breadcrumbs, title, status and tabs.
  */
 export interface BackPageHeroProps {
+    actions?: ReactNode;
     breadcrumbs?: Breadcrumb[];
     callToAction?: CallToAction;
     children?: ReactNode;
     subTitle?: ReactNode;
     title?: ReactNode;
 }
-export declare const BackPageHero: ({ breadcrumbs, callToAction, children, subTitle, title, }: BackPageHeroProps) => JSX.Element;
+export declare const BackPageHero: ({ actions, breadcrumbs, callToAction, children, subTitle, title, }: BackPageHeroProps) => JSX.Element;

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

@@ -3,14 +3,15 @@ import { Breadcrumbs, } from "../../../../../common/Breadcrumbs/breadcrumbs";
 import { Title } from "../../../../../common/Title/title";
 import { BackPageHeroHeadline, CallToActionButton, HeroHeader, } from "./backPageHero.styles";
 import { SubTitle } from "./components/SubTitle/subTitle";
-export const BackPageHero = ({ breadcrumbs, callToAction, children, subTitle, title, }) => {
-    const HeroHeadline = callToAction ? BackPageHeroHeadline : Fragment;
+export const BackPageHero = ({ actions, breadcrumbs, callToAction, children, subTitle, title, }) => {
+    const HeroHeadline = actions || callToAction ? BackPageHeroHeadline : Fragment;
     return (React.createElement(React.Fragment, null,
         (breadcrumbs || title) && (React.createElement(HeroHeadline, null,
             React.createElement(HeroHeader, { gap: 1 },
                 breadcrumbs && React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs }),
                 title && React.createElement(Title, { title: title }),
                 React.createElement(SubTitle, { subTitle: subTitle })),
+            actions,
             callToAction && React.createElement(CallToActionButton, { callToAction: callToAction }))),
         children));
 };

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.stories.d.ts

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

package/lib/components/Layout/components/BackPage/components/BackPageHero/backPageHero.styles.d.ts

@@ -1,20 +1,12 @@
-/// <reference types="react" />
 export declare const BackPageHeroHeadline: 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 HeroHeader: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
-    children?: import("react").ReactNode;
-    direction?: import("@mui/system").ResponsiveStyleValue<"row" | "column" | "column-reverse" | "row-reverse"> | undefined;
-    spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
-    divider?: import("react").ReactNode;
-    useFlexGap?: boolean | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | 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" | "direction" | ("fontSize" | "fontWeight" | "lineHeight" | "textTransform" | "p" | "color" | "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") | "sx" | "spacing" | "divider" | "useFlexGap"> & {
-    theme?: import("@emotion/react").Theme | undefined;
+export declare const HeroHeader: import("@emotion/styled").StyledComponent<import("@mui/material").StackOwnProps & 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;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | keyof import("@mui/material").StackOwnProps> & {
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const CallToActionButton: import("@emotion/styled").StyledComponent<import("../../../../../common/Button/components/CallToActionButton/callToActionButton").CallToActionButtonProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Stack } from "@mui/material";
-import { TABLET } from "../../../../../../theme/common/breakpoints";
+import { mediaTabletUp } from "../../../../../../styles/common/mixins/breakpoints";
 import { CallToActionButton as CTAButton } from "../../../../../common/Button/components/CallToActionButton/callToActionButton";
 export const BackPageHeroHeadline = styled.div `
   display: contents;
@@ -9,7 +9,7 @@ export const BackPageHeroHeadline = styled.div `
     grid-column: 1 / -1; // Title and breadcrumbs consume full width of available grid.
   }
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     display: flex;
     flex: 1;
     gap: 88px;
@@ -26,7 +26,7 @@ export const CallToActionButton = styled(CTAButton) `
   align-self: center;
   justify-self: flex-start;
 
-  ${({ theme }) => theme.breakpoints.up(TABLET)} {
+  ${mediaTabletUp} {
     justify-self: flex-end;
   }
 `;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export interface ActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const Actions: ({ children, className }: ActionsProps) => JSX.Element;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { BackPageHeroActions } from "./actions.styles";
+export const Actions = ({ children, className }) => {
+    return (React.createElement(BackPageHeroActions, { className: className }, children));
+};

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const BackPageHeroActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/Layout/components/BackPage/components/BackPageHero/components/Actions/actions.styles.js

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+export const BackPageHeroActions = styled.div `
+  align-items: center;
+  align-self: center;
+  display: flex;
+  gap: 16px;
+  justify-self: flex-start;
+
+  ${mediaTabletUp} {
+    justify-self: flex-end;
+  }
+`;

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

@@ -8,4 +8,4 @@ export declare enum PANEL_BACKGROUND_COLOR {
     SMOKE_LIGHT = "SMOKE_LIGHT",
     SMOKE_LIGHTEST = "SMOKE_LIGHTEST"
 }
-export declare type PanelBackgroundColor = keyof typeof PANEL_BACKGROUND_COLOR;
+export type PanelBackgroundColor = keyof typeof PANEL_BACKGROUND_COLOR;

package/lib/components/Layout/components/ContentLayout/contentLayout.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PanelBackgroundColor } from "./common/entities";
 interface LayoutProps {
     panelColor?: PanelBackgroundColor;
@@ -8,35 +7,35 @@ interface GridProps {
     panelColor?: PanelBackgroundColor;
 }
 export declare const ContentLayout: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & LayoutProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const NavigationGrid: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ContentGrid: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OutlineGrid: 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;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Positioner: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & GridProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 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?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 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 Outline: 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 {};

package/lib/components/Layout/components/Floating/floating.d.ts

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

package/lib/components/Layout/components/Footer/footer.stories.d.ts

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

package/lib/components/Layout/components/Footer/footer.styles.d.ts

@@ -1,12 +1,12 @@
-/// <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 Links: 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 Link: import("@emotion/styled").StyledComponent<import("../../../Links/components/Link/link").LinkProps & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 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;
 }, {}, {}>;