npm - @verdaccio/ui-theme - Versions diffs - 6.0.0-6-next.9 → 6.0.0-6-next.13 - Mend

@verdaccio/ui-theme 6.0.0-6-next.9 → 6.0.0-6-next.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (323) hide show

package/src/components/Loading/Spinner/Spinner.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import CircularProgress from '../../CircularProgress';
@@ -31,5 +30,5 @@ const Wrapper = styled('div')<Pick<Props, 'centered'>>(({ centered }) => ({
 }));
 const Circular = styled(CircularProgress)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
+  color: theme?.palette.mode === 'dark' ? theme?.palette.white : theme?.palette.primary.main,
 }));

package/src/components/Loading/Spinner/__snapshots__/Spinner.test.tsx.snap CHANGED Viewed

@@ -3,7 +3,40 @@
 exports[`<Spinner /> component should render the component in default state 1`] = `
 Object {
   "asFragment": [Function],
-  "baseElement": .emotion-0 {
+  "baseElement": @keyframes animation-0 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes animation-1 {
+  0% {
+    stroke-dasharray: 1px,200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -125px;
+  }
+}
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13,31 +46,47 @@ Object {
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
-.emotion-2 {
+.emotion-3 {
+  display: inline-block;
+  color: #4b5e40;
+  -webkit-animation: animation-0 1.4s linear infinite;
+  animation: animation-0 1.4s linear infinite;
   color: #4b5e40;
 }
+.emotion-4 {
+  display: block;
+}
+.emotion-5 {
+  stroke: currentColor;
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: animation-1 1.4s ease-in-out infinite;
+  animation: animation-1 1.4s ease-in-out infinite;
+}
 <body>
     <div>
       <div
         class="emotion-0 emotion-1"
       >
-        <div
-          class="MuiCircularProgress-root emotion-2 emotion-3 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+        <span
+          class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary emotion-2 emotion-3"
           role="progressbar"
           style="width: 50px; height: 50px;"
         >
           <svg
-            class="MuiCircularProgress-svg"
+            class="MuiCircularProgress-svg emotion-4"
             viewBox="22 22 44 44"
           >
             <circle
-              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+              class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate emotion-5"
               cx="44"
               cy="44"
               fill="none"
@@ -45,11 +94,44 @@ Object {
               stroke-width="3.6"
             />
           </svg>
-        </div>
+        </span>
       </div>
     </div>
   </body>,
-  "container": .emotion-0 {
+  "container": @keyframes animation-0 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes animation-1 {
+  0% {
+    stroke-dasharray: 1px,200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -125px;
+  }
+}
+.emotion-0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -59,30 +141,46 @@ Object {
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
-.emotion-2 {
+.emotion-3 {
+  display: inline-block;
   color: #4b5e40;
+  -webkit-animation: animation-0 1.4s linear infinite;
+  animation: animation-0 1.4s linear infinite;
+  color: #4b5e40;
+}
+.emotion-4 {
+  display: block;
+}
+.emotion-5 {
+  stroke: currentColor;
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: animation-1 1.4s ease-in-out infinite;
+  animation: animation-1 1.4s ease-in-out infinite;
 }
 <div>
     <div
       class="emotion-0 emotion-1"
     >
-      <div
-        class="MuiCircularProgress-root emotion-2 emotion-3 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+      <span
+        class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary emotion-2 emotion-3"
         role="progressbar"
         style="width: 50px; height: 50px;"
       >
         <svg
-          class="MuiCircularProgress-svg"
+          class="MuiCircularProgress-svg emotion-4"
           viewBox="22 22 44 44"
         >
           <circle
-            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+            class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate emotion-5"
             cx="44"
             cy="44"
             fill="none"
@@ -90,7 +188,7 @@ Object {
             stroke-width="3.6"
           />
         </svg>
-      </div>
+      </span>
     </div>
   </div>,
   "debug": [Function],

package/src/components/Loading/__snapshots__/Loading.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 exports[`<Loading /> component should render the component in default state 1`] = `
+@keyframes animation-0 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes animation-1 {
+  0% {
+    stroke-dasharray: 1px,200px;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -15px;
+  }
+  100% {
+    stroke-dasharray: 100px,200px;
+    stroke-dashoffset: -125px;
+  }
+}
 .emotion-0 {
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
   top: 50%;
   left: 50%;
   position: absolute;
@@ -13,7 +47,7 @@ exports[`<Loading /> component should render the component in default state 1`]
 .emotion-2 {
   margin: 0 0 30px 0;
   border-radius: 25px;
-  box-shadow: 0 10px 20px 0 rgba(69,58,100,0.2);
+  box-shadow: 0 10px 20px 0 rgba(69, 58, 100, 0.2);
   background: #f7f8f6;
 }
@@ -21,7 +55,9 @@ exports[`<Loading /> component should render the component in default state 1`]
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
+  -webkit-background-position: center;
   background-position: center;
+  -webkit-background-size: contain;
   background-size: contain;
   background-image: url([object Object]);
   background-repeat: no-repeat;
@@ -39,13 +75,29 @@ exports[`<Loading /> component should render the component in default state 1`]
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
+  -webkit-justify-content: center;
   justify-content: center;
 }
