@databiosphere/findable-ui 37.0.0 → 38.0.0

package/lib/components/Index/components/EntityView/context/types.d.ts

@@ -0,0 +1,7 @@
+import { ToggleButtonGroupProps } from "@mui/material";
+import { VIEW_MODE, ViewStatus } from "../components/controls/ViewToggle/hooks/UseViewToggle/types";
+export interface EntityViewContextProps {
+    onChange: ToggleButtonGroupProps["onChange"];
+    viewMode: VIEW_MODE;
+    viewStatus: ViewStatus;
+}

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

@@ -1,2 +1,2 @@
 import { IndexProps } from "./types";
-export declare const Index: ({ categoryFilters, className, entityListType, entityName, ListHero, loading, SideBarButton, SubTitleHero, Summaries, Tabs, title, }: IndexProps) => JSX.Element;
+export declare const Index: ({ categoryFilters, className, entityListType, entityName, loading, }: IndexProps) => JSX.Element;

package/lib/components/Index/index.js

@@ -1,21 +1,38 @@
+import { Grid } from "@mui/material";
 import React from "react";
-import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
-import { ChartView } from "./components/EntitiesView/components/ChartView/chartView";
-import { EntityList } from "./components/EntitiesView/components/EntityList/entityList";
-import { EntitiesView } from "./components/EntitiesView/entitiesView";
-import { useEntitiesView } from "./components/EntitiesView/hooks/UseEntitiesView/hook";
-import { VIEW_MODE } from "./components/EntitiesView/hooks/UseEntitiesView/types";
-import { Hero } from "./components/Hero/hero";
-import { Index as IndexLayout } from "./index.styles";
+import { useLayoutSpacing } from "../../hooks/UseLayoutSpacing/hook";
+import { ActionButton } from "./components/EntityView/components/controls/ActionButton/actionButton";
+import { ExportButton } from "./components/EntityView/components/controls/ExportButton/exportButton";
+import { FilterButton } from "./components/EntityView/components/controls/FilterButton/filterButton";
+import { useViewToggle } from "./components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/hook";
+import { VIEW_MODE } from "./components/EntityView/components/controls/ViewToggle/hooks/UseViewToggle/types";
+import { Summary } from "./components/EntityView/components/layout/Summary/summary";
+import { Title } from "./components/EntityView/components/layout/Title/title";
+import { Tabs } from "./components/EntityView/components/navigation/Tabs/tabs";
+import { EntityListSlot } from "./components/EntityView/components/slots/EntityListSlot/entityListSlot";
+import { EntityViewSlot } from "./components/EntityView/components/slots/EntityViewSlot/entityViewSlot";
+import { ChartView } from "./components/EntityView/components/views/ChartView/chartView";
+import { TableView } from "./components/EntityView/components/views/TableView/tableView";
+import { EntityViewContext } from "./components/EntityView/context/context";
+import { StyledFluidPaper, StyledGridEntityLayout, StyledGridEntityList, StyledGridEntityView, } from "./index.styles";
 import { useTable } from "./table/hook";
-export const Index = ({ categoryFilters, className, entityListType, entityName, ListHero, loading, SideBarButton, SubTitleHero, Summaries, Tabs, title, }) => {
-    const { onChange, viewMode, viewStatus } = useEntitiesView();
-    const { dimensions } = useLayoutDimensions();
+export const Index = ({ categoryFilters, className, entityListType, entityName, loading, }) => {
+    const { onChange, viewMode, viewStatus } = useViewToggle();
+    const { spacing } = useLayoutSpacing();
     const { table } = useTable({ entityListType });
-    return (React.createElement(IndexLayout, { className: className, marginTop: dimensions.header.height },
-        React.createElement(Hero, { SideBarButton: SideBarButton, Summaries: Summaries, title: title }),
-        SubTitleHero,
-        Tabs,
-        ListHero,
-        React.createElement(EntitiesView, { onChange: onChange, viewMode: viewMode, viewStatus: viewStatus }, viewMode === VIEW_MODE.TABLE ? (React.createElement(EntityList, { entityListType: entityListType, loading: loading, table: table })) : (React.createElement(ChartView, { categoryFilters: categoryFilters, entityName: entityName, loading: loading })))));
+    return (React.createElement(StyledGridEntityView, { className: className, ...spacing },
+        React.createElement(EntityViewSlot, null),
+        React.createElement(StyledGridEntityLayout, { container: true },
+            React.createElement(Title, null),
+            React.createElement(Tabs, null),
+            React.createElement(Grid, { container: true, offset: "auto" },
+                React.createElement(Summary, null),
+                React.createElement(Grid, { container: true, gap: 2 },
+                    React.createElement(ActionButton, null),
+                    React.createElement(ExportButton, null),
+                    React.createElement(FilterButton, null)))),
+        React.createElement(EntityViewContext.Provider, { value: { onChange, viewMode, viewStatus } },
+            React.createElement(StyledGridEntityList, { container: true },
+                React.createElement(EntityListSlot, null),
+                React.createElement(StyledFluidPaper, { elevation: 0 }, viewMode === VIEW_MODE.TABLE ? (React.createElement(TableView, { entityListType: entityListType, loading: loading, table: table })) : (React.createElement(ChartView, { categoryFilters: categoryFilters, entityName: entityName, loading: loading })))))));
 };

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

@@ -1,8 +1,29 @@
-interface Props {
-    marginTop: number;
-}
-export declare const Index: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & Props, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export {};
+import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+export declare const StyledGridEntityView: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+} & LayoutSpacing, {}, {}>;
+export declare const StyledGridEntityLayout: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledFluidPaper: import("@emotion/styled").StyledComponent<import("../types").BaseComponentProps & import("@mui/material").PaperOwnProps & 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" | "elevation" | "square" | "variant"> & {
+    component?: React.ElementType;
+} & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledGridEntityList: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -1,14 +1,62 @@
 import styled from "@emotion/styled";
