@mw-kit/mw-ui 1.8.18 → 1.8.19

package/dist/assets/fonts/index.d.ts

@@ -43,9 +43,9 @@ export declare const assets: {
     };
 };
 declare const fonts: {
-    readonly Allura: "Allura";
-    readonly GreatVibes: "Great Vibes";
-    readonly Pacifico: "Pacifico";
+    readonly Allura: "\"Allura\", cursive";
+    readonly GreatVibes: "\"Great Vibes\", cursive";
+    readonly Pacifico: "\"Pacifico\", cursive";
     readonly Lato: "\"Lato\", sans-serif";
 };
 export default fonts;

package/dist/index.d.mts

@@ -31,76 +31,10 @@ type MappedTransitions<P extends string> = {
     };
 };
 
-declare const theme$1: {
-    readonly button: {
-        readonly sizes: {
-            tiny: {
-                fontSize: string;
-                lineHeight: string;
-                minWidth: string;
-                minHeight: string;
-            };
-            mini: {
-                fontSize: string;
-                lineHeight: string;
-                minWidth: string;
-                minHeight: string;
-            };
-            small: {
-                fontSize: string;
-                lineHeight: string;
-                minWidth: string;
-                minHeight: string;
-            };
-            large: {
-                fontSize: string;
-                lineHeight: string;
-                minWidth: string;
-                minHeight: string;
-            };
-            big: {
-                fontSize: string;
-                lineHeight: string;
-                minWidth: string;
-                minHeight: string;
-            };
-        };
-    };
-};
-
-type ColorOptions = keyof typeof colors;
-type OpacitiyOptions = keyof typeof opacities;
-type SpacingOptions = keyof typeof spacings;
-type FontOptions = keyof typeof fonts;
-type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-interface Typography {
-    fontFamily: FontOptions;
-    fontWeight: FontWeight;
-    fontSize: string;
-}
-type TypographyOptions = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
-type Typographies = {
-    [key in TypographyOptions]: Typography;
-};
-type useTypographyFunc = (typography: TypographyOptions, options?: {
-    fontWeight?: FontWeight;
-}) => RuleSet;
-interface ThemeInterface {
-    colors: typeof colors;
-    fonts: typeof fonts;
-    getColor: (color: ColorOptions, opacity?: OpacitiyOptions) => string;
-    useTypography: useTypographyFunc;
-    isDarkColor: (color: ColorOptions, ifDark?: ColorOptions, ifLight?: ColorOptions) => ColorOptions;
-    spacings: typeof spacings;
-    typographies: typeof typographies;
-    components: typeof theme$1;
-    assetUrl: (asset: string) => string;
-}
-
 declare const fonts: {
-    readonly Allura: "Allura";
-    readonly GreatVibes: "Great Vibes";
-    readonly Pacifico: "Pacifico";
+    readonly Allura: "\"Allura\", cursive";
+    readonly GreatVibes: "\"Great Vibes\", cursive";
+    readonly Pacifico: "\"Pacifico\", cursive";
     readonly Lato: "\"Lato\", sans-serif";
 };
 
@@ -172,7 +106,119 @@ declare const spacings: {
     readonly s6: "35px";
 };
 
-declare const typographies: Typographies;
+declare const typographies: {
+    readonly h1: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "18px";
+        readonly lineHeight: "22px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h2: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "16px";
+        readonly lineHeight: "19px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h3: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "16px";
+        readonly lineHeight: "19px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h4: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h5: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h6: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "13px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0px";
+    };
+    readonly p: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+};
+
+declare const theme$1: {
+    readonly button: {
+        readonly sizes: {
+            tiny: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            mini: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            big: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+        };
+    };
+};
+
+type ColorOptions = keyof typeof colors;
+type OpacitiyOptions = keyof typeof opacities;
+type SpacingOptions = keyof typeof spacings;
+type FontOptions = keyof typeof fonts;
+type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+interface Typography {
+    fontFamily: FontOptions;
+    fontWeight: FontWeight;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+}
+type TypographyOptions = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+interface ThemeInterface {
+    colors: typeof colors;
+    fonts: typeof fonts;
+    getColor: (color: ColorOptions, opacity?: OpacitiyOptions) => string;
+    useTypography: (typography: TypographyOptions, options?: Partial<Pick<Typography, 'fontWeight' | 'lineHeight' | 'letterSpacing'>>) => RuleSet;
+    isDarkColor: (color: ColorOptions, ifDark?: ColorOptions, ifLight?: ColorOptions) => ColorOptions;
+    spacings: typeof spacings;
+    typographies: typeof typographies;
+    components: typeof theme$1;
+    assetUrl: (asset: string) => string;
+}
 
 type Position = 'top right' | 'top left' | 'bottom right' | 'bottom left' | 'right top' | 'right bottom' | 'left top' | 'left bottom';
 interface References {

package/dist/index.js

@@ -212,9 +212,9 @@ var assets = {
   }
 };
 var fonts = {
-  Allura: "Allura",
-  GreatVibes: "Great Vibes",
-  Pacifico: "Pacifico",
+  Allura: '"Allura", cursive',
+  GreatVibes: '"Great Vibes", cursive',
+  Pacifico: '"Pacifico", cursive',
   Lato: '"Lato", sans-serif'
 };
 var fonts_default = fonts;
