@okta/odyssey-react-mui 1.32.0 → 1.33.0

package/src/ui-shell/renderUiShell.tsx

@@ -1,158 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { type SetStateAction } from "react";
-import { ErrorBoundary } from "react-error-boundary";
-
-import { bufferLatest } from "./bufferLatest.js";
-import { createMessageBus } from "./createMessageBus.js";
-import { UiShell, UiShellProps } from "./UiShell.js";
-import { renderReactInWebComponent } from "../web-component/renderReactInWebComponent.js";
-import { type UiShellNavComponentProps } from "./UiShellContent.js";
-import { uiShellDataAttribute } from "./useHasUiShell.js";
-
-export const optionalComponentSlotNames: Record<
-  keyof Required<UiShellProps>["optionalComponents"],
-  string
-> = {
-  banners: "banners",
-  sideNavFooter: "side-nav-footer",
-  topNavLeftSide: "top-nav-left-side",
-  topNavRightSide: "top-nav-right-side",
-};
-
-/**
- * This function renders UI Shell in a web component.
- * This function is agnostic to the UI framework for your app is using. Your application can be another web component, a React app, or even vanilla HTML.
- *
- * **All styles are self-contained.** Even though your application visually renders as children of the web component, its within the global `document` scope, not the web component's `ShadowRoot`. That means any global styles will not affect UI Shell but will affect your application.
- *
- * It places your app's root element in a web component <slot> and ensures it remains rendered in the event of a UI Shell error.
- * It also provides you with other elements fitted to slots in the web component. **In React, you can portal to these components.**
- */
-export const renderUiShell = ({
-  appBackgroundColor,
-  appBackgroundContrastMode,
-  appContainerScrollingMode,
-  appRootElement: explicitAppRootElement,
-  hasStandardAppContentPadding,
-  initialVisibleSections,
-  onError = console.error,
-  sideNavBackgroundColor,
-  topNavBackgroundColor,
-  uiShellRootElement,
-}: {
-  /**
-   * HTML element used as the root for a React app.
-   */
-  appRootElement?: HTMLDivElement;
-  /**
-   * Notifies when a React rendering error occurs. This could be useful for logging, reporting priority 0 issues, and recovering UI Shell when errors occur.
-   */
-  onError?: () => void;
-  /**
-   * HTML element used as the root for UI Shell.
-   */
-  uiShellRootElement: HTMLElement;
-} & Pick<
-  UiShellProps,
-  | "appBackgroundColor"
-  | "appBackgroundContrastMode"
-  | "appContainerScrollingMode"
-  | "hasStandardAppContentPadding"
-  | "initialVisibleSections"
-  | "sideNavBackgroundColor"
-  | "topNavBackgroundColor"
->) => {
-  const appRootElement =
-    explicitAppRootElement || document.createElement("div");
-
-  // Add this attribute so `PageTemplate` and potentially other components will know if they're in UI Shell with special padding already available.
-  uiShellRootElement.setAttribute(uiShellDataAttribute, "");
-
-  const { publish: publishPropChanges, subscribe: subscribeToPropChanges } =
-    createMessageBus<SetStateAction<UiShellNavComponentProps>>();
-
-  const {
-    publish: publishSubscriptionCreated,
-    subscribe: subscribeToReactAppSubscribed,
-  } = createMessageBus();
-
-  const publishAfterReactAppReadyForProps = bufferLatest({
-    publish: publishPropChanges,
-    subscribe: subscribeToReactAppSubscribed,
-  });
-
-  const slottedElements = Object.fromEntries(
-    Object.entries(optionalComponentSlotNames).map(
-      ([optionalComponentKey, slotName]) => {
-        const element = document.createElement("div");
-
-        element.setAttribute("slot", slotName);
-
-        return [optionalComponentKey, element];
-      },
-    ),
-  ) as Record<
-    keyof Required<UiShellProps>["optionalComponents"],
-    HTMLDivElement
-  >;
-
-  const appContainerElement = document.createElement("div");
-  appContainerElement.appendChild(appRootElement);
-
-  const webComponentChildren = Object.values(slottedElements);
-
-  const appComponent = <slot />;
-
-  const uiShellElement = renderReactInWebComponent({
-    getReactComponent: (reactRootElements) => (
-      <ErrorBoundary fallback={appComponent} onError={onError}>
-        <UiShell
-          appBackgroundColor={appBackgroundColor}
-          appBackgroundContrastMode={appBackgroundContrastMode}
-          appComponent={appComponent}
-          appContainerElement={appContainerElement}
-          appContainerScrollingMode={appContainerScrollingMode}
-          appRootElement={reactRootElements.appRootElement}
-          hasStandardAppContentPadding={hasStandardAppContentPadding}
-          initialVisibleSections={initialVisibleSections}
-          onError={onError}
-          onSubscriptionCreated={publishSubscriptionCreated}
-          // `optionalComponents` doesn't need to be memoized because gets passed in once.
-          optionalComponents={Object.fromEntries(
-            Object.entries(optionalComponentSlotNames).map(
-              ([optionalComponentKey, slotName]) => [
-                optionalComponentKey,
-                <slot name={slotName} />,
-              ],
-            ),
-          )}
-          sideNavBackgroundColor={sideNavBackgroundColor}
-          stylesRootElement={reactRootElements.stylesRootElement}
-          subscribeToPropChanges={subscribeToPropChanges}
-          topNavBackgroundColor={topNavBackgroundColor}
-        />
-      </ErrorBoundary>
-    ),
-    webComponentRootElement: uiShellRootElement,
-    webComponentChildren,
-  });
-  uiShellRootElement.appendChild(appContainerElement);
-
-  return {
-    appRootElement,
-    setComponentProps: publishAfterReactAppReadyForProps,
-    slottedElements,
-    uiShellElement,
-  };
-};

