@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/dist/test-selectors/querySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"querySelector.js","names":["within","odysseyTestSelectors","interpolateString","string","values","interpolatedString","eval","Object","entries","map","key","value","JSON","stringify","join","test","getByQuerySelector","canvas","method","options","role","text","getByRole","getByLabelText","getByPlaceholderText","getByText","querySelector","templateArgs","templateArgsProp","testSelectors","element","selector","fromEntries","select","featureName","feature","queryOdysseySelector","componentName"],"sources":["../../src/test-selectors/querySelector.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 {\n  queries,\n  within,\n  type BoundFunctions,\n  type ByRoleOptions,\n  type GetByText,\n  GetByRole,\n} from \"@testing-library/dom\";\n\nimport {\n  type FeatureTestSelector,\n  type TestSelector,\n} from \"./featureTestSelector\";\nimport { odysseyTestSelectors } from \"./odysseyTestSelectors\";\n\nexport const interpolateString = (\n  string: string,\n  values: Record<string, string | RegExp>,\n) => {\n  const interpolatedString = eval(`\n    ${Object.entries(values)\n      .map(\n        ([key, value]) =>\n          `const ${key} = ${\n            typeof value === \"string\" ? JSON.stringify(value) : value\n          };`,\n      )\n      .join(\"\")}\n\n    \\`${string}\\`\n  `) as string;\n\n  if (/^\\/*(.+)\\/$/.test(interpolatedString)) {\n    return eval(interpolatedString) as RegExp;\n  }\n\n  return interpolatedString;\n};\n\nconst getByQuerySelector = ({\n  canvas,\n  method,\n  options,\n  role,\n  text,\n}: {\n  canvas: BoundFunctions<typeof queries>;\n  method: \"ByRole\" | \"ByLabelText\" | \"ByPlaceholderText\" | \"ByText\";\n  options?: ByRoleOptions;\n  role?: Parameters<GetByRole>[1];\n  text?: Parameters<GetByText>[1];\n}) => {\n  if (method === \"ByRole\") {\n    return canvas.getByRole(\n      // TODO: These should eventually reference `query` as the function identifier.\n      role!,\n      options,\n    );\n  } else if (method === \"ByLabelText\") {\n    return canvas.getByLabelText(\n      // These should eventually reference `query` as the function identifier.\n      text!, // TODO: Use TypeScript `Infer` to ensure `label` is required when it's `ByLabelText`.\n      options,\n    );\n  } else if (method === \"ByPlaceholderText\") {\n    return canvas.getByPlaceholderText(\n      // These should eventually reference `query` as the function identifier.\n      text!, // TODO: Use TypeScript `Infer` to ensure `label` is required when it's `ByLabelText`.\n      options,\n    );\n  } else if (method === \"ByText\") {\n    return canvas.getByText(\n      // These should eventually reference `query` as the function identifier.\n      text!, // TODO: Use TypeScript `Infer` to ensure `description` is required when it's `ByLabelText`.\n      options,\n    );\n  }\n\n  return null;\n};\n\nexport const querySelector = <TestSelectors extends FeatureTestSelector>({\n  canvas,\n  templateArgs: templateArgsProp,\n  testSelectors,\n}: {\n  /**\n   * Testing Library canvas. This is usually `screen`, but Storybook uses `within(canvas)`.\n   */\n  canvas: BoundFunctions<typeof queries>;\n  templateArgs?: TestSelectors extends TestSelector\n    ? Record<\n        TestSelectors[\"selector\"][\"templateVariableNames\"][number],\n        string | RegExp\n      >\n    : never;\n  testSelectors: TestSelectors;\n}) => {\n  const element =\n    \"selector\" in testSelectors\n      ? getByQuerySelector({\n          canvas,\n          method: testSelectors.selector.method,\n          options:\n            templateArgsProp && testSelectors.selector.options\n              ? Object.fromEntries(\n                  Object.entries(testSelectors.selector.options).map(\n                    ([key, value]) => [\n                      key,\n                      interpolateString(value, templateArgsProp),\n                    ],\n                  ),\n                )\n              : testSelectors.selector.options,\n          ...(testSelectors.selector.method === \"ByRole\"\n            ? {\n                role: templateArgsProp\n                  ? (interpolateString(\n                      testSelectors.selector?.role,\n                      templateArgsProp,\n                    ) as string)\n                  : testSelectors.selector?.role,\n              }\n            : {\n                text: templateArgsProp\n                  ? interpolateString(\n                      testSelectors.selector?.text,\n                      templateArgsProp,\n                    )\n                  : testSelectors.selector?.text,\n              }),\n        })\n      : null;\n\n  const select =\n    \"feature\" in testSelectors\n      ? <FeatureName extends keyof (typeof testSelectors)[\"feature\"]>(\n          featureName: FeatureName,\n          templateArgs?: (typeof testSelectors)[\"feature\"][FeatureName] extends TestSelector\n            ? Record<\n                (typeof testSelectors)[\"feature\"][FeatureName][\"selector\"][\"templateVariableNames\"][number],\n                string | RegExp\n              >\n            : never,\n        ) =>\n          querySelector({\n            canvas: element ? within(element) : canvas,\n            templateArgs,\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-expect-error: Type 'FeatureName' cannot be used to index type 'Record<string, FeatureTestSelector>'.ts(2536)\n            testSelectors: testSelectors.feature[featureName],\n          })\n      : null;\n\n  return {\n    element,\n    select,\n  };\n};\n\nexport const queryOdysseySelector = <\n  ComponentName extends keyof typeof odysseyTestSelectors,\n>({\n  canvas,\n  componentName,\n  templateArgs,\n}: {\n  canvas: Parameters<\n    typeof querySelector<(typeof odysseyTestSelectors)[ComponentName]>\n  >[0][\"canvas\"];\n  /**\n   * Name of the component you want to select within.\n   */\n  componentName: ComponentName;\n  /**\n   * String or RegExp values required for this selector.\n   */\n  templateArgs?: Parameters<\n    typeof querySelector<(typeof odysseyTestSelectors)[ComponentName]>\n  >[0][\"templateArgs\"];\n}) =>\n  querySelector({\n    canvas,\n    templateArgs,\n    testSelectors: odysseyTestSelectors[componentName],\n  });\n"],"mappings":"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"}
+{"version":3,"file":"querySelector.js","names":["getComputedAccessibleText","getByRoleQuerySelector","getByTextQuerySelector","getControlledElement","ElementError","captureElement","containerElement","queryMethod","querySelectorOptions","role","testSelector","sharedProps","element","queryOptions","Object","fromEntries","entries","elementSelector","options","map","testSelectorOptionKey","testingLibraryOptionKey","method","Array","isArray","selectionMethod","text","isControlledElement","error","querySelector","props","capturedElement","undefined","getAccessibleText","labelName","Error","type","accessibleText","selectChild","childProps","children","name"],"sources":["../../src/test-selectors/querySelector.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 {\n  type AccessibleTextSelector,\n  type AriaRole,\n  type ElementChildSelector,\n  type TestSelector,\n  type ElementSelector,\n} from \"./testSelector\";\nimport { getComputedAccessibleText } from \"./getComputedAccessibleText\";\nimport {\n  getByRoleQuerySelector,\n  getByTextQuerySelector,\n  type QueryMethod,\n} from \"./getByQuerySelector\";\nimport { getControlledElement } from \"./linkedHtmlSelectors\";\nimport { ElementError } from \"./sanityChecks\";\n\nexport type InnerQuerySelectorProps<\n  LocalTestSelector extends TestSelector,\n  LocalQueryMethod extends QueryMethod,\n> = {\n  /**\n   * Testing Library method used to query elements.\n   */\n  queryMethod?: LocalQueryMethod;\n} & (LocalTestSelector extends ElementSelector\n  ? LocalTestSelector[\"elementSelector\"] extends {\n      role: infer Role;\n    }\n    ? Role extends AriaRole[]\n      ? {\n          /**\n           * Role is used when you have an optional `role`; otherwise, it'd baked into the metadata.\n           */\n          role: Role[number];\n        }\n      : object\n    : object\n  : object) &\n  (LocalTestSelector extends ElementSelector\n    ? {\n        /**\n         * Helps narrow down HTML selection to the correct element.\n         */\n        options: Record<\n          keyof LocalTestSelector[\"elementSelector\"][\"options\"],\n          string | RegExp\n        >;\n      }\n    : object);\n\nexport const captureElement = <\n  LocalTestSelector extends TestSelector,\n  QuerySelectorOptions extends Record<string, string | RegExp>,\n  LocalQueryMethod extends QueryMethod = \"get\",\n>({\n  containerElement,\n  queryMethod,\n  querySelectorOptions,\n  role,\n  testSelector,\n}: {\n  containerElement: HTMLElement;\n  queryMethod: LocalQueryMethod;\n  querySelectorOptions?: QuerySelectorOptions;\n  role?: AriaRole;\n  testSelector: LocalTestSelector;\n}) => {\n  if (\"elementSelector\" in testSelector && querySelectorOptions) {\n    const sharedProps = {\n      element: containerElement,\n      queryMethod,\n      queryOptions: Object.fromEntries(\n        Object.entries(testSelector.elementSelector.options).map(\n          ([testSelectorOptionKey, testingLibraryOptionKey]) => [\n            testingLibraryOptionKey,\n            querySelectorOptions[testSelectorOptionKey],\n          ],\n        ),\n      ),\n    };\n\n    if (testSelector.elementSelector.method === \"ByRole\") {\n      return getByRoleQuerySelector({\n        ...sharedProps,\n        role:\n          Array.isArray(testSelector.elementSelector.role) || role\n            ? role || \"\"\n            : testSelector.elementSelector.role,\n      });\n    }\n\n    return getByTextQuerySelector({\n      ...sharedProps,\n      selectionMethod: testSelector.elementSelector.method,\n      text: testSelector.elementSelector.text,\n    });\n  } else if (\n    \"isControlledElement\" in testSelector &&\n    testSelector.isControlledElement\n  ) {\n    try {\n      return getControlledElement({ element: containerElement });\n    } catch (error) {\n      if (queryMethod === \"query\") {\n        return null;\n      }\n\n      throw error;\n    }\n  }\n\n  return null;\n};\n\nexport const querySelector =\n  <LocalTestSelector extends TestSelector>(\n    /**\n     * Selectors object including children and accessible text selections.\n     */\n    testSelector: LocalTestSelector,\n  ) =>\n  <LocalQueryMethod extends QueryMethod = \"get\">(\n    props: {\n      /**\n       * Refers to Testing Library's canvas. This is usually `screen`, but Storybook uses `within(canvas)`.\n       */\n      element: HTMLElement;\n    } & InnerQuerySelectorProps<LocalTestSelector, LocalQueryMethod>,\n  ) => {\n    const { element: containerElement, queryMethod } = props;\n\n    const capturedElement = captureElement({\n      containerElement,\n      queryMethod: queryMethod || (\"get\" as const),\n      querySelectorOptions: \"options\" in props ? props.options : undefined,\n      role: \"role\" in props ? (props.role as AriaRole) : undefined,\n      testSelector,\n    });\n\n    const getAccessibleText = <\n      LabelName extends LocalTestSelector extends AccessibleTextSelector\n        ? keyof LocalTestSelector[\"accessibleText\"]\n        : never,\n    >(\n      labelName: LabelName,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"accessibleText\" in testSelector)) {\n        throw new Error(\"Missing `accessibleText` in `TestSelector`\");\n      }\n\n      return getComputedAccessibleText({\n        element: capturedElement,\n        type: testSelector.accessibleText[labelName],\n      });\n    };\n\n    const selectChild = <\n      ChildName extends LocalTestSelector extends ElementChildSelector\n        ? keyof LocalTestSelector[\"children\"]\n        : keyof ElementChildSelector,\n      ChildQueryMethod extends QueryMethod = \"get\",\n    >(\n      childProps: {\n        name: ChildName;\n      } & InnerQuerySelectorProps<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n        ChildQueryMethod\n      >,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"children\" in testSelector)) {\n        throw new Error(\"Missing `children` in `TestSelector`\");\n      }\n\n      type Options = Record<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName] extends ElementSelector\n            ? keyof LocalTestSelector[\"children\"][ChildName][\"elementSelector\"][\"options\"]\n            : never\n          : never,\n        string | RegExp\n      >;\n\n      return querySelector(\n        testSelector.children[\n          childProps.name\n        ] as LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n      )(\n        // @ts-expect-error: Type '{ role?: AriaRole | undefined; options?: Record<LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] extends TestSelector ? keyof LocalTestSelector[\"children\"][ChildName][\"selector\"][\"options\"] : string : string, string | RegExp> | undefined; element: HTMLElement...' is not assignable to type '(LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] : TestSelector) extends { ...; } ? Role extends AriaRole[] ? { ...; } : object : object'.ts(2345)\n        // `as testSelector.children[ChildName]` narrows the props down enough that TypeScript errors here. We're passing the correct information, but it doesn't know that, and it's difficult to fix this. -Kevin Ghadyani\n        {\n          element: capturedElement,\n          queryMethod: childProps.queryMethod,\n          ...(\"options\" in childProps && childProps.options\n            ? {\n                options: childProps.options as Options,\n              }\n            : {}),\n          ...(\"role\" in childProps && childProps.role\n            ? {\n                role: childProps.role as AriaRole,\n              }\n            : {}),\n        },\n      );\n    };\n\n    return {\n      element: capturedElement as LocalQueryMethod extends \"get\"\n        ? HTMLElement\n        : HTMLElement | null,\n      getAccessibleText:\n        getAccessibleText as LocalTestSelector extends AccessibleTextSelector\n          ? typeof getAccessibleText\n          : never,\n      selectChild: selectChild as LocalTestSelector extends ElementChildSelector\n        ? typeof selectChild\n        : never,\n    };\n  };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAmBSA,yBAAyB;AAAA,SAEhCC,sBAAsB,EACtBC,sBAAsB;AAAA,SAGfC,oBAAoB;AAAA,SACpBC,YAAY;AAoCrB,OAAO,MAAMC,cAAc,GAAGA,CAI5B;EACAC,gBAAgB;EAChBC,WAAW;EACXC,oBAAoB;EACpBC,IAAI;EACJC;AAOF,CAAC,KAAK;EACJ,IAAI,iBAAiB,IAAIA,YAAY,IAAIF,oBAAoB,EAAE;IAC7D,MAAMG,WAAW,GAAG;MAClBC,OAAO,EAAEN,gBAAgB;MACzBC,WAAW;MACXM,YAAY,EAAEC,MAAM,CAACC,WAAW,CAC9BD,MAAM,CAACE,OAAO,CAACN,YAAY,CAACO,eAAe,CAACC,OAAO,CAAC,CAACC,GAAG,CACtD,CAAC,CAACC,qBAAqB,EAAEC,uBAAuB,CAAC,KAAK,CACpDA,uBAAuB,EACvBb,oBAAoB,CAACY,qBAAqB,CAAC,CAE/C,CACF;IACF,CAAC;IAED,IAAIV,YAAY,CAACO,eAAe,CAACK,MAAM,KAAK,QAAQ,EAAE;MACpD,OAAOrB,sBAAsB,CAAC;QAC5B,GAAGU,WAAW;QACdF,IAAI,EACFc,KAAK,CAACC,OAAO,CAACd,YAAY,CAACO,eAAe,CAACR,IAAI,CAAC,IAAIA,IAAI,GACpDA,IAAI,IAAI,EAAE,GACVC,YAAY,CAACO,eAAe,CAACR;MACrC,CAAC,CAAC;IACJ;IAEA,OAAOP,sBAAsB,CAAC;MAC5B,GAAGS,WAAW;MACdc,eAAe,EAAEf,YAAY,CAACO,eAAe,CAACK,MAAM;MACpDI,IAAI,EAAEhB,YAAY,CAACO,eAAe,CAACS;IACrC,CAAC,CAAC;EACJ,CAAC,MAAM,IACL,qBAAqB,IAAIhB,YAAY,IACrCA,YAAY,CAACiB,mBAAmB,EAChC;IACA,IAAI;MACF,OAAOxB,oBAAoB,CAAC;QAAES,OAAO,EAAEN;MAAiB,CAAC,CAAC;IAC5D,CAAC,CAAC,OAAOsB,KAAK,EAAE;MACd,IAAIrB,WAAW,KAAK,OAAO,EAAE;QAC3B,OAAO,IAAI;MACb;MAEA,MAAMqB,KAAK;IACb;EACF;EAEA,OAAO,IAAI;AACb,CAAC;AAED,OAAO,MAAMC,aAAa,GAKtBnB,YAA+B,IAG/BoB,KAKgE,IAC7D;EACH,MAAM;IAAElB,OAAO,EAAEN,gBAAgB;IAAEC;EAAY,CAAC,GAAGuB,KAAK;EAExD,MAAMC,eAAe,GAAG1B,cAAc,CAAC;IACrCC,gBAAgB;IAChBC,WAAW,EAAEA,WAAW,IAAK,KAAe;IAC5CC,oBAAoB,EAAE,SAAS,IAAIsB,KAAK,GAAGA,KAAK,CAACZ,OAAO,GAAGc,SAAS;IACpEvB,IAAI,EAAE,MAAM,IAAIqB,KAAK,GAAIA,KAAK,CAACrB,IAAI,GAAgBuB,SAAS;IAC5DtB;EACF,CAAC,CAAC;EAEF,MAAMuB,iBAAiB,GAKrBC,SAAoB,IACjB;IACH,IAAI,CAACH,eAAe,EAAE;MACpB,MAAM,IAAI3B,YAAY,CACpB,iCAAiC,EACjCE,gBACF,CAAC;IACH;IAEA,IAAI,EAAE,gBAAgB,IAAII,YAAY,CAAC,EAAE;MACvC,MAAM,IAAIyB,KAAK,CAAC,4CAA4C,CAAC;IAC/D;IAEA,OAAOnC,yBAAyB,CAAC;MAC/BY,OAAO,EAAEmB,eAAe;MACxBK,IAAI,EAAE1B,YAAY,CAAC2B,cAAc,CAACH,SAAS;IAC7C,CAAC,CAAC;EACJ,CAAC;EAED,MAAMI,WAAW,GAMfC,UAOC,IACE;IACH,IAAI,CAACR,eAAe,EAAE;MACpB,MAAM,IAAI3B,YAAY,CACpB,iCAAiC,EACjCE,gBACF,CAAC;IACH;IAEA,IAAI,EAAE,UAAU,IAAII,YAAY,CAAC,EAAE;MACjC,MAAM,IAAIyB,KAAK,CAAC,sCAAsC,CAAC;IACzD;IAWA,OAAON,aAAa,CAClBnB,YAAY,CAAC8B,QAAQ,CACnBD,UAAU,CAACE,IAAI,CAInB,CAAC,CAGC;MACE7B,OAAO,EAAEmB,eAAe;MACxBxB,WAAW,EAAEgC,UAAU,CAAChC,WAAW;MACnC,IAAI,SAAS,IAAIgC,UAAU,IAAIA,UAAU,CAACrB,OAAO,GAC7C;QACEA,OAAO,EAAEqB,UAAU,CAACrB;MACtB,CAAC,GACD,CAAC,CAAC,CAAC;MACP,IAAI,MAAM,IAAIqB,UAAU,IAAIA,UAAU,CAAC9B,IAAI,GACvC;QACEA,IAAI,EAAE8B,UAAU,CAAC9B;MACnB,CAAC,GACD,CAAC,CAAC;IACR,CACF,CAAC;EACH,CAAC;EAED,OAAO;IACLG,OAAO,EAAEmB,eAEa;IACtBE,iBAAiB,EACfA,iBAES;IACXK,WAAW,EAAEA;EAGf,CAAC;AACH,CAAC"}

package/dist/test-selectors/sanityChecks.js

@@ -0,0 +1,33 @@
+/*!
+ * 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 class ElementError extends Error {
+  constructor(message, element) {
+    super(message);
+    this.name = "ElementError";
+    console.error("ElementError", element);
+  }
+}
+export const normalizeText = text => {
+  return text.replace(/\s+/g, " ").trim();
+};
+export const getWindow = htmlElement => {
+  if (!htmlElement || !htmlElement.ownerDocument || !htmlElement.ownerDocument.defaultView) {
+    throw new ElementError("Expected element to have a `window`", htmlElement);
+  }
+  return htmlElement.ownerDocument.defaultView;
+};
+export const validateHtmlElement = htmlElement => {
+  const window = getWindow(htmlElement);
+  if (!(htmlElement instanceof window.SVGElement) && !(htmlElement instanceof window.HTMLElement)) {
+    throw new ElementError("Expected element to be an HTMLElement or an SVGElement", htmlElement);
+  }
+};
+//# sourceMappingURL=sanityChecks.js.map

package/dist/test-selectors/sanityChecks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanityChecks.js","names":["ElementError","Error","constructor","message","element","name","console","error","normalizeText","text","replace","trim","getWindow","htmlElement","ownerDocument","defaultView","validateHtmlElement","window","SVGElement","HTMLElement"],"sources":["../../src/test-selectors/sanityChecks.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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\n// Code modified from: https://github.com/testing-library/jest-dom/blob/main/src/utils.js\n\nexport class ElementError extends Error {\n  constructor(message: string, element: HTMLElement) {\n    super(message);\n\n    this.name = \"ElementError\";\n\n    console.error(\"ElementError\", element);\n  }\n}\n\nexport const normalizeText = (text: string) => {\n  return text.replace(/\\s+/g, \" \").trim();\n};\n\nexport const getWindow = (htmlElement: HTMLElement) => {\n  if (\n    !htmlElement ||\n    !htmlElement.ownerDocument ||\n    !htmlElement.ownerDocument.defaultView\n  ) {\n    throw new ElementError(\"Expected element to have a `window`\", htmlElement);\n  }\n\n  return htmlElement.ownerDocument.defaultView!;\n};\n\nexport const validateHtmlElement = (htmlElement: HTMLElement) => {\n  const window = getWindow(htmlElement);\n\n  if (\n    !(htmlElement instanceof window.SVGElement) &&\n    !(htmlElement instanceof window.HTMLElement)\n  ) {\n    throw new ElementError(\n      \"Expected element to be an HTMLElement or an SVGElement\",\n      htmlElement,\n    );\n  }\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAIA,OAAO,MAAMA,YAAY,SAASC,KAAK,CAAC;EACtCC,WAAWA,CAACC,OAAe,EAAEC,OAAoB,EAAE;IACjD,KAAK,CAACD,OAAO,CAAC;IAEd,IAAI,CAACE,IAAI,GAAG,cAAc;IAE1BC,OAAO,CAACC,KAAK,CAAC,cAAc,EAAEH,OAAO,CAAC;EACxC;AACF;AAEA,OAAO,MAAMI,aAAa,GAAIC,IAAY,IAAK;EAC7C,OAAOA,IAAI,CAACC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAACC,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,OAAO,MAAMC,SAAS,GAAIC,WAAwB,IAAK;EACrD,IACE,CAACA,WAAW,IACZ,CAACA,WAAW,CAACC,aAAa,IAC1B,CAACD,WAAW,CAACC,aAAa,CAACC,WAAW,EACtC;IACA,MAAM,IAAIf,YAAY,CAAC,qCAAqC,EAAEa,WAAW,CAAC;EAC5E;EAEA,OAAOA,WAAW,CAACC,aAAa,CAACC,WAAW;AAC9C,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAIH,WAAwB,IAAK;EAC/D,MAAMI,MAAM,GAAGL,SAAS,CAACC,WAAW,CAAC;EAErC,IACE,EAAEA,WAAW,YAAYI,MAAM,CAACC,UAAU,CAAC,IAC3C,EAAEL,WAAW,YAAYI,MAAM,CAACE,WAAW,CAAC,EAC5C;IACA,MAAM,IAAInB,YAAY,CACpB,wDAAwD,EACxDa,WACF,CAAC;EACH;AACF,CAAC"}

package/dist/test-selectors/testSelector.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=testSelector.js.map

package/dist/test-selectors/testSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"testSelector.js","names":[],"sources":["../../src/test-selectors/testSelector.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-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 {\n  type ByRoleOptions,\n  type SelectorMatcherOptions,\n} from \"@testing-library/dom\";\n\nimport {\n  type RoleSelectorMethod,\n  type TextSelectorMethod,\n} from \"./getByQuerySelector\";\n\n/**\n * We can't use React's `AriaRole` because it allows any string value. We want to be very specific. This is otherwise copied straight from React's code.\n * @see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2815\n */\nexport type AriaRole =\n  | \"alert\"\n  | \"alertdialog\"\n  | \"application\"\n  | \"article\"\n  | \"banner\"\n  | \"button\"\n  | \"cell\"\n  | \"checkbox\"\n  | \"columnheader\"\n  | \"combobox\"\n  | \"complementary\"\n  | \"contentinfo\"\n  | \"definition\"\n  | \"dialog\"\n  | \"directory\"\n  | \"document\"\n  | \"feed\"\n  | \"figure\"\n  | \"form\"\n  | \"grid\"\n  | \"gridcell\"\n  | \"group\"\n  | \"heading\"\n  | \"img\"\n  | \"link\"\n  | \"list\"\n  | \"listbox\"\n  | \"listitem\"\n  | \"log\"\n  | \"main\"\n  | \"marquee\"\n  | \"math\"\n  | \"menu\"\n  | \"menubar\"\n  | \"menuitem\"\n  | \"menuitemcheckbox\"\n  | \"menuitemradio\"\n  | \"navigation\"\n  | \"none\"\n  | \"note\"\n  | \"option\"\n  | \"presentation\"\n  | \"progressbar\"\n  | \"radio\"\n  | \"radiogroup\"\n  | \"region\"\n  | \"row\"\n  | \"rowgroup\"\n  | \"rowheader\"\n  | \"scrollbar\"\n  | \"search\"\n  | \"searchbox\"\n  | \"separator\"\n  | \"slider\"\n  | \"spinbutton\"\n  | \"status\"\n  | \"switch\"\n  | \"tab\"\n  | \"table\"\n  | \"tablist\"\n  | \"tabpanel\"\n  | \"term\"\n  | \"textbox\"\n  | \"timer\"\n  | \"toolbar\"\n  | \"tooltip\"\n  | \"tree\"\n  | \"treegrid\"\n  | \"treeitem\";\n\nexport type ControlledElementSelector = { isControlledElement?: true };\n\nexport type RoleSelectorOptions = {\n  method: RoleSelectorMethod;\n  options: Record<string, keyof ByRoleOptions>;\n  role: AriaRole | AriaRole[];\n  // | \"UNKNOWN\" // This should be a `Symbol`, but it can't because this is ultimately going to be JSON stringified. This type will allow passing a custom role if the component allows it: `Box`.\n};\n\nexport type TextSelectorOptions = {\n  method: TextSelectorMethod;\n  options: Record<string, keyof SelectorMatcherOptions>;\n  text: string;\n};\n\nexport type ElementSelectorValue = RoleSelectorOptions | TextSelectorOptions;\n\nexport type ElementSelector = {\n  elementSelector: ElementSelectorValue;\n};\n\nexport type ElementChildSelectorValue = Record<\n  string,\n  TestSelector & ControlledElementSelector\n>;\n\nexport type ElementChildSelector = {\n  children: ElementChildSelectorValue;\n};\n\nexport type AccessibleTextSelectorValue =\n  | \"description\"\n  | \"errorMessage\"\n  | \"label\";\n\nexport type AccessibleTextSelector = {\n  /** An \"accessible -> semantic\" name mapping such as \"`description` -> `hint`\" where \"description\" equates to `\"aria-description\"`. */\n  accessibleText: Record<string, AccessibleTextSelectorValue>;\n};\n\nexport type TestSelector =\n  | ElementChildSelector\n  | ElementSelector\n  | (ElementChildSelector & ElementSelector)\n  | (AccessibleTextSelector & ElementSelector)\n  | (ElementChildSelector & AccessibleTextSelector & ElementSelector);\n"],"mappings":""}