-import { mediaTabletUp } from "../../styles/common/mixins/breakpoints";
-export const Index = styled("div") `
+import { Grid } from "@mui/material";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import { FluidPaper } from "../common/Paper/components/FluidPaper/fluidPaper";
+export const StyledGridEntityView = styled(Grid) `
+  align-content: flex-start;
   display: grid;
   flex: 1;
+  gap: 0;
+  height: 100%;
+  max-height: 100vh;
+  overflow: hidden;
+  padding-top: ${({ top }) => top}px;
+`;
+export const StyledGridEntityLayout = styled(Grid) `
+  align-items: center;
+  gap: 16px;
+  min-height: 56px;
+  padding: 0 16px;
+  position: relative; /* required; positions box-shadow */
+
+  &:after {
+    content: "";
+    bottom: 0;
+    box-shadow: inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN};
+    height: 1px;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 2;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  .MuiGrid-root {
+    align-items: center;
+
+    &:empty {
+      display: none;
+    }
+  }
+`;
+export const StyledFluidPaper = styled(FluidPaper) `
+  background-color: ${PALETTE.SMOKE_MAIN};
+  display: grid;
+  gap: 1px;
+  overflow: hidden;
+  position: relative; /* required; positions table loading indicator */
+`;
+export const StyledGridEntityList = styled(Grid) `
+  display: grid;
   gap: 16px;
-  margin-top: ${({ marginTop }) => marginTop}px;
-  padding: 24px 0;
-  place-content: flex-start stretch;
+  margin: 16px;
+  overflow: hidden;
 
