@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/dist/{createShadowDomElements.js → web-component/shadow-dom.js}

@@ -9,22 +9,20 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
+import { createReactRootElements } from "./renderReactInWebComponent.js";
 export const createShadowDomElements = containerElement => {
   const shadowRoot = containerElement.attachShadow({
     mode: "open"
   });
-  const emotionRootElement = document.createElement("div");
-  emotionRootElement.setAttribute("id", "style-root");
-  emotionRootElement.setAttribute("nonce", window.cspNonce);
-  const shadowRootElement = document.createElement("div");
-  shadowRootElement.setAttribute("id", "shadow-root");
-  shadowRootElement.style.setProperty("height", "inherit");
-  shadowRoot.appendChild(emotionRootElement);
-  shadowRoot.appendChild(shadowRootElement);
+  const {
+    appRootElement,
+    stylesRootElement
+  } = createReactRootElements();
+  shadowRoot.appendChild(appRootElement);
+  shadowRoot.appendChild(stylesRootElement);
   return {
-    emotionRootElement,
-    shadowRootElement
+    emotionRootElement: stylesRootElement,
+    shadowRootElement: appRootElement
   };
 };
 export const createShadowRootElement = containerElement => {
@@ -40,4 +38,4 @@ export const createShadowRootElement = containerElement => {
   shadowRoot.appendChild(shadowRootElement);
   return [emotionRootElement, shadowRootElement];
 };
-//# sourceMappingURL=createShadowDomElements.js.map
+//# sourceMappingURL=shadow-dom.js.map

package/dist/web-component/shadow-dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-dom.js","names":["createReactRootElements","createShadowDomElements","containerElement","shadowRoot","attachShadow","mode","appRootElement","stylesRootElement","appendChild","emotionRootElement","shadowRootElement","createShadowRootElement","document","createElement","setAttribute","window","cspNonce"],"sources":["../../src/web-component/shadow-dom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { createReactRootElements } from \"./renderReactInWebComponent\";\n\n/**\n * @deprecated Use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.\n */\nexport const createShadowDomElements = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // Container for Emotion `<style>` elements.\n  const { appRootElement, stylesRootElement } = createReactRootElements();\n\n  shadowRoot.appendChild(appRootElement);\n  shadowRoot.appendChild(stylesRootElement);\n\n  return {\n    emotionRootElement: stylesRootElement,\n    shadowRootElement: appRootElement,\n  };\n};\n\n/**\n * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.\n * @deprecated Ideally, use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */\nexport const createShadowRootElement = (\n  containerElement: HTMLElement,\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRootElement = document.createElement(\"style\");\n  emotionRootElement.setAttribute(\"id\", \"style-root\");\n  emotionRootElement.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRootElement);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRootElement, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,uBAAuB;AAKhC,OAAO,MAAMC,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAM;IAAEC,cAAc;IAAEC;EAAkB,CAAC,GAAGP,uBAAuB,CAAC,CAAC;EAEvEG,UAAU,CAACK,WAAW,CAACF,cAAc,CAAC;EACtCH,UAAU,CAACK,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO;IACLE,kBAAkB,EAAEF,iBAAiB;IACrCG,iBAAiB,EAAEJ;EACrB,CAAC;AACH,CAAC;AAKD,OAAO,MAAMK,uBAAuB,GAClCT,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMI,kBAAkB,GAAGG,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1DJ,kBAAkB,CAACK,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EACnDL,kBAAkB,CAACK,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGzD,MAAMN,iBAAiB,GAAGE,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDH,iBAAiB,CAACI,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDX,UAAU,CAACK,WAAW,CAACC,kBAAkB,CAAC;EAC1CN,UAAU,CAACK,WAAW,CAACE,iBAAiB,CAAC;EAEzC,OAAO,CAACD,kBAAkB,EAAEC,iBAAiB,CAAC;AAChD,CAAC"}

package/jest.config.cjs

