@keycloakify/keycloak-account-ui 26.0.0-rc.3 → 260007.0.0

package/src/ui-shared/controls/table/PaginatingTableToolbar.tsx

@@ -1,106 +0,0 @@
-import {
-  Pagination,
-  PaginationToggleTemplateProps,
-  ToolbarItem,
-} from "@patternfly/react-core";
-import { PropsWithChildren, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-
-import { TableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/TableToolbar";
-
-type KeycloakPaginationProps = {
-  id?: string;
-  count: number;
-  first: number;
-  max: number;
-  onNextClick: (page: number) => void;
-  onPreviousClick: (page: number) => void;
-  onPerPageSelect: (max: number, first: number) => void;
-  variant?: "top" | "bottom";
-};
-
-type TableToolbarProps = KeycloakPaginationProps & {
-  searchTypeComponent?: ReactNode;
-  toolbarItem?: ReactNode;
-  subToolbar?: ReactNode;
-  inputGroupName?: string;
-  inputGroupPlaceholder?: string;
-  inputGroupOnEnter?: (value: string) => void;
-};
-
-const KeycloakPagination = ({
-  id,
-  variant = "top",
-  count,
-  first,
-  max,
-  onNextClick,
-  onPreviousClick,
-  onPerPageSelect,
-}: KeycloakPaginationProps) => {
-  const { t } = useTranslation();
-  const page = Math.round(first / max);
-  return (
-    <Pagination
-      widgetId={id}
-      titles={{
-        paginationAriaLabel: `${t("pagination")} ${variant} `,
-      }}
-      isCompact
-      toggleTemplate={({
-        firstIndex,
-        lastIndex,
-      }: PaginationToggleTemplateProps) => (
-        <b>
-          {firstIndex} - {lastIndex}
-        </b>
-      )}
-      itemCount={count + page * max}
-      page={page + 1}
-      perPage={max}
-      onNextClick={(_, p) => onNextClick((p - 1) * max)}
-      onPreviousClick={(_, p) => onPreviousClick((p - 1) * max)}
-      onPerPageSelect={(_, m, f) => onPerPageSelect(f - 1, m)}
-      variant={variant}
-    />
-  );
-};
-
-export const PaginatingTableToolbar = ({
-  count,
-  searchTypeComponent,
-  toolbarItem,
-  subToolbar,
-  children,
-  inputGroupName,
-  inputGroupPlaceholder,
-  inputGroupOnEnter,
-  ...rest
-}: PropsWithChildren<TableToolbarProps>) => {
-  return (
-    <TableToolbar
-      searchTypeComponent={searchTypeComponent}
-      toolbarItem={
-        <>
-          {toolbarItem}
-          <ToolbarItem variant="pagination">
-            <KeycloakPagination count={count} {...rest} />
-          </ToolbarItem>
-        </>
-      }
-      subToolbar={subToolbar}
-      toolbarItemFooter={
-        count !== 0 ? (
-          <ToolbarItem variant="pagination">
-            <KeycloakPagination count={count} variant="bottom" {...rest} />
-          </ToolbarItem>
-        ) : null
-      }
-      inputGroupName={inputGroupName}
-      inputGroupPlaceholder={inputGroupPlaceholder}
-      inputGroupOnEnter={inputGroupOnEnter}
-    >
-      {children}
-    </TableToolbar>
-  );
-};

package/src/ui-shared/controls/table/TableToolbar.tsx

@@ -1,92 +0,0 @@
-import {
-  Divider,
-  InputGroup,
-  SearchInput,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-} from "@patternfly/react-core";
-import { KeyboardEvent, PropsWithChildren, ReactNode, useState } from "react";
-import { useTranslation } from "react-i18next";
-
-type TableToolbarProps = {
-  toolbarItem?: ReactNode;
-  subToolbar?: ReactNode;
-  toolbarItemFooter?: ReactNode;
-  searchTypeComponent?: ReactNode;
-  inputGroupName?: string;
-  inputGroupPlaceholder?: string;
-  inputGroupOnEnter?: (value: string) => void;
-};
-
-export const TableToolbar = ({
-  toolbarItem,
-  subToolbar,
-  toolbarItemFooter,
-  children,
-  searchTypeComponent,
-  inputGroupName,
-  inputGroupPlaceholder,
-  inputGroupOnEnter,
-}: PropsWithChildren<TableToolbarProps>) => {
-  const { t } = useTranslation();
-  const [searchValue, setSearchValue] = useState<string>("");
-
-  const onSearch = () => {
-    if (searchValue !== "") {
-      setSearchValue(searchValue);
-      inputGroupOnEnter?.(searchValue);
-    } else {
-      setSearchValue("");
-      inputGroupOnEnter?.("");
-    }
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      onSearch();
-    }
-  };
-
-  return (
-    <>
-      <Toolbar>
-        <ToolbarContent>
-          {inputGroupName && (
-            <ToolbarItem>
-              <InputGroup data-testid={inputGroupName}>
-                {searchTypeComponent}
-                {inputGroupPlaceholder && (
-                  <SearchInput
-                    data-testid="table-search-input"
-                    placeholder={inputGroupPlaceholder}
-                    aria-label={t("search")}
-                    value={searchValue}
-                    onChange={(_, value) => {
-                      setSearchValue(value);
-                    }}
-                    onSearch={onSearch}
-                    onKeyDown={handleKeyDown}
-                    onClear={() => {
-                      setSearchValue("");
-                      inputGroupOnEnter?.("");
-                    }}
-                  />
-                )}
-              </InputGroup>
-            </ToolbarItem>
-          )}
-          {toolbarItem}
-        </ToolbarContent>
-      </Toolbar>
-      {subToolbar && (
-        <Toolbar>
-          <ToolbarContent>{subToolbar}</ToolbarContent>
-        </Toolbar>
-      )}
-      <Divider />
-      {children}
-      <Toolbar>{toolbarItemFooter}</Toolbar>
-    </>
-  );
-};

package/src/ui-shared/icons/IconMapper.tsx

@@ -1,63 +0,0 @@
-import { Icon } from "@patternfly/react-core";
-import {
-  BitbucketIcon,
-  CubeIcon,
-  FacebookSquareIcon,
-  GithubIcon,
-  GitlabIcon,
-  GoogleIcon,
-  InstagramIcon,
-  LinkedinIcon,
-  MicrosoftIcon,
-  OpenshiftIcon,
-  PaypalIcon,
-  StackOverflowIcon,
-  TwitterIcon,
-} from "@patternfly/react-icons";
-
-type IconMapperProps = {
-  icon: string;
-};
-
-export const IconMapper = ({ icon }: IconMapperProps) => {
-  const SpecificIcon = getIcon(icon);
-  return (
-    <Icon size="lg">
-      <SpecificIcon alt={icon} />
-    </Icon>
-  );
-};
-
-function getIcon(icon: string) {
-  switch (icon) {
-    case "github":
-      return GithubIcon;
-    case "facebook":
-      return FacebookSquareIcon;
-    case "gitlab":
-      return GitlabIcon;
-    case "google":
-      return GoogleIcon;
-    case "linkedin":
-    case "linkedin-openid-connect":
-      return LinkedinIcon;
-
-    case "openshift-v3":
-    case "openshift-v4":
-      return OpenshiftIcon;
-    case "stackoverflow":
-      return StackOverflowIcon;
-    case "twitter":
-      return TwitterIcon;
-    case "microsoft":
-      return MicrosoftIcon;
-    case "bitbucket":
-      return BitbucketIcon;
-    case "instagram":
-      return InstagramIcon;
-    case "paypal":
-      return PaypalIcon;
-    default:
-      return CubeIcon;
-  }
-}

package/src/ui-shared/index.ts

@@ -1 +0,0 @@
-export * from './main';

package/src/ui-shared/main.ts

@@ -1,96 +0,0 @@
-export {
-  AlertProvider,
-  useAlerts,
-  type AddAlertFunction,
-  type AddErrorFunction,
-  type AlertProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/alerts/Alerts";
-export { ErrorPage } from "@keycloakify/keycloak-account-ui/ui-shared/context/ErrorPage";
-export { Help, useHelp } from "@keycloakify/keycloak-account-ui/ui-shared/context/HelpContext";
-export {
-  KeycloakProvider,
-  useEnvironment,
-  type KeycloakContext,
-} from "@keycloakify/keycloak-account-ui/ui-shared/context/KeycloakContext";
-export {
-  getInjectedEnvironment,
-  type BaseEnvironment,
-} from "@keycloakify/keycloak-account-ui/ui-shared/context/environment";
-export { ContinueCancelModal } from "@keycloakify/keycloak-account-ui/ui-shared/continue-cancel/ContinueCancelModal";
-export {
-  FormErrorText,
-  type FormErrorTextProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormErrorText";
-export { HelpItem } from "@keycloakify/keycloak-account-ui/ui-shared/controls/HelpItem";
-export { NumberControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/NumberControl";
-export { PasswordControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/PasswordControl";
-export { PasswordInput } from "@keycloakify/keycloak-account-ui/ui-shared/controls/PasswordInput";
-export {
-  SelectControl,
-  SelectVariant,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/SelectControl";
-export type {
-  SelectControlOption,
-  SelectControlProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/SelectControl";
-export {
-  SwitchControl,
-  type SwitchControlProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/SwitchControl";
-export { TextAreaControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/TextAreaControl";
-export { TextControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/TextControl";
-export {
-  KeycloakTextArea,
-  type KeycloakTextAreaProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/keycloak-text-area/KeycloakTextArea";
-export { IconMapper } from "@keycloakify/keycloak-account-ui/ui-shared/icons/IconMapper";
-export { FormPanel } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/FormPanel";
-export { ScrollForm, mainPageContentId } from "@keycloakify/keycloak-account-ui/ui-shared/scroll-form/ScrollForm";
-export {
-  FormSubmitButton,
-  type FormSubmitButtonProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/buttons/FormSubmitButton";
-export { UserProfileFields } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-export {
-  beerify,
-  debeerify,
-  isUserProfileError,
-  label,
-  setUserProfileServerError,
-} from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-export type { UserFormFields } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-export { createNamedContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/createNamedContext";
-export {
-  getErrorDescription,
-  getErrorMessage,
-  getNetworkErrorMessage,
-  getNetworkErrorDescription,
-} from "@keycloakify/keycloak-account-ui/ui-shared/utils/errors";
-export { isDefined } from "@keycloakify/keycloak-account-ui/ui-shared/utils/isDefined";
-export { useRequiredContext } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useRequiredContext";
-export { useStoredState } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useStoredState";
-export { useSetTimeout } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useSetTimeout";
-export { generateId } from "@keycloakify/keycloak-account-ui/ui-shared/utils/generateId";
-export { default as KeycloakMasthead } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/Masthead";
-export { KeycloakSelect } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
-export type { Variant, KeycloakSelectProps } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
-export { KeycloakDataTable } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
-export type {
-  Action,
-  Field,
-  DetailField,
-  LoaderFunction,
-} from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
-export { PaginatingTableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/PaginatingTableToolbar";
-export { TableToolbar } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/TableToolbar";
-export { ListEmptyState } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/ListEmptyState";
-export { KeycloakSpinner } from "@keycloakify/keycloak-account-ui/ui-shared/controls/KeycloakSpinner";
-export { useFetch } from "@keycloakify/keycloak-account-ui/ui-shared/utils/useFetch";
-export {
-  useErrorBoundary,
-  ErrorBoundaryFallback,
-  ErrorBoundaryProvider,
-} from "@keycloakify/keycloak-account-ui/ui-shared/utils/ErrorBoundary";
-export type { FallbackProps } from "@keycloakify/keycloak-account-ui/ui-shared/utils/ErrorBoundary";
-export { OrganizationTable } from "@keycloakify/keycloak-account-ui/ui-shared/controls/OrganizationTable";
-export { initializeDarkMode } from "@keycloakify/keycloak-account-ui/ui-shared/utils/darkMode";

package/src/ui-shared/masthead/DefaultAvatar.tsx

@@ -1,109 +0,0 @@
-import styles from "@patternfly/react-styles/css/components/Avatar/avatar";
-import { css } from "@patternfly/react-styles";
-
-type DefaultAvatarProps = {
-  className?: string;
-  border?: "light" | "dark";
-  size?: "sm" | "md" | "lg" | "xl";
-};
-
-export const DefaultAvatar = ({
-  className = "",
-  border,
-  size = "md",
-}: DefaultAvatarProps) => (
-  <svg
-    className={css(
-      styles.avatar,
-      styles.modifiers[size],
-      border === "light" && styles.modifiers.light,
-      border === "dark" && styles.modifiers.dark,
-      className,
-    )}
-    enableBackground="new 0 0 36 36"
-    version="1.1"
-    viewBox="0 0 36 36"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle
-      style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
-      cx="18"
-      cy="18.5"
-      r="18"
-    />
-    <defs>
-      <filter
-        id="b"
-        x="5.2"
-        y="7.2"
-        width="25.6"
-        height="53.6"
-        filterUnits="userSpaceOnUse"
-      >
-        <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0" />
-      </filter>
-    </defs>
-    <mask
-      id="a"
-      x="5.2"
-      y="7.2"
-      width="25.6"
-      height="53.6"
-      maskUnits="userSpaceOnUse"
-    >
-      <g style={{ filter: 'url("#b")' }}>
-        <circle
-          style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#FFFFFF" }}
-          cx="18"
-          cy="18.5"
-          r="18"
-        />
-      </g>
-    </mask>
-    <g style={{ filter: 'url("#a")' }}>
-      <g transform="translate(5.04 6.88)">
-        <path
-          style={{
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            fill: "#BBBBBB",
-          }}
-          d="m22.6 18.1c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6-6.1 0.7-6.1 0.7 0 0 0 0c-1.2 0.4-2.4 1.2-3.4 2.6-2.3 2.8-3.2 12.3-3.2 14.8 0 3.2 0.4 12.3 0.6 15.4 0 0-0.4 5.5 4 5.5l-0.3-6.3-0.4-3.5 0.2-0.9c0.9 0.4 3.6 1.2 8.6 1.2 5.3 0 8-0.9 8.8-1.3l0.2 1-0.2 3.6-0.3 6.3c3 0.1 3.7-3 3.8-4.4s0.6-12.6 0.6-16.5c0.1-2.6-0.8-12.1-3.1-15z"
-        />
-        <path
-          style={{
-            opacity: 0.1,
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-          }}
-          d="m22.5 26c-0.1-2.1-1.5-2.8-4.8-2.8l2.2 9.6s1.8-1.7 3-1.8c0 0-0.4-4.6-0.4-5z"
-        />
-        <path
-          style={{
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            fill: "#BBBBBB",
-          }}
-          d="m12.7 13.2c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
-        />
-        <path
-          style={{
-            opacity: 8.0e-2,
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            fill: "#231F20",
-          }}
-          d="m9.4 6.8c0-3 2.1-5.5 4.9-6.3-0.5-0.1-1-0.2-1.6-0.2-3.5 0-6.4 2.9-6.4 6.4s2.9 6.4 6.4 6.4c0.6 0 1.1-0.1 1.6-0.2-2.8-0.6-4.9-3.1-4.9-6.1z"
-        />
-        <path
-          style={{
-            opacity: 0.1,
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-          }}
-          d="m8.3 22.4c-2 0.4-2.9 1.4-3.1 3.5l-0.6 18.6s1.7 0.7 3.6 0.9l0.1-23z"
-        />
-      </g>
-    </g>
-  </svg>
-);

package/src/ui-shared/masthead/KeycloakDropdown.tsx

@@ -1,48 +0,0 @@
-import {
-  Dropdown,
-  DropdownList,
-  DropdownProps,
-  MenuToggle,
-} from "@patternfly/react-core";
-import { EllipsisVIcon } from "@patternfly/react-icons";
-import { ReactNode, useState } from "react";
-
-type KeycloakDropdownProps = Omit<DropdownProps, "toggle"> & {
-  "data-testid"?: string;
-  isKebab?: boolean;
-  title?: ReactNode;
-  dropDownItems: ReactNode[];
-};
-
-export const KeycloakDropdown = ({
-  isKebab = false,
-  title,
-  dropDownItems,
-  ...rest
-}: KeycloakDropdownProps) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Dropdown
-      {...rest}
-      popperProps={{
-        position: "right",
-      }}
-      onOpenChange={(isOpen) => setOpen(isOpen)}
-      toggle={(ref) => (
-        <MenuToggle
-          data-testid={`${rest["data-testid"]}-toggle`}
-          ref={ref}
-          onClick={() => setOpen(!open)}
-          isExpanded={open}
-          variant={isKebab ? "plain" : "default"}
-        >
-          {isKebab ? <EllipsisVIcon /> : title}
-        </MenuToggle>
-      )}
-      isOpen={open}
-    >
-      <DropdownList>{dropDownItems}</DropdownList>
-    </Dropdown>
-  );
-};

package/src/ui-shared/masthead/Masthead.tsx

@@ -1,161 +0,0 @@
-import {
-  Avatar,
-  AvatarProps,
-  DropdownItem,
-  Masthead,
-  MastheadBrand,
-  MastheadBrandProps,
-  MastheadContent,
-  MastheadMainProps,
-  MastheadToggle,
-  PageToggleButton,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-} from "@patternfly/react-core";
-import { BarsIcon } from "@patternfly/react-icons";
-import { TFunction } from "i18next";
-import Keycloak, { type KeycloakTokenParsed } from "keycloak-js";
-import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { DefaultAvatar } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/DefaultAvatar";
-import { KeycloakDropdown } from "@keycloakify/keycloak-account-ui/ui-shared/masthead/KeycloakDropdown";
-
-function loggedInUserName(
-  token: KeycloakTokenParsed | undefined,
-  t: TFunction,
-) {
-  if (!token) {
-    return t("unknownUser");
-  }
-
-  const givenName = token.given_name;
-  const familyName = token.family_name;
-  const preferredUsername = token.preferred_username;
-
-  if (givenName && familyName) {
-    return t("fullName", { givenName, familyName });
-  }
-
-  return givenName || familyName || preferredUsername || t("unknownUser");
-}
-
-type BrandLogo = MastheadBrandProps;
-
-type KeycloakMastheadProps = MastheadMainProps & {
-  keycloak: Keycloak;
-  brand: BrandLogo;
-  avatar?: AvatarProps;
-  features?: {
-    hasLogout?: boolean;
-    hasManageAccount?: boolean;
-    hasUsername?: boolean;
-  };
-  kebabDropdownItems?: ReactNode[];
-  dropdownItems?: ReactNode[];
-  toolbarItems?: ReactNode[];
-};
-
-const KeycloakMasthead = ({
-  keycloak,
-  brand: { src, alt, className, ...brandProps },
-  avatar,
-  features: {
-    hasLogout = true,
-    hasManageAccount = true,
-    hasUsername = true,
-  } = {},
-  kebabDropdownItems,
-  dropdownItems = [],
-  toolbarItems,
-  ...rest
-}: KeycloakMastheadProps) => {
-  const { t } = useTranslation();
-  const extraItems = [];
-  if (hasManageAccount) {
-    extraItems.push(
-      <DropdownItem
-        key="manageAccount"
-        onClick={() => keycloak.accountManagement()}
-      >
-        {t("manageAccount")}
-      </DropdownItem>,
-    );
-  }
-  if (hasLogout) {
-    extraItems.push(
-      <DropdownItem key="signOut" onClick={() => keycloak.logout()}>
-        {t("signOut")}
-      </DropdownItem>,
-    );
-  }
-
-  const picture = keycloak.idTokenParsed?.picture;
-  return (
-    <Masthead {...rest}>
-      <MastheadToggle>
-        <PageToggleButton variant="plain" aria-label={t("navigation")}>
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
-      <MastheadBrand {...brandProps}>
-        <img src={src} alt={alt} className={className} />
-      </MastheadBrand>
-      <MastheadContent>
-        <Toolbar>
-          <ToolbarContent>
-            {toolbarItems?.map((item, index) => (
-              <ToolbarItem key={index} align={{ default: "alignRight" }}>
-                {item}
-              </ToolbarItem>
-            ))}
-            <ToolbarItem
-              visibility={{
-                default: "hidden",
-                md: "visible",
-              }} /** this user dropdown is hidden on mobile sizes */
-            >
-              <KeycloakDropdown
-                data-testid="options"
-                dropDownItems={[...dropdownItems, extraItems]}
-                title={
-                  hasUsername
-                    ? loggedInUserName(keycloak.idTokenParsed, t)
-                    : undefined
-                }
-              />
-            </ToolbarItem>
-            <ToolbarItem
-              align={{ default: "alignLeft" }}
-              visibility={{
-                md: "hidden",
-              }}
-            >
-              <KeycloakDropdown
-                data-testid="options-kebab"
-                isKebab
-                dropDownItems={[
-                  ...(kebabDropdownItems || dropdownItems),
-                  extraItems,
-                ]}
-              />
-            </ToolbarItem>
-            <ToolbarItem
-              variant="overflow-menu"
-              align={{ default: "alignRight" }}
-              className="pf-v5-u-m-0-on-lg"
-            >
-              {picture || avatar?.src ? (
-                <Avatar {...{ src: picture, alt: t("avatar"), ...avatar }} />
-              ) : (
-                <DefaultAvatar {...avatar} />
-              )}
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-      </MastheadContent>
-    </Masthead>
-  );
-};
-
-export default KeycloakMasthead;