package/dist/test-selectors/testSelectors.json

@@ -1 +1 @@
-{"Callout":{"feature":{"link":{"selector":{"method":"ByRole","options":{"name":"${linkText}"},"role":"link","templateVariableNames":["linkText"]}},"text":{"selector":{"method":"ByText","templateVariableNames":["text"],"text":"${text}"}},"title":{"selector":{"method":"ByText","templateVariableNames":["title"],"text":"${title}"}}},"selector":{"method":"ByRole","options":{"name":"${title}"},"role":"${role}","templateVariableNames":["role","title"]}},"Tabs":{"feature":{"tabItem":{"selector":{"method":"ByRole","options":{"name":"${label}"},"templateVariableNames":["label"],"role":"tab"}}},"selector":{"method":"ByRole","options":{"name":"${ariaLabel}"},"role":"tablist","templateVariableNames":["ariaLabel"]}},"TextField":{"feature":{"description":{"selector":{"method":"ByText","templateVariableNames":["hint"],"text":"${hint}"}},"errorMessage":{"selector":{"method":"ByText","templateVariableNames":["errorMessage"],"text":"${errorMessage}"}},"input":{"selector":{"method":"ByRole","options":{"name":"${label}"},"role":"textbox","templateVariableNames":["label"]}},"label":{"selector":{"method":"ByRole","options":{"name":"${label}"},"role":"LabelText","templateVariableNames":["label"]}},"link":{"selector":{"method":"ByRole","options":{"name":"${label}"},"templateVariableNames":["label"],"role":"link"}}}}}
+{"Autocomplete":{"accessibleText":{"errorMessage":"errorMessage","hint":"description","label":"label"},"children":{"list":{"children":{"listItem":{"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"option"}}},"isControlledElement":true}},"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"combobox"}},"Callout":{"accessibleText":{"text":"description","title":"label"},"children":{"link":{"elementSelector":{"method":"ByRole","options":{"linkText":"name"},"role":"link"}}},"elementSelector":{"method":"ByRole","options":{"title":"name"},"role":["alert","status"]}},"Select":{"accessibleText":{"errorMessage":"errorMessage","hint":"description","label":"label"},"children":{"list":{"accessibleText":{"label":"label"},"children":{"listItem":{"accessibleText":{"label":"label"},"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"option"}}},"isControlledElement":true}},"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"combobox"}},"Tabs":{"children":{"tabItem":{"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"tab"}}},"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"tablist"}},"TextField":{"accessibleText":{"errorMessage":"errorMessage","hint":"description","label":"label"},"children":{"link":{"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"link"}}},"elementSelector":{"method":"ByRole","options":{"label":"name"},"role":"textbox"}}}

package/dist/theme/components.js

@@ -44,7 +44,8 @@ const drawerSizes = {
 };
 export const components = ({
   odysseyTokens,
-  shadowDomElement
+  shadowDomElement,
+  shadowRootElement
 }) => {
   return {
     MuiAccordion: {
@@ -152,29 +153,33 @@ export const components = ({
           padding: odysseyTokens.Spacing4,
           gap: odysseyTokens.Spacing4,
           color: odysseyTokens.TypographyColorBody,
-          border: 0,
+          border: "1px solid",
           ...(ownerState.severity === "success" && {
-            backgroundColor: odysseyTokens.HueGreen100,
+            backgroundColor: odysseyTokens.HueGreen50,
+            borderColor: odysseyTokens.HueGreen200,
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueGreen100.concat(odysseyTokens.PaletteAlphaSemi)
+              backgroundColor: odysseyTokens.HueGreen50.concat(odysseyTokens.PaletteAlphaSemi)
             })
           }),
           ...(ownerState.severity === "info" && {
-            backgroundColor: odysseyTokens.HueBlue100,
+            backgroundColor: odysseyTokens.HueBlue50,
+            borderColor: odysseyTokens.HueBlue200,
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueBlue100.concat(odysseyTokens.PaletteAlphaSemi)
+              backgroundColor: odysseyTokens.HueBlue50.concat(odysseyTokens.PaletteAlphaSemi)
             })
           }),
           ...(ownerState.severity === "error" && {
-            backgroundColor: odysseyTokens.HueRed100,
+            backgroundColor: odysseyTokens.HueRed50,
+            borderColor: odysseyTokens.HueRed200,
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueRed100.concat(odysseyTokens.PaletteAlphaSemi)
+              backgroundColor: odysseyTokens.HueRed50.concat(odysseyTokens.PaletteAlphaSemi)
             })
           }),
           ...(ownerState.severity === "warning" && {
-            backgroundColor: odysseyTokens.HueYellow100,
+            backgroundColor: odysseyTokens.HueYellow50,
+            borderColor: odysseyTokens.HueYellow500,
             ...(ownerState.variant === "toast" && {
-              backgroundColor: odysseyTokens.HueYellow100.concat(odysseyTokens.PaletteAlphaSemi)
+              backgroundColor: odysseyTokens.HueYellow50.concat(odysseyTokens.PaletteAlphaSemi)
             })
           }),
           [`& .${alertTitleClasses.root}`]: {
@@ -431,7 +436,6 @@ export const components = ({
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1,
           ...(ownerState.ListboxComponent !== undefined && {
-            height: "100%",
             maxHeight: "40vh"
           })
         }),
@@ -781,73 +785,95 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
+          ownerState,
           theme
-        }) => ({
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
-            duration: odysseyTokens.TransitionDurationMain
-          }),
-          [`.${svgIconClasses.root}`]: {
-            color: odysseyTokens.HueNeutralWhite,
-            transition: theme.transitions.create(["color"], {
+        }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+          return {
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            border: `1px solid ${odysseyTokens.HueNeutral500}`,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
               duration: odysseyTokens.TransitionDurationMain
-            })
-          },
-          "&.Mui-checked, &.MuiCheckbox-indeterminate": {
-            backgroundColor: odysseyTokens.PalettePrimaryMain,
-            borderColor: odysseyTokens.PalettePrimaryMain,
+            }),
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
+            "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              borderColor: odysseyTokens.PalettePrimaryMain,
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryDark,
+                borderColor: odysseyTokens.PalettePrimaryDark
+              }
+            },
             [`.${formControlLabelClasses.root}:hover > &`]: {
-              backgroundColor: odysseyTokens.PalettePrimaryDark,
-              borderColor: odysseyTokens.PalettePrimaryDark
-            }
-          },
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900
-          },
-          ".Mui-error:not(.Mui-valid):hover > &": {
-            borderColor: odysseyTokens.BorderColorDangerDark,
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerDark,
-              borderColor: odysseyTokens.BorderColorDangerDark
-            }
-          },
-          ".Mui-error:not(.Mui-valid) > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PaletteDangerMain,
-              borderColor: odysseyTokens.BorderColorDangerControl
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900
+            },
+            ".Mui-error:not(.Mui-valid):hover > &": {
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+                borderColor: odysseyTokens.BorderColorDangerDark
+              }
             },
-            "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-            }
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.HueNeutral300,
             ".Mui-error:not(.Mui-valid) > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+                borderColor: odysseyTokens.BorderColorDangerControl
+              },
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            },
+            "&.Mui-disabled": {
               backgroundColor: odysseyTokens.HueNeutral50,
-              borderColor: odysseyTokens.HueNeutral300
+              borderColor: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral300
+              }
             },