@@ -10,7 +10,26 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-module.exports = {
+/** @type { import("jest").Config } */
+const jestConfig = {
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  coveragePathIgnorePatterns: [
+    "/src/icons.generated/",
+    "/src/properties/",
+    "/node_modules/",
+  ],
+  coverageReporters: ["json", "html", "text", "text-summary"],
+  coverageThreshold: {
+    global: {
+      branches: 13.63,
+      functions: 17.41,
+      lines: 29.98,
+      statements: 29.91,
+    },
+  },
+  extensionsToTreatAsEsm: [".ts"],
   setupFilesAfterEnv: ["./jest.setup.js"],
-  testEnvironment: "jsdom",
+  testEnvironment: "@happy-dom/jest-environment",
 };
+
+module.exports = jestConfig;

package/jest.setup.js

@@ -13,6 +13,3 @@
 import "regenerator-runtime/runtime";
 import "@testing-library/jest-dom";
 import "jest-axe/extend-expect";
-
-import * as ResizeObserverModule from "resize-observer-polyfill";
-global.ResizeObserver = ResizeObserverModule.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.24.1",
+  "version": "1.26.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -58,13 +58,14 @@
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^7.2.0",
-    "@okta/odyssey-design-tokens": "^1.24.1",
+    "@okta/odyssey-design-tokens": "^1.26.0",
     "@types/luxon": "^3.4.2",
     "date-fns": "^2.30.0",
     "dom-accessibility-api": "^0.7.0",
     "i18next": "^23.15.1",
     "luxon": "^3.4.4",
     "material-react-table": "^2.11.3",
+    "react-error-boundary": "^4.1.1",
     "react-i18next": "^14.0.5",
     "react-window": "^1.8.10",
     "word-wrap": "^1.2.5"
@@ -73,5 +74,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "8706464f0aa2e07b37fb33c16d848758ea56dfdd"
+  "gitHead": "72de92f62683a351a51e8682485a64f74c493ca8"
 }

package/src/Autocomplete.tsx

@@ -10,39 +10,18 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Autocomplete as MuiAutocomplete,
   AutocompleteProps as MuiAutocompleteProps,
-  InputBase,
-  UseAutocompleteProps,
-  AutocompleteValue,
-  AutocompleteRenderInputParams,
+  UseAutocompleteProps as MuiUseAutocompleteProps,
 } from "@mui/material";
