@okta/okta-signin-widget 7.16.0 → 7.16.1

package/src/v3/components/Icon/CustomOTPIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const CustomOTPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const CustomOTPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#A7B5EC"
       d="M28 23h-6v-6h1v5h5v1Z"

package/src/v3/components/Icon/DuoIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const DuoIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const DuoIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#77AF54"
       fillRule="evenodd"

package/src/v3/components/Icon/EmailIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const EmailIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const EmailIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#A7B5EC"
       d="M32 18v1h5.3L32 24.29v1.42l6-6.01v12.8a1.5 1.5 0 0 1-1.5 1.5h-17a1.5 1.5 0 0 1-1.5-1.5V31h-1v1.5a2.5 2.5 0 0 0 2.5 2.5h17a2.5 2.5 0 0 0 2.5-2.5V18h-7Z"

package/src/v3/components/Icon/GoogleOTPIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const GoogleOTPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const GoogleOTPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fillRule="evenodd"
       clipRule="evenodd"

package/src/v3/components/Icon/IDPIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const IDPIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const IDPIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#A7B5EC"
       d="M15 29.5a5 5 0 1 1 4.78-6.5h1.03a6 6 0 1 0 0 3h-1.03A5.013 5.013 0 0 1 15 29.5Z"

package/src/v3/components/Icon/OktaVerifyIcon.tsx