-            [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutral300
-            }
-          }
-        })
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              border: `1px solid ${odysseyTokens.HueNeutral300}`,
+              cursor: "default",
+              "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+                [`.${formControlLabelClasses.root}:hover > &`]: {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: odysseyTokens.HueNeutral300
+                }
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral700
+              }
+            })
+          };
+        }
       }
     },
     MuiChip: {
@@ -1919,6 +1945,12 @@ export const components = ({
               }
             }
           },
+          "&[data-empty='true']": {
+            "&:after": {
+              content: "' '",
+              visibility: "hidden"
+            }
+          },
           ...(!ownerState.disableGutters && {
             paddingInline: odysseyTokens.Spacing4
           }),
@@ -1953,7 +1985,7 @@ export const components = ({
     },
     MuiModal: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       }
     },
     MuiNativeSelect: {
@@ -1988,7 +2020,7 @@ export const components = ({
     },
     MuiPopover: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       },
       styleOverrides: {
         paper: {
@@ -2001,7 +2033,7 @@ export const components = ({
     },
     MuiPopper: {
       defaultProps: {
-        container: shadowDomElement
+        container: shadowRootElement || shadowDomElement
       }
     },
     MuiRadio: {
@@ -2012,73 +2044,100 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
+          ownerState,
           theme
-        }) => ({
-          position: "relative",
-          insetBlockStart: `${2 / theme.typography.fontSize}rem`,
-          width: `${odysseyTokens.TypographyLineHeightUi}em`,
-          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-          height: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
-          borderWidth: odysseyTokens.BorderWidthMain,
-          borderStyle: odysseyTokens.BorderStyleMain,
-          borderColor: odysseyTokens.HueNeutral500,
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
-            duration: odysseyTokens.TransitionDurationMain
-          }),
-          "&::before": {
-            content: "''",
-            position: "absolute",
-            width: odysseyTokens.Spacing2,
-            height: odysseyTokens.Spacing2,
-            borderRadius: "50%",
-            backgroundColor: "transparent",
-            transition: theme.transitions.create(["background-color"], {
+        }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+          return {
+            position: "relative",
+            insetBlockStart: `${2 / theme.typography.fontSize}rem`,
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral500,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
               duration: odysseyTokens.TransitionDurationMain
-            })
-          },
-          [`.${formControlLabelClasses.root}:hover > &`]: {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.HueNeutral900
-          },
-          ".Mui-error:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: odysseyTokens.BorderColorDangerDark,
+            }),
             "&::before": {
-              backgroundColor: odysseyTokens.PaletteDangerDark
-            }
-          },
-          ".Mui-error > &": {
-            borderColor: odysseyTokens.BorderColorDangerControl,
+              content: "''",
+              position: "absolute",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
+              borderRadius: "50%",
+              backgroundColor: "transparent",
+              transition: theme.transitions.create(["background-color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900
+            },
+            ".Mui-error:hover > &": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerDark
+              }
+            },
+            ".Mui-error > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              }
+            },
             "&.Mui-focusVisible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-            }