-import {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  memo,
-  ReactElement,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import styled from "@emotion/styled";
-import { VariableSizeList, ListChildComponentProps } from "react-window";
-import { useTranslation } from "react-i18next";
 
-import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
-import {
-  ComponentControlledState,
-  useInputValues,
-  getControlState,
-} from "./inputUtils";
+import { PickerVirtualizationListBox } from "./labs/OdysseyPickers/PickerVirtualizationListBox";
+import { useAutocomplete } from "./useAutocomplete";
 import { TestSelector } from "./test-selectors";
 
 export const AutocompleteTestSelector = {
@@ -75,8 +54,7 @@ export const AutocompleteTestSelector = {
     role: "combobox",
   },
 } as const satisfies TestSelector;
-
-type SetItemSize = (size: number) => void;
+// type SetItemSize = (size: number) => void;
 
 export type AutocompleteProps<
   OptionType,
@@ -86,7 +64,7 @@ export type AutocompleteProps<
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: UseAutocompleteProps<
+  defaultValue?: MuiUseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
@@ -97,12 +75,21 @@ export type AutocompleteProps<
    *
    * `function(option: Value) => string`
    */
-  getOptionLabel?: UseAutocompleteProps<
+  getOptionLabel?: MuiUseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["getOptionLabel"];
+
+  /** Used to determine if the option represents the given value. Uses strict equality by default if none provided.
+   * Both arguments need to be handled, an option can only match with one value.
+   * option: the option to test
+   * value: the value to test against
+   *
+   * You will need to implement this function if your `option` items are objects.
+   */
+  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
   /**
    * Enables multiple choice selection
    */
@@ -115,7 +102,7 @@ export type AutocompleteProps<
   /**
    * The value for the input
    */
-  inputValue?: UseAutocompleteProps<
+  inputValue?: MuiUseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
@@ -157,6 +144,12 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["readOnly"];
+  /**
+   * If this component is required to display a virtualized list of options,
+   * then this value needs to be set to true.
+   * It is recommended if you're options are on the order of 10's of hundreds or more.
+   */
+  isVirtualized?: boolean;
   /**
    * The label text for the autocomplete input
    */
@@ -179,7 +172,7 @@ export type AutocompleteProps<
   /**
    * Callback fired when a selection is made.
    */
-  onChange?: UseAutocompleteProps<
+  onChange?: MuiUseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
@@ -210,29 +203,12 @@ export type AutocompleteProps<
   /**
    * The value of the Autocomplete input
    */
-  value?: UseAutocompleteProps<
+  value?: MuiUseAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["value"];
-
-  /**
-   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.
-   * Both arguments need to be handled, an option can only match with one value.
-   * option: the option to test
-   * value: the value to test against
-   *
-   * You will need to implement this function if your `option` items are objects.
-   */
-  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
-
-  /**
-   * If this component is required to display a virtualized list of options,
-   * then this value needs to be set to true.
-   * It is recommended if you're options are on the order of 10's of hundreds or more.
-   */
-  isVirtualized?: boolean;
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
@@ -246,11 +222,6 @@ export type AutocompleteProps<
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
 
-const ListboxContainer = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
 const Autocomplete = <
   OptionType,
   HasMultipleChoices extends boolean | undefined,
@@ -270,15 +241,15 @@ const Autocomplete = <
   isLoading,
   isOptional = false,
   isReadOnly,
-  isVirtualized: isVirtualizedProp = false,
+  isVirtualized = false,
   hint,
   HintLinkComponent,
   label,
   name: nameOverride,
   noOptionsText,
   onBlur,
-  onChange: onChangeProp,
-  onInputChange: onInputChangeProp,
+  onChange,
+  onInputChange,
   onFocus,
   options,
   value,
@@ -287,293 +258,32 @@ const Autocomplete = <
   translate,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const { t } = useTranslation();
-  const controlledStateRef = useRef(
-    getControlState({
-      controlledValue: value,
-      uncontrolledValue: defaultValue,
-    }),
-  );
-
-  const isVirtualized = 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 does not exist ont he InputLabelProps for autocomplete
-        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}
-          />
-        )}
-      />
-    ),
-    [
+  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =
+    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({
       ariaDescribedBy,
+      defaultValue,
       errorMessage,
       errorMessageList,
+      hasMultipleChoices,
       hint,
       HintLinkComponent,
+      inputValue,
       isFullWidth,
       isOptional,
+      isVirtualized,
       label,
-      nameOverride,
+      name: nameOverride,
       testId,
-    ],
-  );
-
-  const Row = ({
-    data,
-    index,
-    setItemSize,
-    style,
-  }: ListChildComponentProps & { setItemSize: SetItemSize }) => {
-    const rowRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (rowRef.current) {
-        /**
-         * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly
-         * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908
-         */
-        const firstChild = rowRef.current.firstElementChild;
-        const height = firstChild
-          ? firstChild.clientHeight
-          : rowRef.current.clientHeight;
-
-        setItemSize(height);
-      }
-    }, [index, rowRef, setItemSize]);
-
-    const baseOption = data[index];
-    const { key, props } = baseOption;
-
-    /**
-     * react-window calculates the absolute positions of the list items, via an inline style, so
-     * we need to add it to each list item that is being rendered in the viewable list window.
-     * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll
-     */
-    const styles = useMemo(
-      () => ({
-        ...style,
-        height: "auto",
-      }),
-      [style],
-    );
-
-    return (
-      <div ref={rowRef}>
-        <li {...props} key={key} style={styles} />
-      </div>
-    );
-  };
-
-  const OuterListboxContext = createContext({});
-
-  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {
-    const outerProps = useContext(OuterListboxContext);
-    return <div ref={ref} {...props} {...outerProps} />;
-  });
-
-  const useResetCache = (length: number) => {
-    const resetCacheRef = useRef<VariableSizeList>(null);
-    useEffect(() => {
-      if (resetCacheRef.current) {
-        resetCacheRef.current.resetAfterIndex(0, true);
-      }
-    }, [length]);
-    return resetCacheRef;
-  };
-
-  const ListboxComponent = forwardRef<
-    HTMLDivElement,
-    HTMLAttributes<HTMLElement>
-  >(function (props, ref) {
-    const [listHeight, setListHeight] = useState(0);
-
-    const { children, ...other } = props;
-    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(
-      (item: ReactElement & { children?: ReactElement[] }) =>
-        [item].concat(item.children || []),
-    );
-
-    const sizeMap = useRef<number[]>([]);
-
-    const getListBoxHeight = useCallback(() => {
-      // 8px of padding top/bottom applied by MUI
-      const COMBINED_LISTBOX_PADDING = 16;
-
-      if (itemData.length > OVERSCAN_ROW_COUNT) {
-        // has a max-height of 40vh set in CSS. This is only set because height needs to be a number
-        return 99999;
-      } else {
-        const itemsHeightCalculated = itemData
-          .map((_, index) => sizeMap.current[index] || 0)
-          .reduce(
-            (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,
-            0,
-          );
-        return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;
-      }
-    }, [itemData, sizeMap]);
-
-    useEffect(() => {
-      if (sizeMap.current.length && itemData.length) {
-        setListHeight(getListBoxHeight());
-      }
-    }, [getListBoxHeight, itemData, sizeMap]);
-
-    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons
-    const OVERSCAN_ROW_COUNT = 8;
-
-    const gridRef = useResetCache(itemData.length);
-
-    const setItemSize = useCallback<SetItemSize>(
-      (size) => {
-        gridRef?.current?.resetAfterIndex(0, true);
-        sizeMap.current = sizeMap.current.concat(size);
-      },
-      [gridRef, sizeMap],
-    );
-    const getItemSize = useCallback(
-      // using 45px as a sane default here to avoid a lot of content shift on repaint
-      (index: number) => sizeMap.current[index] || 45,
-      [sizeMap],
-    );
-
-    return (
-      <ListboxContainer ref={ref}>
-        <OuterListboxContext.Provider value={other}>
-          <VariableSizeList
-            innerElementType="ul"
-            itemData={itemData}
-            itemCount={itemData.length}
-            itemSize={getItemSize}
-            height={listHeight}
-            width="100%"
-            ref={gridRef}
-            outerElementType={OuterListboxElementType}
-            overscanCount={OVERSCAN_ROW_COUNT}
-          >
-            {({ data, index, style }) => (
-              <Row
-                data={data}
-                index={index}
-                style={style}
-                setItemSize={setItemSize}
-              />
-            )}
-          </VariableSizeList>
-        </OuterListboxContext.Provider>
-      </ListboxContainer>
-    );
-  });
-
-  const onChange = useCallback<
-    NonNullable<
-      UseAutocompleteProps<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >["onChange"]
-    >
-  >(
-    (event, value, reason, details) => {
-      onChangeProp?.(event, value, reason, details);
-    },
-    [onChangeProp],
-  );
-
-  const onInputChange = useCallback<
-    NonNullable<
-      UseAutocompleteProps<
-        OptionType,
-        HasMultipleChoices,
-        undefined,
-        IsCustomValueAllowed
-      >["onInputChange"]
-    >
-  >(
-    (event, value, reason) => {
-      onInputChangeProp?.(event, value, reason);
-    },
-    [onInputChangeProp],
-  );
+      value,
+    });
 
   return (
     <MuiAutocomplete
       {...valueProps}
       {...inputValueProp}
       // conditionally provide the ListboxComponent if this needs to be virtualized
-      {...(isVirtualized.current && {
-        ListboxComponent,
+      {...(isVirtualizedRef.current && {
+        ListboxComponent: PickerVirtualizationListBox,
       })}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}

package/src/Box.tsx

@@ -11,7 +11,7 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef, memo } from "react";
+import { AriaRole, ReactNode, forwardRef, memo } from "react";
 
 import type { HtmlProps } from "./HtmlProps";
 
@@ -19,17 +19,19 @@ export type BoxProps = {
   children?: ReactNode;
   component?: MuiBoxProps["component"];
   id?: MuiBoxProps["id"];
+  role?: AriaRole;
   sx?: MuiBoxProps["sx"];
 } & Pick<HtmlProps, "testId" | "translate">;
 
 const Box = forwardRef<HTMLElement, BoxProps>(
-  ({ children, component, id, sx, testId, translate }, ref) => (
+  ({ children, component, id, role, sx, testId, translate }, ref) => (
     <MuiBox
       ref={ref}
       children={children}
       component={component}
       data-se={testId}
       id={id}
+      role={role}
       sx={sx}
       translate={translate}
     />

package/src/Card.tsx

@@ -65,6 +65,7 @@ const ImageContainer = styled("div", {
   display: "flex",
   alignItems: "flex-start",
   maxHeight: CARD_IMAGE_HEIGHT,
+  height: CARD_IMAGE_HEIGHT,
   marginBlockEnd: odysseyDesignTokens.Spacing5,
   paddingRight: hasMenuButtonChildren ? odysseyDesignTokens.Spacing5 : 0,
 }));

package/src/OdysseyDesignTokensContext.tsx

@@ -10,11 +10,14 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import * as Tokens from "@okta/odyssey-design-tokens";
+import * as odysseyDesignTokens from "@okta/odyssey-design-tokens";
 import { createContext, useContext } from "react";
 
-export type DesignTokens = typeof Tokens;
-export const OdysseyDesignTokensContext = createContext<DesignTokens>(Tokens);
+export type DesignTokens = typeof odysseyDesignTokens;
+export const defaultOdysseyDesignTokensContextValue = odysseyDesignTokens;
+export const OdysseyDesignTokensContext = createContext(
+  defaultOdysseyDesignTokensContextValue,
+);
 
 export const useOdysseyDesignTokens = () =>
   useContext(OdysseyDesignTokensContext);