@@ -291,37 +291,51 @@ var typographies = {
   h1: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "18px"
+    fontSize: "18px",
+    lineHeight: "22px",
+    letterSpacing: "0px"
   },
   h2: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "16px"
+    fontSize: "16px",
+    lineHeight: "19px",
+    letterSpacing: "0px"
   },
   h3: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "16px"
+    fontSize: "16px",
+    lineHeight: "19px",
+    letterSpacing: "0px"
   },
   h4: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   },
   h5: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   },
   h6: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "13px"
+    fontSize: "13px",
+    lineHeight: "16px",
+    letterSpacing: "0px"
   },
   p: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   }
 };
 
@@ -1078,7 +1092,7 @@ var import_styled_components4 = __toESM(require("styled-components"));
 var Button = import_styled_components4.default.button`
   padding: 0
     ${({ theme: theme4, $appearance: appearance }) => appearance === "link" ? 0 : theme4.spacings.s3};
-  font-family: 'Lato', sans-serif;
+  font-family: ${({ theme: theme4 }) => theme4.fonts.Lato};
   font-weight: ${({ $appearance: appearance }) => appearance === "link" ? "normal" : "bold"};
   border-radius: 4px;
   position: relative;
@@ -1679,11 +1693,13 @@ var globals_default = Globals;
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var getColor = (color, opacity = 100) => `${colors[color]}${opacities[opacity]}`;
 var useTypography = (typography, options = {}) => {
-  const { fontFamily, fontWeight, fontSize } = typographies[typography];
+  const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographies[typography];
   return import_styled_components6.css`
-    font-family: ${fonts_default[fontFamily]};
-    font-weight: ${options.fontWeight || fontWeight};
+    font-family: ${fontFamily};
     font-size: ${fontSize};
+    font-weight: ${options.fontWeight || fontWeight};
+    line-height: ${options.lineHeight || lineHeight};
+    letter-spacing: ${options.letterSpacing || letterSpacing};
   `;
 };
 var isDarkColor = (color, ifDark = "white", ifLight = "black") => {
@@ -8947,8 +8963,9 @@ var ScrollContainer_default = ScrollContainer;
 // src/components/Menu/styles.ts
 var import_styled_components12 = __toESM(require("styled-components"));
 var Option = import_styled_components12.default.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};
   display: flex;
   gap: ${({ theme: theme4 }) => theme4.spacings.s1};
@@ -9219,8 +9236,9 @@ var Container5 = import_styled_components13.default.div`
 }};
 `;
 var LabelContainer = import_styled_components13.default.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 `;
 var CalendarContainer = import_styled_components13.default.div`
   border: 1px solid ${({ theme: theme4 }) => theme4.colors.lightestGrey};
@@ -9241,8 +9259,9 @@ var MonthContainer = import_styled_components13.default.div`
   }
 `;
 var MonthName = import_styled_components13.default.div`
-  ${({ theme: theme4 }) => theme4.useTypography("h6")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("h6", {
+  lineHeight: theme4.spacings.s3
+})}
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};
   text-align: center;
 `;
@@ -9260,8 +9279,9 @@ var MonthBtn = import_styled_components13.default.div`
 }}
 `;
 var NavBtn = import_styled_components13.default.button`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   width: 21px;
   height: 32px;
   box-shadow: none;