-.emotion-8 {
+.emotion-9 {
+  display: inline-block;
   color: #4b5e40;
+  -webkit-animation: animation-0 1.4s linear infinite;
+  animation: animation-0 1.4s linear infinite;
+  color: #4b5e40;
+}
+.emotion-10 {
+  display: block;
+}
+.emotion-11 {
+  stroke: currentColor;
+  stroke-dasharray: 80px,200px;
+  stroke-dashoffset: 0;
+  -webkit-animation: animation-1 1.4s ease-in-out infinite;
+  animation: animation-1 1.4s ease-in-out infinite;
 }
 <div
@@ -62,17 +114,17 @@ exports[`<Loading /> component should render the component in default state 1`]
   <div
     class="emotion-6 emotion-7"
   >
-    <div
-      class="MuiCircularProgress-root emotion-8 emotion-9 MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+    <span
+      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary emotion-8 emotion-9"
       role="progressbar"
       style="width: 50px; height: 50px;"
     >
       <svg
-        class="MuiCircularProgress-svg"
+        class="MuiCircularProgress-svg emotion-10"
         viewBox="22 22 44 44"
       >
         <circle
-          class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+          class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate emotion-11"
           cx="44"
           cy="44"
           fill="none"
@@ -80,7 +132,7 @@ exports[`<Loading /> component should render the component in default state 1`]
           stroke-width="3.6"
         />
       </svg>
-    </div>
+    </span>
   </div>
 </div>
 `;

package/src/components/Loading/styles.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 export const Wrapper = styled('div')({
@@ -13,5 +12,5 @@ export const Badge = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   margin: '0 0 30px 0',
   borderRadius: 25,
   boxShadow: '0 10px 20px 0 rgba(69, 58, 100, 0.2)',
-  background: theme?.palette.type === 'dark' ? theme?.palette.black : '#f7f8f6',
+  background: theme?.palette.mode === 'dark' ? theme?.palette.black : '#f7f8f6',
 }));

package/src/components/Logo/Logo.test.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import React from 'react';
 import { render } from 'verdaccio-ui/utils/test-react-testing-library';
 import Logo from './Logo';

package/src/components/Logo/Logo.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import React from 'react';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import { useConfig } from 'verdaccio-ui/providers/config';
@@ -48,7 +47,7 @@ const StyledLogo = styled('div')<Props & { theme?: Theme }>(({ size = 'small', t
   boxSizing: 'border-box',
   backgroundPosition: 'center',
   backgroundSize: 'contain',
-  backgroundImage: `url(${logos[theme?.palette.type]})`,
+  backgroundImage: `url(${logos[theme?.palette.mode]})`,
   backgroundRepeat: ' no-repeat',
   width: sizes[size],
   height: sizes[size],

package/src/components/Logo/__snapshots__/Logo.test.tsx.snap CHANGED Viewed

@@ -5,7 +5,9 @@ exports[`<Logo /> component should render the component in default state 1`] = `
   display: inline-block;
   vertical-align: middle;
   box-sizing: border-box;
+  -webkit-background-position: center;
   background-position: center;
+  -webkit-background-size: contain;
   background-size: contain;
   background-image: url([object Object]);
   background-repeat: no-repeat;

package/src/components/Menu.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { default as MaterialUIMenu, MenuProps } from '@material-ui/core/Menu';
+import { default as MaterialUIMenu, MenuProps } from '@mui/material/Menu';
 import React, { forwardRef } from 'react';
 type MenuRef = HTMLDivElement;

package/src/components/MenuItem.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@mui/material/MenuItem';
 import React, { forwardRef } from 'react';
 type HTMLElementTagName = keyof HTMLElementTagNameMap;

package/src/components/NotFound/NotFound.tsx CHANGED Viewed

@@ -2,13 +2,11 @@ import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { Theme } from 'verdaccio-ui/design-tokens/theme';
 import Box from '../Box';
 import Button from '../Button';
 import Heading from '../Heading';
 import PackageImg from './img/package.svg';
 const NotFound: React.FC = () => {
@@ -47,6 +45,6 @@ const EmptyPackage = styled('img')({
 });
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.type === 'light' ? theme?.palette.primary.main : theme?.palette.white,
+  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
   marginBottom: 16,
 }));