-          },
-          "&.Mui-focusVisible": {
-            borderColor: odysseyTokens.HueNeutral900,
-            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&.Mui-checked": {
-            position: "relative",
-            "&::before": {
-              backgroundColor: odysseyTokens.PalettePrimaryMain
-            }
-          },
-          ".Mui-error > &.Mui-checked::before": {
-            backgroundColor: odysseyTokens.PaletteDangerMain
-          },
-          "&.Mui-disabled": {
-            backgroundColor: odysseyTokens.HueNeutral50,
-            borderColor: odysseyTokens.BorderColorDisabled,
-            "&.Mui-checked::before": {
-              backgroundColor: odysseyTokens.BorderColorDisabled
-            }
-          }
-        })
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            },
+            "&.Mui-checked": {
+              position: "relative",
+              "&::before": {
+                backgroundColor: odysseyTokens.PalettePrimaryMain
+              }
+            },
+            ".Mui-error > &.Mui-checked::before": {
+              backgroundColor: odysseyTokens.PaletteDangerMain
+            },
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.BorderColorDisabled,
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.BorderColorDisabled
+              }
+            },
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              borderColor: odysseyTokens.HueNeutral300,
+              cursor: "default",
+              "&::before": {
+                content: "''",
+                position: "absolute",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                borderRadius: "50%",
+                backgroundColor: "transparent",
+                transition: theme.transitions.create(["background-color"], {
+                  duration: odysseyTokens.TransitionDurationMain
+                })
+              },
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.HueNeutral700
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300
+              }
+            })
+          };
+        }
       }
     },
     MuiSnackbar: {
@@ -2107,11 +2166,34 @@ export const components = ({
         }
       },
       styleOverrides: {
-        select: {
+        root: ({
+          ownerState
+        }) => ({
+          ...(ownerState?.inputProps?.readOnly && {
+            "&.MuiInputBase-root": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral200,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral50
+              },
+              "&.Mui-focused": {
+                borderColor: odysseyTokens.PalettePrimaryMain
+              }
+            }
+          }),
+          "& .MuiSelect-icon": {
+            right: "unset",
+            insetInlineEnd: odysseyTokens.Spacing3,
+            color: odysseyTokens.TypographyColorSubordinate
+          }
+        }),
+        select: ({
+          ownerState
+        }) => ({
           height: "auto",
           paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
           paddingInline: odysseyTokens.Spacing3,
-          minHeight: 0,
+          minHeight: `${odysseyTokens.TypographyLineHeightUi}em`,
           "&:focus": {
             backgroundColor: "transparent"
           },
@@ -2124,13 +2206,16 @@ export const components = ({
           },
           ["& .MuiListItemSecondaryAction-root"]: {
             display: "none"
-          }
-        },
-        icon: {
-          right: "unset",
-          insetInlineEnd: odysseyTokens.Spacing3,
-          color: odysseyTokens.TypographyColorSubordinate
-        }
+          },
+          ...(ownerState?.inputProps?.readOnly && {
+            color: odysseyTokens.HueNeutral700,
+            cursor: "default",
+            "&:focus": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PalettePrimaryMain
+            }
+          })
+        })
       }
     },
     MuiSvgIcon: {