@@ -9445,8 +9465,9 @@ var WeekContainer = import_styled_components15.default.div`
   }
 
   > * {
-    ${({ theme: theme4 }) => theme4.useTypography("h6")}
-    line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+    ${({ theme: theme4 }) => theme4.useTypography("h6", {
+  lineHeight: theme4.spacings.s3
+})}
     width: 25px;
     height: 25px;
 
@@ -9988,15 +10009,11 @@ var Input = import_styled_components17.default.input`
   return invalid ? theme4.colors.warningRed : theme4.colors.darkBlue;
 }};
 
-  line-height: 17px;
-
   &::placeholder {
     color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkGrey;
 }};
 
-    line-height: 17px;
-
     ${({ placeholder }) => {
   if (placeholder !== "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022") {
     return import_styled_components17.css`
@@ -11166,8 +11183,9 @@ var Checkmark = import_styled_components22.default.div`
   }
 `;
 var Label2 = import_styled_components22.default.label`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 
   ${({ $padding: padding, theme: theme4 }) => {
   if (!padding) return;
@@ -11293,8 +11311,9 @@ var Label2 = import_styled_components22.default.label`
 `;
 var LabelContent = import_styled_components22.default.div`
   display: inline-block;
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   flex: 1;
   overflow: hidden;
 
@@ -11722,7 +11741,6 @@ var RelativeContainer3 = import_styled_components24.default.div`
 `;
 var LabelContainer3 = import_styled_components24.default.div`
   ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 17px;
   flex: 1;
 
   &:first-child {
@@ -12065,8 +12083,9 @@ var RelativeContainer4 = import_styled_components25.default.div`
   }
 `;
 var LabelContainer4 = import_styled_components25.default.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 `;
 var Container10 = import_styled_components25.default.div`
   position: absolute;
@@ -13326,8 +13345,7 @@ var NavBar_default = NavBar;
 
 // src/components/Input/components/Range/styles/Label/index.ts
 var Label5 = import_styled_components35.default.label`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: 17px;
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
 
   ${({ $width: width, $viewMode: viewMode }) => {
   if (width) {
@@ -14607,8 +14625,9 @@ var import_react38 = __toESM(require("react"));
 // src/components/Input/components/Switch/styles.ts
 var import_styled_components45 = __toESM(require("styled-components"));
 var LabelContainer7 = import_styled_components45.default.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   display: flex;
   align-items: center;
 
@@ -14783,21 +14802,18 @@ var import_react39 = __toESM(require("react"));
 // src/components/Input/components/Tags/components/Input/styles.ts
 var import_styled_components46 = __toESM(require("styled-components"));
 var Input4 = import_styled_components46.default.input`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
 
   color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkBlue;
 }};
 
-  line-height: 17px;
-
   &::placeholder {
     color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkGrey;
 }};
 
-    line-height: 17px;
-    ${({ theme: theme4 }) => theme4.useTypography("p")};
+    ${({ theme: theme4 }) => theme4.useTypography("p")}
     opacity: 1;
   }
 
@@ -14881,7 +14897,6 @@ var Label_default3 = Label9;
 var import_styled_components48 = __toESM(require("styled-components"));
 var Tag = import_styled_components48.default.div`
   ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 17px;
 
   background-color: ${({ theme: theme4 }) => theme4.colors.white};
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};

package/dist/index.mjs

@@ -154,9 +154,9 @@ var assets = {
   }
 };
 var fonts = {
-  Allura: "Allura",
-  GreatVibes: "Great Vibes",
-  Pacifico: "Pacifico",
+  Allura: '"Allura", cursive',
+  GreatVibes: '"Great Vibes", cursive',
+  Pacifico: '"Pacifico", cursive',
   Lato: '"Lato", sans-serif'
 };
 var fonts_default = fonts;
@@ -233,37 +233,51 @@ var typographies = {
   h1: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "18px"
+    fontSize: "18px",
+    lineHeight: "22px",
+    letterSpacing: "0px"
   },
   h2: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "16px"
+    fontSize: "16px",
+    lineHeight: "19px",
+    letterSpacing: "0px"
   },
   h3: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "16px"
+    fontSize: "16px",
+    lineHeight: "19px",
+    letterSpacing: "0px"
   },
   h4: {
     fontFamily: "Lato",
     fontWeight: "bold",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   },
   h5: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   },
   h6: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "13px"
+    fontSize: "13px",
+    lineHeight: "16px",
+    letterSpacing: "0px"
   },
   p: {
     fontFamily: "Lato",
     fontWeight: "normal",
-    fontSize: "14px"
+    fontSize: "14px",
+    lineHeight: "17px",
+    letterSpacing: "0px"
   }
 };
 
@@ -1020,7 +1034,7 @@ import styled3, { css as css4 } from "styled-components";
 var Button = styled3.button`
   padding: 0
     ${({ theme: theme4, $appearance: appearance }) => appearance === "link" ? 0 : theme4.spacings.s3};
-  font-family: 'Lato', sans-serif;
+  font-family: ${({ theme: theme4 }) => theme4.fonts.Lato};
   font-weight: ${({ $appearance: appearance }) => appearance === "link" ? "normal" : "bold"};
   border-radius: 4px;
   position: relative;
@@ -1621,11 +1635,13 @@ var globals_default = Globals;
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var getColor = (color, opacity = 100) => `${colors[color]}${opacities[opacity]}`;
 var useTypography = (typography, options = {}) => {
-  const { fontFamily, fontWeight, fontSize } = typographies[typography];
+  const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographies[typography];
   return css5`
-    font-family: ${fonts_default[fontFamily]};
-    font-weight: ${options.fontWeight || fontWeight};
+    font-family: ${fontFamily};
     font-size: ${fontSize};
+    font-weight: ${options.fontWeight || fontWeight};
+    line-height: ${options.lineHeight || lineHeight};
+    letter-spacing: ${options.letterSpacing || letterSpacing};
   `;
 };
 var isDarkColor = (color, ifDark = "white", ifLight = "black") => {
@@ -8889,8 +8905,9 @@ var ScrollContainer_default = ScrollContainer;
 // src/components/Menu/styles.ts
 import styled9, { css as css9 } from "styled-components";
 var Option = styled9.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};
   display: flex;
   gap: ${({ theme: theme4 }) => theme4.spacings.s1};
@@ -9161,8 +9178,9 @@ var Container5 = styled10.div`
 }};
 `;
 var LabelContainer = styled10.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 `;
 var CalendarContainer = styled10.div`
   border: 1px solid ${({ theme: theme4 }) => theme4.colors.lightestGrey};
@@ -9183,8 +9201,9 @@ var MonthContainer = styled10.div`
   }
 `;
 var MonthName = styled10.div`
-  ${({ theme: theme4 }) => theme4.useTypography("h6")};
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("h6", {
+  lineHeight: theme4.spacings.s3
+})}
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};
   text-align: center;
 `;
@@ -9202,8 +9221,9 @@ var MonthBtn = styled10.div`
 }}
 `;
 var NavBtn = styled10.button`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   width: 21px;
   height: 32px;
   box-shadow: none;
@@ -9387,8 +9407,9 @@ var WeekContainer = styled12.div`
   }
 
   > * {
-    ${({ theme: theme4 }) => theme4.useTypography("h6")}
-    line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+    ${({ theme: theme4 }) => theme4.useTypography("h6", {
+  lineHeight: theme4.spacings.s3
+})}
     width: 25px;
     height: 25px;
 
@@ -9930,15 +9951,11 @@ var Input = styled14.input`
   return invalid ? theme4.colors.warningRed : theme4.colors.darkBlue;
 }};
 
-  line-height: 17px;
-
   &::placeholder {
     color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkGrey;
 }};
 
-    line-height: 17px;
-
     ${({ placeholder }) => {
   if (placeholder !== "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022") {
     return css14`
@@ -11108,8 +11125,9 @@ var Checkmark = styled19.div`
   }
 `;
 var Label2 = styled19.label`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 
   ${({ $padding: padding, theme: theme4 }) => {
   if (!padding) return;
@@ -11235,8 +11253,9 @@ var Label2 = styled19.label`
 `;
 var LabelContent = styled19.div`
   display: inline-block;
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   flex: 1;
   overflow: hidden;
 
@@ -11664,7 +11683,6 @@ var RelativeContainer3 = styled21.div`
 `;
 var LabelContainer3 = styled21.div`
   ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 17px;
   flex: 1;
 
   &:first-child {
@@ -12007,8 +12025,9 @@ var RelativeContainer4 = styled22.div`
   }
 `;
 var LabelContainer4 = styled22.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: ${({ theme: theme4 }) => theme4.spacings.s3};
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
 `;
 var Container10 = styled22.div`
   position: absolute;
@@ -13268,8 +13287,7 @@ var NavBar_default = NavBar;
 
 // src/components/Input/components/Range/styles/Label/index.ts
 var Label5 = styled32.label`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