-  ${mediaTabletUp} {
-    padding: 24px;
+  ${mediaTabletDown} {
+    margin: 16px 0;
   }
 `;

package/lib/components/Index/types.d.ts

@@ -1,16 +1,9 @@
 import { BaseComponentProps } from "components/types";
 import { EntityConfig } from "config/entities";
-import { ReactNode } from "react";
 import { CategoryFilter } from "../../components/Filter/components/Filters/filters";
 export interface IndexProps extends BaseComponentProps {
     categoryFilters: CategoryFilter[];
     entityListType: string;
     entityName: EntityConfig["label"];
-    ListHero?: ReactNode | ReactNode[];
     loading: boolean;
-    SideBarButton?: ReactNode;
-    SubTitleHero?: ReactNode | ReactNode[];
-    Summaries?: ReactNode;
-    Tabs?: ReactNode;
-    title: ReactNode;
 }

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

@@ -10,7 +10,7 @@ export const BackPageHero = ({ actions, breadcrumbs, callToAction, children, sub
         React.createElement(HeroHeadline, null,
             React.createElement(HeroHeader, { gap: 1 },
                 breadcrumbs ? (isBreadcrumbArray(breadcrumbs) ? (React.createElement(Breadcrumbs, { breadcrumbs: breadcrumbs })) : (breadcrumbs)) : null,
-                title && React.createElement(Title, { title: title }),
+                React.createElement(Title, null, title),
                 React.createElement(SubTitle, { subTitle: subTitle })),
             actions,
             callToAction && React.createElement(CallToActionButton, { callToAction: callToAction })),

package/lib/components/Layout/components/Footer/components/VersionInfo/versionInfo.styles.d.ts

@@ -1,5 +1,5 @@
-export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material").ChipSlotsAndSlotProps & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+}, "label" | "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "variant" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled" | "slots" | "slotProps"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -3,21 +3,21 @@ export declare const AuthenticationMenu: import("@emotion/styled").StyledCompone
 }, {}, {}>;
 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" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loadingIndicator" | "edge"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 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"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "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").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;
-}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "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"> & {
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledAvatar: 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"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "alt" | "src" | "sizes" | "srcSet" | "variant" | "slots" | "slotProps" | "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,5 +1,5 @@
 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" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -1,5 +1,5 @@
 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" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -9,7 +9,7 @@ export declare const Button: import("@emotion/styled").StyledComponent<Omit<impo
 } & Props, {}, {}>;
 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"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "tabIndex" | "autoFocus" | "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/Slogan/slogan.styles.d.ts

@@ -4,6 +4,6 @@ export declare const Slogan: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 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" | "absolute" | "light" | "flexItem"> & {
+}, "style" | "className" | "classes" | "children" | "sx" | "orientation" | "textAlign" | "variant" | "absolute" | "light" | "flexItem"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/components/ContentsTab/contentsTab.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "value" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Layout/components/Outline/outline.styles.d.ts

@@ -5,12 +5,12 @@ interface Props extends TabProps {
 export declare const tab: import("@emotion/react").SerializedStyles;
 export declare const StyledTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & 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" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "variant" | "orientation" | "value" | "action" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+}, "style" | "value" | "className" | "classes" | "children" | "sx" | "orientation" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "variant" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export declare const StyledTab: import("@emotion/styled").StyledComponent<import("@mui/material").TabOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & 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;
-}, "label" | "style" | "className" | "classes" | "tabIndex" | "children" | "sx" | "disabled" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
+}, "label" | "style" | "value" | "className" | "classes" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "wrapped" | "iconPosition"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export {};

package/lib/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 export interface SidebarDrawerProps {
     children: ReactNode | ReactNode[];
-    drawerOpen?: boolean;
-    onDrawerClose?: () => void;
+    onClose?: () => void;
+    open?: boolean;
 }
-export declare const SidebarDrawer: ({ children, drawerOpen, onDrawerClose, }: SidebarDrawerProps) => JSX.Element;
+export declare const SidebarDrawer: ({ children, onClose, open, }: SidebarDrawerProps) => JSX.Element;

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

@@ -8,8 +8,8 @@ const DRAWER_SLOT_PROPS = {
     paper: { square: true },
     root: { slotProps: { backdrop: { invisible: false } } },
 };
-export const SidebarDrawer = ({ children, drawerOpen = false, onDrawerClose, }) => {
-    return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", "data-testid": TEST_IDS.SIDEBAR_DRAWER, hideBackdrop: false, marginThreshold: 0, onClose: onDrawerClose, open: drawerOpen, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: drawerOpen ? 250 : 300 },
-        React.createElement(IconButton, { Icon: CloseRounded, onClick: onDrawerClose, size: "medium" }),
+export const SidebarDrawer = ({ children, onClose, open = false, }) => {
+    return (React.createElement(TemporarySidebar, { anchorPosition: DEFAULT_POSITION, anchorReference: "anchorPosition", "data-testid": TEST_IDS.SIDEBAR_DRAWER, hideBackdrop: false, marginThreshold: 0, onClose: onClose, open: open, slotProps: DRAWER_SLOT_PROPS, TransitionComponent: DrawerTransition, transitionDuration: open ? 250 : 300 },
+        React.createElement(IconButton, { Icon: CloseRounded, onClick: onClose, size: "medium" }),
         children));
 };

package/lib/components/Layout/components/Sidebar/sidebar.d.ts

@@ -1,7 +1,2 @@
-import { ReactNode } from "react";
-export interface SidebarProps {
-    children: ReactNode | ReactNode[];
-    drawerOpen?: boolean;
-    onDrawerClose?: () => void;
-}
-export declare const Sidebar: ({ children, drawerOpen, onDrawerClose, }: SidebarProps) => JSX.Element;
+import { ChildrenProps } from "components/types";
+export declare const Sidebar: ({ children }: ChildrenProps) => JSX.Element;

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

@@ -2,23 +2,24 @@ import React, { useEffect } from "react";
 import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
 import { TEST_IDS } from "../../../../tests/testIds";
 import { DESKTOP_SM } from "../../../../theme/common/breakpoints";
+import { useDrawer } from "../../../common/Drawer/provider/hook";
 import { SidebarDrawer } from "./components/SidebarDrawer/sidebarDrawer";
 import { SidebarPositioner } from "./components/SidebarPositioner/sidebarPositioner";
 import { Sidebar as PermanentSidebar } from "./sidebar.styles";
-export const Sidebar = ({ children, drawerOpen, onDrawerClose, }) => {
+export const Sidebar = ({ children }) => {
+    const { onClose, open } = useDrawer();
     const desktopSmDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
-    const controlledSidebar = typeof drawerOpen === "boolean";
-    const drawerSidebar = controlledSidebar && desktopSmDown; // Sidebar is "temporary" drawer when drawerOpen is defined and breakpoint is smaller than the breakpoint.
+    const drawerSidebar = desktopSmDown;
     const Bar = drawerSidebar ? SidebarDrawer : PermanentSidebar;
     const barProps = drawerSidebar
-        ? { drawerOpen, onDrawerClose }
+        ? { onClose, open }
         : { "data-testid": TEST_IDS.SIDEBAR };
     // Closes an open, controlled drawer sidebar with a change of breakpoint.
     useEffect(() => {
-        if (drawerOpen && !desktopSmDown) {
-            onDrawerClose?.();
+        if (open && !desktopSmDown) {
+            onClose();
         }
-    }, [drawerOpen, onDrawerClose, desktopSmDown]);
+    }, [desktopSmDown, onClose, open]);
     return (React.createElement(Bar, { ...barProps },
         React.createElement(SidebarPositioner, null, children)));
 };

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

@@ -1,4 +1,3 @@
-import { fn } from "@storybook/test";
 import React from "react";
 import { Sidebar } from "./sidebar";
 export default {
@@ -28,13 +27,10 @@ export const PermanentSidebarStory = {
 export const TemporaryClosedSidebarStory = {
     args: {
         children: React.createElement("div", null),
-        drawerOpen: false,
     },
 };
 export const TemporaryOpenSidebarStory = {
     args: {
         children: React.createElement("div", null),
-        drawerOpen: true,
-        onDrawerClose: fn(),
     },
 };

package/lib/components/Login/components/Button/button.styles.d.ts

@@ -1,5 +1,5 @@
 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" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "loading" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Login/components/Section/components/Consent/consent.styles.d.ts

@@ -2,6 +2,6 @@ export declare const StyledGrid: import("@emotion/styled").StyledComponent<impor
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
 } & import("@mui/system").SystemProps<import("@mui/material").Theme> & 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;
-}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "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" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+}, "sx" | ("p" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "color" | "fontSize" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | keyof import("@mui/material").GridBaseProps> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepIcon/components/CompletedIcon/completedIcon.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledSvgIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
     ref?: ((instance: SVGSVGElement | 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<SVGSVGElement> | null | undefined;
-}, "style" | "fontSize" | "className" | "classes" | "color" | "children" | "shapeRendering" | "sx" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & {
+}, "style" | "className" | "classes" | "children" | "color" | "fontSize" | "htmlColor" | "inheritViewBox" | "shapeRendering" | "sx" | "titleAccess" | "viewBox"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Stepper/components/Step/components/StepLabel/components/Label/label.styles.d.ts

@@ -1,5 +1,5 @@
 export declare const StyledTypography: 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").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;
-}, "p" | "style" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "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"> & {
+}, "p" | "style" | "order" | "bottom" | "height" | "left" | "right" | "top" | "width" | "className" | "classes" | "children" | "color" | "fontSize" | "sx" | "display" | "fontFamily" | "fontStyle" | "fontWeight" | "letterSpacing" | "overflow" | "visibility" | "align" | "bgcolor" | "border" | "boxShadow" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "padding" | "paddingBlock" | "paddingInline" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/lib/components/Support/components/SupportRequest/components/Dialog/dialog.styles.d.ts

@@ -3,7 +3,7 @@ interface Props {
 }
 export declare const Fab: import("@emotion/styled").StyledComponent<import("@mui/material").FabOwnProps & 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" | "disableFocusRipple"> & {
+}, "style" | "size" | "href" | "className" | "classes" | "children" | "color" | "sx" | "tabIndex" | "disabled" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
     theme?: import("@emotion/react").Theme;
 } & Props, {}, {}>;
 export declare const Popover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & {

package/lib/components/Table/common/gridTable.styles.d.ts

@@ -3,6 +3,6 @@ export interface GridTableProps {
 }
 export declare const GridTable: import("@emotion/styled").StyledComponent<import("@mui/material").TableOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
     ref?: ((instance: HTMLTableElement | 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<HTMLTableElement> | null | undefined;
-}, "style" | "className" | "classes" | "children" | "padding" | "sx" | "size" | "stickyHeader"> & {
+}, "style" | "size" | "className" | "classes" | "children" | "sx" | "padding" | "stickyHeader"> & {
     theme?: import("@emotion/react").Theme;
 } & GridTableProps, {}, {}>;

package/lib/components/Table/common/gridTable.styles.js

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
+import { PALETTE } from "../../../styles/common/constants/palette";
 import { white } from "../../../styles/common/mixins/colors";
 export const GridTable = styled(MTable, {
     shouldForwardProp: (prop) => prop !== "gridTemplateColumns",
@@ -37,4 +38,13 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
+
+  &.MuiTable-stickyHeader {
+    .MuiTableHead-root {
+      box-shadow: 0px 1px ${PALETTE.SMOKE_MAIN};
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+  }
 `;