package/src/ui-shell/useScrollState.ts

@@ -1,59 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { useEffect, useMemo, useRef, useState } from "react";
-
-export const useScrollState = <
-  ScrollableContentElement extends HTMLElement = HTMLDivElement,
->(
-  scrollableContentElement?: ScrollableContentElement,
-) => {
-  const [isContentScrolled, setIsContentScrolled] = useState(false);
-
-  const scrollableContentRef = useRef<ScrollableContentElement>(null);
-
-  const scrollableElement = useMemo(
-    () => scrollableContentElement ?? scrollableContentRef.current,
-    [scrollableContentElement, scrollableContentRef.current],
-  );
-
-  useEffect(() => {
-    if (scrollableElement) {
-      let requestedAnimationFrameId: number;
-
-      const updateScrollState = () => {
-        cancelAnimationFrame(requestedAnimationFrameId);
-
-        requestedAnimationFrameId = requestAnimationFrame(() => {
-          setIsContentScrolled(scrollableElement.scrollTop > 0);
-        });
-      };
-
-      scrollableElement.addEventListener("scroll", updateScrollState);
-
-      updateScrollState();
-
-      return () => {
-        scrollableElement.removeEventListener("scroll", updateScrollState);
-
-        cancelAnimationFrame(requestedAnimationFrameId);
-      };
-    }
-
-    return () => {};
-  }, [scrollableElement]);
-
-  return {
-    isContentScrolled,
-    scrollableContentRef,
-  };
-};

package/src/useAutocomplete.tsx