-  line-height: 17px;
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
 
   ${({ $width: width, $viewMode: viewMode }) => {
   if (width) {
@@ -14549,8 +14567,9 @@ import React34 from "react";
 // src/components/Input/components/Switch/styles.ts
 import styled42, { css as css32 } from "styled-components";
 var LabelContainer7 = styled42.div`
-  ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 14px;
+  ${({ theme: theme4 }) => theme4.useTypography("p", {
+  lineHeight: theme4.spacings.s3
+})}
   display: flex;
   align-items: center;
 
@@ -14725,21 +14744,18 @@ import React35 from "react";
 // src/components/Input/components/Tags/components/Input/styles.ts
 import styled43 from "styled-components";
 var Input4 = styled43.input`
-  ${({ theme: theme4 }) => theme4.useTypography("p")};
+  ${({ theme: theme4 }) => theme4.useTypography("p")}
 
   color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkBlue;
 }};
 
-  line-height: 17px;
-
   &::placeholder {
     color: ${({ theme: theme4, $invalid: invalid }) => {
   return invalid ? theme4.colors.warningRed : theme4.colors.darkGrey;
 }};
 
-    line-height: 17px;
-    ${({ theme: theme4 }) => theme4.useTypography("p")};
+    ${({ theme: theme4 }) => theme4.useTypography("p")}
     opacity: 1;
   }
 
@@ -14823,7 +14839,6 @@ var Label_default3 = Label9;
 import styled45 from "styled-components";
 var Tag = styled45.div`
   ${({ theme: theme4 }) => theme4.useTypography("p")}
-  line-height: 17px;
 
   background-color: ${({ theme: theme4 }) => theme4.colors.white};
   color: ${({ theme: theme4 }) => theme4.colors.darkBlue};

package/dist/theme/constants.d.ts

@@ -1,4 +1,3 @@
-import type { Typographies } from './interfaces';
 export declare const colors: {
     readonly black: "#000000";
     readonly blue: "#3455AB";
@@ -67,4 +66,54 @@ export declare const spacings: {
     readonly s6: "35px";
 };
 export { default as fonts } from '../assets/fonts';
-export declare const typographies: Typographies;
+export declare const typographies: {
+    readonly h1: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "18px";
+        readonly lineHeight: "22px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h2: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "16px";
+        readonly lineHeight: "19px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h3: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "16px";
+        readonly lineHeight: "19px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h4: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "bold";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h5: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+    readonly h6: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "13px";
+        readonly lineHeight: "16px";
+        readonly letterSpacing: "0px";
+    };
+    readonly p: {
+        readonly fontFamily: "Lato";
+        readonly fontWeight: "normal";
+        readonly fontSize: "14px";
+        readonly lineHeight: "17px";
+        readonly letterSpacing: "0px";
+    };
+};

package/dist/theme/interfaces.d.ts

@@ -10,19 +10,18 @@ interface Typography {
     fontFamily: FontOptions;
     fontWeight: FontWeight;
     fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
 }
 type TypographyOptions = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 export type Typographies = {
     [key in TypographyOptions]: Typography;
 };
-export type useTypographyFunc = (typography: TypographyOptions, options?: {
-    fontWeight?: FontWeight;
-}) => RuleSet;
 export interface ThemeInterface {
     colors: typeof colors;
     fonts: typeof fonts;
     getColor: (color: ColorOptions, opacity?: OpacitiyOptions) => string;
-    useTypography: useTypographyFunc;
+    useTypography: (typography: TypographyOptions, options?: Partial<Pick<Typography, 'fontWeight' | 'lineHeight' | 'letterSpacing'>>) => RuleSet;
     isDarkColor: (color: ColorOptions, ifDark?: ColorOptions, ifLight?: ColorOptions) => ColorOptions;
     spacings: typeof spacings;
     typographies: typeof typographies;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mw-kit/mw-ui",
-  "version": "1.8.18",
+  "version": "1.8.19",
   "description": "Made with create-react-library",
   "author": "fmgusmao",
   "license": "MIT",