package/src/components/NotFound/Notfound.test.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { render, fireEvent } from 'verdaccio-ui/utils/test-react-testing-library';
+import { fireEvent, render } from 'verdaccio-ui/utils/test-react-testing-library';
 import NotFound from './NotFound';

package/src/components/NotFound/__snapshots__/Notfound.test.tsx.snap CHANGED Viewed

@@ -2,42 +2,169 @@
 exports[`<NotFound /> component should load the component in default state 1`] = `
 .emotion-0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding: 16px;
+}
+.emotion-1 {
   width: 150px;
   margin: 0 auto;
 }
-.emotion-2 {
+.emotion-4 {
+  margin: 0;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 400;
+  font-size: 2.125rem;
+  line-height: 1.235;
   color: #4b5e40;
   margin-bottom: 16px;
 }
+.emotion-5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  position: relative;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+  background-color: transparent;
+  outline: 0;
+  border: 0;
+  margin: 0;
+  border-radius: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: inherit;
+  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  text-transform: uppercase;
+  min-width: 64px;
+  padding: 6px 16px;
+  border-radius: 4px;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #fff;
+  background-color: #4b5e40;
+  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
+}
+.emotion-5::-moz-focus-inner {
+  border-style: none;
+}
+.emotion-5.Mui-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+@media print {
+  .emotion-5 {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+}
+.emotion-5:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: rgb(52, 65, 44);
+  box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);
+}
+@media (hover: none) {
+  .emotion-5:hover {
+    background-color: #4b5e40;
+  }
+}
+.emotion-5:active {
+  box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12);
+}
+.emotion-5.Mui-focusVisible {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);
+}
+.emotion-5.Mui-disabled {
+  color: rgba(0, 0, 0, 0.26);
+  box-shadow: none;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.emotion-6 {
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+}
 <div
-  class="MuiBox-root MuiBox-root-1"
+  class="MuiBox-root emotion-0"
   data-testid="404"
 >
   <img
     alt="404 - Page not found"
-    class="emotion-0 emotion-1"
+    class="emotion-1 emotion-2"
     src="[object Object]"
   />
   <h4
-    class="MuiTypography-root not-found-text emotion-2 emotion-3 MuiTypography-h4"
+    class="MuiTypography-root MuiTypography-h4 not-found-text emotion-3 emotion-4"
   >
     Sorry, we couldn't find it...
   </h4>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+    class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root emotion-5"
     data-testid="not-found-go-to-home-button"
     tabindex="0"
     type="button"
   >
+    Go to the home page
     <span
-      class="MuiButton-label"
-    >
-      Go to the home page
-    </span>
-    <span
-      class="MuiTouchRipple-root"
+      class="MuiTouchRipple-root emotion-6"
     />
   </button>
 </div>

package/src/components/NotFound/styles.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
 import { PRIMARY_COLOR } from 'verdaccio-ui/utils/colors';
 import { default as MuiCard } from '../Card';

package/src/components/Paper.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { default as MaterialUIPaper, PaperProps } from '@material-ui/core/Paper';
+import { default as MaterialUIPaper, PaperProps } from '@mui/material/Paper';
 import React, { forwardRef } from 'react';
 type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/SnackbarContent.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import {
   default as MaterialUISnackbarContent,
   SnackbarContentProps,
-} from '@material-ui/core/SnackbarContent';
+} from '@mui/material/SnackbarContent';
 import React, { forwardRef } from 'react';
 type SnackbarContentRef = HTMLDivElement;

package/src/components/SvgIcon.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { default as MaterialUISvgIcon, SvgIconProps } from '@material-ui/core/SvgIcon';
+import { default as MaterialUISvgIcon, SvgIconProps } from '@mui/material/SvgIcon';
 import React from 'react';
 type Size = 'sm' | 'md';

package/src/components/Tab.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { default as MaterialUITab, TabProps } from '@material-ui/core/Tab';
+import { default as MaterialUITab, TabProps } from '@mui/material/Tab';
 import React, { forwardRef } from 'react';
 type TabRef = HTMLButtonElement;

package/src/components/Tabs.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
+import { default as MaterialUITabs, TabsProps } from '@mui/material/Tabs';
 import React, { forwardRef } from 'react';
 type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

package/src/components/Text/Text.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { default as MaterialUITypography } from '@material-ui/core/Typography';
+import { default as MaterialUITypography } from '@mui/material/Typography';
 import React, { forwardRef } from 'react';
 import { TextProps } from './TextConfig';

package/src/components/Text/TextConfig.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { TypographyProps } from '@material-ui/core/Typography';
+import { TypographyProps } from '@mui/material/Typography';
 type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';