@@ -1,184 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { useCallback, useMemo, useRef } from "react";
-import {
-  InputBase,
-  AutocompleteValue,
-  AutocompleteRenderInputParams,
-} from "@mui/material";
-
-import { AutocompleteProps } from "./Autocomplete.js";
-import { Field } from "./Field.js";
-import {
-  ComponentControlledState,
-  useInputValues,
-  getControlState,
-} from "./inputUtils.js";
-
-export type UseAutocompleteProps<
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
-> = Pick<
-  AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>,
-  | "ariaDescribedBy"
-  | "defaultValue"
-  | "errorMessage"
-  | "errorMessageList"
-  | "hasMultipleChoices"
-  | "hint"
-  | "HintLinkComponent"
-  | "inputValue"
-  | "isFullWidth"
-  | "isOptional"
-  | "isVirtualized"
-  | "label"
-  | "name"
-  | "testId"
-  | "value"
->;
-
-export const useAutocomplete = <
-  OptionType,
-  HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined,
->({
-  ariaDescribedBy,
-  defaultValue,
-  errorMessage,
-  errorMessageList,
-  hasMultipleChoices,
-  hint,
-  HintLinkComponent,
-  inputValue,
-  isFullWidth,
-  isOptional,
-  isVirtualized: isVirtualizedProp,
-  label,
-  name: nameOverride,
-  testId,
-  value,
-}: UseAutocompleteProps<
-  OptionType,
-  HasMultipleChoices,
-  IsCustomValueAllowed
->) => {
-  const controlledStateRef = useRef(
-    getControlState({
-      controlledValue: value,
-      uncontrolledValue: defaultValue,
-    }),
-  );
-
-  const isVirtualizedRef = useRef(Boolean(isVirtualizedProp));
-
-  const defaultValueProp = useMemo<
-    | AutocompleteValue<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >
-    | undefined
-  >(() => {
-    if (hasMultipleChoices) {
-      if (value === undefined) {
-        return defaultValue;
-      }
-      return [] as AutocompleteValue<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >;
-    }
-    return value === undefined ? defaultValue : undefined;
-  }, [defaultValue, hasMultipleChoices, value]);
-
-  const valueProps = useInputValues({
-    defaultValue: defaultValueProp,
-    value: value,
-    controlState: controlledStateRef.current,
-  });
-
-  const inputValueProp = useMemo(() => {
-    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
-      return { inputValue };
-    }
-    return undefined;
-  }, [inputValue]);
-
-  const renderInput = useCallback(
-    ({
-      InputLabelProps,
-      InputProps,
-      ...params
-    }: AutocompleteRenderInputParams) => (
-      <Field
-        ariaDescribedBy={ariaDescribedBy}
-        errorMessage={errorMessage}
-        errorMessageList={errorMessageList}
-        fieldType="single"
-        hasVisibleLabel
-        //@ts-expect-error htmlFor exists on `InputLabelProps`, but not the type.
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        id={InputLabelProps.htmlFor}
-        isFullWidth={isFullWidth}
-        hint={hint}
-        HintLinkComponent={HintLinkComponent}
-        label={label}
-        isOptional={isOptional}
-        renderFieldComponent={({
-          ariaDescribedBy,
-          id,
-          errorMessageElementId,
-          labelElementId,
-        }) => (
-          <InputBase
-            {...params}
-            {...InputProps}
-            inputProps={{
-              ...params.inputProps,
-              "aria-errormessage": errorMessageElementId,
-              "aria-labelledby": labelElementId,
-              "data-se": testId,
-            }}
-            aria-describedby={ariaDescribedBy}
-            id={id}
-            name={nameOverride ?? id}
-            required={!isOptional}
-          />
-        )}
-      />
-    ),
-    [
-      ariaDescribedBy,
-      errorMessage,
-      errorMessageList,
-      hint,
-      HintLinkComponent,
-      isFullWidth,
-      isOptional,
-      label,
-      nameOverride,
-      testId,
-    ],
-  );
-
-  return {
-    inputValueProp,
-    isVirtualizedRef,
-    renderInput,
-    valueProps,
-  };
-};

package/src/useContrastMode.tsx