@@ -27,13 +27,6 @@ export const OktaVerifyIcon: FunctionComponent<IconProps> = ({
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#00297A"
       fillRule="evenodd"

package/src/v3/components/Icon/OnPremMFAIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const OnPremMFAIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const OnPremMFAIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#00297A"
       d="M39 20h-8v-3H16.5a7.5 7.5 0 0 0 0 15H31v-3h8v-9Zm-9 11H16.5a6.5 6.5 0 1 1 0-13H30v13Zm8-3h-7v-7h7v7Z"

package/src/v3/components/Icon/PasswordIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const PasswordIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const PasswordIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#A7B5EC"
       d="M11 17h-1V9h8v1h-7v7Zm28 0h-1v-7h-7V9h8v8ZM18 39h-8v-8h1v7h7v1Zm21 0h-8v-1h7v-7h1v8Z"

package/src/v3/components/Icon/PhoneIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const PhoneIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const PhoneIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#00297A"
       d="M21.5 37h-9a2.6 2.6 0 0 1-2.5-2.682V14.682A2.6 2.6 0 0 1 12.5 12h9a2.6 2.6 0 0 1 2.5 2.682v19.636A2.6 2.6 0 0 1 21.5 37Zm-9-24a1.6 1.6 0 0 0-1.5 1.682v19.636A1.6 1.6 0 0 0 12.5 36h9a1.6 1.6 0 0 0 1.5-1.682V14.682A1.6 1.6 0 0 0 21.5 13h-9Z"

package/src/v3/components/Icon/RSAIcon.tsx

@@ -14,10 +14,12 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const RSAIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const RSAIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     viewBox="0 0 48 48"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
@@ -26,14 +28,7 @@ export const RSAIcon: FunctionComponent<IconProps> = ({ name, description }) =>
   >
     <title id={name}>{description}</title>
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
-    <path
-      d="M42 30.3102H39.6261L35.3202 20.898L31.1912 30.3228H28.8046L34.2217 18.3024H36.4567L42 30.3102ZM15.584 21.8052C15.5461 19.6884 13.8036 18.2142 11.3413 18.2142H6.97229H6V30.2976H7.94458V19.9782H11.2276C12.3262 19.9782 13.5132 20.52 13.5258 21.8178C13.5384 22.977 12.6293 23.6952 11.0887 23.7582H11.0635L9.88916 23.7708L13.8036 30.3102H16.1017C16.1017 30.3102 14.2203 27.1476 13.0333 25.1694C14.7632 24.552 15.5966 23.1912 15.584 21.8052ZM23.2613 23.1786C21.2157 22.6368 20.4202 22.1706 20.4202 21.2382C20.4202 19.827 22.2511 19.6884 22.8951 19.6884C23.9306 19.6884 25.2311 20.016 26.0014 20.394L26.8348 18.8568C25.7867 18.3402 24.1831 18 22.8446 18C19.9909 18 18.2105 19.2348 18.2105 21.339C18.2105 23.7456 20.7233 24.426 22.6805 24.9426C24.7134 25.4844 25.4332 26.1018 25.4332 27.0468C25.4332 28.6092 23.7664 28.8486 22.731 28.8486C21.3167 28.8486 20.1424 28.4706 19.006 27.8028L18.0337 29.3652C19.4732 30.2094 20.9632 30.6 22.731 30.6C25.6731 30.6 27.6303 29.151 27.6303 26.9082C27.6429 24.4008 25.2564 23.7078 23.2613 23.1786Z"
+      d="M 42 30.01 L 39.626 30.01 L 35.32 20.598 L 31.191 30.023 L 28.804 30.023 L 34.221 18.003 L 36.456 18.003 L 42 30.01 Z M 15.584 21.505 C 15.546 19.389 13.803 17.914 11.341 17.914 L 6.972 17.914 L 6 17.914 L 6 29.998 L 7.944 29.998 L 7.944 19.678 L 11.227 19.678 C 12.326 19.678 13.513 20.22 13.525 21.518 C 13.538 22.677 12.629 23.395 11.088 23.458 L 11.063 23.458 L 9.889 23.471 L 13.803 30.01 L 16.101 30.01 C 16.101 30.01 14.22 26.848 13.033 24.87 C 14.763 24.252 15.596 22.891 15.584 21.505 Z M 23.261 22.879 C 21.215 22.337 20.42 21.871 20.42 20.938 C 20.42 19.527 22.251 19.389 22.895 19.389 C 23.93 19.389 25.231 19.716 26.001 20.094 L 26.834 18.557 C 25.786 18.04 24.183 17.7 22.844 17.7 C 19.991 17.7 18.21 18.935 18.21 21.039 C 18.21 23.446 20.723 24.126 22.68 24.643 C 24.713 25.185 25.433 25.802 25.433 26.747 C 25.433 28.309 23.766 28.549 22.731 28.549 C 21.316 28.549 20.142 28.171 19.006 27.503 L 18.033 29.065 C 19.473 29.91 20.963 30.3 22.731 30.3 C 25.673 30.3 27.63 28.851 27.63 26.608 C 27.643 24.101 25.256 23.408 23.261 22.879 Z"
       fill="#BE3A34"
     />
   </svg>

package/src/v3/components/Icon/SecurityKeyOrBiometricsIcon.tsx

@@ -15,25 +15,20 @@ import { FunctionComponent, h } from 'preact';
 import { IconProps } from '../../types';
 
 export const SecurityKeyOrBiometricsIcon: FunctionComponent<IconProps> = (
-  { name, description },
+  {
+    name, description, width, height,
+  },
 ) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#00297A"
       d="M24 17V9h-9v8h-3v15.5a2.5 2.5 0 0 0 2.5 2.5h6.34a8.58 8.58 0 0 1-.38-1H14.5a1.5 1.5 0 0 1-1.5-1.5V18h13v3.84a8.58 8.58 0 0 1 1-.38V17h-3Zm-8 0v-7h7v7h-7Z"

package/src/v3/components/Icon/SecurityQuestionIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const SecurityQuestionIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const SecurityQuestionIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#A7B5EC"
       d="m24.25 39.123-4.615-3.433a21.799 21.799 0 0 1-8.827-16.259l-.329-5.738 12.84-4.534a2.818 2.818 0 0 1 1.862 0l12.84 4.534-.329 5.738a21.8 21.8 0 0 1-8.827 16.259l-4.615 3.433ZM11.521 14.387l.285 4.987a20.811 20.811 0 0 0 8.425 15.514l4.019 2.989 4.019-2.989a20.81 20.81 0 0 0 8.425-15.514l.285-4.987L24.848 10.1a1.792 1.792 0 0 0-1.2 0l-12.127 4.287Z"

package/src/v3/components/Icon/SmartCardIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const SmartCardIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const SmartCardIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <circle
-      cx="24"
-      cy="24"
-      r="24"
-      fill="#F5F5F6"
-      class="siwFillBg"
-    />
     <path
       fill="#00297A"
       fillRule="evenodd"

package/src/v3/components/Icon/SymantecIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const SymantecIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const SymantecIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <path
       fill="#FDB511"
       d="M40.92 5v1.046H42V5h-1.08Zm0 2.092v1.046H42V7.092h-1.08Zm-3.243 1.046v1.047h1.08V8.138h-1.08Zm-14.141.784C14.954 8.922 8 15.654 8 23.96 8 32.267 14.954 39 23.536 39c8.581 0 15.536-6.732 15.536-15.04 0-8.307-6.955-15.038-15.535-15.038h-.001Zm0 4.796c5.839 0 10.583 4.59 10.583 10.242 0 5.652-4.744 10.244-10.583 10.244-5.84 0-10.537-4.591-10.537-10.244 0-5.652 4.698-10.242 10.537-10.242Z"

package/src/v3/components/Icon/YubiKeyIcon.tsx

@@ -14,24 +14,19 @@ import { FunctionComponent, h } from 'preact';
 
 import { IconProps } from '../../types';
 
-export const YubiKeyIcon: FunctionComponent<IconProps> = ({ name, description }) => (
+export const YubiKeyIcon: FunctionComponent<IconProps> = ({
+  name, description, width, height,
+}) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="48"
-    height="48"
+    width={width || 48}
+    height={height || 48}
     fill="none"
     aria-labelledby={name}
     role="img"
     viewBox="0 0 48 48"
   >
     <title id={name}>{description}</title>
-    <path
-      fill="#F5F5F6"
-      fillRule="evenodd"
-      d="M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24Z"
-      class="siwFillBg"
-      clipRule="evenodd"
-    />
     <circle
       cx="24"
       cy="24"

package/src/v3/components/Icon/index.tsx

@@ -10,7 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export * from './CheckCircle';
 export * from './CustomAppIcon';
 export * from './CustomOTPIcon';
 export * from './DuoIcon';
@@ -21,7 +20,6 @@ export * from './OktaVerifyIcon';
 export * from './OnPremMFAIcon';
 export * from './PasswordIcon';
 export * from './PhoneIcon';
-export * from './RightArrowIcon';
 export * from './RSAIcon';
 export * from './SecurityKeyOrBiometricsIcon';
 export * from './SecurityQuestionIcon';

package/src/v3/components/IdentifierContainer/IdentifierContainer.tsx

@@ -10,68 +10,52 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Icon } from '@okta/odyssey-react-mui';
-import classNames from 'classnames';
+import { Box } from '@mui/material';
+import { Tag, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
+import { UserIcon } from '@okta/odyssey-react-mui/icons';
 import { h } from 'preact';
 import { IdentifierContainerElement, UISchemaElementComponent } from 'src/types';
 
+import { loc } from '../../util';
+
 const IdentifierContainer: UISchemaElementComponent<{
   uischema: IdentifierContainerElement
 }> = ({ uischema }) => {
   const { options: { identifier } } = uischema;
-
-  const mainContainerClasses = classNames('identifier-container');
-  const identifierSpanClasses = classNames('identifier', 'no-translate');
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box
       display="flex"
       justifyContent="center"
       alignItems="center"
-      marginBlockEnd={4}
+      marginBlockEnd={tokens.Spacing4}
       maxWidth={1}
-      className={mainContainerClasses}
+      title={identifier}
+      data-se="identifier-container"
     >
-      <Box
-        flex="auto"
-        flexDirection="row"
-        flexGrow="0"
-        paddingX={4}
-        paddingY={2}
-        sx={(theme) => ({
-          borderRadius: '36px',
-          backgroundColor: theme.palette.grey[50],
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-        })}
-      >
-        <Box
-          component="span"
-          sx={(theme) => ({
-            color: theme.palette.primary.main,
-            verticalAlign: 'middle',
-          })}
-        >
-          <Icon
-            name="user"
-            titleAccess="User"
-            sx={{ width: '16px', height: '16px' }}
-          />
-        </Box>
-        <Box
-          component="span"
-          className={identifierSpanClasses}
-          data-se="identifier"
-          title={identifier}
-          sx={{
-            marginInlineStart: '10px',
-          }}
-          aria-label={identifier}
-        >
-          {identifier}
-        </Box>
-      </Box>
+      <Tag
+        icon={(
+          <Box
+            sx={{
+              width: tokens.Spacing4,
+              height: tokens.Spacing4,
+            }}
+          >
+            <UserIcon
+              titleAccess={loc('identifier.icon.alt.text', 'login')}
+              sx={{
+                color: tokens.PalettePrimaryMain,
+                width: tokens.Spacing4,
+                height: tokens.Spacing4,
+              }}
+            />
+          </Box>
+        )}
+        label={identifier}
+        testId="identifier"
+        translate="no"
+      />
     </Box>
   );
 };

package/src/v3/components/Image/Image.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { Box } from '@mui/material';
+import { FunctionComponent, h } from 'preact';
+
+import { ImageProps } from '../../types';
+
+const Image: FunctionComponent<ImageProps> = ({
+  src,
+  alt,
+  width,
+  height,
+  maxWidth,
+  maxHeight,
+  testId,
+  ariaHidden,
+}) => (
+  <Box
+    component="img"
+    src={src}
+    alt={alt}
+    sx={{
+      width,
+      height,
+      maxInlineSize: maxWidth,
+      maxBlockSize: maxHeight,
+    }}
+    data-se={testId}
+    aria-hidden={ariaHidden}
+  />
+);
+export default Image;

package/src/v3/{src/components/CustomPluginsOdysseyCacheProvider → components/Image}/index.tsx

@@ -10,6 +10,6 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { CustomPluginsOdysseyCacheProvider } from './CustomPluginsOdysseyCacheProvider';
+import Image from './Image';
 
-export default CustomPluginsOdysseyCacheProvider;
+export default Image;

package/src/v3/components/ImageWithText/ImageWithText.tsx

@@ -10,13 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Box, Typography } from '@okta/odyssey-react-mui';
+import { Box } from '@mui/material';
+import { Typography, useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
 import { h } from 'preact';
 import { ImageWithTextElement, UISchemaElementComponent } from 'src/types';
 
 const ImageWithText: UISchemaElementComponent<{
   uischema: ImageWithTextElement
 }> = ({ uischema }) => {
+  const tokens = useOdysseyDesignTokens();
   const Icon = uischema.options.SVGIcon;
   const { noTranslate } = uischema;
   const { textContent, alignment = 'flex-start' } = uischema.options;
@@ -30,8 +32,9 @@ const ImageWithText: UISchemaElementComponent<{
       flexWrap="wrap"
     >
       <Box
-        marginInlineEnd={2}
+        marginInlineEnd={textContent ? tokens.Spacing2 : tokens.Spacing0}
         data-se={`icon-${uischema.options.id}`}
+        display="flex"
       >
         <Icon />
       </Box>
@@ -41,8 +44,8 @@ const ImageWithText: UISchemaElementComponent<{
         <Box>
           <Typography
             component="span"
-            className={noTranslate ? 'no-translate' : undefined}
-            data-se={`text-${uischema.options.id}`}
+            translate={noTranslate ? 'no' : undefined}
+            testId={`text-${uischema.options.id}`}
           >
             {textContent}
           </Typography>