mix theme with reducer theme

lib/components/theme.ts

@@ -292,6 +292,9 @@ export const penaMuiTheme = createTheme({
             defaultProps: {
                 variantMapping: {
                     p1: "p",
+                    t1: "p",
+                    "pena-h1": "h1",
+                    "pena-card-header1": "h5",
                 }
             },
         },
@@ -358,6 +361,40 @@ export const penaMuiTheme = createTheme({
                 }
             ],
         },
+        MuiSwitch: {
+            styleOverrides: {
+                root: {
+                    color: "#7E2AEA",
+                    height: "50px",
+                    width: "69px",
+                    "& .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track": {
+                        backgroundColor: "#7E2AEA",
+                        opacity: 1,
+                    },
+                },
+                track: {
+                    height: "12px",
+                    alignSelf: "center",
+                    backgroundColor: "#00000000",
+                    opacity: 1,
+                    border: "1px solid #9A9AAF",
+                },
+                thumb: {
+                    height: "32px",
+                    width: "32px",
+                    border: `6px solid #7E2AEA`,
+                    backgroundColor: "white",
+                    boxShadow: `0px 0px 0px 3px white,
+                                0px 4px 4px 3px #C3C8DD
+                    `,
+                    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+                        boxShadow: `0px 0px 0px 3px white,
+                                    0px 4px 4px 3px #C3C8DD
+                        `,
+                    },
+                },
+            },
+        },
     },
     typography: palette => ({
         h5: {
@@ -399,6 +436,12 @@ export const penaMuiTheme = createTheme({
             textDecorationLine: "line-through",
             color: palette.orange.main,
         },
+        t1: {
+            display: "block",
+            fontWeight: 400,
+            fontSize: "18px",
+            lineHeight: "21.33px",
+        }, 
         fontFamily: [
             "Rubik",
             "-apple-system",
@@ -414,6 +457,37 @@ export const penaMuiTheme = createTheme({
     }),
 });
 
+penaMuiTheme.typography["pena-h1"] = {
+    fontSize: "70px",
+    fontWeight: 500,
+    lineHeight: "100%",
+    [penaMuiTheme.breakpoints.down("md")]: {
+        fontSize: "36px",
+        lineHeight: "100%",
+    },
+};
+
+penaMuiTheme.typography["pena-h3"] = {
+    color: "#000000",
+    fontWeight: 500,
+    fontSize: "36px",
+    lineHeight: "100%",
+    [penaMuiTheme.breakpoints.down("md")]: {
+        fontSize: "30px",
+        lineHeight: "100%",
+    },
+};
+
+penaMuiTheme.typography["pena-card-header1"] = {
+    fontWeight: 500,
+    fontSize: "24px",
+    lineHeight: "100%",
+    [penaMuiTheme.breakpoints.down("md")]: {
+        fontSize: "21px",
+        lineHeight: "100%",
+    },
+};
+
 penaMuiTheme.typography.h2 = {
     fontSize: "70px",
     lineHeight: "70px",
@@ -483,12 +557,18 @@ declare module "@mui/material/styles" {
         p1: React.CSSProperties;
         price: React.CSSProperties;
         oldPrice: React.CSSProperties;
+        "pena-card-header1": React.CSSProperties;
+        "pena-h1": React.CSSProperties;
+        "pena-h3": React.CSSProperties;
     }
     interface TypographyVariantsOptions {
         infographic?: React.CSSProperties;
         p1?: React.CSSProperties;
         price?: React.CSSProperties;
         oldPrice?: React.CSSProperties;
+        "pena-card-header1"?: React.CSSProperties;
+        "pena-h1"?: React.CSSProperties;
+        "pena-h3"?: React.CSSProperties;
     }
 }
 
@@ -498,5 +578,15 @@ declare module "@mui/material/Typography" {
         p1: true;
         price: true;
         oldPrice: true;
+        t1: true;
+        "pena-card-header1": true;
+        "pena-h1": true;
+        "pena-h3": true;
+    }
+}
+
+declare module "@mui/material/Switch" {
+    interface SwitchPropsVariantOverrides {
+        "pena-switch": true;
     }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@frontend/kitui",
-    "version": "1.0.47",
+    "version": "1.0.48",
     "description": "test",
     "main": "./dist/index.js",
     "module": "./dist/index.js",
@@ -14,8 +14,7 @@
     ],
     "exports": {
         ".": {
-            "import": "./dist/index.js",
+            "import": "./dist/index.js"
-            "require": "./dist/index.umd.cjs"
         }
     },
     "scripts": {

src/App.tsx

@@ -109,6 +109,10 @@ export function App() {
                         page={1}
                     />}
                 />
+                <ComponentWithCode
+                    code={`<Typography variant="pena-h1">Some text</Typography>`}
+                    element={<Typography variant="pena-h1">Lorem ipsum dolor sit amet</Typography>}
+                />
                 <Typography variant="h4">Colors</Typography>
                 <Typography variant="body2">Click text to copy</Typography>
                 <Box sx={{