@@ -1,143 +0,0 @@
-/*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import {
-  createContext,
-  useContext,
-  useRef,
-  useLayoutEffect,
-  useState,
-  useCallback,
-} from "react";
-import * as Tokens from "@okta/odyssey-design-tokens";
-
-import { hexToRgb } from "./hexToRgb.js";
-
-export type ContrastMode = "lowContrast" | "highContrast";
-export type ContrastModeContextType = {
-  contrastMode: ContrastMode;
-};
-
-export const ContrastModeContext = createContext<ContrastModeContextType>({
-  contrastMode: "lowContrast",
-});
-
-export const defaultContrast = "lowContrast";
-
-export const useContrastModeContext = () => useContext(ContrastModeContext);
-
-export const hueNeutral50Rgb = hexToRgb(Tokens.HueNeutral50).asFormattedString;
-
-export const isTransparentColor = (color: string) =>
-  color === "rgba(0, 0, 0, 0)" || color === "transparent";
-
-export const normalizeRgbaToRgb = (rgba: string) =>
-  rgba.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, "rgb($1, $2, $3)");
-
-export const getElementComputedBackgroundColor = (
-  element: HTMLElement,
-): string => window.getComputedStyle(element).backgroundColor;
-
-export const normalizeBackgroundColor = (bgColor: string): string => {
-  if (/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/.test(bgColor)) {
-    const normalizedColor = normalizeRgbaToRgb(bgColor);
-    return normalizedColor === hueNeutral50Rgb
-      ? Tokens.HueNeutral50
-      : normalizedColor;
-  }
-
-  return bgColor === hueNeutral50Rgb ? Tokens.HueNeutral50 : bgColor;
-};
-
-export const defaultParentBackgroundColor = "#ffffff";
-
-/**
- * Determines the effective background color of an element.
- *
- * @param element - The HTML element to check.
- * @returns The effective background color. Returns  defaultParentBackgroundColor if no non-transparent background is found.
- *
- * Note:
- * - Low contrast mode is used for white background (defaultParentBackgroundColor or HueNeutralWhite).
- * - High contrast mode is used for gray background (#f4f4f4 or HueNeutral50).
- */
-export const getBackgroundColor = (element: HTMLElement | null): string => {
-  while (element) {
-    const bgColor = getElementComputedBackgroundColor(element);
-    if (!isTransparentColor(bgColor)) {
-      return normalizeBackgroundColor(bgColor);
-    }
-    element = element.parentElement;
-  }
-  return defaultParentBackgroundColor; // Default to white/low contrast if no background color is found
-};
-
-type UseContrastModeProps = {
-  contrastMode?: ContrastMode;
-};
-
-export const useContrastMode = ({
-  contrastMode: explicitContrastMode,
-}: UseContrastModeProps) => {
-  const contrastContainerRef = useRef<HTMLDivElement>(null);
-  const { contrastMode: existingContrastMode } = useContrastModeContext();
-
-  const [parentBackgroundColor, setParentBackgroundColor] = useState(
-    defaultParentBackgroundColor,
-  );
-  const [contrastMode, setContrastMode] = useState<ContrastMode>(
-    () => explicitContrastMode || existingContrastMode,
-  );
-
-  const updateBackgroundColor = useCallback(() => {
-    const newBgColor = getBackgroundColor(contrastContainerRef.current);
-    setParentBackgroundColor(newBgColor);
-
-    if (!explicitContrastMode) {
-      setContrastMode(
-        newBgColor === Tokens.HueNeutral50 ? "highContrast" : "lowContrast",
-      );
-    }
-  }, [explicitContrastMode]);
-
-  useLayoutEffect(() => {
-    const observer = new MutationObserver(updateBackgroundColor);
-    observer.observe(document.querySelector("html") as HTMLHtmlElement, {
-      attributes: true,
-      attributeFilter: ["class", "style"],
-    });
-    observer.observe(document.head, {
-      childList: true,
-      subtree: true,
-    });
-
-    const onTransitionEnd = (event: TransitionEvent) => {
-      if (event.propertyName === "background-color") {
-        updateBackgroundColor();
-      }
-    };
-
-    document.addEventListener("transitionend", onTransitionEnd);
-    updateBackgroundColor();
-
-    return () => {
-      document.removeEventListener("transitionend", onTransitionEnd);
-      observer.disconnect();
-    };
-  }, [updateBackgroundColor]);
-
-  return {
-    contrastContainerRef,
-    contrastMode,
-    parentBackgroundColor,
-  };
-};

package/src/useNormalizedKey.ts

@@ -1,17 +0,0 @@
-/*!
- * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-export const normalizedKey = (...keyParts: string[]): string => {
-  const SEPARATOR = "-";
-  // Joins all strings together with SEPARATOR, replaces any non-alphanumeric character with SEPARATOR and casts all to lowercase
-  return keyParts.join(SEPARATOR).replace(/\W+/g, SEPARATOR).toLowerCase();
-};

package/src/useUniqueAlphabeticalId.ts

@@ -1,21 +0,0 @@
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { useMemo } from "react";
-
-import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId.js";
-
-export const useUniqueAlphabeticalId = (id?: string) => {
-  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);
-
-  return id ?? uniqueAlphabeticalId;
-};

package/src/useUniqueId.ts

@@ -1,21 +0,0 @@
-/*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { useMemo } from "react";
-
-import { createUniqueId } from "./createUniqueId.js";
-
-export const useUniqueId = (id?: string) => {
-  const uniqueId = useMemo(() => createUniqueId(), []);
-
-  return id ?? uniqueId;
-};

package/src/web-component/createReactRootElements.test.ts

@@ -1,40 +0,0 @@
-/*!
- * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-import { createReactRootElements } from "./createReactRootElements.js";
-
-describe("createReactRootElements", () => {
-  test("returns two elements at attach to a Shadow DOM", () => {
-    const { appRootElement, stylesRootElement } = createReactRootElements();
-
-    expect(appRootElement).toBeInstanceOf(HTMLDivElement);
-    expect(stylesRootElement).toBeInstanceOf(HTMLDivElement);
-  });
-
-  test("App root element has the correct attributes", () => {
-    const { appRootElement } = createReactRootElements();
-
-    expect(appRootElement).toHaveAttribute("id", "app-root");
-    expect(appRootElement).toHaveAttribute("style", "height: inherit;");
-  });
-
-  test("Emotion root element has the correct attributes", () => {
-    const nonce = "hello-world";
-
-    window.cspNonce = nonce;
-
-    const { stylesRootElement } = createReactRootElements();
-
-    expect(stylesRootElement).toHaveAttribute("id", "style-root");
-    expect(stylesRootElement).toHaveAttribute("nonce", nonce);
-  });
-});

package/src/web-component/createReactRootElements.ts

@@ -1,39 +0,0 @@
-/*!
- * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */
-
-export const createReactRootElements = () => {
-  const appRootElement = document.createElement("div");
-  const stylesRootElement = document.createElement("div");
-
-  // This `div` may cause layout issues unless it inherits the parent's height.
-  appRootElement.style.setProperty("height", "inherit");
-
-  appRootElement.setAttribute("id", "app-root");
-  stylesRootElement.setAttribute("id", "style-root");
-  stylesRootElement.setAttribute("nonce", window.cspNonce);
-
-  return {
-    /**
-     * The element your React root component renders into.
-     * React has to render or portal somewhere, and this element can be used for that root element.
-     *
-     * In the case of a web component, there is no defined root element, so you have to define it yourself.
-     */
-    appRootElement,
-    /**
-     * In React apps, your styles typically go in `document.head`, but you may want to render them somewhere else.
-     *
-     * Specifically when rendering in a web component, there is no `<head>`, so you have to create a spot for styles to render.
-     */
-    stylesRootElement,
-  };
-};